/* ══════════════════════════════════════════════════════════════════
   DOWNTOWN TAMPA: A CIVIC DEVELOPMENT AUTOPSY
   styles.css — Editorial theme: paper and ink, one crisis accent, a link blue
   Open civic / historical data journalism
   ══════════════════════════════════════════════════════════════════ */

/* ─── CSS CUSTOM PROPERTIES ─── */
/* Editorial palette. Light (paper) is canonical; dark is a warm charcoal
   night mode. Ink, one crisis accent and a link blue carry the meaning —
   the old viridis greens and teals are gone from both themes. */
:root {
  /* Sequential data ramp — warm neutral, with the accent at v5 and the
     crisis peak at v9. Dark-mode values; the light block below inverts
     the neutral end so the ramp stays legible on paper. */
  --v0: #4E4A44;   /* deep warm charcoal */
  --v1: #6F6A62;   /* deep warm gray    */
  --v2: #8C867C;   /* warm gray         */
  --v3: #B4AC9E;   /* light warm gray   */
  --v4: #C6BCA9;   /* stone             */
  --v5: #8FB4D6;   /* steel blue — primary accent */
  --v6: #CBB68A;   /* wheat             */
  --v7: #D9A96B;   /* ochre             */
  --v8: #DE8B5C;   /* terracotta        */
  --v9: #E06A5E;   /* oxblood — crisis peak */

  /* Warm charcoal surfaces */
  --bg-base:      #14120E;
  --bg-surface:   #1A1712;
  --bg-card:      #201C16;
  --bg-elevated:  #262119;
  --border:       #332E26;
  --border-light: #241F19;

  /* Text */
  --text-primary:   #F1ECE2;
  --text-secondary: #9E978A;
  --text-muted:     #5A554C;
  --text-accent:    var(--v5);
  --text-faint:     #6E685E;   /* chart ticks, footer small print */
  --text-dim:       #7E7769;   /* chart legends */
  --text-soft:      #B6AE9F;   /* sankey labels, tertiary copy */
  --overlay-bg:     rgba(20, 18, 14, 0.92);
  --overlay-bg-2:   rgba(20, 18, 14, 0.90);
  --shadow-strong:  rgba(0, 0, 0, 0.72);
  --shadow-soft:    rgba(0, 0, 0, 0.5);
  --ring:           #F1ECE2;   /* focus / current-pill ring */
  --ink:            #0C0A07;   /* deepest ground (progress track, map edges) */
  --bg-deep:        #0E0C09;   /* hero + footer bookends */
  /* Status / net badges: background, text, border per state. A single
     severity ramp — gray → slate → gold → ochre → oxblood — plus blue for gain. */
  --badge-gain-bg:      #16232D;  --badge-gain-fg:  #9CC0DE;  --badge-gain-br:  #2C4356;
  --badge-mixed-bg:     #2A2416;  --badge-mixed-fg: #D8BE7C;  --badge-mixed-br: #4A3F24;
  --badge-moderate-bg:  #24211C;  --badge-moderate-fg: #B4AC9E; --badge-moderate-br: #3C3730;
  --badge-exposure-bg:  #1C242B;  --badge-exposure-fg: #A3B6C4; --badge-exposure-br: #33424E;
  --badge-severe-bg:    #2E2016;  --badge-severe-fg: #DDA06A;   --badge-severe-br: #4E3722;
  --badge-catastrophic-bg: #301A18; --badge-catastrophic-fg: #E08A80; --badge-catastrophic-br: #552A26;
  --thumb-bg:       linear-gradient(135deg, #241F19, #16130F);
  --chart-yellow:   var(--v9);
  --on-accent:      #14120E;   /* label ON an accent fill */
  color-scheme: dark;

  /* Civic eras — eight named periods, not ramp positions. A warm sequence
     punctuated by three hue events: the bust reads cold, clearance reads
     oxblood, the waterfront reads like water. */
  --era-fortress:   #7C8794;
  --era-boomtown:   #C6A24E;
  --era-metropolis: #7FA8CF;
  --era-depression: #918C83;
  --era-suburban:   #BE9A72;
  --era-renewal:    #E06A5E;
  --era-revival:    #E2B366;
  --era-waterfront: #B6C4CE;

  /* 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 (canonical) ───
   Toggled by the nav button (persisted in localStorage as 'oca-theme') and
   applied before first paint by the inline script in index.html. Warm paper
   and ink; the ramp's neutral end darkens so it stays legible on paper. */
[data-theme="light"] {
  --v0: #3C3831;
  --v1: #5F594F;
  --v2: #7A7367;
  --v3: #9A9184;
  --v4: #A8977A;
  --v5: #326891;   /* link blue — primary accent */
  --v6: #9A7B3C;
  --v7: #B87333;
  --v8: #B4552A;
  --v9: #A61B1B;   /* oxblood — crisis peak */

  --bg-base:      #FBFAF8;
  --bg-surface:   #FFFFFF;
  --bg-card:      #FFFFFF;
  --bg-elevated:  #F4F2EC;
  --border:       #E4E1DA;
  --border-light: #EDEBE4;
  --text-primary:   #1A1A1A;
  --text-secondary: #6B6B6B;
  --text-muted:     #9A9488;
  --text-faint:     #857F73;
  --text-dim:       #75705F;
  --text-soft:      #4A463F;
  --overlay-bg:     rgba(251, 250, 248, 0.94);
  --overlay-bg-2:   rgba(251, 250, 248, 0.92);
  --shadow-strong:  rgba(26, 26, 26, 0.22);
  --shadow-soft:    rgba(26, 26, 26, 0.12);
  --ring:           #1A1A1A;
  --ink:            #1A1A1A;
  --thumb-bg:       linear-gradient(135deg, #F4F2EC, #E8E5DC);
  --bg-deep:        #F4F2EC;
  --badge-gain-bg:      #E7EEF5;  --badge-gain-fg:  #29567A;  --badge-gain-br:  #C3D5E4;
  --badge-mixed-bg:     #F5EEDC;  --badge-mixed-fg: #7A5F1C;  --badge-mixed-br: #E0D2AF;
  --badge-moderate-bg:  #F0EEE8;  --badge-moderate-fg: #5C574E; --badge-moderate-br: #DCD8CE;
  --badge-exposure-bg:  #EAEFF3;  --badge-exposure-fg: #45606F; --badge-exposure-br: #CBD8E0;
  --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-fortress:   #55636F;
  --era-boomtown:   #8A6D1E;
  --era-metropolis: #326891;
  --era-depression: #6E6A62;
  --era-suburban:   #8E5F30;
  --era-renewal:    #A61B1B;
  --era-revival:    #B07C1C;
  --era-waterfront: #5B7C93;
  --on-accent:      #FBFAF8;
  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: linear-gradient(to right, var(--v0), var(--v3), var(--v5), var(--v7), var(--v9));
  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:
   the river in steel blue, the street grid warming as it goes, the
   Plant minaret in the crisis accent. */
.logo-river   { stroke: var(--era-metropolis); fill: none; }
.logo-grid-1  { fill: var(--v2); }
.logo-grid-2  { fill: var(--v6); }
.logo-grid-3  { fill: var(--v7); }
.logo-tower   { fill: var(--v9); }

.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;
  background: linear-gradient(to right, var(--v0), var(--v2), var(--v4), var(--v6), var(--v8), var(--v9));
}

/* ─── PHASE LEGEND ─── */
/* ─── Pathway chooser ────────────────────────────────────────────────────────
   The archive now holds two studies of the same city. Rather than bury the
   second behind a nav link, both are offered as equal doors directly under the
   hero: the one you are reading is marked, the other is a card you can enter.
   Colour comes from the era ramp, so each path reads as the period it covers. */
#pathways {
  background: var(--bg-surface);
  border-block: 1px solid var(--border);
}
.pathways-inner {
  max-width: 1180px; margin: 0 auto; padding: 46px 24px 52px;
}
.pathways-kicker {
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-secondary); margin: 0 0 8px;
}
.pathways-lede {
  font-size: 17px; line-height: 1.6; color: var(--text-soft);
  margin: 0 0 28px; max-width: 60ch;
}
.pathways-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.pathway {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-top: 3px solid var(--path-accent, var(--v5));
  padding: 26px 26px 24px; text-decoration: none; color: inherit;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
a.pathway:hover, a.pathway:focus-visible {
  background: var(--bg-elevated); border-color: var(--path-accent, var(--v5));
  border-top-color: var(--path-accent, var(--v5)); transform: translateY(-2px);
}
.pathway-span {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--path-accent, var(--v5)); margin: 0 0 10px;
}
.pathway-title {
  font-family: var(--font-display, inherit);
  font-size: 30px; line-height: 1.12; letter-spacing: -.02em;
  color: var(--text-primary); margin: 0 0 6px;
}
.pathway-sub {
  font-size: 14px; font-style: italic; color: var(--text-secondary); margin: 0 0 14px;
}
.pathway-body {
  font-size: 15px; line-height: 1.6; color: var(--text-soft); margin: 0 0 18px;
}
.pathway-foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}
.pathway-go { color: var(--path-accent, var(--v5)); font-weight: 700; }
/* The card for the page you are already on: same shape, no invitation. */
.pathway.is-current { background: var(--bg-surface); }
.pathway.is-current .pathway-go { color: var(--text-muted); font-weight: 600; }
.pathway-here {
  display: inline-block; padding: 3px 8px; border: 1px solid var(--border);
  border-radius: 2px; font-size: 10.5px; letter-spacing: .14em;
  color: var(--text-secondary); background: var(--bg-base);
}
@media (max-width: 560px) {
  .pathways-inner { padding: 34px 18px 38px; }
  .pathway { padding: 22px 20px 20px; }
  .pathway-title { font-size: 25px; }
}

#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;
  background: linear-gradient(to right, var(--v0), var(--v2), var(--v4), var(--v7), var(--v9));
}

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

/* ─── SANKEY SECTION ─── */
.sankey-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.sankey-btn {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 6px 16px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
}

.sankey-btn.active {
  background: var(--v5);
  color: var(--on-accent);
  border-color: var(--v5);
}

.sankey-btn.crisis.active {
  background: var(--v9);
  color: var(--on-accent);
  border-color: var(--v9);
}

#sankey-india-svg, #sankey-global-svg {
  width: 100%;
  overflow: visible;
}

/* ─── 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: linear-gradient(to right, var(--v0), var(--v3), var(--v5), var(--v7), var(--v9)) 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; }

/* ─── SANKEY SVG STYLES ─── */
.sankey-node rect {
  rx: 2px;
}

.sankey-link {
  /* fill set via inline style in drawSankey() — do NOT set fill here */
  transition: fill-opacity 0.25s;
  cursor: default;
}

.sankey-link:hover { fill-opacity: 0.55 !important; }

.sankey-label {
  font-family: var(--font-sans);
  font-size: 10px;
  fill: var(--text-soft);
  pointer-events: none;
}

.sankey-col-header {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  fill: var(--text-faint);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.sankey-blocked-label {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  fill: var(--v9);
  letter-spacing: 0.5px;
}

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

/* ─── CRA TAX INCREMENT CARDS ─── */
.cra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 18px 0 6px;
}
.cra-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--v5);
  border-radius: var(--card-radius);
  padding: 14px 16px;
}
.cra-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.cra-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.cra-row strong { font-size: 15px; color: var(--text-primary); }
.cra-multiple {
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-top: 8px;
  text-transform: uppercase;
}

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