/* Fairness in Residency — warm editorial skin. Zero deps. OKLCH throughout.
   Tier 1 primitives (raw) -> Tier 2 aliases (intent, what components read) -> Tier 3 component.
   Values carried exactly from the approved gate slice (site-preview/slice.css). */
/* Self-hosted latin subsets (from Google Fonts css2 API, Chrome UA, 2026-09-30).
   Both families are variable files: one Fraunces file serves 600+700, one Source Sans 3 file serves 400+600+700+800. */
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/fraunces-opsz-wght-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/fraunces-opsz-wght-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/sourcesans3-wght-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/sourcesans3-wght-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/sourcesans3-wght-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/sourcesans3-wght-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
  /* Tier 1 — color primitives: one clay ramp + warm neutrals + amber accent */
  --clay-950: oklch(0.26 0.055 52);
  --clay-800: oklch(0.38 0.09 50);
  --clay-700: oklch(0.47 0.115 48);
  --clay-100: oklch(0.93 0.035 75);
  --canvas: oklch(0.957 0.018 88);
  --surface: oklch(0.993 0.006 92);
  --ink: oklch(0.27 0.025 65);
  /* ui-ux-pro-max: captions/notes ≥4.5:1 on cream (~7.5:1 at L=0.42) */
  --muted: oklch(0.42 0.032 55);
  --line: oklch(0.85 0.015 95);
  --amber: oklch(0.78 0.12 80);
  --cream: oklch(0.985 0.01 90);
  /* Tier 1 — type primitives: 2 families, modular steps */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;
  --text-xs: 0.85rem;
  --text-sm: 0.95rem;
  --text-base: 1.02rem;
  --text-lg: clamp(1.15rem, 2.4vw, 1.35rem);
  --text-xl: clamp(1.3rem, 3vw, 1.75rem);
  --text-2xl: clamp(1.55rem, 3.2vw, 2.15rem);
  --text-display: clamp(2.1rem, 4.8vw, 3.25rem);
  --text-quote: clamp(1.25rem, 3.2vw, 1.75rem);
  /* Tier 1 — radii + motion + depth */
  --r-2xs: 2px;
  --r-xs: 4px;
  --r-s: 8px;
  --r-m: 12px;
  /* One surface radius site-wide (cards, ledger, stories, hero panel). */
  --r-l: 12px;
  --r-pill: 999px;
  --dur-fast: 150ms;
  /* ui-ux-pro-max: hover/color transitions in the 150–250ms band */
  --dur-hover: 200ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;
  --dur-bar: 900ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --z-sticky: 30;
  --z-progress: 60;
  /* Tier 1 — spacing scale (8pt grid, ui-design foundations) + rhythm + depth */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-xs: var(--space-2);
  --space-sm: var(--space-4);
  --space-md: var(--space-6);
  --space-lg: var(--space-12);
  --space-xl: 96px;
  --section-gap: clamp(2.75rem, 5.5vw, 4.5rem);
  --page-pad-x: clamp(1.25rem, 2.2vw, 2rem);
  --shell-max: 80rem;
  --col-measure: 70ch;
  --shadow-lift: 0 10px 30px oklch(0.26 0.055 52 / 0.14);
  /* Atmosphere: warm paper wash (not flat single fill) */
  --canvas-wash: oklch(0.97 0.022 82);
  /* Tier 2 — semantic aliases (components read these, never Tier 1) */
  --bg-base: var(--canvas);
  --bg-raised: var(--surface);
  --bg-tint: var(--clay-100);
  --fg-default: var(--ink);
  --fg-muted: var(--muted);
  --fg-figure: var(--clay-800);
  --brand: var(--clay-700);
  --brand-deep: var(--clay-800);
  --chrome: var(--clay-950);
  --on-chrome: var(--cream);
  --accent-warm: var(--amber);
  --border: var(--line);
  --focus: var(--clay-700);
  --focus-on-dark: var(--amber);
  /* Tier 3 — component tokens */
  --btn-bg: var(--brand);
  --btn-fg: var(--on-chrome);
  --crisis-bg: var(--accent-warm);
  --crisis-fg: var(--chrome);
  --bar-track: var(--bg-tint);
  --bar-fill: var(--brand-deep);
  --bar-fill-hot: var(--brand);
}
*{box-sizing:border-box}
/* `hidden` must win over component display rules (e.g. .cta-row{display:flex}). */
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  /* Keep in-page targets clear of sticky masthead / crisis pin (WCAG focus not obscured). */
  scroll-padding-top:5.5rem;
  scrollbar-color:var(--brand) var(--bg-tint);caret-color:var(--brand)}
body{margin:0;color:var(--fg-default);min-height:100vh;display:flex;flex-direction:column;
  font-family:var(--font-body);font-size:1.1rem;line-height:1.65;
  font-kerning:normal;font-optical-sizing:auto;
  caret-color:var(--brand);
  background-color:var(--bg-base);
  background-image:
    radial-gradient(120% 70% at 100% -10%, var(--canvas-wash), transparent 55%),
    radial-gradient(90% 50% at 0% 100%, var(--bg-tint), transparent 50%),
    linear-gradient(180deg, var(--bg-base), var(--bg-base));
  background-attachment:fixed}
::selection{background:var(--bg-tint);color:var(--chrome)}
img{max-width:100%;height:auto}
/* Short pages keep the footer at the bottom of the window. */
body > main{flex:1 0 auto}
h1,h2{font-family:var(--font-display);font-weight:600;line-height:1.12;
  letter-spacing:-0.01em;text-wrap:balance;margin:0 0 0.6em}
h1{font-size:var(--text-display)}
h2{font-size:var(--text-2xl)}
h3{font-family:var(--font-body);font-weight:700;font-size:var(--text-base);
  line-height:1.4;letter-spacing:0;margin:0 0 0.6em;text-wrap:balance}
/* Section open: short clay accent + air (not full-width broadsheet rules).
   ui-ux-pro-max Swiss hierarchy: slightly longer/thicker mark so sections read. */
main h2{border-top:none;padding-top:0.35rem;
  background:linear-gradient(var(--brand),var(--brand)) no-repeat 0 0 / 4rem 4px;
  padding-top:calc(0.6rem + 4px)}
main :is(.band-clay,.media-band,.story-feature,.testimony,.stakes-band,.action-band,.hero-issue,.hero-simple,.chart-prose) h2,
main .proof-split h2,main .chart-section h2{background:none;padding-top:0}
main :is(.band-clay,.media-band,.story-feature,.testimony) h2{border-top:none}
p{margin:0 0 1em;text-wrap:pretty}
/* Measure lives inside a filled column — not a floating island in the viewport. */
.prose p,.manifesto p,.proposal-list p,.prose .src{max-width:var(--col-measure)}
.media-band .prose p,.band-clay .prose p{max-width:none}
/* Dark-Type Compensation Rule: light-on-clay reads lighter; give it air. */
.band-clay p,.media-band p,.band-clay li,.media-band li,.story-feature p,.story-feature li,footer p{
  line-height:1.71;letter-spacing:0.01em}
a{color:var(--brand);text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color var(--dur-hover) var(--ease-out)}
a:hover{color:var(--brand-deep);text-decoration-thickness:2px}
section[id],article[id]{scroll-margin-top:5.5rem}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-2xs)}
:is(.masthead,.band-clay,.media-band,.story-feature,.testimony,footer) :focus-visible{outline-color:var(--focus-on-dark)}
.num,.ledger-val,td,.bar-val{font-variant-numeric:tabular-nums}
/* Hybrid shell: content + chrome inners share ~80rem; heroes/media bands bleed. */
.shell,.wrap{max-width:var(--shell-max);width:100%;margin:0 auto;
  padding-left:calc(var(--page-pad-x) + env(safe-area-inset-left, 0px));
  padding-right:calc(var(--page-pad-x) + env(safe-area-inset-right, 0px))}
.hero>*,.band-grid>*,.story-duo>*,.foot-grid>*,.ledger-row>*,.chart-section>*,.proof-split>*{min-width:0}
.prose{max-width:none;width:100%}
.skip{position:absolute;left:-999px;top:0;background:var(--chrome);color:var(--on-chrome);
  padding:0.7rem 1.2rem;z-index:99;text-decoration:none;font-weight:700}
/* Prefer :focus-visible so mouse clicks do not flash the skip chip */
.skip:focus,.skip:focus-visible{left:0;outline:3px solid var(--focus-on-dark);outline-offset:2px}

/* In-page jump nav (HRW-style) — sticky tool rail under masthead */
/* Bleeds to the viewport edges (box-shadow + clip) so it never looks cut off at the shell. */
.issue-nav{position:sticky;top:0;z-index:calc(var(--z-sticky) - 1);
  background:color-mix(in oklch, var(--bg-base) 94%, var(--bg-tint));
  box-shadow:0 0 0 100vmax color-mix(in oklch, var(--bg-base) 94%, var(--bg-tint)),
    0 1px 0 100vmax var(--border);
  clip-path:inset(0 -100vmax -1px 0);
  margin:0 0 var(--space-8);padding:0.35rem 0}
.issue-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:0 var(--space-6);font-size:var(--text-base);font-weight:700}
.issue-nav a{color:var(--fg-muted);text-decoration:none;min-height:44px;
  display:inline-flex;align-items:center;border-bottom:3px solid transparent;
  cursor:pointer;transition:color var(--dur-hover) var(--ease-out),border-color var(--dur-hover) var(--ease-out)}
.issue-nav a:hover,.issue-nav a:focus-visible{color:var(--fg-default);border-bottom-color:var(--border)}
.issue-nav a[aria-current="true"]{color:var(--brand);border-bottom-color:var(--brand)}
@media(max-width:54.99rem){
  .issue-nav ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:0 var(--space-5)}
  .issue-nav ul::-webkit-scrollbar{display:none}
  .issue-nav a{white-space:nowrap}
}

/* Masthead — desktop inline nav; mobile details drawer */
.masthead{background:var(--chrome);color:var(--on-chrome);
  border-bottom:2px solid var(--accent-warm)}
.masthead-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:0.5rem 1.5rem;padding-top:0.8rem;padding-bottom:0.8rem}
.wordmark{font-family:var(--font-display);font-weight:600;font-size:1.32rem;
  letter-spacing:-0.01em;display:inline-flex;align-items:center;gap:0.65rem;
  color:var(--on-chrome);text-decoration:none;line-height:1.2;overflow-wrap:break-word;
  min-height:44px;min-width:0}
.wordmark .mark{display:inline-grid;place-items:center;flex:0 0 auto;
  width:1.9rem;height:1.9rem;border-radius:var(--r-xs);background:var(--accent-warm);
  color:var(--chrome);font-weight:700;font-size:1.1rem;line-height:1}
.wordmark > span:not(.mark){color:var(--accent-warm)}
.wordmark:hover{color:var(--accent-warm)}
.wordmark:hover .mark{background:var(--on-chrome);color:var(--chrome)}
/* Mobile: allow flex shrink. Desktop overrides min-width so IA cannot clip. */
.nav-more{margin:0;min-width:0}
.nav-more > summary{list-style:none;cursor:pointer;display:none;
  align-items:center;min-height:44px;padding:0.35rem 0.9rem;border:2px solid var(--accent-warm);
  border-radius:var(--r-pill);color:var(--on-chrome);font-weight:700;font-size:0.95rem}
.nav-more > summary::-webkit-details-marker{display:none}
.nav-more > summary:hover{background:var(--brand-deep)}
.masthead nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:var(--space-2) 0.85rem;font-size:1rem;font-weight:600;letter-spacing:0.015em}
.masthead nav a{color:var(--on-chrome);text-decoration:none;padding:0.5rem 0.1rem;min-height:44px;
  display:inline-flex;align-items:center;border-bottom:3px solid transparent;cursor:pointer;
  transition:color var(--dur-hover) var(--ease-out),border-color var(--dur-hover) var(--ease-out)}
.masthead nav a:hover{color:var(--accent-warm)}
.masthead nav a[aria-current="page"]{border-bottom-color:var(--accent-warm)}
/* Join is the one filled control in the masthead (it reads "Account" once signed in). */
.masthead nav a[data-join]{background:var(--accent-warm);color:var(--chrome);
  border-radius:var(--r-pill);padding:0.5rem 1.1rem;border-bottom-color:transparent;
  transition:background-color var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out)}
.masthead nav a[data-join]:hover{background:var(--on-chrome);color:var(--chrome)}
.masthead nav a[data-join][aria-current="page"]{background:var(--on-chrome)}
@media(max-width:54.99rem){
  /* Brand + Menu share row 1; drawer nav alone takes row 2.
     display:contents is mobile-only — desktop keeps a real <details> box
     (contents broke hit-testing there). */
  .masthead-in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:1rem;row-gap:0.65rem}
  .nav-more{display:contents}
  .nav-more > summary{display:inline-flex;grid-column:2;grid-row:1;justify-self:end}
  .nav-more nav{display:none;grid-column:1 / -1;grid-row:2;width:100%;
    padding-top:0.55rem;border-top:1px solid color-mix(in oklch, var(--on-chrome) 25%, transparent)}
  .nav-more[open] nav{display:block}
  .nav-more[open] nav ul{flex-direction:column;gap:0.15rem}
  .nav-more[open] nav a{width:100%}
}
/* Desktop: primary destinations always visible. Keep <details> as a real
   flex item (not display:contents — closed details then fail hit-testing).
   JS sets [open] at ≥55rem so the band expands when links wrap.
   Wrap before clipping — never min-width:0 here. */
@media(min-width:55rem){
  .nav-more{
    min-width:min-content;
    flex:1 1 auto;
    max-width:100%;
  }
  .nav-more > summary{display:none}
  .nav-more nav{display:block !important;width:100%}
  .masthead nav ul{justify-content:flex-end}
}

/* Hero */
.hero{display:grid;gap:var(--space-8);padding:clamp(2rem,5vw,3.5rem) 0}
/* Inner-page hero-issue: stacked claim → lede → CTAs (no hollow right rail). */
.hero-issue,.hero-simple{display:grid;gap:var(--space-5);padding:clamp(2rem,4.5vw,3rem) 0 var(--space-4);
  grid-template-columns:1fr;max-width:48rem}
.hero-issue h1,.hero-simple h1{margin-bottom:0;max-width:none;
  font-size:var(--text-display);line-height:1.1}
.hero-issue .lede,.hero-simple .lede{max-width:var(--col-measure);margin-bottom:0}
.hero-issue .hero-cta,.hero-simple .hero-cta{margin-top:var(--space-5);display:flex;flex-wrap:wrap;
  /* Visible CTA air + ≥8px touch spacing (ui-ux-pro-max) */
  align-items:center;gap:var(--space-4) var(--space-6)}
@media(min-width:55rem){.hero:not(.hero-bleed):not(.hero-simple):not(.hero-issue){grid-template-columns:1.05fr 0.95fr;align-items:center}}
.brand-mark{font-family:var(--font-display);font-weight:600;font-size:clamp(1.55rem,3.4vw,2.15rem);
  letter-spacing:-0.01em;line-height:1.15;color:var(--fg-default);margin:0 0 var(--space-4);
  text-wrap:balance}
.brand-mark span{color:var(--brand)}
.kicker{font-size:var(--text-xs);font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--brand);margin:0 0 1rem;
  display:flex;align-items:center;gap:0.8rem}
.kicker::after{content:"";height:4px;width:5.5rem;background:var(--brand)}
/* Homepage photo hero: committed tint panel (live variant B, 2026-09-30). */
.hero:not(.hero-simple):not(.hero-issue):not(.hero-bleed){background:var(--bg-tint);border-radius:var(--r-l);
  border:1px solid var(--border);
  padding:clamp(1.6rem,4vw,2.8rem)}
/* Brand-led full-bleed hero: edge-to-edge photo plane + copy column. */
.hero-bleed{gap:0;padding:0;margin:0;width:100%;max-width:none;
  background:var(--bg-tint);border:0;border-radius:0;border-bottom:1px solid var(--border);
  grid-template-columns:1fr;overflow:hidden}
@media(min-width:55rem){
  .hero-bleed{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;min-height:min(72vh,40rem)}
}
.hero-bleed .hero-copy{padding:clamp(1.75rem,3.5vw,3rem);
  padding-left:max(var(--page-pad-x), calc((100vw - var(--shell-max)) / 2 + var(--page-pad-x)));
  display:flex;flex-direction:column;justify-content:center;max-width:none}
.hero-bleed .brand-mark{font-size:clamp(2.15rem,5.2vw,3.35rem);margin-bottom:var(--space-4);
  color:var(--chrome)}
.hero-bleed .hero-title{margin-bottom:var(--space-3);
  font-size:clamp(1.7rem,3.6vw,2.55rem);line-height:1.18;font-weight:600;max-width:var(--col-measure)}
.hero-bleed .lede{margin-bottom:0;max-width:var(--col-measure)}
.lede{font-size:var(--text-lg);line-height:1.55;text-wrap:pretty;max-width:var(--col-measure)}
.hero-cta{margin-top:var(--space-8);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6)}
.hero-cta .textlink{font-weight:700}
/* Copy is secondary — never filled primary in heroes */
.hero-cta .btn.copy,.btn.copy{margin-left:0;background:transparent;color:var(--brand);border-color:var(--brand)}
.hero-cta .btn.copy:hover,.btn.copy:hover{background:var(--brand);border-color:var(--brand);color:var(--on-chrome)}
.hero-cta .btn.copy.copied,.btn.copy.copied{background:var(--brand-deep);border-color:var(--brand-deep);color:var(--on-chrome)}
.band-clay .copy-on-dark{margin-left:0}
.hero-photo,.band-photo{margin:0}
/* One warm treatment for every photograph so mismatched sources read as one set. */
.media-plane img,.hero-photo img,.band-photo img{filter:sepia(0.2) saturate(0.82) contrast(1.02)}
/* Media planes: square, full column — not rounded cards */
.media-plane{margin:var(--section-gap) 0;width:100%}
.media-plane img,.shell .media-plane img{display:block;width:100%;height:auto;border-radius:0;
  border:0;aspect-ratio:21/9;object-fit:cover;background:var(--bg-tint)}
main>.wrap>figure.hero-photo,main>.shell>figure.hero-photo{margin-bottom:var(--section-gap)}
.hero-stat{margin:1.5rem 0 0;padding-top:1rem;border-top:3px solid var(--fg-default);
  font-size:var(--text-base);max-width:none}
.hero-stat-fig{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);
  color:var(--fg-figure);font-variant-numeric:tabular-nums;white-space:nowrap}
.hero-photo img,.band-photo img{display:block;width:100%;height:auto;border-radius:0;
  aspect-ratio:4/3;object-fit:cover;background:var(--bg-tint)}
.hero-photo img{border:0}
.shell-split .hero-photo img{border-radius:0}
/* Bleed photo overrides must follow base .hero-photo img rules. */
.hero-bleed .hero-photo{margin:0;height:100%;min-height:18rem;border-radius:0}
.hero-bleed .hero-photo img{border:0;border-radius:0;width:100%;height:100%;min-height:18rem;
  aspect-ratio:auto;object-fit:cover}
@media(min-width:55rem){.hero-bleed .hero-photo,.hero-bleed .hero-photo img{min-height:100%}}
/* proof-split (alias chart-section): Amnesty 50/50 — figure left, prose right. */
.chart{margin:0;background:transparent;padding:0}
.chart svg{display:block;width:100%;height:auto}
.chart-wide{max-width:none;margin:0;min-width:0}
/* Claim first, evidence panel below: the claim and its cite read before the figure,
   and the panel spans the column so no half of a section is left empty. */
.proof-split,.chart-section{display:grid;gap:var(--space-5);margin:var(--section-gap) 0;
  grid-template-columns:minmax(0,1fr)}
.proof-split .chart-prose,.chart-section .chart-prose{order:-1}
.chart-prose{min-width:0;display:flex;flex-direction:column;gap:var(--space-2);max-width:var(--col-measure)}
.chart-prose h2{margin:0}
.chart-prose .caption{margin:0;max-width:var(--col-measure);font-size:var(--text-base);color:var(--fg-default)}
.chart-prose .src{margin:0;max-width:var(--col-measure)}
.chart-prose .copy{align-self:flex-start;margin-top:calc(-1 * var(--space-2))}
.proof-split .chart-wide,.chart-section .chart-wide{max-width:none;width:100%}
/* First proof section breathes under a full-bleed hero. */
.hero-bleed + .shell > .proof-split:first-child{margin-top:var(--space-16)}
.prose{width:100%}
.caption{font-size:var(--text-sm);color:var(--fg-muted);max-width:var(--col-measure);
  margin:0.35rem 0 0.55rem;text-wrap:pretty}
.proof-split .src,.chart-section .src{margin-top:0}

/* Designed figure object: lead numeral + compare + thin bar (replaces SVG soup) */
/* The figure IS the card. Two columns on desktop: the punch (label, numeral, bar)
   left, the comparison right, divided by one hairline. Data table sits behind a
   disclosure so the same numbers are not shown twice. */
.fig{margin:0;min-width:0;background:var(--bg-raised);border:1px solid var(--border);
  border-radius:var(--r-m);padding:clamp(1.25rem,3vw,2rem);display:grid;gap:var(--space-6)}
.fig-main,.fig-detail{min-width:0}
.fig-detail{display:flex;flex-direction:column;gap:var(--space-4);
  border-top:1px solid var(--border);padding-top:var(--space-5)}
.fig-detail .fig-track{margin-bottom:0}
@media(min-width:55rem){
  .fig{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:0;row-gap:var(--space-5);align-items:stretch}
  .fig-main{padding-right:var(--space-10);align-self:center}
  .fig-detail{border-top:0;padding-top:0;border-left:1px solid var(--border);padding-left:var(--space-10);
    justify-content:center}
  .fig > .fig-main:not(:has(~ .fig-detail)){grid-column:1 / -1;padding-right:0}
}
.fig-data{grid-column:1 / -1;border-top:1px solid var(--border);padding-top:var(--space-1)}
.fig-data summary{cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-2);
  min-height:44px;font-size:var(--text-sm);font-weight:700;color:var(--brand);list-style:none;
  transition:color var(--dur-hover) var(--ease-out)}
.fig-data summary::-webkit-details-marker{display:none}
.fig-data summary::before{content:"+";display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;
  border:1.5px solid currentColor;border-radius:var(--r-pill);font-size:0.95rem;line-height:1}
.fig-data[open] summary::before{content:"\2212"}
.fig-data summary:hover{color:var(--brand-deep)}
.fig-data .fig-table{margin-top:var(--space-2)}
/* Label, not an eyebrow: sentence case, names the number under it. */
.fig-kicker{margin:0 0 var(--space-2);font-size:var(--text-sm);font-weight:700;
  letter-spacing:0;color:var(--brand)}
.fig-lead{margin:0 0 var(--space-4);font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.75rem,6vw,4rem);line-height:1;color:var(--fg-figure);
  font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.fig-unit{font-size:0.42em;font-weight:600;margin-left:0.15em;letter-spacing:0;
  color:var(--fg-default)}
.fig-track{height:0.75rem;background:var(--bar-track);border-radius:var(--r-pill);
  overflow:hidden;margin:0 0 var(--space-3)}
/* Darker figure bars (kept after Phase C review — Pay / Family / Mental Health):
   both punch and compare rows use deep clay, not the lighter brand-hot fill. */
.fig-track .bar-fill{display:block;height:100%;width:var(--w,100%);background:var(--bar-fill);
  transform-origin:left center}
.fig-track-soft .bar-fill{background:var(--bar-fill)}
.fig-compare{margin:0 0 0.45rem;font-size:var(--text-base);color:var(--fg-default);line-height:1.4}
.fig-compare strong{font-variant-numeric:tabular-nums;color:var(--fg-figure)}
.fig-note{margin:var(--space-3) 0 0;font-size:var(--text-sm);color:var(--fg-muted)}
.fig-rows{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
.fig-rows li{margin:0;min-width:0}
.fig-row-head{display:flex;justify-content:space-between;align-items:baseline;gap:0.75rem;
  margin-bottom:0.35rem}
.fig-row-label{font-size:var(--text-sm);font-weight:700;color:var(--fg-default)}
.fig-row-val{font-family:var(--font-display);font-weight:600;font-size:clamp(1.35rem,2.4vw,1.7rem);
  color:var(--fg-figure);font-variant-numeric:tabular-nums;white-space:nowrap}
.fig-rows .fig-track{margin-bottom:0}

/* Significant proof object — Warm Ledger stipend slip (ui-ux-pro-max Trust & Authority) */
/* .ledger-panel is now the base .fig surface; class kept on pages as a no-op marker. */
.ledger-panel{margin:0}

/* stakes-band: designed climax — kicker + lead numeral + short note */
.stakes-band{margin:var(--section-gap) 0;padding:clamp(1.75rem,4vw,2.75rem) var(--page-pad-x);
  margin-left:calc(-1 * var(--page-pad-x));margin-right:calc(-1 * var(--page-pad-x));
  border-top:3px solid var(--chrome);border-bottom:1px solid var(--border);
  background:color-mix(in oklch, var(--bg-tint) 55%, var(--bg-base))}
.stakes-band h2{border-top:none;padding-top:0;margin:0 0 var(--space-6);background:none;
  font-size:clamp(1.7rem,3.5vw,2.35rem)}
.stakes-band ol{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-6)}
@media(min-width:55rem){
  .stakes-band ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--space-8);
    align-items:stretch}
}
.stakes-band li{padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:0.35rem;
  padding-top:var(--space-4);border-top:1px solid var(--border)}
.stakes-kicker{margin:0;font-size:var(--text-base);font-weight:700;color:var(--brand)}
.stakes-stat{margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.1rem,4.5vw,3rem);line-height:1.05;color:var(--fg-figure);
  font-variant-numeric:tabular-nums}
.stakes-stat sup.cite{font-size:0.35em;vertical-align:super}
.stakes-note{margin:0;font-size:var(--text-base);max-width:none;line-height:1.5;color:var(--fg-default)}
.stakes-band .stakes-more{margin:var(--space-6) 0 0;font-weight:700}

/* action-band: one primary CTA (Amnesty evergreen rule) */
.action-band{margin:var(--section-gap) 0;padding:clamp(1.5rem,4vw,2.25rem) 0;
  border-top:3px solid var(--fg-default);
  display:grid;gap:var(--space-4);align-items:center}
@media(min-width:55rem){
  .action-band{grid-template-columns:minmax(0,1.4fr) minmax(12rem,0.7fr);gap:var(--space-8)}
  .action-band .cta-row{justify-content:flex-end;margin:0;align-self:center}
}
.action-band h2{border-top:none;padding-top:0;margin:0 0 0.35em}
.action-band .prose p{margin-bottom:0;max-width:var(--col-measure)}

/* paired-rec: stacked claim → prose → copy (no hollow right rail) */
/* Recommendation card: title left (stays in view while the long ask scrolls), ask + proof right. */
.paired-rec{display:grid;gap:var(--space-3) var(--space-12);margin:var(--space-6) 0;align-items:start;
  padding:clamp(1.5rem,3.5vw,2.25rem);background:var(--bg-raised);border:1px solid var(--border);
  border-radius:var(--r-m)}
.paired-rec > h2{margin:0;font-size:var(--text-xl);background:none;padding-top:0}
.paired-rec .prose p{max-width:var(--col-measure)}
.paired-rec .rec-action{margin:calc(-1 * var(--space-3)) 0 0}
.paired-rec .calc{margin:var(--space-2) 0 0}
@media(min-width:55rem){
  .paired-rec{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .paired-rec > h2{grid-column:1;grid-row:1 / span 4;position:sticky;top:6rem}
  .paired-rec > :not(h2){grid-column:2}
}
.paired-rec .rec-action .btn,.paired-rec .rec-action .copy{margin-left:0}
.issue-nav + .paired-rec{margin-top:var(--space-6)}
/* Three intentional motions: hero rise, chart bar grow, stakes/action fade-up.
   Content visible by default; .enter is added by JS only when motion is OK. */
@media(prefers-reduced-motion:no-preference){
  .hero-title.enter{animation:hero-rise var(--dur-slow) var(--ease-out-expo) both}
  .hero-bleed .brand-mark.enter{animation:hero-rise var(--dur-slow) var(--ease-out-expo) both}
  .hero-bleed .hero-copy .lede.enter{animation:fade-up var(--dur-base) var(--ease-out) 120ms both}
  .hero-bleed .hero-cta.enter{animation:fade-up var(--dur-base) var(--ease-out) 200ms both}
  .stakes-band.enter,.action-band.enter{animation:fade-up var(--dur-slow) var(--ease-out) both}
  .proof-split.enter .fig-track .bar-fill,
  .chart-section.enter .fig-track .bar-fill{
    /* bar grow handled by JS scaleX on .bar-fill */}
  @keyframes hero-rise{
    from{transform:translateY(0.55em);clip-path:inset(0 0 100% 0)}
    to{transform:translateY(0);clip-path:inset(0 0 0 0)}
  }
  @keyframes fade-up{
    from{opacity:0;transform:translateY(0.6rem)}
    to{opacity:1;transform:translateY(0)}
  }
  @keyframes chart-bar{
    from{transform:scaleX(0)}
    to{transform:scaleX(1)}
  }
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:0.7rem 1.7rem;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;
  font-weight:700;font-size:var(--text-base);text-decoration:none;border:2px solid var(--btn-bg);
  transition:color var(--dur-hover) var(--ease-out),background-color var(--dur-hover) var(--ease-out),border-color var(--dur-hover) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:var(--btn-fg)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn-ghost:hover{background:var(--brand);border-color:var(--brand);color:var(--on-chrome)}
.copy{font-family:var(--font-body);font-size:var(--text-xs);font-weight:700;
  border:1.5px solid var(--brand);background:transparent;color:var(--brand);
  border-radius:var(--r-pill);padding:0.45rem 0.9rem;min-height:44px;min-width:44px;cursor:pointer;
  margin-left:0.7rem;vertical-align:middle;
  transition:color var(--dur-hover) var(--ease-out),background-color var(--dur-hover) var(--ease-out),border-color var(--dur-hover) var(--ease-out)}
.copy:hover{background:var(--brand);color:var(--on-chrome)}
.copy-standalone{margin-left:0}
/* In-content Copy is a quiet text control; hero Copy stays an outlined .btn. */
.copy:not(.btn):not(.copy-on-dark){border:0;background:none;border-radius:0;padding:0.45rem 0;min-width:0;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-size:var(--text-sm)}
.copy:not(.btn):not(.copy-on-dark):hover{background:none;color:var(--brand-deep);text-decoration-thickness:2px}
.copy.copied:not(.btn):not(.copy-on-dark){background:none;color:var(--brand-deep)}
.caption .copy{margin-left:var(--space-2)}
.copy.copied{background:var(--brand-deep);color:var(--on-chrome);border-color:var(--brand-deep)}
.copy-on-dark{border-color:var(--on-chrome);color:var(--on-chrome)}
.copy-on-dark:hover{background:var(--on-chrome);color:var(--chrome);border-color:var(--on-chrome)}
.copy-on-dark.copied{background:var(--accent-warm);color:var(--chrome);border-color:var(--accent-warm)}

/* Ledger */
section{margin:var(--section-gap) 0}
main>div>section:first-child,main section:first-child{margin-top:var(--space-md)}
.ledger{background:var(--bg-raised);border:1px solid var(--border);
  border-radius:var(--r-l);margin:2rem 0;overflow:hidden}
.ledger-row{display:grid;grid-template-columns:1fr auto;gap:0.3rem 1.5rem;
  align-items:center;padding:1.1rem 1.4rem;border-bottom:1px solid var(--border);
  transition:background-color var(--dur-fast) var(--ease-out)}
.ledger-row:hover{background:var(--bg-tint)}
.ledger-row:last-child{border-bottom:none}
.ledger-row>span:last-child{display:flex;align-items:center;justify-content:flex-end}
.ledger-key{font-weight:600;font-size:var(--text-base)}
.ledger-val{font-weight:800;font-size:var(--text-xl);color:var(--fg-figure);white-space:nowrap}
.src{font-size:var(--text-sm);color:var(--fg-muted)}
.src a{font-weight:700}
.src a,.sources a,.crisis-in a,.pull figcaption a,.testimony figcaption a{overflow-wrap:anywhere}

/* proposal-list (alias manifesto): ruled next-steps */
.proposal-list,.manifesto{list-style:none;margin:var(--space-6) 0 0;padding:0;border-top:1px solid var(--border)}
.proposal-list li,.manifesto li{padding:var(--space-5) 0;border-bottom:1px solid var(--border);max-width:none}
.proposal-list strong,.manifesto strong{font-family:var(--font-display);font-weight:600;font-size:clamp(1.12rem,2.2vw,1.3rem);display:block}
/* Title | the ask | link on one baseline (desktop); stacked on phones. */
@media(min-width:55rem){
  .proposal-block .proposal-list li{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr) auto;
    gap:var(--space-1) var(--space-8);align-items:baseline}
}
.proposal-list li > a{white-space:nowrap;font-weight:700}

/* testimony (alias pull): paired quote + caption */
.testimony,.pull{border:1px solid var(--border);border-radius:var(--r-m);
  padding:clamp(1.4rem,4vw,2.4rem);margin:2rem 0;background:var(--bg-raised);
  transition:box-shadow var(--dur-base) var(--ease-out);width:100%}
.testimony:hover,.pull:hover{box-shadow:var(--shadow-lift)}
.testimony blockquote,.pull blockquote{margin:0;font-family:var(--font-display);font-weight:600;
  font-size:var(--text-xl);line-height:1.35;text-wrap:balance;max-width:none}
.testimony figcaption,.pull figcaption{font-size:var(--text-sm);color:var(--fg-muted);margin-top:0.9rem;max-width:none}
@media(min-width:55rem){
  .testimony,.pull{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    gap:var(--space-5) var(--space-8);align-items:end}
  .testimony figcaption,.pull figcaption{margin-top:0}
}

/* Tables */
.table-scroll{overflow-x:auto;margin:1.5rem 0;border:1px solid var(--border);
  border-radius:var(--r-m);background:var(--bg-raised)}
table{border-collapse:collapse;width:100%;min-width:30rem;font-size:var(--text-base)}
caption{text-align:left;font-weight:700;padding:0.9rem 1.1rem;letter-spacing:0.01em;
  background:var(--brand-deep);color:var(--on-chrome);font-size:var(--text-base)}
th,td{text-align:left;padding:0.75rem 1.1rem;border-bottom:1px solid var(--border)}
th{background:var(--bg-tint);font-weight:700}
th[scope="col"]{font-size:0.85rem;text-transform:uppercase;letter-spacing:0.06em}
tr:last-child th,tr:last-child td{border-bottom:none}
tr.total th,tr.total td{background:var(--bg-tint);font-weight:800}
td.n,th.n{text-align:right;white-space:nowrap}

/* fig-table: after global table rules so Warm Ledger proof tables win */
.fig-table{
  width:100%;
  min-width:0;
  border-collapse:collapse;
  margin:var(--space-5) 0 0;
  font-size:var(--text-sm);
}
.fig-table th,.fig-table td{
  text-align:left;
  padding:0.55rem 0.4rem;
  border-bottom:1px solid var(--border);
  font-variant-numeric:tabular-nums;
  background:transparent;
}
.fig-table thead th{font-weight:700;color:var(--fg-muted);font-size:var(--text-xs);
  letter-spacing:0.06em;text-transform:uppercase;background:var(--bg-tint)}
.fig-table tbody th{color:var(--fg-default);font-size:var(--text-sm);
  letter-spacing:0;text-transform:none;font-weight:700;background:transparent}
.fig-table td:last-child,.fig-table thead th:last-child,.fig-table tbody td{
  text-align:right;font-weight:700;color:var(--fg-figure)}
.fig-table caption{
  caption-side:bottom;text-align:left;padding:0.55rem 0 0;margin:0;
  background:transparent;color:var(--fg-muted);font-size:var(--text-xs);
  letter-spacing:0;text-transform:none;font-weight:400}

/* media-band (alias band-clay): full-bleed clay; inner shell 50/50 text|media */
.media-band,.band-clay{background:var(--chrome);color:var(--on-chrome);
  padding:clamp(2rem,5vw,3.5rem) 0;margin:var(--section-gap) 0}
.media-band h2,.band-clay h2{color:var(--on-chrome)}
.media-band p,.band-clay p{color:var(--on-chrome)}
.band-grid{display:grid;gap:2rem}
@media(min-width:55rem){.band-grid{grid-template-columns:1fr 1fr;align-items:center;gap:var(--space-8)}}
/* Shell-level 50/50 pair (about intro, etc.) — not full-bleed clay */
.shell-split{display:grid;gap:var(--space-6);margin:var(--section-gap) 0;align-items:center}
@media(min-width:55rem){.shell-split{grid-template-columns:1fr 1fr;gap:var(--space-8)}}
.shell-split > section{margin:0}
.shell-split .hero-photo{margin:0}
.media-band a,.band-clay a{color:var(--accent-warm);font-weight:700}
.media-band a:hover,.band-clay a:hover{color:var(--on-chrome)}
.media-band .calc li.result,.band-clay .calc li.result{color:var(--fg-default)}
.media-band .band-photo img,.band-clay .band-photo img{border-radius:0;border:0;aspect-ratio:4/3}

/* Hour bars (data viz) */
.bars{list-style:none;margin:2rem 0;padding:0;display:grid;gap:1.1rem}
.bar-row{display:grid;grid-template-columns:minmax(9rem,15rem) 1fr auto;gap:0.6rem 1rem;align-items:center}
.bar-label{font-weight:700;font-size:var(--text-base)}
.bar{height:1.9rem;background:var(--bar-track);border:1px solid var(--brand-deep);border-radius:var(--r-xs);overflow:hidden}
.bar-fill{display:block;height:100%;width:var(--w);background:var(--bar-fill);transform-origin:left center}
.bar-fill.hot{background:var(--bar-fill-hot)}
.bar-val{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);white-space:nowrap;color:var(--fg-figure)}
@media(max-width:40rem){.bar-row{grid-template-columns:1fr}.bar-val{white-space:normal}}
@media(prefers-reduced-motion:no-preference){.bar-fill{transition:transform var(--dur-bar) var(--ease-out-expo)}}

/* Crisis box: pinned, full-bleed, amber. Inner aligns to shell. */
/* Crisis resources close the page (Home, Mental Health), above the footer; the footer
   repeats a 988 box on every page. Words left, three actions right on desktop. */
.crisis-block{background:var(--crisis-bg);color:var(--crisis-fg);margin-top:var(--section-gap);
  border-top:1px solid var(--crisis-fg)}
.crisis-in{padding:var(--space-8) var(--page-pad-x);max-width:var(--shell-max);margin:0 auto;width:100%;
  display:grid;gap:var(--space-2) var(--space-8)}
.crisis-in strong{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);line-height:1.2}
.crisis-in p{margin:0;font-size:var(--text-base);line-height:1.5;max-width:var(--col-measure)}
.crisis-in a{color:var(--crisis-fg);font-weight:800}
.crisis-actions{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);margin-top:var(--space-3)}
@media(min-width:55rem){
  .crisis-in{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .crisis-in strong,.crisis-in p{grid-column:1}
  .crisis-actions{grid-column:2;grid-row:1 / span 2;margin:0;flex-direction:column;align-items:stretch}
  .crisis-actions a{justify-content:center}
}
.crisis-actions a{display:inline-flex;align-items:center;min-height:44px;padding:0.4rem 1.1rem;border:2px solid var(--crisis-fg);
  cursor:pointer;transition:color var(--dur-hover) var(--ease-out),background-color var(--dur-hover) var(--ease-out);
  border-radius:var(--r-pill);text-decoration:none;font-weight:800;background:transparent}
.crisis-actions a:hover{background:var(--crisis-fg);color:var(--crisis-bg)}

/* Stat band */
.statband{border:1px solid var(--border);
  border-radius:var(--r-m);background:var(--bg-raised);
  padding:1.4rem clamp(1rem,3vw,1.6rem);margin:1.5rem 0}
.statband .fig{font-family:var(--font-display);font-weight:600;font-size:var(--text-display);line-height:1;display:block;color:var(--fg-figure)}
.statband p{margin:0.5rem 0 0}

/* Calc steps (overtime math): ordered ledger */
.calc{list-style:none;margin:1.5rem 0;padding:0;border-top:3px solid var(--fg-default)}
.calc li{display:flex;justify-content:space-between;gap:0.2rem 1rem;padding:0.7rem 1rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.calc li.result{font-weight:800;background:var(--bg-tint)}
.calc .n{font-variant-numeric:tabular-nums;white-space:nowrap}
.media-band .calc,.band-clay .calc{border-top-color:var(--on-chrome)}
.media-band .calc li,.band-clay .calc li{border-bottom-color:var(--brand-deep)}

/* Stories */
.story{margin:0 0 var(--space-12)}
.story-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-4)}
.story-head h2{margin:0}
.story-role{color:var(--fg-muted);margin:var(--space-2) 0 var(--space-4)}
.story-quote{font-family:var(--font-display);font-weight:600;font-size:var(--text-quote);
  line-height:1.35;margin:var(--space-4) 0;max-width:none;text-wrap:balance}
.story-feature{background:var(--chrome);color:var(--on-chrome);
  padding:clamp(1.6rem,5vw,3rem);margin:0 0 var(--space-12);border-radius:var(--r-l)}
.story-feature .story-head h2{color:var(--on-chrome)}
.story-feature .story-role{color:var(--accent-warm)}
.story-feature .src{color:var(--on-chrome)}
.story-feature a{color:var(--accent-warm)}
.story-feature a:hover{color:var(--on-chrome)}
.story-feature .story-quote{margin-left:0}
@media(min-width:55rem){
  .story-feature{display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1.15fr);
    gap:var(--space-5) var(--space-8);align-items:start}
  .story-feature .story-head,.story-feature .story-role,.story-feature .story-quote{grid-column:1}
  .story-feature .prose{grid-column:2;grid-row:1 / span 4;align-self:stretch}
}
.story-duo{display:grid;gap:var(--space-6) var(--space-8)}
@media(min-width:55rem){.story-duo{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}.story-duo aside{align-self:start}}
.story-duo aside .story-quote{font-size:var(--text-xl);margin-top:0}
@media(min-width:55rem){.story-duo aside{border-left:1px solid var(--border);padding-left:var(--space-8)}}
/* Accounts we are looking for: three plain asks, not placeholder boxes. */
.ask-list{list-style:none;margin:var(--space-6) 0 0;padding:0;display:grid;gap:var(--space-5) var(--space-8);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.ask-list li{border-top:1px solid var(--border);padding-top:var(--space-3);
  font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);line-height:1.3}
.story:not(.story-feature){border-top:1px solid var(--border);padding-top:var(--space-8)}
.empty-slots{display:grid;gap:var(--space-5);margin:var(--space-8) 0}
@media(min-width:55rem){.empty-slots{grid-template-columns:repeat(3,1fr)}}
.slot{border:2px dashed var(--brand);border-radius:var(--r-m);padding:var(--space-6);background:transparent;
  transition:border-style var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.slot:hover{border-style:solid;background:var(--bg-raised)}
.slot .tag{display:inline-block;font-size:var(--text-xs);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;
  border:2px solid var(--brand);color:var(--brand);border-radius:var(--r-xs);padding:0.15rem 0.6rem;margin-bottom:var(--space-3)}
.slot h3{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);line-height:1.3}
.slot p{font-size:var(--text-sm);color:var(--fg-muted);margin:0}

/* Source list */
.sources{list-style:none;margin:1.5rem 0;padding:0;border-top:3px solid var(--fg-default)}
.sources li{padding:0.9rem 0;border-bottom:1px solid var(--border);font-size:var(--text-base)}
.sources a{font-weight:700}

/* Superscript citations: <sup class="cite"><a href="ORIGINAL-URL">[N]</a></sup>,
   N = stat-table row, 1:1, never renumbered. Arithmetic rows link to
   about.html#ref-N (site-calculation entry showing inputs). */
sup.cite{font-size:0.78em;font-weight:700;line-height:0;letter-spacing:0.01em;white-space:nowrap}
sup.cite a{color:var(--brand-deep);text-decoration:none;border-bottom:1.5px solid currentColor;
  padding:0 0.12em;border-radius:var(--r-2xs)}
sup.cite a:hover{background:var(--bg-tint)}
sup.cite a:active{background:var(--bg-tint)}
/* Dark-clay variant (contextual: masthead, bands, feature, footer) */
.masthead sup.cite a,.band-clay sup.cite a,.media-band sup.cite a,.story-feature sup.cite a,footer sup.cite a{color:var(--accent-warm)}
.masthead sup.cite a:hover,.band-clay sup.cite a:hover,.media-band sup.cite a:hover,.story-feature sup.cite a:hover,footer sup.cite a:hover{background:none;color:var(--on-chrome)}

/* Generated reference list (about.html; see scripts/build-refs.py) */
.ref-jump{background:var(--bg-raised);border:1px solid var(--border);
  border-radius:var(--r-m);padding:1rem 1.3rem;margin:1.5rem 0}
.ref-jump p{margin:0 0 0.5rem;font-weight:700;font-size:var(--text-sm)}
.ref-jump ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.35rem 1.1rem;font-size:var(--text-sm)}
.ref-group-h{margin-top:2.2rem}
.ref-range{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;color:var(--fg-muted)}
.refs{margin:0.5rem 0 0;padding-left:1.6rem;display:grid;gap:0.65rem;font-size:var(--text-sm)}
.refs li{border-bottom:1px solid var(--border);padding-bottom:0.65rem}
.refs li:last-child{border-bottom:none}
.refs li[id]{scroll-margin-top:1rem}
.refs li:target{background:var(--bg-tint);border-radius:var(--r-s)}
.refs li::marker{font-weight:800;color:var(--brand-deep)}
.refs a{font-weight:700;overflow-wrap:anywhere}
.ref-same{color:var(--fg-muted)}
.ref-access{color:var(--fg-muted);white-space:nowrap}
.ref-calc{font-weight:800}
.ref-gap{color:var(--fg-muted);font-style:italic}

@media print{
  body{background:#fff;font-size:1rem}
  sup.cite a{color:#000;background:none;border-bottom:none}
  .ref-jump,.masthead nav,.hero-cta,.copy,.cta-row,.crisis-actions,.progress{display:none}
  .refs{font-size:0.85rem}
  .band-clay,.media-band,.story-feature,footer{color:#000;background:none}
  .band-clay h2,.media-band h2,.band-clay p,.media-band p,.story-feature .story-head h2{color:#000}
  .band-clay a,.media-band a,.story-feature a,footer a{color:#000}
  section,.band-clay,.media-band,.pull,.testimony{break-inside:avoid}
  .issue-nav{display:none}
  .fig-data::details-content{display:block;content-visibility:visible}
  .fig{break-inside:avoid}
}

/* CTA row + footer */
.cta-row{margin:3rem 0 1rem;display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4)}
footer{background:var(--chrome);color:var(--on-chrome);margin-top:0;
  border-top:2px solid var(--accent-warm);
  padding:var(--space-12) 0 max(var(--space-12), env(safe-area-inset-bottom, 0px))}
/* Reading progress hairline (overdrive): JS-injected, state feedback only. */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:var(--z-progress);
  pointer-events:none;background:transparent}
.progress span{display:block;height:100%;background:var(--brand);
  transform:scaleX(0);transform-origin:left center}
footer p{font-size:var(--text-sm);max-width:none}
footer a{color:var(--accent-warm);font-weight:700}
footer a:hover{color:var(--on-chrome)}
.foot-grid{display:grid;gap:var(--space-8)}
@media(min-width:55rem){.foot-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:var(--space-10)}}
/* The crisis block sits right above the footer on Home and Mental Health; don't repeat its box. */
.crisis-block + footer .foot-crisis{display:none}
@media(min-width:55rem){.crisis-block + footer .foot-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.foot-nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-flow:column;grid-template-rows:repeat(5,auto);gap:0 var(--space-6)}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none;
  color:var(--on-chrome);white-space:nowrap}
.foot-nav a:hover{color:var(--accent-warm);text-decoration:underline}
.foot-crisis{border:1px solid var(--accent-warm);border-radius:var(--r-m);padding:var(--space-5) var(--space-6);align-self:start}
.foot-crisis p:last-child{margin-bottom:0}
.foot-crisis strong{color:var(--accent-warm)}
.sr-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(max-width:34rem){
  .ledger-row{grid-template-columns:1fr}
  .ledger-row>span:last-child{justify-content:flex-start}
  .ledger-val{white-space:normal}
}
@media(max-width:40rem){
  .masthead-in{padding-top:0.7rem;padding-bottom:0.7rem;gap:0.2rem 1.5rem}
  .wordmark{font-size:1.2rem}
  .masthead nav ul{gap:0 0.9rem;font-size:0.95rem}
  .hero-cta{gap:var(--space-4)}
}
@media(max-width:25rem){
  body{font-size:1rem}
  .hero-cta .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* ===== Community: join, account, board, messages, moderation =====
   Same tokens and surfaces as the advocacy pages: cream ground, raised cards with one
   hairline, clay actions. */
.app-hero{padding:clamp(2rem,4.5vw,3rem) 0 var(--space-6);max-width:48rem}
.app-hero h1{font-size:var(--text-display);line-height:1.1;margin:0 0 var(--space-4)}
.app-hero .lede{margin:0}
.card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-m);
  padding:clamp(1.25rem,3vw,2rem)}
.card > :last-child{margin-bottom:0}
.card h2{font-size:var(--text-xl);margin:0 0 var(--space-4);background:none;padding-top:0}
.stack{display:grid;gap:var(--space-6)}
.split-2{display:grid;gap:var(--space-8);margin:var(--space-6) 0 var(--section-gap)}
@media(min-width:55rem){.split-2{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}

/* Forms */
.form{display:grid;gap:var(--space-5)}
.field{display:grid;gap:var(--space-2)}
.field label,.field .label{font-weight:700;font-size:var(--text-base)}
.field-hint{font-size:var(--text-sm);color:var(--fg-muted);margin:0}
.field-row{display:grid;gap:var(--space-5)}
@media(min-width:40rem){.field-row{grid-template-columns:1fr 1fr}}
.form input[type="text"],.form input[type="email"],.form input[type="number"],.form input[type="search"],
.form select,.form textarea{width:100%;font:inherit;font-size:var(--text-base);color:var(--fg-default);
  background:var(--surface);border:1px solid color-mix(in oklch, var(--line) 70%, var(--ink));
  border-radius:var(--r-s);padding:0.7rem 0.9rem;min-height:48px;
  transition:border-color var(--dur-hover) var(--ease-out),box-shadow var(--dur-hover) var(--ease-out)}
.form textarea{min-height:9rem;resize:vertical;line-height:1.55}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:none;
  border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in oklch, var(--brand) 25%, transparent)}
.form input[aria-invalid="true"]{border-color:var(--brand-deep)}
.check{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-base);cursor:pointer}
.check input{width:1.2rem;height:1.2rem;margin:0.2rem 0 0;accent-color:var(--brand);flex:0 0 auto}
.fieldset{border:1px solid var(--border);border-radius:var(--r-m);padding:var(--space-5);margin:0;display:grid;gap:var(--space-4)}
.fieldset legend{font-weight:700;padding:0 var(--space-2)}
.form-actions{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);align-items:center}
.btn[disabled]{opacity:0.6;cursor:progress}
.btn-small{min-height:40px;padding:0.4rem 1rem;font-size:var(--text-sm)}
.linkbtn{background:none;border:0;padding:0.45rem 0;min-height:44px;font:inherit;font-size:var(--text-sm);
  font-weight:700;color:var(--brand);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn:hover{color:var(--brand-deep);text-decoration-thickness:2px}
.fine{font-size:var(--text-sm);color:var(--fg-muted)}
.ts-slot{min-height:65px}

/* Notices */
.notice{margin:0;padding:var(--space-4) var(--space-5);border-radius:var(--r-s);border:1px solid var(--border);
  background:var(--bg-raised);font-size:var(--text-base)}
.notice-success{background:color-mix(in oklch, var(--bg-tint) 60%, var(--bg-raised));border-color:var(--brand)}
.notice-error{background:color-mix(in oklch, var(--bg-tint) 40%, var(--bg-raised));border-color:var(--brand-deep);
  color:var(--brand-deep);font-weight:600}
.notice a{font-weight:700}
.gate{max-width:40rem}

/* What you get (join page) */
.perks{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5)}
.perks li{border-top:1px solid var(--border);padding-top:var(--space-4)}
.perks strong{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);margin-bottom:var(--space-1)}
.perks p{margin:0;color:var(--fg-default)}

/* Home: join band */
.join-band{margin:var(--section-gap) 0;padding:clamp(1.75rem,4vw,2.75rem);border-radius:var(--r-m);
  background:var(--chrome);color:var(--on-chrome);display:grid;gap:var(--space-5) var(--space-10)}
.join-band h2{color:var(--on-chrome);background:none;padding-top:0;margin:0 0 var(--space-3)}
.join-band p{color:var(--on-chrome);margin:0 0 var(--space-3);max-width:var(--col-measure)}
.join-band .cta-row{margin:0;align-self:center}
.join-band .btn{background:var(--accent-warm);border-color:var(--accent-warm);color:var(--chrome)}
.join-band .btn:hover{background:var(--on-chrome);border-color:var(--on-chrome)}
.join-band .btn-ghost{background:transparent;color:var(--on-chrome);border-color:var(--on-chrome)}
.join-band .btn-ghost:hover{background:var(--on-chrome);color:var(--chrome)}
.join-stats{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-8);margin:var(--space-2) 0 0}
.join-stats span{font-family:var(--font-display);font-size:var(--text-xl);color:var(--accent-warm)}
@media(min-width:55rem){.join-band{grid-template-columns:minmax(0,1fr) auto;align-items:center}}

/* Board */
.board{display:grid;gap:var(--space-8);margin:var(--space-6) 0 var(--section-gap)}
@media(min-width:55rem){.board{grid-template-columns:15rem minmax(0,1fr);align-items:start}}
.cat-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1)}
.cat-nav a{display:flex;justify-content:space-between;gap:var(--space-3);align-items:center;min-height:44px;
  padding:0.4rem 0.8rem;border-radius:var(--r-s);text-decoration:none;color:var(--fg-default);font-weight:600}
.cat-nav a:hover{background:var(--bg-tint)}
.cat-nav a[aria-current="true"]{background:var(--chrome);color:var(--on-chrome)}
.cat-nav .count{font-size:var(--text-sm);font-weight:700;color:inherit;opacity:0.75;font-variant-numeric:tabular-nums}
@media(min-width:55rem){.cat-nav{position:sticky;top:var(--space-6)}}
@media(max-width:54.99rem){.cat-nav ul{display:flex;overflow-x:auto;scrollbar-width:none;gap:var(--space-2)}
  .cat-nav a{white-space:nowrap;border:1px solid var(--border)}}
.board-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-5)}
.board-head h2{margin:0;background:none;padding-top:0}
.thread-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.thread-list li{border-bottom:1px solid var(--border)}
.thread-row{display:grid;gap:var(--space-1);padding:var(--space-4) var(--space-2);text-decoration:none;color:var(--fg-default);
  border-radius:var(--r-s);transition:background-color var(--dur-fast) var(--ease-out)}
.thread-row:hover{background:var(--bg-tint)}
.thread-title{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);line-height:1.3;color:var(--fg-default)}
.thread-meta{font-size:var(--text-sm);color:var(--fg-muted);display:flex;flex-wrap:wrap;gap:0 var(--space-3)}
.badge{display:inline-block;font-size:0.78rem;font-weight:800;letter-spacing:0.02em;padding:0.1rem 0.5rem;
  border-radius:var(--r-pill);background:var(--bg-tint);color:var(--brand-deep);margin-left:var(--space-2);vertical-align:middle}
.badge-held{background:var(--accent-warm);color:var(--chrome)}
.empty{padding:var(--space-8) 0;color:var(--fg-muted)}
.category-note{margin:0 0 var(--space-5)}

/* Posts */
.post{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-m);
  padding:clamp(1.1rem,2.5vw,1.6rem);margin:0 0 var(--space-4)}
.post-op{border-color:color-mix(in oklch, var(--brand) 35%, var(--border))}
.post-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-2) var(--space-4);
  align-items:baseline;margin-bottom:var(--space-3)}
.post-body p{margin:0 0 0.8em;max-width:var(--col-measure)}
.post-body p:last-child{margin-bottom:0}
.post-body a{overflow-wrap:anywhere}
.post-actions{display:flex;flex-wrap:wrap;gap:0 var(--space-5);margin-top:var(--space-3);border-top:1px solid var(--border);padding-top:var(--space-1)}
.author{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--space-2)}
.author-name{font-weight:800;text-decoration:none;color:var(--fg-default)}
a.author-name:hover{color:var(--brand);text-decoration:underline}
.author-meta{font-size:var(--text-sm);color:var(--fg-muted)}
.post-time{font-size:var(--text-sm);color:var(--fg-muted);white-space:nowrap}
.thread-h1{font-size:clamp(1.7rem,3.6vw,2.4rem);margin:var(--space-6) 0 var(--space-5)}
.crumbs{font-size:var(--text-sm);margin:var(--space-6) 0 0}
.crumbs a{font-weight:700}
.crisis-inline{display:block;margin-top:var(--space-4);padding:var(--space-3) var(--space-4);border-radius:var(--r-s);
  background:color-mix(in oklch, var(--accent-warm) 35%, var(--bg-raised));color:var(--chrome);font-size:var(--text-sm)}
.crisis-inline a{color:var(--chrome);font-weight:800}
.composer{margin-top:var(--space-8)}

/* Messages */
.msg-layout{display:grid;gap:var(--space-6);margin:var(--space-6) 0 var(--section-gap)}
@media(min-width:55rem){.msg-layout{grid-template-columns:20rem minmax(0,1fr);align-items:start}}
.conv-list{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:var(--r-m);
  background:var(--bg-raised);overflow:hidden}
.conv-list li + li{border-top:1px solid var(--border)}
.conv-list a{display:grid;gap:0.15rem;padding:var(--space-3) var(--space-4);text-decoration:none;color:var(--fg-default)}
.conv-list a:hover{background:var(--bg-tint)}
.conv-list a[aria-current="true"]{background:var(--bg-tint);box-shadow:inset 0 0 0 2px var(--brand)}
.conv-with{font-weight:800}
.conv-preview{font-size:var(--text-sm);color:var(--fg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unread-dot{display:inline-block;min-width:1.4rem;padding:0 0.35rem;border-radius:var(--r-pill);background:var(--brand);
  color:var(--on-chrome);font-size:0.78rem;font-weight:800;text-align:center;margin-left:var(--space-2)}
.bubbles{display:grid;gap:var(--space-3);padding:var(--space-5);border:1px solid var(--border);border-radius:var(--r-m);
  background:var(--bg-raised);max-height:min(60vh,36rem);overflow-y:auto}
.bubble{max-width:min(36rem,85%);padding:var(--space-3) var(--space-4);border-radius:var(--r-m);background:var(--bg-tint)}
.bubble p{margin:0 0 0.5em}
.bubble p:last-child{margin:0}
.bubble-me{justify-self:end;background:var(--chrome);color:var(--on-chrome)}
.bubble-me a{color:var(--accent-warm)}
.bubble-meta{display:block;font-size:0.8rem;opacity:0.75;margin-top:var(--space-1)}

/* Moderation */
.queue-item{display:grid;gap:var(--space-2)}
.queue-item .post-body{font-size:var(--text-base)}
.mod-actions{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3)}

/* Profile */
.profile-facts{list-style:none;margin:var(--space-4) 0;padding:0;display:grid;gap:var(--space-2)}
.profile-facts li{display:flex;gap:var(--space-3)}
.profile-facts span:first-child{min-width:9rem;color:var(--fg-muted)}
.danger{border-color:color-mix(in oklch, var(--brand-deep) 45%, var(--border))}

/* Policy pages */
.policy{max-width:var(--col-measure);margin:0 0 var(--section-gap)}
.policy h2{font-size:var(--text-xl);margin-top:var(--space-10)}
.policy li{margin-bottom:var(--space-2)}

/* Weekly briefing: public archive (news.html) and the owner's desk (admin.html) */
.app-hero .cta-row{margin:var(--space-5) 0 0}
.briefings{display:grid;gap:var(--space-12);margin:var(--space-6) 0 var(--section-gap);max-width:var(--col-measure)}
.briefing{border-top:2px solid var(--chrome);padding-top:var(--space-5)}
.briefing-head h2{margin:0 0 var(--space-4);background:none;padding-top:0;font-size:var(--text-xl)}
.briefing-intro{font-size:var(--text-lg)}
.briefing h3{font-size:var(--text-lg);margin:var(--space-8) 0 var(--space-3);color:var(--brand-deep)}
.briefing-items{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5)}
.briefing-items p{margin:var(--space-1) 0 0}
.briefing-title{font-weight:700;overflow-wrap:anywhere}
.briefing-desk{margin:0 0 var(--section-gap)}
.desk{display:grid;gap:var(--space-6)}
@media(min-width:55rem){.desk{grid-template-columns:16rem minmax(0,1fr);align-items:start}}
.desk .empty{padding:var(--space-4)}
.desk-items{display:grid;gap:var(--space-5)}
.desk-item{display:grid;gap:var(--space-2);padding-top:var(--space-4);border-top:1px solid var(--border)}
.desk-item:first-child{border-top:0;padding-top:0}
.desk-item.is-out{opacity:0.55}
.desk-item a{overflow-wrap:anywhere}
.form .desk-item textarea{min-height:5.5rem}
.preview-h{font-size:var(--text-lg);margin:var(--space-8) 0 var(--space-3)}
.email-preview{display:block;width:100%;height:min(80vh,56rem);border:1px solid var(--border);border-radius:var(--r-m);background:var(--surface)}