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

:root {
  --accent: #5588ff;
  --accent-rgb: 85, 136, 255;
}

html {
  background: #000;
  color: #fff;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body { overflow-x: hidden; background: #000; min-width: 320px; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

.debug-toggle,
#debug-wireframe {
  position: fixed; bottom: 20px; right: 20px; z-index: 100;
  background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.7); font-family: inherit; font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 4px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.debug-toggle:hover,
#debug-wireframe:hover { background: rgba(255,255,255,0.12); color: #fff; }
.debug-toggle.active,
#debug-wireframe.active { background: rgba(85,136,255,0.25); border-color: rgba(85,136,255,0.5); color: #fff; }

#debug-textures { bottom: 224px; }
#debug-clouds { bottom: 196px; }
#debug-atmosphere { bottom: 168px; }
#debug-burn { bottom: 140px; }
#debug-shadows { bottom: 112px; }
#debug-lod { bottom: 84px; }
#debug-texture-lod { bottom: 56px; }
#debug-smooth { bottom: 28px; }
#debug-memory { bottom: 252px; }
#debug-wireframe { bottom: 0px; }

#debug-lod-mode { bottom: 308px; }
#debug-aggression-wrap {
  position: fixed; bottom: 280px; right: 20px; z-index: 100;
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px; padding: 4px 10px;
  color: rgba(255,255,255,0.65); font-family: inherit; font-size: 0.62rem;
  letter-spacing: 0.06em;
}
#debug-aggression {
  width: 72px; cursor: pointer; accent-color: var(--accent);
}
#debug-aggression-val {
  color: rgba(255,255,255,0.9); min-width: 22px; text-align: right;
}

.memory-stats {
  position: fixed; top: 72px; left: 20px; z-index: 100;
  background: rgba(0,0,0,0.65); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px; padding: 6px 12px;
  color: rgba(255,255,255,0.9); font-family: inherit; font-size: 0.65rem;
  font-weight: 600; letter-spacing: 0.06em;
}

/* ── Debug panel toggle ───────────────────── */
#debug-show { top: 72px; bottom: auto; }
#debug-panel { display: none; }
#debug-panel.visible { display: block; }

/* ── Navigation ─────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between; height: 56px;
}
.brand {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  color: #fff; font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.brand-logo { height: 30px; width: auto; object-fit: contain; }

.nav-links { display: flex; gap: 2px; }
.nav-link {
  background: none; border: none; color: rgba(255,255,255,0.5);
  font-family: inherit; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.05em;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  transition: color 0.3s, background 0.3s;
}
.nav-link:hover, .nav-link.active {
  color: #fff; background: rgba(255,255,255,0.08);
}

/* ── Scroll content / sections ──────────────── */
.scroll-content { position: relative; z-index: 1; pointer-events: none; }
.scroll-content > * { pointer-events: auto; }

section {
  min-height: 100vh; display: flex; align-items: center;
  padding: 100px 40px; position: relative;
  scroll-margin-top: 56px;
}
.section-inner { max-width: 1200px; margin: 0 auto; width: 100%; }

.overlay-text {
  max-width: 520px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.8);
}
.overlay-text.right  { margin-left: auto; text-align: right; }
.overlay-text.center { margin: 0 auto; text-align: center; }

/* ── Typography ─────────────────────────────── */
.eyebrow {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(var(--accent-rgb), 0.9); margin-bottom: 16px; display: inline-block;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
h1 {
  font-size: clamp(5rem, 11vw, 12rem); font-weight: 900; letter-spacing: -0.05em;
  line-height: 0.88; margin-bottom: 20px;
}
h2 {
  font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 700; letter-spacing: -0.04em;
  line-height: 1.05; margin-bottom: 16px;
}
h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.body-text {
  font-size: 1.05rem; line-height: 1.75; color: rgba(255,255,255,0.55);
  display: table;
  width: fit-content;
  max-width: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.body-text + .body-text { margin-top: 10px; }

/* ── Buttons ────────────────────────────────── */
.btn-group { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px;
  border-radius: 999px; font-family: inherit; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: all 0.25s; border: none;
  white-space: nowrap; flex-shrink: 0;
}
.btn-primary { background: rgba(var(--accent-rgb), 1); color: #000; }
.btn-primary:hover { filter: brightness(1.2); transform: translateY(-1px); }
.btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.25); }
.btn-outline:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.4); }
.btn-glass {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-color: rgba(255,255,255,0.06);
}
.btn-glass:hover { background: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.18); }

/* ── Section-specific layouts ───────────────── */
#hero     { padding-top: 140px; align-items: flex-start; padding-bottom: 120px; min-height: 200vh; }
#about    { justify-content: flex-start; }
#features { justify-content: flex-end; }
#features .overlay-text { margin-bottom: 5vh; }
#programs { justify-content: flex-start; }
#impact   { justify-content: flex-end; }
#impact   .overlay-text { margin-bottom: 10vh; }
#contact  { justify-content: center; }
#contact  .overlay-text { text-align: center; }
#contact  .btn-group { justify-content: center; }

/* ── Stat row ───────────────────────────────── */
.stat-row {
  display: inline-flex; gap: 40px; margin-top: 24px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  padding: 16px 20px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.stat h4 { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: rgba(var(--accent-rgb), 1); }
.stat span { font-size: 0.8rem; color: rgba(255,255,255,0.4); letter-spacing: 0.08em; text-transform: uppercase; }

/* ── Footer ─────────────────────────────────── */
footer {
  position: relative; z-index: 1; padding: 32px 40px; text-align: center;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.footer-inner {
  max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between;
  align-items: center; color: rgba(255,255,255,0.25); font-size: 0.8rem;
}

/* ── Mobile ─────────────────────────────────── */
@media (max-width: 768px) {
  section { padding: 80px 24px; }
  h1 { font-size: clamp(3.5rem, 10vw, 6rem); }
  h2 { font-size: clamp(2rem, 6vw, 3rem); }
  .nav-inner { padding: 0 20px; }
  .nav-link { font-size: 0.7rem; padding: 6px 10px; }
  .overlay-text { max-width: 100%; }
  .overlay-text.right { text-align: left; margin-left: 0; }
  .stat-row { gap: 24px; flex-wrap: wrap; }
  .footer-inner { flex-direction: column; gap: 8px; }
}

/* ── Loading screen ──────────────────────────── */
#loading-screen {
  position: fixed; inset: 0; z-index: 1000;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.8s ease;
}
#loading-screen.loading-hidden {
  opacity: 0; pointer-events: none;
}
.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(320px, calc(100vw - 48px));
}
.loading-progress-track {
  width: min(260px, 100%); height: 2px; background: rgba(255,255,255,0.1);
  border-radius: 1px; overflow: hidden; margin: 0 auto 18px;
}
.loading-progress-fill {
  width: 0%; height: 100%; background: rgba(var(--accent-rgb), 0.8);
  border-radius: 1px; transition: width 0.4s ease;
}
.loading-items {
  margin-bottom: 24px;
  text-align: left;
  display: inline-block;
}
.loading-item {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 6px 0;
  font-size: 0.82rem; letter-spacing: 0.04em;
}
.loading-item-label {
  color: rgba(255,255,255,0.55);
}
.loading-item-status {
  color: rgba(255,255,255,0.22);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.4s ease;
}
.loading-item-waiting .loading-item-status {
  color: rgba(255,255,255,0.12);
}
.loading-item-loading .loading-item-status {
  color: rgba(var(--accent-rgb), 0.55);
}
.loading-item-done .loading-item-label {
  color: rgba(255,255,255,0.30);
}
.loading-item-done .loading-item-status {
  color: rgba(85,136,255,0.65);
}

/* ── Site tab switcher ───────────────────── */
.site-tabs {
  display: flex;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.site-tab {
  background: none; border: none;
  color: rgba(255,255,255,0.45);
  font-family: inherit; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
  padding: 6px 18px; border-radius: 999px; cursor: pointer;
  transition: all 0.2s; white-space: nowrap;
}
.site-tab:hover:not(.active) { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.05); }
.site-tab.active { background: rgba(255,255,255,0.12); color: #fff; }

/* ── Page visibility ─────────────────────── */
#page-drone { display: none; }
body.tab-drone #page-drone { display: block; }
.drone-only { display: none; }
body.tab-drone .drone-only { display: flex; }
body.tab-main #loading-screen { display: none; }
body.tab-main { overflow-x: visible; overflow-y: hidden; }

/* ── Main page (about me) ────────────────── */
#page-main {
  position: fixed; inset: 0; z-index: 5;
  background: #000; overflow-y: auto; overflow-x: visible;
  display: none;
}
body.tab-main #page-main { display: block; }

.main-hero {
  min-height: calc(100vh - 56px);
  display: flex; align-items: center;
  padding: 80px 40px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.main-hero-inner { max-width: 900px; margin: 0 auto; width: 100%; padding-top: 56px; }
.main-name {
  font-size: clamp(4.5rem, 11vw, 10rem); font-weight: 900;
  letter-spacing: -0.05em; line-height: 0.88; margin-bottom: 20px;
}
.main-tagline {
  font-size: 1rem; color: rgba(255,255,255,0.38);
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
}
.main-section { border-bottom: 1px solid rgba(255,255,255,0.04); }
.main-section-inner { max-width: 900px; margin: 0 auto; padding: 80px 40px; }
.main-section-inner h2 { margin-top: 12px; margin-bottom: 24px; }

.project-card {
  margin-top: 28px; padding: 28px 32px;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
  background: rgba(255,255,255,0.03);
}
.project-card h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.01em; margin-bottom: 12px; }
.project-card .body-text { display: block; width: auto; margin-bottom: 20px; }

.main-footer {
  max-width: 900px; margin: 0 auto; padding: 32px 40px;
  color: rgba(255,255,255,0.2); font-size: 0.8rem;
}

@media (max-width: 768px) {
  .main-hero { padding: 60px 24px; }
  .main-section-inner { padding: 60px 24px; }
  .project-card { padding: 20px 20px; overflow: visible; }
  .project-card .btn { padding: 12px 20px; font-size: 0.82rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Single-scroll cinematic journey
   ══════════════════════════════════════════════════════════════════════════ */

#loading-screen { z-index: 2000; }      /* above all journey layers during load */

/* The only flow element — its height (set in JS to TOTAL_VH) defines scroll. */
#journey-spacer { width: 100%; pointer-events: none; }

/* z6 — scrubbed intro image sequence: JS draws each frame onto this canvas (zoomed +
   crossfaded). drawImage of an <img> repaints reliably on Safari where a seeked
   paused <video> does not, so the scroll-scrub never freezes. */
#intro-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 6; pointer-events: none; opacity: 0; will-change: opacity;
  background: #000;
}

/* z8 — reentry heat + buffet screen FX. Opacity + transform are driven each rendered frame by
   overlays.setBurnFx(burn, scrollPhase): the layer flickers like fire-light on the lens and
   buffets a few px with the camera shake, then freezes when the scroll stops (like the video).
   The overscan + slight zoom (applied in JS) keep the shifting vignette from baring a screen edge. */
#burn-fx {
  position: fixed; inset: -2.5%; z-index: 8; pointer-events: none;
  opacity: 0; will-change: opacity, transform;
}
#burn-fx > * { position: absolute; inset: 0; }
/* Hot edges — the golden plasma sheath licking in from the frame edges as it tears through the air. */
#burn-fx .burn-edge {
  background: radial-gradient(ellipse farthest-corner at 50% 50%,
    rgba(255, 226, 150, 0)    20%,
    rgba(255, 176, 80, 0.30)  50%,
    rgba(240, 120, 38, 0.58)  78%,
    rgba(150, 52, 6, 0.80)   100%);
}
/* Corner crush — a deep vignette darkening the corners as the g-load builds (tunnel vision). */
#burn-fx .burn-crush {
  background: radial-gradient(ellipse farthest-corner at 50% 50%,
    rgba(0, 0, 0, 0)    52%,
    rgba(6, 1, 0, 0.55) 100%);
}

/* z10 — text overlays */
#journey-overlays { position: fixed; inset: 0; z-index: 10; pointer-events: none; }

.act-overlay {
  position: fixed; inset: 0; display: flex;
  padding: clamp(28px, 6vw, 96px);
  opacity: 0; pointer-events: none;
  will-change: opacity;
}
.act-overlay .ov-inner { max-width: 760px; }
.act-overlay .ov-inner.center { max-width: 920px; text-align: center; }

#ov-intro { align-items: flex-end; justify-content: flex-start; }
#ov-ascent { align-items: center; justify-content: center; text-align: center; }

.act-overlay .eyebrow {
  display: inline-block; margin-bottom: 14px;
  color: var(--accent); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.act-overlay h1.display {
  font-size: clamp(3.4rem, 9vw, 7.2rem); font-weight: 900; line-height: 0.94;
  letter-spacing: -0.028em; text-shadow: 0 4px 40px rgba(0,0,0,0.55);
}
.act-overlay h2 {
  font-size: clamp(2.2rem, 4.8vw, 3.8rem); font-weight: 800; line-height: 1.02;
  letter-spacing: -0.018em; text-shadow: 0 4px 40px rgba(0,0,0,0.6);
}
.act-overlay .lede {
  margin-top: 24px; font-size: clamp(1.12rem, 1.8vw, 1.42rem);
  color: rgba(255,255,255,0.82); max-width: 38em; line-height: 1.6;
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}

/* ── Ice text ────────────────────────────────────
   Matches the journey's place-signs above the Earth (see makeTextTexture in
   js/journey/text-billboards.js): a wide cool-blue glow, a dark stroke behind
   the glyphs (paint-order keeps it under the fill, as the canvas draws it), and
   a crisp white-ice fill with a tight icy halo. Lengths in em so it scales with
   the headline and subtitle alike. */
.ice-text {
  color: #f2f7ff;
  -webkit-text-stroke: 0.055em rgba(8,16,32,0.55);
          text-stroke: 0.055em rgba(8,16,32,0.55);
  paint-order: stroke fill;
}

/* ── Research coda (the journey's AI-research ending) ──────────────────────────
   A SOLID dark backdrop fades in over the whole 3D scene (Earth, clouds, atmosphere,
   stars), a flat blue dot resolves where the Earth was, and thin arc lines orbit it.
   JS sets --eye-cx/--eye-cy (the planet's true screen position, px) plus --pupil-r
   (= the Earth's screen radius) each frame, and drives every opacity, so the dot +
   orbits track the live planet exactly. */
#ov-research {
  position: fixed; inset: 0; z-index: 22; display: none; overflow: hidden;
  --eye-cx: 50%; --eye-cy: 34%;   /* live Earth centre (px), set by JS */
  --pupil-r: 30px;                /* blue-dot radius = Earth's screen radius, set by JS */
  color: rgba(206,214,228,0.92);
}
/* Hand-off exit — driven by the COMPOSITOR, not a per-frame JS translate.
   The coda is position:fixed; the research page below it scrolls natively. Sliding the coda off
   with a JS-written translateY (per scroll/rAF tick) lands a frame behind the native scroll during
   momentum/fling — so the camera visibly lags the page rising beneath it ("scrolls differently /
   keeps momentum") and a sliver can open at the seam. Instead research.js binds a scroll-linked
   Web Animation (ViewTimeline) whose SUBJECT is this 1px marker, pinned to the research page's top
   edge: as the marker travels from the viewport bottom up to the top — the one-viewport hand-off
   window (the timeline's default `cover` range) — the compositor slides the coda off the top in
   perfect lock-step with the same scroll that lifts the page in. No JS-per-frame, no lag, no gap.
   (setScrollAway in research.js is the fallback where ViewTimeline is unsupported.) */
#rp-handoff-marker {
  position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none;
}
/* Solid dark face that fades in over the WHOLE 3D scene — Earth, clouds, atmosphere and starfield
   all at once — so nothing live peeks through. The blue dot (drawn on top) takes the Earth's place. */
.rsx-backdrop {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(135% 130% at var(--eye-cx) var(--eye-cy), #06070f 0%, #020208 66%, #010106 100%);
}
/* Camera rig (lens + enclosure + arm), the lens centred on the eye. overflow:visible lets the arm
   extend past the square box to the right; #ov-research clips it at the viewport edge. */
.rsx-robot {
  position: absolute; left: var(--eye-cx); top: var(--eye-cy); transform: translate(-50%, -50%);
  width: clamp(260px, 37vh, 440px); height: clamp(260px, 37vh, 440px);
  opacity: 0; pointer-events: none; overflow: visible;
  filter: drop-shadow(0 30px 38px rgba(0,0,0,0.48));
}
.rsx-robot-svg { width: 100%; height: 100%; display: block; color: #e9eefb; overflow: visible; }
/* Partial-circle arcs slowly orbiting the eye — a camera/sensor idling. Each <g> sets its own
   `animation` inline (rsx-spin + per-ring duration/direction, built in research.js) and rotates
   about the viewBox centre (the lens). Continuous (not scroll-driven) so the parked eye feels alive;
   the reduced-motion override wins over the inline animation via !important. */
.rsx-orbit { transform-box: view-box; transform-origin: 200px 200px; }
@keyframes rsx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rsx-orbit { animation: none !important; } }
/* Optical glass the live Earth crossfades into: dark coated lens, not a glossy orb. Sized
   via --pupil-r in JS so it fully replaces the planet disc. */
.rsx-pupil {
  position: absolute; left: var(--eye-cx); top: var(--eye-cy);
  width: calc(var(--pupil-r) * 2); height: calc(var(--pupil-r) * 2);
  transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; pointer-events: none;
  background:
    radial-gradient(circle at 44% 39%, rgba(118,151,255,0.28) 0 8%, rgba(118,151,255,0.08) 13%, transparent 18%),
    radial-gradient(circle at 50% 50%, transparent 0 36%, rgba(93,130,255,0.18) 37% 39%, transparent 40% 52%, rgba(42,82,190,0.22) 53% 55%, transparent 56%),
    radial-gradient(circle at 50% 50%, #3568ed 0 34%, #1740a8 54%, #071638 75%, #020711 100%);
  box-shadow:
    0 0 0 max(2px, calc(var(--pupil-r) * 0.10)) #02050d,
    0 0 0 max(4px, calc(var(--pupil-r) * 0.16)) rgba(17,25,39,0.96),
    0 0 calc(var(--pupil-r) * 0.42) rgba(42,95,220,0.20),
    inset 0 0 calc(var(--pupil-r) * 0.24) rgba(124,164,255,0.16),
    inset 0 calc(var(--pupil-r) * -0.18) calc(var(--pupil-r) * 0.34) rgba(0,5,18,0.72),
    inset 0 calc(var(--pupil-r) * 0.16) calc(var(--pupil-r) * 0.24) rgba(90,128,220,0.10);
}
/* AI-research copy, anchored low so it clears the eye. */
.rsx-copy {
  position: absolute; left: 50%; bottom: clamp(56px, 10vh, 132px);
  transform: translateX(-50%); width: min(720px, 92vw);
  text-align: center; opacity: 0;
}
.rsx-copy .rsx-kicker {
  display: inline-block; margin-bottom: 14px;
  color: var(--accent); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.rsx-title {
  font-size: clamp(1.4rem, 5.5vw, 3rem); font-weight: 800; line-height: 1.08;
  letter-spacing: -0.01em; color: #f4f7ff; text-wrap: balance;
}
.finale-card {
  background: rgba(8, 10, 22, 0.52); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 20px;
  padding: clamp(28px, 4vw, 48px); text-align: center;
}
.finale-card p { margin-top: 14px; color: rgba(255,255,255,0.85); line-height: 1.6; }
.finale-card .btn-group { margin-top: 26px; justify-content: center; }
.finale-sig { margin-top: 22px; font-size: 0.74rem; color: rgba(255,255,255,0.5) !important; letter-spacing: 0.04em; }

@media (max-width: 768px) {
  #ov-intro { align-items: flex-end; }
  .act-overlay {
    padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  }
  .act-overlay h1.display {
    font-size: 3.2rem;
    line-height: 1;
  }
  .act-overlay .lede {
    font-size: 1rem;
    max-width: min(30em, 92vw);
  }
  .rsx-robot {
    width: clamp(210px, 68vw, 330px);
    height: clamp(210px, 68vw, 330px);
  }
  .rsx-copy {
    bottom: max(34px, env(safe-area-inset-bottom));
    width: min(620px, calc(100vw - 32px));
  }
  .rsx-copy .rsx-kicker {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    margin-bottom: 10px;
  }
  .rsx-title {
    font-size: 1.85rem;
  }
}

/* ── AI-research page (flows after the journey) ────────────────────────────────
   Flows after #journey-spacer. z-index 20 sits above every fixed journey layer
   (canvas z0, overlays z10) but below #ov-research (z22) so the coda camera
   exits over the top rather than the page sliding over it. */
#research-page {
  position: relative; z-index: 20;
  /* Top matches the coda backdrop's near-black edge (#010106) and eases into the page body, so
     where the camera scrolls up off the page the seam is invisible — one continuous darkness. */
  background: linear-gradient(180deg, #010106 0%, #02040b 340px, #03050c 100%);
  color: rgba(214, 221, 236, 0.82);
  padding-bottom: clamp(40px, 8vh, 96px);
}
/* Gap-sealer: the coda's translateY is JS-driven; the research page scrolls via the compositor.
   On fast scrolls (especially Safari momentum) the coda can momentarily move UP faster than the
   browser paints the page, leaving a sliver of canvas between the coda bottom and page top.
   This dark band (compositor-driven, zero JS lag) sits in exactly that gap so nothing bleeds
   through — it enters the viewport at g=1 (rt=1, coda fully opaque) so it never covers live 3D. */
#research-page::before {
  content: '';
  position: absolute;
  top: -100vh;
  left: 0;
  right: 0;
  height: 100vh;
  background: #010106;
  pointer-events: none;
  z-index: -1;
}
/* Neutralize the legacy global section/footer rules (min-height:100vh, flex centering,
   centered text) these elements would otherwise inherit — this page lays itself out with
   block flow + per-section padding. (No padding reset here, so the class paddings win.) */
#research-page section,
#research-page footer {
  min-height: 0; display: block; align-items: stretch; text-align: left;
}
/* ── Research page: editorial / print-influenced, in the spirit of the faline sublink —
   serif display, a numbered index instead of a card wall, hairline rules, a single restrained
   accent. Adapted to the journey's dark cosmic palette so it reads as one continuous piece. */
#research-page {
  --rp-ink:   #f3f6ff;
  --rp-ink-2: rgba(205, 214, 233, 0.74);
  --rp-ink-3: rgba(150, 162, 190, 0.62);
  --rp-line:      rgba(255, 255, 255, 0.11);
  --rp-line-soft: rgba(255, 255, 255, 0.06);
  --rp-serif: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
}
.rp-wrap { max-width: 1450px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 52px); }

/* Numbered section markers (01 — Selected work). */
.rp-sec-head {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: clamp(18px, 2.4vh, 26px); border-bottom: 1px solid var(--rp-line);
}
.rp-sec-no {
  font-family: var(--rp-serif); font-size: 1rem; color: var(--accent);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.rp-sec-label {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rp-ink-3);
}

/* Work — a numbered editorial index. */
.rp-work { padding: clamp(40px, 7vh, 80px) 0 clamp(24px, 4vh, 48px); }
/* First section on the page — carries the opening breathing room the intro used to give. */
.rp-work.is-first { padding-top: clamp(96px, 18vh, 200px); }
.rp-index { list-style: none; }
.rp-item {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 300px;
  gap: clamp(10px, 2vw, 28px);
  padding: clamp(28px, 3.6vw, 48px) 0;
  border-bottom: 1px solid var(--rp-line);
}
.rp-num {
  font-family: var(--rp-serif); font-size: 1.05rem; line-height: 1.4;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.rp-item-main {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr);
  gap: clamp(16px, 2.8vw, 44px); align-items: start;
}
.rp-gallery {
  display: flex; width: 100%; gap: 8px; align-content: start; min-width: 0;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
  scrollbar-color: var(--rp-ink-3) transparent;
}
.rp-gallery-wrap { position: relative; width: 100%; min-width: 0; overflow: hidden; }
.rp-gallery-button {
  position: absolute; top: 50%; z-index: 2; width: 28px; height: 28px;
  display: grid; place-items: center; padding: 0; transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,0.3); border-radius: 50%;
  background: rgba(92, 98, 108, 0.78); color: #fff; font-size: 0;
  line-height: 1; cursor: pointer; backdrop-filter: blur(6px);
}
.rp-gallery-button::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 14px;
  background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%, 0 72%, 55% 50%, 0 28%);
  transform: translate(-50%, -50%);
}
.rp-gallery-button.prev::before { transform: translate(-50%, -50%) scaleX(-1); }
.rp-gallery-button:hover { background: rgba(70, 76, 86, 0.94); }
.rp-gallery-button:disabled {
  background: rgba(105, 110, 118, 0.72); border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.58); opacity: 0.72; cursor: default;
}
.rp-gallery-button:disabled:hover { background: rgba(105, 110, 118, 0.72); }
.rp-gallery-button.prev { left: 8px; }
.rp-gallery-button.next { right: 8px; }
.rp-lightbox[hidden] { display: none; }
.rp-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: 32px; background: rgba(0,0,0,0.9); backdrop-filter: blur(10px);
}
.rp-lightbox-stage { max-width: 96vw; max-height: 92vh; }
.rp-lightbox-stage img, .rp-lightbox-stage video {
  display: block; max-width: 96vw; max-height: 92vh; width: auto; height: auto;
  object-fit: contain; box-shadow: 0 20px 80px rgba(0,0,0,0.5);
}
.rp-lightbox-close {
  position: absolute; top: 18px; right: 24px; z-index: 1; border: 0; background: none;
  color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
}
.rp-lightbox-close:hover { color: var(--accent); }
.rp-lightbox-button {
  position: absolute; top: 50%; z-index: 1; width: 42px; height: 42px;
  display: grid; place-items: center; padding: 0; transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,0.38); border-radius: 50%;
  background: rgba(92, 98, 108, 0.78); color: #fff; font-size: 0; cursor: pointer;
}
.rp-lightbox-button::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 17px;
  margin: -8.5px -5.5px; background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%, 0 72%, 55% 50%, 0 28%);
}
.rp-lightbox-button.prev { left: 24px; }
.rp-lightbox-button.next { right: 24px; }
.rp-lightbox-button.prev::before { transform: scaleX(-1); }
.rp-lightbox-button:hover { background: rgba(70, 76, 86, 0.94); }
.rp-lightbox-button:disabled { background: rgba(105, 110, 118, 0.72); color: rgba(255,255,255,0.58); opacity: 0.72; cursor: default; }
.rp-lightbox-button:disabled:hover { background: rgba(105, 110, 118, 0.72); }
body.rp-lightbox-open { overflow: hidden; }
.rp-gallery-item {
  flex: 0 0 100%; aspect-ratio: 4 / 3; overflow: hidden; margin: 0;
  scroll-snap-align: start; border: 1px solid var(--rp-line); background: rgba(255,255,255,0.04);
}
.rp-gallery-item img, .rp-gallery-item video { display: block; width: 100%; height: 100%; object-fit: cover; }
.rp-gallery-item video { background: #000; }
.rp-item-title {
  font-family: var(--rp-serif); font-weight: 500;
  font-size: clamp(1.3rem, 1.9vw, 1.68rem); line-height: 1.16;
  letter-spacing: -0.01em; color: var(--rp-ink); text-wrap: balance;
}
.rp-item-meta {
  margin-top: 16px; display: flex; flex-direction: column; gap: 5px;
}
.rp-role {
  color: rgba(var(--accent-rgb), 0.92);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.rp-date {
  color: var(--rp-ink-3); font-size: 0.78rem; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.rp-item-body {
  margin: 0; padding-left: 1.2em; font-size: 1.02rem; line-height: 1.64; color: var(--rp-ink-2);
}
.rp-item-body li + li { margin-top: 0.55em; }
.rp-item-body li::marker { color: var(--accent); }
.rp-item-body em { color: var(--rp-ink); font-style: italic; }
.rp-tags {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px;
}
.rp-tags li {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.03em;
  color: var(--rp-ink-2);
  border: 1px solid var(--rp-line); border-radius: 6px;
  padding: 4px 11px;
}

@media (max-width: 820px) {
  .rp-item { grid-template-columns: 52px minmax(0, 1fr); }
  .rp-item-main { grid-column: 2; grid-template-columns: 1fr; gap: 18px; }
  .rp-gallery-wrap { grid-column: 2; }
}
@media (max-width: 560px) {
  .rp-item { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .rp-num { font-size: 0.92rem; }
  .rp-wrap { padding: 0 20px; }
  .rp-work.is-first { padding-top: clamp(78px, 14vh, 120px); }
  .rp-item-body { font-size: 0.98rem; }
  .rp-item-meta { gap: 7px 12px; }
  .rp-gallery-wrap { grid-column: 2; }
}
@media (max-width: 420px) {
  .act-overlay h1.display { font-size: 2.7rem; }
  .rsx-title { font-size: 1.48rem; }
}
/* ══════════════════════════════════════════════════════════════════════════
   PAGE MODES — plain (default) vs. cinematic (?experimental=1)
   The class is set on <html> by the inline script in index.html, before first
   paint. Plain mode strips every journey layer out of the layout and lets
   #research-page be an ordinary document that starts at the top of the page;
   the journey runtime isn't loaded at all, so these rules are only hiding
   inert markup, not a running scene.
   ══════════════════════════════════════════════════════════════════════════ */
.mode-plain #loading-screen,
.mode-plain #c,
.mode-plain #intro-canvas,
.mode-plain #burn-fx,
.mode-plain #journey-overlays,
.mode-plain #journey-spacer,
.mode-plain #research-page::before { display: none; }

.mode-plain #research-page { min-height: 100vh; }
/* The masthead replaces the cinematic's opening title, so it only belongs to plain mode. */
.mode-cinematic .rp-masthead { display: none; }

.rp-masthead { padding-bottom: clamp(26px, 4vh, 46px); }
.rp-name {
  font-family: var(--rp-serif); font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 3.3rem); line-height: 1.04;
  letter-spacing: -0.02em; color: var(--rp-ink);
}

/* The switch itself — top right, over whichever mode is showing. Below the loading
   screen (z2000) so it stays out of the way while the journey boots. */
.mode-toggle {
  position: fixed; bottom: clamp(14px, 2.2vh, 22px); right: clamp(14px, 2.4vw, 28px);
  z-index: 1900; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(6, 8, 16, 0.5);
  -webkit-backdrop-filter: saturate(170%) blur(14px);
          backdrop-filter: saturate(170%) blur(14px);
  color: rgba(226,232,246,0.78); text-decoration: none;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.mode-toggle:hover {
  color: #fff;
  border-color: rgba(var(--accent-rgb), 0.7);
  background: rgba(var(--accent-rgb), 0.18);
}
.mode-toggle i { font-style: normal; color: var(--accent); }
.mode-plain .to-plain,
.mode-cinematic .to-experimental { display: none; }

@media (max-width: 560px) {
  .mode-toggle { padding: 7px 12px; font-size: 0.62rem; letter-spacing: 0.09em; }
  .rp-masthead { padding-bottom: 24px; }
}