/* ════════════════════════════════════════════════════════════════════
   Binaya Neupane · Personal Site (Node multipage)
   Light editorial-cinematic. Vanilla CSS. No build step.
   ════════════════════════════════════════════════════════════════════ */

/* ─── tokens ─────────────────────────────────────────────────────── */
:root {
  /* AAA game UI · cyberpunk-tactical · deep black + cyan/red accents */
  --paper:        #05070b;        /* page void */
  --paper-2:      #0d1219;        /* primary surface */
  --paper-3:      #161e2c;        /* raised surface */
  --paper-4:      #1f2a3d;        /* highest tier */
  --ink:          #e8eef5;        /* primary text */
  --ink-soft:     #b8c0cc;        /* body copy */
  --ink-mute:     #6b7585;        /* mono labels */
  --muted:        #4a5260;        /* faint */
  --hairline:     rgba(0, 229, 255, 0.18);
  --hairline-2:   rgba(255, 255, 255, 0.05);
  --slate:        #00e5ff;        /* electric cyan — primary accent */
  --slate-soft:   #4ef0ff;
  --rust:         #ff3859;        /* alert red — warnings + accents */
  --rust-soft:    #ff5e7d;
  --gold:         #ffd25c;        /* warning amber */
  --green:        #4cff88;        /* clear / verified */
  --glow-cyan:    0 0 20px rgba(0, 229, 255, 0.45);
  --glow-red:     0 0 20px rgba(255, 56, 89, 0.45);

  --f-display:  'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --f-sans:     'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --f-mono:     'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --container:  1280px;
  --gutter:     clamp(20px, 4.5vw, 72px);
  /* ribbon was removed (status strip with AVAILABLE pulse + clocks).
     Its 38px height was rolled into --nav-h so the topnav now occupies
     the space the ribbon used to — single-bar header instead of two. */
  --ribbon-h:   0px;
  --nav-h:      88px;

  --ease:       cubic-bezier(.22, .61, .36, 1);
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-in:    cubic-bezier(.7, 0, .84, 0);
  --ease-io:    cubic-bezier(.7, 0, .3, 1);
}

/* ─── reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
dd { margin: 0; }
h1, h2, h3, h4, h5, p { margin: 0; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
button { background: transparent; border: 0; cursor: pointer; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: 'ss01', 'ss02', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}
::selection { background: var(--rust); color: var(--paper); }

/* ─── atmosphere: paper grain ────────────────────────────────────── */
.grain {
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: 0.42; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.09  0 0 0 0 0.12  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* subtle vignette (cool, not warm) */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(46, 90, 122, 0.05), transparent 60%),
    radial-gradient(120% 80% at 50% 110%, rgba(20, 24, 31, 0.04), transparent 55%);
}

/* ─── atmosphere: drifting dust particles ────────────────────────── */
.dust {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.65;
}
.dust::before, .dust::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 20%, rgba(20,24,31,0.4), transparent 50%),
    radial-gradient(1.5px 1.5px at 80% 30%, rgba(20,24,31,0.3), transparent 50%),
    radial-gradient(1px 1px at 40% 60%, rgba(20,24,31,0.4), transparent 50%),
    radial-gradient(2px 2px at 65% 75%, rgba(20,24,31,0.25), transparent 50%),
    radial-gradient(1px 1px at 90% 10%, rgba(20,24,31,0.35), transparent 50%),
    radial-gradient(1.5px 1.5px at 10% 80%, rgba(20,24,31,0.3), transparent 50%),
    radial-gradient(1px 1px at 50% 40%, rgba(20,24,31,0.3), transparent 50%);
  background-size: 600px 600px;
  animation: dust-drift 90s linear infinite;
}
.dust::after { animation-duration: 130s; animation-direction: reverse; opacity: 0.6; }
@keyframes dust-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-300px, -200px, 0); }
}

/* ─── cursor spotlight ───────────────────────────────────────────── */
.spotlight {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  opacity: 0;
  transition: opacity 600ms var(--ease);
  background: radial-gradient(
    340px 340px at var(--mx, 50%) var(--my, 50%),
    rgba(46, 90, 122, 0.10),
    rgba(46, 90, 122, 0.04) 30%,
    transparent 60%
  );
}
.spotlight.active { opacity: 1; }

/* ─── cursor dot + ring ──────────────────────────────────────────── */
.cursor-dot, .cursor-ring {
  position: fixed; pointer-events: none; z-index: 210;
  top: 0; left: 0;
  transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0) translate(-50%, -50%);
  opacity: 0;
  transition: opacity 200ms var(--ease), background 200ms var(--ease), border-color 200ms var(--ease), width 220ms var(--ease), height 220ms var(--ease);
}
.cursor-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink);
  mix-blend-mode: difference;
}
.cursor-ring {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(20,24,31,0.45);
  transform: translate3d(var(--rx, -100px), var(--ry, -100px), 0) translate(-50%, -50%);
}
.cursor-dot.active, .cursor-ring.active { opacity: 1; }
body.is-hovering-link .cursor-ring {
  width: 56px; height: 56px;
  border-color: var(--rust);
  background: rgba(177, 74, 53, 0.06);
}
body.is-hovering-link .cursor-dot { background: var(--rust); }

/* ─── scroll progress bar ────────────────────────────────────────── */
.scroll-progress {
  position: fixed; top: var(--ribbon-h); left: 0; right: 0; height: 2px;
  z-index: 49;
  background: rgba(20, 24, 31, 0.06);
  pointer-events: none;
}
.scroll-progress-bar {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(to right, var(--slate), var(--rust));
  transition: width 80ms linear;
}

/* ─── page transition overlay ────────────────────────────────────── */
.page-overlay {
  position: fixed; inset: 0; z-index: 220;
  pointer-events: none;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  background: transparent;
  visibility: hidden;
}
.po-stripe {
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
}
.po-stripe:nth-child(2) { background: var(--ink-soft); }
.po-stripe:nth-child(3) { background: var(--ink); }
.po-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 6px;
  font-family: var(--f-mono); color: var(--paper);
  font-size: 14px; letter-spacing: 0.2em;
  opacity: 0;
}
.po-mono { color: var(--rust-soft); font-size: 11px; letter-spacing: 0.24em; }
.po-target { color: var(--paper); font-family: var(--f-display); font-style: italic; font-size: 32px; letter-spacing: 0; }

.page-overlay.enter {
  visibility: visible; pointer-events: auto;
}
.page-overlay.enter .po-stripe {
  animation: po-enter 480ms var(--ease-io) forwards;
}
.page-overlay.enter .po-stripe:nth-child(1) { animation-delay: 0ms; }
.page-overlay.enter .po-stripe:nth-child(2) { animation-delay: 60ms; }
.page-overlay.enter .po-stripe:nth-child(3) { animation-delay: 120ms; }
.page-overlay.enter .po-label { animation: po-label-in 380ms 200ms var(--ease) forwards; }

.page-overlay.exit {
  visibility: visible; pointer-events: none;
}
.page-overlay.exit .po-stripe {
  transform: scaleY(1);
  animation: po-exit 560ms var(--ease-out) forwards;
  transform-origin: top;
}
.page-overlay.exit .po-stripe:nth-child(1) { animation-delay: 80ms; }
.page-overlay.exit .po-stripe:nth-child(2) { animation-delay: 40ms; }
.page-overlay.exit .po-stripe:nth-child(3) { animation-delay: 0ms; }
.page-overlay.exit .po-label { opacity: 0; }

@keyframes po-enter { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes po-exit  { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes po-label-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── container ──────────────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

/* ─── ribbon ─────────────────────────────────────────────────────── */
.ribbon {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--ribbon-h);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 0 var(--gutter);
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-mute);
  background: rgba(250, 247, 240, 0.86);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.ribbon-cell { white-space: nowrap; }
.ribbon-sep { opacity: 0.45; }
.ribbon-clock time { font-variant-numeric: tabular-nums; color: var(--ink); }
.ribbon-file { color: var(--rust); font-weight: 500; }

/* ─── topnav ─────────────────────────────────────────────────────── */
.topnav {
  position: fixed;
  top: var(--ribbon-h); left: 0; right: 0; z-index: 48;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  background: rgba(250, 247, 240, 0.78);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--hairline-2);
}
.topnav-brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-display);
  font-weight: 380;
  font-size: 18px;
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 96, 'SOFT' 50;
}
.brand-mark {
  font-family: var(--f-display); font-weight: 600;
  display: inline-flex; align-items: center; gap: 1px;
  font-size: 22px;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.brand-b { color: var(--ink); }
.brand-dot { color: var(--rust); transform: translateY(-3px); display: inline-block; }
.brand-n { color: var(--ink); }
.brand-name { color: var(--ink-mute); font-size: 14px; }

.topnav-list {
  display: flex; gap: 4px; align-items: center;
}
.topnav-link {
  position: relative;
  padding: 10px 14px;
  border-radius: 3px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 220ms var(--ease), background 220ms var(--ease);
}
.tn-mono {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.tn-label {
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 450;
  color: var(--ink);
}
.topnav-link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 360ms var(--ease);
}
.topnav-link:hover::after { transform: scaleX(1); }
.topnav-link:hover .tn-label { color: var(--rust); }
.topnav-link.is-active { background: var(--paper-2); }
.topnav-link.is-active .tn-mono { color: var(--rust); }
.topnav-link.is-active .tn-label { color: var(--ink); font-weight: 500; }
.topnav-link.is-active::after { transform: scaleX(1); background: var(--rust); }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.nav-toggle span {
  display: block; width: 22px; height: 1.5px; background: var(--ink); transition: transform 280ms var(--ease), opacity 200ms var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── page chrome ────────────────────────────────────────────────── */
.page { padding-top: calc(var(--ribbon-h) + var(--nav-h)); }

.section {
  position: relative;
  padding: clamp(72px, 10vw, 140px) 0;
  border-top: 1px solid var(--hairline-2);
}
.section:first-of-type { border-top: none; }

.section-tag {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-mono);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: clamp(28px, 4vw, 44px);
}
.section-tag .tag-num { color: var(--rust); font-weight: 500; }
.section-tag .tag-lbl { color: var(--ink); font-weight: 500; }
.section-tag .tag-rule {
  flex: 0 1 120px; height: 1px; background: var(--hairline);
  position: relative; overflow: hidden;
}
.section-tag .tag-rule::after {
  content: ""; position: absolute; inset: 0;
  background: var(--rust);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s var(--ease) 0.2s;
}
.section.in-view .section-tag .tag-rule::after { transform: scaleX(1); }
.section-tag .tag-name { color: var(--ink-mute); font-weight: 400; }
.section-tag.is-mini { font-size: 11px; gap: 10px; margin-bottom: 14px; }
.section-tag.is-dark .tag-num { color: var(--rust-soft); }
.section-tag.is-dark .tag-lbl { color: var(--paper); }
.section-tag.is-dark .tag-rule { background: rgba(250, 247, 240, 0.18); }
.section-tag.is-dark .tag-name { color: rgba(250, 247, 240, 0.65); }

.h-display {
  font-family: var(--f-display);
  font-weight: 360;
  font-size: clamp(34px, 5.6vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--ink);
  font-variation-settings: 'opsz' 96, 'SOFT' 30;
  max-width: 22ch;
}
.h-display em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 80;
  color: var(--slate);
}
.accent-rust { color: var(--rust) !important; }

.page-h1 { margin-bottom: clamp(24px, 3vw, 40px); }

.intro-lede {
  font-family: var(--f-display);
  font-weight: 350;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: 20px;
}
.inline-code {
  font-family: var(--f-mono); font-size: 0.92em;
  background: var(--paper-2);
  padding: 2px 8px; border-radius: 3px;
  border: 1px solid var(--hairline);
}

/* word reveal (for h-display blocks) */
[data-reveal-words] .rw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0 0.04em;
}
[data-reveal-words] .rw-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 800ms var(--ease-out);
}
[data-reveal-words].is-revealed .rw-inner { transform: translateY(0); }
[data-reveal-words].is-revealed .rw:nth-child(1)  .rw-inner { transition-delay: 40ms;  }
[data-reveal-words].is-revealed .rw:nth-child(2)  .rw-inner { transition-delay: 90ms;  }
[data-reveal-words].is-revealed .rw:nth-child(3)  .rw-inner { transition-delay: 140ms; }
[data-reveal-words].is-revealed .rw:nth-child(4)  .rw-inner { transition-delay: 190ms; }
[data-reveal-words].is-revealed .rw:nth-child(5)  .rw-inner { transition-delay: 240ms; }
[data-reveal-words].is-revealed .rw:nth-child(6)  .rw-inner { transition-delay: 290ms; }
[data-reveal-words].is-revealed .rw:nth-child(7)  .rw-inner { transition-delay: 340ms; }
[data-reveal-words].is-revealed .rw:nth-child(8)  .rw-inner { transition-delay: 380ms; }
[data-reveal-words].is-revealed .rw:nth-child(9)  .rw-inner { transition-delay: 420ms; }
[data-reveal-words].is-revealed .rw:nth-child(n+10) .rw-inner { transition-delay: 460ms; }

/* ════════════════════════════════════════════════════════════════════
   §01 HERO
   ════════════════════════════════════════════════════════════════════ */
.section-hero {
  padding-top: clamp(60px, 9vw, 110px);
  padding-bottom: clamp(80px, 9vw, 130px);
  border-top: none;
}
.hero-title {
  font-family: var(--f-display);
  font-weight: 320;
  font-size: clamp(46px, 9.6vw, 138px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 12px 0 clamp(28px, 4vw, 50px);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.hero-title .word {
  display: inline-block;
  vertical-align: bottom;
  padding: 0 0.04em; margin: 0 0.02em;
  /* overflow: visible so words are never trapped if JS doesn't add .rise */
  overflow: visible;
}
.hero-title .word .inner {
  display: inline-block;
  /* visible by default — JS animation is enhancement, not a gate */
  transform: translateY(0);
  transition: transform 900ms var(--ease-out);
  will-change: transform;
}
/* JS-driven word-rise (optional, doesn't gate visibility) */
.hero-title.pre-rise .word { overflow: hidden; }
.hero-title.pre-rise .word .inner { transform: translateY(110%); }
.hero-title.pre-rise.rise .word .inner { transform: translateY(0); }
.hero-title .word:nth-of-type(1) .inner { transition-delay: 60ms; }
.hero-title .word:nth-of-type(2) .inner { transition-delay: 130ms; }
.hero-title .word:nth-of-type(3) .inner { transition-delay: 220ms; }
.hero-title .word:nth-of-type(4) .inner { transition-delay: 290ms; }
.hero-title .word:nth-of-type(5) .inner { transition-delay: 350ms; }
.hero-title .word:nth-of-type(6) .inner { transition-delay: 420ms; }
.hero-title .word:nth-of-type(7) .inner { transition-delay: 510ms; }
.hero-title em { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100; }

.hero-lede {
  font-family: var(--f-display);
  font-weight: 350;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.42;
  color: var(--ink-soft);
  max-width: 38ch;
  margin-bottom: clamp(36px, 5vw, 56px);
  position: relative;
}

.now-line {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-mute);
  padding: 10px 14px 10px 12px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--rust);
  background: rgba(177, 74, 53, 0.04);
  border-radius: 2px;
  margin-bottom: 28px;
  max-width: 100%;
}
.now-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rust);
  position: relative;
  flex: 0 0 auto;
}
.now-pulse::after {
  content: ""; position: absolute; inset: -4px;
  border: 1px solid var(--rust); border-radius: 50%;
  opacity: 0;
  animation: now-pulse 2.4s ease-out infinite;
}
@keyframes now-pulse {
  0%   { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(1.8); opacity: 0; }
}
.now-label { font-weight: 500; color: var(--rust); letter-spacing: 0.12em; }
.now-body { color: var(--ink); font-weight: 400; }
.now-sep { opacity: 0.45; margin: 0 4px; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-bottom: 32px;
}
.hero-link {
  color: var(--ink);
  border-bottom: 1px dashed var(--hairline);
  padding-bottom: 1px;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
  display: inline-block;
}
.hero-link:hover { color: var(--rust); border-color: var(--rust); }

.hero-quicknav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline-2);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.hqn-label {
  text-transform: uppercase;
  color: var(--ink-mute);
}
.hqn-link {
  color: var(--ink);
  padding: 4px 0;
  border-bottom: 1px dashed transparent;
  transition: color 220ms var(--ease), border-color 220ms var(--ease), letter-spacing 220ms var(--ease);
}
.hqn-link:hover { color: var(--rust); border-color: var(--rust); letter-spacing: 0.08em; }
.hqn-cta { color: var(--rust); border-color: var(--hairline); }

/* hero content visible by default — no entry stagger animation
   (3D scene already provides plenty of motion; animation was leaving
   content stuck at opacity 0 in some load paths). */
.section-hero .section-tag,
.section-hero .hero-lede,
.section-hero .now-line,
.section-hero .hero-meta,
.section-hero .hero-quicknav {
  opacity: 1;
  animation: none;
}

/* ════════════════════════════════════════════════════════════════════
   §02 BRIEF
   ════════════════════════════════════════════════════════════════════ */
.brief-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.brief-prose .h-display { margin-bottom: 24px; }
.brief-prose p {
  font-size: 17.5px; line-height: 1.62;
  color: var(--ink-soft);
  max-width: 52ch; margin-bottom: 18px;
}
.brief-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 4px; overflow: hidden;
}
.brief-stats > .stat-tile {
  background: var(--paper);
  padding: 26px 22px 22px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 170px;
  position: relative; overflow: hidden;
  transition: background 320ms var(--ease);
}
.brief-stats > .stat-tile:hover { background: var(--paper-2); }
.stat-num {
  font-family: var(--f-display); font-weight: 360;
  font-size: clamp(54px, 6vw, 88px); line-height: 1;
  color: var(--ink);
  letter-spacing: -0.03em;
  display: inline-flex; align-items: baseline; gap: 4px;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.stat-suffix { font-size: 0.5em; color: var(--rust); font-weight: 400; }
.stat-label {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.45; max-width: 22ch;
}
.stat-spark {
  position: absolute; right: 18px; bottom: 18px;
  width: 60px; height: 1px;
  background: linear-gradient(to right, transparent, var(--rust));
  opacity: 0; transform: scaleX(0); transform-origin: left;
  transition: transform 800ms var(--ease) 600ms, opacity 800ms var(--ease) 600ms;
}
.section.in-view .stat-spark { opacity: 0.7; transform: scaleX(1); }

.brief-tease, .section-tease { padding: 0; }
.section-tease { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(64px, 8vw, 100px); }
.section-tease-dark { background: var(--ink); }
.tease-link {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 16px;
  padding: 18px 22px;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: var(--paper);
  font-family: var(--f-display);
  font-size: 22px; font-weight: 380;
  color: var(--ink);
  transition: background 280ms var(--ease), transform 280ms var(--ease), border-color 280ms var(--ease);
  font-variation-settings: 'opsz' 96, 'SOFT' 50;
}
.tease-link:hover { background: var(--paper-2); border-color: var(--rust); transform: translateY(-1px); }
.tease-link.is-dark {
  background: rgba(250,247,240,0.04); border-color: rgba(250,247,240,0.18); color: var(--paper);
}
.tease-link.is-dark:hover { background: rgba(250,247,240,0.08); border-color: var(--rust-soft); }
.tease-arrow {
  display: inline-flex; width: 32px; height: 32px;
  align-items: center; justify-content: center;
  border: 1px solid var(--rust); border-radius: 50%; color: var(--rust);
  font-size: 14px;
  transition: transform 320ms var(--ease), background 320ms var(--ease);
}
.tease-link:hover .tease-arrow { transform: translateX(4px); background: var(--rust); color: var(--paper); }
.tease-mono {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--ink-mute); text-transform: uppercase;
}
.tease-link.is-dark .tease-mono { color: rgba(250,247,240,0.55); }
.tease-name { font-style: italic; font-variation-settings: 'opsz' 96, 'SOFT' 80; }
.tease-link-large { font-size: clamp(22px, 2.6vw, 32px); padding: 22px 28px; }

/* ════════════════════════════════════════════════════════════════════
   §03 METHOD · STICKY DIAGRAM
   ════════════════════════════════════════════════════════════════════ */
.section-intro { padding: clamp(60px, 8vw, 110px) 0 clamp(40px, 5vw, 60px); }

.section-method { padding: 0; border-top: 1px solid var(--hairline-2); }
.method-track {
  position: relative;
  height: 600vh;
  background:
    linear-gradient(180deg, transparent 0, rgba(46,90,122,0.025) 50%, transparent 100%),
    var(--paper);
}
.method-stage-pin {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center;
  padding: calc(var(--ribbon-h) + var(--nav-h) + 24px) 0 24px;
}
.method-stage-pin > .container { width: 100%; }

.pipeline {
  margin: 0 auto; max-width: 1080px;
  color: var(--ink);
  margin-bottom: clamp(36px, 5vw, 56px);
}
.pipeline svg { width: 100%; height: auto; overflow: visible; }
.pipe-label {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; fill: var(--ink-mute); text-transform: uppercase;
  transition: fill 320ms var(--ease), font-weight 320ms var(--ease);
}
.pipe-num { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.12em; fill: var(--muted); }
.pipe-circle, .pipe-dot, .pipe-halo {
  transition: stroke 400ms var(--ease), fill 400ms var(--ease), opacity 400ms var(--ease), r 400ms var(--ease);
  transform-origin: center; transform-box: fill-box;
}
.pipe-node.is-on .pipe-circle { stroke: var(--rust); }
.pipe-node.is-on .pipe-dot { fill: var(--rust); transform: scale(1.15); }
.pipe-node.is-on .pipe-label { fill: var(--ink); }
.pipe-node.is-current .pipe-circle { stroke: var(--rust); stroke-width: 2.5; fill: rgba(177, 74, 53, 0.08); r: 26; }
.pipe-node.is-current .pipe-dot { transform: scale(1.5); }
.pipe-node.is-current .pipe-halo { opacity: 0.45; r: 38; stroke: var(--rust); }
.pipe-node.is-current .pipe-label { fill: var(--rust); font-weight: 600; }
.pipe-progress {
  stroke: var(--rust);
  transition: x2 600ms var(--ease);
}

.stage-info {
  position: relative; min-height: 200px;
  margin-bottom: 28px;
}
.stage-card {
  position: absolute; inset: 0;
  max-width: 720px; margin: 0 auto;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  pointer-events: none;
}
.method-track[data-stage="subjects"] .stage-card[data-stage="subjects"],
.method-track[data-stage="pattern"]  .stage-card[data-stage="pattern"],
.method-track[data-stage="rule"]     .stage-card[data-stage="rule"],
.method-track[data-stage="alert"]    .stage-card[data-stage="alert"],
.method-track[data-stage="case"]     .stage-card[data-stage="case"] {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.stage-meta {
  display: flex; justify-content: center; gap: 16px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--rust); margin-bottom: 14px; text-transform: uppercase;
}
.stage-mono:first-child { color: var(--ink-mute); }
.stage-name {
  font-family: var(--f-display); font-weight: 380;
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25;
  color: var(--ink); margin-bottom: 10px;
  font-variation-settings: 'opsz' 96, 'SOFT' 60;
}
.stage-desc {
  font-size: 16.5px; line-height: 1.6;
  color: var(--ink-soft); max-width: 60ch; margin: 0 auto;
}

/* sub-stage progress ticks */
.stage-progress {
  display: flex; gap: 6px; justify-content: center;
  margin-top: 10px;
}
.sp-tick {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 1 1 0; max-width: 120px;
  cursor: pointer;
}
.sp-line {
  display: block; width: 100%; height: 2px;
  background: var(--hairline);
  position: relative; overflow: hidden;
}
.sp-line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--rust);
  transform: scaleX(0); transform-origin: left;
  transition: transform 500ms var(--ease);
}
.sp-mono {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.14em; color: var(--ink-mute);
  text-transform: uppercase;
}
.method-track[data-stage] .sp-tick.is-on .sp-line::after { transform: scaleX(1); }
.method-track[data-stage] .sp-tick.is-current .sp-mono { color: var(--rust); }

/* ════════════════════════════════════════════════════════════════════
   §04 POSITION (DARK)
   ════════════════════════════════════════════════════════════════════ */
.section-position {
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--ink);
  padding: clamp(96px, 12vw, 160px) 0;
  position: relative;
}
.section-position::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(177, 74, 53, 0.12), transparent 60%),
    radial-gradient(80% 50% at 50% 100%, rgba(46, 90, 122, 0.16), transparent 60%);
}
.section-position > .container { position: relative; z-index: 1; }
.section-position .h-display { color: var(--paper); }
.section-position .h-display em { color: var(--rust-soft); }

.position-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.position-prose p {
  font-size: 17.5px; line-height: 1.65;
  color: rgba(250, 247, 240, 0.78);
  max-width: 56ch; margin-top: 22px;
}
.position-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 32px;
}
.position-pills li {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.10em;
  color: rgba(250,247,240,0.7);
  padding: 6px 12px;
  border: 1px solid rgba(250,247,240,0.18);
  border-radius: 999px;
  text-transform: uppercase;
  transition: color 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease);
}
.position-pills li:hover {
  color: var(--paper);
  border-color: var(--rust);
  background: rgba(177,74,53,0.1);
}

.position-card {
  background: rgba(250, 247, 240, 0.04);
  border: 1px solid rgba(250, 247, 240, 0.14);
  border-left: 3px solid var(--rust);
  padding: 26px 26px 28px;
  border-radius: 2px;
  position: sticky;
  top: calc(var(--ribbon-h) + var(--nav-h) + 24px);
  overflow: hidden;
}
.pc-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.pc-mono {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--rust-soft);
  text-transform: uppercase;
}
.pc-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rust);
  box-shadow: 0 0 0 4px rgba(177, 74, 53, 0.18);
  animation: pc-blink 2.4s ease-in-out infinite;
}
@keyframes pc-blink {
  0%, 60%, 100% { opacity: 1; }
  70% { opacity: 0.35; }
}
.pc-dl { display: grid; grid-template-columns: 1fr; gap: 12px; }
.pc-dl dt {
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(250, 247, 240, 0.55);
}
.pc-dl dd {
  color: var(--paper);
  font-size: 15.5px; line-height: 1.5;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(250, 247, 240, 0.10);
}
.pc-dl dd:last-child { border-bottom: none; padding-bottom: 0; }

/* operational stamp */
.pc-stamp {
  position: absolute; right: -30px; top: 30px;
  width: 180px; height: 180px;
  color: var(--rust);
  opacity: 0;
  transform: rotate(-12deg) scale(0.8);
  transition: opacity 1s var(--ease) 600ms, transform 1s var(--ease) 600ms;
  pointer-events: none;
}
.section.in-view .pc-stamp { opacity: 0.85; transform: rotate(-12deg) scale(1); }
.stamp-svg { width: 100%; height: 100%; color: inherit; animation: stamp-rotate 60s linear infinite; }
@keyframes stamp-rotate { to { transform: rotate(360deg); } }
.stamp-svg circle, .stamp-svg text { stroke: currentColor; }

/* ════════════════════════════════════════════════════════════════════
   §05 RECORDS
   ════════════════════════════════════════════════════════════════════ */
.records {
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-top: 1px solid var(--hairline);
}
.record {
  position: relative;
  border-bottom: 1px solid var(--hairline);
  padding: clamp(28px, 4vw, 44px) 0;
  display: grid;
  grid-template-columns: 220px 1fr 200px;
  gap: clamp(20px, 4vw, 64px);
  align-items: start;
  transition: background 300ms var(--ease);
  overflow: hidden;
}
.record::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--rust);
  transform: scaleY(0); transform-origin: top;
  transition: transform 600ms var(--ease);
}
.record.in-view::before { transform: scaleY(1); }
.record:hover { background: rgba(177, 74, 53, 0.025); }

.record-head {
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-mute);
  position: sticky;
  top: calc(var(--ribbon-h) + var(--nav-h) + 16px);
}
.record-id { color: var(--rust); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; }
.record-status {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--hairline); border-radius: 2px;
  background: var(--paper);
  font-size: 10.5px; letter-spacing: 0.16em;
  width: fit-content;
}
.record-status.is-live {
  border-color: var(--rust);
  color: var(--rust);
  background: rgba(177, 74, 53, 0.06);
}
.record-period { color: var(--ink); font-weight: 400; }

.record-title {
  font-family: var(--f-display); font-weight: 380;
  font-size: clamp(24px, 3vw, 34px); line-height: 1.18;
  color: var(--ink); margin-bottom: 6px;
  letter-spacing: -0.012em;
  font-variation-settings: 'opsz' 96, 'SOFT' 50;
}
.record-org {
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--slate); margin-bottom: 22px;
}
.record-dl {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 24px;
}
.record-dl dt {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 5px;
}
.record-dl dd {
  font-size: 16px; line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 6px; padding-bottom: 12px;
  border-bottom: 1px dashed var(--hairline-2);
}
.record-dl dd:last-of-type { border-bottom: none; }

.record-stamp {
  width: 180px; height: 180px;
  color: var(--rust);
  opacity: 0;
  transform: rotate(-8deg) scale(0.8);
  transition: opacity 900ms var(--ease) 200ms, transform 900ms var(--ease) 200ms;
  align-self: center;
  justify-self: end;
}
.record.in-view .record-stamp { opacity: 0.75; transform: rotate(-8deg) scale(1); }
.record:hover .record-stamp { opacity: 1; }

/* education */
.record-education {
  margin-top: clamp(40px, 5vw, 64px);
  padding: 28px 0 0;
  border-top: 1px solid var(--hairline);
}
.ed-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px 32px;
}
.ed-list li {
  font-size: 15px; color: var(--ink-soft);
  padding: 12px 0 12px 14px;
  border-left: 2px solid var(--slate-soft);
  display: flex; flex-direction: column; gap: 2px;
}
.ed-list strong {
  color: var(--ink); font-weight: 500;
  font-family: var(--f-display); font-size: 17px;
  font-variation-settings: 'opsz' 48, 'SOFT' 40;
}
.ed-inst { font-size: 14px; color: var(--ink-mute); }
.ed-period {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--muted);
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════════
   §06 CAPABILITIES
   ════════════════════════════════════════════════════════════════════ */
.matrix-legend {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--ink-mute);
  text-transform: uppercase;
  margin: 22px 0 0;
}
.matrix-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.matrix-legend .legend-mono {
  text-transform: none; letter-spacing: 0;
  color: var(--muted); font-size: 11.5px;
}
.matrix-wrap {
  border: 1px solid var(--hairline); border-radius: 4px;
  overflow-x: auto; background: var(--paper);
}
.matrix { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.matrix thead th {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 500;
  padding: 16px 18px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--hairline);
  text-align: center;
  position: sticky; top: calc(var(--ribbon-h) + var(--nav-h));
  z-index: 1;
}
.matrix thead th.m-col-cap { text-align: left; }
.matrix tbody th {
  font-family: var(--f-sans); font-weight: 450;
  text-align: left;
  padding: 14px 18px;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline-2);
  width: 56%;
}
.matrix tbody td {
  text-align: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline-2);
  border-left: 1px solid var(--hairline-2);
  width: 14.6%;
  position: relative;
}
.matrix tr:last-child th,
.matrix tr:last-child td { border-bottom: none; }
.matrix tbody tr:hover { background: rgba(46, 90, 122, 0.03); }
.matrix tbody tr.is-current { background: rgba(177, 74, 53, 0.04); }

.dot {
  display: inline-block;
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid var(--hairline);
  background: transparent;
  vertical-align: middle;
  position: relative;
  transition: background 380ms var(--ease), border-color 380ms var(--ease), transform 380ms var(--ease-out);
  transform: scale(0.5);
  opacity: 0.4;
}
.dot.dot-on { background: var(--rust); border-color: var(--rust); transform: scale(1); opacity: 1; }
.dot.dot-off { background: transparent; border-color: var(--hairline); transform: scale(0.85); opacity: 0.5; }
.matrix-legend .dot { transform: scale(1); opacity: 1; }
.matrix-legend .dot-on { background: var(--rust); border-color: var(--rust); }

.cap-row td .dot.is-on {
  background: var(--rust); border-color: var(--rust);
  transform: scale(1); opacity: 1;
}
.cap-row td .dot.is-off {
  background: transparent; border-color: var(--hairline);
  transform: scale(0.85); opacity: 0.5;
}
.cap-row.reveal td:nth-of-type(1) .dot { transition-delay: 0ms; }
.cap-row.reveal td:nth-of-type(2) .dot { transition-delay: 110ms; }
.cap-row.reveal td:nth-of-type(3) .dot { transition-delay: 220ms; }

/* summary radar */
.cap-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: clamp(28px, 4vw, 44px);
}
.cap-meter {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px 14px;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--paper);
}
.cm-label {
  grid-column: 1 / 4;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
}
.cm-bar {
  grid-column: 1 / 2;
  display: block; height: 6px; width: 100%;
  background: var(--hairline);
  border-radius: 999px; overflow: hidden;
}
.cm-fill {
  display: block; height: 100%; width: 0%;
  background: var(--rust);
  transition: width 1.2s var(--ease) 200ms;
}
.cm-num {
  font-family: var(--f-display); font-size: 22px;
  color: var(--ink); font-variant-numeric: tabular-nums;
  font-variation-settings: 'opsz' 96, 'SOFT' 50;
}
.cm-of {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--ink-mute);
}

/* ════════════════════════════════════════════════════════════════════
   §07 LAB
   ════════════════════════════════════════════════════════════════════ */
.lab-disclaimer {
  font-family: var(--f-mono);
  font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--ink-mute); max-width: 70ch;
  margin: 0;
  padding: 14px 16px;
  background: rgba(46, 90, 122, 0.04);
  border-left: 2px solid var(--slate);
  border-radius: 2px;
}
.lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: clamp(24px, 3vw, 36px);
}
.lab-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 28px 28px 0;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: transform 400ms var(--ease), border-color 400ms var(--ease), box-shadow 400ms var(--ease);
}
.lab-card:hover {
  transform: translateY(-2px);
  border-color: rgba(20, 24, 31, 0.22);
  box-shadow: 0 18px 40px -22px rgba(20, 24, 31, 0.18);
}
.lab-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.lab-mono {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--rust); text-transform: uppercase;
}
.lab-status {
  font-family: var(--f-mono);
  font-size: 10.5px; letter-spacing: 0.16em;
  padding: 3px 8px; border-radius: 2px;
  border: 1px solid var(--hairline);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.lab-status.is-build { border-color: var(--rust); color: var(--rust); background: rgba(177, 74, 53, 0.06); }
.lab-status.is-plan  { border-color: var(--slate); color: var(--slate); background: rgba(46, 90, 122, 0.06); }
.lab-status.is-sketch { border-color: var(--gold); color: var(--gold); background: rgba(199, 154, 59, 0.10); }
.lab-name {
  font-family: var(--f-display); font-weight: 380;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2;
  color: var(--ink); margin-bottom: 12px;
  letter-spacing: -0.012em;
  font-variation-settings: 'opsz' 96, 'SOFT' 60;
}
.lab-blurb {
  font-size: 15.5px; line-height: 1.6;
  color: var(--ink-soft); margin-bottom: 18px;
}
.lab-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 24px;
}
.lab-tags li {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--paper);
  transition: color 220ms var(--ease), border-color 220ms var(--ease);
}
.lab-tags li:hover { color: var(--rust); border-color: var(--rust); }

.lab-illus {
  margin: 0 -28px;
  padding: 22px 28px 28px;
  background: var(--paper-2);
  border-top: 1px solid var(--hairline-2);
  color: var(--ink);
}

/* IIV mock */
.iiv { display: grid; gap: 8px; font-family: var(--f-mono); font-size: 11.5px; }
.iiv-row {
  display: grid; grid-template-columns: 90px 1fr;
  align-items: center; gap: 14px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--hairline-2);
}
.iiv-row:last-child { border-bottom: none; }
.iiv-k { letter-spacing: 0.12em; color: var(--ink-mute); text-transform: uppercase; }
.iiv-v { color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.iiv-bar {
  display: inline-block; width: 120px; height: 6px;
  background: var(--hairline); border-radius: 999px;
  overflow: hidden; position: relative;
}
.iiv-fill {
  display: block; height: 100%; width: 0%;
  background: var(--rust);
  transition: width 1.4s var(--ease) 200ms;
}
.iiv-spark { width: 100px; height: 22px; color: var(--slate); }
.spark-line {
  transition: stroke-dashoffset 2s var(--ease) 400ms;
}
.section.in-view .spark-line { stroke-dashoffset: 0; }
.iiv-flag { color: var(--rust); animation: flag-blink 1.6s ease-in-out infinite; }
@keyframes flag-blink {
  0%, 50%, 100% { opacity: 1; }
  60% { opacity: 0.35; }
}

/* graph canvas */
.graph-canvas { width: 100%; height: auto; max-height: 320px; display: block; }
.graph-cap { text-align: center; margin-top: 6px; }
.g-cap-mono {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.10em; color: var(--ink-mute);
  text-transform: uppercase;
}

/* rule explainer */
.rule-explainer {
  margin: 0; padding: 0;
  font-family: var(--f-mono); font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink);
  background: transparent;
}
.re-line { display: block; opacity: 0; transform: translateX(-6px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.section.in-view .re-line { opacity: 1; transform: translateX(0); }
.section.in-view .re-line:nth-child(1) { transition-delay: 200ms; }
.section.in-view .re-line:nth-child(2) { transition-delay: 380ms; }
.section.in-view .re-line:nth-child(3) { transition-delay: 560ms; }
.section.in-view .re-line:nth-child(4) { transition-delay: 740ms; }
.section.in-view .re-line:nth-child(5) { transition-delay: 920ms; }
.re-k { color: var(--rust); font-weight: 500; display: inline-block; min-width: 60px; }
.re-v { color: var(--ink-soft); }

/* ════════════════════════════════════════════════════════════════════
   §08 CONTACT
   ════════════════════════════════════════════════════════════════════ */
.cta-headline {
  font-family: var(--f-display);
  font-weight: 360;
  font-size: clamp(40px, 6.4vw, 92px);
  line-height: 1.04; letter-spacing: -0.022em;
  color: var(--ink);
  margin-bottom: clamp(36px, 5vw, 56px);
  max-width: 18ch;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.cta-headline em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}

/* form */
.contact-form {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 28px;
  position: relative;
}
.cf-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
}
.cf-mono {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--rust);
  text-transform: uppercase;
}
.cf-line { flex: 1 1 auto; height: 1px; background: var(--hairline); }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cf-label {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
  position: relative;
}
.cf-k {
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
}
.cf-k small { color: var(--muted); font-weight: 400; letter-spacing: 0.08em; }
.cf-input, .cf-textarea {
  font-family: var(--f-sans); font-size: 16px;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 12px 14px;
  transition: border-color 220ms var(--ease), background 220ms var(--ease);
  resize: vertical;
}
.cf-input:focus, .cf-textarea:focus {
  outline: none;
  border-color: var(--rust);
  background: var(--paper);
  box-shadow: inset 0 0 0 2px rgba(177, 74, 53, 0.08);
}
.cf-textarea { min-height: 140px; line-height: 1.5; }
.cf-counter {
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.10em; color: var(--muted);
  text-align: right;
  margin-top: 4px;
}
.cf-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-actions {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 12px;
}
.cf-status {
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.04em;
}
.cf-status.is-ok { color: var(--slate); }
.cf-status.is-err { color: var(--rust); }

/* aside */
.contact-aside { display: grid; gap: 14px; }
.ca-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color 220ms var(--ease);
}
.ca-card:hover { border-color: var(--rust); }
.ca-mono {
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
}
.ca-val {
  font-family: var(--f-display); font-size: 18px; font-weight: 380;
  color: var(--ink);
  font-variation-settings: 'opsz' 96, 'SOFT' 50;
}
.ca-melbourne {
  display: flex; gap: 8px; align-items: baseline;
  margin-top: 4px;
  font-family: var(--f-mono); font-size: 12.5px;
}
.ca-mel-label { color: var(--ink-mute); letter-spacing: 0.08em; text-transform: uppercase; font-size: 10px; }
.ca-mel-time { color: var(--rust); font-variant-numeric: tabular-nums; }
.ca-confidential { background: rgba(46, 90, 122, 0.04); border-left: 3px solid var(--slate); }
.ca-note {
  font-size: 13.5px; line-height: 1.55;
  color: var(--ink-soft);
}

/* CTA button (also used on 404) */
.cta-btn, .cta-tz {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 22px;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: var(--paper);
  transition: border-color 250ms var(--ease), transform 250ms var(--ease), background 250ms var(--ease);
}
.cta-btn:hover {
  border-color: var(--rust);
  transform: translateY(-1px);
  background: rgba(177, 74, 53, 0.04);
}
.cta-btn-primary {
  border-color: var(--ink); background: var(--ink); color: var(--paper);
}
.cta-btn-primary:hover {
  background: var(--rust); border-color: var(--rust); color: var(--paper);
}
.cta-btn-primary .cta-btn-lbl { color: rgba(250, 247, 240, 0.6); }
.cta-btn-primary .cta-btn-val { color: var(--paper); }
.cta-btn-lbl {
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute);
}
.cta-btn-val {
  font-family: var(--f-display);
  font-size: 18px; font-weight: 380;
  font-variation-settings: 'opsz' 96, 'SOFT' 50;
}
.cta-tz { background: transparent; }
.fof-actions {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px;
}

/* ════════════════════════════════════════════════════════════════════
   MARQUEE
   ════════════════════════════════════════════════════════════════════ */
.marquee {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--paper-2);
  overflow: hidden;
  padding: 20px 0;
  position: relative;
}
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: 90px; pointer-events: none; z-index: 1;
}
.marquee::before { left: 0; background: linear-gradient(to right, var(--paper-2), transparent); }
.marquee::after  { right: 0; background: linear-gradient(to left, var(--paper-2), transparent); }
.marquee-track {
  display: inline-flex; align-items: center; gap: 28px;
  white-space: nowrap;
  animation: marquee 60s linear infinite;
  font-family: var(--f-display); font-weight: 380;
  font-size: clamp(22px, 3vw, 40px);
  color: var(--ink);
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  will-change: transform;
}
.m-item { padding: 0 4px; }
.m-bullet { color: var(--rust); font-size: 0.5em; line-height: 1; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── COLOPHON ────────────────────────────────────────────────────── */
.colophon {
  padding: 24px 0;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute);
  border-top: 1px solid var(--hairline);
}
.colo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 28px;
}

/* ════════════════════════════════════════════════════════════════════
   SECTION REVEAL
   ════════════════════════════════════════════════════════════════════ */
/* DEFAULT VISIBLE — do NOT set opacity:0 by default. If JS reveal
   doesn't run (any error, or no IntersectionObserver firing), these
   elements would otherwise stay invisible forever, making the page
   look "empty". They animate when in-view but visible if not tagged. */
.section .h-display,
.section .section-tag,
.brief-stats,
.brief-tease,
.records,
.matrix-wrap,
.matrix-legend,
.cap-summary,
.lab-grid,
.lab-disclaimer,
.cta-headline,
.contact-grid,
.fof-actions,
.record-education,
.position-grid,
.pipeline,
.now-line,
.hero-meta,
.hero-quicknav,
.hero-lede,
.intro-lede,
.brief-prose p {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.section.in-view .h-display,
.section.in-view .section-tag,
.section.in-view .brief-stats,
.section.in-view .brief-tease,
.section.in-view .records,
.section.in-view .matrix-wrap,
.section.in-view .matrix-legend,
.section.in-view .cap-summary,
.section.in-view .lab-grid,
.section.in-view .lab-disclaimer,
.section.in-view .cta-headline,
.section.in-view .contact-grid,
.section.in-view .fof-actions,
.section.in-view .record-education,
.section.in-view .position-grid,
.section.in-view .pipeline,
.section.in-view .now-line,
.section.in-view .hero-meta,
.section.in-view .hero-quicknav,
.section.in-view .hero-lede,
.section.in-view .intro-lede,
.section.in-view .brief-prose p {
  opacity: 1;
  transform: translateY(0);
}

/* hero items always visible (no JS-gated reveal — content must read on
   first paint even if reveal observer never fires) */
.section-hero .hero-lede,
.section-hero .now-line,
.section-hero .hero-meta,
.section-hero .hero-quicknav,
.section-hero .section-tag {
  opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .topnav-list .tn-mono { display: none; }
  .topnav-link { padding: 10px 10px; }
}

@media (max-width: 960px) {
  .brief-grid,
  .position-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .lab-grid { grid-template-columns: 1fr; }
  .record { grid-template-columns: 1fr; gap: 18px; }
  .record-stamp { justify-self: start; width: 140px; height: 140px; }
  .record-head { position: static; flex-direction: row; flex-wrap: wrap; gap: 10px 16px; }
  .position-card { position: static; }
  .method-track { height: 540vh; }
  .cap-summary { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .topnav { padding: 0 var(--gutter); }
  .nav-toggle { display: flex; }
  .topnav-list {
    position: fixed;
    top: calc(var(--ribbon-h) + var(--nav-h));
    left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px var(--gutter);
    transform: translateY(-12px);
    opacity: 0; pointer-events: none;
    transition: opacity 250ms var(--ease), transform 250ms var(--ease);
    max-height: calc(100vh - var(--ribbon-h) - var(--nav-h));
    overflow-y: auto;
  }
  .topnav-list.is-open {
    opacity: 1; pointer-events: auto;
    transform: translateY(0);
  }
  .topnav-link {
    width: 100%; padding: 14px 8px;
    border-bottom: 1px solid var(--hairline-2);
    border-radius: 0;
  }
  .topnav-link.is-active { background: transparent; }
  .topnav-link:last-child { border-bottom: none; }
  .topnav-list .tn-mono { display: inline-block; min-width: 38px; }
}

@media (max-width: 720px) {
  .ribbon { font-size: 10px; gap: 9px; padding: 0 16px; }
  .ribbon-cell.ribbon-clock { font-size: 10px; }
  .brief-stats { grid-template-columns: 1fr 1fr; }
  .hero-title { font-size: clamp(38px, 12vw, 72px); }
  .hero-lede { font-size: 18px; }
  .matrix tbody th { padding: 12px 12px; font-size: 14.5px; }
  .matrix thead th { padding: 12px 8px; font-size: 10px; }
  .matrix tbody td { padding: 12px 8px; }
  .record-dl { grid-template-columns: 1fr; gap: 4px; }
  .record-dl dt { padding-top: 10px; }
  .record-dl dd { padding-bottom: 10px; }
  .cf-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  :root { --ribbon-h: 60px; }
  .ribbon {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 14px;
    gap: 4px 10px;
    line-height: 1.6;
    justify-content: flex-start;
  }
  .ribbon-sep { display: none; }
  .ribbon-cell { padding-right: 8px; border-right: 1px solid var(--hairline); }
  .ribbon-cell:last-child { border-right: none; }
  .topnav { top: var(--ribbon-h); }
  .scroll-progress { top: var(--ribbon-h); }
  .topnav-list { top: calc(var(--ribbon-h) + var(--nav-h)); }
  .brief-stats { grid-template-columns: 1fr; }
  .now-line { font-size: 11px; }
  .pipe-label { font-size: 9px; }
  .pipe-num { font-size: 8px; }
  .h-display { font-size: clamp(28px, 8vw, 38px); }
}

@media (max-width: 360px) {
  body { font-size: 16px; }
  :root { --gutter: 16px; }
  .lab-card { padding: 22px 22px 0; }
  .lab-illus { margin: 0 -22px; padding: 18px 22px 22px; }
  .fof-actions { flex-direction: column; }
  .fof-actions > * { width: 100%; }
  .brand-name { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .hero-title .word .inner { transform: translateY(0) !important; }
  .marquee-track { animation: none; }
  .now-pulse::after { display: none; }
  .pc-pulse { animation: none; }
  .iiv-fill { width: var(--iiv-final, 72%); transition: none; }
  .stamp-svg { animation: none; }
  .dust { display: none; }
  .section-hero .hero-lede,
  .section-hero .section-tag,
  .section-hero .now-line,
  .section-hero .hero-meta,
  .section-hero .hero-quicknav { opacity: 1; animation: none; }
  .section .h-display,
  .section .section-tag,
  .brief-stats, .brief-tease, .records, .matrix-wrap, .matrix-legend, .cap-summary,
  .lab-grid, .lab-disclaimer, .cta-headline, .contact-grid, .fof-actions,
  .record-education, .position-grid, .pipeline, .now-line, .hero-meta,
  .hero-quicknav, .hero-lede, .intro-lede, .brief-prose p {
    opacity: 1; transform: none;
  }
  .stage-card { opacity: 1; transform: none; position: relative; margin-bottom: 20px; pointer-events: auto; }
  .stage-info { display: flex; flex-direction: column; gap: 24px; min-height: 0; }
  [data-reveal-words] .rw-inner { transform: translateY(0); }
  .cursor-dot, .cursor-ring { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   PRINT
   ════════════════════════════════════════════════════════════════════ */
@media print {
  .ribbon, .topnav, .grain, .spotlight, .marquee, .cursor-dot, .cursor-ring,
  .scroll-progress, .page-overlay, .dust, .warm-gradient { display: none !important; }
  body { background: white; color: black; }
  .section { padding: 24px 0; page-break-inside: avoid; border: none; }
  .page { padding-top: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   ▼  ADDITIONS for 4-page restructure + extra animations
   ════════════════════════════════════════════════════════════════════ */

/* warm gradient drift behind everything */
.warm-gradient {
  position: fixed; inset: -10vh -10vw; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70vw 70vh at 20% 20%, rgba(46, 90, 122, 0.07), transparent 60%),
    radial-gradient(70vw 70vh at 80% 30%, rgba(177, 74, 53, 0.05), transparent 60%),
    radial-gradient(70vw 70vh at 50% 90%, rgba(20, 24, 31, 0.04), transparent 60%);
  animation: gradient-drift 28s ease-in-out infinite alternate;
  filter: blur(20px);
}
@keyframes gradient-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.04); }
}

/* topnav active indicator · sliding pill that tracks the active link.
   Scoped to desktop widths so it doesn't override the mobile @media
   rule that fixes .topnav-list to the top as a slide-down dropdown. */
@media (min-width: 821px) {
  .topnav-list { position: relative; }
}
.topnav-indicator {
  position: absolute;
  background: var(--paper-2);
  border-radius: 3px;
  height: calc(100% - 16px); top: 8px;
  pointer-events: none;
  z-index: -1;
  width: 0;
  opacity: 0;
  transition: transform 380ms var(--ease), width 380ms var(--ease), opacity 280ms var(--ease);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.topnav-indicator.is-on { opacity: 1; }
.topnav-link.is-active { background: transparent; }
.topnav-link.is-active::after { transform: scaleX(1); background: var(--rust); }

@media (max-width: 820px) {
  .topnav-indicator { display: none; }
}

/* page-enter cascade DISABLED — was risking sections stuck at opacity:0
   if any JS error occurred. Sections render fully visible from first
   paint. Re-enable later by uncommenting. */
[data-enter] > .section { opacity: 1; }

/* tilt-on-hover for cards — JS sets --tx --ty --rx --ry */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform 240ms var(--ease);
  will-change: transform;
}
[data-tilt].is-tilting {
  transform: perspective(900px)
             rotateX(var(--tlx, 0deg))
             rotateY(var(--tly, 0deg))
             translateZ(0);
  transition: transform 80ms linear;
}

/* hero text 3D — small skew/tilt of letters towards cursor */
.hero-title[data-tilt-3d] {
  perspective: 1200px;
}
.hero-title[data-tilt-3d] .word {
  transform-style: preserve-3d;
  transition: transform 600ms var(--ease);
}
.hero-title[data-tilt-3d].is-tilting .word {
  transform: rotateY(var(--ht-y, 0deg)) rotateX(var(--ht-x, 0deg));
  transition: transform 220ms var(--ease);
}

/* click ripple */
[data-ripple] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(250, 247, 240, 0.5);
  transform: scale(0);
  animation: ripple 700ms var(--ease) forwards;
  z-index: 0;
}
.cta-btn:not(.cta-btn-primary) .ripple { background: rgba(177, 74, 53, 0.18); }
@keyframes ripple {
  to { transform: scale(3); opacity: 0; }
}

/* corner brackets on stat tiles */
.stat-corner {
  position: absolute;
  width: 16px; height: 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 380ms var(--ease) 600ms;
}
.section.in-view .stat-corner { opacity: 0.55; }
.stat-corner-tl {
  top: 10px; left: 10px;
  border-top: 1px solid var(--rust);
  border-left: 1px solid var(--rust);
}
.stat-corner-br {
  bottom: 10px; right: 10px;
  border-bottom: 1px solid var(--rust);
  border-right: 1px solid var(--rust);
}

/* ──────── HOME · highlights ──────── */
.section-h { margin-bottom: clamp(28px, 4vw, 44px); }
.hl-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.hl-card {
  position: relative;
  padding: 24px 24px 22px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
  transition: border-color 260ms var(--ease), box-shadow 260ms var(--ease);
}
.hl-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--rust);
  transform: scaleY(0); transform-origin: top;
  transition: transform 600ms var(--ease) 200ms;
}
.section.in-view .hl-card::before { transform: scaleY(1); }
.hl-card:hover {
  border-color: rgba(20, 24, 31, 0.22);
  box-shadow: 0 18px 40px -22px rgba(20, 24, 31, 0.18);
}
.hl-id {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.12em;
  color: var(--rust); text-transform: uppercase;
}
.hl-title {
  font-family: var(--f-display); font-weight: 380;
  font-size: 22px; line-height: 1.22;
  color: var(--ink);
  font-variation-settings: 'opsz' 96, 'SOFT' 50;
  margin-bottom: 4px;
}
.hl-blurb {
  font-size: 15px; line-height: 1.55; color: var(--ink-soft);
}
.hl-where {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--ink-mute);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--hairline-2);
  text-transform: uppercase;
}

/* ──────── HOME · jump cards ──────── */
.section-jump { padding-top: clamp(40px, 5vw, 60px); padding-bottom: clamp(80px, 9vw, 130px); }
.jump-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.jump-card {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px 26px 24px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 260ms var(--ease), background 260ms var(--ease), transform 260ms var(--ease);
}
.jump-card:hover {
  border-color: var(--rust);
  background: rgba(177, 74, 53, 0.04);
  transform: translateY(-1px);
}
.jump-card-cta {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.jump-card-cta:hover {
  background: var(--rust);
  border-color: var(--rust);
}
.jump-mono {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--rust); text-transform: uppercase;
}
.jump-card-cta .jump-mono { color: var(--rust-soft); }
.jump-title {
  font-family: var(--f-display); font-weight: 380;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  color: inherit;
}
.jump-card-cta .jump-title { color: var(--paper); }
.jump-blurb {
  font-size: 15px; line-height: 1.5; color: var(--ink-soft);
  margin-bottom: 16px;
}
.jump-card-cta .jump-blurb { color: rgba(250, 247, 240, 0.78); }
.jump-arrow {
  display: inline-flex; width: 32px; height: 32px;
  align-items: center; justify-content: center;
  border: 1px solid var(--rust);
  border-radius: 50%;
  color: var(--rust);
  font-size: 14px;
  position: absolute; right: 22px; bottom: 22px;
  transition: transform 280ms var(--ease), background 280ms var(--ease), color 280ms var(--ease);
}
.jump-card:hover .jump-arrow {
  background: var(--rust);
  color: var(--paper);
  transform: translateX(3px);
}
.jump-card-cta .jump-arrow {
  border-color: var(--paper);
  color: var(--paper);
}
.jump-card-cta:hover .jump-arrow {
  background: var(--paper);
  color: var(--rust);
}

/* ──────── ABOUT · quicknav ──────── */
.about-quicknav {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline-2);
}
.aqn-link {
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink); padding: 6px 4px;
  border-bottom: 1px dashed var(--hairline);
  transition: color 220ms var(--ease), border-color 220ms var(--ease);
}
.aqn-link:hover { color: var(--rust); border-color: var(--rust); }

/* ──────── ABOUT · light position card (no dark band) ──────── */
.section-position-inline {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(64px, 8vw, 110px) 0;
}
.section-position-inline .h-display { color: var(--ink); }
.section-position-inline .h-display em { color: var(--slate); }
.section-position-inline .h-display em.accent-rust { color: var(--rust); }
.position-card-light {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--rust);
  padding: 26px 26px 28px;
  border-radius: 4px;
  position: sticky;
  top: calc(var(--ribbon-h) + var(--nav-h) + 24px);
}
.position-card-light .pc-mono { color: var(--rust); }
.position-card-light .pc-pulse {
  background: var(--rust);
  box-shadow: 0 0 0 4px rgba(177, 74, 53, 0.18);
}
.position-card-light .pc-dl dt { color: var(--ink-mute); }
.position-card-light .pc-dl dd {
  color: var(--ink);
  border-bottom: 1px solid var(--hairline-2);
}
.section-position-inline .position-prose p {
  color: var(--ink-soft);
}
.section-position-inline .position-pills li {
  color: var(--ink-mute);
  border-color: var(--hairline);
}
.section-position-inline .position-pills li:hover {
  color: var(--rust); border-color: var(--rust);
  background: rgba(177, 74, 53, 0.05);
}

/* ──────── ABOUT · method wrapper ──────── */
.section-method-wrap > .container { padding-bottom: clamp(20px, 3vw, 40px); }

/* ──────── CONTACT lede ──────── */
.contact-lede { margin-bottom: clamp(28px, 4vw, 44px); max-width: 64ch; }

/* ──────── EDUCATION list (animated cards) ──────── */
.section-education .ed-list li {
  position: relative;
  padding: 18px 18px 18px 18px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  border-left: 3px solid var(--slate);
  transition: border-color 260ms var(--ease), transform 260ms var(--ease);
}
.section-education .ed-list li:hover {
  border-color: var(--rust);
  border-left-color: var(--rust);
  transform: translateY(-1px);
}

/* ──────── responsive cleanups ──────── */
@media (max-width: 960px) {
  .position-card-light { position: static; }
}

/* tame heavy effects on small screens */
@media (max-width: 720px) {
  .warm-gradient { opacity: 0.6; }
  .dust { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .warm-gradient { animation: none; }
  [data-enter] > .section { animation: none; opacity: 1; transform: none; }
  [data-tilt].is-tilting,
  .hero-title[data-tilt-3d].is-tilting .word { transform: none; }
  .ripple { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   ▼  BIG VISUAL · 3D + giant wordmarks + floating papers
   ════════════════════════════════════════════════════════════════════ */

/* hero 3D canvas — soft backdrop, never competes with text */
.section-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-3d {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 60%; height: 100%;
  z-index: 1;
  opacity: 0.55;
}
/* paper mask: solid paper on the left, fades into the network on the right */
.section-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--paper) 0%,
    var(--paper) 38%,
    rgba(245, 245, 243, 0.7) 52%,
    rgba(245, 245, 243, 0.0) 70%
  );
}
.section-hero > .container { position: relative; z-index: 3; }
.section-hero .hero-title,
.section-hero .hero-lede,
.section-hero .now-line,
.section-hero .hero-meta,
.section-hero .section-tag {
  max-width: 64%;
}
.section-hero .hero-title { max-width: 86%; } /* headline can extend further */
@media (max-width: 960px) {
  .hero-3d { width: 100%; opacity: 0.22; }
  .section-hero::before {
    background: linear-gradient(180deg,
      rgba(245, 245, 243, 0.88) 0%,
      rgba(245, 245, 243, 0.78) 60%,
      rgba(245, 245, 243, 0.92) 100%);
  }
  .section-hero .hero-title,
  .section-hero .hero-lede,
  .section-hero .now-line,
  .section-hero .hero-meta,
  .section-hero .section-tag { max-width: none; }
}

/* floating data tiles in hero (CSS 3D · code/sql/bi) */
.tile-stage {
  position: absolute; inset: 0;
  perspective: 1600px;
  pointer-events: none;
  z-index: 2;
}
.data-tile {
  position: absolute;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 12px 14px 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink);
  box-shadow:
    0 30px 60px -28px rgba(20, 24, 31, 0.22),
    0 8px 18px -8px rgba(20, 24, 31, 0.10);
  transform-style: preserve-3d;
  will-change: transform;
}
.data-tile::before {
  /* fake left-rail of a code editor / dashboard */
  content: ""; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--rust);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.dt-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--hairline-2);
}
.dt-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--slate); flex: 0 0 auto;
}
.dt-dot-hot {
  background: var(--rust);
  box-shadow: 0 0 0 4px rgba(177,74,53,0.18);
  animation: tile-blink 1.6s ease-in-out infinite;
}
@keyframes tile-blink {
  0%, 60%, 100% { opacity: 1; }
  70% { opacity: 0.4; }
}
.dt-body {
  margin: 0;
  font-size: 10.5px; line-height: 1.5;
  color: var(--ink);
  white-space: pre;
  overflow: hidden;
}
.dt-body .kw { color: var(--rust); }
.dt-body .num { color: var(--slate); }
.dt-body .fn  { color: var(--ink); font-weight: 500; }
.dt-id {
  display: block; font-size: 13px; color: var(--ink); margin-bottom: 4px;
}
.dt-fired {
  display: block; color: var(--rust); font-size: 10.5px;
}
.dt-meta {
  display: block; margin-top: 6px;
  font-size: 10px; letter-spacing: 0.08em; color: var(--ink-mute);
  text-transform: uppercase;
}
.dt-bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  align-items: end;
  height: 50px;
  margin-top: 4px;
}
.dt-bars span {
  background: var(--rust);
  height: calc(var(--h) * 100%);
  border-radius: 1px;
  opacity: 0.85;
}
.dt-bars span:nth-child(odd) { background: var(--slate); opacity: 0.65; }

/* All tiles cluster on the right side of the hero — they never
   sit on top of the headline / lede / NOW line on the left. */
.tile-stage { z-index: 4; }   /* above the paper mask */

.dt-sql   { width: 230px; top:  6%;  right: 22%; transform: rotateX(4deg)  rotateY(-12deg) translateZ(40px); animation: dt-drift-1 18s ease-in-out infinite alternate; }
.dt-py    { width: 210px; top: 28%;  right:  4%; transform: rotateX(-2deg) rotateY( 10deg) translateZ(20px); animation: dt-drift-2 22s ease-in-out infinite alternate; }
.dt-bi    { width: 190px; bottom: 12%; right: 18%; transform: rotateX(8deg)  rotateY(-8deg) translateZ(56px); animation: dt-drift-3 26s ease-in-out infinite alternate; }
.dt-rule  { width: 180px; top: 56%;  right:  3%; transform: rotateX(-4deg) rotateY( 8deg) translateZ(28px); animation: dt-drift-4 24s ease-in-out infinite alternate; }
.dt-alert { width: 150px; top: 14%;  right:  2%; transform: rotateX(10deg) rotateY(-18deg) translateZ(72px); animation: dt-drift-5 20s ease-in-out infinite alternate; }

@keyframes dt-drift-1 {
  0%   { transform: rotateX(4deg)  rotateY(-12deg) translateZ(40px) translate3d(0,0,0); }
  100% { transform: rotateX(8deg)  rotateY(-18deg) translateZ(54px) translate3d(-12px,-8px,0); }
}
@keyframes dt-drift-2 {
  0%   { transform: rotateX(-2deg) rotateY(10deg) translateZ(20px) translate3d(0,0,0); }
  100% { transform: rotateX(2deg)  rotateY(16deg) translateZ(34px) translate3d(10px,-6px,0); }
}
@keyframes dt-drift-3 {
  0%   { transform: rotateX(8deg)  rotateY(-8deg) translateZ(56px) translate3d(0,0,0); }
  100% { transform: rotateX(14deg) rotateY(-14deg) translateZ(76px) translate3d(-8px,6px,0); }
}
@keyframes dt-drift-4 {
  0%   { transform: rotateX(-4deg) rotateY(8deg) translateZ(28px) translate3d(0,0,0); }
  100% { transform: rotateX(-10deg) rotateY(14deg) translateZ(40px) translate3d(8px,4px,0); }
}
@keyframes dt-drift-5 {
  0%   { transform: rotateX(10deg) rotateY(-18deg) translateZ(72px) translate3d(0,0,0); }
  100% { transform: rotateX(16deg) rotateY(-26deg) translateZ(92px) translate3d(-6px,-4px,0); }
}

@media (max-width: 1120px) {
  .data-tile { transform: scale(0.85) !important; animation: none !important; }
}
@media (max-width: 960px) {
  .tile-stage { display: none; }
}

/* ──────── hero title (name + role variant) ──────── */
.hero-title-name {
  font-size: clamp(38px, 7.6vw, 108px) !important;
  line-height: 1.05 !important;
}

/* ──────── HOME · stack section ──────── */
.section-stack { padding-top: clamp(56px, 7vw, 100px); padding-bottom: clamp(56px, 7vw, 100px); }
.stack-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.stack-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(18px, 2.6vw, 28px) 0;
  border-bottom: 1px solid var(--hairline-2);
  align-items: baseline;
  transition: background 280ms var(--ease);
}
.stack-row:hover { background: rgba(46, 90, 122, 0.025); }
.sg-label {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--f-mono);
  font-size: 12px; letter-spacing: 0.10em;
  text-transform: uppercase;
}
.sg-num { color: var(--rust); font-weight: 500; }
.sg-name { color: var(--ink); font-weight: 500; }
.sg-items {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
}
.sg-items li {
  font-size: 16px;
  color: var(--ink-soft);
  padding: 6px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--paper);
  transition: color 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease);
}
.sg-items li:hover {
  color: var(--rust); border-color: var(--rust);
  background: rgba(177, 74, 53, 0.04);
}

@media (max-width: 720px) {
  .stack-row { grid-template-columns: 1fr; gap: 12px; }
  .sg-items li { font-size: 14px; padding: 5px 11px; }
}

/* records spark replaces stamp */
.record-spark {
  align-self: center;
  justify-self: end;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: 180px;
}
.record-spark-svg { width: 100%; height: auto; }
.record-spark-cap {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
@media (max-width: 960px) {
  .record-spark { justify-self: start; width: 220px; }
}

/* giant parallax wordmarks — kept lighter so they don't compete with prose */
.section { position: relative; }
.wordmark {
  position: absolute;
  font-family: var(--f-display);
  font-weight: 380;
  font-size: clamp(100px, 20vw, 300px);
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px rgba(20, 24, 31, 0.05);
  text-stroke: 1px rgba(20, 24, 31, 0.05);
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  white-space: nowrap;
  will-change: transform;
  opacity: 0.6;
}
.wordmark-hero {
  bottom: -6%; right: -4%;
  -webkit-text-stroke: 1px rgba(177, 74, 53, 0.08);
  opacity: 0.5;
}
.wordmark-brief {
  bottom: -8%; right: -4%;
  -webkit-text-stroke: 1px rgba(20, 24, 31, 0.04);
  opacity: 0.45;
}
.wordmark-records {
  top: 4%; right: -6%;
  -webkit-text-stroke: 1px rgba(46, 90, 122, 0.06);
  opacity: 0.45;
}
.wordmark-cap {
  bottom: -6%; left: -6%;
  opacity: 0.4;
}
.wordmark-lab {
  top: 0; right: -6%;
  -webkit-text-stroke: 1px rgba(177, 74, 53, 0.08);
  opacity: 0.4;
}
.wordmark-contact {
  bottom: -8%; left: -4%;
  -webkit-text-stroke: 1px rgba(177, 74, 53, 0.08);
  opacity: 0.4;
}

/* lab 3D canvas container */
.lab-illus-3d {
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  padding: 0;
  position: relative;
  overflow: hidden;
}
.graph-canvas-3d {
  width: 100%;
  height: 320px;
  display: block;
}
.lab-illus-3d .graph-cap {
  position: absolute; bottom: 8px; left: 0; right: 0;
}

/* a quiet card-flip on records when hovered */
.record { transform-style: preserve-3d; }

/* tweak for new lighter palette */
.matrix thead th { background: var(--paper-2); }
.brief-stats > .stat-tile:hover { background: var(--paper-2); }
.tease-link:hover { background: var(--paper-2); }
.lab-tags li { background: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .paper-sheet { animation: none; }
  .wordmark { transform: none !important; }
  .hero-3d { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   ▼  RIBBON REDESIGN + section number hide + more 3D ornaments
   ════════════════════════════════════════════════════════════════════ */

/* hide the prefix numbers in section tags */
.tag-num { display: none !important; }

/* override the ribbon flex layout */
.ribbon {
  justify-content: space-between;
  gap: 0;
  padding: 0 var(--gutter);
  font-size: 11px;
}
.ribbon-side {
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap;
  overflow: hidden;
}
.ribbon-side-right { gap: 14px; }
.ribbon-status {
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.16em;
}
.ribbon-pulse {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2aa362;
  position: relative;
  flex: 0 0 auto;
}
.ribbon-pulse::after {
  content: ""; position: absolute; inset: -4px;
  border: 1px solid #2aa362;
  border-radius: 50%;
  animation: ribbon-pulse 2.4s ease-out infinite;
}
@keyframes ribbon-pulse {
  0%   { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(1.9); opacity: 0; }
}
.ribbon-role {
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 11.5px;
  transition: opacity 280ms var(--ease);
  max-width: 50vw;
  overflow: hidden; text-overflow: ellipsis;
}
.ribbon-clock {
  display: inline-flex; align-items: baseline; gap: 6px;
  letter-spacing: 0.10em;
}
.rc-label {
  color: var(--rust);
  font-weight: 500;
  font-size: 10px;
}
.ribbon-clock time {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-size: 11.5px;
}

@media (max-width: 720px) {
  .ribbon { font-size: 10px; gap: 8px; padding: 0 14px; }
  .ribbon-role { display: none; }
  .ribbon-side-right { gap: 10px; }
  .rc-label { font-size: 9px; }
  .ribbon-clock time { font-size: 11px; }
}
@media (max-width: 480px) {
  :root { --ribbon-h: 38px; }
  .ribbon { flex-wrap: nowrap; height: var(--ribbon-h); padding: 0 10px; }
  .ribbon-status { display: none; }
  .ribbon-side-left { gap: 8px; }
}

/* ──────── ornament 3D canvases (corner objects) ──────── */
.ornament-3d {
  position: absolute;
  width: 320px; height: 320px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}
.ornament-3d-tr { top: 60px; right: -40px; }
.ornament-3d-bl { bottom: -40px; left: -40px; }
.section-position-inline > .container,
.section-education > .container { position: relative; z-index: 1; }

@media (max-width: 720px) {
  .ornament-3d { width: 220px; height: 220px; opacity: 0.6; }
  .ornament-3d-tr { right: -80px; top: 20px; }
  .ornament-3d-bl { display: none; }
}

/* ──────── contact 3D backdrop ──────── */
.section-cta { position: relative; overflow: hidden; }
.contact-3d {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}
.section-cta > .container { position: relative; z-index: 2; }
.wordmark-contact {
  bottom: -10%; left: -6%;
  -webkit-text-stroke: 1.5px rgba(177, 74, 53, 0.18);
  z-index: 1;
}

/* ──────── jump-card 3D fan stack on hover ──────── */
.jump-grid:hover .jump-card:not(:hover) {
  transform: translateY(2px) scale(0.985);
  filter: saturate(0.95);
}
.jump-card { transition: transform 360ms var(--ease), filter 360ms var(--ease), border-color 280ms var(--ease), background 280ms var(--ease); }

/* ──────── animated underline below page H1 ──────── */
.page-h1, .hero-title, .cta-headline, .h-display.section-h {
  position: relative;
}
.h-underline {
  position: absolute; left: 0; bottom: -16px;
  height: 4px;
  background: var(--rust);
  width: 0;
  transition: width 1.4s var(--ease) 200ms;
}
.section.in-view .h-underline { width: clamp(80px, 18vw, 220px); }

/* ──────── section divider with animated dashes ──────── */
.section + .section::before {
  content: "";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: clamp(120px, 30vw, 280px);
  height: 1px;
  background: repeating-linear-gradient(to right,
    var(--ink-mute) 0 6px, transparent 6px 12px);
  opacity: 0.35;
}

/* ──────── floor-shadow under hero floating papers ──────── */
.paper-sheet::before {
  content: ""; position: absolute;
  left: 6%; right: 6%; bottom: -22px;
  height: 14px; border-radius: 50%;
  background: rgba(20, 24, 31, 0.18);
  filter: blur(10px);
  z-index: -1;
}

@media (prefers-reduced-motion: reduce) {
  .ribbon-pulse::after { animation: none; }
  .ornament-3d, .contact-3d { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   ▼  3D PIPELINE + records folder backdrop + 404
   ════════════════════════════════════════════════════════════════════ */

/* 3D pipeline replaces SVG */
.pipeline-3d {
  position: relative;
  width: 100%;
  height: clamp(220px, 28vw, 360px);
  margin: 0 auto;
}
.pipeline-3d canvas {
  width: 100%; height: 100%;
  display: block;
  cursor: grab;
}
.pipeline-3d canvas:active { cursor: grabbing; }
.pipeline-hint {
  position: absolute;
  top: 12px; right: 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: rgba(245, 245, 243, 0.7);
  padding: 4px 8px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  pointer-events: none;
  opacity: 0.7;
}
.hero-3d {
  pointer-events: auto;
  cursor: grab;
}
.hero-3d:active { cursor: grabbing; }

/* ── hero HUD bar ─────────────────────────────────────────── */
.hero-hud {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  background: rgba(245, 245, 243, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  z-index: 5;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--ink-mute);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.hud-mono { color: var(--ink); }
#hudHover { color: var(--rust); min-width: 180px; }
.hud-sep { opacity: 0.4; }
@media (max-width: 720px) {
  .hero-hud { font-size: 10px; padding: 6px 10px; gap: 8px; }
  #hudHover { min-width: 120px; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
}

/* ── sticky-note stage ────────────────────────────────────── */
.sticky-stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
}
.sticky-note {
  position: fixed;
  width: min(360px, 86vw);
  pointer-events: auto;
  background: #fffef5;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(46, 90, 122, 0.07) 28px 29px);
  border: 1px solid rgba(20, 24, 31, 0.18);
  border-radius: 4px;
  padding: 22px 22px 18px;
  box-shadow:
    0 30px 60px -20px rgba(20, 24, 31, 0.30),
    0 8px 16px -8px rgba(20, 24, 31, 0.18);
  transform: rotate(var(--rot, 0deg)) translateY(20px) scale(0.92);
  opacity: 0;
  transition: opacity 280ms var(--ease), transform 280ms var(--ease);
  font-family: var(--f-sans);
  isolation: isolate;
}
.sticky-note.is-shown {
  opacity: 1;
  transform: rotate(var(--rot, 0deg)) translateY(0) scale(1);
}
.sticky-note.is-closing {
  opacity: 0;
  transform: rotate(var(--rot, 0deg)) translateY(-12px) scale(0.94);
}
.sticky-note.is-flash {
  animation: sn-flash 380ms var(--ease);
}
@keyframes sn-flash {
  0% { box-shadow: 0 30px 60px -20px rgba(20, 24, 31, 0.30), 0 0 0 0 rgba(177, 74, 53, 0.6); }
  60% { box-shadow: 0 30px 60px -20px rgba(20, 24, 31, 0.30), 0 0 0 12px rgba(177, 74, 53, 0); }
  100% { box-shadow: 0 30px 60px -20px rgba(20, 24, 31, 0.30), 0 0 0 0 rgba(177, 74, 53, 0); }
}
.sticky-note.is-dragging {
  transition: none;
  cursor: grabbing;
  box-shadow:
    0 50px 90px -30px rgba(20, 24, 31, 0.45),
    0 12px 24px -10px rgba(20, 24, 31, 0.22);
}
.sticky-note.tone-hot  { border-color: rgba(177, 74, 53, 0.45); }
.sticky-note.tone-warm { border-color: rgba(199, 154, 59, 0.45); }
.sticky-note.tone-cool { border-color: rgba(46, 90, 122, 0.40); }

.sn-tape {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 76px; height: 18px;
  background: rgba(177, 74, 53, 0.32);
  border: 1px solid rgba(177, 74, 53, 0.45);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  pointer-events: none;
}
.tone-cool .sn-tape { background: rgba(46, 90, 122, 0.30); border-color: rgba(46, 90, 122, 0.45); }
.tone-warm .sn-tape { background: rgba(199, 154, 59, 0.30); border-color: rgba(199, 154, 59, 0.5); }

.sn-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--hairline);
  cursor: grab;
  user-select: none;
}
.sn-head:active { cursor: grabbing; }
.sn-mono {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--rust);
  text-transform: uppercase;
}
.tone-cool .sn-mono { color: var(--slate); }
.tone-warm .sn-mono { color: #a07a1f; }
.sn-id {
  flex: 1 1 auto;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sn-close {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
  flex: 0 0 auto;
}
.sn-close:hover { background: rgba(177,74,53,0.12); color: var(--rust); }

.sn-title {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 8px;
  color: var(--ink);
}
.sn-body {
  font-size: 14px; line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.sn-kv {
  display: grid; grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin-bottom: 12px;
}
.sn-kv dt {
  font-family: var(--f-mono);
  font-size: 10.5px; letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.sn-kv dd {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sn-statrow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.sn-stat {
  background: rgba(46, 90, 122, 0.05);
  border: 1px solid var(--hairline-2);
  padding: 8px 10px;
  border-radius: 3px;
  display: flex; flex-direction: column; gap: 2px;
}
.sn-stat-v {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sn-stat-k {
  font-family: var(--f-mono);
  font-size: 9.5px; letter-spacing: 0.14em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.sn-risk {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 0 10px;
  margin-bottom: 14px;
}
.sn-risk-num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 56px;
  line-height: 1;
  color: var(--rust);
  grid-row: span 2;
  font-variant-numeric: tabular-nums;
}
.sn-risk-cap {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.sn-risk-bar {
  display: block;
  width: 100%; height: 6px;
  background: rgba(20, 24, 31, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.sn-risk-fill {
  display: block; height: 100%; width: 0%;
  border-radius: 999px;
  transition: width 600ms var(--ease);
  animation: sn-fill 600ms var(--ease) forwards;
}
@keyframes sn-fill { from { width: 0%; } }
.sn-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 12px;
}
.sn-tag {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-mute);
  background: rgba(255, 255, 255, 0.4);
}
.sn-tag-hot { color: var(--rust); border-color: var(--rust); background: rgba(177,74,53,0.06); }
.sn-tag-rg  { color: #a07a1f; border-color: #c79a3b; background: rgba(199,154,59,0.10); }
.sn-foot {
  display: flex; justify-content: space-between; gap: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--hairline-2);
  font-size: 9.5px;
  letter-spacing: 0.10em;
}
.sn-time { color: var(--ink-mute); }
.sn-hint { color: var(--muted); }

@media (max-width: 720px) {
  .sticky-note { width: min(320px, 92vw); padding: 18px 18px 14px; }
  .sn-title { font-size: 19px; }
  .sn-risk-num { font-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-note { transition: none; transform: rotate(var(--rot, 0deg)); }
  .sn-risk-fill { animation: none; }
}
.section-hero > .container,
.section-hero .paper-stage,
.section-hero .wordmark {
  pointer-events: none;
}
.section-hero > .container * { pointer-events: auto; }
.pipe-labels-3d {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  align-items: end;
  padding-bottom: 8px;
  pointer-events: none;
}
.pl3-item {
  text-align: center;
  font-family: var(--f-mono);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: color 320ms var(--ease);
  color: var(--ink-mute);
}
.pl3-dot {
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.5;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease), background 320ms var(--ease);
}
.pl3-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pl3-num {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}
.method-track[data-stage] .pl3-item.is-on { color: var(--ink); }
.method-track[data-stage] .pl3-item.is-on .pl3-dot { opacity: 1; transform: scale(1.4); background: var(--rust); }
.method-track[data-stage] .pl3-item.is-current { color: var(--rust); }
.method-track[data-stage] .pl3-item.is-current .pl3-dot { transform: scale(1.8); }
.method-track[data-stage] .pl3-item.is-current .pl3-label { font-weight: 600; }

/* records 3D backdrop */
.section-records-list { position: relative; overflow: hidden; }
.records-3d {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
}
.section-records-list > .container {
  position: relative; z-index: 1;
}

/* 404 broken shape */
.page-404 .contact-3d { opacity: 0.6; }
.section-404 { position: relative; overflow: hidden; min-height: 70vh; }

@media (max-width: 720px) {
  .records-3d { opacity: 0.2; }
  .pipe-labels-3d { padding-bottom: 4px; }
  .pl3-label { font-size: 9px; letter-spacing: 0.10em; }
}

@media (prefers-reduced-motion: reduce) {
  .records-3d { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   ▼ READABILITY PASS · clean single-sans, hide visual noise
   ════════════════════════════════════════════════════════════════════ */

/* base typography — bigger, more contrast, comfortable line-height */
html { font-size: 17px; }
body {
  font-family: var(--f-sans);
  color: var(--ink-soft);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
}
p { color: var(--ink-soft); line-height: 1.65; }

/* every italic <em> stops being a flourish — just a thin emphasis */
em {
  font-style: normal;
  color: var(--rust);
  font-weight: 500;
}

/* display headings — sans, tight, high contrast */
.h-display, .hero-title, .cta-headline, .panel-h1, .page-h1, .h-display.section-h {
  font-family: var(--f-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: var(--ink);
  font-variation-settings: normal !important;  /* override any leftover Fraunces axes */
}
.h-display em,
.hero-title em,
.cta-headline em,
.page-h1 em {
  font-style: normal;
  font-weight: 600;
  color: var(--rust);
  font-variation-settings: normal !important;
}

/* hero specifically — calmer than before */
.hero-title { font-size: clamp(40px, 6.4vw, 80px); }
.hero-title-name { font-size: clamp(38px, 6.2vw, 76px) !important; line-height: 1.06 !important; }
.hero-lede { font-family: var(--f-sans); font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; max-width: 56ch; }

/* underline accent — keep but slimmer */
.h-underline { height: 3px; }

/* prose blocks — comfortable max width */
.brief-prose p,
.intro-lede,
.position-prose p,
.lab-blurb,
.record-dl dd,
.panel-body,
.panel-lede {
  max-width: 64ch;
}

/* tighten section padding for fewer dead-air gaps */
.section { padding: clamp(56px, 8vw, 110px) 0; }

/* AAA mode — every layer enabled. Nothing hidden. */
.paper-stage        { display: none !important; }   /* legacy only */
.grain              { display: none !important; }   /* paper grain off-theme */

/* hero section — undo all the absolute-positioning tricks */
.section-hero {
  padding-top: clamp(80px, 11vw, 140px);
  padding-bottom: clamp(56px, 8vw, 110px);
}
.section-hero::before { display: none !important; }
.section-hero > .container { max-width: 980px; }
.section-hero .hero-title,
.section-hero .hero-lede,
.section-hero .now-line,
.section-hero .hero-meta,
.section-hero .section-tag {
  max-width: none;
}

/* tag rule — keep, but quieter */
.section-tag { color: var(--ink-mute); margin-bottom: clamp(20px, 3vw, 32px); }
.section-tag .tag-num { display: none; }
.section-tag .tag-rule { background: var(--hairline); flex: 0 1 60px; }
.section-tag .tag-rule::after { display: none; }

/* highlights cards — calmer */
.hl-card {
  padding: 22px 22px 20px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: none;
}
.hl-card::before { display: none; }
.hl-card:hover { border-color: var(--ink-mute); transform: none; box-shadow: 0 8px 20px -16px rgba(20,24,31,0.18); }
.hl-title { font-family: var(--f-sans); font-weight: 600; font-size: 19px; }
.hl-id    { color: var(--rust); font-weight: 500; }

/* stat tiles — drop corner brackets, simplify */
.brief-stats { background: transparent; border: 1px solid var(--hairline); }
.brief-stats > .stat-tile { padding: 22px 22px 20px; min-height: auto; }
.stat-num {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  font-variation-settings: normal !important;
}
.stat-corner, .stat-spark { display: none !important; }

/* stack section — already clean, just polish */
.stack-row { padding: 18px 0; }
.sg-items li {
  background: var(--paper);
  border-color: var(--hairline);
  font-size: 14px;
  padding: 5px 12px;
}

/* jump cards — calmer */
.jump-card {
  padding: 24px 24px 22px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  box-shadow: none;
}
.jump-card:hover { border-color: var(--ink-mute); transform: none; box-shadow: 0 8px 20px -16px rgba(20,24,31,0.18); }
.jump-card-cta { background: var(--ink); border-color: var(--ink); }
.jump-card-cta:hover { background: var(--rust); border-color: var(--rust); }
.jump-title {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.015em;
  font-variation-settings: normal !important;
}
.jump-grid:hover .jump-card:not(:hover) { transform: none; filter: none; }

/* records — calmer */
.record-title { font-family: var(--f-sans); font-weight: 600; font-size: clamp(20px, 2.4vw, 26px); font-variation-settings: normal !important; }
.record-stamp, .record-spark { display: none !important; }
.record { grid-template-columns: 200px 1fr; }
.record::before { display: none; }
.record:hover { background: transparent; }
@media (max-width: 960px) { .record { grid-template-columns: 1fr; } }

/* lab cards — calmer, illustration optional */
.lab-name { font-family: var(--f-sans); font-weight: 600; font-size: clamp(20px, 2.2vw, 26px); font-variation-settings: normal !important; }
.lab-card:hover { transform: none; box-shadow: 0 8px 20px -16px rgba(20,24,31,0.18); }
.lab-illus { display: none; }   /* hide bespoke illustrations entirely for v1 readable */

/* method labels under 3D pipeline — keep but no flair */
.pipeline-3d, .pipeline-hint, .pipe-labels-3d { display: none !important; }
.method-track { height: auto !important; }
.method-stage-pin { position: static; height: auto; padding: 0; }
.stage-info { position: static; min-height: 0; display: flex; flex-direction: column; gap: 28px; margin: 0; }
.stage-card { position: static; opacity: 1 !important; transform: none !important; pointer-events: auto !important; max-width: 64ch; text-align: left; }
.stage-name { font-family: var(--f-sans); font-weight: 600; font-size: clamp(20px, 2.2vw, 24px); font-variation-settings: normal !important; }
.stage-desc { max-width: 64ch; }
.stage-meta { justify-content: flex-start; }
.stage-progress { display: none; }

/* position card on /about — quieter */
.position-card-light { box-shadow: none; }
.pc-stamp { display: none !important; }

/* headlines on hero — keep word-rise stagger animation, just sized
   for the new sans face (overflow-hidden on .word, slide-up on .inner) */
.hero-title .word     { display: inline-block; overflow: hidden; padding: 0 0.04em; vertical-align: bottom; }
.hero-title .word .inner { display: inline-block; transform: translateY(110%); transition: transform 800ms cubic-bezier(.16,1,.3,1); }
.hero-title.rise .word .inner { transform: translateY(0); }

/* topnav — single sans, no heavy decoration */
.topnav-brand .brand-name { color: var(--ink-mute); }
.brand-mark { font-family: var(--f-sans); font-weight: 700; }

/* ribbon — keep slim, drop role rotator italic feel */
.ribbon-role { font-style: normal; }

/* now line — keep, calmer */
.now-line { background: var(--paper); }

/* cta section */
.cta-headline { font-family: var(--f-sans); font-weight: 700; font-size: clamp(36px, 5.4vw, 60px); font-variation-settings: normal !important; }
.cta-headline em { font-style: normal; font-weight: 700; }

/* contact form — existing styles fine, just sans display */
.cf-mono { font-family: var(--f-mono); }

/* tease links — keep but cleaner */
.tease-link { font-family: var(--f-sans); font-weight: 500; font-style: normal; font-variation-settings: normal !important; }
.tease-name { font-style: normal; }

/* 404 */
.fourohfour-title { font-family: var(--f-sans); font-weight: 700; font-variation-settings: normal !important; }

/* education list */
.ed-list strong { font-family: var(--f-sans); font-weight: 600; font-variation-settings: normal !important; }

/* matrix — already clean enough; just ensure cells are readable */
.matrix tbody th { font-weight: 500; font-size: 15.5px; }
.matrix tbody td { font-size: 15.5px; }

/* ribbon clock numbers stay tabular */
.ribbon-clock time { font-variant-numeric: tabular-nums; }

/* increase tap targets / accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--slate);
  outline-offset: 2px;
  border-radius: 3px;
  box-shadow: var(--glow-cyan);
}

/* ════════════════════════════════════════════════════════════════════
   ▼ AAA GAME UI THEME · cyberpunk tactical
      dark void · cyan + red HUD accents · scanlines · grid · glow
   ════════════════════════════════════════════════════════════════════ */

/* ── base — deep black, light text on dark ───────────────────── */
body {
  background: var(--paper);
  color: var(--ink-soft);
}
::selection { background: var(--slate); color: var(--paper); }

/* atmospheric body underlay: animated grid + radial vignette */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(0,229,255,0.06), transparent 70%),
    radial-gradient(60% 40% at 50% 110%, rgba(255,56,89,0.05), transparent 60%),
    linear-gradient(180deg, transparent 0, rgba(0,0,0,0.4) 100%),
    repeating-linear-gradient(90deg, transparent 0 80px, rgba(0,229,255,0.03) 80px 81px),
    repeating-linear-gradient(0deg,  transparent 0 80px, rgba(0,229,255,0.03) 80px 81px),
    var(--paper);
  background-size: auto, auto, auto, 80px 80px, 80px 80px, auto;
  animation: grid-drift 60s linear infinite;
}
@keyframes grid-drift {
  to { background-position: 0 0, 0 0, 0 0, 80px 80px, 80px 80px, 0 0; }
}

/* CRT scanlines overlay (very faint) */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 98;
  background: repeating-linear-gradient(0deg,
    transparent 0,
    transparent 2px,
    rgba(0, 229, 255, 0.025) 3px,
    rgba(0, 229, 255, 0.025) 3px);
  mix-blend-mode: lighten;
}

/* ── ribbon — dark HUD bar ───────────────────────────────────── */
.ribbon {
  background: rgba(13, 18, 25, 0.75);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-mute);
}
.ribbon-cell { color: var(--ink-mute); }
.ribbon-pulse { background: var(--green); box-shadow: 0 0 12px rgba(76, 255, 136, 0.7); }
.ribbon-pulse::after { border-color: var(--green); }
.ribbon-status { color: var(--green); }
.ribbon-role { color: var(--ink-soft); }
.ribbon-clock time { color: var(--slate); font-variant-numeric: tabular-nums; text-shadow: 0 0 8px rgba(0,229,255,0.5); }
.rc-label { color: var(--rust); }
.ribbon-file { color: var(--rust); text-shadow: 0 0 10px rgba(255,56,89,0.5); }

/* ── topnav ─────────────────────────────────────────────────── */
.topnav {
  background: rgba(5, 7, 11, 0.7);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--hairline);
}
.topnav-brand .brand-name { color: var(--ink-mute); }
.brand-mark { color: var(--ink); font-family: var(--f-mono); }
.brand-dot { color: var(--slate); text-shadow: var(--glow-cyan); }
.topnav-link { color: var(--ink-soft); }
.topnav-link:hover .tn-label { color: var(--slate); text-shadow: 0 0 10px rgba(0,229,255,0.5); }
.topnav-link.is-active { background: rgba(0, 229, 255, 0.08); border: 1px solid var(--hairline); }
.topnav-link.is-active .tn-label { color: var(--slate); text-shadow: var(--glow-cyan); }
.topnav-link.is-active::after { background: var(--slate); }
.tn-mono { color: var(--ink-mute); }
.topnav-indicator { background: rgba(0, 229, 255, 0.10); box-shadow: inset 0 0 0 1px var(--hairline); }

/* ── typography — reset for dark + glow on accents ──────────── */
.h-display, .hero-title, .cta-headline, .panel-h1, .page-h1, .h-display.section-h {
  color: var(--ink);
}
.h-display em, .hero-title em, .cta-headline em, .page-h1 em {
  color: var(--slate);
  text-shadow: 0 0 28px rgba(0, 229, 255, 0.45);
  font-weight: 600;
}
.accent-rust { color: var(--rust) !important; text-shadow: 0 0 22px rgba(255, 56, 89, 0.5); }

p, .hero-lede, .intro-lede, .panel-body, .panel-lede,
.brief-prose p, .position-prose p, .lab-blurb,
.record-dl dd, .record-org { color: var(--ink-soft); }

em { color: var(--slate); }

/* mono labels are now cyan-tinted */
.tag-num { color: var(--slate); text-shadow: 0 0 8px rgba(0,229,255,0.4); }
.tag-lbl { color: var(--ink); }
.tag-name { color: var(--ink-mute); }
.tag-rule { background: var(--hairline); }

/* ── section tag mini chrome (corner brackets) ──────────────── */
.section-tag { letter-spacing: 0.14em; }

/* ── now line ───────────────────────────────────────────────── */
.now-line {
  background: rgba(255, 56, 89, 0.06);
  border-color: var(--hairline);
  border-left-color: var(--rust);
  color: var(--ink-mute);
}
.now-pulse { background: var(--rust); box-shadow: 0 0 12px rgba(255, 56, 89, 0.7); }
.now-pulse::after { border-color: var(--rust); }
.now-label { color: var(--rust); }
.now-body { color: var(--ink); }

/* ── HUD corner brackets on cards (the AAA UI signature) ────── */
.hl-card, .jump-card, .lab-card, .record, .ca-card, .position-card,
.panel, .matrix-wrap, .stack-row, .stat-tile, .ed-list li, .contact-form,
.cap-meter {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  position: relative;
}
.hl-card::before, .jump-card::before, .lab-card::before,
.ca-card::before, .panel::before {
  content: ""; position: absolute;
  top: -1px; left: -1px;
  width: 14px; height: 14px;
  border-top: 1px solid var(--slate);
  border-left: 1px solid var(--slate);
  pointer-events: none;
}
.hl-card::after, .jump-card::after, .lab-card::after,
.ca-card::after, .panel::after {
  content: ""; position: absolute;
  bottom: -1px; right: -1px;
  width: 14px; height: 14px;
  border-bottom: 1px solid var(--slate);
  border-right: 1px solid var(--slate);
  pointer-events: none;
}
.jump-card-cta { background: rgba(255, 56, 89, 0.10); }
.jump-card-cta::before, .jump-card-cta::after { border-color: var(--rust); }

/* surface hover — cyan glow */
.hl-card:hover, .lab-card:hover, .jump-card:hover,
.ca-card:hover, .stat-tile:hover {
  border-color: var(--slate);
  box-shadow: 0 0 0 1px var(--slate), 0 14px 40px -16px rgba(0, 229, 255, 0.35);
}
.jump-card-cta:hover { border-color: var(--rust); box-shadow: 0 0 0 1px var(--rust), 0 14px 40px -16px rgba(255, 56, 89, 0.4); }

/* highlight card text */
.hl-id, .cc-mono, .lab-mono, .pc-mono, .cf-mono, .panel-mono, .lab-status.is-build,
.record-id, .lr-id, .rr-id, .lab-status.is-build {
  color: var(--rust); text-shadow: 0 0 8px rgba(255, 56, 89, 0.3);
}
.hl-title, .lab-name, .record-title, .panel-h2, .panel-h1, .jump-title,
.brand-name { color: var(--ink); }
.hl-blurb, .lab-blurb, .jump-blurb { color: var(--ink-soft); }
.hl-where, .cc-mtime { color: var(--ink-mute); }
.cc-shape, .lab-tags li, .position-pills li, .sg-items li { background: rgba(0, 229, 255, 0.05); border-color: var(--hairline); color: var(--ink-mute); }
.lab-tags li:hover, .position-pills li:hover, .sg-items li:hover {
  color: var(--slate); border-color: var(--slate); background: rgba(0, 229, 255, 0.10);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
}

/* lab status pills */
.lab-status.is-build  { color: var(--rust); border-color: var(--rust); background: rgba(255, 56, 89, 0.10); }
.lab-status.is-plan   { color: var(--slate); border-color: var(--slate); background: rgba(0, 229, 255, 0.08); }
.lab-status.is-sketch { color: var(--gold); border-color: var(--gold); background: rgba(255, 210, 92, 0.10); }
.record-status.is-live { color: var(--rust); border-color: var(--rust); background: rgba(255, 56, 89, 0.10); animation: live-pulse 2s ease-in-out infinite; }
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,56,89, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(255,56,89, 0); }
}

/* stat tiles */
.brief-stats { background: transparent; border: 1px solid var(--hairline); }
.brief-stats > .stat-tile { background: var(--paper-2); }
.brief-stats > .stat-tile:hover { background: var(--paper-3); }
.stat-num { color: var(--ink); text-shadow: 0 0 24px rgba(0, 229, 255, 0.18); }
.stat-suffix { color: var(--rust); text-shadow: 0 0 8px rgba(255,56,89,0.4); }
.stat-label { color: var(--ink-mute); }

/* matrix */
.matrix-wrap { background: var(--paper-2); border-color: var(--hairline); }
.matrix thead th { background: var(--paper-3); color: var(--ink-mute); border-bottom-color: var(--hairline); }
.matrix tbody th { color: var(--ink); border-bottom-color: var(--hairline-2); }
.matrix tbody td { border-color: var(--hairline-2); }
.matrix tbody tr:hover { background: rgba(0, 229, 255, 0.05); }
.dot { border-color: var(--hairline); }
.dot.dot-on, .cap-row td .dot.is-on {
  background: var(--rust); border-color: var(--rust);
  box-shadow: 0 0 12px rgba(255, 56, 89, 0.6);
}
.cap-row td .dot.is-off { border-color: var(--hairline); opacity: 0.4; }

.cap-meter { background: var(--paper-2); border-color: var(--hairline); }
.cm-bar { background: rgba(0, 229, 255, 0.12); }
.cm-fill { background: var(--rust); box-shadow: 0 0 8px rgba(255,56,89,0.5); }
.cm-num { color: var(--ink); }
.cm-of { color: var(--ink-mute); }
.cm-label { color: var(--ink-mute); }

/* records */
.records { border-color: var(--hairline); }
.record { border-bottom-color: var(--hairline); }
.record:hover { background: rgba(0, 229, 255, 0.03); }
.record::before { background: var(--rust); }
.rr-org, .record-org { color: var(--slate); text-shadow: 0 0 8px rgba(0,229,255,0.3); }

/* education */
.section-education .ed-list li { background: var(--paper-2); border-color: var(--hairline); border-left-color: var(--slate); color: var(--ink-soft); }
.section-education .ed-list li:hover { border-color: var(--slate); border-left-color: var(--rust); box-shadow: var(--glow-cyan); }
.ed-list strong { color: var(--ink); }
.ed-inst { color: var(--ink-mute); }
.ed-period { color: var(--slate); }

/* CTA buttons / submit */
.cta-btn, .cf-submit, .cta-tz {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  color: var(--ink);
}
.cta-btn:hover { border-color: var(--slate); box-shadow: 0 0 0 1px var(--slate), var(--glow-cyan); background: rgba(0, 229, 255, 0.08); }
.cta-btn-primary, .cf-submit {
  background: var(--rust);
  border-color: var(--rust);
  color: var(--paper);
  text-shadow: none;
  box-shadow: 0 0 0 1px var(--rust), 0 0 20px rgba(255, 56, 89, 0.3);
}
.cta-btn-primary:hover, .cf-submit:hover {
  background: var(--rust-soft);
  border-color: var(--rust-soft);
  box-shadow: 0 0 0 1px var(--rust-soft), 0 0 30px rgba(255, 56, 89, 0.5);
}
.cta-btn-lbl { color: var(--ink-mute); }
.cta-btn-val { color: var(--ink); }
.cta-btn-primary .cta-btn-lbl { color: rgba(5,7,11,0.6); }
.cta-btn-primary .cta-btn-val { color: var(--paper); }

/* contact form inputs */
.cf-input, .cf-textarea, .cf-label input, .cf-label textarea {
  background: var(--paper-2);
  border-color: var(--hairline);
  color: var(--ink);
}
.cf-input:focus, .cf-textarea:focus, .cf-label input:focus, .cf-label textarea:focus {
  border-color: var(--slate);
  box-shadow: 0 0 0 1px var(--slate), 0 0 20px rgba(0, 229, 255, 0.2);
  background: var(--paper-3);
}
.cf-k { color: var(--ink-mute); }
.cf-status.is-ok { color: var(--green); text-shadow: 0 0 10px rgba(76,255,136,0.4); }
.cf-status.is-err { color: var(--rust); text-shadow: 0 0 10px rgba(255,56,89,0.4); }

/* ribbon clock pulse, link styling */
.hero-link, .panel-link {
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}
.hero-link:hover, .panel-link:hover {
  color: var(--slate);
  border-color: var(--slate);
  text-shadow: 0 0 10px rgba(0,229,255,0.4);
}

/* tease links */
.tease-link {
  background: var(--paper-2);
  border-color: var(--hairline);
  color: var(--ink);
}
.tease-link:hover { background: rgba(0,229,255,0.06); border-color: var(--slate); box-shadow: var(--glow-cyan); }
.tease-arrow { border-color: var(--slate); color: var(--slate); }
.tease-link:hover .tease-arrow { background: var(--slate); color: var(--paper); box-shadow: var(--glow-cyan); }
.tease-mono { color: var(--ink-mute); }

/* about quicknav */
.aqn-link { color: var(--ink); border-bottom-color: var(--hairline); }
.aqn-link:hover { color: var(--slate); border-color: var(--slate); }

/* method labels under 3D pipeline (when re-enabled) */
.pipe-labels-3d { display: grid !important; }
.pl3-item { color: var(--ink-mute); }
.method-track[data-stage] .pl3-item.is-on { color: var(--ink); }
.method-track[data-stage] .pl3-item.is-current { color: var(--rust); text-shadow: var(--glow-red); }
.pl3-dot { background: currentColor; }

/* marquee — neon strip */
.marquee { background: var(--paper-2); border-color: var(--hairline); }
.marquee::before { background: linear-gradient(to right, var(--paper), transparent); }
.marquee::after  { background: linear-gradient(to left, var(--paper), transparent); }
.marquee-track { color: var(--ink); }
.m-bullet { color: var(--rust); text-shadow: 0 0 6px rgba(255,56,89,0.5); }

/* colophon */
.colophon { color: var(--ink-mute); border-top-color: var(--hairline); }

/* dust + warm-gradient toned for dark bg */
.dust::before, .dust::after {
  background-image:
    radial-gradient(1px 1px at 20% 20%, rgba(0,229,255,0.5), transparent 50%),
    radial-gradient(1.5px 1.5px at 80% 30%, rgba(0,229,255,0.4), transparent 50%),
    radial-gradient(1px 1px at 40% 60%, rgba(255,56,89,0.4), transparent 50%),
    radial-gradient(2px 2px at 65% 75%, rgba(0,229,255,0.3), transparent 50%),
    radial-gradient(1px 1px at 90% 10%, rgba(0,229,255,0.4), transparent 50%),
    radial-gradient(1.5px 1.5px at 10% 80%, rgba(255,56,89,0.3), transparent 50%);
}
.warm-gradient {
  background:
    radial-gradient(70vw 70vh at 20% 20%, rgba(0,229,255,0.10), transparent 60%),
    radial-gradient(70vw 70vh at 80% 30%, rgba(255,56,89,0.08), transparent 60%),
    radial-gradient(70vw 70vh at 50% 90%, rgba(0,229,255,0.06), transparent 60%);
}

/* cursor dot/ring — neon */
.cursor-dot { background: var(--slate); box-shadow: var(--glow-cyan); mix-blend-mode: normal; }
.cursor-ring { border-color: var(--slate); }
body.is-hovering-link .cursor-dot { background: var(--rust); box-shadow: var(--glow-red); }
body.is-hovering-link .cursor-ring { border-color: var(--rust); background: rgba(255,56,89,0.04); }

/* scroll progress bar — neon */
.scroll-progress { background: rgba(0,229,255,0.05); }
.scroll-progress-bar { background: linear-gradient(to right, var(--slate), var(--rust)); box-shadow: 0 0 8px var(--slate); }

/* hero quicknav */
.hqn-link { color: var(--ink); }
.hqn-link:hover { color: var(--slate); text-shadow: var(--glow-cyan); }
.hqn-cta { color: var(--rust); }
.hqn-cta:hover { color: var(--rust-soft); text-shadow: var(--glow-red); }

/* page-overlay — game-style level-load screen */
.page-overlay {
  position: fixed; inset: 0; z-index: 220;
  pointer-events: none;
  visibility: hidden;
  background: transparent;
  display: block;
}
.page-overlay > * { pointer-events: none; }
.po-fill {
  position: absolute; inset: 0;
  background: var(--paper);
  transform: scaleY(0);
  transform-origin: bottom;
}
.po-stripe { display: none; }   /* legacy stripes off */

/* corner brackets — drawn in from each corner */
.po-bracket {
  position: absolute;
  width: 80px; height: 80px;
  pointer-events: none;
  opacity: 0;
}
.po-bracket-tl { top: 32px; left: 32px;   border-top: 2px solid var(--slate); border-left: 2px solid var(--slate); }
.po-bracket-tr { top: 32px; right: 32px;  border-top: 2px solid var(--slate); border-right: 2px solid var(--slate); }
.po-bracket-bl { bottom: 32px; left: 32px;   border-bottom: 2px solid var(--rust); border-left: 2px solid var(--rust); }
.po-bracket-br { bottom: 32px; right: 32px;  border-bottom: 2px solid var(--rust); border-right: 2px solid var(--rust); }

/* scan line sweeping vertically while loading */
.po-scan {
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--slate), transparent);
  box-shadow: 0 0 24px var(--slate), 0 0 60px rgba(0, 229, 255, 0.4);
  opacity: 0;
}

.po-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  color: var(--ink);
  font-family: var(--f-mono);
  opacity: 0;
}
.po-status {
  font-size: 11px;
  letter-spacing: 0.30em;
  color: var(--slate);
  text-shadow: var(--glow-cyan);
  text-transform: uppercase;
}
.po-target {
  font-family: var(--f-sans);
  font-size: clamp(48px, 8vw, 110px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  text-transform: uppercase;
  text-shadow: 0 0 28px rgba(0, 229, 255, 0.4);
  position: relative;
}
.po-target::before, .po-target::after {
  content: attr(data-po-target);
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
}
.page-overlay.enter .po-target::before {
  color: var(--rust);
  transform: translate(-2px, 1px);
  opacity: 0.7;
  animation: po-glitch-r 0.6s steps(2, end) infinite;
}
.page-overlay.enter .po-target::after {
  color: var(--slate);
  transform: translate(2px, -1px);
  opacity: 0.7;
  animation: po-glitch-c 0.7s steps(2, end) infinite;
}
@keyframes po-glitch-r {
  0%, 100% { transform: translate(-2px, 1px); }
  20% { transform: translate(-3px, -1px); }
  40% { transform: translate(0, 2px); }
  60% { transform: translate(-2px, -2px); }
  80% { transform: translate(1px, 1px); }
}
@keyframes po-glitch-c {
  0%, 100% { transform: translate(2px, -1px); }
  20% { transform: translate(3px, 1px); }
  40% { transform: translate(0, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(-1px, -1px); }
}

.po-bar {
  width: clamp(220px, 30vw, 360px);
  height: 2px;
  background: rgba(0, 229, 255, 0.12);
  position: relative;
  overflow: hidden;
}
.po-bar-fill {
  position: absolute; inset: 0;
  background: var(--slate);
  box-shadow: 0 0 14px var(--slate), 0 0 28px var(--slate);
  transform: scaleX(0);
  transform-origin: left;
}

.po-meta {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.po-sep { opacity: 0.45; }
.po-mono { color: var(--ink); }
.po-status { color: var(--slate); }
.po-glitch { color: var(--rust); }

/* ENTER: drop the dark fill from top, draw brackets, glitch text in */
.page-overlay.enter { visibility: visible; pointer-events: auto; }
.page-overlay.enter .po-fill {
  animation: po-fill-in 360ms cubic-bezier(.7, 0, .3, 1) forwards;
}
.page-overlay.enter .po-bracket {
  animation: po-bracket-in 380ms 240ms cubic-bezier(.16, 1, .3, 1) forwards;
}
.page-overlay.enter .po-scan {
  animation: po-scan-sweep 600ms 280ms ease-in-out forwards;
}
.page-overlay.enter .po-content {
  animation: po-content-in 320ms 320ms ease forwards;
}
.page-overlay.enter .po-bar-fill {
  animation: po-bar-fill 480ms 320ms cubic-bezier(.4, 0, .2, 1) forwards;
}

/* EXIT: glitch out, brackets retract, fill rises off-screen */
.page-overlay.exit { visibility: visible; pointer-events: none; }
.page-overlay.exit .po-fill {
  transform: scaleY(1);
  animation: po-fill-out 520ms 100ms cubic-bezier(.16, 1, .3, 1) forwards;
  transform-origin: top;
}
.page-overlay.exit .po-bracket {
  opacity: 1;
  animation: po-bracket-out 280ms ease forwards;
}
.page-overlay.exit .po-content {
  opacity: 1;
  animation: po-content-out 260ms ease forwards;
}

@keyframes po-fill-in {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes po-fill-out {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0); }
}
@keyframes po-bracket-in {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes po-bracket-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes po-scan-sweep {
  0%   { opacity: 0; top: 10%; }
  20%  { opacity: 1; }
  100% { opacity: 0; top: 90%; }
}
@keyframes po-content-in {
  from { opacity: 0; transform: translateY(8px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes po-content-out {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(-6px); filter: blur(2px); }
}
@keyframes po-bar-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (max-width: 720px) {
  .po-bracket { width: 50px; height: 50px; }
  .po-bracket-tl, .po-bracket-tr { top: 20px; }
  .po-bracket-bl, .po-bracket-br { bottom: 20px; }
  .po-bracket-tl, .po-bracket-bl { left: 20px; }
  .po-bracket-tr, .po-bracket-br { right: 20px; }
}

/* about/lab/contact backdrops keep going (3D scenes are fine) */
.records-3d, .contact-3d, .ornament-3d { color: var(--slate); }

/* ── HUD STATUS BAR (bottom) ────────────────────────────────── */
.hud-statusbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 25;
  display: flex; align-items: center; gap: 14px;
  padding: 6px 16px;
  background: rgba(13, 18, 25, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--hairline);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  color: var(--ink-mute);
  text-transform: uppercase;
  pointer-events: none;
}
.hud-statusbar > * { pointer-events: auto; }
.hud-cell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hud-cell strong { color: var(--ink); font-weight: 500; }
.hud-cell.hud-cyan { color: var(--slate); text-shadow: var(--glow-cyan); }
.hud-cell.hud-red  { color: var(--rust); text-shadow: var(--glow-red); }
.hud-cell-spacer { flex: 1 1 auto; }
.hud-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: hud-pulse 2s ease-in-out infinite;
}
@keyframes hud-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (max-width: 720px) {
  .hud-statusbar { font-size: 9px; padding: 4px 10px; gap: 8px; }
  .hud-cell.hud-hide-mobile { display: none; }
}

/* ── BOOT/LOADING SCREEN ────────────────────────────────────── */
.boot-screen {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 24px;
  font-family: var(--f-mono);
  color: var(--ink);
  transition: opacity 600ms ease;
}
.boot-screen.is-out { opacity: 0; pointer-events: none; }
.boot-mark {
  font-size: 40px; font-weight: 700;
  letter-spacing: -0.02em;
  display: inline-flex; gap: 1px;
}
.boot-mark .b-dot { color: var(--slate); text-shadow: var(--glow-cyan); transform: translateY(-3px); display: inline-block; }
.boot-status {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute);
}
.boot-status .bs-line { display: block; min-width: 280px; text-align: center; }
.boot-status .bs-line.is-done { color: var(--green); }
.boot-status .bs-line.is-active { color: var(--slate); text-shadow: var(--glow-cyan); }
.boot-bar {
  width: 280px; height: 2px;
  background: rgba(0, 229, 255, 0.1);
  overflow: hidden;
  position: relative;
}
.boot-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: var(--slate);
  box-shadow: 0 0 8px var(--slate);
  transition: width 200ms linear;
}

/* ── data tiles · re-themed for the dark HUD ────────────────── */
.data-tile {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  color: var(--ink);
  box-shadow:
    0 30px 60px -28px rgba(0, 0, 0, 0.7),
    0 0 0 1px var(--hairline),
    0 0 30px rgba(0, 229, 255, 0.08);
  position: relative;
}
.data-tile::before {
  background: var(--slate);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
}
.data-tile::after {
  content: ""; position: absolute;
  top: 4px; right: 8px;
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--green);
  animation: hud-pulse 2s ease-in-out infinite;
}
.dt-head {
  color: var(--slate);
  border-bottom-color: var(--hairline);
}
.dt-dot { background: var(--slate); box-shadow: var(--glow-cyan); }
.dt-dot-hot { background: var(--rust); box-shadow: var(--glow-red); }
.dt-body { color: var(--ink); }
.dt-body .kw { color: var(--rust); text-shadow: 0 0 8px rgba(255, 56, 89, 0.4); }
.dt-body .num { color: var(--slate); text-shadow: 0 0 8px rgba(0, 229, 255, 0.4); }
.dt-body .fn  { color: var(--green); }
.dt-id { color: var(--ink); }
.dt-fired { color: var(--rust); text-shadow: var(--glow-red); }
.dt-meta { color: var(--ink-mute); }
.dt-bars span { background: var(--rust); box-shadow: 0 0 6px rgba(255, 56, 89, 0.4); }
.dt-bars span:nth-child(odd) { background: var(--slate); box-shadow: 0 0 6px rgba(0, 229, 255, 0.4); }

/* ── sticky-notes · dark HUD case files ─────────────────────── */
.sticky-note {
  background: var(--paper-2);
  background-image: none;
  border: 1px solid var(--hairline);
  color: var(--ink);
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.8),
    0 0 0 1px var(--hairline),
    0 0 40px rgba(0, 229, 255, 0.10);
}
.sticky-note.tone-hot  { border-color: var(--rust); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.8), 0 0 0 1px var(--rust), 0 0 40px rgba(255, 56, 89, 0.20); }
.sticky-note.tone-warm { border-color: var(--gold); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.8), 0 0 0 1px var(--gold), 0 0 40px rgba(255, 210, 92, 0.20); }
.sticky-note.tone-cool { border-color: var(--slate); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.8), 0 0 0 1px var(--slate), 0 0 40px rgba(0, 229, 255, 0.20); }
.sn-tape { background: rgba(0, 229, 255, 0.30); border-color: var(--slate); box-shadow: 0 0 12px rgba(0,229,255,0.5); }
.tone-cool .sn-tape { background: rgba(0, 229, 255, 0.30); border-color: var(--slate); }
.tone-warm .sn-tape { background: rgba(255, 210, 92, 0.30); border-color: var(--gold); box-shadow: 0 0 12px rgba(255,210,92,0.5); }
.tone-hot .sn-tape  { background: rgba(255, 56, 89, 0.30);  border-color: var(--rust); box-shadow: 0 0 12px rgba(255,56,89,0.5); }
.sn-mono { color: var(--slate); text-shadow: var(--glow-cyan); }
.tone-hot .sn-mono { color: var(--rust); text-shadow: var(--glow-red); }
.tone-warm .sn-mono { color: var(--gold); }
.sn-id { color: var(--ink); }
.sn-close { color: var(--ink-mute); }
.sn-close:hover { color: var(--rust); background: rgba(255,56,89,0.15); }
.sn-title { color: var(--ink); font-style: normal; font-family: var(--f-sans); font-weight: 600; }
.sn-body { color: var(--ink-soft); }
.sn-kv dt { color: var(--ink-mute); }
.sn-kv dd { color: var(--ink); }
.sn-stat { background: rgba(0, 229, 255, 0.05); border-color: var(--hairline); }
.sn-stat-v { color: var(--slate); font-style: normal; text-shadow: var(--glow-cyan); }
.sn-stat-k { color: var(--ink-mute); }
.sn-risk-num { color: var(--rust); font-style: normal; text-shadow: var(--glow-red); }
.sn-risk-cap { color: var(--ink-mute); }
.sn-risk-bar { background: rgba(255, 56, 89, 0.10); }
.sn-tag { background: rgba(0, 229, 255, 0.05); color: var(--ink-mute); border-color: var(--hairline); }
.sn-tag-hot { color: var(--rust); border-color: var(--rust); background: rgba(255,56,89,0.10); box-shadow: 0 0 12px rgba(255,56,89,0.2); }
.sn-tag-rg  { color: var(--gold); border-color: var(--gold); background: rgba(255,210,92,0.08); }
.sn-time { color: var(--ink-mute); }
.sn-hint { color: var(--muted); }
.sn-foot { border-top-color: var(--hairline-2); }

/* ── HUD pill on top of hero ────────────────────────────────── */
.hero-hud {
  background: rgba(13, 18, 25, 0.85);
  border-color: var(--hairline);
  color: var(--ink-mute);
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.15);
}
.hero-hud .hud-mono { color: var(--ink); }
.hero-hud #hudHover { color: var(--slate); text-shadow: var(--glow-cyan); }

/* ── extra cinematic flourishes ─────────────────────────────── */
/* lens flare / sweep on hero */
.section-hero::after {
  content: ""; position: absolute;
  inset: 0; pointer-events: none;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(0, 229, 255, 0.06) 48%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(0, 229, 255, 0.06) 52%,
    transparent 70%);
  background-size: 200% 100%;
  background-position: -100% 0;
  animation: hero-sweep 8s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes hero-sweep {
  0%, 30% { background-position: -100% 0; }
  60% { background-position: 200% 0; }
  100% { background-position: 200% 0; }
}

/* glitch on big headlines on hover */
.h-display:hover em, .hero-title:hover em {
  animation: glitch 0.6s steps(2, end);
}
@keyframes glitch {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-1px, 1px); }
  40% { transform: translate(1px, -1px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
}

/* button glow on hover stronger */
.cta-btn:hover, .tease-link:hover {
  filter: brightness(1.05);
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  body::after { display: none; }
  .boot-screen { display: none !important; }
  .live-pulse, .hud-pulse { animation: none; }
  .section-hero::after { animation: none; }
}

/* ── audio toggle button (HUD) ─────────────────────────────── */
.audio-toggle {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(0, 229, 255, 0.06);
  color: var(--slate);
  cursor: pointer;
  transition: all 200ms var(--ease);
}
.audio-toggle:hover {
  background: rgba(0, 229, 255, 0.12);
  border-color: var(--slate);
  box-shadow: var(--glow-cyan);
}
.audio-toggle .ai-off { display: none; }
.audio-toggle.is-off .ai-on { display: none; }
.audio-toggle.is-off .ai-off { display: inline; color: var(--ink-mute); }
.audio-toggle.is-off { background: transparent; color: var(--ink-mute); }

/* ── camera shake (whole-page) ─────────────────────────────── */
body.cam-shake {
  animation: cam-shake 280ms ease-out;
}
@keyframes cam-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-2px, 1px); }
  20% { transform: translate(3px, -1px); }
  30% { transform: translate(-1px, -2px); }
  40% { transform: translate(2px, 2px); }
  50% { transform: translate(-2px, 1px); }
  60% { transform: translate(1px, -1px); }
  70% { transform: translate(-1px, 2px); }
  80% { transform: translate(2px, 0); }
  90% { transform: translate(0, -1px); }
}

/* ════════════════════════════════════════════════════════════════════
   ▼ HOME PAGE · single full-viewport 3D world (multipage stays elsewhere)
   ════════════════════════════════════════════════════════════════════ */

/* hero canvas takes over the whole home page as a fixed backdrop */
/* Body-level fixed canvas — bulletproof.
   z-index: -1 puts it BEHIND all static main content. No transforms
   can break it (it's a body direct child). */
.hero-3d-fixed {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;        /* no hit-testing on scroll/move (was 'auto') */
  display: block;
  background: #05070b;          /* solid colour — Three.js paints over this */
  /* force own GPU compositor layer so page scroll never causes the
     canvas to repaint or re-rasterize. This is the single most
     robust fix for scroll-vs-WebGL contention. */
  will-change: transform;
  transform: translateZ(0);
  contain: layout style paint;
  isolation: isolate;
  backface-visibility: hidden;
}
/* re-enable pointer events on canvases that need raycasting (e.g. lab) */
canvas.lab-build-canvas { pointer-events: auto !important; }
/* main + sections explicitly ABOVE the canvas */
:is([data-page="home"], [data-page="about"]) main.page-home {
  position: relative;
  z-index: 5;
}
:is([data-page="home"], [data-page="about"]) .section { position: relative; z-index: 5; }
/* once Three.js paints, the canvas shows opaque pixels and the bg
   gradient stops mattering visually */

/* original .hero-3d rules don't apply since the markup uses .hero-3d-fixed
   on home. Other pages still use .hero-3d (kept for /about etc.). */

/* clean up the section-hero on home so nothing hides the body canvas */
:is([data-page="home"], [data-page="about"]) .section-hero {
  overflow: visible !important;
  isolation: auto !important;
}
:is([data-page="home"], [data-page="about"]) .section-hero::before { display: none !important; }
:is([data-page="home"], [data-page="about"]) .section-hero::after  { display: none !important; }
:is([data-page="home"], [data-page="about"]) body { background: #05070b; }

/* CINEMATIC LAYOUT — full-viewport 3D scene. Content panels are small
   HUD-style overlays anchored to corners so the 3D centerpiece dominates
   the entire viewport (game-like feel). */
:is([data-page="home"], [data-page="about"]) .section {
  background: transparent;
  border-top: 0;
  min-height: 100vh;
  padding: 0;
  display: block;
  position: relative;
}
/* IN-WORLD PANELS in normal document flow — each section is 80vh tall,
   with its content panel anchored near the section's bottom-centre and
   transformed in 3D space (--pZ, --pX) based on scroll-distance to
   viewport centre. Always visible in scroll, with scroll-driven 3D pose. */
/* Each section owns its own perspective — DO NOT put perspective/transform
   on body or main, or position:fixed canvas/overlays will be reparented to
   it as their containing block (silent break of the entire 3D backdrop). */
/* HOME panels — calm, left-aligned, big hierarchy.
   No transform morph, no iris clip — story is told by scroll, not glyphs. */
[data-page="home"] .section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
[data-page="home"] .section > .container {
  position: relative;
  z-index: 3;
  text-align: left;
  max-width: 980px;
  width: calc(100% - 64px);
  padding: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px);
  background: rgba(7, 10, 14, 0.88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(0, 229, 255, 0.16);
  border-radius: 12px;
  color: rgba(245, 247, 250, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 70px -28px rgba(0, 0, 0, 0.92);
}
/* legacy: about page still uses transform-driven panels */
[data-page="about"] .section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  perspective: 1500px;
}
[data-page="about"] .section > .container {
  position: relative;
  --pZ: 0px;
  --pX: 0deg;
  --pY: 0deg;
  --pSc: 1;
  --pOp: 1;
  --pF: 1;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transform:
    translateZ(var(--pZ))
    rotateX(var(--pX))
    rotateY(var(--pY))
    scale(var(--pSc));
  opacity: var(--pOp);
  clip-path: inset(
    calc((1 - var(--pF)) * 50%)
    calc((1 - var(--pF)) * 35%)
    calc((1 - var(--pF)) * 50%)
    calc((1 - var(--pF)) * 35%)
    round 8px
  );
  z-index: 3;
  text-align: center;
  max-width: 1040px;
  width: calc(100% - 64px);
  padding: 32px clamp(28px, 3.5vw, 52px) 36px;
  background: rgba(7, 10, 14, 0.94);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 10px;
  font-size: 14px;
  color: rgba(245, 247, 250, 0.96);
  will-change: transform, opacity;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 70px -28px rgba(0, 0, 0, 0.92),
    0 0 90px rgba(0, 229, 255, 0.08);
}
/* high-contrast text inside the panel — drop subtle ink-mute fades that
   fight readability against the dark backdrop. */
:is([data-page="home"], [data-page="about"]) .section > .container,
:is([data-page="home"], [data-page="about"]) .section > .container p,
:is([data-page="home"], [data-page="about"]) .section > .container li,
:is([data-page="home"], [data-page="about"]) .section > .container .hl-blurb,
:is([data-page="home"], [data-page="about"]) .section > .container .stat-label,
:is([data-page="home"], [data-page="about"]) .section > .container .jump-blurb,
:is([data-page="home"], [data-page="about"]) .section > .container .hero-lede,
:is([data-page="home"], [data-page="about"]) .section > .container .brief-prose p,
:is([data-page="home"], [data-page="about"]) .section > .container .now-body {
  color: rgba(238, 242, 246, 0.96);
}
:is([data-page="home"], [data-page="about"]) .section > .container h1,
:is([data-page="home"], [data-page="about"]) .section > .container h2,
:is([data-page="home"], [data-page="about"]) .section > .container h3,
:is([data-page="home"], [data-page="about"]) .section > .container .hl-title,
:is([data-page="home"], [data-page="about"]) .section > .container .stat-num,
:is([data-page="home"], [data-page="about"]) .section > .container .jump-title {
  color: #fafbff;
}
:is([data-page="home"], [data-page="about"]) .section > .container * { text-shadow: inherit; }

/* HUD corner brackets always present on the in-world panel */
:is([data-page="home"], [data-page="about"]) .section > .container::before,
:is([data-page="home"], [data-page="about"]) .section > .container::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  pointer-events: none;
}
:is([data-page="home"], [data-page="about"]) .section > .container::before {
  top: -1px; left: -1px;
  border-top: 2px solid var(--slate);
  border-left: 2px solid var(--slate);
  box-shadow: -2px -2px 14px rgba(0, 229, 255, 0.4);
}
:is([data-page="home"], [data-page="about"]) .section > .container::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--rust);
  border-right: 2px solid var(--rust);
  box-shadow: 2px 2px 14px rgba(255, 56, 89, 0.4);
}

/* HUD corner brackets framing the active panel */
:is([data-page="home"], [data-page="about"]) .section.is-current > .container::before,
:is([data-page="home"], [data-page="about"]) .section.is-current > .container::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  pointer-events: none;
}
:is([data-page="home"], [data-page="about"]) .section.is-current > .container::before {
  top: -6px; left: -6px;
  border-top: 2px solid var(--slate);
  border-left: 2px solid var(--slate);
  box-shadow: -2px -2px 12px rgba(0, 229, 255, 0.4);
}
:is([data-page="home"], [data-page="about"]) .section.is-current > .container::after {
  bottom: -6px; right: -6px;
  border-bottom: 2px solid var(--rust);
  border-right: 2px solid var(--rust);
  box-shadow: 2px 2px 12px rgba(255, 56, 89, 0.4);
}

/* re-centre child layouts inside the now-centred container */
:is([data-page="home"], [data-page="about"]) .brief-grid {
  grid-template-columns: 1fr;
  gap: 14px;
  text-align: left;
  max-width: 720px;
  margin: 0 auto;
}
:is([data-page="home"], [data-page="about"]) .brief-prose { text-align: left; }
:is([data-page="home"], [data-page="about"]) .hl-list,
:is([data-page="home"], [data-page="about"]) .stack-list,
:is([data-page="home"], [data-page="about"]) .jump-grid { text-align: left; }
:is([data-page="home"], [data-page="about"]) .section-tag { justify-content: center; }
:is([data-page="home"], [data-page="about"]) .hero-title { text-align: center; }

/* keep child grids in single columns inside narrow panel */
:is([data-page="home"], [data-page="about"]) .brief-grid {
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 32px);
}
:is([data-page="home"], [data-page="about"]) .brief-stats { grid-template-columns: repeat(2, 1fr); gap: 1px; }
:is([data-page="home"], [data-page="about"]) .brief-stats > .stat-tile { padding: 14px 14px 12px; min-height: 0; }
:is([data-page="home"], [data-page="about"]) .brief-stats .stat-num { font-size: clamp(32px, 4vw, 44px); }
:is([data-page="home"], [data-page="about"]) .hl-list { grid-template-columns: 1fr; gap: 10px; }
:is([data-page="home"], [data-page="about"]) .hl-card { padding: 14px 16px 14px; }
:is([data-page="home"], [data-page="about"]) .hl-title { font-size: 16px; }
:is([data-page="home"], [data-page="about"]) .hl-blurb { font-size: 13.5px; }
:is([data-page="home"], [data-page="about"]) .stack-row { padding: 12px 0; grid-template-columns: 1fr; gap: 8px; }
:is([data-page="home"], [data-page="about"]) .sg-items { gap: 6px; }
:is([data-page="home"], [data-page="about"]) .sg-items li { font-size: 13px; padding: 4px 10px; }
:is([data-page="home"], [data-page="about"]) .jump-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
:is([data-page="home"], [data-page="about"]) .jump-card { padding: 18px 18px 16px; }
:is([data-page="home"], [data-page="about"]) .jump-title { font-size: 18px; }
:is([data-page="home"], [data-page="about"]) .jump-blurb { font-size: 13px; }

/* uniform type scale across all home panels */
:is([data-page="home"], [data-page="about"]) .hero-title,
:is([data-page="home"], [data-page="about"]) .hero-title-name {
  font-size: clamp(34px, 4.4vw, 56px) !important;   /* override 76px hero-title-name !important */
  line-height: 1.08 !important;
  word-break: keep-all;
  margin-bottom: 18px;
}
:is([data-page="home"], [data-page="about"]) .hero-lede {
  font-size: 15.5px;
  line-height: 1.55;
  margin-bottom: 16px;
  max-width: 100%;
}
:is([data-page="home"], [data-page="about"]) .now-line { font-size: 12px; padding: 8px 14px; margin-bottom: 14px; }
:is([data-page="home"], [data-page="about"]) .hero-meta { font-size: 13px; gap: 10px; margin-bottom: 0; flex-wrap: wrap; }
:is([data-page="home"], [data-page="about"]) .h-display,
:is([data-page="home"], [data-page="about"]) .section-h { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; margin-bottom: 14px; }
:is([data-page="home"], [data-page="about"]) .section-tag { font-size: 11px; margin-bottom: 16px; gap: 10px; }
:is([data-page="home"], [data-page="about"]) .brief-prose p { font-size: 14px; line-height: 1.55; margin-bottom: 10px; }
:is([data-page="home"], [data-page="about"]) .stat-num { font-size: clamp(28px, 3vw, 38px); }
:is([data-page="home"], [data-page="about"]) .stat-label { font-size: 10.5px; line-height: 1.4; }
:is([data-page="home"], [data-page="about"]) .hl-title { font-size: 15px; }
:is([data-page="home"], [data-page="about"]) .hl-blurb { font-size: 13.5px; line-height: 1.5; }
:is([data-page="home"], [data-page="about"]) .hl-where, :is([data-page="home"], [data-page="about"]) .hl-id { font-size: 11px; }
:is([data-page="home"], [data-page="about"]) .stack-row { padding: 10px 0; }
:is([data-page="home"], [data-page="about"]) .sg-items li { font-size: 13px; padding: 4px 10px; }
:is([data-page="home"], [data-page="about"]) .sg-name { font-size: 12px; }
:is([data-page="home"], [data-page="about"]) .jump-title { font-size: 17px; }
:is([data-page="home"], [data-page="about"]) .jump-blurb { font-size: 13px; line-height: 1.5; }
/* HUD-style tiles — borderless, just outlines + glow */
:is([data-page="home"], [data-page="about"]) .brief-stats {
  background: transparent !important;
  border: 1px solid rgba(0, 229, 255, 0.25) !important;
  gap: 1px;
}
:is([data-page="home"], [data-page="about"]) .brief-stats > .stat-tile {
  background: rgba(0, 229, 255, 0.04) !important;
  padding: 12px 14px;
  min-height: 0;
  gap: 4px;
}
:is([data-page="home"], [data-page="about"]) .brief-stats > .stat-tile::before,
:is([data-page="home"], [data-page="about"]) .brief-stats > .stat-tile::after { display: none; }
:is([data-page="home"], [data-page="about"]) .hl-card {
  padding: 12px 14px;
  background: rgba(255, 56, 89, 0.05) !important;
  border-color: rgba(255, 56, 89, 0.25) !important;
}
:is([data-page="home"], [data-page="about"]) .hl-card::before, :is([data-page="home"], [data-page="about"]) .hl-card::after { display: none; }
:is([data-page="home"], [data-page="about"]) .jump-card {
  padding: 16px 16px 14px;
  background: rgba(0, 229, 255, 0.05) !important;
  border-color: rgba(0, 229, 255, 0.25) !important;
}
:is([data-page="home"], [data-page="about"]) .jump-card::before, :is([data-page="home"], [data-page="about"]) .jump-card::after { display: none; }
:is([data-page="home"], [data-page="about"]) .jump-card-cta {
  background: rgba(255, 56, 89, 0.10) !important;
  border-color: rgba(255, 56, 89, 0.35) !important;
}
:is([data-page="home"], [data-page="about"]) .stack-row { background: transparent !important; }
:is([data-page="home"], [data-page="about"]) .jump-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
:is([data-page="home"], [data-page="about"]) .hero-title br { display: inline; }
:is([data-page="home"], [data-page="about"]) .hero-title .word { padding: 0 0.06em 0 0; }

/* mobile: panels go full-width, stack normally */
@media (max-width: 880px) {
  :is([data-page="home"], [data-page="about"]) .section { padding: 100px 18px; }
  :is([data-page="home"], [data-page="about"]) .section-hero,
  :is([data-page="home"], [data-page="about"]) .section-brief,
  :is([data-page="home"], [data-page="about"]) .section-highlights,
  :is([data-page="home"], [data-page="about"]) .section-stack,
  :is([data-page="home"], [data-page="about"]) .section-jump { justify-content: center; }
  :is([data-page="home"], [data-page="about"]) .section > .container { max-width: 100%; }
}

/* short scroll container — 5 stations × 80vh = 400vh, still scrollable
   enough to drive the camera through all stations but with less empty
   feel. Canvas stays fixed full-viewport throughout. */
/* HOME — 6-section story arc, calmer rhythm. About is overridden below. */
[data-page="home"] main.page-home { min-height: auto; }
[data-page="home"] .section { min-height: 90vh; padding: clamp(60px, 8vh, 110px) 0; }
[data-page="home"] .section-hero { min-height: 100vh; padding-top: clamp(80px, 10vh, 130px); }

/* stat tiles + cards on glass — slightly translucent so they don't look pasted */
:is([data-page="home"], [data-page="about"]) .brief-stats > .stat-tile,
:is([data-page="home"], [data-page="about"]) .hl-card,
:is([data-page="home"], [data-page="about"]) .jump-card {
  background: rgba(13, 18, 25, 0.7);
}

/* fixed canvas means body needs a fallback colour behind it */
:is([data-page="home"], [data-page="about"]) body { background: #000; }
:is([data-page="home"], [data-page="about"]) body::before { z-index: 0; }     /* grid below canvas */
:is([data-page="home"], [data-page="about"]) body::after  { z-index: 99; }    /* scanlines on top */

/* big section labels in the gaps between sections */
:is([data-page="home"], [data-page="about"]) .section-tag {
  background: rgba(13, 18, 25, 0.85);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  display: inline-flex;
  width: fit-content;
}

/* HUD label fixed top center over the 3D world */
:is([data-page="home"], [data-page="about"]) .hero-hud[hidden] { display: none !important; }

/* tile-stage stays inside hero section, not full viewport */
:is([data-page="home"], [data-page="about"]) .tile-stage {
  position: fixed; inset: 0; z-index: 2;
}

/* sticky-stage above everything */
:is([data-page="home"], [data-page="about"]) .sticky-stage { z-index: 220; }

/* ════════════════════════════════════════════════════════════════════
   ABOUT · CV-STYLE PAGE (calm, scrollable, evidence-led)
   Career timeline + capabilities matrix + education over a soft 3D
   backdrop. No scroll-snap, no film-cut, no frame counter — just a
   readable record of what I've shipped.
   ════════════════════════════════════════════════════════════════════ */
[data-page="about"] body { scroll-snap-type: none !important; }
[data-page="about"] .film-hud,
[data-page="about"] .film-cut { display: none !important; }
[data-page="about"] main.page-about-cv { padding-top: calc(var(--ribbon-h, 28px) + var(--nav-h, 56px) + 32px); padding-bottom: 80px; }
[data-page="about"] .section { padding: clamp(48px, 6vw, 96px) 0; min-height: auto; border-top: 1px solid rgba(255, 255, 255, 0.06); }
[data-page="about"] .section:first-of-type { border-top: 0; }

/* glass back-plate behind every container so text always reads against
   the soft 3D backdrop */
[data-page="about"] .section > .container {
  position: relative;
  max-width: 1080px;
  padding: clamp(28px, 3.5vw, 44px) clamp(28px, 3.5vw, 52px);
  background: rgba(7, 10, 14, 0.86);
  border: 1px solid rgba(0, 229, 255, 0.16);
  border-radius: 12px;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* INTRO */
[data-page="about"] .about-quick-rail {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: inline-flex; flex-wrap: wrap; gap: 14px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
[data-page="about"] .about-quick-rail a {
  color: rgba(0, 229, 255, 0.8); text-decoration: none;
  border-bottom: 1px dashed rgba(0, 229, 255, 0.3);
  padding-bottom: 2px;
}
[data-page="about"] .about-quick-rail a:hover { color: #00e5ff; border-color: rgba(0, 229, 255, 0.7); }

/* NOW · prose + mandate card */
[data-page="about"] .now-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
[data-page="about"] .now-prose p {
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(238, 242, 246, 0.92);
  margin: 12px 0;
}
[data-page="about"] .now-card {
  background: rgba(255, 211, 92, 0.06);
  border: 1px solid rgba(255, 211, 92, 0.32);
  border-radius: 8px;
  padding: 18px 20px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  color: rgba(238, 242, 246, 0.94);
}
[data-page="about"] .nc-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.16em;
  color: rgba(76, 255, 136, 0.95);
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 211, 92, 0.2);
}
[data-page="about"] .nc-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4cff88; box-shadow: 0 0 12px rgba(76, 255, 136, 0.85);
  animation: ncPulse 1.6s ease-in-out infinite;
}
@keyframes ncPulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.45;transform:scale(.8);} }
[data-page="about"] .nc-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
[data-page="about"] .nc-dl dt { color: rgba(255, 211, 92, 0.86); font-weight: 600; }
[data-page="about"] .nc-dl dd { margin: 0; }

/* RECORDS · timeline */
[data-page="about"] .records-timeline { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
[data-page="about"] .rec-card {
  background: rgba(13, 18, 25, 0.7);
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-left: 3px solid rgba(0, 229, 255, 0.6);
  border-radius: 6px;
  padding: 18px 22px;
  position: relative;
}
[data-page="about"] .rec-card.is-live {
  border-left-color: #4cff88;
  background: linear-gradient(90deg, rgba(76, 255, 136, 0.05), rgba(13, 18, 25, 0.7) 30%);
}
[data-page="about"] .rec-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
[data-page="about"] .rec-id { color: rgba(0, 229, 255, 0.85); }
[data-page="about"] .rec-status {
  padding: 3px 8px; border-radius: 4px;
  background: rgba(0, 229, 255, 0.12);
  color: rgba(0, 229, 255, 0.95);
  font-weight: 600;
}
[data-page="about"] .rec-card.is-live .rec-status { background: rgba(76, 255, 136, 0.14); color: #4cff88; }
[data-page="about"] .rec-period { color: rgba(238, 242, 246, 0.6); }
[data-page="about"] .rec-title { margin: 10px 0 4px; font-size: 21px; line-height: 1.25; color: #fafbff; font-weight: 600; }
[data-page="about"] .rec-org { margin: 0 0 14px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: rgba(0, 229, 255, 0.78); }
[data-page="about"] .rec-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: 14px; line-height: 1.5; }
[data-page="about"] .rec-dl dt { color: rgba(255, 211, 92, 0.92); font-family: ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 4px; }
[data-page="about"] .rec-dl dd { margin: 0; color: rgba(238, 242, 246, 0.92); }

/* CAPABILITIES */
[data-page="about"] .caps-legend {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px; color: rgba(238, 242, 246, 0.65);
  margin: 18px 0 22px;
}
[data-page="about"] .caps-legend .cl-sep { color: rgba(255,255,255,0.2); }
[data-page="about"] .cl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
[data-page="about"] .cl-d { background: #ffd25c; }
[data-page="about"] .cl-l { background: #00e5ff; }
[data-page="about"] .cl-o { background: #4cff88; }

[data-page="about"] .caps-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 8px 20px;
}
[data-page="about"] .cap-row {
  display: grid; grid-template-columns: 1fr max-content; gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(13, 18, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  font-size: 14px;
  color: rgba(238, 242, 246, 0.92);
}
[data-page="about"] .cap-dots { display: inline-flex; gap: 6px; }
[data-page="about"] .cap-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
[data-page="about"] .cap-dot.on { border-color: transparent; }
[data-page="about"] .cap-dot.cl-d.on { background: #ffd25c; box-shadow: 0 0 8px rgba(255, 211, 92, 0.45); }
[data-page="about"] .cap-dot.cl-l.on { background: #00e5ff; box-shadow: 0 0 8px rgba(0, 229, 255, 0.45); }
[data-page="about"] .cap-dot.cl-o.on { background: #4cff88; box-shadow: 0 0 8px rgba(76, 255, 136, 0.45); }

/* EDUCATION */
[data-page="about"] .edu-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
[data-page="about"] .edu-row {
  display: grid; grid-template-columns: 1.4fr 1fr max-content; gap: 16px;
  padding: 14px 18px;
  background: rgba(13, 18, 25, 0.6);
  border: 1px solid rgba(0, 229, 255, 0.14);
  border-radius: 4px;
  font-size: 14px;
}
[data-page="about"] .edu-row strong { color: #fafbff; font-weight: 600; }
[data-page="about"] .edu-row .edu-inst { color: rgba(238, 242, 246, 0.8); }
[data-page="about"] .edu-row .edu-period { color: rgba(255, 211, 92, 0.85); font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 0.04em; }

/* CTA */
[data-page="about"] .section-cta { padding-top: 32px; padding-bottom: 64px; }
[data-page="about"] .cta-row { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
[data-page="about"] .cta-link {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 14px; letter-spacing: 0.06em;
  color: rgba(0, 229, 255, 0.92);
  text-decoration: none;
  padding: 10px 20px;
  border: 1px solid rgba(0, 229, 255, 0.32);
  border-radius: 4px;
  transition: color 200ms, border-color 200ms, background 200ms;
}
[data-page="about"] .cta-link:hover { color: #fff; border-color: #00e5ff; background: rgba(0, 229, 255, 0.06); }
[data-page="about"] .cta-link.cta-primary { color: #ff8a98; border-color: rgba(255, 56, 89, 0.4); }
[data-page="about"] .cta-link.cta-primary:hover { color: #fff; background: rgba(255, 56, 89, 0.12); border-color: #ff3859; }

/* ════════════════════════════════════════════════════════════════════
   LAB · STUB · "Building" — single-screen prototype announcement
   ════════════════════════════════════════════════════════════════════ */
[data-page="lab"] body { background: #06090d; }
/* Lab page is meant to be a SINGLE-SCREEN announcement — title + 3D
   stage + nav, all visible at once without scrolling. Top padding only
   covers the fixed header chrome; section uses flex-center to pin the
   container in the available height. */
[data-page="lab"] main.page-lab-stub {
  padding-top: calc(var(--ribbon-h, 28px) + var(--nav-h, 56px) + 12px);
  padding-bottom: 16px;
  min-height: 100vh;
}
[data-page="lab"] .section-lab-stub {
  padding: clamp(16px, 2vw, 24px) 0;
  min-height: calc(100vh - var(--ribbon-h, 28px) - var(--nav-h, 56px) - 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 0;
}
[data-page="lab"] .section-lab-stub > .container {
  max-width: 920px;
  text-align: center;
  background: rgba(7, 10, 14, 0.84);
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 12px;
  padding: clamp(16px, 2vw, 28px) clamp(18px, 3vw, 44px);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
[data-page="lab"] .section-lab-stub .section-tag {
  justify-content: center;
  margin-bottom: 12px;
}

.lab-stub-title {
  margin: 0 0 14px;
  font-family: var(--f-display, Geist), system-ui;
  /* much smaller than before — 38..72px was eating the whole viewport.
     22..40px sits comfortably above the 3D stage. */
  font-size: clamp(22px, 3vw, 40px);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: #fafbff;
  text-wrap: balance;
}
.lab-stub-title em { font-style: italic; font-weight: 380; color: #ff8a98; }

/* The building stage — sized so title + stage + nav fit in one viewport.
   Uses height instead of aspect-ratio so the canvas adapts to viewport
   height (40vh) and doesn't push the nav off-screen on shorter laptops. */
.lab-build-stage {
  position: relative;
  margin: 0 auto 16px;
  width: 100%;
  max-width: 640px;
  height: clamp(220px, 42vh, 360px);
  border-radius: 10px;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 60%, rgba(0, 229, 255, 0.08), transparent 70%),
    radial-gradient(40% 40% at 30% 30%, rgba(255, 211, 92, 0.10), transparent 70%),
    #06090d;
  border: 1px solid rgba(0, 229, 255, 0.18);
}
.lab-build-canvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  display: block;
  pointer-events: auto;
  touch-action: none;          /* allow drag without browser scroll-pan */
  cursor: default;
}

/* "BUILDING" HUD badge — pulsing dot + label, top-left of stage */
.lab-build-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px;
  background: rgba(7, 10, 14, 0.88);
  border: 1px solid rgba(76, 255, 136, 0.45);
  border-radius: 999px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #4cff88;
}
.lab-build-badge .lbb-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4cff88;
  box-shadow: 0 0 10px rgba(76, 255, 136, 0.85);
  animation: lbbPulse 1.4s ease-in-out infinite;
}
@keyframes lbbPulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.45;transform:scale(.7);} }

.lab-stub-sub {
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(238, 242, 246, 0.75);
  max-width: 64ch;
  margin-inline: auto;
}
.lab-stub-source {
  color: rgba(0, 229, 255, 0.92);
  text-decoration: none;
  border-bottom: 1px dashed rgba(0, 229, 255, 0.35);
  padding-bottom: 1px;
  transition: color 200ms, border-color 200ms;
}
.lab-stub-source:hover { color: #00e5ff; border-color: rgba(0, 229, 255, 0.7); }

.lab-stub-next { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.lab-stub-next .lsn-link {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; letter-spacing: 0.06em;
  color: rgba(0, 229, 255, 0.92);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid rgba(0, 229, 255, 0.32);
  border-radius: 4px;
  transition: color 200ms, border-color 200ms, background 200ms;
}
.lab-stub-next .lsn-link:hover { color: #fff; border-color: #00e5ff; background: rgba(0, 229, 255, 0.08); }
.lab-stub-next .lsn-link.lsn-cta { color: #ff8a98; border-color: rgba(255, 56, 89, 0.4); }
.lab-stub-next .lsn-link.lsn-cta:hover { color: #fff; background: rgba(255, 56, 89, 0.12); border-color: #ff3859; }

/* ════════════════════════════════════════════════════════════════════
   CONTACT · STUB · single LinkedIn link
   ════════════════════════════════════════════════════════════════════ */
[data-page="contact"] body { background: #06090d; }

/* Contact page mirrors Lab page sizing — single-screen card centred in
   the viewport, same typography/box dimensions. */
[data-page="contact"] main.page-contact-stub {
  padding-top: calc(var(--ribbon-h, 28px) + var(--nav-h, 56px) + 12px);
  padding-bottom: 16px;
  min-height: 100vh;
}
[data-page="contact"] .section-contact-stub {
  padding: clamp(16px, 2vw, 24px) 0;
  min-height: calc(100vh - var(--ribbon-h, 28px) - var(--nav-h, 56px) - 28px);
  display: flex; align-items: center; justify-content: center;
  border-top: 0;
}
[data-page="contact"] .section-contact-stub > .container {
  max-width: 920px;
  text-align: center;
  background: rgba(7, 10, 14, 0.84);
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 12px;
  padding: clamp(16px, 2vw, 28px) clamp(18px, 3vw, 44px);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
[data-page="contact"] .section-contact-stub .section-tag {
  justify-content: center;
  margin-bottom: 12px;
}

.contact-stub-title {
  margin: 0 0 14px;
  font-family: var(--f-display, Geist), system-ui;
  /* matches lab-stub-title scale exactly */
  font-size: clamp(22px, 3vw, 40px);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: #fafbff;
  text-wrap: balance;
}
.contact-stub-title em { font-style: italic; font-weight: 380; color: #ff8a98; }

.contact-stub-lede {
  margin: 0 auto 18px;
  font-family: var(--f-display, Geist), system-ui;
  font-weight: 350;
  font-size: clamp(13.5px, 1.3vw, 16px);
  line-height: 1.55;
  color: rgba(238, 242, 246, 0.82);
  max-width: 52ch;
}
.contact-stub-lede em {
  font-style: normal;
  color: rgba(0, 229, 255, 0.92);
  font-weight: 500;
}

/* Inline hyperlink inside the lede sentence — inherits the lede's
   font/size/weight, just adds cyan colour, dashed underline + arrow. */
.contact-stub-link {
  display: inline-flex; align-items: baseline; gap: 6px;
  color: rgba(0, 229, 255, 0.95);
  text-decoration: none;
  border-bottom: 1px dashed rgba(0, 229, 255, 0.45);
  padding-bottom: 1px;
  transition: color 200ms, border-color 200ms;
}
.contact-stub-link:hover {
  color: #fff;
  border-bottom-color: #00e5ff;
}
.contact-stub-link .csl-arrow {
  font-size: 0.95em;
  transition: transform 200ms;
}
.contact-stub-link:hover .csl-arrow { transform: translateX(3px); }

.contact-stub-next {
  margin-top: 18px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.contact-stub-next .csn-link {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; letter-spacing: 0.06em;
  color: rgba(238, 242, 246, 0.72);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  transition: color 200ms, border-color 200ms, background 200ms;
}
.contact-stub-next .csn-link:hover { color: #fff; border-color: rgba(0, 229, 255, 0.45); background: rgba(0, 229, 255, 0.05); }

/* ════════════════════════════════════════════════════════════════════
   404 · single-screen error card (matches lab/contact stub language)
   ════════════════════════════════════════════════════════════════════ */
[data-page="404"] body { background: #05070b; }
[data-page="404"] main.page-404-stub {
  padding-top: calc(var(--ribbon-h, 0px) + var(--nav-h, 88px) + 12px);
  padding-bottom: 16px;
  min-height: 100vh;
}
[data-page="404"] .section-404-stub {
  position: relative;
  padding: clamp(16px, 2vw, 24px) 0;
  min-height: calc(100vh - var(--ribbon-h, 0px) - var(--nav-h, 88px) - 28px);
  display: flex; align-items: center; justify-content: center;
  border-top: 0;
  overflow: hidden;
}
/* background broken-shape canvas — sits behind everything, low opacity */
[data-page="404"] .err-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}
[data-page="404"] .section-404-stub > .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  text-align: center;
  background: rgba(7, 10, 14, 0.84);
  border: 1px solid rgba(255, 56, 89, 0.22);
  border-left: 3px solid rgba(255, 56, 89, 0.7);
  border-radius: 12px;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px) clamp(18px, 2.5vw, 28px);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow:
    0 32px 80px -32px rgba(0, 0, 0, 0.95),
    0 0 60px rgba(255, 56, 89, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ── status strip ──────────────────────────────────────────────── */
.err-strip {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.err-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff3859;
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(255, 56, 89, 0.6);
  animation: err-pulse 1.8s ease-out infinite;
}
@keyframes err-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(255, 56, 89, 0.55); }
  80%  { box-shadow: 0 0 0 10px rgba(255, 56, 89, 0); }
  100% { box-shadow: 0 0 0 0   rgba(255, 56, 89, 0); }
}
.err-strip-l   { color: rgba(255, 138, 152, 0.95); }
.err-strip-sep { color: rgba(244, 246, 250, 0.25); }
.err-strip-r   { color: rgba(244, 246, 250, 0.55); }

/* ── big 404 glyph ─────────────────────────────────────────────── */
.err-glyph {
  display: flex; flex-direction: column; align-items: center;
  margin: 6px auto 14px;
}
.err-glyph-num {
  font-family: var(--f-display, Geist), system-ui;
  font-size: clamp(58px, 9vw, 96px);
  font-weight: 380;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #ff8a98;
  background: linear-gradient(180deg, #ff8a98, #ff5e7d);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(255, 56, 89, 0.4);
  filter: drop-shadow(0 0 20px rgba(255, 56, 89, 0.25));
}
.err-glyph-sub {
  margin-top: 2px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(244, 246, 250, 0.45);
}

/* ── title + lede ──────────────────────────────────────────────── */
.err-title {
  margin: 0 0 10px;
  font-family: var(--f-display, Geist), system-ui;
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: #fafbff;
  text-wrap: balance;
}
.err-title em {
  font-style: italic; font-weight: 380;
  color: #ff8a98;
  background: linear-gradient(180deg, #ff8a98, #ff5e7d);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.err-lede {
  margin: 0 auto 16px;
  font-family: var(--f-display, Geist), system-ui;
  font-weight: 350;
  font-size: clamp(13.5px, 1.3vw, 15px);
  line-height: 1.55;
  color: rgba(244, 246, 250, 0.72);
  max-width: 44ch;
}

/* ── request log block ─────────────────────────────────────────── */
.err-meta {
  margin: 0 0 18px;
  padding: 10px 14px;
  background: rgba(255, 56, 89, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-align: left;
}
.err-row {
  display: flex; align-items: center;
  gap: 12px;
  padding: 4px 0;
}
.err-row + .err-row { border-top: 1px dashed rgba(255, 255, 255, 0.05); }
.err-row dt {
  color: rgba(244, 246, 250, 0.50);
  text-transform: uppercase;
  flex: 0 0 110px;
  font-size: 9.5px;
  letter-spacing: 0.14em;
}
.err-row dd {
  margin: 0;
  color: rgba(244, 246, 250, 0.92);
  flex: 1;
  text-align: right;
  font-size: 11.5px;
}
.err-val-rust { color: rgba(255, 138, 152, 0.95); }
.err-val-mute { color: rgba(244, 246, 250, 0.45); }

.err-code {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: rgba(244, 246, 250, 0.92);
}
.err-code-cyan {
  color: rgba(0, 229, 255, 0.95);
  border-color: rgba(0, 229, 255, 0.3);
  background: rgba(0, 229, 255, 0.06);
}

.err-suggest {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  transition: transform 220ms;
}
.err-suggest:hover { transform: translateX(2px); }
.err-suggest-arrow {
  color: rgba(0, 229, 255, 0.85);
  font-size: 13px;
  transition: transform 220ms;
}
.err-suggest:hover .err-suggest-arrow {
  transform: translateX(4px);
  color: #fff;
}

/* ── route nav ─────────────────────────────────────────────────── */
.err-next {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  margin: 0 0 14px;
}
.err-link {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(0, 229, 255, 0.85);
  text-decoration: none;
  padding: 7px 14px;
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 4px;
  transition: color 200ms, border-color 200ms, background 200ms;
}
.err-link:hover {
  color: #fff;
  border-color: rgba(0, 229, 255, 0.7);
  background: rgba(0, 229, 255, 0.06);
}
.err-link-cta {
  color: rgba(255, 138, 152, 0.95);
  border-color: rgba(255, 56, 89, 0.4);
}
.err-link-cta:hover {
  color: #fff;
  border-color: #ff3859;
  background: rgba(255, 56, 89, 0.1);
}

.err-foot {
  margin: 6px 0 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.1em;
  color: rgba(244, 246, 250, 0.35);
  text-transform: uppercase;
}

@media (max-width: 480px) {
  [data-page="404"] .err-row dt { flex-basis: 90px; font-size: 9px; }
  [data-page="404"] .err-row dd { font-size: 10.5px; }
  [data-page="404"] .err-glyph-num { font-size: 56px; }
}

@media (max-width: 760px) {
  [data-page="about"] .now-grid { grid-template-columns: 1fr; }
  [data-page="about"] .edu-row { grid-template-columns: 1fr; gap: 4px; }
  [data-page="about"] .rec-dl { grid-template-columns: 1fr; gap: 2px 0; }
  /* CAPABILITIES on mobile — force single column, slightly tighter
     padding so 13 capability rows + the legend all fit cleanly. */
  [data-page="about"] .caps-grid {
    grid-template-columns: 1fr !important;
    gap: 4px;
  }
  [data-page="about"] .cap-row {
    padding: 7px 11px;
    font-size: 12.5px;
    gap: 10px;
    grid-template-columns: 1fr max-content;
  }
  [data-page="about"] .cap-name {
    line-height: 1.3;
    text-align: left;
  }
  [data-page="about"] .cap-dots { gap: 5px; }
  [data-page="about"] .cap-dot  { width: 9px; height: 9px; }

  /* Legend — stack each item on its own line on mobile so the dotted
     separator never strands a "·" at the start of a wrapped row. */
  [data-page="about"] .caps-legend {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 8px 0 16px;
    font-size: 10.5px;
    text-align: left;
  }
  [data-page="about"] .caps-legend .cl-sep { display: none; }

  /* Section tag on mobile — drop the long descriptive sub-name (e.g.
     "Engagement history · most recent first"). The middle "·" was
     wrapping onto its own line on narrow viewports. The 02.x · LABEL
     pair alone is enough context. */
  [data-page="about"] .section-tag .tag-name { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   (legacy stop-motion CSS retained below for any other pages — about
   uses none of it now)
   ════════════════════════════════════════════════════════════════════ */

/* 16 stop-motion frames · 16 × 100vh of scroll length, but the panels
   themselves don't scroll — they cut. Each section is just a "scroll
   driver"; the actual panel is position: fixed so it stays in viewport
   and only its opacity flips when its section becomes the active one. */
[data-page="about"] main.page-home { min-height: 1600vh; }
[data-page="about"] .section.frame {
  display: block;            /* override flex centering — section is invisible */
  min-height: 100vh;
}

/* SCROLL-SNAP — the stop-motion behaviour. Each section snaps to viewport
   centre as you scroll. Falls back gracefully on browsers without snap. */
[data-page="about"] html { scroll-behavior: smooth; }
[data-page="about"] body {
  scroll-snap-type: y mandatory;
}
[data-page="about"] .section.frame {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* CINEMATIC PANEL — fixed-position narrator caption that swaps content
   when its frame becomes active. No vertical scrolling movement —
   opacity-cut between frames like a movie. */
[data-page="about"] .section.frame > .container.frame-container {
  position: fixed !important;
  left: 50% !important;
  bottom: 7vh !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  width: min(880px, calc(100vw - 56px)) !important;
  max-width: 880px !important;
  margin: 0 !important;
  padding: 22px clamp(22px, 3vw, 40px) 24px !important;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: opacity 200ms ease-out;
  /* lock corner brackets to the panel border */
  clip-path: inset(0 round 10px) !important;
}
[data-page="about"] .section.frame.is-active > .container.frame-container {
  opacity: 1;
  pointer-events: auto;
}

/* film HUD — top-centre, frame counter + progress bar */
.film-hud {
  position: fixed;
  top: calc(var(--ribbon-h, 28px) + var(--nav-h, 56px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  background: rgba(7, 10, 14, 0.86);
  border: 1px solid rgba(0, 229, 255, 0.32);
  border-radius: 999px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245, 247, 250, 0.85);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease-out;
}
[data-page="about"] .film-hud { opacity: 1; }
.film-hud .film-bar {
  display: inline-block; width: 120px; height: 2px;
  background: rgba(244, 246, 250, 0.18);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}
.film-hud .film-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 6%;
  background: linear-gradient(90deg, #00e5ff, #4cff88);
  transition: width 220ms ease-out;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.65);
}
.film-hud .film-tag { color: rgba(0, 229, 255, 0.95); }

/* film cut — brief white flash + scan line at frame change.
   Class .is-cut is added by JS and removed on animation end. */
.film-cut {
  position: fixed; inset: 0;
  z-index: 100;
  pointer-events: none;
  background: #ffffff;
  opacity: 0;
}
.film-cut.is-cut { animation: filmCutFlash 320ms ease-out 1; }
@keyframes filmCutFlash {
  0%   { opacity: 0; }
  10%  { opacity: 0.34; }
  20%  { opacity: 0.10; }
  100% { opacity: 0; }
}
[data-page="about"] .frame-meta {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
}
[data-page="about"] .frame-meta .fm-num {
  color: rgba(255, 211, 92, 0.95);
  padding: 6px 12px;
  border: 1px solid rgba(255, 211, 92, 0.4);
  border-radius: 999px;
  background: rgba(255, 211, 92, 0.08);
}
[data-page="about"] .frame-meta .fm-year { color: rgba(0, 229, 255, 0.85); }
[data-page="about"] .section-arc-04 .frame-meta .fm-num { color: rgba(76, 255, 136, 0.95); border-color: rgba(76, 255, 136, 0.45); background: rgba(76, 255, 136, 0.08); }

/* THE BIG LINE — narrator caption (the scene's speech bubble carries the
   in-character line; this is the narrator commenting on the chapter) */
[data-page="about"] .frame-line {
  margin: 0;
  font-family: var(--f-display, Geist), system-ui;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: #fafbff;
  max-width: 32ch;
  text-wrap: balance;
}
[data-page="about"] .frame-line em {
  font-style: italic;
  color: #00e5ff;
  font-weight: 350;
}
[data-page="about"] .section-arc-01 .frame-line em { color: #ff8a98; }
[data-page="about"] .section-arc-02 .frame-line em { color: #00e5ff; }
[data-page="about"] .section-arc-03 .frame-line em { color: #ffd25c; }
[data-page="about"] .section-arc-04 .frame-line em { color: #4cff88; }

/* CONTEXT SUB-LINE — one line of factual context, smaller, muted */
[data-page="about"] .frame-sub {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.55;
  color: rgba(232, 236, 240, 0.86);
  max-width: 64ch;
}
[data-page="about"] .frame-sub strong {
  color: #fff; font-weight: 600;
}

/* hide the home-style scroll cue on about (each frame snap implies advance) */
[data-page="about"] .scroll-cue { display: none; }

/* arc-headline — looks like the home hero title but tighter, per-chapter */
[data-page="about"] .arc-headline {
  font-size: clamp(28px, 3.6vw, 48px) !important;
  line-height: 1.08 !important;
  margin: 4px 0 18px !important;
}

/* period strip — date · org · role on one line, mono-led */
[data-page="about"] .arc-period {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  column-gap: 10px; row-gap: 4px;
  margin: 0 0 14px;
  font-family: var(--f-sans, system-ui);
  font-size: 13px;
  color: rgba(238, 242, 246, 0.86);
}
[data-page="about"] .arc-period .ap-mono {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px; letter-spacing: 0.08em;
  color: rgba(255, 211, 92, 0.95);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
[data-page="about"] .arc-period .ap-mono.ap-live { color: rgba(76, 255, 136, 0.95); }
[data-page="about"] .arc-period .ap-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4cff88;
  box-shadow: 0 0 12px rgba(76, 255, 136, 0.85);
  animation: arcPulse 1.6s ease-in-out infinite;
}
@keyframes arcPulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.45;transform:scale(.85);} }
[data-page="about"] .arc-period .ap-sep { color: rgba(245, 247, 250, 0.32); }
[data-page="about"] .arc-period .ap-org { color: rgba(232, 236, 240, 0.94); }
[data-page="about"] .arc-period .ap-role { color: rgba(0, 229, 255, 0.88); }

/* lede — one short paragraph, larger than body */
[data-page="about"] .arc-lede {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(238, 242, 246, 0.96);
  max-width: 76ch;
  margin: 0 auto 24px;
}

/* stats — 3 equal tiles per chapter, the loudest metric per stage */
[data-page="about"] .arc-stats {
  list-style: none; margin: 0 auto 18px; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 920px;
}
[data-page="about"] .arc-stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px 16px;
  background: rgba(0, 229, 255, 0.05);
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: 8px;
  text-align: left;
}
[data-page="about"] .arc-stat .as-num {
  font-family: var(--f-display, Geist), system-ui;
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 600;
  line-height: 1;
  color: #fafbff;
  letter-spacing: -0.01em;
}
[data-page="about"] .arc-stat .as-lbl {
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(232, 236, 240, 0.82);
  letter-spacing: 0.01em;
}

/* chips — three takeaways below the stats, narrative-style */
[data-page="about"] .arc-chips {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 920px;
  margin-inline: auto;
}
[data-page="about"] .arc-chips li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 56, 89, 0.22);
  background: rgba(255, 56, 89, 0.05);
  border-radius: 6px;
  text-align: left;
  font-size: 12.5px; line-height: 1.4;
  color: rgba(238, 242, 246, 0.92);
}
[data-page="about"] .arc-chips .ac-num {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; color: rgba(255, 56, 89, 0.95);
  flex: 0 0 auto;
}
[data-page="about"] .arc-chips em { color: rgba(0, 229, 255, 0.95); font-style: normal; font-weight: 500; }

/* per-chapter accent shifts so chapters feel distinct without changing scaffold */
[data-page="about"] .section-arc-01 .arc-stat { background: rgba(255, 56, 89, 0.06); border-color: rgba(255, 56, 89, 0.28); }
[data-page="about"] .section-arc-01 .arc-chips li { border-color: rgba(255, 56, 89, 0.28); background: rgba(255, 56, 89, 0.06); }
[data-page="about"] .section-arc-02 .arc-stat { background: rgba(0, 229, 255, 0.06); border-color: rgba(0, 229, 255, 0.28); }
[data-page="about"] .section-arc-02 .arc-chips li { border-color: rgba(0, 229, 255, 0.28); background: rgba(0, 229, 255, 0.06); }
[data-page="about"] .section-arc-03 .arc-stat { background: rgba(255, 211, 92, 0.06); border-color: rgba(255, 211, 92, 0.30); }
[data-page="about"] .section-arc-03 .arc-stat .as-num { color: #fff5d2; }
[data-page="about"] .section-arc-03 .arc-chips li { border-color: rgba(255, 211, 92, 0.30); background: rgba(255, 211, 92, 0.06); }
[data-page="about"] .section-arc-04 .arc-stat { background: rgba(76, 255, 136, 0.06); border-color: rgba(76, 255, 136, 0.30); }
[data-page="about"] .section-arc-04 .arc-stat .as-num { color: #d4ffe2; }
[data-page="about"] .section-arc-04 .arc-chips li { border-color: rgba(76, 255, 136, 0.28); background: rgba(76, 255, 136, 0.05); }

/* inline side-chapter links at the end of the arc — replaces the dropped Ch.05 */
[data-page="about"] .arc-next {
  margin: 28px auto 0;
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 18px;
  font-family: ui-monospace, Menlo, monospace;
}
[data-page="about"] .arc-next .an-mono {
  font-size: 11px; letter-spacing: 0.12em;
  color: rgba(245, 247, 250, 0.55);
  text-transform: uppercase;
}
[data-page="about"] .arc-next .an-link {
  font-size: 14px; letter-spacing: 0.02em;
  color: rgba(0, 229, 255, 0.92);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color 200ms, border-color 200ms;
  font-family: var(--f-sans, system-ui);
}
[data-page="about"] .arc-next .an-link:hover { color: #fff; border-color: rgba(0, 229, 255, 0.6); }
[data-page="about"] .arc-next .an-link.an-cta { color: rgba(255, 56, 89, 0.95); }
[data-page="about"] .arc-next .an-link.an-cta:hover { color: #ff8a98; border-color: rgba(255, 56, 89, 0.6); }

/* mobile: stats + chips stack */
@media (max-width: 880px) {
  [data-page="about"] .arc-stats,
  [data-page="about"] .arc-chips { grid-template-columns: 1fr; }
}

/* floating audio toggle — replaces the heavy bottom ribbon */
.audio-toggle-floating {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 150;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(7, 10, 14, 0.84);
  color: rgba(0, 229, 255, 0.85);
  border: 1px solid rgba(0, 229, 255, 0.32);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 200ms, color 200ms, background 200ms;
}
.audio-toggle-floating:hover {
  color: #00e5ff; border-color: rgba(0, 229, 255, 0.6);
}
.audio-toggle-floating .ai-off { display: none; }
.audio-toggle-floating.is-off .ai-on  { display: none; }
.audio-toggle-floating.is-off .ai-off { display: inline; color: rgba(255, 56, 89, 0.8); }
.hud-statusbar { display: none !important; }

/* ── scroll cue at bottom of hero ──────────────────────────────────── */
:is([data-page="home"], [data-page="about"]) .scroll-cue {
  position: absolute;
  left: 50%; bottom: 28px;
  transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(0, 229, 255, 0.7);
  text-decoration: none;
  z-index: 10;
  pointer-events: auto;
  animation: scrollCueBob 1.6s ease-in-out infinite;
}
:is([data-page="home"], [data-page="about"]) .scroll-cue .sc-arrow {
  width: 1px; height: 28px;
  background: linear-gradient(180deg, rgba(0, 229, 255, 0), rgba(0, 229, 255, 0.85));
}
:is([data-page="home"], [data-page="about"]) .scroll-cue:hover { color: #00e5ff; }
@keyframes scrollCueBob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

/* ── live node-lookup card (top-right HUD, populated on hover) ─────── */
.node-lookup {
  position: fixed;
  top: calc(var(--ribbon-h, 28px) + var(--nav-h, 56px) + 16px);
  right: 24px;
  width: 320px;
  z-index: 180;
  background: rgba(7, 10, 14, 0.94);
  border: 1px solid rgba(0, 229, 255, 0.32);
  border-radius: 10px;
  padding: 12px 14px 10px;
  color: #f4f6fa;
  font-family: var(--f-sans, system-ui);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 16px 50px -22px rgba(0, 0, 0, 0.95),
    0 0 64px rgba(0, 229, 255, 0.10);
  pointer-events: none;
  transform: translateY(-6px);
  opacity: 0;
  transition: opacity 220ms var(--ease, ease-out), transform 220ms var(--ease, ease-out);
}
.node-lookup.is-active {
  opacity: 1;
  transform: translateY(0);
}
.node-lookup .nl-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(0, 229, 255, 0.85);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 229, 255, 0.18);
}
.node-lookup .nl-id { color: rgba(245, 247, 250, 0.7); }
.node-lookup .nl-title {
  margin: 10px 0 8px;
  font-size: 16px; line-height: 1.25;
  font-weight: 600;
  color: #fafbff;
}
.node-lookup .nl-fields {
  margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
  font-size: 12px;
}
.node-lookup .nl-fields > div {
  display: flex; flex-direction: column; gap: 2px;
}
.node-lookup .nl-fields .k {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(245, 247, 250, 0.55);
}
.node-lookup .nl-fields .v {
  color: rgba(232, 236, 240, 0.95);
  font-weight: 500;
}
.node-lookup .nl-fields .v.is-hot { color: #ff6b7c; }
.node-lookup .nl-foot {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex; justify-content: space-between;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
}
.node-lookup .nl-tag { color: rgba(255, 211, 92, 0.95); }
.node-lookup .nl-hint { color: rgba(245, 247, 250, 0.45); }
@media (max-width: 880px) {
  .node-lookup { display: none; } /* hover-only — hide on touch */
}



/* ════════════════════════════════════════════════════════════════════
   HOME · 4-ACT NARRATIVE · minimal text, network-driven story
   Each act is a single small card anchored bottom-left of the viewport.
   The 3D transaction-network behind cycles through analytical states
   per act (state 0 → 2 → 3 → 5).
   ════════════════════════════════════════════════════════════════════ */

[data-page="home"] body { background: #06090d; }
[data-page="home"] main.page-home { min-height: auto; }

/* each act is one viewport tall — calm, no scroll-snap */
.page-home-net .section.section-net {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 0 0 10vh;
  border: 0;
}

/* the small caption card · bottom-left, generous margin */
.page-home-net .section-net > .container.act-card {
  position: relative;
  width: min(560px, calc(100% - 48px));
  max-width: 560px;
  margin-left: clamp(24px, 4vw, 64px);
  padding: 26px 30px 28px;
  background: rgba(7, 10, 14, 0.92);
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-left: 3px solid rgba(0, 229, 255, 0.7);
  border-radius: 8px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  text-align: left;
  box-shadow:
    0 24px 60px -28px rgba(0, 0, 0, 0.92),
    0 0 60px rgba(0, 229, 255, 0.05);
}

/* state-coloured borders so each act feels distinct */
.page-home-net .section-net[data-net="0"] > .container { border-left-color: rgba(0, 229, 255, 0.7); }
.page-home-net .section-net[data-net="2"] > .container { border-left-color: rgba(255, 56, 89, 0.75); border-color: rgba(255, 56, 89, 0.28); }
.page-home-net .section-net[data-net="3"] > .container { border-left-color: rgba(255, 211, 92, 0.85); border-color: rgba(255, 211, 92, 0.28); }
.page-home-net .section-net[data-net="5"] > .container { border-left-color: rgba(76, 255, 136, 0.7); border-color: rgba(76, 255, 136, 0.28); }

/* number badge */
.act-card .ac-num {
  display: inline-block;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 10px;
  margin-bottom: 14px;
  border: 1px solid rgba(0, 229, 255, 0.32);
  border-radius: 999px;
  color: rgba(0, 229, 255, 0.92);
}
.section-net[data-net="2"] .ac-num { color: rgba(255, 138, 152, 0.95); border-color: rgba(255, 56, 89, 0.4); }
.section-net[data-net="3"] .ac-num { color: rgba(255, 211, 92, 0.95); border-color: rgba(255, 211, 92, 0.4); }
.section-net[data-net="5"] .ac-num { color: rgba(76, 255, 136, 0.95); border-color: rgba(76, 255, 136, 0.4); }

/* big title */
.act-card .ac-title {
  margin: 0 0 12px;
  font-family: var(--f-display, Geist), system-ui;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05;
  font-weight: 380;
  letter-spacing: -0.022em;
  color: #fafbff;
  text-wrap: balance;
}
.act-card .ac-title em { font-style: italic; font-weight: 350; color: #00e5ff; }
.act-card .ac-title em.accent-rust  { color: #ff8a98; }
.act-card .ac-title em.accent-green { color: #4cff88; }

/* role / single line */
.act-card .ac-role {
  margin: 0 0 12px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px; letter-spacing: 0.06em;
  color: rgba(255, 211, 92, 0.92);
}
.act-card .ac-line {
  margin: 0;
  font-size: clamp(14.5px, 1.3vw, 17px);
  line-height: 1.55;
  color: rgba(238, 242, 246, 0.86);
  max-width: 56ch;
}

/* hero LinkedIn link (act 1) */
.act-card .ac-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  padding: 9px 16px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px; letter-spacing: 0.06em;
  color: #00e5ff;
  text-decoration: none;
  border: 1px solid rgba(0, 229, 255, 0.4);
  border-radius: 4px;
  transition: color 200ms, border-color 200ms, background 200ms;
}
.act-card .ac-link:hover { color: #fff; border-color: #00e5ff; background: rgba(0, 229, 255, 0.08); }

/* nav row at end (act 4) */
.act-card .ac-next {
  margin-top: 22px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.act-card .ac-next .acn-link {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px; letter-spacing: 0.06em;
  color: rgba(238, 242, 246, 0.88);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  transition: color 200ms, border-color 200ms, background 200ms;
}
.act-card .ac-next .acn-link:hover { color: #fff; border-color: rgba(76, 255, 136, 0.5); background: rgba(76, 255, 136, 0.06); }
.act-card .ac-next .acn-link.acn-cta { color: #ff8a98; border-color: rgba(255, 56, 89, 0.4); }
.act-card .ac-next .acn-link.acn-cta:hover { color: #fff; background: rgba(255, 56, 89, 0.12); border-color: #ff3859; }

@media (max-width: 760px) {
  .page-home-net .section-net > .container.act-card {
    margin-left: 16px; margin-right: 16px;
    width: auto;
  }
}


/* ════════════════════════════════════════════════════════════════════
   HOME · COMPLIANCE-ARC · 5-act narrative · fresh 3D scene behind
   Each act is a substantive caption card anchored bottom-left of viewport.
   The new "home-arc" 3D scene morphs from messy → structured per scroll.
   ════════════════════════════════════════════════════════════════════ */

[data-page="home"] body { background: #06090d; }
[data-page="home"] main.page-home { min-height: auto; }

.page-home-arc .section.section-arc {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  min-height: 100vh;
  /* push panels up off the very bottom — was 8vh (panel felt stuck to
     the floor); 18vh gives the 3D scene room to breathe below the
     panel and the lede sits closer to the optical centre. */
  padding: 0 0 18vh;
  border: 0;
}

.page-home-arc .section-arc > .container.arc-card {
  position: relative;
  width: min(640px, calc(100% - 48px));
  max-width: 640px;
  margin-left: clamp(24px, 4vw, 64px);
  padding: 28px 32px 30px;
  /* solid background instead of backdrop-filter blur — backdrop-filter is
     the #1 cause of scroll jank because it forces full-screen GPU
     compositing on every paint. Bumped opacity to 0.96 for legibility. */
  background: rgba(7, 10, 14, 0.96);
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-left: 3px solid rgba(0, 229, 255, 0.7);
  border-radius: 8px;
  text-align: left;
  box-shadow:
    0 24px 60px -28px rgba(0, 0, 0, 0.92),
    0 0 60px rgba(0, 229, 255, 0.05);
  /* hint to GPU so the panel becomes its own layer (cheaper repaints) */
  will-change: transform;
  transform: translateZ(0);
}
.page-home-arc .section-arc[data-arc="1"] > .container { border-left-color: rgba(255, 56, 89, 0.75); border-color: rgba(255, 56, 89, 0.28); }
.page-home-arc .section-arc[data-arc="2"] > .container { border-left-color: rgba(255, 56, 89, 0.75); border-color: rgba(255, 56, 89, 0.28); }
.page-home-arc .section-arc[data-arc="3"] > .container { border-left-color: rgba(255, 211, 92, 0.85); border-color: rgba(255, 211, 92, 0.30); max-width: 720px; }
.page-home-arc .section-arc[data-arc="5"] > .container { border-left-color: rgba(76, 255, 136, 0.7); border-color: rgba(76, 255, 136, 0.28); }
.page-home-arc #arc-5.section-arc > .container { max-width: 800px; }

.arc-card .ar-num {
  display: inline-block;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 10px;
  margin-bottom: 14px;
  border: 1px solid rgba(0, 229, 255, 0.32);
  border-radius: 999px;
  color: rgba(0, 229, 255, 0.92);
}
.section-arc[data-arc="1"] .ar-num { color: rgba(255, 138, 152, 0.95); border-color: rgba(255, 56, 89, 0.4); }
.section-arc[data-arc="2"] .ar-num { color: rgba(255, 138, 152, 0.95); border-color: rgba(255, 56, 89, 0.4); }
.section-arc[data-arc="3"] .ar-num { color: rgba(255, 211, 92, 0.95); border-color: rgba(255, 211, 92, 0.4); }
.section-arc[data-arc="5"] .ar-num { color: rgba(76, 255, 136, 0.95); border-color: rgba(76, 255, 136, 0.4); }

.arc-card .ar-title {
  margin: 0 0 12px;
  font-family: var(--f-display, Geist), system-ui;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.05;
  font-weight: 380;
  letter-spacing: -0.022em;
  color: #fafbff;
  text-wrap: balance;
}
.arc-card .ar-title em { font-style: italic; font-weight: 350; color: #00e5ff; }
.arc-card .ar-title em.accent-rust  { color: #ff8a98; }
.arc-card .ar-title em.accent-green { color: #4cff88; }

.arc-card .ar-lede {
  margin: 0 0 14px;
  font-size: clamp(14.5px, 1.3vw, 16.5px);
  line-height: 1.55;
  color: rgba(238, 242, 246, 0.86);
  max-width: 60ch;
}

.arc-card .ar-signature, .arc-card .ar-sig-block {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 12px 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}
.arc-card .ars-mono {
  color: rgba(255, 211, 92, 0.92);
  padding: 4px 10px;
  border: 1px solid rgba(255, 211, 92, 0.35);
  border-radius: 999px;
  font-weight: 600;
}
.arc-card .ars-line {
  color: rgba(238, 242, 246, 0.82);
  letter-spacing: 0.04em;
  text-transform: none;
  font-style: italic;
}

.arc-card .ar-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px;
  padding: 9px 16px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px; letter-spacing: 0.06em;
  color: #00e5ff;
  text-decoration: none;
  border: 1px solid rgba(0, 229, 255, 0.4);
  border-radius: 4px;
  transition: color 200ms, border-color 200ms, background 200ms;
}
.arc-card .ar-link:hover { color: #fff; border-color: #00e5ff; background: rgba(0, 229, 255, 0.08); }

/* MESS chips */
.mess-chips {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.mess-chips li {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; letter-spacing: 0.04em;
  padding: 6px 12px;
  border: 1px solid rgba(255, 56, 89, 0.32);
  background: rgba(255, 56, 89, 0.06);
  color: rgba(255, 138, 152, 0.95);
  border-radius: 999px;
}

/* METHOD steps — explicit grid-template-areas so placement is bulletproof.
   The number sits in column 1 across all 3 rows; title/blurb/disc each
   own one row in column 2. No auto-flow fallback can happen. */
.method-steps {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.method-steps .ms-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "num  title"
    "num  blurb"
    "num  disc";
  column-gap: 12px;
  row-gap: 4px;
  padding: 12px 14px;
  background: rgba(0, 229, 255, 0.05);
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-left: 3px solid rgba(255, 211, 92, 0.6);
  border-radius: 4px;
}
.method-steps .ms-num {
  grid-area: num;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  color: rgba(255, 211, 92, 0.95);
  align-self: start;
  padding-top: 2px;
}
.method-steps .ms-title {
  grid-area: title;
  margin: 0;
  font-family: var(--f-display, Geist), system-ui;
  font-size: 14.5px; font-weight: 600;
  line-height: 1.25;
  color: #fafbff;
  letter-spacing: -0.01em;
}
.method-steps .ms-blurb {
  grid-area: blurb;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(238, 242, 246, 0.82);
}
.method-steps .ms-disc {
  grid-area: disc;
  margin: 0;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 229, 255, 0.14);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px; letter-spacing: 0.08em;
  color: rgba(0, 229, 255, 0.85);
}

/* HOLD list */
.hold-list {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.hold-list li {
  padding: 10px 14px;
  background: rgba(76, 255, 136, 0.05);
  border: 1px solid rgba(76, 255, 136, 0.22);
  border-left: 3px solid rgba(76, 255, 136, 0.6);
  border-radius: 4px;
  font-size: 13.5px; line-height: 1.5;
  color: rgba(238, 242, 246, 0.84);
}
.hold-list strong { color: #fafbff; font-weight: 600; }

/* PROOF row */
.proof-row {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.proof-row .pr-card {
  padding: 14px 16px;
  background: rgba(255, 56, 89, 0.05);
  border: 1px solid rgba(255, 56, 89, 0.22);
  border-radius: 5px;
}
.proof-row .pr-id {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px; letter-spacing: 0.14em;
  color: rgba(255, 56, 89, 0.95);
  display: block; margin-bottom: 6px;
}
.proof-row .pr-title { margin: 0 0 6px; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: #fafbff; }
.proof-row .pr-blurb { margin: 0 0 8px; font-size: 12px; line-height: 1.45; color: rgba(238, 242, 246, 0.78); }
.proof-row .pr-where { font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: 0.06em; color: rgba(255, 211, 92, 0.85); }

.arc-card .ar-next {
  margin-top: 22px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.arc-card .ar-next .arn-link {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px; letter-spacing: 0.06em;
  color: rgba(238, 242, 246, 0.88);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  transition: color 200ms, border-color 200ms, background 200ms;
}
.arc-card .ar-next .arn-link:hover { color: #fff; border-color: rgba(76, 255, 136, 0.5); background: rgba(76, 255, 136, 0.06); }
.arc-card .ar-next .arn-link.arn-cta { color: #ff8a98; border-color: rgba(255, 56, 89, 0.4); }
.arc-card .ar-next .arn-link.arn-cta:hover { color: #fff; background: rgba(255, 56, 89, 0.12); border-color: #ff3859; }

@media (max-width: 760px) {
  .page-home-arc .section-arc > .container.arc-card {
    margin-left: 16px; margin-right: 16px;
    width: auto;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PERF · HOME — kill expensive global atmospheric overlays.
   The body::before grid-drift and body::after CRT-scanline-with-blend
   were forcing full-viewport GPU compositing on every scroll tick.
   The 3D canvas already provides the cyber atmosphere. These are pure
   tax with no visual benefit on home / about / lab / contact.
   ════════════════════════════════════════════════════════════════════ */
[data-page="home"]  body::before,
[data-page="home"]  body::after,
[data-page="about"] body::before,
[data-page="about"] body::after,
[data-page="lab"]   body::before,
[data-page="lab"]   body::after,
[data-page="contact"] body::before,
[data-page="contact"] body::after { display: none !important; }
[data-page="home"]  .grain,
[data-page="home"]  .dust,
[data-page="home"]  .warm-gradient,
[data-page="about"] .grain,
[data-page="about"] .dust,
[data-page="about"] .warm-gradient,
[data-page="lab"]   .grain,
[data-page="lab"]   .dust,
[data-page="lab"]   .warm-gradient,
[data-page="contact"] .grain,
[data-page="contact"] .dust,
[data-page="contact"] .warm-gradient { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   HOME · arc-section reveal animations on .in-view
   When IntersectionObserver adds `.in-view` to a `.section-arc`, every
   content element below the title fades + slides into place with a
   staggered delay per child, so each section's content "lands" as it
   scrolls into view.
   ════════════════════════════════════════════════════════════════════ */

/* shared base — hidden state */
[data-page="home"] .section-arc .ar-num,
[data-page="home"] .section-arc .ar-title,
[data-page="home"] .section-arc .ar-lede,
[data-page="home"] .section-arc .ar-signature,
[data-page="home"] .section-arc .ar-link,
[data-page="home"] .section-arc .mess-chips li,
[data-page="home"] .section-arc .method-steps .ms-step,
[data-page="home"] .section-arc .hold-list li,
[data-page="home"] .section-arc .proof-row .pr-card,
[data-page="home"] .section-arc .ar-sig-block,
[data-page="home"] .section-arc .ar-next {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 480ms cubic-bezier(.22,.61,.36,1),
              transform 540ms cubic-bezier(.22,.61,.36,1);
}

/* in-view → reveal */
[data-page="home"] .section-arc.in-view .ar-num,
[data-page="home"] .section-arc.in-view .ar-title,
[data-page="home"] .section-arc.in-view .ar-lede,
[data-page="home"] .section-arc.in-view .ar-signature,
[data-page="home"] .section-arc.in-view .ar-link,
[data-page="home"] .section-arc.in-view .mess-chips li,
[data-page="home"] .section-arc.in-view .method-steps .ms-step,
[data-page="home"] .section-arc.in-view .hold-list li,
[data-page="home"] .section-arc.in-view .proof-row .pr-card,
[data-page="home"] .section-arc.in-view .ar-sig-block,
[data-page="home"] .section-arc.in-view .ar-next {
  opacity: 1;
  transform: translateY(0);
}

/* per-element delays so the section "unfolds" rather than popping */
[data-page="home"] .section-arc.in-view .ar-num       { transition-delay: 60ms; }
[data-page="home"] .section-arc.in-view .ar-title     { transition-delay: 120ms; }
[data-page="home"] .section-arc.in-view .ar-lede      { transition-delay: 220ms; }
[data-page="home"] .section-arc.in-view .ar-signature { transition-delay: 320ms; }
[data-page="home"] .section-arc.in-view .ar-link      { transition-delay: 400ms; }

/* mess-chips — staggered chip-by-chip wave */
[data-page="home"] .section-arc.in-view .mess-chips li:nth-child(1) { transition-delay: 320ms; }
[data-page="home"] .section-arc.in-view .mess-chips li:nth-child(2) { transition-delay: 380ms; }
[data-page="home"] .section-arc.in-view .mess-chips li:nth-child(3) { transition-delay: 440ms; }
[data-page="home"] .section-arc.in-view .mess-chips li:nth-child(4) { transition-delay: 500ms; }
[data-page="home"] .section-arc.in-view .mess-chips li:nth-child(5) { transition-delay: 560ms; }
[data-page="home"] .section-arc.in-view .mess-chips li:nth-child(6) { transition-delay: 620ms; }
[data-page="home"] .section-arc.in-view .mess-chips li:nth-child(7) { transition-delay: 680ms; }

/* method-steps — staggered step-by-step (slide from the left for steps) */
[data-page="home"] .section-arc .method-steps .ms-step { transform: translateX(-18px); }
[data-page="home"] .section-arc.in-view .method-steps .ms-step { transform: translateX(0); }
[data-page="home"] .section-arc.in-view .method-steps .ms-step:nth-child(1) { transition-delay: 320ms; }
[data-page="home"] .section-arc.in-view .method-steps .ms-step:nth-child(2) { transition-delay: 410ms; }
[data-page="home"] .section-arc.in-view .method-steps .ms-step:nth-child(3) { transition-delay: 500ms; }
[data-page="home"] .section-arc.in-view .method-steps .ms-step:nth-child(4) { transition-delay: 590ms; }
[data-page="home"] .section-arc.in-view .method-steps .ms-step:nth-child(5) { transition-delay: 680ms; }
[data-page="home"] .section-arc.in-view .method-steps .ms-step:nth-child(6) { transition-delay: 770ms; }

/* hold-list — outcome lines, staggered */
[data-page="home"] .section-arc.in-view .hold-list li:nth-child(1) { transition-delay: 320ms; }
[data-page="home"] .section-arc.in-view .hold-list li:nth-child(2) { transition-delay: 400ms; }
[data-page="home"] .section-arc.in-view .hold-list li:nth-child(3) { transition-delay: 480ms; }
[data-page="home"] .section-arc.in-view .hold-list li:nth-child(4) { transition-delay: 560ms; }
[data-page="home"] .section-arc.in-view .hold-list li:nth-child(5) { transition-delay: 640ms; }

/* proof cards — fade in three at a time with a small stagger */
[data-page="home"] .section-arc.in-view .proof-row .pr-card:nth-child(1) { transition-delay: 320ms; }
[data-page="home"] .section-arc.in-view .proof-row .pr-card:nth-child(2) { transition-delay: 420ms; }
[data-page="home"] .section-arc.in-view .proof-row .pr-card:nth-child(3) { transition-delay: 520ms; }

[data-page="home"] .section-arc.in-view .ar-sig-block { transition-delay: 600ms; }
[data-page="home"] .section-arc.in-view .ar-next      { transition-delay: 720ms; }

/* respect prefers-reduced-motion — kill the transitions */
@media (prefers-reduced-motion: reduce) {
  [data-page="home"] .section-arc *,
  [data-page="home"] .section-arc.in-view * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE GATE  ·  desktop-only "you're missing out" overlay
   ════════════════════════════════════════════════════════════════════ */

.mobile-gate { display: none; }

@media (max-width: 760px) {
  .mobile-gate {
    display: flex;
    position: fixed; inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    /* small breathing margin top + bottom; no internal scroll */
    padding: 12px 14px;
    color: #f4f6fa;
    font-family: var(--f-sans, Geist, system-ui, sans-serif);
    overflow: hidden;
    /* transparent backdrop so the home-arc 3D scene shows through —
       cards fall and tie into lanes behind the gate card. */
    background: transparent;
    animation: mg-fade-in 480ms cubic-bezier(.22,.61,.36,1) both;
  }
  body.mg-active { overflow: hidden; }
  /* Keep the 3D canvas rendering — the user wants to see the cards
     fall and tie behind the gate. The gate's own backdrop is now
     semi-transparent so the scene shows through. Other chrome (text
     panels, ribbon, nav, colophon) stays hidden so it doesn't compete. */
  body.mg-active main,
  body.mg-active .ribbon,
  body.mg-active .topnav,
  body.mg-active .colophon,
  body.mg-active .audio-toggle,
  body.mg-active .scroll-progress { display: none !important; }
}

@keyframes mg-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── ambient backdrop layers ─────────────────────────────────────── */
.mg-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 80% 0%,    rgba(0, 229, 255, 0.07),  transparent 55%),
    radial-gradient(ellipse at 0% 100%,   rgba(255, 56, 89, 0.06),  transparent 55%),
    radial-gradient(ellipse at 50% 50%,   rgba(255, 211, 92, 0.03), transparent 60%);
}
.mg-scan {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.018) 0px,
    rgba(255, 255, 255, 0.018) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: screen;
}
.mg-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(0, 229, 255, 0.18) 1px, transparent 1.5px);
  background-size: 32px 32px;
  background-position: 0 0;
  opacity: 0.35;
  animation: mg-drift 18s linear infinite;
}
@keyframes mg-drift {
  from { background-position: 0 0; }
  to   { background-position: 32px 32px; }
}

/* ── card ────────────────────────────────────────────────────────── */
.mg-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  /* card fills available viewport height with small top/bottom gap;
     internal sections compress proportionally so nothing overflows */
  max-height: 100%;
  padding: 18px 20px 18px;
  background: linear-gradient(180deg, rgba(14, 22, 32, 0.96), rgba(7, 10, 14, 0.96));
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-left: 3px solid rgba(0, 229, 255, 0.7);
  border-radius: 10px;
  box-shadow:
    0 32px 80px -32px rgba(0, 0, 0, 0.95),
    0 0 80px rgba(0, 229, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  text-align: left;
  animation: mg-rise 600ms cubic-bezier(.22,.61,.36,1) both 120ms;
  display: flex;
  flex-direction: column;
}
@keyframes mg-rise {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
/* corner ticks — UI-corner accent like the home arc-card */
.mg-card::before,
.mg-card::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid rgba(0, 229, 255, 0.5);
  pointer-events: none;
}
.mg-card::before { top: -1px;  right: -1px; border-left: 0; border-bottom: 0; }
.mg-card::after  { bottom: -1px; left: -1px; border-right: 0; border-top: 0;
                   border-color: rgba(255, 56, 89, 0.5); }

/* ── status strip ────────────────────────────────────────────────── */
.mg-strip {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
  font-family: var(--f-mono, ui-monospace, Menlo, monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mg-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff3859;
  position: relative;
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(255, 56, 89, 0.6);
  animation: mg-pulse 1.8s ease-out infinite;
}
@keyframes mg-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(255, 56, 89, 0.55); }
  80%  { box-shadow: 0 0 0 10px rgba(255, 56, 89, 0); }
  100% { box-shadow: 0 0 0 0   rgba(255, 56, 89, 0); }
}
.mg-strip-l { color: rgba(255, 138, 152, 0.95); }
.mg-strip-sep { color: rgba(244, 246, 250, 0.25); margin: 0 2px; }
.mg-strip-r { color: rgba(244, 246, 250, 0.55); }

/* ── glyph (animated icosahedron echoing the home gold core) ────── */
.mg-glyph {
  position: relative;
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  display: grid; place-items: center;
}
.mg-glyph .mg-glyph-svg { width: 64px; height: 64px; }
.mg-glyph-halo {
  position: absolute; inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 211, 92, 0.45) 0%,
    rgba(255, 211, 92, 0.10) 38%,
    transparent 70%);
  filter: blur(2px);
  animation: mg-halo-pulse 2.6s ease-in-out infinite;
}
@keyframes mg-halo-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.12); opacity: 1; }
}
.mg-glyph-svg {
  position: relative;
  filter: drop-shadow(0 0 14px rgba(255, 211, 92, 0.5));
}
.mg-glyph-rot {
  transform-origin: 0 0;
  animation: mg-glyph-spin 12s linear infinite;
}
@keyframes mg-glyph-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* ── tag pill, title, body ──────────────────────────────────────── */
.mg-tag {
  display: inline-block;
  font-family: var(--f-mono, ui-monospace, Menlo, monospace);
  font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase;
  padding: 3px 10px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 56, 89, 0.42);
  background: rgba(255, 56, 89, 0.06);
  border-radius: 999px;
  color: rgba(255, 138, 152, 0.95);
}

.mg-title {
  margin: 0 0 10px;
  font-family: var(--f-display, Geist), system-ui, sans-serif;
  font-size: clamp(26px, 7.5vw, 34px);
  line-height: 1.04;
  font-weight: 380;
  letter-spacing: -0.024em;
  color: #fafbff;
  text-wrap: balance;
}
.mg-title em {
  font-style: italic; font-weight: 350;
  color: #ff8a98;
  background: linear-gradient(180deg, #ff8a98, #ff5e7d);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mg-body {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.78);
  max-width: 36ch;
}

/* ── scene-preview chips ─────────────────────────────────────────── */
.mg-chips {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.mg-chips li {
  font-family: var(--f-mono, ui-monospace, Menlo, monospace);
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid;
}
.mc-rust  { color: rgba(255, 138, 152, 0.95); border-color: rgba(255, 56, 89, 0.45);  background: rgba(255, 56, 89, 0.06); }
.mc-cyan  { color: rgba(120, 240, 255, 0.95); border-color: rgba(0,   229, 255, 0.45); background: rgba(0,   229, 255, 0.06); }
.mc-gold  { color: rgba(255, 222, 130, 0.95); border-color: rgba(255, 211, 92, 0.50); background: rgba(255, 211, 92, 0.06); }
.mc-green { color: rgba(140, 255, 178, 0.95); border-color: rgba(76,  255, 136, 0.45); background: rgba(76,  255, 136, 0.06); }

/* ── meta block (mono key/value rows) ────────────────────────────── */
.mg-meta {
  margin: 0 0 14px;
  padding: 9px 12px;
  background: rgba(0, 229, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  font-family: var(--f-mono, ui-monospace, Menlo, monospace);
  font-size: 10.5px;
  letter-spacing: 0.06em;
}
.mg-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.mg-row + .mg-row { border-top: 1px dashed rgba(255, 255, 255, 0.05); }
.mg-row dt { color: rgba(244, 246, 250, 0.5);  text-transform: uppercase; flex: 0 0 auto; }
.mg-row dd { margin: 0; color: rgba(244, 246, 250, 0.92); text-align: right; }

/* ── bypass button — split label / arrow with hover sweep ───────── */
.mg-bypass {
  appearance: none;
  display: inline-flex; align-items: stretch;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(0, 229, 255, 0.42);
  border-radius: 6px;
  font-family: var(--f-mono, ui-monospace, Menlo, monospace);
  font-size: 12.5px; letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 200ms, box-shadow 200ms;
}
.mg-bypass-l, .mg-bypass-r {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 14px;
  color: rgba(0, 229, 255, 0.95);
  transition: color 200ms, background 200ms, transform 200ms;
}
.mg-bypass-l { flex: 1; border-right: 1px solid rgba(0, 229, 255, 0.22); }
.mg-bypass-r { flex: 0 0 52px; font-size: 16px; }
.mg-bypass:hover,
.mg-bypass:active,
.mg-bypass:focus-visible {
  border-color: rgba(0, 229, 255, 0.85);
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.15);
}
.mg-bypass:hover .mg-bypass-l,
.mg-bypass:active .mg-bypass-l { color: #fff; background: rgba(0, 229, 255, 0.08); }
.mg-bypass:hover .mg-bypass-r,
.mg-bypass:active .mg-bypass-r { color: #fff; background: rgba(0, 229, 255, 0.14); transform: translateX(2px); }

/* ── footer line ─────────────────────────────────────────────────── */
.mg-foot {
  margin: 12px 0 0;
  font-family: var(--f-mono, ui-monospace, Menlo, monospace);
  font-size: 9.5px; letter-spacing: 0.10em;
  color: rgba(244, 246, 250, 0.38);
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-gate, .mg-card, .mg-glyph-halo, .mg-glyph-rot,
  .mg-pulse, .mg-dots {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PAGE LOADING BAR
   Slim cyan→rust gradient at the top of the viewport. Activated by
   app.js when user clicks an internal link. Pure transform-only
   animation so it's cheap; no full-viewport overlay.
   ════════════════════════════════════════════════════════════════════ */
.page-loader {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  z-index: 9000;
  pointer-events: none;
  background: transparent;
  overflow: hidden;
  opacity: 0;
  transition: opacity 200ms ease;
}
.page-loader.is-loading { opacity: 1; }
.page-loader::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 229, 255, 0.85) 30%,
    rgba(255, 56, 89, 0.95) 70%,
    transparent 100%);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.5);
  animation: pl-sweep 1.1s linear infinite;
}
@keyframes pl-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(380%); }
}
@media (prefers-reduced-motion: reduce) {
  .page-loader::after { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   SCROLL CUE — hovering "scroll for more" arrow at the bottom-centre
   ════════════════════════════════════════════════════════════════════ */
.scroll-cue {
  position: fixed;
  bottom: clamp(18px, 3vh, 32px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: rgba(0, 229, 255, 0.85);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  pointer-events: auto;
  transition: opacity 360ms ease, transform 360ms ease;
  animation: sc-bob 2.2s ease-in-out infinite;
  /* hidden once user starts scrolling — body.is-scrolled flag */
  opacity: 0.85;
}
.scroll-cue:hover { color: #fff; }
.scroll-cue .sc-label {
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}
.scroll-cue .sc-arrow {
  display: inline-flex;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.45));
}
@keyframes sc-bob {
  0%, 100% { transform: translateX(-50%) translateY(0);   opacity: 0.85; }
  50%      { transform: translateX(-50%) translateY(6px); opacity: 1; }
}
body.is-scrolled .scroll-cue {
  opacity: 0;
  pointer-events: none;
  animation-play-state: paused;
}
@media (max-width: 760px) {
  .scroll-cue { bottom: 14px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   ABOUT · INTRO SUB-LINE + BUILT SECTION
   ════════════════════════════════════════════════════════════════════ */

/* About-page intro paragraphs (subtitle + lede) — share the same
   scale + line-height. Subtitle is bold + cyan to read as a kicker
   above the body copy; the three lede paragraphs stay neutral body. */
[data-page="about"] .intro-sub,
[data-page="about"] .intro-lede {
  font-family: var(--f-display);
  font-weight: 350;
  font-style: normal;
  font-size: clamp(14.5px, 1.35vw, 16.5px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 64ch;
  margin: 0 auto 12px;
  letter-spacing: 0;
  text-align: center;
}
[data-page="about"] .intro-sub {
  font-weight: 600;
  color: var(--slate);
  margin-bottom: 18px;
}

/* About-page hero — tight headline so "Analyst by Instinct, Analyst
   by Design." fits on one/two confident lines (was wrapping mid-phrase
   under the global .h-display 76px max). Centred to match the body
   copy and the quick-rail beneath it. */
[data-page="about"] .section-about-intro .h-display.page-h1 {
  font-size: clamp(28px, 3.8vw, 46px);
  line-height: 1.08;
  max-width: 30ch;
  margin: 0 auto clamp(14px, 1.6vw, 20px);
  text-align: center;
}
[data-page="about"] .section-about-intro .section-tag {
  justify-content: center;
}

/* Suppress the auto-injected rust .h-underline on /about — was a
   left-aligned 220px bar that no longer fits the centred layout. */
[data-page="about"] .h-underline { display: none !important; }

/* Section headlines (h2) — scoped DOWN so hierarchy reads h1 > h2.
   The global .h-display goes up to 76px which dwarfed the about h1.
   Wide max-width so longer headlines (e.g. "What I've designed and
   shipped — in-house, in production.") fit on a single line.
   Centred + section-tag centred for consistent rhythm with the intro. */
[data-page="about"] .section:not(.section-about-intro) .h-display.section-h,
[data-page="about"] .section .h-display.section-h {
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.2;
  max-width: 64ch;
  margin: 0 auto clamp(16px, 2vw, 24px);
  text-wrap: balance;
  text-align: center;
}
[data-page="about"] .section .section-tag {
  justify-content: center;
}
/* caps-legend — quietly centred under the capabilities title */
[data-page="about"] .caps-legend {
  justify-content: center;
  text-align: center;
}

/* Consistent vertical rhythm between sections. The OUTER section padding
   creates space between section panels; the container keeps its own
   INNER padding so content has breathing room inside the bordered box. */
[data-page="about"] .section-about-intro     { padding: clamp(20px, 3vw, 36px) 0 clamp(16px, 2vw, 28px); min-height: 0; }
[data-page="about"] .section-built           { padding: clamp(20px, 3vw, 36px) 0; }
[data-page="about"] .section-records         { padding: clamp(20px, 3vw, 36px) 0; }
[data-page="about"] .section-caps            { padding: clamp(20px, 3vw, 36px) 0; }
[data-page="about"] .section-edu             { padding: clamp(20px, 3vw, 36px) 0; }
[data-page="about"] .section-cta             { padding: clamp(16px, 2vw, 28px) 0 clamp(40px, 5vw, 72px); }

/* Section tag pills — quieter, smaller, no ornate decoration. The
   "ABOUT · CAREER, CAPABILITIES…" pill was visually competing with
   the headline below it. */
[data-page="about"] .section-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--f-mono, ui-monospace, Menlo, monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  max-width: none;
}
[data-page="about"] .section-tag .tag-num  { color: var(--rust); }
[data-page="about"] .section-tag .tag-lbl  { color: var(--ink); font-weight: 500; letter-spacing: 0.18em; }
[data-page="about"] .section-tag .tag-rule { flex: 0 0 28px; height: 1px; background: var(--hairline); }
[data-page="about"] .section-tag .tag-rule::after { display: none; }
[data-page="about"] .section-tag .tag-name { color: rgba(238, 242, 246, 0.45); font-size: 10.5px; letter-spacing: 0.12em; }

/* Quick rail (BUILT · RECORDS · CAPABILITIES · EDUCATION) — refined */
[data-page="about"] .about-quick-rail {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 14px 24px;
  justify-content: center;
  padding: 14px 0 0;
  margin: 18px 0 0;
  border-top: 1px dashed var(--hairline-2);
}
[data-page="about"] .about-quick-rail a {
  font-family: var(--f-mono, ui-monospace, Menlo, monospace);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(0, 229, 255, 0.80);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px dashed transparent;
  transition: color 200ms, border-color 200ms;
}
[data-page="about"] .about-quick-rail a:hover {
  color: #fff;
  border-bottom-color: rgba(0, 229, 255, 0.6);
}

/* RECORDS — slightly tighter cards, smaller title */
[data-page="about"] .records-timeline { gap: 12px; margin-top: 8px; }
[data-page="about"] .rec-card { padding: 14px 18px; border-radius: 6px; }
[data-page="about"] .rec-head { font-size: 10px; gap: 10px; }
[data-page="about"] .rec-title { font-size: clamp(15px, 1.5vw, 17px); margin: 8px 0 2px; font-weight: 500; }
[data-page="about"] .rec-org   { font-size: 12px; margin-bottom: 12px; }
[data-page="about"] .rec-dl    { font-size: 13px; gap: 5px 16px; }
[data-page="about"] .rec-dl dt { font-size: 10px; padding-top: 3px; }

/* CAPABILITIES — quieter rows */
[data-page="about"] .caps-legend { font-size: 10.5px; margin: 12px 0 16px; }
[data-page="about"] .caps-grid   { gap: 6px 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
[data-page="about"] .cap-row     { padding: 8px 12px; font-size: 13px; gap: 12px; border-radius: 4px; }
[data-page="about"] .cap-dot     { width: 10px; height: 10px; }

/* EDUCATION — neat compact rows */
[data-page="about"] .edu-list { gap: 6px; margin-top: 8px; }
[data-page="about"] .edu-row  { padding: 10px 14px; font-size: 13px; gap: 14px; border-radius: 4px; }
[data-page="about"] .edu-row .edu-period { font-size: 11px; }

/* CTA — smaller buttons, consistent with the rest */
[data-page="about"] .cta-row  { gap: 12px; }
[data-page="about"] .cta-link { font-size: 12px; padding: 9px 16px; letter-spacing: 0.08em; }

/* ── BUILT list — horizontal 2-column grid, compact cards ─────── */
.section-built {
  padding: clamp(36px, 5vw, 64px) 0;
}
.section-built .section-h {
  font-size: clamp(22px, 2.6vw, 30px);
  margin-bottom: clamp(20px, 2.6vw, 28px);
}

.built-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.built-item {
  position: relative;
  padding: 12px 14px;
  background: rgba(0, 229, 255, 0.025);
  border: 1px solid var(--hairline);
  border-left: 2px solid rgba(0, 229, 255, 0.55);
  border-radius: 6px;
  transition: border-color 220ms var(--ease, ease),
              background 220ms var(--ease, ease);
  display: flex;
  flex-direction: column;
}
.built-item:hover {
  border-left-color: rgba(255, 56, 89, 0.7);
  background: rgba(0, 229, 255, 0.04);
}

.bi-head {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 4px;
}
.bi-num {
  font-family: var(--f-mono, ui-monospace, Menlo, monospace);
  font-size: 9px; letter-spacing: 0.16em;
  color: var(--ink-mute);
  padding: 1px 6px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  flex: 0 0 auto;
}
.bi-title {
  margin: 0;
  font-family: var(--f-display, Geist, system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink, #fafbff);
  flex: 1 1 auto;
  text-align: left;
}
.bi-tag {
  font-family: var(--f-mono, ui-monospace, Menlo, monospace);
  font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(0, 229, 255, 0.85);
  padding: 2px 6px;
  border: 1px solid rgba(0, 229, 255, 0.32);
  background: rgba(0, 229, 255, 0.05);
  border-radius: 3px;
  flex: 0 0 auto;
}

.bi-body {
  margin: 0;
  font-family: var(--f-display, Geist, system-ui, sans-serif);
  font-weight: 350;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: left;
}

/* single column on narrow viewports */
@media (max-width: 720px) {
  .built-list { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .built-item { padding: 10px 12px; }
  .bi-title   { font-size: 13.5px; flex-basis: 100%; }
  .bi-tag     { order: 2; }
}