/* =========================================================
   Inner pages (Plan Your Visit, Christmas Trees, Farm Map, The Lodge,
   Music & Events, Our Story). Loaded after base.css, which the build copies
   from Home v3 so tokens, fonts, header, footer and phone bar match exactly.
   Layout mirrors the Figma frames (desktop 1440, phone 390).
   ========================================================= */
body { background: var(--snow); }

/* Current page in the menu */
.nav a[aria-current="page"] { color: var(--link); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* ---------- Page hero ---------- */
.page-hero { position: relative; height: clamp(460px, 40vw, 580px); /* Jeff 2026-11-04: less empty photo above the heading (was clamp(520px, 56vw, 800px)) */ overflow: hidden; color: var(--on-photo); background: var(--fir); }
.page-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 80%;
  background: linear-gradient(to top, rgba(29,59,57,.95) 0%, rgba(29,59,57,.78) 45%, rgba(29,59,57,.45) 75%, rgba(29,59,57,0) 100%);
}
.page-hero__copy { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 132px; z-index: 2; max-width: 900px; }
.page-hero h1 { font-size: clamp(48px, 6.6vw, 96px); line-height: 1; letter-spacing: -0.02em; }
.page-hero p { margin-top: 24px; font-size: 20px; max-width: 46ch; }
.page-hero .hill { color: var(--hill, var(--snow)); }

/* ---------- Sections ---------- */
.sec { padding-block: 120px; background: var(--snow); }
/* Client round 3: less space between the hero and the first section */
.page-hero + .sec { padding-top: 40px; }
.sec--bone { background: var(--bone); }
.sec--fir { background: var(--fir); color: var(--on-brand); }
.sec--fir .muted, .sec--fir .caption { color: var(--on-brand); }
.sec h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; }
.sec h3 { font-size: 26px; line-height: 1.2; }
.lede { font-size: 20px; color: var(--muted); max-width: 62ch; }
.muted { color: var(--muted); }
.caption { font-size: 15px; color: var(--muted); }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-content: start; }
.stack--tight { gap: 12px; }
.sec-head { display: grid; gap: 16px; margin-bottom: 48px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.split--top { align-items: start; }
.split > *, .map-wrap > *, .faq-wrap > *, .detail-card > * { min-width: 0; }
.split--price { grid-template-columns: auto minmax(0, 1fr); }
.split--wide-left { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.split--narrow-left { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 96px; }
.bleed-left { padding-left: 0; }
.photo { margin: 0; overflow: hidden; background: var(--bone); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--tall { aspect-ratio: 4 / 5; }
.photo--wide { aspect-ratio: 4 / 3; }
.photo--land { aspect-ratio: 16 / 11; }
.btn--inline { display: inline-flex; padding-inline: 26px; width: fit-content; }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn--ghost:hover { background: var(--bone); }
.sec--fir .btn--ghost { color: var(--on-brand); border-color: var(--on-brand); }
.actions { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }

/* Labelled photo gap (client photo still needed) */
.ph { display: flex; align-items: flex-end; padding: 22px; border: 1.5px dashed var(--rule); background: var(--bone); font-weight: 600; font-size: 16px; color: var(--ink); }
.sec--bone .ph { background: var(--snow); }
.sec--fir .ph { background: rgba(244,241,234,.08); border-color: rgba(244,241,234,.5); color: var(--on-brand); }

/* Sign plates (Barlow, the farm-sign voice) */
.plate { background: var(--bark); color: #F4F1EA; padding: 6px 14px; font-family: var(--sign); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; width: fit-content; line-height: 1.15; }
.plate--num { font-size: 24px; min-width: 56px; text-align: center; }
.plate--big { padding: 24px 36px; max-width: 100%; }
.plate--big b, .plate--big span { overflow-wrap: anywhere; }
.plate--big b { display: block; font-size: clamp(64px, 7vw, 108px); line-height: 1; }
.plate--big span { display: block; font-size: 16px; margin-top: 6px; }

/* Numbered steps */
.numbered { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.numbered li { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.numbered h3 { font-size: 26px; margin-bottom: 6px; }
.numbered p { color: var(--muted); }
.sec--fir .numbered p { color: var(--on-brand); }

/* Fact columns with a heavy top rule */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.facts > div { border-top: 2px solid var(--ink); padding-top: 20px; display: grid; gap: 10px; align-content: start; }
.facts .sign { font-size: 26px; }
.facts p { white-space: pre-line; font-size: 20px; }
.facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Glance strip (Plan Your Visit) */
.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.glance > div { padding-inline: 28px; border-left: 1px solid var(--rule); display: grid; gap: 10px; align-content: start; }
.glance > div:first-child { padding-left: 0; border-left: 0; }
.glance .sign { font-size: 40px; line-height: 1; }
.glance p { font-size: 17px; color: var(--muted); }

/* Ruled lists */
.ruled { list-style: none; margin: 0; padding: 0; }
.ruled li { border-top: 1px solid var(--rule); padding-block: 16px; }
.sec--fir .ruled li { border-color: rgba(244,241,234,.28); }
.ruled h3 { font-size: 22px; margin-bottom: 4px; }

/* Choice chips */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { min-height: 48px; padding: 0 18px; border: 1.5px solid var(--ink); background: var(--snow); color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; border-radius: 2px; display: inline-flex; align-items: center; gap: 8px; }
.chip[aria-pressed="true"] { background: var(--bark); border-color: var(--bark); color: #F4F1EA; }
.chip[aria-pressed="true"]::before { content: "✓"; }
.chip:hover { border-color: var(--link); }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; min-width: 0; }
legend { font-family: var(--serif); font-size: 26px; padding: 0; margin-bottom: 14px; }

/* Result / sign boards */
.result { background: var(--bark); color: #F4F1EA; padding: 36px; display: grid; gap: 16px; align-content: start; box-shadow: 0 30px 60px -30px rgba(20,18,16,.55); }
.result .sign { font-size: 40px; line-height: 1.05; }
.result p { font-size: 19px; }
.result dl { margin: 0; display: grid; }
.result dl div { display: grid; grid-template-columns: 70px 1fr; gap: 14px; padding-block: 12px; border-top: 1px solid rgba(244,241,234,.28); }
.result dt { font-family: var(--sign); font-weight: 600; letter-spacing: .06em; font-size: 16px; text-transform: uppercase; padding-top: 2px; }
.result dd { margin: 0; font-size: 17px; }
.result .link { color: #F4F1EA; }

/* Tree profiles */
.profiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 40px; }
.profile { display: grid; gap: 16px; align-content: start; scroll-margin-top: 24px; }
.profile .photo, .profile .ph { aspect-ratio: 4 / 3; }
/* Tree photos are tall; show the whole photo, never crop the tree's top (Jenny, 2026-10-31) */
.profile .photo { aspect-ratio: 3 / 4; }
.profile .photo img { object-fit: contain; }
.profile .plate { font-size: 24px; }
.attrs { margin: 0; }
.attrs div { display: grid; grid-template-columns: 116px 1fr; gap: 16px; padding-block: 10px; border-top: 1px solid var(--rule); }
.attrs dt { font-size: 15px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
.attrs dd { margin: 0; font-size: 17px; }

/* Price rows */
.rows { margin: 0; }
.rows div { display: flex; justify-content: space-between; gap: 16px; padding-block: 14px; border-top: 1px solid var(--rule); }
.rows dt { font-weight: 600; }
.rows dd { margin: 0; color: var(--muted); text-align: right; }

/* FAQ */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 96px; align-items: start; }
.faq-wrap h2 { font-size: clamp(40px, 4.4vw, 64px); }
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding-block: 24px; font-family: var(--serif); font-size: 24px; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-size: 28px; font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: 24px; color: var(--muted); max-width: 64ch; }

/* Next stops */
.next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
/* Link cards are text only (2026-10-07) so no photo repeats from page to page */
.next a { text-decoration: none; display: grid; gap: 12px; align-content: start; border-top: 1.5px solid var(--rule); padding-top: 24px; }
.next .photo { aspect-ratio: 4 / 3; }
.next h3 { font-size: 28px; }
.next p { color: var(--muted); }
.next .link { justify-self: start; }
.next a:hover h3 { color: var(--link); }

/* Farm map sketch */
.map-wrap { display: grid; grid-template-columns: minmax(0, 860px) minmax(0, 1fr); gap: 48px; align-items: start; }
.map-scroll { overflow: auto; background: #C9D3C4; }
.map-scroll svg { display: block; width: 860px; max-width: none; height: auto; }
.legend { list-style: none; margin: 0; padding: 0; }
.legend li { display: grid; grid-template-columns: 32px 1fr; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--rule); }
.pin { width: 32px; height: 32px; border-radius: 50%; background: var(--ember); color: #F4F1EA; display: grid; place-items: center; font-family: var(--sign); font-weight: 600; font-size: 16px; }
.pin--rust { background: #9A4A2A; }
.legend b { display: block; }
.legend div span { font-size: 15px; color: var(--muted); }

/* Menu board */
.menu-board { background: var(--bark); color: #F4F1EA; padding: 40px 44px; }
.menu-board .sign { font-size: 40px; display: block; margin-bottom: 16px; }
.menu-board div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; padding-block: 14px; border-top: 1px solid rgba(244,241,234,.35); font-family: var(--sign); font-weight: 600; font-size: 24px; text-transform: uppercase; letter-spacing: .04em; }

/* Calendar */
.cals { display: grid; grid-template-columns: repeat(2, minmax(0, 520px)); gap: 64px; }
.cal h3 { font-family: var(--sign); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 24px; margin-bottom: 12px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-grid .dow { text-align: center; font-size: 15px; font-weight: 600; color: var(--muted); padding-block: 4px; }
.day { aspect-ratio: 1 / 1; display: grid; place-items: center; font-size: 17px; }
.day--out { color: var(--muted); opacity: .6; }
.day--closed { border: 1px solid var(--rule); color: var(--muted); }
.day--open { background: var(--bone); }
.day--music { background: var(--ember); color: var(--on-accent); font-weight: 700; }
.day--opening { background: var(--bark); color: #F4F1EA; font-weight: 700; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; padding: 0; margin: 32px 0 0; font-size: 15px; }
.cal-legend li { display: flex; gap: 8px; align-items: center; }
.cal-legend i { width: 20px; height: 20px; display: inline-block; }
.shows { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.shows li { background: var(--bone); padding: 16px; display: grid; grid-template-columns: 58px 1fr; gap: 16px; align-items: center; }
.date-plate { background: var(--bark); color: #F4F1EA; text-align: center; padding: 8px 0; font-family: var(--sign); font-weight: 600; line-height: 1.05; }
.date-plate span { display: block; font-size: 15px; letter-spacing: .06em; }
.date-plate b { display: block; font-size: 32px; }
.shows h4 { font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 0 0 4px; }
.shows p { font-size: 15px; color: var(--muted); }
.detail-card { background: var(--snow); border: 1px solid var(--rule); padding: 32px; display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 48px; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 150px 1fr; gap: 32px; padding-block: 28px; border-top: 2px solid var(--ink); }
.timeline .plate { font-size: 16px; align-self: start; }
.timeline .plate--year { font-size: 40px; }
.timeline h3 { margin-bottom: 8px; }

/* Quote placeholder */
.quote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1.3; }

/* Season panels + gallery */
.seasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.seasons .photo { aspect-ratio: 4 / 5; margin-bottom: 14px; }
.seasons h3 { font-size: 24px; margin-bottom: 6px; }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 0; margin: 0; }
.gallery figure { margin: 0; }
.gallery .photo { aspect-ratio: 3 / 4; margin-bottom: 10px; }
.gallery figcaption { font-size: 15px; color: var(--muted); }

/* Drive-time tabs */
.tabs [role="tablist"] { display: flex; border-bottom: 1px solid var(--rule); overflow-x: auto; }
.tabs [role="tab"] { flex: 1 0 auto; min-height: 48px; padding: 0 18px; background: none; border: 0; border-bottom: 3px solid transparent; font: inherit; font-size: 16px; color: var(--ink); cursor: pointer; }
.tabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--bark); font-weight: 600; }
.tabs [role="tabpanel"] { background: var(--bone); padding: 28px; display: grid; gap: 12px; }
.tabs .sign { font-size: 40px; }

/* Rules sign */
.no-cut { background: #EAE3D5; color: #22211F; border: 6px solid var(--bark); padding: 28px 36px; transform: rotate(-3deg); width: fit-content; box-shadow: 0 24px 40px -24px rgba(0,0,0,.6); }
.no-cut b { display: block; font-family: var(--sign); font-weight: 600; font-size: clamp(48px, 5vw, 76px); line-height: .95; text-transform: uppercase; }
.no-cut span { display: block; font-family: var(--sign); font-weight: 600; font-size: 30px; text-transform: uppercase; }

/* Newsletter band (Music & Events) */
.signup { display: grid; gap: 12px; }
.signup .row { display: flex; gap: 12px; }
.signup input { flex: 1; min-height: 52px; padding: 0 16px; border: 0; border-radius: 2px; font: inherit; font-size: 17px; background: #F4F1EA; color: #22211F; }
.signup .btn { border: 0; padding-inline: 28px; cursor: pointer; font-family: inherit; }

/* Things to do (Plan Your Visit): map panel beside a list of activities */
.todo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.todo > *, .todo__map > * { min-width: 0; }
.todo__map { display: grid; gap: 16px; position: sticky; top: 112px; }
.todo__map .link { justify-self: start; }
.todo__list { list-style: none; margin: 0; padding: 0; }
.todo__list li { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 24px; align-items: center; padding-block: 20px; border-top: 1px solid var(--rule); }
.todo__list li:last-child { border-bottom: 1px solid var(--rule); }
.todo__list .photo { aspect-ratio: 4 / 3; }
.todo__list .ph { aspect-ratio: 4 / 3; padding: 10px; font-size: 15px; }
.todo__list div { display: grid; gap: 6px; }
.todo__list p { color: var(--muted); }
.todo__list .link { justify-self: start; }

/* Music schedule list */
.sched-when { font-size: 26px; color: var(--link); }
.sched { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.sched li { display: grid; grid-template-columns: 132px minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding-block: 16px; border-bottom: 1px solid var(--rule); }
.sched .date-plate { padding: 10px 0; }
.sched .date-plate b { font-size: 26px; text-transform: uppercase; letter-spacing: .03em; }
.sched h3 { font-size: 28px; }
.sched p { color: var(--muted); font-size: 18px; }

/* Private event types */
.event-types li { font-family: var(--serif); font-size: 24px; }

/* Forms (contact + event request). Preview only until a form tool is connected. */
.form { display: grid; gap: 18px; background: var(--snow); border: 1px solid var(--rule); padding: 32px; }
.sec:not(.sec--bone) .form { background: var(--bone); border-color: transparent; }
.form p { display: grid; gap: 6px; margin: 0; }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.form label { font-weight: 600; font-size: 16px; }
.form input, .form select, .form textarea { width: 100%; min-height: 50px; padding: 10px 14px; border: 1.5px solid var(--ink); border-radius: 2px; background: #fff; color: #22211F; font: inherit; font-size: 17px; }
.form textarea { resize: vertical; }
.form .btn { border: 0; cursor: pointer; font-family: inherit; }
.form .caption { display: block; }

/* Contact page */
.contact-list { margin: 0; }
.contact-list div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; padding-block: 18px; border-top: 1px solid var(--rule); }
.contact-list div:first-child { border-top: 2px solid var(--ink); }
.contact-list dt { font-family: var(--sign); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 22px; }
.contact-list dd { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.map-embed { aspect-ratio: 4 / 3; background: var(--snow); border: 1px solid var(--rule); }
.map-embed iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Our Story intro paragraph (client copy) */
.story-intro { max-width: 78ch; color: var(--ink); }

/* ---------- Tablet ---------- */
@media (max-width: 1200px) {
  .profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-wrap { grid-template-columns: 1fr; }
  .split--narrow-left { grid-template-columns: 1fr; gap: 48px; }
  .split--narrow-left > .stack > .ph { max-width: 520px; }
  .timeline li { grid-template-columns: 130px 1fr; gap: 24px; }
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .glance > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .todo { gap: 40px; }
  .todo__list li { grid-template-columns: 120px minmax(0, 1fr); gap: 18px; }
}

/* ---------- Phone ---------- */
@media (max-width: 900px) {
  .sec { padding-block: 64px; }
  .page-hero { height: 400px; } /* was 480px (Jeff 2026-11-04) */
  .page-hero__copy { bottom: 80px; }
  .page-hero h1 { font-size: 44px; }
  .page-hero p { font-size: 17px; margin-top: 14px; }
  .sec h3 { font-size: 23px; }
  .lede { font-size: 18px; }
  .split, .split--wide-left, .split--narrow-left, .faq-wrap, .detail-card, .todo { grid-template-columns: 1fr; gap: 32px; }
  .page-hero + .sec { padding-top: 28px; }
  .todo__map { position: static; }
  .todo__list li { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; }
  .sched li { grid-template-columns: 96px minmax(0, 1fr); gap: 4px 18px; }
  .sched .date-plate { grid-row: span 2; }
  .sched .date-plate b { font-size: 22px; }
  .sched h3 { font-size: 23px; align-self: end; }
  .sched p { align-self: start; font-size: 17px; }
  .form { padding: 22px 18px; }
  .form__row { grid-template-columns: 1fr; }
  .contact-list div { grid-template-columns: 1fr; gap: 4px; }
  .split--photo-last > .photo { order: 2; }
  .split--price { grid-template-columns: 1fr; }
  .sec--flush-phone .split > .stack { padding: 48px var(--gutter) 64px !important; }
  .sec--flush-phone .split > .photo { min-height: 320px !important; }
  .sec--flush-phone { padding-top: 0; }
  .facts, .facts--3 { grid-template-columns: 1fr; gap: 20px; }
  .glance { grid-template-columns: 1fr; row-gap: 24px; }
  .glance > div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); padding-top: 18px; }
  .glance > div:first-child { border-top: 0; padding-top: 0; }
  .glance .sign { font-size: 34px; }
  .profiles, .next, .seasons, .gallery, .cals { grid-template-columns: 1fr; gap: 40px; }
  .shows { grid-template-columns: 1fr; gap: 12px; }
  .timeline li { grid-template-columns: 112px 1fr; gap: 16px; }
  .timeline .plate--year { font-size: 30px; }
  .faq summary { font-size: 21px; }
  .gallery { grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .gallery li { scroll-snap-align: start; }
  .result { padding: 24px 20px; }
  .menu-board { padding: 24px 20px; }
  .menu-board div { font-size: 20px; }
  .signup .row { flex-direction: column; }
  .quote { font-size: 24px; }
  .no-cut { padding: 20px 24px; }
  .detail-card { padding: 20px; }
  .map-scroll { max-height: 460px; }
  main { padding-bottom: 0; }
}

/* ---------- Very small phones ---------- */
@media (max-width: 400px) {
  .plate--big b { font-size: 40px !important; }
}

/* Round 4 (2026-10-16) */
.checklist li { position: relative; padding-left: 40px; }
.checklist li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 20px; height: 20px; border: 2px solid var(--fir); border-radius: 4px; }
.checklist li::after { content: ""; position: absolute; left: 9px; top: 22px; width: 6px; height: 11px; border: solid var(--fir); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.rules-media { display: grid; gap: 0; justify-items: start; }
.rules-media .photo { aspect-ratio: 4 / 5; width: 100%; max-width: 520px; margin: 0; }
.rules-media .no-cut { margin-top: -56px; margin-left: 24px; position: relative; z-index: 2; }
.letter { display: grid; gap: 16px; }
.letter p { color: var(--on-brand); max-width: 62ch; }
.split:has(.letter) { align-items: start; }
.split:has(.letter) > .photo { position: sticky; top: 112px; }
@media (max-width: 900px) { .split:has(.letter) > .photo { position: static; } }

/* ---------- Interactive farm map (2026-10-22, drawn from the farm's sketch) ---------- */
.fmap { display: grid; gap: 18px; }
.fmap > *, .fmap__bar > * { min-width: 0; max-width: 100%; }
.fmap__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.fmap__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn {
  font: 600 16px/1 var(--sans); min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--bone); color: var(--ink); cursor: pointer; transition: background .2s ease, color .2s ease, transform .15s ease;
}
.chip-btn:hover { background: color-mix(in oklab, var(--bone), var(--ink) 10%); }
.chip-btn:active { transform: scale(.97); }
.chip-btn[aria-pressed="true"] { background: var(--fir); color: #F4F1EA; }
.fmap__count { font-size: 16px; color: var(--muted); min-height: 1.5em; }
.fmap__count:empty { min-height: 0; }
.fmap__stage {
  position: relative; height: min(84vh, 900px); min-height: 420px; overflow: hidden; border-radius: 4px;
  background: #DDE8CB; outline-offset: 4px;
}
.is-live .fmap__stage { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.fmap__stage.is-drag { cursor: grabbing; }
.fmap__stage > svg { display: block; width: 100%; height: 100%; }
#farm-map-svg text { font-family: var(--sign); }
#farm-map-svg .area { cursor: pointer; transition: opacity .25s ease; }
#farm-map-svg .area.is-dim { opacity: .16; }
.area__ground { fill: #CBDBB1; transition: fill .2s ease; }
.area--trees:hover .area__ground, .area--trees.is-active .area__ground { fill: #BED3A0; }
.area--babies .area__ground { fill: #E8E5CB; }
.area__nocut { fill: none; stroke: #B24A1C; stroke-width: 3; stroke-dasharray: 10 8; }
.field { fill: #EEF3E2; }
.area--field:hover .field { fill: #F4F7EC; }
.lane { fill: none; stroke: #F1E9D3; stroke-width: 16; stroke-linejoin: round; stroke-linecap: round; }
.lane-edge { fill: none; stroke: #D3C6A6; stroke-width: 24; stroke-linejoin: round; stroke-linecap: round; }
.tag { cursor: pointer; transition: opacity .25s ease; }
.tag.is-dim { opacity: .16; }
.tag rect { fill: #F4F1EA; }
.tag circle { fill: #22211F; }
.tag__n { fill: #F4F1EA; font-size: 18px; font-weight: 700; text-anchor: middle; }
.tag__t { fill: #22211F; font-size: 36px; font-weight: 600; }
.plabel { cursor: pointer; }
.plabel rect { fill: #22211F; }
.plabel text { fill: #F4F1EA; font-size: 34px; font-weight: 600; }
.plabel--field rect { fill: #F4F1EA; opacity: .9; }
.plabel--field text { fill: #4E5E43; }
.road-name { pointer-events: none; }
.road-name text { fill: #F4F1EA; font-size: 30px; font-weight: 600; letter-spacing: .06em; text-anchor: middle; }
.compass text { fill: #22211F; font-size: 26px; font-weight: 700; }
.ring { fill: none; stroke: #B24A1C; stroke-width: 6; pointer-events: none; }
.fmap__zoom { display: flex; gap: 8px; margin-left: auto; }   /* in the toolbar, never on top of the map */
.fmap__zoom button {
  min-width: 48px; height: 48px; border: 0; border-radius: 4px; background: var(--bone); color: var(--ink);
  font: 600 26px/1 var(--sans); cursor: pointer; transition: background .2s ease, transform .15s ease;
}
.fmap__zoom button:hover { background: color-mix(in oklab, var(--bone), var(--ink) 10%); }
.fmap__zoom button:active { transform: scale(.95); }
.fmap__zoom .fmap__fit { font-size: 16px; padding: 0 14px; }
.fmap__panel {
  position: absolute; left: 16px; bottom: 16px; width: min(380px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto;
  background: #F4F1EA; color: #22211F; padding: 22px 24px 18px; border-radius: 4px;
  box-shadow: 0 12px 32px rgba(20, 30, 20, .22); display: grid; gap: 10px;
}
.fmap__panel[hidden], .fmap__panel [hidden] { display: none !important; }
.fmap__panel h3 { font-size: 26px; padding-right: 40px; line-height: 1.15; }
.fmap__panel p { font-size: 17px; }
.fmap__panel .link { color: #9A4A2A; min-height: 40px; }
.fmap__close {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: transparent;
  font-size: 30px; line-height: 1; color: #22211F; cursor: pointer; border-radius: 4px;
}
.fmap__close:hover { background: #EAE3D5; }
.fmap__status { justify-self: start; font-weight: 600; font-size: 15px !important; padding: 5px 12px; border-radius: 999px; background: #DCE7CC; color: #21512E; }
.fmap__panel[data-status="ready-small"] .fmap__status { background: #D6E6EA; color: #1F4E59; }
.fmap__panel[data-status="young"] .fmap__status { background: #EAE3D5; color: #5B5047; }
.fmap__panel[data-status="babies"] .fmap__status { background: #F3DDD1; color: #8F3A14; }
.fmap__note { color: #5B5047; }
.fmap__key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 32px; font-size: 16px; }
.fmap__key li { display: flex; align-items: center; gap: 8px; }
.fmap__key svg { width: 28px; height: 28px; flex: none; }
.fmap__babies { width: 26px; height: 18px; border: 2px dashed #B24A1C; border-radius: 4px; background: #E8E5CB; flex: none; }
.fmap__caption { margin-top: -6px; }
.fmap__list summary { font-weight: 600; color: var(--link); cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.fmap__cols { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; padding-top: 16px; }
.fmap__cols h3 { font-size: 24px; margin-bottom: 8px; }
.fmap__cols ul { list-style: none; margin: 0; padding: 0; }
.fmap__cols > div:last-child ul { columns: 2; column-gap: 40px; }
.fmap__cols li { break-inside: avoid; }
.fmap__cols a { display: block; padding: 10px 0; text-decoration: none; }
.fmap__cols a:hover b { text-decoration: underline; }
.fmap__cols b { display: block; }
.fmap__cols span { display: block; font-size: 15px; color: var(--muted); }
@media (max-width: 900px) {
  .fmap__stage { height: 72vh; }
  .fmap__count { margin-left: 0; }
  .fmap__cols { grid-template-columns: 1fr; gap: 24px; }
  .fmap__cols > div:last-child ul { columns: 1; }
}
@media (max-width: 600px) {
  .fmap__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .chip-btn { white-space: nowrap; }
  .fmap__stage { height: 68vh; }
  .fmap__panel { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 58%; padding: 18px 18px 14px; }
  .fmap__panel h3 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .chip-btn, .area, .fmap__zoom button { transition: none; } }

/* Jeff 2026-11-04: two sections with the same background back to back doubled the padding (240px on desktop).
   The second one drops its top padding, so the gap is one normal section gap. */
.sec:not(.sec--bone):not(.sec--fir):not(.page-hero) + .sec:not(.sec--bone):not(.sec--fir),
.sec--bone + .sec--bone,
.sec--fir + .sec--fir { padding-top: 0; }