/* =========================================================================
   Maxwell for House — Billings Vernacular
   Two inks (ink black + cream) and one accent (campaign yellow).
   Type is sign-painted: condensed gothic set large with a hard offset shadow,
   which is a print/signage device, never a soft UI shadow.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* Ink */
  --ink:            #0a0a0a;
  --ink-raised:     #101010;
  --ink-deep:       #060606;

  /* Cream — body copy is never pure white on near-black (halation) */
  --cream:          #f0e9d6;
  --cream-dim:      rgba(240, 233, 214, 0.66);
  --cream-faint:    rgba(240, 233, 214, 0.40);

  /* Accent */
  --yellow:         #ffd100;
  --yellow-soft:    #ffe061;
  --focus:          #ffd76a;

  /* Alert — the tracker button only */
  --red-deep:       #3d0703;
  --red:            #a4130a;
  --red-bright:     #ef2b1e;

  /* Rules */
  --rule:           rgba(240, 233, 214, 0.12);
  --rule-faint:     rgba(240, 233, 214, 0.06);

  /* Type */
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --slab:    "Bespoke Slab", Georgia, serif;
  --sans:    "General Sans", system-ui, -apple-system, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1.0625rem;
  --text-lg:   clamp(1.125rem, 0.9rem + 0.7vw, 1.375rem);
  --text-xl:   clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.3rem + 3vw, 3.75rem);

  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;     --space-9: 6rem;
  --space-10: 8rem;

  --shell: 1240px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Lenis drives scrolling; native smooth-scroll would fight it. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

img { max-width: 100%; display: block; }

h1, h2, h3 { margin: 0; font-weight: 700; }

p { margin: 0 0 var(--space-5); }

a { color: inherit; }

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

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--yellow); color: var(--ink);
  padding: var(--space-3) var(--space-5);
  font-family: var(--sans); font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* ---------- Printed-ink grain ------------------------------------------ */
/* Decides whether the palette reads as digital or as printed. */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 182px 182px;
}

/* ---------- Load curtain ----------------------------------------------- */
/* Hidden unless the inline head script confirmed JS is live and motion is
   wanted — otherwise a blocked script would leave the page fully covered. */
.curtain { display: none; }
.js-curtain .curtain {
  display: block;
  position: fixed; inset: 0; z-index: 90;
  background: var(--ink-deep);
  pointer-events: none;
}

/* ---------- Header ------------------------------------------------------ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}
/* Subtle top wash at scrollY=0 so hero type never fights the nav for
   legibility when embedded in a short viewport. Sits behind the topbar
   content but above the hero, at very low opacity so the transparent
   feel is preserved on desktop. Fades away once the topbar becomes
   opaque via .is-stuck. */
.topbar::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 140px;
  background: linear-gradient(to bottom, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.35) 55%, rgba(10,10,10,0) 100%);
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.4s ease;
}
.topbar.is-stuck::before { opacity: 0; }
.topbar.is-stuck {
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--rule-faint);
}
.topbar-inner {
  display: flex; align-items: center; gap: var(--space-6);
  padding-block: var(--space-4);
}
.brand {
  display: flex; align-items: center; gap: var(--space-4);
  text-decoration: none; margin-right: auto; min-width: 0;
}
.brand-logo {
  height: 42px; width: auto;
  /* The source wordmark is already transparent; nothing sits behind it. */
}
.brand-rule {
  width: 1px; height: 26px; background: var(--rule); flex: none;
}
.brand-district {
  font-family: var(--display);
  font-weight: 500; font-size: var(--text-xs);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream-dim); white-space: nowrap;
}
.nav { display: flex; gap: var(--space-6); }
.nav a {
  font-family: var(--sans); font-size: var(--text-sm); font-weight: 500;
  letter-spacing: 0.02em; color: var(--cream-dim);
  text-decoration: none; padding-block: var(--space-2);
  position: relative; transition: color 0.15s ease;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--yellow);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s var(--ease-out);
}
.nav a:hover { color: var(--cream); }
.nav a:hover::after { transform: scaleX(1); }

/* -----------------------------------------------------------------------
   Mobile navigation
   The topbar hides .nav on narrow screens (see media query below) and
   shows a .nav-toggle hamburger instead. Tapping it opens .nav-menu —
   a full-viewport overlay with the same three links styled large and
   confident, matching the site's cinematic voice rather than reading as
   a generic dropdown. State is driven by body.is-menu-open so the
   backdrop, button, and menu stay in sync from one class.
   ----------------------------------------------------------------------- */
.nav-toggle {
  display: none;                       /* becomes flex on narrow widths */
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-left: auto;                   /* sits where .nav used to sit */
  padding: 0; border: 0;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  border-radius: 2px;
}
.nav-toggle:focus-visible {
  outline: 1px solid var(--yellow);
  outline-offset: 2px;
}
.nav-toggle .bars {
  position: relative;
  width: 22px; height: 14px;
  display: block;
}
.nav-toggle .bars::before,
.nav-toggle .bars::after,
.nav-toggle .bars > span {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.35s var(--ease-out), opacity 0.25s ease;
  transform-origin: center;
}
.nav-toggle .bars::before { top: 0; }
.nav-toggle .bars > span   { top: 50%; transform: translateY(-50%); }
.nav-toggle .bars::after  { bottom: 0; }
/* Open state: burger → X. Middle bar fades, top/bottom rotate to a cross. */
body.is-menu-open .nav-toggle .bars::before { transform: translateY(6px) rotate(45deg); }
body.is-menu-open .nav-toggle .bars::after  { transform: translateY(-6px) rotate(-45deg); }
body.is-menu-open .nav-toggle .bars > span  { opacity: 0; }

.nav-menu {
  position: fixed; inset: 0;
  z-index: 60;                         /* below .topbar (70) so the X stays tappable */
  background: rgba(10, 10, 10, 0.98);
  backdrop-filter: blur(20px) saturate(1.05);
  display: flex; flex-direction: column;
  padding: calc(var(--space-10) + 60px) var(--space-6) var(--space-8);
  gap: var(--space-2);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.35s var(--ease-out), transform 0.4s var(--ease-out);
  visibility: hidden;
}
body.is-menu-open .nav-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}
.nav-menu a {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.25rem, 12vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--rule-faint);
  display: flex; align-items: baseline; gap: var(--space-4);
  transition: color 0.2s ease;
}
.nav-menu a:last-of-type { border-bottom: 0; }
.nav-menu a::before {
  content: attr(data-num);
  font-family: var(--sans); font-weight: 500;
  font-size: var(--text-xs); letter-spacing: 0.2em;
  color: var(--cream-faint);
  min-width: 2.5em;
}
.nav-menu a[aria-current="page"] { color: var(--yellow); }
.nav-menu a:hover { color: var(--yellow); }

.nav-menu-foot {
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule-faint);
  font-family: var(--sans); font-size: var(--text-xs);
  letter-spacing: 0.02em; color: var(--cream-faint);
  line-height: 1.5;
}
.nav-menu .nav-menu-donate {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 600;
  font-size: var(--text-sm); letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--yellow);
  padding: var(--space-4) var(--space-6);
  border-radius: 2px;
  text-decoration: none;
  margin-top: var(--space-5);
  align-self: flex-start;
  border-bottom: 0;
}
.nav-menu .nav-menu-donate::before { content: none; }
.nav-menu .nav-menu-donate:hover { background: var(--yellow-soft); color: var(--ink); }

body.is-menu-open { overflow: hidden; }  /* stop background scroll behind menu */

@media (prefers-reduced-motion: reduce) {
  .nav-menu, .nav-toggle .bars::before,
  .nav-toggle .bars::after, .nav-toggle .bars > span { transition: none; }
}

/* Donate chip: dark-grey border with a slow golden sweep along its edges.
   Uses a rotating conic-gradient wrapper (::before) clipped to a thin ring
   by a solid ink inner (::after that leaves the outer 1px exposed). */
.donate-chip {
  position: relative;
  isolation: isolate;
  overflow: hidden;                 /* clip the rotating sweep to the button */
  font-family: var(--sans); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.04em; text-decoration: none;
  color: var(--cream); padding: var(--space-2) var(--space-5);
  border: 0;
  background: transparent;
  outline: 1px solid var(--rule);
  outline-offset: -1px;
  transition: color 0.2s ease;
}
/* Rotating gold arc — a huge square with a narrow conic-gradient wedge. */
.donate-chip::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 260%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 325deg,
    rgba(255, 236, 160, 0.55) 335deg,
    rgba(255, 224, 120, 1)    350deg,
    rgba(255, 245, 200, 1)    358deg,
    rgba(255, 224, 120, 1)    6deg,
    rgba(255, 236, 160, 0.55) 20deg,
    transparent 32deg,
    transparent 360deg
  );
  pointer-events: none;
  z-index: -2;
  animation: donate-shimmer 4.8s linear infinite;
}
/* Inner mask that hides the arc except along a 1px ring. Transparent to the
   page underneath, so nothing else changes visually. */
.donate-chip::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: var(--ink);
  pointer-events: none;
  z-index: -1;
}
@keyframes donate-shimmer {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.donate-chip:hover { color: var(--yellow); }
.donate-chip:hover::before { animation-duration: 2.4s; }
@media (prefers-reduced-motion: reduce) {
  .donate-chip::before { animation: none; opacity: 0.4; }
}

/* ---------- Buttons ----------------------------------------------------- */
.btn {
  display: inline-block; text-decoration: none;
  font-family: var(--sans); font-weight: 600;
  font-size: var(--text-sm); letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-7);
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s var(--ease-out);
}
.btn-primary {
  background: var(--yellow); color: var(--ink);
}
.btn-primary:hover { background: var(--yellow-soft); transform: translateY(-2px); }
.btn-lg { padding: var(--space-5) var(--space-9); font-size: var(--text-base); }

/* Tracker button: near-black fill, dark red border, ignites on hover. */
.btn-alert {
  background: #070707; color: var(--red-bright);
  border-color: var(--red-deep);
  transition: color 0.28s ease, border-color 0.28s ease,
              box-shadow 0.28s ease, text-shadow 0.28s ease;
}
.btn-alert:hover, .btn-alert:focus-visible {
  color: #fff; border-color: var(--red-bright);
  text-shadow: 0 0 12px rgba(239, 43, 30, 0.9);
  box-shadow:
    0 0 0 1px var(--red-bright),
    0 0 18px rgba(239, 43, 30, 0.55),
    0 0 46px rgba(239, 43, 30, 0.30),
    inset 0 0 18px rgba(239, 43, 30, 0.22);
}

.quiet-link {
  font-family: var(--sans); font-size: var(--text-sm); font-weight: 500;
  color: var(--cream-dim);
  text-decoration: underline; text-underline-offset: 5px;
  text-decoration-color: var(--rule);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.quiet-link:hover { color: var(--cream); text-decoration-color: var(--yellow); }

/* =========================================================================
   01 — HERO
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  /* Top padding reserves clearance below the fixed topbar so the lockup
     never sits under it, even in short/embedded viewports (the pplx
     preview iframe, browsers on landscape phones, etc.). The topbar is
     roughly 74px tall; add breathing room. */
  padding-top: clamp(120px, 14vh, 200px);
  padding-bottom: var(--space-9);
  overflow: hidden;
}

/* The portrait occupies the right column rather than the full bleed, so the
   figure reads at a human scale instead of a cropped close-up. */
.hero-portrait {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: min(56%, 760px);
  z-index: 0;
  will-change: transform;
}
.hero-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
  /* Scaled up so parallax travel never exposes an edge. */
  transform: scale(1.08);
}

/* Two-axis veil: darkens the lower-left so type always has a ground,
   while the figure on the right stays readable. */
.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(10,10,10,0.80) 22%, rgba(10,10,10,0.18) 60%, rgba(10,10,10,0) 100%),
    linear-gradient(to right, var(--ink) 26%, rgba(10,10,10,0.72) 44%, rgba(10,10,10,0.10) 72%, rgba(10,10,10,0) 100%);
}

.hero-inner { position: relative; z-index: 2; }
.hero-copy { max-width: 46rem; }

/* The lockup — hand-painted shop-sign lettering. */
.lockup {
  font-family: var(--display);
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-5);
}
.lockup span {
  display: block;
  /* Cap font size by both viewport width AND height so the lockup never
     grows so tall it collides with the fixed topbar in short/embedded
     viewports. min() picks whichever constraint is tighter. */
  font-size: min(clamp(4.5rem, 15vw, 13rem), 22vh);
}

/* Reveal mask, injected by main.js. Line-height is 0.82, so the line box is
   much shorter than the glyphs — Big Shoulders Display sits tall in its em
   box and the ascenders spill above the CSS line box. The mask needs enough
   top headroom to clear those ascenders AND the outline stroke width on the
   first-line variant, otherwise the tops of J, O, H, N get shorn off.
   0.9em is chosen to work at every size in the clamp() range with margin
   to spare; the negative top margin cancels it so layout position is
   unchanged. Bottom needs a little slack too so the yellow offset shadow
   under MAXWELL isn't clipped at its lower edge. */
.lockup-mask {
  display: block;
  overflow: hidden;
  padding: 0.9em 0.15em 0.15em 0.15em;
  margin: -0.9em -0.15em -0.15em -0.15em;
}
.lockup-first {
  font-weight: 500;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--cream);
  margin-left: 0.02em;
}
.lockup-last {
  font-weight: 900;
  color: var(--cream);
  /* Hard offset, no blur — a storefront sign refreshed every decade
     but never replaced. A soft shadow would read as generic UI. */
  text-shadow: 0.055em 0.055em 0 var(--yellow);
}

.hero-fight {
  font-family: var(--slab);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.25;
  color: var(--yellow);
  margin: 0 0 var(--space-5);
  max-width: 24ch;
}

.hero-substance {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--cream);
  max-width: 40ch;
  margin-bottom: var(--space-6);
}

.hero-actions {
  display: flex; align-items: center; gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.hero-signature {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin: 0;
}

/* =========================================================================
   TICKER
   ========================================================================= */
.ticker {
  border-block: 1px solid var(--rule);
  background: var(--ink-deep);
  overflow: hidden;
  padding-block: var(--space-4);
}
.ticker-track {
  display: flex; width: max-content;
  animation: ticker-scroll 48s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-run {
  display: flex; align-items: center; gap: var(--space-8);
  margin: 0; padding: 0 var(--space-8) 0 0; list-style: none;
  flex: none;
}
.ticker-run li {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-dim);
  white-space: nowrap;
}
.ticker-run em {
  font-style: normal; font-weight: 800; color: var(--yellow);
  font-variant-numeric: tabular-nums;
}
@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* =========================================================================
   SECTION FURNITURE
   ========================================================================= */
.section-head {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-8);
}
.section-title {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--text-2xl);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--cream);
}

/* =========================================================================
   02 — PROMISE
   ========================================================================= */
.promise { padding-block: var(--space-10); }
.promise-body {
  max-width: 62ch;
  margin-left: auto;
}
.promise-body .lede {
  font-size: var(--text-lg);
  line-height: 1.55;
}
.promise-body p { color: var(--cream-dim); }
.promise-body .lede { color: var(--cream); }

.pull {
  margin: var(--space-10) 0 0;
  padding: var(--space-7) 0 0;
  border-top: 1px solid var(--rule);
  max-width: none;
}
.pull p {
  font-family: var(--slab);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0;
  text-wrap: balance;
}
.pull p::before {
  content: "\201C";
  color: var(--yellow);
  margin-right: 0.15em;
  font-family: var(--slab);
}
.pull p::after {
  content: "\201D";
  color: var(--yellow);
  margin-left: 0.05em;
  font-family: var(--slab);
}

/* =========================================================================
   03 — THE NUMBERS (pinned, scroll-scrubbed)
   ========================================================================= */
.numbers {
  border-top: 1px solid var(--rule);
  background: var(--ink-deep);
}
.numbers-pin {
  min-height: 100svh;
  display: flex; align-items: center;
  padding-block: var(--space-8);
}
.numbers-inner { width: 100%; }
.numbers-head { margin-bottom: var(--space-8); }
.numbers-title {
  font-family: var(--display);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  line-height: 0.98; letter-spacing: -0.01em;
  max-width: 20ch;
}

.stage {
  position: relative;
  min-height: 17rem;
}
/* Numeral and its explanation share the width so the pinned frame stays
   composed rather than leaving half the screen empty. */
.stat {
  position: absolute; inset: 0;
  opacity: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--space-8);
  align-items: center;
}
.stat-text { max-width: 34ch; }
/* First card visible before JS runs, and the only state without JS. */
.stat:first-child { opacity: 1; }

/* Progressive enhancement: without motion scripts, every statistic remains
   readable. The normal animated desktop stage keeps its existing layout. */
body:not(.js-motion) .stat {
  position: static;
  opacity: 1;
  display: block;
  margin-bottom: var(--space-8);
}
body:not(.js-motion) .stage { min-height: 0; }
body:not(.js-motion) .stage-nav,
body:not(.js-motion) .stage-hint { display: none; }

.stat-value {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(4rem, 12vw, 12rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--space-4);
}
.stat-label {
  font-family: var(--slab);
  font-size: var(--text-lg);
  line-height: 1.35;
  color: var(--cream);
  margin: 0 0 var(--space-3);
}
.stat-source {
  font-size: var(--text-sm);
  color: var(--cream-faint);
  margin: 0;
}

.stage-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.stage-dots {
  display: flex; gap: var(--space-3);
}
.stage-dots span {
  width: 30px; height: 2px; background: var(--rule);
  transition: background 0.3s ease;
}
.stage-dots span.is-on { background: var(--yellow); }

/* Small "Scroll" affordance next to the progress dots — some viewers
   didn't realize the numeral advances on scroll and thought the card
   was clickable. Fades once they progress past the first card. */
.stage-hint {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-faint);
  opacity: 0.85;
  transition: opacity 0.4s ease;
}
.stage-hint-arrow {
  display: inline-flex;
  color: var(--yellow);
  animation: stage-hint-bob 1.8s ease-in-out infinite;
}
@keyframes stage-hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
/* Once the user has advanced past the first card, they've understood
   the interaction — quiet the hint down so it doesn't keep pulsing. */
.numbers.has-advanced .stage-hint { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .stage-hint-arrow { animation: none; }
}

/* =========================================================================
   04 — LEDGER
   ========================================================================= */
.ledger { padding-block: var(--space-10); }
.ledger-lede {
  max-width: 58ch; font-size: var(--text-lg);
  color: var(--cream); margin-bottom: var(--space-8);
}
.ledger-list {
  list-style: none; margin: 0 0 var(--space-8); padding: 0;
  border-top: 1px solid var(--rule);
}
.row {
  display: grid;
  grid-template-columns: 9rem 1fr 6rem;
  gap: var(--space-5);
  align-items: baseline;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--rule-faint);
}
.bill {
  font-family: var(--display); font-weight: 700;
  font-size: var(--text-sm); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cream-dim);
}
.what { color: var(--cream); font-size: var(--text-sm); line-height: 1.45; }
.verdict {
  font-family: var(--display); font-weight: 700;
  font-size: var(--text-sm); letter-spacing: 0.14em;
  text-transform: uppercase; text-align: right;
}
.is-pass .verdict { color: var(--cream-faint); }
.is-fail .verdict { color: var(--red-bright); }
.is-fail .what { color: var(--cream); }

.ledger-cta { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.ledger-note { font-size: var(--text-sm); color: var(--cream-faint); margin: 0; }

/* =========================================================================
   04b — CREED (My Thoughts on Politics)
   ========================================================================= */
.creed {
  padding-block: var(--space-10);
  border-top: 1px solid var(--rule);
}
.creed-eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 var(--space-4);
}
.creed-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0 0 var(--space-8);
  max-width: 22ch;
  text-wrap: balance;
}
.creed-body {
  max-width: 62ch;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.creed-body p {
  font-family: var(--sans);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--cream-dim);
  margin: 0;
}
.creed-body p:first-child { color: var(--cream); }
.creed-body p:nth-child(3) { color: var(--cream); }
@media (max-width: 720px) {
  .creed-body { margin-left: 0; max-width: none; }
}

/* =========================================================================
   05 — STORIES
   ========================================================================= */
.stories { padding-block: var(--space-9) var(--space-10); }
.story-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
}
.story {
  background: var(--ink);
  padding: var(--space-8) var(--space-7) var(--space-7);
  display: flex; flex-direction: column; gap: var(--space-6);
  justify-content: space-between;
  transition: background 0.3s ease;
}
.story:hover { background: var(--ink-raised); }
.story h2 {
  font-family: var(--display);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  line-height: 0.98; letter-spacing: -0.01em;
  max-width: 14ch;
}
.story-link {
  font-family: var(--sans); font-weight: 600;
  font-size: var(--text-sm); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--yellow);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--space-3);
}
.story-link span { transition: transform 0.25s var(--ease-out); display: inline-block; }
.story:hover .story-link span { transform: translateX(6px); }

/* =========================================================================
   CLOSING
   ========================================================================= */
.closing {
  padding-block: var(--space-10);
  border-top: 1px solid var(--rule);
  text-align: center;
}
.closing-line {
  font-family: var(--display);
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(3rem, 11vw, 9rem);
  line-height: 0.86; letter-spacing: -0.02em;
  color: var(--cream); margin: 0;
}
.closing-accent { color: var(--yellow); }
.closing-actions {
  margin-top: var(--space-8);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
}
.closing-note {
  font-family: var(--display); font-weight: 500;
  font-size: var(--text-sm); letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--cream-faint); margin: 0;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot { border-top: 1px solid var(--rule-faint); padding-block: var(--space-6); }
.foot-inner {
  display: flex; justify-content: space-between; gap: var(--space-5);
  flex-wrap: wrap;
  font-family: var(--display); font-weight: 500;
  font-size: var(--text-xs); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cream-faint);
}
/* Legal disclaimer row: sits below the uppercase brand row, in a quieter
   sentence-case sans so it reads as required disclosure rather than
   design copy. Keeps the same shell width so it aligns with the row above. */
/* Divider between the brand row and the legal disclaimer. Sits on the
   brand row's bottom so it spans the full shell width; the disclaimer
   text below can then be reading-width without pulling the line in. */
.foot .foot-inner {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--rule-faint);
  margin-bottom: var(--space-5);
}
.foot-disclaimer {
  font-family: var(--sans); font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--cream-faint);
  line-height: 1.55;
  margin: 0;
}

/* =========================================================================
   MOTION ENTRY STATES — only applied once JS confirms it will animate,
   so content is never trapped invisible if the scripts fail.
   ========================================================================= */
body.js-motion [data-reveal] { opacity: 0; transform: translateY(18px); }
body.js-motion .stat:first-child { opacity: 0; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
  .promise-body { margin-left: 0; }
}

@media (max-width: 899px) {
  .hero {
    min-height: 100svh;
    align-items: flex-end;
    padding-bottom: var(--space-9);
  }
  .hero-portrait {
    width: 100%;
    left: 0; right: 0;
  }
  .hero-portrait img {
    object-position: 50% 10%;
  }
  /* Mobile veil is stronger and vertical only — the figure sits centred. */
  .hero-veil {
    background: linear-gradient(to top,
      var(--ink) 6%, rgba(10,10,10,0.92) 30%, rgba(10,10,10,0.55) 58%, rgba(10,10,10,0.25) 100%);
  }
  .lockup span { font-size: clamp(3.5rem, 17vw, 7rem); }
  .lockup-first { -webkit-text-stroke-width: 1.2px; }

  .story-grid { grid-template-columns: 1fr; }
  .numbers-pin { min-height: auto; padding-block: var(--space-9); }
  .stage { min-height: 0; }
  /* No pinned stage on small screens — cards stack and reveal normally. */
  .stat {
    position: static; opacity: 1;
    display: block;
    margin-bottom: var(--space-8);
  }
  .stat-text { max-width: none; }
  .stat:last-child { margin-bottom: 0; }
  body.js-motion .stat:first-child { opacity: 1; }
  .stage-dots { display: none; }
  /* On mobile the cards already stack normally, so no scroll hint is
     needed — hide the whole nav cluster. */
  .stage-nav { display: none; }
  .stage-hint { display: none; }

  .row { grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); }
  .bill { grid-column: 1; }
  .verdict { grid-column: 2; grid-row: 1; }
  .what { grid-column: 1 / -1; grid-row: 2; }
}

/* Mobile / tablet nav: raise the breakpoint to 900px so iPad-portrait
   and landscape phones also get the hamburger. On these widths the
   horizontal nav starts to crowd the logo + Donate chip anyway. */
@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  /* Hide the desktop Donate chip on narrow widths — the mobile menu has
     its own prominent Donate button, and both fighting for the topbar
     row is cramped. The hamburger sits exactly where Donate used to. */
  .donate-chip { display: none; }
  .topbar-inner { gap: var(--space-4); }
  .brand-rule, .brand-district { display: none; }
  .brand-logo { height: 34px; }
}

@media (max-width: 560px) {
  .btn { padding: var(--space-3) var(--space-5); font-size: var(--text-xs); letter-spacing: 0.06em; }
  .btn-lg { padding: var(--space-4) var(--space-6); font-size: var(--text-sm); }
  .hero-actions { gap: var(--space-4); }
  .closing-line { font-size: clamp(2.5rem, 13vw, 4rem); }
}

/* =========================================================================
   REDUCED MOTION — nothing moves, everything is visible.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-track { animation: none; }
  .hero-portrait img { transform: scale(1.02); }
  body.js-motion [data-reveal] { opacity: 1; transform: none; }
  .stat { position: static; opacity: 1 !important; display: block; margin-bottom: var(--space-8); }
  .stage { min-height: 0; }
  .stage-dots { display: none; }
  .stage-hint { display: none; }
  .curtain { display: none; }
}