/* recursioninstitute.org — shared styles. C3 makeover (2026-06-23).
   ONE publication, four registers, one warm-archival system; the page guides by
   typographic + spatial hierarchy, not chrome. Sophistication = restraint + craft.
   Tokens: primitives -> semantics (every selector) -> theme/register overrides.
   Themes: a curated 10-theme reader picker (Light/Medium/Dark); switcher persists 'ri-theme'.
   P0 token tiers + P1 theme/decoration-cull/a11y. Registers (.reg-*) land in P2.
   Earlier: holding-page restraint, C1n 2026-06-12. */

/* ───────────────────────── PRIMITIVES + RAMPS ───────────────────────── */
:root {
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --maxw: 680px;
  --chrome: 860px;   /* header / section-band / footer frame — wider than the reading column */

  /* fluid type ramp (no breakpoints, no CLS). body holds --step-0 in every register. */
  --step--1: clamp(0.81rem, 0.78rem + 0.14vw, 0.88rem);
  --step-0: 1.125rem;                                        /* 18px reading base, fixed */
  --step-1: clamp(1.16rem, 1.10rem + 0.30vw, 1.31rem);
  --step-2: clamp(1.33rem, 1.24rem + 0.45vw, 1.55rem);
  --step-3: clamp(1.50rem, 1.34rem + 0.80vw, 1.90rem);
  --step-4: clamp(1.70rem, 1.44rem + 1.30vw, 2.30rem);
  --step-5: clamp(1.95rem, 1.55rem + 2.00vw, 2.80rem);
  --step-6: clamp(2.30rem, 1.75rem + 2.75vw, 3.30rem);

  /* 8px space ramp */
  --sp-0: 0.25rem; --sp-1: 0.5rem; --sp-2: 0.75rem; --sp-3: 1rem;
  --sp-4: 1.5rem; --sp-5: 2rem; --sp-6: 3rem; --sp-7: 4rem;

  /* register-driven reading measure + leading (default; .reg-* re-points them) */
  --measure: 42rem;
  --leading: 1.65;
}

/* ───────────────────────── SEMANTIC THEME LAYERS ─────────────────────────
   Three authoritative themes — the switcher is the source of truth, NOT the OS.
   Each is one complete, fixed look (no prefers-color-scheme coupling), so a theme
   renders identically on every machine. A curated 10-theme reader picker (4 Light /
   3 Medium / 3 Dark; Standard is the brand default) — the full palettes live below.
   Brand through-line = slate-blue, tuned per ground. Picker persists 'ri-theme'.
   No pure black ground / no pure white text — warmth in the light, low halation in the dark. */
:root, [data-theme="standard"] {
  --bg: #FAF8F4; --panel: #F1EEE7; --ink: #1B2026; --ink-soft: #5A636E;
  --line: rgba(27,32,38,.12); --accent: #2C4A5A; --accent-soft: #E7ECEF; --accent-ink: #1D3340;
  --rule: #2C4A5A;
  --crisis-bg: #F7ECE8; --crisis-ink: #6E2A1E; --crisis-line: #E3C4BA;
  --flag: #8A4B2A; --shadow: none;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans);
  font-size: var(--step-0); line-height: var(--leading); -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1, "liga" 1; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-ink); text-decoration-color: var(--rule); }

/* accessibility — visible focus, motion respect, anchor offsets */
:focus-visible { outline: 2px solid var(--rule); outline-offset: 2px; border-radius: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, .fbtn:focus-visible {
  outline: 2px solid var(--rule); outline-offset: 2px; }
h1[id], h2[id], h3[id] { scroll-margin-top: 24px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* header / nav */
.topbar { border-bottom: 1px solid var(--line); background: var(--panel); }
/* the chrome frame (header/section-band/footer) is wider than the 680px reading column so the
   eight section links breathe on one line; the article measure stays narrow via --measure. */
.topbar .inner { max-width: var(--chrome); margin: 0 auto; padding: 16px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; white-space: nowrap; }
.brand .mark { width: 34px; height: 34px; flex: none; color: var(--accent); }
.brand .wm { font-family: var(--serif); font-weight: 600; font-size: 18px; letter-spacing: .01em; color: var(--ink); }
.brand small { display: block; font-family: var(--sans); font-weight: 400; font-size: 11px;
  letter-spacing: .16em; color: var(--ink-soft); margin-top: 2px; }
nav.main { display: flex; flex-wrap: wrap; gap: 4px 3px; }
nav.main a { font-size: 14px; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  padding: 8px 11px; border-radius: 8px; white-space: nowrap; }
nav.main a:hover { color: var(--ink); background: var(--accent-soft); }
/* active page + current-section front light in the section hue (C5.3) — ties the top nav to the
   band directly below it; index (no --sec) falls back to --accent-ink. Verified AA on --accent-soft. */
nav.main a.active, nav.main a.cursec { color: var(--sec, var(--accent-ink)); background: var(--accent-soft); }
.nav-wrap { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; justify-content: flex-end; }
nav.main .nav-sep { width: 1px; height: 15px; background: var(--line); margin: 0 5px; align-self: center; }

/* theme picker (C5.2) — a <details> swatch menu; scales past the old 3-button segmented control.
   The trigger shows a two-tone dot of the CURRENT theme + its name; the panel lists all themes as
   labeled swatches, grouped Light / Medium / Dark. Native disclosure = keyboard-accessible, CSP-safe. */
.thememenu { position: relative; }
.thememenu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: 7px; font: 600 13px/1 var(--sans); color: var(--ink-soft); border: 1px solid var(--line);
  border-radius: 20px; padding: 8px 14px; white-space: nowrap; user-select: none; }
.thememenu > summary::-webkit-details-marker { display: none; }
.thememenu > summary:hover { color: var(--ink); }
.thememenu > summary:focus-visible { outline: 2px solid var(--rule); outline-offset: 2px; }
.tm-dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--line); flex: none;
  background: linear-gradient(135deg, var(--bg) 0 50%, var(--accent) 50% 100%); }
.tm-cur { color: var(--ink); font-weight: 600; }
.tm-cur:not(:empty)::before { content: "\00b7\00a0"; color: var(--ink-soft); font-weight: 400; }
.tm-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 184px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px;
  display: flex; flex-direction: column; gap: 1px; box-shadow: 0 10px 30px rgba(0,0,0,.16);
  max-height: min(72vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
.tm-grp { margin: 7px 8px 3px; font: 600 10px/1 var(--sans); letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-soft); }
.tm-grp:first-child { margin-top: 3px; }
.tm-panel button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  font: 500 14px/1 var(--sans); color: var(--ink); background: transparent; border: 0;
  border-radius: 8px; padding: 9px 10px; cursor: pointer; }
.tm-panel button:hover { background: var(--accent-soft); }
.tm-panel button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.tm-sw { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line); flex: none; }
/* each swatch shows that theme's ground + accent as a diagonal two-tone chip (CSP-safe: class, not inline style) */
.tm-sw[data-sw="standard"] { background: linear-gradient(135deg, #FAF8F4 0 50%, #2C4A5A 50% 100%); }
.tm-sw[data-sw="sepia"]    { background: linear-gradient(135deg, #EFE3CC 0 50%, #7A4B2B 50% 100%); }
.tm-sw[data-sw="sage"]     { background: linear-gradient(135deg, #C9CFC0 0 50%, #3A5445 50% 100%); }
.tm-sw[data-sw="midnight"] { background: linear-gradient(135deg, #0C0D10 0 50%, #7FB0C6 50% 100%); }
.tm-sw[data-sw="newsprint"] { background: linear-gradient(135deg, #e8e9ea 0 50%, #a3341f 50% 100%); }
.tm-sw[data-sw="bluebook"] { background: linear-gradient(135deg, #EDF1F8 0 50%, #1E3A6E 50% 100%); }
.tm-sw[data-sw="contrast"] { background: linear-gradient(135deg, #FBFBFA 0 50%, #0B4F8A 50% 100%); }
.tm-sw[data-sw="wheat"] { background: linear-gradient(135deg, #c8b487 0 50%, #653810 50% 100%); }
.tm-sw[data-sw="heather"] { background: linear-gradient(135deg, #c0bbd0 0 50%, #40316b 50% 100%); }
.tm-sw[data-sw="forest"] { background: linear-gradient(135deg, #101a12 0 50%, #8fc99a 50% 100%); }
.tm-sw[data-sw="navy"] { background: linear-gradient(135deg, #0b1622 0 50%, #5ec8e0 50% 100%); }

/* hero (landing) */
.hero { max-width: var(--maxw); margin: 0 auto; padding: 54px 22px 26px; }
.hero .kicker { letter-spacing: .16em; font-size: 12px; font-weight: 600; color: var(--rule);
  text-transform: uppercase; }
.hero h1 { font-family: var(--serif); font-weight: 600; font-size: var(--step-5);
  line-height: 1.18; letter-spacing: -.012em; margin: 14px 0 18px; }
.hero p.stand { font-size: var(--step-1); color: var(--ink); }

/* page body — text column = --measure (register-driven); header/footer stay --maxw (shared margins) */
main { max-width: var(--measure); margin: 0 auto; padding: 30px 22px 10px; }
.pagehead { margin-bottom: 8px; }
.pagehead .kicker { letter-spacing: .16em; font-size: 12px; font-weight: 600; color: var(--rule);
  text-transform: uppercase; }
/* section-front eyebrow lights in the section hue (C5.3); section interiors keep neutral --rule so
   the color stays scarce. --sec on --bg is the same pairing the band uses — verified AA every theme. */
body[data-front] .pagehead .kicker { color: var(--sec); }
h1.page { font-family: var(--serif); font-weight: 600; font-size: var(--step-4); margin: 8px 0 18px;
  letter-spacing: -.01em; line-height: 1.18; }
h2 { font-family: var(--serif); font-weight: 600; font-size: var(--step-2); margin: 34px 0 12px; line-height: 1.25; }
h3 { font-size: var(--step-1); margin: 24px 0 8px; line-height: 1.3; }
p, li { font-size: var(--step-0); }
.lede { font-size: var(--step-1); color: var(--ink); border-left: 2px solid var(--rule);
  padding-left: 16px; margin: 4px 0 26px; }
strong { color: var(--ink); }
em { color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }

/* cards / lists — decoration cull: hairline borders, no drop shadows */
.cards { display: grid; gap: 12px; margin: 18px 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; }
.card h3 { margin-top: 0; }
.card .arrow { color: var(--accent); font-weight: 600; text-decoration: none; font-size: 15px; }
ol.numbered { padding-left: 0; list-style: none; counter-reset: n; }
ol.numbered > li { counter-increment: n; position: relative; border-top: 1px solid var(--line);
  padding: 16px 4px 16px 46px; margin: 0; }
ol.numbered > li:last-child { border-bottom: 1px solid var(--line); }
ol.numbered > li::before { content: counter(n); position: absolute; left: 6px; top: 16px;
  width: 28px; text-align: center; color: var(--rule); font-family: var(--serif);
  font-weight: 700; font-size: 18px; font-variant-numeric: lining-nums; }
ul.markers { padding-left: 0; list-style: none; }
ul.markers > li { border-top: 1px solid var(--line); padding: 14px 4px; margin: 0; }
ul.markers > li:last-child { border-bottom: 1px solid var(--line); }
ul.markers .mname { font-weight: 700; }
.callout { background: var(--accent-soft); border-radius: 10px; padding: 16px 18px; margin: 22px 0; }
.prompt { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 13px; font-size: 15.5px; margin: 8px 0; }
.note { color: var(--ink-soft); font-size: var(--step--1); }
.tier { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-ink); }

/* "Go deeper" — optional technical tier (progressive disclosure); also the affected-reader gate */
details.deeper { border: 1px solid var(--line); border-left: 2px solid var(--rule);
  border-radius: 0 10px 10px 0; background: var(--panel); padding: 0 18px; margin: 22px 0; }
details.deeper > summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 15px;
  color: var(--accent-ink); padding: 13px 0; }
details.deeper > summary::-webkit-details-marker { display: none; }
details.deeper > summary::before { content: "\203A"; display: inline-block; margin-right: 9px;
  color: var(--rule); font-weight: 700; transition: transform .15s ease; }
details.deeper[open] > summary::before { transform: rotate(90deg); }
details.deeper > summary:hover { color: var(--accent); }
details.deeper[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 13px; }
details.deeper > p { margin-top: 0; padding-bottom: 15px; color: var(--ink-soft); font-size: 15.5px; }

/* crisis block (resources pages) — escalation by placement; keeps its set-apart treatment */
.crisis { background: var(--crisis-bg); border: 1px solid var(--crisis-line); color: var(--crisis-ink);
  border-radius: 12px; padding: 14px 18px; margin: 20px 0; }
.crisis a { color: var(--crisis-ink); font-weight: 600; }

/* footer — guidance de-escalated from a crisis-tinted box to a standing hairline note */
footer.sitefoot { border-top: 1px solid var(--line); margin-top: 44px; background: var(--panel); }
footer.sitefoot .inner { max-width: var(--chrome); margin: 0 auto; padding: 26px 22px 32px;
  display: flex; flex-direction: column; gap: 16px; }
footer .guidance { font-size: 14px; line-height: 1.6; margin: 0; color: var(--ink-soft);
  border-left: 2px solid var(--rule); padding: 2px 0 2px 15px; }
footer .guidance strong { color: var(--ink); }
footer .guidance a { color: var(--accent); font-weight: 600; }
footer .engage { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
footer .engage a { color: var(--accent); font-weight: 500; }
footer .engage a:hover { color: var(--accent-ink); }
footer .est { font-family: var(--serif); color: var(--ink-soft); font-size: 13px; margin: 0;
  padding-top: 16px; border-top: 1px solid var(--line); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: var(--panel); padding: 8px 12px; border-radius: 8px; z-index: 10; }

/* full-paper pages — meta block, table of contents, long-form quotes (de-boxed) */
.byline { font-size: 16px; color: var(--ink-soft); margin: -8px 0 16px; }
.paper-meta { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 14px 0; margin: 18px 0 24px; }
.paper-meta p { font-size: 14.5px; color: var(--ink-soft); margin: 5px 0; }
nav.toc { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin: 22px 0 30px; }
nav.toc h2 { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .14em;
  color: var(--ink-soft); margin: 0 0 10px; text-transform: uppercase; }
nav.toc ul { list-style: none; margin: 0; padding: 0; }
nav.toc li { font-size: 15px; margin: 4px 0; }
nav.toc a { text-decoration: none; }
nav.toc a:hover { text-decoration: underline; }
.paper h2 { margin-top: 40px; }
.paper h2[id], .paper h3[id] { scroll-margin-top: 24px; }
.paper blockquote { border-left: 2px solid var(--rule); margin: 18px 0; padding: 2px 2px 2px 16px;
  color: var(--ink-soft); }
.paper blockquote p { font-size: 16px; margin: 8px 0; }
.refs p { font-size: 15px; color: var(--ink-soft); margin: 9px 0; padding-left: 20px; text-indent: -20px; }

/* news & intel timeline (intel.html) — filters + status markers */
.intel-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0 4px; }
.intel-filters .flabel { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--ink-soft); margin-right: 2px; }
.fbtn { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); background: var(--panel);
  border: 1px solid var(--line); border-radius: 20px; padding: 6px 13px; min-height: 24px; cursor: pointer; }
.fbtn:hover { color: var(--ink); background: var(--accent-soft); }
.fbtn.on { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent); }
.intel-count { font-size: 13.5px; color: var(--ink-soft); margin: 8px 0 14px; }
.intel-entry .when { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--ink-soft); margin: 0 0 2px; }
.intel-entry h3 { margin: 4px 0 6px; }
.intel-entry .src { font-size: 14px; color: var(--ink-soft); margin: 8px 0 0; }
.intel-entry .fence { font-size: 14px; color: var(--ink-soft); border-top: 1px dashed var(--line);
  margin: 10px 0 0; padding-top: 8px; }
.intel-entry .fence strong { font-size: 12px; letter-spacing: .06em; color: var(--ink-soft); }
.st { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  padding: 1px 9px; border-radius: 20px; margin-left: 8px; vertical-align: 1px; }
.st-verified { background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent); }
.st-reported { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); }
.st-historical { background: var(--bg); color: var(--ink-soft); border: 1px solid var(--line); }
.st-gravest { background: transparent; color: var(--ink); border: 1px solid var(--accent); }
.st-credit { background: transparent; color: var(--ink-soft); border: 1px dotted var(--line); }

/* ─── /intel era bands (C5.3) ─── group the timeline into per-year "era bands": a quiet
   section-hue year header + a status tally over the (byte-identical) entry cards. ALL scoped under
   #intel-timeline so it never touches the shared .card/.intel-entry/.st on /openai. --sec (=--sec-case
   here) as text on --bg verified AA (min 4.90) across all 11 themes; the hairline is decoration only. */
#intel-timeline .era { margin: 26px 0 0; }
#intel-timeline .era:first-child { margin-top: 6px; }
#intel-timeline .era-head { display: flex; align-items: baseline; gap: 0 12px; flex-wrap: wrap;
  padding: 0 0 8px 10px; margin: 0 0 12px; border-left: 3px solid var(--sec, var(--rule));
  border-bottom: 1px solid var(--line); }
#intel-timeline .era-year { font-family: var(--serif); font-weight: 700; font-size: var(--step-1);
  letter-spacing: .01em; line-height: 1; color: var(--sec, var(--ink)); font-variant-numeric: lining-nums; }
#intel-timeline .era-tally { font-size: 12px; letter-spacing: .04em; color: var(--ink-soft); }
#intel-timeline .era-cards { display: grid; gap: 12px; }
.intel-recency { font-size: 13px; color: var(--ink-soft); margin: -6px 0 14px; }

/* openai record page — reader jump-chips, surfaced quotes, authored pull-quotes */
.oai-jump { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 6px; }
.oai-jump a { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); background: var(--panel);
  border: 1px solid var(--line); border-radius: 20px; padding: 6px 13px; min-height: 24px; text-decoration: none; }
.oai-jump a:hover { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent); }
.intel-entry .oai-quote { margin: 10px 0 0; padding: 4px 0 4px 14px; border-left: 2px solid var(--accent);
  font-style: italic; color: var(--ink); font-size: 15px; }
.intel-entry .oai-quote cite { display: block; margin-top: 4px; font-style: normal; font-size: 12.5px; color: var(--ink-soft); }
blockquote.oai-pull { margin: 14px 0; padding: 8px 0 8px 16px; border-left: 3px solid var(--accent); font-size: 17px; color: var(--ink); }
blockquote.oai-pull p { margin: 0; }
blockquote.oai-pull cite { display: block; margin-top: 6px; font-size: 13.5px; font-style: normal; color: var(--ink-soft); }

/* library — generated catalog index with publication-status tags */
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--accent); }
.lib-legend { line-height: 2.1; }
.lib-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.lib-tag { display: inline-flex; align-items: center; min-height: 24px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; padding: 3px 10px; border-radius: 20px; text-decoration: none; border: 1px solid var(--line); }
.lib-tag.lib-site { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.lib-tag.lib-zenodo { background: transparent; color: var(--accent); border-color: var(--accent); }
.lib-tag.lib-zenodo:hover { background: var(--accent-soft); color: var(--accent-ink); }
.lib-tag.lib-planned { background: transparent; color: var(--ink-soft); border-style: dashed; }
.lib-tag.lib-medium { background: transparent; color: var(--accent); border-color: var(--accent); }
.lib-tag.lib-medium:hover { background: var(--accent-soft); color: var(--accent-ink); }
.lib-tag.lib-staged { background: var(--crisis-bg); color: var(--crisis-ink); border-color: var(--crisis-line); }
.lib-tag.lib-live { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.lib-tag.lib-author { background: transparent; color: var(--flag); border-color: var(--flag); }

/* ═══════════════════ REGISTERS (C3 P2) — one publication, four voices ═══════════════════
   A body.reg-* re-points measure/leading/heading-ladder/ornament ONLY. Brand, nav, footer,
   palette, shared margins, the single serif family stay invariant across all ~90 pages. */
body.reg-record  { --measure: 39rem; --leading: 1.58; }
body.reg-paper   { --measure: 45rem; }
body.reg-account { --measure: 41rem; --leading: 1.72; }
body.reg-help    { --measure: 35rem; --leading: 1.72; }

/* DOCUMENT register — the filed record (reg-record). Authority before the first word. */
.doc-eyebrow { font-family: var(--sans); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--rule); margin: 0 0 18px; }
.doc-letterhead { margin: 0 0 4px; }
.doc-title { font-family: var(--serif); font-weight: 600; font-size: var(--step-4); letter-spacing: -.012em;
  line-height: 1.14; margin: 0 0 7px; }
.doc-sub { font-family: var(--sans); font-size: 13px; letter-spacing: .04em; color: var(--ink-soft); margin: 0; }
.doc-rule { border: 0; border-top: 1px solid var(--rule); opacity: .55; margin: 16px 0 20px; }
dl.doc-meta { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0 0 26px; }
dl.doc-meta dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); padding-top: 3px; }
dl.doc-meta dd { margin: 0; font-size: 16.5px; color: var(--ink); line-height: 1.5; }
.attestation { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin: 26px 0; padding: 18px 0 18px 22px; }
.attestation .att-label { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rule); margin-bottom: 10px; }
.attestation p { font-size: 16.5px; line-height: 1.6; margin: 0; }
.attestation .att-sig { font-size: 14px; color: var(--ink-soft); margin-top: 12px; }

/* EXHIBIT — provenance furniture (built once; used on record + evidence pages). Replaces .prompt for verbatim. */
figure.exhibit { margin: 24px 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.exhibit-head { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); background: var(--panel);
  border-bottom: 1px solid var(--line); padding: 10px 16px; line-height: 1.65; }
.exhibit-head b { color: var(--ink); font-weight: 600; }
.exhibit-body { padding: 16px; font-size: 15.5px; line-height: 1.62; }
.exhibit-body.verbatim { font-family: var(--serif); }
.exhibit-transcript .turn { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 14px; }
.exhibit-transcript .turn:last-child { margin-bottom: 0; }
.exhibit-transcript .who { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); padding-top: 3px; }
.exhibit-transcript .said { margin: 0; }
@media (max-width: 560px) { .exhibit-transcript .turn { grid-template-columns: 1fr; gap: 2px; } }
.redaction { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); background: var(--accent-soft);
  border-radius: 3px; padding: 0 6px; }
figcaption.provenance { border-top: 1px solid var(--line); background: var(--bg); padding: 12px 16px;
  display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; }
.provenance dt { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); }
.provenance dd { margin: 0; font-size: 13.5px; color: var(--ink); }
.verify-chip { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .03em;
  color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 4px; padding: 2px 9px; }
.breaks { border-left: 2px solid var(--rule); padding: 4px 0 4px 16px; margin: 18px 0; }
.breaks .breaks-k { font-family: var(--sans); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); display: block; margin-bottom: 4px; }
.breaks p { font-size: 15px; color: var(--ink-soft); margin: 0; }

/* ACCOUNT register — editorial ornament (reg-account only) */
.reg-account .dropcap::first-letter { font-family: var(--serif); font-weight: 600; font-size: 3.2em; line-height: .8;
  float: left; padding: 5px 11px 0 0; color: var(--accent); }
.pull { border-left: 2px solid var(--rule); margin: 24px 0; padding: 2px 0 2px 18px; font-family: var(--serif);
  font-style: italic; font-size: var(--step-2); line-height: 1.36; color: var(--ink); }
.pull cite { display: block; font-style: normal; font-size: 14px; color: var(--ink-soft); margin-top: 8px; }

/* PAPER register — deepened heading ladder so a skimming reader can read structure */
.reg-paper h2 { font-size: var(--step-3); margin-top: 48px; letter-spacing: -.005em; }
.reg-paper h3 { font-size: var(--step-1); letter-spacing: .005em; color: var(--ink); }

/* HELP register — approachable: larger headings, soft cards retained, larger targets */
.reg-help h2 { margin-top: 38px; }
.reg-help nav.main a, .reg-help .fbtn { min-height: 28px; }

/* WAYFINDING (C3 P4) — exactly two rails: a breadcrumb carrying the spine step, and read-next */
nav.crumbs { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); margin: 0 0 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; }
nav.crumbs a { color: var(--ink-soft); text-decoration: none; }
nav.crumbs a:hover { color: var(--accent); text-decoration: underline; }
nav.crumbs .sep { color: var(--line); }
nav.crumbs [aria-current="page"] { color: var(--ink); }
nav.crumbs .spine-step { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rule); border: 1px solid var(--line); border-radius: 20px; padding: 2px 10px; margin-right: 4px; }
.read-next { border-top: 1px solid var(--line); margin: 44px 0 0; padding: 22px 0 0; }
.read-next h2 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; }
.read-next ul { list-style: none; margin: 0; padding: 0; }
.read-next li { border-top: 1px solid var(--line); }
.read-next li:first-child { border-top: 0; }
.read-next a { display: flex; align-items: baseline; gap: 14px; padding: 14px 2px; text-decoration: none; color: var(--ink); }
.read-next a:hover .rn-t { color: var(--accent); }
.read-next .rn-main { flex: 1; }
.read-next .rn-t { font-weight: 600; font-size: 16px; }
.read-next .rn-d { display: block; font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }
.scent { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 20px; padding: 1px 9px; white-space: nowrap; }

/* DOORS — the homepage / hub intent router, re-cut as hairline-divided typographic rows (no cards) */
.doors { margin: 26px 0; }
.door { display: flex; align-items: baseline; gap: 16px; padding: 18px 4px; border-top: 1px solid var(--line);
  text-decoration: none; color: var(--ink); }
.door:last-child { border-bottom: 1px solid var(--line); }
.door .door-main { flex: 1; }
.door .door-t { font-family: var(--serif); font-weight: 600; font-size: var(--step-1); letter-spacing: -.005em; }
.door .door-d { display: block; font-size: 14px; color: var(--ink-soft); margin-top: 3px; line-height: 1.45; }
.door .door-arrow { color: var(--rule); font-size: 18px; flex: none; }
.door:hover .door-t { color: var(--accent); }

/* SOFT-LANDING (C3 P5) — on affected/teen pages help DOMINATES by hierarchy; verbatim is opt-in */
.soft-landing { border: 1px solid var(--line); border-left: 3px solid var(--rule); border-radius: 0 10px 10px 0;
  background: var(--panel); padding: 18px 20px; margin: 6px 0 28px; }
.soft-landing > :first-child { margin-top: 0; }
.soft-landing h2 { font-size: var(--step-2); margin: 0 0 8px; }
.soft-landing .actions { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; }
.soft-landing .primary { font-weight: 600; }
details.deeper.gated > summary { color: var(--ink-soft); font-style: italic; }

/* ─── Section identity (C5.2) ─── the several-things architecture, made visible.
   One restrained hue per section + a slim band under the header: a 3px tick, small caps, a one-line
   dek, and the section's pillar links. Typography and a hairline do the work — no chrome. */
:root {
  --sec-case: #7A342B;        /* the case & record — archival oxblood */
  --sec-research: #3D4E6E;    /* research — deep slate-indigo */
  --sec-guardian: #55602A;    /* the fix — the site's constructive olive */
  --sec-help: #2F5D57;        /* help — calm deep teal */
  --sec-understand: #6B5B41;  /* education — neutral warm bronze */
  --sec-institute: #565A60;   /* institute — graphite */
}

/* ─── READER THEMES (C5.2 built → C5.3 curated to Emily's final set: 4 Light / 3 Medium / 3 Dark) —
   full palettes incl. per-theme section hues. Placed AFTER the :root section-hue defaults so each
   theme's own hues win the cascade (equal specificity → later source wins). Every text/bg +
   section-hue pair WCAG-AA verified (contrast recomputed C5.3, incl. the nav/kicker section-hue). */
/* Sepia — warm e-reader / book mode (kept back at Merlin's call: the #1 requested reader mode). */
[data-theme="sepia"] {
  --bg: #EFE3CC; --panel: #E6D7BB; --ink: #3B2E22; --ink-soft: #63513D; --line: rgba(59,46,34,.16); --accent: #7A4B2B; --accent-soft: #E6D3B8; --accent-ink: #5A331A; --rule: #7A4B2B; --crisis-bg: #F1DDD0; --crisis-ink: #7A2A1A; --crisis-line: #E0BEA9; --flag: #8A4B2A; --shadow: none;
  --sec-case: #7A342B; --sec-research: #3D4E6E; --sec-guardian: #4E5626; --sec-help: #2C574F; --sec-understand: #63512F; --sec-institute: #4F5359;
}
/* MEDIUM category (C5.2) — muted mid-tone colored grounds with DARK ink (Merlin: "softer, less
   bright, dark letters, since Contrast covers legibility"). Grounds sit at ~0.60 luminance — a step
   below the bright lights, well above the darks. accent-soft/accent-ink follow the light convention
   (light tint + dark accent text) so the active-nav / active-menu state stays legible; --rule = accent
   so section kickers read. Every pair WCAG-AA verified. */
/* Sage — a muted grey-green reading room (softened from the old bright sage). */
[data-theme="sage"] {
  --bg: #C9CFC0; --panel: #D4D9CB; --ink: #22271F; --ink-soft: #454B3F; --line: rgba(34,39,31,.16); --accent: #3A5445; --accent-soft: #DEE4D8; --accent-ink: #223A2E; --rule: #3A5445; --crisis-bg: #E8CFC5; --crisis-ink: #7A241C; --crisis-line: #D2A99F; --flag: #7A241C; --shadow: none;
  --sec-case: #7A2A2E; --sec-research: #3A3F63; --sec-guardian: #4A5227; --sec-help: #1F5450; --sec-understand: #6E4A22; --sec-institute: #3A3E42;
}
/* Midnight — true OLED deep-dark, near-black warm-neutral ground (deeper than the dim Night). */
[data-theme="midnight"] {
  --bg: #0C0D10; --panel: #141519; --ink: #E4E0D6; --ink-soft: #9AA0A8; --line: rgba(228,224,214,.11); --accent: #7FB0C6; --accent-soft: #1B2830; --accent-ink: #CFE3EE; --rule: #7FB0C6; --crisis-bg: #241713; --crisis-ink: #F2C4B6; --crisis-line: #4A2E26; --flag: #D69476; --shadow: none;
  --sec-case: #DE9484; --sec-research: #A5B6DC; --sec-guardian: #BCC77C; --sec-help: #8AC6BD; --sec-understand: #C8B291; --sec-institute: #AEB2B9;
}


/* CURATED KEEPERS (C5.3, Emily's picks) — the rest of the shipped light/medium/dark set. */
/* Newsprint (light) */
[data-theme="newsprint"] {
  --bg: #e8e9ea; --panel: #f4f4f2; --ink: #191b1e; --ink-soft: #484c52; --line: rgba(25,27,30,.12); --accent: #a3341f; --accent-soft: #f0dfd7; --accent-ink: #7a2415; --rule: #a3341f; --crisis-bg: #f6e4de; --crisis-ink: #8a2c17; --crisis-line: #e0b8ab; --flag: #8a4b2a; --shadow: none;
  --sec-case: #7a1f22; --sec-research: #33416b; --sec-guardian: #4d5320; --sec-help: #0f5d5b; --sec-understand: #7d4a1c; --sec-institute: #3a4046;
}
/* Bluebook (light) */
[data-theme="bluebook"] {
  --bg: #EDF1F8; --panel: #F6F8FC; --ink: #141A26; --ink-soft: #414B5E; --line: rgba(20,30,60,0.12); --accent: #1E3A6E; --accent-soft: #D3DEF0; --accent-ink: #16305C; --rule: #1E3A6E; --crisis-bg: #F7E3E0; --crisis-ink: #8A2118; --crisis-line: #C25B4B; --flag: #8A2118; --shadow: none;
  --sec-case: #7C2118; --sec-research: #2E3E7A; --sec-guardian: #4A5320; --sec-help: #0F5B5B; --sec-understand: #7A4A17; --sec-institute: #3A4250;
}
/* Contrast — high-legibility ACCESSIBILITY mode (body text hits AAA; heavier rules). Restored C5.3 for
   the low-vision / neurodivergent readers the mission centers; shown as "High Contrast" in the picker. */
[data-theme="contrast"] {
  --bg: #FBFBFA; --panel: #F2F1EE; --ink: #111417; --ink-soft: #3E464E; --line: rgba(17,20,23,.30); --accent: #0B4F8A; --accent-soft: #DDE7F0; --accent-ink: #08375F; --rule: #0B4F8A; --crisis-bg: #FBEAE4; --crisis-ink: #8A1B0E; --crisis-line: #D98B79; --flag: #9A3A18; --shadow: none;
  --sec-case: #8A2018; --sec-research: #243A66; --sec-guardian: #3F4A15; --sec-help: #155049; --sec-understand: #5A4A2E; --sec-institute: #3E4247;
}
/* Wheat (medium) */
[data-theme="wheat"] {
  --bg: #c8b487; --panel: #d3c199; --ink: #2e2413; --ink-soft: #54452a; --line: rgba(46,36,19,.16); --accent: #653810; --accent-soft: #e6d7b4; --accent-ink: #5a3410; --rule: #653810; --crisis-bg: #e9cba0; --crisis-ink: #8a1c10; --crisis-line: #8a1c10; --flag: #8a1c10; --shadow: none;
  --sec-case: #7a2426; --sec-research: #2f3f66; --sec-guardian: #4a4a1e; --sec-help: #0d4d46; --sec-understand: #613b0e; --sec-institute: #33383e;
}
/* Heather (medium) */
[data-theme="heather"] {
  --bg: #c0bbd0; --panel: #c9c4d8; --ink: #231f2e; --ink-soft: #413b52; --line: rgba(28,24,38,.16); --accent: #40316b; --accent-soft: #e6e2f0; --accent-ink: #352a58; --rule: #40316b; --crisis-bg: #eddcd8; --crisis-ink: #912117; --crisis-line: #912117; --flag: #912117; --shadow: none;
  --sec-case: #7c1f1d; --sec-research: #2b3563; --sec-guardian: #3e4a1f; --sec-help: #0d4a48; --sec-understand: #6a441a; --sec-institute: #2c2e36;
}
/* Forest (dark) */
[data-theme="forest"] {
  --bg: #101a12; --panel: #16241a; --ink: #e9ecdf; --ink-soft: #a9b6a3; --line: rgba(233,236,223,.12); --accent: #8fc99a; --accent-soft: #1e3324; --accent-ink: #bfe5c6; --rule: #8fc99a; --crisis-bg: #2a1c18; --crisis-ink: #f0c2b2; --crisis-line: #4a302a; --flag: #8fc99a; --shadow: none;
  --sec-case: #e0918a; --sec-research: #9fb0e0; --sec-guardian: #b9c58f; --sec-help: #79c8bf; --sec-understand: #d0a878; --sec-institute: #aeb6ad;
}
/* Navy (dark) */
[data-theme="navy"] {
  --bg: #0b1622; --panel: #111f30; --ink: #e4ecf5; --ink-soft: #a3b3c6; --line: rgba(200,220,240,.12); --accent: #5ec8e0; --accent-soft: #0d2a38; --accent-ink: #8fdcef; --rule: #5ec8e0; --crisis-bg: #3a1518; --crisis-ink: #ffb3ad; --crisis-line: #7a2a2a; --flag: #f0918c; --shadow: none;
  --sec-case: #f0918c; --sec-research: #9db4e8; --sec-guardian: #b6c88a; --sec-help: #6fd4cf; --sec-understand: #e0b48a; --sec-institute: #a9b7c6;
}

body[data-section="case"]       { --sec: var(--sec-case); }
body[data-section="research"]   { --sec: var(--sec-research); }
body[data-section="guardian"]   { --sec: var(--sec-guardian); }
body[data-section="help"]       { --sec: var(--sec-help); }
body[data-section="understand"] { --sec: var(--sec-understand); }
body[data-section="institute"]  { --sec: var(--sec-institute); }

.sband { border-bottom: 1px solid var(--line); font-size: 13px; }
.sband .inner { max-width: var(--chrome); margin: 0 auto; padding: 8px 22px;
  display: flex; flex-wrap: wrap; gap: .3em 1.1em; align-items: baseline; }
.sband .sb-name { font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  font-size: 11px; color: var(--sec, var(--ink)); text-decoration: none;
  border-left: 3px solid var(--sec, var(--rule)); padding-left: 8px; flex: none; }
.sband .sb-name:hover { color: var(--ink); }
.sband .sb-dek { color: var(--ink-soft); }
.sband .sb-links { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 3px; }
/* the section's pillar pages are the sub-nav — make the links obvious: the site's accent link colour
   + a quiet underline at rest, a hover pill (as the top nav) so they clearly read as clickable. The
   current page (.here) is hued + bold + NOT underlined — "you are here" stays distinct from "go there". */
.sband .sb-links a, .sband .sb-links .here { padding: 2px 8px; border-radius: 6px; }
.sband .sb-links a { color: var(--accent); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sband .sb-links a:hover { color: var(--accent-ink); background: var(--accent-soft); text-decoration: none; }
.sband .sb-links .here { color: var(--sec, var(--ink)); font-weight: 600; }
@media (max-width: 760px) {
  .sband .sb-dek { display: none; }
  .sband .sb-links { margin-left: 0; width: 100%; }
}

/* the homepage section index — the "we are several things" statement, as a list */
ul.sec-index { list-style: none; padding: 0; margin: 14px 0 0; }
ul.sec-index li { margin: 9px 0; padding-left: 11px; border-left: 3px solid var(--t, var(--line)); }
ul.sec-index li a strong { letter-spacing: .02em; }
ul.sec-index .t-case { --t: var(--sec-case); }
ul.sec-index .t-research { --t: var(--sec-research); }
ul.sec-index .t-guardian { --t: var(--sec-guardian); }
ul.sec-index .t-help { --t: var(--sec-help); }
ul.sec-index .t-understand { --t: var(--sec-understand); }
ul.sec-index .t-institute { --t: var(--sec-institute); }

/* footer section map */
footer.sitefoot .fmap { font-size: 13px; color: var(--ink-soft); margin-top: 10px; }
footer.sitefoot .fmap a { color: var(--ink-soft); }
footer.sitefoot .fmap a:hover { color: var(--ink); }

/* The Drift — newsletter signup (footer block on every page + the fuller support-page form). Plain
   Buttondown embed, no JS. Button = --bg text on --accent (the site's link pairing, inverted) — AA every theme. */
.foot-signup { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.foot-signup .fs-lead { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 9px; max-width: 46rem; }
.foot-signup .fs-lead strong { color: var(--ink); }
.signup { margin: 0; }
.signup-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.signup-input { flex: 1 1 240px; min-width: 0; padding: 9px 12px; font: inherit; font-size: 15px;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.signup-input::placeholder { color: var(--ink-soft); }
.signup-input:focus-visible { outline: 2px solid var(--rule); outline-offset: 1px; border-color: var(--accent); }
.signup-btn { flex: none; padding: 9px 20px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  color: var(--bg); background: var(--accent); border: 1px solid var(--accent); border-radius: 8px; }
.signup-btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.signup-block { max-width: 30rem; margin: 4px 0 24px; }

/* print — clean PDF of papers/essays (hide chrome, ink-on-white, sensible breaks) */
@media print {
  .topbar, .sitefoot, .skip, #rirev, nav.main, .themeswitch, nav.crumbs, .read-next, .sband { display: none !important; }
  #intel-timeline .era-tally { display: none !important; }
  main > p.note:has(a[href^="publications"]) { display: none !important; }
  body { background: #fff; color: #111; font-size: 11pt; }
  main { max-width: 100%; margin: 0; padding: 0; }
  a { color: #111; text-decoration: none; }
  .paper-meta, nav.toc, .card, ol.numbered > li, ul.markers > li,
  figure.exhibit, dl.doc-meta, .attestation { break-inside: avoid; }
  h1.page, h2, h3, .doc-title { break-after: avoid; }
  .paper blockquote, .breaks p, figcaption.provenance dd { color: #333; }
}