@charset "UTF-8";
/* ============================================================
   Skitts Mountain Farms — site styles (Framer fidelity port)
   Values measured from the original: 16px panel gutters, 24px
   radii, hero padding 144px top, gold→amber gradient card.
   Reference captures: ../_migration/screens/
   ============================================================ */

/* ---------- shell ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--cream);
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

/* Bands run full-bleed at the panel gutter. Width is a per-section decision
   made by the container tier inside each panel, never by a page-level
   wrapper. */
main {
  display: grid;
  gap: var(--panel-gap);
  padding: var(--panel-gap);
}

/* Section-width architecture (.padding-global / .container-*) comes from the
   vendored core.css (2026-08-17) — the mirror this file carried is gone. */

/* ---------- header / nav ----------
   The nav overlays the first panel on every page — it is not a band of its own.
   Measured off the original at 1440 and 1920 (both insets are fixed, so the
   shell tracks the panel at any width): panel from y=16; cream shell at (40,40)
   = the 16px page gutter plus a 24px inset, 1360×66 with a 10px ring; orange
   pill (50,50) 1340×46 holding a 135×30 logo. Verified identical on all four
   pages of the original. */
body {
  position: relative;
}

/* The first panel's top edge to the nav's bottom edge — what a first panel must
   clear so its content doesn't collide with the overlaid nav. */
:root {
  --nav-clearance: 90px;
}

/* z-index must clear the hero's top layer. The nav and `.hero_badge` were both
   at 10, and since <main> follows <header> in the DOM the badge won the tie and
   painted over the open mobile menu — `elementFromPoint` on the Contact link
   returned the badge, so the link was not tappable. The hero's layers run 1–10,
   so 30 leaves headroom. This element creates the stacking context the mobile
   panel's own z-index resolves inside. */
.site_header {
  position: absolute;
  inset: calc(var(--panel-gap) + 24px) calc(var(--panel-gap) + 24px) auto;
  z-index: 30;
}

/* Deliberately no box-shadow — the shell sits flat on the panel. */
.site_nav-shell {
  background: var(--cream);
  border-radius: var(--radius-pill);
  padding: 10px;
}

.site_nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 46px;
  background: var(--amber);
  border-radius: var(--radius-pill);
  padding: 0 24px; /* measured pill chrome */
}

/* The mark sits in a fixed 135×30 box with object-fit: contain, matching the
   original. `height: auto` rendered it 134×34 — too tall, because our asset's
   aspect differs slightly from the box the original gives it. */
.site_nav-mark img {
  width: 135px;
  height: 30px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

/* Three destinations, no submenus — the row fits at 320px, so it stays inline
   at every width and there is no disclosure to build or manage. The gap is the
   only thing that flexes; see the mobile block for the type step. */
.site_nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 1.9rem);
  margin: 0;
  padding: 0;
}

/* Core's content-list spacing (li + li margin-top) leaks into this flex ROW
   and seated every link after the first 3.3px low — visible once the
   floating pill enlarged the type (caught 2026-08-18; the in-panel nav had
   the same subtle skew on every page). */
.site_nav-links li {
  margin-block: 0;
}

/* The padding/negative-margin pair expands each link's HIT AREA to the 44px
   touch minimum (components/navigation spec) without growing the pill — the
   padding is transparent and the margin cancels its layout effect. Caught by
   the 2026-08-17 responsive-doctrine audit: bare links measured 15px tall. */
.site_nav a {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--font-size-small);
  text-decoration: none;
  color: var(--ink);
  padding-block: 0.9rem;
  margin-block: -0.9rem;
  padding-inline: 0.25rem;
  margin-inline: -0.25rem;
}

/* ---------- floating compact pill (scroll nav) ---------- */
/* The original's second nav instance: fixed at top 16px, centered, sliding
   down once ~100px of scroll has taken the in-panel bar away (measured off
   the live Framer site 2026-08-18 — container 600×66 at 1920, pill padding
   18px 40px, same cream ring; 342×47 on the phone). Ours renders the same
   shell/pill construction at fit-content width (three links — the no-Home
   house rule applies to this instance too, the mark links home). The
   data-scrolled attribute is set by the Header's inline script; the hidden
   state parks it above the viewport, so no JS means no float, and reduced
   motion (core.css kills transitions) means it appears without the slide. */
.site_float {
  position: fixed;
  top: 16px;
  left: 50%;
  translate: -50% calc(-100% - 32px);
  z-index: 40;
  /* max-content, not fit-content: with left 50% the shrink-to-fit space is
     only the viewport's right half, which wrapped the labels at phone
     widths. The cap keeps it inside the viewport on the narrowest screens. */
  width: max-content;
  max-width: calc(100vw - 16px);
  transition: translate 400ms ease;
}

html[data-scrolled] .site_float {
  translate: -50% 0;
}

.site_float .site_nav {
  gap: var(--space-lg);
  padding: 18px 40px; /* the original's compact-pill chrome */
}

/* ---------- (end floating pill) ---------- */

/* ---------- rolling-label hover ---------- */
/* The original's nav hover (extracted live 2026-08-18): duplicate labels
   stacked in a one-line clipped box; hover rolls the stack up a line so the
   fresh copy slides in from below. Ported per the substance contract with
   the house timing rather than Framer's spring; :focus-visible gets the same
   roll (the original is hover-only — keyboard parity is ours). Reduced
   motion: core kills the transition, leaving an instant swap. */
.nav_roll {
  display: inline-block;
  height: 1lh;
  overflow: hidden;
  vertical-align: top;
}

.nav_roll-stack {
  display: flex;
  flex-direction: column;
  transition: translate 220ms ease;
}

.site_nav a:hover .nav_roll-stack,
.site_nav a:focus-visible .nav_roll-stack {
  translate: 0 -1lh;
}

/* No visible current-page indicator — the original has none, and this is a
   migration. The aria-current="page" attribute stays in the markup, so the
   current page is still announced; only the invented underline is gone. */

/* ---------- panels ---------- */
/* The section: carries background and vertical rhythm, never width.
   The horizontal gutter belongs to .padding-global inside it. */
.panel {
  border-radius: var(--radius-md);
  padding-block: clamp(1.75rem, 4vw, 3.5rem);
}

/* A panel nested in a row is a component, not a band — it carries its own
   inline padding instead of the band gutter, which would be far too tight at
   card width. */
.cards_row > .panel,
.panel_row > .panel {
  padding-inline: clamp(1.75rem, 4vw, 3.5rem);
}

.panel > :last-child {
  margin-bottom: 0;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 700;
  /* medium, not regular (2026-08-17 PageSpeed gate): cream-on-poppy is
     4.02:1, and 18px/700 sits 0.7px under WCAG's bold large-text line
     (14pt = 18.67px) where 4.5:1 would apply. At 20.25px the button IS
     large text, where 4.02 ≥ 3:1 passes — matching brand.css's own note
     that poppy is a large-text/CTA-fill color. */
  font-size: var(--font-size-medium);
  line-height: 1;
  padding: 0.85em 1.6em;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  background: var(--color-accent);
  color: var(--cream);
  transition: background 140ms ease, translate 140ms ease;
}

.btn:hover {
  background: var(--color-accent-dim);
  color: var(--cream);
  translate: 0 -2px;
}

/* ============================================================
   HOME
   ============================================================ */

/* ---------- hero ---------- */
/* Top padding scales with the artwork (12.857% of stage width), capped at the
   144px the stage reaches at its own max-width; floored at the nav clearance. */
.hero {
  padding: max(var(--nav-clearance), min(11.571%, 144px)) 0 0;
  overflow: hidden;
}

/* The artwork's stage: a fixed 1120×676 composition, centred. The cap is the
   illustration's intrinsic size — it does not stretch to the section's
   container tier. Every layer below is a percentage of this stage.
   Deliberately px, not rem (was 70rem when the root was 16px): the stage is
   MEASURED ARTWORK — the 2026-08-17 root change to 112.5% must not scale a
   locked composition. Same artwork exemption as the hero's text-resize
   ruling in BUILD. */
.hero_scene {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1120 / 676;
  max-width: 1120px;
  margin-inline: auto;
}

/* Width AND height are both set deliberately — never `height: auto`. The layer
   proportions are part of the composition. */
.hero_scene img {
  position: absolute;
}

/* SKITTS — each letter is placed individually rather than tracked as text; the
   inter-glyph gaps are irregular by design and no letter-spacing reproduces
   them. Offsets below are percentages of the stage. */
.hero_letters {
  position: absolute;
  inset: 12.574% 0 auto;
  height: 48.817%;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 26.786cqw;
  line-height: 1.1;
  text-transform: uppercase;
}

.hero_letters span {
  position: absolute;
  top: 0;
}

.hero_letters span:nth-child(1) { left: 0;       color: var(--amber); }
.hero_letters span:nth-child(2) { left: 16.696%; color: var(--teal); }
.hero_letters span:nth-child(3) { left: 36.607%; color: var(--chartreuse); }
.hero_letters span:nth-child(4) { left: 44.643%; color: var(--slate); }
.hero_letters span:nth-child(5) { left: 63.036%; color: var(--leaf); }
.hero_letters span:nth-child(6) { left: 80.446%; color: var(--gold); }

/* Scene layers — percentages of the 1120×676 stage; z-index is paint order.
   Width, height AND rotation are all deliberate: several layers are rotated in
   the composition, and the rotation is what seats them against each other. */
.hero_sun       { z-index: 2; left: 10.104%; top: -2.623%; width: 50.184%; height: 55.945%; rotate: -10deg; }
.hero_mountains { z-index: 3; left: 14.857%; top: 40%;     width: 70.25%;  height: 20%; }
.hero_lake      { z-index: 4; left: 44.177%; top: 57.698%; width: 42.727%; height: 15.939%; rotate: 2deg; }
.hero_pines     { z-index: 5; left: 69.092%; top: 48.844%; width: 14.824%; height: 21.979%; rotate: 1deg; }
.hero_pine      { z-index: 6; left: 35.595%; top: 51.281%; width: 10.133%; height: 16.819%; }
.hero_hay       { z-index: 7; left: 14.153%; top: 63.518%; width: 31.17%;  height: 9.422%;  rotate: 5deg; }
.hero_oak       { z-index: 8; left: 4.106%;  top: 50.29%;  width: 24.886%; height: 25.079%; rotate: -10deg; }
.hero_flowers   { z-index: 9; left: 33.127%; top: 66.29%;  width: 33.281%; height: 9.018%;  rotate: 2deg; }

/* Badge: 150px disc centred at (984, 394) of the 1120×676 stage, rotated +14deg.
   Label and ring sizes are in scene cqw, not badge cqw — the badge's own width
   is a cqw value, so it can't be its own container. */
.hero_badge {
  position: absolute;
  z-index: 10;
  left: 81.607%;
  top: 47.929%;
  width: 12.5cqw;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  text-align: center;
  text-decoration: none;
  background: var(--chartreuse);
  border-radius: 50%;
  outline: 0.527cqw solid oklch(55% 0.25 290); /* the violet ring */
  rotate: 14deg;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 1.964cqw;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--cream);
  transition: rotate 140ms ease, scale 140ms ease;
}

/* Dashed ring drawn as an SVG stroke, not a CSS dashed border.

   APPROVED OPERATOR OVERRIDE (Philip, 2026-08-15) — do not "correct" these back
   to the measured values. Measured off the original: 4.1px stroke, 9.23px dash.
   Shipped: 4.9px stroke, 10.20px dash. The original's ring is soft-edged
   artwork, so its anti-aliased spill reads heavier than its solid core
   measures; a crisp SVG stroke at the measured width looks thinner than the
   original does. The count (26) and phase (first dash at 7.38deg, via
   stroke-dashoffset) ARE measured and must not change — dash length trades
   against gap so the 26 even repeats hold. `border-style:
   dashed` gives no control over dash length — the UA derives it from the border
   width, which produced 35 thin dashes against the original's 27 chunky ones.
   Measured off the original: ring radius 61.8 on a 144 disc, 5px stroke,
   dash 9.1px / gap 5.5px, normalised to 27 even repeats so there is no seam. */
.hero_badge::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Ccircle cx='70' cy='70' r='62.45' fill='none' stroke='%23F6F8F2' stroke-width='4.9' stroke-dasharray='10.20 4.89' stroke-dashoffset='-6.95'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  pointer-events: none;
}

.hero_badge:hover {
  rotate: 0deg;
  scale: 1.05;
  color: var(--cream);
}

/* MOBILE BADGE BOOST (Philip, 2026-08-17 — measured off the mobile capture):
   the original's phone variant renders the badge at 100px (ring included)
   where proportional scaling of the desktop composition gives ~61px — the
   badge grows to 22.1% of the stage, up from the desktop's 13.5%, at the
   same relative center (their mobile center sits at 0.870 of the scene
   width; the desktop's at 0.878). Grown about its own center: the 8cqw of
   added width is compensated half-and-half in left/top (top in stage-height
   units: 4cqw x 1120/676 = 6.627%). Everything stays in cqw and the flip is
   a container query, so the LOCKED desktop geometry above it is untouched
   and the dashed ring's count/phase scale with the disc by construction.
   The 48rem container line lands at ~800px viewport — the original's own
   phone flip (810). */
@container (width <= 768px) {
  .hero_badge {
    width: 20.5cqw;
    left: 77.607%;
    top: 41.302%;
    outline-width: 0.864cqw;
    font-size: 3.221cqw;
  }
}

/* ---------- hero entrance ---------- */
/* PORTED FROM THE ORIGINAL, not designed here. Framer drives these as
   `data-framer-appear-id` animations; the spec was extracted verbatim from the
   live site's SSR HTML (2026-08-15) and the desktop variant identified by the
   fact that every layer's `animate.rotate` equals the resting rotation our
   locked composition already measured (sun -10, pond 2, trees-right 1, big
   tree 0, corn 5, trees-left -10, flowers 2, badge 14). Per-layer origins,
   delays and springs are in CHANGELOG.md.

   THE LOCKED GEOMETRY IS THE RESTING STATE, and it is never restated here:
   each @keyframes below declares ONLY a `from`, so the implicit 100% keyframe
   is the element's own computed style. Change a layer's placement and its
   animation follows automatically — there is no second copy to drift.

   Offsets are in `cqw` (the stage is the container), not px, so the motion
   scales with the artwork exactly like every other value in this hero. The
   original's px offsets are against its 1120-wide stage: 620px = 55.357cqw,
   230px = 20.536cqw, 150px = 13.393cqw.

   `translate`/`scale`/`rotate` are the INDEPENDENT transform properties, so
   these compose with each layer's locked `rotate` instead of fighting a
   `transform` shorthand. `hero_mountains` is deliberately absent — the
   backdrop has no appear-id in the original and does not move. */

/* Framer springs, sampled to CSS. All four are overdamped (zeta 2.5–5.8), so
   they decelerate smoothly and never overshoot — no bounce to reproduce.
   Generated from (stiffness, damping, mass) via the damped-oscillator
   solution; durations are time-to-settle within 0.5%. */
.hero {
  /* stiffness 150, damping 60, mass 0.5 — zeta 3.46 */
  --ease-ground: linear(0, 0.1737, 0.3321, 0.4602, 0.5637, 0.6473, 0.7149, 0.7696, 0.8137, 0.8495, 0.8783, 0.9016, 0.9205, 0.9357, 0.9481, 0.958, 0.9661, 0.9726, 0.9778, 0.9821, 0.9855, 0.9883, 0.9905, 0.9924, 0.9938, 1);
  /* stiffness 150, damping 100, mass 0.5 — zeta 5.77 */
  --ease-edge: linear(0, 0.185, 0.3409, 0.467, 0.5689, 0.6513, 0.718, 0.772, 0.8156, 0.8508, 0.8794, 0.9024, 0.9211, 0.9362, 0.9484, 0.9583, 0.9662, 0.9727, 0.9779, 0.9821, 0.9856, 0.9883, 0.9906, 0.9924, 0.9938, 1);
  /* stiffness 400, damping 200, mass 1 — zeta 5.00 */
  --ease-sun: linear(0, 0.183, 0.3393, 0.4658, 0.568, 0.6506, 0.7175, 0.7716, 0.8153, 0.8506, 0.8792, 0.9023, 0.921, 0.9361, 0.9483, 0.9582, 0.9662, 0.9727, 0.9779, 0.9821, 0.9856, 0.9883, 0.9906, 0.9924, 0.9938, 1);
  /* stiffness 400, damping 100, mass 1 — zeta 2.50 */
  --ease-badge: linear(0, 0.156, 0.3181, 0.4493, 0.5553, 0.6409, 0.71, 0.7658, 0.8109, 0.8473, 0.8766, 0.9004, 0.9195, 0.935, 0.9475, 0.9576, 0.9658, 0.9724, 0.9777, 0.982, 0.9854, 0.9882, 0.9905, 0.9923, 0.9938, 1);
}

/* The seven scene layers that rise from below with a scale-up and a settle out
   of a shared +6deg tilt. */
@keyframes hero-layer-rise {
  from { opacity: 0; translate: 0 55.357cqw; scale: 0; rotate: 6deg; }
}

/* The sun drops in from above its rest position with no scale, unwinding from
   level into its -10deg tilt. */
@keyframes hero-sun-rise {
  from { opacity: 0; translate: 0 13.393cqw; rotate: 0deg; }
}

/* SKITTS rises as one block — the six letters do not stagger. */
@keyframes hero-letters-rise {
  from { opacity: 0; translate: 0 20.536cqw; }
}

/* The badge is last by a wide margin: it pops in at 3s, after the scene has
   settled, so it reads as a call-to-action rather than part of the scenery. */
@keyframes hero-badge-pop {
  from { opacity: 0; scale: 0.5; rotate: 0deg; }
}

/* Resting values stated explicitly so the implicit `to` keyframe interpolates
   from a definite value rather than from `none`. */
.hero_letters,
.hero_sun,
.hero_lake,
.hero_pines,
.hero_pine,
.hero_hay,
.hero_oak,
.hero_flowers,
.hero_badge {
  translate: 0 0;
  animation-fill-mode: backwards;
}

.hero_sun,
.hero_lake,
.hero_pines,
.hero_pine,
.hero_hay,
.hero_oak,
.hero_flowers,
.hero_badge {
  scale: 1;
}

/* name · duration · easing · delay — all four values are the original's. */
.hero_lake    { animation: hero-layer-rise   2080ms var(--ease-ground) 400ms  backwards; }
.hero_hay     { animation: hero-layer-rise   2080ms var(--ease-ground) 400ms  backwards; }
.hero_pine    { animation: hero-layer-rise   2080ms var(--ease-ground) 700ms  backwards; }
.hero_flowers { animation: hero-layer-rise   3510ms var(--ease-edge)   700ms  backwards; }
.hero_pines   { animation: hero-layer-rise   3510ms var(--ease-edge)   1000ms backwards; }
.hero_oak     { animation: hero-layer-rise   3510ms var(--ease-edge)   1000ms backwards; }
.hero_sun     { animation: hero-sun-rise     2630ms var(--ease-sun)    1000ms backwards; }
.hero_letters { animation: hero-letters-rise  600ms cubic-bezier(0.44, 0, 0.56, 1) 400ms backwards; }
.hero_badge   { animation: hero-badge-pop    1280ms var(--ease-badge)  3000ms backwards; }

/* The original checks prefers-reduced-motion and skips the appear animations
   entirely; so do we. Everything lands at its locked resting state, which is
   what these keyframes resolve to anyway. */
@media (prefers-reduced-motion: reduce) {
  .hero_letters,
  .hero_sun,
  .hero_lake,
  .hero_pines,
  .hero_pine,
  .hero_hay,
  .hero_oak,
  .hero_flowers,
  .hero_badge {
    animation: none;
  }
}

/* ---------- mission ---------- */
/* SUBSTANCE PORT (the contract forked here — Philip, 2026-08-15): below the
   hero we carry the original's content and composition at ~80% visual
   similarity, set in OUR system — token sizes, base type, the 62ch measure —
   not the original's metrics. (Its mission band ran one 1195px-wide block of
   24px Heavy — a ~90-char line no typographic standard survives.)
   What stays from the measurement pass: the art at the original's 50% 21.7%
   crop, and NO overlay — the slate tint is baked into the artwork (verified:
   our webp diffs 0.52/255 from the source asset; a gradient on top of it
   double-tints the scene flat). Colors all come from the slate scheme. */
/* Deliberately roomier than the original (Philip, 2026-08-15): band-scale
   padding and a full step between components — the original packs this band
   tight, and the whitespace is one of the "our best practices" deltas Karson
   is being shown for sign-off. The dated Easter line was dropped the same
   pass (it was already on the fix list's confirm-with-Karson row). */
.mission {
  position: relative;
  text-align: center;
  padding-block: var(--space-xl);
  background:
    url("/images/mission-wagon.webp") 50% 21.7% / cover no-repeat,
    var(--slate);
}

.mission h1 {
  margin-bottom: var(--space-md);
}

/* text-align centers the lines; the measure-capped blocks need centering too */
.mission p {
  margin-inline: auto;
}

.mission p:last-child {
  margin-bottom: 0;
}

/* The lede is a subhead in the original's voice — heading face, one step up
   from body, with a full step of air before the paragraph. */
.mission_lede {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--font-size-large);
  margin-bottom: var(--space-md);
}

/* ---------- cards row ---------- */
/* SUBSTANCE PORT (2026-08-17, measured off the 1920 capture): the fun card
   is a FIXED 500px column — the original serves the slide sticker at 500px
   on every desktop width and sizes the Easter map at 100vw − 548px, so the
   Easter card flexes and the sticker column does not. Row height (500px at
   both 1440 and 1920) follows from the sticker column; the Easter
   min-height below only governs the stacked single-column layout. */
.cards_row {
  display: grid;
  grid-template-columns: 1fr 500px;
  gap: var(--panel-gap);
}

.card_easter {
  position: relative;
  display: grid;
  align-items: center;
  /* Stacked-state height: the original renders the card at ~80% of the
     viewport width when single-column (400px at its 500px capture). On
     desktop the row's height comes from the sticker column, not this. */
  min-height: clamp(256px, 80vw, 504px); /* measured bounds; px-pinned */
  background: url("/images/easter-farm-map-1600.webp") center / cover no-repeat;
  text-decoration: none;
  overflow: hidden;
}

/* Original: fixed ~73px Archivo at every desktop width (cap 53px, line
   advance 72px, identical at 1440 and 1920) — set in token type per the
   substance contract. The letters render in cream, not #fff (measured
   246,248,242). Letter-spacing verified: "2026" at 0.02em computes 185px
   against a measured 185. */
.card_easter-title {
  font-family: var(--font-display);
  font-size: var(--font-size-h1);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cream);
}

/* Gradient + 64px top padding are the original's (its serialized spec:
   padding 64px 0 0, linear-gradient #ffc83f → #f0a202 — our gold/amber
   tokens). Inline padding stays 0 so the sticker can span the full card;
   the text blocks carry their own. Selector carries .cards_row to outrank
   the `.cards_row > .panel` inline-padding rule. */
.cards_row > .card_fun {
  background: linear-gradient(180deg, var(--gold) 0%, var(--amber) 100%);
  text-align: center;
  display: flex;
  flex-direction: column;
  padding: 3.5rem 0 0; /* 63px ≈ the original's 64px spec at the 112.5% root */
  overflow: hidden;
}

.card_fun h2,
.card_fun p {
  padding-inline: var(--space-md);
}

.card_fun h2 {
  color: var(--ink);
  font-size: var(--font-size-h3); /* original fixed 32px; token caps at 28px */
  margin-bottom: var(--space-xxs);
}

.card_fun p {
  font-family: var(--font-ui);
  color: var(--ink);
  margin-bottom: var(--space-sm);
}

/* The sticker spans the column's full width and BLEEDS off the card's
   bottom edge — at 1920 the 500px square img shows only its top 306px of
   art; the shoes and burlap are clipped by the card (measured: img box
   overflows by 115px = 23% of its width; deliberate in the original).
   Our webp's alpha margins match the original asset's exactly
   (0.037 / 0.924 / 0.157 / 0.999), so width: 100% reproduces the render.
   Selector carries .cards_row so the margin survives the
   `.panel > :last-child { margin-bottom: 0 }` reset. */
.cards_row .card_fun img {
  width: 100%;
  height: auto;
  margin-block-start: auto;
  margin-bottom: -23%;
}

/* ---------- season passes band ---------- */
/* SUBSTANCE PORT (2026-08-17, measured off the 1920 capture): the band is a
   fixed 500px at both desktop capture widths and 250px at the mobile one —
   two states, not a fluid scale, so the heights are stepped in the 50rem
   media block rather than modeled as a clamp. */
.band_passes {
  display: grid;
  align-items: center;
  min-height: 500px; /* measured; px so the root change cannot scale it */
  background: url("/images/band-kids-fence-1600.webp") center / cover no-repeat;
  text-decoration: none;
  text-align: center; /* the display span is inline; centering is the parent's */
  overflow: hidden;
}

/* Original: one centered line at desktop, cap height 122px → ~172px Archivo
   at 1920 — the display token lands at 176px there (102%), so the type IS
   token type. Mobile wraps to two stacked lines at a measured ~1.1 leading. */
.band_passes .display {
  font-family: "Archivo", var(--font-display);
  font-weight: 900;
  font-size: var(--font-size-display);
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- video band ---------- */
/* Full-bleed at the panel gutter like every other band (Philip, 2026-08-18
   — supersedes the container-large inset, which had matched the original's
   ~1280px content width). The video IS the band, so it carries the band
   radius. No caption rules — "Fall is for family." is burned into the video
   itself, and overlaying a coded copy of it double-printed the line. */
.video_band video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* ---------- newsletter ---------- */
.newsletter {
  text-align: center;
  padding-block: clamp(4rem, 8vw, 7.5rem);
}

/* SUBSTANCE PORT (2026-08-17, measured off the 1920 capture): h2 lands on
   the h2 token (44px vs the original's ~48). COLOR is a ruled deviation
   (the 23:50 PageSpeed gate): the original's cream-on-amber heading is
   1.98:1 and its muted strapline ~2.4:1 — both hard WCAG failures the
   fidelity contract's our-standards clause doesn't reproduce. Both now
   inherit the amber scheme's ink (h2 via --scheme-heading, p via the
   scheme text color); flagged for the Karson sign-off list. (The first
   fix attempt used --moss for the strapline — moss is text-safe on GOLD,
   not amber, and measured 2.44:1 here.) Input tier stays container-small,
   a recorded deviation (original: 1000px wide) — focus is the point. */
.newsletter h2 {
  font-size: var(--font-size-h2);
  margin-bottom: var(--space-xxs);
}

/* Not `.newsletter > p` — the copy sits inside the width stack
   (padding-global → container-small), so the child combinator never
   matched (a dead rule in the scaffold). */
.newsletter p {
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
  margin-bottom: var(--space-md);
}

/* No bespoke max-width — the section's container tier governs the measure. */
.newsletter_form {
  display: grid;
  gap: var(--space-sm);
  justify-items: center;
}

.newsletter_form input {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--font-size-regular);
  color: var(--ink);
  background: var(--cream);
  border: none;
  border-radius: var(--radius-pill);
  padding: 1.05em 1.6em;
}

.newsletter_form input::placeholder {
  color: var(--color-text-muted);
}

/* ---------- footer ---------- */
/* The <footer> landmark sits after </main>, so it carries the same panel
   gutter main provides its bands (main's own bottom padding is the gap
   between the last band and this one). */
.site_footer {
  padding: 0 var(--panel-gap) var(--panel-gap);
}

/* The footer menu strip — an addition to the original (no footer nav
   existed; Philip's ruling 2026-08-19: all main pages for now, legal links
   join when those pages exist). Quiet ink links on the cream ground. */
.site_footer-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-md) var(--space-xs) var(--space-xs);
}

.site_footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* Core's content-list li+li margin leaks into flex rows — same fix as the
   header nav (2026-08-18). */
.site_footer-links li {
  margin-block: 0;
}

.site_footer-links a {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--font-size-small);
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.8rem;   /* 44px touch minimum, same trick as the header */
  margin-block: -0.8rem;
}

.site_footer-links a:hover {
  color: var(--color-text-accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.site_footer-copyright {
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin: 0;
  max-width: none;
}

/* ---------- footer band ---------- */
.band_footer {
  display: grid;
  align-items: center;
  min-height: clamp(224px, 32vw, 448px); /* measured bounds; px-pinned */
  background: url("/images/footer-jump-pads-1600.webp") center / cover no-repeat;
  overflow: hidden;
}

/* The lockup's rendered art is 573px at BOTH desktop capture widths — a
   fixed 608px img box (the asset's art spans 94.3% of its canvas), which
   is 38rem exactly. Mobile scales it down in the 50rem block. */
.band_footer-lockup {
  display: block;
  width: min(608px, 100%);
  height: auto;
  margin-inline: auto;
}

/* ---------- responsive ---------- */
@media (max-width: 50rem) {
  /* Mobile keeps the same overlay construction as desktop, at the original's
     smaller scale: panel gutter 8px, shell inset 16px inside the panel, 27px
     pill, 63px clearance. Measured off the original at 500px. */
  :root {
    --panel-gap: 8px;
    --nav-clearance: 63px;
  }

  .site_header {
    inset: calc(var(--panel-gap) + 16px) calc(var(--panel-gap) + 16px) auto;
  }

  /* The pill stays a SINGLE ROW at mobile, as the original does — logo left,
     hamburger right. It does not stack; stacking was our invention. */
  .site_nav {
    min-height: 27px;
    padding-inline: 20px; /* measured pill chrome */
  }

  .site_nav-mark img {
    width: 44px;
    height: 19px;
  }

  /* The links stay inline — the second lever (type step) after the gap. At this
     size the whole row measures 351px, which clears the 390px reference width
     the capture was taken at with room to spare; below that it needs the
     narrow-screen step further down. */
  .site_nav-links {
    gap: 0.625rem; /* 11.25px at the 112.5% root */
  }

  /* Floating pill at phone scale: the original's compact instance measures
     47px outer (10px shell + the 27px mobile pill), so the pill's own
     padding collapses and min-height governs. */
  .site_float .site_nav {
    gap: var(--space-sm);
    padding: 0 20px;
  }

  .site_nav a {
    font-size: 0.7222rem; /* 13px at the 112.5% root (was 0.8125rem at 16) */
  }

  .cards_row {
    grid-template-columns: 1fr;
  }

  /* Stacked state: the original's mobile variant renders the sticker at
     56% of the card (271px at its 484px card), centered, bottom-anchored,
     with NO bleed — the full art (shoes, burlap) stays in frame. Only the
     desktop variant bleeds it off the card edge. */
  .cards_row .card_fun img {
    width: min(56%, 336px);
    margin-inline: auto;
    margin-bottom: 0;
  }

  /* Mobile band height, measured at the original's 500px capture (250px). */
  .band_passes {
    min-height: 250px; /* measured; px, see above */
  }

  /* Original mobile: lockup art 220px in the 484px card → 48% img box. */
  .band_footer-lockup {
    width: 48%;
  }

  /* Tickets bands — mobile heights measured off the 500px capture. */
  .band_cta {
    min-height: 200px;
  }

  .band_funpass {
    min-height: 190px;
  }

  /* Band backgrounds drop to the 768 ladder rung (static/images/manifest.json)
     — the desktop rungs are bytes a phone never renders. */
  .card_easter {
    background-image: url("/images/easter-farm-map-768.webp");
  }

  .band_passes {
    background-image: url("/images/band-kids-fence-768.webp");
  }

  .band_passes--photo {
    background-image: url("/images/band-kids-photo-768.webp");
  }

  .band_footer {
    background-image: url("/images/footer-jump-pads-768.webp");
  }

  .band_cta--minigolf {
    background-image: url("/images/band-minigolf-768.webp");
  }

  .band_funpass {
    background-image: url("/images/band-pass-fun-768.webp");
  }
}

/* ---------- generic page patterns (inner pages; ports in progress) ---------- */
.btn--on-color {
  background: var(--cream);
  color: var(--ink);
}

.btn--on-color:hover {
  background: #fff;
  color: var(--ink);
}

.panel_row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--panel-gap);
}

.panel--pagehero {
  text-align: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

/* Inner-page heroes are the first panel too — clear the overlaid nav on top of
   their normal padding. */
main > .panel--pagehero:first-child {
  padding-top: calc(var(--nav-clearance) + clamp(2.5rem, 6vw, 4.5rem));
}

.panel--pagehero_sub {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--font-size-h3);
  max-width: 38ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* Token type per the substance contract — the display rung lands at 176px
   at 1920 against the original's measured ~190px TICKETS (93%). Replaces
   the scaffold's pure-vw clamp (the 2026-08-17 audit's last two holdouts).
   COLOR is the scheme's ink, not the original's amber-on-gold — that
   measures 1.38:1, a hard WCAG failure with no compliant warm treatment
   (deviations.md; same clause as the newsletter rulings). */
.panel--pagehero .display {
  font-size: var(--font-size-display);
  line-height: 1;
}

/* ---------- visually-hidden (utility) ---------- */
/* Screen-reader-only text — the standard clip pattern. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================
   TICKETS
   ============================================================ */

/* ---------- explainer (Three Options. All Good.) ---------- */
/* The deep-teal panel with the teal-tinted runner illustration behind the
   copy (the tint is baked into the asset, as the mission band's is). Bg
   position measured off the 1920 capture: the art fills the band. Roomy
   band-scale padding per the substance contract; content centered as the
   original centers it. */
.explainer {
  text-align: center;
  padding-block: var(--space-band);
  /* 50% 10%: the band shows the art's top strip — the runner's head sits
     behind the copy, as the original crops it. */
  background:
    url("/images/explainer-run-teal.webp") 50% 10% / cover no-repeat,
    var(--teal-deep);
}

.explainer h2 {
  margin-bottom: var(--space-md);
}

.explainer p {
  margin-inline: auto;
  font-weight: 700; /* the original sets the whole explainer bold (Inter 700) */
}

/* The Skitts Pass caveat — the original colors it gold, which measures
   3.3:1 on the deep teal: fine for headings, a WCAG failure at body size.
   Butter is the compliant warm-highlight tone (4.5:1); see brand.css. */
.explainer_note {
  color: var(--butter);
}

/* ---------- GET TICKETS band ---------- */
/* The whole band is one link to the season-pass checkout. Two fixed states
   like the passes band: 460px measured at both desktop captures, ~200px on
   the mobile one. Cream display over the photo, as the original — flagged
   in deviations.md as an accepted contrast risk inherited from the design. */
.band_cta {
  display: grid;
  align-items: center;
  min-height: 460px; /* measured; px so the root change cannot scale it */
  text-decoration: none;
  text-align: center;
  overflow: hidden;
}

.band_cta--minigolf {
  background: url("/images/band-minigolf-1600.webp") center / cover no-repeat;
}

.band_cta .display {
  display: block;
  font-size: var(--font-size-display);
  line-height: 1.1;
  color: var(--cream);
}

.band_cta-sub {
  display: block;
  margin-top: var(--space-xs);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--font-size-h3);
  color: var(--cream);
}

/* ---------- Your pass to fun band ---------- */
/* The two-panel cartoon (runner + hop-ball) with one centered gold line.
   500px desktop / ~190px mobile, measured like the passes band. Gold on
   the mid-olive art measures 3.11:1 — passes as large text (h2 scale). */
.band_funpass {
  display: grid;
  align-items: center;
  min-height: 500px; /* measured; px, see band_passes */
  /* 50% 6%: top-anchored — the two faces carry the band, as the original
     crops it (bottoms of both figures fall off the band edge). */
  background: url("/images/band-pass-fun-1536.webp") 50% 6% / cover no-repeat;
  text-align: center;
  overflow: hidden;
}

.band_funpass-line {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-snug);
  color: var(--gold);
  max-width: none;
  margin: 0;
}

/* The shop page's passes band runs the REAL photo of the four kids (the
   home page's runs the illustrated rendition — two different originals,
   same construction). 50% 45%: heads near the band top, mat at the foot. */
.band_passes--photo {
  background-image: url("/images/band-kids-photo-1600.webp");
  background-position: 50% 45%;
}

/* ---------- FAQ ---------- */
/* White panel — the one band the original paints #fff, not cream — with
   the accordion list. Native details/summary per the faq-accordion spec;
   name="faq" gives the one-open-at-a-time behavior with no JS. Width runs
   the large tier (the original's bars span nearly the band; the spec's
   small-tier default yields to the migration), answers measure-capped. */
.faq {
  background: #fff;
  padding-block: var(--space-band);
}

.faq_list {
  display: grid;
  gap: var(--space-xs);
}

.faq_item {
  background: oklch(93.9% 0 0); /* the original's #eee bars */
  border-radius: var(--radius-sm);
}

.faq_item summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1.2rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--font-size-regular);
  color: var(--ink);
  cursor: pointer;
  list-style: none; /* the plus below is the affordance */
}

.faq_item summary::-webkit-details-marker {
  display: none;
}

/* The plus affordance — two strokes drawn in currentColor; the vertical
   stroke collapses when open, leaving a minus. Transition honors core's
   reduced-motion guard. */
.faq_item summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  opacity: 0.45;
  transition: scale 140ms ease;
}

.faq_item[open] summary::before {
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

.faq_answer {
  padding: 0 1.2rem 1rem 2.8rem; /* answer aligns under the label, past the plus */
}

.faq_answer p {
  max-width: var(--measure);
  margin-bottom: 0;
}

/* ============================================================
   FIELD TRIPS
   ============================================================ */

/* ---------- hero ---------- */
/* Multicolor Tanker letters over poppy with the tractor-train cutout
   overlapping from below (the cutout is the later sibling, so it paints
   over the letters — the original's stacking). Letter colors are inline
   per-letter; the two colors the brand set lacks are defined here, scoped
   to the hero — they are this composition's own, measured off the capture,
   not brand-wide tokens. Same artwork treatment as the home hero: the
   lettering is aria-hidden; a visually-hidden h1 carries the page name. */
.ft_hero {
  --ft-pink: oklch(72.6% 0.143 6);   /* the T */
  --ft-violet: oklch(52.9% 0.282 289); /* the S */
  padding: max(var(--nav-clearance), 7%) 0 0;
  text-align: center;
  overflow: hidden;
}

.ft_hero-letters {
  margin: clamp(0.5rem, 2.5vw, 3rem) auto 0;
  max-width: none;
  font-family: "Tanker", var(--font-display);
  font-size: var(--font-size-display);
  line-height: 0.95;
  text-transform: uppercase;
}

.ft_hero-word {
  white-space: nowrap; /* wrap only between the words, as the original */
}

/* Full-bleed strip; the art hugs the transparent canvas's bottom edge and
   the tractor cab rises over the letters' baseline (the original's
   stacking). SUBSTANCE DEVIATION (deviations.md): the original is a Framer
   collage — the train art small (~1050px) plus re-cropped cow cutouts
   pinned at the right edge; we render the one strip full-bleed, same
   content at a heavier scale. */
.ft_hero-train {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -6%;
}

/* ---------- mission ---------- */
.ft_mission {
  text-align: center;
}

.ft_mission p {
  margin-inline: auto;
  font-family: var(--font-ui);
  font-weight: 700; /* the original sets this whole section bold */
}

.ft_mission-lede {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--font-size-large);
}

/* ---------- growing cards ---------- */
.ft_growing .panel {
  text-align: center;
  display: grid;
  align-content: center;
  min-height: 220px; /* the original's ~230px card height at 1920 */
}

/* Card headings run the scheme's TEXT color (the original's cards do not
   use the gold heading pairing), at a card scale. */
.ft_growing h2 {
  color: var(--scheme-text);
  font-size: var(--font-size-medium);
  margin-bottom: var(--space-xxs);
}

/* Bold at the medium size: cream-on-poppy is 4.02:1, which fails small
   body text (4.5) but passes as bold large text (≥18.67px/700 → 3:1) —
   the rules-panel ruling applied to the card row, all three cards matched. */
.ft_growing p {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--font-size-medium);
  margin: 0 auto;
  max-width: 44ch;
}

/* ---------- farm map ---------- */
.ft_map img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* ---------- what to expect ---------- */
.ft_expect {
  text-align: center;
  padding-block: var(--space-xl);
}

.ft_expect h2 {
  font-size: var(--font-size-h3);
  margin-bottom: var(--space-md);
}

.ft_expect h3 {
  font-size: var(--font-size-medium);
  margin-bottom: var(--space-xxs);
}

.ft_expect p {
  margin-inline: auto;
  margin-bottom: var(--space-md);
  font-family: var(--font-ui);
}

/* ---------- pricing ---------- */
/* TYPE COLOR is a ruled deviation (deviations.md): the original paints the
   heading amber (1.28:1 on leaf) and the body cream (2.56:1) — both hard
   WCAG failures; everything here runs the leaf scheme's ink instead. */
.ft_pricing {
  text-align: center;
  padding-block: var(--space-xl);
}

.ft_pricing h2 {
  margin-bottom: var(--space-md);
}

.ft_pricing h3 {
  font-size: var(--font-size-medium);
  margin-bottom: var(--space-xxs);
}

.ft_pricing p {
  margin-inline: auto;
  margin-bottom: var(--space-md);
  font-family: var(--font-ui);
}

.ft_pricing-rates {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: var(--font-size-h3);
  line-height: 1.4;
  margin-bottom: 0;
}

/* ---------- tailored + GSE shell ---------- */
/* One teal shell wrapping the slate copy panel and the cream GSE panel —
   the original's construction: the ring is the shell's padding. */
.ft_shell {
  padding: var(--panel-gap);
  display: grid;
  gap: var(--panel-gap);
}

.ft_tailored {
  text-align: center;
  padding-block: var(--space-xl);
}

/* The original's heading here is small bold cream, not the slate scheme's
   gold pairing. */
.ft_tailored h2 {
  color: var(--scheme-text);
  font-size: var(--font-size-medium);
  margin-bottom: var(--space-md);
}

.ft_tailored p {
  margin-inline: auto;
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
}

/* GSE — the standards grid runs Satoshi, the face the original sets this
   section in (font census). Heading MUTED, not the original's amber-on-cream
   (2.0:1 — same ruling class as the pricing panel). */
.ft_gse {
  text-align: center;
  padding-block: var(--space-xl);
}

.ft_gse h2 {
  font-family: "Satoshi", var(--font-ui);
  font-weight: 700;
  font-size: var(--font-size-medium);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xxs);
}

.ft_gse-sub {
  font-family: "Satoshi", var(--font-ui);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin: 0 auto var(--space-lg);
}

.ft_gse-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg) var(--space-md);
  align-items: center;
}

.ft_gse-grade h3 {
  font-family: "Satoshi", var(--font-ui);
  font-weight: 700;
  font-size: var(--font-size-h3);
  margin-bottom: var(--space-xxs);
}

.ft_gse-grade p,
.ft_gse-grade ol {
  font-family: "Satoshi", var(--font-ui);
  font-weight: 700;
  font-size: var(--font-size-regular);
  margin: 0 auto;
  max-width: 32ch;
}

.ft_gse-grade ol {
  list-style-position: inside;
  padding: 0;
}

/* Standards links: ink with the soft underline — the affordance the
   original omits (its links are indistinguishable from plain text). */
.ft_gse-grade a {
  color: var(--ink);
}

/* ---------- rules ---------- */
/* TYPE is the compliant translation of the original's gold-and-cream-on-
   poppy (heading 2.79:1, small body 4.03:1 under the 4.5 line): headings
   in butter (3.8:1, large-text sizes only), body bold at the medium size
   so it clears the bold large-text threshold where 4.03 ≥ 3 passes. */
.ft_rules {
  text-align: center;
  padding-block: var(--space-xl);
}

.ft_rules h2 {
  color: var(--butter);
  margin-bottom: var(--space-md);
}

.ft_rules h3 {
  color: var(--butter);
  font-size: var(--font-size-h3);
  margin-bottom: var(--space-xxs);
}

.ft_rules p {
  margin-inline: auto;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--font-size-medium);
  margin-bottom: var(--space-md);
}

.ft_rules-questions {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: var(--font-size-h3);
  color: var(--butter);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xxs);
}

/* ---------- booking form (shell) ---------- */
.ft_book {
  text-align: center;
  padding-block: var(--space-xl);
}

.ft_book h2 {
  margin-bottom: var(--space-md);
}

.ft_book-form {
  display: grid;
  gap: var(--space-sm);
}

.ft_book-form input,
.ft_book-form textarea {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--font-size-regular);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  padding: 0.9em 1.3em;
}

.ft_book-form textarea {
  border-radius: var(--radius-md);
  resize: vertical;
}

.ft_book-form input::placeholder,
.ft_book-form textarea::placeholder {
  color: var(--color-text-muted);
}

.ft_book-form .btn {
  width: 100%;
}

.ft_book-waiver {
  margin: var(--space-md) auto 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
}

/* ---------- inner pages: small screens ---------- */
/* (After the generic pagehero rules in cascade order, so these win.) */
@media (max-width: 50rem) {
  /* Pagehero display steps below the token floor so a single word
     (CONTACT, TICKETS) never breaks mid-word — the original's phone heroes
     keep one line. rem anchors preserve text-resize (WCAG 1.4.4). */
  .panel--pagehero .display {
    font-size: clamp(2.5rem, 0.5rem + 14vw, 9.778rem);
  }

  /* The original's phone hero sets the letters big enough to wrap FIELD /
     TRIPS as two stacked lines (~90px at its 500px capture) — the display
     token's floor renders them one small line, so the hero steps its own
     scale here. rem anchors keep text-resize working (WCAG 1.4.4). */
  .ft_hero-letters {
    font-size: clamp(5rem, 3rem + 16vw, 7.5rem);
  }

  /* The GSE grid stacks to one centered column, as the original. */
  .ft_gse-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CONTACT
   ============================================================ */

/* The lavender shell wrapping the two white cards — same construction as
   the field-trips teal shell. The lavender is the original's own value
   (#eaedf6 measured), a one-off scoped here, not a brand token. */
.contact_shell {
  --lavender: oklch(94.6% 0.014 277);
  background: var(--lavender);
  padding: var(--panel-gap);
  display: grid;
  gap: var(--panel-gap);
}

.contact_card {
  background: #fff;
  text-align: center;
  padding-block: var(--space-xl);
}

/* Form fields: cream fill on the white card, soft border, the original's
   rounded-rect corners (not pills). */
.contact_form {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.contact_form input,
.contact_form textarea {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--font-size-regular);
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: 0.9em 1.1em;
}

.contact_form textarea {
  resize: vertical;
}

.contact_form input::placeholder,
.contact_form textarea::placeholder {
  color: var(--color-text-muted);
}

.contact_form .btn {
  width: 100%;
}

.contact_talk h2 {
  margin-bottom: var(--space-md);
}

.contact_consent {
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.contact_consent p {
  margin-inline: auto;
  margin-bottom: var(--space-sm);
}

.contact_consent p:last-child {
  margin-bottom: 0;
}

/* NAP card: left-aligned block in the centered small tier, as the original. */
.contact_nap {
  text-align: left;
}

.contact_nap h2 {
  font-size: var(--font-size-h3);
  margin-bottom: var(--space-sm);
}

.contact_nap-list {
  list-style: none;
  margin: 0 0 var(--space-sm);
  padding: 0;
  display: grid;
  gap: var(--space-xs);
  font-family: var(--font-ui);
}

.contact_nap-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.contact_nap-list svg {
  flex: 0 0 auto;
  opacity: 0.8;
}

.contact_nap-list a {
  color: var(--ink);
}

.contact_socials {
  list-style: none;
  margin: 0 0 0 -12px; /* first icon aligns optically with the list above */
  padding: 0;
  display: flex;
  align-items: center;
}

/* Icon-only links: each box IS the 44px touch minimum
   (components/navigation spec); the glyphs sit centered inside. */
.contact_socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--ink);
}

.contact_socials a:hover {
  color: var(--color-accent);
}

/* ============================================================
   FORMS (central engine) + WAIVER
   ============================================================ */

/* Host tokens the fleet drm-overrides.css consumes. Its semantics are
   dark-host by design (Miles Ahead's original): --paper-hi is the light
   ink for labels/inputs/borders, --accent the button fill + focus, --brand
   the button TEXT on the accent fill. Skitts mounts on WHITE cards, so the
   mapping inverts: ink for --paper-hi, cream for --brand. */
#formio-mount {
  --brand: var(--cream);
  --accent: var(--poppy);
  --paper-hi: var(--ink);
  --font-label: var(--font-ui);
  text-align: left; /* forms read left-aligned inside centered sections */
}

/* Skitts look on top of the fleet sheet (id scope outranks it regardless of
   load order): the original's FILLED rounded fields, not the underline
   default, and visible placeholders (the fleet sheet hardcodes a cream-40%
   placeholder that vanishes on white). */
#formio-mount .formio-form .form-control {
  background: var(--cream);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: 0.9em 1.1em;
}

#formio-mount .formio-form .form-control:focus {
  background: var(--cream);
  border-color: var(--poppy);
}

#formio-mount .formio-form .form-control::placeholder {
  color: var(--color-text-muted);
}

/* The button in the house voice: sentence case, our weights, our hover —
   over the fleet sheet's letterspaced uppercase. */
#formio-mount .formio-form button.btn-primary {
  font-family: var(--font-ui);
  font-size: var(--font-size-medium);
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

#formio-mount .formio-form button.btn-primary:hover {
  background: var(--color-accent-dim);
  color: var(--cream);
}

/* Consent checkboxes: brand accent, comfortable size, ink labels. */
#formio-mount .formio-form input[type="checkbox"] {
  accent-color: var(--poppy);
  width: 1.05em;
  height: 1.05em;
}

/* The A2P consent copy rendered by the contact schema's content blocks. */
#formio-mount .form-consent {
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  max-width: var(--measure);
}

/* Success note above a form after the ?sent=1 redirect, and the newsletter
   band's subscribed/error notes. */
.form_sent-note,
.newsletter_note {
  font-family: var(--font-ui);
  font-weight: 700;
  background: oklch(95% 0.05 140);
  color: oklch(35% 0.09 140);
  border-radius: var(--radius-sm);
  padding: 0.8em 1.2em;
  margin: 0 auto var(--space-md);
  max-width: var(--measure);
}

.newsletter_note {
  color: oklch(32% 0.08 140);
}

.newsletter_note--error {
  background: oklch(95% 0.03 30);
  color: oklch(38% 0.13 30);
}

/* ---------- waiver page ---------- */
.waiver {
  text-align: center;
  padding-block: var(--space-xl);
}

.waiver h1 {
  font-size: var(--font-size-h2);
  margin-bottom: var(--space-xxs);
}

.waiver p {
  margin-inline: auto;
  font-family: var(--font-ui);
}

/* JotForm writes its iframe here and manages its own height; the floor
   keeps the page from collapsing (and the footer from jumping) while the
   third-party script loads. */
.waiver_form {
  min-height: 600px;
  margin-top: var(--space-lg);
}

/* ---------- narrow screens (≤360px) ---------- */
/* The nav has three destinations and no disclosure, so the row has to fit the
   narrowest screen we support rather than hide itself behind a toggle. At the
   360px-and-below step it measures 302px against a 320px viewport — 18px of
   headroom. Scoped this low deliberately: the 390px pill above keeps the
   padding and mark size measured off the original.
   Values are the sanctioned levers in order — gap, then type step. If a fourth
   destination is added, re-measure before assuming this still holds. */
@media (max-width: 22.5rem) {
  .site_nav {
    gap: 6px;
    padding-inline: 9px; /* measured pill chrome */
  }

  .site_nav-links {
    gap: 0.4889rem; /* 8.8px at the 112.5% root */
  }

  .site_nav a {
    font-size: 0.6667rem; /* 12px at the 112.5% root */
  }
}