/* ============================================================
   Tokens — Editorial Research Lab (light, warm paper, single accent)

   Every translucent surface, border and shadow in this sheet is expressed as
   `rgb(var(--ink) / A)` or `rgb(var(--shadow) / A)` rather than a literal
   colour, so the whole theme pivots from these two triplets.
   ============================================================ */
:root {
  /* The two triplets every overlay is built from. */
  --ink: 28 26 22;            /* warm near-black, for surfaces and rules */
  --shadow: 44 38 28;         /* warm shadow — pure black reads dirty on paper */
  --paper: 247 246 242;       /* --bg as a triplet, for translucent surfaces */

  /* Surfaces — warm paper */
  --bg: #f7f6f2;
  --bg-2: #eeece5;
  --surface: rgb(var(--ink) / 0.028);
  --surface-2: rgb(var(--ink) / 0.055);
  --border: rgb(var(--ink) / 0.12);
  --border-strong: rgb(var(--ink) / 0.26);

  /* Text — warm inks */
  --text: #1a1815;
  --text-dim: #55524a;
  --text-mute: #6d685f;

  /* Accents — the champagne lineage, darkened to hold contrast on paper */
  --accent: #94690f;          /* deep bronze — primary accent */
  --accent-2: #7a5410;        /* darker bronze — emphasis */
  --accent-3: #c79a3c;        /* mid champagne — fills and highlights */
  --accent-4: #17795a;        /* deep green — status / live */
  --on-accent: #fbf9f4;       /* text sitting on an accent fill */

  /* Categorical hues. Each pairs a text-safe ink with the paler fill used for
     bars, dots and chart marks — the pale versions are legible only as areas,
     never as type, on a light ground. */
  --hue-amber: #8a6410;   --hue-amber-fill: #d8a93f;
  --hue-sky:   #2f5d9e;   --hue-sky-fill:   #7ba7e0;
  --hue-green: #17795a;   --hue-green-fill: #4fb98c;
  --hue-clay:  #9c5528;   --hue-clay-fill:  #d68a56;

  /* Chart palette for the labs. SVG can't inherit custom properties, so the
     lab views read these back through demos/theme.js — declared once, here. */
  --demo-arm-0: var(--hue-sky);
  --demo-arm-1: var(--hue-clay);
  --demo-arm-2: var(--hue-amber);
  --demo-algo-thompson: var(--accent);
  --demo-algo-ucb: var(--hue-sky);
  --demo-algo-egreedy: var(--hue-clay);
  --demo-seg-persuadable: var(--hue-green);
  --demo-seg-sure: var(--hue-sky);
  --demo-seg-lost: var(--text-mute);
  --demo-seg-dog: var(--hue-clay);
  --demo-grid:  rgb(var(--ink) / 0.10);
  --demo-rule:  rgb(var(--ink) / 0.20);
  --demo-axis:  rgb(var(--ink) / 0.55);
  --demo-faint: rgb(var(--ink) / 0.38);
  --demo-idle:  rgb(var(--ink) / 0.18);
  --demo-knockout: var(--bg);

  /* Gradient — warm wash, not chromatic */
  --grad: linear-gradient(135deg, #b8862a 0%, #94690f 50%, #6d4c0c 100%);
  --grad-soft: linear-gradient(135deg, rgba(148, 105, 15, 0.14), rgba(199, 154, 60, 0.06));

  /* Geometry */
  --radius: 12px;
  --radius-lg: 20px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --section-pad: clamp(96px, 14vw, 200px);
  --container: min(1240px, 92vw);

  /* Typography stack — serif-led display */
  --font-display: 'Instrument Serif', 'Source Serif 4', Georgia, serif;
  --font-body: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Reset & base
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.011em;
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (max-width: 768px) { body { cursor: auto; } }
::selection { background: var(--accent); color: var(--on-accent); }
a { color: inherit; text-decoration: none; }

/* Body <em> reads as brighter text, not italic — less visual clutter in long paragraphs.
   Section-specific rules (e.g. .tl-points li em, .research-meta em) keep editorial italics. */
em { font-style: normal; color: var(--text); font-weight: 500; }
button { font: inherit; background: none; border: none; color: inherit; cursor: none; }
img { max-width: 100%; display: block; }

/* ============================================================
   Background atmosphere
   ============================================================ */
.bg-grid {
  position: fixed; inset: 0; z-index: -3;
  background-image:
    linear-gradient(rgb(var(--ink) / 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--ink) / 0.055) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 20%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 20%, transparent 92%);
}
/* Editorial pass: three warm halos with scroll-driven parallax */
.bg-blob {
  position: fixed; z-index: -2;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  /* Defaults — overridden per-halo */
  --p-x: 0px;
  --p-y: 0px;
  --p-scale: 1;
}
.blob-1 {
  width: 820px; height: 820px;
  top: -280px; left: 50%;
  background: radial-gradient(circle, rgba(199, 154, 60, 0.30) 0%, rgba(199, 154, 60, 0) 68%);
  mix-blend-mode: multiply;
  filter: blur(150px);
  /* champagne halo — drifts down-right slowly */
  --p-x: calc(var(--scroll-pct, 0) * 90px);
  --p-y: calc(var(--scroll-pct, 0) * 220px);
  --p-scale: calc(1 + var(--scroll-pct, 0) * 0.12);
  transform: translate3d(calc(-50% + var(--p-x)), var(--p-y), 0) scale(var(--p-scale));
  animation: haloDrift1 38s ease-in-out infinite;
}
.blob-2 {
  width: 680px; height: 680px;
  top: 45vh; right: -240px;
  background: radial-gradient(circle, rgba(184, 134, 42, 0.22) 0%, rgba(184, 134, 42, 0) 70%);
  mix-blend-mode: multiply;
  filter: blur(160px);
  /* amber halo — sweeps left as you scroll, fades in mid-page */
  opacity: clamp(0, calc(var(--scroll-pct, 0) * 2.4), 1);
  --p-x: calc(var(--scroll-pct, 0) * -260px);
  --p-y: calc(var(--scroll-pct, 0) * 320px);
  transform: translate3d(var(--p-x), var(--p-y), 0);
  animation: haloDrift2 46s ease-in-out infinite;
}
.blob-3 {
  width: 620px; height: 620px;
  bottom: -220px; left: 8%;
  background: radial-gradient(circle, rgba(168, 126, 46, 0.24) 0%, rgba(168, 126, 46, 0) 70%);
  mix-blend-mode: multiply;
  filter: blur(140px);
  /* deep gold halo — rises into view near the bottom */
  opacity: clamp(0, calc((var(--scroll-pct, 0) - 0.45) * 2.4), 1);
  --p-x: calc(var(--scroll-pct, 0) * 140px);
  --p-y: calc(var(--scroll-pct, 0) * -340px);
  transform: translate3d(var(--p-x), var(--p-y), 0);
  animation: haloDrift3 42s ease-in-out infinite;
}
@keyframes haloDrift1 {
  0%, 100% { filter: blur(150px) hue-rotate(0deg); }
  50%      { filter: blur(170px) hue-rotate(-6deg); }
}
@keyframes haloDrift2 {
  0%, 100% { filter: blur(160px) hue-rotate(0deg); }
  50%      { filter: blur(180px) hue-rotate(4deg); }
}
@keyframes haloDrift3 {
  0%, 100% { filter: blur(140px) hue-rotate(0deg); }
  50%      { filter: blur(160px) hue-rotate(-4deg); }
}

.bg-noise {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: calc(0.020 + var(--scroll-velocity, 0) * 0.012);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/></svg>");
  transition: opacity 0.2s ease-out;
}

/* Faint warm tint that intensifies near the page bottom */
.bg-grid {
  transition: background-size 0.4s var(--ease);
}
body.is-scrolling .bg-grid {
  background-size: 76px 76px;
}

/* ============================================================
   Cursor
   ============================================================ */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.15s var(--ease), opacity 0.2s ease, width 0.2s ease, height 0.2s ease, background 0.2s ease;
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
}
.cursor-ring {
  width: 32px; height: 32px;
  border: 1.5px solid rgb(var(--ink) / 0.7);
  border-radius: 50%;
}
.cursor-ring.is-hover {
  width: 64px; height: 64px;
  background: rgb(var(--ink) / 0.1);
  border-color: rgb(var(--ink) / 0.9);
}
@media (max-width: 768px) { .cursor-dot, .cursor-ring { display: none; } }

/* ============================================================
   Scroll progress
   ============================================================ */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--grad);
  z-index: 100;
  transition: width 0.05s linear;
}

/* ============================================================
   Nav — editorial, flat, typographic
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 56px);
  z-index: 50;
  transition: padding 0.4s var(--ease), background 0.4s var(--ease), backdrop-filter 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  padding: 12px clamp(20px, 4vw, 56px);
  background: rgb(var(--paper) / 0.88);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: rgb(var(--ink) / 0.10);
  box-shadow: 0 6px 22px rgb(var(--shadow) / 0.06);
}
.nav-logo {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--font-display);
  font-size: 26px; font-style: italic;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--text);
}
.logo-mark {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--text);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}
.logo-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-bottom: 4px;
  box-shadow: 0 0 12px rgba(232, 198, 144, 0.6);
}
.nav-links {
  display: flex; gap: 2px; list-style: none;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  backdrop-filter: none;
}
.nav-link {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 8px 14px;
  font-size: 13px; font-weight: 450;
  color: var(--text-dim);
  border-radius: 0;
  position: relative;
  transition: color 0.3s var(--ease);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease);
}
.nav-link span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: 0.02em;
}
.nav-link:hover { color: var(--text); background: transparent; }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--text); }
.nav-link.is-active::after { transform: scaleX(1); }
@media (max-width: 980px) { .nav-links { display: none; } }
.nav-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px;
  font-size: 13px; font-weight: 500;
  background: var(--text);
  color: var(--bg);
  border-radius: 999px;
  letter-spacing: -0.005em;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.nav-cta:hover {
  box-shadow: 0 18px 36px -16px rgba(232, 198, 144, 0.45);
  background: var(--accent);
}
.nav-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  min-height: 100vh;
  padding: 140px clamp(20px, 4vw, 48px) 80px;
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 7px 0 7px 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
  background: transparent;
  border: none;
  border-radius: 0;
  width: fit-content;
  margin-bottom: 36px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: none;
  position: relative;
}
.hero-tag::after {
  content: '';
  position: absolute;
  left: 28px; right: 0; bottom: 0;
  height: 1px;
  background: var(--border);
}
.hero-tag-pulse {
  width: 8px; height: 8px;
  background: var(--accent-4);
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 12px var(--accent-4);
}
.hero-tag-pulse::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%; background: var(--accent-4);
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.8); opacity: 0; }
}
.hero-title {
  font-size: clamp(46px, 8.6vw, 132px);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.038em;
  margin-bottom: 44px;
}
.hero-line {
  display: block;
  overflow: hidden;
}
.hero-word {
  display: inline-block;
  margin-right: 0.14em;
}
.hero-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.012em;
  /* Optical compensation: serif italic reads heavier; scale up slightly */
  font-size: 1.06em;
  line-height: 0.94;
  color: var(--accent);
}
.hero-gradient {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.012em;
  font-size: 1.06em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% auto;
  animation: shine 9s linear infinite;
}
@keyframes shine {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.hero-sub {
  max-width: 620px;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--text-dim);
  margin-bottom: 52px;
  line-height: 1.65;
}
.hero-sub strong { color: var(--text); font-weight: 600; }

.hero-cta {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 80px;
}
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px;
  font-size: 14px; font-weight: 500;
  border-radius: 999px;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: var(--text);
  color: var(--bg);
  letter-spacing: -0.005em;
}
.btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
}
.btn-primary:hover::before { transform: translateY(0); }
.btn-primary .btn-label, .btn-primary .btn-icon { position: relative; z-index: 1; }
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.btn-icon {
  display: inline-flex;
  transition: transform 0.4s var(--ease);
}
.btn:hover .btn-icon { transform: translate(3px, -3px); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--text); }

.hero-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  max-width: 720px;
}
@media (max-width: 640px) { .hero-meta { grid-template-columns: 1fr; } }
.meta-col { display: flex; flex-direction: column; gap: 4px; }
.meta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.meta-value {
  font-size: 14px;
  color: var(--text);
  display: inline-flex; align-items: center; gap: 8px;
}
.dot-live {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-4);
  box-shadow: 0 0 10px var(--accent-4);
}

.scroll-hint {
  position: absolute;
  bottom: 32px; right: clamp(20px, 4vw, 48px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, var(--text-mute), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-line::after {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 40%;
  background: var(--text);
  animation: scrollDown 2s ease-in-out infinite;
}
@keyframes scrollDown {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(250%); }
}

/* ============================================================
   Marquee
   ============================================================ */
.marquee {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 28px 0;
  overflow: hidden;
  background: rgb(var(--ink) / 0.02);
  margin: 40px 0;
}
.marquee-track {
  display: flex; gap: 48px;
  animation: marquee 40s linear infinite;
  white-space: nowrap;
}
.marquee-track span {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(32px, 5vw, 64px);
  letter-spacing: -0.02em;
  color: var(--text);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.85;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ============================================================
   Sections
   ============================================================ */
.section {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-pad) clamp(20px, 4vw, 48px);
}
.section-head {
  display: flex; flex-direction: column; gap: 18px;
  margin-bottom: 72px;
}
.section-num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  display: inline-flex; align-items: center; gap: 14px;
}
.section-num::before {
  content: ''; width: 32px; height: 1px;
  background: var(--accent);
  opacity: 0.6;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 6.4vw, 76px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.022em;
  max-width: 880px;
  color: var(--text);
}
/* Long section titles — let them use the full container and shrink type to fit one line on desktop */
#techcombank .section-title,
#curious-machine .section-title {
  max-width: none;
  font-size: clamp(28px, 4.2vw, 56px);
  letter-spacing: -0.024em;
}

/* ============================================================
   About
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } }
.about-text .lead {
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 24px;
  letter-spacing: -0.015em;
}
.about-text .lead em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
}
.about-text p {
  color: var(--text-dim);
  margin-bottom: 24px;
}
.about-text strong { color: var(--text); font-weight: 600; }
.about-bullets {
  list-style: none;
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
  margin-top: 32px;
}
.about-bullets li {
  display: flex; gap: 16px; align-items: baseline;
  color: var(--text-dim);
  font-size: 15px;
}
.about-bullets li span {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 28px;
  color: var(--text);
  min-width: 56px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-card {
  position: sticky;
  top: 100px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}
.about-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-lg);
  background: var(--grad);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.5s var(--ease);
  filter: blur(20px);
}
.about-card:hover::before { opacity: 0.3; }
.about-card-inner { display: flex; flex-direction: column; gap: 24px; }
.about-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--grad);
  display: grid; place-items: center;
  position: relative;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 50px;
  color: var(--bg);
  font-weight: 500;
  overflow: hidden;
}
.avatar-glow {
  position: absolute; inset: -4px;
  border-radius: 50%;
  background: var(--grad);
  filter: blur(20px);
  opacity: 0.55;
  z-index: -1;
}
.avatar-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.avatar-letter { line-height: 1; }
.about-info { display: flex; flex-direction: column; gap: 2px; }
.about-name { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.about-role { font-size: 14px; color: var(--text-dim); }
.about-handle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 4px;
}
.about-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.about-stats > div { display: flex; flex-direction: column; gap: 2px; }
.about-stats strong {
  font-size: 14px; font-weight: 600;
}
.about-stats span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.about-links {
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.about-links a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-dim);
  transition: color 0.3s var(--ease);
}
.about-links a:hover { color: var(--text); }

/* ============================================================
   Stack chips
   ============================================================ */
.stack-chips {
  margin-top: 64px;
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}
.chip-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.chip-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-mute);
  min-width: 130px;
}
@media (max-width: 640px) { .chip-label { min-width: auto; width: 100%; margin-bottom: 4px; } }
.chip {
  font-size: 12.5px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-dim);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}
.chip:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-2);
  transform: translateY(-2px);
}

/* ============================================================
   Research directions — problem / current / exploring
   Instrument-panel treatment: hairline grid, monospace row keys,
   the "exploring" column deliberately dimmer than "current".
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.rd-thesis {
  max-width: 780px;
  margin: 0 0 48px;
  padding-left: 22px;
  border-left: 2px solid var(--accent);
}
.rd-thesis p {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.5;
  color: var(--text);
  letter-spacing: -0.01em;
}
.rd-thesis em {
  font-style: italic;
  color: var(--accent);
}

/* Horizontal scroll is contained here so the page body never scrolls sideways. */
.rd-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.rd-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  text-align: left;
}
.rd-table thead th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-mute);
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.rd-table tbody tr + tr { border-top: 1px solid var(--border); }
.rd-table tbody tr {
  transition: background 0.25s var(--ease);
}
.rd-table tbody tr:hover { background: var(--surface-2); }
.rd-table tbody th[scope="row"] {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  padding: 16px 18px;
  vertical-align: top;
  width: 21%;
  border-right: 1px solid var(--border);
}
.rd-table tbody td {
  padding: 16px 18px;
  vertical-align: top;
  font-size: 13.5px;
  line-height: 1.6;
}
.rd-table tbody td:first-of-type {
  color: var(--accent);
  width: 26%;
  border-right: 1px solid var(--border);
}
.rd-table tbody td:last-of-type { color: var(--text-dim); }
.rd-none { color: var(--text-mute); font-family: var(--font-mono); }

/* Below the table's min-width, restack each row as a labelled card. */
@media (max-width: 760px) {
  .rd-table-wrap { border: 0; background: none; overflow-x: visible; }
  .rd-table { min-width: 0; }
  .rd-table thead { display: none; }
  .rd-table tbody tr,
  .rd-table tbody th[scope="row"],
  .rd-table tbody td { display: block; width: auto; border-right: 0; }
  .rd-table tbody tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 4px 0 10px;
    margin-bottom: 12px;
  }
  .rd-table tbody tr + tr { border-top: 1px solid var(--border); }
  .rd-table tbody th[scope="row"] { padding-bottom: 6px; }
  .rd-table tbody td { padding-top: 0; padding-bottom: 8px; }
  /* Label the two value cells, since the header row is gone. */
  .rd-table tbody td::before {
    display: block;
    font-family: var(--font-mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-mute);
    margin-bottom: 4px;
  }
  .rd-table tbody td:first-of-type::before { content: 'Currently'; }
  .rd-table tbody td:last-of-type::before { content: 'Exploring'; }
}

/* ============================================================
   Timeline
   ============================================================ */
.timeline {
  list-style: none;
  position: relative;
  padding-left: 32px;
  display: flex; flex-direction: column; gap: 56px;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 8px; bottom: 8px; left: 7px;
  width: 1px;
  background: linear-gradient(to bottom, var(--border-strong), var(--border) 40%, transparent);
}
.tl-item { position: relative; }
.tl-dot {
  position: absolute;
  left: -32px; top: 6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--text-mute);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.tl-item:first-child .tl-dot {
  background: var(--grad);
  border: none;
  box-shadow: 0 0 0 4px rgba(232, 198, 144, 0.15), 0 0 24px rgba(212, 168, 87, 0.5);
}
.tl-period {
  display: flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.tl-now {
  padding: 2px 8px;
  background: var(--grad);
  color: var(--on-accent);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.tl-role {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.tl-org {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--accent);
  margin-bottom: 16px;
}
.tl-desc {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 16px;
  max-width: 760px;
}
.tl-desc strong { color: var(--text); font-weight: 600; }
.tl-points {
  list-style: none;
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 20px;
  max-width: 800px;
}
.tl-points li {
  position: relative;
  padding-left: 22px;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.65;
}
.tl-points li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 12px; height: 1px;
  background: var(--text-mute);
}
.tl-points li strong { color: var(--text); font-weight: 600; }
.tl-points li em { color: var(--accent); font-style: normal; font-family: 'Instrument Serif', serif; font-style: italic; font-size: 16px; }

/* Grouped clusters within a single role — each cluster is one workstream.
   Instrument-panel treatment: monospace channel label over a hairline rule. */
.tl-group {
  margin-bottom: 18px;
  max-width: 800px;
}
.tl-group:last-of-type { margin-bottom: 20px; }
.tl-group-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
  padding-bottom: 7px;
  margin-bottom: 11px;
  border-bottom: 1px solid var(--border);
}
.tl-group-title::before {
  content: '';
  flex: 0 0 auto;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-1px);
}
.tl-group-title span {
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--text-mute);
  font-size: 10.5px;
}
.tl-group-title span::before { content: '· '; }
.tl-group .tl-points { margin-bottom: 0; }

.tl-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.tl-tags span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  background: rgb(var(--ink) / 0.02);
}

/* ============================================================
   Metrics
   ============================================================ */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  backdrop-filter: blur(20px);
}
@media (max-width: 900px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .metrics { grid-template-columns: 1fr; } }
.metric {
  padding: 36px 32px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background 0.4s var(--ease);
}
.metric:hover { background: var(--surface-2); }
.metric:nth-child(3n) { border-right: none; }
.metric:nth-last-child(-n+3) { border-bottom: none; }
@media (max-width: 900px) {
  .metric { border-right: 1px solid var(--border) !important; border-bottom: 1px solid var(--border) !important; }
  .metric:nth-child(2n) { border-right: none !important; }
  .metric:nth-last-child(-n+2) { border-bottom: none !important; }
}
@media (max-width: 560px) {
  .metric { border-right: none !important; }
  .metric:last-child { border-bottom: none !important; }
}
.metric-num {
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 12px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex; align-items: baseline; gap: 6px;
}
.metric-unit {
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 500;
  -webkit-text-fill-color: var(--text-dim);
  background: none;
}
.metric-label {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
}

/* ============================================================
   Research grid
   ============================================================ */
.research-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 820px) { .research-grid { grid-template-columns: 1fr; } }
.research-card {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease);
  display: flex; flex-direction: column; gap: 12px;
}
.research-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.research-card-feature {
  background: linear-gradient(135deg, rgba(232, 198, 144, 0.08), rgba(212, 168, 87, 0.04));
  border-color: var(--border-strong);
}
.research-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: inline-flex;
  width: fit-content;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.research-title {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.research-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 13px;
  color: var(--text-dim);
}
.research-meta em { color: var(--accent); font-family: 'Instrument Serif', serif; font-style: italic; }
.research-desc {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-top: 4px;
}

/* ============================================================
   Contact aux
   ============================================================ */
.contact-aux {
  display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 32px;
}
.aux-link {
  display: flex; flex-direction: column;
  padding: 14px 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  text-align: left;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.aux-link:hover { border-color: var(--border-strong); background: var(--surface-2); }
.aux-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.aux-value {
  font-size: 14px;
  color: var(--text);
}

/* ============================================================
   Projects
   ============================================================ */
.projects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
@media (max-width: 820px) { .projects { grid-template-columns: 1fr; } }

.project {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease);
  position: relative;
}
.project:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.project-visual {
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.visual-tag {
  position: absolute; top: 20px; right: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mute);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 2;
  backdrop-filter: blur(8px);
}

/* Visual 1 — circle + grid */
.project-visual-1 {
  background: radial-gradient(circle at 30% 50%, rgba(232, 198, 144, 0.4), transparent 60%),
              radial-gradient(circle at 70% 50%, rgba(212, 168, 87, 0.3), transparent 60%),
              var(--bg-2);
}
.project-visual-1 .visual-circle {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at center, transparent 38%, rgb(var(--ink) / 0.08) 38%, rgb(var(--ink) / 0.08) 39%, transparent 39%),
    radial-gradient(circle at center, transparent 28%, rgb(var(--ink) / 0.05) 28%, rgb(var(--ink) / 0.05) 29%, transparent 29%),
    radial-gradient(circle at center, transparent 18%, rgb(var(--ink) / 0.03) 18%, rgb(var(--ink) / 0.03) 19%, transparent 19%);
  animation: rotateSlow 30s linear infinite;
}
.project-visual-1 .visual-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgb(var(--ink) / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--ink) / 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000, transparent 80%);
}
@keyframes rotateSlow { to { transform: rotate(360deg); } }

/* Visual 2 — wave */
.project-visual-2 {
  background: linear-gradient(135deg, rgba(245,158,11,0.25), rgba(212, 168, 87, 0.15)), var(--bg-2);
}
.project-visual-2 .visual-wave {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgb(var(--ink) / 0.06) 0px,
    rgb(var(--ink) / 0.06) 1px,
    transparent 1px,
    transparent 24px
  );
  animation: slide 8s linear infinite;
}
@keyframes slide { to { background-position: 48px 48px; } }

/* Visual 3 — orbit */
.project-visual-3 {
  background: radial-gradient(ellipse at 50% 100%, rgba(134,239,172,0.25), transparent 60%), var(--bg-2);
}
.project-visual-3 .visual-orbit {
  position: absolute; left: 50%; top: 50%;
  width: 70%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px dashed rgb(var(--ink) / 0.12);
  border-radius: 50%;
  animation: rotateSlow 20s linear infinite;
}
.project-visual-3 .visual-orbit::before,
.project-visual-3 .visual-orbit::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.project-visual-3 .visual-orbit::before {
  width: 24px; height: 24px;
  background: var(--grad);
  top: -12px; left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 30px var(--accent-2);
}
.project-visual-3 .visual-orbit::after {
  width: 12px; height: 12px;
  background: var(--accent-3);
  bottom: 20%; right: 0;
  box-shadow: 0 0 20px var(--accent-3);
}

/* Visual 4 — grid heavy */
.project-visual-4 {
  background: linear-gradient(135deg, rgba(232, 198, 144, 0.18), rgba(253,230,138,0.1)), var(--bg-2);
}
.project-visual-4 .visual-grid-2 {
  position: absolute; inset: 20px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 6px;
}
.project-visual-4 .visual-grid-2::before {
  content: '';
  grid-column: 1 / -1; grid-row: 1 / -1;
  background-image:
    linear-gradient(rgb(var(--ink) / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--ink) / 0.06) 1px, transparent 1px);
  background-size: calc(100%/8) calc(100%/5);
  border: 1px solid rgb(var(--ink) / 0.06);
  border-radius: 8px;
}

.project-body {
  padding: 28px;
}
.project-meta {
  display: flex; gap: 6px; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.project-title {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  line-height: 1.25;
}
.project-desc {
  color: var(--text-dim);
  font-size: 15px;
  margin-bottom: 20px;
  line-height: 1.6;
}
.project-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.project-tags span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  background: rgb(var(--ink) / 0.02);
}

/* ============================================================
   Stack
   ============================================================ */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .stack-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stack-grid { grid-template-columns: 1fr; } }
.stack-card {
  padding: 32px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease);
}
.stack-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.stack-icon {
  font-family: 'Instrument Serif', serif;
  font-size: 40px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
  line-height: 1;
}
.stack-card h4 {
  font-size: 16px; font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.stack-card p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
}

/* ============================================================
   Contact
   ============================================================ */
.section-contact { text-align: center; }
.contact-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}
.contact-inner .section-num { margin-bottom: 16px; }
.contact-inner .section-num::before { display: none; }
.contact-title {
  font-size: clamp(40px, 8vw, 104px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.04em;
  margin-bottom: 28px;
}
.contact-sub {
  max-width: 520px;
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--text-dim);
  margin-bottom: 48px;
}
.contact-mail {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  padding: 16px 28px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
.contact-mail::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--grad-soft);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.contact-mail:hover { border-color: var(--text); }
.contact-mail:hover::before { opacity: 1; }
.contact-mail-text, .contact-mail svg { position: relative; z-index: 1; }
.contact-mail svg { transition: transform 0.4s var(--ease); }
.contact-mail:hover svg { transform: translate(4px, -4px); }

.socials {
  display: flex; gap: 14px; flex-wrap: wrap;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--text-mute);
}
.social {
  color: var(--text-dim);
  transition: color 0.3s var(--ease);
}
.social:hover { color: var(--text); }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  border-top: 1px solid var(--border);
  padding: 24px clamp(20px, 4vw, 48px);
  margin-top: 40px;
}
.footer-row {
  max-width: var(--container);
  margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-mute);
  flex-wrap: wrap;
  gap: 12px;
}
.back-top { color: var(--text-dim); transition: color 0.3s var(--ease); }
.back-top:hover { color: var(--text); }

/* ============================================================
   Reveal animations
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger inside hero title */
.hero-line { transition-delay: 0s; }
.hero-line:nth-child(2) { transition-delay: 0.08s; }
.hero-line:nth-child(3) { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   Inline link
   ============================================================ */
.inline-link {
  position: relative;
  background-image: var(--grad);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 0.3s var(--ease);
}
.inline-link:hover { opacity: 0.85; }

/* ============================================================
   Curious Machine showcase
   ============================================================ */
.cm-hero {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(232, 198, 144, 0.12), transparent 60%),
    radial-gradient(60% 80% at 100% 100%, rgba(212, 168, 87, 0.10), transparent 60%),
    var(--surface);
  padding: clamp(36px, 6vw, 72px);
  overflow: hidden;
  isolation: isolate;
}
.cm-hero-bg {
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
}
.cm-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  will-change: transform;
}
.cm-orb-1 { width: 320px; height: 320px; background: #e8c690; top: -120px; left: -100px; animation: float1 24s ease-in-out infinite; }
.cm-orb-2 { width: 380px; height: 380px; background: #d4a857; bottom: -140px; right: -120px; opacity: 0.32; animation: float2 30s ease-in-out infinite; }
.cm-orb-3 { width: 260px; height: 260px; background: #fde68a; top: 40%; left: 55%; opacity: 0.20; animation: float3 26s ease-in-out infinite; }

.cm-hero-body { position: relative; display: flex; flex-direction: column; gap: 24px; }

.cm-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  padding: 8px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgb(var(--ink) / 0.04);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.cm-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-4);
  box-shadow: 0 0 0 0 rgba(134, 239, 172, 0.6);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(134, 239, 172, 0.5); }
  50%      { box-shadow: 0 0 0 10px rgba(134, 239, 172, 0); }
}

.cm-title {
  font-size: clamp(40px, 7vw, 92px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  display: flex; flex-wrap: wrap; gap: 0.25em;
}
.cm-title .hero-italic {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
}

.cm-lead {
  max-width: 64ch;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--text-dim);
  line-height: 1.7;
}

.cm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 8px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 720px) { .cm-stats { grid-template-columns: repeat(2, 1fr); } }
.cm-stats > div {
  display: flex; flex-direction: column; gap: 4px;
}
.cm-stats strong {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  background-image: var(--grad);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cm-stats span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.cm-actions {
  display: flex; flex-wrap: wrap; gap: 14px;
}

.cm-pillars {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 820px) { .cm-pillars { grid-template-columns: 1fr; } }
.cm-pillar {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgb(var(--ink) / 0.025);
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease);
}
.cm-pillar:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  transform: translateY(-3px);
}
.cm-pillar-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.12em;
}
.cm-pillar h4 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cm-pillar p {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.6;
}

/* ============================================================
   Work groups (Courses + Projects)
   ============================================================ */
.work-group {
  display: flex; flex-direction: column; gap: 28px;
}
.work-group + .work-group { margin-top: 64px; }

.work-head {
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.work-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.work-blurb {
  font-size: 14.5px;
  color: var(--text-dim);
  max-width: 70ch;
  line-height: 1.6;
}

/* Tag chips inside research-card */
.card-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: auto; padding-top: 14px;
}
.card-tags span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgb(var(--ink) / 0.02);
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Three-column grid for the courses/projects rows on wider screens */
@media (min-width: 1100px) {
  #work .research-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Card link strip (DOIs, repos, press)
   ============================================================ */
.card-links {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 13px;
  padding-top: 4px;
}
.card-links .inline-link { font-weight: 500; }

/* ============================================================
   Hero v2 — face-forward layout
   ============================================================ */
.hero-v2 {
  min-height: auto;
  padding: 130px clamp(20px, 4vw, 48px) 80px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1.15fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 56px; } }

/* --- Portrait column --- */
.hero-portrait {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  --mx: 50%;
  --my: 50%;
}
.portrait-frame {
  position: relative;
  width: clamp(260px, 32vw, 420px);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 40px 90px -36px rgb(var(--shadow) / 0.7),
    0 16px 40px -16px rgba(232, 198, 144, 0.18),
    inset 0 0 0 1px var(--border-strong);
}
.portrait-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: contrast(1.05) saturate(1.05);
  transition: transform 1.2s var(--ease-out);
}
.hero-portrait:hover .portrait-img { transform: scale(1.04); }
.portrait-glow {
  position: absolute; inset: -2px;
  border-radius: inherit;
  z-index: -1;
  background: radial-gradient(circle at 30% 20%, rgba(232, 198, 144, 0.35), transparent 60%);
  opacity: 0.6;
  filter: blur(46px);
  animation: glow-shift 14s linear infinite;
}
@keyframes glow-shift {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(8px, -10px) scale(1.06); }
}
/* Mouse-aware spotlight overlay on portrait */
.portrait-spot {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(220px 220px at var(--mx) var(--my), rgb(var(--ink) / 0.18), transparent 70%);
  mix-blend-mode: overlay;
  transition: background 0.05s linear;
}
.portrait-corner {
  position: absolute;
  width: 36px; height: 36px;
  border-color: var(--text);
}
.portrait-corner-tl {
  top: -8px; left: -8px;
  border-top: 2px solid; border-left: 2px solid;
  border-top-left-radius: 12px;
  color: var(--accent);
}
.portrait-corner-br {
  bottom: -8px; right: -8px;
  border-bottom: 2px solid; border-right: 2px solid;
  border-bottom-right-radius: 12px;
  color: var(--accent-2);
}

.portrait-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center;
  max-width: 360px;
}
.orbit-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgb(var(--ink) / 0.025);
  color: var(--text-mute);
  white-space: nowrap;
}
.portrait-stamp {
  display: flex; align-items: center; gap: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stamp-line { width: 28px; height: 1px; background: var(--border-strong); }
.stamp-num { color: var(--accent); }

/* --- Hero text column --- */
.hero-title-v2 {
  font-size: clamp(40px, 7.6vw, 112px);
}
.hero-spotlights {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 36px;
}
.spot {
  font-family: var(--font-body);
  font-size: 12.5px; font-weight: 450;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  letter-spacing: -0.005em;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease), background 0.4s var(--ease);
}
.spot:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  color: var(--text);
  background: var(--surface-2);
}

.dot-live {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent-4);
  box-shadow: 0 0 10px var(--accent-4);
  vertical-align: middle;
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}

/* ============================================================
   Now card (current role @ Techcombank)
   ============================================================ */
.now-card {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(232, 198, 144, 0.10), transparent 60%),
    radial-gradient(70% 50% at 0% 100%, rgba(212, 168, 87, 0.08), transparent 60%),
    var(--surface);
  padding: clamp(36px, 5.5vw, 64px);
  overflow: hidden;
  isolation: isolate;
}
.now-card-bg { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.now-card-body { display: flex; flex-direction: column; gap: 32px; }
.now-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.now-company {
  display: flex; align-items: center; gap: 16px;
}
.now-logo {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ed1c24 0%, #c40d12 100%);
  color: #fff;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.04em;
  box-shadow: 0 12px 30px -10px rgba(237, 28, 36, 0.5);
}
.now-name {
  font-family: 'Instrument Serif', serif;
  font-size: 28px; font-style: italic;
  letter-spacing: -0.02em;
}
.now-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.now-period {
  display: flex; gap: 12px; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.now-now-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(134, 239, 172, 0.08);
  border: 1px solid rgba(134, 239, 172, 0.3);
  color: var(--accent-4);
}
.now-role {
  font-size: clamp(14px, 1.55vw, 20px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) { .now-role { white-space: normal; } }
.now-lead {
  max-width: none;
  font-size: clamp(16px, 1.45vw, 19px);
  color: var(--text-dim);
  line-height: 1.65;
  letter-spacing: -0.005em;
}
.now-lead strong { color: var(--text); font-weight: 600; }

.now-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 820px) { .now-pillars { grid-template-columns: 1fr; } }
.now-pillar {
  display: flex; gap: 14px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgb(var(--ink) / 0.02);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.now-pillar:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.now-pillar-num {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--grad);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.now-pillar h4 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.now-pillar p { font-size: 13px; color: var(--text-dim); line-height: 1.55; }

.now-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 28px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 720px) { .now-metrics { grid-template-columns: 1fr; gap: 24px; } }
.now-metric { display: flex; flex-direction: column; gap: 6px; }
.now-metric-num {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  display: flex; align-items: baseline; gap: 10px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.now-metric-num .metric-unit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-mute);
  -webkit-text-fill-color: var(--text-mute);
  letter-spacing: 0.08em;
  font-style: normal;
}
.now-metric-label { font-size: 13px; color: var(--text-dim); line-height: 1.55; max-width: 32ch; }

.now-stack {
  display: flex; flex-wrap: wrap; gap: 8px;
}

/* ============================================================
   Curious Machine — courses list + teaching stats
   ============================================================ */
.cm-mission {
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--text-dim);
  max-width: 72ch;
  line-height: 1.7;
}
.cm-mission strong { color: var(--text); }
.cm-mission em { color: var(--accent); font-family: 'Instrument Serif', serif; font-style: italic; font-size: 1.05em; }

.cm-courses {
  margin-top: 8px;
}
.cm-course-head { margin-bottom: 16px; }
.cm-course-list {
  list-style: none;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border);
}
.cm-course-list li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  transition: padding-left 0.4s var(--ease);
}
.cm-course-list li:hover { padding-left: 8px; }
.cm-course-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.06em;
}
.cm-course-list h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.cm-course-list p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
}
.cm-course-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.tag-live     { color: var(--accent-4); border-color: rgba(134, 239, 172, 0.4); background: rgba(134, 239, 172, 0.06); }
.tag-progress { color: var(--accent); border-color: rgba(148, 105, 15, 0.35); background: rgba(148, 105, 15, 0.07); }
.tag-planned  { color: var(--text-mute); }

.cm-teach {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
@media (max-width: 720px) { .cm-teach { grid-template-columns: 1fr; gap: 20px; } }
.cm-teach-stat { display: flex; flex-direction: column; gap: 4px; }
.cm-teach-stat strong {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(28px, 3vw, 40px);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cm-teach-stat span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   Stack — two-column problems lists
   ============================================================ */
.stack-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 56px;
}
@media (max-width: 820px) { .stack-twocol { grid-template-columns: 1fr; } }
.stack-h3 {
  font-size: 14px;
  font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.problem-list {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 14px;
}
.problem-list li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.55;
}
.problem-list li strong { color: var(--text); }
.problem-num {
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent);
  font-size: 14px;
  flex-shrink: 0;
  width: 16px;
}

/* ============================================================
   Papers list
   ============================================================ */
.papers-list {
  display: flex; flex-direction: column;
  gap: 12px;
}
.paper {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.paper:hover { border-color: var(--border-strong); transform: translateX(4px); }
.paper-rank {
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(232, 198, 144, 0.12), rgba(212, 168, 87, 0.04));
  border: 1px solid var(--border-strong);
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 22px;
  background-clip: padding-box;
}
.paper-meta {
  display: flex; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.paper-title {
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.4;
  margin-bottom: 6px;
}
.paper-venue {
  font-size: 13px;
  color: var(--text-dim);
}
.paper-venue em { color: var(--accent); font-family: 'Instrument Serif', serif; }
.paper-links {
  display: flex; gap: 14px;
  margin-top: 10px;
  font-size: 12.5px;
}

/* ============================================================
   Services + Booking
   ============================================================ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 56px;
}
@media (max-width: 980px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; } }
.svc-card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease);
}
.svc-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  transform: translateY(-3px);
}
.svc-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(232, 198, 144, 0.12), rgba(212, 168, 87, 0.06));
  border: 1px solid var(--border-strong);
  font-size: 20px;
  margin-bottom: 6px;
  color: var(--text);
}
.svc-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.svc-card p {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.6;
  flex: 1;
}
.svc-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.book-card {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 32px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(253,230,138,0.10), transparent 60%),
    var(--surface);
}
@media (max-width: 980px) { .book-card { grid-template-columns: 1fr; } }
.book-card-text { display: flex; flex-direction: column; gap: 14px; }
.book-card-title {
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.book-card-text p { color: var(--text-dim); line-height: 1.6; max-width: 50ch; }
.book-points {
  list-style: none;
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.book-points li::before { content: '◆ '; color: var(--accent); }

.book-card-embed {
  min-height: 320px;
  display: grid; place-items: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: rgb(var(--ink) / 0.02);
  padding: 28px;
}
.book-embed-placeholder {
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  max-width: 320px;
}
.cal-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--grad);
  display: grid; place-items: center;
  font-size: 26px;
  color: var(--on-accent);
  margin-bottom: 4px;
}
.book-embed-placeholder h4 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.book-embed-placeholder p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
}
.book-embed-placeholder .btn { margin-top: 8px; }

/* ============================================================
   Hide legacy hero-meta colors / .dot-live override coverage
   ============================================================ */
.meta-value .dot-live { background: var(--accent-4); }

/* ============================================================
   Cal.com booking embed
   ============================================================ */
.book-card-embed {
  display: flex; flex-direction: column;
  gap: 14px;
  min-height: 0;
  border: 1px solid var(--border-strong);
  background: rgb(var(--ink) / 0.02);
  border-radius: var(--radius);
  padding: 14px;
}
.book-tabs {
  display: flex; gap: 8px;
  flex-wrap: wrap;
}
.book-tab {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgb(var(--ink) / 0.02);
  color: var(--text-dim);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.book-tab:hover { color: var(--text); border-color: var(--border-strong); }
.book-tab.is-active {
  background: linear-gradient(135deg, rgba(232, 198, 144, 0.15), rgba(212, 168, 87, 0.06));
  border-color: var(--text);
  color: var(--text);
}
.book-tab-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.book-tab-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.06em;
}
.book-tab.is-active .book-tab-meta { color: var(--accent); }

.cal-iframe-wrap {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
  height: 640px;
}
@media (max-width: 600px) { .cal-iframe-wrap { height: 560px; } }
.cal-iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}

.book-fallback {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
  text-align: center;
}

.nav-tail {
  display: flex; align-items: center; gap: 12px;
}

/* ============================================================
   How I think — narrative paragraph above stack chips
   ============================================================ */
.how-i-think {
  margin-bottom: 56px;
  max-width: 78ch;
}
.how-i-think p {
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--text-dim);
  line-height: 1.8;
}
.how-i-think p strong { color: var(--text); }
.how-i-think p em {
  color: var(--accent);
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 1.05em;
}

/* ============================================================
   NBA pillars grid (A → K)
   ============================================================ */
.nba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.nba-cell {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgb(var(--ink) / 0.025);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease);
  overflow: hidden;
}
.nba-cell::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--grad-soft);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.nba-cell:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  transform: translateY(-3px);
}
.nba-cell:hover::before { opacity: 1; }
.nba-cell-feature { border-color: var(--border-strong); background: linear-gradient(135deg, rgba(232, 198, 144, 0.10), rgba(212, 168, 87, 0.04)); }
.nba-cell > * { position: relative; z-index: 1; }

.nba-letter {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--grad);
  color: var(--on-accent);
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 700;
}
.nba-cell h4 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.nba-cell p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
}

/* ============================================================
   Techcombank logo image inside now-card
   ============================================================ */
.now-logo-img {
  width: 56px; height: 56px;
  border-radius: 16px;
  flex-shrink: 0;
  box-shadow: 0 12px 30px -10px rgba(237, 28, 36, 0.45);
}

/* ============================================================
   Curious Machine — courses grid (no status, depth-first)
   ============================================================ */
.cm-course-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 820px) { .cm-course-grid { grid-template-columns: 1fr; } }
.cm-course {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgb(var(--ink) / 0.02);
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.cm-course:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.cm-course header {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.cm-course header h4 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cm-course-line {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
}
@media (max-width: 540px) {
  .cm-course-line { grid-template-columns: 1fr; gap: 4px; }
}
.cm-course-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Hide legacy course list styles when redesigned */
.cm-course-list { display: none; }

/* ============================================================
   Hide legacy stack-twocol if it lingers
   ============================================================ */
.stack-twocol, .problem-list { display: none; }

/* ============================================================
   Portrait — gradient ring + rescaled (v3 polish)
   Overrides the earlier .portrait-* rules due to cascade order.
   ============================================================ */
.hero-grid {
  grid-template-columns: minmax(320px, 1fr) 1.05fr;
  gap: clamp(48px, 6vw, 110px);
  align-items: center;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 56px; } }

.portrait-frame {
  width: clamp(300px, 36vw, 500px);
  aspect-ratio: 4 / 5;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: visible; /* let the glow bleed past the frame */
  isolation: isolate;
  /* drop any old hard inner shadow border so the ring shows clean */
  box-shadow: none;
}

/* the actual image is clipped to the rounded box */
.portrait-frame .portrait-img,
.portrait-frame .portrait-spot {
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.portrait-frame .portrait-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
  /* subtle inner vignette so the photo's red bleed fades into the dark BG */
  mask-image: radial-gradient(125% 125% at 50% 45%, #000 60%, rgba(0,0,0,0.55) 88%, transparent 100%);
  -webkit-mask-image: radial-gradient(125% 125% at 50% 45%, #000 60%, rgba(0,0,0,0.55) 88%, transparent 100%);
}

/* ANIMATED GRADIENT RING — wraps the frame, bleeds into the page */
.portrait-frame::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: calc(var(--radius-lg) + 2px);
  padding: 2px;
  background: conic-gradient(from var(--ring-angle, 0deg),
    #e8c690 0%,
    #d4a857 25%,
    #fde68a 50%,
    #86efac 75%,
    #e8c690 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 2;
  pointer-events: none;
  animation: ring-rotate 14s linear infinite;
}
@property --ring-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes ring-rotate {
  to { --ring-angle: 360deg; }
}

/* Glow halo that bleeds the gradient out into the page background */
.portrait-frame::after {
  content: '';
  position: absolute;
  inset: -28px;
  z-index: -1;
  border-radius: calc(var(--radius-lg) + 28px);
  background:
    radial-gradient(60% 50% at 30% 30%, rgba(232, 198, 144, 0.45), transparent 70%),
    radial-gradient(60% 60% at 75% 80%, rgba(212, 168, 87, 0.40), transparent 70%),
    radial-gradient(70% 60% at 50% 50%, rgba(253,230,138,0.20), transparent 75%);
  filter: blur(48px);
  opacity: 0.85;
  animation: glow-drift 16s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes glow-drift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-12px, 14px) scale(1.07); }
}

/* The old .portrait-glow div becomes redundant with the new ::after halo */
.portrait-glow { display: none; }

/* Mouse-spotlight overlay — keep on top of the image, below the ring */
.portrait-frame .portrait-spot {
  position: absolute; inset: 0;
  z-index: 1;
  background: radial-gradient(220px 220px at var(--mx) var(--my),
              rgb(var(--ink) / 0.16), transparent 70%);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Decorative corners — pull them slightly outward, color-match ring */
.portrait-corner { width: 42px; height: 42px; }
.portrait-corner-tl { top: -10px; left: -10px; }
.portrait-corner-br { bottom: -10px; right: -10px; }

/* Rescale title slightly so portrait + title feel balanced */
.hero-title-v2 {
  font-size: clamp(36px, 6.6vw, 96px);
  line-height: 0.98;
}

/* Tighten portrait stamp so the whole column reads as one block */
.portrait-tags { max-width: 380px; }
.portrait-stamp { gap: 10px; }

/* ============================================================
   Portrait — particle cloud halo (replaces the conic ring)
   ============================================================ */
.hero-portrait { position: relative; overflow: visible; }

.portrait-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.portrait-particles .dot {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  background: var(--c);
  opacity: var(--o);
  --tx: var(--x);
  --ty: var(--y);
  transform: translate(var(--tx), var(--ty));
  box-shadow: 0 0 8px var(--c), 0 0 2px var(--c);
  filter: blur(0.3px);
  animation: dot-twinkle 4.8s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  will-change: opacity, transform;
}
@keyframes dot-twinkle {
  0%, 100% { opacity: var(--o); transform: translate(var(--tx), var(--ty)) scale(1); }
  50%      { opacity: calc(var(--o) * 0.32); transform: translate(var(--tx), var(--ty)) scale(1.6); }
}

/* Disable the heavy conic ring; keep a hairline gradient outline */
.portrait-frame::before {
  background: linear-gradient(135deg, rgba(232, 198, 144, 0.55), rgba(212, 168, 87, 0.45), rgba(253,230,138,0.45), rgba(134,239,172,0.45)) !important;
  animation: none !important;
  inset: 0 !important;
  padding: 1px !important;
  border-radius: var(--radius-lg) !important;
}

/* Soften the giant halo behind the frame so dots take the spotlight */
.portrait-frame::after {
  inset: -16px;
  filter: blur(60px);
  opacity: 0.45;
}

/* Frame must sit above the particles layer */
.portrait-frame { position: relative; z-index: 1; }

/* ============================================================
   Acronym expansion (small parens after TOI / RL etc.)
   ============================================================ */
.acro-expand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62em;
  color: var(--text-mute);
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-left: 2px;
  vertical-align: 1px;
}
strong .acro-expand { color: var(--text-mute); font-weight: 400; }

/* ============================================================
   Hero — social mini row under the portrait stamp
   ============================================================ */
.hero-social {
  display: flex; gap: 8px;
  margin-top: 10px;
  align-items: center;
  justify-content: center;
}
.hero-social a {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgb(var(--ink) / 0.025);
  color: var(--text-mute);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}
.hero-social a:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-2);
  transform: translateY(-2px);
}

/* ============================================================
   NBA — 4-layer stack
   ============================================================ */
.nba-stack-head {
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.nba-stack-title {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.nba-stack-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
}

.nba-stack {
  display: flex; flex-direction: column;
  gap: 28px;
  margin-top: 8px;
}

.nba-layer {
  display: flex; flex-direction: column; gap: 14px;
}
.nba-layer-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
}
.nba-layer-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
}
.nba-layer-head h5 {
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.nba-layer-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.02em;
}

.nba-layer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1100px) { .nba-layer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .nba-layer-grid { grid-template-columns: 1fr; } }

.nba-stack .nba-cell {
  position: relative;
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgb(var(--ink) / 0.02);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease);
}
.nba-stack .nba-cell::before { content: none; }
.nba-stack .nba-cell:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  transform: translateY(-2px);
}
.nba-cell-head {
  display: flex; align-items: center; gap: 10px;
}
.nba-stack .nba-letter {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 14px;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 700;
  background: var(--grad);
  color: var(--on-accent);
}
.nba-stack .nba-cell h6 {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.nba-stack .nba-cell p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-dim);
}

/* Layer-specific accents */
.nba-layer-1 .nba-layer-badge { background: rgba(138,100,16,0.12); color: var(--hue-amber); }
.nba-layer-1 .nba-cell { border-left: 2px solid var(--hue-amber-fill); }
.nba-layer-1 .nba-letter { background: var(--hue-amber); color: var(--on-accent); }

/* Layer 2 — sky blue (cool counterpoint to the warm palette) */
.nba-layer-2 .nba-layer-badge { background: rgba(47,93,158,0.12); color: var(--hue-sky); }
.nba-layer-2 .nba-cell { border-left: 2px solid var(--hue-sky-fill); }
.nba-layer-2 .nba-letter { background: var(--hue-sky); color: var(--on-accent); }

.nba-layer-3 .nba-layer-badge { background: rgba(23,121,90,0.12); color: var(--hue-green); }
.nba-layer-3 .nba-cell { border-left: 2px solid var(--hue-green-fill); }
.nba-layer-3 .nba-letter { background: var(--hue-green); color: var(--on-accent); }

/* Layer 4 — terracotta (warm counterpoint, distinct from amber and sky) */
.nba-layer-4 .nba-layer-badge { background: rgba(156,85,40,0.12); color: var(--hue-clay); }
.nba-layer-4 .nba-cell { border-left: 2px solid var(--hue-clay-fill); }
.nba-layer-4 .nba-letter { background: var(--hue-clay); color: var(--on-accent); }

/* ============================================================
   CM alumni row
   ============================================================ */
.cm-alumni {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 12px;
  padding: 14px 0 4px;
}
.cm-alumni-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cm-alumni-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-alumni-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgb(var(--ink) / 0.025);
  color: var(--text-dim);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.cm-alumni-chip:hover { color: var(--text); border-color: var(--border-strong); }

/* ============================================================
   Credentials cards (Papers + Education redesign)
   ============================================================ */
.cred-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.cred-grid-papers { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 980px) {
  .cred-grid, .cred-grid-papers { grid-template-columns: 1fr; }
}

.cred-card {
  position: relative;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(232, 198, 144, 0.08), transparent 60%),
    var(--surface);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.cred-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.cred-card-feature {
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(232, 198, 144, 0.18), transparent 65%),
    radial-gradient(60% 50% at 100% 100%, rgba(212, 168, 87, 0.10), transparent 60%),
    var(--surface);
  border-color: var(--border-strong);
}
.cred-rail {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 10px;
  padding-right: 18px;
  border-right: 1px solid var(--border);
}
.cred-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.cred-pill-q1   { background: linear-gradient(135deg, rgba(199, 154, 60, 0.42), rgba(184, 134, 42, 0.32)); color: #4a340a; }
.cred-pill-conf { background: rgb(var(--ink) / 0.06); color: var(--text-dim); border: 1px solid var(--border-strong); }
.cred-year {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 36px;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cred-body { display: flex; flex-direction: column; gap: 8px; }
.cred-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.cred-title {
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-top: 4px;
}
.cred-venue {
  font-size: 13.5px;
  color: var(--text-dim);
  font-family: 'Be Vietnam Pro', sans-serif;
}
.cred-venue em { color: var(--accent); font-family: 'Instrument Serif', serif; font-style: italic; font-size: 1.08em; }
.cred-byline {
  font-size: 12.5px;
  color: var(--text-mute);
  margin-top: 2px;
}
.cred-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cred-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgb(var(--ink) / 0.04);
  color: var(--text);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.cred-btn:hover { background: var(--text); color: var(--bg); border-color: var(--text); transform: translateY(-1px); }
.cred-btn-ghost { background: transparent; }

@media (max-width: 600px) {
  .cred-card { grid-template-columns: 1fr; padding: 22px; gap: 14px; }
  .cred-rail { flex-direction: row; align-items: center; border-right: none; border-bottom: 1px solid var(--border); padding: 0 0 14px; }
  .cred-year { font-size: 28px; }
}

/* Education cards — calmer credential layout */
.edu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 820px) { .edu-grid { grid-template-columns: 1fr; } }
.edu-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 80% at 0% 100%, rgba(134,239,172,0.06), transparent 60%),
    var(--surface);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.edu-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.edu-mark {
  display: grid; place-items: center;
  width: 96px; height: 96px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(232, 198, 144, 0.18), rgba(212, 168, 87, 0.10));
  border: 1px solid var(--border-strong);
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 38px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}
.edu-mark span {
  font-size: 14px;
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-left: 4px;
  vertical-align: super;
}
.edu-body { display: flex; flex-direction: column; gap: 6px; }
.edu-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.edu-status-active {
  color: var(--accent-4);
  display: inline-flex; align-items: center; gap: 8px;
}
.edu-title {
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.edu-school {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--accent);
}
.edu-meta { font-size: 13px; color: var(--text-dim); }
.edu-points {
  list-style: none;
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.edu-points li {
  font-size: 12.5px;
  color: var(--text-dim);
  padding-left: 18px;
  position: relative;
}
.edu-points li::before {
  content: '◆';
  position: absolute; left: 0; top: 1px;
  color: var(--accent);
  font-size: 9px;
}

@media (max-width: 600px) {
  .edu-card { grid-template-columns: 1fr; padding: 22px; }
}

/* Hide legacy paper styles */
.papers-list, .paper { display: none !important; }

/* ============================================================
   ✦ Live · Bandit lab
   ============================================================ */
.section-lab { position: relative; }
.lab-num { color: var(--accent); }
.lab-num::before {
  background: linear-gradient(90deg, var(--accent-3), transparent);
}

.lab-card {
  position: relative;
  display: grid;
  grid-template-columns: 0.95fr 1.15fr;
  gap: 56px;
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 70% 100% at 100% 0%, rgba(232, 198, 144, 0.12), transparent 60%),
    radial-gradient(ellipse 90% 80% at 0% 100%, rgba(253,230,138,0.07), transparent 60%),
    var(--surface);
  overflow: hidden;
  isolation: isolate;
}
.lab-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(232, 198, 144, 0.5), rgba(212, 168, 87, 0.15), rgba(253,230,138,0.4));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
}
@media (max-width: 980px) {
  .lab-card { grid-template-columns: 1fr; gap: 40px; }
}

.lab-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 12px;
  border: 1px solid rgba(253,230,138,0.25);
  border-radius: 100px;
  background: rgba(253,230,138,0.06);
  width: max-content;
  margin-bottom: 22px;
}
.lab-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-3);
  animation: labPulse 2s ease-out infinite;
}
@keyframes labPulse {
  0%   { box-shadow: 0 0 0 0 rgba(253,230,138,0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(253,230,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(253,230,138,0); }
}

.lab-lead {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: var(--text-dim);
  margin-bottom: 28px;
  max-width: 56ch;
}
.lab-lead em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  color: var(--text);
  font-size: 1.08em;
}
.lab-lead strong { color: var(--text); font-weight: 600; }
.lab-lead code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
  padding: 2px 7px;
  background: rgba(232, 198, 144, 0.1);
  border: 1px solid rgba(232, 198, 144, 0.22);
  border-radius: 6px;
  color: var(--accent);
}

.lab-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.lab-stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  background: rgb(var(--ink) / 0.025);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.lab-stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.lab-stat-val {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.lab-board {
  display: flex; flex-direction: column;
  gap: 22px;
}
.lab-svg {
  width: 100%;
  height: 240px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(148, 105, 15, 0.06), transparent 70%),
    rgb(var(--ink) / 0.03);
  border: 1px solid var(--border);
}
.lab-curve-stroke {
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px currentColor);
}
.lab-truth-line {
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.lab-arms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 560px) { .lab-arms { grid-template-columns: 1fr; } }
.lab-arm {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
  padding: 14px;
  background: rgb(var(--ink) / 0.025);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: left;
  transition: transform 0.25s var(--ease), border-color 0.2s ease, background 0.2s ease;
}
.lab-arm:hover { background: rgb(var(--ink) / 0.05); border-color: var(--border-strong); }
.lab-arm.is-best {
  border-color: rgba(232, 198, 144, 0.5);
  background: linear-gradient(135deg, rgba(232, 198, 144, 0.08), rgba(212, 168, 87, 0.04));
}
.lab-arm.is-flash { animation: armFlash 0.45s ease-out; }
@keyframes armFlash {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.05); background: rgb(var(--ink) / 0.09); }
  100% { transform: scale(1); }
}
.arm-mark {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent),
              0 0 10px color-mix(in srgb, var(--c) 60%, transparent);
  grid-row: 1 / span 3;
  align-self: center;
}
.arm-meta { display: flex; flex-direction: column; gap: 2px; }
.arm-name {
  font-size: 13px; font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}
.arm-mean {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.arm-bar {
  grid-column: 2;
  height: 4px;
  border-radius: 100px;
  background: rgb(var(--ink) / 0.06);
  overflow: hidden;
}
.arm-bar-fill {
  display: block;
  height: 100%;
  width: 50%;
  background: var(--c);
  border-radius: inherit;
  transition: width 0.4s var(--ease-out);
}
.arm-pulls {
  grid-column: 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

.lab-controls {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.lab-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 100px;
  border: 1px solid var(--border-strong);
  background: rgb(var(--ink) / 0.03);
  color: var(--text);
  transition: transform 0.25s var(--ease), border-color 0.2s ease, background 0.2s ease;
}
.lab-btn:hover { background: rgb(var(--ink) / 0.07); border-color: rgb(var(--ink) / 0.3); }
.lab-btn-primary {
  background: var(--grad);
  color: var(--on-accent);
  border-color: transparent;
  font-weight: 700;
}
.lab-btn-primary:hover { transform: translateY(-1px); }
.lab-btn-ghost { border-color: var(--border); color: var(--text-dim); }
.lab-foot {
  grid-column: 1 / -1;
  margin-top: 4px;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-mute);
  max-width: 70ch;
}

/* ============================================================
   Command palette (⌘K)
   ============================================================ */
.cmdk[hidden] { display: none !important; }
.cmdk {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 24px 24px;
  animation: cmdkFade 0.18s ease-out;
}
@keyframes cmdkFade { from { opacity: 0; } to { opacity: 1; } }
.cmdk-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgb(var(--shadow) / 0.34), rgb(var(--shadow) / 0.55));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cmdk-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: rgb(var(--paper) / 0.97);
  box-shadow: 0 30px 80px rgb(var(--shadow) / 0.22), 0 0 0 1px rgb(255 255 255 / 0.7) inset;
  overflow: hidden;
  animation: cmdkPop 0.22s var(--ease-out);
}
@keyframes cmdkPop {
  from { transform: translateY(-12px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)     scale(1);    opacity: 1; }
}
.cmdk-input-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
}
.cmdk-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  color: var(--text);
  font-size: 15px;
  cursor: text;
}
.cmdk-kbd, .cmdk-foot kbd, .cmd-trigger kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: rgb(var(--ink) / 0.05);
  color: var(--text-dim);
}
.cmdk-list {
  max-height: 50vh;
  overflow-y: auto;
  padding: 6px;
}
.cmdk-group-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 12px 12px 6px;
}
.cmdk-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--text-dim);
  transition: background 0.1s ease, color 0.1s ease;
}
.cmdk-item.is-active {
  background: rgba(232, 198, 144, 0.12);
  color: var(--text);
}
.cmdk-item-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgb(var(--ink) / 0.05);
  font-size: 13px;
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
}
.cmdk-item-label { flex: 1; }
.cmdk-item-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cmdk-empty {
  padding: 28px;
  text-align: center;
  color: var(--text-mute);
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 16px;
}
.cmdk-foot {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-mute);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  flex-wrap: wrap;
}
.cmdk-foot span { display: inline-flex; align-items: center; gap: 6px; }
.cmdk-hint { margin-left: auto; color: var(--text-dim); }

.cmdk-toast {
  position: fixed;
  left: 50%; bottom: 28px;
  transform: translateX(-50%);
  z-index: 1100;
  padding: 10px 16px;
  border-radius: 100px;
  border: 1px solid var(--border-strong);
  background: rgb(var(--paper) / 0.96);
  box-shadow: 0 12px 32px rgb(var(--shadow) / 0.18);
  backdrop-filter: blur(8px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text);
  letter-spacing: 0.05em;
  animation: cmdkToast 1.6s ease forwards;
  pointer-events: none;
}
@keyframes cmdkToast {
  0%   { opacity: 0; transform: translate(-50%, 10px); }
  15%  { opacity: 1; transform: translate(-50%, 0); }
  85%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -10px); }
}

/* Nav ⌘K trigger pill */
.cmd-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 12px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: rgb(var(--ink) / 0.025);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 12px;
  color: var(--text-dim);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.cmd-trigger:hover { border-color: var(--border-strong); color: var(--text); background: rgb(var(--ink) / 0.05); }
.cmd-trigger-keys { display: inline-flex; gap: 2px; margin-left: 2px; }
@media (max-width: 1100px) { .cmd-trigger { display: none; } }

/* ============================================================
   Lab mode (Konami easter egg)
   ============================================================ */
.lab-mode[hidden] { display: none !important; }
.lab-mode {
  position: fixed;
  bottom: 22px; left: 22px;
  z-index: 200;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border: 1px solid rgba(23, 121, 90, 0.45);
  border-radius: 100px;
  background: rgb(var(--paper) / 0.94);
  box-shadow: 0 10px 28px rgb(var(--shadow) / 0.16);
  backdrop-filter: blur(10px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  animation: labModeIn 0.45s var(--ease-out);
  pointer-events: none;
}
@keyframes labModeIn {
  from { transform: translateY(20px) scale(0.95); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.lab-mode-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-4);
  box-shadow: 0 0 12px var(--accent-4);
  animation: labPulse 1.5s ease-out infinite;
}
.lab-mode-text strong {
  color: var(--accent-4);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-right: 8px;
}
.lab-mode-text { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .lab-pulse, .lab-mode-dot,
  .cmdk-panel, .cmdk, .lab-arm.is-flash,
  .nba-scene * { animation: none !important; transition: none !important; }
}

/* ============================================================
   NBA · Goal callout (quiet)
   ============================================================ */
.nba-goal {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 18px;
  margin-top: -8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgb(var(--ink) / 0.02);
}
.nba-goal-icon {
  display: inline-flex;
  color: var(--accent);
  flex-shrink: 0;
  transform: translateY(2px);
}
.nba-goal-icon svg { width: 16px; height: 16px; }
.nba-goal-body { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; }
.nba-goal-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  flex-shrink: 0;
}
.nba-goal-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-dim);
}
.nba-goal-text strong { color: var(--text); font-weight: 600; }

/* ============================================================
   NBA · What is NBA? Scene switcher
   ============================================================ */
.nba-what {
  display: flex; flex-direction: column;
  gap: 24px;
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.nba-what-head { display: flex; flex-direction: column; gap: 6px; }
.nba-what-def {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 72ch;
  margin: 6px 0 10px;
}
.nba-what-def strong { color: var(--text); font-weight: 600; }
.nba-what-def em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  color: var(--text);
  font-size: 1.05em;
}
/* The questions NBA answers — one per line, accent dot as the marker. */
.nba-what-questions {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 72ch;
  margin: 0 0 20px;
}
.nba-what-questions li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-dim);
}
.nba-what-questions li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.nba-what-title {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.nba-scenes {
  position: relative;
  display: flex; flex-direction: column;
  gap: 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 60% 80% at 0% 0%, rgba(232, 198, 144, 0.08), transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(253,230,138,0.05), transparent 60%),
    rgb(var(--ink) / 0.02);
  padding: clamp(20px, 3vw, 32px);
  overflow: hidden;
}

/* Stage: all scenes stack in the same grid cell so they share the same box
   and the stage sizes to the tallest scene. No absolute positioning, no
   bleed-through. */
.nba-scene-stage {
  display: grid;
  grid-template-columns: 1fr;
}
.nba-scene {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s var(--ease-out),
    visibility 0s linear 0.35s;
}
.nba-scene.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.35s var(--ease-out),
    visibility 0s linear 0s;
}
@media (max-width: 880px) {
  .nba-scene { grid-template-columns: 1fr; gap: 20px; }
}

.nba-scene-viz {
  border-radius: 14px;
  /* A deliberately dark inset — the "display screen" set into a light console.
     The scene illustrations are drawn white-on-dark, and keeping them that way
     reads as an instrument readout, not as leftover dark-theme styling. */
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232, 198, 144, 0.10), transparent 70%),
    #1c1a16;
  border: 1px solid rgb(var(--ink) / 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 12px;
}
.scene-svg { width: 100%; height: auto; display: block; }

.nba-scene-text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nba-scene-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.nba-scene-headline {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}
.nba-scene-body {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 50ch;
}
.nba-scene-body em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  color: var(--text);
  font-size: 1.06em;
}
.nba-scene-body strong { color: var(--text); font-weight: 600; }

/* Controls */
.nba-scene-controls {
  display: flex; align-items: center; gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.nba-scene-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgb(var(--ink) / 0.03);
  color: var(--text-dim);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.nba-scene-arrow:hover {
  background: rgb(var(--ink) / 0.07);
  color: var(--text);
  border-color: rgb(var(--ink) / 0.3);
}
.nba-scene-dots {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 8px;
}
.nba-scene-dot {
  width: 22px; height: 4px;
  border-radius: 100px;
  border: none;
  background: rgb(var(--ink) / 0.18);
  transition: background 0.25s ease, width 0.25s var(--ease-out);
  cursor: none;
}
.nba-scene-dot:hover { background: rgb(var(--ink) / 0.4); }
.nba-scene-dot.is-active {
  width: 40px;
  background: var(--grad);
}
.nba-scene-auto {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: rgb(var(--ink) / 0.025);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.nba-scene-auto:hover { border-color: var(--border-strong); color: var(--text); }
.nba-scene-auto-icon {
  width: 8px; height: 8px;
  background: var(--text-mute);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: clip-path 0.2s, background 0.2s;
}
.nba-scene-auto[aria-pressed="true"] {
  border-color: rgba(134,239,172,0.5);
  color: var(--accent-4);
  background: rgba(134,239,172,0.08);
}
.nba-scene-auto[aria-pressed="true"] .nba-scene-auto-icon {
  background: var(--accent-4);
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%);
}

/* Scene 1 — "Without vs With DS" — header → column headers → metric
   rows cascade in with the WITHOUT bar appearing first (gray), then
   the WITH bar arriving longer (green) → bottom summary callout. */
.nba-scene[data-scene="0"] .fn-head,
.nba-scene[data-scene="0"] .fn-cols,
.nba-scene[data-scene="0"] .metric,
.nba-scene[data-scene="0"] .fn-summary {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.nba-scene[data-scene="0"].is-active .fn-head    { transition-delay: 0.05s; opacity: 1; }
.nba-scene[data-scene="0"].is-active .fn-cols    { transition-delay: 0.20s; opacity: 1; }
.nba-scene[data-scene="0"].is-active .metric-1   { transition-delay: 0.40s; opacity: 1; }
.nba-scene[data-scene="0"].is-active .metric-2   { transition-delay: 0.55s; opacity: 1; }
.nba-scene[data-scene="0"].is-active .metric-3   { transition-delay: 0.70s; opacity: 1; }
.nba-scene[data-scene="0"].is-active .metric-4   { transition-delay: 0.85s; opacity: 1; }
.nba-scene[data-scene="0"].is-active .fn-summary { transition-delay: 1.10s; opacity: 1; animation: fnGlow 3s ease-in-out 2s infinite; }
@keyframes fnGlow {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50%      { filter: drop-shadow(0 0 5px rgba(134,239,172,0.6)); }
}

/* Scene 2 — "Same Person, Different Day" — header → four moment cards
   stagger in → axis ticks settle. (Wave removed: it was overlapping
   the cards.) */
.nba-scene[data-scene="1"] .ctx-head,
.nba-scene[data-scene="1"] .moment,
.nba-scene[data-scene="1"] .ctx-axis,
.nba-scene[data-scene="1"] .ctx-drop {
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}
.nba-scene[data-scene="1"].is-active .ctx-head   { transition-delay: 0.05s; opacity: 1; }
.nba-scene[data-scene="1"].is-active .moment-1   { transition-delay: 0.30s; opacity: 1; }
.nba-scene[data-scene="1"].is-active .moment-2   { transition-delay: 0.45s; opacity: 1; }
.nba-scene[data-scene="1"].is-active .moment-3   { transition-delay: 0.60s; opacity: 1; }
.nba-scene[data-scene="1"].is-active .moment-4   { transition-delay: 0.75s; opacity: 1; }
.nba-scene[data-scene="1"].is-active .ctx-axis   { transition-delay: 0.90s; opacity: 1; }
.nba-scene[data-scene="1"].is-active .ctx-drop-1 { transition-delay: 1.00s; opacity: 1; }
.nba-scene[data-scene="1"].is-active .ctx-drop-2 { transition-delay: 1.07s; opacity: 1; }
.nba-scene[data-scene="1"].is-active .ctx-drop-3 { transition-delay: 1.14s; opacity: 1; }
.nba-scene[data-scene="1"].is-active .ctx-drop-4 { transition-delay: 1.21s; opacity: 1; }

/* Scene 3 — "What if we act?" — World A (no intervention) resolves first,
   World B (intervened) builds on top of it, then the LIFT panel names the
   gap between them. */
.nba-scene[data-scene="2"] .world-a,
.nba-scene[data-scene="2"] .world-b,
.nba-scene[data-scene="2"] .ev-a,
.nba-scene[data-scene="2"] .ev-b,
.nba-scene[data-scene="2"] .lift-panel {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.nba-scene[data-scene="2"].is-active .world-a  { transition-delay: 0.10s; opacity: 1; }
.nba-scene[data-scene="2"].is-active .ev-a1    { transition-delay: 0.35s; opacity: 1; }
.nba-scene[data-scene="2"].is-active .ev-a2    { transition-delay: 0.50s; opacity: 1; }
.nba-scene[data-scene="2"].is-active .ev-aout  { transition-delay: 0.70s; opacity: 1; }
.nba-scene[data-scene="2"].is-active .world-b  { transition-delay: 0.95s; opacity: 1; }
.nba-scene[data-scene="2"].is-active .ev-b1    { transition-delay: 1.15s; opacity: 1; }
.nba-scene[data-scene="2"].is-active .ev-b2    { transition-delay: 1.28s; opacity: 1; }
.nba-scene[data-scene="2"].is-active .ev-bout  { transition-delay: 1.45s; opacity: 1; }
.nba-scene[data-scene="2"].is-active .lift-panel { transition-delay: 1.70s; opacity: 1; animation: liftGlow 3s ease-in-out 2s infinite; }
@keyframes liftGlow {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50%      { filter: drop-shadow(0 0 8px rgba(134,239,172,0.55)); }
}

/* Scene 4 — "Reinforcement Loop · AI-driven" — clockwise OBSERVE → LEARN
   → DECIDE → ACT. Five behavior chips bundle into a junction that flows
   into OBSERVE via an animated dotted channel; ACT (left, 9 o'clock)
   sends a curved feedback line out under the loop to the metrics block
   on the right. A glowing dot orbits the loop every 5s — the central
   animation that sells the cycle. */
.nba-scene[data-scene="3"] .rl-input,
.nba-scene[data-scene="3"] .rl-output,
.nba-scene[data-scene="3"] .rl-stream,
.nba-scene[data-scene="3"] .sig,
.nba-scene[data-scene="3"] .rl-node,
.nba-scene[data-scene="3"] .kpi,
.nba-scene[data-scene="3"] .rl-output-flow,
.nba-scene[data-scene="3"] .rl-traveller {
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}
.nba-scene[data-scene="3"].is-active .rl-input        { transition-delay: 0.05s; opacity: 1; }
.nba-scene[data-scene="3"].is-active .sig-1           { transition-delay: 0.12s; opacity: 1; }
.nba-scene[data-scene="3"].is-active .sig-2           { transition-delay: 0.22s; opacity: 1; }
.nba-scene[data-scene="3"].is-active .sig-3           { transition-delay: 0.32s; opacity: 1; }
.nba-scene[data-scene="3"].is-active .sig-4           { transition-delay: 0.42s; opacity: 1; }
.nba-scene[data-scene="3"].is-active .sig-5           { transition-delay: 0.52s; opacity: 1; }
.nba-scene[data-scene="3"].is-active .rl-stream       { transition-delay: 0.65s; opacity: 1; }
.nba-scene[data-scene="3"].is-active .rl-node-top     { transition-delay: 0.80s; opacity: 1; } /* 01 OBSERVE */
.nba-scene[data-scene="3"].is-active .rl-node-right   { transition-delay: 0.95s; opacity: 1; } /* 02 LEARN */
.nba-scene[data-scene="3"].is-active .rl-node-bot     { transition-delay: 1.10s; opacity: 1; } /* 03 DECIDE */
.nba-scene[data-scene="3"].is-active .rl-node-left    { transition-delay: 1.25s; opacity: 1; } /* 04 ACT */
.nba-scene[data-scene="3"].is-active .rl-traveller    { transition-delay: 1.40s; opacity: 1; }
.nba-scene[data-scene="3"].is-active .rl-output-flow  { transition-delay: 1.55s; opacity: 1; }
.nba-scene[data-scene="3"].is-active .rl-output       { transition-delay: 1.65s; opacity: 1; }
.nba-scene[data-scene="3"].is-active .kpi-1           { transition-delay: 1.78s; opacity: 1; }
.nba-scene[data-scene="3"].is-active .kpi-2           { transition-delay: 1.92s; opacity: 1; }
.nba-scene[data-scene="3"].is-active .kpi-3           { transition-delay: 2.06s; opacity: 1; }
.nba-scene[data-scene="3"].is-active .kpi-4           { transition-delay: 2.20s; opacity: 1; animation: kpiPulse 3s ease-in-out 2.8s infinite; }
@keyframes kpiPulse {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50%      { filter: drop-shadow(0 0 4px rgba(134,239,172,0.7)); }
}

/* ============================================================
   NBA architecture · accordion override
   ============================================================ */
.nba-stack { gap: 12px; }

.nba-layer {
  display: block;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgb(var(--ink) / 0.02);
  overflow: hidden;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s var(--ease-out), box-shadow 0.25s ease;
}
.nba-layer:hover {
  border-color: rgba(232, 198, 144, 0.35);
  background: rgba(232, 198, 144, 0.04);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgb(var(--shadow) / 0.18);
}
.nba-layer.is-expanded {
  border-color: rgba(232, 198, 144, 0.45);
  background: rgba(232, 198, 144, 0.05);
}

/* Make the head a true button-bar; one line on desktop, wrap only on narrow. */
.nba-layer-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 22px;
  text-align: left;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  flex-wrap: nowrap;
  min-width: 0;
}
.nba-layer-head h5 {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nba-layer-tag {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  color: var(--text-mute);
}
@media (max-width: 720px) {
  .nba-layer-head { flex-wrap: wrap; }
  .nba-layer-head h5, .nba-layer-tag { white-space: normal; overflow: visible; }
  .nba-layer-tag { flex-basis: 100%; }
}
.nba-layer-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 14px;
}
.nba-layer-head h5 {
  flex: 1 1 auto;
  min-width: 0;
}
.nba-layer-chevron {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px 0 14px;
  border-radius: 100px;
  background: rgb(var(--ink) / 0.04);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}
.nba-layer-chevron::before { content: 'Explore'; }
.nba-layer-chevron svg {
  transition: transform 0.25s var(--ease-out);
}
.nba-layer:hover .nba-layer-chevron {
  background: rgba(232, 198, 144, 0.10);
  border-color: rgba(232, 198, 144, 0.45);
  color: var(--text);
}
.nba-layer.is-expanded .nba-layer-chevron {
  background: rgba(232, 198, 144, 0.18);
  border-color: rgba(232, 198, 144, 0.55);
  color: var(--accent);
}
.nba-layer.is-expanded .nba-layer-chevron svg {
  transform: rotate(90deg);
}
.nba-layer.is-expanded .nba-layer-chevron::before { content: 'Collapse'; }

/* Animate the body via grid-template-rows trick */
.nba-layer-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease-out;
}
.nba-layer.is-expanded .nba-layer-body { grid-template-rows: 1fr; }
.nba-layer-body-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 22px;
}
.nba-layer-body-inner > .nba-layer-grid {
  padding-bottom: 22px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  margin-top: 0;
}
.nba-layer.is-expanded .nba-layer-body-inner > .nba-layer-grid { padding-top: 18px; }

/* ============================================================
   Bandit · fatigue cap slider + capped-arm state
   ============================================================ */
.lab-cap {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr minmax(220px, 320px);
  gap: 20px;
  align-items: center;
  padding: 14px 18px;
  margin-top: 6px;
  border: 1px dashed rgba(232, 198, 144, 0.28);
  border-radius: 14px;
  background: rgba(232, 198, 144, 0.04);
}
@media (max-width: 720px) {
  .lab-cap { grid-template-columns: 1fr; gap: 12px; }
}
.lab-cap-text { display: flex; flex-direction: column; gap: 4px; }
.lab-cap-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.lab-cap-hint {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 14.5px;
  color: var(--text-mute);
  line-height: 1.5;
}
.lab-cap-control {
  display: flex; align-items: center; gap: 12px;
}
.lab-cap-slider {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  flex: 1;
  height: 6px;
  border-radius: 100px;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent-3) 100%);
  outline: none;
}
.lab-cap-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--text);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(232, 198, 144, 0.18);
  cursor: pointer;
  transition: transform 0.15s var(--ease);
}
.lab-cap-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.lab-cap-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--text);
  border: 2px solid var(--accent);
  cursor: pointer;
}
.lab-cap-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: right;
}

/* ============================================================
   Thompson Sampling lab — world controls, regret race, policy
   ============================================================ */
.lab-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 14px;
}
.lab-panel-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
}
.lab-panel-sub,
.lab-panel-hint {
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-mute);
}

/* -- the world: true rate + feedback delay per arm -- */
.lab-world,
.lab-regret,
.lab-policy {
  /* .lab-card is a two-column grid; these panels are full-bleed rows. */
  grid-column: 1 / -1;
  margin-top: 26px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgb(var(--ink) / 0.015);
}
.lab-world-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lab-world-row {
  display: grid;
  grid-template-columns: 44px 1fr 1fr;
  align-items: center;
  gap: 16px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.lab-world-row.is-delayed {
  border-color: rgba(232, 198, 144, 0.28);
  background: rgba(232, 198, 144, 0.05);
}
.lab-world-arm {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.lab-world-field {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.lab-world-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  white-space: nowrap;
}
.lab-world-field input[type="range"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 100px;
  background: var(--border-strong);
  outline: none;
}
.lab-world-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c, var(--accent));
  border: 2px solid var(--bg);
  cursor: pointer;
  transition: transform 0.15s var(--ease);
}
.lab-world-field input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.18); }
.lab-world-field input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c, var(--accent));
  border: 2px solid var(--bg);
  cursor: pointer;
}
.lab-world-field output {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: right;
}
.lab-world-note {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-mute);
  max-width: 640px;
}

/* -- regret race -- */
.lab-regret-svg {
  display: block;
  width: 100%;
  height: auto;
}
.lab-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 10px;
}
.lab-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-mute);
  opacity: 0.65;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}
.lab-legend-item.is-active { opacity: 1; color: var(--text-dim); }
.lab-legend-item b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.lab-legend-swatch {
  width: 14px; height: 3px;
  border-radius: 2px;
  flex: 0 0 auto;
}

/* -- policy picker -- */
.lab-policy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lab-policy-row + .lab-policy-row {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.lab-policy-row .lab-cap-control { flex: 1; max-width: 320px; }
.lab-seg {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgb(var(--ink) / 0.02);
}
.lab-seg-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 7px 15px;
  border-radius: 999px;
  color: var(--text-mute);
  cursor: none;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.lab-seg-btn:hover { color: var(--text-dim); }
.lab-seg-btn.is-active {
  color: var(--bg);
  background: var(--accent);
  font-weight: 600;
}

/* -- transport extras -- */
.lab-seed {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-mute);
  margin-left: 2px;
}
.lab-speed {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-mute);
}
.lab-speed input[type="range"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 78px;
  height: 4px;
  border-radius: 100px;
  background: var(--border-strong);
  outline: none;
}
.lab-speed input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.lab-speed input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  cursor: pointer;
}
.lab-btn-ghost.is-active {
  color: var(--accent);
  border-color: rgba(232, 198, 144, 0.45);
}

/* -- in-flight badge: pulls dispatched but not yet observed -- */
.arm-flight {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--accent);
  opacity: 0.85;
}
.arm-flight::before {
  content: '◷ ';
}

.lab-link { color: var(--accent); border-bottom: 1px solid rgba(232, 198, 144, 0.3); }
.lab-link:hover { border-bottom-color: var(--accent); }

/* Keyboard focus must stay visible on every lab control — several of these use
   `cursor: none` for the custom pointer, so the outline is the only affordance. */
.lab-btn:focus-visible,
.lab-seg-btn:focus-visible,
.lab-arm:focus-visible,
.lab-link:focus-visible,
.lab-world-field input[type="range"]:focus-visible,
.lab-speed input[type="range"]:focus-visible,
.lab-cap-slider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============================================================
   Uplift quadrants lab
   ============================================================ */
.up-board {
  /* The scatter needs the card's full width, not one of its two columns. */
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(240px, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .up-board { grid-template-columns: 1fr; }
}
.up-plot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgb(var(--ink) / 0.015);
}
.up-side {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* -- segment mix -- */
.up-mix { display: flex; flex-direction: column; gap: 9px; }
.up-mix-row {
  display: grid;
  grid-template-columns: 10px 1fr 64px auto;
  align-items: center;
  gap: 9px;
  font-size: 12px;
}
.up-mix-swatch { width: 10px; height: 10px; border-radius: 3px; }
.up-mix-label { color: var(--text-dim); }
.up-mix-bar {
  height: 5px;
  border-radius: 100px;
  background: var(--border-strong);
  overflow: hidden;
}
.up-mix-fill {
  display: block;
  height: 100%;
  border-radius: 100px;
  transition: width 0.35s var(--ease);
}
.up-mix-row b {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

/* -- head-to-head bars -- */
.up-compare {
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.up-cmp-row {
  display: grid;
  grid-template-columns: 66px 1fr 42px;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  opacity: 0.55;
  transition: opacity 0.3s var(--ease);
}
.up-cmp-row.is-active { opacity: 1; }
.up-cmp-name {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
}
.up-cmp-track {
  height: 8px;
  border-radius: 100px;
  background: var(--border-strong);
  overflow: hidden;
}
.up-cmp-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 100px;
  background: var(--accent-2);
  transition: width 0.4s var(--ease);
}
.up-cmp-fill.is-uplift { background: var(--hue-green); }
.up-cmp-row b {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* -- budget saved -- */
.up-saved {
  grid-column: 1 / -1;
  margin-top: 26px;
  padding: 20px;
  border: 1px solid rgba(23, 121, 90, 0.25);
  border-radius: var(--radius);
  background: rgba(23, 121, 90, 0.05);
}
.up-saved-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.up-saved-val {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--hue-green);
  font-variant-numeric: tabular-nums;
}
.up-saved-track {
  display: block;
  height: 10px;
  border-radius: 100px;
  background: rgb(var(--ink) / 0.07);
  overflow: hidden;
}
.up-saved-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--hue-green-fill), var(--hue-green));
  transition: width 0.45s var(--ease);
}
.up-saved-note {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-mute);
}

.up-seg-btn:focus-visible,
#upBudget:focus-visible,
#upHet:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .lab-world-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .lab-policy-row { justify-content: flex-start; }
  .lab-policy-row .lab-cap-control { max-width: none; width: 100%; }
  .lab-seg { width: 100%; }
  .lab-seg-btn { flex: 1; padding: 8px 6px; text-align: center; }
}

.lab-arm { position: relative; }
.lab-arm.is-capped {
  border-color: rgba(253,230,138,0.45);
  background: linear-gradient(135deg, rgba(253,230,138,0.08), rgba(212, 168, 87, 0.04));
}
.lab-arm.is-capped::after {
  content: 'capped';
  position: absolute;
  top: 8px; right: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 2px 7px;
  border: 1px solid rgba(253,230,138,0.35);
  border-radius: 100px;
  background: rgba(253,230,138,0.08);
}

/* ============================================================
   ✦ Live · RecSys two-tower lab
   ============================================================ */
.rec-card { grid-template-columns: 1fr 1.2fr; }
@media (max-width: 980px) { .rec-card { grid-template-columns: 1fr; } }
.rec-side {
  display: flex; flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.rec-side-title {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.rec-side-lead {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 50ch;
}
.rec-side-lead em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  color: var(--text);
  font-size: 1.08em;
}
.lab-eyebrow-accent {
  color: var(--accent);
  border-color: rgba(232, 198, 144, 0.28);
  background: rgba(232, 198, 144, 0.05);
}
.lab-eyebrow-accent .lab-pulse { background: var(--accent); }

.rec-tags {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (max-width: 420px) { .rec-tags { grid-template-columns: 1fr; } }
.rec-tag {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgb(var(--ink) / 0.025);
  text-align: left;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.rec-tag:hover { border-color: var(--border-strong); }
.rec-tag.is-active {
  border-color: rgba(232, 198, 144, 0.55);
  background: linear-gradient(135deg, rgba(232, 198, 144, 0.14), rgba(212, 168, 87, 0.06));
}
.rec-tag-name {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.rec-tag-dim {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.06em;
}

.rec-vec {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: rgb(var(--shadow) / 0.3);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-dim);
}
.rec-vec-label { color: var(--accent); font-weight: 700; }
.rec-vec-array { color: var(--text); font-variant-numeric: tabular-nums; flex: 1; min-width: 0; }
.rec-vec-norm {
  color: var(--text-mute);
  font-size: 11px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}

.rec-personas {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
.rec-personas-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-right: 6px;
}
.rec-persona {
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: rgb(var(--ink) / 0.025);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.rec-persona:hover {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(232, 198, 144, 0.08);
}

.rec-list {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 6px;
}
.rec-item {
  display: grid;
  grid-template-columns: auto auto 1fr minmax(60px, 110px) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgb(var(--ink) / 0.025);
  transition: transform 0.4s var(--ease-out), border-color 0.3s, background 0.3s, opacity 0.3s;
}
.rec-item.is-top {
  border-color: rgba(232, 198, 144, 0.55);
  background: linear-gradient(135deg, rgba(232, 198, 144, 0.16), rgba(212, 168, 87, 0.06));
  transform: translateX(-4px);
  box-shadow: 0 6px 24px rgba(232, 198, 144, 0.08);
}
.rec-item.is-low { opacity: 0.55; }
.rec-rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  width: 22px;
}
.rec-item-emoji {
  font-size: 14px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgb(var(--ink) / 0.05);
  border-radius: 8px;
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}
.rec-item.is-top .rec-item-emoji {
  background: var(--grad);
  color: var(--on-accent);
}
.rec-item-meta {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.rec-item-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rec-item-why {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rec-item-bar {
  height: 4px;
  background: rgb(var(--ink) / 0.06);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}
.rec-item-bar-fill {
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  background: var(--grad);
  border-radius: inherit;
  transition: width 0.4s var(--ease-out);
}
.rec-item.is-neg .rec-item-bar-fill {
  background: rgb(var(--ink) / 0.18);
}
.rec-item-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 52px;
  text-align: right;
  font-weight: 600;
}
.rec-item.is-neg .rec-item-score { color: var(--text-mute); }
.rec-foot {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--text-mute);
  line-height: 1.5;
  margin-top: 6px;
  max-width: 60ch;
}
@media (max-width: 600px) {
  .rec-item { grid-template-columns: auto auto 1fr auto; }
  .rec-item-bar { display: none; }
}

/* ============================================================
   Technical Labs · intro tile grid (home page) + Labs page
   ============================================================ */
.section-labs-intro {
  position: relative;
}
.labs-intro-lead {
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--text-dim);
  line-height: 1.65;
  max-width: 760px;
  margin-top: 8px;
}
.labs-intro-lead strong { color: var(--text); font-weight: 600; }

.labs-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  margin: 56px 0 40px;
}
@media (max-width: 900px) { .labs-tile-grid { grid-template-columns: 1fr; } }

.labs-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px clamp(24px, 2.4vw, 36px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: inherit;
  isolation: isolate;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease);
  overflow: hidden;
}
.labs-tile::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: radial-gradient(circle at 20% 0%, rgba(232, 198, 144, 0.10), transparent 55%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.labs-tile:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  background: var(--surface-2);
}
.labs-tile:hover::before { opacity: 1; }
.labs-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.labs-tile-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-mute);
}
.labs-tile-num { color: var(--accent); }
.labs-tile-live {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-dim);
}
.labs-tile-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--text);
  margin: 4px 0 0;
}
.labs-tile-sub {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-mute);
}
.labs-tile-lead {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-dim);
  margin: 8px 0 4px;
}
.labs-tile-lead strong { color: var(--text); font-weight: 600; }
.labs-tile-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0 8px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.labs-tile-bullets li {
  font-size: 13.5px;
  color: var(--text-dim);
  padding-left: 16px;
  position: relative;
}
.labs-tile-bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 6px; height: 1px;
  background: var(--accent);
}
.labs-tile-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-top: 6px;
  align-self: flex-start;
  transition: gap 0.4s var(--ease);
}
.labs-tile:hover .labs-tile-cta { gap: 12px; }
.labs-tile-cta svg { transition: transform 0.4s var(--ease); }
.labs-tile:hover .labs-tile-cta svg { transform: translate(2px, -2px); }

.labs-intro-foot {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--text-mute);
  max-width: 70ch;
  line-height: 1.55;
  margin-top: 8px;
}
.labs-intro-foot .inline-link {
  color: var(--accent);
  font-style: normal;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.labs-intro-foot .inline-link:hover { color: var(--text); }

/* ============================================================
   Labs page — header, jumps, closing CTA
   ============================================================ */
.labs-header { padding-top: 140px; }
.labs-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.3s var(--ease), gap 0.3s var(--ease);
}
.labs-back:hover {
  color: var(--accent);
  gap: 10px;
}
.section-num.lab-num .labs-back::before {
  display: none;
}
/* Override default section-num::before line when its content is a back-link */
.section-num.lab-num:has(.labs-back)::before { display: none; }

.labs-page-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  max-width: none;
}
.labs-page-lead {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 680px;
  margin-top: 4px;
}

.labs-jumps {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 28px;
}
.labs-jump {
  display: inline-flex; align-items: baseline; gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-dim);
  background: var(--surface);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}
.labs-jump:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateY(-1px);
}
.labs-jump-num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.labs-cta {
  padding-bottom: clamp(120px, 16vw, 220px);
}
.labs-cta-card {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 64px);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.labs-cta-card::before {
  content: '';
  position: absolute; inset: -2px;
  background: radial-gradient(circle at 90% 0%, rgba(232, 198, 144, 0.18), transparent 55%);
  z-index: -1;
}
.labs-cta-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 720px;
}
.labs-cta-lead {
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--text-dim);
  line-height: 1.65;
  max-width: 640px;
}
.labs-cta-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 12px;
}

/* ============================================================
   Mobile nav — hamburger + slide-in sheet (shown below 980px)
   ============================================================ */
.nav-burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  cursor: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav-burger:hover { border-color: var(--accent); background: var(--surface-2); }
.nav-burger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nav-burger-line {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
  transform-origin: center;
}
body.is-sheet-open .nav-burger-line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
body.is-sheet-open .nav-burger-line:nth-child(2) { opacity: 0; }
body.is-sheet-open .nav-burger-line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 980px) {
  .nav-burger { display: inline-flex; }
  /* When the burger appears, hide the ⌘K trigger — it lives in the sheet */
}

/* Sheet */
.nav-sheet[hidden] { display: none; }
.nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.nav-sheet[aria-hidden="false"] { pointer-events: auto; }

.nav-sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgb(var(--shadow) / 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: background 0.45s var(--ease), backdrop-filter 0.45s var(--ease);
}
.nav-sheet[aria-hidden="false"] .nav-sheet-scrim {
  background: rgb(var(--shadow) / 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav-sheet-panel {
  position: relative;
  width: clamp(300px, 86vw, 440px);
  height: 100%;
  background: var(--bg-2);
  border-left: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.45s var(--ease);
  overflow-y: auto;
  padding:
    max(20px, env(safe-area-inset-top))
    clamp(20px, 5vw, 32px)
    max(28px, env(safe-area-inset-bottom));
  box-shadow: -30px 0 80px -20px rgb(var(--shadow) / 0.55);
}
.nav-sheet[aria-hidden="false"] .nav-sheet-panel {
  transform: translateX(0);
}

.nav-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 22px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.nav-sheet-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.nav-sheet-close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: none;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.nav-sheet-close:hover { border-color: var(--accent); color: var(--accent); }
.nav-sheet-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-sheet-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
  margin: 0;
}
.nav-sheet-links li { margin: 0; padding: 0; }
.nav-sheet-links a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 14px 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(24px, 5.5vw, 30px);
  line-height: 1;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.nav-sheet-links a:last-child { border-bottom: none; }
.nav-sheet-links a:hover,
.nav-sheet-links a.is-active {
  color: var(--text);
  padding-left: 6px;
}
.nav-sheet-num {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  width: 28px;
  flex-shrink: 0;
  font-weight: 500;
}

.nav-sheet-foot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  margin-top: 16px;
  border-top: 1px solid var(--border);
}
.nav-cta-sheet {
  width: 100%;
  justify-content: center;
  padding: 14px 22px;
}

@media (min-width: 981px) {
  .nav-sheet { display: none !important; }
}

/* Lock body scroll when sheet is open */
body.is-sheet-open {
  overflow: hidden;
}

/* Mobile nav: hide the cmd-trigger (it lives in the sheet) */
@media (max-width: 1100px) {
  .nav .nav-tail > .cmd-trigger { display: none; }
}

/* Degenerate regime: the response model nets ~zero lift, so a big green
   "budget saved" would be flattering nonsense. Drop to a neutral warning tone. */
.up-saved.is-degenerate {
  border-color: rgba(156, 85, 40, 0.30);
  background: rgba(156, 85, 40, 0.06);
}
.up-saved.is-degenerate .up-saved-val { color: var(--hue-clay); font-size: 20px; }
.up-saved.is-degenerate .up-saved-fill {
  background: repeating-linear-gradient(
    45deg, rgba(156,85,40,0.45) 0 6px, rgba(156,85,40,0.15) 6px 12px
  );
}

/* ============================================================
   Sequence attention lab
   ============================================================ */
.attn-source {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
  min-height: 2.6em;
}

.attn-board {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding: 26px 20px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgb(var(--ink) / 0.015);
  overflow-x: auto;
}
.attn-seq {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-width: max-content;
  margin: 0 auto;
}
.attn-token {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  width: 92px;
  padding: 8px 4px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.attn-token.is-focus {
  border-color: rgba(232, 198, 144, 0.35);
  background: rgba(232, 198, 144, 0.06);
}

/* Vertical attention bar — height encodes weight. */
.attn-bar {
  display: flex;
  align-items: flex-end;
  width: 26px;
  height: 92px;
  border-radius: 5px;
  background: rgb(var(--ink) / 0.05);
  overflow: hidden;
}
.attn-fill {
  display: block;
  width: 100%;
  border-radius: 5px;
  background: linear-gradient(180deg, var(--accent), rgba(232, 198, 144, 0.35));
  transition: height 0.32s var(--ease);
}
.attn-bar-ghost {
  background: repeating-linear-gradient(
    45deg, rgb(var(--ink) / 0.05) 0 5px, transparent 5px 10px
  );
}
.attn-val {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.attn-token.is-top .attn-val { color: var(--accent); font-weight: 700; }

.attn-chip {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: rgb(var(--ink) / 0.03);
  cursor: none;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.attn-chip:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: rgba(232, 198, 144, 0.10);
}
.attn-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.attn-chip-query {
  border-style: dashed;
  opacity: 0.65;
}
.attn-glyph { font-size: 20px; color: var(--text); line-height: 1; }
.attn-cat {
  font-size: 10.5px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.25;
}
.attn-time {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-mute);
  letter-spacing: 0.06em;
}
.attn-query .attn-cat { color: var(--accent); }

/* -- prediction -- */
.attn-panel {
  grid-column: 1 / -1;
  margin-top: 26px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgb(var(--ink) / 0.015);
}
.attn-pred { display: flex; flex-direction: column; gap: 10px; }
.attn-pred-row {
  display: grid;
  grid-template-columns: 20px 118px 1fr 42px;
  align-items: center;
  gap: 12px;
  opacity: 0.7;
  transition: opacity 0.3s var(--ease);
}
.attn-pred-row.is-top { opacity: 1; }
.attn-pred-glyph { font-size: 15px; color: var(--text-dim); }
.attn-pred-row.is-top .attn-pred-glyph { color: var(--accent); }
.attn-pred-label { font-size: 13px; color: var(--text-dim); }
.attn-pred-row.is-top .attn-pred-label { color: var(--text); font-weight: 600; }
.attn-pred-track {
  height: 8px;
  border-radius: 100px;
  background: var(--border-strong);
  overflow: hidden;
}
.attn-pred-fill {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--accent);
  transition: width 0.35s var(--ease);
}
.attn-pred-row b {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .attn-token { width: 74px; }
  .attn-bar { height: 70px; width: 22px; }
  .attn-chip { width: 40px; height: 40px; }
  .attn-pred-row { grid-template-columns: 18px 92px 1fr 38px; gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .attn-fill, .attn-pred-fill { transition: none; }
}

/* The attention lab reads as one horizontal strip, so it drops the card's
   two-column split and lets every block run the full width. */
.lab-card-stacked { grid-template-columns: 1fr; gap: 0; }
.lab-card-stacked .lab-intro { max-width: 78ch; }
.attn-seq { justify-content: center; }

/* ============================================================
   Technical deep dive page
   ============================================================ */
.dd-header { padding-bottom: 0; }
.dd-title { max-width: 20ch; }
.dd-lede {
  max-width: 68ch;
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-dim);
}
.dd-note {
  max-width: 68ch;
  margin-top: 26px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-mute);
}

/* -- contents -- */
.dd-toc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 38px;
  max-width: 860px;
}
.dd-toc-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: baseline;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.dd-toc-item:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateY(-2px);
}
.dd-toc-num {
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--accent);
}
.dd-toc-label { font-size: 15px; font-weight: 600; color: var(--text); }
.dd-toc-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* -- section framing -- */
.dd-section { padding-top: clamp(64px, 9vw, 120px); }
.dd-section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
  padding-bottom: 22px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--border-strong);
}
.dd-section-num {
  font-family: var(--font-mono);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 0.9;
  color: var(--accent);
}
.dd-section-title {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.dd-section-sub {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* -- prose blocks -- */
.dd-block { margin-bottom: 52px; max-width: 78ch; }
.dd-block > p {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--text-dim);
}
.dd-block > p strong { color: var(--text); font-weight: 600; }
.dd-block > p em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.06em;
  color: var(--text);
}
.dd-h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  padding-left: 14px;
  border-left: 3px solid var(--accent);
}
.dd-h4 {
  margin-top: 30px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}
.dd-inline-math {
  font-family: var(--font-mono);
  font-size: 0.94em;
  color: var(--text);
  background: rgb(var(--ink) / 0.05);
  padding: 1px 5px;
  border-radius: 4px;
}

/* -- spec table (key / value / note) -- */
.dd-spec {
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.dd-spec-row {
  display: grid;
  grid-template-columns: 180px 120px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 13px 18px;
}
.dd-spec-row + .dd-spec-row { border-top: 1px solid var(--border); }
.dd-spec-row:nth-child(odd) { background: rgb(var(--ink) / 0.018); }
.dd-spec-k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.dd-spec-v {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.dd-spec-n { font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }
@media (max-width: 720px) {
  .dd-spec-row { grid-template-columns: 1fr; gap: 4px; }
}

/* -- callout -- */
.dd-callout {
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
}
.dd-callout-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.dd-callout p { font-size: 14.5px; line-height: 1.68; color: var(--text-dim); }
.dd-callout p strong { color: var(--text); font-weight: 600; }
.dd-callout-strong {
  border-left-color: var(--hue-clay);
  background: rgba(156, 85, 40, 0.05);
}
.dd-callout-strong .dd-callout-label { color: var(--hue-clay); }

/* -- math + code -- */
.dd-math {
  margin-top: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgb(var(--ink) / 0.022);
  overflow-x: auto;
}
.dd-math-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 12px 18px;
  min-width: max-content;
}
.dd-math-row + .dd-math-row { border-top: 1px solid var(--border); }
.dd-math-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.dd-math-expr {
  font-family: var(--font-mono);
  font-size: 14.5px;
  color: var(--text);
  white-space: nowrap;
}
.dd-math-expr em { font-style: italic; color: var(--text-dim); }

.dd-code {
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgb(var(--ink) / 0.035);
  overflow-x: auto;
}
.dd-code code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text);
  white-space: pre;
}

/* -- comparison table -- */
.dd-table-wrap {
  margin-top: 22px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.dd-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  text-align: left;
}
.dd-table thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-mute);
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.dd-table tbody tr + tr { border-top: 1px solid var(--border); }
.dd-table tbody tr { transition: background 0.22s var(--ease); }
.dd-table tbody tr:hover { background: var(--surface-2); }
.dd-table tbody th[scope="row"] {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  padding: 14px 18px;
  vertical-align: top;
  width: 20%;
  border-right: 1px solid var(--border);
}
.dd-table tbody td {
  padding: 14px 18px;
  vertical-align: top;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
}
.dd-table tbody td:first-of-type { width: 33%; border-right: 1px solid var(--border); }
.dd-table tbody td strong { color: var(--accent); font-weight: 600; }
@media (max-width: 760px) {
  .dd-table-wrap { border: 0; background: none; overflow-x: visible; }
  .dd-table { min-width: 0; }
  .dd-table thead { display: none; }
  .dd-table tbody tr,
  .dd-table tbody th[scope="row"],
  .dd-table tbody td { display: block; width: auto; border-right: 0; }
  .dd-table tbody tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 4px 0 10px;
    margin-bottom: 12px;
  }
  .dd-table tbody td::before {
    display: block;
    font-family: var(--font-mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-mute);
    margin-bottom: 4px;
  }
  .dd-table tbody td:first-of-type::before { content: 'What it buys'; }
  .dd-table tbody td:last-of-type::before { content: 'Why not here'; }
}

/* -- references -- */
.dd-refs {
  list-style: none;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dd-refs li {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 14px;
  align-items: baseline;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.dd-ref-key {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}
.dd-refs em { font-style: italic; color: var(--text); }
.dd-refs a {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent);
  white-space: nowrap;
}
.dd-refs a:hover { text-decoration: underline; }
@media (max-width: 620px) {
  .dd-refs li { grid-template-columns: 1fr; gap: 4px; }
}

/* -- architecture diagram -- */
.dd-diagram {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgb(var(--ink) / 0.022);
  overflow-x: auto;
}
.dd-diagram svg { display: block; width: 100%; min-width: 680px; height: auto; }
.dd-dg-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  fill: var(--text-mute);
}
.dd-dg-tokens rect {
  fill: var(--surface-2);
  stroke: var(--border-strong);
}
.dd-dg-tokens text {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--text);
  text-anchor: middle;
}
.dd-dg-tokens .dd-dg-sm { font-size: 9px; fill: var(--text-mute); }
.dd-dg-ellipsis { font-family: var(--font-mono); font-size: 13px; fill: var(--text-mute); }
.dd-dg-stage {
  fill: var(--surface);
  stroke: var(--border-strong);
}
.dd-dg-accent { fill: rgba(148, 105, 15, 0.06); stroke: var(--accent); }
.dd-dg-out { fill: rgba(23, 121, 90, 0.07); stroke: var(--hue-green); }
.dd-dg-stage-t {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  fill: var(--text);
  text-anchor: middle;
}
.dd-dg-sm2 {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--text-mute);
  text-anchor: middle;
}
.dd-dg-inner { fill: rgb(var(--ink) / 0.05); stroke: var(--border); }
.dd-dg-inner-t {
  font-family: var(--font-mono);
  font-size: 9.5px;
  fill: var(--text-dim);
  text-anchor: middle;
}

/* -- CTA from the NBA stories into the deep-dive page -- */
.dd-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  margin-top: 30px;
  padding: 26px 28px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 80% 140% at 0% 0%, rgba(148, 105, 15, 0.07), transparent 62%),
    var(--surface);
}
.dd-cta-body { flex: 1 1 380px; min-width: 0; }
.dd-cta-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 9px;
}
.dd-cta-title {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
.dd-cta-lead {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--text-dim);
  max-width: 62ch;
}
.dd-cta-btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .dd-cta { padding: 22px; }
  .dd-cta-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Motion layer — WebGL hero field, pinned NBA sequence
   (fx/hero-field.js, fx/nba-sequence.js)
   ============================================================ */

/* The hero graph sits behind the grid and never intercepts a click. */
.hero-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
.hero-v2 { position: relative; }
.hero-v2 .hero-grid { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-field { display: none; }
}

/* ------------------------------------------------------------
   NBA sequence — pinned, scroll-scrubbed build of the architecture.

   The base state below is the no-JavaScript state: a plain numbered
   list of the four layers. `.is-live`, set by fx/nba-sequence.js only
   when GSAP is present and motion is allowed, is what turns it into a
   pinned stage. Nothing here depends on the module having run.
   ------------------------------------------------------------ */
/* This section runs wider than the editorial container: the diagram needs the
   width to keep its 10px monospace labels legible. */
.section-nba-seq { max-width: min(1500px, 94vw); }
.nba-seq { margin: clamp(64px, 9vw, 120px) 0 clamp(48px, 6vw, 80px); }

.nba-seq-head { margin-bottom: 28px; }
.nba-seq-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-top: 10px;
}

.nba-seq-acts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.nba-seq-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.nba-seq-act h5 {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 8px 0 8px;
}
.nba-seq-act p {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.62;
  max-width: 52ch;
}
.nba-seq-stage { display: none; }
.nba-seq-rail { display: none; }

/* --- upgraded state ------------------------------------------------ */
.nba-seq.is-live .nba-seq-viewport {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 0 40px;
}
.nba-seq.is-live .nba-seq-body {
  display: grid;
  grid-template-columns: 1.28fr 0.72fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.nba-seq.is-live .nba-seq-stage {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 16px;
}
.nba-seq-svg { width: 100%; height: auto; display: block; }

/* Only the active act is legible; the others stay as faint structure so the
   reader can see how far through the argument they are. */
.nba-seq.is-live .nba-seq-side {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.nba-seq.is-live .nba-seq-acts {
  display: grid;
  gap: 0;
  flex: 1;
}
.nba-seq.is-live .nba-seq-act {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
  pointer-events: none;
}
.nba-seq.is-live .nba-seq-act.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.nba-seq.is-live .nba-seq-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
  order: -1;
}
.nba-seq-tick {
  width: 2px;
  height: 26px;
  border-radius: 2px;
  background: rgb(var(--ink) / 0.16);
  transition: background 0.4s var(--ease), height 0.4s var(--ease);
}
.nba-seq-tick.is-on { background: var(--accent); height: 40px; }

@media (max-width: 900px) {
  /* Pinning a tall stage on a short screen traps the scroll, so below this
     width the section stays an ordinary list and the module's pin is the
     only thing lost. */
  .nba-seq.is-live .nba-seq-viewport { min-height: 0; padding: 0; }
  .nba-seq.is-live .nba-seq-body { grid-template-columns: 1fr; }
  .nba-seq.is-live .nba-seq-act { grid-area: auto; opacity: 1; transform: none; }
  .nba-seq.is-live .nba-seq-acts { gap: 28px; }
  .nba-seq.is-live .nba-seq-rail { display: none; }
}

/* ------------------------------------------------------------
   Lab 05 — bandit duel (demos/bandit-duel)

   Reuses the .lab-* shell for its frame and typography, but not its
   two-column split: this lab is a board, and the board wants the full
   width of the card.
   ------------------------------------------------------------ */
.duel-card { display: block; }
/* The shared .lab-intro is built for a narrow column; here it spans the card,
   so the lead gets a reading measure of its own and the stats sit in one row. */
.duel-card .lab-lead { max-width: 78ch; }
.duel-card .lab-stats { grid-template-columns: repeat(3, minmax(0, 220px)); }
@media (max-width: 700px) {
  .duel-card .lab-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .duel-card .lab-stat-val { font-size: 19px; }
  .duel-card .lab-stat-label { font-size: 9px; letter-spacing: 0.06em; }
}
.duel-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 24px 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.duel-world { display: inline-flex; align-items: center; gap: 10px; }
.duel-world select {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 7px 10px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
}
.duel-world-hint {
  flex: 1;
  min-width: 220px;
  font-size: 13px;
  color: var(--text-mute);
}
.duel-restart {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.duel-restart:hover { background: var(--text); color: var(--bg); }

/* --- the three send buttons --- */
.duel-arms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.duel-arm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 18px;
  text-align: left;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.duel-arm:hover:not(:disabled) { background: var(--surface-2); transform: translateY(-2px); }
.duel-arm:disabled { cursor: not-allowed; opacity: 0.45; }
/* A capped arm is not merely disabled — it is disabled for a reason the player
   should be able to name, so it gets its own state rather than a grey-out. */
.duel-arm.is-capped {
  opacity: 1;
  border-style: dashed;
  border-color: var(--accent);
  background: transparent;
}
.duel-arm-key {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}
.duel-arm-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.duel-arm-state {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.duel-arm.is-capped .duel-arm-state { color: var(--accent); }

/* --- panels --- */
.duel-panels {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr 0.9fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .duel-panels { grid-template-columns: 1fr; }
  .duel-arms { grid-template-columns: 1fr; }
}
.duel-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--surface);
}
.duel-svg { width: 100%; height: auto; display: block; margin-top: 10px; }
.duel-tick, .duel-caplabel, .duel-serieslabel {
  font-family: var(--font-mono);
  font-size: 9.5px;
  fill: var(--text-mute);
}
.duel-caplabel { fill: var(--accent); }
.duel-serieslabel { font-size: 10px; }

/* --- feed --- */
.duel-feed { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.duel-feed-row {
  display: grid;
  grid-template-columns: 24px 22px 1fr;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.duel-feed-row:last-child { border-bottom: none; }
.duel-feed-round { color: var(--text-mute); }
.duel-feed-arm {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 5px;
  font-size: 10px;
  color: var(--on-accent);
  background: var(--c, var(--text-mute));
}
.duel-feed-arm.is-pending { background: transparent; color: var(--text-mute); border: 1px dashed var(--border-strong); }
.duel-feed-row.is-win .duel-feed-out { color: var(--accent-4); }
.duel-feed-row.is-pending, .duel-feed-row.is-empty { color: var(--text-mute); font-style: italic; }
.duel-feed-row.is-empty { grid-template-columns: 1fr; }

/* --- verdict --- */
.duel-verdict {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--grad-soft);
}
.duel-verdict-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.duel-verdict-flag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent);
  padding: 3px 9px;
  border-radius: 999px;
}
.duel-verdict-head h4 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -0.015em;
}
.duel-verdict-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 18px 0;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 620px) { .duel-verdict-grid { grid-template-columns: repeat(2, 1fr); } }
.duel-verdict-grid span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 4px;
}
.duel-verdict-grid strong { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.duel-verdict p { color: var(--text-dim); font-size: 14.5px; line-height: 1.62; max-width: 68ch; }
.duel-verdict-reveal { margin-top: 10px; font-family: var(--font-mono); font-size: 12px; }
.duel-verdict-reveal b { color: var(--c, var(--text)); font-weight: 500; }
.lab-foot { margin-top: 20px; font-size: 13px; color: var(--text-mute); }

/* The playable lab announces itself in the tile grid without shouting. */
.labs-tile-play .labs-tile-live { color: var(--accent); }
.labs-tile-play:hover { border-color: var(--accent); }

/* ============================================================
   Homepage focus pass — proof-led hero, concise nav and booking
   ============================================================ */
.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 26px;
  border-block: 1px solid var(--border);
}
.hero-proof-item {
  min-width: 0;
  padding: 16px 16px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-proof-item + .hero-proof-item {
  padding-left: 16px;
  border-left: 1px solid var(--border);
}
.hero-proof-item strong {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 400;
  line-height: 1;
  color: var(--text);
}
.hero-proof-item span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.45;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.book-card-embed {
  justify-content: center;
  align-items: stretch;
  padding: clamp(18px, 3vw, 32px);
}
.book-tabs { display: none; }
.booking-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.booking-option {
  position: relative;
  min-height: 190px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.booking-option:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  background: var(--surface-2);
}
.booking-option-primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.booking-option-primary:hover { background: var(--accent-2); color: var(--on-accent); }
.booking-option-kicker {
  margin-bottom: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.booking-option-primary .booking-option-kicker { color: var(--accent-3); }
.booking-option strong { font-size: 18px; font-weight: 600; }
.booking-option > span:not(.booking-option-kicker) { font-size: 12px; color: var(--text-mute); }
.booking-option-primary > span:not(.booking-option-kicker) { color: rgb(var(--paper) / 0.7); }
.booking-option svg { position: absolute; top: 20px; right: 20px; }
.booking-email {
  align-self: center;
  font-size: 12px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-strong);
}
.booking-email:hover { color: var(--accent); border-color: var(--accent); }

#book {
  display: flex;
  flex-direction: column;
}
#book .section-head { order: 1; }
#book .book-card { order: 2; margin-bottom: 40px; }
#book .svc-grid { order: 3; margin-bottom: 0; }

@media (max-width: 1180px) and (min-width: 981px) {
  .nav { padding-inline: 28px; }
  .nav-link { padding-inline: 10px; }
  .nav-link::after { left: 10px; right: 10px; }
}

@media (max-width: 980px) {
  .hero-v2 { padding-top: 112px; }
  .hero-text { order: 1; }
  .hero-portrait { order: 2; }
  .hero-grid { gap: 48px; }
}

@media (max-width: 600px) {
  .hero-v2 { padding: 96px 20px 64px; }
  .hero-tag { margin-bottom: 18px; font-size: 10px; }
  .hero-title-v2 { font-size: clamp(42px, 14vw, 58px); line-height: 0.94; }
  .hero-sub { margin: 22px 0; font-size: 14px; line-height: 1.65; }
  .hero-proof { margin-bottom: 22px; }
  .hero-proof-item { padding-block: 13px; padding-right: 8px; }
  .hero-proof-item + .hero-proof-item { padding-left: 9px; }
  .hero-proof-item strong { font-size: 31px; }
  .hero-proof-item span { font-size: 8px; letter-spacing: 0.03em; }
  .hero-spotlights { margin-bottom: 22px; gap: 6px; }
  .spot { padding: 5px 9px; font-size: 10.5px; }
  .hero-cta { margin-bottom: 30px; }
  .hero-meta { display: none; }
  .portrait-frame { width: min(76vw, 300px); }
  .portrait-tags, .portrait-stamp, .hero-social { display: none; }
  .booking-actions { grid-template-columns: 1fr; }
  .booking-option { min-height: 150px; }
}