/* ═══════════════════════════════════════════
   NAKADA FOUNDATION TO SAVE HUMANITY
   ═══════════════════════════════════════════ */

/* ─── SELF-HOSTED FONTS (latin subset) ───
   Display: Cormorant Garamond (headings).
   Body: Computer Modern Roman via Latin Modern Roman OTFs (Knuth's CM family;
   LM is the standard Unicode/OpenType cut used on the web).
   UI chrome: Inter. Never re-add fonts.googleapis.com. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/cormorant-garamond.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;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-italic.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;
}
@font-face {
  font-family: 'Computer Modern Roman';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/computer-modern-roman.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;
}
@font-face {
  font-family: 'Computer Modern Roman';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/computer-modern-roman-italic.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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/fonts/inter.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;
}

/* ─── RESET ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── TOKENS ─── */
:root {
  --black:       #080808;
  --dark:        #0d0d0d;
  --darker:      #111111;
  /* Channel triplets of the two section backgrounds. .section-art fades a painting
     out into whichever of them its section sits on, so the scrim needs them as
     rgba() components; keep in sync with --black / --darker above and in light mode. */
  --black-rgb:   8, 8, 8;
  --darker-rgb:  17, 17, 17;
  --white:       #f0ece4;
  --white-mid:   rgba(240, 236, 228, 0.65);
  --white-dim:   rgba(240, 236, 228, 0.35);
  --red:         #b91c1c;
  --red-bright:  #dc2626;
  /* Text-only reds. --red / --red-bright above are unchanged on purpose: they are
     also button backgrounds and borders, where white-on-#b91c1c is 5.67:1 and
     lightening the fill would push the button's own label under AA.
     Red TEXT can't use them on the dark backgrounds — #b91c1c is 2.92:1 on --darker
     and #dc2626 only 3.91:1, against the 4.5:1 small-text minimum.
     These are per-theme by necessity, not taste: on the brand hue, light mode needs
     lightness <=46% and dark needs >=57%, so no single value clears 4.5:1 in both. */
  --red-text:       #e24141;  /* 4.83:1 on --black, 4.55:1 on --darker */
  --red-text-hover: #e85d5d;  /* 5.87:1 / 5.53:1 — hover must gain contrast, not lose it */
  --gold:        #c9a227;
  /* Font roles:
     --serif  = display headings (Cormorant Garamond)
     --body   = main prose / paragraphs (Computer Modern Roman via Latin Modern)
     --sans   = UI chrome, labels, nav, buttons (Inter)
     System Noto/CJK/Arabic faces cover localized pages. */
  --serif:       'Cormorant Garamond', 'Noto Serif', 'Songti SC', 'Hiragino Mincho ProN', 'Didot', 'Times New Roman', serif;
  --body:        'Computer Modern Roman', 'Latin Modern Roman', 'Computer Modern', 'CMU Serif', 'Noto Serif', 'Times New Roman', serif;
  --sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Arabic', 'PingFang SC', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Malgun Gothic', 'IPAGothic', 'Segoe UI Historic', sans-serif;
  --pad:         clamp(60px, 8vw, 120px);
  --gutter:      clamp(20px, 5vw, 60px);
  --max:         1200px;
  --nav-glass:    rgba(8, 8, 8, 0.96);
  --nav-glass-hvy: rgba(8, 8, 8, 0.97);
  --border-a:     rgba(240, 236, 228, 0.05);
  --border-b:     rgba(240, 236, 228, 0.08);
  --border-c:     rgba(240, 236, 228, 0.06);
  --border-d:     rgba(240, 236, 228, 0.07);
}

/* Japanese pages: put CJK faces first so body/nav aren't latin-only
   Computer Modern / Inter with per-glyph fallback (uneven mixed lines). */
html[lang="ja"] {
  --serif: 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', 'Noto Serif JP', 'Source Han Serif', 'Cormorant Garamond', serif;
  --body:  'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', 'Noto Serif JP', 'IPAMincho', 'Computer Modern Roman', serif;
  --sans:  'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Noto Sans JP', 'IPAGothic', 'Inter', sans-serif;
}

/* ─── BASE ─── */
html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--black);
  color: var(--white);
  /* Body defaults to Computer Modern Roman for prose. UI chrome sets --sans. */
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: on short pages the footer sits at the bottom of the viewport
     instead of floating with blank space beneath it. The fixed nav is out of
     flow, so only the content sections + footer are flex items here. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h2 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--white);
}

h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--white);
  margin-bottom: 12px;
}

p {
  font-family: var(--body);
  color: var(--white-mid);
  line-height: 1.85;
  font-size: 0.975rem;
}

strong { color: var(--white); font-weight: 500; }

a { color: inherit; text-decoration: none; }
/* In-prose links: same ink as surrounding text + underline; brand red on hover. */
a.text-link {
  color: inherit;
  border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  transition: border-color 0.25s, color 0.25s;
}
a.text-link:hover {
  color: var(--red-text);
  border-bottom-color: var(--red);
}


img { display: block; max-width: 100%; }

/* ─── LAYOUT HELPERS ─── */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section-label {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-text);
  margin-bottom: 20px;
}
.section-label a {
  color: inherit;
  text-decoration: none;
}
.section-label a:hover {
  color: var(--red-text-hover);
}
/* Related-tools header: same type as .section-label, mid ink; red only on hover. */
a.tools-all-link {
  color: var(--white-mid);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
a.tools-all-link:hover,
a.tools-all-link:focus-visible {
  color: var(--red-text);
  outline: none;
}

.section-intro {
  font-family: var(--body);
  color: var(--white-mid);
  font-size: 1.08rem;
  line-height: 1.78;
  max-width: 680px;
  margin-bottom: 0;
}

/* FAQ accordion band on painted pages: keep house chevron + borders readable,
   and give the intro breathing room before the list (matches /faq/ rhythm). */
.faq-section .section-intro {
  margin-top: 8px;
  margin-bottom: 0;
  max-width: 42rem;
}
.faq-section .faq-list {
  margin-top: 44px;
}
/* Glass rows on painted FAQ bands so rules don't dissolve into the scrim */
.section-art.faq-section details.faq-item,
.faq-section.section-art details.faq-item {
  padding-left: 0;
  padding-right: 0;
}
.section-art.faq-section .faq-q,
.faq-section.section-art .faq-q {
  font-size: 1.35rem;
}

/* ─── BUTTONS ─── */
.btn-primary {
  display: inline-block;
  background: var(--red);
  color: #f0ece4; /* fixed light text, red button is identical in both themes (5.49:1) */
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 15px 38px;
  border: none;
  cursor: pointer;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.btn-primary:hover { background: var(--red-bright); box-shadow: 0 0 20px rgba(220, 38, 38, 0.6); }

.btn-secondary {
  display: inline-block;
  border: 1px solid rgba(185, 28, 28, 0.5);
  color: var(--white);
  background: transparent;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 36px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.25s, background 0.25s;
}
button.btn-secondary { appearance: none; -webkit-appearance: none; }
.btn-secondary:hover { border-color: var(--red); background: rgba(185, 28, 28, 0.08); }

/* ═══════════════════════════════════════════
   LOGO SVG
   ═══════════════════════════════════════════ */
.logo-svg, .footer-logo-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.logo-upper {
  font-family: 'Cormorant Garamond', serif;
  font-size: 50px;
  font-weight: 400;
  fill: var(--white, #f0ece4);
  letter-spacing: 4px;
}

.logo-for {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 300;
  font-style: italic;
  fill: rgba(240, 236, 228, 0.55);
}

.logo-lower {
  font-family: 'Cormorant Garamond', serif;
  font-size: 96px;
  font-weight: 700;
  fill: var(--white, #f0ece4);
}

.logo-lower-footer {
  font-family: 'Cormorant Garamond', serif;
  font-size: 96px;
  font-weight: 700;
  fill: rgba(240, 236, 228, 0.15);
}

/* ═══════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════ */
/* One nav everywhere. The homepage used to open with a taller transparent
   bar (26px, turning to glass on scroll), which made the bar re-dress and
   shift ~8px on every home ↔ inner navigation once pages started
   crossfading. Owner call: the bar is globally identical, so it never
   moves. The transition remains for the theme swap only. */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gutter);
  background: var(--nav-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-d);
  transition: background 0.4s ease, border-color 0.4s ease;
}

/* logo.png carries ~39.7px of baked-in transparent padding on each side, so a
   symmetric --gutter leaves the *visible* mark further from the edge than the
   globe icon on the right. Pull the box back by that optical difference so the
   ink-to-edge gap matches on both ends (constant at every breakpoint, since the
   logo is a fixed 228x64 and both sides share the same gutter). */
.nav-brand {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: -26.42px;
}
.nav-brand-img {
  height: 64px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 6px;
  margin-left: auto;
}

/* ─── NAV GROUPS (dropdown categories) ─── */
.nav-group {
  position: relative;
}

.nav-group-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-mid);
  text-decoration: none;           /* the parent labels are now <a> links to hub pages */
  transition: color 0.25s;
  padding: 16px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-group-btn::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.nav-group:hover .nav-group-btn,
.nav-group.active .nav-group-btn {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 6px;
}

@media (hover: hover) and (pointer: fine) {
  .nav-group:hover .nav-group-btn::after {
  }
  .nav-group:hover .nav-dropdown { display: block; }
}

.nav-group.open .nav-group-btn { color: var(--white); }
.nav-group.open .nav-group-btn::after {
  transform: rotate(-135deg) translateY(-2px);
}
.nav-group.open .nav-dropdown { display: block; }

/* Current section: the top-level nav link for the page's section gets the red
   underline. `aria-current="page"` marks it on the section's own hub page;
   `.nav-current-section` (added by main.js) marks it on the section's sub-pages,
   so Foundation stays underlined while you're on /about/, /donate/, etc. */
.nav-group-btn[aria-current="page"],
.nav-group-btn.nav-current-section {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 6px;
}

/* Dropdown panel */
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--nav-glass-hvy);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-b);
  padding: 8px 20px 18px;
  list-style: none;
  min-width: 150px;
  white-space: nowrap;
  z-index: 100;
}

.nav-dropdown-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-text);
  margin-bottom: 10px;
}

.nav-dropdown a {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--white-mid);
  transition: color 0.25s;
  padding: 9px 4px;
}
.nav-dropdown a:hover,
.nav-dropdown a[aria-current="page"] {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 4px;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--white);
  transition: transform 0.3s, opacity 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ─── LANGUAGE SWITCH (globe beside theme toggle) ─── */
/* Keep the 40×40 hit box (dead space is the optical gap to theme/search).
   Icon color matches nav menu text (--white-mid → --white on hover).
   No circular gray fill / border / glow on hover (owner 2026-08-08). */
.lang-switch {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.lang-toggle {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  cursor: pointer;
  color: var(--white-mid);
  background: transparent;
  border: none;
  box-shadow: none;
  transition: color 0.25s;
}
.lang-toggle:hover,
.lang-toggle[aria-expanded="true"] {
  color: var(--red-text);
  background: transparent;
  border: none;
  box-shadow: none;
}
.lang-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 168px;
  max-height: min(70vh, 480px);
  overflow-y: auto;
  background: var(--nav-glass-hvy);
  border: 1px solid var(--border-b);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 200;
}
.lang-menu[hidden] { display: none; }
.lang-menu li { margin: 0; }
.lang-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--white-mid);
  text-decoration: none;
  white-space: nowrap;
  text-transform: none;
  background: transparent;
}
/* Other languages only: red underline on hover/focus. No color/opacity/bg shift. */
.lang-menu a:hover:not([aria-current="true"]),
.lang-menu a:focus-visible:not([aria-current="true"]) {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 4px;
  outline: none;
}
/* Current language: red label only — never underline, even on hover. */
.lang-menu a[aria-current="true"],
.lang-menu a[aria-current="true"]:hover,
.lang-menu a[aria-current="true"]:focus-visible {
  color: var(--red-text);
  text-decoration: none;
  background: transparent;
  outline: none;
}

/* RTL pages (Arabic): mirror directional chrome without breaking LTR media. */
[dir="rtl"] .nav-links { margin-left: 0; margin-right: auto; }
[dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .nav-group-btn::after {
  transform: rotate(-45deg) translateY(-2px);
}
[dir="rtl"] .footer-cols { direction: rtl; }
[dir="rtl"] .nav-search-panel {
  right: auto;
  left: 0;
}

/* ─── NAV SEARCH (icon → dropdown, left of the Donate CTA) ─── */
.nav-search { position: relative; display: flex; align-items: center; }

/* Trimmed left padding balances the magnifier optically: its left neighbor is
   the TOOLS dropdown caret, which overhangs its own button's padding box, so a
   symmetric 12px reads ~4px wider on the left than on the right. */
.nav-search-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--white-mid);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 12px 7.7px;
  line-height: 0;
  transition: color 0.25s;
}
.nav-search-toggle:hover,
.nav-search.open .nav-search-toggle { color: var(--red-text); }
.nav-search-icon { width: 17px; height: 17px; display: block; }
.nav-search-label {          /* icon-only on desktop; label appears in the mobile menu */
  display: none;
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}

/* Dropdown panel, mirrors .nav-dropdown, but right-anchored and input-first */
.nav-search-panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  width: 340px;
  max-width: 78vw;
  background: var(--nav-glass-hvy);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-b);
  padding: 16px;
  z-index: 100;
}
.nav-search.open .nav-search-panel { display: block; }

.nav-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border-b);
  padding-bottom: 10px;
}
.nav-search-form-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--white-dim);
}
.nav-search-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--white);
  /* Body serif (Computer Modern) — placeholder + typed query match site prose */
  font-family: var(--body);
  font-size: 0.95rem;
  padding: 4px 0;
  /* Hide native clear “x” on type=search (WebKit/Blink gray cancel) */
  -webkit-appearance: none;
  appearance: textfield;
}
.nav-search-input::-webkit-search-cancel-button,
.nav-search-input::-webkit-search-decoration,
.nav-search-input::-webkit-search-results-button,
.nav-search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
  height: 0;
  width: 0;
}
.nav-search-input::placeholder {
  color: var(--white-dim);
  font-family: var(--body);
}

.nav-search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 46vh;
  overflow-y: auto;
}
.nav-search-results:not(:empty) { margin-top: 10px; }
.nav-search-results a {
  display: block;
  text-decoration: none;
  padding: 8px 6px;
}
.nav-search-result-title {
  display: block;
  /* +10% from 0.85rem */
  font-size: 0.935rem;
  color: var(--white-mid);
  line-height: 1.3;
  transition: color 0.2s;
}
.nav-search-results a:hover .nav-search-result-title,
.nav-search-results a.active .nav-search-result-title {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 3px;
}
.nav-search-result-desc {
  /* +10% from 0.72rem */
  font-size: 0.792rem;
  color: var(--white-dim);
  line-height: 1.35;
  margin-top: 3px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.nav-search-hint {
  /* Same size + body serif as input / placeholder (owner 2026-08) */
  font-size: 0.95rem;
  font-family: var(--body);
  color: var(--white-dim);
  margin: 12px 0 0;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════
   HERO (home)
   ═══════════════════════════════════════════ */
#hero {
  position: relative;
  height: 100svh;
  min-height: 680px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: clamp(80px, 10vh, 120px);
  text-align: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 65%, rgba(185, 28, 28, 0.13) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 15% 85%, rgba(185, 28, 28, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 85% 15%, rgba(185, 28, 28, 0.04) 0%, transparent 50%),
    var(--black);
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 24px;
  width: 100%;
  max-width: 860px;
}

.logo-mark {
  margin-bottom: 44px;
  width: 100%;
}

.hero-h1 {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-text);
  margin-bottom: 22px;
  /* Two-line eyebrow: uppercase + 0.22em tracking needs air between the lines,
     otherwise the second line reads as a continuation of the first. */
  line-height: 1.85;
  display: block;
  /* The eyebrow floats over the globe wireframe (dark theme) and the red hero glow
     (light theme); where a bright line or the glow crosses a glyph, local contrast
     dips. The shadow is var(--black) — the hero's own base colour in each theme
     (near-black / cream) — so it fills those crossings back to the base tone and
     stays invisible everywhere else. No colour change, no visible halo. */
  text-shadow: 0 0 10px var(--black), 0 0 4px var(--black), 0 1px 2px var(--black);
}

.tagline {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  font-weight: 300;
  font-style: italic;
  color: var(--white-mid);
  line-height: 1.65;
  margin-bottom: 40px;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════
   PAGE HERO (inner pages)
   ═══════════════════════════════════════════ */
.page-hero {
  position: relative;
  padding: calc(var(--pad) + 90px) 0 var(--pad);
  background: var(--black);
  overflow: hidden;
  border-bottom: 1px solid var(--border-a);
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 0% 100%, rgba(185, 28, 28, 0.1) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 100% 0%, rgba(185, 28, 28, 0.05) 0%, transparent 55%);
  pointer-events: none;
}

.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
}

.page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 28px;
}

.page-hero .lead {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--white-mid);
  line-height: 1.8;
  max-width: 660px;
}

/* ═══════════════════════════════════════════
   CATEGORY HUB PAGES
   /the-problem/, /our-response/, /foundation/, /learn/
   ONE continuous .section-art band: title block + card grid share a single
   painting. Two stacked .section-art bands join as a gray seam (see
   section-art-join-seam) — never split the hub into hub-hero + hub-section.
   Colors come from the theme tokens, so light mode adapts for free.
   ═══════════════════════════════════════════ */
/* Nav→label air tracks /tools/. Tools uses pad-top 100px + justify-content:center
   inside min-height calc(100vh - 101px), so labelTop ≈ 100 + max(0,(100vh-862)/2)
   (862 = 101 nav + 148 pad + ~613 tools content). Fixed 140px only matched one
   height; taller Mac viewports left hubs short of tools. Hubs stay flex-start
   (center made short 3-card hubs sit lower than Learn) and use the same formula
   so the kicker lines up with INTERACTIVE TOOLS at every desktop height.
   Bottom pad + tighter card chrome leave real air above the footer without
   touching the title block. */
.hub-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.hub-band {
  position: relative;
  overflow: hidden;
  background: var(--black);
  flex: 1;
  display: flex;
  flex-direction: column;
  /* flex-start so every hub shares the same nav→label air (center was
     pushing short 3-card hubs lower than the 2×2 Learn stack). */
  justify-content: flex-start;
  /* Top tracks tools centered labelTop; floor 100px = tools pad when free=0.
     Bottom 48px matches tools-band and keeps clear air above the footer. */
  padding: max(100px, calc(100px + (100vh - 862px) / 2)) 0 48px;
  border-bottom: none;
  min-height: 0;
  width: 100%;
  --art-max-h: 160vh;
}
.hub-band > .container {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* After kicker/go excision: card body fills without a bottom CTA row. */
.hub-card > p:last-child { margin-bottom: 0; }
.hub-hero-inner {
  position: relative;
  z-index: 2;
  /* Wide enough for Problem's long one-line h1 at max clamp; short titles ignore the room. */
  max-width: min(1100px, 100%);
  margin-bottom: 0;
  flex-shrink: 0;
}
/* Label → title stack (no lead on category hubs). Title size matches Learn
   ("Understand superintelligence.") on every hub; margins stay per-hub. */
.hub-band .section-label { margin-bottom: 18px; }
.hub-band h1 {
  font-family: var(--serif);
  font-size: clamp(2.15rem, 3.6vw, 2.85rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 22px;
}
/* Desktop: keep every hub title on one line (Problem is the long one). Wrap OK below. */
@media (min-width: 1200px) {
  .hub-band h1 { white-space: nowrap; }
}
/* Learn only: keep its existing title→grid air (others stay 22px). */
.hub-band:has(.hub-grid--2x2) h1 {
  margin-bottom: 26px;
}
.hub-band .lead {
  font-size: clamp(0.96rem, 1.05vw, 0.98rem);
  color: var(--white-mid);
  line-height: 1.5;
  max-width: 820px;
  margin-bottom: 0;
}
/* Default 3-col (Problem / Response). Learn + Foundation override below. */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 4px;
  flex: 0 1 auto;
  min-height: 0;
  align-content: stretch;
}
/* Learn: equal 2×2 tiles — content-sized rows (not viewport-filling 1fr) so
   cards stay compact and band pad-bottom is real air above the footer. */
.hub-grid--2x2 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  flex: 0 0 auto;
  max-height: none;
}
/* Foundation: 3×2 equal tiles — equal row tracks so all six cards match
   the tallest card’s height (row 2 was shorter under auto rows). */
.hub-grid--3x2 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  flex: 0 0 auto;
  max-height: none;
}
.hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Slightly open so the hub painting reads through the tiles. */
  background: rgba(var(--darker-rgb), 0.78);
  border: 1px solid rgba(240, 236, 228, 0.09);
  /* Uniformly tighter than before so flex grids leave bottom air. */
  padding: clamp(12px, 1.2vw, 18px);
  transition: border-color 0.25s;
  text-decoration: none;
  color: inherit;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}
.hub-card:hover { border-color: var(--red); }
.hub-card-kicker {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-text);
  margin-bottom: 6px;
}
.hub-card h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.28rem, 2vw, 1.72rem);
  color: var(--red-text); /* gold standard: problem hub titles */
  line-height: 1.1;
  margin: 0 0 8px;
}
.hub-card p {
  color: var(--white-mid);
  line-height: 1.5;
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  margin: 0;
  flex: 1;
}
/* Learn: card title + body still a step larger than default hubs, but scaled down. */
.hub-grid--2x2 .hub-card h2 {
  font-size: clamp(1.38rem, 2.15vw, 1.85rem);
}
.hub-grid--2x2 .hub-card p {
  font-size: clamp(0.96rem, 1.12vw, 1.05rem);
  line-height: 1.52;
}
.hub-go {
  align-self: flex-start;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 1px solid var(--red);
  padding-bottom: 3px;
  transition: color 0.2s;
}
.hub-card:hover .hub-go { color: var(--red-text); }
.hub-card-stretch { position: absolute; inset: 0; }

/* Desktop category hubs: lock page to one viewport — footer on-screen, no scroll. */
@media (min-width: 769px) {
  body.inner-page:has(> .hub-page) {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }
  body.inner-page:has(> .hub-page) #footer {
    flex-shrink: 0;
  }
}

@media (max-width: 768px) {
  .hub-grid,
  .hub-grid--2x2,
  .hub-grid--3x2 {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    max-height: none;
    flex: none;
    margin-top: 20px;
  }
  .hub-band { padding: 100px 0 32px; }
  body.inner-page:has(> .hub-page) {
    height: auto;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* ── Hero painting backdrop (opt-in: .page-hero.page-hero--art, page supplies --art) ──
   Same read as .section-art below, but this one can taper its scrim to nothing on
   the right: .page-hero-inner caps at 820px, so hero copy never reaches the bright
   edge and the painting gets to keep its full strength out there.

   --art MUST be an absolute path — url('/precedent/foo.webp'), not url('foo.webp').
   A relative url() inside a custom property resolves against the stylesheet that
   consumes the var(), which is this file, so a page-relative one silently 404s
   under /css/ and the section just renders as flat background.
   The painting holds a flat opacity and the scrim above it does the legibility work.
   Each theme needs its own weight — cream has to lift a bright painting to hold
   near-black copy, near-black barely has to do anything. */
.page-hero--art .page-hero-bg {
  background: none;
  --art-opacity: 0.5;
  /* Dark's steep falloff leaves the painting barely there behind the copy, but it
     clears by 91% rather than riding to the edge; that early release is what makes
     the right side match light's brightness instead of landing ~9% darker. */
  --hero-scrim: linear-gradient(100deg,
    rgba(var(--black-rgb), 0.98) 0%,
    rgba(var(--black-rgb), 0.82) 45%,
    rgba(var(--black-rgb), 0.58) 62%,
    rgba(var(--black-rgb), 0) 91%);
}

[data-theme="light"] .page-hero--art .page-hero-bg {
  --hero-scrim: linear-gradient(100deg,
    rgba(var(--black-rgb), 0.89) 0%,
    rgba(var(--black-rgb), 0.78) 45%,
    rgba(var(--black-rgb), 0.73) 62%,
    rgba(var(--black-rgb), 0) 100%);
}

.page-hero--art .page-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--art) var(--art-position, center) / var(--art-size, cover) no-repeat;
  opacity: var(--art-opacity);
}

/* The red radials are re-declared here so they stay above the scrim, as they are
   sitewide, rather than getting buried under it. */
.page-hero--art .page-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 0% 100%, rgba(185, 28, 28, 0.1) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 100% 0%, rgba(185, 28, 28, 0.05) 0%, transparent 55%),
    var(--hero-scrim);
}

/* Under 768px the copy runs the full width, so the scrim can't taper off — it has
   to hold to the right edge or the lead drops below 4.5:1.
   These are heavier than /about/'s mobile hero, which they were first copied from,
   and they have to be: that page's weights are tuned to Cole's "Consummation", and
   a brighter painting puts the lead straight through the floor. Measured on Orpen's
   "Versailles" — one of the brightest available — at 3.74:1 on the copied weights,
   4.7:1 on these. Re-measure if a page hangs a brighter picture than that here. */
@media (max-width: 768px) {
  .page-hero--art .page-hero-bg {
    --hero-scrim: linear-gradient(100deg,
      rgba(var(--black-rgb), 0.62) 0%,
      rgba(var(--black-rgb), 0.58) 45%,
      rgba(var(--black-rgb), 0.56) 62%,
      rgba(var(--black-rgb), 0.60) 100%);
  }
  [data-theme="light"] .page-hero--art .page-hero-bg {
    --hero-scrim: linear-gradient(100deg,
      rgba(var(--black-rgb), 0.90) 0%,
      rgba(var(--black-rgb), 0.82) 45%,
      rgba(var(--black-rgb), 0.78) 62%,
      rgba(var(--black-rgb), 0.84) 100%);
  }
}

/* Donate hero: Jesus sits left-of-center in the Veronese, and the stock
   0.98 left stop + 0.5 opacity buried him. Owner: left-side top painting
   more opaque. Scoped via :has(+ .donate-section) so other heroes stay. */
.page-hero--art:has(+ .donate-section) .page-hero-bg {
  --art-opacity: 0.78;
  --hero-scrim: linear-gradient(100deg,
    rgba(var(--black-rgb), 0.78) 0%,
    rgba(var(--black-rgb), 0.56) 38%,
    rgba(var(--black-rgb), 0.30) 60%,
    rgba(var(--black-rgb), 0) 88%);
}
[data-theme="light"] .page-hero--art:has(+ .donate-section) .page-hero-bg {
  --art-opacity: 0.70;
  --hero-scrim: linear-gradient(100deg,
    rgba(var(--black-rgb), 0.78) 0%,
    rgba(var(--black-rgb), 0.62) 38%,
    rgba(var(--black-rgb), 0.46) 60%,
    rgba(var(--black-rgb), 0) 100%);
}
@media (max-width: 768px) {
  .page-hero--art:has(+ .donate-section) .page-hero-bg {
    --art-opacity: 0.48;
    --hero-scrim: linear-gradient(100deg,
      rgba(var(--black-rgb), 0.52) 0%,
      rgba(var(--black-rgb), 0.48) 45%,
      rgba(var(--black-rgb), 0.46) 62%,
      rgba(var(--black-rgb), 0.50) 100%);
  }
  [data-theme="light"] .page-hero--art:has(+ .donate-section) .page-hero-bg {
    --art-opacity: 0.42;
    --hero-scrim: linear-gradient(100deg,
      rgba(var(--black-rgb), 0.84) 0%,
      rgba(var(--black-rgb), 0.76) 45%,
      rgba(var(--black-rgb), 0.72) 62%,
      rgba(var(--black-rgb), 0.78) 100%);
  }
}

/* ═══════════════════════════════════════════
   SECTION ARTWORK BACKDROP
   ═══════════════════════════════════════════
   Hangs a painting behind a content section, lit the way the /about/ hero is:
   scrimmed to almost nothing on the left, left slightly visible on the right.
   A page supplies the painting per section via --art; everything else defaults.

   Unlike that hero — whose copy stops at 62% and lets the scrim taper to zero —
   a content section's copy runs the full container, so the scrim can never
   release. It bottoms out at 0.62 on the right, which is what keeps the painting
   a ghost behind text rather than a competitor with it. */
.section-art {
  position: relative;
  overflow: hidden;
  --art-rgb: var(--black-rgb);   /* set to --darker-rgb on sections that sit on --darker */
  --art-opacity: 0.42;
  --art-position: center;
}

/* Lifts the content clear of both pseudo-elements below. */
.section-art > .container { position: relative; z-index: 2; }

.section-art::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  /* Fixed band, not height:100%. Accordion FAQs and other reflow grow the section;
     if the painting layer tracks section height it re-covers and visibly resizes.
     Pin to --art-max-h so open/close never moves the artwork. Landscape-in-tall
     boxes still stay near their own shape (~1.5:1); the mask dissolves the cut. */
  height: var(--art-max-h, 88vw);
  max-height: var(--art-max-h, 88vw);
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
  background-position: var(--art-position);
  background-size: var(--art-size, cover);
  background-repeat: no-repeat;
  opacity: 0;
  /* Instant when .art-instant (first-screen / hub nav) so cross-document view
     transitions don't flash a blank band then fade the painting in. Scroll-in
     below the fold still uses the slow fade. */
  transition: opacity var(--art-fade, 0.7s) ease;
}

/* --art only resolves once main.js flags the section as approaching the viewport,
   so six paintings never contend with the hero during first paint. No JS, no
   painting — they are decorative, and the scrim renders identically without them.
   Hub / first-screen bands get .art-on (+ .art-instant) at boot so nav doesn't flash. */
.section-art.art-on::before {
  background-image: var(--art);
  opacity: var(--art-opacity);
}
.section-art.art-instant {
  --art-fade: 0s;
}

/* ::after follows ::before in paint order, so the scrim covers the painting
   without either needing a z-index. */
.section-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--art-scrim);
}

.section-art {
  /* Left stops sit at 0.98/0.96 (not 0.95/0.87) so the red .section-label, which
     always lands top-left, clears 4.5:1 over the painting: red carries less
     luminance than the white body copy beside it, so it needs the darker backdrop.
     The right stops are untouched — the painting still emerges from ~42% rightward,
     which is where "slightly visible on the right" lives. Verified per-label with
     the scratch contrast harness, both themes. */
  --art-scrim: linear-gradient(100deg,
    rgba(var(--art-rgb), 0.98) 0%,
    rgba(var(--art-rgb), 0.96) 42%,
    rgba(var(--art-rgb), 0.75) 70%,
    rgba(var(--art-rgb), 0.62) 100%);
}

/* Sections whose background is --darker (17,17,17) start 9 levels lighter than the
   --black ones, so a red label on them begins ~0.13 of a ratio point closer to the
   floor. Trimming the painting's own opacity there removes the last of the bright
   bleed under the label without touching the --black sections, which don't need it. */
.section-art.on-darker { --art-opacity: 0.34; }

/* Light needs the heavier hand, same as the hero above. Body copy is only 5.2:1 on
   bare cream before a painting is involved, so the dark-mode weights here leave it
   at 4.59:1 — passing, but with 0.09 to spare. These weights hold it near 4.9:1.
   Measured, not eyeballed: scratch contrast harness over both themes. */
[data-theme="light"] .section-art {
  --art-scrim: linear-gradient(100deg,
    rgba(var(--art-rgb), 0.95) 0%,
    rgba(var(--art-rgb), 0.89) 38%,
    rgba(var(--art-rgb), 0.81) 70%,
    rgba(var(--art-rgb), 0.71) 100%);
}

/* Hub mid-vis figurative. Stock section-art floors the right scrim at 0.62 and
   the painting disappears; full-strength (0.95 / near-zero right) was too loud
   on /our-response/. Owner 2026-08-25: Assuaging of the Waters at this weight. */
.hub-band.art-mid {
  --art-opacity: 0.74;
  --art-scrim: linear-gradient(100deg,
    rgba(var(--art-rgb), 0.92) 0%,
    rgba(var(--art-rgb), 0.78) 40%,
    rgba(var(--art-rgb), 0.52) 70%,
    rgba(var(--art-rgb), 0.38) 100%);
}
[data-theme="light"] .hub-band.art-mid {
  --art-scrim: linear-gradient(100deg,
    rgba(var(--art-rgb), 0.90) 0%,
    rgba(var(--art-rgb), 0.76) 40%,
    rgba(var(--art-rgb), 0.58) 70%,
    rgba(var(--art-rgb), 0.44) 100%);
}

/* .sci-card is opaque by default, which would bury the painting under a slab the
   full width of the container — the grid's own 1px gaps already let it through.
   Scoped to art sections so the other pages using .sci-card keep solid cards. */
.section-art .sci-card { background: rgba(var(--darker-rgb), 0.82); }

/* Phones drop the horizontal read entirely: the copy is full-bleed at that width,
   so a left-to-right taper would only mean text sitting on the brightest part of
   the painting. A flat scrim keeps the painting even and the copy legible. */
@media (max-width: 768px) {
  .section-art {
    --art-opacity: 0.3;
    --art-scrim: linear-gradient(100deg,
      rgba(var(--art-rgb), 0.88) 0%,
      rgba(var(--art-rgb), 0.84) 100%);
  }
  [data-theme="light"] .section-art {
    --art-scrim: linear-gradient(100deg,
      rgba(var(--art-rgb), 0.90) 0%,
      rgba(var(--art-rgb), 0.87) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-art::before { transition: none; }
  .section-art { --art-fade: 0s; }
}

/* ═══════════════════════════════════════════
   ALARM BANNER
   ═══════════════════════════════════════════ */
/* Even undulating glow. Animate a custom opacity multiplier (fixed blur radii) —
   never animate blur size (that was the jitter). Element box-shadow is NOT clipped
   by overflow:hidden, so the outer glow stays while open; --alarm-open (from JS)
   drives it to 0 as the bar collapses so no residual glow when closed. */
@property --alarm-pulse {
  syntax: '<number>';
  inherits: false;
  initial-value: 0.65;
}
@keyframes alarmGlow {
  0%, 100% { --alarm-pulse: 0.4; }
  50%      { --alarm-pulse: 1; }
}
.alarm-banner {
  --alarm-open: 1;
  background: var(--red);
  padding: 16px var(--gutter);
  text-align: center;
  position: relative;
  z-index: 2;
  /* Clip text/padding as max-height collapses ("window closing"). */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: alarmGlow 3.2s ease-in-out infinite;
  box-shadow:
    0 0 22px 2px rgba(220, 38, 38, calc(0.85 * var(--alarm-pulse) * var(--alarm-open))),
    0 0 64px 8px rgba(185, 28, 28, calc(0.5 * var(--alarm-pulse) * var(--alarm-open))),
    0 4px 36px rgba(185, 28, 28, calc(0.4 * var(--alarm-pulse) * var(--alarm-open)));
}
.alarm-banner.is-closed {
  /* Fully shut: kill paint of any residual shadow/animation. */
  visibility: hidden;
  animation: none;
  box-shadow: none;
}
.alarm-banner p {
  color: var(--white);
  font-size: clamp(0.82rem, 1.05vw, 1.02rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.35;
  margin: 0;
  max-width: none;
  white-space: nowrap; /* keep both sentences on one line (desktop) */
}
@media (max-width: 900px) {
  .alarm-banner p {
    white-space: normal; /* allow wrap on narrow viewports only */
    font-size: clamp(0.85rem, 2.6vw, 0.98rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .alarm-banner {
    animation: none;
    --alarm-pulse: 0.65;
  }
}

/* ═══════════════════════════════════════════
   QUOTES
   ═══════════════════════════════════════════ */
#quotes {
  /* Combined quotes + On the Record under one painting band */
  padding: 78px 0 clamp(42px, 5.25vw, 66px);
  background: var(--darker);
  border-bottom: 1px solid var(--border-a);
}
/* On the Record nested inside #quotes — no second painting, no seam fill.
   Empty space above the divider + below it matches #quotes padding-top (78px total). */
#quotes #public-admissions {
  margin-top: 39px;
  padding: 39px 0 0;
  background: transparent;
  border-top: 1px solid rgba(240, 236, 228, 0.08);
  scroll-margin-top: 120px;
}

.quotes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
}

.quotes-grid--4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 44px;
}

blockquote {
  border-left: 2px solid var(--red);
  padding-left: 28px;
}
blockquote p {
  font-family: var(--serif);
  font-size: 1.44rem;
  font-weight: 400;
  font-style: italic;
  color: var(--white);
  line-height: 1.55;
  margin-bottom: 18px;
}
blockquote cite {
  font-size: 0.84rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  color: var(--white-dim);
  font-style: normal;
  line-height: 1.5;
}

/* Homepage top quote strip: +15% quote type, name-only cite, same section height budget */
#quotes .quotes-grid--4 {
  gap: 36px;
}
#quotes blockquote p {
  font-size: 1.66rem; /* 1.44 × 1.15 */
  line-height: 1.42;
  margin-bottom: 12px;
}
#quotes blockquote cite {
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  color: var(--white-mid);
  font-weight: 500;
}

/* Featured single quote — lead punch, or stacked in .quote-stack */
.quote-feature {
  border-left: none;
  padding-left: 0;
  max-width: 940px;
  margin: 44px 0 0;
  text-align: left;
}
.quote-feature p {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-style: italic;
  color: var(--white);
  line-height: 1.35;
  margin-bottom: 20px;
}
.quote-feature cite {
  display: block;
  /* Match #quotes name-only cite weight (larger, mid, not micro-dim) */
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--white-mid);
  font-style: normal;
}
.quote-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 72px);
  margin-top: 52px;
}
.quote-stack .quote-feature {
  margin: 0;
  width: 100%;
}

/* ═══════════════════════════════════════════
   MISSION
   ═══════════════════════════════════════════ */
#mission {
  padding: var(--pad) 0;
  background: var(--black);
}

#mission h2 { margin-bottom: 50px; }

#the-name {
  padding: var(--pad) 0;
}

/* Without this the columns sit flush under the heading; every sibling section gives
   its h2 the same 50px. */
#the-name h2 { margin-bottom: 50px; }
#org-status h2 { margin-bottom: 50px; }

/* Scope to the myths hub section only — resources accordion also uses id="myths" on a row. */
section#myths {
  padding: var(--pad) 0;
  background: var(--black);
}

/* THREE OBJECTIONS → THE CHINA MYTH: two painted bands. The upper
   ::before is hard-clipped (overflow:hidden) so Peaceable Kingdom's
   lighter hide reads as a full-width white/cream rule. Dissolve the
   last ~80px into --black so the join matches #myths. Do not hardcode
   8,8,8 — light mode must follow cream. */
#three-myths.section-art::after {
  background:
    linear-gradient(to bottom,
      rgba(var(--black-rgb), 0) calc(100% - 88px),
      rgb(var(--black-rgb)) calc(100% - 18px),
      rgb(var(--black-rgb)) 100%),
    var(--art-scrim);
}

.mission-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 70px;
}
/* our-plan: tighter join into HOW WE DIFFER (no grey rule; less dead air) */
#mission .mission-body:has(+ .how-we-differ) {
  margin-bottom: 28px;
}

/* Inner-page mission columns: essay-adjacent size (was 1rem / inherited 1.6 —
   read small next to .page-hero .lead and .sci-card). Homepage keeps a further bump. */
.mission-col p {
  margin-bottom: 18px;
  font-size: 1.08rem;
  line-height: 1.78;
  color: var(--white-mid);
}

/* Homepage mission: larger body, no bold-color pop on support line */
body:not(.inner-page) #mission .mission-col p {
  font-size: 1.14rem;
  line-height: 1.78;
  color: var(--white-mid);
}
body:not(.inner-page) #mission .mission-col p strong {
  color: inherit;
  font-weight: 500;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border-b);
}

.pillars--full {
  border-top: none;
  gap: 0;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border-b);
}

.pillar {
  padding: 50px 44px;
  border-right: 1px solid var(--border-b);
  transition: background 0.3s ease;
}
.pillars--full .pillar { border-right: 1px solid var(--border-b); }
.pillar:last-child { border-right: none; }
.pillar:hover { background: transparent; }

.pillar-num {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 300;
  color: var(--red-text);
  opacity: 0.55;
  line-height: 1;
  margin-bottom: 18px;
}
.pillar h3 { margin-bottom: 14px; font-size: 1.22rem; }
/* Match .sci-card body — 0.9rem read as chrome-small on long rebuttal pages */
.pillar p  { font-size: 1.02rem; line-height: 1.74; color: var(--white-mid); }

/* Homepage pillars: larger type inside the three cards (padding fixed — do not grow boxes) */
body:not(.inner-page) #mission .pillar h3 { font-size: 1.42rem; line-height: 1.25; }
body:not(.inner-page) #mission .pillar p  { font-size: 1.12rem; line-height: 1.68; }
body:not(.inner-page) #mission .pillar-num { font-size: 2.85rem; }

/* Homepage stakes cards: larger body labels only (numbers unchanged) */
body:not(.inner-page) #stakes .stat-label {
  font-size: 1.05rem;
  line-height: 1.65;
}

/* Homepage library cards (Where to start) */
body:not(.inner-page) #latest-analysis .library-card-link {
  text-decoration: none;
  display: block;
  color: inherit;
}
body:not(.inner-page) #latest-analysis .library-card-title {
  font-family: var(--sans);
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  font-weight: 400;
  color: var(--red-text);
  line-height: 1.3;
  margin-bottom: 12px;
  /* Keep title + arrow on one line when possible */
  white-space: nowrap;
}
body:not(.inner-page) #latest-analysis .library-card-arrow {
  display: inline;
  white-space: nowrap;
}
body:not(.inner-page) #latest-analysis .stat-label {
  font-size: 1.05rem;
  line-height: 1.65;
}
@media (max-width: 900px) {
  body:not(.inner-page) #latest-analysis .library-card-title {
    white-space: normal;
  }
}

/* ─── HOW WE DIFFER ─── */
.how-we-differ {
  padding-top: 48px;
  border-top: none;
}
.how-we-differ .section-label { margin-bottom: 20px; } /* gold 48/20 */

.differ-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-c);
  border: 1px solid var(--border-c);
  margin-top: 28px;
}

.differ-card {
  background: var(--black);
  padding: 44px 38px;
}
.differ-card h3 { font-size: 1.28rem; margin-bottom: 14px; line-height: 1.25; }
.differ-card p  { font-size: 1.05rem; line-height: 1.74; }

/* ═══════════════════════════════════════════
   PILLARS (our-plan page)
   ═══════════════════════════════════════════ */
#pillars {
  padding: var(--pad) 0;
  background: var(--darker);
}

#pillars h2 { margin-bottom: 50px; }

/* OUR POSITION (our-plan + about closer). Restore section air: bare
   .section-art carries no vertical padding, so without this the label
   sat flush to the section edge and the h2/intro/columns stacked at 0. */
#position {
  padding: calc(var(--pad) * 1.1) 0 var(--pad);
}
#position h2 { margin-bottom: 22px; }
#position .section-intro {
  margin-bottom: 40px;
  max-width: 720px;
}
#position .mission-body { margin-bottom: 0; }
#position .mission-col p {
  margin-bottom: 24px;
  font-size: 1.1rem;
  line-height: 1.82;
}
#position .mission-col p:last-child { margin-bottom: 0; }

/* ENFORCEMENT (our-plan) — same bare-section-art trap as #position */
#enforcement {
  padding: var(--pad) 0;
}
#enforcement h2 { margin-bottom: 28px; }
#enforcement .section-intro {
  margin-bottom: 8px;
  max-width: 720px;
}
.enforcement-close {
  max-width: 760px;
  margin: calc(var(--pad) * 0.7) auto 0;
}
.enforcement-close p {
  font-size: 1.08rem;
  line-height: 1.82;
  color: var(--white-mid);
  margin-bottom: 0;
}
.enforcement-close p.enforcement-close-lead {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1.28;
  color: var(--white);
  margin-bottom: 18px;
}

#three-myths {
  padding: var(--pad) 0;
}

/* ═══════════════════════════════════════════
   THE SCIENCE
   ═══════════════════════════════════════════
   A class, not #science, because /precedent/ styles two of these sections and an
   id can only be spent once per page. Carries the padding and heading rhythm —
   the background is incidental, several callers set their own inline. */
.science-section {
  padding: var(--pad) 0;
  background: var(--darker);
}
.science-section > .container > .section-label {
  margin-bottom: 20px; /* gold label→title */
}
.science-section h2 {
  margin-bottom: 48px;
  max-width: 820px;
}

.science-grid {
  display: grid;
  gap: 1px;
  background: var(--border-c);
  margin-bottom: 70px;
  border: 1px solid var(--border-c);
}
/* Threat mechanisms: grid is last content in the section (no GO DEEPER / treaty) */
#science .science-grid {
  margin-bottom: 0;
}

.science-grid--3 { grid-template-columns: repeat(3, 1fr); }

.sci-card {
  position: relative;
  background: var(--darker);
  padding: 44px 38px;
}
.sci-card h3 {
  font-size: 1.38rem;
  line-height: 1.28;
  margin: 0 0 16px;
  padding-right: 52px; /* clear top-right icon + air */
  /* Prefer one line; wrap at two max on narrow cards */
  text-wrap: balance;
}
/* Owner 2026-08-24: myths objection titles (e.g. Self-regulation will handle it) one line on desktop.
   Do not blanket-nowrap every .sci-card h3. /the-threat/ has long titles that must wrap. */
@media (min-width: 900px) {
  #three-myths .sci-card h3 {
    white-space: nowrap;
    padding-right: 0; /* these cards have no icon */
  }
}
.sci-card p  { font-size: 1.12rem; line-height: 1.78; }

/* Myths page: China intro + six responses type/spacing */
.myths-china-body {
  gap: clamp(36px, 5vw, 72px);
  margin-bottom: 56px;
}
.myths-china-body .mission-col p {
  /* Larger type, same line-box (~2.07rem): 1.24 * 1.67 ≈ 1.14 * 1.82 */
  font-size: 1.24rem;
  line-height: 1.67;
  margin-bottom: 18px;
}
section#myths h2 {
  font-size: clamp(1.85rem, 3.2vw, 2.55rem);
  line-height: 1.12;
  margin-bottom: 28px;
}
/* Myths China six-responses title only (other pages also use #pillars) */
section:has(.myths-china-pillars) > .container > h2 {
  font-size: clamp(1.85rem, 3.2vw, 2.55rem);
  line-height: 1.12;
  margin-bottom: 8px;
}
/* 2×3 grid, internal rules only — no outer box / no right-edge line */
.myths-china-pillars {
  grid-template-columns: 1fr 1fr;
  margin-top: 50px;
  border: none;
}
.myths-china-pillars .pillar {
  position: relative;
  padding: clamp(32px, 3.2vw, 44px) clamp(28px, 2.8vw, 40px);
  border-right: none;
  border-bottom: 1px solid var(--border-b);
}
.myths-china-pillars .pillar:nth-child(odd) {
  border-right: 1px solid var(--border-b);
}
.myths-china-pillars .pillar:nth-last-child(-n+2) {
  border-bottom: none;
}
.myths-china-pillars .sci-card-icon {
  top: clamp(32px, 3.2vw, 44px);
  right: clamp(28px, 2.8vw, 40px);
}
.myths-china-pillars .pillar h3 {
  font-size: clamp(1.28rem, 1.8vw, 1.48rem);
  line-height: 1.25;
  margin-bottom: 16px;
}
.myths-china-pillars .pillar p {
  font-size: 1.08rem;
  line-height: 1.78;
}
.sci-card-icon {
  position: absolute;
  top: 36px;   /* align with h3 optical center, not card edge */
  right: 32px;
  width: 26px;
  height: 26px;
  color: var(--red-text);
  opacity: 0.78;
  pointer-events: none;
}

.treaty-box {
  max-width: 760px;
  margin: 0 auto;
  padding: 60px;
  border: 1px solid rgba(185, 28, 28, 0.35);
  text-align: center;
  background: rgba(185, 28, 28, 0.03);
}
.treaty-box h3 {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 400;
  margin-bottom: 20px;
}
.treaty-box p {
  font-size: 1rem;
  line-height: 1.82;
  max-width: 580px;
  margin: 0 auto 36px;
}

/* ═══════════════════════════════════════════
   EXPERT QUOTES (the-threat page)
   ═══════════════════════════════════════════ */
.expert-quotes {
  padding: var(--pad) 0;
  background: var(--black);
  border-top: 1px solid var(--border-a);
}

.expert-quotes h2 { margin-bottom: 16px; }

.expert-quotes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  margin-top: 56px;
}

.expert-quotes-grid blockquote p {
  font-size: clamp(1.22rem, 1.5vw, 1.38rem);
  line-height: 1.55;
}

/* Threat page: 12th card = full-bleed clickable infographic (no title/body/hint) */
.sci-card--visual {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  background: #12110d;
  min-height: 100%;
  height: 100%;
  align-self: stretch;
}
.threat-infographic-trigger {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 280px;
  margin: 0;
  padding: 0;
  border: none;
  background: #12110d;
  cursor: pointer;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
  flex: 1;
}
.threat-infographic-trigger:hover,
.threat-infographic-trigger:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--red);
}
.threat-infographic-trigger img {
  display: block;
  width: 100%;
  height: 100%;
  flex: 1;
  max-height: none;
  object-fit: contain;
  object-position: center center;
  background: #12110d;
}
[data-theme="light"] .threat-infographic-trigger,
[data-theme="light"] .sci-card--visual {
  background: #12110d;
}

/* Shared lightbox for enlarge-on-click images */
#nf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
  background: rgba(0, 0, 0, 0.88);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
#nf-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#nf-lightbox-inner {
  position: relative;
  max-width: min(920px, 100%);
  max-height: min(92vh, 100%);
  margin: 0;
}
#nf-lightbox-inner img {
  display: block;
  max-width: 100%;
  max-height: min(88vh, 1400px);
  width: auto;
  height: auto;
  margin: 0 auto;
  border: 1px solid rgba(240, 236, 228, 0.14);
  /* Same edge fill as card letterbox (iceberg PNG sides) */
  background: #12110d;
}
/* No × button — close via Esc or backdrop click only. */

/* ═══════════════════════════════════════════
   TIMELINE (the-threat page)
   ═══════════════════════════════════════════ */
.warnings-timeline {
  padding: var(--pad) 0;
  background: var(--darker);
  border-top: 1px solid var(--border-a);
}

.warnings-timeline h2 { margin-bottom: 16px; }

.timeline-list {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 48px;
}

.timeline-list::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, rgba(185, 28, 28, 0.5), rgba(185, 28, 28, 0.08));
  clip-path: inset(0 0 calc((1 - var(--tl-progress, 0)) * 100%) 0);
}

.timeline-item {
  position: relative;
  padding-bottom: 52px;
}
.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
  content: '';
  position: absolute;
  left: -52px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.2);
}

.timeline-year {
  font-family: var(--sans);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--red-text);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.timeline-item h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.timeline-item p {
  font-size: 0.92rem;
  max-width: 700px;
  line-height: 1.78;
}

/* ═══════════════════════════════════════════
   THE STAKES (home page)
   ═══════════════════════════════════════════ */
#stakes {
  padding: var(--pad) 0;
  background: var(--darker);
  border-top: 1px solid var(--border-a);
}
/* Homepage: ~15% shorter vertical stack (pad + intro + cards) */
body:not(.inner-page) #stakes {
  padding: clamp(51px, 6.8vw, 102px) 0;
}
body:not(.inner-page) #stakes h2 { margin-bottom: 14px; }
body:not(.inner-page) #stakes .section-intro { margin-bottom: 40px; }
body:not(.inner-page) #stakes .stat-card {
  padding: 44px 40px;
  transition: none;
}
body:not(.inner-page) #stakes .stat-card:hover {
  background: var(--darker);
}
body:not(.inner-page) #stakes .stat-num { margin-bottom: 14px; }
body:not(.inner-page) #stakes .stats-row { margin-bottom: 0; }

#stakes h2 { margin-bottom: 16px; }
#stakes .section-intro { margin-bottom: 52px; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-c);
  border: 1px solid var(--border-c);
  margin-bottom: 52px;
}

.stat-card {
  background: var(--darker);
  padding: 52px 44px;
  text-align: center;
  transition: background 0.3s;
}
.stat-card:hover { background: transparent; }

.stat-num {
  font-family: var(--sans);
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 300;
  color: var(--red-text);
  line-height: 1;
  margin-bottom: 18px;
  display: block;
}

.stat-label {
  font-size: 0.88rem;
  color: var(--white-mid);
  line-height: 1.7;
}

.stakes-cta {
  text-align: center;
  padding-top: 8px;
}

/* Homepage section CTAs: equal air above button (from content) and below (to section edge) */
body:not(.inner-page) #why-different,
body:not(.inner-page) #stakes,
body:not(.inner-page) #latest-analysis {
  --cta-air: clamp(44px, 5.5vw, 60px);
}
body:not(.inner-page) #why-different {
  /* top pad unchanged; bottom = CTA air so button sits centered in the lower band */
  padding: var(--pad) 0 var(--cta-air);
}
body:not(.inner-page) #why-different .science-grid {
  margin-bottom: 0;
}
body:not(.inner-page) #stakes {
  padding-bottom: var(--cta-air);
}
body:not(.inner-page) #latest-analysis {
  padding-bottom: var(--cta-air);
}
body:not(.inner-page) #latest-analysis .stats-row {
  margin-bottom: 0;
}
body:not(.inner-page) #why-different .stakes-cta,
body:not(.inner-page) #stakes .stakes-cta,
body:not(.inner-page) #latest-analysis .stakes-cta {
  margin-top: var(--cta-air);
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* ═══════════════════════════════════════════
   POLICY ROADMAP (our-plan page)
   ═══════════════════════════════════════════ */
.policy-roadmap {
  padding: var(--pad) 0;
  background: var(--darker);
  border-top: 1px solid var(--border-a);
}

.policy-roadmap h2 { margin-bottom: 16px; }
.policy-roadmap .section-intro { margin-bottom: 0; }

.policy-list {
  margin-top: 52px;
  border: 1px solid var(--border-b);
}

.policy-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  border-bottom: 1px solid var(--border-b);
}
.policy-item:last-child { border-bottom: none; }

.policy-num {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--red-text);
  opacity: 0.5;
  padding: 44px 24px;
  display: flex;
  align-items: flex-start;
  line-height: 1;
}

.policy-content {
  padding: 44px 52px;
}
.policy-content h3 { margin-bottom: 14px; font-size: 1.38rem; line-height: 1.25; }
.policy-content p  { font-size: 1.06rem; line-height: 1.8; }

/* ═══════════════════════════════════════════
   EMAIL SIGNUP
   ═══════════════════════════════════════════ */
/* The 0.223 factor is what trims the section 10% shorter without touching the copy:
   the content is ~315px of a 407px section, so the whole reduction comes out of the
   padding (46px a side down to ~26px). */
#signup {
  padding: calc(var(--pad) * 0.223) 0;
  background: var(--black);
  border-top: 1px solid var(--border-a);
  text-align: center;
}

.signup-inner-page {
  background: var(--black) !important;
  text-align: center;
}

.signup-inner {
  /* Wide enough that display-size h2 stays ≤2 lines without shrinking type or cutting copy.
     Form stays narrow below. */
  max-width: 1000px;
  margin: 0 auto;
}
.signup-inner h2 {
  margin-bottom: 14px;
  text-wrap: balance;
}
/* FAQ signup: keep “Understanding the problem / is the first step.” as exactly two lines (no text/size change). */
.faq-signup-line { white-space: nowrap; }
.signup-inner > p {
  margin: 0 auto 1.1em;
  font-size: clamp(1.05rem, 1.2vw, 1.12rem);
  line-height: 1.8;
  color: var(--white-mid);
  max-width: 42rem;
}
.signup-inner > p:last-of-type { margin-bottom: 26px; }
.signup-inner > p a.text-link { white-space: nowrap; }

/* Keep email field + button compact while the headline can use the full inner width. */
.signup-form {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.signup-form .form-row {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  justify-content: center;
}
.signup-form input {
  flex: 1;
  min-width: 160px;
  background: var(--border-a);
  border: 1px solid rgba(240, 236, 228, 0.14);
  color: var(--white);
  padding: 15px 20px;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 300;
  outline: none;
  transition: border-color 0.25s;
}
.signup-form input:focus { border-color: rgba(240, 236, 228, 0.4); }
.signup-form input::placeholder { color: var(--white-dim); }

.form-note {
  margin-top: 14px;
  font-size: 0.7rem;
  color: var(--white-dim);
  letter-spacing: 0.04em;
}

.form-msg {
  margin-top: 12px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  min-height: 1.2em;
}
/* Success matches site red text token (not mint green). */
.form-msg.success { color: var(--red-text); }
.form-msg.error   { color: var(--red-text-hover); }

/* ═══════════════════════════════════════════
   ABOUT (home + about page)
   ═══════════════════════════════════════════ */
#about {
  padding: var(--pad) 0;
  background: var(--darker);
}

.about-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 80px;
  align-items: start;
}

.about-image { position: relative; }
.about-image img {
  width: 100%;
  filter: grayscale(100%) contrast(1.08);
}
.about-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(8, 8, 8, 0.6) 100%);
  pointer-events: none;
}

.about-text .section-label { margin-bottom: 20px; } /* gold label→title */
.about-text h2 { font-size: clamp(2rem, 3vw, 3rem); margin-bottom: 28px; }
.about-text p  { margin-bottom: 18px; font-size: 0.975rem; }

/* ─── FOUNDATION STORY ─── */
.foundation-story {
  padding: var(--pad) 0;
  background: var(--black);
  border-top: 1px solid var(--border-a);
}
.foundation-story h2 { margin-bottom: 50px; }
.foundation-story .mission-body { margin-bottom: 0; }

/* ─── PRINCIPLES ─── */
.principles-section {
  padding: var(--pad) 0;
  background: var(--darker);
  border-top: 1px solid var(--border-a);
}
.principles-section h2 { margin-bottom: 0; }

.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  margin-top: 60px;
}

.principle {
  padding-top: 28px;
  border-top: 2px solid rgba(185, 28, 28, 0.5);
}
.principle h3 { margin-bottom: 14px; font-size: 1.15rem; }
.principle p  { font-size: 0.92rem; line-height: 1.8; }

/* ─── GLOSSARY ─── */
section#glossary {
  padding: var(--pad) 0;
}

/* /glossary/ GO DEEPER cards: body type matches .mission-col, not chrome-small */
.glossary-page .foundation-story .stat-label {
  font-family: var(--body);
  font-size: 1.08rem;
  line-height: 1.78;
}

/* ─── FAQ ─── */
.faq-section {
  padding: var(--pad) 0;
  background: var(--black);
  border-top: 1px solid var(--border-a);
}

/* /faq/ only — larger hero + accordion type (owner 2026-08-24) */
.faq-page .page-hero h1 {
  font-size: clamp(3.2rem, 6.2vw, 5.6rem);
}
.faq-page .page-hero .lead {
  font-size: clamp(1.12rem, 1.7vw, 1.32rem);
}
.faq-page .faq-q {
  font-size: 1.55rem;
}
.faq-page .faq-a {
  font-size: 1.26rem;
}
/* /faq/ chat note: one line on desktop. Ink is ~829px; the 42rem/680px
   intro cap was wrapping a remnant ("bottom right corner."). Fill the
   accordion column instead. Do not nowrap — phone and ~900px may wrap. */
.faq-page .faq-section > .container > .section-intro {
  max-width: none;
}
.faq-section h2 { margin-bottom: 0; }

/* Consensus / social-proof closer on the FAQ page */
.faq-consensus {
  padding: var(--pad) 0;
  background: var(--darker);
  border-top: 1px solid var(--border-a);
}
.faq-consensus .stats-row { margin-top: 44px; }
.faq-consensus .stat-card {
  transition: none;
}
.faq-consensus .stat-card:hover {
  background: var(--darker);
}
.faq-consensus .stat-label {
  font-size: 1.05rem;
  line-height: 1.55;
  /* keep card footprint; type grows inside */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.faq-consensus h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
}

/* Homepage: intuitive "why superintelligence is different" teaser */
#why-different {
  padding: var(--pad) 0;
  background: var(--black);
  border-top: 1px solid var(--border-a);
}
#why-different h2 {
  margin-bottom: 18px; /* space above the intro */
}
#why-different .section-intro {
  margin-bottom: 44px; /* space below the intro, before the cards */
  font-size: 1.28rem;
  line-height: 1.55;
  max-width: 42rem;
}
.sci-card[id] { scroll-margin-top: 110px; }

/* Homepage: FROM THE BLOG / START HERE — top air = gold 48 (see end-of-file label lock) */
body:not(.inner-page) #latest-analysis {
  /* padding-top locked globally to 48px; do not re-open clamp here */
}
/* Discover. has no intro line — keep title→cards air equal to intro-bearing sections. */
body:not(.inner-page) #latest-analysis h2 {
  margin-bottom: 44px;
}
#latest-analysis .section-intro {
  margin-bottom: 44px; /* space below primers line, before cards */
}
/* CTA equal air handled with --cta-air above (do not re-add asymmetric padding here) */

/* Homepage only: OUR MISSION top air = gold 48 (global label lock). Do not re-open clamp. */
body:not(.inner-page) #mission {
  /* padding-top: 48px via gold lock */
}

/* Homepage mission pillars sit on a painted band — give them the same glass
   card treatment as .sci-card so borders and numbers read cleanly. */
body:not(.inner-page) #mission .pillars--full {
  background: transparent;
  border-color: rgba(240, 236, 228, 0.12);
}
body:not(.inner-page) #mission .pillars--full .pillar {
  background: rgba(var(--darker-rgb), 0.82);
  border-right-color: rgba(240, 236, 228, 0.10);
}
body:not(.inner-page) #mission .pillars--full .pillar:last-child {
  border-right: none;
}
[data-theme="light"] body:not(.inner-page) #mission .pillars--full {
  border-color: rgba(26, 23, 21, 0.12);
}
[data-theme="light"] body:not(.inner-page) #mission .pillars--full .pillar {
  background: rgba(var(--darker-rgb), 0.88);
  border-right-color: rgba(26, 23, 21, 0.10);
}

.faq-list {
  margin-top: 52px;
}

.faq-item {
  border-bottom: 1px solid var(--border-b);
  padding: 36px 0;
}
.faq-item:first-child { border-top: 1px solid var(--border-b); }
.resources-index .faq-list .faq-item:last-child { border-bottom: none; }

.faq-q {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.3;
}

.faq-a {
  color: var(--white-mid);
  /* Essay-adjacent FAQ answers: near body size, not chrome-small */
  font-size: 1.12rem;
  line-height: 1.74;
  max-width: 820px;
}
.faq-a p {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0 0 0.85em;
}
.faq-a p:last-child {
  margin-bottom: 0;
}
/* Essay FAQ appendix: same measure as article column */
.article-faq .faq-a {
  font-size: 1.12rem;
  line-height: 1.74;
  max-width: none;
}

/* FAQ accordion — native <details>; static .faq-item divs are unaffected */
details.faq-item > summary.faq-q {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 0;
  transition: color 0.2s ease;
}
details.faq-item > summary.faq-q::-webkit-details-marker { display: none; }
details.faq-item > summary.faq-q::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--red);
  border-bottom: 1.5px solid var(--red);
  transform: rotate(45deg); /* no transition: the arrow flips instantly, by request */
}
details.faq-item[open] > summary.faq-q::after { transform: rotate(-135deg); }
details.faq-item > summary.faq-q:hover { color: var(--red-text-hover); }
details.faq-item > summary.faq-q:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
details.faq-item[open] > summary.faq-q { margin-bottom: 16px; }

/* ═══════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════ */
/* section only — legal Terms/Privacy use h2#contact for TOC anchors;
   the bare #contact selector was applying section pad (~102px) + black bg
   above and below those headings (erroneous Contact spacing). */
section#contact {
  padding: var(--pad) 0;
  background: var(--black);
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.contact-header h2 { margin-bottom: 20px; }
.contact-header > p {
  font-size: 1.08rem;
  line-height: 1.78;
  color: var(--white-mid);
  margin-bottom: 28px;
}

.contact-note {
  font-size: 0.82rem;
  color: var(--white-dim);
  letter-spacing: 0.02em;
  border-left: 2px solid rgba(185, 28, 28, 0.4);
  padding-left: 16px;
  line-height: 1.6;
}

.contact-form .form-group { margin-bottom: 14px; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  background: rgba(240, 236, 228, 0.04);
  border: 1px solid rgba(240, 236, 228, 0.1);
  color: var(--white);
  padding: 15px 18px;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 300;
  outline: none;
  resize: none;
  transition: border-color 0.25s;
}
.contact-form input:focus,
.contact-form textarea:focus { border-color: rgba(240, 236, 228, 0.35); }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--white-dim); }
.contact-form .btn-primary { margin-top: 6px; }

/* ─── PARTNERSHIPS ─── */
.partnerships {
  padding: var(--pad) 0;
  background: var(--darker);
  border-top: 1px solid var(--border-a);
}
.partnerships h2 { margin-bottom: 16px; }
.partnerships .section-intro { margin-bottom: 0; }

.partnership-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 52px;
}

.partnership-card {
  position: relative;
  padding: 44px 42px;
  border: 1px solid var(--border-b);
  /* No hover lift/tint (owner 2026-08-13: contact/donate/press cards stay static). */
}
.partnership-card h3 {
  margin-bottom: 14px;
  font-size: clamp(1.28rem, 1.8vw, 1.42rem);
  line-height: 1.25;
  padding-right: 2.6rem; /* room for top-right mark */
}
.partnership-card p {
  font-size: clamp(1.02rem, 1.15vw, 1.1rem);
  line-height: 1.78;
}
/* Status eyebrow inside a fund card (not a section-label: those carry 48/20 gold air). */
.partnership-card .card-status {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-dim);
  line-height: 1.35;
  margin: 0 0 12px;
}
/* Full-width fund note under the 2-col pair. Neutral card chrome, not .treaty-box. */
.partnership-card--wide {
  grid-column: 1 / -1;
}
.partnership-card--wide h3,
.partnership-card--wide .card-status,
.partnership-card--wide p {
  max-width: 46rem;
}
/* Icon / mark sits top-right inside the card (contact + what-you-fund). */
.partnership-card > .pillar-num {
  position: absolute;
  top: 28px;
  right: 30px;
  margin: 0;
  line-height: 1;
  min-width: 0;
}

/* ═══════════════════════════════════════════
   NAV DONATE CTA
   ═══════════════════════════════════════════ */
.nav-cta-li {
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.nav-cta {
  display: inline-block;
  background: var(--red);
  color: #f5f1ea;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 10px 22px;
  border: 1px solid var(--red);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
}
/* same hover as the Join Us button: red glow, no lift */
.nav-cta:hover {
  background: var(--red-bright);
  border-color: var(--red-bright);
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.6);
}

/* ═══════════════════════════════════════════
   DONATE
   ═══════════════════════════════════════════ */
.donate-section { padding: var(--pad) 0; background: var(--black); }

.donate-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.donate-intro h2 { margin-bottom: 18px; }
.donate-intro > p { font-size: 1rem; line-height: 1.85; margin-bottom: 22px; }

.donate-disclaimer {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid rgba(185, 28, 28, 0.45);
  background: rgba(185, 28, 28, 0.06);
  padding: 20px 24px;
  margin-bottom: 34px;
}
.donate-disclaimer .dd-mark {
  flex-shrink: 0;
  color: var(--red-text-hover);
  font-size: 1.05rem;
  line-height: 1.5;
}
.donate-disclaimer p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--white-mid);
  line-height: 1.7;
}
.donate-disclaimer strong { color: var(--white); }

.org-status {
  border: 1px solid var(--border-b);
  background: rgba(240, 236, 228, 0.03);
  padding: 18px 22px;
  margin-bottom: 34px;
}
.org-status p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--white-mid);
  line-height: 1.7;
}
.org-status strong { color: var(--white); }
.org-status--block {
  margin-bottom: 0;
  max-width: 720px;
}

.donate-card {
  border: 1px solid var(--border-b);
  background: var(--darker);
  padding: 40px 38px;
}
.donate-card-label {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-text);
  margin-bottom: 22px;
}
.donate-toggle {
  display: flex;
  border: 1px solid var(--border-b);
  margin-bottom: 26px;
}
.donate-toggle button {
  flex: 1;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-mid);
  padding: 13px 10px;
  transition: background 0.25s, color 0.25s;
}
.donate-toggle button.active { background: var(--red); color: #f5f1ea; }

.amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.amount-btn {
  background: rgba(240, 236, 228, 0.04);
  border: 1px solid var(--border-b);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 400;
  padding: 16px 8px;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}
.amount-btn:hover { border-color: rgba(185, 28, 28, 0.5); }
.amount-btn.active {
  border-color: var(--red);
  background: rgba(185, 28, 28, 0.12);
}

.amount-custom { position: relative; margin-bottom: 26px; }
.amount-custom .amount-cur {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--white-dim);
  font-size: 0.95rem;
  pointer-events: none;
}
.amount-custom input {
  width: 100%;
  background: rgba(240, 236, 228, 0.04);
  border: 1px solid var(--border-b);
  color: var(--white);
  padding: 15px 16px 15px 32px;
  font-family: var(--sans);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.25s;
}
.amount-custom input:focus { border-color: rgba(240, 236, 228, 0.35); }
.amount-custom input::placeholder { color: var(--white-dim); }

.donate-submit { width: 100%; text-align: center; }
.donate-summary {
  margin-top: 14px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--white-dim);
  letter-spacing: 0.04em;
}
.donate-notice {
  display: none;
  margin-top: 18px;
  border: 1px solid rgba(185, 28, 28, 0.4);
  background: rgba(185, 28, 28, 0.06);
  padding: 16px 18px;
  font-size: 0.82rem;
  color: var(--white-mid);
  line-height: 1.7;
}
.donate-notice.show { display: block; }
.donate-notice a {
  color: inherit;
  border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  transition: color 0.2s, border-color 0.2s;
}
.donate-notice a:hover,
.donate-notice a:focus-visible {
  color: var(--red-text);
  border-bottom-color: var(--red);
  outline: none;
}

.donate-fine {
  margin-top: 20px;
  font-size: 0.72rem;
  color: var(--white-dim);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

/* Select, volunteer interest picker (matches contact-form inputs) */
.contact-form select {
  width: 100%;
  background: rgba(240, 236, 228, 0.04);
  border: 1px solid rgba(240, 236, 228, 0.1);
  color: var(--white);
  padding: 15px 44px 15px 18px;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 300;
  outline: none;
  cursor: pointer;
  transition: border-color 0.25s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23999' stroke-width='1.4'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.contact-form select:focus { border-color: rgba(240, 236, 228, 0.35); }
.contact-form select option { color: #1a1715; }

@media (max-width: 860px) {
  .donate-layout { grid-template-columns: 1fr; gap: 44px; }
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
#footer {
  padding: 22px 0 18px;
  border-top: 1px solid var(--border-d);
  text-align: center;
  margin-top: auto;   /* sticky footer: absorbs leftover space so it never floats */
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 0 56px;
  justify-content: center;
  /* matches #footer's 22px padding-top, so the gap under CONTACT equals the
     gap between the top rule and the FOUNDATION label */
  margin-bottom: 22px;
  text-align: left;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.footer-col-label,
a.footer-col-label {
  font-family: var(--sans);
  font-size: 0.69rem; /* was 0.60 — +15% */
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-text);
  margin-bottom: 3px;
  text-decoration: none;
}
/* Linked section titles (same targets as nav group buttons). */
.footer-cols a.footer-col-label {
  /* Beat .footer-cols a (mid white + underline hover) so labels stay red titles. */
  color: var(--red-text);
  letter-spacing: 0.18em;
  font-weight: 500;
  font-size: 0.69rem;
  text-decoration: none;
}
.footer-cols a.footer-col-label:hover {
  color: var(--red-text-hover);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 4px;
}
.footer-cols a {
  font-size: 0.78rem; /* was 0.68 — +15% */
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--white-mid); /* was --white-dim; --dim fails WCAG AA (2.35:1) in light mode */
  transition: color 0.25s;
}
.footer-cols a:hover {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 4px;
}
@media (max-width: 900px) {
  .footer-cols {
    grid-template-columns: repeat(3, auto);
    gap: 30px 44px;
  }
}
@media (max-width: 600px) {
  .footer-cols {
    grid-template-columns: repeat(2, auto);
    gap: 28px 40px;
  }
}

/* Copyright line: Inter/sans like .footer-col-label.
   Owner 2026-08: uppercase + ~50% of prior alpha (was WCAG-floor 0.49 dark / 0.61 light). */
.footer-legal {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(240, 236, 228, 0.245); /* was 0.49 — −50% */
  margin-bottom: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-legal a {
  font-family: inherit;
  color: rgba(240, 236, 228, 0.245); /* match parent; was 0.49 */
  text-decoration: none;
  border-bottom: 1px solid transparent; /* reserved so the hover underline causes no shift */
  transition: color 0.25s, border-color 0.25s;
}
/* hover: red underline only; the text brightens rather than turning red */
.footer-legal a:hover { color: var(--white); border-bottom-color: var(--red-bright); }
.footer-disclaimer {
  font-size: 0.71rem; /* was 0.62 — +15% */
  color: rgba(240, 236, 228, 0.2);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   SCROLL REVEAL — disabled (owner 2026-08)
   data-reveal attrs remain in HTML; content is always visible.
   ═══════════════════════════════════════════ */
[data-reveal],
html.js [data-reveal],
html.js [data-reveal].reveal-pending,
html.js [data-reveal].revealed {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .quotes-grid       { grid-template-columns: 1fr; gap: 40px; }
  .quotes-grid--4    { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .science-grid--3   { grid-template-columns: repeat(2, 1fr); }
  .about-grid        { grid-template-columns: 1fr; }
  .about-image       { max-width: 340px; }
  .contact-inner     { grid-template-columns: 1fr; gap: 50px; }
  .pillars           { grid-template-columns: 1fr; }
  .pillars--full     { grid-template-columns: 1fr; }
  .pillar            { border-right: none; border-bottom: 1px solid rgba(240,236,228,0.08); }
  .pillar:last-child { border-bottom: none; }
  .myths-china-pillars .pillar,
  .myths-china-pillars .pillar:nth-child(odd),
  .myths-china-pillars .pillar:nth-last-child(-n+2) {
    border-right: none;
    border-bottom: 1px solid var(--border-b);
  }
  .myths-china-pillars .pillar:last-child { border-bottom: none; }
  .stats-row         { grid-template-columns: 1fr; }
  .expert-quotes-grid{ grid-template-columns: 1fr; }
  .principles        { grid-template-columns: 1fr; gap: 40px; }
  .partnership-grid  { grid-template-columns: 1fr; }
  .differ-grid       { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--nav-glass-hvy);
    flex-direction: column;
    padding: 8px var(--gutter) 20px;
    gap: 0;
    border-bottom: 1px solid rgba(240,236,228,0.07);
  }
  .nav-links.open { display: flex; }
  .hamburger      { display: flex; }
  .theme-toggle   { margin-left: auto; }
  .lang-switch    { margin-left: 2px; }

  .nav-group { width: 100%; }

  .nav-group-btn {
    width: 100%;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-c);
  }

  .nav-dropdown {
    position: static;
    transform: none;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-bottom: 1px solid var(--border-c);
    padding: 6px 0 10px 12px;
    min-width: 0;
    white-space: normal;
  }

  .nav-dropdown-label { display: none; }
  .nav-dropdown a { padding: 8px 0; font-size: 0.82rem; }

  .nav-cta-li { width: 100%; margin-left: 0; padding-top: 14px; }
  .nav-cta { display: block; width: 100%; text-align: center; padding: 14px; }

  /* Search collapses into the mobile menu as a full-width row above Donate.
     Override the desktop flex row so the button stacks above the inline panel. */
  .nav-search { display: block; width: 100%; }
  .nav-search-toggle {
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 0;
    color: var(--white-mid);
    border-bottom: 1px solid var(--border-c);
  }
  .nav-search-label { display: inline; }
  .nav-search-panel {
    position: static;
    width: auto;
    max-width: none;
    margin-top: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-bottom: 1px solid var(--border-c);
    padding: 12px 0 14px 12px;
  }
  .nav-search-results { max-height: none; }

  .mission-body  { grid-template-columns: 1fr; gap: 30px; }
  .science-grid--3 { grid-template-columns: 1fr; }
  .treaty-box    { padding: 40px 24px; }
  .signup-form .form-row { flex-direction: column; }
  .policy-item   { grid-template-columns: 60px 1fr; }
  .policy-num    { padding: 32px 16px; font-size: 1.8rem; }
  .policy-content{ padding: 32px 28px; }
  .quotes-grid--4 { grid-template-columns: 1fr; }

  .logo-upper { font-size: 32px; }
  .logo-for   { font-size: 18px; }
  .logo-lower,
  .logo-lower-footer { font-size: 62px; }

  .page-hero h1 { font-size: clamp(2.2rem, 6vw, 3rem); }
  .faq-page .page-hero h1 { font-size: clamp(2.5rem, 7vw, 3.4rem); }
  /* Keep article titles on the two-line rule at phone widths too */
  .page-hero:has(.article-nav) h1 { font-size: clamp(1.7rem, 6.2vw, 2.35rem); line-height: 1.16; }
  .stat-card { padding: 40px 24px; }
  .timeline-list { padding-left: 32px; }
  .timeline-item::before { left: -36px; }
}

@media (max-width: 480px) {
  .logo-upper { font-size: 24px; }
  .logo-lower,
  .logo-lower-footer { font-size: 46px; }
}

/* ═══════════════════════════════════════════
   HERO CANVAS + ANIMATION
   ═══════════════════════════════════════════ */
#globe-canvas,
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Canvas starts hidden and cross-fades in over the static globe; spin begins on
   the first frame (main.js) so motion is visible as soon as the canvas appears. */
#globe-canvas {
  opacity: 0;
  transition: opacity 0.55s ease;
}

/* ─── STATIC GLOBE ─── */
/* Shown on every screen as the lightweight base layer (no d3, no animation, not an
   LCP candidate). The animated canvas spins in over it as soon as the visitor lands. */
.globe-static {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.globe-static.is-in  { opacity: 1; }
.globe-static.is-out { opacity: 0; }   /* fades away when the spinning canvas takes over */
/* Sized to overlay the canvas globe: diameter = min(0.84·vw, 0.80·vh) = min(0.42W,0.40H)·2.
   Nudged down slightly so the limb clears the fixed nav (matches main.js GLOBE_Y_NUDGE). */
.globe-static .globe-svg {
  position: absolute;
  top: calc(50% + 22px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(84vw, 80vh);
  height: min(84vw, 80vh);
  overflow: visible;
}
.globe-static path { fill: none; vector-effect: non-scaling-stroke; }
.globe-static .g-limb { stroke: rgba(240, 236, 228, 0.16); stroke-width: 0.9; }
.globe-static .g-grid-back { stroke: rgba(240, 236, 228, 0.022); stroke-width: 0.45; }
.globe-static .g-grid-front,
.globe-static .g-grid { stroke: rgba(240, 236, 228, 0.055); stroke-width: 0.45; }
.globe-static .g-land-back { stroke: rgba(240, 236, 228, 0.12); stroke-width: 0.55; }
.globe-static .g-land-front,
.globe-static .g-land { stroke: rgba(240, 236, 228, 0.34); stroke-width: 0.75; }
[data-theme="light"] .globe-static .g-limb { stroke: rgba(26, 23, 21, 0.18); }
[data-theme="light"] .globe-static .g-grid-back { stroke: rgba(26, 23, 21, 0.035); }
[data-theme="light"] .globe-static .g-grid-front,
[data-theme="light"] .globe-static .g-grid { stroke: rgba(26, 23, 21, 0.09); }
[data-theme="light"] .globe-static .g-land-back { stroke: rgba(26, 23, 21, 0.12); }
[data-theme="light"] .globe-static .g-land-front,
[data-theme="light"] .globe-static .g-land { stroke: rgba(26, 23, 21, 0.32); }

@media (prefers-reduced-motion: reduce) {
  .globe-static { transition: none; }
}

.hero-intro {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 1.95rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.5;
  margin-bottom: 36px;
  letter-spacing: 0.01em;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  animation: heroFadeUp 1.2s ease 0.2s both;
}

.hero-content .tagline {
  animation: heroFadeUp 1.2s ease 0.5s both;
}

.hero-content .btn-primary {
  animation: heroFadeUp 1.2s ease 0.8s both;
}

/* Slide-up only (no opacity fade): keeping the hero-intro at opacity:1 from the first
   frame means it isn't excluded from, or delayed as, the Largest Contentful Paint. */
@keyframes heroFadeUp {
  from { transform: translateY(22px); }
  to   { transform: translateY(0); }
}

/* ═══════════════════════════════════════════
   POLITICS SECTION
   ═══════════════════════════════════════════ */
#politics {
  padding: var(--pad) 0;
  background: var(--darker);
  border-top: 1px solid var(--border-a);
}

#politics h2 { margin-bottom: 50px; }

/* ═══════════════════════════════════════════
   PRECEDENT SECTION
   ═══════════════════════════════════════════ */
#precedent {
  padding: var(--pad) 0;
  background: var(--black);
  border-top: 1px solid var(--border-a);
}

#precedent h2 { margin-bottom: 16px; }
#precedent .section-intro { margin-bottom: 0; }

.precedent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 52px;
}

.precedent-card {
  padding: 44px 42px;
  border: 1px solid var(--border-b);
  transition: border-color 0.3s, background 0.3s;
}
.precedent-card:hover {
  border-color: rgba(185, 28, 28, 0.4);
  background: rgba(185, 28, 28, 0.03);
}

.precedent-year {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 300;
  color: var(--red-text);
  opacity: 0.6;
  line-height: 1;
  margin-bottom: 16px;
}

.precedent-card h3 { margin-bottom: 14px; font-size: 1.15rem; }
.precedent-card p  { font-size: 0.9rem; line-height: 1.78; }

/* ═══════════════════════════════════════════
   THE WINDOW SECTION
   ═══════════════════════════════════════════ */
#window {
  padding: var(--pad) 0;
  background: var(--darker);
  border-top: 1px solid var(--border-a);
}

#window h2 { margin-bottom: 50px; }

.window-inner {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 80px;
  align-items: start;
}

.window-text p { margin-bottom: 18px; font-size: 1rem; line-height: 1.85; }

.window-cta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 4px;
}

@media (max-width: 1024px) {
  .precedent-grid { grid-template-columns: 1fr; }
  .window-inner   { grid-template-columns: 1fr; gap: 40px; }
  .window-cta     { flex-direction: row; flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════
   ON THE RECORD quotes (#public-admissions; legacy private-admissions alias)
   ═══════════════════════════════════════════ */
#public-admissions,
#private-admissions {
  /* ~25% shorter band: less pad, smaller quotes, tighter stack */
  padding: clamp(42px, 5.25vw, 66px) 0;
  background: var(--darker);
  border-top: 1px solid rgba(240,236,228,0.05);
}
#public-admissions h2,
#private-admissions h2 { margin-bottom: 8px; }
#public-admissions .section-intro,
#private-admissions .section-intro { margin-bottom: 0; }

#public-admissions .quote-stack {
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: 22px;
}
#public-admissions .quote-feature p {
  font-size: clamp(1.02rem, 1.7vw, 1.42rem);
  line-height: 1.28;
  margin-bottom: 5px;
}
#public-admissions .quote-feature cite {
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--white-mid);
}
/* Desktop: keep each quote on one line when the container is wide enough */
@media (min-width: 1100px) {
  #public-admissions .quote-feature p {
    white-space: nowrap;
  }
}

.admission-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 52px;
}

.admission-card {
  position: relative;
  padding: 40px 42px;
  border: 1px solid rgba(240,236,228,0.08);
  background: #0f0f0f;
  overflow: hidden;
}

.admission-stamp {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--red-text);
  border: 1px solid rgba(185,28,28,0.5);
  padding: 3px 10px;
  margin-bottom: 14px;
  opacity: 0.85;
}

.admission-source {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--white-dim);
  margin-bottom: 22px;
  line-height: 1.55;
}

.redact-quote {
  position: relative;
  min-height: 80px;
}

.admission-quote {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  font-style: italic;
  color: var(--white);
  line-height: 1.65;
  margin: 0;
}

.redact-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.redact-bar {
  position: absolute;
  left: 0;
  right: 0;
  background: #030303;
  transform: translateX(0);
  transition: transform 1.5s cubic-bezier(0.4,0,0.2,1);
}

.redact-bar.revealed {
  transform: translateX(110%);
}

/* ═══════════════════════════════════════════
   INCIDENTS AND MILESTONES
   ═══════════════════════════════════════════ */
#documented {
  padding: var(--pad) 0;
  background: var(--darker);
  border-top: 1px solid rgba(240,236,228,0.05);
}
/* Incidents + milestones: tighter stack under the h2 */
#documented h2 { margin-bottom: 16px; }
#documented .section-intro {
  margin-bottom: 0;
  max-width: 720px;
  font-size: 1.12rem;
  line-height: 1.78;
}
.incident-list {
  margin-top: 32px;
}
.incident-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 36px;
  align-items: start;
  /* Tighter row pad offsets +15% title/body type so section height holds. */
  padding: 30px 0;
  border-top: 1px solid rgba(240,236,228,0.07);
}
.incident-row:last-child { border-bottom: 1px solid rgba(240,236,228,0.07); }
.incident-num {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--red-text);
  padding-top: 5px;
}
.incident-tag {
  display: inline-block;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240,236,228,0.38);
  border: 1px solid rgba(240,236,228,0.1);
  padding: 3px 9px;
  margin-bottom: 9px;
}
.incident-body h3 {
  font-family: var(--serif);
  /* +15% vs 1.3rem; lh/margins trimmed so #documented height does not grow. */
  font-size: 1.495rem;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.22;
}
.incident-body p {
  /* +15% vs 1.08rem */
  font-size: 1.242rem;
  color: var(--white-mid);
  line-height: 1.55;
  max-width: 720px;
}
@media (max-width: 640px) {
  .incident-row { grid-template-columns: 1fr; gap: 8px; padding: 26px 0; }
  .incident-num { padding-top: 0; }
}

/* ═══════════════════════════════════════════
   DOOMSDAY CLOCK
   ═══════════════════════════════════════════ */
#doomsday {
  padding: var(--pad) 0;
  background: var(--black);
  border-top: 1px solid rgba(240,236,228,0.05);
}

.doomsday-inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 80px;
  align-items: center;
}

.doomsday-text .section-label { margin-bottom: 20px; } /* gold label→title */
.doomsday-text h2             { margin-bottom: 28px; }
.doomsday-text p              { font-size: 1.14rem; line-height: 1.82; margin-bottom: 18px; }
.doomsday-text p:last-child   { margin-bottom: 0; }

.doomsday-clock-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: var(--white-mid); /* label inherits this — same family as body mid-ink */
}

#clock-canvas {
  width: clamp(200px, 28vw, 260px);
  height: auto;
  display: block;
}

.clock-time-label {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: inherit;
  text-align: center;
}
.doomsday-text p strong {
  color: inherit;
  font-weight: inherit;
}

/* Homepage danger cards: force single-line titles */
body:not(.inner-page) #why-different .sci-card h3 {
  white-space: nowrap;
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  padding-right: 44px;
}

.clock-source-label {
  font-size: 0.65rem;
  color: var(--white-dim);
  letter-spacing: 0.06em;
  text-align: center;
}

/* ═══════════════════════════════════════════
   TIMELINE DOT ACTIVATION
   ═══════════════════════════════════════════ */
.timeline-item.tl-active::before {
  background: var(--red-bright);
  box-shadow: 0 0 0 4px rgba(185,28,28,0.22), 0 0 14px rgba(185,28,28,0.3);
  transition: background 0.4s ease, box-shadow 0.6s ease;
}

/* ═══════════════════════════════════════════
   TAKE ACTION / ROLE SELECTOR
   ═══════════════════════════════════════════ */
#role-selector {
  padding: var(--pad) 0;
  background: var(--black);
}

.role-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 44px 0 0;
}

.role-btn {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-mid);
  background: transparent;
  border: 1px solid rgba(240, 236, 228, 0.15);
  padding: 12px 26px;
  cursor: pointer;
  transition: color 0.22s, border-color 0.22s, background 0.22s;
  outline: none;
}
.role-btn:hover {
  color: var(--white);
  border-color: rgba(240, 236, 228, 0.4);
}
.role-btn.active {
  color: var(--white);
  background: var(--red);
  border-color: var(--red);
}
.role-btn:focus-visible {
  outline: 1px solid var(--red);
  outline-offset: 3px;
}

.role-panels {
  margin-top: 60px;
  border-top: 1px solid var(--border-b);
}

.role-panel {
  display: none;
  padding-top: 60px;
  animation: roleFadeIn 0.45s ease;
}
.role-panel.active { display: block; }

@keyframes roleFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.role-panel-label {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-text);
  margin-bottom: 18px;
}

.role-panel-title {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 400;
  color: var(--white);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
}

.role-panel-intro {
  font-size: 1.12rem;
  color: var(--white-mid);
  line-height: 1.78;
  max-width: 720px;
  margin-bottom: 52px;
}

.action-list {
  list-style: none;
}

.action-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 36px;
  padding: 36px 0;
  border-top: 1px solid var(--border-d);
  align-items: start;
}

.action-num {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 300;
  color: var(--red-text);
  opacity: 0.5;
  line-height: 1;
  padding-top: 5px;
}

.action-body strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.42rem;
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.01em;
  margin-bottom: 12px;
  line-height: 1.28;
}

.action-body p {
  font-size: 1.12rem;
  color: var(--white-mid);
  line-height: 1.78;
  max-width: 700px;
}

@media (max-width: 640px) {
  .role-btn { padding: 10px 18px; font-size: 0.72rem; }
  .action-item { grid-template-columns: 1fr; gap: 10px; }
  .action-num { font-size: 1.5rem; padding-top: 0; opacity: 0.4; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE, NEW SECTIONS
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .doomsday-inner  { grid-template-columns: 1fr; gap: 50px; }
  .admission-grid  { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .admission-card  { padding: 32px 28px; }
}

/* ═══════════════════════════════════════════
   RESOURCES PAGE
   ═══════════════════════════════════════════ */

/* ─── Platform dividers ─── */
.platform-block {
  margin-bottom: 70px;
}
.platform-block:last-child { margin-bottom: 0; }

.platform-label {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 32px;
}
.platform-label-text {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white-dim);
  white-space: nowrap;
}
.platform-label-line {
  flex: 1;
  height: 1px;
  background: rgba(240,236,228,0.08);
}

/* ─── Copy cards ─── */
.copy-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.copy-card {
  background: var(--darker);
  border: 1px solid rgba(240,236,228,0.07);
  padding: 36px 40px;
  position: relative;
  transition: border-color 0.25s;
}
.copy-card:hover { border-color: rgba(185,28,28,0.25); }

.copy-card-tag {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-text);
  margin-bottom: 14px;
}

.copy-card-text {
  font-family: var(--body);
  font-size: 1.08rem;
  font-weight: 400;
  color: var(--white-mid);
  line-height: 1.78;
  white-space: pre-wrap;
  margin: 0;
}

.copy-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(240,236,228,0.07);
}

.copy-char-count {
  font-size: 0.7rem;
  color: var(--white-dim);
  letter-spacing: 0.06em;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid rgba(185,28,28,0.4);
  color: var(--white-mid);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 9px 20px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.copy-btn:hover {
  background: rgba(185,28,28,0.1);
  border-color: var(--red);
  color: var(--white);
}
.copy-btn.copied {
  background: rgba(185,28,28,0.15);
  border-color: var(--red);
  color: var(--white);
}
.copy-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ─── PDF download cards ─── */
.pdf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 56px;
}

.pdf-card {
  background: var(--darker);
  border: 1px solid rgba(240,236,228,0.07);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.25s;
}

.pdf-card-preview {
  display: block;
  width: 100%;
  margin: 0;
  padding: 18px 18px 0;
  border: 0;
  background: rgba(0,0,0,0.28);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.pdf-card-preview img {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  transition: box-shadow 0.25s ease;
}
.pdf-card-preview:focus-visible {
  outline: none;
}
.pdf-card-preview:focus-visible img,
.pdf-card-preview:hover img {
  /* --red (#b91c1c) is a 1px hairline that disappears on dark; --red-text
     is the AA-visible red in both themes (light = same as --red). */
  box-shadow: 0 0 0 2px var(--red-text), 0 0 16px rgba(220, 38, 38, 0.5), 0 10px 28px rgba(0,0,0,0.35);
}
.pdf-card-body {
  padding: 28px 40px 40px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
[data-theme="light"] .pdf-card-preview {
  background: rgba(0,0,0,0.06);
}

.pdf-card-num {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 400;
  color: rgba(185,28,28,0.3);
  line-height: 1;
  margin-bottom: 20px;
}

.pdf-card h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 12px;
  color: var(--white);
}

.pdf-card p {
  font-family: var(--body);
  font-size: 1.08rem;
  line-height: 1.78;
  color: var(--white-mid);
  flex: 1;
  margin-bottom: 30px;
}

.pdf-card-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}

.pdf-topic-tag {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-dim);
  border: 1px solid rgba(240,236,228,0.12);
  padding: 4px 10px;
}

/* ─── External resources ─── */
.ext-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}

.ext-card {
  background: var(--darker);
  border: 1px solid rgba(240,236,228,0.07);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s;
  text-decoration: none;
}
.ext-card:hover { border-color: rgba(185,28,28,0.25); }

.ext-card-category {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-text);
  margin-bottom: 12px;
}

.ext-card h3,
.ext-card h4 {
  font-size: 1rem;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.3;
}

.ext-card p {
  font-size: 0.83rem;
  line-height: 1.7;
  color: var(--white-dim);
  flex: 1;
  margin-bottom: 16px;
}

.ext-card-link {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ext-card:hover .ext-card-link { color: var(--red-text-hover); }

.ext-card-logo {
  height: 30px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.ext-card-logo img {
  max-height: 26px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.45;
  transition: opacity 0.25s;
}
.ext-card:hover .ext-card-logo img { opacity: 0.85; }
[data-theme="light"] .ext-card-logo img { filter: brightness(0); opacity: 0.35; }
[data-theme="light"] .ext-card:hover .ext-card-logo img { opacity: 0.65; }

.ext-card-logo-text {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--white);
  opacity: 0.5;
  transition: opacity 0.25s;
  white-space: nowrap;
}
.ext-card:hover .ext-card-logo-text { opacity: 0.85; }
[data-theme="light"] .ext-card-logo-text { opacity: 0.4; }
[data-theme="light"] .ext-card:hover .ext-card-logo-text { opacity: 0.7; }

/* ─── Resources section spacing ─── */
.resources-section {
  padding: var(--pad) 0;
  border-top: 1px solid rgba(240,236,228,0.05);
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .pdf-grid { grid-template-columns: 1fr; }
  .ext-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .copy-card { padding: 28px 24px; }
  .pdf-card  { padding: 0; }
  .pdf-card-body { padding: 24px 24px 32px; }
  .ext-grid  { grid-template-columns: 1fr; }
  .copy-card-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
}


/* ═══════════════════════════════════════════
   THEME TOGGLE BUTTON
   ═══════════════════════════════════════════ */
/* Asymmetric padding is deliberate, and both halves are load-bearing. The right
   cluster is anchored to the nav gutter, so the globe never moves: its 40px hit
   box wraps an 18px icon and hands 11px of dead space to the gap on its left,
   while the moon is a bare 17px icon. Trimming the right padding walks the moon
   toward the globe; adding left padding walks Donate away from the moon.
   Together they land Donate->moon and moon->globe on the same painted distance
   (~21px). Ink-measured, not eyeballed. Color = nav menu text (--white-mid). */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 6px 8px 19.2px;
  color: var(--white-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.25s;
  flex-shrink: 0;
  line-height: 0;
}
.theme-toggle:hover { color: var(--red-text); background: none; }
.theme-toggle svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* Dark mode: show sun (click → go light) */
[data-theme="dark"] .icon-sun  { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

/* Light mode: show moon (click → go dark) */
[data-theme="light"] .icon-sun  { display: none; }
[data-theme="light"] .icon-moon { display: block; }

/* Fallback (no data-theme yet): show sun */
.icon-sun  { display: block; }
.icon-moon { display: none; }

/* ═══════════════════════════════════════════
   THEME SWITCH TRANSITION
   View Transition API: cross-fades the whole
   page (canvas, gradients, everything).
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: 0.45s ease both _vt-out;
  }
  ::view-transition-new(root) {
    animation: 0.45s ease both _vt-in;
  }
}
@keyframes _vt-out { to   { opacity: 0; } }
@keyframes _vt-in  { from { opacity: 0; } }

/* Overlay fallback for browsers without View Transitions */
#theme-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}

/* ═══════════════════════════════════════════
   LIGHT MODE TOKENS + OVERRIDES
   ═══════════════════════════════════════════ */
[data-theme="light"] {
  --black:         #f0ede8;
  --darker:        #e6e2dc;
  --black-rgb:     240, 237, 232;
  --darker-rgb:    230, 226, 220;
  /* The brand red already clears AA on cream, so light keeps it verbatim — this
     change is invisible in light mode. Hover goes DARKER here, not brighter: on a
     light background the bright red is the lower-contrast one (#dc2626 is 4.14:1
     on cream, i.e. the old hover was failing). */
  --red-text:       #b91c1c;  /* 5.54:1 on --black, 5.01:1 on --darker */
  --red-text-hover: #9f1818;  /* 6.84:1 */
  --white:         #1a1715;
  --white-mid:     rgba(26, 23, 21, 0.65);
  --white-dim:     rgba(26, 23, 21, 0.38);
  --nav-glass:     rgba(240, 237, 232, 0.96);
  --nav-glass-hvy: rgba(240, 237, 232, 0.98);
  --border-a:      rgba(26, 23, 21, 0.07);
  --border-b:      rgba(26, 23, 21, 0.10);
  --border-c:      rgba(26, 23, 21, 0.08);
  --border-d:      rgba(26, 23, 21, 0.09);
}

/* ─── Nav logo recolor ───
   One logo file for both themes: light mode recolors the cream ink to the
   dark gray (#2d2d2d) that logo-dark-gray.png used to supply. A filter is
   instant, so the logo can never flash the wrong variant while a second
   image loads — it stays static through cross-document crossfades. */
[data-theme="light"] .nav-brand-img {
  filter: brightness(0) invert(0.176);
}

/* ─── Logo semi-transparent fills ─── */
[data-theme="light"] .logo-for {
  fill: rgba(26, 23, 21, 0.55);
}
[data-theme="light"] .logo-lower-footer {
  fill: rgba(26, 23, 21, 0.15);
}

/* ─── About image gradient ─── */
[data-theme="light"] .about-image::after {
  background: linear-gradient(to bottom, transparent 50%, rgba(240, 237, 232, 0.6) 100%);
}

/* ─── Form inputs ─── */
[data-theme="light"] .signup-form input {
  background:   rgba(26, 23, 21, 0.04);
  border-color: rgba(26, 23, 21, 0.14);
}
[data-theme="light"] .signup-form input:focus {
  border-color: rgba(26, 23, 21, 0.40);
}
[data-theme="light"] .signup-form input::placeholder {
  color: var(--white-dim);
}
[data-theme="light"] .contact-form input,
[data-theme="light"] .contact-form textarea {
  background:   rgba(26, 23, 21, 0.04);
  border-color: rgba(26, 23, 21, 0.10);
}
[data-theme="light"] .contact-form input:focus,
[data-theme="light"] .contact-form textarea:focus {
  border-color: rgba(26, 23, 21, 0.35);
}
[data-theme="light"] .contact-form input::placeholder,
[data-theme="light"] .contact-form textarea::placeholder {
  color: var(--white-dim);
}

/* ─── Donate + volunteer ─── */
[data-theme="light"] .amount-btn,
[data-theme="light"] .amount-custom input,
[data-theme="light"] .contact-form select {
  background:   rgba(26, 23, 21, 0.04);
  border-color: rgba(26, 23, 21, 0.10);
}
[data-theme="light"] .amount-btn.active {
  border-color: var(--red);
  background:   rgba(185, 28, 28, 0.10);
}
[data-theme="light"] .amount-custom input:focus,
[data-theme="light"] .contact-form select:focus {
  border-color: rgba(26, 23, 21, 0.35);
}
[data-theme="light"] .donate-toggle { border-color: var(--border-b); }

/* ─── Admission cards + redact bars ─── */
[data-theme="light"] .admission-card {
  background: var(--darker);
}
[data-theme="light"] .redact-bar {
  background: var(--white);
}

/* ─── Role selector buttons ─── */
[data-theme="light"] .role-btn {
  border-color: rgba(26, 23, 21, 0.15);
}
[data-theme="light"] .role-btn:hover {
  border-color: rgba(26, 23, 21, 0.40);
}

/* ─── Incident tag chips ─── */
[data-theme="light"] .incident-tag {
  color:        rgba(26, 23, 21, 0.40);
  border-color: rgba(26, 23, 21, 0.12);
}

/* ─── PDF topic tags ─── */
[data-theme="light"] .pdf-topic-tag {
  border-color: rgba(26, 23, 21, 0.12);
}

/* ─── Footer disclaimer ─── */
[data-theme="light"] .alarm-banner p {
  color: var(--black);
}

[data-theme="light"] .footer-disclaimer {
  color: rgba(26, 23, 21, 0.22);
}

/* Copyright line, light mode: prior AA floor 0.61 halved (−50%). */
[data-theme="light"] .footer-legal,
[data-theme="light"] .footer-legal a {
  color: rgba(26, 23, 21, 0.305);
}
[data-theme="light"] .footer-legal a:hover {
  color: var(--white); /* --white is the dark ink in light mode: text brightens, stays non-red */
  border-bottom-color: var(--red-bright);
}

/* ─── Nav dropdown border ─── */
[data-theme="light"] .nav-dropdown {
  border-color: var(--border-b);
}

/* ─── Mobile nav ─── */
@media (max-width: 768px) {
  [data-theme="light"] .nav-links {
    border-bottom-color: var(--border-d);
  }
  [data-theme="light"] .nav-group-btn {
    border-bottom-color: var(--border-c);
  }
  [data-theme="light"] .nav-dropdown {
    border-bottom-color: var(--border-c);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Author hero layout */
.page-hero-inner.author-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(40px, 6vw, 80px);
  max-width: 1100px;
}
.author-hero-text {
  flex: 1;
  min-width: 0;
}
/* Same plain-text control language as .article-share-btn (icon + uppercase label) */
.author-contact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-mid);
  text-decoration: none;
  background: transparent;
  border: none;
  padding: 0;
  line-height: 1.2;
  transition: color 0.2s;
}
.author-contact:hover,
.author-contact:focus-visible {
  color: var(--red-text);
  outline: none;
}
.author-contact svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.9;
}
.author-contact + .author-social {
  margin-top: 18px;
}
.author-hero-photo {
  flex-shrink: 0;
}
.author-hero-photo img {
  display: block;
  width: clamp(160px, 18vw, 240px);
  height: clamp(160px, 18vw, 240px);
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(100%);
  border: 1px solid rgba(255,255,255,0.15);
}

@media (max-width: 700px) {
  .page-hero-inner.author-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .author-hero-photo { order: -1; }
}

/* ═══════════════════════════════════════════
   CROSS-DOCUMENT VIEW TRANSITIONS
   Page-to-page navigation crossfades instead
   of flashing. Browsers without support ignore
   the at-rule and navigate the ordinary way,
   so there is no fallback to write.

   Pairs with the speculative loading at the
   bottom of js/main.js: the fade is only worth
   having if the next page is already in memory
   when the click lands.
   ═══════════════════════════════════════════ */
@view-transition {
  navigation: auto;
  types: page-nav;
}

/* No view-transition-name on anything — nav, logo, footer. Naming the fixed
   nav was tried and looks right in Chrome (its group swaps instantly and
   morphs between the homepage and inner geometry), but Safari builds the
   named group empty and paints it behind the root pair, so the bar dimmed
   with the page — and once blending was fixed it vanished outright, being
   correctly excluded from the root snapshot. No CSS or JS gate can tell the
   engines apart (Safari parses :active-view-transition-type() and even
   claims speculationrules support), so the bar stays inside the root
   snapshot, and the additive blend below is what holds it steady: with
   plus-lighter, identical pixels sum to full strength at every frame. */

/* Safari runs the crossfade with NORMAL blending, which lets the canvas
   bleed through mid-fade — the whole page, nav included, visibly dips,
   which reads as a refresh. Force the spec's additive setup; in Chrome both
   declarations are the UA defaults, so this is a no-op there. */
::view-transition-image-pair(root) {
  isolation: isolate;
}
::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: plus-lighter;
}

/* Navigating is a plainer movement than the theme switch, so it runs shorter
   than the 0.45s fade above. The `page-nav` type set by @view-transition
   scopes this to real navigations; the theme toggle keeps its own timing.
   Safari parses this selector but never activates the type, so it keeps the
   0.45s — acceptable now that its fade is additive too. */
:root:active-view-transition-type(page-nav)::view-transition-old(root),
:root:active-view-transition-type(page-nav)::view-transition-new(root) {
  animation-duration: 0.25s;
}

/* Respect a stated preference for less motion: every view transition —
   navigation and theme switch alike — becomes a plain cut. Unscoped rather
   than gated on the page-nav type so it also holds in Safari. The blend
   reset matters once nothing animates: both images sit at full opacity, and
   plus-lighter would sum them into a blown-out flash. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    mix-blend-mode: normal;
  }
}

/* ─── Embedded article / page infographics ─── */
.nf-infographic {
  margin: 2.25rem 0 2.5rem;
  max-width: 100%;
}
.nf-infographic img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(240, 236, 228, 0.1);
  background: #0a0a0a;
}
.nf-infographic figcaption {
  margin-top: 0.7rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--white-dim);
}
.nf-infographic figcaption a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  transition: border-color 0.25s, color 0.25s;
}
.nf-infographic figcaption a:hover {
  color: var(--red-text);
  border-bottom-color: var(--red);
}
.nf-infographic--themed .nf-ig-dark { display: none; }
html:not([data-theme="light"]) .nf-infographic--themed .nf-ig-light { display: none; }
html:not([data-theme="light"]) .nf-infographic--themed .nf-ig-dark { display: block; }
.nf-infographic--portrait {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
[data-theme="light"] .nf-infographic img {
  border-color: rgba(26, 23, 21, 0.1);
  background: #f4f1ea;
}
[data-theme="light"] .nf-infographic figcaption {
  color: var(--white-dim);
}

/* ─── Live Field teaser (Home / About / Donate) ───
   Half-width live mini-board fed by /field/orgs.json — not a static screenshot. */
.field-teaser-section {
  /* ~10% less vertical air than full --pad */
  padding: calc(var(--pad) * 0.9) 0;
  border-top: 1px solid var(--border-a);
  background: var(--darker);
  scroll-margin-top: 120px;
}
/* Subtle abstract wash default for Field teasers with section-art */
.field-teaser-section.section-art {
  --art-opacity: 0.16;
}
[data-theme="light"] .field-teaser-section.section-art {
  --art-opacity: 0.12;
}
/* Homepage Field: owner 2026-08-24 — raise wash so teal-coral reads on the right.
   Owner 2026-08-24 follow-up: drop painting on the LEFT (copy column) only;
   keep the right-edge wash. Desktop-only — phones keep the flat mobile scrim. */
body:not(.inner-page) #the-field.field-teaser-section.section-art {
  --art-opacity: 0.42;
}
[data-theme="light"] body:not(.inner-page) #the-field.field-teaser-section.section-art {
  --art-opacity: 0.32;
}
@media (min-width: 769px) {
  body:not(.inner-page) #the-field.field-teaser-section.section-art {
    --art-scrim: linear-gradient(100deg,
      rgba(var(--art-rgb), 1) 0%,
      rgba(var(--art-rgb), 1) 56%,
      rgba(var(--art-rgb), 0.82) 76%,
      rgba(var(--art-rgb), 0.62) 100%);
  }
  [data-theme="light"] body:not(.inner-page) #the-field.field-teaser-section.section-art {
    --art-scrim: linear-gradient(100deg,
      rgba(var(--art-rgb), 1) 0%,
      rgba(var(--art-rgb), 1) 56%,
      rgba(var(--art-rgb), 0.88) 76%,
      rgba(var(--art-rgb), 0.71) 100%);
  }
}
.field-teaser-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 48px);
  align-items: center;
}
.field-teaser-copy {
  max-width: 34rem;
}
.field-teaser-copy .section-label {
  margin-bottom: 20px; /* gold label→title */
}
.field-teaser-copy h2 {
  margin: 0 0 12px;
  max-width: 14ch;
  text-wrap: balance;
}
.field-teaser-copy > p {
  margin: 0 0 0.95em;
  color: var(--white-mid);
  font-size: clamp(1.08rem, 1.3vw, 1.16rem);
  line-height: 1.65;
  max-width: 40ch;
}
.field-teaser-copy > p:last-of-type {
  margin-bottom: 0;
}
.field-teaser-copy .btn-secondary {
  margin-top: 4px;
}

/* Framed mini board — reads like a live "screenshot" of /field/ */
.field-teaser-frame {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(240, 236, 228, 0.12);
  background: rgba(0, 0, 0, 0.28);
  padding: 12px 10px 10px;
  max-height: min(468px, 65vh);
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field-teaser-frame:hover,
.field-teaser-frame:focus-visible {
  border-color: rgba(185, 28, 28, 0.45);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(185, 28, 28, 0.15);
  outline: none;
}
.field-teaser-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  background: linear-gradient(to top, rgba(12, 10, 9, 0.92), transparent);
  pointer-events: none;
  z-index: 2;
}
.field-teaser-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 12px;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-mid);
}
.field-teaser-chrome strong {
  color: var(--white);
  font-weight: 500;
  letter-spacing: 0.12em;
}
.field-teaser-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  /* Stretch so Prevent box height matches Build / race (frontier labs) on row 1 */
  align-items: stretch;
}
.field-teaser-col {
  border: 1px solid rgba(240, 236, 228, 0.1);
  background: rgba(0, 0, 0, 0.16);
  padding: 10px 8px 12px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
}
.field-teaser-col--prevent,
.field-teaser-col--build {
  /* Same grid row → equal height boxes; logos stay packed at top (not spaced mid-box) */
  align-self: stretch;
  height: 100%;
}
.field-teaser-col--prevent { grid-column: 1; grid-row: 1; }
.field-teaser-col--build { grid-column: 2; grid-row: 1; }
.field-teaser-col--govern {
  grid-column: 1 / -1;
  grid-row: 2;
}
.field-teaser-head {
  margin: 0 2px 8px;
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: baseline;
  flex: 0 0 auto;
}
.field-teaser-count {
  color: var(--white-mid);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.field-teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
  gap: 5px;
  /* Never grow to fill stretched column — that spaced Stop AI into mid-box empty air */
  flex: 0 0 auto;
  align-content: start;
  align-items: start;
  justify-items: start;
}
.field-teaser-col--govern .field-teaser-grid {
  grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
  gap: 4px;
}
.field-teaser-tile {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  background: transparent;
  border: 1px solid transparent;
}
.field-teaser-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
html:not([data-theme="light"]) .field-teaser-tile img.is-ink {
  filter: brightness(0) invert(1);
  opacity: 0.94;
}
[data-theme="light"] .field-teaser-tile img.is-paper {
  filter: brightness(0);
  opacity: 0.88;
}
.field-teaser-tile-fb {
  font-family: var(--sans);
  font-size: 0.42rem;
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
  color: var(--white-mid);
  word-break: break-word;
}
.field-teaser-cta {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Match nav Donate (.nav-cta): brand red fill, white label, glow hover, no lift */
  color: #fff;
  background: var(--red);
  padding: 8px 14px;
  border: 1px solid var(--red);
  white-space: nowrap;
  pointer-events: none;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.field-teaser-frame:hover .field-teaser-cta,
.field-teaser-frame:focus-visible .field-teaser-cta {
  background: var(--red-bright);
  border-color: var(--red-bright);
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.6);
}
.field-teaser-loading,
.field-teaser-error {
  margin: 24px 8px;
  color: var(--white-mid);
  font-size: 0.88rem;
  font-family: var(--sans);
}

[data-theme="light"] .field-teaser-section {
  background: var(--darker);
}
[data-theme="light"] .field-teaser-frame {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(26, 23, 21, 0.1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .field-teaser-frame::after {
  background: linear-gradient(to top, rgba(244, 240, 232, 0.96), transparent);
}
[data-theme="light"] .field-teaser-col {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(26, 23, 21, 0.1);
}
[data-theme="light"] .field-teaser-head {
  color: #1a1715;
}
[data-theme="light"] .field-teaser-count,
[data-theme="light"] .field-teaser-chrome {
  color: rgba(26, 23, 21, 0.55);
}
[data-theme="light"] .field-teaser-chrome strong {
  color: #1a1715;
}
[data-theme="light"] .field-teaser-copy > p {
  color: rgba(26, 23, 21, 0.72);
}

@media (max-width: 900px) {
  .field-teaser-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .field-teaser-frame {
    max-height: min(440px, 70vh);
    order: 2;
  }
  .field-teaser-copy {
    order: 1;
    max-width: none;
  }
  .field-teaser-copy > p {
    max-width: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   ESSAY / BLOG ARTICLE CHROME (promoted from musk pilot 2026-08)
   Scope: pages with .article-body / .article-nav / .article-share
   ═══════════════════════════════════════════════════════════ */

/* Body column centered; hero title/dek sit on the LEFT (intentional) */
.article-body {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero left-rail only when this is an essay hero (has article path nav) */
.page-hero:has(.article-nav) > .container {
  display: flex;
  justify-content: flex-start;
}
.page-hero:has(.article-nav) .page-hero-inner {
  max-width: min(680px, 100%);
  width: 100%;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-inline: 0 auto !important;
  text-align: left !important;
  overflow: visible;
}
.page-hero:has(.article-nav) .article-nav,
.page-hero:has(.article-nav) .article-meta {
  justify-content: flex-start;
}
.page-hero:has(.article-nav) .lead {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 36rem;
  text-align: left !important;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--white) 88%, transparent);
}
/* Article heroes: wide measure + sized type so full titles land in ≤2 lines
   without ellipsis/clamp. Intentional <br> still owns the preferred break. */
.page-hero:has(.article-nav) .page-hero-inner {
  max-width: min(100%, 62rem);
}
.page-hero:has(.article-nav) h1 {
  text-align: left !important;
  font-size: clamp(1.85rem, 3.5vw, 3.05rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  max-width: min(100%, 58rem);
  margin-bottom: clamp(28px, 3.5vw, 40px);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  /* Soft two-line cap without cutting words: allow natural wrap only. */
  display: block;
}
/* Let share menu escape hero overflow clipping */
.page-hero.page-hero--art:has(.article-nav) {
  overflow: visible !important;
  /* Extra header air so a two-line title never crowds the lead. */
  padding-top: calc(var(--pad) + 90px + 12px) !important;
  padding-bottom: clamp(48px, 5.5vw, 72px) !important;
}
.page-hero:has(.article-nav) > .container {
  overflow: visible;
}

/* Main essay stream: plain background, no painting */
.article-main {
  background: var(--black) !important;
  background-image: none !important;
  padding-top: clamp(36px, 4.5vw, 52px) !important;
  padding-bottom: var(--pad) !important;
}
.article-main.section-art,
.article-main.section-art::before,
.article-main.section-art::after {
  background-image: none !important;
  content: none;
}

/* Type */
.article-body h2 {
  font-size: clamp(1.81rem, 3vw, 2.31rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin: 2.65rem 0 0.85rem;
  color: var(--white);
}
/* First H2 needs real air after the opener (not cramped) */
.article-body > h2:first-of-type {
  margin-top: 1.45rem;
}
.article-body h3 {
  margin: 2rem 0 0.7rem;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 1.55rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--white);
}
.article-body > p,
.article-body li {
  color: var(--white);
  font-size: 1.22rem;
  line-height: 1.74;
}
.article-body p { margin: 0 0 1.05em; }
.article-body ul,
.article-body ol {
  margin: 0 0 1.05em 1.25em;
  color: var(--white);
  line-height: 1.74;
}

/* Drop cap — float only; opener must be 3+ lines */
.article-body > p.drop-cap {
  min-height: calc(1.74em * 3);
}
.article-body > p.drop-cap::first-letter {
  float: left;
  font-family: var(--serif);
  font-size: 6.2em;
  line-height: 0.8;
  padding: 0 0.1em 0 0;
  margin: 0.02em 0.08em 0 0;
  font-weight: 400;
  color: var(--white);
}

/* Quotes: no box, no bar; curly marks */
.article-body blockquote {
  border: none !important;
  border-left: none !important;
  background: transparent !important;
  padding: 0 0 0 0.15em !important;
  margin: 1.75rem 0 !important;
  max-width: none !important;
  width: 100% !important;
  text-align: left !important;
  position: relative;
}
.article-body blockquote p,
.article-body blockquote cite {
  text-align: left;
}
.article-body blockquote p {
  margin: 0 0 0.75em;
  font-family: var(--serif);
  font-size: clamp(1.22rem, 2.1vw, 1.4rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: var(--white);
}
.article-body blockquote p:last-of-type {
  margin-bottom: 0;
  margin-top: 0.15em;
}
.article-body blockquote p:first-of-type::before {
  content: "“";
  font-family: var(--serif);
  font-style: normal;
  font-size: 1.35em;
  line-height: 0;
  margin-right: 0.22em;
  margin-left: -0.35em;
  color: var(--red-text);
  vertical-align: -0.05em;
}
.article-body blockquote p:last-of-type::after {
  content: "”";
  font-family: var(--serif);
  font-style: normal;
  font-size: 1.35em;
  line-height: 0;
  margin-left: 0.04em;
  color: var(--red-text);
  vertical-align: -0.05em;
}
.article-body blockquote cite {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-mid);
  font-style: normal;
  line-height: 1.45;
}
.article-body blockquote cite a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--white-mid) 45%, transparent);
}
.article-body blockquote cite a:hover {
  color: var(--red-text);
  border-bottom-color: var(--red-text);
}

.article-body .src-note {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-mid);
  font-style: normal;
  line-height: 1.45;
}
.article-body .src-note a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--white-mid) 45%, transparent);
}
.article-body .src-note a:hover {
  color: var(--red-text);
  border-bottom-color: var(--red-text);
}

/* Path nav: BLOG · CATEGORY */
.article-nav {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-mid);
  margin-bottom: 28px;
}
.article-nav a {
  color: var(--white-mid);
  text-decoration: none;
  border-bottom: none;
  transition: color 0.2s;
}
.article-nav a:hover,
.article-nav a:focus {
  color: var(--red-text);
}
/* Real CSS circles (not tiny text glyphs) */
.article-nav-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 0.55em;
  border-radius: 50%;
  background: var(--white-dim);
  color: transparent;
  font-size: 0;
  line-height: 0;
  flex-shrink: 0;
  user-select: none;
  opacity: 0.95;
  transform: none;
}

/* Byline */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  row-gap: 8px;
  margin: 22px 0 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--white-mid);
  letter-spacing: 0.04em;
}
.article-meta > span + span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 0.65em;
  border-radius: 50%;
  background: var(--white-dim);
  vertical-align: 0.15em;
  opacity: 0.95;
}
/* Read time + Share stay on one unit so Share doesn't orphan alone on phones */
.article-meta-tail {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.article-meta-tail::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 0.65em;
  border-radius: 50%;
  background: var(--white-dim);
  vertical-align: 0.15em;
  opacity: 0.95;
  flex-shrink: 0;
}
.article-meta strong { color: var(--white); font-weight: 500; }
.article-meta a.text-link {
  color: var(--white);
  border-bottom: none;
  text-decoration: none;
  transition: color 0.25s;
}
.article-meta a.text-link:hover,
.article-meta a.text-link:focus {
  color: var(--red-text);
  border-bottom: none;
}
.article-meta a.text-link strong {
  color: inherit;
  font-weight: 500;
}

/* Share control — plain text, no box */
.article-share {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0 0 0 0.85em;
  vertical-align: middle;
  z-index: 50;
}
/* When inside meta-tail, separator is the tail::before; no second dot before Share */
.article-meta-tail .article-share {
  margin-left: 0.85em;
}
.article-meta-tail .article-share::before {
  content: none;
  display: none;
}
.article-share::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 0.65em;
  border-radius: 50%;
  background: var(--white-dim);
  vertical-align: 0.15em;
  opacity: 0.95;
}
.article-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-mid);
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1.2;
}
.article-share-btn:hover,
.article-share-btn:focus-visible,
.article-share-btn[aria-expanded="true"] {
  color: var(--red-text);
  background: transparent;
  border: none;
  outline: none;
}
.article-share-btn.is-copied,
.article-share-btn.is-copied:hover {
  color: var(--red-text);
}
.article-share-btn.is-copied svg {
  display: none;
}
.article-share-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.9;
}
.article-share-menu {
  position: fixed;
  z-index: 10000;
  min-width: 220px;
  padding: 6px 0;
  background: color-mix(in srgb, var(--darker, #121212) 94%, #000);
  border: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
[data-theme="light"] .article-share-menu {
  background: #f9f8f6;
  box-shadow: 0 12px 32px rgba(26, 23, 21, 0.14);
}
.article-share-menu[hidden] { display: none !important; }
.article-share-menu button,
.article-share-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 16px;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--white);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.article-share-menu button:hover,
.article-share-menu button:focus-visible,
.article-share-menu a:hover,
.article-share-menu a:focus-visible {
  background: rgba(185, 28, 28, 0.1);
  color: var(--red-text);
  outline: none;
}
.article-share-menu svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.85;
}
.article-share-toast {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red-text);
  pointer-events: none;
}
@media print {
  .article-share { display: none !important; }
}

/* Author strip */
.article-author {
  max-width: 680px;
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--white-mid);
}
.article-author strong {
  color: inherit;
  font-weight: 500;
}
.article-author a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  transition: color 0.2s, border-color 0.2s;
}
.article-author a:hover,
.article-author a:focus-visible {
  color: var(--red-text);
  border-bottom-color: var(--red-text);
  outline: none;
}

/* FAQ appendix */
.article-faq-section {
  background: var(--black);
  padding: calc(var(--pad) * 0.5) 0 calc(var(--pad) * 0.65);
}
.article-faq-section .article-faq {
  max-width: 680px;
  margin: 0 auto;
  border-top: none;
  padding-top: 0;
}
.article-faq {
  border-top: none;
}
.article-faq > .section-label { margin-bottom: 20px; } /* gold label→title */
.article-faq > h2 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.65rem, 2.8vw, 2.1rem);
  color: var(--white);
}
.article-faq .faq-list { margin-top: 1.15rem !important; }

/* Related reading — magazine continues, not tool tiles */
.article-keep {
  /* Match the 159 essays: equal pad, FAQ then Keep Reading then signup */
  padding: calc(var(--pad) * 0.65) 0 !important;
}
.article-keep .article-related {
  margin-bottom: 0;
  padding-bottom: 0;
}
.article-faq-section {
  padding-bottom: clamp(48px, 6vw, 88px) !important;
}
/* If FAQ or keep is immediately before signup, keep a clear gap */
.article-keep + #signup,
.article-faq-section + #signup,
article + #signup {
  margin-top: 0;
}
.article-keep > h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: clamp(1.55rem, 2.8vw, 2.05rem);
  font-weight: 400;
  letter-spacing: -0.015em;
}
.article-keep > .section-label { margin-bottom: 20px; } /* gold label→title */
.article-related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 48px;
  margin-top: 1.75rem;
  opacity: 1;
  transform: none;
  max-width: 1100px;
}
/* Essay "TRY THE TOOL" — one reading card, not a vanishing homepage stat-card */
.article-tool {
  padding-bottom: calc(var(--pad) * 0.55);
}
.article-related--solo {
  grid-template-columns: 1fr;
  max-width: 36em;
  margin-top: 0; /* gold: 20px comes from .section-label margin-bottom */
}
.article-related a {
  display: block;
  text-decoration: none;
  border: none !important;
  border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 1.15rem 0 1.1rem !important;
  transition: border-color 0.2s, color 0.2s;
}
.article-related a:hover,
.article-related a:focus-visible {
  border-top-color: var(--red-text) !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
}
.article-related .related-title {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.42rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--white);
  margin: 0 0 0.55rem;
  transition: color 0.2s;
}
.article-related a:hover .related-title,
.article-related a:focus-visible .related-title {
  color: var(--red-text);
}
.article-related .related-title::after {
  content: none !important;
}
.article-related .related-dek {
  font-family: var(--body, "Computer Modern Roman", "Latin Modern Roman", Georgia, serif);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--white-mid);
  margin: 0;
  max-width: 28em;
}

@media (max-width: 700px) {
  .article-related { grid-template-columns: 1fr; }
  .page-hero:has(.article-nav) .page-hero-inner { text-align: left; }
  .page-hero:has(.article-nav) .article-nav,
  .page-hero:has(.article-nav) .article-meta { justify-content: flex-start; }
  .article-body > p.drop-cap::first-letter {
    font-size: 5.7em;
    line-height: 0.8;
  }
  .article-meta {
    font-size: 0.74rem;
    letter-spacing: 0.02em;
  }
  .article-meta > span + span::before,
  .article-meta-tail::before {
    margin-left: 0.45em;
    margin-right: 0.45em;
  }
  .article-meta-tail .article-share {
    margin-left: 0.55em;
  }
  .article-share-btn {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
  }
}

/* ═══════════════════════════════════════════════════════════
   ESSAY BODY WIDGETS (callout / two-col / process) — shared
   ═══════════════════════════════════════════════════════════ */
.article-body .callout,
.article-body .example-box {
  background: var(--darker);
  border: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
  border-left: 3px solid var(--red);
  padding: 26px 30px 28px;
  margin: 32px 0;
}
.article-body .callout-label,
.article-body .example-box > .example-label,
.article-body .example-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-text);
  margin: 0 0 14px;
  line-height: 1.3;
}
.article-body .callout p,
.article-body .example-box p {
  margin: 0;
  /* Match article body type — nested p is not a direct .article-body > p child */
  color: var(--white);
  font-size: 1.22rem;
  line-height: 1.74;
  font-family: var(--body);
}
/* Proxy / example cards (Goodhart grid etc.) — same family as callout */
.article-body .example-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin: 30px 0;
}
.article-body .example-cell {
  background: var(--darker);
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--white) 6%, transparent);
}
.article-body .example-cell .example-label {
  margin-bottom: 10px;
}
.article-body .example-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--white);
  margin: 0 0 10px;
  line-height: 1.3;
}
.article-body .example-desc {
  font-size: 0.9rem;
  color: var(--white-mid);
  line-height: 1.7;
}
@media (max-width: 600px) {
  .article-body .example-grid { grid-template-columns: 1fr; }
}
.article-body .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin: 30px 0;
}
.article-body .two-col-cell {
  background: var(--darker);
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--white) 6%, transparent);
}
.article-body .two-col-cell-label {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.article-body .two-col-cell-label.red { color: var(--red-text); }
.article-body .two-col-cell-label.dim { color: var(--white-dim); }
.article-body .two-col-cell p {
  font-size: 0.88rem;
  color: var(--white-mid);
  line-height: 1.7;
  margin: 0 0 10px;
}
.article-body .two-col-cell p:last-child { margin: 0; }
@media (max-width: 600px) {
  .article-body .two-col { grid-template-columns: 1fr; }
}
.article-body .process-steps { margin: 30px 0; }
.article-body .process-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  margin-bottom: 24px;
  align-items: start;
}
.article-body .step-num {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 300;
  color: var(--red-text);
  line-height: 1;
  padding-top: 2px;
}
.article-body .step-body h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 0.04em;
}
.article-body .step-body p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--white-mid);
  line-height: 1.7;
}

/* Week labels (perfect-storm thought experiment) — same family as callout-label */
.article-body .wk {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-text);
  margin: 1.85rem 0 0.4rem;
  line-height: 1.3;
}
.article-body h2 + .wk { margin-top: 0.35rem; }
.article-body .wk + p { margin-top: 0.35rem; }

/* Numbered door / layer stack — alias of process-steps (asi-alignment + perfect-storm) */
.article-body .layer-stack { margin: 30px 0; }
.article-body .layer-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  margin-bottom: 24px;
  align-items: start;
}
.article-body .layer-item:last-child { margin-bottom: 0; }
.article-body .layer-num {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 300;
  color: var(--red-text);
  line-height: 1;
  padding-top: 2px;
}
.article-body .layer-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--white);
  margin: 0 0 8px;
  line-height: 1.3;
}
.article-body .layer-desc {
  font-size: 0.9rem;
  color: var(--white-mid);
  line-height: 1.7;
}
.article-body .layer-desc a { color: inherit; }

/* Essay data tables (funding breakdowns etc.) — same family as body widgets */
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.7rem 0 2.1rem;
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.45;
}
.article-body table th {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-mid);
  text-align: left;
  padding: 0 14px 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--white) 16%, transparent);
}
.article-body table td {
  padding: 13px 14px 13px 0;
  vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--white) 8%, transparent);
  color: var(--white);
}
.article-body table th:not(:first-child),
.article-body table td:not(:first-child) {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-right: 0;
  padding-left: 36px;
}
.article-body table small {
  display: block;
  margin-top: 4px;
  font-size: 0.86rem;
  color: var(--white-mid);
  line-height: 1.5;
  font-weight: 400;
}
.article-body table tr.total td {
  font-weight: 600;
  border-bottom: none;
  padding-top: 16px;
}
@media (max-width: 700px) {
  .article-body table {
    font-size: 0.92rem;
  }
  .article-body table th:not(:first-child),
  .article-body table td:not(:first-child) {
    white-space: normal;
    padding-left: 14px;
  }
}

/* ── Red .section-label gold air (2026-08-16) ─────────────────────────
   HARD GOLD (owner): 48px ABOVE label / 20px BELOW label → title.
   Exemplars: EXPERT VOICES + FROM OUR FOUNDER on /the-threat/.
   NEVER violate without explicit owner confirm (one-time override OR gold change).
   EXCLUDE only: category hubs (.hub-page / .hub-band), .tools-band, .page-hero
   (heroes keep nav clearance). Homepage body sections ARE in scope. Signup in scope. */
body.inner-page:not(:has(> .hub-page)) > section:not(.page-hero):not(.hub-band):not(.tools-band),
body:not(.inner-page) > section:not(#hero) {
  padding-top: 48px !important; /* beats inline padding: var(--pad) 0 and page-local */
}

/* Label → title couple: 20px, no stacked heading margin-top */
body.inner-page:not(:has(> .hub-page)) .section-label,
body:not(.inner-page) .section-label {
  margin-bottom: 20px !important;
}
body.inner-page:not(:has(> .hub-page)) .section-label + h1,
body.inner-page:not(:has(> .hub-page)) .section-label + h2,
body.inner-page:not(:has(> .hub-page)) .section-label + h3,
body.inner-page:not(:has(> .hub-page)) .section-label + .founder-rec-heading,
body.inner-page:not(:has(> .hub-page)) .section-label + .article-related,
body:not(.inner-page) .section-label + h1,
body:not(.inner-page) .section-label + h2,
body:not(.inner-page) .section-label + h3 {
  margin-top: 0 !important;
}

/* Hubs keep their own label→title (do not flatten to body gold) */
body.inner-page:has(> .hub-page) .hub-band .section-label,
body.inner-page .tools-band .section-label {
  margin-bottom: 18px !important;
}