@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&family=Geist+Mono:wght@400;600&display=swap');

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

:root {
  --nav-h: 68px; /* fixed nav: 18px padding top + 18px padding bottom + ~32px content */
  --bg: #1d1d1d;
  --c0: #dddddd;
  --c80: rgba(232,232,232,0.88);
  --c65: rgba(232,232,232,0.78);
  --c50: rgba(232,232,232,0.66);
  --c35: rgba(232,232,232,0.56);
  --c20: rgba(232,232,232,0.20);
  --c10: rgba(232,232,232,0.10);
  --font-main: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'Geist Mono', monospace;
  --accent-yellow: rgba(214, 208, 121, 0.9);
  /* Shared left indent for both chart sections (rank + bubble) */
  --chart-pad-left: clamp(20px, 4vw, 100px);
}

body {
  background: var(--bg);
  font-family: var(--font-main);
  color: var(--c0);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.tts-body {
  overflow-x: visible;
}

/* ══════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════ */
nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 40px;
  height: var(--nav-h);
  border-bottom: 0.5px solid rgba(240,240,240,0.20);
  background: #1a1a1a;
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  gap: 20px;
  box-sizing: border-box;
}
.nav-logo {
  font-family: var(--font-main);
  font-size: 20px; font-weight: 600;
  color: var(--c0); display: none;
}
/* Hide logo on landing page only */
body.tts-body:has(.landing-page) .nav-logo { display: none; }
/* Show logo on talking about space and talking to space */
body.tas-body .nav-logo { display: block; }
body.tts-body:not(:has(.landing-page)) .nav-logo { display: block; }
.nav-logo a { color: var(--c0); text-decoration: none; transition: color 0.15s; }
.nav-logo a:hover { color: var(--c65); }
.nav-logo a:visited { color: var(--c0); }
.nav-links { display: flex; gap: 30px; align-items: center; margin-left: auto; }
.nav-links a {
  font-family: var(--font-main); font-size: 18px; font-weight: 500;
  color: var(--c65); text-decoration: none; transition: color 0.15s;
}
.nav-links a:hover { color: var(--c0); }
.nav-links a.active { color: var(--c0); border-bottom: 1px solid var(--c0); padding-bottom: 1px; }
.nav-words { display: inline; white-space: nowrap; }
.nav-word { display: inline; }
.nav-word + .nav-word::before { content: " "; }
/* Methodology nav link — icon-only, lower visual hierarchy than section links */
.nav-link--methodology {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--c65);
  transition: color 0.15s;
  position: relative;
  text-decoration: none;
}
.nav-link--methodology:hover {
  color: var(--c0) !important;
}
.nav-link--methodology svg {
  display: block;
  flex-shrink: 0;
}
/* Tooltip — opens downward, sits close to the icon, has a small top caret */
.nav-link--methodology::after {
  content: "methodology";
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--c65);
  background: #1e1e1e;
  border: 0.5px solid rgba(240,240,240,0.20);
  padding: 5px 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 10001;
}
/* Caret pointing up toward the icon */
.nav-link--methodology::before {
  content: '';
  position: absolute;
  top: calc(100% + 3px);
  right: 10px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid rgba(240,240,240,0.20);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 10002;
}
.nav-link--methodology:hover::after,
.nav-link--methodology:hover::before {
  opacity: 1;
}
@media (max-width: 900px) {
  .nav-link--methodology::after {
    right: 0;
    font-size: 10px;
  }
  .nav-link--methodology::before {
    right: 8px;
  }
}

/* ══════════════════════════════════════════════════════
   PAGE WRAPPERS
   ══════════════════════════════════════════════════════ */
.page     { padding: 36px 100px 80px; padding-top: calc(36px + var(--nav-h)); }
body.tas-body .page.tas-page { padding-top: var(--nav-h); }

/* Talking about space — column layout so the trends stage can grow with the viewport */
/* `overflow-x: hidden` breaks `position: sticky` for descendants in Chromium; clip avoids horizontal scroll without that side effect. */
body.tas-body {
  overflow-x: clip;
}
/* ── Unified chart title + subtitle — applies to both rank and bubble sections ── */
.chart-title {
  font-family: var(--font-main);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 300;
  line-height: 1.05;
  color: var(--c0);
  margin: 2px 0 10px;
  letter-spacing: -0.02em;
}
.chart-subtitle {
  font-family: var(--font-main);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(240, 240, 240, 0.82);
  max-width: min(72ch, 100%);
  margin-bottom: 14px;
  min-height: 0;
}
.rank-section {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: clamp(16px, 2.5vh, 36px);
  padding-left: var(--chart-pad-left);
  box-sizing: border-box;
}
.chart-header {
  max-width: 100%;
  margin-bottom: 2px;
}

/* Editorial annotation: fixed 3-line height, no top margin */
.rank-annotation {
  margin: 0;
  max-width: min(92ch, 100%);
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.60);
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.55;
  font-style: italic;
  color: rgba(240, 240, 240, 0.72);
  height: 74px;
  min-height: 74px;
  max-height: 74px;
  overflow: hidden;
  flex-shrink: 0;
}
.rank-annotation:empty {
  display: none;
  min-height: 0;
}
.filters.filters--inline {
  margin-bottom: 10px;
}
@media (min-width: 769px) {
  .filters.filters--inline {
    margin-bottom: 14px;
  }
}
/* Vertical decade grid lines: dashed style */
.rank-svg line[class*="decade"],
.rank-svg line[stroke-dasharray] {
  stroke-dasharray: 3, 3;
}
.rank-svg line[class*="decade"] {
  stroke-width: 0.5 !important;
}
.bubble-header .filters.filters--inline {
  margin-bottom: 10px;
}
@media (min-width: 769px) {
  .bubble-header .filters.filters--inline {
    margin-bottom: 14px;
  }
}

/* Bubble filters row: align filters on row */
.bubble-filters-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
}
@media (min-width: 769px) {
  .bubble-filters-row {
    margin-bottom: 14px;
  }
}

/* Wrapper for filters and CTAs - handles positioning */
.bubble-filters-cta-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* CTA row: single row that shows either overview CTA or back-button + drilldown CTA */
.bubble-cta-row {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-top: 4px;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Overview CTA: left-aligned, hidden when drilling */
.bubble-cta--overview {
  font-family: var(--font-mono);
  font-size: 14px;
  color: rgba(232, 232, 232, 0.80);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Drilldown CTA: pushed to the far right via margin-left: auto */
.bubble-cta--drilldown {
  font-family: var(--font-mono);
  font-size: 14px;
  color: rgba(232, 232, 232, 0.80);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

/* Back button: sits on the left of the CTA row in drilldown state */
button.bubble-back.back-link {
  background: none;
  border: none;
  padding: 8px 16px 8px 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-align: left;
  min-height: 44px;
  display: none; /* shown via style.display = 'inline-flex' by JS */
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  cursor: pointer;
  color: inherit;
}

body.tas-body .bubble-section.drilldown-active .bubble-filters-cta-wrapper {
  position: relative;
}

.bubble-section {
  /* Flex column so the viz can be vertically centered in remaining viewport */
  flex: 1 1 auto;
  min-height: 0; /* inside scrolly: do not demand full viewport height */
  display: flex;
  flex-direction: column;
  margin-top: clamp(16px, 2vh, 40px); /* tighter top margin inside the sticky frame */
}

/* Standalone planets section when outside scrolly structure (after transition section) */
.tas-page > .bubble-section {
  min-height: calc(100dvh - var(--nav-h));
  margin-top: clamp(40px, 6vh, 88px);
  width: 100%;
  padding-left: var(--chart-pad-left);
  padding-right: var(--chart-pad-left);
  box-sizing: border-box;
}

/* Center the legend + cluster vertically within the section */
body.tas-body .bubble-section #legend-chart-wrap {
  flex: 1 1 auto;
  min-height: 0;
  align-items: center;
  margin-top: auto;
  margin-bottom: 60px;
}
body.tas-body .bubble-section #chart-wrap {
  display: flex;
  align-items: center;
  min-height: 0;
  margin-left: 0;}
/* In drilldown: remove right padding so the SVG can reach the right edge,
   but keep left padding so the SVG labels naturally align with the header title. */
body.tas-body .bubble-section.drilldown-active {
  padding-right: 0;
}
/* Header needs no extra padding in drilldown — it inherits the section's left padding */
body.tas-body .bubble-section.drilldown-active .bubble-header {
  padding-left: 0;
  padding-right: 0;
}
/* When drilldown-active, chart-wrap's margin-left shifts left by the legend column.
   The SVG's negative margin-left compensates so it starts at the left edge. */
body.tas-body .bubble-section.drilldown-active #chart-wrap {
  margin-left: 0;
}
/* Drilldown SVG: pull left by 200px (legend width) to start at section padding edge.
   Row labels at x=12 inside SVG align with header above. */
/* In overview mode (hidden), collapse completely to allow bubbles to move up */
/* Theme/actor title: sized up; color set inline to match rank-chart stroke (lightenHex + TREND_CHART_LIGHTEN) */

/* TTS: hero (full viewport) + viz screen (full viewport) + detail */
.tts-page {
  padding: 28px 100px 18px;
  padding-top: calc(22px + var(--nav-h));
  margin-left: 0;
  max-width: 100%;
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--nav-h));
}

body.tts-body .tts-page {
  padding-left: clamp(20px, 4vw, 72px);
  padding-right: clamp(20px, 4vw, 72px);
  /* Remove the 22px extra offset so the scrolly starts flush against the nav */
  padding-top: var(--nav-h);
  min-height: auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
/* Landing page: full-bleed column layout with no side padding (sections control their own) */
body.tts-body .tts-page.landing-page {
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Talking to space — first screen: title + intro
   Height matches viewport below fixed nav + page top offset (22px), so the viz block
   does not peek above the fold. */
.page-hero {
  flex-shrink: 0;
  width: calc(100% + 2 * clamp(20px, 4vw, 72px));
  margin-left: calc(-1 * clamp(20px, 4vw, 72px));
  margin-right: calc(-1 * clamp(20px, 4vw, 72px));
  min-width: 0;
  max-width: none;
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
}

.hero-container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 60px);
  align-items: center;
  box-sizing: border-box;
  padding: clamp(12px, 3vh, 28px) clamp(12px, 3vw, 40px);
}
.hero-inner {
  width: 100%;
  max-width: 100%;
  text-align: left;
  min-width: 0;
}
.hero-inner h1 {
  margin: 0 0 1.2em;
  font-size: clamp(40px, 7.5vw, 88px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.scrolly-pull .accent {
  font-style: normal;
  color: var(--accent-yellow);
}
.accent {
  font-style: italic;
  color: var(--accent-yellow);
}
.page-intro {
  font-family: var(--font-main);
  font-size: clamp(18px, 1.75vw, 24px);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: rgba(240, 240, 240, 0.92);
  max-width: min(32rem, 100%);
  margin: 0;
  min-height: 1.5em;
}
.hero-inner .back-link {
  display: block;
  margin-top: 18px;
}
.hero-image-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  overflow: visible;
}
.hero-image {
  width: 100%;
  height: 50vh;
  max-height: 60vh;
  object-fit: contain;
  pointer-events: none;
  opacity: 0.00001;
}

/* Desktop: visual opener is scrolly — keep hero in DOM for #page-title + decade JS (visually hidden) */
@media (min-width: 901px) {
  body.tts-body .tts-page > .page-hero {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    visibility: hidden;
  }
  body.tas-body .page.tas-page > .page-hero {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    visibility: hidden;
  }
}

/* Mobile-only line break in scrolly pull text */
.mob-br { display: none; }
@media (max-width: 900px) {
  .mob-br { display: block; }
}

/* ══════════════════════════════════════════════════════
   PAGE-HERO / SCROLLY GRAIN TEXTURE
   On mobile: the .page-hero is shown directly.
   On desktop: the .scrolly-sticky is the first full-screen
   frame (the scrolly replaces the hero). Both get the same
   fractalNoise grain as the landing hero.
   The SVG filter #page-hero-grain must be defined inline
   in each sub-page HTML file.
   ══════════════════════════════════════════════════════ */

/* Mobile hero grain */
.page-hero {
  position: relative;
  isolation: isolate;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: url(#page-hero-grain);
  opacity: 0.10;
  background: var(--bg);
}
.page-hero .hero-container {
  position: relative;
  z-index: 1;
}

/* Desktop scrolly first-screen grain — intro phase only.
   The JS sets data-phase="intro" on .scrolly-sticky-inner while the
   intro panel is active, and changes it as the user scrolls. We target
   the sticky wrapper only when it is in that phase via a child combinator
   trick: apply the ::before to .scrolly-sticky but only clip the visual
   to the intro panel using the phase. Simpler: apply ::before on
   .scrolly-sticky and let the phase-inactive panels (which fade to opacity:0)
   sit above it — the grain is always the bottom layer so it only shows
   through the current (visible) panel. Since the intro panel covers the
   full viewport and all other panels transition via opacity, the grain
   is effectively visible only while intro content is up. */
#scrolly .scrolly-sticky {
  isolation: isolate;
}
#scrolly .scrolly-sticky::before {
  content: '';
  position: absolute;
  top: -30px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
  filter: url(#page-hero-grain);
  opacity: 0.10;
  background: var(--bg);
  transition: opacity 0.4s ease;
}
/* Hide grain when the sticky inner has moved past intro phase */
#scrolly .scrolly-sticky-inner:not([data-phase="intro"]) ~ * ,
#scrolly .scrolly-sticky:has(.scrolly-sticky-inner:not([data-phase="intro"]))::before {
  opacity: 0;
}
/* All scrolly content must sit above the grain layer */
#scrolly .scrolly-sticky-inner {
  position: relative;
  z-index: 1;
}

/* Talking to space — intro scrolly (desktop): rail sets scroll height; sticky panel switches via [data-phase] */
#scrolly {
  position: relative;
  width: calc(100% + 2 * clamp(20px, 4vw, 72px));
  margin-left: calc(-1 * clamp(20px, 4vw, 72px));
  margin-right: calc(-1 * clamp(20px, 4vw, 72px));
  min-width: 0;
  overflow-x: clip;
}

#tas-charts-scrolly {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow-x: clip;
}

body.tas-body #scrolly {
  width: calc(100% + 2 * 100px);
  margin-left: -100px;
  margin-right: -100px;
}

.scrolly-stack {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.scrolly-stack > * {
  grid-area: 1 / 1;
  min-width: 0;
}

.scrolly-rail {
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 0;
}

.scrolly-track {
  flex-shrink: 0;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
}

/* Last track needs extra height to give the protagonists panel dwell time */
.scrolly-track[data-scrolly-phase="protagonists"] {
  min-height: 160vh;
}

/* "done" track: fires almost instantly — the sticky fades out, then the next
   section (rank chart or viz-screen) is already entering the viewport from below.
   The fade transition (0.22s on the panel) handles the visual handoff cleanly. */
.scrolly-track[data-scrolly-phase="done"] {
  min-height: 10px;
}

.scrolly-track--curtain {
  min-height: 50vh;
}

.scrolly-track--abundance {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.abundance-trigger {
  height: 20vh;
  width: 100%;
}

.abundance-trigger--pause {
  height: 65vh;
}

.protagonists-trigger {
  height: 20vh;
  width: 100%;
}

.protagonists-trigger--pause {
  height: 65vh;
}

.scrolly-sticky {
  position: sticky;
  top: var(--nav-h);
  z-index: 1;
  align-self: start;
  width: 100%;
  min-height: calc(100svh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  max-height: calc(100dvh - var(--nav-h));
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.scrolly-sticky-inner {
  position: relative;
  width: 100%;
  max-width: min(1120px, 100%);
  margin: 0 auto;
  padding: 0 clamp(12px, 3vw, 40px);
  box-sizing: border-box;
  flex: 1;
  min-height: 0;
  overflow: visible;
}

/* Chart panels need the full viewport width — remove the 1120px cap so the
   bump chart and bubble chart use all available horizontal space. */
#tas-charts-scrolly .scrolly-sticky-inner {
  max-width: 100%;
}

.scrolly-panel {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  max-height: 100%;
  /* overflow: visible lets SVG end-labels and bubble charts paint past their own
     bounding boxes without clipping. The inner-scroll bug was caused by
     overflow: auto on a flex container with max-height — removing auto (not
     switching to hidden) is the correct fix. */
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.scrolly-sticky-inner[data-phase="intro"] .scrolly-panel[data-panel="intro"],
.scrolly-sticky-inner[data-phase="pioneer"] .scrolly-panel[data-panel="pioneer"],
.scrolly-sticky-inner[data-phase="voyager"] .scrolly-panel[data-panel="voyager"],
.scrolly-sticky-inner[data-phase="arecibo"] .scrolly-panel[data-panel="arecibo"],
.scrolly-sticky-inner[data-phase="abundance"] .scrolly-panel[data-panel="abundance"],
.scrolly-sticky-inner[data-phase="frontier"] .scrolly-panel[data-panel="frontier"],
.scrolly-sticky-inner[data-phase="race"] .scrolly-panel[data-panel="race"],
.scrolly-sticky-inner[data-phase="risk"] .scrolly-panel[data-panel="risk"],
.scrolly-sticky-inner[data-phase="market"] .scrolly-panel[data-panel="market"],
.scrolly-sticky-inner[data-phase="protagonists"] .scrolly-panel[data-panel="protagonists"],
.scrolly-sticky-inner[data-phase="trends"] .scrolly-panel[data-panel="trends"] {
  opacity: 1;
  visibility: visible;
}

/* Chart panels must fill the sticky frame as a flex column so charts can size to available height */
.scrolly-panel[data-panel="trends"] {
  align-items: stretch;
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
  /* Breathing room so charts don't press against nav or bottom edge */
  padding-top: clamp(8px, 1.5vh, 20px);
  padding-bottom: clamp(10px, 2vh, 28px);
}

.scrolly-sticky-inner[data-phase="curtain"] .scrolly-panel[data-panel="abundance"] {
  opacity: 0.22;
  visibility: visible;
}

/* Fade out protagonists panel as it exits during curtain phase (intro scrolly section) */
.scrolly-sticky-inner[data-phase="curtain"] .scrolly-panel[data-panel="protagonists"] {
  opacity: 0.22;
  visibility: visible;
}

/* "done" phase: no panel visible */
.scrolly-sticky-inner[data-phase="done"] .scrolly-panel {
  opacity: 0;
  visibility: hidden;
}

.scrolly-panel[data-panel="intro"] {
  align-items: stretch;
  justify-content: flex-start;
  overflow: visible;
}

/* Progressive panels: anchor top so the first line stays fixed as more lines stack below */
.scrolly-panel[data-panel="frontier"],
.scrolly-panel[data-panel="race"],
.scrolly-panel[data-panel="risk"],
.scrolly-panel[data-panel="market"] {
  align-items: flex-start;
  /* Position content so the first line sits at ~45% height (visually centered),
     and subsequent lines grow downward from that anchor */
  padding-top: calc(45vh - var(--nav-h) - 2em);
}

/* Protagonists and transition panels: same vertical anchor as frontier panels
   so all interstitial text screens sit at the same height on screen. */
.scrolly-panel[data-panel="protagonists"],
.scrolly-panel[data-panel="transition"] {
  align-items: flex-start;
  padding-top: calc(45vh - var(--nav-h) - 2em);
}

.scrolly-intro-image {
  position: absolute;
  right: -17vw;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.22s ease;
}

.scrolly-intro-image img {
  height: min(110vh, 880px);
  width: auto;
  opacity: 0.07;
  mix-blend-mode: screen;
  pointer-events: none;
  object-fit: contain;
  display: block;
  transform: translateX(clamp(5%, 15%, 22%));
}

.scrolly-intro-block {
  width: 100%;
  max-width: min(50rem, 100%);
  min-height: min(100%, calc(100svh - var(--nav-h) - 48px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 4.5vh, 40px);
  box-sizing: border-box;
  padding: clamp(12px, 3vh, 36px) 0;
  margin-right: auto;
  margin-left: 0;
}

.scrolly-display-title {
  margin: 0;
  font-family: var(--font-main);
  font-size: clamp(34px, 5.8vw, 72px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--c0);
}

.scrolly-lede {
  margin: 0;
  width: 100%;
  max-width: 35rem;
  font-family: var(--font-main);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: rgba(240, 240, 240, 0.92);
}

.scrolly-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(16px, 3.5vw, 36px);
  align-items: center;
  width: 100%;
  max-width: 100%;
}

.scrolly-col--img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.scrolly-photo {
  max-width: min(320px, 100%);
  max-height: min(55vh, 420px);
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  filter: saturate(0.4) brightness(0.92);
}

.scrolly-object-label {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent-yellow);
  text-transform: uppercase;
  text-align: left;
  opacity: 0.8;
}

.scrolly-body {
  margin: 0;
  font-family: var(--font-main);
  font-size: 19px;
  line-height: 1.55;
  color: rgba(235, 238, 242, 0.82);
  max-width: 45ch;
}

.scrolly-line--intro {
  color: rgba(235, 238, 242, 0.88);
  font-size: clamp(22px, 2.6vw, 30px) !important;
  margin-bottom: 0.6em;
  opacity: 0;
  transform: none !important;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  white-space: nowrap; /* keep each intro line on one line */
}

.scrolly-line--intro.visible {
  opacity: 1;
}

.scrolly-line--spacer {
  height: 1.2em;
  opacity: 0 !important;
  pointer-events: none;
}

.scrolly-pull {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-main);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(238, 240, 245, 0.88);
  padding: 0 clamp(12px, 3vw, 40px);
  box-sizing: border-box;
  width: 100%;
}

/* Large pull text for talking about space scrolly panels (zone 1 and zone 2 interstitials) */
.tas-body #scrolly .scrolly-pull {
  font-size: clamp(24px, 2.8vw, 42px);
  font-weight: 300;
  line-height: 1.3;
}

.scrolly-progressive {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  max-width: 100%;
  /* Anchor to top so stacking lines grow downward, never pushing first line up */
  justify-content: flex-start;
  align-self: flex-start;
}

/* Hazard headline images for frontier/race/risk/market sections */
.scrolly-headlines-image {
  position: fixed;
  right: clamp(20px, 2vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  max-width: clamp(280px, 50vw, 650px);
  max-height: 65vh;
  object-fit: contain;
  opacity: 0.44;
  pointer-events: none;
  z-index: 100;
}

.scrolly-progressive .scrolly-pull {
  margin: 0;
}

.scrolly-progressive .scrolly-pull:first-child {
  margin-bottom: 0;
}

/* Protagonists panel lines (talking about space) - same fade-in effect as abundance lines */
.scrolly-line--protagonists {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.4;
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.scrolly-line--protagonists.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Make protagonists lines match the large pull text size in talking about space */
.tas-body #scrolly .scrolly-line--protagonists {
  font-size: clamp(21px, 2.5vw, 38px);
  font-weight: 300;
  line-height: 1.3;
}

.scrolly-lines {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  /* No max-width: line--intro items use white-space:nowrap to stay on one line */
  text-align: left;
}

.scrolly-sticky-inner[data-phase="intro"] .scrolly-lines {
  max-width: none;
}

.scrolly-line {
  font-size: clamp(19px, 1.4rem, 22px);
  line-height: 1.4;
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.scrolly-line.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Second screen: CTA is its own flex row; filters+chart are the next row.
   `gap` + no sticky CTA guarantees the legend never stacks under/over the line. */
.viz-screen {
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  padding: clamp(36px, 7vh, 80px) 0 0;
  margin: 0;
  gap: clamp(28px, 4.5vh, 52px);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.decade-heading {
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 4px;
  padding: 0;
  font-family: var(--font-main);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--c0);
}
.viz-hint {
  flex-shrink: 0;
  position: relative;
  z-index: 0;
  margin: 0;
  padding: 8px 0 4px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--font-main);
  font-size: clamp(16px, 2.3vw, 26px);
  font-weight: 400;
  line-height: 1.35;
  color: rgba(240, 240, 240, 0.88);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: manual;
}
.viz-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  gap: clamp(32px, 5.5vw, 80px);
  padding-top: 0;
}
.viz-chart-col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
}
.decade-toolbar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 0 0 10px;
  min-height: 0;
}
.decade-toolbar-title {
  margin: 0;
  padding: 0;
  font-family: var(--font-main);
  font-size: clamp(20px, 2.15vw, 28px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--c0);
}
.decade-toolbar .back-link {
  margin-top: 0;
}
.decade-toolbar[hidden] {
  display: none !important;
  padding: 0;
}
/* Decade drill-down: hide sidebar; widen chart column only after overview SVG is replaced (see JS) */
.viz-main.viz-main--decade-full .viz-sidebar {
  display: none !important;
}
.viz-main.viz-main--decade-full .viz-chart-col {
  flex: 1 1 auto;
  min-width: 0;
}
.viz-main.viz-main--decade-full .viz-stage {
  flex: 0 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
}
.viz-main.viz-main--decade-full #chart-inner {
  flex: 0 1 auto;
}
.viz-sidebar {
  flex: 0 0 auto;
  width: min(288px, 30vw);
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 0;
  box-sizing: border-box;
}
/* Reserves one line of space so “← all decades” never pushes the filter list down */
.sidebar-back-slot {
  flex-shrink: 0;
  min-height: 2.75rem;
  box-sizing: border-box;
}
.sidebar-back-slot .back-link {
  display: block;
  margin: 0;
}

/* Stage: chart only — width reserved by sidebar so diagram never sits under filters */
.viz-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  width: auto;
  margin-top: 0;
  display: flex;
  flex-direction: column;
}
#legend-panel {
  position: relative;
  left: auto;
  top: auto;
  z-index: 1;
  margin: 0;
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#chart-inner {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-left: 0;
  min-height: 0;
  flex: 1;
  position: relative;
  overflow: visible;
  align-self: stretch;
}
#star-svg {
  display: block;
  width: 100%;
}

#chart-wrap {
  position: relative;  /* For absolute positioning of cards within */
  width: 100%;
  opacity: 1;
  transition: opacity 150ms ease;
  flex: 1;
}

/* Bump chart: smooth dimming between selection / hover states */
#rank-svg .rank-series,
#rank-svg .rank-series-line,
#rank-svg .rank-end-label {
  transition: opacity 150ms ease;
}
/* Isolated bump lines: no hit-testing (set in JS + class) */
#rank-svg .rank-series.rank-series--ghost,
#rank-svg .rank-end-label.rank-label--ghost {
  pointer-events: none !important;
  cursor: default !important;
}

/* Bubble cluster groups: soft-focus dimming */
#bubble-svg .bubble-circle {
  transition: opacity 150ms ease;
}

/* ══════════════════════════════════════════════════════
   TYPOGRAPHY — shared across pages
   ══════════════════════════════════════════════════════ */
h1 {
  font-family: var(--font-main); font-size: clamp(36px, 4.6vw, 46px); font-weight: 300;
  line-height: 1; color: var(--c0); margin-bottom: 16px;
}

/* ══════════════════════════════════════════════════════
   TAS — sticky chrome band (title + controls)
   ══════════════════════════════════════════════════════ */
/* Flex default `min-width: 0` on `.filter-source-group` was letting “NEWS · POLITICS” shrink narrower than its text. */
#rank-filters .filter-source-group,
#bubble-filters .filter-source-group {
  min-width: max-content;
}
/* margin-bottom:0 beats `.page .filters` (same order wins tie) so the fixed header panel is not stretched */
#rank-filters.filters {
  width: max-content;
  max-width: 100%;
  margin-bottom: 8px;
}
#bubble-filters.filters {
  width: max-content;
  max-width: 100%;
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════
   FILTERS
   ══════════════════════════════════════════════════════ */
[hidden] { display: none !important; }

.filters {
  display: flex; align-items: center;
  gap: 10px;                /* tighter gap now that we only have 2 source chips */
  margin-bottom: 14px; flex-wrap: nowrap;
}

/* ── View pills group (by theme / by actor) ── */
/* Fixed slot width (--tas-view-slot) keeps “in NEWS · …” from shifting when one pill hides. */
.filter-view-group {
  display: flex;
  align-items: stretch;
  gap: 0;
  box-sizing: border-box;
  flex: 0 0 var(--tas-view-slot, max-content);
  width: var(--tas-view-slot, max-content);
  min-width: 0;
  max-width: 100%;
  transition:
    flex-basis 0.36s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Source-only filter rows: fixed slot for NEWS · POLITICS */
#rank-filters .filter-source-group {
  flex: 0 0 var(--rank-filter-slot, max-content);
  width: var(--rank-filter-slot, max-content);
}
#bubble-filters .filter-source-group {
  flex: 0 0 var(--bubble-filter-slot, max-content);
  width: var(--bubble-filter-slot, max-content);
}
#rank-filters .filter-view-group.filter-source-group,
#bubble-filters .filter-view-group.filter-source-group {
  display: flex;
  align-items: stretch;
  justify-items: stretch;
}

.filter-view {
  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
  letter-spacing: 0.06em; color: rgba(240,240,240,0.80);
  cursor: pointer;
  padding: 10px 24px;
  border: 1px solid rgba(240,240,240,0.42);
  background: transparent;
  line-height: 1.2;
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  /* Smooth deceleration, no overshoot (avoids “bouncy” flex) */
  --fv-ease: cubic-bezier(0.4, 0, 0.2, 1);
  transition:
    flex-grow 0.36s var(--fv-ease),
    flex-shrink 0.36s var(--fv-ease),
    flex-basis 0.36s var(--fv-ease),
    border-radius 0.3s var(--fv-ease),
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    padding 0.36s var(--fv-ease),
    margin 0.3s var(--fv-ease);
}

/* Segmented control: both halves always occupy space; label alignment within each cell */
#rank-filters .filter-view[data-trends-view="theme"],
#bubble-filters .filter-view[data-trends-view="theme"] {
  justify-content: flex-start;
  border-radius: 20px 0 0 20px;
  border-right: none;
}
#rank-filters .filter-view[data-trends-view="actor"],
#bubble-filters .filter-view[data-trends-view="actor"] {
  justify-content: flex-end;
  border-radius: 0 20px 20px 0;
  border-left: none;
  margin-left: -1px;
}

/* Two-segment source toggle */
#rank-filters .filter-view.filter-view--src,
#bubble-filters .filter-view.filter-view--src {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
  font-family: var(--font-mono);
  justify-content: center;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 8px 14px;
  min-width: 0;
  width: auto;
  box-sizing: border-box;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.58);
  color: rgba(240, 240, 240, 0.92);
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
  flex: 0 0 auto;
}
#rank-filters .filter-view.filter-view--src.active,
#bubble-filters .filter-view.filter-view--src.active {
  background: #d1d1d1;
  border-color: #d1d1d1;
  color: #0a0a0a;
  font-weight: 600;
}
#rank-filters .filter-view.filter-view--src:hover:not(.active),
#bubble-filters .filter-view.filter-view--src:hover:not(.active) {
  color: #f2f2f2;
  border-color: rgba(255, 255, 255, 0.72);
}

/* Source attribution label to the right of filter buttons */
.filter-source-note, .filter-source-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--c35);
  text-transform: none;
  margin-top: 0;
  user-select: none;
  line-height: 1.45;
  white-space: nowrap;
}
/* Source count — sits on its own line below the source name */
.filter-source-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-self: center;
}

.source-sep { display: none; }
#rank-filters .filter-view--src:nth-child(1),
#bubble-filters .filter-view--src:nth-child(1) {
  border-radius: 13px 0 0 13px;
  border-right: none;
}
#rank-filters .filter-view--src:nth-child(2),
#bubble-filters .filter-view--src:nth-child(2) {
  border-radius: 0 13px 13px 0;
  border-left: none;
  margin-left: -1px;
}
/* Full-height 1px separator between the two segments */
#rank-filters .filter-view--src:nth-child(2)::before,
#bubble-filters .filter-view--src:nth-child(2)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.72);
  pointer-events: none;
  z-index: 2;
}
#rank-filters .filter-view--src:nth-child(2).active::before,
#bubble-filters .filter-view--src:nth-child(2).active::before {
  background: rgba(0, 0, 0, 0.28);
}

/* Inactive half: visible but clearly unavailable (WCAG: not relying on color alone — reduced contrast + no pointer + cursor + aria-disabled) */

.filter-view.active             { color: #1a1a1a; background: #d4d4d4; border-color: #d4d4d4; font-weight: 600; }
.filter-view:hover:not(.active) { color: var(--c0); border-color: rgba(240,240,240,0.45); }

@media (prefers-reduced-motion: reduce) {
  .filter-view,
  .filter-view-group,
  .filter-view-txt {
    transition: none !important;
  }
}

/* Talking about space — desktop: filters row rhythm */
@media (min-width: 769px) {
  .page .filters {
    gap: 24px;
    margin-bottom: 28px;
  }
}

/* ── Source tabs group (NEWS / POLITICS) ── */
.filter-source-group {
  display: flex;
  align-items: center;
}

/* legend */
#legend-circle-label {
  font-family: var(--font-mono); font-size: 13px; color: var(--c65);
  display: inline-flex; align-items: center; gap: 6px;
}

#legend-line-label {
  font-family: var(--font-mono); font-size: 13px; color: var(--c65);
  display: inline-flex; align-items: center; gap: 6px;
}

/* ══════════════════════════════════════════════════════
   BACK LINK
   ══════════════════════════════════════════════════════ */
.back-link {
  display: none;
  font-family: var(--font-mono); font-size: 18px; font-weight: 400;
  letter-spacing: 0.06em; color: var(--c80);
  cursor: pointer; transition: color .15s;
  margin-top: 10px; text-decoration: none; width: fit-content;
}
.back-link:hover   { color: rgba(240,240,240,0.80); }
.back-link.visible { display: inline-block; }

/* ══════════════════════════════════════════════════════
   CHART WRAP + LEGEND
   ══════════════════════════════════════════════════════ */
#chart-wrap { position: relative; flex: 1; min-width: 0; }

#legend-chart-wrap { display: flex; align-items: stretch; gap: 0; }
#cluster-legend    { flex-shrink: 0; width: 165px; margin-bottom: 48px; }
#cluster-legend svg { overflow: visible; }

/* Talking about space — trends intro (subtitle above first chart, in document flow) */

/* Talking about space — full-bleed trends stage + planets section */

.rank-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* Maximize chart height to fill viewport */
  min-height: min(85vh, calc(100dvh - 80px));
  max-height: min(92vh, calc(100dvh - 50px));
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 2px 0 2px 0;
  margin-bottom: clamp(2px, 0.4vh, 8px);
  background: transparent;
}

/* Inside the scrolly sticky frame: flex-fill remaining height instead of demanding viewport fractions */
.scrolly-panel[data-panel="trends"] .rank-stage {
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  margin-bottom: 0;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  padding: 2px 0 6px 0;
}

.rank-block {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.rank-svg {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: visible;
  height: 100%;
}

#rank-svg .rank-tick {
  shape-rendering: crispEdges;
}
#rank-svg .rank-series-line {
  shape-rendering: geometricPrecision;
}

.bubble-header {
  margin-top: 20px;
  margin-bottom: 0;
  padding-top: 0;
  flex-shrink: 0;
}
.bubble-header-grid {
  display: block;
}
.bubble-header-main {
  min-width: 0;
}
.page-subtitle--planets {
  min-height: 2.75em;
}

.page .bubble-header + #chart-wrap {
  margin-top: 12px;
}
@media (min-width: 769px) {
  .page .bubble-header + #chart-wrap {
    margin-top: 18px;
  }
}

/* ══════════════════════════════════════════════════════
   TOOLTIP
   ══════════════════════════════════════════════════════ */
#tooltip {
  position: fixed; background: #1a1a1a; border: 0.5px solid var(--c20);
  padding: 9px 12px; font-family: var(--font-main); font-size: 12px; line-height: 1.55;
  pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 500;
  max-width: 240px;
}
#tooltip.visible      { opacity: 1; }
#tooltip .tt-title    { font-size: 12px; font-weight: 500; display: block; margin-bottom: 2px; }
#tooltip .tt-body     { color: var(--c65); }

/* ══════════════════════════════════════════════════════
   TALKING TO SPACE — legend + layout
   ══════════════════════════════════════════════════════ */

.leg-title {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: rgba(210,185,145,0.8);
  text-transform: uppercase;
  margin-bottom: 4px;
  user-select: none;
  white-space: nowrap;
}

.leg-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--c35);
  text-transform: none;
  margin-top: 12px;
  user-select: none;
  line-height: 1.45;
  font-style: italic;
}

.leg-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  transition: opacity 0.12s;
  white-space: nowrap;
}

.leg-arc {
  flex-shrink: 0;
  display: block;
  width: 18px;
  height: 12px;
}

.leg-label {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--c65);
  text-transform: none;
  line-height: 1.15;
  transition: color 0.12s;
  user-select: none;
  white-space: nowrap;
  cursor: pointer;
}

.leg-row.leg-hover .leg-label {
  color: var(--c80);
}

.leg-row.leg-active .leg-label {
  color: rgba(232,232,232,0.96);
}
.leg-row.leg-active .leg-arc path {
  stroke: rgba(220,192,140,0.85) !important;
}

.leg-row.leg-dimmed .leg-label {
  color: rgba(232,232,232,0.18);
}
.leg-row.leg-dimmed .leg-arc path {
  stroke: rgba(200,215,228,0.10) !important;
}

/* Arc icon: match label color and thinner */
.leg-arc path {
  stroke: rgba(210,185,145,0.8) !important;
  stroke-width: 0.65 !important;
}
.leg-row.leg-hover .leg-arc path {
  stroke: var(--c80) !important;
}

/* ══════════════════════════════════════════════════════
   TALKING TO SPACE — radial viz
   ══════════════════════════════════════════════════════ */
@keyframes fadeInChart {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ══════════════════════════════════════════════════════
   LANDING PAGE
   ══════════════════════════════════════════════════════ */
.landing-hero {
  position: relative;
  height: 100vh;
  box-sizing: border-box; /* keep total height exactly 100vh including padding */
  display: flex;
  align-items: center;
  padding: var(--nav-h) clamp(40px, 8vw, 120px) 0;
  overflow: hidden;
  z-index: 3;
}
.landing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: url(#landing-grain);
  opacity: 0.10;
  background: var(--bg);
}
.landing-hero-component {
  position: relative;
  z-index: 10;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Shift entire component down slightly so it feels more centered in the below-nav space */
  padding-top: clamp(24px, 4vh, 56px);
}
.landing-hero-content {
  position: relative;
  z-index: 10;
  text-align: left;
  max-width: 650px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 0 0 auto;
}
.landing-hero h1 {
  font-size: clamp(80px, 12vw, 160px);
  font-weight: 400;
  letter-spacing: -2px;
  line-height: 1;
  margin: 0 0 0.15em 0;
  padding-left: clamp(40px, 6vw, 120px);
}
.landing-subtitle {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.2;
  color: rgba(235, 238, 242, 0.95);
  font-weight: 300;
  padding-left: clamp(40px, 6vw, 120px);
  margin: 0 0 0.2em 0;
}
.landing-hero-diagram {
  position: absolute;
  /* Shifted ~8% below center so diagram feels grounded rather than floating at exact midpoint */
  top: calc(50% + clamp(20px, 4vh, 56px));
  right: 0;
  transform: translateY(-50%);
  width: clamp(380px, 36vw, 620px);
  height: clamp(380px, 36vw, 620px);
  background: url('images/diagram.svg') no-repeat center;
  background-size: contain;
  opacity: 0.8;
  pointer-events: none;
}
.landing-hero-circle {
  position: absolute;
  top: calc(50% + clamp(20px, 4vh, 56px));
  right: 0;
  transform: translateY(-50%);
  width: clamp(380px, 36vw, 620px);
  height: clamp(380px, 36vw, 620px);
  background: url('images/circle.svg') no-repeat center;
  background-size: contain;
  opacity: 0.4;
  pointer-events: none;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════
   PAGE FOOTER — cross-page navigation button
   ══════════════════════════════════════════════════════ */
.page-footer-nav {
  display: flex;
  justify-content: flex-end;
  padding: clamp(32px, 6vh, 64px) 0 clamp(36px, 5vh, 56px);
  box-sizing: border-box;
}
body.tas-body .page-footer-nav {
  padding-left: 0;
  padding-right: 0;
}
.page-footer-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--c65);
  font-family: var(--font-main);
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.15;
  border: 0.5px solid rgba(238,240,245,0.42);
  padding: 10px 18px 10px 20px;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  background-color: rgb(31, 31, 31);
}
.page-footer-nav-link:hover {
  color: var(--c0);
  border-color: rgba(238,240,245,0.72);
  background: rgba(238,240,245,0.04);
}
.page-footer-nav-link .accent {
  font-style: italic;
  color: var(--accent-yellow);
}
.page-footer-nav-arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: currentColor;
  transition: transform 0.18s ease;
}
.page-footer-nav-link:hover .page-footer-nav-arrow {
  transform: translateX(4px);
}

.landing-intro {
  position: relative;
  z-index: 4;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 10vh, 100px) clamp(40px, 8vw, 120px);
  /* Match hero title indent: hero outer pad + title extra pad-left */
  padding-left: calc(clamp(40px, 8vw, 120px) + clamp(40px, 6vw, 120px));
}
.landing-intro-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 32px);
  width: 100%;
}
/* Abundance list items (Universal Declaration, Wikipedia, etc.) — 60% opacity */
.scrolly-panel[data-panel="abundance"] .scrolly-line:not(.scrolly-line--intro):not(.scrolly-line--spacer) {
  color: rgba(235, 238, 242, 0.60);
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Star bullet — 4-point sparkle matching the radial diagram stars */
.abundance-star {
  display: inline-block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  background: rgba(235, 238, 242, 0.50);
  clip-path: polygon(50% 0%, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0% 50%, 39% 35%);
}
/* Paired lines sit tighter together */
.landing-intro-pair {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.3vh, 4px);
}
/* Last two lines (tail) also sit tight */
.landing-intro-tail {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.5vh, 6px);
  opacity: 0.80;
  color: rgba(238, 240, 245, 0.80);
  max-width: 108ch;
  margin-top: 30px;
}
.landing-intro-line {
  margin: 0;
  font-family: var(--font-main);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 300;
  line-height: 1.3;
  color: rgba(238, 240, 245, 0.95);
  letter-spacing: -0.01em;
}

.landing-intro-line--echo {
  font-style: normal;
}
/* Remove bold key phrases — plain weight throughout */
.landing-intro-line--echo strong {
  font-weight: 300;
  color: inherit;
}

/* Pair lines: reduced opacity */
.landing-intro-line--pair {
  opacity: 0.80;
}

/* Lead line: matches entry card title size */
.landing-intro-line--lead {
  font-size: clamp(24px, 2.8vw, 38px);
}

/* ── Entry point links ── */

/* ── Entry point cards (replaces placeholder links) ── */
.landing-entry-cards {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  gap: clamp(24px, 4vw, 60px);
  margin-top: clamp(36px, 5vh, 56px);
  width: 100%;
}
.landing-entry-card {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  background: rgb(31, 31, 31);
  padding: clamp(28px, 4vh, 44px) clamp(20px, 3vw, 40px);
  border: 0.5px solid rgba(200,210,220,0.24);
  transition: border-color 0.22s ease, transform 0.22s ease, background 0.22s ease;
  will-change: transform;
}
.landing-entry-card:hover {
  border-color: rgba(238, 240, 245, 0.72);
  background: rgba(238, 240, 245, 0.03);
  transform: scale(1.025) translateY(-2px);
}
/* ENTER badge moved to inline HTML element for correct alignment */
.landing-entry-card-enter {
  position: absolute;
  top: 16px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(232, 232, 232, 0.88);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
  line-height: 1;
}
.landing-entry-card:hover .landing-entry-card-enter {
  opacity: 1;
}
/* Arrow SVG inside ENTER badge — matches bubble "← all themes" style */
.landing-entry-card-enter svg {
  display: block;
  flex-shrink: 0;
}
.landing-entry-card-icon {
  width: clamp(72px, 8vw, 110px);
  height: clamp(72px, 8vw, 110px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.60;
  transition: opacity 0.22s ease;
}
.landing-entry-card:hover .landing-entry-card-icon {
  opacity: 0.90;
}
.landing-entry-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: saturate(0) brightness(2);
}
.landing-entry-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.landing-entry-card-title {
  font-family: var(--font-main);
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: rgba(238, 240, 245, 0.95);
}
.landing-entry-card-desc {
  font-family: var(--font-main);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 300;
  line-height: 1.45;
  color: rgba(232, 232, 232, 0.78);
}

@media (max-width: 700px) {
  .landing-entry-cards {
    flex-direction: column;
    gap: 16px;
  }
  .landing-entry-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
  }
  .landing-entry-card-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
  }
  .landing-entry-card-body {
    align-items: center;
    text-align: center;
  }
  .landing-entry-card-desc {
    max-width: 100%;
  }
}

/* ══════════════════════════════════════════════════════
   SAMPLE LIST ITEMS
   ══════════════════════════════════════════════════════ */
.dp-hl-item {
  display: grid; grid-template-columns: 44px 1fr;
  gap: 12px; padding: 11px 0;
  border-top: 0.5px solid var(--c10); align-items: baseline;
}
.dp-hl-item:last-child { border-bottom: 0.5px solid var(--c10); }
.dp-hl-year {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: rgba(240,240,240,0.45); flex-shrink: 0; line-height: 1;
}
.dp-hl-text {
  font-family: var(--font-mono); font-size: 12px; font-weight: 400;
  color: var(--c80); line-height: 1.55; word-wrap: break-word;
}
.dp-hl-text.uppercase { text-transform: uppercase; }
.dp-hl-text a { cursor: pointer; }
.dp-hl-title {
  font-family: var(--font-mono); font-size: 10px; color: var(--c65);
  margin-top: 2px; margin-bottom: 4px; font-style: italic; line-height: 1.4;
}
.dp-hl-title a { 
  cursor: pointer; 
  text-decoration: underline; 
  text-underline-offset: 2px;
  color: var(--c65);
}

/* ══════════════════════════════════════════════════════
   SAMPLES MODAL
   ══════════════════════════════════════════════════════ */
#samples-modal { display: none; position: fixed; inset: 0; z-index: 600; }
#samples-modal.open { display: block; }

.sm-backdrop { position: absolute; inset: 0; background: rgba(10,10,10,0.70); }

.sm-dialog {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: #1e1e1e; border: none;
  width: min(700px, 96vw); max-height: 80vh;
  overflow-y: auto; display: flex; flex-direction: column;
  box-shadow: 0 8px 48px rgba(0,0,0,0.60);
}
.sm-topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: #e8e4dc; padding: 14px 24px; flex-shrink: 0;
}
.sm-theme-tag {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; color: rgba(20,20,20,0.88); text-transform: uppercase;
}
.sm-close {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 18px;
  color: rgba(20,20,20,0.85);
  padding: 0; transition: color 0.15s;
  flex-shrink: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
}
.sm-close:hover { color: #111; }

.sm-src-line {
  font-family: var(--font-main); font-size: 26px; font-weight: 300;
  color: var(--c0); line-height: 1.2; padding: 20px 24px 6px;
  flex-shrink: 0; background: #1e1e1e;
}
.sm-hint {
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(240,240,240,0.55); padding: 0 24px 16px;
  background: #1e1e1e; letter-spacing: 0.05em;
}
.sm-items { padding: 0 24px 28px; background: #1e1e1e; }
.sm-empty {
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(240,240,240,0.40); padding: 20px 0;
}

/* ══════════════════════════════════════════════════════
   DETAIL PANEL (talking to space sidebar)
   ══════════════════════════════════════════════════════ */
#detail-panel {
  display: block; position: fixed;
  top: 0; right: 0; width: 360px; height: 100vh; max-height: 100vh;
  background: transparent; border-left: none;
  overflow-y: auto; z-index: 250;
  /* When empty/transparent, don't block SVG interactions behind it */
  pointer-events: none;
}
#detail-panel.visible {
  background: #f4f2ee;
  border-left: 1px solid rgba(0,0,0,0.12);
  box-shadow: -6px 0 32px rgba(0,0,0,0.22);
  pointer-events: auto;
}

.dp-close-row {
  background: #dedad2; 
  border-bottom: 0.5px solid rgba(0,0,0,0.10);
  padding: 14px 20px; 
  position: sticky; 
  top: 0; 
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: auto;
}
.dp-close {
  font-family: var(--font-mono); 
  font-size: 11px; 
  letter-spacing: 0.12em;
  color: rgba(20,18,14,0.72); 
  text-decoration: none; 
  cursor: pointer; 
  transition: color 0.15s;
  white-space: nowrap;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
}

.dp-year {
  font-family: var(--font-mono); 
  font-size: 11px; 
  letter-spacing: 0.1em;
  color: #7a5c1a; 
  line-height: 1.4;
  flex: 0 1 auto;
  margin: 0;
}
.dp-title {
  font-family: var(--font-main); font-size: 22px; font-weight: 300;
  line-height: 1.25; color: rgba(15,12,6,0.92);
}
.dp-section-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
  color: rgba(20,18,14,0.52); margin-bottom: 8px; text-transform: uppercase;
}
.dp-source {
  padding: 16px 22px 28px; font-family: var(--font-main); font-size: 11px;
  line-height: 1.6; color: rgba(20,18,14,0.48); font-style: italic;
  border-top: 0.5px solid rgba(200,210,220,0.08);
}

/* ══════════════════════════════════════════════════════
   TALKING TO SPACE — legend + layout
   ══════════════════════════════════════════════════════ */
/* ── highlight in samples modal ── */
/* highlight in docs */
.highlight { background: rgba(184,150,46,0.28); color: var(--c0); font-weight: 600; padding: 0 1px; }

/* “Marker” highlight (samples modal, POLITICS excerpts) */
.dp-hl-text .marker-hl {
  color: #111; /* flip to dark text for contrast */
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 18%,
      rgba(246, 232, 165, 0.82) 18%,
      rgba(246, 232, 165, 0.82) 88%,
      rgba(0, 0, 0, 0) 88%
    );
  padding: 2px 4px;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-shadow: none;
}

/* ── Objects carousel section ── */
.objects-section { border-top: 0.5px solid rgba(240,240,240,0.15); padding-top: 40px; }
.objects-header  { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
.objects-title   { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--c35); }
.objects-count   { font-family: var(--font-mono); font-size: 12px; color: var(--c50); }

/* ── Object cards — light panel, same palette as detail-panel ── */
.object-card {
  flex: 0 0 256px; background: #f4f2ee;
  border: none; border-left: 2px solid rgba(0,0,0,0.08);
  cursor: default; display: flex; flex-direction: column; overflow: hidden;
  transition: border-left-color 0.2s;
}
.object-card:hover { border-left-color: rgba(0,0,0,0.22); }

.object-card--has-image .object-card-top {
  padding: 16px 18px 12px;
  border-bottom: 0.5px solid rgba(0,0,0,0.08);
}
.object-card--has-image .object-card-img { flex-shrink: 0; }
.object-card--has-image .object-card-img img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
}
.object-card--has-image .object-card-bottom {
  padding: 12px 18px 0; flex: 1; display: flex; flex-direction: column;
}
.object-card--no-image .object-card-text-body {
  padding: 16px 18px; flex: 1; display: flex; flex-direction: column;
}

/* Re-skin dp- classes inside cards to light palette */
.object-card .dp-year {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: #7a5c1a; margin-bottom: 4px; line-height: 1.4; display: block;
}
.object-card .dp-title {
  font-family: var(--font-main); font-size: 16px; font-weight: 300;
  line-height: 1.25; color: rgba(15,12,6,0.92); margin-bottom: 0;
}
.object-card .dp-organizer {
  font-family: var(--font-main); font-size: 12px; line-height: 1.55;
  color: rgba(15,12,6,0.62); margin-top: 6px;
}

/* Description — collapsible with scrollable overflow when expanded */
.object-desc-toggle {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  color: rgba(20,18,14,0.42); text-transform: uppercase; transition: color 0.15s;
  text-align: left; display: block; margin-top: 12px; margin-bottom: 0;
  flex-shrink: 0;
}
.object-desc-toggle:hover { color: rgba(20,18,14,0.72); }
.object-desc-text {
  font-family: var(--font-main); font-size: 12px; color: rgba(15,12,6,0.68);
  line-height: 1.65; margin-top: 8px; display: none;
  max-height: 140px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.12) transparent;
  padding-bottom: 16px;
}
.object-desc-text::-webkit-scrollbar { width: 3px; }
.object-desc-text::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
.object-desc-text.expanded { display: block; }

/* Carousel nav buttons */

/* Footer: CTA + source note — right-aligned, no separator */
.objects-footer {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 10px; margin-top: 28px;
}
.objects-source-note {
  font-family: var(--font-main); font-size: 12px; font-style: italic;
  color: var(--c35); line-height: 1.6; max-width: 80ch; text-align: right;
}

/* Object detail modal — kept for future use but cards no longer trigger it */
.image-modal { display: none; }
.modal-content { display: none; }

/* ══════════════════════════════════════════════════════
   OBJECT CARD SYSTEM (oc-*)
   ══════════════════════════════════════════════════════ */

/* Backdrop — transparent, pointer-events:none so SVG labels stay interactive */
.inline-card-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 599;
  pointer-events: none;
}

/* Base card */
.inline-card {
  position: absolute; /* page-relative — doesn't follow scroll */
  z-index: 600;
  background: #1e1e1e;
  border: 0.5px solid rgba(200,210,220,0.16);
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  overflow-y: auto;
  animation: slideInCard 0.22s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes slideInCard {
  from { opacity: 0; transform: scale(0.95) translateY(6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* ── PREVIEW: minimal annotation pinned to star ── */
.inline-card-preview {
  width: 260px;
  max-height: 440px;
  overflow-y: auto;
}

/* Preview top bar: just a floating ✕ in corner, no background */
.oc-preview-top {
  display: flex;
  align-items: top;
  justify-content: space-between;
  padding: 10px 14px 5px;
  position: sticky;
  top: 0;
  background: linear-gradient(to bottom, #1e1e1e 60%, transparent);
  z-index: 2;
  gap: 12px;
  min-height: 28px;
}

/* ── EXPANDED: dark right-side panel — matches diagram aesthetic ── */
.inline-card-expanded {
  width: min(360px, 85vw);
  max-height: 82vh;
  background: #1e1e1e;
  border: 0.5px solid rgba(200,210,220,0.16);
  position: absolute !important;
  z-index: 600;
}

/* ── HEADER (expanded only — one row: catname + close) ── */
.oc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #e8e4dc;
  padding: 10px 14px;
  border-bottom: 0.5px solid rgba(20,20,20,0.10);
  flex-shrink: 0;
  gap: 10px;
}

.oc-catname {
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.16em;
  color: rgba(20,20,20,0.80);
  text-transform: uppercase;
  flex: 1;
  line-height: 1.2;
}

/* Close button — dark variant (preview) */
.oc-close {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 16px;
  color: rgba(200,210,220,0.80);
  padding: 0;
  flex-shrink: 0;
  transition: color 0.12s;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.oc-close:hover { color: rgba(200,210,220,0.80); }

/* Close button — light variant (inside expanded panel) */
.inline-card-expanded .oc-close {
  color: rgba(20,20,20,0.80);
}
.inline-card-expanded .oc-close:hover { color: rgba(20,20,20,0.88); }

/* ── BODY ── */
.oc-body {
  padding: 12px 14px 10px;
  background: transparent;
}

/* Expanded body: light background, dark text */
.inline-card-expanded .oc-body {
  padding: 16px 18px;
  background: transparent;
}

.oc-year {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  color: rgba(200,210,220,0.50);
  text-transform: uppercase;
  line-height: 1;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
}
.inline-card-expanded .oc-year { color: #c4a44a; }

.oc-title {
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  color: rgba(240,245,250,0.94);
  margin: 18px 0;
}
.inline-card-expanded .oc-title {
  font-size: 18px;
  color: rgba(240,245,250,0.96);
  margin-bottom: 10px;
}

.oc-section { margin-bottom: 12px; }
.oc-section:last-child { margin-bottom: 0; }

.oc-section-label {
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.16em;
  color: rgba(200,210,220,0.35);
  text-transform: uppercase;
  margin-bottom: 4px;
  line-height: 1.2;
}
.inline-card-expanded .oc-section-label { color: rgba(200,210,220,0.40); }

.oc-organizer {
  font-family: var(--font-main);
  font-size: 11px;
  line-height: 1.55;
  color: rgba(200,210,220,0.68);
}
.inline-card-expanded .oc-organizer { color: rgba(210,220,230,0.78); font-size: 13px; }

.oc-desc-text {
  font-family: var(--font-main);
  font-size: 11px;
  line-height: 1.55;
  color: rgba(200,210,220,0.65);
  margin: 0;
}
.inline-card-expanded .oc-desc-text {
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(210,220,230,0.75);
}

/* ── IMAGE in PREVIEW (small, always visible, no background rect) ── */
.oc-image-section {
  padding: 0 14px 10px;
  background: transparent;
}
.oc-img {
  width: 100%;
  height: auto;
  max-height: 130px;
  object-fit: cover;
  display: block;
  border-radius: 1px;
  opacity: 0.90;
}

/* ── IMAGE in EXPANDED ── */
.oc-image-section-expanded {
  padding: 0 18px 12px;
  background: transparent;
}
.oc-img-expanded {
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
  display: block;
}

/* Image notes — dark text, light bg context (expanded panel) */
.oc-img-notes {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.04em;
  color: rgba(200,210,220,0.40);
  margin-top: 6px;
  line-height: 1.4;
  padding-bottom: 4px;
}
.oc-img-notes a {
  color: rgba(200,210,220,0.40);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.12s;
}
.oc-img-notes a:hover { color: rgba(200,210,220,0.78); }

/* ── FOOTER ── */
.oc-footer {
  padding: 8px 14px 10px;
  border-top: 0.5px solid rgba(200,210,220,0.10);
  display: flex;
  justify-content: flex-end;
}
.inline-card-expanded .oc-footer {
  border-top-color: rgba(200,210,220,0.10);
}

.oc-view-more-btn {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  color: rgba(255,200,80,0.88);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.12s;
  text-transform: uppercase;
}
.oc-view-more-btn:hover { color: rgba(255,210,100,1); }

/* ── SOURCE — dark text on light expanded panel bg ── */
.oc-source {
  padding: 10px 18px 16px;
  font-family: var(--font-main);
  font-size: 9px;
  line-height: 1.5;
  color: var(--c35);
  font-style: italic;
  border-top: 0.5px solid rgba(200,210,220,0.2);
}

/* ── METHODOLOGY PAGE ────────────────────────────────────────────────────── */

.method-page {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + clamp(48px, 8vh, 88px)) clamp(20px, 5vw, 40px) clamp(80px, 12vh, 120px);
  box-sizing: border-box;
}
.method-page h1 {
  font-family: var(--font-main);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c0);
  margin: 0 0 clamp(40px, 7vh, 72px);
}
.method-section { margin-bottom: clamp(36px, 6vh, 60px); }
.method-section-title {
  font-family: var(--font-main);
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c0);
  margin: 0 0 24px;
}
.method-section-title .accent {
  font-style: normal;
  color: var(--accent-yellow);
}
.method-subsection { margin-bottom: clamp(24px, 4vh, 40px); }
.method-subsection-title {
  font-family: var(--font-main);
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 500;
  color: rgba(240, 240, 245, 0.92);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.method-page p {
  font-family: var(--font-main);
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(235, 238, 242, 0.82);
  margin: 0 0 1.2em;
  max-width: 68ch;
}
.method-page p a {
  color: rgba(235, 238, 242, 0.82);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.method-page p:last-child { margin-bottom: 0; }
.method-themes {
  list-style: disc;
  padding-left: 24px;
  margin: 20px 0 24px;
}
.method-themes li {
  font-family: var(--font-main);
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(235, 238, 242, 0.82);
  margin-bottom: 8px;
}
.method-themes li:last-child {
  margin-bottom: 0;
}
.method-rule {
  border: none;
  border-top: 1px solid rgba(240, 240, 245, 0.18);
  margin: clamp(36px, 6vh, 60px) 0;
}
.method-cite {
  border-left: 2px solid rgba(214, 208, 121, 0.30);
  padding: 14px 0 14px 20px;
  margin: 20px 0 24px;
}
.method-cite p {
  font-style: italic;
  color: rgba(235, 238, 242, 0.65);
  margin: 0;
}
.method-footer {
  margin-top: clamp(60px, 10vh, 100px);
  padding-top: clamp(36px, 6vh, 60px);
  border-top: 1px solid rgba(240, 240, 245, 0.18);
}
.method-byline {
  font-family: var(--font-main);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(235, 238, 242, 0.55);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE  ≤ 900px  —  all mobile overrides in one consolidated section
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── NAV ──────────────────────────────────────────────────────────────── */
  nav { padding: 12px 20px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 13px; line-height: 1.15; padding: 6px 8px; border-bottom: none; text-align: center; }
  .nav-words { display: inline-block; white-space: normal; }
  .nav-word  { display: block; }
  .nav-links a.active { border-bottom: none; padding-bottom: 6px; font-weight: 700; color: rgba(252,246,230,0.95); background: rgba(210,185,145,0.18); border-radius: 10px; }

  /* ── PAGE WRAPPERS ────────────────────────────────────────────────────── */
  .page { padding: 24px 20px 60px; padding-top: calc(36px + var(--nav-h)); }
  .tas-body .page.tas-page { padding-top: calc(16px + var(--nav-h)); }
  .tts-page { flex-direction: column; padding: 20px 20px 0; padding-top: calc(36px + var(--nav-h)); overflow: visible; }
  body.tas-body { --tas-page-pad-x: 20px; }

  /* ── LANDING HERO ─────────────────────────────────────────────────────── */
  .landing-hero { height: auto; min-height: 0; padding: calc(var(--nav-h) + 28px) 24px 0; overflow: visible; align-items: flex-start; }
  .landing-hero-component { flex-direction: column; align-items: flex-start; gap: 0; }
  .landing-hero-content { position: relative; z-index: 2; max-width: 100%; }
  .landing-hero h1 { font-size: clamp(44px, 13vw, 72px); letter-spacing: -1px; padding-left: 0; margin-bottom: 0.2em; }
  .landing-subtitle { font-size: clamp(16px, 4.5vw, 22px); padding-left: 0; max-width: 90%; margin-bottom: 0; }
  /* Diagram overlays circle in same position as desktop */
  .landing-hero-diagram,
  .landing-hero-circle { position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); width: min(300px, 80vw); height: min(300px, 80vw); margin: 0; opacity: 0.65; }

  /* ── PAGE HEROES (TAS + TTS) ──────────────────────────────────────────── */
  .page-hero { min-height: 0; width: calc(100% + 2 * 20px); margin-left: -20px; margin-right: -20px; padding: 0; height: 100svh; }
  .tts-page .page-hero { min-height: 0; height: 100svh; width: calc(100% + 2 * 20px); margin-left: -20px; margin-right: -20px; }
  .hero-container { grid-template-columns: 1fr; gap: clamp(12px, 3vw, 20px); padding: clamp(20px, 4vh, 36px) clamp(20px, 5vw, 36px); height: 100%; }
  .hero-inner h1 { font-size: clamp(32px, 9vw, 52px); margin-bottom: 0.4em; }
  .page-intro { font-size: clamp(15px, 4vw, 18px); max-width: 100%; }
  /* Hero image: visible on mobile, small, positioned below text */
  .hero-image-wrap { justify-content: center; order: 2; }
  .hero-image { opacity: 1; height: auto; max-height: min(48vw, 240px); width: auto; max-width: 100%; }

  /* ── SCROLLY: convert sticky to normal vertical flow ──────────────────── */
  #scrolly, #tas-charts-scrolly { display: block; }
  #scrolly .scrolly-rail, #tas-charts-scrolly .scrolly-rail { display: none; }
  #scrolly .scrolly-stack, #tas-charts-scrolly .scrolly-stack { display: block; }
  #scrolly .scrolly-sticky, #tas-charts-scrolly .scrolly-sticky { position: static; height: auto; min-height: 0; max-height: none; width: 100%; }
  #scrolly .scrolly-sticky-inner, #tas-charts-scrolly .scrolly-sticky-inner { position: static; width: 100%; max-width: 100%; padding: 0 clamp(20px, 5vw, 36px); height: auto; min-height: 0; }
  #scrolly .scrolly-panel, #tas-charts-scrolly .scrolly-panel { position: static; opacity: 1; visibility: visible; height: auto; max-height: none; display: block; transition: none; margin-bottom: clamp(28px, 5vh, 52px); }

  /* ── TAS SCROLLY PANELS ───────────────────────────────────────────────── */
  #scrolly .scrolly-panel[data-panel="intro"] { padding: clamp(16px, 4vh, 36px) 0; }
  .scrolly-intro-image { display: none; }
  .scrolly-intro-block { min-height: 0; padding: clamp(8px, 2vh, 16px) 0; }
  .scrolly-display-title { font-size: clamp(28px, 7vw, 44px); }
  .scrolly-lede { font-size: clamp(16px, 4vw, 20px); }

  /* Theme panels: compact stacked — "Across time, space has been a [KEYWORD]" */
  #scrolly .scrolly-panel[data-panel="frontier"],
  #scrolly .scrolly-panel[data-panel="race"],
  #scrolly .scrolly-panel[data-panel="risk"],
  #scrolly .scrolly-panel[data-panel="market"] { padding: clamp(6px, 1.5vh, 12px) 0; margin-bottom: 0; }
  #scrolly .scrolly-panel[data-panel="frontier"] { margin-top: clamp(16px, 3vh, 28px); }
  #scrolly .scrolly-panel[data-panel="market"]   { margin-bottom: clamp(16px, 3vh, 28px); }
  .scrolly-progressive { padding: 0; }
  .scrolly-progressive .scrolly-pull { font-size: clamp(17px, 4.5vw, 22px); line-height: 1.4; }
  body.tts-body .scrolly-headlines-image { display: none; }

  /* Protagonists panel */
  #scrolly .scrolly-panel[data-panel="protagonists"] { padding: clamp(16px, 3vh, 32px) 0; }
  .scrolly-pull { font-size: clamp(18px, 5vw, 26px); padding: 0; }
  .tas-body #scrolly .scrolly-pull { font-size: clamp(17px, 4.5vw, 24px); padding: 0; }
  .scrolly-line { opacity: 1; transform: none; transition: none; }
  .scrolly-line--intro { opacity: 1; white-space: normal; transition: none; }
  .scrolly-line--protagonists { opacity: 1 !important; transform: none !important; }

  /* ── TTS SCROLLY PANELS ───────────────────────────────────────────────── */
  .scrolly-split { grid-template-columns: 1fr; gap: clamp(16px, 3vh, 24px); }
  .scrolly-col--img { order: -1; }
  .scrolly-photo { max-width: min(280px, 75vw); max-height: min(45vh, 320px); }

  /* ── RANK CHART (TAS) ─────────────────────────────────────────────────── */
  #tas-charts-scrolly .scrolly-panel[data-panel="trends"] { padding: clamp(12px, 2.5vh, 24px) 0; }
  .rank-section { padding-left: clamp(20px, 5vw, 36px); margin-top: clamp(12px, 2.5vh, 28px); }
  .rank-block { min-height: 0; }
  .rank-stage { min-height: min(55vh, calc(100dvh - 180px)); max-height: min(65vh, calc(100dvh - 100px)); width: 100%; max-width: 100%; margin-left: 0; padding: 4px 0 6px 0; margin-bottom: clamp(12px, 2.5vh, 28px); }
  /* Release fixed annotation height on mobile — let it wrap naturally */
  .rank-annotation { height: auto !important; min-height: 0 !important; max-height: none !important; margin-top: 8px !important; }

  /* ── BUBBLE CHART (TAS) ───────────────────────────────────────────────── */
  .bubble-header-grid { grid-template-columns: 1fr; gap: 16px; }
  #cluster-legend { display: none !important; }
  .bubble-header { margin-top: 16px; padding-top: 0; }
  .bubble-cta-row { min-height: 36px; }
  .bubble-cta--overview, .bubble-cta--drilldown { font-size: 12px; }
  button.bubble-back.back-link { font-size: 15px; }
  .mob-drill-row { display: grid; grid-template-columns: 44px 1fr 42px; align-items: center; gap: 10px; padding: 13px 0; border: none; border-bottom: 0.5px solid rgba(240,240,240,0.08); background: none; cursor: pointer; text-align: left; width: 100%; -webkit-tap-highlight-color: transparent; }
  .mob-drill-row:active { opacity: 0.6; }
  .mob-drill-decade { font-family: var(--font-mono); font-size: 12px; color: rgba(240,240,240,0.50); }
  .mob-drill-bar-wrap { height: 11px; background: rgba(240,240,240,0.10); border-radius: 5px; overflow: hidden; }
  .mob-drill-bar-fill { display: block; height: 100%; border-radius: 5px; opacity: 0.82; }
  .mob-drill-bar-fill--bubble { opacity: 1; filter: url(#mob-bar-noise); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.22); }
  .mob-drill-pct  { font-family: var(--font-mono); font-size: 12px; color: rgba(240,240,240,0.70); text-align: right; }
  .mob-drill-note { font-family: var(--font-mono); font-size: 10px; color: rgba(240,240,240,0.28); letter-spacing: 0.05em; text-align: center; margin-top: 18px; }

  /* ── FILTERS ──────────────────────────────────────────────────────────── */
  .filters { flex-wrap: wrap; gap: 16px; row-gap: 12px; margin-bottom: 24px; }
  .page .filters { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 18px; margin-bottom: 28px; }
  #rank-filters .filter-source-group, #bubble-filters .filter-source-group { flex: 0 0 auto; max-width: 100%; min-width: 0; transition: none; }
  .filter-view { font-size: 13px; padding: 10px 24px; }
  #rank-filters .filter-view--src, #bubble-filters .filter-view--src { font-size: 12px; letter-spacing: 0.06em; padding: 8px 14px; }

  /* ── TTS VIZ SCREEN ───────────────────────────────────────────────────── */
  #legend-panel { display: none !important; }
  .viz-screen { min-height: 0; flex: 1; flex-direction: column; gap: clamp(20px, 4vh, 36px); }
  .viz-hint { font-size: clamp(15px, 3.6vw, 20px); min-width: 0; white-space: normal; overflow-x: visible; }
  .viz-main { flex: 1; flex-direction: column; min-height: 0; gap: 12px; }
  .viz-chart-col { order: 1; }
  .viz-sidebar { width: 100%; padding-top: 10px; gap: 14px; order: 2; }
  .sidebar-back-slot { display: none; }
  .leg-note { width: 100%; margin-top: 20px; padding-top: 20px; border-top: 0.5px solid rgba(240,240,240,0.08); order: 3; }
  #chart-inner { width: 100%; min-width: 0; margin-left: 0; max-width: 100%; align-self: stretch; }
  #star-svg { max-width: 100%; }
  #chart-wrap { flex: 1; width: 100%; }

  /* ── TTS INLINE CARD / DETAIL ─────────────────────────────────────────── */
  #detail-panel { display: none !important; }
  #inline-card { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; max-width: 100vw !important; max-height: 88vh !important; border-radius: 0 !important; background: #1e1e1e !important; border: 0.5px solid rgba(200,210,220,0.16) !important; box-shadow: 0 -12px 40px rgba(0,0,0,0.45) !important; animation: slideUpMobile 0.28s ease-out; }
  @keyframes slideUpMobile { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  #inline-card.inline-card-expanded { top: var(--nav-h) !important; bottom: 0 !important; max-height: calc(100vh - var(--nav-h)) !important; border-radius: 0 !important; border: none !important; border-top: 0.5px solid rgba(200,210,220,0.12) !important; box-shadow: none !important; overflow-y: auto !important; }
  #inline-card-backdrop { pointer-events: auto !important; background: rgba(0,0,0,0.42) !important; }

  /* ── TTS MOBILE ACCORDION ─────────────────────────────────────────────── */
  .mob-root { width: 100%; padding: 0 0 28px; }
  .mob-mode { display: flex; align-items: center; gap: 0; margin-bottom: 26px; width: fit-content; }
  .mob-mode-btn {
    flex: 0 0 auto; appearance: none; -webkit-appearance: none;
    font-family: var(--font-mono); font-size: 13px; font-weight: 500;
    letter-spacing: 0.06em; color: rgba(240,240,240,0.92);
    padding: 8px 14px; margin: 0;
    border: 1px solid rgba(255,255,255,0.58); background: transparent;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    white-space: nowrap; box-sizing: border-box; position: relative;
    -webkit-font-smoothing: antialiased;
  }
  .mob-mode-btn:first-child { border-radius: 13px 0 0 13px; border-right: none; }
  .mob-mode-btn + .mob-mode-btn { border-radius: 0 13px 13px 0; border-left: none; margin-left: -1px; }
  .mob-mode-btn + .mob-mode-btn::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 1px; background: rgba(255,255,255,0.72); pointer-events: none; z-index: 2;
  }
  .mob-mode-btn.active { background: #d1d1d1; border-color: #d1d1d1; color: #0a0a0a; font-weight: 600; }
  .mob-mode-btn.active + .mob-mode-btn::before { background: rgba(0,0,0,0.28); }
  .mob-mode-btn:not(.active):hover { color: #f2f2f2; border-color: rgba(255,255,255,0.72); }
  .mob-accordions { display: flex; flex-direction: column; gap: 0; }
  .mob-group { border-bottom: 0.5px solid rgba(240,240,240,0.08); }
  .mob-group summary { list-style: none; cursor: pointer; padding: 14px 0 12px; -webkit-tap-highlight-color: transparent; }
  .mob-group summary::-webkit-details-marker { display: none; }
  .mob-sum-inner { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0 10px; align-items: start; }
  .mob-sum-hdr { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .mob-sum-title { font-family: var(--font-main); font-size: 15px; font-weight: 400; line-height: 1.3; color: rgba(240,240,240,0.88); }
  .mob-sum-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: rgba(210,185,145,0.55); text-transform: uppercase; }
  .mob-sum-chev { grid-column: 2; grid-row: 1; width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; border-radius: 50%; border: 0.5px solid rgba(240,240,240,0.12); position: relative; }
  .mob-sum-chev::after { content: ''; position: absolute; left: 50%; top: 45%; width: 6px; height: 6px; border-right: 1.5px solid rgba(218,228,238,0.5); border-bottom: 1.5px solid rgba(218,228,238,0.5); transform: translate(-50%, -50%) rotate(45deg); transition: transform 0.2s ease; }
  .mob-group[open] .mob-sum-chev::after { transform: translate(-50%, -30%) rotate(225deg); }
  .mob-star-rail { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; gap: 7px; margin-top: 10px; width: 100%; }
  .mob-star-row { position: relative; display: flex; align-items: center; min-height: 11px; }
  .mob-star-rail-line { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed rgba(210,185,145,0.38); transform: translateY(-50%); pointer-events: none; }
  .mob-star-strip { position: relative; z-index: 1; display: flex; flex-wrap: nowrap; align-items: center; gap: 9px; }
  .mob-sparkle { width: 11px; height: 11px; flex-shrink: 0; background: rgba(255,255,255,0.9); clip-path: polygon(50% 0%,61% 35%,100% 50%,61% 65%,50% 100%,39% 65%,0% 50%,39% 35%); }
  .mob-items { padding: 0 0 16px; border-top: 0.5px solid rgba(240,240,240,0.05); }
  .mob-item-btn { -webkit-appearance: none; appearance: none; display: flex; align-items: baseline; gap: 10px; width: 100%; margin: 0; padding: 12px 2px 12px 0; text-align: left; font: inherit; cursor: pointer; color: rgba(240,240,240,0.9); background: transparent; border: none; border-top: 0.5px solid rgba(240,240,240,0.07); -webkit-tap-highlight-color: transparent; }
  .mob-item-btn:active { opacity: 0.88; }
  .mob-item-yr { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: rgba(210,185,145,0.75); min-width: 40px; flex-shrink: 0; }
  .mob-item-name { font-family: var(--font-main); font-size: 15px; font-weight: 400; line-height: 1.35; color: rgba(240,240,240,0.88); flex: 1; min-width: 0; }
  .mob-item-btn--selected { background: rgba(220,192,140,0.1); }
  .mob-item-btn--selected .mob-item-name { color: rgba(252,246,230,0.95); }
  .mob-item-btn--selected .mob-item-yr  { color: rgba(228,200,140,0.9); }
  .mob-list  { display: flex; flex-direction: column; border-top: 0.5px solid var(--c10); }
  .mob-row   { border-bottom: 0.5px solid var(--c10); }
  .mob-row-hdr { display: flex; align-items: center; gap: 10px; padding: 14px 0; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
  .mob-row-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: rgba(240,240,240,0.55); flex: 1; text-transform: uppercase; }
  .mob-row-count { font-family: var(--font-mono); font-size: 10px; color: rgba(240,240,240,0.30); min-width: 24px; text-align: right; }
  .mob-row-arrow { font-size: 16px; color: rgba(240,240,240,0.28); width: 16px; text-align: center; }
  .mob-item-list { padding: 4px 0 14px; }
  .mob-item-list.hidden { display: none; }
  .mob-item { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; border-top: 0.5px solid rgba(240,240,240,0.06); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mob-item:active { opacity: 0.6; }
  .mob-item-title { font-family: var(--font-main); font-size: 14px; color: rgba(240,240,240,0.75); line-height: 1.35; }
  .sm-dialog { position: fixed; width: 100vw; top: var(--nav-h); bottom: 0; left: 0; right: 0; transform: none; border-radius: 0; background: #1e1e1e; border: 0.5px solid rgba(200,210,220,0.14); box-shadow: 0 -8px 40px rgba(0,0,0,0.45); overflow-y: auto; max-height: calc(100vh - var(--nav-h)); }
  .sm-src-line { font-size: 20px; padding: 16px 16px 4px; background: #1e1e1e; }
  .sm-topbar   { padding: 12px 16px; background: #e8e4dc; border-bottom: 0.5px solid rgba(20,20,20,0.08); }
  .sm-items    { padding: 0 16px 32px; background: #1e1e1e; }

  /* ── MISC ─────────────────────────────────────────────────────────────── */
  .page-footer-nav { padding: clamp(24px, 4vh, 40px) 20px; }
  .back-link { font-size: 13px; }

} /* end @media (max-width: 900px) */

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE SUPPLEMENT — single definitive block.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ══ LANDING ══ */
  .landing-hero {
    height: 100svh; min-height: 100svh; box-sizing: border-box;
    padding: calc(var(--nav-h) + 56px) 34px 0;
    display: flex; flex-direction: column; align-items: stretch; overflow: hidden;
  }
  .landing-hero-component {
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start; width: 100%; flex: 1; position: relative;
    padding-top: 0;
  }
  .landing-hero-content {
    width: 100%; flex: 0 0 auto; text-align: left; position: relative; z-index: 2;
    padding-bottom: clamp(20px, 4vh, 36px);
  }
  .landing-hero h1 {
    font-size: 50px; letter-spacing: -1.5px;
    padding-left: 0; margin-bottom: 0.4em; line-height: 1;
  }
  .landing-subtitle {
    font-size: 20px; padding-left: 0;
    max-width: 100%; margin-bottom: 10px; line-height: 1.35;
  }
  .landing-hero-diagram {
    position: relative !important; top: auto !important; right: auto !important;
    transform: none !important; width: min(72vw, 290px); height: min(72vw, 290px);
    margin: 0 auto; display: block; flex-shrink: 0; opacity: 0.80;
  }
  .landing-hero-circle {
    position: relative !important; top: auto !important; right: auto !important;
    transform: none !important; width: min(72vw, 290px); height: min(72vw, 290px);
    margin-top: calc(-1 * min(72vw, 290px)); margin-left: auto; margin-right: auto;
    display: block; flex-shrink: 0; opacity: 0.45;
  }
  .landing-intro { padding-left: 24px !important; padding-right: 24px !important; }

  /* Both page heroes hidden on mobile — scrolly intro panels are the heroes */
  body.tts-body .tts-page .page-hero { display: none !important; }

  /* ══ TAS NAV OVERFLOW FIX ══ */
  body.tas-body #scrolly {
    width: calc(100% + 40px) !important;
    margin-left: -20px !important; margin-right: -20px !important;
  }

  /* ══ TAS SCROLLY ZONE 1 ══ */
  body.tas-body #scrolly .scrolly-rail { display: flex !important; }
  body.tas-body #scrolly .scrolly-stack {
    display: grid !important; grid-template-columns: 1fr; grid-template-rows: 1fr;
  }
  body.tas-body #scrolly .scrolly-sticky {
    position: sticky !important; top: var(--nav-h) !important;
    height: calc(100svh - var(--nav-h)) !important;
    min-height: calc(100svh - var(--nav-h)) !important;
    max-height: calc(100svh - var(--nav-h)) !important;
    width: 100% !important; display: flex !important; align-items: stretch;
  }
  body.tas-body #scrolly .scrolly-sticky-inner {
    position: relative !important; width: 100% !important;
    max-width: 100% !important; padding: 0 !important;
    box-sizing: border-box; flex: 1; min-height: 0; overflow: hidden; height: auto !important;
  }
  body.tas-body #scrolly .scrolly-panel {
    position: absolute !important; inset: 0;
    opacity: 0 !important; visibility: hidden !important;
    transition: opacity 0.22s ease, visibility 0.22s ease !important;
    padding-left: 28px !important; padding-right: 28px !important;
    display: flex !important; height: auto; max-height: 100%; margin-bottom: 0 !important;
  }
  body.tas-body #scrolly .scrolly-sticky-inner[data-phase="intro"]        .scrolly-panel[data-panel="intro"],
  body.tas-body #scrolly .scrolly-sticky-inner[data-phase="frontier"]     .scrolly-panel[data-panel="frontier"],
  body.tas-body #scrolly .scrolly-sticky-inner[data-phase="race"]         .scrolly-panel[data-panel="race"],
  body.tas-body #scrolly .scrolly-sticky-inner[data-phase="risk"]         .scrolly-panel[data-panel="risk"],
  body.tas-body #scrolly .scrolly-sticky-inner[data-phase="market"]       .scrolly-panel[data-panel="market"],
  body.tas-body #scrolly .scrolly-sticky-inner[data-phase="protagonists"] .scrolly-panel[data-panel="protagonists"] {
    opacity: 1 !important; visibility: visible !important;
  }
  body.tas-body #scrolly .scrolly-sticky-inner[data-phase="curtain"] .scrolly-panel[data-panel="protagonists"] {
    opacity: 0.22 !important; visibility: visible !important;
  }
  body.tas-body #scrolly .scrolly-sticky-inner[data-phase="done"] .scrolly-panel {
    opacity: 0 !important; visibility: hidden !important;
  }
  /* TAS mobile hero: hide the static page-hero, use scrolly intro panel instead (same as TTS) */
  body.tas-body .page.tas-page > .page-hero { display: none !important; }
  /* Restore display on scrolly intro panel (overrides the block inherited from desktop rule) */
  body.tas-body #scrolly .scrolly-panel[data-panel="intro"] { display: flex !important; }
  body.tas-body #scrolly .scrolly-track[data-scrolly-phase="intro"] { min-height: 100svh !important; }

  /* Theme panels: column, sentence then image */
  body.tas-body #scrolly .scrolly-panel[data-panel="frontier"],
  body.tas-body #scrolly .scrolly-panel[data-panel="race"],
  body.tas-body #scrolly .scrolly-panel[data-panel="risk"],
  body.tas-body #scrolly .scrolly-panel[data-panel="market"] {
    flex-direction: column !important; align-items: flex-start !important;
    justify-content: flex-start !important;
    /* generous top padding — pushes "Across time" down the screen */
    padding-top: clamp(48px, 11vh, 80px) !important;
    padding-bottom: 0 !important; gap: 0; overflow: hidden;
    /* Neutralize any generic mobile margin overrides so all panels sit at the same position */
    margin-top: 0 !important; margin-bottom: 0 !important;
  }

  /* "Across time, [line break] space has been a [yellow word]"
     We want exactly 2 lines: "Across time," on line 1, "space has been a [word]" on line 2.
     The text is: "Across time, space has been a " + <span>frontier</span>
     max-width of ~6em forces "Across time," to wrap but "space has been a" fits on next line.
     At 26px: 6em ≈ 156px. "Across time," ≈ 7 chars × ~13px = ~91px. So it wraps after comma. */
  body.tas-body #scrolly .scrolly-progressive { width: 100%; flex-shrink: 0; }
  body.tas-body #scrolly .scrolly-progressive .scrolly-pull {
    font-size: clamp(22px, 6vw, 30px) !important; font-weight: 300;
    line-height: 1.3; padding: 0 !important; white-space: normal; display: block; margin-bottom: 0;}
  /* Yellow word: inline (NOT block) so it stays on the same line as "space has been a" */
  body.tas-body #scrolly .scrolly-progressive .scrolly-pull .accent {
    display: inline !important;
  }

  body.tas-body #scrolly .scrolly-headlines-image {
    display: block !important; position: static !important;
    top: auto !important; right: auto !important; transform: none !important;
    width: 100%; max-width: 100%; flex: 1 1 auto; min-height: clamp(180px, 38vh, 340px); max-height: none;
    object-fit: contain; object-position: center center;
    opacity: 0.38; pointer-events: none;
    margin-top: clamp(16px, 3vh, 28px);
  }

  /* Protagonists/scrolly-lines: center vertically */
  body.tas-body #scrolly .scrolly-panel[data-panel="protagonists"] {
    align-items: flex-start !important; justify-content: flex-start !important;
    padding-top: 0 !important;
  }
  body.tas-body #scrolly .scrolly-panel[data-panel="protagonists"] .scrolly-lines {
    margin-top: auto !important; margin-bottom: auto !important;
  }
  body.tas-body #scrolly .scrolly-panel[data-panel="protagonists"] .scrolly-pull {
    font-size: clamp(20px, 5.5vw, 28px) !important; line-height: 1.3; padding: 0 !important;
  }
  body.tas-body #scrolly .scrolly-line--protagonists { opacity: 1 !important; transform: none !important; }

  /* ══ TTS SCROLLY ══ */
  body.tts-body #scrolly {
    display: block !important;
    width: calc(100% + 40px) !important;
    margin-left: -20px !important; margin-right: -20px !important;
    overflow-x: clip !important;
  }
  body.tts-body #scrolly .scrolly-rail { display: flex !important; }
  body.tts-body #scrolly .scrolly-stack {
    display: grid !important; grid-template-columns: 1fr; grid-template-rows: 1fr;
  }
  body.tts-body #scrolly .scrolly-sticky {
    position: sticky !important; top: var(--nav-h) !important;
    height: calc(100svh - var(--nav-h)) !important;
    min-height: calc(100svh - var(--nav-h)) !important;
    max-height: calc(100svh - var(--nav-h)) !important;
    width: 100% !important; display: flex !important; align-items: stretch;
  }
  body.tts-body #scrolly .scrolly-sticky-inner {
    position: relative !important; width: 100% !important; max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box; flex: 1; min-height: 0; overflow: visible; height: auto !important;
  }
  body.tts-body #scrolly .scrolly-panel {
    position: absolute !important; inset: 0;
    opacity: 0 !important; visibility: hidden !important;
    transition: opacity 0.22s ease, visibility 0.22s ease !important;
    padding-left: 28px !important; padding-right: 28px !important;
    display: flex !important; height: auto; max-height: 100%; margin-bottom: 0 !important;
  }
  body.tts-body #scrolly .scrolly-sticky-inner[data-phase="intro"]     .scrolly-panel[data-panel="intro"],
  body.tts-body #scrolly .scrolly-sticky-inner[data-phase="pioneer"]   .scrolly-panel[data-panel="pioneer"],
  body.tts-body #scrolly .scrolly-sticky-inner[data-phase="arecibo"]   .scrolly-panel[data-panel="arecibo"],
  body.tts-body #scrolly .scrolly-sticky-inner[data-phase="voyager"]   .scrolly-panel[data-panel="voyager"],
  body.tts-body #scrolly .scrolly-sticky-inner[data-phase="abundance"] .scrolly-panel[data-panel="abundance"] {
    opacity: 1 !important; visibility: visible !important;
  }
  body.tts-body #scrolly .scrolly-sticky-inner[data-phase="curtain"] .scrolly-panel[data-panel="abundance"] {
    opacity: 0.22 !important; visibility: visible !important;
  }
  body.tts-body #scrolly .scrolly-sticky-inner[data-phase="done"] .scrolly-panel {
    opacity: 0 !important; visibility: hidden !important;
  }
  /* TTS intro panel = hero: title top, image bottom-right, same as TAS page-hero */
  body.tts-body #scrolly .scrolly-panel[data-panel="intro"] {
    flex-direction: column !important;
    align-items: flex-start !important; justify-content: flex-start !important;
    padding-top: 56px !important;
    overflow: hidden; position: relative;
  }
  body.tts-body #scrolly .scrolly-intro-block {
    flex: 0 0 auto; display: flex; flex-direction: column;
    gap: clamp(14px, 2.5vh, 22px); width: 100%; min-height: 0; position: relative; z-index: 1;
  }
  body.tts-body #scrolly .scrolly-display-title {
    font-size: clamp(32px, 9vw, 52px); white-space: nowrap;
  }
  body.tts-body #scrolly .scrolly-lede { font-size: clamp(16px, 4.3vw, 19px); line-height: 1.5; max-width: 100%; }
  body.tts-body #scrolly .scrolly-intro-image {
    display: block !important; position: absolute !important;
    top: 32% !important; bottom: 0; right: -4vw; transform: none !important;
    pointer-events: none; z-index: 0; overflow: hidden;
  }
  body.tts-body #scrolly .scrolly-intro-image img {
    height: min(110vw, 600px); width: auto; opacity: 0.09;
    mix-blend-mode: screen; object-fit: contain; object-position: top right;
  }
  /* TAS intro panel = hero: identical layout to TTS intro panel */
  body.tas-body #scrolly .scrolly-panel[data-panel="intro"] {
    flex-direction: column !important;
    align-items: flex-start !important; justify-content: flex-start !important;
    padding-top: 56px !important;
    overflow: hidden; position: relative;
  }
  body.tas-body #scrolly .scrolly-intro-block {
    flex: 0 0 auto; display: flex; flex-direction: column;
    gap: clamp(14px, 2.5vh, 22px); width: 100%; min-height: 0; position: relative; z-index: 1;
  }
  body.tas-body #scrolly .scrolly-display-title {
    font-size: clamp(32px, 9vw, 52px); white-space: nowrap;
  }
  body.tas-body #scrolly .scrolly-lede { font-size: clamp(16px, 4.3vw, 19px); line-height: 1.5; max-width: 100%; }
  body.tas-body #scrolly .scrolly-intro-image {
    display: block !important; position: absolute !important;
    top: 32% !important; bottom: 0; right: -4vw; transform: none !important;
    pointer-events: none; z-index: 0; overflow: hidden;
  }
  body.tas-body #scrolly .scrolly-intro-image img {
    height: min(110vw, 600px); width: auto; opacity: 0.09;
    mix-blend-mode: screen; object-fit: contain; object-position: top right;
  }

  /* Pioneer/arecibo/voyager */
  body.tts-body #scrolly .scrolly-panel[data-panel="pioneer"],
  body.tts-body #scrolly .scrolly-panel[data-panel="arecibo"],
  body.tts-body #scrolly .scrolly-panel[data-panel="voyager"] { align-items: center !important; }
  body.tts-body #scrolly .scrolly-split { grid-template-columns: 1fr !important; gap: clamp(12px, 2.5vh, 22px); align-items: center; width: 100%; }
  body.tts-body #scrolly .scrolly-col--img { order: -1; display: flex; justify-content: center; }
  body.tts-body #scrolly .scrolly-photo { max-width: min(200px, 55vw); max-height: min(34vh, 230px); object-fit: contain; }
  body.tts-body #scrolly .scrolly-body { font-size: clamp(14px, 3.8vw, 17px); line-height: 1.6; }
  /* Abundance: vertically centered */
  body.tts-body #scrolly .scrolly-panel[data-panel="abundance"] {
    align-items: flex-start !important; justify-content: flex-start !important; padding-top: 0 !important;
  }
  body.tts-body #scrolly .scrolly-panel[data-panel="abundance"] .scrolly-lines {
    margin-top: auto !important; margin-bottom: auto !important;
  }
  body.tts-body #scrolly .scrolly-line--intro {
    opacity: 1 !important; white-space: normal !important; transition: none !important;
    font-size: clamp(16px, 4.2vw, 20px) !important; line-height: 1.45;
  }
  body.tts-body #scrolly .scrolly-line {
    opacity: 1 !important; transform: none !important; transition: none !important;
    font-size: clamp(13px, 3.5vw, 15px);
  }
  body.tts-body #scrolly .scrolly-track--abundance { min-height: 55vh; }

  /* ══ VIZ-HINT ══ */
  .viz-hint {
    font-size: clamp(20px, 5.5vw, 26px) !important; font-weight: 400;
    line-height: 1.2; padding: 0; margin-bottom: 0;
  }
  body.tts-body .viz-screen {
    padding-top: clamp(16px, 3vh, 28px) !important; gap: clamp(4px, 1vh, 8px) !important;
  }

  /* ══ RANK CHART ══ */
  body.tas-body .rank-section { padding-left: 20px !important; padding-right: 20px !important; }
  body.tas-body .chart-header--rank { padding-left: 0 !important; padding-right: 0 !important; }
  body.tas-body .chart-title { padding-left: 0 !important; font-size: clamp(22px, 6vw, 32px); }
  body.tas-body .chart-subtitle { padding-left: 0 !important; font-size: clamp(13px, 3.5vw, 16px); }
  body.tas-body .rank-annotation { padding-left: 10px !important; padding-right: 0 !important; font-size: 13px; }
  body.tas-body .rank-stage {
    width: 100% !important; max-width: 100% !important; margin-left: 0 !important;
    padding: 0 !important; min-height: min(44vh, calc(100dvh - 280px)) !important;
    max-height: min(52vh, calc(100dvh - 220px)) !important;
  }
  body.tas-body .rank-block { width: 100%; }
  #tas-charts-scrolly .scrolly-sticky-inner { padding-left: 0 !important; padding-right: 0 !important; }

  /* Color legend for rank chart (injected by JS) */
  #mob-rank-legend {
    display: flex; flex-wrap: wrap; gap: 5px 10px;
    padding: 6px 0 4px; margin-bottom: 2px;
  }
  .mob-rank-legend-item {
    display: flex; align-items: center; gap: 5px;
    font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.03em;
    color: rgba(240,240,240,0.78); white-space: nowrap;
  }
  .mob-rank-legend-swatch {
    width: 14px; height: 2px; flex-shrink: 0; border-radius: 1px;
  }

  /* ══ BUBBLE SECTION ══ */
  body.tas-body .bubble-section { padding-left: 20px !important; padding-right: 20px !important; }
  body.tas-body .bubble-header { padding-left: 0 !important; margin-left: 0 !important; }
  body.tas-body .bubble-header .chart-title,
  body.tas-body .bubble-header .chart-subtitle { padding-left: 0 !important; }

  /* ══ BUBBLE DRILLDOWN ══ */
  #mob-cluster { width: 100%; box-sizing: border-box; padding: 0; }
  .mob-drill-list { width: 100%; display: flex; flex-direction: column; }
  .bubble-section.drilldown-active .bubble-filters-row { display: none; }
  .bubble-cta--drilldown { display: none !important; }
  .mob-drill-note {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--c35);
    text-align: left; margin-top: 16px; font-style: normal;
  }

} /* end mobile supplement */