/* ══════════════════════════════════════════════════════════════════
   WHO WRITES THE TERMS — A HISTORY OF PRIVACY
   styles.css — Editorial theme: laid letter paper and graphite ink, one
   primary accent (key brass), one crisis accent (surveillance red) and one
   destination accent (first-party green).
   Open historical data journalism. A domain fork of the Indigo and Downtown
   Tampa stylesheets: same furniture, new palette.
   ══════════════════════════════════════════════════════════════════ */

/* ─── CSS CUSTOM PROPERTIES ─── */
/* Two grounds. Dark is graphite: the ink of a sealed letter read at night.
   Light is laid letter paper. The primary accent is the brass of a key and
   a seal; the crisis accent is the red of a recording light; the
   destination accent is the green of an agreement both sides keep. */
:root {
  /* Sequential data ramp — warm neutral, brass at v5, first-party green at
     v6 and the crisis peak at v9. Dark-mode values; the light block below
     re-tunes them. */
  --v0: #4A4A50;   /* graphite          */
  --v1: #66666E;   /* slate             */
  --v2: #85858D;   /* pewter            */
  --v3: #A7A6AC;   /* pale pewter       */
  --v4: #BDB9AE;   /* vellum            */
  --v5: #D8B45C;   /* key brass — primary accent */
  --v6: #7CC49A;   /* first-party green — the destination */
  --v7: #D9985A;   /* ochre             */
  --v8: #DC7C5E;   /* sealing wax       */
  --v9: #E0645A;   /* recording red — crisis peak */

  /* Graphite surfaces */
  --bg-base:      #111113;
  --bg-surface:   #16161A;
  --bg-card:      #1B1B20;
  --bg-elevated:  #222228;
  --border:       #313139;
  --border-light: #222228;

  /* Text */
  --text-primary:   #EDEBE6;
  --text-secondary: #A3A09A;
  --text-muted:     #6B6964;
  --text-accent:    var(--v5);
  --text-faint:     #7A7872;   /* chart ticks, footer small print */
  --text-dim:       #8B8983;   /* chart legends */
  --text-soft:      #C0BDB5;   /* diagram labels, tertiary copy */
  --overlay-bg:     rgba(17, 17, 19, 0.92);
  --overlay-bg-2:   rgba(17, 17, 19, 0.90);
  --shadow-strong:  rgba(0, 0, 0, 0.72);
  --shadow-soft:    rgba(0, 0, 0, 0.5);
  --ring:           #EDEBE6;   /* focus / current-pill ring */
  --ink:            #09090B;   /* deepest ground (progress track, map edges) */
  --bg-deep:        #0C0C0E;   /* hero + footer bookends */
  /* Status / net badges: background, text, border per state. One severity
     ramp — pewter → brass → ochre → red — plus green for gain. */
  --badge-gain-bg:      #16261D;  --badge-gain-fg:  #9DD6B3;  --badge-gain-br:  #2A4A37;
  --badge-mixed-bg:     #2A2516;  --badge-mixed-fg: #DCC382;  --badge-mixed-br: #4A4224;
  --badge-moderate-bg:  #202026;  --badge-moderate-fg: #A7A6AC; --badge-moderate-br: #37373F;
  --badge-exposure-bg:  #182530;  --badge-exposure-fg: #9CC3CB; --badge-exposure-br: #2F4550;
  --badge-severe-bg:    #2E2016;  --badge-severe-fg: #DDA06A;   --badge-severe-br: #4E3722;
  --badge-catastrophic-bg: #301A1A; --badge-catastrophic-fg: #E58A80; --badge-catastrophic-br: #552A28;
  --thumb-bg:       linear-gradient(135deg, #222228, #131316);
  --chart-yellow:   var(--v9);
  --on-accent:      #111113;   /* label ON an accent fill */
  color-scheme: dark;

  /* Eight eras — named colours, not ramp positions. Clay for walls and
     seals; the violet of a Crown warrant; the silver of a gelatin print for
     the camera age; United Nations blue for the human-rights charters; the
     teal of a punched card for data protection; cookie amber for the web;
     the red of a recording light for the surveillance decade; and
     first-party green for the age of agents, where the study ends. */
  --era-walls:          #C9A46E;
  --era-castle:         #A58BD6;
  --era-letalone:       #A7AEBD;
  --era-rights:         #6FA8DC;
  --era-dataprotection: #6CB2BA;
  --era-cookies:        #DC8A55;
  --era-surveillance:   #E0645A;
  --era-agents:         #7CC49A;

  /* The eight eras as one ribbon: progress bar, slider, hero and footer. */
  --grad-eras: linear-gradient(to right,
    var(--era-walls) 0 12.5%, var(--era-castle) 12.5% 25%, var(--era-letalone) 25% 37.5%,
    var(--era-rights) 37.5% 50%, var(--era-dataprotection) 50% 62.5%, var(--era-cookies) 62.5% 75%,
    var(--era-surveillance) 75% 87.5%, var(--era-agents) 87.5% 100%);
  --grad-eras-soft: linear-gradient(to right, var(--era-walls), var(--era-castle), var(--era-letalone),
    var(--era-rights), var(--era-dataprotection), var(--era-cookies), var(--era-surveillance), var(--era-agents));

  /* Who speaks: the four voices in the "who writes the terms" diagram and
     the lineage table. */
  --who-org:    #DC8A55;   /* the organisation writes; you click */
  --who-signal: #6FA8DC;   /* your software sends a signal */
  --who-industry: #A7A6AC; /* an industry framework speaks for both */
  --who-person: #7CC49A;   /* you proffer; they agree */

  /* Typography — Crimson Pro for headlines, Work Sans for everything else */
  --font-display: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --font-sans:    'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --max-width:    1200px;
  --section-pad:  80px 24px;
  --card-radius:  3px;
}

/* ─── LIGHT THEME ───
   Toggled by the nav button (persisted in localStorage as 'ora-theme') and
   applied before first paint by the inline script in index.html. Laid
   letter paper and graphite ink; the ramp's neutral end darkens to stay
   legible. */
[data-theme="light"] {
  --v0: #3A3A40;
  --v1: #56565E;
  --v2: #71717A;
  --v3: #8C8C94;
  --v4: #8F8570;
  --v5: #8A6412;   /* key brass — primary accent */
  --v6: #2F7A4E;   /* first-party green */
  --v7: #A8641F;
  --v8: #A94A2A;
  --v9: #A61B1B;   /* recording red — crisis peak */

  --bg-base:      #F7F4EC;
  --bg-surface:   #FFFFFF;
  --bg-card:      #FFFFFF;
  --bg-elevated:  #F0ECE1;
  --border:       #E2DCCD;
  --border-light: #ECE7DA;
  --text-primary:   #1A1814;
  --text-secondary: #5F5B52;
  --text-muted:     #948F84;
  --text-faint:     #7E7A70;
  --text-dim:       #6C685F;
  --text-soft:      #45423B;
  --overlay-bg:     rgba(247, 244, 236, 0.94);
  --overlay-bg-2:   rgba(247, 244, 236, 0.92);
  --shadow-strong:  rgba(26, 24, 20, 0.22);
  --shadow-soft:    rgba(26, 24, 20, 0.12);
  --ring:           #1A1814;
  --ink:            #1A1814;
  --thumb-bg:       linear-gradient(135deg, #F0ECE1, #E5E0D3);
  --bg-deep:        #F0ECE1;
  --badge-gain-bg:      #E4F1E8;  --badge-gain-fg:  #2F7A4E;  --badge-gain-br:  #BFDCC9;
  --badge-mixed-bg:     #F5EEDC;  --badge-mixed-fg: #7A5F1C;  --badge-mixed-br: #E0D2AF;
  --badge-moderate-bg:  #EFEEEA;  --badge-moderate-fg: #56565E; --badge-moderate-br: #DAD8D0;
  --badge-exposure-bg:  #E7F1F2;  --badge-exposure-fg: #2C6068; --badge-exposure-br: #C4DCDF;
  --badge-severe-bg:    #F7EADC;  --badge-severe-fg: #90501A;   --badge-severe-br: #E4CDAE;
  --badge-catastrophic-bg: #F5E4E1; --badge-catastrophic-fg: #A61B1B; --badge-catastrophic-br: #E6C3BD;

  --era-walls:          #8C6A33;
  --era-castle:         #6A4A9E;
  --era-letalone:       #5E6575;
  --era-rights:         #2A64A0;
  --era-dataprotection: #2C7680;
  --era-cookies:        #A4501E;
  --era-surveillance:   #A61B1B;
  --era-agents:         #2F7A4E;

  --who-org:    #A4501E;
  --who-signal: #2A64A0;
  --who-industry: #71717A;
  --who-person: #2F7A4E;
  --on-accent:      #F7F4EC;
  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
  /* Belt and braces against a stray wide child. `clip` rather than `hidden`:
     hidden would make html a scroll container and break position:sticky. */
  overflow-x: clip;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

a { color: var(--v5); text-decoration: none; }
a:hover { color: var(--v7); }

/* ─── PROGRESS BAR ─── */
#progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--grad-eras-soft);
  z-index: 1000;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.1s linear;
}

/* ─── NAVIGATION ─── */
#main-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  background: var(--overlay-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 14px;
  /* Without this the flex line's min-content width wins over `right: 0`
     and the bar runs past a narrow viewport, taking the page with it. */
  min-width: 0;
  max-width: 100vw;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
/* The mark reads the palette, so it follows the light/dark toggle: a sealed
   letter whose wax seal is a keyhole. */
.logo-env     { fill: var(--bg-elevated); stroke: var(--text-soft); stroke-width: 1.4; stroke-linejoin: round; }
.logo-flap    { fill: none; stroke: var(--text-soft); stroke-width: 1.4; stroke-linejoin: round; }
.logo-seal    { fill: var(--v5); }
.logo-hole    { fill: var(--bg-deep); }

.nav-logo-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.nav-logo-primary, .nav-logo-secondary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-logo-primary {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--v5);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.nav-logo-secondary {
  font-family: var(--font-sans);
  font-size: 9px;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.nav-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
}

.nav-project-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* min-width:auto is the default on a flex item and resolves to the full
     nowrap width, so the ellipsis never fires and the bar overflows. */
  min-width: 0;
  flex: 1 1 auto;
}

.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-phase-pill {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  transition: opacity 0.2s;
}

/* ─── HERO SECTION ─── */
#hero {
  background: var(--bg-deep);
  padding: 140px 24px 80px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}

.hero-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--v5);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(44px, 8vw, 88px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin-bottom: 24px;
}

.hero-subtitle {
  font-family: var(--font-sans);
  font-size: clamp(15px, 2vw, 18px);
  color: var(--text-secondary);
  max-width: 600px;
  line-height: 1.7;
  margin-bottom: 56px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
  max-width: 800px;
}

.hero-stat-number {
  font-family: var(--font-sans);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
}

.hero-stat-label {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  line-height: 1.5;
}

.hero-era-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  /* The eight eras in order, walls to agents. */
  background: var(--grad-eras);
}

/* ─── PHASE LEGEND ─── */
#phase-legend {
  position: -webkit-sticky;
  position: sticky;
  top: var(--nav-h, 56px);
  z-index: 800;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.phase-legend-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.phase-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 12px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 0 0 0 transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  opacity: 0.85;
}
.phase-pill:hover { transform: translateY(-1px); opacity: 1; color: inherit; }
.phase-pill.is-current { opacity: 1; box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--ring); }
.phase-pill:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.phase-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

/* ─── SECTION WRAPPER ─── */
.section-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--section-pad);
}

.section-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--text-secondary);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.section-subtitle {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 640px;
  margin-bottom: 40px;
  line-height: 1.6;
}

/* ─── SCROLLYTELLING LAYOUT ─── */
#scrollytelling {
  background: var(--bg-base);
  border-top: 1px solid var(--border);
}

.scroll-outer {
  max-width: var(--max-width);
  margin: 0 auto;
}

.scroll-section {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  align-items: start;
  position: relative;
}

/* Sticky map panel */
.sticky-figure {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--nav-h, 56px) + var(--legend-h, 46px)); /* below nav + sticky legend */
  height: calc(100vh - var(--nav-h, 56px) - var(--legend-h, 46px));
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
}

#scroll-map-container {
  flex: 1;
  width: 100%;
  min-height: 0;
}

/* Active step info overlay at bottom of map */
.map-step-overlay {
  flex-shrink: 0;
  padding: 12px 16px;
  background: var(--overlay-bg-2);
  border-top: 1px solid var(--border);
  min-height: 72px;
}

.map-step-date {
  font-family: var(--font-sans);
  font-size: 9px;
  color: var(--v5);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.map-step-headline {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.map-metrics {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.map-metric {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--text-secondary);
}

.map-metric span {
  color: var(--v9);
  font-weight: 700;
}

/* Scrolling steps panel */
.scroll-steps {
  padding: 80px 32px 80px 40px;
}

/* First spacer so map is visible before steps */
.scroll-steps::before {
  content: '';
  display: block;
  height: 15vh;
}

.scroll-step {
  min-height: 75vh;
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.25;
  transform: translateX(0);
  transition: opacity 0.5s ease, transform 0.4s ease;
  border-left: 2px solid transparent;
  padding-left: 20px;
  margin-left: -20px;
}

.scroll-step.is-active {
  opacity: 1;
  transform: translateX(4px);
}

.step-phase-date {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.step-headline {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.008em;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.step-narrative {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.75;
  max-width: 420px;
}

.step-metrics {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.step-metric-chip {
  font-family: var(--font-sans);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 3px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.step-metric-chip strong { color: var(--v9); }

.step-source {
  font-family: var(--font-sans);
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 12px;
}

/* ─── CHART SECTIONS ─── */
.chart-section-bg {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 24px;
  margin-bottom: 20px;
  overflow: hidden;
}

.chart-card-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-primary);
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-card-title .icon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
}

.chart-source {
  font-family: var(--font-sans);
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 12px;
  line-height: 1.4;
}

.chart-source a {
  color: var(--v4);
  text-decoration: underline;
}

.chart-desc {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* Two-column chart grid */
.chart-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}

/* Full-width chart wrapper */
.chart-full { width: 100%; position: relative; }
.chart-full canvas { width: 100% !important; }

/* ─── SANDBOX SECTION ─── */
#sandbox {
  background: var(--bg-base);
  border-top: 1px solid var(--border);
}

.slider-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 20px 24px;
  margin-bottom: 20px;
}

.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 12px;
  flex-wrap: wrap;
}

.slider-date-label {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Era badge: the era's own colour as a hairline outline and the label, on
   the page ground. The old solid fill put era-coloured text on an unrelated
   background, which failed contrast in both themes. */
.era-badge {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 2px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid currentColor;
}

/* Range slider */
input[type="range"].crisis-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  /* The slider runs through the eight eras in order; set by initSlider()
     from the live palette so it follows the theme. */
  background: var(--slider-track, var(--grad-eras-soft));
}

input[type="range"].crisis-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text-primary);
  border: 3px solid var(--bg-base);
  box-shadow: 0 0 0 2px var(--v5);
  cursor: pointer;
}

input[type="range"].crisis-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text-primary);
  border: 3px solid var(--bg-base);
  box-shadow: 0 0 0 2px var(--v5);
  cursor: pointer;
}

.slider-ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 9px;
  color: var(--text-secondary);
  margin-top: 6px;
}

/* Stat cards grid */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--card-radius);
  padding: 14px 16px;
  overflow: hidden;
}

.stat-card-value {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-card-label {
  font-family: var(--font-sans);
  font-size: 9px;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  line-height: 1.4;
}

/* Sandbox split */
.sandbox-split {
  display: grid;
  /* was 50% 50%, which with the gap was always 16px wider than the wrapper */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

#sandbox-map-container {
  height: 420px;
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 1px solid var(--border);
}

.sandbox-event-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 16px;
  margin-top: 12px;
  min-height: 100px;
}

.sandbox-event-headline {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sandbox-event-body {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* ─── GEOPOLITICAL TABLE ─── */
.geo-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.geo-table th {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.geo-table td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
  line-height: 1.5;
  color: var(--text-primary);
}

.geo-table tr:hover td { background: var(--bg-elevated); }

.geo-table .country-cell {
  font-weight: 700;
  white-space: nowrap;
}

.geo-table .role-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  white-space: nowrap;
}

.net-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.net-catastrophic { background: var(--badge-catastrophic-bg); color: var(--badge-catastrophic-fg); border: 1px solid var(--badge-catastrophic-br); }
.net-severe       { background: var(--badge-severe-bg); color: var(--badge-severe-fg); border: 1px solid var(--badge-severe-br); }
.net-mixed        { background: var(--badge-mixed-bg); color: var(--badge-mixed-fg); border: 1px solid var(--badge-mixed-br); }
.net-gain         { background: var(--badge-gain-bg); color: var(--badge-gain-fg); border: 1px solid var(--badge-gain-br); }
.net-exposure     { background: var(--badge-exposure-bg); color: var(--badge-exposure-fg); border: 1px solid var(--badge-exposure-br); }
.net-moderate     { background: var(--badge-moderate-bg); color: var(--badge-moderate-fg); border: 1px solid var(--badge-moderate-br); }

/* ─── FOOTER ─── */
#resolution-footer {
  background: var(--bg-deep);
  border-top: 4px solid;
  border-image: var(--grad-eras-soft) 1;
  padding: 64px 24px 48px;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--v5);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.footer-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 32px;
}

.footer-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}

.footer-stat {
  border-left: 3px solid;
  padding-left: 16px;
}

.footer-stat-value {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 4px;
}

.footer-stat-delta {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--text-faint);
  margin-bottom: 2px;
}

.footer-stat-label {
  font-size: 13px;
  color: var(--text-dim);
}

.footer-credits {
  border-top: 1px solid var(--border-light);
  padding-top: 24px;
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.8;
}

.footer-credits a { color: var(--text-faint); }
.footer-credits a:hover { color: var(--v5); }

/* ─── LEAFLET OVERRIDES ─── */
.leaflet-container {
  background: var(--bg-base) !important;
  font-family: var(--font-sans) !important;
}

.leaflet-popup-content-wrapper {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 32px var(--shadow-strong) !important;
  color: var(--text-primary) !important;
}

.leaflet-popup-tip { background: var(--bg-card) !important; }

.leaflet-popup-content {
  margin: 14px 16px !important;
  font-family: var(--font-sans) !important;
  min-width: 220px !important;
  max-width: 280px !important;
}

.map-popup-date {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.map-popup-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 7px;
  line-height: 1.3;
}

.map-popup-body {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 8px;
}

.map-popup-source {
  font-family: var(--font-sans);
  font-size: 9px;
  color: var(--text-muted);
}

.leaflet-control-zoom a {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

.leaflet-control-attribution {
  background: var(--shadow-soft) !important;
  color: var(--text-muted) !important;
  font-size: 9px !important;
}

/* Pulse animation for active marker */
@keyframes markerPulse {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.6); opacity: 0.4; }
  100% { transform: scale(1);   opacity: 1; }
}

.active-marker-pulse {
  animation: markerPulse 1.2s ease-in-out infinite;
}

/* ─── CHART.JS CANVAS CONTAINERS ─── */
.canvas-wrap { position: relative; width: 100%; }
.canvas-wrap canvas { display: block !important; }

/* ─── LOADING STATE ─── */
.chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 1px;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .scroll-section {
    grid-template-columns: minmax(0, 1fr);
  }

  .sticky-figure {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--nav-h, 56px) + var(--legend-h, 46px));
    height: 42vh;
    z-index: 5;
    border-right: none;
    border-bottom: 1px solid var(--border);
    background: var(--bg-base);
  }
  .map-step-overlay { min-height: 0; padding: 8px 12px; }
  .map-step-headline { -webkit-line-clamp: 1; }

  .scroll-steps { padding: 32px 20px; }
  .scroll-step  { min-height: 50vh; }

  .chart-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .stat-cards   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sandbox-split { grid-template-columns: minmax(0, 1fr); }
  #sandbox-map-container { height: 300px; }
}

@media (max-width: 600px) {
  :root { --section-pad: 48px 16px; }
  /* single scrolling row of era pills; the active pill is scrolled into view */
  #phase-legend { padding: 10px 16px; scrollbar-width: none; }
  #phase-legend::-webkit-scrollbar { display: none; }
  .phase-legend-inner { flex-wrap: nowrap; width: max-content; }
  .hero-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stat-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nav-phase-pill { display: none; }
  .geo-table { font-size: 11px; }
  .geo-table th, .geo-table td { padding: 8px; }
}

/* ─── CSS SCROLL-DRIVEN REVEAL (Chrome 115+, Safari 26+) ─── */
@supports (animation-timeline: view()) {
  .reveal-on-scroll {
    animation: revealUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }

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

/* Fallback for unsupported browsers — always visible */
@supports not (animation-timeline: view()) {
  .reveal-on-scroll { opacity: 1; transform: none; }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .scroll-step { opacity: 1 !important; transform: none !important; }
}


/* ─── PHOTO ARCHIVE ─── */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.photo-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  overflow: hidden;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s;
}
.photo-card:hover {
  border-color: var(--v5);
  transform: translateY(-2px);
  color: inherit;
}
.photo-thumb-wrap {
  aspect-ratio: 16/10;
  background: var(--thumb-bg);
  overflow: hidden;
  position: relative;
}
.photo-thumb-wrap.photo-fallback::after {
  content: 'Open archive link →';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.photo-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(1.05);
}
.photo-meta { padding: 14px 16px 16px; }
.photo-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.photo-year {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--v5);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.photo-caption {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
}
.photo-credit {
  font-family: var(--font-sans);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.4px;
}

/* ─── CITATION BADGES & SOURCE LINES ─── */
.src-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 1px 5px;
  border-radius: 2px;
  vertical-align: middle;
  margin-left: 2px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: var(--bg-elevated);
}
.src-confirmed { color: var(--badge-gain-fg); border-color: var(--badge-gain-br); background: var(--badge-gain-bg); }
.src-pending   { color: var(--badge-mixed-fg); border-color: var(--badge-mixed-br); background: var(--badge-mixed-bg); }
.src-derived   { color: var(--badge-moderate-fg); border-color: var(--badge-moderate-br); background: var(--badge-moderate-bg); }

.step-source a,
.map-popup-source a { color: var(--v4); text-decoration: underline; }
.map-popup-source { line-height: 1.7; }

.hero-stat-source,
.footer-stat-source {
  font-family: var(--font-sans);
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.5;
}
.hero-stat-source a,
.footer-stat-source a { color: var(--text-muted); text-decoration: underline; }
.hero-stat-source a:hover,
.footer-stat-source a:hover { color: var(--v5); }

/* ─── MEDIA CARDS (rights-cleared imagery) ─── */
a.photo-thumb-wrap { display: block; }
.photo-era {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
  color: var(--on-accent);
  text-transform: uppercase;
}
.photo-license {
  font-family: var(--font-sans);
  font-size: 9px;
  color: var(--v4);
  margin-top: 4px;
  letter-spacing: 0.4px;
  line-height: 1.6;
}
.photo-links {
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 9px;
}
.photo-links a { color: var(--v5); text-decoration: underline; margin-right: 10px; }

/* ─── THEME TOGGLE ─── */
.theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, transform 0.15s;
}
.nav-right + .theme-toggle { margin-left: 12px; }
.theme-toggle:hover { color: var(--text-primary); border-color: var(--v5); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.theme-toggle svg { width: 16px; height: 16px; }
[data-theme="light"] .hero-era-bar { opacity: 0.9; }
[data-theme="light"] .photo-thumb { filter: none; }
[data-theme="light"] .chart-card { box-shadow: 0 1px 2px rgba(30,25,15,0.06); }

/* Provenance line under each sandbox stat: which year the figure is from. */
.stat-card-asof {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-top: 6px;
  text-transform: uppercase;
}
.stat-card-asof.is-far   { color: var(--badge-mixed-fg); }
.stat-card-asof.is-empty { color: var(--text-muted); opacity: 0.7; font-style: italic; text-transform: none; }

/* A DERIVED model states its method under its own chart. */
.chart-source-note {
  display: block;
  margin-top: 6px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Displacement table: a disputed number carries its dispute. */
.disp-note {
  font-weight: 400;
  font-size: 10.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 4px;
  white-space: normal;
  max-width: 260px;
}
.disp-share {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.5px;
  color: #c0392b;
  margin-top: 4px;
}
[data-theme="light"] .disp-share { color: #a3261c; }
tr.disp-total { background: var(--bg-elevated); }
tr.disp-total td { font-weight: 600; border-top: 2px solid var(--border); }

/* ══════════════════════════════════════════════════════════════════
   EDITORIAL FURNITURE
   Ported from the iranwar editorial redesign: tabular figures, the
   floating scroll assist, the hero byline and the author credit.
   ══════════════════════════════════════════════════════════════════ */

/* ─── TABULAR FIGURES ───
   Work Sans replaces the retired monospace, so every column of numbers
   asks for tabular numerals explicitly or the digits drift. */
.hero-stat-number,
.stat-card-value,
.footer-stat-value,
.footer-stat-delta,
.stat-card-asof,
.cra-row,
.district-net,
.audit-count,
.slider-year,
.year-readout,
.legend-years {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Plain anchor jumps (the hero button, a shared #about link) are handled by
   the browser, not by us, so tell it how much pinned chrome to clear: the
   fixed nav plus the sticky era legend. setLayoutVars() keeps both current. */
section[id], footer[id], #hero {
  scroll-margin-top: calc(var(--nav-h, 56px) + var(--legend-h, 46px) + 8px);
}

/* ─── NARROW-VIEWPORT SAFETY ───
   Grid and flex children default to min-width:auto, which resolves to their
   content's min-content width. A chart canvas, a Leaflet map or a nowrap
   label then refuses to shrink and drags the page wider than the screen —
   the horizontal scroll you can pinch away. These boxes may shrink. */
.chart-card,
.chart-grid-2 > *,
.sandbox-split > *,
.sandbox-event-card,
#sandbox-map-container,
.scroll-section > *,
.stat-card,
.photo-card,
.about-grid > *,
.step-figures > * {
  min-width: 0;
}

/* ─── SECTION DRAWER (hamburger) ───
   A single-page site still needs a table of contents. The button sits at the
   head of the nav at every width; the drawer slides in from the left over a
   scrim, and each entry jumps to a section. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-toggle:hover { background: var(--bg-elevated); color: var(--text-primary); }
.nav-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.nav-toggle .hb { position: relative; width: 18px; height: 14px; display: block; }
.nav-toggle .hb span {
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.26s ease, opacity 0.18s ease, top 0.26s ease, bottom 0.26s ease;
}
.nav-toggle .hb-t { top: 0; }
.nav-toggle .hb-m { top: 6px; }
.nav-toggle .hb-b { bottom: 0; }
/* open → morph the bars into an X */
body.nav-open .nav-toggle .hb-t { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle .hb-m { opacity: 0; transform: translateX(-6px); }
body.nav-open .nav-toggle .hb-b { transform: translateY(-6px) rotate(-45deg); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 940;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}
body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 960;
  width: min(320px, 86vw);
  height: 100%;
  height: 100dvh;
  padding: 18px 20px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  box-shadow: 8px 0 32px var(--shadow-soft);
  transform: translateX(-102%);
  transition: transform 0.24s ease;
}
body.nav-open .nav-drawer { transform: translateX(0); }

.nav-drawer-kicker {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 44px 4px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.nav-drawer-list { display: flex; flex-direction: column; }
.nav-drawer-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 4px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-light);
  transition: color 0.15s ease, padding-left 0.15s ease;
}
.nav-drawer-link:hover,
.nav-drawer-link:focus-visible { color: var(--text-primary); padding-left: 8px; }
.nav-drawer-link.is-current { color: var(--text-primary); font-weight: 600; }
.nav-drawer-link.is-current .nav-drawer-num { color: var(--v5); }
.nav-drawer-num {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  min-width: 16px;
  flex: none;
}
.nav-drawer-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 12px;
}
.nav-drawer-foot a { color: var(--v5); text-decoration: none; }
.nav-drawer-foot a:hover { color: var(--v9); text-decoration: underline; }

/* The nav sits above the drawer so the X stays clickable. */
body.nav-open #main-nav { z-index: 970; }

/* Narrow bars: the drawer carries the wayfinding, so the long project title
   and its divider come off the line. This is also what keeps the nav's
   min-content width inside a 360px viewport. */
@media (max-width: 720px) {
  .nav-project-title, .nav-divider { display: none; }
}
@media (max-width: 380px) {
  #main-nav { padding: 0 10px; gap: 10px; }
  .nav-logo-secondary { display: none; }
}

/* ─── HERO ACTIONS ─── */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 44px;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.hero-cta:hover { border-color: var(--text-primary); background: var(--bg-elevated); color: var(--text-primary); }
.hero-cta:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.hero-cta-primary {
  background: var(--v5);
  border-color: var(--v5);
  color: var(--on-accent);
}
.hero-cta-primary:hover { background: var(--v9); border-color: var(--v9); color: var(--on-accent); }

/* ─── ABOUT ─── */
#about { background: var(--bg-surface); border-top: 1px solid var(--border); }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px;
  align-items: start;
}
.about-main { max-width: 660px; }
.about-main p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.about-main a { color: var(--v5); }
.about-main a:hover { color: var(--v9); text-decoration: underline; }
.about-lede { font-size: 17px !important; color: var(--text-primary) !important; }
.about-h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 30px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.about-status { list-style: none; margin: 0 0 16px; padding: 0; }
.about-status li {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
  padding: 9px 0;
  border-bottom: 1px solid var(--border-light);
}
.about-badge {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 7px;
  border-radius: 2px;
  border: 1px solid;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.about-badge-confirmed { background: var(--badge-gain-bg); color: var(--badge-gain-fg); border-color: var(--badge-gain-br); }
.about-badge-pending   { background: var(--badge-mixed-bg); color: var(--badge-mixed-fg); border-color: var(--badge-mixed-br); }
.about-badge-derived   { background: var(--badge-moderate-bg); color: var(--badge-moderate-fg); border-color: var(--badge-moderate-br); }

.about-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.about-card {
  padding: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.about-card-kicker {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.about-card-body, .about-card-note {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.about-card-note { margin-top: 12px; font-size: 12px; color: var(--text-muted); }
.about-author { display: flex; align-items: center; gap: 12px; }
.about-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  flex: none;
}
.about-avatar.is-missing { display: none; }
.about-author-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}
.about-author-links { font-family: var(--font-sans); font-size: 12.5px; margin-top: 2px; }
.about-author-links a { color: var(--v5); text-decoration: none; }
.about-author-links a:hover { color: var(--v9); text-decoration: underline; }
.about-links { list-style: none; margin: 0; padding: 0; }
.about-links li { padding: 5px 0; border-bottom: 1px solid var(--border-light); }
.about-links li:last-child { border-bottom: none; }
.about-links a { font-family: var(--font-sans); font-size: 13px; color: var(--v5); text-decoration: none; }
.about-links a:hover { color: var(--v9); text-decoration: underline; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ─── STEP FIGURES ───
   Archival photographs inside the scrollytelling narrative, so the sticky map
   is not the only thing on screen for fifteen steps. One image runs the width
   of the reading column; a pair sits side by side and stacks on narrow
   screens. */
.step-figures {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 18px 0 16px;
}
.step-figures.is-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.step-figure {
  margin: 0;
  min-width: 0;
  border-top: 2px solid var(--text-primary);
  padding-top: 8px;
}
.step-figure-link { display: block; overflow: hidden; background: var(--bg-elevated); }
.step-figure-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.9);
  transition: transform 0.4s ease, filter 0.3s ease;
}
.step-figure-link:hover .step-figure-img { transform: scale(1.02); filter: saturate(1); }

.step-figure-cap {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.5;
  margin-top: 7px;
  color: var(--text-secondary);
}
.step-figure-title { color: var(--text-primary); font-weight: 500; }
.step-figure-year {
  display: inline-block;
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.step-figure-credit {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.45;
}
.step-figure-credit a { color: var(--text-muted); text-decoration: underline; }
.step-figure-credit a:hover { color: var(--v5); }

/* ─── SECTION-NAV FLOATING BUTTONS (up + down) ───
   The scroll assist: section to section down the page, and step by step
   through the scrollytelling narrative so the sticky map never gets
   jumped past in one leap. */
.section-nav {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 850;
}
.section-nav.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.section-nav-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--text-primary);
  color: var(--bg-base);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px var(--shadow-soft);
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.section-nav-btn:hover { background: var(--v9); color: var(--on-accent); border-color: var(--v9); }
.section-nav-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.section-nav-btn svg { width: 20px; height: 20px; }
.section-nav-btn.is-disabled { opacity: 0.32; pointer-events: none; }

/* ─── HERO BYLINE ─── */
.hero-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
}
.author-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.author-avatar.is-missing { display: none; }
.byline-meta { display: flex; flex-direction: column; line-height: 1.45; }
.byline-name-line { color: var(--text-secondary); }
.hero-byline-name { color: var(--text-primary); font-weight: 600; }
.byline-dateline { color: var(--text-muted); font-size: 12px; }
.byline-socials { display: inline-flex; gap: 4px; margin-left: 2px; }
.byline-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 3px;
  color: var(--text-muted);
  transition: color 0.15s ease, background 0.15s ease;
}
.byline-social:hover { color: var(--text-primary); background: var(--bg-elevated); }
.byline-social svg { width: 15px; height: 15px; display: block; }

/* ─── FOOTER AUTHOR CREDIT ─── */
.footer-credit {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.credit-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.credit-avatar.is-missing { display: none; }
.credit-meta { font-family: var(--font-sans); line-height: 1.5; }
.credit-role {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.credit-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--text-primary);
}
.credit-links { font-size: 12.5px; margin-top: 3px; }
.credit-links a { color: var(--v5); text-decoration: none; }
.credit-links a:hover { color: var(--v9); text-decoration: underline; }
.credit-note { font-size: 12px; color: var(--text-secondary); margin-top: 6px; max-width: 46ch; line-height: 1.55; }

@media (max-width: 900px) {
  .step-figures.is-pair { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .section-nav { right: 14px; bottom: 14px; }
  .section-nav-btn { width: 44px; height: 44px; }
  .hero-byline { font-size: 12px; gap: 10px; }
  .author-avatar { width: 40px; height: 40px; }
}

/* ══════════════════════════════════════════════════════════════════
   PRIVACY ADDITIONS
   Components this study needs that the Indigo furniture did not have:
   the concept cards, the "who writes the terms" diagram, the principle
   columns, the lineage of machine-readable terms, the IEEE 7012 card and
   its agreements, the argument, the illustrative agent scenario, the myth
   cards and the jurisdiction badges. Generic pieces carried over from
   Indigo (place lines, placed slider ticks, archive filter, table extras,
   pull quotes) come first.
   ══════════════════════════════════════════════════════════════════ */

.mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace; }

/* Hero: the italic word sets in brass on graphite and deep brass on paper. */
.hero-title em { font-style: italic; color: var(--v5); }

/* The thesis strip under the hero standfirst: who has written the terms of
   privacy, era by era — the wall, the law, the policy, the signal, and last
   the person's own agreement. */
.terms-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  max-width: 600px;
  margin: -32px 0 10px;
}
.terms-strip span {
  min-height: 24px;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 0 0 3px 6px;
  font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-accent);
}
.terms-strip span:nth-child(1) { background: var(--era-walls); }
.terms-strip span:nth-child(2) { background: var(--era-castle); }
.terms-strip span:nth-child(3) { background: var(--who-org); }
.terms-strip span:nth-child(4) { background: var(--who-signal); }
.terms-strip span:nth-child(5) { background: var(--who-person); }
.terms-strip-cap { font-size: 11px; color: var(--text-muted); margin: 0 0 44px; max-width: 600px; line-height: 1.55; }

/* Place line under a step headline and in map popups. */
.step-place {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: -6px 0 10px;
}
.map-popup-place {
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: -3px 0 6px;
}

/* Compressed-time slider ticks: placed by year, not spread evenly. */
.slider-ticks.is-placed {
  position: relative;
  display: block;
  height: 16px;
}
.slider-ticks.is-placed span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.slider-ticks.is-placed span:first-child { transform: none; }
.slider-ticks.is-placed span:last-child  { transform: translateX(-100%); }
.slider-note { font-size: 10.5px; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }
@media (max-width: 600px) {
  .slider-ticks.is-placed span:nth-child(even) { display: none; }
}

/* ─── WHAT PRIVACY MEANS: concept cards ─── */
#concepts {
  background: var(--bg-surface);
  border-block: 1px solid var(--border);
}
.concepts-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 28px;
}
@media (max-width: 960px) { .concepts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .concepts-grid { grid-template-columns: minmax(0, 1fr); } }
.concept-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--concept-accent, var(--v5));
  border-radius: var(--card-radius);
  overflow: hidden;
}
.concept-thumb { display: block; aspect-ratio: 16 / 9; background: var(--thumb-bg); overflow: hidden; }
.concept-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9); }
[data-theme="light"] .concept-thumb img { filter: none; }
.concept-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.concept-origin { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--concept-accent, var(--v5)); }
.concept-name  { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.15; margin: 3px 0 8px; color: var(--text-primary); }
.concept-def   { font-family: var(--font-display); font-style: italic; font-size: 15.5px; line-height: 1.45; color: var(--text-primary); margin-bottom: 8px; }
.concept-def::before { content: '\201C'; }
.concept-def::after  { content: '\201D'; }
.concept-note  { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.concept-source { font-size: 9.5px; color: var(--text-muted); margin-top: auto; padding-top: 10px; line-height: 1.5; }
.concept-source a { color: var(--v4); text-decoration: underline; }

/* ─── WHO WRITES THE TERMS: the four-voice diagram ─── */
.flip-card { padding: 24px 24px 18px; }
.flip-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.flip-step { min-width: 0; border-top: 2px solid var(--flip-accent, var(--v5)); padding-top: 12px; }
.flip-figure { margin: 0 0 14px; }
.flip-figure svg { width: 100%; height: auto; display: block; max-height: 88px; }
.flip-kicker { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--flip-accent, var(--text-muted)); }
.flip-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin: 4px 0 6px; color: var(--text-primary); line-height: 1.2; }
.flip-body { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.flip-examples { font-size: 10.5px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }
.flip-src { font-size: 9.5px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }
.flip-src a { color: var(--v4); text-decoration: underline; }
.flip-svg .f-doc   { fill: var(--bg-elevated); stroke: var(--text-soft); stroke-width: 1.4; }
.flip-svg .f-line  { stroke: var(--text-muted); stroke-width: 1.4; stroke-linecap: round; }
.flip-svg .f-actor { fill: var(--text-soft); }
.flip-svg .f-org   { fill: var(--who-org); }
.flip-svg .f-sig   { fill: none; stroke: var(--who-signal); stroke-width: 2; stroke-linecap: round; }
.flip-svg .f-sigdot{ fill: var(--who-signal); }
.flip-svg .f-ind   { fill: var(--who-industry); }
.flip-svg .f-per   { fill: var(--who-person); }
.flip-svg .f-arrow { stroke: var(--text-muted); stroke-width: 1.4; fill: none; }
.flip-svg .f-arrowhead { fill: var(--text-muted); }
.flip-svg .f-seal  { fill: var(--v5); }
.flip-svg text { font-family: var(--font-sans); font-size: 9px; fill: var(--text-faint); letter-spacing: .04em; }
@media (max-width: 900px) { .flip-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .flip-steps { grid-template-columns: minmax(0, 1fr); } }
.flip-foot {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
  line-height: 1.6;
}
.flip-foot strong { color: var(--text-primary); font-weight: 600; }

/* ─── FAIR INFORMATION PRINCIPLES, side by side ─── */
.fipps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 16px;
}
.fipps-col {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--fipps-accent, var(--era-dataprotection));
  border-radius: var(--card-radius);
  padding: 14px 16px 12px;
  min-width: 0;
}
.fipps-head { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.fipps-sub  { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 2px 0 10px; }
.fipps-list { list-style: none; counter-reset: fp; }
.fipps-list li { counter-increment: fp; position: relative; padding: 0 0 9px 24px; font-size: 12px; line-height: 1.55; color: var(--text-secondary); }
.fipps-list li::before { content: counter(fp); position: absolute; left: 0; top: 0; font-size: 10px; font-weight: 700; color: var(--fipps-accent, var(--era-dataprotection)); font-variant-numeric: tabular-nums; }
.fipps-list li strong { color: var(--text-primary); font-weight: 600; }
.fipps-src { font-size: 9.5px; color: var(--text-muted); line-height: 1.5; border-top: 1px solid var(--border-light); padding-top: 8px; }
.fipps-src a { color: var(--v4); text-decoration: underline; }

/* ─── FIGURE CARDS: one cited number each ─── */
.fig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.fig-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--fig-accent, var(--v5));
  border-radius: var(--card-radius);
  padding: 14px 16px 12px;
  min-width: 0;
  display: flex; flex-direction: column;
}
.fig-value { font-family: var(--font-sans); font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; line-height: 1; color: var(--fig-accent, var(--v5)); font-variant-numeric: tabular-nums; }
.fig-label { font-size: 12.5px; color: var(--text-primary); line-height: 1.45; margin: 8px 0 6px; }
.fig-note  { font-size: 11px; color: var(--text-secondary); line-height: 1.5; }
.fig-src   { font-size: 9.5px; color: var(--text-muted); line-height: 1.5; margin-top: auto; padding-top: 8px; }
.fig-src a { color: var(--v4); text-decoration: underline; }

/* ─── WHO SPEAKS: badges for the lineage and the diagram ─── */
.who-badge {
  display: inline-block;
  font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 10px; white-space: nowrap;
  border: 1px solid currentColor;
}
.who-org      { color: var(--who-org); }
.who-signal   { color: var(--who-signal); }
.who-industry { color: var(--who-industry); }
.who-person   { color: var(--who-person); }
.yn { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.yn-yes { color: var(--v6); }
.yn-no  { color: var(--text-muted); }
.yn-partial { color: var(--v7); }
tr.is-destination { background: color-mix(in srgb, var(--who-person) 9%, transparent); }
tr.is-destination td:first-child { box-shadow: inset 3px 0 0 var(--who-person); }

/* ─── IEEE 7012: the standard card, principles and agreements ─── */
#myterms { background: var(--bg-surface); border-block: 1px solid var(--border); }
.std-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--who-person);
  border-radius: var(--card-radius);
  padding: 22px 24px;
  margin-bottom: 24px;
}
.std-designation { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--who-person); }
.std-title { font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); font-weight: 600; line-height: 1.15; margin: 4px 0 12px; color: var(--text-primary); }
.std-purpose { font-family: var(--font-display); font-style: italic; font-size: 16.5px; line-height: 1.5; color: var(--text-primary); }
.std-scope { font-size: 13px; line-height: 1.65; color: var(--text-secondary); margin-top: 10px; }
.std-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 14px; align-content: start; font-size: 12px; }
.std-facts dt { color: var(--text-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; }
.std-facts dd { color: var(--text-primary); line-height: 1.45; }
.std-src { grid-column: 1 / -1; font-size: 9.5px; color: var(--text-muted); line-height: 1.6; border-top: 1px solid var(--border-light); padding-top: 10px; }
.std-src a { color: var(--v4); text-decoration: underline; }
@media (max-width: 800px) { .std-card { grid-template-columns: minmax(0, 1fr); } }

.principles-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.principle {
  border-left: 3px solid var(--who-person);
  padding: 4px 0 4px 14px;
}
.principle-name { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--who-person); }
.principle-text { font-family: var(--font-display); font-size: 16px; line-height: 1.4; color: var(--text-primary); margin-top: 3px; }

.agreements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 14px;
  margin-bottom: 12px;
}
.agreement-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 14px 16px;
  min-width: 0;
  display: flex; flex-direction: column;
  position: relative;
}
.agreement-card::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--who-person);
  opacity: var(--agreement-weight, 1);
}
.agreement-type { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.agreement-code { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 17px; font-weight: 700; color: var(--who-person); margin: 5px 0 4px; letter-spacing: .02em; }
.agreement-name { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.35; margin-bottom: 6px; }
.agreement-body { font-size: 12px; line-height: 1.55; color: var(--text-secondary); }
.agreement-src { font-size: 9.5px; color: var(--text-muted); margin-top: auto; padding-top: 10px; line-height: 1.5; }
.agreement-src a { color: var(--v4); text-decoration: underline; }

/* ─── THE ARGUMENT: why it matters now ─── */
.arg-list { display: grid; gap: 14px; counter-reset: arg; margin-bottom: 28px; }
.arg-card {
  counter-increment: arg;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 4px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 16px 18px;
}
.arg-card::before {
  content: counter(arg, decimal-leading-zero);
  grid-row: 1 / span 3;
  font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1;
  color: var(--who-person);
}
.arg-claim { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--text-primary); }
.arg-expl  { font-size: 13px; line-height: 1.65; color: var(--text-secondary); }
.arg-evidence { font-size: 9.5px; color: var(--text-muted); line-height: 1.6; }
.arg-evidence a { color: var(--v4); text-decoration: underline; }
.arg-evidence q { font-style: italic; color: var(--text-dim); }
@media (max-width: 560px) {
  .arg-card { grid-template-columns: minmax(0, 1fr); }
  .arg-card::before { grid-row: auto; font-size: 22px; }
}

/* ─── THE ILLUSTRATIVE AGENT SCENARIO ─── */
.scenario-card { padding: 22px 24px 16px; }
.scenario-banner {
  display: inline-block;
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--v7);
  border: 1px dashed var(--v7);
  border-radius: 2px;
  padding: 3px 8px;
  margin-bottom: 14px;
}
.scenario-steps { list-style: none; counter-reset: sc; position: relative; }
.scenario-steps::before {
  content: ''; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(to bottom, var(--who-person), var(--who-signal));
  opacity: .5;
}
.scenario-step { counter-increment: sc; position: relative; padding: 0 0 16px 44px; }
.scenario-step::before {
  content: counter(sc);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-card); border: 2px solid var(--who-person);
  font-size: 12px; font-weight: 700; color: var(--who-person);
}
.scenario-actor { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.scenario-text { font-size: 13.5px; line-height: 1.6; color: var(--text-primary); margin: 2px 0 4px; }
.scenario-basis { font-size: 10.5px; line-height: 1.55; color: var(--text-secondary); }
.scenario-basis.is-unspecified { color: var(--v7); }
.scenario-basis a { color: var(--v4); text-decoration: underline; }

/* ─── COUNTERPOINTS ─── */
.counter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
}
.counter-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--v7);
  border-radius: var(--card-radius);
  padding: 14px 16px;
  min-width: 0;
}
.counter-point { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.45; }
.counter-response { font-size: 12px; line-height: 1.6; color: var(--text-secondary); margin-top: 6px; }
.counter-src { font-size: 9.5px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }
.counter-src a { color: var(--v4); text-decoration: underline; }

/* ─── MYTHS ─── */
.myth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 14px;
}
.myth-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 14px 16px;
  min-width: 0;
  display: flex; flex-direction: column;
}
.myth-verdict { align-self: flex-start; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 3px 7px; border-radius: 2px; margin-bottom: 8px; }
.myth-verdict.v-false       { background: var(--badge-catastrophic-bg); color: var(--badge-catastrophic-fg); border: 1px solid var(--badge-catastrophic-br); }
.myth-verdict.v-misleading  { background: var(--badge-severe-bg); color: var(--badge-severe-fg); border: 1px solid var(--badge-severe-br); }
.myth-verdict.v-unverified  { background: var(--badge-mixed-bg); color: var(--badge-mixed-fg); border: 1px solid var(--badge-mixed-br); }
.myth-claim { font-family: var(--font-display); font-size: 17px; font-style: italic; line-height: 1.35; color: var(--text-primary); }
.myth-correction { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); margin-top: 8px; }
.myth-src { font-size: 9.5px; color: var(--text-muted); margin-top: auto; padding-top: 10px; line-height: 1.5; }
.myth-src a { color: var(--v4); text-decoration: underline; }
.myth-era { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }

/* ─── ARCHIVE ERA FILTER ─── */
.archive-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.archive-chip {
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--chip, var(--v5));
  border-radius: 2px;
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
}
.archive-chip:hover { color: var(--text-primary); border-color: var(--chip, var(--v5)); }
.archive-chip.is-on { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--chip, var(--v5)); }
.archive-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ─── TABLE EXTRAS ─── */
.table-source { font-size: 9.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.6; }
.table-source a, .geo-table td a { color: var(--v4); text-decoration: underline; }
.harm-figure { font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--v9); font-variant-numeric: tabular-nums; }
.geo-table td.wrap { white-space: normal; }

/* Pull quote used between sections: a primary-source voice. */
.pull-quote {
  max-width: 760px;
  margin: 8px 0 36px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--v5);
}
.pull-quote p {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 24px);
  font-style: italic;
  line-height: 1.4;
  color: var(--text-primary);
}
.pull-quote cite {
  display: block;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.pull-quote cite a { color: var(--v4); text-decoration: underline; }
.pull-quote.is-destination { border-left-color: var(--who-person); }

.concepts-grid > *, .flip-steps > *, .fig-grid > *, .agreements-grid > *, .myth-grid > *, .counter-grid > *, .fipps-grid > * { min-width: 0; }

/* A section's closing note: what the numbers do and do not say. */
.section-coda { font-size: 12.5px; color: var(--text-secondary); line-height: 1.65; max-width: 820px; margin-top: 18px; }
.section-coda strong { color: var(--text-primary); }
.h3-sub { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--text-primary); margin: 36px 0 6px; line-height: 1.2; }
.h3-sub + .chart-desc { margin-bottom: 16px; }

/* ─── THE ESSAY: what privacy is ─── */
#essay { background: var(--bg-base); }
.essay-wrap { max-width: 1200px; }
.essay-grid { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 1fr); gap: 48px; align-items: start; }
.essay { font-family: var(--font-display); font-size: 19px; line-height: 1.62; color: var(--text-primary); }
.essay-h { font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--v5); margin: 30px 0 8px; }
.essay-h:first-child { margin-top: 0; }
.essay-p { margin: 0 0 14px; }
.essay > .essay-p:first-of-type::first-letter {
  float: left; font-size: 3.4em; line-height: .86; font-weight: 600; padding: 6px 8px 0 0; color: var(--v5);
}
.essay-cite { font-family: var(--font-sans); font-size: 10px; font-weight: 600; vertical-align: super; line-height: 0; margin-left: 1px; }
.essay-cite a { color: var(--v5); text-decoration: none; padding: 0 1px; }
.essay-cite a:hover { text-decoration: underline; }
.essay-aside { position: sticky; top: calc(var(--nav-h, 56px) + 24px); display: grid; gap: 18px; }
.essay-notes-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--card-radius); padding: 14px 16px; max-height: 70vh; overflow: auto; }
.essay-notes-kicker { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.essay-notes { list-style: none; counter-reset: en; display: grid; gap: 8px; }
.essay-notes li { counter-increment: en; position: relative; padding-left: 22px; font-size: 10.5px; line-height: 1.5; color: var(--text-secondary); scroll-margin-top: calc(var(--nav-h, 56px) + 16px); }
.essay-notes li::before { content: counter(en); position: absolute; left: 0; top: 0; font-weight: 700; color: var(--v5); font-variant-numeric: tabular-nums; }
.essay-notes li:target { background: color-mix(in srgb, var(--v5) 12%, transparent); border-radius: 2px; }
.essay-notes q { font-style: italic; color: var(--text-dim); }
.essay-notes a { color: var(--v4); text-decoration: underline; }
@media (max-width: 960px) {
  .essay-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .essay-aside { position: static; }
  .essay-notes-card { max-height: none; }
  .essay { font-size: 17.5px; }
}

/* ─── AROUND THE WORLD ─── */
.world-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
#world-map-container { height: 440px; border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--ink); }
.world-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 12px 0 4px; }
.world-year { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--text-primary); min-width: 84px; font-variant-numeric: tabular-nums; }
.world-count { font-size: 12px; color: var(--text-secondary); }
.world-count strong { color: var(--era-dataprotection); font-size: 15px; }
#world-slider { flex: 1 1 260px; accent-color: var(--era-dataprotection); }
.decade-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: 10px; color: var(--text-secondary); }
.decade-legend span { display: inline-flex; align-items: center; gap: 5px; }
.decade-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid var(--border); }
.world-list { max-height: 440px; overflow: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--card-radius); }
.world-list table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.world-list th { position: sticky; top: 0; background: var(--bg-elevated); text-align: left; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding: 7px 10px; font-weight: 700; }
.world-list td { padding: 6px 10px; border-top: 1px solid var(--border-light); color: var(--text-secondary); vertical-align: top; }
.world-list td.y { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.world-list td .c { color: var(--text-primary); font-weight: 600; }
.world-list tr.is-future td { opacity: .35; }
.world-list a { color: var(--v4); text-decoration: underline; }
@media (max-width: 900px) {
  .world-split { grid-template-columns: minmax(0, 1fr); }
  #world-map-container { height: 340px; }
  .world-list { max-height: 360px; }
}
.model-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.model-card { background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--model-accent, var(--era-dataprotection)); border-radius: var(--card-radius); padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; }
.model-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.model-ex { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 4px 0 8px; }
.model-desc { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.model-src { font-size: 9.5px; color: var(--text-muted); margin-top: auto; padding-top: 10px; line-height: 1.5; }
.model-src a { color: var(--v4); text-decoration: underline; }

/* ─── THE PEOPLE ─── */
.people-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.person-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--card-radius);
  overflow: hidden; display: flex; flex-direction: column; min-width: 0;
  border-top: 3px solid var(--person-accent, var(--v5));
}
.person-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px 16px 0; align-items: center; }
.person-portrait { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--thumb-bg); display: grid; place-items: center; border: 1px solid var(--border); }
.person-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.15); }
.person-initials { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--text-muted); }
.person-roles { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--person-accent, var(--v5)); }
.person-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.15; color: var(--text-primary); margin: 2px 0 1px; }
.person-handle { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 11px; color: var(--text-secondary); }
.person-years { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.person-body { padding: 10px 16px 14px; display: flex; flex-direction: column; flex: 1; }
.person-quote { font-family: var(--font-display); font-style: italic; font-size: 15.5px; line-height: 1.45; color: var(--text-primary); border-left: 2px solid var(--person-accent, var(--v5)); padding-left: 10px; margin: 2px 0 10px; }
.person-quote cite { display: block; font-family: var(--font-sans); font-style: normal; font-size: 9.5px; color: var(--text-muted); margin-top: 4px; }
.person-quote cite a { color: var(--v4); text-decoration: underline; }
.person-text { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 6px; }
.person-work { font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; }
.person-work a { color: var(--v5); text-decoration: underline; }
.person-thread { font-size: 11px; line-height: 1.5; color: var(--who-person); margin-bottom: 6px; }
.person-src { font-size: 9.5px; color: var(--text-muted); margin-top: auto; padding-top: 8px; line-height: 1.5; }
.person-src a { color: var(--v4); text-decoration: underline; }
.people-grid > *, .model-grid > * { min-width: 0; }

/* Decades of first data-protection laws on the world map. */
:root {
  --dec-1970: #A58BD6; --dec-1980: #6FA8DC; --dec-1990: #6CB2BA;
  --dec-2000: #7CC49A; --dec-2010: #D8B45C; --dec-2020: #DC8A55;
}
[data-theme="light"] {
  --dec-1970: #6A4A9E; --dec-1980: #2A64A0; --dec-1990: #2C7680;
  --dec-2000: #2F7A4E; --dec-2010: #8A6412; --dec-2020: #A4501E;
}

/* The significance line under each narrative step. */
.step-why { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); margin: -4px 0 12px; padding-left: 10px; border-left: 2px solid var(--border); }
.step-why span { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; }

/* The "Terms set by" chip on each narrative step: brass, not the crisis red. */
.step-metric-chip strong { color: var(--v5); }
/* Four scrubber cards sit in one row on a desktop. */
#stat-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
/* The people cards fold their longer notes away. */
.person-more { margin: 2px 0 6px; }
.person-more summary { cursor: pointer; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); list-style: none; padding: 3px 0; }
.person-more summary::-webkit-details-marker { display: none; }
.person-more summary::before { content: '+ '; color: var(--person-accent, var(--v5)); }
.person-more[open] summary::before { content: '\2212  '; }
.person-more summary:hover { color: var(--text-primary); }
.person-more > *:not(summary) { margin-top: 6px; }
@media (max-width: 700px) { .who-badge { white-space: normal; line-height: 1.35; } }