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

/* ─── SELF-HOSTED FONTS (latin subset, variable, from Google Fonts) ─── */
@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: '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;
  /* Inter/Cormorant are latin-subset self-hosts. System UI + Noto cover CJK,
     Arabic, Hangul, Cyrillic, Vietnamese when a localized page is active. */
  --serif:       'Cormorant Garamond', 'Noto Serif', 'Songti SC', 'Hiragino Mincho ProN', 'Didot', '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', 'Malgun Gothic', '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);
}

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

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 300;
  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 {
  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; }
a.text-link {
  color: var(--red-text);
  border-bottom: 1px solid rgba(185, 28, 28, 0.4);
  transition: border-color 0.25s, color 0.25s;
}
a.text-link:hover { color: var(--red-text-hover); border-color: var(--red-bright); }

/* Byline author link: red text, no underline (sitewide). */
.article-meta a.text-link { border-bottom: none; }

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-intro {
  color: var(--white-mid);
  font-size: 1rem;
  line-height: 1.8;
  max-width: 680px;
  margin-bottom: 0;
}

/* ─── 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);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 36px;
  transition: border-color 0.25s, background 0.25s;
}
.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;
}

.nav-brand {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.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); }

@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-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-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) ─── */
.lang-switch {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 4px;
}
.lang-toggle {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: var(--white-mid);
  background: transparent;
  border: 1px solid transparent;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.lang-toggle:hover,
.lang-toggle[aria-expanded="true"] {
  color: var(--white);
  background: rgba(240, 236, 228, 0.06);
  border-color: var(--border-c);
  box-shadow: 0 0 16px rgba(240, 236, 228, 0.08);
}
.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, 420px);
  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;
  transition: color 0.15s ease, background 0.15s ease;
}
.lang-menu a:hover,
.lang-menu a:focus-visible {
  color: var(--white);
  background: rgba(240, 236, 228, 0.06);
  outline: none;
}
.lang-menu a[aria-current="true"] {
  color: var(--red-text);
}

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

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

.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;
  line-height: 0;
  transition: color 0.25s;
}
.nav-search-toggle:hover,
.nav-search.open .nav-search-toggle { color: var(--white); }
.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);
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 4px 0;
}
.nav-search-input::placeholder { color: var(--white-dim); }

.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;
  font-size: 0.85rem;
  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 {
  font-size: 0.72rem;
  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 {
  font-size: 0.75rem;
  color: var(--white-dim);
  margin: 12px 0 0;
}

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

.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.hero-scroll span {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--white-dim);
}
.scroll-line {
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, var(--white-dim) 0%, transparent 100%);
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1) translateY(0); }
  50%       { opacity: 0.9; transform: scaleY(0.75) translateY(4px); }
}

/* ═══════════════════════════════════════════
   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/
   A compact hero plus a card grid of the section's pages,
   sized to sit within one viewport (like /tools/). Colors
   come from the theme tokens, so light mode adapts for free.
   ═══════════════════════════════════════════ */
/* Fixed height so all four hubs match, with the content centered in the space
   below the 101px fixed nav. Centering makes the gap above the label equal the
   gap below the lead (balanced hero), and the fixed min-height keeps every hub
   the same height regardless of how long its headline or lead runs. */
.hub-hero {
  position: relative;
  overflow: hidden;
  background: var(--black);
  border-bottom: 1px solid var(--border-a);
  min-height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px 0 0;
}
/* The flex hero would otherwise shrink .container to its content width and center
   that, pushing the hero text inward. Force full width so the container — and the
   left-aligned text inside it — lines up with the card grid below. */
.hub-hero > .container { width: 100%; }
.hub-hero-inner { position: relative; z-index: 2; max-width: 820px; }
.hub-hero .section-label { margin-bottom: 22px; }
.hub-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 20px;
}
.hub-hero .lead {
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  color: var(--white-mid);
  line-height: 1.6;
  max-width: 720px;
}

/* The hub article fills the height below the nav and centers the card grid in
   the space between the hero and the footer, so the cards get equal room above
   and below instead of hugging the hero with all the slack beneath them.
   (width:100% keeps the flex-centered .container from shrinking to content and
   misaligning the grid, same fix as the hero.) */
.hub-page { flex: 1; display: flex; flex-direction: column; }
.hub-page .hub-hero { flex: 0 0 auto; }
.hub-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 0;
}
.hub-section > .container { width: 100%; }
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--darker);
  border: 1px solid rgba(240, 236, 228, 0.09);
  padding: clamp(18px, 1.9vw, 26px);
  transition: border-color 0.25s;
  text-decoration: none;
  color: inherit;
}
.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: 10px;
}
.hub-card h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  color: var(--white);
  line-height: 1.08;
  margin: 0 0 10px;
}
.hub-card p {
  color: var(--white-mid);
  line-height: 1.55;
  font-size: 0.9rem;
  margin: 0 0 16px;
  flex: 1;
}
.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; }

@media (max-width: 768px) {
  .hub-grid { grid-template-columns: 1fr; margin-top: 24px; }
}

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

/* ═══════════════════════════════════════════
   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;
  height: 100%;
  /* A landscape painting inside a portrait box gets zoomed by background-size:cover
     until it is an unreadable fragment — the lesson section runs 1744px tall, and
     every section clears 1200px on a phone. Capping the band against the viewport
     width holds the artwork near its own shape at any size (~1.5:1), and the mask
     dissolves the cut edge so it reads as a backdrop, not a chopped-off picture. */
  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: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 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. */
.section-art.art-on::before {
  background-image: var(--art);
  opacity: var(--art-opacity);
}

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

/* .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.
   The hover tint has to be re-weighted too: 0.04 red over a painting reads as
   nothing, where over flat --darker it reads as a state change. */
.section-art .sci-card { background: rgba(var(--darker-rgb), 0.82); }
.section-art .sci-card:hover { background: rgba(185, 28, 28, 0.14); }

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

/* ═══════════════════════════════════════════
   ALARM BANNER
   ═══════════════════════════════════════════ */
@keyframes alarmGlow {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(185, 28, 28, 0.7),
      0 0 55px rgba(185, 28, 28, 0.35),
      0 4px 30px rgba(185, 28, 28, 0.4);
  }
  50% {
    box-shadow:
      0 0 32px rgba(220, 38, 38, 1),
      0 0 100px rgba(185, 28, 28, 0.65),
      0 4px 60px rgba(185, 28, 28, 0.5);
  }
}
.alarm-banner {
  background: var(--red);
  padding: 14px var(--gutter);
  text-align: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
  animation: alarmGlow 2.8s ease-in-out infinite;
}
.alarm-banner p {
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════
   QUOTES
   ═══════════════════════════════════════════ */
#quotes {
  padding: 90px 0;
  background: var(--darker);
  border-bottom: 1px solid var(--border-a);
}

.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;
}

/* Featured single quote — lead punch above a card grid */
.quote-feature {
  border-left: none;
  padding-left: 0;
  max-width: 940px;
  margin: 44px auto 0;
  text-align: center;
}
.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;
  font-size: 0.86rem;
  letter-spacing: 0.07em;
  color: var(--white-dim);
  font-style: normal;
}

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

#china-myth {
  padding: var(--pad) 0;
}

.mission-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 70px;
}

.mission-col p { margin-bottom: 18px; font-size: 1rem; }

.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: rgba(240, 236, 228, 0.02); }

.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.15rem; }
.pillar p  { font-size: 0.9rem; line-height: 1.75; }

/* ─── HOW WE DIFFER ─── */
.how-we-differ {
  padding-top: var(--pad);
  border-top: 1px solid var(--border-c);
}
.how-we-differ .section-label { margin-bottom: 0; }

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

.differ-card {
  background: var(--black);
  padding: 44px 38px;
  transition: background 0.3s;
}
.differ-card:hover { background: rgba(185, 28, 28, 0.03); }
.differ-card h3 { font-size: 1.1rem; margin-bottom: 12px; }
.differ-card p  { font-size: 0.9rem; line-height: 1.78; }

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

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

#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 h2 { margin-bottom: 60px; }

.science-grid {
  display: grid;
  gap: 1px;
  background: var(--border-c);
  margin-bottom: 70px;
  border: 1px solid var(--border-c);
}

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

.sci-card {
  background: var(--darker);
  padding: 44px 38px;
  transition: background 0.3s ease;
}
.sci-card:hover { background: rgba(185, 28, 28, 0.04); }
.sci-card h3 { font-size: 1.1rem; margin-bottom: 14px; }
.sci-card p  { font-size: 0.9rem; line-height: 1.78; }

.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: 1.1rem;
}

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

#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: rgba(185, 28, 28, 0.03); }

.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;
}

/* ═══════════════════════════════════════════
   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);
  transition: background 0.3s;
}
.policy-item:last-child { border-bottom: none; }
.policy-item:hover { background: rgba(185, 28, 28, 0.03); }

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

.policy-content {
  padding: 44px 52px;
}
.policy-content h3 { margin-bottom: 12px; font-size: 1.18rem; }
.policy-content p  { font-size: 0.93rem; 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;
}

.signup-inner {
  max-width: 640px;
  margin: 0 auto;
}
.signup-inner h2 { margin-bottom: 10px; }
.signup-inner > p { margin-bottom: 22px; font-size: 1rem; }

.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;
}
.form-msg.success { color: #6ee7b7; }
.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: 10px; }
.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 ─── */
#glossary {
  padding: var(--pad) 0;
}

/* ─── FAQ ─── */
.faq-section {
  padding: var(--pad) 0;
  background: var(--black);
  border-top: 1px solid var(--border-a);
}
.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; }

/* Homepage: intuitive "why superintelligence is different" teaser */
#why-different {
  padding: var(--pad) 0;
  background: var(--black);
  border-top: 1px solid var(--border-a);
}
.sci-card[id] { scroll-margin-top: 110px; }

.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); }

.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);
  font-size: 0.95rem;
  line-height: 1.85;
  max-width: 820px;
}

/* 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
   ═══════════════════════════════════════════ */
#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: 1rem; line-height: 1.8; 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 {
  padding: 44px 42px;
  border: 1px solid var(--border-b);
  transition: border-color 0.3s, background 0.3s;
}
.partnership-card:hover {
  border-color: rgba(185, 28, 28, 0.4);
  background: rgba(185, 28, 28, 0.03);
}
.partnership-card h3 { margin-bottom: 14px; font-size: 1.15rem; }
.partnership-card p  { font-size: 0.91rem; line-height: 1.8; }

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

.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: var(--red-text);
  border-bottom: 1px solid rgba(185, 28, 28, 0.4);
}
.donate-notice a:hover { color: var(--red-text-hover); }

.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 {
  font-family: var(--sans);
  font-size: 0.60rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-text);
  margin-bottom: 3px;
}
.footer-cols a {
  font-size: 0.68rem;
  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: alpha 0.49 on #080808 is the DIMMEST that still meets WCAG AA (4.50:1)
   for normal-size text. Do not lower it; anything below fails AA. Light mode uses 0.61. */
.footer-legal {
  font-size: 0.68rem;
  color: rgba(240, 236, 228, 0.49);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.footer-legal a {
  color: rgba(240, 236, 228, 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.62rem;
  color: rgba(240, 236, 228, 0.2);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal][data-delay="1"] { transition-delay: 0.12s; }
[data-reveal][data-delay="2"] { transition-delay: 0.24s; }
[data-reveal][data-delay="3"] { transition-delay: 0.36s; }
[data-reveal][data-delay="4"] { transition-delay: 0.48s; }

/* ═══════════════════════════════════════════
   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; }
  .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); }
  .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 identical static globe once the
   country data is ready (main.js), then begins spinning, a seamless hand-off. */
#globe-canvas {
  opacity: 0;
  transition: opacity 0.8s 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 on the first interaction. */
.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 exactly overlay the canvas globe: diameter = min(0.84·vw, 0.80·vh) = min(0.42W,0.40H)·2. */
.globe-static .globe-svg {
  position: absolute;
  top: 50%;
  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-grid { stroke: rgba(240, 236, 228, 0.04); stroke-width: 0.5; }
.globe-static .g-land { stroke: rgba(240, 236, 228, 0.28); stroke-width: 0.7; }
[data-theme="light"] .globe-static .g-grid { stroke: rgba(26, 23, 21, 0.06); }
[data-theme="light"] .globe-static .g-land { stroke: rgba(26, 23, 21, 0.28); }

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

/* ═══════════════════════════════════════════
   PRIVATE ADMISSIONS
   ═══════════════════════════════════════════ */
#private-admissions {
  padding: var(--pad) 0;
  background: var(--darker);
  border-top: 1px solid rgba(240,236,228,0.05);
}
#private-admissions h2 { margin-bottom: 16px; }
#private-admissions .section-intro { margin-bottom: 0; }

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

/* ═══════════════════════════════════════════
   DOCUMENTED INCIDENTS
   ═══════════════════════════════════════════ */
#documented {
  padding: var(--pad) 0;
  background: var(--darker);
  border-top: 1px solid rgba(240,236,228,0.05);
}
#documented h2 { margin-bottom: 12px; }
#documented .section-intro { margin-bottom: 0; }
.incident-list {
  margin-top: 52px;
}
.incident-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 40px;
  align-items: start;
  padding: 40px 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: 6px;
}
.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: 12px;
}
.incident-body h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 14px;
  line-height: 1.35;
}
.incident-body p {
  font-size: 0.87rem;
  color: var(--white-mid);
  line-height: 1.8;
  max-width: 680px;
}
@media (max-width: 640px) {
  .incident-row { grid-template-columns: 1fr; gap: 8px; }
  .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: 12px; }
.doomsday-text h2             { margin-bottom: 28px; }
.doomsday-text p              { font-size: 1rem; line-height: 1.85; margin-bottom: 18px; }
.doomsday-text p:last-child   { margin-bottom: 0; }

.doomsday-clock-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

#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: var(--red-text);
  text-align: center;
}

.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: 1rem;
  color: var(--white-mid);
  line-height: 1.82;
  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.22rem;
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.01em;
  margin-bottom: 10px;
  line-height: 1.3;
}

.action-body p {
  font-size: 0.92rem;
  color: var(--white-mid);
  line-height: 1.82;
  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(--sans);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--white-mid);
  line-height: 1.75;
  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: 44px 40px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s;
}
.pdf-card:hover { border-color: rgba(185,28,28,0.25); }

.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-size: 1.2rem;
  margin-bottom: 12px;
  color: var(--white);
}

.pdf-card p {
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--white-dim);
  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: 32px 28px; }
  .ext-grid  { grid-template-columns: 1fr; }
  .copy-card-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
}


/* ═══════════════════════════════════════════
   THEME TOGGLE BUTTON
   ═══════════════════════════════════════════ */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 10px;
  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(--white); }
.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: 0.61 on #f0ede8 is the dimmest that still meets WCAG AA (4.50:1). */
[data-theme="light"] .footer-legal,
[data-theme="light"] .footer-legal a {
  color: rgba(26, 23, 21, 0.61);
}
[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;
}
.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);
}

/* ═══════════════════════════════════════════
   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: var(--red-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(226, 65, 65, 0.35);
}
.nf-infographic figcaption a:hover {
  color: var(--red-text-hover);
  border-bottom-color: rgba(226, 65, 65, 0.7);
}
.nf-infographic--portrait {
  max-width: 420px;
  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);
}