/* farms.css — «Фермы» on expato: the catalogue (/farms) and one page for every farm (farms/_entry.html).
   The page's own words: farm-gate signs on a straw verge and the green of Dutch farm shutters, over the site's
   paper, ink and type. Mobile first; 700 and 1000 are the two steps. The map is the site's one map (map.css). */

.fm { --straw: #F1E7C9; --straw2: #E6D7AC; --verge-line: rgba(122, 100, 70, .35); --green: #21452D; --green-ink: #21452D;
  --g-txt: #F5F2E7; --g-mut: rgba(245, 242, 231, .72); --g-line: rgba(245, 242, 231, .18); --sign: #FFFDF5; --sign-ink: #21452D;
  --wood: #7A6446; --line: rgba(var(--ink), .1); }
:root.dark .fm { --straw: #1E1C15; --straw2: #29261C; --verge-line: rgba(214, 196, 150, .22); --green: #1B3525; --green-ink: #A9D3B4;
  --g-line: rgba(245, 242, 231, .14); --wood: #8C7552; }
:where(.fm) :is(h1, h2, h3, p, ul, ol, figure, blockquote) { margin: 0; padding: 0; }
:where(.fm) :is(ul, ol) { list-style: none; }
.fm a:hover { color: inherit; }
.fm-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fm-kick { display: flex; align-items: center; gap: 10px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.fm-h2 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 500; line-height: 1.05; letter-spacing: -.04em; }
.fm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The site's column (.wrap in styles.css): bands run edge to edge, their content stops at 1600px like every page's. */
.fm-pad { max-width: 1600px; margin-left: auto; margin-right: auto; padding-left: 18px; padding-right: 18px; }

/* ── A farm-gate sign: a white board with a painted frame, on two posts. Used large on the road, small on a tile ── */
.fm-board { position: relative; z-index: 1; display: grid; place-items: center; min-height: 76px; padding: 14px 12px; border-radius: 7px; background: var(--sign); color: var(--sign-ink);
  box-shadow: inset 0 0 0 4px var(--sign), inset 0 0 0 6px var(--sign-ink), 0 14px 26px -16px rgba(33, 69, 45, .55); transform: rotate(var(--r, 0deg));
  font: 700 18px/1.08 Geologica, system-ui, sans-serif; letter-spacing: .015em; text-transform: uppercase; text-align: center; transition: transform .25s ease, background .2s, color .2s; }

/* ── First screen: the question, the sentence that answers it, the signs along the road ── */
.fm-hero { position: relative; background: var(--straw); padding-top: 40px; }
.fm-top { display: grid; row-gap: 24px; }
.fm-hero .fm-kick { color: var(--green-ink); opacity: .8; }
.fm-hero .fm-kick i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fm-hero h1 { margin-top: 18px; font-size: clamp(52px, 9.6vw, 116px); font-weight: 500; line-height: .93; letter-spacing: -.058em; color: var(--green-ink); }
.fm-say { font-size: clamp(24px, 3vw, 34px); line-height: 1.32; letter-spacing: -.025em; color: var(--txt); }
.fm-tok { font-weight: 500; color: var(--green-ink); border-bottom: 2px dashed currentColor; border-bottom-color: color-mix(in srgb, currentColor 45%, transparent); }
.fm-say [data-gally-choose] { font-weight: 500; color: var(--green-ink); border-bottom: 2px dashed color-mix(in srgb, currentColor 45%, transparent); }
.fm-say [data-gally-choose]:hover { border-bottom-style: solid; }
.fm-count { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 18px; font-size: 15px; color: var(--txt2); }
.fm-count b { font: 500 15px var(--mono); color: var(--green-ink); }
.fm-count .gally-reset, .fm-count [data-gally-reset] { margin-left: auto; font-size: 15px; font-weight: 500; color: var(--green-ink); border-bottom: 1px solid currentColor; }

/* The road scrolls sideways on a phone; the verge — the strip the posts stand in — is the scroller's own ground. */
.fm-road-wrap { margin-top: 40px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  background: linear-gradient(to top, var(--straw2) 64px, var(--verge-line) 64px, var(--verge-line) 67px, transparent 67px); }
.fm-road-wrap::-webkit-scrollbar { display: none; }
.fm-road { display: grid; grid-auto-flow: column; grid-auto-columns: 148px; column-gap: 14px; align-items: end; width: max-content; padding: 10px 18px 0; }
.fm-sign { position: relative; display: flex; flex-direction: column; align-items: stretch; scroll-snap-align: start; cursor: pointer; }
.fm-sign input { position: absolute; opacity: 0; pointer-events: none; }
.fm-posts { position: relative; height: var(--h, 64px); }
.fm-posts::before, .fm-posts::after { content: ""; position: absolute; top: -6px; bottom: 0; width: 8px; border-radius: 2px 2px 0 0; background: var(--wood); }
.fm-posts::before { left: 24%; } .fm-posts::after { right: 24%; }
.fm-road-wrap { scroll-padding-inline: 18px; }
.fm-under { display: block; height: 64px; padding-top: 12px; text-align: center; font-size: 14px; line-height: 1.25; color: var(--txt2); }
.fm-under small { margin-left: 6px; font: 500 12px var(--mono); color: var(--green-ink); opacity: .65; }
.fm-sign:hover .fm-board { transform: rotate(var(--r, 0deg)) translateY(-4px); }
.fm-sign:has(input:checked) .fm-board { background: var(--green); color: #FFFDF5; box-shadow: inset 0 0 0 4px var(--green), inset 0 0 0 6px #FFFDF5, 0 18px 30px -16px rgba(33, 69, 45, .8); }
.fm-sign:has(input:checked) .fm-under { font-weight: 600; color: var(--green-ink); }
.fm-sign:has(input:focus-visible) .fm-board { outline: 2px solid var(--acc); outline-offset: 4px; }
.fm-sign[data-gally-none] { opacity: .45; }

/* ── The farm year: a timeline with «сейчас», then what the farms say is on now, each with its date ── */
.fm-now { background: var(--green); color: var(--g-txt); }
.fm-now-in { padding-top: 64px; padding-bottom: 72px; }
.fm-now .fm-kick { color: var(--g-mut); }
.fm-now-head { display: grid; gap: 16px; }
.fm-now h2 { margin-top: 14px; font-size: clamp(38px, 5vw, 56px); font-weight: 500; line-height: 1; letter-spacing: -.045em; }
.fm-now-head > p { max-width: 420px; font-size: 16px; line-height: 1.5; color: var(--g-mut); }
.fm-year { position: relative; display: grid; row-gap: 18px; margin-top: 40px; --now: .75; }
.fm-yrs { display: grid; row-gap: 18px; }
.fm-yr { display: grid; row-gap: 8px; }
.fm-yr .lab { font-size: 15px; color: var(--g-txt); }
.fm-yr .lab small { display: block; font-size: 13px; color: var(--g-mut); }
.fm-yr a.lab:hover { color: #FFF; text-decoration: underline; text-underline-offset: 3px; }
.fm-trk { position: relative; height: 12px; border-radius: 6px; background: rgba(245, 242, 231, .08); }
.fm-trk i { position: absolute; top: 0; bottom: 0; left: calc((var(--a) - 1) / 12 * 100%); width: calc((var(--b) - var(--a) + 1) / 12 * 100%); border-radius: 6px; background: rgba(245, 242, 231, .85); }
.fm-yr.is-head .fm-mo { display: grid; grid-template-columns: repeat(12, 1fr); padding-bottom: 10px; border-bottom: 1px solid var(--g-line); }
.fm-mo span { font: 500 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--g-mut); }
.fm-mo span.is-now { color: #FFF; }
.fm-mo i { font-style: normal; }
.fm-mo .w { display: none; }
.fm-now-line { position: absolute; top: 0; bottom: -6px; left: calc(var(--now) * 100%); width: 2px; background: #FFF; pointer-events: none; }
.fm-now-line b { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); padding: 3px 8px; border-radius: 10px; background: #FFF; color: #21452D; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.fm-news { display: grid; gap: 28px; margin-top: 48px; }
.fm-news article + article { padding-top: 28px; border-top: 1px solid var(--g-line); }
.fm-news time { font: 500 13px var(--mono); letter-spacing: .04em; color: var(--g-mut); }
.fm-news h3 { margin-top: 12px; font-size: 22px; font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.fm-news p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--g-mut); }
.fm-news a { display: inline-block; margin-top: 12px; font-size: 15px; font-weight: 500; color: #FFF; border-bottom: 1px solid rgba(255, 255, 255, .4); }
.fm-news a:hover { color: #FFF; border-bottom-color: #FFF; }

/* ── The list beside the map ── */
.fm-list { padding-top: 72px; }
.fm-list-head { display: grid; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.fm-list-head h2 .of { color: var(--mut); }
.fm-tgl { display: flex; flex-wrap: wrap; gap: 8px; }
.fm-tgl > script { display: none; }
.fm-tgl > :is(button, label) { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 20px; background: var(--s1); border: 1px solid var(--line); font-size: 15px; color: var(--txt); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.fm-tgl > :is(button, label):hover { border-color: rgba(var(--ink), .35); }
.fm-tgl label input { position: absolute; opacity: 0; pointer-events: none; }
.fm-tgl small { font: 500 12px var(--mono); color: var(--mut); }
.fm-tgl label:has(input:checked), .fm-tgl button[aria-pressed="true"] { background: var(--txt); border-color: var(--txt); color: var(--bg); }
.fm-tgl label:has(input:checked) small { color: inherit; opacity: .7; }
.fm-tgl label:has(input:focus-visible), .fm-tgl button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.fm-tgl label[data-gally-none] { opacity: .45; }
.fm-body { display: grid; row-gap: 48px; padding-top: 28px; }

.fm-card { --pt: 0px; position: relative; padding-top: var(--pt); padding-bottom: 32px; }
.fm-card + .fm-card { --pt: 32px; border-top: 1px solid var(--line); }
.fm-card > a { display: grid; row-gap: 16px; }
.fm-pic { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: var(--s2); }
.fm-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fm-card > a:hover .fm-pic img { transform: scale(1.03); }
.fm-credit { position: absolute; left: 12px; bottom: 10px; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: rgba(255, 255, 255, .88); text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
/* No open photo: the farm's own sign on straw, and one number that is true about it. */
.fm-tile { display: grid; place-items: center; align-content: center; gap: 16px; height: 100%; background: var(--straw); }
.fm-tile .fm-board { min-height: 0; padding: 14px 22px; font-size: 22px; --r: -1.2deg; }
.fm-tile b { font: 500 14px var(--mono); letter-spacing: .02em; color: var(--green-ink); opacity: .8; }
.fm-card .x-fav.is-corner { top: calc(var(--pt) + 12px); right: 12px; }
.fm-meta { display: block; font: 500 11.5px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--mut); }
.fm-card h3 { margin-top: 8px; font-size: clamp(22px, 2.4vw, 26px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; transition: color .2s; }
.fm-card > a:hover h3 { color: var(--acc); }
.fm-card p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--txt2); max-width: 560px; }
.fm-why { display: block; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--green-ink); }
.fm-facts { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.fm-facts > span { display: grid; gap: 3px; font-size: 12px; color: var(--mut); }
.fm-facts b { font: 500 16px var(--mono); letter-spacing: -.02em; color: var(--txt); }
.fm-facts em { font-style: normal; }
.fm-today.is-closed b { color: var(--mut); }

.fm-others { margin-top: 8px; padding-top: 24px; border-top: 2px solid var(--txt); }
.fm-others[hidden] { display: none; }
.fm-others h3 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.fm-row[hidden] { display: none; }
.fm-row > a { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; column-gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fm-row .fm-pic { width: 64px; height: 64px; aspect-ratio: auto; border-radius: 12px; }
.fm-row .fm-tile .fm-board { padding: 5px 6px; font-size: 8.5px; box-shadow: inset 0 0 0 2px var(--sign), inset 0 0 0 3px var(--sign-ink); }
.fm-row strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; transition: color .2s; }
.fm-row > a:hover strong { color: var(--acc); }
.fm-row em { display: block; margin-top: 3px; font-size: 14px; font-style: normal; color: var(--mut); }
.fm-row .fm-row-end { text-align: right; font: 500 13px var(--mono); color: var(--txt2); }
.fm-none { padding: 32px 0; font-size: 17px; color: var(--txt2); }

/* The site's map, in the farm's colours: straw land, green dots. */
.fm .nl-map { --nl-dot: var(--green); }
:root.dark .fm .nl-map { --nl-dot: #A9D3B4; }
.fm .nl-map-land .land { fill: var(--straw); stroke: var(--verge-line); }
.fm-map { padding: 18px; border-radius: 24px; background: var(--s1); border: 1px solid var(--line); }
.fm-map-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.fm-map-head h3 { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.fm-map-head span { font-size: 14px; color: var(--mut); }

/* ── Words at the gate ── */
.fm-words { margin-top: 88px; }
.fm-words-head { display: grid; gap: 12px; }
.fm-words-head p { max-width: 400px; font-size: 16px; line-height: 1.5; color: var(--txt2); }
.fm-dict { display: grid; margin-top: 28px; border-top: 1px solid var(--line); }
.fm-dict div { padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.fm-dict b { display: block; font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: -.03em; color: var(--green-ink); }
.fm-dict span { display: block; margin-top: 6px; font-size: 16px; line-height: 1.45; color: var(--txt2); }
.fm-src { margin-top: 56px; margin-bottom: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; color: var(--txt2); }
.fm-src a { color: var(--acc); font-weight: 500; }

/* ════════ One farm's page ════════ */
.fe-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 18px; }
.fe-back { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--txt2); }
.fe-back:hover { color: var(--acc); }
.fe-fav { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 20px; border: 1px solid var(--line); background: var(--s1); font-size: 15px; color: var(--txt); cursor: pointer; transition: border-color .2s, color .2s; }
.fe-fav:hover { border-color: rgba(var(--ink), .35); }
.fe-fav[aria-pressed="true"] { color: var(--acc); border-color: rgba(var(--accr), .35); }
.fe-fav[aria-pressed="true"] .fm-ic { fill: currentColor; }
.fe-fav .on, .fe-fav[aria-pressed="true"] .off { display: none; }
.fe-fav[aria-pressed="true"] .on { display: inline; }

.fe-head { display: grid; row-gap: 28px; padding-top: 28px; }
.fe-head .fm-kick { color: var(--green-ink); }
.fe-head h1 { margin-top: 14px; font-size: clamp(40px, 6.4vw, 84px); font-weight: 500; line-height: .98; letter-spacing: -.05em; }
.fe-lead { margin-top: 14px; font-size: clamp(19px, 2vw, 22px); line-height: 1.4; color: var(--txt2); }
.fe-why { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.fe-why span { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 6px; background: var(--sign); color: var(--sign-ink); box-shadow: inset 0 0 0 2px var(--sign), inset 0 0 0 3.5px var(--sign-ink);
  font: 700 13px/1.1 Geologica, system-ui, sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.fe-today { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 17px; color: var(--txt); }
.fe-today::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #2F8F55; box-shadow: 0 0 0 4px rgba(47, 143, 85, .18); }
.fe-today.is-closed::before { background: var(--faint); box-shadow: 0 0 0 4px rgba(var(--ink), .08); }
.fe-today b { font-weight: 600; }
.fe-today[hidden] { display: none; }
.fe-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.fe-btn { height: 48px; display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; border-radius: 24px; font-size: 16px; font-weight: 500; transition: background .2s, color .2s, border-color .2s; }
.fe-btn-ink { background: var(--txt); color: var(--bg); }
.fe-btn-ink:hover { background: var(--acc); color: #FFF !important; }
.fe-btn-line { border: 1.5px solid var(--txt); color: var(--txt); }
.fe-btn-line:hover { background: rgba(var(--ink), .05); }
.fe-photo { position: relative; margin: 0; }
.fe-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; border-radius: 20px; object-fit: cover; }
.fe-photo .fm-tile { width: 100%; aspect-ratio: 4 / 3; height: auto; border-radius: 20px; }
.fe-photo .fm-tile .fm-board { font-size: clamp(26px, 3.4vw, 40px); padding: 20px 30px; }
.fe-photo .fm-tile b { font-size: 16px; }
.fe-photo figcaption { margin-top: 10px; font-size: 13px; color: var(--mut); }

/* Before the trip: the week as a strip with today lit, then the plain facts in cells. */
.fe-visit { margin-top: 56px; background: var(--straw); }
.fe-visit-in { padding-top: 48px; padding-bottom: 52px; }
.fe-visit .fm-kick { color: var(--green-ink); }
.fe-visit h2 { margin-top: 12px; }
.fe-week { display: grid; gap: 4px; margin-top: 28px; }
.fe-week > div { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 253, 245, .55); }
:root.dark .fe-week > div { background: rgba(255, 255, 255, .04); }
.fe-week em { font: 500 11px var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.fe-week b { font: 500 13px/1.25 var(--mono); letter-spacing: -.02em; color: var(--txt); word-break: break-word; }
.fe-week b:empty::before { content: "—"; color: var(--faint); }
.fe-week > div.is-today { background: var(--green); }
.fe-week > div.is-today em, .fe-week > div.is-today b { color: #FFFDF5; }
.fe-cells { display: grid; gap: 10px; margin-top: 16px; }
.fe-cell { padding: 18px 18px 20px; border-radius: 16px; background: rgba(255, 253, 245, .6); }
:root.dark .fe-cell { background: rgba(255, 255, 255, .04); }
.fe-cell h3 { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.fe-cell b { display: block; margin-top: 8px; font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.fe-cell p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--txt2); }
.fe-cell a { color: var(--green-ink); font-weight: 500; border-bottom: 1px solid currentColor; }
.fe-warn { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: rgba(200, 140, 30, .14); font-size: 15px; line-height: 1.5; color: var(--txt); }
.fe-warn b { font-weight: 600; }

/* What people do here: a programme, read across on a laptop, card by card on a phone. */
.fe-do { padding-top: 72px; }
.fe-do ol { margin-top: 24px; border-top: 1px solid var(--line); }
.fe-do li { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.fe-do li b { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.fe-do li span { font-size: 15px; line-height: 1.45; color: var(--txt2); }
.fe-do li .p { font: 500 15px var(--mono); color: var(--txt); }
.fe-do li .r { color: var(--green-ink); }

/* The shop: a list as on a farm shop's board. */
.fe-shop { padding-top: 72px; }
.fe-shop ul { margin-top: 24px; display: grid; gap: 1px; border-radius: 18px; overflow: hidden; background: var(--line); }
.fe-shop li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 16px 18px; background: var(--s1); font-size: 17px; line-height: 1.45; }
.fe-shop li::before { content: ""; width: 10px; height: 10px; margin-top: 8px; border-radius: 3px; background: var(--green); transform: rotate(45deg); }
:root.dark .fe-shop li::before { background: #A9D3B4; }

/* Numbers on the green, then the story beside them. */
.fe-figs { margin-top: 72px; background: var(--green); color: var(--g-txt); }
.fe-figs-in { padding-top: 56px; padding-bottom: 60px; display: grid; gap: 28px; }
.fe-figs .fm-kick { color: var(--g-mut); }
.fe-fig b { display: block; font: 500 clamp(52px, 7vw, 88px)/1 var(--mono); letter-spacing: -.06em; }
.fe-fig span { display: block; margin-top: 10px; font-size: 17px; color: var(--g-mut); }
.fe-story { padding-top: 64px; display: grid; gap: 18px; }
.fe-story h2 { margin-top: 12px; }
.fe-story-txt p { max-width: 68ch; font-size: 18px; line-height: 1.6; color: var(--txt2); }
.fe-story-txt { display: grid; gap: 16px; }
.fe-story-txt p:first-child { font-size: clamp(20px, 2.2vw, 24px); line-height: 1.45; color: var(--txt); }

/* Now at this farm: the dated notes, the same as on the catalogue. */
.fe-now { margin-top: 64px; padding: 28px 22px 30px; border-radius: 22px; background: var(--green); color: var(--g-txt); }
.fe-now .fm-kick { color: var(--g-mut); }
.fe-now .fm-news { margin-top: 18px; }

/* More farms, with the map. */
.fe-more { padding-top: 80px; display: grid; gap: 32px; }
.fe-more-list { display: grid; gap: 4px; align-content: start; }
.fe-more-list .fm-row:first-child > a { border-top: 1px solid var(--line); }
.fe-trust { margin-top: 64px; margin-bottom: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.fe-trust h3 { font-size: 18px; font-weight: 600; }
.fe-trust p { max-width: 68ch; font-size: 15px; line-height: 1.55; color: var(--txt2); }
.fe-trust p a { color: var(--acc); font-weight: 500; }
.fe-src { display: grid; gap: 4px; }
.fe-src a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px var(--mono); color: var(--mut); }
.fe-src a:hover { color: var(--acc); }

@media (min-width: 700px) {
  .fm-pad { padding-left: 32px; padding-right: 32px; }
  .fm-road { grid-auto-columns: 168px; column-gap: 16px; padding-left: 32px; padding-right: 32px; }
  .fm-board { font-size: 20px; min-height: 86px; }
  .fm-yr { grid-template-columns: 200px 1fr; column-gap: 20px; align-items: center; }
  .fm-yr.is-head .fm-mo { grid-column: 2; }
  .fm-mo .w { display: inline; }
  .fm-mo .s { display: none; }
  .fm-now-line { left: calc(220px + (100% - 220px) * var(--now)); }
  .fm-news { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .fm-news article { padding-right: 32px; }
  .fm-news article + article { padding-top: 0; padding-left: 32px; border-top: 0; border-left: 1px solid var(--g-line); }
  .fm-card > a { grid-template-columns: 260px 1fr; column-gap: 28px; align-items: start; }
  .fm-pic { aspect-ratio: 4 / 3; }
  .fm-card .x-fav.is-corner { left: 204px; right: auto; }
  .fm-dict { grid-template-columns: repeat(2, 1fr); }
  .fm-dict div:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--line); }
  .fe-cells { grid-template-columns: repeat(2, 1fr); }
  .fe-do li { grid-template-columns: 1.3fr 1.2fr 1fr 1fr; column-gap: 24px; align-items: baseline; }
  .fe-figs-in { grid-template-columns: repeat(3, 1fr); }
  .fe-figs-in > .fm-kick { grid-column: 1 / -1; }
  .fe-week { grid-template-columns: repeat(7, 1fr); gap: 8px; }
  .fe-week > div { grid-template-columns: none; align-content: start; align-items: start; min-height: 76px; padding: 10px 6px; text-align: center; }
  .fe-week b { font-size: 15px; }
  .fe-now { padding: 36px 36px 40px; }
}
@media (min-width: 1000px) {
  .fm-pad { padding-left: 40px; padding-right: 40px; }
  .fm-hero { padding-top: 72px; }
  .fm-top { grid-template-columns: 7fr 5fr; column-gap: 56px; align-items: end; }
  .fm-road-wrap { margin-top: 64px; overflow: visible; }
  .fm-road { grid-auto-flow: row; grid-template-columns: repeat(7, 1fr); width: auto; max-width: 1600px; margin: 0 auto; padding-left: 40px; padding-right: 40px; column-gap: 18px; }
  .fm-board { font-size: 21px; min-height: 92px; }
  .fm-under { padding-top: 16px; white-space: nowrap; font-size: 16px; }
  .fm-now-in { padding-top: 88px; padding-bottom: 96px; }
  .fm-now-head { grid-template-columns: 1fr auto; align-items: end; }
  .fm-yr { grid-template-columns: 220px 1fr; }
  .fm-list { padding-top: 104px; }
  .fm-list-head { grid-template-columns: 1fr auto; align-items: end; }
  .fm-body { grid-template-columns: 1fr 460px; column-gap: 48px; align-items: start; padding-top: 36px; }
  .fm-map { position: sticky; top: 88px; padding: 24px; }
  .fm-card > a { grid-template-columns: 300px 1fr; column-gap: 32px; }
  .fm-card .x-fav.is-corner { left: 244px; }
  .fm-words { margin-top: 120px; }
  .fm-words-head { grid-template-columns: 1fr auto; align-items: end; }
  .fm-dict { grid-template-columns: repeat(3, 1fr); }
  .fm-dict div { padding: 28px 32px 30px 0; }
  .fm-dict div:nth-child(even) { padding-left: 0; border-left: 0; }
  .fm-dict div:not(:nth-child(3n+1)) { padding-left: 32px; border-left: 1px solid var(--line); }
  .fm-src { margin-top: 72px; }
  .fe-head { grid-template-columns: 6fr 5fr; column-gap: 56px; align-items: center; padding-top: 40px; }
  .fe-visit { margin-top: 80px; }
  .fe-visit-in { padding-top: 64px; padding-bottom: 72px; }
  .fe-cells { grid-template-columns: repeat(3, 1fr); }
  .fe-do, .fe-shop { padding-top: 96px; }
  .fe-figs { margin-top: 96px; }
  .fe-story { grid-template-columns: 1fr 1fr; column-gap: 56px; align-items: start; }
  .fe-more { grid-template-columns: 1fr 420px; column-gap: 48px; align-items: start; }
  .fe-now { display: grid; grid-template-columns: 240px 1fr; column-gap: 32px; align-items: start; }
  .fe-now .fm-news { margin-top: 0; grid-template-columns: repeat(2, 1fr); }
  .fe-now .fm-news article:first-child { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fm-board, .fm-pic img, .fm-card h3 { transition: none !important; }
  .fm-sign:hover .fm-board { transform: rotate(var(--r, 0deg)); }
}