/* ═══════════════════════════════════════════════════════════════════
   GAIN DAY · The Lighthouse Church
   Lane: championship game program × broadcast graphics package.
   Color strategy: drenched field green, gold load-bearing, deep ink second
   world (no blue: campaign manager wants this site distinct from TLHC's own
   blue brand, green / white / black only).
   ═══════════════════════════════════════════════════════════════════ */

/* Self-hosted: same origin, no third-party round trip, no Google Fonts
   data leaving the visitor's browser. Latin subset only. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/archivo-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/archivo-narrow-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Graduate';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/graduate-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── tokens ──────────────────────────────────────────────────────── */
/* Channel tokens carry L C H so every alpha variant stays on-system.
   Never author a raw oklch() below this block. */
:root {
  --ink-ch:    0.155 0.024 152;
  --field9-ch: 0.225 0.042 150;
  --field-ch:  0.450 0.098 143;
  --glow-ch:   0.620 0.105 145;
  --navy9-ch:  0.205 0.072 152;
  --navy-ch:   0.262 0.090 152;
  --gold-ch:   0.795 0.145 82;
  --chalk-ch:  0.965 0.005 106;

  /* green ramp */
  --ink:        oklch(var(--ink-ch));
  --field-900:  oklch(var(--field9-ch));
  --field:      oklch(var(--field-ch));

  /* "navy" ramp: names kept for a minimal diff, but recolored to green-black
     hue (was blue 264, now 152) so nothing on the page reads as blue */
  --navy-900:   oklch(var(--navy9-ch));
  --navy:       oklch(var(--navy-ch));
  --navy-700:   oklch(0.340 0.098 152);

  /* gold + chalk */
  --gold:       oklch(var(--gold-ch));
  --gold-deep:  oklch(0.680 0.140 76);
  --chalk:      oklch(var(--chalk-ch));
  --chalk-dim:  oklch(0.800 0.008 120);
  --slate-dark: oklch(0.255 0.022 152);

  /* semantic, reassigned per band */
  --bg:      var(--field-900);
  --fg:      var(--chalk);
  --fg-soft: oklch(0.800 0.020 148);
  --rule:    oklch(var(--chalk-ch) / 0.20);
  --rule-hi: oklch(var(--chalk-ch) / 0.42);
  --wash:    oklch(var(--chalk-ch) / 0.06);
  --focus:   var(--gold);
  --danger:  oklch(0.640 0.190 27);

  /* per-band text ramps */
  --on-chalk:     oklch(0.420 0.018 150);
  --on-chalk-dim: oklch(0.480 0.018 150);
  --on-navy:      oklch(0.790 0.030 152);
  --on-navy-2:    oklch(0.700 0.030 152);
  --on-navy-3:    oklch(0.655 0.028 152);
  --ok:      oklch(0.480 0.110 150);

  /* masks only ever read the alpha channel; the color never paints */
  --mask-solid: oklch(0 0 0);

  /* type scale, ratio ~1.33 */
  --t-xs:  0.8125rem;
  --t-sm:  0.9375rem;
  --t-b:   1.0625rem;
  --t-lg:  clamp(1.15rem, 0.95rem + 0.8vw, 1.5rem);
  --t-h3:  clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --t-h2:  clamp(2.25rem, 1.4rem + 3.6vw, 4.75rem);
  --t-h1:  clamp(3.5rem, 1rem + 14.5vw, 12rem);

  /* rhythm */
  --gut:   clamp(1.25rem, 4vw, 3rem);
  --band:  clamp(4.5rem, 9vw, 9.5rem);
  --band-tight: clamp(3rem, 6vw, 6rem);
  --max:   76rem;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--fg);
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-b);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: 0.5rem; top: -100vh; z-index: 200;
  background: var(--gold); color: var(--ink);
  padding: 0.7rem 1.1rem; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 0.5rem; }

/* visible to assistive tech only */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── shared type ─────────────────────────────────────────────────── */
h1, h2, h3 { line-height: 1.06; font-weight: 700; letter-spacing: -0.022em; }
/* overflow-wrap is a safety net: text-wrap: balance picks line-break widths
   assuming every word can break at a space, but doesn't re-check that its
   own last line still fits, so a long unbroken word (e.g. "extraordinary.")
   can overflow its own container by several rem after balancing. */
h2 { font-size: var(--t-h2); text-transform: uppercase; letter-spacing: -0.035em; text-wrap: balance; overflow-wrap: break-word; }
h3 { font-size: var(--t-h3); letter-spacing: -0.018em; text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }

/* authored line breaks are a wide-viewport nicety, never a mobile constraint */
h2 br, .final__h br { display: none; }
@media (min-width: 48rem) { h2 br, .final__h br { display: inline; } }

/* fixed nav clearance for direct hash loads */
section[id] { scroll-margin-top: 5.5rem; }

.kicker {
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--fg-soft);
  margin-bottom: 1rem;
}
.kicker--gold { color: var(--gold); }

.lede {
  font-size: var(--t-lg);
  line-height: 1.5;
  max-width: 42ch;
  color: var(--fg-soft);
  margin-top: 1.75rem;
}
.lede--wide { max-width: 56ch; }

/* shared measure for narrative paragraphs, reused across several sections */
.prose { max-width: 62ch; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.prose p { color: var(--fg-soft); font-size: var(--t-b); line-height: 1.65; }
.prose p + p { margin-top: 1.1rem; }
.prose b { color: var(--fg); font-weight: 700; }
/* a kicker introducing a second sub-topic mid-section, and the lede under it */
.prose + .kicker--gold { margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.kicker--gold + .lede { margin-top: 0.5rem; }
/* a CTA directly closing out a paragraph, rather than a whole section */
.prose + .btn { margin-top: clamp(1.5rem, 3vw, 2rem); }

.stamp {
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: var(--t-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-align: center;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.note {
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: var(--t-sm);
  color: var(--fg-soft);
  margin-top: 2rem;
}

/* ── layout ──────────────────────────────────────────────────────── */
.wrap { width: min(100% - (var(--gut) * 2), var(--max)); margin-inline: auto; }
.wrap--narrow { --max: 52rem; }

.band {
  position: relative;
  padding-block: var(--band);
  background: var(--bg);
  color: var(--fg);
}
.band--tight { padding-top: var(--band-tight); }

.band--green { --bg: var(--field-900); }
.band--ink   { --bg: var(--ink); }
.band--navy  {
  --bg: var(--navy-900);
  --fg-soft: var(--on-navy);
  --rule: oklch(var(--chalk-ch) / 0.17);
}
.band--chalk {
  --focus: var(--ink);
  --bg: var(--chalk);
  --fg: var(--ink);
  --fg-soft: var(--on-chalk);
  --rule: oklch(var(--ink-ch) / 0.16);
  --rule-hi: oklch(var(--ink-ch) / 0.34);
}

/* chalk hash-mark rule at the top of every band */
.band::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 7px;
  background:
    linear-gradient(var(--rule-hi), var(--rule-hi)) top left / 100% 1px no-repeat,
    repeating-linear-gradient(90deg,
      var(--rule) 0 1px, transparent 1px 16px) bottom left / 100% 6px no-repeat;
  opacity: 0.85;
}

/* ── section headers ─────────────────────────────────────────────── */
.shead {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
}
.shead__num {
  font-family: Graduate, Georgia, serif;
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: 0.78;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--rule-hi);
  letter-spacing: 0.02em;
  user-select: none;
}
@supports not (-webkit-text-stroke: 1px currentColor) {
  .shead__num { color: var(--rule); }
}
.shead__txt { min-width: 0; }
.shead .kicker { margin-bottom: 0.85rem; }
/* Utility pages off the numbered section flow (e.g. /resources) skip the
   .shead__num badge - collapse to one column so .shead__txt still gets the
   full width instead of just the "auto" track's content width. */
.shead--plain { grid-template-columns: minmax(0, 1fr); }

/* ── buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  appearance: none; -webkit-appearance: none;
  background: none; border-radius: 0;
  font: inherit;
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-weight: 700;
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease),
              color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn--lg { padding: 1.05rem 2.2rem; font-size: var(--t-b); letter-spacing: 0.11em; }
.btn--block { width: 100%; padding-block: 1.05rem; }

.btn--gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); transform: translateY(-2px); }

.btn--ghost { border-color: var(--rule-hi); color: var(--fg); }
.btn--ghost:hover { border-color: var(--chalk); background: var(--wash); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); transition-duration: 0.08s; }
.btn[disabled] { opacity: 0.55; pointer-events: none; }

/* ── drive progress ──────────────────────────────────────────────── */
.drive {
  position: fixed; inset-inline: 0; top: 0; height: 3px; z-index: 120;
  background: oklch(var(--ink-ch) / 0.4);
  pointer-events: none;
}
.drive__bar {
  display: block; height: 100%; width: 100%;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
}

/* ── nav ─────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 110;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.nav.is-stuck,
/* The nav starts transparent everywhere else because the hero underneath
   is always dark, so light nav text stays readable pre-scroll. This page
   has no hero - its first section is the light chalk band - so its nav
   needs the solid, opaque treatment unconditionally, not just once stuck. */
.no-hero .nav {
  /* Fully opaque, deliberately. At 0.94 the fixed nav let scrolling content
     ghost through underneath it: bright text at high contrast is legible
     even through a 6% gap, since there is no backdrop-filter blur to soften
     what's behind. A solid nav bar cannot show what it's covering. */
  background: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.nav__in {
  width: min(100% - (var(--gut) * 2), var(--max));
  margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
  padding-block: clamp(0.75rem, 1.6vw, 1.15rem);
}

.brand { text-decoration: none; display: grid; gap: 0.15rem; margin-right: auto; padding-block: 0.3rem; }
.brand__mark {
  font-family: Graduate, Georgia, serif;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--chalk);
}
/* Fixed rem scale, not em: this is a circular badge (fine ring text), not a
   wordmark, so it's sized off the nav bar's own height rather than any
   adjacent text's font-size. Now the only thing in .brand (the "THE
   LIGHTHOUSE CHURCH" label above it is gone), so it can run a bit bigger. */
.brand__mark-img { height: clamp(3.25rem, 6.2vw, 3.9rem); width: auto; display: block; }

.nav__links { display: flex; gap: clamp(1rem, 2.2vw, 2rem); }
.nav__links a {
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: var(--t-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  text-decoration: none; color: var(--chalk-dim);
  padding: 0.8rem 0.35rem;
  margin-inline: -0.35rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav__links a:hover { color: var(--chalk); border-bottom-color: var(--gold); }
.nav__links a:active { color: var(--gold); }

.burger { display: none; background: none; border: 0; padding: 0.7rem; cursor: pointer; }
.burger span { display: block; width: 24px; height: 2px; background: var(--chalk); margin: 5px 0; transition: transform 0.35s var(--ease), opacity 0.2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer {
  display: grid; gap: 0.25rem;
  padding: 0.5rem var(--gut) 1.75rem;
  background: var(--ink);
  border-top: 1px solid var(--rule);
}
.drawer a {
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: 1.05rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  text-decoration: none; color: var(--chalk);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
.drawer__cta { color: var(--gold); border-bottom: 0; }

@media (max-width: 76rem) {
  .nav__links, .nav__cta { display: none; }
  .burger { display: block; }
}

/* ── 01 hero ─────────────────────────────────────────────────────── */
.hero {
  position: relative;
  /* Content is bottom-anchored (align-items: flex-end), so min-height only
     sets the gap above the kicker when content is SHORTER than it - that's
     the 100svh -> 88svh cut below. But on a short/medium viewport where the
     stacked hero content (kicker, wordmark, ledes, verse, buttons) is
     TALLER than min-height, the box grows to fit it and flex-end packs
     everything toward the bottom regardless of min-height, so the top
     padding floor becomes the ONLY thing standing between the kicker and
     the fixed nav overlapping it. That floor was cut to 4rem in the same
     change that introduced this bug (reproduced at 1100x700 and 390x700,
     nav bottom edge past the kicker's top edge) - restored to 7rem, safely
     past the tallest measured nav height (~107px) with room to spare. */
  min-height: 88svh;
  display: flex; align-items: flex-end;
  padding-block: clamp(7rem, 10.5vh, 8rem) clamp(2.25rem, 5.5vh, 4rem);
  background-color: var(--field-900);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  isolation: isolate;
}
/* same size-tiered breakpoint as .hero__field below, so mobile never pays
   for the full desktop texture */
@media (max-width: 56.24rem) {
  .hero { background-image: url('assets/hero-texture-sm.jpg'); }
}
@media (min-width: 56.25rem) {
  .hero { background-image: url('assets/hero-texture.jpg'); }
}
.hero__field {
  position: absolute; inset-inline: 0; bottom: 0; z-index: -2;
  height: clamp(240px, 46vh, 520px);
  background: bottom center / cover no-repeat;
  opacity: 0.72;
  mask-image: linear-gradient(to top, var(--mask-solid) 42%, transparent 100%);
}
.hero__glow {
  position: absolute; z-index: -1;
  left: 50%; bottom: -18%; translate: -50% 0;
  width: min(140vw, 1500px); aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse at center,
    oklch(var(--glow-ch) / 0.42) 0%,
    oklch(var(--field-ch) / 0.16) 42%,
    transparent 68%);
  pointer-events: none;
}
.hero__in { position: relative; width: min(100% - (var(--gut) * 2), var(--max)); margin-inline: auto; }

/* wide viewports: asymmetric two-column, statement left, rail right */
@media (min-width: 64rem) {
  .hero__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
    grid-template-areas:
      "kick  rail"
      "mark  rail"
      "lede  rail"
      "acts  rail"
      "stats stats";
  }
  .hero .kicker     { grid-area: kick; }
  .hero .wordmark   { grid-area: mark; }
  .hero__ledes      { grid-area: lede; }
  .hero .verse      { grid-area: rail; align-self: end; margin-top: 0; padding-bottom: 0.5rem; }
  .hero__acts       { grid-area: acts; align-self: end; }
  .godstats         { grid-area: stats; margin-top: clamp(2.25rem, 4vw, 3.25rem); }
}

.wordmark {
  font-family: Graduate, Georgia, serif;
  font-size: var(--t-h1);
  line-height: 0.8;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  color: var(--chalk);
  text-shadow: 0 0 60px oklch(var(--glow-ch) / 0.5),
               0 4px 0 oklch(var(--ink-ch) / 0.35);
  margin: 0.35rem 0 1.25rem;
}
.wordmark__line { display: block; }
/* This image is the full lockup (GAIN + tagline baked in below it), taller
   than the old GAIN-only mark, so it needs more height to render the GAIN
   letters at the same size as before. */
.wordmark__img { height: 0.91em; width: auto; display: block; }

.tagline-img { height: 0.85em; width: auto; display: block; }

.hero__ledes { margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.hero__lede {
  font-size: clamp(1.35rem, 1rem + 1.8vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  font-weight: 600;
  max-width: 22ch;
}
.hero__lede + .hero__lede { margin-top: 0.3em; }

.verse {
  margin-top: 1.75rem;
  max-width: 46ch;
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--chalk-dim);
}
.verse cite {
  display: block; margin-top: 0.5rem;
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-style: normal; font-weight: 700;
  font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--gold);
}

.hero__acts { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 30rem) {
  .hero__acts { display: grid; gap: 0.7rem; }
}

/* "Look what God has done": four-figure strip closing the hero. Numbers
   lead (Graduate, large); the sentence they support sits smaller beneath,
   the reverse of a typical dt/dd pairing, so dt carries the number. */
.godstats {
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.godstats__kicker {
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.godstats__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.godstat__n {
  display: block;
  font-family: Graduate, Georgia, serif;
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  line-height: 1;
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
}
.godstat__plus { color: var(--gold); }
.godstat__c {
  margin: 0.5rem 0 0;
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--chalk-dim);
  line-height: 1.4;
  max-width: 20ch;
}

/* Both URLs sit behind mutually exclusive queries. If either were declared
   unconditionally the browser would fetch it before the override parsed, and
   every visitor would pay for both plates. */
@media (max-width: 56.24rem) {
  .hero__field, .final__field {
    background-image: url("assets/field-night-sm.jpg");
    background-image: image-set(
      url("assets/field-night-sm.webp") type("image/webp"),
      url("assets/field-night-sm.jpg") type("image/jpeg"));
  }
}
@media (min-width: 56.25rem) {
  .hero__field, .final__field {
    background-image: url("assets/field-night.jpg");
    background-image: image-set(
      url("assets/field-night.webp") type("image/webp"),
      url("assets/field-night.jpg") type("image/jpeg"));
  }
}

/* ── 03 drive chart (history) ────────────────────────────────────── */
.drive-chart {
  list-style: none; padding: 0;
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
  position: relative;
}
.drive-chart::before {
  content: ""; position: absolute; top: 0.6rem; bottom: 0.6rem;
  left: clamp(4.4rem, 8vw, 5.6rem);
  width: 1px; background: var(--rule);
}
.play {
  display: grid;
  grid-template-columns: clamp(4.4rem, 8vw, 5.6rem) 1fr;
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(1.1rem, 2.4vw, 1.75rem);
  position: relative;
}
.play + .play { border-top: 1px solid var(--rule); }
.play__yr {
  font-family: Graduate, Georgia, serif;
  font-size: clamp(0.9rem, 1.7vw, 1.15rem);
  line-height: 1.2;
  color: oklch(var(--glow-ch));
  letter-spacing: 0;
  text-align: right;
  position: relative;
}
.play__yr .sl { opacity: 0.4; }
.play__yr::after {
  content: ""; position: absolute; top: 0.34em; right: -6.5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--chalk); border: 2px solid var(--field);
}
.play--now .play__yr { color: var(--gold); }
.play--now .play__yr::after { background: var(--gold); border-color: var(--gold-deep); }
.play__body h3 { margin-bottom: 0.4rem; }
.play__body p { color: var(--fg-soft); max-width: 56ch; }

/* ── the trial ───────────────────────────────────────────────────── */
.trial {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-top: clamp(3rem, 7vw, 5.5rem);
  padding-top: clamp(2rem, 5vw, 3.5rem);
  border-top: 2px solid var(--ink);
}
/* ── photo slates ────────────────────────────────────────────────── */
.slate-set { display: grid; gap: clamp(1.5rem, 3.5vw, 2.5rem); }
/* Stacked is fine on narrow viewports; side by side keeps both photos
   closer in height to .trial's prose column on wide ones. */
@media (min-width: 64rem) {
  .slate-set { grid-template-columns: 1fr 1fr; }
}
.slate { margin: 0; }
.slate__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(135deg,
      oklch(var(--chalk-ch) / 0.035) 0 2px,
      transparent 2px 9px),
    var(--slate-dark);
  border: 1px solid var(--rule-hi);
  display: grid; place-items: center;
  /* overflow: hidden also resets the grid item's automatic minimum size to 0.
     Without it, a dropped-in photo taller than this frame's own aspect-ratio
     forces the frame to grow to the photo's intrinsic height instead of
     cropping it, since replaced elements can't shrink past their own
     min-content size inside a grid item by default. */
  overflow: hidden;
}
.slate__frame--tall { aspect-ratio: 3 / 2; }
.slate__frame::before,
.slate__frame::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 1px solid var(--gold); opacity: 0.7;
}
.slate__frame::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.slate__frame::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.slate__tag {
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.24em;
  color: var(--gold);
}
.slate figcaption {
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--fg-soft);
  margin-top: 0.75rem;
}
.slate--dark .slate__frame { background-color: var(--field-900); }
.slate__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* small registration frames: milestone photos, the footer's Instagram slot */
.slate__frame--mini {
  aspect-ratio: 1 / 1;
  border-width: 1px;
}
.slate__frame--mini::before, .slate__frame--mini::after { width: 9px; height: 9px; }
.miniframes {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  gap: clamp(0.6rem, 1.6vw, 1rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.miniframes .slate__tag { font-size: 0.6875rem; letter-spacing: 0.14em; }

/* ── 04 box score ────────────────────────────────────────────────── */
.box {
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
  border: 2px solid var(--ink);
}
.box__head {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
  background: var(--ink); color: var(--chalk);
  padding: 0.85rem clamp(1rem, 2.5vw, 1.75rem);
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.24em;
}
.box__head span:last-child { color: var(--gold); }

.box__score { padding: clamp(0.75rem, 2vw, 1.5rem) clamp(1rem, 2.5vw, 1.75rem); }
.ln {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0 0.75rem;
  padding-block: clamp(0.6rem, 1.4vw, 0.9rem);
}
.ln + .ln { border-top: 1px solid var(--rule); }
.ln dt {
  grid-column: 1;
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: clamp(0.8rem, 1.5vw, 0.95rem);
  font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fg-soft);
}
.ln::before {
  content: ""; grid-column: 2;
  border-bottom: 1px dotted var(--rule-hi);
  translate: 0 -0.28em;
}
.ln dd {
  grid-column: 3; margin: 0;
  font-family: Graduate, Georgia, serif;
  font-size: clamp(1.35rem, 3.4vw, 2.35rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.box__foot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.75rem);
  border-top: 2px solid var(--ink);
  background: oklch(var(--ink-ch) / 0.045);
}
.reach h3 {
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.reach p { font-size: var(--t-sm); color: var(--fg-soft); line-height: 1.5; }

/* ── numbered triptych (reused for the 21-day fasting windows) ──── */
.cost {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2.75rem, 6vw, 4rem);
  border-top: 1px solid var(--rule);
}
.cost li { padding-block: clamp(1.35rem, 3vw, 1.9rem); border-bottom: 1px solid var(--rule); }
.cost__n {
  display: block;
  font-family: Graduate, Georgia, serif;
  font-size: var(--t-xs);
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
}
.cost h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.cost p { font-size: var(--t-sm); color: var(--fg-soft); line-height: 1.55; max-width: 40ch; }

/* ── 07 vision ───────────────────────────────────────────────────── */
.vision {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
}
.build { list-style: none; padding: 0; }
.build li { padding-block: clamp(1.15rem, 2.6vw, 1.6rem); border-bottom: 1px solid var(--rule); }
.build li:first-child { border-top: 1px solid var(--rule); }
.build p { color: var(--fg-soft); font-size: var(--t-b); line-height: 1.5; max-width: 46ch; }

.vision__side { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }

/* ── 08 scoreboard ───────────────────────────────────────────────── */
.scoreboard {
  position: relative;
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
  background:
    repeating-linear-gradient(0deg,
      oklch(var(--ink-ch) / 0.55) 0 1px,
      transparent 1px 3px),
    var(--ink);
  border: 3px solid var(--navy-700);
  box-shadow: inset 0 0 0 1px oklch(var(--chalk-ch) / 0.08);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.scoreboard__bolts span {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: var(--navy-700);
  box-shadow: inset 0 1px 0 oklch(var(--chalk-ch) / 0.3);
}
.scoreboard__bolts span:nth-child(1) { top: 8px; left: 8px; }
.scoreboard__bolts span:nth-child(2) { top: 8px; right: 8px; }
.scoreboard__bolts span:nth-child(3) { bottom: 8px; left: 8px; }
.scoreboard__bolts span:nth-child(4) { bottom: 8px; right: 8px; }

.scoreboard__head {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.24em;
  color: var(--on-navy-2);
  padding-bottom: 1rem;
  border-bottom: 1px solid oklch(var(--chalk-ch) / 0.14);
}
.scoreboard__live { color: var(--gold); }

.scoreboard__rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1px;
  background: oklch(var(--chalk-ch) / 0.12);
  margin-block: 1px;
}
.sb {
  background: var(--ink);
  padding: clamp(1.35rem, 3.5vw, 2.25rem) clamp(0.75rem, 2vw, 1.25rem);
  text-align: center;
}
.sb__lab {
  display: block;
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: var(--t-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--on-navy-3);
  margin-bottom: 0.75rem;
}
.sb__fig {
  display: block;
  font-family: Graduate, Georgia, serif;
  font-size: clamp(2.25rem, 7vw, 3.75rem);
  line-height: 0.9;
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 26px oklch(var(--chalk-ch) / 0.25);
}
.sb--key .sb__fig { color: var(--gold); text-shadow: 0 0 32px oklch(var(--gold-ch) / 0.5); }

.meter { padding-top: clamp(1.5rem, 3.5vw, 2.25rem); }
.meter__lab {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: var(--t-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--on-navy-2);
  margin-bottom: 0.75rem;
}
.meter__lab span:last-child { color: var(--chalk); }
.meter__track {
  height: 18px;
  background: oklch(var(--chalk-ch) / 0.08);
  border: 1px solid oklch(var(--chalk-ch) / 0.16);
  overflow: hidden;
}
.meter__fill {
  height: 100%; width: var(--pct);
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.5s var(--ease) 0.15s;
}
.is-in .meter__fill { transform: scaleX(1); }
.meter__ticks {
  display: flex; justify-content: space-between;
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: var(--t-xs); letter-spacing: 0.14em;
  color: var(--on-navy-3);
  margin-top: 0.5rem;
}

/* ── 09 roster ───────────────────────────────────────────────────── */
.roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
}
.card { border: 1px solid var(--rule); background: oklch(var(--navy9-ch) / 0.55); }
.card__portrait {
  position: relative;
  aspect-ratio: 5 / 4;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg,
      oklch(var(--chalk-ch) / 0.03) 0 2px,
      transparent 2px 9px),
    var(--navy);
  border-bottom: 1px solid var(--rule);
  /* see .slate__frame's overflow: hidden comment: same fix, same reason */
  overflow: hidden;
}
.card__portrait::before,
.card__portrait::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 1px solid var(--gold); opacity: 0.65;
}
.card__portrait::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.card__portrait::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.card__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--obj-pos, 50% 50%);
  display: block;
}
.card__body { padding: clamp(1.35rem, 3vw, 2rem); }
.card__body h3 { margin-bottom: 0.25rem; }
.card__role {
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 1rem;
}
.card__body p:last-child { color: var(--fg-soft); font-size: var(--t-sm); line-height: 1.6; }

/* Accent pull-quote on a navy band. Used after the leadership roster and
   again in Partnership Tiers, so it is generic rather than scoped to one
   section. */
.leadquote {
  margin-top: clamp(2.75rem, 6vw, 4.25rem);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--rule);
}
.leadquote p {
  font-family: Graduate, Georgia, serif;
  font-size: clamp(1.15rem, 2.4vw, 1.65rem);
  line-height: 1.34;
  color: var(--chalk);
  max-width: 52ch;
}
.leadquote cite {
  display: block; margin-top: 1rem;
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-style: normal; font-weight: 700;
  font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--gold);
}

/* ── 10 tiers (depth chart) ──────────────────────────────────────── */
.tiers {
  list-style: none; padding: 0;
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
  border-top: 1px solid var(--rule);
}
.tiers > li { border-bottom: 1px solid var(--rule); }
.tiers > li:last-child { border-bottom: 2px solid var(--gold); }

.tier {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  align-items: baseline;
  gap: 0.35rem clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.1rem, 2.6vw, 1.6rem) 0.75rem;
  margin-inline: -0.75rem;
  text-decoration: none;
  transition: background-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.tier:hover { background: var(--wash); }
.tier:active { transform: scale(0.995); transition-duration: 0.08s; }

.tier__amt {
  font-family: Graduate, Georgia, serif;
  line-height: 0.95;
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
}
.tier__amt sup { font-size: 0.5em; vertical-align: super; }
.tiers > li:nth-child(1) .tier__amt { font-size: clamp(1.5rem, 4vw, 2rem); }
.tiers > li:nth-child(2) .tier__amt { font-size: clamp(1.65rem, 4.5vw, 2.35rem); }
.tiers > li:nth-child(3) .tier__amt { font-size: clamp(1.8rem, 5vw, 2.75rem); }
.tiers > li:nth-child(4) .tier__amt { font-size: clamp(2rem, 5.6vw, 3.2rem); }
.tiers > li:nth-child(5) .tier__amt { font-size: clamp(2.2rem, 6.3vw, 3.75rem); }
.tier--top .tier__amt { font-size: clamp(2.5rem, 7.2vw, 4.4rem); color: var(--gold); }
.tier--top .tier__name { color: var(--gold); }

.tier__name {
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: clamp(0.95rem, 2vw, 1.25rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--fg-soft);
}
.tier__mo {
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--on-navy-3);
  text-align: right;
  white-space: nowrap;
}
/* the arrow only appears where a pointer can act on it */
@media (hover: hover) {
  .tier__mo::after {
    content: " \2192";
    color: var(--gold);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
  }
  .tier:hover .tier__mo::after,
  .tier:focus-visible .tier__mo::after { opacity: 1; }
}
@media (max-width: 40rem) {
  .tier { grid-template-columns: minmax(0, 1fr); }
  .tier__mo { text-align: left; }
}

/* ── 11 pledge ───────────────────────────────────────────────────── */
.pledge {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
}
.ppp { list-style: none; padding: 0; counter-reset: p; }
.ppp li {
  counter-increment: p;
  position: relative;
  padding: clamp(1.1rem, 2.6vw, 1.6rem) 0 clamp(1.1rem, 2.6vw, 1.6rem) 3.25rem;
  border-bottom: 1px solid var(--rule);
}
.ppp li:first-child { border-top: 1px solid var(--rule); }
.ppp li::before {
  content: counter(p, decimal-leading-zero);
  position: absolute; left: 0; top: 1.35rem;
  font-family: Graduate, Georgia, serif;
  font-size: var(--t-sm);
  color: var(--gold);
}
.ppp h3 { font-size: 1.3rem; margin-bottom: 0.3rem; }
.ppp p { color: var(--fg-soft); font-size: var(--t-sm); }

/* The GAIN Day pledge form lives at tlhc.org, external and already live.
   This card sets expectations before that hand-off; it is not a duplicate
   form, and it has no local state to validate. */
.commitcard {
  background: var(--chalk);
  color: var(--ink);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--rule);
}
.commitcard__head {
  font-family: Graduate, Georgia, serif;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--ink);
}
.commitcard > p { color: var(--on-chalk); font-size: var(--t-sm); line-height: 1.55; }
.commitcard__list {
  list-style: none; padding: 0;
  margin: 1.25rem 0 1.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.6rem 1rem;
}
.commitcard__list li {
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: var(--t-sm); font-weight: 600;
  color: var(--ink);
  padding-left: 1.1rem;
  position: relative;
}
.commitcard__list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 2px; background: var(--gold-deep);
}
.commitcard__foot {
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: var(--t-xs);
  color: var(--on-chalk-dim);
  margin-top: 1rem;
  text-align: center;
}

/* ── 12 road ─────────────────────────────────────────────────────── */
.road {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: 1px;
  background: var(--rule-hi);
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
  border: 1px solid var(--rule-hi);
}
.road li { background: var(--chalk); padding: clamp(1.35rem, 3vw, 2rem) clamp(1rem, 2.4vw, 1.5rem); }
.road__d {
  display: block;
  font-family: Graduate, Georgia, serif;
  font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  line-height: 1;
  color: var(--field);
  margin-bottom: 0.85rem;
}
.road h3 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; }
.road p { font-size: var(--t-sm); color: var(--fg-soft); line-height: 1.5; }
.road li.road--hero { background: var(--ink); color: var(--chalk); }
.road--hero .road__d { color: var(--gold); }
.road--hero p { color: var(--chalk-dim); }

/* ── 13 faq ──────────────────────────────────────────────────────── */
.qa { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--rule-hi); }
.qa details { border-bottom: 1px solid var(--rule-hi); }
.qa summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(1.15rem, 2.6vw, 1.6rem) 3rem clamp(1.15rem, 2.6vw, 1.6rem) 0;
  position: relative;
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.24;
  transition: background-color 0.3s var(--ease);
}
/* the only interactive row on the page with no hover feedback before this;
   .tier washes its background on hover, this matches that language */
.qa summary:hover { background: var(--wash); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; position: absolute; right: 0.35rem; top: 50%;
  width: 14px; height: 2px; background: var(--field);
  transition: transform 0.35s var(--ease), background-color 0.3s var(--ease);
}
.qa summary::before {
  content: ""; position: absolute; right: 0.35rem; top: 50%;
  width: 14px; height: 2px; background: var(--field);
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease), background-color 0.3s var(--ease);
  transform: rotate(90deg);
}
.qa summary:hover::after, .qa summary:hover::before { background: var(--gold-deep); }
.qa details[open] summary::before { transform: rotate(0deg); opacity: 0; }
.qa__body { padding-bottom: clamp(1.15rem, 2.6vw, 1.75rem); }
.qa__body p { color: var(--fg-soft); max-width: 62ch; }
.qa__body p + p, .qa__body ul + p { margin-top: 0.85rem; }
.qa__body a { color: var(--field); text-underline-offset: 3px; }
.qa__body ul {
  list-style: none; padding: 0;
  margin: 0.85rem 0; max-width: 62ch;
}
.qa__body li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.15rem;
  color: var(--fg-soft);
}
.qa__body li::before {
  content: ""; position: absolute; left: 0; top: 0.95em;
  width: 8px; height: 2px; background: var(--field);
}

/* ── 14 final ────────────────────────────────────────────────────── */
.final {
  position: relative;
  padding-block: clamp(5.5rem, 13vw, 11rem);
  background: var(--field-900);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.final__field {
  position: absolute; inset-inline: 0; bottom: 0; z-index: -1;
  height: clamp(180px, 34vh, 380px);
  background: bottom center / cover no-repeat;
  opacity: 0.55;
  mask-image: linear-gradient(to top, var(--mask-solid) 30%, transparent 100%);
}
.final .kicker { margin-bottom: 1.25rem; }
.final__h {
  font-family: Graduate, Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 1rem + 8vw, 7rem);
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--chalk);
  text-shadow: 0 0 60px oklch(var(--glow-ch) / 0.4);
}
.final__tag {
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: clamp(0.85rem, 1.8vw, 1.15rem);
  font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--chalk-dim);
  margin: 1.5rem 0 0;
}
.final__tag b { color: var(--gold); font-weight: 700; }
.final__body {
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--chalk-dim);
  max-width: 46ch;
  margin: clamp(1.5rem, 3.5vw, 2.25rem) auto clamp(2.25rem, 5vw, 3.25rem);
}

/* ── resources page ──────────────────────────────────────────────── */
/* Only page in the site with no hero below the fixed nav, so its first
   section needs its own clearance instead of the hero's built-in space. */
#resources-list { padding-top: clamp(7rem, 15vw, 10rem); }
.resources { list-style: none; padding: 0; margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--rule-hi); }
.resources > li { border-bottom: 1px solid var(--rule-hi); }
.resource {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 2.8vw, 1.75rem) 0.75rem;
  margin-inline: -0.75rem;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.3s var(--ease), transform 0.35s var(--ease);
}
a.resource:hover { background: var(--wash); }
a.resource:active { transform: scale(0.995); transition-duration: 0.08s; }
.resource--soon { cursor: default; }
.resource__body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.resource__name {
  font-family: Graduate, Georgia, serif;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
}
.resource__desc {
  font-size: var(--t-sm);
  color: var(--fg-soft);
  max-width: 46ch;
}
.resource__cta {
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-weight: 700;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--field);
  white-space: nowrap;
}
.resource--soon .resource__cta { color: var(--fg-soft); }

/* ── footer ──────────────────────────────────────────────────────── */
.foot {
  background: var(--ink);
  color: var(--chalk-dim);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  border-top: 1px solid var(--rule);
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: var(--t-sm);
}
/* A live Instagram embed would mean a Meta script and token on a page that
   otherwise loads from one origin, so this is a logo + link-out row instead:
   zero added requests, zero third-party scripts. */
.foot__top {
  display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 4vw, 2.5rem);
  justify-content: space-between; align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
/* Circular stamp logo, not a wide wordmark: needs more height than the old
   horizontal lockup did to keep its ring text legible. */
.foot__logo { height: clamp(3.75rem, 8vw, 5rem); width: auto; display: block; }
.foot__socials {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 0.25rem;
}
/* .foot__socials li a (not .foot__socials a) so this out-specifies the later
   .foot a rule regardless of source order */
.foot__socials li a {
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  padding: 0; margin: 0;
  color: var(--chalk-dim);
  transition: color 0.25s var(--ease);
}
.foot__socials li a:hover, .foot__socials li a:focus-visible { color: var(--gold); }
.foot__socials li a:active { color: var(--gold-deep); }
.foot__socials svg { width: 1.3rem; height: 1.3rem; }

.foot__in {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  justify-content: space-between; align-items: end;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
}
.foot__name { color: var(--chalk); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; }
.foot a { color: var(--gold); text-underline-offset: 3px; display: inline-block; padding: 0.75rem 0.3rem; margin-inline: -0.3rem; }
.foot a:active { color: var(--gold-deep); }
.foot__verse { max-width: 30ch; }

/* ── sticky ask ──────────────────────────────────────────────────── */
.sticky {
  position: fixed; z-index: 100;
  left: var(--gut); right: var(--gut); bottom: clamp(0.75rem, 2vw, 1.25rem);
  margin-inline: auto; max-width: 34rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0.7rem 0.7rem 1.25rem;
  background: var(--ink);
  border: 1px solid var(--rule-hi);
  color: var(--chalk);
  font-family: "Archivo Narrow", Archivo, sans-serif;
  font-size: var(--t-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  visibility: hidden;
  transform: translateY(150%);
  transition: transform 0.5s var(--ease), visibility 0s linear 0.5s;
}
.sticky.is-up {
  visibility: visible;
  transform: translateY(0);
  transition: transform 0.5s var(--ease), visibility 0s;
}
.sticky .btn { padding: 0.6rem 1.15rem; }
@media (max-width: 30rem) { .sticky span { display: none; } .sticky { justify-content: center; } }

/* ── reveals ─────────────────────────────────────────────────────── */
/* The hero animates in pure CSS, deliberately. It previously depended on JS
   adding .is-in, which meant a blocked or failed script left the entire ask
   at opacity 0 forever. Nothing above the fold may depend on script. */
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero .r { animation: rise 0.8s var(--ease) both; }
.hero .r:nth-child(1) { animation-delay: 0.09s; }
.hero .r:nth-child(2) { animation-delay: 0.18s; }
.hero .r:nth-child(3) { animation-delay: 0.27s; }
.hero .r:nth-child(4) { animation-delay: 0.36s; }
.hero .r:nth-child(5) { animation-delay: 0.45s; }
.hero .r:nth-child(6) { animation-delay: 0.54s; }
.hero .r:nth-child(7) { animation-delay: 0.63s; }

/* Scroll reveals stay script-driven and fail open: .reveal is applied BY the
   script, so with no script nothing is ever hidden in the first place. */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
/* Keyboard focus can reach a container before the observer has revealed it.
   Never let someone tab into something they cannot see. */
.reveal:focus-within { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero .r { animation: none; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .meter__fill { transform: scaleX(1) !important; transition: none !important; }
  .drive { display: none; }
  .btn:hover { transform: none; }
  .sticky { transition: none; }
}

/* ── forced colours (Windows High Contrast) ─────────────────────── */
/* Backgrounds are replaced by the OS palette, so anything drawn purely with
   background-color disappears. Restore the load-bearing pieces with borders
   and system colours; let the decorative ones go. */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; outline-offset: 3px; }

  /* section separators are structure, not decoration */
  .band::before { background: none; border-top: 1px solid CanvasText; }

  /* the goal meter carries data, so keep its real colours */
  .meter__fill { forced-color-adjust: none; }
  .meter__track { border: 1px solid CanvasText; }

  /* CSS-drawn marks that would otherwise vanish */
  .play__yr::after { background: Canvas; border-color: CanvasText; }
  .scoreboard__bolts span { border: 1px solid CanvasText; }
  .slate__frame { border-color: CanvasText; }
  .slate__frame::before, .slate__frame::after,
  .card__portrait::before, .card__portrait::after { border-color: CanvasText; }

  /* buttons must not read as plain text */
  .btn { border-color: CanvasText; }
}

/* ── print ───────────────────────────────────────────────────────── */
@media print {
  .nav, .sticky, .drive, .hero__field, .hero__glow, .final__field { display: none !important; }
  body { background: var(--chalk); color: var(--ink); }
  .band, .hero, .final { background: var(--chalk) !important; color: var(--ink) !important; padding-block: 1.5rem; }
  .hero .r { animation: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
}