/* ── Color palette ─────────────────────────────────────────────────── */
:root {
  --color-cream:        #eef1f6;
  --color-cream-panel:  #dde4ef;
  --color-cream-hover:  #cdd8e8;
  --color-ink:          #0f2d4a;
  --color-accent:       #2b7fe0;
  --color-blue:         #3e6080;
  --color-muted:        #5a7a96;
  --color-muted-light:  #7d97b0;
  --color-muted-dark:   #4a6a85;
  --color-tan:          #7d97b0;
  --color-tooltip:      #7d97b0;
  --color-callout:      #0f2d4a;
  --color-cream-rgb:  238, 241, 246;
  --color-ink-rgb:     15,  45,  74;
  --color-accent-rgb: 43, 127, 224;
  --color-blue-rgb:    62,  96, 128;
  --color-white-rgb:  255, 255, 255;
  --color-bubble-1: #b7e3a4;
  --color-bubble-2: #86dac4;
  --color-bubble-3: #7196cf;
  --color-bubble-4: #7c6cba;
  --color-bubble-5: #93357d;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--color-cream);
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  color: var(--color-ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0; }

button { font-family: inherit; cursor: pointer; }

em { font-style: italic; }

.mono  { font-family: 'JetBrains Mono', 'Courier New', monospace; }

.serif { font-family: 'Playfair Display', Georgia, serif; }

.mono-xs { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.65rem; }

.tracking-wide { letter-spacing: 0.18em; }

.tracking-sm   { letter-spacing: 0.1em; }

.red         { color: var(--color-accent); }

.muted       { color: var(--color-muted); }

.muted-light { color: var(--color-muted-light); }

.dark-muted  { color: var(--color-muted-dark); }

.light       { color: var(--color-cream); }

.serif-italic { font-family: 'Playfair Display', Georgia, serif; font-style: italic; }

.serif-bold   { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; color: var(--color-ink); line-height: 1.3; }

#hero { background: var(--color-ink); border-bottom: 1px solid rgba(var(--color-white-rgb),0.06); }

.masthead { max-width: 1100px; margin: 0 auto; padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(var(--color-white-rgb),0.06); font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.65rem; color: var(--color-muted-light); letter-spacing: 0.18em; }

.hero-body { max-width: 1100px; margin: 0 auto; padding: 4rem 2rem 5rem; }

.hero-hook-section { background: var(--color-ink); border-bottom: 1px solid rgba(var(--color-white-rgb),0.06); padding: 1.5rem 2rem; }

.hero-hook { max-width: 1100px; margin: 0 auto; padding: 1rem 0; }

.hero-hook-heading { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 700; color: var(--color-cream); max-width: 1100px; margin: 0 auto 1.25rem; }

.hero-hook-foot { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; font-weight: 500; color: var(--color-cream); max-width: 1100px; margin: 0 auto 1.25rem; }

.hero-hook p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--color-tooltip); }

.hero-hook p + p { margin-top: 0.85rem; }

.hook-chart-wrap { max-width: 1100px; margin: 1.75rem auto 0; }

.hero-hook strong { color: var(--color-accent); font-weight: 600; }

.hook-quote { background: rgba(var(--color-accent-rgb),0.10); border: 1px solid rgba(var(--color-accent-rgb),0.30); padding: 1.25rem 1.5rem; margin-top: 2.5rem; margin-bottom: 3rem; max-width: 52ch; display: flex; align-items: flex-start; gap: 1.1rem; }

.hook-quote .hook-label { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.65rem; color: var(--color-accent); letter-spacing: 0.14em; margin-bottom: 0.6rem; }

.hook-quote .hook-text { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.05rem; color: var(--color-tooltip); line-height: 1.65; font-style: italic; }

.hook-quote-body { flex: 1 1 auto; min-width: 0; }

.hook-avatar { flex: 0 0 auto; width: 68px; height: 68px; border-radius: 50%; background-repeat: no-repeat; background-size: cover; background-position: center; border: 2px solid rgba(var(--color-accent-rgb), 0.35); box-shadow: 0 4px 14px rgba(var(--color-ink-rgb), 0.18); }

.hook-avatar--placeholder { display: flex; align-items: center; justify-content: center; background: rgba(var(--color-accent-rgb), 0.14); color: var(--color-accent); font-family: 'JetBrains Mono', 'Courier New', monospace; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.03em; }

/* Interviewee quotes (see js/interviewee_tooltips.js) — hoverable for a short bio tooltip. */
.quote-hoverable { cursor: help; transition: box-shadow 0.15s ease; }
.quote-hoverable:hover { box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.35); }

.hero-eyebrow { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.7rem; color: var(--color-accent); letter-spacing: 0.2em; margin-bottom: 1.25rem; }

.hero-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.8rem, 7vw, 6rem); font-weight: 900; color: var(--color-cream); line-height: 1.0; margin-bottom: 1.5rem; }

.hero-title em { color: var(--color-tan); font-style: italic; }

.hero-sub { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(1rem, 1.8vw, 1.2rem); color: var(--color-tooltip); line-height: 1.7; max-width: 44ch; }

.stat-pills { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 3rem; }

.pill { border: 1px solid rgba(var(--color-white-rgb),0.10); padding: 0.75rem 1.25rem; display: flex; gap: 1rem; align-items: center; }

.pill-value { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; font-weight: 700; color: var(--color-cream); }

.pill-label { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.62rem; color: var(--color-accent); letter-spacing: 0.1em; }

.pill-sub { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.62rem; color: var(--color-muted-dark); letter-spacing: 0.08em; }

#sector-bar { background: var(--color-ink); border-bottom: 1px solid rgba(var(--color-white-rgb),0.08); padding: 1rem 2rem; }

.sector-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.sector-label { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.6rem; color: var(--color-muted); letter-spacing: 0.14em; white-space: nowrap; }

.sector-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.s-pill { background: transparent; border: 1px solid rgba(var(--color-white-rgb),0.15); padding: 0.4rem 1rem; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.62rem; letter-spacing: 0.1em; color: var(--color-muted); transition: all 0.2s; }

.s-pill:hover { color: var(--color-cream); border-color: rgba(var(--color-white-rgb),0.4); }

.s-pill.active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-cream); }

.sector-hint { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.85rem; font-style: italic; color: var(--color-muted); margin-left: 0.5rem; }

#chapter-nav { position: sticky; top: 0; z-index: 50; background: var(--color-ink); border-bottom: 1px solid rgba(var(--color-white-rgb),0.08); }

.nav-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: stretch; padding: 0 2rem; }

.nav-brand { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.65rem; color: var(--color-muted-dark); letter-spacing: 0.14em; align-self: center; margin-right: 2rem; white-space: nowrap; }

.ch-btn { background: none; border: none; padding: 1.1rem 1.25rem; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.68rem; letter-spacing: 0.1em; color: var(--color-muted); border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; white-space: nowrap; }

.ch-btn:hover { color: var(--color-cream); }

.ch-btn.active { color: var(--color-cream); border-bottom-color: var(--color-accent); }


/* ── EXPLORE tab: a mode-switch, not a scroll-link — styled distinctly ── */
.ch-btn--explore {
  margin-left: auto;
  background: var(--color-accent);
  color: var(--color-cream);
  border-radius: 2px;
  border-bottom-color: transparent;
  padding: 0.6rem 1.1rem;
  align-self: center;
  cursor: pointer;
}

.ch-btn--explore:hover { background: #4b93ea; color: var(--color-cream); }

.ch-btn--explore.active { background: var(--color-cream); color: var(--color-ink); border-bottom-color: transparent; }


/* ── Story / Dashboard views ── */
#dashboard-view[hidden] { display: none; }

.dashboard-intro {
  max-width: 820px; margin: 0 auto; padding: 3rem 2rem 1rem;
}

.dashboard-intro .chapter-title { margin: 0.5rem 0 1rem; }

.reality-explore-link {
  color: var(--color-accent); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid rgba(43,127,224,0.4);
}

.reality-explore-link:hover { border-bottom-color: var(--color-accent); }


/* ── Section 03 simple line charts — no scrubbers, just the trend ──
   No fixed height here: drawAreaChart() sizes its own SVG based on the
   margins it's given, and a fixed height on this wrapper was shorter than
   that actual SVG, so the bottom axis/labels overflowed and overlapped the
   source-note paragraph right after it (visible in the screenshot). Let
   the wrapper grow to fit its child instead. */
.reality-chart { width: 100%; max-width: none; margin: 1rem 0; }

/* ── Reality Check manual field/sector pickers — the same personalization
   the field-quiz FAB applies, but reachable directly on each chart without
   going through the quiz. ── */
.reality-select-row {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin: 1.25rem 0 0.75rem;
}
.reality-select-label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.6rem;
  letter-spacing: 0.14em; color: var(--color-muted-dark);
}
.reality-select {
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem;
  color: var(--color-ink); background: var(--color-cream-panel);
  border: 1px solid rgba(15,45,74,0.15); border-radius: 4px;
  padding: 0.4rem 0.6rem; cursor: pointer;
}
.reality-select:hover { border-color: rgba(15,45,74,0.35); }

.ch-num { color: var(--color-accent); margin-right: 0.5rem; }

.chapter { background: var(--color-cream); padding: 4rem 2rem; }

.chapter-inner { max-width: 1100px; margin: 0 auto; }

.chapter-eyebrow { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.65rem; color: var(--color-accent); letter-spacing: 0.18em; margin-bottom: 0.75rem; }

.chapter-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; color: var(--color-ink); line-height: 1.15; margin-bottom: 3rem; max-width: 28ch; }

.stat-trio { display: grid; grid-template-columns: 1fr auto 1fr; margin-bottom: 1.5rem; border: 1px solid rgba(var(--color-ink-rgb),0.12); background: var(--color-cream-panel); }

.stat-cell { padding: 2.5rem; text-align: center; }

.stat-cell.left  { border-right: 1px solid rgba(var(--color-ink-rgb),0.12); }

.stat-cell.right { border-left:  1px solid rgba(var(--color-ink-rgb),0.12); }

.stat-cell.mid { padding: 2rem 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }

.stat-year { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.65rem; color: var(--color-muted); letter-spacing: 0.14em; margin-bottom: 0.75rem; }

.stat-big { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; color: var(--color-ink); line-height: 1; }

.stat-big.accent { color: var(--color-accent); }

.stat-sub-text { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.9rem; color: var(--color-muted); margin-top: 0.5rem; }

.stat-pct { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: var(--color-accent); line-height: 1; }

.stat-arrow-row { display: flex; align-items: center; gap: 0.25rem; }

.stat-line { width: 40px; height: 2px; background: var(--color-muted); opacity: 0.4; }

.stat-arrow-glyph { color: var(--color-muted); opacity: 0.5; font-size: 1rem; }

.stat-years-label { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.6rem; color: var(--color-muted); letter-spacing: 0.1em; }

.insight-strip { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; background: var(--color-ink); margin-bottom: 3.5rem; }

.insight-strip .ins-tag { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.62rem; color: var(--color-accent); letter-spacing: 0.15em; white-space: nowrap; }

.ins-divider { width: 1px; height: 16px; background: rgba(var(--color-white-rgb),0.12); flex-shrink: 0; }

.insight-strip .ins-text { font-family: 'Playfair Display', Georgia, serif; font-size: 1.1rem; font-style: italic; color: var(--color-cream); }

.timeline-hero { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 1.5rem; border: 1px solid rgba(var(--color-ink-rgb),0.12); background: var(--color-cream-panel); }

.tl-cell { padding: 2rem 1.5rem; text-align: center; border-right: 1px solid rgba(var(--color-ink-rgb),0.12); }

.tl-cell:last-child { border-right: none; }

.tl-cell.peak { background: rgba(var(--color-accent-rgb),0.06); }

.tl-year { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.65rem; letter-spacing: 0.14em; color: var(--color-muted); margin-bottom: 0.75rem; }

.tl-year.red { color: var(--color-accent); }

.tl-big { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 900; color: var(--color-ink); line-height: 1.15; }

.tl-italic { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.1rem; font-style: italic; color: var(--color-ink); }

.tl-italic.red { color: var(--color-accent); }

.tl-sub { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.6rem; color: var(--color-muted); margin-top: 0.5rem; letter-spacing: 0.08em; }

.chart-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: start; }

.chart-grid-rev { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start; }

@media (max-width: 800px) {
  .chart-grid, .chart-grid-rev { grid-template-columns: 1fr; gap: 2rem; }
  .timeline-hero { grid-template-columns: repeat(2, 1fr); }
  .stat-trio { grid-template-columns: 1fr; }
}

.chart-container { width: 100%; }

.fig-label { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.62rem; color: var(--color-muted); letter-spacing: 0.1em; margin-bottom: 1rem; }

.source-note { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.6rem; color: var(--color-muted); margin-top: 0.75rem; letter-spacing: 0.06em; opacity: 0.7; }

.pullquote { border-left: 3px solid var(--color-tan); padding-left: 1.25rem; margin-bottom: 1.75rem; }

.pullquote p { font-family: 'Source Serif 4', Georgia, serif; font-size: 1rem; color: var(--color-muted); line-height: 1.7; font-style: italic; }

.body-text { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.05rem; color: var(--color-ink); line-height: 1.75; margin-bottom: 1.25rem; }

.body-text.muted { color: var(--color-muted); }

.breakdown-rows { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; }

.breakdown-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(var(--color-ink-rgb),0.12); padding-bottom: 0.6rem; }

.bd-left .period { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.65rem; color: var(--color-ink); display: block; }

.bd-left .note { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.82rem; color: var(--color-muted); }

.bd-value { font-family: 'Playfair Display', Georgia, serif; font-size: 1.2rem; font-weight: 700; color: var(--color-accent); }

.legend { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1rem; border-top: 1px solid rgba(var(--color-ink-rgb),0.12); padding-top: 1rem; }

.leg-item { display: flex; align-items: center; gap: 0.4rem; }

.leg-dot  { width: 8px; height: 8px; border-radius: 1px; flex-shrink: 0; }

.leg-item span { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.6rem; color: var(--color-muted); }

.key-insight { background: var(--color-cream-panel); border: 1px solid rgba(var(--color-ink-rgb),0.12); border-left: 3px solid var(--color-accent); padding: 1.25rem 1.5rem; margin-top: 1.75rem; }

.key-insight .ki-tag { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.62rem; color: var(--color-accent); letter-spacing: 0.14em; margin-bottom: 0.5rem; }

.findings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 4rem; }

.finding-card { background: var(--color-cream-panel); border: 1px solid rgba(var(--color-ink-rgb),0.12); padding: 1.75rem; cursor: pointer; user-select: none; }

.finding-expand { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }

.finding-card.is-open .finding-expand { max-height: 500px; }

.finding-number { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.65rem; letter-spacing: 0.15em; display: block; margin-bottom: 0.75rem; }

.finding-headline { font-family: 'Playfair Display', Georgia, serif; font-size: 1.1rem; font-weight: 700; color: var(--color-ink); margin-bottom: 0.75rem; line-height: 1.3; }

.pull-quote-block { background: var(--color-ink); padding: 2rem; margin-top: 1rem; }

.pull-quote-block .pq-text { font-family: 'Playfair Display', Georgia, serif; font-size: 1.2rem; font-style: italic; color: var(--color-cream); line-height: 1.55; margin-bottom: 1rem; }

.pull-quote-block .pq-attr { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.62rem; color: var(--color-accent); letter-spacing: 0.12em; }

.role-table-section { margin-top: 4rem; border-top: 1px solid rgba(var(--color-ink-rgb),0.12); padding-top: 3rem; }

.role-table { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0 1rem; margin-top: 0.5rem; }

.role-head-from { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.62rem; color: var(--color-accent); letter-spacing: 0.12em; margin-bottom: 1rem; }

.role-head-to { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.62rem; color: var(--color-blue); letter-spacing: 0.12em; margin-bottom: 1rem; text-align: right; }

.role-cell { padding: 0.55rem 1rem; margin-bottom: 0.65rem; font-family: 'Source Serif 4', Georgia, serif; font-size: 0.9rem; color: var(--color-ink); }

.role-cell.from { background: rgba(var(--color-accent-rgb),0.10); border: 1px solid rgba(var(--color-accent-rgb),0.30); }

.role-cell.to   { background: rgba(var(--color-blue-rgb),0.10);  border: 1px solid rgba(var(--color-blue-rgb),0.30); }

.role-arrow { display: flex; align-items: center; justify-content: center; color: var(--color-muted); font-size: 1rem; margin-bottom: 0.65rem; }

.pagination { border-top: 1px solid rgba(var(--color-ink-rgb),0.12); background: var(--color-cream-panel); padding: 2rem; }

.pagination-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }

.btn-prev { background: none; border: 1px solid rgba(var(--color-ink-rgb),0.2); padding: 0.85rem 1.5rem; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.68rem; color: var(--color-muted); letter-spacing: 0.1em; transition: color 0.2s, border-color 0.2s; }

.btn-prev:hover { color: var(--color-ink); border-color: var(--color-ink); }

.btn-next { background: var(--color-ink); border: 1px solid var(--color-ink); padding: 0.85rem 1.5rem; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.68rem; color: var(--color-cream); letter-spacing: 0.1em; transition: opacity 0.2s; }

.btn-next:hover { opacity: 0.8; }

.btn-restart { background: var(--color-accent); border: none; padding: 0.85rem 1.5rem; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.68rem; color: var(--color-cream); letter-spacing: 0.1em; }

footer { background: var(--color-ink); padding: 2rem; text-align: center; }

footer p { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.65rem; color: var(--color-muted-light); letter-spacing: 0.12em; }

.axis text { font-family: 'JetBrains Mono', 'Courier New', monospace; fill: var(--color-muted); }

.axis line, .axis path { stroke: none; }

.grid line { stroke: rgba(var(--color-ink-rgb),0.10); stroke-dasharray: 3 3; }

.d3-tooltip { position: fixed; background: var(--color-ink); border: 1px solid rgba(var(--color-white-rgb),0.12); padding: 0.75rem 1rem; pointer-events: none; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.65rem; color: var(--color-tooltip); z-index: 1000; white-space: nowrap; transition: opacity 0.1s; }

.d3-tooltip .tip-val { font-family: 'Playfair Display', Georgia, serif; font-size: 1.1rem; color: var(--color-cream); display: block; margin-top: 2px; }

.d3-tooltip .tip-note { color: var(--color-accent); display: block; margin-top: 2px; font-size: 0.62rem; }

.company-table { margin-top: 0.5rem; }

.company-row { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(var(--color-ink-rgb),0.10); align-items: center; }

.company-row:last-child { border-bottom: none; }

.co-name { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.88rem; color: var(--color-ink); }

.co-ai-badge { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.55rem; letter-spacing: 0.1em; padding: 0.15rem 0.45rem; background: rgba(var(--color-accent-rgb),0.12); color: var(--color-accent); border: 1px solid rgba(var(--color-accent-rgb),0.3); white-space: nowrap; }

.co-jobs { font-family: 'Playfair Display', Georgia, serif; font-size: 1rem; font-weight: 700; color: var(--color-accent); text-align: right; }

.co-sector { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.58rem; color: var(--color-muted); grid-column: 1; }

.pill-loading { opacity: 0.5; }

.enroll-focus-wrap { margin-top: 2rem; }

.enroll-question-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }

.enroll-question-text { font-family: 'Source Serif 4', Georgia, serif; font-size: 1rem; color: var(--color-muted-dark); font-style: italic; flex-shrink: 0; }

.enroll-dropdown-wrap { position: relative; }

.enroll-dropdown-btn { display: flex; align-items: center; gap: 8px; padding: 9px 16px; background: var(--color-cream-panel); color: var(--color-ink); border: 1px solid rgba(var(--color-ink-rgb),0.18); border-radius: 6px; font-family: 'Source Serif 4', Georgia, serif; font-size: 0.95rem; letter-spacing: 0; cursor: pointer; transition: background 0.15s, border-color 0.15s; white-space: nowrap; --active-colour: var(--color-blue); }

.enroll-dropdown-btn:hover { background: var(--color-cream-hover); border-color: rgba(var(--color-ink-rgb),0.30); }

.enroll-dropdown-label { color: var(--active-colour, var(--color-ink)); transition: color 0.2s; }

.enroll-chevron { color: rgba(var(--color-ink-rgb),0.35); transition: transform 0.2s; flex-shrink: 0; }

.enroll-dropdown-btn[aria-expanded="true"] .enroll-chevron { transform: rotate(180deg); }

.enroll-dropdown-list { position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; background: var(--color-cream); border: 1px solid rgba(var(--color-ink-rgb),0.12); border-radius: 8px; padding: 6px; list-style: none; margin: 0; z-index: 100; box-shadow: 0 8px 32px rgba(var(--color-ink-rgb),0.14); display: none; max-height: 320px; overflow-y: auto; }

.enroll-dropdown-list.open { display: block; }

.enroll-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 5px; font-family: 'Source Serif 4', Georgia, serif; font-size: 0.9rem; letter-spacing: 0; color: rgba(var(--color-ink-rgb),0.5); cursor: pointer; transition: background 0.1s, color 0.1s; }

.enroll-dropdown-item:hover { background: rgba(var(--color-ink-rgb),0.06); color: var(--color-ink); }

.enroll-dropdown-item.active { color: var(--field-colour, var(--color-ink)); background: rgba(var(--color-ink-rgb),0.04); }

.enroll-dropdown-item[data-field="ALL"] { --field-colour: var(--color-blue); border-bottom: 1px solid rgba(var(--color-ink-rgb),0.10); margin-bottom: 4px; padding-bottom: 12px; }

.enroll-dropdown-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--field-colour, rgba(var(--color-ink-rgb),0.25)); flex-shrink: 0; }

.enroll-chart-area { position: relative; }

.enroll-callout { margin: 1.25rem 0 0; padding: 1rem 1.25rem; border-left: 3px solid var(--color-blue); background: rgba(var(--color-blue-rgb), 0.05); border-radius: 0 6px 6px 0; transition: border-color 0.3s; }

.enroll-callout-text { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.95rem; color: var(--color-callout); line-height: 1.7; margin: 0; }

.enroll-bottom-text { margin-top: 1.5rem; max-width: 72ch; }

.ms-card { position: absolute; max-width: 210px; background: var(--color-ink); border: 1px solid rgba(var(--color-accent-rgb),0.5); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; z-index: 20; transition: opacity 0.15s ease; box-shadow: 0 6px 24px rgba(0,0,0,0.3); pointer-events: none; }

.ms-card-year { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--color-accent); letter-spacing: 0.1em; text-transform: uppercase; }

.ms-card-label { font-family: 'Playfair Display', Georgia, serif; font-size: 14px; font-weight: 700; color: var(--color-cream); line-height: 1.3; }

.ms-card-detail { font-size: 12px; color: rgba(var(--color-cream-rgb),0.62); line-height: 1.6; }

.ms-card-source { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--color-accent); text-decoration: none; margin-top: 2px; pointer-events: all; display: inline-block; }

.ms-card-source:hover { text-decoration: underline; }

.layoff-ext-wrap { margin-top: 5rem; padding-top: 4rem; border-top: 1px solid rgba(var(--color-ink-rgb),0.12); }

.layoff-section-divider { margin-bottom: 2.5rem; }

.layoff-section-label { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.62rem; letter-spacing: 0.2em; color: var(--color-accent); }

.waffle-top { display: grid; grid-template-columns: auto 1fr; gap: 3rem; align-items: end; margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(var(--color-ink-rgb),0.1); }

@media (max-width: 640px) { .clipping { width: 170px; max-width: 46vw; } .s-thuha-kicker { padding: 1.25rem 1.5rem 0; } }

.waffle-year-tag { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.65rem; letter-spacing: 0.18em; color: var(--color-accent); margin-bottom: 0.4rem; transition: color 0.3s; }

.waffle-num { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(3rem, 6vw, 5rem); font-weight: 900; color: var(--color-ink); line-height: 0.95; margin-bottom: 0.3rem; transition: opacity 0.2s; }

.waffle-unit { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.62rem; letter-spacing: 0.12em; color: var(--color-muted); }

.waffle-context { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.1rem; color: var(--color-muted-dark); line-height: 1.7; font-style: italic; max-width: 44ch; align-self: center; transition: opacity 0.2s; }

.waffle-mid { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: start; }

@media (max-width: 700px) { .waffle-mid { grid-template-columns: 1fr; } }

.waffle-grid { display: grid; grid-template-columns: repeat(40, 1fr); gap: 2.5px; width: 100%; max-width: 480px; }

.wsq { display: block; aspect-ratio: 1; border-radius: 1px; transition: background 0.08s ease; }

.wsq--off { background: rgba(var(--color-ink-rgb),0.09); }

.waffle-caption { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.57rem; color: rgba(var(--color-ink-rgb),0.3); letter-spacing: 0.06em; margin-top: 0.75rem; max-width: 480px; }

.waffle-pills { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }

.w-pill { display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem; padding: 9px 14px; background: transparent; border: 1px solid rgba(var(--color-ink-rgb),0.1); border-left: 3px solid transparent; cursor: pointer; transition: border-color 0.15s, background 0.15s; text-align: left; min-width: 120px; }

.w-pill:hover { background: rgba(var(--color-ink-rgb),0.03); border-color: rgba(var(--color-ink-rgb),0.2); border-left-color: var(--c, var(--color-muted)); }

.w-pill.active { border-left-color: var(--c, var(--color-ink)); background: rgba(var(--color-ink-rgb),0.04); border-color: rgba(var(--color-ink-rgb),0.15); }

.w-pill b { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; color: var(--color-ink); }

.w-pill span { font-family: 'Playfair Display', Georgia, serif; font-size: 0.9rem; font-weight: 700; color: var(--c, var(--color-muted)); }

.cf-intro-text { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.95rem; color: var(--color-muted); font-style: italic; margin-bottom: 1.75rem; max-width: 60ch; }

.cf-card { background: var(--color-cream-panel); border: 1px solid rgba(var(--color-ink-rgb),0.12); padding: 2rem 2.25rem; min-height: 260px; margin-bottom: 1.25rem; }

.cf-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid rgba(var(--color-ink-rgb),0.1); }

.cf-co { font-family: 'Playfair Display', Georgia, serif; font-size: 1.4rem; font-weight: 700; color: var(--color-ink); margin-bottom: 3px; }

.cf-sec { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.6rem; letter-spacing: 0.12em; color: var(--color-muted); }

.cf-jobs { text-align: right; }

.cf-jobs-n { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 1.9rem; font-weight: 900; color: var(--color-accent); line-height: 1; }

.cf-jobs-l { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.58rem; letter-spacing: 0.1em; color: var(--color-muted); }

.cf-roles-grid { display: grid; grid-template-columns: 1fr 28px 1fr; gap: 0.5rem; align-items: center; margin-bottom: 1.25rem; }

@media (max-width: 580px) { .cf-roles-grid { grid-template-columns: 1fr; } .cf-arr { display: none; } }

.cf-role { padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 5px; }

.cf-out { border: 1px solid rgba(var(--color-accent-rgb),0.2); border-left: 3px solid var(--color-accent); background: rgba(var(--color-accent-rgb),0.04); }

.cf-in { border: 1px solid rgba(var(--color-blue-rgb),0.2); border-left: 3px solid var(--color-blue); background: rgba(var(--color-blue-rgb),0.04); }

.cf-rl { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.57rem; letter-spacing: 0.12em; color: var(--color-muted); text-transform: uppercase; }

.cf-rv { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.9rem; color: var(--color-ink); line-height: 1.5; }

.cf-arr { text-align: center; color: rgba(var(--color-ink-rgb),0.25); font-size: 1rem; }

.cf-bar-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(var(--color-ink-rgb),0.08); }

.cf-bar-lbl { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.57rem; letter-spacing: 0.08em; color: var(--color-muted); white-space: nowrap; flex-shrink: 0; }

.cf-bar-track { flex: 1; height: 3px; background: rgba(var(--color-ink-rgb),0.08); }

.cf-bar-fill { height: 100%; background: var(--color-blue); transition: width 0.45s ease; }

.cf-bar-val { font-family: 'Playfair Display', Georgia, serif; font-size: 0.95rem; font-weight: 700; color: var(--color-blue); white-space: nowrap; min-width: 46px; text-align: right; }

.cf-q { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.95rem; font-style: italic; color: var(--color-muted-dark); line-height: 1.7; margin: 0; }

.cf-q-cite { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.57rem; letter-spacing: 0.08em; color: var(--color-muted); font-style: normal; display: block; margin-top: 0.4rem; }

.cf-nav-row { display: flex; align-items: center; gap: 0.85rem; }

.cf-btn { width: 38px; height: 38px; background: var(--color-ink); border: none; color: var(--color-cream); font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; cursor: pointer; transition: opacity 0.15s; display: flex; align-items: center; justify-content: center; }

.cf-btn:hover   { opacity: 0.75; }

.cf-btn:disabled { opacity: 0.18; cursor: default; }

.cf-count { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.63rem; letter-spacing: 0.12em; color: var(--color-muted); }

.role-replace-section { margin-top: 5rem; padding-top: 4rem; border-top: 1px solid rgba(var(--color-ink-rgb),0.12); }

.rr-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 700; color: var(--color-ink); line-height: 1.15; margin-bottom: 0.5rem; }

.rr-sub { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.95rem; color: var(--color-muted); font-style: italic; }

.rr-legend-row { display: flex; gap: 1.5rem; margin-bottom: 1.75rem; }

.rr-legend-item { display: flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em; color: var(--color-muted); }

.rr-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.rr-dot--out { background: var(--color-accent); }

.rr-dot--in  { background: var(--color-blue); }

.rr-card-wrap { display: flex; flex-direction: column; gap: 1.25rem; }

.rr-card { background: var(--color-cream-panel); border: 1px solid rgba(var(--color-ink-rgb),0.12); padding: 2rem 2.25rem; min-height: 220px; }

.rr-card-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: 1px solid rgba(var(--color-ink-rgb),0.1); }

.rr-card-company { font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; font-weight: 700; color: var(--color-ink); }

.rr-card-jobs { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em; color: var(--color-accent); }

.rr-card-roles { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 0.5rem; align-items: center; margin-bottom: 1.25rem; }

@media (max-width: 560px) { #company-bubbles .bp-roles { grid-template-columns: 1fr; } #company-bubbles .bp-role-arrow { display: none; } }

.rr-card-col { display: flex; flex-wrap: wrap; gap: 5px; }

.rr-card-arrow { text-align: center; color: rgba(var(--color-ink-rgb),0.2); font-size: 0.85rem; font-family: 'JetBrains Mono', monospace; }

.rr-tag { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 2px; }

.rr-tag--out { background: rgba(var(--color-accent-rgb),0.08); color: var(--color-accent); border: 1px solid rgba(var(--color-accent-rgb),0.2); }

.rr-tag--in { background: rgba(var(--color-blue-rgb),0.08); color: var(--color-blue); border: 1px solid rgba(var(--color-blue-rgb),0.2); }

.rr-card-invest { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(var(--color-ink-rgb),0.08); }

.rr-invest-lbl { font-family: 'JetBrains Mono', monospace; font-size: 0.57rem; letter-spacing: 0.08em; color: rgba(var(--color-ink-rgb),0.35); white-space: nowrap; flex-shrink: 0; }

.rr-invest-bar { flex: 1; height: 2px; background: rgba(var(--color-ink-rgb),0.08); }

.rr-invest-fill { height: 100%; background: var(--color-blue); transition: width 0.4s ease; }

.rr-invest-val { font-family: 'Playfair Display', Georgia, serif; font-size: 0.9rem; font-weight: 700; color: var(--color-blue); white-space: nowrap; min-width: 44px; text-align: right; }

.rr-card-quote { margin: 0; padding: 0; border: none; }

.rr-card-quote p { font-family: 'Source Serif 4', Georgia, serif; font-size: 1rem; font-style: italic; color: var(--color-ink); line-height: 1.7; margin-bottom: 0.4rem; }

.rr-card-quote cite { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.1em; color: var(--color-muted); font-style: normal; }

.rr-nav { display: flex; align-items: center; gap: 1rem; }

.rr-nav-btn { width: 38px; height: 38px; background: var(--color-ink); border: none; color: var(--color-cream); font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; cursor: pointer; transition: opacity 0.15s; display: flex; align-items: center; justify-content: center; }

.rr-nav-btn:hover    { opacity: 0.75; }

.rr-nav-btn:disabled { opacity: 0.18; cursor: default; }

.rr-nav-count { font-family: 'JetBrains Mono', monospace; font-size: 0.63rem; letter-spacing: 0.12em; color: var(--color-muted); }

.river-root { background: transparent; border: none; padding: 0; position: relative; }

/* ── AI milestone timeline strip (js/Layoffriver.js) — sits at the top of
   the chart. Plays a one-time guided tour (each date pops in with its card
   enlarged for reading, then settles to a small diamond); after the tour,
   every diamond stays visible and can be clicked to reopen its card. ── */
.river-ms-track { position: relative; height: 40px; margin-bottom: 0.5rem; z-index: 25; }

.river-ms-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(15,45,74,0.12); }

.river-ms-pin {
  position: absolute; top: 50%;
  transform: translate(-50%,-50%) scale(0.3);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  opacity: 0; pointer-events: none; cursor: default; outline: none;
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.river-ms-pin.is-visible { opacity: 1; transform: translate(-50%,-50%) scale(1); pointer-events: auto; cursor: pointer; }

.river-ms-pin-dot {
  width: 11px; height: 11px; background: #e05a2b;
  border: 1.5px solid rgba(255,255,255,0.6); transform: rotate(45deg);
  box-shadow: 0 1px 4px rgba(15,45,74,0.25); transition: background 0.15s, transform 0.15s;
}
.river-ms-pin:hover .river-ms-pin-dot,
.river-ms-pin:focus .river-ms-pin-dot,
.river-ms-pin.is-open .river-ms-pin-dot,
.river-ms-pin.is-intro-open .river-ms-pin-dot { background: #e85d3a; transform: rotate(45deg) scale(1.15); }

.river-ms-pin-year {
  font-family: 'JetBrains Mono', monospace; font-size: 0.6rem;
  letter-spacing: 0.05em; color: var(--color-muted-dark);
}

.river-ms-card {
  position: absolute; top: 130%; width: 210px;
  background: var(--color-ink); border: 1px solid rgba(var(--color-accent-rgb),0.5);
  border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.25s ease;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3); z-index: 20; text-align: left;
}
.river-ms-pin:hover .river-ms-card,
.river-ms-pin:focus .river-ms-card,
.river-ms-pin.is-open .river-ms-card { opacity: 1; pointer-events: auto; }

.river-ms-pin--center .river-ms-card { left: 50%; transform: translateX(-50%); }
.river-ms-pin--left   .river-ms-card { left: 0; }
.river-ms-pin--right  .river-ms-card { right: 0; }

.river-ms-card-label  { font-family: 'Playfair Display', Georgia, serif; font-size: 13px; font-weight: 700; color: var(--color-cream); line-height: 1.3; }

/* Hidden by default (not just via the card's own opacity) so the intro
   tour's headline-only pop can't flash the full detail/source for a frame
   while .is-intro-open is transitioning off the card — opacity fades over
   0.2s, but display:none scoped only to .is-intro-open would drop out
   instantly, briefly unhiding this text mid-fade. Gating visibility on the
   same hover/focus/is-open states that show the rest of the card (and never
   on is-intro-open) closes that gap entirely. */
.river-ms-card-detail,
.river-ms-card-source { display: none; }
.river-ms-pin:hover .river-ms-card-detail,
.river-ms-pin:hover .river-ms-card-source,
.river-ms-pin:focus .river-ms-card-detail,
.river-ms-pin:focus .river-ms-card-source,
.river-ms-pin.is-open .river-ms-card-detail,
.river-ms-pin.is-open .river-ms-card-source { display: block; }

.river-ms-card-detail { font-size: 11px; color: rgba(var(--color-cream-rgb),0.62); line-height: 1.5; }
.river-ms-card-source { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--color-accent); text-decoration: none; }
.river-ms-card-source:hover { text-decoration: underline; }

@media (max-width: 640px) { .river-ms-card { width: 160px; } }

/* Guided-tour state — each date gets one enlarged, unmissable pass before
   settling into the small permanent diamond used from then on. Only the
   headline pops up big during this pass; the detail text and source link
   stay tucked away in the normal tooltip, reached the same way as any other
   pin (hover/click) once the tour has moved on. */
.river-ms-pin.is-intro-open .river-ms-card {
  opacity: 1; pointer-events: auto;
  width: max-content; max-width: 280px; padding: 18px 22px;
  z-index: 30; box-shadow: 0 16px 44px rgba(0,0,0,0.45);
}
.river-ms-pin.is-intro-open .river-ms-card-label  { font-size: 26px; line-height: 1.25; }

@media (max-width: 640px) {
  .river-ms-pin.is-intro-open .river-ms-card { max-width: 220px; padding: 14px 16px; }
  .river-ms-pin.is-intro-open .river-ms-card-label  { font-size: 19px; }
}

.river-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 0 0.5rem; gap: 2rem; flex-wrap: wrap; }

.river-big-stat { display: flex; flex-direction: column; gap: 4px; }

.river-big-num { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 900; color: var(--color-ink); line-height: 1; font-variant-numeric: tabular-nums; }

.river-big-label { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.12em; color: var(--color-muted); transition: color 0.2s; }

.river-side-stats { display: flex; gap: 2.5rem; transition: opacity 0.15s; }

.river-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

.river-stat-num { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; font-weight: 700; color: var(--color-accent); line-height: 1; transition: color 0.15s; }

.river-stat-label { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.06em; color: var(--color-muted); text-align: right; max-width: 14ch; }

.bubbles-root { margin-top: 1rem; }

.bubbles-shell { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; }

.bubbles-heading { display: flex; flex-direction: column; gap: 0.3rem; }

.bubbles-heading-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.16em; color: var(--color-accent); }

.bubbles-heading-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; color: var(--color-ink); line-height: 1.2; }

.bubbles-grid { display: flex; flex-direction: column; gap: 1rem; width: 100%; }

.bubbles-canvas-wrap { background: transparent; border: none; width: 100%; }

.bubbles-section { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid rgba(var(--color-ink-rgb),0.12); }

.bubbles-svg { width: 100%; height: auto; display: block; }

.bubble-label, .bubble-sub { transition: opacity 0.15s; }

.bubbles-panel { width: 100%; container-type: inline-size; }

.bp-empty { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.25rem 0 0.75rem; background: transparent; border: none; }

.bp-empty-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.16em; color: var(--color-accent); }

.bp-empty-text { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.92rem; font-style: italic; color: var(--color-muted); line-height: 1.55; max-width: 80ch; }

.bp-card { background: transparent; border: none; border-top: 2px solid; padding: 1rem 0 0.25rem; animation: bp-fade-in 0.2s ease; }

@keyframes bp-fade-in { from { opacity: 0; transform: translateY(4px); } to   { opacity: 1; transform: translateY(0); } }

.bp-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid rgba(var(--color-ink-rgb),0.1); }

.bp-head-name { display: flex; align-items: center; gap: 0.9rem; }

.bp-colour-swatch { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }

.bp-company { font-family: 'Playfair Display', Georgia, serif; font-size: 1.3rem; font-weight: 700; color: var(--color-ink); margin-bottom: 2px; }

.bp-sector { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em; color: var(--color-muted); }

.bp-jobs { text-align: right; flex-shrink: 0; }

.bp-jobs-n { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; font-weight: 900; line-height: 1; }

.bp-jobs-l { font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; letter-spacing: 0.1em; color: var(--color-muted); }

.bp-badge { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.1em; padding: 4px 10px; border: 1px solid; border-radius: 2px; margin-bottom: 0.85rem; }

.bp-reason { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.92rem; font-style: italic; color: var(--color-muted-dark); line-height: 1.55; margin-bottom: 1rem; max-width: 90ch; }

.bp-roles { display: grid; grid-template-columns: 1fr 28px 1fr; gap: 1.5rem; align-items: center; margin-bottom: 1rem; max-width: 90ch; }

@container (max-width: 380px) { .bp-roles { grid-template-columns: 1fr; gap: 0.6rem; } .bp-role-arrow { display: none; } }

.bp-role-col { display: flex; flex-direction: column; gap: 5px; padding: 0.7rem 0.9rem; }

.bp-role-out { border: 1px solid rgba(var(--color-accent-rgb),0.2); border-left: 3px solid var(--color-accent); background: rgba(var(--color-accent-rgb),0.045); }

.bp-role-in { border: 1px solid rgba(var(--color-blue-rgb),0.2); border-left: 3px solid var(--color-blue); background: rgba(var(--color-blue-rgb),0.045); }

.bp-role-tag { font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; letter-spacing: 0.1em; color: var(--color-muted); }

.bp-role-text { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.86rem; color: var(--color-ink); line-height: 1.4; }

.bp-role-arrow { text-align: center; color: rgba(var(--color-ink-rgb),0.25); }

.bp-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.5rem 0; margin-bottom: 0.85rem; border-bottom: 1px solid rgba(var(--color-ink-rgb),0.08); max-width: 90ch; }

.bp-row-label { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.1em; color: var(--color-muted); }

.bp-row-value { font-family: 'Playfair Display', Georgia, serif; font-size: 1.05rem; font-weight: 700; }

.bp-quote { padding-top: 0.1rem; max-width: 90ch; }

.bp-quote p { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.95rem; font-style: italic; color: var(--color-ink); line-height: 1.55; margin-bottom: 0.4rem; }

.bp-quote cite { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.08em; color: var(--color-muted); font-style: normal; }

.ch02-story .chapter-title { margin-bottom: 1.25rem; }

.ch02-lede { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.15rem; color: var(--color-muted-dark); line-height: 1.75; max-width: 72ch; margin-bottom: 3rem; font-style: italic; }

.ch02-beat { margin: 0 0 3rem; width: 100%; }

.ch02-river-wrap { width: 100%; }

.ch02-editorial { max-width: 72ch; margin: 0 auto 3.5rem; }

.ch02-editorial-quote { border-left: 3px solid var(--color-tan); padding-left: 1.25rem; margin-bottom: 1.5rem; }

.ch02-editorial-quote p { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.15rem, 2vw, 1.45rem); font-style: italic; color: var(--color-ink); line-height: 1.4; }

.ch02-quote-box { margin-top: 1.75rem; padding: 1.25rem 1.5rem; background: var(--color-cream-panel); border: 1px solid rgba(var(--color-ink-rgb),0.10); border-left: 3px solid var(--color-muted); }

.ch02-quote-box-text { font-family: 'Source Serif 4', Georgia, serif; font-size: 1rem; font-style: italic; color: var(--color-ink); line-height: 1.7; margin-bottom: 0.5rem; }

.ch02-quote-box-attr { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.08em; color: var(--color-muted); }

.sum-conclusion { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-bottom: 4rem; padding-top: 3rem; border-top: 1px solid rgba(var(--color-ink-rgb),0.1); }

@media (max-width: 720px) { .sum-conclusion { grid-template-columns: 1fr; gap: 2rem; } }

.sum-section-label { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.2em; color: var(--color-muted); margin-bottom: 1.25rem; }

.sum-body { font-family: 'Source Serif 4', Georgia, serif; font-size: 1rem; line-height: 1.8; color: var(--color-ink); margin-bottom: 1rem; }

.sum-authors { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(var(--color-ink-rgb),0.1); }

.sum-author-line { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.15em; color: var(--color-ink); }

.sum-author-date { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.12em; color: var(--color-muted); margin-top: 3px; }

.ch-findings-wrap { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(var(--color-ink-rgb),0.1); }

.ch-findings-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }

.findings-grid.ch-findings-grid { grid-template-columns: repeat(2, 1fr); margin-bottom: 0; }

.steps-ahead-section { margin-top: 5rem; padding-top: 4rem; border-top: 1px solid rgba(var(--color-ink-rgb),0.1); margin-bottom: 5rem; }

.steps-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; line-height: 1.15; color: var(--color-ink); margin-bottom: 1rem; max-width: 20ch; }

.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .steps-grid { grid-template-columns: 1fr; } }

.step-back-link { display: inline-block; margin-top: 0.4rem; font-size: 0.82rem; }

.step-viz { width: 100%; }
.step-viz svg { width: 100%; height: auto; display: block; }

.step-card { background: var(--color-cream-panel); border: 1px solid rgba(var(--color-ink-rgb),0.08); border-left: 3px solid var(--color-blue); padding: 1.5rem 1.75rem; display: flex; flex-direction: column; gap: 0.65rem; cursor: pointer; user-select: none; }

.step-expand { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }

.step-card.is-open .step-expand { max-height: 300px; }

.step-num { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.2em; color: var(--color-blue); }

.step-headline { font-family: 'Playfair Display', Georgia, serif; font-size: 1rem; font-weight: 700; color: var(--color-ink); line-height: 1.3; }

.step-body { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.88rem; line-height: 1.7; color: var(--color-muted-dark); margin: 0; }

.role-game-section { margin-top: 3rem; padding-top: 4rem; border-top: 1px solid rgba(var(--color-ink-rgb),0.1); }

/* The cover sits above the play area in normal document flow, so shrinking
   it (padding/gap/icon size) naturally reflows the board down into place —
   no manual overlap/offset bookkeeping needed. */
.rg-field-cover {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5rem; padding: 3rem 1.5rem;
  background: var(--color-cream);
  border: 1px dashed rgba(var(--color-ink-rgb),0.15);
  transition: padding 0.55s ease, gap 0.55s ease, background 0.55s ease, border-color 0.55s ease;
}

.rg-game-wrap.is-started .rg-field-cover {
  padding: 0.75rem 0 1.25rem; gap: 0;
  background: transparent; border-color: transparent;
}

.rg-overlay-text, .rg-overlay-sub {
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.4s ease, margin 0.4s ease;
  max-height: 3rem; opacity: 1;
}

.rg-game-wrap.is-started .rg-overlay-text,
.rg-game-wrap.is-started .rg-overlay-sub { opacity: 0; max-height: 0; margin: 0; }

.rg-overlay-text { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; color: var(--color-ink); letter-spacing: 0.04em; text-align: center; }

.rg-overlay-sub { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.18em; color: var(--color-muted); text-align: center; text-transform: uppercase; }

.rg-field-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; max-width: 760px; transition: gap 0.55s ease; }

.rg-game-wrap.is-started .rg-field-grid { gap: 0.4rem; justify-content: flex-start; max-width: none; }

.rg-field-icon-btn { background: var(--color-cream-panel); border: 1px solid rgba(var(--color-ink-rgb),0.12); border-radius: 8px; padding: 1.1rem 0.9rem 0.9rem; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; cursor: pointer; transition: padding 0.55s ease, gap 0.55s ease, background 0.55s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; }

.rg-field-icon-btn:hover { border-color: var(--color-blue); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(var(--color-ink-rgb),0.1); }

.rg-field-icon-btn.active { border-color: var(--color-blue); border-width: 2px; background: var(--color-cream-hover); }

.rg-game-wrap.is-started .rg-field-icon-btn { padding: 0.3rem 0.4rem; gap: 0.25rem; background: transparent; border-color: transparent; }

.rg-game-wrap.is-started .rg-field-icon-btn:hover,
.rg-game-wrap.is-started .rg-field-icon-btn.active { background: var(--color-cream-panel); transform: none; box-shadow: none; }

.rg-field-icon-img { width: 92px; height: 92px; object-fit: cover; border-radius: 50%; border: 3px solid rgba(var(--color-ink-rgb),0.15); transition: width 0.55s ease, height 0.55s ease, border-color 0.3s ease, border-width 0.3s ease; }

.rg-field-icon-btn.active .rg-field-icon-img { border-color: var(--color-blue); }

.rg-game-wrap.is-started .rg-field-icon-img { width: 30px; height: 30px; border-width: 2px; }

.rg-field-icon-label { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.04em; color: var(--color-muted-dark); text-align: center; line-height: 1.25; transition: font-size 0.55s ease; }

.rg-game-wrap.is-started .rg-field-icon-label { font-size: 0.5rem; }

.rg-source-toggle { margin-top: 2rem; border: 1px solid rgba(var(--color-ink-rgb),0.12); }

.rg-source-btn { width: 100%; text-align: left; background: none; border: none; padding: 0.8rem 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.12em; color: var(--color-muted); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }

.rg-source-btn:hover { color: var(--color-ink); }

.rg-source-body { max-height: 0; overflow: hidden; transition: max-height 0.32s ease; }

.rg-source-toggle.is-open .rg-source-body { max-height: 200px; }

.rg-source-body p { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.84rem; line-height: 1.75; color: var(--color-muted-dark); padding: 0 1rem 1rem; margin: 0; font-style: italic; }

.rg-score-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }

.rg-score-lbl, .rg-attempts-lbl { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.14em; color: var(--color-muted); }

.rg-score-val { font-family: 'Playfair Display', Georgia, serif; font-size: 1.1rem; font-weight: 700; color: var(--color-blue); min-width: 4rem; }

.rg-attempts-val { font-family: 'Playfair Display', Georgia, serif; font-size: 1.1rem; font-weight: 700; color: var(--color-muted-dark); min-width: 2rem; }

.rg-reset-btn { margin-left: auto; background: none; border: 1px solid rgba(var(--color-ink-rgb),0.2); padding: 5px 14px; font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.12em; color: var(--color-muted-dark); cursor: pointer; transition: all 0.15s; }

.rg-reset-btn:hover { background: var(--color-cream-hover); border-color: rgba(var(--color-ink-rgb),0.35); color: var(--color-ink); }

.rg-feedback { min-height: 28px; font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.08em; padding: 7px 12px; margin-bottom: 1rem; border-radius: 2px; transition: all 0.2s; }

.rg-feedback:empty { background: none; }

.rg-feedback--correct { background: rgba(58,107,74,0.1); color: #3a6b4a; border-left: 3px solid #3a6b4a; }

.rg-feedback--wrong { background: rgba(var(--color-accent-rgb),0.08); color: var(--color-accent); border-left: 3px solid var(--color-accent); }

.rg-board { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 0; align-items: start; }

.rg-col-label { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.16em; color: var(--color-muted); margin-bottom: 0.85rem; }

.rg-col-spacer { display: flex; align-items: center; justify-content: center; padding-top: 2.5rem; color: rgba(var(--color-ink-rgb),0.15); font-family: 'JetBrains Mono', monospace; font-size: 1.2rem; }

/* A single max-content grid track sizes every button in the column to
   whichever label is longest — pieces read as "as wide as their text
   needs," not stretched to fill the column, and not individually ragged
   either since every row shares that one track width. */
.rg-col { display: grid; grid-template-columns: max-content; gap: 10px; max-width: 100%; }

/* Pieces rest close to the shared centre gap (not the outer page edges) so
   a modest drag is enough to reach across and try a connection — see the
   pointer-drag handling in app.js. */
.rg-col--left  { justify-content: end; }

.rg-col--right { justify-content: start; }

/* Puzzle-piece look, drawn from the actual asset (data/pictures/puzzle_pieces.svg):
   each pair gets its own card silhouette — see PUZZLE_LEFT_PATHS /
   PUZZLE_RIGHT_PATHS in app.js — so no two roles in the same field share a
   shape, and a correct pair always shares one (both cropped from the same
   source row). The SVG *is* the button: it's stretched absolutely behind
   the label with no separate rectangular card, so the text sits directly
   on the piece. A short scale-pulse on `.rg-piece-snap` plays once a pair
   locks in, reading as the two halves snapping together. Buttons are also
   freely draggable (see app.js) — dropped onto the right opposite piece,
   they trigger the same match check as a click; dropped anywhere else,
   they animate back home via the transform transition below. */
.rg-item { position: relative; min-height: 80px; max-width: 420px; box-sizing: border-box; display: flex; align-items: center; background: none; border: none; padding: 0.9rem 1.3rem; text-align: left; font-family: 'Source Serif 4', Georgia, serif; font-size: 0.98rem; color: var(--color-ink); cursor: grab; transition: transform 0.22s ease, opacity 0.15s; line-height: 1.4; touch-action: none; user-select: none; }

.rg-item.dragging { transition: none; cursor: grabbing; z-index: 20; filter: drop-shadow(0 8px 16px rgba(var(--color-ink-rgb),0.28)); }

.rg-piece-icon { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

.rg-piece-icon path {
  fill: var(--color-cream-panel);
  stroke: rgba(var(--color-ink-rgb),0.28);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transition: fill 0.15s, stroke 0.15s, stroke-width 0.15s;
}

.rg-item:hover:not(:disabled) .rg-piece-icon path { fill: var(--color-cream-hover); stroke: rgba(var(--color-ink-rgb),0.45); }

/* `min-width: 0` overrides the flexbox default of refusing to shrink below
   the text's unwrapped width — without it, long labels blow past the
   piece's own edge instead of wrapping inside it. */
.rg-item-text { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }

/* Fixed-length fallback only — the real, width-proportional clearance
   (connector knob needs ~25% of the button's own width; the right piece's
   flat edge needs ~10%, see puzzlePieceIconSVG's comment in app.js) is set
   in JS as inline px via a ResizeObserver on each .rg-item. Percentage
   padding looks like the obvious fix (the SVG behind the text scales with
   preserveAspectRatio="none", so the knob is genuinely a fixed *fraction*
   of the width) but percentages can't be resolved during a fit-content /
   max-content sizing pass, so browsers treat them as 0 there — any
   auto-sized ancestor that needs this button's preferred size (the board's
   grid-template-columns:max-content column, or .rg-matched-pair sizing
   itself around its two children once a pair locks in) under-measures it,
   and the real padding only appears in final layout, after the ancestor
   already committed to a too-narrow box. That is what caused matched pairs
   to overflow their own row and bleed into their neighbor. Pixel padding
   has no such ambiguity, hence computing it in JS instead. */
.rg-item--left  { padding-right: 3.4rem; }

.rg-item--right { padding-left: 3.4rem; text-align: right; }

.rg-item.selected .rg-piece-icon path { fill: rgba(var(--color-ink-rgb),0.14); stroke: var(--color-ink); stroke-width: 2.5; }

.rg-item.matched { opacity: 0.6; cursor: default; }

.rg-item.matched .rg-item-text { text-decoration: line-through; text-decoration-color: rgba(var(--color-ink-rgb),0.3); }

.rg-item.matched .rg-piece-icon path { fill: rgba(58,107,74,0.22); stroke: #3a6b4a; stroke-width: 2; }

.rg-item.wrong-flash .rg-piece-icon path { fill: rgba(var(--color-accent-rgb),0.18); stroke: var(--color-accent); stroke-width: 2; }

@keyframes rg-piece-snap {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08); }
  60%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

.rg-piece-icon.rg-piece-snap { animation: rg-piece-snap 0.5s ease; }

/* Solved pairs relocate here, at the top of the play area — each is
   pulled into one flex row so the two pieces sit flush against each
   other (a small negative margin lets the knob visibly tuck into the
   socket), reading as a single locked unit instead of two separate
   greyed-out rows left behind in their old columns. */
.rg-matched-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; margin-bottom: 1.25rem; min-height: 0; transition: margin 0.2s ease; }

.rg-matched-row:empty { margin-bottom: 0; }

/* flex-shrink:0: a pair is itself a flex item of the wrapping
   .rg-matched-row, which already wraps pairs onto new lines when a row
   runs out of room — nothing should additionally be shrinking them. */
.rg-matched-pair { display: flex; align-items: center; flex-shrink: 0; animation: rg-pair-arrive 0.35s ease; }

/* transform, not a negative margin: margins (including negative ones) feed
   into fit-content sizing passes the same way padding does, so this has
   the same ancestor-under-measures-it failure mode described above. A
   transform only shifts paint, never the layout box, so the pair still
   reports its true full width to the flex-wrap row while the piece still
   visually tucks in by 14px. */
.rg-matched-pair .rg-item--right { transform: translateX(-14px); }

@keyframes rg-pair-arrive {
  0%   { opacity: 0; transform: translateY(-10px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.rg-complete { margin-top: 2rem; background: rgba(58,107,74,0.08); border: 1px solid rgba(58,107,74,0.25); border-left: 4px solid #3a6b4a; padding: 1.5rem 2rem; }

.rg-complete-hed { font-family: 'Playfair Display', Georgia, serif; font-size: 1.3rem; font-weight: 700; color: #3a6b4a; margin-bottom: 0.4rem; }

.rg-complete-sub { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.95rem; color: var(--color-muted-dark); }

/* The two side-by-side columns need up to 420+40+420=880px to sit next to
   each other without the right one overflowing off-screen. A plain
   viewport @media query got this wrong once already: the *available*
   width is the viewport minus the page's own padding, which isn't a fixed
   offset (it changes at other breakpoints), so a viewport-width cutoff
   left a gap where the columns still overflowed. A container query
   measures this section's own actual box, so it stacks exactly when it
   needs to regardless of surrounding page padding. */
.role-game-section { container-type: inline-size; }

@container (max-width: 940px) {
  .rg-board { grid-template-columns: 1fr; row-gap: 2rem; }
  .rg-col-spacer { display: none; }
  .rg-col { grid-template-columns: 1fr; justify-content: stretch; }
  .rg-item { max-width: 100%; }
  .rg-matched-pair { width: 100%; }
  .rg-matched-pair .rg-item { max-width: none; flex: 1 1 0; }
}

.finding-header { display: flex; justify-content: space-between; align-items: baseline; }

.finding-toggle-row { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.1rem; }

.card-toggle-icon { font-family: 'JetBrains Mono', monospace; font-size: 2rem; font-weight: 700; color: var(--color-blue); line-height: 1; }

.toggle-label { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.14em; color: var(--color-blue); }

.finding-chapter { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.14em; opacity: 0.7; }

.finding-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 0.85rem 0; border-top: 1px solid rgba(var(--color-ink-rgb),0.07); border-bottom: 1px solid rgba(var(--color-ink-rgb),0.07); }

.finding-stat { display: flex; flex-direction: column; gap: 3px; }

.fstat-label { font-family: 'JetBrains Mono', monospace; font-size: 0.52rem; letter-spacing: 0.1em; color: var(--color-muted); line-height: 1.3; }

.fstat-value { font-family: 'Playfair Display', Georgia, serif; font-size: 1.05rem; font-weight: 700; line-height: 1.1; }

#company-bubbles .bp-card { background: transparent; border: none; border-top: 2px solid; padding: 1rem 0 0.25rem; }

#company-bubbles .bp-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid rgba(var(--color-ink-rgb),0.1); }

#company-bubbles .bp-head-name { display: flex; align-items: center; gap: 0.9rem; }

#company-bubbles .bp-company { font-family: 'Playfair Display', Georgia, serif; font-size: 1.3rem; font-weight: 700; color: var(--color-ink); }

#company-bubbles .bp-sector { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em; color: var(--color-muted); }

#company-bubbles .bp-jobs { text-align: right; flex-shrink: 0; }

#company-bubbles .bp-jobs-n { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; font-weight: 900; line-height: 1; }

#company-bubbles .bp-jobs-l { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; letter-spacing: 0.1em; color: var(--color-muted); }

#company-bubbles .bp-badge { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.1em; padding: 4px 10px; border: 1px solid; border-radius: 2px; margin-bottom: 0.85rem; }

#company-bubbles .bp-reason { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.92rem; font-style: italic; color: var(--color-muted-dark); line-height: 1.55; margin-bottom: 1rem; }

#company-bubbles .bp-roles { display: grid; grid-template-columns: 1fr 28px 1fr; gap: 1rem; align-items: start; margin-bottom: 1rem; }

#company-bubbles .bp-role-col { display: flex; flex-direction: column; gap: 5px; padding: 0.7rem 0.9rem; }

#company-bubbles .bp-role-out { border: 1px solid rgba(var(--color-accent-rgb),0.25); border-left: 3px solid var(--color-accent); background: rgba(var(--color-accent-rgb),0.06); }

#company-bubbles .bp-role-in { border: 1px solid rgba(var(--color-blue-rgb),0.25); border-left: 3px solid var(--color-blue); background: rgba(var(--color-blue-rgb),0.06); }

#company-bubbles .bp-role-tag { font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; letter-spacing: 0.1em; color: var(--color-muted); }

#company-bubbles .bp-role-text { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.88rem; color: var(--color-ink); line-height: 1.45; }

#company-bubbles .bp-role-arrow { text-align: center; color: rgba(var(--color-ink-rgb),0.3); font-size: 1rem; padding-top: 0.7rem; }

#company-bubbles .bp-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.5rem 0; margin-bottom: 0.75rem; border-bottom: 1px solid rgba(var(--color-ink-rgb),0.08); }

#company-bubbles .bp-row-label { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.1em; color: var(--color-muted); }

#company-bubbles .bp-row-value { font-family: 'Playfair Display', Georgia, serif; font-size: 1.05rem; font-weight: 700; }

#company-bubbles .bp-quote { padding-top: 0.25rem; }

#company-bubbles .bp-quote p { font-family: 'Source Serif 4', Georgia, serif; font-size: 0.95rem; font-style: italic; color: var(--color-ink); line-height: 1.55; margin-bottom: 0.3rem; }

#company-bubbles .bp-quote cite { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.08em; color: var(--color-muted); font-style: normal; }

#scrolly-intro { position: relative; height: 400vh; background: var(--color-cream); }

#scrolly-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--color-cream); }

.s-scene { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(5px); transition: opacity 0.9s ease-in-out, transform 0.9s ease-in-out; pointer-events: none; }

.s-scene--active { opacity: 1; transform: translateY(0); pointer-events: auto; z-index: 2; }

.s-scene--past { opacity: 0; transform: translateY(-5px); transition: opacity 0.45s ease-in-out, transform 0.45s ease-in-out; }

.s-masthead { flex: 0 0 auto; max-width: 1100px; width: 100%; margin: 0 auto; padding: 1.25rem 2rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(var(--color-ink-rgb), 0.08); font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.65rem; color: var(--color-muted); letter-spacing: 0.18em; }

.s-body { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 1100px; margin: 0 auto; padding: 1rem 2rem; }

.s-body--center { align-items: flex-start; }

.s-body--text { max-width: 820px; }

.s-text-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.s-chart-col { flex: 1; min-width: 0; }

#scrolly-stage .hero-eyebrow { color: var(--color-accent); margin-bottom: 0.85rem; }

#scrolly-stage .hero-title { font-size: clamp(4rem, 10.5vw, 9rem); color: var(--color-ink); line-height: 0.93; margin-bottom: 1.5rem; }

#scrolly-stage .hero-title em { color: var(--color-accent); }

#scrolly-stage .hero-sub { color: var(--color-muted-dark); font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 50ch; line-height: 1.65; }

#scrolly-stage .hook-quote { background: rgba(var(--color-accent-rgb), 0.06); border: 1px solid rgba(var(--color-accent-rgb), 0.2); margin-top: 0; margin-bottom: 0; max-width: 66ch; padding: 1.5rem 1.75rem; }

#scrolly-stage .hook-quote .hook-label { color: var(--color-accent); }

#scrolly-stage .hook-quote .hook-text { color: var(--color-muted-dark); font-size: 1.3rem; line-height: 1.65; }

.s-title-recede { font-size: clamp(2.2rem, 4.5vw, 4rem) !important; line-height: 1.0 !important; opacity: 0.2; margin-bottom: 1.5rem; }

.s-big-q { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(4rem, 10.5vw, 9rem); font-weight: 700; color: var(--color-ink); line-height: 0.95; margin-top: 0.5rem; }

.s-body-reveal { font-family: 'Source Serif 4', Georgia, serif; font-size: 1rem; line-height: 1.72; color: var(--color-muted-dark); margin-bottom: 0.9rem; opacity: 0; transform: translateY(8px); transition: opacity 0.65s ease-in-out, transform 0.65s ease-in-out; }

.s-body-reveal.s-reveal { opacity: 1; transform: translateY(0); }

.s-body-reveal strong { color: var(--color-ink); font-weight: 600; }

#scrolly-stage .hero-hook-heading { color: var(--color-ink); }

.s-today-heading { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.8rem, 3.8vw, 3rem); font-weight: 700; color: var(--color-ink); margin-bottom: 1.5rem; line-height: 1.1; }

#s-today .hero-hook p { color: var(--color-muted-dark); font-size: 1rem; }

#s-today .hero-hook p + p { margin-top: 0.85rem; }

.s-rhet-wrap { display: flex; flex-direction: column; gap: 0.15rem; }

.s-rhet-q { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 700; font-style: italic; color: var(--color-ink); line-height: 1.12; opacity: 0; transform: translateX(-14px); transition: opacity 0.55s ease-in-out, transform 0.55s ease-in-out; }

.s-rhet-q.s-reveal { opacity: 1; transform: translateX(0); }

.s-simon-quote { margin: 0 !important; max-width: 700px; }

#s-simon .hook-quote .hook-text { font-size: 1.4rem; line-height: 1.7; }

#s-scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0.65; transition: opacity 0.5s ease; }

.s-scroll-label { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.56rem; letter-spacing: 0.22em; color: var(--color-muted-dark); }

.s-scroll-line { width: 1px; height: 38px; background: var(--color-muted-dark); transform-origin: top; animation: s-pulse 1.6s ease-in-out infinite; }

@keyframes s-pulse { 0%, 100% { opacity: 0.2; transform: scaleY(0.5); } 55%       { opacity: 0.7; transform: scaleY(1); } }

#s-progress { position: absolute; right: 1.75rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 9px; z-index: 10; }

.s-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--color-ink-rgb), 0.15); transition: background 0.3s, transform 0.3s; }

.s-dot--active { background: var(--color-accent); transform: scale(1.5); }

#s-thuha { overflow: hidden; }

.s-thuha-kicker { position: relative; z-index: 2; flex: 0 0 auto; padding: 1.75rem 2rem 0; }

.s-thuha-kicker .s-title-recede { font-size: clamp(1.15rem, 2vw, 1.6rem) !important; opacity: 0.28; margin-bottom: 0; }

#s-thuha .hook-label { font-size: 0.78rem; letter-spacing: 0.13em; margin-bottom: 0.8rem; }

.s-body--thuha-quote { position: relative; z-index: 5; justify-content: center; align-items: center; max-width: 720px; }

.clippings-stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.clipping { position: absolute; width: 280px; max-width: 34vw; background: var(--color-cream); padding: 5px; border: 1px solid rgba(var(--color-ink-rgb), 0.15); box-shadow: 0 12px 30px rgba(var(--color-ink-rgb), 0.3); opacity: 0; will-change: transform, opacity; transition: transform 0.9s cubic-bezier(0.22, 0.9, 0.24, 1), opacity 0.5s ease-out; }

.clipping img { display: block; width: 100%; height: auto; }

#scrolly-stage .hook-quote#headline-quote { position: relative; z-index: 5; background: var(--color-cream); border-color: rgba(var(--color-accent-rgb), 0.35); box-shadow: 0 20px 48px rgba(var(--color-ink-rgb), 0.28); opacity: 0; transform: translateY(22px) scale(0.94); transition: opacity 0.75s ease-out, transform 0.75s ease-out; }

#scrolly-stage .hook-quote#headline-quote.hq-visible { opacity: 1; transform: translateY(0) scale(1); }

.s-body--indrev { justify-content: center; padding-top: 2rem; padding-bottom: 2rem; }

.s-indrev-header { margin-bottom: 0.65rem; }

.s-indrev-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.3rem, 2.8vw, 2.2rem); font-weight: 700; color: var(--color-ink); line-height: 1.1; margin-top: 0.25rem; }

.s-indrev-split { display: flex; flex-direction: row; gap: 3.5rem; align-items: flex-start; }

.data-ref { font-weight: 600; padding: 0 2px; border-radius: 2px; cursor: default; transition: background 0.2s ease, color 0.2s ease; }

.data-ref--active { background: rgba(var(--color-accent-rgb), 0.13); color: var(--color-accent); }

@media (max-width: 860px) {
  .s-indrev-split { flex-direction: column; gap: 1rem; overflow-y: auto; }
  .s-chart-col { max-width: 400px; width: 100%; }
  #scrolly-stage .hero-title { font-size: clamp(3rem, 9vw, 5.5rem); }
  .s-rhet-q { font-size: clamp(1.9rem, 6.5vw, 3.2rem); }
}

@media (max-width: 600px) { .pivot-stats-row { flex-direction: column; gap: 1.5rem; } }

.s-combined-body { position: relative !important; padding: 0 !important; max-width: 100% !important; width: 100%; align-items: stretch !important; }

.sc-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.65s ease-in-out; }

.sc-layer.sc-visible { opacity: 1; pointer-events: auto; }

.sc-layer-inner { width: 100%; max-width: 1100px; padding: 2rem; }

.sc-layer--intro { transition: opacity 0.65s ease-in-out, filter 0.8s ease-in-out; }

.sc-layer--intro.sc-blurred { filter: blur(7px); }

.sc-intro-hed { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.8rem, 3.8vw, 3rem); font-weight: 700; color: var(--color-ink); margin-bottom: 1.5rem; line-height: 1.1; }

.sc-intro-p { font-family: 'Source Serif 4', Georgia, serif; font-size: 1rem; color: var(--color-muted-dark); line-height: 1.72; max-width: 65ch; margin-bottom: 0.85rem; }

.sc-qs-hint { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.2rem; }

.sc-q-hint { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(0.9rem, 1.5vw, 1.2rem); font-style: italic; color: var(--color-muted); opacity: 0; transform: translateY(5px); transition: opacity 0.5s ease, transform 0.5s ease, color 0.5s ease; }

.sc-q-hint.sc-visible { opacity: 1; transform: translateY(0); }

.sc-q-hint--accent { color: var(--color-accent) !important; opacity: 1 !important; transform: translateY(0) !important; }

.sc-q-hl { background: rgba(var(--color-accent-rgb), 0.14); color: var(--color-accent); font-style: italic; padding: 0 3px; border-radius: 2px; transition: background 0.9s ease, color 0.9s ease; }

.sc-q-hl.sc-hl-off { background: transparent; color: inherit; }

#sc-simon-layer .sc-layer-inner { position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; }

.quote-clippings-stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.quote-clip { position: absolute; width: 300px; max-width: 36vw; background: var(--color-cream); border: 1px solid rgba(var(--color-ink-rgb), 0.15); box-shadow: 0 14px 34px rgba(var(--color-ink-rgb), 0.22); padding: 1rem 1.15rem; opacity: 0; pointer-events: none; will-change: transform, opacity; transition: transform 0.9s cubic-bezier(0.22, 0.9, 0.24, 1), opacity 0.5s ease-out; }

/* Perspective-tinted cards: light green for hype, light red for demonization,
   light yellow for the balanced take. */
.quote-clip.qc-hype { background: #e9f6ec; border-color: rgba(60, 115, 80, 0.28); }

.quote-clip.qc-demonization { background: #fbeae7; border-color: rgba(161, 68, 47, 0.28); }

.quote-clip.qc-balanced { background: #fbf3d9; border-color: rgba(163, 130, 28, 0.28); }

.qc-tag { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.45rem; padding-right: 2.6rem; }

.qc-text { font-family: 'Source Serif 4', Georgia, serif; font-style: italic; font-size: 0.95rem; line-height: 1.5; color: var(--color-muted-dark); margin-bottom: 0.55rem; }

.qc-pos { background: rgba(77, 138, 99, 0.15); color: #3c7350; font-style: normal; padding: 0 3px; border-radius: 2px; }

.qc-neg { background: rgba(181, 83, 63, 0.15); color: #a1442f; font-style: normal; padding: 0 3px; border-radius: 2px; }

.qc-name { display: inline-block; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.68rem; letter-spacing: 0.05em; color: var(--color-ink); border-bottom: 1px dashed rgba(var(--color-ink-rgb), 0.35); }

.qcs-landed .qc-name { pointer-events: auto; cursor: help; }

.qcs-landed .qc-name:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* Mood icon: pinned to the card's top-right corner, overlapping just enough
   to read as a stamp/sticker without ever crossing over the quote text
   underneath (the tag line reserves clearance via padding-right above).
   The wrapper clips to a circle so source PNGs with extra padding around
   the face (e.g. neutral_icon.png) don't show a visible white edge — the
   inner img is zoomed with object-fit: cover to fill that circle. */
.qc-icon-wrap { position: absolute; top: -14px; right: -14px; width: 3.4rem; height: 3.4rem; border-radius: 50%; overflow: hidden; filter: drop-shadow(0 4px 8px rgba(var(--color-ink-rgb), 0.28)); pointer-events: none; }

.qc-icon { display: block; width: 100%; height: 100%; object-fit: cover; }

.quote-clip.qc-hype .qc-icon-wrap { transform: rotate(8deg); }

.quote-clip.qc-demonization .qc-icon-wrap { transform: rotate(-8deg); }

.quote-clip.qc-balanced .qc-icon-wrap { transform: rotate(6deg); }

.quote-clip.qc-balanced .qc-icon { transform: scale(1.22); }

@media (max-width: 1000px) { .quote-clip { display: none; } }



.chapter-inner, .nav-inner, .pivot-inner {
  max-width: min(1200px, 85Svw) !important;
}

.chapter-inner .body-text,
.chapter-inner .lede-stat,
.chapter-inner .hook-quote,
.chapter-inner .ch-bridge,
.chapter-inner .ch-explore-lead,
.chapter-inner .pullquote,
.chapter-inner .source-note,
.chapter-inner .ch02-lede,
.chapter-inner .ch02-quote-box,
.chapter-inner .oracle-anchor-card,
.chapter-inner .tidbit {
  max-width: none !important;
}

/* Headlines default to a narrow 28ch cap (site-wide rule above). That
   reads fine where a chapter deliberately wants a tight, punchy title
   (Chapter 04 sets its own inline max-width:22ch), but on chapters
   without that override the headline was capped narrower than the
   body text sitting right below it, giving a "two column width" look.
   Let it run the full section width on chapters 01–03. */
#ch-layoffs .chapter-title,
#ch-reality .chapter-title,
.pivot-inner .chapter-title {
  max-width: none !important;
}


.oracle-anchor-card {
  background: var(--color-ink);
  border-radius: 2px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 0.75rem;
  border-top: 3px solid var(--color-accent);
}

.oa-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.75rem; }

.oa-company { font-family: 'Playfair Display', Georgia, serif; font-size: 1.4rem; font-weight: 700; color: var(--color-cream); }

.oa-jobs-wrap { text-align: right; }

.oa-jobs { font-family: 'Playfair Display', Georgia, serif; font-size: 1.4rem; font-weight: 900; color: var(--color-accent); }

.oa-jobs-label { font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; color: var(--color-muted-light); letter-spacing: 0.1em; margin-left: 0.4rem; }

.oa-quote { font-family: 'Playfair Display', Georgia, serif; font-style: italic; color: var(--color-cream); font-size: 1.05rem; margin-bottom: 0.75rem; }

.oa-attr { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; color: var(--color-muted-light); letter-spacing: 0.08em; }


.zoom-out-label {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--color-muted);
  margin: 1.75rem 0;
}


.pivot-section { background: var(--color-cream); padding: 4rem 2rem; }

/* Text (eyebrow, bridge, title, body copy, question) reads left-aligned,
   matching every other chapter. Visuals (stock widget, quote card, stat
   card) stay centered as blocks on the page — each sets its own
   text-align where its content should be centered too. */
.pivot-inner { margin: 0 auto; text-align: left; }

.pivot-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.18em; color: var(--color-accent); margin-bottom: 1rem; }

.pivot-inner .chapter-title { margin: 0 0 1.25rem; }
.pivot-inner .ch-bridge { margin: 0 0 1rem; }
.pivot-inner #ai_stocks { max-width: 800px; margin: 2rem auto 0; }
.pivot-kicker-block { margin-top: 3rem; text-align: center; }
.pivot-kicker-block .lo-ceo-quote { max-width: none; }
.pivot-card { text-align: center; }
.pivot-inner .pivot-question { margin: 3rem 0 0.75rem; max-width: none; }

.pivot-question {
  font-family: 'Playfair Display', Georgia, serif;
  
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--color-ink);
  max-width: none;
 
}
.pivot-question em {
  color: var(--color-accent);
 
}

.pivot-turn-arrow {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem;
  color: var(--color-accent);
  margin-bottom: 1.5rem;
  animation: pivot-bounce 1.6s ease-in-out infinite;
}
@keyframes pivot-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ── Compact pivot reveal card (replaces the old full-width slope chart) ── */
.pivot-card {
  background: var(--color-ink);
  border-radius: 16px;
  padding: 2.5rem 3rem;
  max-width: 760px;
  margin: 0 auto;
}

.pivot-card-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  margin-bottom: 1.5rem;
}

.pivot-stats-row {
  display: flex;
  justify-content: center;
  gap: 3.5rem;
  margin-bottom: 2rem;
}

.pivot-stat { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }

.pivot-stat-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  line-height: 1;
}

.pivot-stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: rgba(238,241,246,0.6);
}

.pivot-punchline {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  color: var(--color-cream);
  margin: 0;
}


.ch-bridge {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--color-muted-dark);
  margin: 0 0 1rem;
}


.lede-stat {
  font-size: 1.15rem;
  color: var(--color-ink);
}

.lede-stat strong { color: var(--color-accent); }


.ch-explore-lead {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-muted-dark);
  margin: 2.5rem 0 0;
}


/* ══════════════════════════════════════════════════════════════════════
   CHART BREAKOUT — charts need more room than prose does. Text stays at
   820px for readability; these specific containers break out to 1100px
   (or 100vw on narrower screens), centered on the same midpoint as the
   text column around them. This is deliberate asymmetry, not the earlier
   bug — a chart running wider than the paragraph above it is normal
   editorial layout; text disagreeing with other text was the actual bug.
   ══════════════════════════════════════════════════════════════════════ */
.chapter-inner #stream-layer,
.chapter-inner #company-bubbles
{position: relative;
  
  /* Keeps your preferred wide breakout style */
  width: 100vw;
  max-width: 1100px; 
  
  /* Fixes the tracking alignment without breaking JavaScript coordinate math */
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  margin-right: 0;
}

.chapter-inner .rc-root,
.chapter-inner #enrollment-explore {
  width: 100vw;
  max-width: 1100px;
  margin-left: 50%;
  transform: translateX(-50%);
}

#company-bubbles {
  position: relative !important;
  width: 100vw !important;
  max-width: min(1600px, 94vw) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ==========================================================================
   FIX: Force map to full width and align with text
   ========================================================================== */

#company-bubbles {
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  display: block !important;
}


/* ==========================================================================
   FORCE FULL WIDTH: Remove grid engine restrictions
   ========================================================================== */

#company-bubbles .bubbles-shell {
  display: block !important; /* Kill the grid layout */
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}


#company-bubbles .bubbles-legend {
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important; /* Center the legend items */
  margin-bottom: 1.5rem !important;
}


#company-bubbles .bubbles-canvas-wrap {
  width: 100% !important;
  display: block !important;
}


#company-bubbles .leaflet-container {
  width: 100% !important;
  height: 100% !important;
  margin: 0 auto !important;
}

/* Style the bubbles to look more professional */
.bubble {
  fill-opacity: 0.7;
  stroke: #fff;
  stroke-width: 1px;
  cursor: pointer;
  transition: fill-opacity 0.2s;
}


.bubble:hover {
  fill-opacity: 1;
  stroke-width: 2px;
}


/* Ensure the map background is neutral */
.leaflet-container {
  background: #f4f5f7 !important;
}

.logo-marker-container {
  background: transparent !important;
  border: none !important;
  transition: transform 0.2s ease;
}


.logo-marker-container:hover {
  transform: scale(1.2);
  z-index: 1000 !important;
}


.logo-wrapper { 
    overflow: hidden; 
    border-radius: 50%; 
    background: white; 
    border: 3px solid #fff; /* Slightly thicker border for better definition */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    padding: 4px; /* Adds space between the logo and the circle edge */
}


.logo-wrapper img {
    width: 100%; 
    height: 100%; 
    object-fit: contain; /* Changed from cover to contain to prevent logo cropping */
}
#company-bubbles .bubbles-shell {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 1.25rem !important;
}
#company-bubbles .bubbles-takeaway,
#company-bubbles .map-frame-wrapper {
  width: 100% !important;
  flex: none !important;
}
.logo-wrapper img {
    width: 100%; height: 100%; object-fit: contain;
}
#company-bubbles,
#company-bubbles .bubbles-root {
  width: 100% !important;
  max-width: none !important;
  position: static !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
}
.pivot-connector {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--color-muted);
  text-align: center;
  margin: 0 0 1.5rem;
}
.pivot-glossary {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: rgba(238,241,246,0.45);
  margin-top: 1.5rem;
}
#dashboard-view .chapter-inner {
  max-width: min(1200px, 92vw) !important;
  margin: 0 auto !important;
}
#dashboard-view .enroll-bottom-text,
#dashboard-view .enroll-question-row,
#dashboard-view .enroll-chart-area {
  max-width: none !important;
}
#dashboard-view section .chapter-title {
  margin-bottom: 1rem;
}
#dashboard-view section .body-text {
  margin-bottom: 1.25rem;
}
.logo-badge {
  position: relative; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(20,20,30,0.25);
  transition: transform 0.15s ease;
  overflow: hidden;
}
.logo-badge:hover { transform: scale(1.14); z-index: 9999 !important; }
.logo-badge img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 15%;
  box-sizing: border-box;
  background: #fff;
  border-radius: 50%;
}

/* ══════════════════════════════════════════════════════════════════════
   EXPLORE DASHBOARD — unified KPI strip + section chrome
   Ties the three explore charts (enrollment / employment / country race)
   together visually: one intro header, one KPI strip computed from the
   same data the charts load, then lightweight in-page section labels
   instead of three repeated full chapter headers. Colors match the
   SECTOR_COLOURS / FIELD_COLOURS palettes used in the chart JS files, so
   a category is the same color everywhere on the tab.
   ══════════════════════════════════════════════════════════════════════ */

.dash-kpi-section {
  max-width: min(1200px, 92vw);
  margin: 0 auto 0.5rem;
  padding: 0 2rem;
  /* #chapter-nav is position:sticky and sits on top of the page content —
     without this, scrollIntoView({block:"start"}) lines this section's
     top edge up exactly where the nav covers it, clipping the KPI row. */
  scroll-margin-top: 90px;
}

.dash-kpi-row {
  background: var(--color-ink);
  border-radius: 4px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 2rem 1.5rem;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dash-kpi-stat {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 0.5rem 1rem;
  position: relative;
}

.dash-kpi-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -0.25rem;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: rgba(238,241,246,0.12);
}

@media (max-width: 800px) {
  .dash-kpi-stat:not(:last-child)::after { display: none; }
  .dash-kpi-row { padding: 1.75rem 1rem; }
}

.dash-kpi-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  color: var(--color-cream);
  line-height: 1;
}

.dash-kpi-label {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: rgba(238,241,246,0.55);
  max-width: 20ch;
  line-height: 1.5;
}

.dash-kpi-note {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--color-muted);
  text-align: center;
  margin: 1rem auto 0;
  max-width: 60ch;
}

/* Section chrome — replaces the repeated full chapter-eyebrow/chapter-title
   pattern per chart so the three views read as one dashboard, not three
   separate pages stapled together. */
.dash-section { padding-top: 2.5rem; padding-bottom: 1.5rem; }

.dash-section-label {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

.dash-section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

/* .lo-section-divider / .lo-divider-label are defined inline on the page
   itself (chapter 01 reuses them); this just re-centers them when they sit
   directly inside #dashboard-view rather than inside a .chapter-inner. */
#dashboard-view > .lo-section-divider {
  max-width: min(1200px, 92vw);
  margin-left: auto;
  margin-right: auto;
  padding: 0 2rem;
}


/* ══════════════════════════════════════════════════════════════════════
   FIELD QUIZ — floating mascot FAB + playful modal quiz (js/field-quiz.js)
   Sticker/tape motifs echo the scrapbook clippings in the hero; the
   mascot is an animated blob character, not a chat-widget icon.
   ══════════════════════════════════════════════════════════════════════ */

.fq-fab {
  position: fixed;
  left: 1.5rem;
  bottom: 1.5rem;
  /* Deliberately very high — this needs to sit above every other popup,
     tooltip, or hover-card anywhere else on the page (e.g. the company
     bubbles chart's hover tooltips), not just the site's own nav/chrome. */
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--color-ink);
  border: 1px solid rgba(var(--color-white-rgb),0.1);
  border-radius: 999px;
  padding: 0.45rem 1.2rem 0.45rem 0.45rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(var(--color-ink-rgb),0.35);
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease;
}
.fq-fab:hover { transform: translateY(-3px) rotate(-2deg); box-shadow: 0 10px 26px rgba(var(--color-ink-rgb),0.4); }
/* .fq-fab sets display:flex unconditionally above, which otherwise beats
   the browser's default [hidden] stylesheet rule — same fix as
   .fq-overlay[hidden] below. Needed so the FAB stays actually invisible
   pre-chapter-3 rather than just losing pointer/layout intent. */
.fq-fab[hidden] { display: none; }

.fq-fab-mascot {
  position: relative;
  width: 44px; height: 44px;
  flex-shrink: 0;
}

.fq-fab-label {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--color-cream);
  white-space: nowrap;
}

.fq-fab-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 2px solid var(--color-accent);
  opacity: 0.6;
  animation: fq-pulse-ring 1.8s ease-out infinite;
  pointer-events: none;
}

/* Once the visitor has opened the quiz at least once, the FAB collapses to
   just the mascot icon — the label's job (explaining what this thing is)
   is done, and an icon-only pill is less visually noisy for the rest of
   the scroll. */
.fq-fab.fq-fab--compact { padding: 0.45rem; gap: 0; }
.fq-fab.fq-fab--compact .fq-fab-label { display: none; }

@media (max-width: 640px) {
  .fq-fab { left: 1rem; bottom: 1rem; padding: 0.4rem; }
  .fq-fab-label { display: none; }
}

.fq-overlay {
  position: fixed; inset: 0;
  /* Highest possible — this must beat any other tooltip/popup on the
     page (e.g. company-bubble hover cards) that might have its own
     high z-index, not just the site's normal layout chrome. */
  z-index: 2147483647;
  background: rgba(15,45,74,0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  animation: fq-fade-in 0.15s ease;
}
.fq-overlay[hidden] { display: none; }

.fq-modal {
  position: relative;
  background: var(--color-cream);
  border-radius: 20px;
  max-width: 480px; width: 100%;
  padding: 2.25rem 1.75rem 1.75rem;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  animation: fq-pop-in 0.28s cubic-bezier(.2,1.4,.4,1);
}

.fq-close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(var(--color-ink-rgb),0.06); border: none;
  font-size: 1.3rem; line-height: 1;
  color: var(--color-muted);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, background 0.15s;
}
.fq-close:hover { background: rgba(var(--color-ink-rgb),0.12); color: var(--color-ink); transform: rotate(90deg); }

.fq-step-count {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--color-accent);
  margin-bottom: 1.25rem;
}

.fq-mascot-row {
  display: flex; align-items: flex-end; gap: 0.9rem;
  margin-bottom: 1.75rem;
}
.fq-mascot { width: 76px; height: 88px; flex-shrink: 0; }

/* Comic-style speech bubble with a tail pointing at the mascot, instead
   of a flat rectangle — small rotation keeps it feeling hand-placed. */
.fq-speech {
  position: relative;
  background: #fff;
  border: 2px solid var(--color-ink);
  border-radius: 4px 22px 22px 22px;
  padding: 1rem 1.15rem;
  flex: 1;
  transform: rotate(-0.6deg);
  box-shadow: 3px 3px 0 rgba(var(--color-ink-rgb),0.1);
}
.fq-speech::before {
  content: '';
  position: absolute; left: -9px; bottom: 14px;
  width: 16px; height: 16px;
  background: #fff;
  border-left: 2px solid var(--color-ink);
  border-bottom: 2px solid var(--color-ink);
  transform: rotate(45deg);
  border-radius: 0 0 0 4px;
}
.fq-speech p {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic; font-weight: 600;
  font-size: 1.02rem; color: var(--color-ink); line-height: 1.5;
}

/* ── Role cards: taped-on stickers, like the hero clippings ── */
.fq-role-row { display: flex; gap: 1.1rem; }
.fq-role-btn {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  background: #fff;
  border: 2px solid var(--color-ink);
  border-radius: 12px;
  padding: 1.6rem 1rem 1.3rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem; letter-spacing: 0.06em;
  color: var(--color-ink);
  box-shadow: 4px 4px 0 rgba(var(--color-ink-rgb),0.14);
  animation: fq-card-in 0.4s cubic-bezier(.2,1.4,.4,1) both;
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s;
}
.fq-tilt-a { transform: rotate(-2.5deg); animation-delay: 0.05s; }
.fq-tilt-b { transform: rotate(2deg);   animation-delay: 0.15s; }
.fq-role-btn:hover {
  transform: rotate(0deg) translateY(-4px) scale(1.03);
  box-shadow: 6px 6px 0 rgba(var(--color-ink-rgb),0.18);
  border-color: var(--color-accent);
}
.fq-role-emoji { font-size: 2.1rem; }
.fq-tape {
  position: absolute; top: -10px; left: 50%;
  width: 46px; height: 18px;
  background: rgba(255,209,102,0.75);
  border: 1px solid rgba(0,0,0,0.06);
  transform: translateX(-50%) rotate(-3deg);
}

/* ── Field / sector chips ── */
.fq-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
  margin-bottom: 1rem;
}
.fq-chip {
  display: flex; align-items: center; gap: 0.5rem;
  background: #fff;
  border: 2px solid var(--color-ink);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.85rem; color: var(--color-ink);
  text-align: left;
  box-shadow: 3px 3px 0 rgba(var(--color-ink-rgb),0.1);
  animation: fq-card-in 0.35s cubic-bezier(.2,1.4,.4,1) both;
  transition: transform 0.15s cubic-bezier(.34,1.56,.64,1), border-color 0.15s, box-shadow 0.15s;
}
.fq-chip:nth-child(10n+1) { animation-delay: 0.02s; }
.fq-chip:nth-child(10n+2) { animation-delay: 0.06s; }
.fq-chip:nth-child(10n+3) { animation-delay: 0.10s; }
.fq-chip:nth-child(10n+4) { animation-delay: 0.14s; }
.fq-chip:nth-child(10n+5) { animation-delay: 0.18s; }
.fq-chip:nth-child(10n+6) { animation-delay: 0.22s; }
.fq-chip:nth-child(10n+7) { animation-delay: 0.26s; }
.fq-chip:nth-child(10n+8) { animation-delay: 0.30s; }
.fq-chip:nth-child(10n+9) { animation-delay: 0.34s; }
.fq-chip:nth-child(10n+10){ animation-delay: 0.38s; }
.fq-chip:hover {
  transform: translateY(-3px) rotate(-1deg) scale(1.02);
  border-color: var(--chip-colour, var(--color-accent));
  box-shadow: 4px 4px 0 var(--chip-colour, rgba(var(--color-ink-rgb),0.15));
}
.fq-chip-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--chip-colour, var(--color-accent));
}

.fq-result-text {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.02rem; color: var(--color-ink); line-height: 1.6;
  text-align: center; margin-bottom: 1.25rem;
}

.fq-cta {
  display: block; width: 100%;
  background: var(--color-accent);
  color: #fff;
  border: 2px solid var(--color-ink);
  border-radius: 999px;
  padding: 0.9rem 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem; letter-spacing: 0.08em;
  box-shadow: 3px 3px 0 rgba(var(--color-ink-rgb),0.25);
  transition: transform 0.15s cubic-bezier(.34,1.56,.64,1), box-shadow 0.15s;
}
.fq-cta:hover  { transform: translateY(-2px); box-shadow: 4px 5px 0 rgba(var(--color-ink-rgb),0.3); }
.fq-cta:active { transform: translateY(1px); box-shadow: 1px 1px 0 rgba(var(--color-ink-rgb),0.3); }

.fq-back-link {
  display: block; margin: 0.85rem auto 0;
  background: none; border: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; letter-spacing: 0.06em;
  color: var(--color-muted);
  text-decoration: underline;
}
.fq-back-link:hover { color: var(--color-ink); }

/* ── Confetti burst behind the result text ── */
.fq-confetti { position: relative; height: 0; }
.fq-confetti span {
  position: absolute; top: -6px; left: 50%;
  width: 7px; height: 7px; border-radius: 2px;
  animation: fq-confetti-burst 0.7s ease-out both;
}
.fq-confetti span:nth-child(1) { background: #4f9cf9; animation-delay: 0.02s; --tx: -70px; --ty: -30px; --r: -80deg; }
.fq-confetti span:nth-child(2) { background: #e8834a; animation-delay: 0.06s; --tx: -35px; --ty: -55px; --r: 40deg; }
.fq-confetti span:nth-child(3) { background: #3db885; animation-delay: 0.03s; --tx: 0px;   --ty: -62px; --r: 120deg; }
.fq-confetti span:nth-child(4) { background: #e05fa0; animation-delay: 0.09s; --tx: 35px;  --ty: -55px; --r: -50deg; }
.fq-confetti span:nth-child(5) { background: #ffd166; animation-delay: 0.01s; --tx: 70px;  --ty: -30px; --r: 90deg; }
.fq-confetti span:nth-child(6) { background: #a855f7; animation-delay: 0.07s; --tx: 0px;   --ty: -10px; --r: -30deg; }

/* ── Mascot animation hooks ── */
.fq-blob-float { animation: fq-float 3s ease-in-out infinite; transform-origin: center; }
.fq-antenna-star { animation: fq-twinkle 1.6s ease-in-out infinite; transform-origin: center; }
.fq-eye-pupil { animation: fq-blink 4.5s ease-in-out infinite; transform-origin: 60px 78px; }
.fq-arm-left  { animation: fq-wave-left 2.2s ease-in-out infinite; transform-origin: 20px 76px; }
.fq-arm-right { animation: fq-wave-right 2.2s ease-in-out infinite; transform-origin: 100px 76px; }
.fq-mascot.fq-squish .fq-blob-body { animation: fq-squish-anim 0.45s cubic-bezier(.34,1.56,.64,1); transform-origin: 60px 129px; }

@keyframes fq-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(-2deg); }
}
@keyframes fq-twinkle {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.6; }
}
@keyframes fq-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  96%           { transform: scaleY(0.1); }
}
@keyframes fq-wave-left {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-18deg); }
}
@keyframes fq-wave-right {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(18deg); }
}
@keyframes fq-squish-anim {
  0%   { transform: scale(1,1); }
  30%  { transform: scale(1.18,0.82); }
  60%  { transform: scale(0.92,1.1); }
  100% { transform: scale(1,1); }
}
@keyframes fq-pulse-ring {
  0%   { transform: scale(0.9); opacity: 0.6; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes fq-pop-in {
  0%   { transform: scale(0.85) rotate(-2deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes fq-fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fq-card-in {
  0%   { opacity: 0; transform: translateY(10px) scale(0.9); }
  100% { opacity: 1; }
}
@keyframes fq-confetti-burst {
  0%   { transform: translate(-50%, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), var(--ty)) rotate(var(--r)); opacity: 0; }
}
.stock-bridge {
  max-width: 100%;
  margin: 0 0 2rem;
  text-align: left;
}
.stock-bridge-lede {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.5;
  color: #20242e;
  margin: 0 auto 2rem;
  max-width: 46ch;
}
.stock-bridge-chart {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.stock-bridge-caption {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #8a94a6;
  text-transform: uppercase;
  margin-top: 0.75rem;
}

/* ── Data & methodology modal ─────────────────────────────────────────── */
/* Any element with a [data-desc] attribute becomes a clickable trigger
   that opens the matching implementation/data/descriptions/*.md file. */
[data-desc] { cursor: pointer; text-decoration: underline; text-decoration-color: rgba(var(--color-accent-rgb),0.35); text-underline-offset: 3px; transition: color 0.15s; }
[data-desc]:hover { color: var(--color-accent); }

.desc-overlay {
  position: fixed; inset: 0;
  z-index: 2147483647;
  background: rgba(15,45,74,0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.desc-overlay[hidden] { display: none; }

.desc-modal {
  position: relative;
  background: var(--color-cream);
  border-radius: 16px;
  max-width: 720px; width: 100%;
  max-height: 85vh;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  animation: fq-pop-in 0.28s cubic-bezier(.2,1.4,.4,1);
  display: flex; flex-direction: column;
}

.desc-close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(var(--color-ink-rgb),0.06); border: none;
  font-size: 1.3rem; line-height: 1;
  color: var(--color-muted);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, background 0.15s;
  z-index: 1;
}
.desc-close:hover { background: rgba(var(--color-ink-rgb),0.12); color: var(--color-ink); transform: rotate(90deg); }

.desc-modal-body {
  overflow-y: auto;
  padding: 2.5rem 2.25rem 2rem;
  font-family: 'Source Serif 4', Georgia, serif;
  color: var(--color-ink);
  line-height: 1.7;
}
.desc-modal-body h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; line-height: 1.25; }
.desc-modal-body h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.15rem; font-weight: 700; margin: 1.75rem 0 0.75rem; }
.desc-modal-body h2:first-of-type { margin-top: 0; }
.desc-modal-body h3 { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin: 1.5rem 0 0.6rem; }
.desc-modal-body p { margin: 0 0 1rem; font-size: 0.98rem; }
.desc-modal-body ul, .desc-modal-body ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.desc-modal-body li { margin-bottom: 0.35rem; font-size: 0.98rem; }
.desc-modal-body a { color: var(--color-accent); }
.desc-modal-body code { font-family: 'JetBrains Mono', monospace; font-size: 0.82em; background: rgba(var(--color-ink-rgb),0.06); padding: 0.1em 0.35em; border-radius: 3px; }
.desc-modal-body pre { background: var(--color-ink); color: var(--color-cream); padding: 1rem 1.1rem; border-radius: 8px; overflow-x: auto; margin: 0 0 1.25rem; }
.desc-modal-body pre code { background: none; padding: 0; color: inherit; font-size: 0.8rem; line-height: 1.6; }
.desc-modal-body blockquote { border-left: 3px solid var(--color-accent); padding-left: 1rem; margin: 0 0 1rem; color: var(--color-muted-dark); font-style: italic; }
.desc-modal-body hr { border: none; border-top: 1px solid rgba(var(--color-ink-rgb),0.12); margin: 1.75rem 0; }
.desc-modal-body table { border-collapse: collapse; width: 100%; margin: 0 0 1.25rem; font-size: 0.85rem; }
.desc-modal-body th, .desc-modal-body td { border: 1px solid rgba(var(--color-ink-rgb),0.12); padding: 0.4rem 0.6rem; text-align: left; }
.desc-modal-body th { background: rgba(var(--color-ink-rgb),0.04); }
.desc-plain-english { background: rgba(var(--color-accent-rgb),0.08); border-left: 3px solid var(--color-accent); padding: 0.9rem 1.1rem; margin-bottom: 1.5rem; border-radius: 0 6px 6px 0; }
.desc-loading, .desc-error { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--color-muted); }

@media (max-width: 640px) {
  .desc-modal-body { padding: 2.5rem 1.5rem 1.5rem; }
}

#company-bubbles {
  position: relative !important;
  width: 100vw !important;
  max-width: min(1600px, 94vw) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
}
#company-bubbles .bubbles-shell {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.river-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 8px 0 4px;
  padding-right: 70px; /* matches your chart's right margin */
}

.river-legend-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: rgba(26, 23, 16, 0.5);
  text-transform: uppercase;
  white-space: nowrap;
}

.river-legend-blocks {
  display: flex;
  gap: 2px;
}

.river-legend-block {
  width: 14px;
  height: 8px;
  border-radius: 2px;
}