/* ============================================================
   CHIPATA GIRLS FC — components
   Consumes tokens.css only. No raw hex below this line.
   Mobile-first. Breakpoints: 480 · 768 · 1024 · 1280.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{max-width:100%;display:block}
button{font:inherit;color:inherit}

body{
  background:var(--paper);
  color:var(--text2);
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── Shared primitives ───────────────────────────────────── */
.wrap{width:100%;max-width:var(--content-max);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--reading{max-width:calc(var(--reading-max) + var(--gutter) * 2)}
.wrap--wide{max-width:var(--wide-max)}

/* One class owns section padding. Never a type selector — the
   design-system note about specificity collisions on section
   margins applies here. */
.section{padding-block:var(--s8);background:var(--paper);color:var(--text2)}
.section--panel{background:var(--panel)}
.section--editorial{background:var(--editorial)}
.section--tight{padding-block:var(--s7)}
@media (min-width:768px){.section{padding-block:var(--s9)}}

.eyebrow{
  font-family:var(--font-mono);font-size:var(--text-mono-label);
  letter-spacing:.08em;text-transform:uppercase;color:var(--identity);
  margin:0 0 var(--s3);
}
.eyebrow--muted{color:var(--muted)}

.rule{border:0;border-top:1px solid var(--line);margin:0}
.label-rule{
  display:flex;align-items:center;gap:var(--s4);
  margin-bottom:var(--s5);
}
.label-rule .eyebrow{margin:0;white-space:nowrap}
.label-rule::after{content:"";flex:1;height:1px;background:var(--line)}

h1,h2,h3,.display{
  font-family:var(--font-display);color:var(--ink);
  letter-spacing:-.02em;line-height:1.08;font-weight:700;
  text-wrap:balance;
}
h2{font-size:var(--text-display);line-height:1.06}
h3{font-size:var(--text-h3);line-height:1.14;font-weight:600;letter-spacing:-.01em}
.lede{font-size:var(--text-body-lg);line-height:1.6;color:var(--text2)}
.reading p + p{margin-top:var(--s4)}
.reading{line-height:1.7}
.num{font-variant-numeric:tabular-nums}

/* Link colour is set at zero-to-one specificity on purpose. A
   `.floodlit a` rule (0,1,1) would out-rank `.btn--action` (0,1,0)
   and repaint the donate button's label — the specificity trap
   design-system.md warns about. :where() keeps it at (0,0,1). */
a{color:var(--identity-strong)}
:where(.floodlit) a{color:var(--identity)}
a.inline{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  transition:text-decoration-thickness var(--dur-hover) var(--ease-out);
}
a.inline:hover{text-decoration-thickness:2px}

:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}

/* ── Buttons & chips (pill-shaped, design-system §3) ─────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--font-display);font-weight:600;font-size:var(--text-small);
  line-height:1;padding:14px 22px;border-radius:var(--radius-pill);
  border:1px solid transparent;background:transparent;cursor:pointer;
  text-decoration:none;text-align:center;
  transition:background var(--dur-hover) var(--ease-out),
             color var(--dur-hover) var(--ease-out),
             transform var(--dur-hover) var(--ease-out),
             border-color var(--dur-hover) var(--ease-out);
}
@media (min-width:768px){.btn{font-size:var(--text-body);padding:15px 26px}}

/* Action = green under the Copper identity. Reserved for the ask. */
.btn--action{background:var(--action);color:var(--on-action)}
.btn--action:hover{background:var(--action-strong);transform:translateY(-1px)}
.btn--secondary{border-color:var(--ink);color:var(--ink)}
.btn--secondary:hover{background:var(--ink);color:var(--paper);transform:translateY(-1px)}
.btn--ghost{
  color:var(--identity-strong);padding-inline:var(--s2);
  text-decoration:underline;text-underline-offset:3px;
}
.floodlit .btn--ghost{color:var(--identity)}
.btn--sm{padding:9px 16px;font-size:var(--text-small)}
.btn--block{width:100%}

.chip{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.05em;
  text-transform:uppercase;border-radius:var(--radius-pill);
  padding:5px 11px;border:1px solid var(--line);color:var(--muted);
  background:var(--surface);white-space:nowrap;
}
/* "In school" — the status that matters. Under Copper it carries
   the identity colour (design-system §1.3). */
.chip--inschool{color:var(--identity-strong);border-color:var(--identity-strong);background:var(--identity-tint)}
.floodlit .chip--inschool{color:var(--identity);border-color:var(--identity)}
.chip--inschool .dot{
  width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;
}
.chip--todo{color:var(--muted);border-style:dashed;background:transparent}

/* ── Trust line — sits at every ask ──────────────────────── */
.trust{
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);line-height:1.5;
}
.trust .dot{width:6px;height:6px;border-radius:50%;background:var(--action);flex:none}
.handoff{font-size:var(--text-small);color:var(--text2);margin-top:var(--s2)}
.ask-block{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}

/* ── Header / nav ────────────────────────────────────────── */
.header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header__inner{
  display:flex;align-items:center;gap:var(--s4);
  min-height:64px;padding-block:var(--s3);
}
.brand{
  display:inline-flex;align-items:center;gap:var(--s3);
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.01em;color:var(--ink);
  text-decoration:none;flex:none;
}
.brand .crest{color:var(--identity);width:30px;height:30px;flex:none}
.brand__logo{width:34px;height:34px;flex:none;object-fit:contain}
@media (min-width:768px){.brand__logo{width:38px;height:38px}}
.footer .brand__logo{width:44px;height:44px}
/* Wordmark minimum width is 130px (design-system §2.5); below that
   the lockup goes crest-only. */
.brand__name{font-size:.82rem}
@media (min-width:480px){.brand__name{font-size:.95rem}}
@media (max-width:359px){.brand__name{display:none}}
.nav{display:none;margin-left:auto;gap:var(--s5)}
@media (min-width:1024px){.nav{display:flex}}
.nav a{
  color:var(--text2);text-decoration:none;font-weight:500;font-size:var(--text-small);
  transition:color var(--dur-hover) var(--ease-out);
}
.nav a:hover{color:var(--identity-strong)}
.nav a[aria-current="page"]{color:var(--identity-strong);font-weight:600}
.header__actions{display:flex;align-items:center;gap:var(--s3);margin-left:auto}
@media (min-width:1024px){.header__actions{margin-left:var(--s5)}}

/* ── Theme toggle ────────────────────────────────────────── */
.theme-toggle{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--radius-pill);
  background:transparent;color:var(--text2);cursor:pointer;
  transition:color var(--dur-hover) var(--ease-out),
             border-color var(--dur-hover) var(--ease-out),
             background var(--dur-hover) var(--ease-out);
}
.theme-toggle:hover{color:var(--identity);border-color:var(--identity)}
.theme-toggle svg{width:18px;height:18px}
/* Show the mode you'd switch TO. JS writes data-theme after boot;
   the media query covers the pre-JS and no-JS paths. */
.theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .theme-toggle .icon-sun{display:block}
  :root:not([data-theme]) .theme-toggle .icon-moon{display:none}
}

/* ── Thank-you banner (?thanks=1) ────────────────────────── */
.thanks{background:var(--action-tint);border-bottom:1px solid var(--line)}
.thanks__inner{padding-block:var(--s4);display:flex;gap:var(--s3);align-items:baseline;flex-wrap:wrap}
.thanks h2{font-size:var(--text-h3);color:var(--ink)}
.thanks p{color:var(--text2);font-size:var(--text-small)}

/* ── Hero ────────────────────────────────────────────────── */
.hero{padding-block:var(--s8) var(--s8);position:relative;overflow:hidden}
@media (min-width:768px){.hero{padding-block:var(--s9) var(--s9)}}
.hero__grid{display:grid;gap:var(--s7);align-items:center}
@media (min-width:1024px){.hero__grid{grid-template-columns:1fr 1fr;gap:var(--s8)}}
.hero h1{font-size:var(--text-hero);letter-spacing:-.025em;line-height:1.02;margin-bottom:var(--s5)}
.hero h1 .accent{color:var(--identity)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s4)}
.hero__crest{display:flex;justify-content:center}
.hero__crest .crest{color:var(--identity);width:min(280px,58vw);height:auto}
/* chalk touchline behind the hero */
.hero__chalk{
  position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--chalk);opacity:.5;
}

/* ── The map ─────────────────────────────────────────────
   Where Chipata actually is. Generated by tools/build-map.py from
   open boundary data and inlined (not an <img>) so it reads the
   colour tokens and themes with the page.
   ------------------------------------------------------- */
.pov{display:grid;gap:var(--s7);align-items:center}
@media (min-width:960px){.pov{grid-template-columns:1fr 1fr;gap:var(--s8)}}

.map-figure{margin:0}
.map-figure figcaption{
  font-family:var(--font-body);font-size:var(--text-small);line-height:1.55;
  letter-spacing:normal;text-transform:none;color:var(--text2);
  margin-top:var(--s4);max-width:46ch;
}
/* Map labels sit on top of the country outline, so they carry a halo
   in the section's own background colour to stay readable. */
.map{width:100%;height:auto;display:block;overflow:visible;--map-halo:var(--paper)}
.section--panel .map{--map-halo:var(--panel)}
.section--editorial .map{--map-halo:var(--editorial)}
.map text{paint-order:stroke;stroke:var(--map-halo);stroke-width:4;stroke-linejoin:round}
/* The rest of Zambia is context, not content — present enough to read
   as a country, quiet enough that Eastern Province is what you see. */
.map__province{fill:var(--paper);stroke:var(--chalk);stroke-width:1;opacity:.75}
.section--panel .map__province{fill:var(--surface)}
.floodlit .map__province,
:root[data-theme="dark"] .map__province{fill:var(--panel);opacity:.9}
.map__eastern{
  fill:var(--identity-tint);stroke:var(--identity);
  stroke-width:1.6;stroke-linejoin:round;
}
.map__link{
  stroke:var(--chalk);stroke-width:1.4;stroke-dasharray:5 6;fill:none;
  stroke-linecap:round;
}
.map__pin circle{fill:var(--muted)}
.map__pin text{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;fill:var(--ink);
}
.map__pin .map__sub{font-size:11px;fill:var(--muted);text-transform:none;letter-spacing:.04em}
.map__pin--home circle{fill:var(--identity)}
.map__pin--home text{fill:var(--identity-strong)}
.floodlit .map__pin--home text,
:root[data-theme="dark"] .map__pin--home text{fill:var(--identity)}
.map__halo{fill:var(--identity);opacity:.16}
.map__dist{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  fill:var(--muted);
}
/* One quiet pulse on the home pin when the map scrolls in. */
.map-figure.is-in .map__halo{
  transform-origin:center;transform-box:fill-box;
  animation:pin-pulse 2.4s var(--ease-out) 2;
}
@keyframes pin-pulse{
  0%{transform:scale(.5);opacity:.4}
  70%{transform:scale(1.25);opacity:0}
  100%{transform:scale(1.25);opacity:0}
}

/* ── The route diagram ───────────────────────────────────
   The approved line is "your gift doesn't pass through five
   offices", so the diagram counts the hops and nothing else — no
   claims about where anyone else's money goes.
   ------------------------------------------------------- */
.route{display:flex;flex-direction:column;gap:var(--s6);margin-top:var(--s7)}
.route__line{
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:var(--s3);
}
@media (max-width:600px){
  .route__line{grid-template-columns:1fr;gap:var(--s2)}
  .route__line .route__cap:last-of-type{text-align:right}
}
.route__cap{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
.route__hops{position:relative;display:flex;gap:6px;align-items:center}
.route__hops i{flex:1;height:3px;border-radius:2px;background:var(--line)}
.route__line--short .route__hops i{background:var(--identity)}
.route__line--short .route__cap{color:var(--identity-strong)}
.floodlit .route__line--short .route__cap,
:root[data-theme="dark"] .route__line--short .route__cap{color:var(--identity)}

.route__runner{
  position:absolute;top:50%;left:0;width:11px;height:11px;border-radius:50%;
  margin-top:-5.5px;margin-left:-5.5px;background:var(--muted);opacity:0;
}
.route__line--short .route__runner{background:var(--identity)}

/* Play on scroll-in, twice, then rest. Not a loop — the design
   system asks for motion that happens and then stops. */
.route.is-in .route__line--long .route__runner{
  opacity:1;animation:hop 4.4s steps(5,end) 2 both;
}
.route.is-in .route__line--short .route__runner{
  opacity:1;animation:glide 1.5s var(--ease-out) 2 both;
}
@keyframes hop{from{left:0}to{left:100%}}
@keyframes glide{from{left:0}to{left:100%}}

.route__note{font-size:var(--text-small);color:var(--text2);margin-top:var(--s2)}
.route__note b{color:var(--ink);font-weight:500}

/* ── Section-level call to action ────────────────────────── */
.section-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);
  margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line);
}
.section-cta p{font-size:var(--text-small);color:var(--text2);flex:1;min-width:min(100%,260px)}

/* ── Photographs ─────────────────────────────────────────── */
.photo{
  margin:0;position:relative;
  border:1px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden;background:var(--panel);box-shadow:var(--shadow-warm);
}
.photo img{width:100%;height:auto;display:block}
.photo--fill img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo__caption{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-top:var(--s3);
}
figure.with-caption{margin:0}

/* ── Hero carousel ───────────────────────────────────────── */
.slideshow{
  position:relative;aspect-ratio:16/9;width:100%;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--panel);box-shadow:var(--shadow-warm-lift);
}
.slideshow__slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 700ms var(--ease-inout);
}
.slideshow__slide img{width:100%;height:100%;object-fit:cover;display:block}
.slideshow__slide.is-live{opacity:1}
/* A warm scrim so the caption stays legible over any frame. */
.slideshow__slide::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(18,19,14,.66) 0%,rgba(18,19,14,.16) 34%,transparent 62%);
}
.slideshow__caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s4);padding:var(--s4) var(--s5);
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.05em;
  text-transform:uppercase;color:#F4EFE2;
}
.slideshow__dots{display:flex;gap:var(--s2);flex:none}
.slideshow__dot{
  width:22px;height:3px;border-radius:2px;border:0;padding:0;cursor:pointer;
  background:rgba(244,239,226,.42);
  transition:background var(--dur-hover) var(--ease-out);
}
.slideshow__dot:hover{background:rgba(244,239,226,.72)}
.slideshow__dot[aria-current="true"]{background:var(--copper-bright)}
.slideshow__dot:focus-visible{outline:2px solid var(--copper-bright);outline-offset:3px}

/* ── Photo strip (the players section) ───────────────────── */
.strip{display:grid;gap:var(--s4)}
@media (min-width:700px){.strip{grid-template-columns:repeat(3,1fr)}}
.strip .photo img{aspect-ratio:3/2;object-fit:cover}

/* ── Cards ───────────────────────────────────────────────── */
.cards{display:grid;gap:var(--s4)}
@media (min-width:640px){.cards--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.cards--4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:640px){.cards--3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.cards--3{grid-template-columns:repeat(3,1fr)}}

.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:var(--s5);height:100%;
  transition:transform var(--dur-hover) var(--ease-out),
             box-shadow var(--dur-hover) var(--ease-out);
}
.card h3{margin-bottom:var(--s2)}
.card p{font-size:var(--text-small);line-height:1.6}
.card__mark{color:var(--identity);width:22px;height:22px;margin-bottom:var(--s3)}

/* ── Player cards ────────────────────────────────────────── */
.players{display:grid;gap:var(--s4)}
@media (min-width:600px){.players{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.players{grid-template-columns:repeat(3,1fr)}}

.player{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-md);overflow:hidden;height:100%;
  display:flex;flex-direction:column;
  transition:transform var(--dur-hover) var(--ease-out),
             box-shadow var(--dur-hover) var(--ease-out);
}
.player:hover{transform:translateY(-3px);box-shadow:var(--shadow-warm-lift)}
/* Chalk placeholder ground — used wherever there is no consented
   photograph. design-system §5. */
.player__ground{
  height:132px;position:relative;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s3);padding:var(--s3) var(--s4);
  background:
    repeating-linear-gradient(90deg,
      color-mix(in srgb,var(--identity) 10%,var(--panel)) 0 26px,
      var(--panel) 26px 52px);
}
.player__ground img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.player__ground::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--chalk);opacity:.6;
}
.player__num{
  font-family:var(--font-display);font-weight:700;font-size:2.4rem;line-height:1;
  letter-spacing:-.03em;color:var(--identity);position:relative;
  font-variant-numeric:tabular-nums;
}
.player__body{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.player__body h3{font-size:var(--text-h3);font-weight:700}
.player__meta{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);
}
.player__line{font-size:var(--text-small);color:var(--text2)}

/* Consent-gated placeholder card: crest + chalk, no child. */
.player--placeholder .player__ground{
  align-items:center;justify-content:center;
}
.player--placeholder .crest{color:var(--identity);opacity:.28;width:56px;height:56px}
.player--placeholder .player__body{color:var(--muted)}

.notice{
  border:1px dashed var(--line);border-radius:var(--radius-md);
  padding:var(--s4) var(--s5);margin-bottom:var(--s5);
  max-width:78ch;
  font-size:var(--text-small);color:var(--text2);background:var(--paper);
}
.notice code{
  font-family:var(--font-mono);font-size:.82em;color:var(--ink);
  background:var(--panel);border-radius:var(--radius-sm);padding:1px 5px;
}
.notice strong{color:var(--ink)}

/* ── Impact ──────────────────────────────────────────────── */
.stats{display:grid;gap:var(--s5);margin-bottom:var(--s7)}
@media (min-width:640px){.stats{grid-template-columns:repeat(3,1fr);gap:var(--s6)}}
.stat__value{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.6rem,7vw,3.6rem);line-height:1;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.stat__value--identity{color:var(--identity)}
.stat__value--action{color:var(--action)}
.stat__label{font-size:var(--text-small);color:var(--text2);margin-top:var(--s2);max-width:26ch}

.impact__cols{display:grid;gap:var(--s7)}
@media (min-width:900px){.impact__cols{grid-template-columns:1fr 1fr;gap:var(--s8)}}

/* Tally — attendance encodes data. Each mark is a week trained. */
.tally{display:flex;flex-direction:column;gap:var(--s3)}
.tally__row{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.tally__label{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);min-width:92px;
}
.tally__marks{display:flex;gap:10px}
.tally__marks .on{stroke:var(--identity)}
.tally__marks .off{stroke:var(--line)}
.tally__note{font-size:var(--text-small);color:var(--text2);margin-top:var(--s4);max-width:46ch}

.money{width:100%;border-collapse:collapse;font-size:var(--text-small)}
.money caption{text-align:left;color:var(--muted);font-size:var(--text-small);padding-bottom:var(--s3)}
.money td,.money th{padding:var(--s3) 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
.money th{
  font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);width:60%;
}
.money td{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}

/* ── Donation ladder ─────────────────────────────────────── */
.ladder{display:flex;flex-direction:column;gap:var(--s3);margin-block:var(--s5)}
.rung{
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--s4);background:var(--surface);
  transition:border-color var(--dur-hover) var(--ease-out),
             transform var(--dur-hover) var(--ease-out);
}
@media (min-width:600px){.rung{border-radius:var(--radius-pill);padding:var(--s3) var(--s3) var(--s3) var(--s5);flex-wrap:nowrap}}
.rung:hover{transform:translateY(-2px)}
.rung--featured{
  border-color:var(--action);
  background:color-mix(in srgb,var(--action) 7%,var(--surface));
}
.rung__amount{
  font-family:var(--font-display);font-weight:700;font-size:var(--text-h3);
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;min-width:76px;
}
.rung__amount .per{font-family:var(--font-body);font-size:.68rem;font-weight:400;color:var(--muted)}
.rung__buys{flex:1;font-size:var(--text-small);color:var(--text2);min-width:180px}
.rung .btn{flex:none}
.featured-flag{
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--action);display:block;margin-bottom:3px;
}

/* ── Pull quote / the truth block ────────────────────────── */
.truth{
  border-left:3px solid var(--identity);
  padding:var(--s2) 0 var(--s2) var(--s5);
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.3rem,3.2vw,1.9rem);line-height:1.28;color:var(--ink);
  letter-spacing:-.015em;
}

/* ── Final CTA ───────────────────────────────────────────── */
.finale{text-align:left}
.finale h2{margin-bottom:var(--s4)}
.finale .ask-block{align-items:flex-start}

/* ── Footer ──────────────────────────────────────────────── */
.footer{background:var(--paper);color:var(--text2);padding-block:var(--s7)}
.footer__grid{display:grid;gap:var(--s6)}
@media (min-width:640px){.footer__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.footer__grid{grid-template-columns:1.5fr .7fr 1fr;gap:var(--s7)}}
.footer .brand{color:var(--ink);margin-bottom:var(--s4)}
.footer__links{display:flex;flex-direction:column;gap:var(--s2);font-size:var(--text-small)}
.footer__links a{color:var(--text2);text-decoration:none}
.footer__links a:hover{color:var(--identity);text-decoration:underline;text-underline-offset:3px}
.footer__base{
  margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);
}

/* ── Interior page hero ──────────────────────────────────── */
.page-hero{padding-block:var(--s8) var(--s7)}
@media (min-width:768px){.page-hero{padding-block:var(--s9) var(--s8)}}
.page-hero h1{font-size:var(--text-display);margin-bottom:var(--s5);max-width:16ch}
.page-hero .lede{max-width:52ch}

/* ── Origin story ────────────────────────────────────────── */
.story__year{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--identity);
  display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);
}
.story__year::after{content:"";flex:1;height:1px;background:var(--chalk);opacity:.7;max-width:120px}

/* ── Mission list — chalk tally bullets ──────────────────── */
.tick-list{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s5)}
.tick-list li{position:relative;padding-left:var(--s6);color:var(--text2)}
.tick-list li::before{
  content:"";position:absolute;left:0;top:.5em;width:14px;height:2px;
  background:var(--identity);border-radius:2px;
}

/* ── Numbered roadmap ────────────────────────────────────── */
.roadmap{counter-reset:step;display:grid;gap:var(--s4)}
@media (min-width:700px){.roadmap{grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s6)}}
.roadmap li{
  counter-increment:step;position:relative;padding-left:var(--s7);
  padding-block:var(--s3);border-top:1px solid var(--line);color:var(--text2);
  font-size:var(--text-small);
}
.roadmap li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:var(--s3);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--identity);font-variant-numeric:tabular-nums;
}

/* ── The founder ─────────────────────────────────────────── */
.founder{display:grid;gap:var(--s6);align-items:start}
@media (min-width:900px){.founder{grid-template-columns:320px 1fr;gap:var(--s8)}}
.founder h2{margin-bottom:var(--s4)}
.founder__name{
  font-family:var(--font-display);font-weight:700;font-size:var(--text-h3);
  color:var(--ink);line-height:1.1;
}
.founder__role{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-top:var(--s1);
}

/* Portrait frame. A consented photograph drops straight in; with
   none on file it falls back to the crest on chalk. */
.portrait{
  position:relative;aspect-ratio:4/5;width:100%;
  border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;
  background:
    repeating-linear-gradient(90deg,
      color-mix(in srgb,var(--identity) 10%,var(--panel)) 0 28px,
      var(--panel) 28px 56px);
  display:grid;place-items:center;box-shadow:var(--shadow-warm);
}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait .crest{color:var(--identity);opacity:.3;width:38%;height:auto}
.portrait::after{
  content:"";position:absolute;left:0;right:0;bottom:26%;height:1px;
  background:var(--chalk);opacity:.55;
}
/* With a real photograph in the frame, the chalk placeholder
   furniture gets out of its way. */
.portrait:has(img){background:var(--panel)}
.portrait:has(img)::after{display:none}
.portrait__caption{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-top:var(--s3);
}

/* Three things he has built, stated plainly. */
.founder__facts{display:grid;gap:var(--s5);margin-top:var(--s6)}
@media (min-width:600px){.founder__facts{grid-template-columns:repeat(3,1fr)}}
.founder__fact{border-top:1px solid var(--line);padding-top:var(--s3)}
.founder__fact b{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:var(--text-h3);color:var(--identity);line-height:1.1;
  margin-bottom:var(--s1);
}
.founder__fact span{font-size:var(--text-small);color:var(--text2)}

/* ── The letter ──────────────────────────────────────────── */
.letter{
  max-width:var(--reading-max);line-height:1.7;
  border-left:3px solid var(--identity);padding-left:var(--s5);
}
.letter p{margin-bottom:var(--s4)}
.letter .salutation{color:var(--ink);font-weight:500}
.letter .pull{
  font-family:var(--font-display);font-weight:600;color:var(--ink);
  font-size:clamp(1.2rem,2.6vw,1.5rem);line-height:1.3;letter-spacing:-.015em;
  margin-block:var(--s5);
}
.letter__sign{
  display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);
}
.letter__sign b{font-family:var(--font-display);font-weight:700;color:var(--ink)}
.letter__sign span{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);
}

/* ── Footer contact ──────────────────────────────────────── */
.footer__col h3{
  font-family:var(--font-mono);font-size:.66rem;font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  margin-bottom:var(--s3);
}
.footer__col p{font-size:var(--text-small);line-height:1.6}
.footer__col a{color:var(--text2)}
.footer__col a:hover{color:var(--identity)}

/* ── Project page: the funds ─────────────────────────────── */
.goal{display:flex;flex-wrap:wrap;gap:var(--s6) var(--s8);align-items:flex-end}
.goal__total{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(3rem,9vw,5rem);line-height:.95;letter-spacing:-.03em;
  color:var(--identity);font-variant-numeric:tabular-nums;
}
.goal__note{font-size:var(--text-small);color:var(--text2);max-width:38ch}

.funds{display:grid;gap:var(--s5);margin-top:var(--s7)}
@media (min-width:900px){.funds{grid-template-columns:repeat(2,1fr);gap:var(--s6)}}

.fund{
  display:flex;flex-direction:column;gap:var(--s4);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--s5);height:100%;
}
@media (min-width:768px){.fund{padding:var(--s6)}}
.fund__head{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.fund__letter{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--on-identity);background:var(--identity);
  border-radius:var(--radius-pill);padding:3px 10px;flex:none;
}
.fund__name{font-family:var(--font-display);font-weight:700;font-size:var(--text-h3);color:var(--ink);letter-spacing:-.01em}
.fund__amount{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.8rem,4vw,2.4rem);line-height:1;letter-spacing:-.025em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.fund__amount small{
  display:block;font-family:var(--font-mono);font-size:.6rem;font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:var(--s2);
}
.fund__what{font-size:var(--text-small);color:var(--text2)}

.lines{width:100%;border-collapse:collapse;font-size:var(--text-small)}
.lines caption{
  text-align:left;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding-bottom:var(--s2);border-bottom:1px solid var(--line);
}
.lines th,.lines td{padding:var(--s3) 0;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;font-weight:400}
.lines th{color:var(--ink);font-weight:500;padding-right:var(--s4)}
.lines td{color:var(--text2)}
.lines td.amt{
  text-align:right;white-space:nowrap;color:var(--ink);
  font-variant-numeric:tabular-nums;font-family:var(--font-mono);font-size:.8rem;
}
.lines tr:last-child th,.lines tr:last-child td{border-bottom:0}
.fund .btn{align-self:flex-start;margin-top:auto}

/* Share-of-the-ask bars.
   Four magnitude bars, not a stacked bar and not a pie: each fund
   sits on its own row against the surface, so no two fills ever have
   to be told apart by colour. One ink (identity), every row directly
   labelled with its dollar amount — the colour carries nothing the
   text doesn't already say. Rows run largest ask first. */
.split{display:flex;flex-direction:column;gap:var(--s4);max-width:640px}
.split__row{display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s4);align-items:baseline}
.split__name{font-size:var(--text-small);color:var(--ink)}
.split__val{
  font-family:var(--font-mono);font-size:.76rem;color:var(--text2);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.split__track{
  grid-column:1 / -1;height:10px;border-radius:5px;
  background:var(--panel);border:1px solid var(--line);overflow:hidden;
}
.split__bar{
  display:block;height:100%;background:var(--identity);
  border-radius:0 5px 5px 0;
}
.split__foot{font-size:var(--text-small);color:var(--muted);margin-top:var(--s4);max-width:52ch}

/* Donor tiers */
.tiers{display:grid;gap:var(--s3)}
@media (min-width:640px){.tiers{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.tiers{grid-template-columns:repeat(5,1fr)}}
.tier{
  display:flex;flex-direction:column;gap:var(--s2);
  border:1px solid var(--line);border-radius:var(--radius-md);
  padding:var(--s4);background:var(--surface);text-decoration:none;
  transition:border-color var(--dur-hover) var(--ease-out),
             transform var(--dur-hover) var(--ease-out);
}
.tier:hover{border-color:var(--action);transform:translateY(-2px)}
.tier b{
  font-family:var(--font-display);font-weight:700;font-size:var(--text-h3);
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.tier span{font-size:var(--text-small);color:var(--text2);line-height:1.45}

/* The honesty block — what the money is and isn't */
.honesty{display:grid;gap:var(--s5)}
@media (min-width:768px){.honesty{grid-template-columns:repeat(3,1fr);gap:var(--s6)}}
.honesty h3{font-size:var(--text-body-lg);margin-bottom:var(--s2)}
.honesty p{font-size:var(--text-small)}
.honesty__item{border-top:2px solid var(--identity);padding-top:var(--s4)}

/* Where the gift completes */
.handoff-card{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--s5);background:var(--surface);max-width:var(--reading-max);
}
@media (min-width:768px){.handoff-card{padding:var(--s6)}}

/* ── Story page / long-form ──────────────────────────────── */
.prose{max-width:var(--reading-max);line-height:1.7}
.prose h2{font-size:var(--text-h2);margin-top:var(--s7);margin-bottom:var(--s3)}
.prose h3{margin-top:var(--s5);margin-bottom:var(--s2)}
.prose p{margin-bottom:var(--s4)}
.prose ul{margin-bottom:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.prose li{position:relative;padding-left:var(--s5)}
.prose li::before{
  content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
  border-radius:50%;border:2px solid var(--identity);
}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:-9999px;top:0;background:var(--action);color:var(--on-action);
  padding:var(--s3) var(--s4);border-radius:var(--radius-pill);z-index:100;
}
.skip:focus{left:var(--s4);top:var(--s2)}

/* ── Motion (design-system §4) ───────────────────────────── */
/* Visible by default. The hidden starting state only applies while
   .js-anim is on <html> — set by the inline head script and dropped
   again if main.js never boots. Content is never invisible because a
   script failed to load. */
.reveal{opacity:1;transform:none}
.js-anim .reveal{opacity:0;transform:translateY(14px)}
.js-anim .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity var(--dur-enter) var(--ease-out),
             transform var(--dur-enter) var(--ease-out);
}
.card.is-in:hover,.rung:hover{box-shadow:var(--shadow-warm)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-warm-lift)}

/* The one signature moment: the chalk centre-circle draws in and
   the ball/sun rises. Hero only, once, within --dur-max. */
.crest--kickoff .crest__circle{
  stroke-dasharray:132;stroke-dashoffset:132;
  animation:crest-draw var(--dur-max) var(--ease-out) forwards;
}
.crest--kickoff .crest__line{opacity:0;animation:crest-fade var(--dur-enter) var(--ease-out) 320ms forwards}
.crest--kickoff .crest__ball{
  opacity:0;transform:translateY(6px);transform-origin:center;
  animation:crest-rise var(--dur-enter) var(--ease-out) 260ms forwards;
}
@keyframes crest-draw{to{stroke-dashoffset:0}}
@keyframes crest-fade{to{opacity:.4}}
@keyframes crest-rise{to{opacity:1;transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .js-anim .reveal{opacity:1;transform:none}
  .crest--kickoff .crest__circle{stroke-dashoffset:0}
  .crest--kickoff .crest__ball{opacity:1;transform:none}
  .crest--kickoff .crest__line{opacity:.4}
  .card:hover,.player:hover,.rung:hover,.btn:hover{transform:none}
}