/* Served at /assets/v<release>/site.css: the URL changes on every deploy, so browsers may cache it for a year. */
/* ==========================================================================
   Public site — a premium attraction brand, not a Christmas landing page.
   Deep forest green, warm ivory, restrained gold; the season's own accent
   (--season, e.g. Halloween orange) arrives with the event from the database.
   Fraunces (display) + Instrument Sans (body). Photography carries every
   section; colour only frames it. Mobile-first: small phones up to iPhone Pro
   Max, then tablet (720), then desktop (900 / 1100).
   Per-tenant palette vars (--bg --ink --gold --gold-ink --green --accent) are
   injected in base.njk; everything here derives from them.
   Admin and booking pages share this file: the legacy class names at the end
   are kept on purpose.
   ========================================================================== */

:root {
  --bg: #F5F1E8; --ink: #1B2A23; --gold: #F2C27B; --gold-ink: #14241C;
  --green: #1E4A37; --accent: #C9561B;
  --link: #8A5A16;                       /* links and eyebrows on cream */
  --season: var(--gold);                 /* the event's accent (events.settings.accent) via style="--season:"; the palette gold by default */
  --paper: #FBF9F4;                      /* cards */
  --ivory-2: #EFE9DB;                    /* the cream band (reviews) */
  --line: #E2DCCD;
  --field-line: #857F72;                 /* the edge of a form field: 3.3:1 or more on every light background (Brief AV §4). --line is for decoration only: it is 1.2:1 */
  --muted: #5A554B;
  --green-deep: #143326;
  --green-2: #2A5A44;
  --gold-light: #F2C27B;                 /* gold on the deep greens: 9:1 */
  --cream-2: var(--ivory-2);             /* legacy alias */
  --wrap: 1280px; --gutter: 16px; --radius: 8px; --radius-sm: 8px;
  --navy: #121B33; --navy-2: #1B2744;
  --shadow: 0 10px 40px rgba(22, 61, 46, 0.12);
  --shadow-sm: 0 4px 16px rgba(22, 61, 46, 0.10);
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --section: 32px;
  --bottombar-h: 64px;
  /* The type scale (Brief L §3): seven steps, each at least 1.25× the one below, and nothing in
     between. 13.6 → 17 → 21.25 → 26.5 → 33 → 41.5 → 62. A 20px lead beside 17px body (1.18×) read
     to the owner as two different fonts: too close to be the same thing, too far to be deliberate.
     Leads and headings take a step DOWN below 900px rather than sliding between steps. */
  --t-1: 13.6px; --t-2: 17px; --t-3: 21.25px; --t-4: 26.5px; --t-5: 33px; --t-6: 41.5px; --t-7: 62px;
  --lead: var(--t-2); --h3: var(--t-3); --h2: var(--t-5); --h1: var(--t-6);
}
@media (min-width: 900px) { :root { --lead: var(--t-3); --h3: var(--t-4); --h2: var(--t-6); --h1: var(--t-7); } }

/* --- Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: var(--t-2); line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Room for the fixed phone bar (public pages only). */
body.is-public { padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px)); }
h1, h2, h3, h4, .brand { font-family: var(--display); line-height: 1.08; color: var(--green); font-weight: 600; margin: 0 0 .5em; letter-spacing: -0.012em; font-variation-settings: "opsz" 72; }
h1 { font-size: var(--h1); font-weight: 600; line-height: 1.04; letter-spacing: -0.022em; }
h2 { font-size: var(--h2); line-height: 1.1; letter-spacing: -0.015em; }
h3 { font-size: var(--h3); }
h4 { font-size: var(--t-3); }
p { margin: 0 0 1rem; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--gold-light); color: var(--green-deep); }
small { font-size: var(--t-1); }

/* The one content column: 1280px centred, 56px side gutters (24px under 900px, 16px under 480px). */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 480px) { .wrap { padding: 0 24px; } }
@media (min-width: 900px) { .wrap { padding: 0 56px; } :root { --section: 40px; } }
/* Longhands on purpose: the shorthand `padding: X 0` wiped .wrap's side gutter on every
   `.wrap.section` element below the wrap width (no gutter at all on phones). */
.section { padding-top: var(--section); padding-bottom: var(--section); }
.section--band { background: var(--green); color: #EFE8D6; }
.section--band h2, .section--band h3 { color: #fff; }
.section--band a { color: var(--gold-light); }
.section--band .eyebrow { color: var(--gold-light); }
.section--band .charter__price { color: #fff; } .section--band .charter__dur { color: #CFC7B4; }
.section--band .photo-strip__img { box-shadow: 0 10px 30px rgba(0,0,0,.35); }
/* Warm near-black band: sections separate by tone, not by whitespace. */
.section--dark, .section--navy { background: var(--navy); color: #E7E6EE; }
.section--dark h2, .section--dark h3, .section--navy h2, .section--dark h3 { color: #fff; }
.section--dark a, .section--navy a { color: var(--gold-light); }
.section--dark .lead, .section--navy .lead { color: #C9CBDA; }
.section--dark .eyebrow, .section--navy .eyebrow { color: var(--gold-light); }
.section--dark .ticks li, .section--navy .ticks li { color: #E9E2D2; }
.section--dark .btn:not(.btn--gold), .section--navy .btn:not(.btn--gold) { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
/* A gold button on a dark band keeps its dark label: the band's link colour must not win over .btn--gold. */
.section--dark .btn--gold, .section--navy .btn--gold, .section--band .btn--gold { color: var(--gold-ink); }
.section--dark .review-form-wrap > summary, .section--navy .review-form-wrap > summary { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.section--dark .review-form label, .section--navy .review-form label { color: #E9E2D2; }
.section--dark .notice, .section--navy .notice { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.section__head { max-width: 62ch; margin-bottom: clamp(18px, 2.5vw, 30px); }
.section__head h2 { margin-bottom: .2em; }
.section__head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; max-width: none; }
@media (max-width: 479px) { .section__head--row { flex-direction: column; align-items: stretch; } } /* the title keeps the column on phones (rule a) */
.eyebrow {
  font-family: var(--sans); font-weight: 600; font-size: var(--t-1); letter-spacing: .12em; text-transform: uppercase;
  color: var(--link); margin: 0 0 10px; line-height: 1.3;
}
.eyebrow--light { color: var(--gold-light); }
.lead { font-size: var(--lead); line-height: 1.55; color: var(--muted); max-width: 58ch; }
.section--band .lead { color: #D8D2C0; }
.prose p, .prose li { max-width: 68ch; }
.note { color: var(--link); font-weight: 500; } /* the link brown: 5.2:1 on the page; the orange accent is 3.9:1 */
.notice { background: #E6F0E8; border: 1px solid #BFD6C6; color: #1E4A39; padding: 12px 16px; border-radius: var(--radius-sm); }
.fine { color: var(--muted); font-size: var(--t-1); }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--gold); color: var(--gold-ink); padding: 10px 16px; z-index: 100; }
.skip-link:focus { left: 0; }

/* --- Buttons --------------------------------------------------------------- */
/* One button. Size varies by token (--btn-h, --btn-pad-y, --btn-pad-x, --btn-font); the
   padding ratio (x = 2 × y) does not. The header, the body and the schedule share it. */
.btn {
  --btn-h: 46px; --btn-pad-y: 11px; --btn-pad-x: 22px; --btn-font: var(--t-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--btn-h); padding: var(--btn-pad-y) var(--btn-pad-x); border-radius: 999px;
  background: var(--paper); color: var(--green); text-decoration: none;
  font-weight: 600; font-family: var(--sans); font-size: var(--btn-font); line-height: 1.2;
  border: 1.5px solid var(--line); cursor: pointer;
  transition: transform .08s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover { border-color: var(--green); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--gold); color: var(--gold-ink); border-color: transparent; }
.btn--gold:hover { background: color-mix(in srgb, var(--gold) 86%, #fff); border-color: transparent; }
.btn--ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.btn--lg { --btn-h: 54px; --btn-pad-y: 14px; --btn-pad-x: 28px; }
.btn--sm { --btn-h: 42px; --btn-pad-y: 8px; --btn-pad-x: 16px; }
.section--band .btn:not(.btn--gold) { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }

/* --- Header ---------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; }
.brand__logo { height: 56px; width: auto; border-radius: 6px; }
@media (min-width: 900px) { .brand__logo { height: 68px; } .site-header__inner { min-height: 88px; } }
.nav { display: none; gap: clamp(18px, 2.4vw, 34px); align-items: center; }
.nav a:not(.btn) { color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--t-2); padding: 6px 2px; }
.nav a:not(.btn):hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; }
.nav__book { margin-left: 6px; box-shadow: 0 6px 18px rgba(201,162,74,.35); } /* the same .btn as the body: no padding of its own */


/* Phone menu (native <details>) */
.menu { position: relative; }
.menu__btn { list-style: none; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; padding: 9px 14px; border: 1.5px solid var(--line); border-radius: 999px; color: var(--green); font-weight: 600; font-size: var(--t-2); }
.menu__btn::-webkit-details-marker { display: none; }
.menu__bars { position: relative; width: 18px; height: 2px; background: var(--green); border-radius: 2px; }
.menu__bars::before, .menu__bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--green); border-radius: 2px; }
.menu__bars::before { top: -6px; } .menu__bars::after { top: 6px; }
.menu[open] .menu__btn { background: var(--paper); }
.menu__panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; display: grid; gap: 2px; padding: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 60; }
.menu__panel a { display: block; padding: 12px 14px; border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; color: var(--green); }
.menu__panel a:hover { background: var(--ivory-2); }
@media (min-width: 900px) { .nav { display: flex; } .menu { display: none; } }




/* ==========================================================================
   Homepage: every band's BACKGROUND spans the viewport; the content inside it
   stays in the 1280px column (Brief K: a coloured box floating in a wide cream
   page is a bug; a square-cornered band only looks right when it bleeds).
   The side padding is the larger of the gutter and the distance to the column.
   No band's height is driven by a photograph: either the text column sets the
   height and the image covers it, or the section has a bounded height and the
   image crops.
   ========================================================================== */
.page-home main > section:not(.hero) { width: 100%; padding-left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); padding-right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); }
@media (min-width: 480px) { .page-home main > section:not(.hero) { padding-left: max(24px, calc((100% - var(--wrap)) / 2 + 24px)); padding-right: max(24px, calc((100% - var(--wrap)) / 2 + 24px)); } }
@media (min-width: 900px) { .page-home main > section:not(.hero) { padding-left: max(56px, calc((100% - var(--wrap)) / 2 + 56px)); padding-right: max(56px, calc((100% - var(--wrap)) / 2 + 56px)); } }
/* Bands are square: a band runs edge to edge of the viewport with hard corners. */
@media (min-width: 1300px) { .page-home .ride { margin-top: 12px; } }

/* --- B2 Hero: full-bleed, bounded 620px, left-anchored scrim, 620px text column ------ */
.hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  /* Phones: the H1, subline, event strip and primary button sit above the fold, floor 560px. */
  min-height: clamp(560px, calc(100svh - 76px), 720px); display: flex; align-items: center;
  background: linear-gradient(160deg, var(--green-deep), var(--green-2));
}
/* Desktop (Brief Z3): the owner's own site is the reference implementation. Its hero is a
   full-page slider — the box is the window's height at every width — with the video centred
   (object-fit: cover; object-position: 50% 50%), no transform, the 1920×1080 master. Adopted as
   is, not improved on. The invariant the gate enforces (rule g): the top of the riders' band
   (hat tops from ~25% of the frame; bodies to the bottom edge) must never fall below the top of
   the visible crop — faces are never the thing that gets cut. */
@media (min-width: 900px) { .hero { height: 100vh; min-height: 0; } }
.hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; z-index: 0; }
.hero__video { opacity: 0; transition: opacity .6s ease; }
.hero__video.is-playing { opacity: 1; }
/* The page-wide gradient, lightened in Brief Z5: it shapes the look only; the text block carries its own scrim (rule h). */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(95deg, rgba(6,16,12,.55) 0%, rgba(6,16,12,.38) 42%, rgba(6,16,12,.1) 100%); }
.hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 48px var(--gutter) 40px; }
@media (min-width: 480px) { .hero__inner { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 900px) { .hero__inner { padding: 0 56px; } }
/* Brief Z5: the text carries its own scrim. A soft dark panel bound to the text block — headline,
   subline, event strip — sized from the block itself at every breakpoint, so the contrast no longer
   depends on the crop, the frame's brightness or the viewport. The page-wide gradient stays for the
   look; it is no longer what protects the text. The gate measures this (rule h). */
.hero__content { position: relative; max-width: 620px; display: flex; flex-direction: column; gap: 22px;
  padding: 22px 20px 24px; border-radius: var(--radius); background: rgba(6,16,12,.58);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 0 48px 20px rgba(6,16,12,.58);
  -webkit-backdrop-filter: blur(10px) saturate(.85); backdrop-filter: blur(10px) saturate(.85); }
/* Phones: the panel bleeds to the hero's edges so the text column keeps its full width (rule e). */
@media (max-width: 899px) { .hero__content { margin: 0 calc(-1 * var(--gutter)); padding: 22px var(--gutter) 24px; border-radius: 0; } }
@media (min-width: 900px) { .hero__content { padding: 30px 32px 32px; margin-left: -32px; } }
.hero__content > * { margin: 0; }
.hero__headline { color: #fff; max-width: 16ch; text-wrap: balance; }
.hero__sub { font-size: var(--lead); line-height: 1.55; color: #EDE6D6; max-width: 560px; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.eyebrow--rule { display: flex; align-items: center; gap: 12px; color: var(--season); margin: 0; }
.eyebrow--rule::before { content: ""; flex: none; width: 22px; height: 2px; background: var(--season); }
.hero__play {
  position: absolute; z-index: 3; right: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px 8px 10px; border-radius: 999px;
  background: rgba(10,24,18,.55); color: #fff; border: 1px solid rgba(255,255,255,.4); backdrop-filter: blur(6px);
  font: 600 var(--t-1) var(--sans); cursor: pointer;
}
.hero__play:hover { background: rgba(10,24,18,.8); }
.hero__play-icon { width: 10px; height: 12px; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.hero__play.is-paused .hero__play-icon { border: 0; width: 0; height: 0; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
@media (min-width: 720px) { .hero__play { right: 28px; bottom: 28px; } }
@media (prefers-reduced-motion: reduce) { .hero__video, .hero__play { display: none; } }

/* --- B3 Stat bar: forest strip, 100px, four icon + label cells, every value derived ------- */
.statbar { background: var(--green-deep); color: #EDE6D6; }
.statbar__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Phones: one cell per row — "Tractor-drawn wagon" at the value size overflowed a half-width cell (rule c). */
@media (max-width: 479px) {
  .statbar__list { grid-template-columns: minmax(0, 1fr); }
  .statbar__item, .statbar__item:nth-child(even) { padding-left: 0; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .statbar__item:last-child { border-bottom: 0; }
  .statbar--cream .statbar__item { border-color: var(--line); }
}
.statbar__item { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 14px 16px 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.statbar__item:nth-child(even) { padding-left: 16px; border-left: 1px solid rgba(255,255,255,.12); }
.statbar__item:nth-last-child(-n+2) { border-bottom: 0; }
@media (min-width: 900px) {
  .statbar__list { grid-template-columns: repeat(4, minmax(0, 1fr)); height: 100px; }
  .statbar--3 .statbar__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .statbar--2 .statbar__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statbar__item, .statbar__item:nth-child(even) { min-height: 0; height: 100%; padding: 0 22px; border-bottom: 0; border-left: 1px solid rgba(255,255,255,.14); }
  .statbar__item:first-child { border-left: 0; padding-left: 0; }
}
.statbar__icon { flex: none; width: 28px; height: 28px; }
.statbar__icon svg { width: 28px; height: 28px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.statbar__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.statbar__label { font-size: var(--t-1); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: #B9C9BE; line-height: 1.3; }
.statbar__value { font-family: var(--display); font-size: var(--t-3); line-height: 1.2; color: #fff; font-weight: 600; text-wrap: balance; }

/* The cream variant: the occasions strip and the contact band. Same shape, label-only cells, links as values. */
.statbar--cream { background: var(--ivory-2); color: var(--ink); }
.statbar--forest { background: var(--green-deep); }
.statbar--cream .statbar__item, .statbar--cream .statbar__item:nth-child(even) { border-color: var(--line); }
.statbar--cream .statbar__icon svg { stroke: var(--link); }
.statbar--cream .statbar__label { color: var(--muted); }
.statbar--cream .statbar__value { color: var(--green); }
.statbar--cream a.statbar__value { text-decoration: none; }
.statbar--cream a.statbar__value:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.page-home .statbar--cream { margin-top: 12px; }

/* --- Contact page: the full FAQ on the left, the form on the right, the three-up band at the foot ---- */
.contact-layout { display: grid; gap: 36px; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: start; } .contact-layout__form { position: sticky; top: 100px; } }
.contact-layout h2 { margin-bottom: 14px; }
/* The band bleeds (cream across the viewport); the tiles stay in the column. Equal columns:
   repeat(n, 1fr), content left-aligned in each, dividers between, stacked on phones. */
.contact-band.wrap { max-width: none; background: var(--ivory-2); padding-top: 0; padding-bottom: 0; padding-left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); padding-right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); }
@media (min-width: 480px) { .contact-band.wrap { padding-left: max(24px, calc((100% - var(--wrap)) / 2 + 24px)); padding-right: max(24px, calc((100% - var(--wrap)) / 2 + 24px)); } }
@media (min-width: 900px) { .contact-band.wrap { padding-left: max(56px, calc((100% - var(--wrap)) / 2 + 56px)); padding-right: max(56px, calc((100% - var(--wrap)) / 2 + 56px)); } }
.contact-band .statbar__list { grid-template-columns: minmax(0, 1fr); }
.contact-band .statbar__item, .contact-band .statbar__item:nth-child(even) { padding-left: 0; border-left: 0; border-bottom: 1px solid var(--line); }
.contact-band .statbar__item:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .contact-band .statbar--3.statbar__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-band .statbar--2.statbar__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-band .statbar__item, .contact-band .statbar__item:nth-child(even) { padding: 0 22px; border-bottom: 0; border-left: 1px solid var(--line); justify-content: flex-start; }
  .contact-band .statbar__item:first-child { border-left: 0; padding-left: 0; }
}
.pickup-map { display: grid; gap: 24px; padding-top: 0; }
@media (min-width: 900px) { .pickup-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; align-items: center; } }
.pickup-map__text h2 { margin-bottom: 8px; }
.pickup-map__event, .pickup-map__address { margin: 0 0 8px; }
.pickup-map__address { color: var(--muted); }
.osm { margin: 0; }
.osm__canvas { position: relative; width: 100%; max-width: 640px; aspect-ratio: 512 / 320; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--ivory-2); }
.osm__canvas > * { position: absolute; }
.osm__canvas > picture { inset: 0; width: 100%; height: 100%; }
.osm__canvas > picture > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.osm__img { inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.osm__credit { left: auto; right: 0; bottom: 0; top: auto; margin: 0; padding: 2px 6px; font-size: var(--t-1); line-height: 1.3; color: #333; background: rgba(255,255,255,.85); border-top-left-radius: 6px; }
.osm__credit a { color: #333; }
.osm__marker { width: 18px; height: 18px; margin: -18px 0 0 -9px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--accent); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); }

@media (min-width: 900px) { .contact-band .statbar__list { height: 100px; } }

/* --- Hero event strip: the dated layer inside the hero, below the brand subline ------------------- */
.hero-event { margin-top: 10px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-sm); background: rgba(6,16,12,.45); backdrop-filter: blur(6px); display: grid; gap: 6px; max-width: 560px; }
.hero-event > p { margin: 0; }
.hero-event__name { font-family: var(--display); font-size: var(--h3); line-height: 1.15; color: #fff; font-weight: 600; }
.hero-event__meta { display: flex; flex-wrap: wrap; gap: 4px 0; color: #EDE6D6; font-size: var(--t-2); }
.hero-event__meta span + span::before { content: "·"; margin: 0 8px; color: var(--gold); }
.hero-event__cta { margin-top: 6px !important; }
.hero-event .pill { background: color-mix(in srgb, var(--season) 28%, rgba(255,255,255,.1)); color: #fff; border: 1px solid color-mix(in srgb, var(--season) 70%, transparent); }

/* --- What the ride is like: a light section, 560px text column; three photographs cover its height ---- */
.ride { display: grid; gap: 0 40px; }
.ride__title { max-width: 18ch; }
@media (min-width: 900px) { .ride { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); align-items: stretch; } }
.ride__text { padding: 28px 0 24px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.ride__text > * { margin: 0; }
.ride__title { max-width: 18ch; text-wrap: balance; }
.ride__body { color: var(--muted); max-width: 520px; }
.ride .ticks { margin-top: 2px; }
.ride__cta { margin-top: 8px; }
.ride__media { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 360px; margin-bottom: 24px; }
@media (min-width: 900px) { .ride__media { height: auto; min-height: 0; margin: 24px 0; } }
.ride__media--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ride__media > * { position: relative; overflow: hidden; border-radius: var(--radius-sm); min-height: 0; background: var(--ivory-2); }
.ride__media > *:first-child { grid-row: 1 / 3; }
.ride__media--1 > *:first-child { grid-row: auto; }
.ride__media > .pic .ride__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ride__media > .ride__img { width: 100%; height: 100%; object-fit: cover; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { padding-left: 30px; position: relative; font-weight: 500; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .35em; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); }
.ticks li::after { content: ""; position: absolute; left: 6px; top: calc(.35em + 4px); width: 5px; height: 9px; border: solid var(--gold-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* --- The farm band: the owner's line on navy, centred, bounded ---------------------------------- */
.farm-band { display: grid; place-items: center; text-align: center; padding-top: 36px; padding-bottom: 36px; }
.farm-band--photo { gap: 24px; }
@media (min-width: 900px) { .farm-band--photo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; text-align: left; } .farm-band--photo .farm-band__inner { text-align: left; } }
.farm-band__photo { width: 100%; max-width: 640px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: var(--navy-2); }
.farm-band__photo .pic img, .farm-band__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.farm-band__inner { max-width: 640px; width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 8px; } /* lines take the column's width (rule a), centred by text-align */
.farm-band__inner > * { margin: 0; }
.farm-band h2 { color: #fff; }
.farm-band__body { color: #C9D6CD; font-size: var(--lead); line-height: 1.55; }

/* --- How it works: a wide photograph, then four steps in a row, one line each --------------------- */
.steps .section__head { margin-bottom: 18px; }
.steps__photo { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius); aspect-ratio: 21 / 8; max-height: 360px; background: var(--ivory-2); margin-bottom: 22px; }
.steps__photo .pic, .steps__photo .pic img, .steps__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 479px) { .steps__list { grid-template-columns: minmax(0, 1fr); } } /* a label beside its number needs the row: two 170px cards left 90px for "Meet at the pickup point" (rule a) */
@media (min-width: 900px) { .steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.step h3 { margin: 0; font-size: var(--t-2); flex: 1 1 auto; min-width: 0; } /* a short label beside its number: body size, display face; it takes the card's width (the layout gate's rule a) */
.step__n { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); font-family: var(--display); font-weight: 700; font-size: var(--t-2); }

/* --- B5 Tickets: seat tickets on cream with a border, the charter on forest ---------------- */
.tickets { padding-top: 32px; padding-bottom: 32px; }
.tickets .section__head { margin-bottom: 16px; }
.tickets__free { margin: 0; color: var(--muted); font-weight: 500; }
.ticket-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .ticket-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ticket-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ticket-cards--1 { grid-template-columns: minmax(0, 420px); } }
.ticket-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 6px; }
.ticket-card > p { margin: 0; }
.ticket-card--charter { background: var(--green-deep); border-color: transparent; color: #EDE6D6; }
.ticket-card__label { font-size: var(--t-1); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--link); }
.ticket-card--charter .ticket-card__label { color: var(--gold); }
.ticket-card__price { font-family: var(--display); font-size: var(--t-6); line-height: 1; font-weight: 600; color: var(--green); letter-spacing: -0.02em; margin-top: 4px !important; }
.ticket-card--charter .ticket-card__price { color: #fff; }
.ticket-card__note { color: var(--muted); font-weight: 500; }
.ticket-card--charter .ticket-card__note { color: #B9C9BE; }
.ticket-card__desc { color: #C9D6CD; font-size: var(--t-2); line-height: 1.6; margin-top: 4px !important; }
.ticket-card__cta { margin-top: auto !important; padding-top: 16px; }

/* --- B6 This season: the next departures with seats left ------------------------------------ */
.season { padding-top: 32px; padding-bottom: 32px; }
.season .section__head { margin-bottom: 12px; }
.season__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0 0; color: var(--muted); }
.season__dates { font-family: var(--display); font-weight: 600; color: var(--green); font-size: var(--t-2); }
.departures-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .departures-next { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .departures-next { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.departure-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.departure-row__seats { color: var(--muted); font-size: var(--t-2); }
.departure-row__book { grid-row: 1 / 3; grid-column: 2; --btn-h: 42px; --btn-pad-y: 8px; --btn-pad-x: 16px; }
.season-empty { max-width: 640px; }
.season-others { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.season-other { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.season-other .btn { margin-left: auto; }

/* --- B7 Gallery strip: three large photographs at a fixed height, on forest ----------------- */
.gallery-strip { display: grid; gap: 16px; padding-top: 26px; padding-bottom: 26px; }
@media (min-width: 900px) { .gallery-strip { grid-template-columns: 290px minmax(0, 1fr); gap: 38px; align-items: center; padding-top: 36px; padding-bottom: 36px; } }
.gallery-strip__text h2 { color: #fff; margin: 0 0 14px; }
.gallery-strip__text p { margin: 0; }
.gallery-strip__count { color: #C9D6CD; margin: 0 0 16px !important; }
.gallery-strip__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 300px; }
.gallery-strip__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-strip__grid--1 { grid-template-columns: 1fr; }
.gallery-strip__grid li { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; min-width: 0; background: var(--green-2); }
.gallery-strip__grid a, .gallery-strip__grid .pic { display: block; position: absolute; inset: 0; }
.gallery-strip__img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 719px) {
  .gallery-strip__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; height: 240px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; scrollbar-width: thin; }
  .gallery-strip__grid li { flex: 0 0 78%; scroll-snap-align: start; }
}
@media (min-width: 480px) and (max-width: 719px) { .gallery-strip__grid { margin: 0 -24px; padding: 0 24px 8px; } }

/* --- B8 Reviews: three cards on the cream band ------------------------------------------- */
/* Tones a flexible section can take (data-tone): page (the body), cream (the band). Forest and navy are the band classes. */
.tone-cream { background: var(--ivory-2); }
.tone-page { background: transparent; }
/* The dark tones a flexible section can take. Forest is the stat bar's deep green; navy carries .section--navy. */
.tone-forest { background: var(--green-deep); color: #EDE6D6; }
.tone-forest h2, .tone-forest h3 { color: #fff; }
.tone-forest .eyebrow, .tone-navy .eyebrow { color: var(--gold-light); }
.tone-forest .season__dates, .tone-navy .season__dates { color: var(--gold-light); }
.tone-forest .season__meta, .tone-navy .season__meta, .tone-forest .tickets__free, .tone-navy .tickets__free,
.tone-forest .testimonials__more, .tone-navy .testimonials__more, .tone-forest .faq__head p, .tone-navy .faq__head p,
.tone-forest .season-empty p, .tone-navy .season-empty p, .tone-forest .lead, .tone-navy .lead { color: #C9D6CD; }
.tone-forest .testimonials__more a, .tone-navy .testimonials__more a, .tone-forest .faq__head a, .tone-navy .faq__head a { color: var(--gold-light); }
.tone-forest .btn:not(.btn--gold) { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.tone-forest .btn--gold, .tone-navy .btn--gold { color: var(--gold-ink); }
.gallery-strip.tone-cream h2 { color: var(--green); }
.gallery-strip.tone-cream .eyebrow { color: var(--link); }
.gallery-strip.tone-cream .gallery-strip__count { color: var(--muted); }
/* Paper cards keep their own ink on a dark band: nothing inside them inherits the band's light text. */
.tone-forest .departure-row, .tone-navy .departure-row, .tone-forest .ticket-card, .tone-navy .ticket-card, .tone-forest .season-other, .tone-navy .season-other,
.tone-forest .testimonial, .tone-navy .testimonial, .tone-forest .acc, .tone-navy .acc { color: var(--ink); }
.tone-forest .departure-row__seats, .tone-navy .departure-row__seats { color: var(--muted); }
.tone-forest .acc a, .tone-navy .acc a, .tone-forest .departure-row a:not(.btn), .tone-navy .departure-row a:not(.btn) { color: var(--link); }
.tone-forest .notify__field, .tone-navy .notify__field { color: #EDE6D6; }
/* A plain button inside a paper card on a dark band is a light-card button, not a ghost one (it was white on paper). */
.tone-forest .ticket-card .btn:not(.btn--gold), .tone-navy .ticket-card .btn:not(.btn--gold), .section--band .ticket-card .btn:not(.btn--gold), .section--navy .ticket-card .btn:not(.btn--gold),
.tone-forest .departure-row .btn:not(.btn--gold), .tone-navy .departure-row .btn:not(.btn--gold), .tone-forest .season-other .btn:not(.btn--gold), .tone-navy .season-other .btn:not(.btn--gold),
.tone-forest .testimonial .btn:not(.btn--gold), .tone-navy .testimonial .btn:not(.btn--gold), .tone-forest .acc .btn:not(.btn--gold), .tone-navy .acc .btn:not(.btn--gold), .tone-navy .step .btn:not(.btn--gold) { background: var(--paper); color: var(--green); border-color: var(--line); }

.reviews .section__head { margin-bottom: 20px; }
.reviews .testimonial { background: #fff; border: 1px solid var(--line); box-shadow: none; }

/* --- B9 FAQ ------------------------------------------------------------------------------ */
.faq-section .faq__head { max-width: none; }

/* --- B10 Closing: a bounded panel with the closing photograph behind it ------------------- */
.closing { position: relative; isolation: isolate; overflow: hidden; background: var(--green-deep); color: #fff; text-align: center; display: grid; place-items: center; min-height: 320px; margin-bottom: 40px; }
@media (min-width: 900px) { .closing { height: 360px; } }
.closing .pic, .closing__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.closing--photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,25,18,.62), rgba(10,25,18,.9)); }
.closing__inner { position: relative; z-index: 2; padding: 36px 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 640px; }
.closing__inner > * { margin: 0; }
.closing h2 { color: #fff; }
.closing .lead { color: #D5DED7; }
.closing .btn + .btn { margin-left: 10px; }

/* Notify capture — one component, dark (hero) and light (ivory) tones. */
.notify__form { display: grid; gap: 12px; }
.notify__fields { display: grid; gap: 10px; }
.notify__field { display: grid; gap: 4px; font-size: var(--t-1); font-weight: 600; }
.notify__field small { font-weight: 400; opacity: .8; }
.notify input[type="email"], .notify input[type="tel"] {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--radius-sm); font: inherit; font-size: var(--t-2);
  border: 1px solid var(--field-line); background: var(--paper); color: var(--ink);
}
.notify--dark .notify__field { color: #EEE8D8; }
.notify--dark input[type="email"], .notify--dark input[type="tel"] { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; }
.notify--dark input::placeholder { color: rgba(255,255,255,.6); }
.notify--dark .notify__consent, .notify--dark .notify__done { color: #D9D2BE; }
.notify__consent { font-size: var(--t-1); line-height: 1.45; align-items: flex-start; }
.notify__consent input { margin-top: 3px; flex: none; }
.notify__done { font-weight: 600; color: var(--green); }
@media (min-width: 600px) {
  .notify__fields { grid-template-columns: 1fr 1fr auto; align-items: end; }
  .notify__btn { min-height: 48px; }
}

.pill { display: inline-block; padding: 5px 11px; border-radius: 999px; font-size: var(--t-1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pill--open { background: color-mix(in srgb, var(--season) 22%, var(--paper)); color: var(--green-deep); border: 1px solid color-mix(in srgb, var(--season) 60%, transparent); }
.pill--sold_out { background: var(--ivory-2); color: var(--muted); }
.pill--opening { background: var(--gold); color: var(--gold-ink); }
.pill--by_request { background: transparent; color: var(--green); border: 1px solid var(--line); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 10px 0 0; }
.facts div { margin: 0; }
.facts dt { font-size: var(--t-1); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.facts dd { margin: 2px 0 0; font-weight: 600; color: var(--ink); }
.facts__prices { grid-column: 1 / -1; }
.facts--light dt { color: #C9C2AD; }
.facts--light dd { color: #fff; }
.photo-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.photo-strip__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }

/* --- Testimonials ----------------------------------------------------------------- */
/* Reviews: the cream band. Three across at desktop; on a phone a scroll-snap row,
   one card at a time with the rest a swipe (or arrow-key) away. */
.section--reviews { background: var(--bg); }
.testimonials__more { margin: 14px 0 0; color: var(--muted); }
@media (max-width: 719px) {
  .testimonials { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 4px 14px; margin: 0 -4px; scrollbar-width: thin; }
  .testimonials > .testimonial { flex: 0 0 88%; scroll-snap-align: center; }
}
.testimonial__headline { font-family: var(--display); font-weight: 600; font-size: var(--t-3); color: var(--green); margin: 8px 0 0; }
.testimonial__when { color: var(--muted); font-weight: 500; }
/* FAQ on the near-black band: paper panels, light intro text. */
.section--dark .acc, .section--navy .acc { background: var(--paper); border-color: transparent; }
.section--dark .faq__head p, .section--navy .faq__head p { color: #CFC7B4; }
.testimonials { display: grid; gap: 20px; }
.testimonial { position: relative; margin: 0; background: var(--paper); border-radius: var(--radius); padding: 28px 26px 22px; box-shadow: var(--shadow-sm); }
.testimonial::before { content: "“"; position: absolute; top: 6px; right: 18px; font-family: var(--display); font-size: 5rem; line-height: 1; color: var(--gold); opacity: .55; }
.stars { color: var(--gold); letter-spacing: 2px; font-size: var(--t-2); }
.testimonial__body { font-family: var(--display); font-size: var(--lead); font-weight: 400; line-height: 1.45; color: var(--ink); margin: 8px 0 16px; font-variation-settings: "opsz" 24; }
.testimonial__by { display: flex; align-items: center; gap: 6px; color: var(--muted); font-style: normal; font-family: var(--sans); font-size: var(--t-2); }
.testimonial__by cite { font-style: normal; font-weight: 600; color: var(--green); }
.testimonial__face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
@media (min-width: 720px) { .testimonials--2, .testimonials--3, .testimonials--many { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .testimonials--3, .testimonials--many { grid-template-columns: repeat(3, 1fr); } }
.review-form-wrap { margin-top: 28px; }
.review-form-wrap > summary { display: inline-flex; align-items: center; min-height: 46px; cursor: pointer; font-weight: 600; color: var(--green); padding: 0 18px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper); list-style: none; }
.review-form-wrap > summary::-webkit-details-marker { display: none; }
.review-form { display: grid; gap: 12px; max-width: 520px; margin-top: 16px; }
.review-form label { display: grid; gap: 4px; font-weight: 600; }
.review-form input, .review-form textarea, .review-form select { padding: 12px; border: 1px solid var(--field-line); border-radius: var(--radius-sm); font: inherit; background: var(--paper); width: 100%; min-width: 0; max-width: 100%; } /* a <select> is as wide as its longest option unless told otherwise: it forced a horizontal scroll on /join at 390 (rule c) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- FAQ --------------------------------------------------------------------------- */
.faq { display: grid; gap: 28px; }
.faq__head h2 { max-width: none; } /* "Questions, answered" on one line (rule e) */
@media (min-width: 900px) { .faq { grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; } .faq__head { position: sticky; top: 90px; } }
.acc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 10px 0; box-shadow: none; }
.acc__summary { cursor: pointer; padding: 16px 48px 16px 18px; font-weight: 600; font-family: var(--display); font-size: var(--t-2); color: var(--green); list-style: none; position: relative; }
.acc__summary::-webkit-details-marker { display: none; }
.acc__summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-weight: 400; font-size: 1.5rem; color: var(--accent); }
.acc[open] .acc__summary::after { content: "–"; }
.acc__summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.acc__body { padding: 0 18px 18px; }
.acc__body p:last-child { margin-bottom: 0; }





/* --- Inner-page header ------------------------------------------------------------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--green); color: #fff; min-height: clamp(260px, 42vh, 460px); display: flex; align-items: flex-end; }
.page-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,20,15,.25), rgba(8,20,15,.8)); }
.page-hero--plain::after { background: linear-gradient(160deg, var(--green-deep), var(--green-2)); }
.page-hero__inner { position: relative; z-index: 2; padding-top: 48px; padding-bottom: clamp(28px, 5vw, 56px); }
.page-hero__title { color: #fff; margin-bottom: .3em; text-wrap: balance; }
.page-hero__lead { color: #E3DCC8; font-size: var(--lead); max-width: 56ch; margin: 0; }

/* --- Footer ----------------------------------------------------------------------- */
.site-footer { background: var(--green-deep); color: #D9D2BE; }
.site-footer a { color: var(--gold-light); }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(32px, 5vw, 56px); }
.site-footer__name { color: #fff; margin: 0 0 10px; font-size: var(--t-4); }
.site-footer__place { margin: 0 0 12px; }
.site-footer__place strong { color: #fff; }
.site-footer__social a { margin-right: 16px; }
.site-footer__links { display: grid; gap: 8px; align-content: start; }
.site-footer__links h3 { color: #fff; font-family: var(--sans); font-size: var(--t-1); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 6px; }
.site-footer__links a { text-decoration: none; }
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,.14); padding-top: 18px; padding-bottom: 22px; font-size: var(--t-1); }
.site-footer__legal p { margin: 0; }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: 40px; } }

/* --- Persistent phone bar: one primary "Book a ride" action --------------------------- */
.bottombar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--bottombar-h); padding: 8px var(--gutter);
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transition: transform .25s ease, opacity .25s ease;
}
.bottombar__book { width: 100%; max-width: 420px; min-height: 50px; font-weight: 700; }
.bottombar--hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }
@media (min-width: 900px) { .bottombar { display: none; } body.is-public { padding-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .bottombar { transition: none; } }
@media print { .bottombar { display: none; } }

/* ==================================================================================
   Legacy / shared components (schedule, booking, gallery, contact, admin)
   ================================================================================== */
.cards { display: grid; grid-template-columns: 1fr; gap: 22px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.card h3 { margin-top: 0; color: var(--green); }
ol.steps, ul.steps { max-width: 62ch; margin: 0; padding-left: 1.1em; } /* the legacy numbered list — not the homepage section of the same class (it shrank to 62ch once bands bled, Brief L) */
.steps li { margin-bottom: 12px; }

/* Schedule */
.night { border-top: 2px solid var(--line); padding-top: 18px; margin-top: 26px; }
.night__date { margin: 0 0 12px; }
.departures { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.departure { display: flex; align-items: center; gap: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 18px; box-shadow: var(--shadow-sm); flex-wrap: wrap; }
.departure__time { font-family: var(--display); font-weight: 600; font-size: var(--t-3); min-width: 90px; }
.departure__status { color: var(--muted); margin-right: auto; }
.departure--sold { color: var(--muted); }
.departure--cancelled { color: var(--muted); }
.departure--cancelled .departure__status { color: var(--link); font-weight: 600; text-decoration: line-through; }
.coming-soon { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 4vw, 36px); box-shadow: var(--shadow-sm); }
/* Prices and Where-it-boards: a two-column band directly under the description, so the
   departure list keeps the full width and a night's departures sit on one line. */
.schedule-facts { display: grid; gap: 18px; margin: 0 0 26px; }
@media (min-width: 720px) { .schedule-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.schedule-facts .card p:last-child { margin-bottom: 0; }
/* The description keeps a readable measure (~70 characters); the cover photograph fills the space beside it at the cards' right edge. */
.schedule-intro { display: grid; gap: 20px; margin: 0 0 26px; }
.schedule-intro__text { margin: 0; }
@media (min-width: 900px) { .schedule-intro--photo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; } }
.schedule-intro--centred { justify-items: center; text-align: center; }
.schedule-intro__photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; background: var(--ivory-2); }
.schedule-intro__photo .pic, .schedule-intro__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The map runs FULL WIDTH below both cards (Brief O §1): inside the boarding card it made that card 634px
   against 237px of Prices content (2.67×, over the 1.6 limit) and the grid stretched Prices to match. A wide
   strip, the marker centred; the 2× tile image covers 1168×374 at a 1.14 scale. */
.schedule-map { margin: 0 0 26px; display: grid; gap: 12px; }
.schedule-map .osm { margin: 0; max-width: none; }
.schedule-map .osm__canvas { max-width: none; } /* phones: the 512:320 box, the 1024×640 mosaic at ≈2.9× */
@media (min-width: 900px) { .schedule-map .osm__canvas { aspect-ratio: 2336 / 748; } } /* desktop: the 2336×748 mosaic at exactly 2×, nothing cropped */
.schedule-map__line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; color: var(--muted); }
.schedule-faq { margin-top: 36px; max-width: 760px; }
.schedule-faq h2 { margin-bottom: 14px; }
.notify__row { display: flex; gap: 10px; flex-wrap: wrap; }
.notify__row input { padding: 12px; border: 1px solid var(--field-line); border-radius: var(--radius-sm); min-width: 220px; flex: 1; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.contact-form { display: grid; gap: 12px; }
.contact-form label { display: grid; gap: 4px; font-weight: 600; }
.contact-form input, .contact-form textarea { padding: 12px; border: 1px solid var(--field-line); border-radius: var(--radius-sm); font: inherit; background: var(--paper); }
.map-embed iframe { width: 100%; height: 320px; border: 0; border-radius: var(--radius); }

/* Gallery */
.album__title { border-bottom: 3px solid var(--gold); display: inline-block; padding-bottom: 4px; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 8px; }
.gallery-item { margin: 0; }
.gallery-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.gallery-item figcaption { font-size: var(--t-1); color: var(--muted); margin-top: 4px; }
.gallery-empty { background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius); padding: 28px; }
.share-cta { background: var(--ivory-2); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); }

/* Booking page */
/* A card per ticket (Brief AZ §1): the name, the price, and the quantity box directly under them, so the three
   travel together at every width. Side by side where there is room, one to a line on a phone. The box's edge is
   --field-line: it is a control, not decoration. */
.ticket-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 300px)); gap: 12px; margin: 10px 0 14px; }
.ticket-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; align-content: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.ticket-row__name { font-weight: 600; overflow-wrap: anywhere; }
.ticket-row__price { font-variant-numeric: tabular-nums; }
.ticket-row .qty { width: 96px; min-height: 44px; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--field-line); border-radius: var(--radius-sm); font: inherit; background: var(--paper); }
@media (max-width: 600px) { .ticket-rows { grid-template-columns: minmax(0, 1fr); } }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 18px; padding: 18px; background: var(--paper); }
legend { font-family: var(--display); color: var(--green); font-weight: 600; padding: 0 8px; }
/* The three card columns: minmax(0, 1fr), not 1fr — a bare 1fr track cannot shrink below the input's intrinsic
   width (177px), so three of them ran to 551px inside a 358px phone form, a horizontal scroll on the money
   page (found by the layout gate once it included /book, Brief T). Every text input in the form takes its column. */
.cc-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#checkout label { display: grid; gap: 4px; min-width: 0; }
#checkout label.check { display: flex; }
#checkout .ticket-row { gap: 2px; }
#checkout input:not([type="checkbox"]):not(.qty), #checkout select { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.total { font-weight: 700; font-size: var(--t-3); }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }

@media (min-width: 720px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }

/* Print: expand every accordion panel (SPEC: all panels open when printed). */
@media print {
  .site-header, .nav, .menu, .hero__video, .hero__play, .review-form-wrap, .bottombar { display: none; }
  details:not([open]) > *:not(summary) { display: block !important; }
}

/* Admin: ticket-type table */
.tt-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tt-table th { text-align: left; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 6px 8px 6px 0; }
.tt-table td { padding: 8px 8px 8px 0; border-top: 1px solid var(--line); vertical-align: middle; }
.tt-table form { margin: 0; }
.tt-table .btn { --btn-h: 36px; --btn-pad-y: 6px; --btn-pad-x: 12px; --btn-font: .9rem; }
.tt-row--inactive td { color: var(--muted); }

/* ==================================================================================
   Admin layout (admin-base.njk): its own top bar, no public navigation.
   ================================================================================== */
body.is-admin { background: #F3EEE3; }
.admin-bar { background: var(--green-deep); color: #E9E2D2; position: sticky; top: 0; z-index: 50; }
.admin-bar__inner { max-width: var(--wrap); margin: 0 auto; padding: 10px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; min-height: 60px; }
.admin-bar__brand { color: #fff; text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 1.25rem; }
.admin-bar__brand span { color: var(--gold-light); font-family: var(--sans); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; margin-left: 6px; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.admin-nav a { color: #E9E2D2; text-decoration: none; font-weight: 600; font-size: .95rem; padding: 8px 12px; border-radius: 999px; }
.admin-nav a:hover { background: rgba(255,255,255,.08); }
.admin-nav a[aria-current="page"] { background: rgba(255,255,255,.14); color: #fff; }
.admin-bar__right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.admin-bar__who { font-size: .85rem; color: #CFC7B4; }
.admin-bar__site { color: var(--gold-light); font-weight: 600; text-decoration: none; font-size: .95rem; }
.admin-bar__site:hover { text-decoration: underline; }
.admin-bar__out { margin: 0; }
.admin-bar__out .btn { --btn-h: 36px; --btn-pad-y: 6px; --btn-pad-x: 12px; --btn-font: .9rem; background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.admin-main .section { padding: clamp(24px, 4vw, 44px) 0; }
/* The sign-in pages (no admin frame): the rule above zeroed the side gutters too, so on a phone the
   heading, the field and the button ran to the edge of the screen. */
body:not(.a-host) .admin-main > .section.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.admin-main h1 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
/* Ride cancel gate */
.cancel-gate { border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 12px 14px; background: #FBF1E8; margin: 10px 0; }
.cancel-gate strong { color: var(--accent); }
.cancel-gate input[type="text"] { width: 100%; padding: 10px 12px; border: 1px solid var(--field-line); border-radius: var(--radius-sm); font: inherit; margin: 8px 0; }
/* Testimonial moderation */
.tm-list { display: grid; gap: 14px; }
.tm-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; }
.tm-item--pending { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); }
.tm-item__meta { color: var(--muted); font-size: var(--t-1); margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tm-item__body { margin: 0 0 12px; font-family: var(--display); font-size: var(--t-2); }
.tm-item__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tm-item__actions form { margin: 0; }

/* Picture with a blurred placeholder behind it */
.pic { display: block; }
.pic--ph { background-size: cover; background-position: center; }
.pic img { display: block; }
/* Admin: gallery contact sheet */
.sheet { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.sheet__item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.sheet__item--noalt { border-color: var(--accent); }
.sheet__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sheet__meta { padding: 8px 10px; font-size: .78rem; color: var(--muted); display: grid; gap: 2px; }
.sheet__meta code { font-size: .72rem; word-break: break-all; color: var(--ink); }
.sheet__alt { color: var(--green); }
.sheet__noalt { color: var(--link); font-weight: 600; }

/* ==================================================================================
   Gallery, three levels
   ================================================================================== */
/* Level 1: album cards */
.albums { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .albums { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .albums { grid-template-columns: repeat(3, 1fr); } }
.album-card { margin: 0; }
.album-card__link { display: block; text-decoration: none; color: inherit; background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.album-card__media { aspect-ratio: 4 / 3; background: var(--green-deep); overflow: hidden; }
.album-card__media .pic, .album-card__img { width: 100%; height: 100%; }
.album-card__img { object-fit: cover; transition: transform .6s ease; }
.album-card__link:hover .album-card__img { transform: scale(1.03); }
.album-card__body { padding: 18px 20px 20px; }
.album-card__title { margin: 0 0 4px; font-size: var(--h3); }
.album-card__event { margin: 0 0 4px; color: var(--ink); font-weight: 500; }
.album-card__meta { margin: 0; color: var(--muted); font-size: var(--t-2); }
/* Level 2: square tiles, 2 / 3 / 4 across */
.page-hero--album { min-height: clamp(220px, 36vh, 420px); }
.page-hero__pic { position: absolute; inset: 0; z-index: 0; }
.page-hero__pic .page-hero__img { position: static; width: 100%; height: 100%; }
.crumb { color: inherit; text-decoration: none; }
.crumb:hover { text-decoration: underline; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) { .tiles { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.tile { margin: 0; }
.tile__link { display: block; border-radius: var(--radius-sm); overflow: hidden; }
.tile__link:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.tile__pic { display: block; aspect-ratio: 1; background-size: cover; background-position: center; background-color: var(--ivory-2); }
.tile__img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .5s ease; }
.tile__link:hover .tile__img { transform: scale(1.04); }
.tiles__more { margin: 22px 0 8px; text-align: center; }
/* Overlay (gallery.js) */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8, 12, 20, .94); display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center; padding: 56px 12px 12px; }
.lightbox[hidden] { display: none; }
body.lightbox-open { overflow: hidden; }
.lightbox__figure { margin: 0; max-width: 100%; max-height: calc(100vh - 140px); display: grid; justify-items: center; gap: 10px; }
.lightbox__img { max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; border-radius: 6px; }
.lightbox__caption { color: #D9D2BE; font-size: var(--t-2); text-align: center; max-width: 70ch; }
.lightbox__close { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.08); color: #fff; font-size: 1.6rem; cursor: pointer; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 0; border-radius: 8px; background: rgba(255,255,255,.1); color: #fff; font-size: 2rem; cursor: pointer; }
.lightbox__nav:disabled { opacity: .3; cursor: default; }
.lightbox__nav--prev { left: 8px; } .lightbox__nav--next { right: 8px; }
.lightbox__bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; padding: 8px 0 env(safe-area-inset-bottom, 0px); }
.lightbox__status { color: var(--gold-light); font-weight: 600; min-width: 90px; }
/* Level 3: photo page */
.photo-page { padding-bottom: clamp(24px, 4vw, 48px); }
.photo-page__head { padding-top: 22px; }
.crumbs { color: var(--muted); margin: 0 0 6px; }
.photo-page__title { font-size: var(--h2); margin: 0 0 14px; }
.photo-page__figure { margin: 0; background: var(--navy); }
.photo-page__pic { display: block; max-width: 1100px; margin: 0 auto; background-size: cover; background-position: center; }
.photo-page__img { width: 100%; height: auto; display: block; }
.photo-page__caption { color: #D9D2BE; text-align: center; padding: 10px 16px; margin: 0; }
.photo-page__bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-top: 16px; }
.photo-page__nav { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-page__share { display: flex; gap: 10px; align-items: center; }
.btn--disabled { opacity: .45; pointer-events: none; }
/* Admin album settings */
.album-settings { margin: 0 0 16px; }
.album-settings__grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .album-settings__grid { grid-template-columns: repeat(3, 1fr); } .album-settings__wide { grid-column: 1 / -1; } }
.album-settings label { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; }
.album-settings input, .album-settings select { padding: 9px 10px; border: 1px solid var(--field-line); border-radius: var(--radius-sm); font: inherit; background: var(--paper); }
.sheet__item--cover { outline: 3px solid var(--gold); }

/* ---- Schedule: calendar + list, party annotation ---- */
.schedule-tools { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; margin: 0 0 18px; }
.schedule-tools__party input { width: 5.5em; margin-left: 8px; }
.schedule-tools .check { margin: 0; }
.view-toggle { margin-left: auto; display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.view-toggle a { padding: 7px 16px; text-decoration: none; color: var(--ink); font-weight: 600; }
.view-toggle a[aria-current] { background: var(--green); color: #fff; }
.cal-month h2 { margin: 18px 0 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-grid__wd { font-size: var(--t-1); text-align: center; opacity: 0.7; padding: 4px 0; }
.cal-day { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); text-decoration: none; color: var(--ink); }
a.cal-day:hover { border-color: var(--green); }
.cal-day--empty { background: transparent; border-color: transparent; color: var(--muted); } /* dim by colour, not opacity: the number stays at 6:1 */
.cal-day--empty .cal-day__num { font-weight: 500; }
.cal-day--out { visibility: hidden; }
.cal-day__num { font-weight: 700; }
.cal-day__meta { font-size: var(--t-1); color: var(--green); }
.cal-day.is-soldout .cal-day__meta { color: var(--link); }
.cal-day.is-selected { outline: 2px solid var(--gold); background: var(--ivory-2); }
.cal-strip { display: none; }
.day-panel { margin-top: 22px; }
.departure--tight { opacity: 0.72; }
.departure--tight .departure__status { color: var(--link); font-weight: 600; }
@media (max-width: 699px) {
  .cal-grid { display: none; }
  .cal-strip { display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: 6px; padding: 2px 0 8px; -webkit-overflow-scrolling: touch; scroll-padding: 0 16px; }
  .cal-strip .cal-day { flex: 0 0 56px; scroll-snap-align: start; min-height: 66px; padding: 6px 2px; align-items: center; text-align: center; gap: 3px; }
  .cal-strip .cal-day__wd { font-size: var(--t-1); opacity: 0.7; }
  /* Shape carries the state; colour only reinforces it (must survive greyscale):
     available = filled dot, sold out = hollow ring + dimmed date, private = filled diamond. */
  .cal-strip .cal-day__dots { display: flex; gap: 4px; height: 8px; align-items: center; }
  .cal-strip .cal-day__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-sizing: border-box; }
  .cal-strip .cal-day.is-soldout .cal-day__dots i { background: transparent; border: 1.5px solid var(--accent); }
  .cal-strip .cal-day.is-soldout .cal-day__num { opacity: 0.6; }
  .cal-strip .cal-day.is-private .cal-day__dots i { border-radius: 0; transform: rotate(45deg) scale(0.85); background: var(--gold); }
  .view-toggle { margin-left: 0; }
}
.departures__group { margin: 18px 0 10px; font-size: var(--t-2); }
.departure--private .departure__status { color: var(--green); font-weight: 600; }

/* ---- Experience Hub ---- */
.hub__hero { width: 100%; height: auto; max-height: 360px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 18px; }
.hub__grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 18px; }
@media (min-width: 760px) { .hub__grid { grid-template-columns: 1fr 1fr; } .hub__policy { grid-column: 1 / -1; } }
.hub__time { font-size: var(--t-3); font-weight: 600; margin: 4px 0; }
.hub__countdown { font-family: var(--display); font-size: var(--t-4); color: var(--green); margin: 6px 0 12px; }
.hub__qr-box { max-width: 260px; margin: 8px auto 0; background: #fff; padding: 10px; border-radius: var(--radius-sm); }
.hub__qr-box svg { width: 100%; height: auto; display: block; }

/* Wide viewports: the column stays 1280px and the type stays at its spec sizes; the cream page simply widens around it. */
@media (min-width: 1600px) {
  .featured { grid-template-columns: 1.15fr 1fr; min-height: min(78vh, 980px); }
  .editorial { grid-template-columns: 1.1fr 1fr; min-height: min(78vh, 980px); }
  .featured__panel { padding: clamp(48px, 4vw, 120px) clamp(48px, 5vw, 140px); }
  .editorial__panel { padding: clamp(48px, 4vw, 120px) clamp(48px, 5vw, 140px); }
  .featured__title { font-size: var(--h1); }
  .featured__lead, .editorial__panel .lead { font-size: var(--lead); }
}
/* Full-bleed photographs: the originals carry a watermark in the bottom-right corner. Anchor
   top-left and overscan slightly so that corner is always cropped out of the frame. */
.featured__img, .editorial__img, .steps-band__img, .happening-empty__img {
  object-position: left top; transform: scale(1.08); transform-origin: top left;
}
/* Hero (Brief K §1): the video frames carry no watermark (checked at full resolution), so no
   overscan — it was cropping a further 8% off the bottom. The riders' subject band runs from
   20% of the frame height to the bottom edge, so the crop is anchored to the BOTTOM at every
   width: with the hero at 84vh the box holds 80%+ of the frame on a 16:9 screen, so the whole
   band is in it. Right-anchored so the lit arches sit under the darker scrim. */

/* ---- Schedule list: one row per date, departures as cards ---- */
.scope-select { margin: 0 0 18px; }
.scope-select select { font: inherit; padding: 8px 36px 8px 14px; border-radius: 999px; border: 1px solid var(--field-line); background: var(--paper); margin-left: 8px; }
.departures { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.departure { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; }
.departure__time { font-size: var(--t-3); min-width: 0; }
.departure__status { margin-right: 0; font-size: var(--t-2); }
.departure .btn { margin-top: 4px; }
/* "Join the waitlist" is longer than "Book": it takes the card's width so it stays on one line on a phone (Brief AW §3). */
.departure .departure__waitlist { align-self: stretch; --btn-pad-x: 6px; white-space: nowrap; }
.day-panel .departures, .night-row .departures { margin: 0; }
.night-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px 28px; padding: 22px 0; border-top: 2px solid var(--line); }
.night-row:first-of-type { border-top: 0; padding-top: 6px; }
.night-row__date { display: flex; flex-direction: column; gap: 2px; }
.night-row__wd { font-family: var(--display); font-size: var(--t-4); font-weight: 600; line-height: 1.1; }
.night-row__day { color: var(--muted); font-weight: 600; }
.schedule-window { margin-top: 18px; color: var(--muted); }
@media (max-width: 699px) {
  .night-row { grid-template-columns: 1fr; gap: 10px; }
  .night-row__date { flex-direction: row; align-items: baseline; gap: 10px; }
  .departures { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
.scope-select label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; }
.scope-select select { max-width: 100%; margin-left: 0; }
.page-hero__img { object-position: left top; transform: scale(1.08); transform-origin: top left; }

/* ---- Facts: legible labels with real separation from values (featured panel ≥ 15px) ---- */
.facts { gap: 12px 22px; }
.facts dt { margin-bottom: 4px; }
.facts dd { font-size: var(--t-2); line-height: 1.35; }
.featured .facts { gap: 16px 28px; margin-top: 18px; }
.featured .facts dt { font-size: var(--t-1); letter-spacing: .12em; margin-bottom: 6px; }
.featured .facts dd { font-size: var(--t-2); }
.facts--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.facts__detail { display: block; font-weight: 500; font-size: var(--t-1); color: var(--muted); margin-top: 2px; }
@media (max-width: 479px) { .facts--three { grid-template-columns: 1fr 1fr; } }

/* ---- Editorial band: photo and text column the same height, text centred ---- */
@media (min-width: 1000px) {
  /* A minimum, not a cap: the text column may need more room (the owner's full paragraph),
     and the photograph stretches to whatever the row becomes. Nothing is ever clipped. */
  .editorial { min-height: clamp(520px, 70vh, 820px); align-items: stretch; }
  .editorial__media { height: 100%; min-height: 0; }
  .editorial__panel { justify-content: center; }
}
.editorial__panel h2 { margin: 6px 0 14px; }

/* ---- Occasions band: warm, type-led, no photograph ---- */
.section--occasions {
  background-color: var(--ivory-2);
  background-image: radial-gradient(rgba(22,61,46,.07) 1px, transparent 1px), radial-gradient(rgba(201,162,74,.10) 1px, transparent 1px);
  background-size: 22px 22px, 44px 44px; background-position: 0 0, 11px 11px;
  border-top: 1px solid rgba(22,61,46,.08); border-bottom: 1px solid rgba(22,61,46,.08);
}
.occasions { max-width: 62ch; text-align: left; padding-top: clamp(8px, 2vw, 20px); padding-bottom: clamp(8px, 2vw, 20px); }
.occasions h2 { font-size: var(--h2); color: var(--green); margin: 4px 0 12px; }
.occasions__lead { color: var(--ink); max-width: 58ch; }
.occasions__price { font-family: var(--display); font-size: var(--t-3); color: var(--green); font-weight: 600; margin: 8px 0 18px; }

/* ---- Featured panel: same height discipline as the editorial band; the picture fills its column ---- */
.featured__media .pic { display: block; width: 100%; height: 100%; }
@media (min-width: 1000px) {
  .featured { min-height: clamp(520px, 72vh, 860px); align-items: stretch; }
  .featured__media { height: 100%; min-height: 0; }
}

/* ==========================================================================
   Brief I — event-scoped everything (October 2026)
   ========================================================================== */
/* --- What we do: the owner's list on navy, as many entries as there are, never a forced grid ---- */
.offers { padding-top: 22px; padding-bottom: 22px; display: grid; gap: 10px 32px; align-items: center; }
@media (min-width: 900px) { .offers { grid-template-columns: 200px minmax(0, 1fr); } }
.offers__title { margin: 0; color: #fff; font-size: var(--h3); }
.offers__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 40px; }
.offer { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.offer__label { color: var(--gold-light); font-family: var(--display); font-weight: 600; font-size: var(--t-3); text-decoration: none; }
.offer__label:hover { text-decoration: underline; }
.offer__line { color: #C9D6CD; font-size: var(--t-2); }

/* --- Event blocks: one per event, its own prices and next departures; a rule between blocks, never a card in a card ---- */
.events { padding-top: 32px; padding-bottom: 32px; }
.event-block + .event-block { margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.18); }
.tone-cream .event-block + .event-block { border-top-color: var(--line); }
.event-block .section__head { margin-bottom: 14px; }
.event-block__fact { font-weight: 500; }
.event-block__from { margin: 0 0 14px; font-size: var(--t-2); }
.event-block .ticket-cards { margin-bottom: 16px; }
/* The seat state on a paper card: a dark rust (6.6:1 on paper), not the accent (4.0:1, which axe flagged). */
.departure-row--sold_out .departure-row__seats, .departure-row--low .departure-row__seats,
.tone-forest .departure-row--sold_out .departure-row__seats, .tone-forest .departure-row--low .departure-row__seats { color: #8F3A10; font-weight: 600; }

/* --- Private parties: a statement, a phone number, an email. No price, no button, no dates. ---- */
.private-rides__inner { max-width: 640px; display: flex; flex-direction: column; gap: 10px; }
.private-rides__inner > * { margin: 0; }
.private-rides__contact { font-size: var(--t-2); font-weight: 600; }

/* --- About: the owner's words beside their farm photographs; the mission on navy ---- */
.about-intro { display: grid; gap: 28px; }
@media (min-width: 900px) { .about-intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; } }
.about-copy { font-size: var(--t-2); line-height: 1.6; color: var(--ink); max-width: 60ch; }
.about-intro__media { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.about-intro__media > * { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--ivory-2); }
.about-intro__media > :nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16 / 9; } /* the tractor, wide */
/* The pull quote: the About page's own voice, decorative, nowhere near a review. */
.about-quote { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .about-quote { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; } }
.about-quote__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--ivory-2); }
.about-quote__media .pic img, .about-quote__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-quote__text { margin: 0; padding-left: 22px; border-left: 4px solid var(--gold); }
.about-quote__text p { font-family: var(--display); font-style: italic; font-size: var(--h3); line-height: 1.25; color: var(--green); margin: 0 0 10px; text-wrap: balance; }
.about-quote__text footer { color: var(--muted); font-weight: 600; }
.about-intro__media .pic img, .about-intro__media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-mission { text-align: center; }
.about-mission__inner { max-width: 640px; }
.about-mission h2 { color: #fff; }
.about-celebrate { text-align: center; }
.about-celebrate__inner { max-width: 640px; margin: 0 auto; }
.about-strip { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about-strip li { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--ivory-2); }
.about-strip .pic img, .about-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The <picture> must be the box's height, or a portrait image renders tall and is CLIPPED by the tile instead of cropped by object-fit — and the focal point does nothing (the pumpkin-patch picture, Brief K §7). */
.about-strip .pic, .about-quote__media .pic, .farm-band__photo .pic, .about-intro__media .pic { height: 100%; }

/* /admin/gallery: alt text and the focal point per photo (Brief K §7). */
.sheet__edit { display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px auto; gap: 6px; align-items: end; margin-top: 8px; font-size: .8rem; }
.sheet__edit label { display: grid; gap: 2px; color: var(--muted); }
.sheet__edit input { font: inherit; padding: 6px 8px; border: 1px solid var(--field-line); border-radius: 6px; background: #fff; min-width: 0; }
.sheet__edit .btn { --btn-h: 34px; --btn-pad-y: 5px; --btn-pad-x: 10px; --btn-font: .85rem; }
.sheet__unlisted { color: var(--muted); font-size: .85rem; font-weight: 400; }

/* --- Admin: the booking search box (Brief Q §1) and the reconciliation page (§2) ------------- */
.admin-bar__search { display: flex; gap: 6px; align-items: center; margin: 0; flex: 1 1 260px; max-width: 420px; }
.admin-bar__search input { flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: var(--t-1); }
.admin-bar__search input::placeholder { color: #CFC7B4; }
.admin-bar__search .btn { --btn-h: 36px; --btn-pad-y: 6px; --btn-pad-x: 12px; --btn-font: .9rem; background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.search-form { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin: 0 0 18px; }
.search-form label { display: grid; gap: 4px; flex: 1 1 320px; font-weight: 600; }
.search-form input { min-height: 46px; padding: 10px 14px; border: 1px solid var(--field-line); border-radius: var(--radius-sm); font: inherit; background: var(--paper); }
.search-hit--cancelled td, .search-hit--refunded td { color: var(--muted); }
.search-hit--cancelled .pill, .search-hit--refunded .pill { background: #F1D7CE; color: #7A2E14; }
.reconcile__head { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: end; justify-content: space-between; margin-bottom: 18px; }
.reconcile__scope { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 0; min-width: 0; max-width: 100%; }
.reconcile__scope label { display: grid; gap: 4px; font-size: var(--t-1); font-weight: 600; min-width: 0; max-width: 100%; }
/* A ride's label is long ("Downtown Willow Glen Holiday Wagon Ride · Fri Dec 4, 5:15 PM"): the picker never outgrows a phone (Brief AH; found by the gate once its database had departures today). */
.reconcile__scope select { max-width: 100%; min-width: 0; }
.reconcile__scope input, .reconcile__scope select { font: inherit; padding: 8px 10px; border: 1px solid var(--field-line); border-radius: var(--radius-sm); background: var(--paper); }
.reconcile__totals { max-width: 720px; }
.reconcile__totals .num, .reconcile__rows .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reconcile__gross th, .reconcile__gross td { border-top: 2px solid var(--ink); }
.reconcile__cashbox th, .reconcile__cashbox td { font-weight: 700; background: var(--ivory-2); }
.reconcile h2 { margin-top: 32px; }
@media print {
  .page-reconcile .admin-bar, .page-reconcile .reconcile__scope, .page-reconcile .skip-link { display: none !important; }
  .page-reconcile body, .page-reconcile { background: #fff; }
  .reconcile { padding: 0; }
  .reconcile__totals, .reconcile__rows { page-break-inside: avoid; font-size: 11pt; }
  .reconcile h2 { page-break-after: avoid; }
}

/* --- Admin at phone width (Brief U §1: the gate now measures every admin page at 390) ---------- */
/* The honeypot stays off-screen for bots; its label must not read as spilled content. */
.hp * { overflow: hidden; }
/* Tables wider than a phone scroll sideways inside their wrapper instead of widening the page. */
.tt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
/* A card never forces its column wider than the grid track; long links (the Hub URL) wrap. */
.cards > .card { min-width: 0; }
.card input:not([type="checkbox"]):not([type="radio"]), .card select, .card textarea { max-width: 100%; box-sizing: border-box; }
.admin-main p, .admin-main li, .admin-main dd { overflow-wrap: anywhere; }
/* The per-photo edit form in the contact sheet: two columns, every control takes its cell. */
.sheet__edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin-top: 6px; }
.sheet__edit label { display: grid; gap: 2px; min-width: 0; }
.sheet__edit label:first-child, .sheet__edit .btn { grid-column: 1 / -1; }
.sheet__edit input { width: 100%; min-width: 0; box-sizing: border-box; }
/* The album settings: a select whose longest option is a file name must not set the column's width. */
.album-settings__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .album-settings__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.album-settings label { min-width: 0; }
.album-settings input, .album-settings select { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }

/* The 404 page: three ways on, wrapping on a phone. */
.notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* TAP TARGETS (Brief AR §6a; layout gate rule p). On a phone everything that is tapped is at least 44px each
   way: the footer's links, a breadcrumb, a button, a field, a checkbox with its label. A link inside a
   sentence is read, not aimed at, and keeps the line's height. */
@media (max-width: 480px) {
  .site-footer__links a, .site-footer__phone a, .site-footer__social a, .view-toggle a, a.statbar__value, a.offer__label, .testimonials__more a, .crumbs a, a.crumb,
  main p > a:only-child, main .card h3 > a:only-child, .faq__head p > a, label.check > a, .site-header .brand { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .btn, .btn.btn--sm, main button { min-height: 44px; min-width: 44px; }
  main input:not([type=checkbox]):not([type=radio]):not([type=hidden]), main select, main textarea { min-height: 44px; }
  main label:has(> input[type=checkbox]), main label:has(> input[type=radio]), label.check, label.ticket-row { min-height: 44px; }
}

/* The preview banner (Brief AS §1b): staging only. A plain strip above the header, part of the page's flow,
   so it pushes the page down and covers nothing. */
.preview-banner { margin: 0; padding: 10px 16px; background: #5B2A00; color: #FFF4E0; font-size: .9375rem; line-height: 1.4; text-align: center; }
.preview-banner strong { color: #fff; }

/* A tick box and its words are ONE ROW, whatever the form around it does with its labels (Brief AY §2,
   layout rule q). The join form and the guide editor lay every label out as a column, which left the box
   alone on a line above the words it belongs to. */
form label.check { display: flex; flex-direction: row; gap: 8px; }
form label.check > input[type="checkbox"], form label.check > input[type="radio"] { flex: none; width: auto; }