/* ═══════════════════════════════════════════════
   WAKE UP, AMERICA — styles
   ═══════════════════════════════════════════════ */

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

/* ─── DARK MODE (default / :root) ─────────────── */
:root {
  --bg:        #080808;
  --bg-s:      #0f0f0f;
  --bg-alt:    #111111;
  --surface:   #050505;       /* sidebar, deep wells */
  --bg-card:   #0d0d0d;       /* photo figures, cards */

  --text:      #f5f1e9;       /* primary — near white */
  --text-dim:  #ece8e0;       /* body paragraphs — bright, readable */
  --muted:     #b0aca6;       /* citations, metadata */

  --border:    #1a1a1a;
  --border-s:  #222;

  --ch:        #888;          /* overridden per chapter */
  --ch-dim:    rgba(136,136,136,0.12);

  --mono:    'JetBrains Mono', 'Courier New', monospace;
  --serif:   'Source Serif 4', Georgia, serif;
  --display: 'Playfair Display', Georgia, serif;

  --sb-w:    256px;
  --col:     680px;
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── LIGHT MODE ───────────────────────────────── */
[data-theme="light"] {
  --bg:        #ffffff;
  --bg-s:      #f5f5f5;
  --bg-alt:    #ebebeb;
  --surface:   #f0f0f0;
  --bg-card:   #f5f5f5;

  --text:      #1a1614;
  --text-dim:  #3c3834;
  --muted:     #8a8278;

  --border:    #d4cfc9;
  --border-s:  #dedad4;

  --ch-dim:    rgba(136,136,136,0.09);
}

/* Per-chapter accent color */
#ch1 { --ch: #c41e3a; --ch-dim: rgba(196,30,58,0.32);  --ch-glow: rgba(196,30,58,0.26); }
#ch2 { --ch: #1a7bc4; --ch-dim: rgba(26,123,196,0.32); --ch-glow: rgba(26,123,196,0.22); }
#ch3 { --ch: #2d9e4f; --ch-dim: rgba(45,158,79,0.32);  --ch-glow: rgba(45,158,79,0.22); }
#ch4 { --ch: #c49a1a; --ch-dim: rgba(196,154,26,0.32); --ch-glow: rgba(196,154,26,0.22); }
#ch5 { --ch: #c42d8c; --ch-dim: rgba(194,45,140,0.32); --ch-glow: rgba(194,45,140,0.26); }
#ch6 { --ch: #4878a0; --ch-dim: rgba(72,120,160,0.32);   --ch-glow: rgba(72,120,160,0.26); }
#ch7 { --ch: #7c5cbf; --ch-dim: rgba(124,92,191,0.32);  --ch-glow: rgba(124,92,191,0.26); }
#ch8 { --ch: #c44e1a; --ch-dim: rgba(196,78,26,0.32);   --ch-glow: rgba(196,78,26,0.26); }
#ch8 .ch-divider { margin-top: 20px; margin-bottom: 20px; }
#ch8 .article-col { padding-top: 20px; padding-bottom: 20px; }

[data-theme="dark"]  #ch1 { --ch: #e0284a; }
[data-theme="dark"]  #ch4 { --ch: #e0b420; }
[data-theme="dark"]  #ch5 { --ch: #e040a0; }
[data-theme="dark"]  #ch6 { --ch: #6898c0; }
[data-theme="dark"]  #ch7 { --ch: #9d7ee0; }
[data-theme="dark"]  #ch8 { --ch: #e06030; }
[data-theme="light"] #ch1 { --ch-dim: rgba(196,30,58,0.18);  --ch-glow: rgba(196,30,58,0.13); }
[data-theme="light"] #ch2 { --ch-dim: rgba(26,123,196,0.18); --ch-glow: rgba(26,123,196,0.11); }
[data-theme="light"] #ch3 { --ch-dim: rgba(45,158,79,0.18);  --ch-glow: rgba(45,158,79,0.11); }
[data-theme="light"] #ch4 { --ch-dim: rgba(196,154,26,0.18); --ch-glow: rgba(196,154,26,0.11); }
[data-theme="light"] #ch5 { --ch-dim: rgba(194,45,140,0.18); --ch-glow: rgba(194,45,140,0.13); }
[data-theme="light"] #ch6 { --ch-dim: rgba(72,120,160,0.18);   --ch-glow: rgba(72,120,160,0.11); }
[data-theme="light"] #ch7 { --ch-dim: rgba(124,92,191,0.18); --ch-glow: rgba(124,92,191,0.11); }
[data-theme="light"] #ch8 { --ch-dim: rgba(196,78,26,0.18);  --ch-glow: rgba(196,78,26,0.11); }

html { scroll-behavior: smooth; font-size: 18px; -webkit-font-smoothing: antialiased; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  line-height: 1.8;
  overflow-x: hidden;
  display: flex;
}

.mono  { font-family: var(--mono); font-size: 0.72em; letter-spacing: 0.06em; }
.muted { color: var(--muted); }

/* ════════════════════════════════════════════════
   TERMINAL OVERLAY (always dark — it's a terminal)
   ════════════════════════════════════════════════ */
#terminal-overlay {
  position: fixed; inset: 0;
  background: #050505;
  z-index: 2000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity 1s var(--ease), visibility 1s;
}
#terminal-overlay.fade-out { opacity: 0; visibility: hidden; pointer-events: none; }

.t-window {
  width: min(660px, 90vw);
  background: #0a0a0a;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.9);
}
.t-bar {
  background: #141414;
  border-bottom: 1px solid #1e1e1e;
  padding: 10px 16px;
  display: flex; align-items: center; gap: 7px;
}
.t-dot { width: 12px; height: 12px; border-radius: 50%; }
.t-dot.r { background: #ff5f57; }
.t-dot.y { background: #febc2e; }
.t-dot.g { background: #28c840; }
.t-name { font-family: var(--mono); font-size: 0.6rem; color: #3a3a3a; letter-spacing: 0.12em; margin-left: 6px; }

#t-out {
  padding: 20px 24px 8px;
  font-family: var(--mono); font-size: 0.75rem; line-height: 2;
  color: #3adb61; min-height: 300px; max-height: 400px;
  overflow-y: auto; scrollbar-width: none;
}
#t-out::-webkit-scrollbar { display: none; }
.tl { display: block; white-space: pre; }
.tl.dim  { color: #2a6b3a; }
.tl.warn { color: #febc2e; }
.tl.hi   { color: #e8e4dc; }

#t-cur { display: block; padding: 0 24px 16px; font-family: var(--mono); color: #3adb61; font-size: 0.9rem; }
.blink { animation: blink 1.1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

#skip-btn {
  position: absolute; bottom: clamp(20px,4vh,48px); right: clamp(20px,4vw,48px);
  background: none; border: 1px solid #666; color: #e8e4dc;
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.12em;
  padding: 12px 28px; cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
#skip-btn:hover { border-color: #bbb; color: #fff; background: rgba(255,255,255,0.06); }

/* ════════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════════ */
#sidebar {
  width: var(--sb-w);
  min-height: 100vh;
  height: 100vh;
  position: fixed; top: 0; left: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  z-index: 100;
  transition: transform .3s var(--ease);
  overflow-y: auto; scrollbar-width: none;
}
#sidebar::-webkit-scrollbar { display: none; }

#main {
  margin-left: var(--sb-w);
  flex: 1;
  opacity: 0; transition: opacity .5s ease .2s;
}
#main.visible { opacity: 1; }

/* ════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════ */
.sb-brand {
  padding: 32px 24px 24px;
  border-bottom: 1px solid var(--border);
}
.sb-substack {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 100px;
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  margin-bottom: 12px;
  transition: border-color 0.2s, color 0.2s;
}
.sb-substack:hover {
  border-color: var(--text-dim);
  color: var(--text);
}
[data-theme="dark"] .sb-substack {
  border-color: rgba(255, 255, 255, 0.18);
}
.sb-pub {
  font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.sb-title {
  font-family: var(--display); font-size: 1.25rem; font-weight: 900;
  line-height: 1.15; color: var(--text); display: block;
}
.sb-subtitle {
  font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-dim); margin-top: 8px;
}

.sb-nav { list-style: none; padding: 16px 0; flex: 1; }
.sb-chapter { list-style: none; }

.sb-sub { list-style: none; padding: 0 0 4px 0; }
.sb-sub-item {
  padding: 5px 24px 5px 56px;
  font-family: var(--mono); font-size: 0.52rem;
  letter-spacing: 0.07em; color: var(--text-dim);
  cursor: pointer; line-height: 1.5;
  transition: color .2s;
}
.sb-sub-item::before { content: '·'; margin-right: 6px; }
.sb-sub-item:hover { color: var(--text); }

.sb-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 24px; cursor: pointer;
  border-left: 3px solid var(--item-col, #888);
  transition: background .25s;
  position: relative;
}
.sb-item:hover { background: rgba(128,128,128,0.08); }
.sb-item.active { background: color-mix(in srgb, var(--item-col, #888) 14%, transparent); }

.sb-num {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em;
  color: var(--item-col, #888); padding-top: 3px; flex-shrink: 0; min-width: 20px;
}

.sb-label {
  font-family: var(--serif); font-size: 0.85rem; line-height: 1.35;
  color: var(--text); font-weight: 600;
}

.sb-ul { display: inline; }

.sb-item::before,
.sb-item::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: var(--item-col, #888);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sb-item::before { top: 0; }
.sb-item::after  { bottom: 0; transition-delay: 0.15s; }
.sb-item.active::before,
.sb-item.active::after { transform: scaleX(1); }

/* ════════════════════════════════════════════════
   THEME TOGGLE
   ════════════════════════════════════════════════ */
#theme-btn {
  position: fixed; top: 14px; right: 16px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-dim); width: 36px; height: 36px;
  cursor: pointer; z-index: 300; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: color .2s, border-color .2s, background .2s;
}
#theme-btn:hover { color: var(--text); border-color: var(--muted); }

/* ════════════════════════════════════════════════
   PROGRESS BAR
   ════════════════════════════════════════════════ */
#progress-bar {
  position: fixed; top: 0; left: var(--sb-w); right: 0;
  height: 2px; width: 0%;
  background: #c41e3a;
  box-shadow: 0 0 8px #c41e3a;
  z-index: 500; pointer-events: none;
  transition: width .08s linear, background .4s ease;
}

/* ════════════════════════════════════════════════
   MOBILE TOGGLE
   ════════════════════════════════════════════════ */
#menu-btn {
  display: none;
  position: fixed; top: 16px; left: 16px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); width: 40px; height: 40px;
  cursor: pointer; z-index: 200; font-size: 1.1rem;
  align-items: center; justify-content: center;
}

/* ════════════════════════════════════════════════
   CHAPTER HERO
   ════════════════════════════════════════════════ */
.chapter + .chapter {
  border-top: 1px solid var(--ch);
}

.ch-hero {
  min-height: 60vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 64px clamp(24px,6vw,100px) 64px;
  position: relative;
  background: radial-gradient(ellipse 90% 65% at 85% 14%, var(--ch-glow, var(--ch-dim)) 0%, transparent 62%);
}

.ch-hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ch), transparent);
  opacity: 0.3;
}

.ch-eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
  font-family: var(--mono); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.ch-cat { color: var(--text); font-size: 0.78rem; }

.ch-title-big {
  font-family: var(--display);
  font-size: clamp(56px, 9vw, 120px);
  font-weight: 900; line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 36px;
}
.ch-title-big em {
  font-style: italic; color: var(--ch);
  position: relative; display: inline-block;
}
.ch-title-big em::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -10px;
  height: 5px; border-radius: 3px;
  background: var(--ch);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.75s ease-out 0.25s;
}
.ch-title-big.underline-visible em::after {
  transform: scaleX(1);
}
#ch1 .ch-title-big em::after,
#ch2 .ch-title-big em::after { right: 0.62em; }
#ch8 .ch-title-big em:last-of-type::after { transition-delay: 0.7s; }

/* ════════════════════════════════════════════════
   ARTICLE COLUMN
   ════════════════════════════════════════════════ */
.article-col {
  max-width: var(--col);
  margin: 0 auto;
  padding: 32px clamp(20px,4vw,32px);
}

.article-col p {
  font-size: 1.05rem; line-height: 1.85;
  color: var(--text); margin-bottom: 24px;
}
.article-col p:last-child { margin-bottom: 0; }
.article-col strong { color: var(--text); }
.article-col a strong { color: inherit; }
.article-col em { font-style: italic; }

/* Drop cap */
.drop-cap::first-letter {
  font-family: var(--display); font-size: 5em; font-weight: 900;
  color: var(--ch); float: left; line-height: .72;
  margin: 6px 6px 0 0;
}

/* Links */
.link {
  color: var(--ch);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity .2s;
}
.link:hover { opacity: .7; }

/* Sub-section headings — full-width breakout, larger font */
.sub-head {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 30px);
  font-style: italic; font-weight: 700;
  color: var(--text);
  background: var(--ch-dim);
  padding: 22px clamp(24px, 6vw, 64px);
  margin-top: 52px;
  margin-bottom: 28px;
  /* break out of article-col to full main width */
  width: calc(100vw - var(--sb-w));
  margin-left: calc(-1 * clamp(20px, 4vw, 32px) - max(0px, (100vw - var(--sb-w) - var(--col)) / 2));
}
.sub-head em { font-weight: 700; font-style: italic; }
.sub-head::before,
.sub-head::after {
  content: '';
  flex: 1 0 24px;
  height: 1px;
  background: var(--ch);
  opacity: 1;
}
#sh-ice::before, #sh-ice::after { display: none; }

/* sub-head placed directly inside .chapter (outside article-col) — no breakout offset needed */
.chapter > .sub-head {
  margin-left: 0;
  margin-top: 0;
}

/* Section divider — full-width, chapter accent color */
.ch-divider {
  border: none;
  border-top: 1px solid var(--ch);
  opacity: 0.4;
  margin-top: 48px;
  margin-bottom: 48px;
  /* break out of article-col */
  width: calc(100vw - var(--sb-w));
  margin-left: calc(-1 * clamp(20px, 4vw, 32px) - max(0px, (100vw - var(--sb-w) - var(--col)) / 2));
}
/* dividers that are direct children of .chapter need no breakout offset */
.chapter > .ch-divider {
  width: 100%;
  margin-left: 0;
}

/* Closing line */
.closing-line {
  font-size: 1.1rem; font-weight: 700;
  color: var(--text);
  margin: 48px 0 0;
}
/* closing-line directly after a splash block: no double-stacked top space */
.doctrine-quote + .article-col .closing-line { margin-top: 24px; }

/* ════════════════════════════════════════════════
   BLOCKQUOTES & PULL QUOTES
   ════════════════════════════════════════════════ */
.pull-quote {
  border: none;
  border-left: 2px solid var(--ch);
  margin: 40px 0 40px -28px;
  padding: 8px 0 8px 28px;
}
.pull-quote p {
  font-family: var(--serif);
  font-size: clamp(17px,2.2vw,22px);
  font-style: normal; font-weight: 700; line-height: 1.6;
  color: var(--text); margin-bottom: 14px;
}
.pull-quote cite {
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: .07em; color: var(--text);
  font-style: normal; line-height: 1.6;
}

/* The doctrine / closing quote (full-width) */
.doctrine-wrap {
  background: var(--bg-s);
  border-top: 1px solid var(--ch);
  border-bottom: 1px solid var(--ch);
  padding: clamp(48px,7vw,88px) clamp(24px,8vw,80px);
  text-align: center;
}
.doctrine-wrap p {
  font-family: var(--display);
  font-size: clamp(20px,3vw,34px);
  font-style: italic; line-height: 1.45;
  color: var(--text); margin-bottom: 20px;
}
.doctrine-wrap cite {
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim);
}

/* Stark single-line quote (for dramatic moments) */
.stark-quote {
  background: #080808;
  padding: clamp(40px, 5vw, 64px) clamp(48px, 8vw, 120px);
  text-align: center;
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #2a2a2a;
}
/* match space below stark-quote to space above it */
.stark-quote + .article-col { padding-top: 56px; }
.stark-quote p {
  font-family: var(--display);
  font-size: clamp(22px, 4vw, 54px);
  font-style: italic;
  font-weight: 700;
  color: #f0ece4;
  line-height: 1.25;
}
.stark-quote cite {
  display: block; margin-top: 20px;
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: .08em; font-style: normal;
  color: #f0ece4;
}
.stark-quote cite a { color: var(--ch); text-decoration: none; }
.stark-quote cite a:hover { opacity: 0.7; }

/* ════════════════════════════════════════════════
   CHAT EXCHANGE
   ════════════════════════════════════════════════ */
.chat-exchange {
  margin: 36px 0;
  border: 1px solid var(--border-s);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
}
.chat-header {
  font-family: var(--mono); font-size: 0.55rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.chat-msg {
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 5px;
}
.chat-msg + .chat-msg { border-top: 1px solid var(--border); }
.chat-who {
  font-family: var(--mono); font-size: 0.55rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.chat-msg--user .chat-who { color: var(--ch); }
.chat-msg--ai   .chat-who { color: var(--muted); }
.chat-msg p {
  font-family: var(--serif); font-size: 0.95rem;
  color: var(--text-dim); line-height: 1.65; margin: 0;
}
.chat-msg em { color: var(--muted); font-style: italic; }

/* ════════════════════════════════════════════════
   STAT HERO (school name + big numbers — always dark)
   ════════════════════════════════════════════════ */
.stat-hero {
  background: #0c0b0a;
  padding: clamp(72px, 10vw, 140px) clamp(32px, 8vw, 120px);
  text-align: center;
  border-top: 1px solid #1e1e1e;
  border-bottom: 1px solid #1e1e1e;
}
.stat-hero-eyebrow {
  font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #b83040; margin-bottom: 40px;
}
.stat-hero-title {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(48px, 7.5vw, 108px);
  line-height: 0.95; color: #f0ece4;
  margin-bottom: 22px;
}
.stat-hero-location {
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #c8c4be; margin-bottom: 72px;
}
.stat-hero-nums {
  display: flex; align-items: center; justify-content: center;
}
.stat-hero-num {
  padding: 0 clamp(36px, 6vw, 100px); text-align: center;
}
.stat-hero-num + .stat-hero-num { border-left: 1px solid #252525; }
.stat-hero-big {
  display: block; font-family: var(--display); font-weight: 900;
  font-size: clamp(64px, 9vw, 130px); line-height: 1; margin-bottom: 10px;
}
.stat-hero-num:first-child .stat-hero-big { color: #c41e3a; }
.stat-hero-num:last-child  .stat-hero-big { color: #e8e4dc; }
.stat-hero-label {
  font-family: var(--mono); font-size: 0.52rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: #c8c4be;
}

.stat-hero--compact {
  padding: clamp(48px, 6vw, 80px) clamp(32px, 8vw, 100px);
}
.stat-hero--compact .stat-hero-title {
  font-size: clamp(36px, 5.5vw, 72px);
}
.stat-hero--compact .stat-hero-big {
  font-size: clamp(52px, 7vw, 96px);
}

@media (max-width: 540px) {
  .stat-hero-nums { flex-direction: column; gap: 48px; }
  .stat-hero-num + .stat-hero-num { border-left: none; border-top: 1px solid #252525; padding-top: 40px; }
}

/* ════════════════════════════════════════════════
   STAT CALLOUT (centered column — big number between two text lines, always dark)
   ════════════════════════════════════════════════ */
.stat-callout {
  background: #180507;
  border-top: 1px solid #2a0a0e;
  border-bottom: 1px solid #2a0a0e;
  padding: clamp(56px, 8vw, 100px) clamp(32px, 8vw, 120px);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: clamp(16px, 2vw, 28px);
}
.stat-callout-num {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(100px, 18vw, 220px);
  color: #c41e3a; line-height: 0.9;
}
.stat-callout-text {
  font-family: var(--serif);
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.65; color: #f0ece4;
  max-width: 560px;
}

@media (max-width: 700px) {
  .stat-callout-num { font-size: clamp(80px, 24vw, 140px); }
}

/* ════════════════════════════════════════════════
   DOCTRINE QUOTE (full-width black splash, always dark)
   ════════════════════════════════════════════════ */
.doctrine-quote {
  background: #080808;
  padding: clamp(40px, 5vw, 64px) clamp(48px, 10vw, 160px);
  text-align: center;
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #2a2a2a;
}
.doctrine-quote q {
  display: block;
  font-family: var(--display);
  font-size: clamp(22px, 3.8vw, 54px);
  font-style: italic;
  font-weight: 700;
  color: #f5f1e9;
  line-height: 1.18;
  letter-spacing: -0.01em;
  quotes: none;
  margin-bottom: 28px;
}
.doctrine-quote cite {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #f0ece4;
}

/* ════════════════════════════════════════════════
   PHOTO FIGURE
   ════════════════════════════════════════════════ */
.photo-fig {
  margin: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.article-col .photo-fig {
  margin-bottom: 2em;
}
.article-col .photo-fig:last-child {
  margin-bottom: 0;
}
.scene-photo {
  display: block; width: 100%; height: auto;
  object-fit: cover;
}
figcaption {
  padding: 10px clamp(24px,6vw,80px);
  font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: .08em; color: var(--text);
  border-top: 1px solid var(--border);
}
figcaption a { color: var(--ch); text-decoration: none; }
figcaption a:hover { opacity: .7; }

/* Before / after comparison */
.before-after {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ba-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border);
}
.ba-item { position: relative; margin: 0; }
.ba-item .scene-photo { height: 280px; object-fit: cover; }
.ba-cap {
  position: absolute; bottom: 0; left: 0;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: .1em;
  text-transform: uppercase; color: #f5f1e9;
  background: rgba(0,0,0,0.7); padding: 6px 12px;
}
.ba-caption {
  padding: 10px clamp(24px,6vw,80px);
  font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: .08em; color: var(--text);
  border-top: 1px solid var(--border);
  margin: 0;
}

@media (max-width: 540px) {
  .ba-pair { grid-template-columns: 1fr; }
  .ba-item .scene-photo { height: 200px; }
}

/* ════════════════════════════════════════════════
   GUARDIAN MEDIA CARDS
   ════════════════════════════════════════════════ */
.media-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.guardian-card {
  display: block; background: var(--bg-alt);
  padding: 32px clamp(20px,4vw,48px);
  text-decoration: none; color: inherit;
  transition: background .2s;
}
.guardian-card:hover { background: var(--bg-s); }
.gc-label {
  font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ch); margin-bottom: 10px;
}
.gc-title {
  font-family: var(--display); font-size: clamp(14px,1.6vw,18px);
  font-style: italic; line-height: 1.4; color: var(--text);
  margin-bottom: 12px;
}
.gc-source {
  font-family: var(--mono); font-size: 0.58rem;
  color: var(--text-dim); letter-spacing: .06em;
}
.gc-cta {
  display: inline-block; margin-top: 14px;
  font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: .1em; color: var(--ch);
}

/* ════════════════════════════════════════════════
   YOUTUBE EMBED
   ════════════════════════════════════════════════ */
.yt-wrap {
  position: relative; padding-bottom: 56.25%; height: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.yt-wrap iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; border: none;
}

/* ════════════════════════════════════════════════
   BULLET LIST (SELC quote)
   ════════════════════════════════════════════════ */
.article-col ul {
  list-style: none; padding: 0; margin: 12px 0 12px 0;
}
.article-col ul li {
  font-size: 1rem; line-height: 1.75;
  color: var(--text); padding-left: 20px; margin-bottom: 4px;
  position: relative;
}
.article-col ul li::before {
  content: '●'; position: absolute; left: 0;
  color: var(--ch); font-size: .5em; top: .6em;
}

/* ════════════════════════════════════════════════
   LAYOFF ITEM (ch7 company list)
   ════════════════════════════════════════════════ */
.layoff-item {
  border-left: 2px solid var(--ch);
  padding: 4px 0 4px 18px;
  margin: 20px 0;
}
.layoff-item strong {
  display: block;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ch);
  margin-bottom: 6px;
}

/* ════════════════════════════════════════════════
   SECTION LABEL (ch8 "For organizations" etc.)
   ════════════════════════════════════════════════ */
.section-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ch);
  margin-top: 2.5em;
  margin-bottom: 0.5em;
}
.article-col .section-label:first-child { margin-top: 0; }

/* ════════════════════════════════════════════════
   CTA BLOCK & BUTTON
   ════════════════════════════════════════════════ */
.cta-block {
  text-align: center;
  padding: 80px 24px;
}
.cta-btn {
  display: inline-block;
  padding: 20px 48px;
  border-radius: 6px;
  background: var(--ch);
  color: #fff;
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s, transform 0.2s;
}
.cta-btn:hover { opacity: 0.85; transform: translateY(-2px); }

.action-pill {
  display: inline-block;
  margin-top: 1em;
  padding: 10px 22px;
  border-radius: 100px;
  border: 1px solid var(--ch);
  color: var(--ch);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.action-pill:hover { background: var(--ch); color: #fff; }

/* ════════════════════════════════════════════════
   SHARE BLOCK
   ════════════════════════════════════════════════ */
.share-block {
  text-align: center;
  padding: 0 24px 80px;
}
.share-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.share-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.share-pill {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 100px;
  border: 1px solid var(--border-s);
  color: var(--text-dim);
  background: none;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.share-pill:hover { border-color: var(--text-dim); color: var(--text); background: var(--bg-alt); }
[data-theme="dark"] .share-pill { border-color: rgba(255,255,255,0.14); }

/* ════════════════════════════════════════════════
   SCROLL REVEAL
   ════════════════════════════════════════════════ */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */
@media (max-width: 900px) {
  :root { --sb-w: 0px; }

  #sidebar {
    transform: translateX(-256px);
    width: 256px;
  }
  #sidebar.open { transform: none; }

  #main { margin-left: 0; }

  #menu-btn { display: flex; }

  #progress-bar { left: 0; }

  .pull-quote { margin-left: 0; }

  .media-row { grid-template-columns: 1fr; }

  .ch-hero { padding: 80px 24px 64px; }
}

@media (max-width: 540px) {
  .ch-title-big { font-size: clamp(44px, 14vw, 72px); }
}

/* ── Anchor links ──────────────────────────────── */
.sub-head { position: relative; }

.anchor-link {
  opacity: 0;
  color: var(--ch);
  text-decoration: none;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.65em;
  transition: opacity 0.15s;
  user-select: none;
}

.sub-head .anchor-link {
  position: absolute;
  right: 1.2em;
  top: 50%;
  transform: translateY(-50%);
}

.anchor-link--title {
  vertical-align: middle;
  margin-left: 0.35em;
}

.sub-head:hover .anchor-link,
.ch-title-big:hover .anchor-link { opacity: 0.45; }
.anchor-link:hover { opacity: 1 !important; }