/* ============================================================
   Semiconductor cohort — research deck design system
   ============================================================ */

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

:root {
  /* color tokens — OKLCH, warm-tinted neutrals */
  --ground:        oklch(15% 0.008 60);     /* near-black, browned */
  --ground-deep:   oklch(11% 0.006 60);
  --surface:       oklch(20% 0.010 60);
  --surface-2:     oklch(24% 0.012 65);
  --rule:          oklch(28% 0.013 65);
  --rule-soft:     oklch(23% 0.010 65);
  --ink:           oklch(94% 0.015 75);
  --ink-soft:      oklch(82% 0.018 70);
  --ink-mute:      oklch(64% 0.012 70);
  --ink-faint:     oklch(48% 0.010 65);

  /* sentiment accents — disciplined, never red/green */
  --bull:          oklch(72% 0.13  95);     /* dijon / ochre */
  --bull-soft:     oklch(72% 0.13  95 / 0.18);
  --bull-line:     oklch(72% 0.13  95 / 0.55);
  --bear:          oklch(60% 0.14  28);     /* terracotta / oxidized copper */
  --bear-soft:     oklch(60% 0.14  28 / 0.18);
  --bear-line:     oklch(60% 0.14  28 / 0.55);
  --neutral:       oklch(58% 0.020 230);    /* cool slate */
  --neutral-soft:  oklch(58% 0.020 230 / 0.18);
  --neutral-line:  oklch(58% 0.020 230 / 0.40);

  /* type */
  --serif:   'Eczar', Georgia, serif;
  --sans:    'Geist', system-ui, sans-serif;
  --mono:    'Geist Mono', ui-monospace, monospace;

  /* scale */
  --t-7xl: clamp(3.4rem, 1.4rem + 6vw, 5.6rem);
  --t-6xl: clamp(2.6rem, 1.2rem + 4.5vw, 4.4rem);
  --t-5xl: clamp(2.0rem, 1.0rem + 3.4vw, 3.4rem);
  --t-4xl: clamp(1.55rem, 0.9rem + 2vw, 2.4rem);
  --t-3xl: 1.5rem;
  --t-2xl: 1.25rem;
  --t-xl:  1.125rem;
  --t-lg:  1rem;
  --t-md:  0.9375rem;
  --t-sm:  0.8125rem;
  --t-xs:  0.6875rem;

  /* space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;  --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { background: var(--ground); color: var(--ink); }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.55;
  font-feature-settings: 'ss01', 'cv11';
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(ellipse at 12% -10%, oklch(22% 0.014 60) 0%, transparent 45%),
    radial-gradient(ellipse at 95% 5%, oklch(20% 0.012 70) 0%, transparent 40%),
    var(--ground);
  min-height: 100vh;
}

/* selection */
::selection { background: var(--bull-soft); color: var(--ink); }

/* page frame — every page has the amber gutter rule */
.page {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--s-6) clamp(var(--s-5), 4vw, var(--s-8)) var(--s-9);
  position: relative;
}
.page::before {
  content: '';
  position: absolute;
  left: clamp(var(--s-3), 2vw, var(--s-5));
  top: var(--s-6);
  bottom: var(--s-9);
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0,
    var(--bull-line) 80px,
    var(--rule) 220px,
    var(--rule) calc(100% - 220px),
    var(--bull-line) calc(100% - 80px),
    transparent 100%);
  pointer-events: none;
}

/* masthead */
.masthead {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-7);
}
.masthead-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.masthead .ident {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.masthead .ident strong { color: var(--bull); font-weight: 500; }

/* two-row canonical nav */
.masthead-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nav-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-row--cohort {
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-2);
}
.nav-row--tickers { padding-bottom: 0; }
.nav-row li { display: flex; align-items: center; }
.nav-row a {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding: 2px var(--s-3) 2px 0;
  margin-right: var(--s-2);
  transition: color 0.18s, border-color 0.18s;
}
.nav-row a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.nav-row a[aria-current="page"] {
  color: var(--bull);
  border-bottom-color: var(--bull);
  font-weight: 500;
}
.nav-row--cohort a[aria-current="page"] { color: var(--bull); }
.nav-row--tickers a[aria-current="page"] { color: var(--ink); }
.nav-row__search { margin-left: auto; }
.nav-search-trigger {
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink-mute);
  font-family: var(--mono);
  font-size: var(--t-xs);
  padding: 2px var(--s-2);
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s;
  line-height: 1.4;
}
.nav-search-trigger:hover { color: var(--ink); border-color: var(--ink-mute); }

/* legacy single-row nav — kept for fallback; overridden by masthead-nav */
.masthead nav { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.masthead nav a {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.18s, border-color 0.18s;
}
.masthead nav a:hover,
.masthead nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--bull); }

/* footer */
.colophon {
  margin-top: var(--s-9);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4);
}
.colophon a { color: var(--ink-mute); text-decoration: none; border-bottom: 1px dotted var(--rule); }
.colophon a:hover { color: var(--bull); border-bottom-color: var(--bull); }

/* typography */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; line-height: 1.08; color: var(--ink); }
h1 { font-size: var(--t-7xl); margin: var(--s-3) 0 var(--s-5); font-weight: 400; }
h2 { font-size: var(--t-5xl); margin: var(--s-8) 0 var(--s-4); font-weight: 400; }
h3 { font-size: var(--t-3xl); margin: var(--s-6) 0 var(--s-3); }
h4 { font-size: var(--t-xl); margin: var(--s-5) 0 var(--s-2); }

.deck {
  font-family: var(--serif);
  font-size: var(--t-2xl);
  line-height: 1.45;
  color: var(--ink-soft);
  font-weight: 400;
  max-width: 68ch;
  margin: 0 0 var(--s-6);
  font-style: italic;
}

p { margin: 0 0 var(--s-4); max-width: 70ch; color: var(--ink-soft); }
p strong { color: var(--ink); font-weight: 500; }

a { color: var(--bull); text-decoration: none; border-bottom: 1px dotted var(--bull-line); }
a:hover { border-bottom-style: solid; }

code, .mono { font-family: var(--mono); font-feature-settings: 'tnum'; }
.tk { font-family: var(--mono); font-weight: 500; letter-spacing: 0.02em; color: var(--ink); }
.num { font-family: var(--mono); font-feature-settings: 'tnum'; }

/* section header — used as anchor hashmark */
.section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-4);
  align-items: baseline;
  padding-top: var(--s-7);
  margin-bottom: var(--s-3);
  border-top: 1px solid var(--rule);
}
.section-head .marker {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bull);
  padding-top: var(--s-5);
}
.section-head h2 { margin: var(--s-3) 0 0; }
.section-head .meta {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: var(--s-5);
  text-align: right;
}

/* tag chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 3px 10px;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--surface);
  border-radius: 1px;
}
.chip.bull  { color: var(--bull);    border-color: var(--bull-line); }
.chip.bear  { color: var(--bear);    border-color: var(--bear-line); }
.chip.neut  { color: var(--neutral); border-color: var(--neutral-line); }

/* tile grid — for index hub */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: var(--s-6) 0 var(--s-7);
}
.tile {
  background: var(--ground);
  padding: var(--s-5) var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  text-decoration: none;
  border-bottom: none;
  color: inherit;
  transition: background 0.25s var(--ease-out), padding 0.25s var(--ease-out);
  position: relative;
  min-height: 200px;
}
.tile:hover { background: var(--surface); }
.tile:hover .tile-title { color: var(--bull); }
.tile .tile-eyebrow {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tile .tile-title {
  font-family: var(--serif);
  font-size: var(--t-3xl);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.1;
  transition: color 0.18s;
}
.tile .tile-blurb { color: var(--ink-mute); font-size: var(--t-sm); line-height: 1.5; max-width: 38ch; flex: 1; }
.tile .tile-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  border-top: 1px dashed var(--rule);
  padding-top: var(--s-3);
  margin-top: var(--s-2);
}

/* ticker tile variant */
.tile.ticker { padding-top: var(--s-4); }
.tile.ticker .tk-large {
  font-family: var(--mono);
  font-size: var(--t-4xl);
  letter-spacing: 0.02em;
  font-weight: 500;
  color: var(--ink);
}
.tile.ticker.long .tk-large  { color: var(--bull); }
.tile.ticker.short .tk-large { color: var(--bear); }

/* data tables */
table.research {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  margin: var(--s-4) 0 var(--s-5);
}
table.research thead th {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  border-bottom: 1px solid var(--rule);
}
table.research tbody td {
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-soft);
  vertical-align: top;
}
table.research tbody tr:hover td { background: var(--surface); color: var(--ink); }
table.research td.tk { color: var(--ink); }
table.research td.num { text-align: right; padding-right: var(--s-4); }

/* lockup — verdict bar */
.verdict {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-5);
  align-items: stretch;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: var(--s-5) 0 var(--s-6);
}
.verdict .side {
  font-family: var(--mono);
  font-size: var(--t-md);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  align-self: center;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule);
}
.verdict .side.long  { color: var(--bull); border-color: var(--bull-line); background: var(--bull-soft); }
.verdict .side.short { color: var(--bear); border-color: var(--bear-line); background: var(--bear-soft); }
.verdict .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  align-items: center;
}
.verdict dt { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; }
.verdict dd { margin: 0; font-family: var(--serif); font-size: var(--t-xl); font-weight: 500; color: var(--ink); }

/* conviction gauge — five segments */
.gauge { display: inline-flex; gap: 3px; align-items: center; vertical-align: middle; }
.gauge i {
  width: 14px; height: 8px;
  background: var(--rule);
  display: block;
}
.gauge.long  i.on { background: var(--bull); }
.gauge.short i.on { background: var(--bear); }

/* scenario / fact card */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: var(--s-4) 0 var(--s-5);
}
.fact {
  background: var(--ground);
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.fact .label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.fact .figure {
  font-family: var(--serif);
  font-size: var(--t-4xl);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.05;
}
.fact .figure .num { font-family: var(--mono); font-weight: 400; }
.fact .figure.bull { color: var(--bull); }
.fact .figure.bear { color: var(--bear); }
.fact .figure.neut { color: var(--neutral); }
.fact p { font-size: var(--t-sm); color: var(--ink-mute); margin: 0; max-width: none; }

/* pull quote */
blockquote.pull {
  font-family: var(--serif);
  font-size: var(--t-3xl);
  font-style: italic;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 400;
  border-top: 1px solid var(--bull-line);
  padding: var(--s-5) 0 var(--s-3);
  margin: var(--s-6) 0 var(--s-7);
  max-width: 56ch;
}
blockquote.pull cite {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  font-style: normal;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: var(--s-3);
}

/* mermaid container */
.diagram {
  background: var(--ground-deep);
  border: 1px solid var(--rule);
  padding: var(--s-5) var(--s-5);
  margin: var(--s-4) 0 var(--s-5);
  overflow-x: auto;
}
.diagram-cap {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-3);
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
}
.diagram svg { max-width: 100%; height: auto; }

/* hand-authored SVG block */
figure.svg-block {
  background: var(--ground-deep);
  border: 1px solid var(--rule);
  padding: var(--s-5);
  margin: var(--s-5) 0;
}
figure.svg-block svg { display: block; width: 100%; height: auto; }
figure.svg-block figcaption {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--rule);
}

/* split row — two columns side by side */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  align-items: stretch;
  margin: var(--s-4) 0 var(--s-5);
}
@media (max-width: 720px) {
  .split { grid-template-columns: 1fr; }
  .verdict { grid-template-columns: 1fr; }
  .verdict .grid { grid-template-columns: repeat(2, 1fr); }
}

/* watchlist row */
.row {
  display: grid;
  grid-template-columns: 32px 80px 1fr 140px 56px;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
  transition: background 0.18s;
}
.row:hover { background: var(--surface); }
.row .rank { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-faint); text-align: right; padding-right: var(--s-2); }
.row .tk { font-size: var(--t-md); }
.row .desc { color: var(--ink-soft); font-size: var(--t-sm); }
.row .desc .name { color: var(--ink); font-weight: 500; display: block; margin-bottom: 2px; font-family: var(--serif); font-size: var(--t-md); }
.row .conv-bar { display: flex; align-items: center; }

@media (max-width: 720px) {
  .row { grid-template-columns: 32px 64px 1fr; }
  .row .conv-bar, .row .ment { display: none; }
}

/* expanded panel */
.row-expand {
  grid-column: 1 / -1;
  padding: 0 var(--s-4) 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-quart), padding 0.4s var(--ease-quart);
  background: var(--surface);
  margin: 0 calc(var(--s-4) * -1);
  border-bottom: 1px solid var(--rule-soft);
}
.row-expand[data-open="1"] { max-height: 600px; padding: var(--s-5) var(--s-5) var(--s-5); }

/* pair-trade callout */
.pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  margin: var(--s-5) 0 var(--s-6);
  border: 1px solid var(--rule);
}
.pair .leg {
  padding: var(--s-5);
  background: var(--ground);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.pair .leg.long  { background: linear-gradient(135deg, var(--bull-soft), transparent 60%); }
.pair .leg.short { background: linear-gradient(225deg, var(--bear-soft), transparent 60%); }
.pair .vs {
  display: grid;
  place-items: center;
  background: var(--ground-deep);
  padding: 0 var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
.pair .leg .side-tag { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.pair .leg.long  .side-tag { color: var(--bull); }
.pair .leg.short .side-tag { color: var(--bear); }
.pair .leg .tk-headline { font-family: var(--mono); font-size: var(--t-3xl); font-weight: 500; color: var(--ink); }
.pair .leg .blurb { color: var(--ink-mute); font-size: var(--t-sm); line-height: 1.55; }
.pair .rationale {
  grid-column: 1 / -1;
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--rule);
  background: var(--ground-deep);
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  font-size: var(--t-md);
  line-height: 1.5;
}
@media (max-width: 720px) {
  .pair { grid-template-columns: 1fr; }
  .pair .vs { padding: var(--s-3); border: 1px solid var(--rule); border-left: none; border-right: none; }
}

/* filter chips */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.filter-row button {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 6px 12px;
  border: 1px solid var(--rule);
  background: transparent;
  cursor: pointer;
  border-radius: 0;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.filter-row button:hover { color: var(--ink); border-color: var(--ink-mute); }
.filter-row button[aria-pressed="true"] { color: var(--bull); border-color: var(--bull); background: var(--bull-soft); }

/* cross-references */
.crosslinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4);
  margin: var(--s-6) 0 var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.crosslinks h4 { margin: 0 0 var(--s-2); font-size: var(--t-md); color: var(--ink-faint); font-family: var(--mono); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.crosslinks ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.crosslinks a { font-size: var(--t-sm); color: var(--ink-soft); border-bottom: none; }
.crosslinks a:hover { color: var(--bull); }
.crosslinks .tk { color: var(--ink-faint); font-size: var(--t-xs); margin-right: var(--s-2); }

/* lists */
ol.kill { list-style: none; counter-reset: kill; padding: 0; margin: var(--s-4) 0; }
ol.kill > li {
  counter-increment: kill;
  position: relative;
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-7);
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.55;
}
ol.kill > li::before {
  content: counter(kill, decimal-leading-zero);
  position: absolute;
  left: 0; top: var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--bear);
  letter-spacing: 0.1em;
}

/* tabular figures helpers */
.tnum { font-variant-numeric: tabular-nums; font-family: var(--mono); }

/* hover details popover for SVG dots */
.popover {
  position: absolute;
  pointer-events: none;
  background: var(--surface-2);
  border: 1px solid var(--bull-line);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-sm);
  color: var(--ink);
  z-index: 10;
  opacity: 0;
  transition: opacity 0.15s;
  box-shadow: 0 18px 40px -20px rgba(0,0,0,0.6);
  max-width: 280px;
}
.popover[data-show="1"] { opacity: 1; }
.popover .pop-tk { font-family: var(--mono); font-size: var(--t-md); display: block; margin-bottom: 2px; color: var(--bull); }
.popover .pop-name { font-family: var(--serif); font-style: italic; color: var(--ink); display: block; margin-bottom: var(--s-1); }
.popover .pop-blurb { color: var(--ink-mute); font-size: var(--t-xs); line-height: 1.4; }

/* SVG primitives */
svg .axis line, svg .axis path { stroke: var(--rule); stroke-width: 1; fill: none; }
svg .axis text { fill: var(--ink-faint); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
svg .label { fill: var(--ink-soft); font-family: var(--sans); font-size: 11px; }
svg .label-mono { fill: var(--ink); font-family: var(--mono); font-size: 11px; font-weight: 500; }
svg .grid line { stroke: var(--rule-soft); stroke-width: 1; stroke-dasharray: 2 4; }
svg .quadrant { fill: var(--ink-faint); font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; }

svg .dot      { fill: var(--neutral); stroke: var(--ground); stroke-width: 1.5; transition: r 0.15s, fill 0.15s; cursor: pointer; }
svg .dot.bull { fill: var(--bull); }
svg .dot.bear { fill: var(--bear); }
svg .dot:hover { stroke: var(--ink); }
svg .dot.dim   { opacity: 0.18; }

svg .conn { stroke: var(--rule); stroke-width: 1; fill: none; stroke-dasharray: 4 3; }
svg .arrow { stroke: var(--bull); stroke-width: 1.5; fill: none; marker-end: url(#arrow); }
svg .arrow.bear { stroke: var(--bear); }

/* mini-bars (concentration etc) */
.bars { display: grid; grid-template-columns: 90px 1fr 60px; gap: var(--s-3); align-items: center; padding: 6px 0; }
.bars .bar-track { height: 8px; background: var(--rule-soft); position: relative; }
.bars .bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--neutral); }
.bars .bar-fill.bull  { background: var(--bull); }
.bars .bar-fill.bear  { background: var(--bear); }
.bars .bar-label { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.12em; }
.bars .bar-num { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-soft); text-align: right; }

/* anchor menu (per-ticker page) */
nav.anchors {
  position: sticky;
  top: 0;
  background: linear-gradient(to bottom, var(--ground) 70%, transparent);
  padding: var(--s-3) 0 var(--s-2);
  margin: 0 0 var(--s-5);
  border-bottom: 1px solid var(--rule);
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
nav.anchors a { color: var(--ink-mute); border-bottom: 1px solid transparent; padding-bottom: 2px; }
nav.anchors a:hover { color: var(--bull); border-color: var(--bull); }
nav.anchors a .marker { color: var(--ink-faint); margin-right: 4px; }

/* cohort-rail — "See in cohort" wayfinding strip on ticker pages */
nav.cohort-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3) var(--s-4);
  margin: var(--s-5) 0 var(--s-6);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.10em;
}
nav.cohort-rail .label {
  text-transform: uppercase;
  color: var(--ink-faint);
  letter-spacing: 0.16em;
  margin-right: var(--s-2);
}
nav.cohort-rail a {
  color: var(--ink-mute);
  border-bottom: 1px dotted var(--rule);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
nav.cohort-rail a:hover {
  color: var(--bull);
  border-bottom-color: var(--bull);
}

/* taiwan-tail note */
.taiwan-flag {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--bear-line);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bear);
  margin: var(--s-4) 0;
}
.taiwan-flag svg { flex-shrink: 0; }

/* moat verdict callout */
.moat-verdict {
  padding: var(--s-4) var(--s-5);
  background: var(--ground-deep);
  border-top: 1px solid var(--bull-line);
  border-bottom: 1px solid var(--bull-line);
  margin: var(--s-4) 0;
  font-family: var(--serif);
  font-size: var(--t-2xl);
  font-style: italic;
  color: var(--ink);
}
.moat-verdict.bear { border-color: var(--bear-line); }
.moat-verdict span.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bull);
  margin-right: var(--s-3);
  font-style: normal;
  vertical-align: middle;
}
.moat-verdict.bear span.tag { color: var(--bear); }

/* hide/show animation for theme map filtering */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================================================
   @media print — deck pages (ticker pages + Hub)
   Docs pages have their own block in docs.css.
   All rules scoped to print; zero on-screen impact.
   ============================================================ */
@media print {

  /* --- page setup ----------------------------------------- */
  @page {
    size: letter;
    margin: 0.65in 0.6in 0.6in;
    @bottom-right { content: counter(page); font-family: 'Geist Mono', monospace; font-size: 8pt; }
  }

  /* --- color token overrides (dark → print-white) --------- */
  :root {
    --ground:       white;
    --ground-deep:  white;
    --surface:      #f5f4f2;
    --surface-2:    #f5f4f2;
    --rule:         oklch(82% 0.005 60);
    --rule-soft:    oklch(90% 0.003 60);
    --ink:          oklch(12% 0.005 60);
    --ink-soft:     oklch(22% 0.005 60);
    --ink-mute:     oklch(42% 0.005 60);
    --ink-faint:    oklch(56% 0.005 60);
    --bull:         oklch(44% 0.13 75);
    --bull-soft:    oklch(44% 0.13 75 / 0.12);
    --bull-line:    oklch(44% 0.13 75 / 0.45);
    --bear:         oklch(38% 0.14 28);
    --bear-soft:    oklch(38% 0.14 28 / 0.12);
    --bear-line:    oklch(38% 0.14 28 / 0.45);
  }

  html, body {
    background: white !important;
    color: var(--ink) !important;
    font-size: 10.5pt;
    line-height: 1.5;
  }

  /* --- hide navigation & interactive chrome --------------- */
  .masthead-nav,
  .nav-search-trigger,
  .breadcrumb,
  nav.anchors,
  nav.cohort-rail,
  nav.ticker-chain,
  .continuity,
  .expand-btn,
  .filter-chips,
  .filter-row,
  .back-to-hub,
  .jump-grid,
  .popover,
  .search-modal,
  .search-trigger { display: none !important; }

  /* --- reset sticky/fixed positioning --------------------- */
  nav.anchors,
  .doc-toc,
  .doc-rail { position: static !important; }

  /* --- page frame ----------------------------------------- */
  .page {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  /* suppress the amber gutter rule (pure cosmetic on screen) */
  .page::before { display: none; }

  /* --- masthead: keep ident, lose nav rows ---------------- */
  .masthead {
    padding-bottom: 6pt;
    margin-bottom: 12pt;
    border-bottom: 1px solid var(--rule);
  }
  .masthead .ident {
    font-size: 8pt;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
  }
  .masthead .ident strong { color: var(--bull); }

  /* --- typography ----------------------------------------- */
  h1 { font-size: 26pt; margin: 6pt 0 10pt; line-height: 1.05; }
  h2 { font-size: 16pt; margin: 18pt 0 6pt; padding-top: 8pt;
       border-top: 1px solid var(--rule); page-break-after: avoid; break-after: avoid; }
  h3 { font-size: 13pt; margin: 14pt 0 4pt; page-break-after: avoid; break-after: avoid; }
  h4 { font-size: 11pt; margin: 10pt 0 3pt; page-break-after: avoid; break-after: avoid; }

  p, li { orphans: 3; widows: 3; max-width: none; }

  a { color: var(--ink) !important; border-bottom: 1px solid var(--rule-soft) !important; }
  a[href^="http"]::after {
    content: ' [' attr(href) ']';
    font-size: 8pt;
    color: var(--ink-mute);
    margin-left: 3pt;
  }

  /* --- sections: avoid mid-section orphans ---------------- */
  section { page-break-inside: avoid; break-inside: avoid; }
  /* large content sections (≥ a certain complexity) may need to break;
     only the section-head itself is guaranteed to stay with its first child */
  .section-head { page-break-after: avoid; break-after: avoid; }

  /* --- verdict bar ---------------------------------------- */
  .verdict { page-break-inside: avoid; break-inside: avoid; }
  .verdict .side.long  { background: var(--bull-soft) !important; border-color: var(--bull-line) !important; }
  .verdict .side.short { background: var(--bear-soft) !important; border-color: var(--bear-line) !important; }

  /* --- fact / scenario cards ------------------------------ */
  .fact, .cards { page-break-inside: avoid; break-inside: avoid; }

  /* --- tables --------------------------------------------- */
  table.research { font-size: 9pt; }
  table.research tbody tr { page-break-inside: avoid; break-inside: avoid; }
  table.research tbody tr:hover td { background: white; color: var(--ink); }

  /* --- SVG / chart blocks --------------------------------- */
  figure.svg-block, .diagram {
    background: white !important;
    border-color: var(--rule) !important;
    page-break-inside: avoid; break-inside: avoid;
    max-width: 100%;
  }
  /* SVG text: force dark ink (prevents white-on-white in forced-color browsers) */
  svg text, svg .axis text, svg .label, svg .label-mono, svg .quadrant {
    fill: var(--ink-faint) !important;
  }
  svg .label-mono { fill: var(--ink) !important; }
  svg .axis line, svg .axis path, svg .grid line { stroke: var(--rule) !important; }

  /* --- details / collapsible — force open ----------------- */
  details { display: block !important; }
  details > summary { display: none; }       /* hide the toggle knob */
  details[open] > summary { display: none; }

  /* --- colophon / footer ---------------------------------- */
  .colophon {
    margin-top: 18pt;
    padding-top: 6pt;
    font-size: 8pt;
    color: var(--ink-faint);
    border-top-color: var(--rule);
  }

  /* --- Hub-specific: continuity already hidden above;
         tile grid flows linearly for the cohort summary ----- */
  .tiles { display: block; background: none; border: none; }
  .tile  { min-height: 0; padding: 8pt 0; border-bottom: 1px solid var(--rule-soft); }

  /* --- memo-strip (links to underlying docs — noise in print) */
  .memo-strip { display: none !important; }

} /* end @media print */

/* ============================================================
   Breadcrumb nav (Atom 7 — below masthead, above page body)
   ============================================================ */
.breadcrumb {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-mute);
  padding: var(--s-2) var(--s-5);
  border-bottom: 1px solid var(--rule-soft);
  background: var(--ground-deep);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb li + li::before {
  content: "›";
  margin-right: var(--s-1);
  color: var(--ink-faint);
}
.breadcrumb a {
  color: var(--ink-mute);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--ink-soft); }
.breadcrumb [aria-current="page"] { color: var(--bull); }
@media print { .breadcrumb { display: none; } }
/* ============================================================
   Atom 14a — watchlist row-expand detail panel
   ============================================================ */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-1) 0;
}
.detail-field { display: flex; flex-direction: column; gap: var(--s-1); }
.detail-field--full { grid-column: 1 / -1; }
.detail-field--link { grid-column: 1 / -1; padding-top: var(--s-2); border-top: 1px dashed var(--rule); }
.detail-label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.detail-val { font-size: var(--t-sm); color: var(--ink-mute); line-height: 1.5; }
.expand-btn {
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: var(--t-md);
  cursor: pointer;
  padding: 0 var(--s-2);
  line-height: 1;
  transition: color 0.18s, transform 0.2s var(--ease-quart);
}
.expand-btn:hover { color: var(--ink-soft); }
.expand-btn[aria-expanded="true"] { color: var(--bull); transform: rotate(180deg); }
@media (max-width: 720px) { .detail-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Atom 14b — theme-map filter chips
   ============================================================ */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-5);
}
.filter-chips [data-filter] {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 5px 12px;
  border: 1px solid var(--rule);
  background: transparent;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.filter-chips [data-filter]:hover { color: var(--ink); border-color: var(--ink-mute); }
.filter-chips [data-filter][aria-pressed="true"] { color: var(--bull); border-color: var(--bull); background: var(--bull-soft); }

/* Back-to-hub link (Atom 16) */
.back-to-hub { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); text-decoration: none; padding: var(--s-2) var(--s-3); border: 1px solid var(--rule); margin: var(--s-3) 0 var(--s-2); }
.back-to-hub:hover { color: var(--bull); border-color: var(--bull-line); }
@media print { .back-to-hub { display: none; } }

/* ============================================================
   Atom 11 — first-read hero block (hub only)
   ============================================================ */
.first-read {
  margin: var(--s-5) 0 var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--rule);
  background: var(--surface);
  border-left: 3px solid var(--bull-line);
}
.first-read__label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bull);
  margin-bottom: var(--s-3);
}
.first-read__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.first-read__bullets li {
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  padding-left: var(--s-4);
  position: relative;
}
.first-read__bullets li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--bull);
}

/* jump-to grid (hub) */
.jump-grid {
  margin: var(--s-5) 0 var(--s-6);
}
.jump-grid__label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-3);
}
.jump-cohort {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 1px;
}
.jump-cohort a {
  background: var(--ground);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  text-decoration: none;
  border-bottom: none;
  transition: background 0.2s;
}
.jump-cohort a:hover { background: var(--surface); }
.jump-cohort .jc-eye { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-faint); letter-spacing: 0.12em; text-transform: uppercase; }
.jump-cohort .jc-title { font-family: var(--serif); font-size: var(--t-md); color: var(--ink); line-height: 1.2; }
.jump-tickers {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-top: none;
}
.jump-tickers a {
  background: var(--ground);
  padding: var(--s-2) var(--s-4);
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  border-bottom: none;
  transition: background 0.2s;
  flex: 1;
  min-width: 80px;
  text-align: center;
}
.jump-tickers a:hover { background: var(--surface); }
.jump-tickers a.long  { color: var(--bull); }
.jump-tickers a.short { color: var(--bear); }
.jump-tickers .jt-meta { font-size: var(--t-xs); color: var(--ink-faint); display: block; font-weight: 400; margin-top: 1px; }
@media (max-width: 720px) {
  .jump-cohort { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Atom 12 — ticker-chain prev/next footer
   ============================================================ */
nav.ticker-chain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
}
nav.ticker-chain a {
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
  text-transform: uppercase;
}
nav.ticker-chain a:hover { color: var(--bull); border-bottom-color: var(--bull); }
nav.ticker-chain .position {
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
nav.ticker-chain .prev::before { content: "← "; }

/* ============================================================
   Continuity strip — "Last viewed" (Hub only)
   ============================================================ */
.continuity {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  padding: var(--s-3) var(--s-5);
  margin-bottom: var(--s-5);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: var(--t-xs);
}
.continuity__label {
  color: var(--ink-faint);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.continuity__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  flex: 1;
}
.continuity__items li { display: flex; align-items: baseline; gap: var(--s-2); }
.continuity__items a {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s;
}
.continuity__items a:hover { color: var(--bull); }
.continuity__items .title { color: var(--ink-soft); }
.continuity__items a:hover .title { color: var(--bull); }
.continuity__items .time {
  color: var(--ink-faint);
  font-size: var(--t-xs);
}
.continuity__items .time::before { content: "· "; }
.continuity__clear {
  background: none;
  border: none;
  padding: 0;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s;
  flex-shrink: 0;
}
.continuity__clear:hover { color: var(--bear); }
nav.ticker-chain .next::after  { content: " →"; }

/* ============================================================
   Tablet responsive — readable at ≥768px (iPad portrait floor)
   Single breakpoint; desktop (>880px) is completely unaffected.
   Phone (<480px) is explicitly out of scope.
   ============================================================ */
@media (max-width: 880px) {

  /* --- page horizontal padding: reduce so content has room --- */
  .page {
    padding-left: var(--s-5);
    padding-right: var(--s-5);
  }
  /* amber gutter rule: tuck left to match reduced padding */
  .page::before { left: var(--s-3); }

  /* --- section-head: 3-col → 2-col, meta goes under h2 ------- */
  .section-head {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .section-head .meta {
    grid-column: 2;
    text-align: left;
    padding-top: 0;
  }

  /* --- jump-cohort: 6 tiles → 3 tiles (supersedes 720px rule) - */
  .jump-cohort { grid-template-columns: repeat(3, 1fr); }

  /* --- watchlist row: hide conviction bar + NAV% at ≤880px ---- */
  /* (existing rule hides them at ≤720px; extend to the gap zone) */
  .row { grid-template-columns: 32px 72px 1fr auto; }
  .row .conv-bar { display: none; }
  .row .ment     { display: none; }

  /* --- verdict bar: stack on narrow tablet -------------------- */
  .verdict { grid-template-columns: auto 1fr; }
  .verdict .grid { grid-template-columns: repeat(2, 1fr); }

  /* --- SVG blocks: allow horizontal scroll on the container --- */
  /* figure.svg-block already has overflow:visible by default;    */
  /* wrap it so oversized SVGs scroll rather than blow out body   */
  figure.svg-block,
  .diagram { overflow-x: auto; }
  figure.svg-block svg,
  .diagram svg { min-width: 640px; max-width: none; }

  /* --- tiles: ensure 2-col at narrow tablet ------------------- */
  /* auto-fit minmax(280,1fr) already does this; belt-and-suspenders */
  .tiles { grid-template-columns: repeat(2, 1fr); }

  /* --- h1: cap clamp floor so it doesn't over-render ---------- */
  h1 { font-size: clamp(2.6rem, 1.2rem + 4.5vw, 5.6rem); }

}