@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%);
}

/* ── 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)); }
}