@import url("tokens.css");

/* ═══════════════════════════════════════════════════════════════════════
   She Be The Change — production styles.
   Direction B ("Orbit"): immersive dark, papercraft earth, a narrative
   descent of bold callouts into crumbs, with a conversion point per beat.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #030C13; --bg-deep: #01060A; --surface: #08191F; --surface-2: #0C2229;
  --line: #16333C; --line-soft: #102730;
  --paper-sand: #C98A5B; --paper-gold: #D9A441; --paper-sage: #8FA87C;
  --measure: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--t-md);
  line-height: var(--lh-body); font-weight: 350;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
svg { display: block; }

.skip {
  position: absolute; left: -9999px; top: var(--s-3);
  background: var(--accent); color: var(--bg-deep);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); z-index: var(--z-toast);
  font-weight: 600; text-decoration: none;
}
.skip:focus { left: var(--s-4); }

/* ── primitives ───────────────────────────────────────────────────────── */

.eyebrow, .rail, .cap__k, .path__n, .pipe__n, .step__n, .sdg__n, .follow__lbl {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--tr-label); text-transform: uppercase; margin: 0;
}
.eyebrow { color: var(--accent); }
.rail { color: var(--muted); margin-bottom: var(--s-5); }

/* The big bold call-out that opens every beat. */
.callout {
  font-family: var(--font-display);
  font-size: clamp(38px, 1.9rem + 3.4vw, 76px);
  line-height: 1.07; letter-spacing: -.028em; font-weight: 600;
  margin: 0 0 var(--s-6); text-wrap: balance;
}
h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 2.1rem + 4.4vw, 88px);
  line-height: 1.06; letter-spacing: -.032em; font-weight: 600;
  margin: var(--s-6) 0 0; text-wrap: balance;
  text-shadow: 0 0 70px color-mix(in srgb, var(--accent-deep) 50%, transparent);
}

.lede {
  font-size: var(--t-lg); line-height: 1.5; color: var(--ink-2);
  max-width: 58ch; margin: var(--s-6) auto 0; font-weight: 300;
}
.lede--mid { margin-bottom: var(--s-8); }

/* The intriguing little step-down between beats. */
.crumb {
  margin: var(--s-8) 0 0; font-family: var(--font-mono);
  font-size: var(--t-sm); color: var(--muted); letter-spacing: .02em;
}
.crumb em { color: var(--accent); font-style: normal; }

.microcap {
  font-family: var(--font-mono); font-size: var(--t-xs); line-height: 1.5;
  color: var(--faint); letter-spacing: .02em; margin: var(--s-4) 0 0;
}
.microcap--wide { max-width: 72ch; margin: var(--s-6) auto 0; }
.legal { font-size: var(--t-xs); line-height: 1.55; color: var(--muted); margin: var(--s-4) 0 0; }
.legal strong { color: var(--ink-2); font-weight: 600; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-6);
  border: 1px solid var(--accent); border-radius: var(--r-sm);
  background: var(--accent); color: var(--bg-deep);
  font-family: var(--font-body); font-size: var(--t-sm); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform var(--dur-1) var(--ease), background-color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.btn:hover { transform: translateY(-2px); background: var(--ink); border-color: var(--ink); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.btn:disabled { opacity: .8; cursor: default; transform: none; }
/* Not transparent. In the hero this button sits straight on the papercraft
   globe, and the scrim is cut for the type block, not for a control this far
   down: --ink over a bare sand facet measured 4.03:1, under AA, on one of the
   three conversion actions. It carries its own plate now — the same treatment
   the claimstrip uses for the same reason. Over a flat surface the plate is
   indistinguishable from the page, so the other pages are unaffected. */
.btn--ghost {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  color: var(--ink); border-color: var(--line);
}
.btn--ghost:hover {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-color: var(--accent); color: var(--accent);
}
.btn--sm { min-height: 44px; padding: 0 var(--s-4); font-size: var(--t-xs); }
.btn--full { width: 100%; margin-top: auto; }

.row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); justify-content: center; }
.row--wrap { margin-top: var(--s-5); justify-content: flex-start; }

.chip {
  display: inline-flex; align-items: center; gap: var(--s-2); width: max-content;
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  padding: 4px var(--s-3); border-radius: var(--r-pill); border: 1px solid currentColor;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--draft { color: var(--draft); background: var(--draft-wash); }
.chip--review { color: var(--review); background: var(--review-wash); }
.chip--verified { color: var(--verified); background: var(--verified-wash); }

.ico {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--accent); background: var(--surface);
}
.ico svg { width: 20px; height: 20px; }
.ico--lg { width: 52px; height: 52px; border-radius: var(--r-md); }
.ico--lg svg { width: 26px; height: 26px; }

/* ── nav ──────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--s-6);
  max-width: var(--measure); margin: 0 auto; padding: var(--s-4) var(--gutter);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft);
}
.mark { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.mark img { width: 58px; height: 58px; border-radius: 50%; }
.mark__t { display: grid; }
.mark__t strong {
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg);
  letter-spacing: -.01em; line-height: 1.15;
}
.mark__t em {
  font-style: normal; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted);
}

/* In the nav, the logotype must never break mid-name. At --t-lg the name does
   not fit beside the 58px mark and the "Start a conversation" button on a
   375px screen, so it wrapped onto two lines on every phone — the first thing
   a visitor saw was the brand snapped in half. Holding the line means dropping
   a step on the smallest screens only; from 600px there is room for the full
   size again. The footer lockup is untouched, because it has the width to set
   the name properly.

   Re-measured after the rename to "She Be The Change" (P8), because the string
   grew by a word and this rule was tuned against the shorter one. At 375px the
   logotype ends at x=235 of 375 with zero nav or document overflow, and the
   nav button is unaffected — it is a fixed 113px and already set on two lines
   before the rename. The override is still load-bearing: restore --t-lg and
   allow wrapping and the name breaks to two lines again. */
.nav .mark__t strong { white-space: nowrap; font-size: var(--t-base); }
.nav nav { display: none; gap: var(--s-5); margin-left: auto; }
.nav nav a {
  font-size: var(--t-sm); color: var(--ink-2); text-decoration: none;
  padding: var(--s-2) 0; border-bottom: 1px solid transparent;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.nav nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* ── hero ─────────────────────────────────────────────────────────────── */

.hero {
  position: relative; isolation: isolate;
  min-height: auto; display: grid; align-content: center; justify-items: center;
  text-align: center; max-width: var(--measure); margin: 0 auto;
  padding: var(--s-7) var(--gutter) var(--s-8);
}
/* Stacking inside the hero, back to front: glow (-3), globe (-2), scrim (-1),
   type (auto). The scrim is not decoration — the papercraft facets are bright
   sand and gold, and the lede sits straight on top of them. */
#earth {
  position: absolute; inset: 0; width: 100%; height: 100dvh; max-height: 620px; z-index: -2;
  mask-image: radial-gradient(ellipse 72% 66% at 50% 48%, #000 46%, transparent 80%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -3;
  background: radial-gradient(ellipse 58% 44% at 50% 50%,
    color-mix(in srgb, var(--accent-deep) 22%, transparent), transparent 70%);
}
/* The scrim is sized to the TEXT BLOCK, and the text block is tallest on a
   phone: the headline wraps to three lines and the lede to five, so a scrim
   cut for the desktop lockup leaves the last lede lines sitting on bright
   clay. Base covers the mobile block; 768+ tightens it back to the desktop
   ellipse, where the type is wider and shorter. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 82% 44% at 50% 42%,
      color-mix(in srgb, var(--bg) 86%, transparent),
      color-mix(in srgb, var(--bg) 58%, transparent) 62%, transparent 86%),
    linear-gradient(180deg, var(--bg) 0%, transparent 16%, transparent 76%, var(--bg) 100%);
}
/* `ch` resolves against the element's OWN font-size. .hero__in has none of
   its own, so a ch cap here measured the 17px body text (~255px) and wrapped
   the 85px headline into six lines. The cap belongs on the h1, which does
   declare a font-size. */
.hero__in { max-width: min(100%, 940px); }
.hero h1 { max-width: 14ch; margin-inline: auto; }
.hero .lede { max-width: 50ch; }

.claimstrip {
  display: inline-flex; align-items: center; gap: var(--s-3);
  margin: var(--s-8) 0 0; padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(8px);
  font-size: var(--t-sm); color: var(--ink-2);
}
.claimstrip > span { flex: 1 1 auto; min-width: 0; }
.claimstrip b { color: var(--ink); font-weight: 600; }
.claimstrip .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--verified); flex: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--verified) 20%, transparent);
}
.scrollcue {
  position: absolute; bottom: var(--s-6); left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--faint); margin: 0;
}

/* Text-only hero variant (no papercraft earth canvas) — used by
   src/investors.html. Same scrim treatment, sized for a shorter block. */
.hero--noearth::before {
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%,
      color-mix(in srgb, var(--accent-deep) 16%, transparent), transparent 72%);
}

/* ── Hero legibility over the papercraft ball ──────────────────────────────
   The hero-wide scrim (.hero::before) is a radial centred at 50% 42%, which
   lands on the headline and has faded to transparent by the time the lede
   starts. The lede therefore read against whatever sphere happened to sit
   behind each word — "its source — from the day it is drafted" fell across the
   ball's brightest cluster and was close to illegible at 1280px.

   Fixing the text colour alone would not hold: the backdrop is a canvas whose
   composition changes with viewport and animation, so any fixed colour is only
   ever right for one frame. Give the text column its own scrim instead, so
   legibility stops depending on the art.

   Scoped with :has(#earth) so the text-only heroes (investors, support), which
   have no canvas behind them, are not dimmed for no reason. */
.hero:has(#earth) .hero__in { position: relative; isolation: isolate; }
.hero:has(#earth) .hero__in::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -7% -9% -5%;
  background: radial-gradient(ellipse 70% 60% at 50% 54%,
    color-mix(in srgb, var(--bg) 82%, transparent),
    color-mix(in srgb, var(--bg) 52%, transparent) 56%,
    transparent 80%);
}
/* Local insurance for the case the scrim cannot cover: a bright sphere landing
   directly under a glyph at a viewport the gradient was not tuned for. */
.hero:has(#earth) .lede {
  text-shadow: 0 1px 12px color-mix(in srgb, var(--bg) 72%, transparent);
}


/* ── disclosure ───────────────────────────────────────────────────────── */
/* A deliberately plain, bordered legal block — prominent by placement and
   border, not by shouting. Sits ahead of the investor intake form so the
   constraint is read before any personal data is entered. */
.disclosure {
  text-align: left; padding: var(--s-6);
  border: 1px solid var(--gold); border-radius: var(--r-md);
  background: var(--surface-2);
}
.disclosure p { margin: 0 0 var(--s-4); font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; }
.disclosure p:last-child { margin-bottom: 0; }
.disclosure strong { color: var(--ink); font-weight: 600; }
.disclosure p.disclosure__h {
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--gold); margin: var(--s-5) 0 var(--s-2);
}
.disclosure p.disclosure__h:first-child { margin-top: 0; }

/* ── bands ────────────────────────────────────────────────────────────── */

.band {
  max-width: var(--measure); margin: 0 auto;
  padding: var(--s-9) var(--gutter); text-align: center;
}
.band--dark {
  max-width: none;
  padding-inline: max(var(--gutter), calc(50vw - var(--measure) / 2));
  background: linear-gradient(180deg, transparent, var(--bg-deep) 18%, var(--bg-deep) 82%, transparent);
}

/* ── pillars ──────────────────────────────────────────────────────────── */

.pillars {
  list-style: none; margin: var(--s-8) 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6);
  text-align: left;
}
.pillars li { padding-top: var(--s-5); border-top: 1px solid var(--gold); }
.pillars h3 {
  font-family: var(--font-display); font-size: var(--t-lg); font-weight: 500;
  margin: var(--s-4) 0 var(--s-2); letter-spacing: -.015em;
}
.pillars p { margin: 0; font-size: var(--t-sm); color: var(--muted); }

/* ── ledger ───────────────────────────────────────────────────────────── */

.ledger {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5); text-align: left; align-items: start;
}
.states { display: grid; gap: var(--s-4); }
.state {
  padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.state:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.state h3 {
  font-family: var(--font-display); font-size: var(--t-lg); font-weight: 500;
  line-height: 1.25; letter-spacing: -.015em; margin: var(--s-4) 0 var(--s-3);
}
.state p { margin: 0 0 var(--s-3); font-size: var(--t-sm); color: var(--ink-2); }
.state .gate {
  margin: var(--s-4) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--muted); line-height: 1.5;
}
.state--draft { border-top: 2px solid var(--draft); }
.state--review { border-top: 2px solid var(--review); }
.state--verified { border-top: 2px solid var(--verified); }

.rec {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(10px); padding: var(--s-5);
  box-shadow: var(--e-3), 0 0 70px color-mix(in srgb, var(--accent-deep) 26%, transparent);
  position: static;
}
.rec__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.rec__id { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--faint); }
.rec__h {
  font-family: var(--font-display); font-size: var(--t-lg); font-weight: 500;
  line-height: 1.25; letter-spacing: -.015em; margin: var(--s-4) 0 var(--s-5);
}
.rec__meta { display: grid; gap: var(--s-3); margin: 0 0 var(--s-5); }
.rec__meta div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; align-items: baseline; }
.rec__meta dt {
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint);
}
.rec__meta dd { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.rec__src {
  font-size: var(--t-xs); color: var(--muted); margin: var(--s-5) 0 0;
  padding-top: var(--s-4); border-top: 1px solid var(--line-soft);
}
.rec__src strong { color: var(--ink-2); font-weight: 600; }
/* State legible before a single word is read — the whole point of a card
   people will screenshot for a board deck. */
.rec--draft { border-top: 3px solid var(--draft); }
.rec--reviewed { border-top: 3px solid var(--review); }
.rec--verified { border-top: 3px solid var(--verified); }
.chain { list-style: none; margin: 0; padding: 0; }
.chain li { position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-6); border-left: 1px solid var(--line); }
.chain li:first-child { padding-top: 0; }
.chain li:last-child { padding-bottom: 0; border-left-color: transparent; }
.chain li::before {
  content: ""; position: absolute; left: -5px; top: var(--s-4);
  width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line);
}
.chain li:first-child::before { top: 4px; }
.chain li.is-done::before { background: var(--verified); border-color: var(--verified); }
.chain span { display: block; font-size: var(--t-sm); font-weight: 500; }
.chain em {
  display: block; font-style: normal; font-family: var(--font-mono);
  font-size: var(--t-xs); color: var(--faint); margin-top: 2px;
}
/* On the full ledger page a record's chain may be only partly done (a
   draft record has only step 1, a reviewed one steps 1-2). Each done dot
   takes the colour of the state IT represents, not always --verified, so
   a draft record's timeline never flashes the verified colour. Higher
   specificity than the rule above (2 classes -> 3), so no !important. */
.chain li:nth-child(1).is-done::before { background: var(--draft); border-color: var(--draft); }
.chain li:nth-child(2).is-done::before { background: var(--review); border-color: var(--review); }
.chain li:nth-child(3).is-done::before { background: var(--verified); border-color: var(--verified); }
.chain li.is-pending em { color: var(--faint); font-style: italic; }

/* ── ledger (full page, src/ledger.html) ─────────────────────────────── */

.records {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5); text-align: left; margin-top: var(--s-8);
}
.ledger-empty {
  padding: var(--s-6); border: 1px dashed var(--line); border-radius: var(--r-md);
  color: var(--muted); font-size: var(--t-sm);
}

/* ── conversion strip ─────────────────────────────────────────────────── */

.strip {
  margin-top: var(--s-7); padding: var(--s-5) var(--s-6);
  border: 1px solid var(--accent-deep); border-radius: var(--r-md);
  background: var(--accent-wash);
  display: flex; flex-direction: column; align-items: stretch; justify-content: space-between;
  gap: var(--s-6); text-align: left;
}
.strip p { margin: 0; max-width: 54ch; color: var(--ink-2); font-size: var(--t-sm); }
.strip .btn { flex: none; }

/* ── roles ────────────────────────────────────────────────────────────── */

.roles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); text-align: left; }
.role {
  display: flex; flex-direction: column; padding: var(--s-6);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.role:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.role h3 {
  font-family: var(--font-display); font-size: var(--t-xl); font-weight: 500;
  letter-spacing: -.02em; margin: var(--s-5) 0 var(--s-3);
}
.role p { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.role .row { margin-top: auto; padding-top: var(--s-5); }

/* ── pipeline ─────────────────────────────────────────────────────────── */

.pipe {
  list-style: none; margin: 0; padding: 0; text-align: left;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3);
}
.pipe li {
  position: relative; padding: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.pipe li:not(:last-child)::after {
  content: "→"; position: absolute; right: calc(var(--s-3) * -1 - 4px); top: 50%;
  transform: translateY(-50%); color: var(--accent); font-size: 14px;
}
.pipe__n { color: var(--gold); }
.pipe h3 {
  font-family: var(--font-display); font-size: var(--t-md); font-weight: 500;
  margin: var(--s-3) 0 var(--s-2); letter-spacing: -.01em;
}
.pipe p { margin: 0; font-size: var(--t-xs); color: var(--muted); line-height: 1.5; }

/* ── the seventeen ────────────────────────────────────────────────────── */

.sdgs {
  list-style: none; margin: 0; padding: 0; text-align: left;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2);
}
.sdgs li:nth-last-child(-n+5) { grid-column: span 1; }
.sdg {
  display: grid; gap: var(--s-2); padding: var(--s-4);
  border: 1px solid var(--line); border-left: 3px solid var(--c);
  border-radius: var(--r-sm); background: var(--surface);
  transition: transform var(--dur-1) var(--ease), background-color var(--dur-2) var(--ease);
}
.sdg:hover { transform: translateY(-2px); background: var(--surface-2); }
.sdg__n { color: var(--c); }
.sdg__t { font-size: var(--t-xs); color: var(--ink-2); line-height: 1.35; }

/* ── pathways ─────────────────────────────────────────────────────────── */

.paths {
  list-style: none; margin: 0; padding: 0; text-align: left;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4);
}
.path {
  display: flex; flex-direction: column; padding: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.path:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.path__n { color: var(--faint); }
.path h3 {
  font-family: var(--font-display); font-size: var(--t-lg); font-weight: 500;
  letter-spacing: -.015em; margin: var(--s-3) 0 var(--s-2);
}
.path p { margin: 0 0 var(--s-5); font-size: var(--t-sm); color: var(--muted); }
.path__go {
  margin-top: auto; font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  color: var(--accent); text-decoration: none;
}
.path__go:hover { color: var(--ink); }

/* ── the loop ─────────────────────────────────────────────────────────── */

.loop {
  list-style: none; margin: 0; padding: 0; text-align: left;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2);
}
.step {
  padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface);
}
.step__n { color: var(--accent); }
.step h3 {
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 500;
  margin: var(--s-3) 0 var(--s-2);
}
.step p { margin: 0; font-size: var(--t-xs); color: var(--muted); line-height: 1.45; }
.loop__legend {
  flex-direction: column;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4);
  margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--faint);
}

/* ── programmes ───────────────────────────────────────────────────────── */

.progs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); text-align: left; }
.prog { padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.prog h3 {
  font-family: var(--font-display); font-size: var(--t-xl); font-weight: 500;
  letter-spacing: -.02em; margin: 0 0 var(--s-2);
}
.prog__sub { margin: 0 0 var(--s-5); font-size: var(--t-sm); color: var(--muted); }
.prog__nums {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4);
  margin: 0 0 var(--s-5); padding: var(--s-4) 0;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.prog__nums dt {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--faint); margin-bottom: var(--s-2);
}
.prog__nums dd {
  margin: 0; font-family: var(--font-display); font-size: var(--t-md); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.prog > p { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }

/* ── capital ──────────────────────────────────────────────────────────── */

.capital { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); text-align: left; }
.cap {
  display: flex; flex-direction: column; padding: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.cap--feature { border-color: var(--gold); background: var(--surface-2); }
.cap__k { color: var(--faint); margin-bottom: var(--s-3); }
.cap h3 {
  font-family: var(--font-display); font-size: var(--t-xl); font-weight: 500;
  letter-spacing: -.02em; margin: 0 0 var(--s-3);
}
.cap > p { margin: 0 0 var(--s-4); font-size: var(--t-sm); color: var(--ink-2); }
.cap .legal { margin-top: var(--s-4); }
.amts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-bottom: var(--s-4); }
.amts button {
  min-height: 44px; padding: 0 var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-sm);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: transparent; color: var(--ink-2); cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease);
}
.amts button:hover { border-color: var(--accent); color: var(--accent); }
.amts button[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }
.ticks { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-3); }
.ticks li { position: relative; padding-left: var(--s-5); font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 1px; background: var(--gold); }

/* ── capture form ─────────────────────────────────────────────────────── */

.cap2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); align-items: start; text-align: left; }
.cap2__copy p { color: var(--ink-2); max-width: 42ch; }
.cap2__copy .lede, .cap2__copy .callout { margin-left: 0; }
.cap2__alt { font-size: var(--t-sm); margin-top: var(--s-5); }
.cap2__alt a { color: var(--accent); text-underline-offset: 3px; }

.form { display: grid; gap: var(--s-4); }
.f2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.form label {
  display: grid; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--muted);
}
.form input[type="text"], .form input[type="email"], .form textarea {
  min-height: 48px; padding: var(--s-3) var(--s-4);
  font-family: var(--font-body); font-size: var(--t-sm);
  letter-spacing: normal; text-transform: none;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color var(--dur-1) var(--ease);
}
.form textarea { min-height: auto; resize: vertical; line-height: 1.5; }
.form :is(input, textarea):focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash);
}
.form .is-bad { border-color: var(--review); }

.interests {
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  padding: var(--s-5); margin: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3);
}
.interests.is-bad { border-color: var(--review); }
.interests legend {
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--muted); padding: 0 var(--s-2);
}
.interests label {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 44px; padding: 0 var(--s-3);
  border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer;
  font-family: var(--font-body); font-size: var(--t-sm); letter-spacing: normal;
  text-transform: none; color: var(--ink-2);
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.interests label:hover { background: var(--surface-2); }
.interests label.is-hot { border-color: var(--accent); background: var(--accent-wash); }
.interests input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }

/* ── share ────────────────────────────────────────────────────────────── */

.band--share { border-top: 1px solid var(--line-soft); }
.share { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.sbtn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: 48px; padding: 0 var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2);
  font-family: var(--font-body); font-size: var(--t-sm); font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: transform var(--dur-1) var(--ease), border-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.sbtn svg { width: 18px; height: 18px; fill: currentColor; }
.sbtn:hover { transform: translateY(-2px); color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
.sbtn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.follow { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line-soft); }
.follow__lbl { color: var(--faint); margin-bottom: var(--s-4); }

/* ── footer ───────────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--line); margin-top: var(--s-9); background: var(--bg-deep); }
.foot__in {
  max-width: var(--measure); margin: 0 auto; padding: var(--s-8) var(--gutter) var(--s-6);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6);
}
.foot__brand { display: flex; gap: var(--s-4); align-items: flex-start; }
.foot__brand img { width: 78px; height: 78px; border-radius: 50%; flex: none; }
.foot__h {
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--faint); margin: 0 0 var(--s-4);
}
.foot nav { display: grid; gap: var(--s-3); align-content: start; }
.foot nav a { font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; }
.foot nav a:hover { color: var(--accent); }
.foot__sm { font-size: var(--t-xs); color: var(--faint); line-height: 1.6; margin: var(--s-3) 0 0; }
.foot__sm strong { color: var(--ink-2); }
.foot__legal {
  max-width: var(--measure); margin: 0 auto;
  padding: var(--s-5) var(--gutter) var(--s-7); border-top: 1px solid var(--line-soft);
}
.tagpill {
  display: inline-block; margin: 0; padding: 4px var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--muted);
}

/* ── reveal ───────────────────────────────────────────────────────────── */

.rv { opacity: 0; transform: translateY(16px); transition: opacity 560ms var(--ease), transform 560ms var(--ease); }
.rv.in, .in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }


/* ── legal documents (terms.html, privacy.html) ─────────────────────────
   Long-form prose, so the constraint is the measure rather than a grid. The
   68ch of --measure-text is declared on .doc itself, which carries the body
   font-size: a ch resolves against the element's OWN font-size, so putting it
   on a container whose type is a different size would silently give a
   different measure than the one the token names.

   Mobile-first like everything else — this block is the phone layout, and the
   only thing the wider tiers change is the top padding, since a phone needs
   the header off the h1 far more than a desktop does. */
.doc {
  max-width: var(--measure-text);
  margin: 0 auto;
  padding: var(--s-7) var(--gutter) var(--s-8);
}
.doc h1 { margin: var(--s-2) 0 var(--s-4); }
.doc .lede { margin-bottom: var(--s-4); }
.doc section { margin-top: var(--s-7); }
.doc h2 {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: var(--lh-tight);
  color: var(--ink);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line-soft);
}
.doc p { color: var(--ink-2); margin-bottom: var(--s-3); }
.doc p:last-child { margin-bottom: 0; }
.doc strong { color: var(--ink); }
.doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.doc a:hover { color: var(--ink); }

.doc__meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  color: var(--muted);
}
/* The meta line's mailto sits alone at the end of its own line rather than
   inside a sentence of prose, so it gets a real 44px thumb target. The inline
   links inside .doc paragraphs deliberately do NOT: WCAG 2.5.8 exempts a
   target that is "in a sentence or block of text", and forcing 44px on an
   inline link would break the line box of every paragraph containing one. */
.doc__meta a {
  color: var(--muted);
  display: inline-flex; align-items: center; min-height: 44px;
}

/* Stacked on a phone, side by side once there is room. .btn already carries a
   44px min-height from the touch-target rule in the base, so these need no
   size handling of their own. */
.doc__nav {
  display: flex; flex-direction: column; gap: var(--s-2);
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

/* ═══ RESPONSIVE ═════════════════════════════════════════════════════════
   Mobile-first: every rule above this line is the phone layout. Each tier
   below only adds what the extra width earns. Tiers, and what actually
   changes at each:
     base    320-599   one column, stacked, nav collapsed
     600px   large phone / small tablet portrait — pairs start to fit
     768px   tablet portrait — the real two-up tier (iPad 768, Air 820)
     1024px  tablet landscape + small laptop — three-up, nav returns
     1280px  desktop — the wide grids (SDG 5-up, pipeline 7-up, 4-col footer)
   ═══════════════════════════════════════════════════════════════════════ */

/* Touch targets live in the BASE, not behind a query — that is what
   mobile-first means here. A 19px text link is a fine mouse target and a bad
   thumb one, and a 44px minimum costs a hover pointer nothing, so it simply
   never gets relaxed. The interest checkboxes stay 18px on purpose: their
   44px <label> is the hit area, which is what a finger actually lands on. */
.path__go, .cap2__alt a, .foot nav a, .foot__sm a, .nav .mark, .nav nav a {
  display: inline-flex; align-items: center; min-height: 44px;
}

@media (min-width: 600px) {
  .nav .mark__t strong { font-size: var(--t-lg); }

  .sdgs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 5 pipeline steps: 2-up strands one, so the last spans the row. */
  .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipe > :last-child { grid-column: 1 / -1; }
  /* 7 loop steps: same treatment at 2-up. */
  .loop > :last-child { grid-column: 1 / -1; }
  .interests { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rec__meta div { grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--s-3); }
  .sbtn { flex: 0 1 auto; }
  .records { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .doc { padding-top: var(--s-9); }
  .doc__nav { flex-direction: row; }

  .band { padding: var(--s-10) var(--gutter); }
  .hero { min-height: 92dvh; padding: var(--s-9) var(--gutter) var(--s-10); }
  #earth { height: 100%; max-height: none; }
  .hero::before {
    background:
      radial-gradient(ellipse 46% 30% at 50% 34%,
        color-mix(in srgb, var(--bg) 78%, transparent),
        color-mix(in srgb, var(--bg) 42%, transparent) 60%, transparent 82%),
      linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 74%, var(--bg) 100%);
  }

  .roles, .paths, .capital, .pillars, .progs, .f2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Odd counts must not strand a lone card in a 2-up grid. */
  .roles > :last-child, .pillars > :last-child, .capital > :last-child { grid-column: 1 / -1; }

  .sdgs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); }

  .strip { flex-direction: row; align-items: center; }
  .strip .btn { flex: none; width: auto; }
  .loop__legend { flex-direction: row; }
}

@media (min-width: 1024px) {
  .nav nav { display: flex; }
  .nav .btn--sm { margin-left: 0; }

  .roles, .paths, .capital, .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .roles > :last-child, .pillars > :last-child, .capital > :last-child { grid-column: auto; }

  .ledger { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .cap2 { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  /* 5 steps and 7 steps both resolve exactly at this width. */
  .pipe { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pipe > :last-child { grid-column: auto; }
  .pipe li::after { display: block; }
  .loop { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .loop > :last-child { grid-column: auto; }
  .sdgs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* Scoped to the landing-page teaser's #ledger section specifically —
     src/ledger.html reuses the same .rec card styling for a scrolling
     list of records, where sticking every card in place would break. */
  #ledger .rec { position: sticky; top: 96px; }
}

@media (min-width: 1280px) {
  .foot__in { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--s-7); }
}

/* ── the twelve doors (src/act.html) ──────────────────────────────────── */
/* A grid of its own rather than reusing .capital: .capital carries an
   orphan-fix (`> :last-child { grid-column: 1 / -1 }`) for its three cards,
   which at two columns would stretch door 12 across the row. Twelve resolves
   cleanly at 1, 2 and 3 columns, so no orphan rule is needed here — the count
   does the work the exception used to. */
.doors {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4);
  text-align: left; max-width: var(--measure); margin: 0 auto;
  padding: 0 var(--gutter) var(--s-8);
}
.door .chip, .fn .chip, .partner .chip {
  margin: 0 0 var(--s-4);
  /* .chip is width:max-content so the pill hugs short status words on the index
     and the ledger. Door status copy is sentence-length, so inside a ~355px card
     max-content overflows the cell (measured: a 361px chip in a 355px card, 7px
     of horizontal page scroll at 774px). Cap it here rather than dropping
     max-content from the shared class, which would reflow two other pages. */
  max-width: 100%;
  align-items: flex-start;
}
.door .chip::before, .fn .chip::before, .partner .chip::before { margin-top: 0.42em; flex: 0 0 auto; }

/* The h1's hard breaks are composed for the wide lockup. Below 720px "Only three
   of them" no longer fits and wraps to a one-word orphan, so the editorial breaks
   are dropped and the browser balances the lines instead. The space before each
   <br> lives in the markup because a hidden <br> would otherwise fuse "in.Only". */
#ways .callout { text-wrap: balance; }
@media (max-width: 719px) { .br-ed { display: none; } }
.door__ask { font-size: var(--t-sm); color: var(--ink-2); }
.door__ask-k {
  display: block; font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  color: var(--faint); margin-bottom: 4px;
}
/* Buttons align across cards whose copy runs to different lengths. */
.door .btn { margin-top: auto; }

.legend {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3);
  max-width: var(--measure-text); margin: var(--s-6) auto 0; text-align: left;
}
.legend dt {
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--accent);
}
.legend dd { margin: 0; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; }

/* The per-door fieldsets. All nine are in the DOM; js/act.js reveals one. */
.dfields { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.dfields[hidden] { display: none; }
.dfields legend {
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--accent); padding: 0; margin-bottom: var(--s-3);
}
.dfields select, .form select {
  width: 100%; min-height: 44px; padding: 0 var(--s-3);
  font-family: var(--font-body); font-size: var(--t-base);
  color: var(--ink); background: var(--bg-deep);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.dfields select:focus-visible, .form select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (min-width: 720px) {
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
}
@media (min-width: 1080px) {
  .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ── the organisation page ───────────────────────────────────────────────
   Same container convention as .doors — measure-bounded, gutter-padded — so a
   card grid on any page lines up with the bands above and below it. These sit
   outside their <section> on purpose: tools/check-claims.mjs splits the page on
   `<section`, and a generated card nested inside a claimed band would lend that
   band its text, turning an honest "vision" card into a laundered "verified"
   one. Flat siblings keep every claim attributable to exactly one section. */
.orgfacts, .fns, .partners {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4);
  text-align: left; max-width: var(--measure); margin: 0 auto;
  padding: 0 var(--gutter) var(--s-8);
}
.orgfact {
  padding: var(--s-5); border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface);
}
.orgfact__k {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--faint); margin: 0 0 var(--s-4);
}
.orgfact .ticks { margin-bottom: 0; }
/* "What it is not" reads as negation through a muted marker rather than a
   second colour — the gold dash is the site's affirmative tick. */
.ticks--neg li::before { background: var(--faint); }

.fn .btn, .partner .btn { margin-top: auto; }
.partner__consent {
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--faint); margin: var(--s-4) 0 0; line-height: 1.5;
}
/* The empty state is the whole point of the section, not a leftover cell. */
.empty {
  grid-column: 1 / -1; padding: var(--s-5);
  border: 1px dashed var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.empty p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.55; }

@media (min-width: 720px) {
  .orgfacts, .fns, .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .fns, .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}