/* ════════════════════════════════════════════════════════════════
   francobernal.ca — styles.css
   Extracted verbatim from the original single-file build, split for
   maintainability (Production v1). Two original <style> blocks merged:
   [1] core cosmic UI + Sentinel stage   [2] HUD upgrade layer.
   ════════════════════════════════════════════════════════════════ */

  /* ── A11y utilities (AODA/WCAG 2.1 AA) ──
     sr-only: content for screen readers + SEO crawlers, visually hidden.
     focus-visible: a keyboard-only focus ring that never shows on mouse/touch,
     so it adds zero visual noise to the cinematic experience.
     skip-link: appears only when tabbed to. */
  .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  :focus-visible {
    outline: 2px solid #d8d8da;
    outline-offset: 3px;
    border-radius: 2px;
  }
  .skip-link {
    position: absolute;
    left: 12px; top: -64px;
    z-index: 200;
    padding: 10px 16px;
    background: #0a0a0a;
    color: #e8e8ea;
    font-family: monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-decoration: none;
    border: 1px solid rgba(232,232,234,0.4);
    transition: top 0.2s ease;
  }
  .skip-link:focus { top: 12px; }

  :root {
    --bg: #000;
    --fg: #e8e8ea;
    --muted: rgba(232,232,234,0.42);
    --faint: rgba(232,232,234,0.18);
    --line: rgba(232,232,234,0.06);
    --accent: #d8d8da;
    --font-display: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-editorial: 'Instrument Serif', Georgia, serif;
    --font-system: 'Geist Mono', ui-monospace, monospace;
    --hud: #a8d8ff;

    --pad: 20px;
    --topbar-h: 56px;
    --botbar-h: 64px;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  }

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

  html {
    background: var(--bg);
    color: var(--fg);
    font-family: 'Geist Mono', ui-monospace, monospace;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    /* Suppress the iOS rubber-band overscroll at the document level. On the
       first fling to the bottom this bounce fought the page's settling height
       and read as a glitch; containing it here makes hitting the end feel like
       a clean, intentional stop. */
    overscroll-behavior-y: none;
  }

  body {
    background: var(--bg);
    overflow-x: hidden;
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-overflow-scrolling: touch;
  }

  canvas {
    position: fixed;
    display: block;
    inset: 0;
    pointer-events: none;
    transform: translateZ(0);
  }
  canvas#neural-canvas { z-index: 1; }
  canvas#fx-canvas { z-index: 3; }

  /* Grain */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    opacity: 0.16;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  }

  /* Vignette */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9;
    background: radial-gradient(ellipse 95% 90% at center, transparent 40%, rgba(0,0,0,0.85) 100%);
  }

  /* ── HOLOGRAPHIC SCANLINES + FLICKER ──
     A fixed, GPU-composited overlay of ultra-fine horizontal lines that gives
     the whole field a "projected hologram" quality. Near-invisible at rest
     (--holo intensity driven by JS at peak moments). The flicker animation is
     extremely subtle and only perceptible during resonance/unity. */
  body.booted .holo-scan {
    animation: holo-idle-drift 16s linear infinite;
  }
  @keyframes holo-idle-drift {
    0% { background-position: 0 0; }
    100% { background-position: 0 14px; }
  }
  .holo-scan {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 8;
    --holo: 0;                 /* 0 idle → 1 peak, set from JS */
    opacity: calc(0.07 + var(--holo) * 0.24);
    mix-blend-mode: screen;
    background-image: repeating-linear-gradient(
      0deg,
      rgba(170,190,225,0.05) 0px,
      rgba(170,190,225,0.05) 1px,
      transparent 1px,
      transparent 3px);
    background-size: 100% 3px;
    will-change: opacity, background-position;
  }
  .holo-scan.flicker { animation: holo-flicker 0.18s steps(2) infinite; }
  @keyframes holo-flicker {
    0%   { background-position: 0 0; opacity: var(--hf, 0.2); }
    50%  { background-position: 0 1px; opacity: calc(var(--hf, 0.2) * 0.7); }
    100% { background-position: 0 0; opacity: var(--hf, 0.2); }
  }
  /* a slow drifting iridescent sheen — chrome-spectral, only at peaks */
  .holo-sheen {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 8;
    opacity: 0;
    mix-blend-mode: screen;
    background: linear-gradient(115deg,
      transparent 35%,
      rgba(140,200,235,0.05) 47%,
      rgba(235,200,150,0.05) 53%,
      transparent 65%);
    background-size: 300% 100%;
    transition: opacity 1.2s ease;
  }
  .holo-sheen.on { opacity: 1; animation: holo-sheen-drift 8s ease-in-out infinite; }
  @keyframes holo-sheen-drift {
    0%, 100% { background-position: 0% 0; }
    50% { background-position: 100% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    body.booted .holo-scan { animation: none !important; }
    .holo-scan.flicker { animation: none !important; }
    .holo-sheen.on { animation: none !important; opacity: 0.4; }
    .nav-readout-dot { animation: none !important; opacity: 0.85; }
  }

  /* ── TOP / BOTTOM CONSOLE BARS ── */
  .console-top {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 20;
    height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) var(--pad) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .console-top .right {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--muted);
    text-transform: uppercase;
    font-weight: 500;
    font-feature-settings: "tnum" on;
  }

  .console-bot {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 20;
    padding: 0 var(--pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(var(--botbar-h) + env(safe-area-inset-bottom, 0px));
  }
  .console-bot .left, .console-bot .right {
    display: flex; flex-direction: column; gap: 2px; line-height: 1.2;
  }
  .console-bot .dim { color: var(--faint); font-size: 8px; }
  .console-bot .fg { color: var(--fg); }
  .console-bot .right { align-items: flex-end; }

  .live-tag { display: inline-flex; align-items: center; gap: 6px; }
  .live-dot {
    width: 4px; height: 4px; border-radius: 50%;
    /* The one persistent chromatic note on the page — a warm living signal
       against the monochrome. Subtle enough to feel like a status LED. */
    background: #ffd9a8;
    box-shadow: 0 0 7px rgba(255,200,140,0.75);
    animation: blink 2s steps(2, end) infinite;
  }
  @keyframes blink { 50% { opacity: 0.25; } }

  /* PROGRESS RAIL */
  .rail {
    position: fixed;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .rail-item {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }
  .rail-item::after {
    content: '';
    width: 14px;
    height: 1px;
    background: var(--faint);
    transition: width 0.5s var(--ease-out), background 0.4s ease;
  }
  .rail-item.active::after {
    width: 22px;
    background: var(--fg);
  }

  /* MAIN */
  main { position: relative; z-index: 5; }

  section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(38px, 5vh, 72px) var(--pad);
  }

  /* ── HERO ── */
  #hero {
    min-height: 90vh;
    min-height: 90svh;
    justify-content: center;
    padding: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 16px) var(--pad)
             calc(var(--botbar-h) + env(safe-area-inset-bottom, 0px) + 16px);
  }

  /* ── THE SENTINEL · hero WebGL stage ──
     Sits behind the console (its own layer inside the hero) and above the
     fixed cosmic canvases (main is z5 > canvas z1-4). Pointer-events none —
     the entity watches; it never blocks. Fades in only once the renderer
     has produced its first frame AND boot completes (class on <body>). */
  .sentinel-stage {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.6s ease;
    contain: layout paint;
    overflow: hidden;
  }
  body.booted.sentinel-live .sentinel-stage { opacity: 1; }
  #sentinel-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  /* grounding pool — the entity emerges out of a quiet light well at the
     bottom edge of the hero, so the crop reads intentional, not cut off */
  .sentinel-floor {
    position: absolute;
    left: 50%;
    bottom: -4%;
    width: min(120vw, 1100px);
    height: 26vh;
    transform: translateX(-50%);
    background:
      radial-gradient(55% 70% at 50% 100%, rgba(168,216,255,0.10), transparent 70%),
      radial-gradient(80% 100% at 50% 100%, rgba(0,0,0,0.85), transparent 72%);
    pointer-events: none;
  }
  @media (min-width: 1024px) {
    .sentinel-floor { left: auto; right: -14vw; transform: none; }
  }
  /* hero content rides above the entity */
  #hero .console { position: relative; z-index: 2; }
  #hero .scroll-hint { z-index: 2; }

  /* ── OPERATOR CARD · the human behind the build (Contact) ── */
  .operator-card {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 36px auto 10px;
    max-width: 420px;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(165deg, rgba(16,18,24,0.66), rgba(7,8,11,0.72));
    text-align: left;
  }
  .operator-card img {
    width: 88px;
    height: 88px;
    border-radius: 12px;
    object-fit: cover;
    object-position: 50% 14%;
    border: 1px solid rgba(232,232,234,0.16);
    filter: saturate(0.85) contrast(1.03);
    flex-shrink: 0;
    display: block;
  }
  .operator-card .oc-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
  }
  .operator-card .oc-name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--fg);
  }
  .operator-card .oc-role {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 15px;
    color: var(--accent);
    letter-spacing: -0.01em;
    line-height: 1.32;
  }
  .operator-card .oc-loc {
    font-family: 'Geist Mono', monospace;
    font-size: 8px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 2px;
  }

  .console {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(15px, 2.6vh, 28px);
  }

  .console-row.meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    font-size: 9px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--muted);
    animation: rise 1.4s ease-out 1.8s both;
  }

  .console-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
  }
  .console-cell .k { color: var(--faint); font-size: 8px; }
  .console-cell .v { color: var(--fg); font-size: 10px; font-weight: 500; }
  .console-cell .v em {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 13px;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--accent);
  }

  .console-row.name {
    position: relative;
    animation: rise 1.6s var(--ease-out) 2.0s both;
  }
  /* ── SVG GOLD SIGNATURE — warm luxury chrome, distinct from Sentinel gunmetal ── */
  .name-display {
    --wake: 0;
    position: relative;
    width: 100%;
    max-width: min(100%, 600px);
    line-height: 0.86;
    transform-origin: left center;
    will-change: transform;
  }
  @media (min-width: 720px) { .name-display { max-width: 660px; } }
  @media (min-width: 1024px) { .name-display { max-width: 720px; } }
  @media (max-width: 719px) {
    .console-row.name { margin-top: 4px; }
    .name-display {
      width: 100%;
      max-width: min(100%, calc(100vw - var(--pad) * 2 - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    }
    .name-svg {
      width: 100%;
      height: auto;
    }
    .name-display::after {
      inset: -8% -4%;
      background: radial-gradient(ellipse 90% 92% at 20% 48%,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.35) 48%,
        transparent 74%);
    }
    .name-svg .name-divider {
      opacity: calc(0.38 + var(--wake) * 0.28);
    }
  }
  /* Void plate — darkens the field behind the name so it never competes with gunmetal chrome */
  .name-display::after {
    content: '';
    position: absolute;
    inset: -16% -12%;
    pointer-events: none;
    z-index: -2;
    background: radial-gradient(ellipse 88% 96% at 22% 48%,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.42) 44%,
      transparent 76%);
  }
  /* Cool platinum bloom — wakes as the cursor approaches */
  .name-display::before {
    content: '';
    position: absolute;
    inset: -10% -6%;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(62% 72% at 48% 50%,
      rgba(150, 180, 215, calc(var(--wake) * 0.20)) 0%,
      rgba(220, 235, 250, calc(var(--wake) * 0.10)) 42%,
      transparent 72%);
    filter: blur(20px);
    opacity: calc(0.28 + var(--wake) * 0.72);
    transition: opacity 0.45s ease;
  }

  .name-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .name-svg text {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.055em;
  }
  .name-svg .name-cast {
    fill: url(#depthCast);
    opacity: 0.42;
    pointer-events: none;
  }
  .name-svg .name-halo {
    fill: url(#haloFill);
    filter: url(#haloBlur);
    opacity: calc(0.18 + var(--wake) * 0.24);
    pointer-events: none;
  }
  .name-svg .name-rim {
    fill: none;
    stroke: url(#rimStroke);
    stroke-width: 1.05;
    opacity: calc(0.42 + var(--wake) * 0.32);
    pointer-events: none;
  }
  .name-svg .name-facet {
    fill: url(#facetHighlight);
    mix-blend-mode: soft-light;
    opacity: calc(0.20 + var(--wake) * 0.38);
    pointer-events: none;
  }
  .name-svg .name-divider {
    stroke: url(#dividerGrad);
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: calc(0.58 + var(--wake) * 0.36);
    transition: opacity 0.35s ease;
  }
  .name-svg .name-base {
    fill: url(#chromeGradient);
    filter: url(#chromeGlow);
  }
  .name-svg .name-sweep {
    fill: url(#chromeSweep);
    mix-blend-mode: lighten;
    opacity: calc(0.58 + var(--wake) * 0.42);
    transition: opacity 0.3s ease;
  }
  .name-svg .name-pool {
    --pool: 0;
    fill: url(#gravityPool);
    mix-blend-mode: screen;
    opacity: calc(0.50 + var(--pool) * 0.50);
  }

  /* Hover/cursor reactive transform layer */
  .name-display.reactive {
    transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1);
  }

  .console-row.readout {
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: rise 1.6s var(--ease-out) 2.4s both;
  }

  /* ── PHILOSOPHY MANIFESTO ──
     The "why" of the work, sitting just under the name — the first idea a
     visitor reads after the signature. Larger and more declarative than the
     tagline; the italic clause carries the conviction. */
  .manifesto {
    font-family: var(--font-editorial);
    font-size: clamp(20px, 5.4vw, 30px);
    line-height: 1.32;
    color: var(--muted);
    font-weight: 400;
    letter-spacing: -0.015em;
    max-width: 560px;
    margin-bottom: 22px;
  }
  .manifesto em {
    font-style: italic;
    color: var(--fg);
  }

  .tagline {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: clamp(17px, 4.5vw, 22px);
    line-height: 1.4;
    color: var(--accent);
    font-weight: 400;
    letter-spacing: -0.01em;
    max-width: 480px;
  }
  .tagline em {
    font-style: normal;
    color: var(--fg);
  }

  .readout-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
  }
  .readout-strip .r-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 0;
  }
  .readout-strip .r-cell + .r-cell {
    padding-left: 14px;
    border-left: 1px solid var(--line);
  }
  .readout-strip .r-k {
    font-size: 7px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 500;
  }
  .readout-strip .r-v {
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--fg);
    font-feature-settings: "tnum" on;
    font-weight: 500;
  }
  .readout-strip .r-v.serif {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 14px;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--accent);
  }

  .scroll-hint {
    position: absolute;
    bottom: calc(var(--botbar-h) + 12px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    letter-spacing: 0.4em;
    color: var(--faint);
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    animation: rise 1.4s ease-out 3s both, breathe 3.5s ease-in-out 4s infinite;
    transition: opacity 0.5s ease;
  }
  .scroll-hint .scroll-tick {
    width: 1px;
    height: 24px;
    background: linear-gradient(to bottom, transparent, var(--muted), transparent);
    animation: scroll-tick 2.4s ease-in-out infinite;
  }
  @keyframes scroll-tick {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(6px); opacity: 1; }
  }
  @keyframes breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.75; } }

  body.scrolled .scroll-hint { opacity: 0; }

  /* SECTIONS */
  .section-inner {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .section-label {
    font-size: 9px;
    letter-spacing: 0.4em;
    color: var(--muted);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
  }
  .section-label .num {
    color: var(--fg);
    font-feature-settings: "tnum" on;
  }
  .section-label .divider {
    flex: 1;
    height: 1px;
    background: var(--line);
    max-width: 120px;
  }

  .section-title {
    font-family: var(--font-editorial);
    font-weight: 400;
    font-size: clamp(32px, 8.5vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--fg);
    margin-bottom: 12px;
  }
  .section-title em {
    font-style: italic;
    color: var(--accent);
  }

  .section-body {
    font-family: 'Geist Mono', monospace;
    font-size: clamp(12px, 3.4vw, 13px);
    line-height: 1.75;
    color: var(--muted);
    font-weight: 400;
    max-width: 540px;
    letter-spacing: -0.005em;
  }
  .section-body p + p { margin-top: 14px; }
  .section-body strong { color: var(--fg); font-weight: 500; }

  /* WORK LIST — replaces single-project Mission */
  /* ── CREDENTIALS ──
     Grouped by domain to read as deliberate range, not a badge wall.
     Same mono/serif/hairline language as the rest of the site. */
  .cred-groups {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .cred-group {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 16px;
    padding: 22px 0;
    border-top: 1px solid var(--line);
    align-items: start;
  }
  .cred-group:last-child { border-bottom: 1px solid var(--line); }

  .cred-domain {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: 4px;
  }
  .cred-domain .cred-domain-idx {
    display: block;
    font-size: 9px;
    letter-spacing: 0.3em;
    color: var(--faint);
    margin-bottom: 8px;
    font-feature-settings: "tnum" on;
  }

  .cred-items { display: flex; flex-direction: column; gap: 14px; }

  .cred-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
    padding-left: 18px;
  }
  /* Hairline tick that draws in on reveal — the only "motion" here */
  .cred-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 1px;
    background: var(--fg);
    opacity: 0.32;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.7s var(--ease-out);
  }
  .reveal.visible .cred-item::before { transform: scaleX(1); }

  .cred-title {
    font-family: 'Instrument Serif', serif;
    font-size: clamp(17px, 4.4vw, 20px);
    color: var(--fg);
    line-height: 1.25;
    font-weight: 400;
  }
  .cred-issuer {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--muted);
  }

  .cred-foot {
    margin-top: 26px;
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    line-height: 1.55;
    color: rgba(232,232,234,0.6);
    text-shadow: 0 1px 6px rgba(0,0,0,0.9);
  }

  @media (max-width: 719px) {
    .cred-group { grid-template-columns: 1fr; gap: 12px; padding: 20px 0; }
    .cred-domain { padding-top: 0; }
  }

  .work-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 28px;
    border-top: 1px solid var(--line);
  }

  .work-item {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
  }

  .work-num {
    font-size: 9px;
    letter-spacing: 0.3em;
    color: var(--faint);
    font-feature-settings: "tnum" on;
    font-weight: 500;
  }

  .work-body { display: flex; flex-direction: column; gap: 6px; }

  .work-title {
    font-family: 'Instrument Serif', serif;
    font-size: clamp(18px, 4.8vw, 22px);
    color: var(--fg);
    line-height: 1.2;
    font-weight: 400;
  }
  .work-title em { font-style: italic; color: var(--accent); }

  .work-desc {
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    line-height: 1.6;
    color: var(--muted);
    letter-spacing: -0.005em;
  }

  .work-tag {
    font-size: 8px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 100px;
    font-weight: 500;
    white-space: nowrap;
    align-self: center;
  }
  .work-tag.live { color: var(--fg); border-color: rgba(232,232,234,0.2); }
  .work-tag.dim { color: var(--faint); }

  .pull-quote {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: clamp(19px, 5vw, 24px);
    line-height: 1.4;
    color: var(--fg);
    letter-spacing: -0.01em;
    padding-left: 18px;
    border-left: 1px solid var(--line);
    margin: 8px 0;
  }
  .pull-quote::before { content: '"'; color: var(--faint); margin-right: 4px; }
  .pull-quote::after { content: '"'; color: var(--faint); margin-left: 4px; }

  /* ── INTERNAL DIVIDER · Practice → Selected Work (merged section) ── */
  .work-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 34px;
  }
  .work-head-label {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--fg);
    white-space: nowrap;
  }
  .work-head-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--hud-soft), var(--line) 55%, transparent);
    opacity: 0.75;
  }
  .work-head-meta {
    font-family: 'Geist Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--faint);
    white-space: nowrap;
  }
  .work-intro { margin-top: 14px; }
  @media (max-width: 460px) {
    .work-head-meta { display: none; }
  }

  /* CONTACT */
  #contact { align-items: center; justify-content: center; text-align: center; }
  .contact-inner { max-width: 540px; width: 100%; }
  .contact-prompt {
    font-family: 'Instrument Serif', serif;
    font-size: clamp(28px, 8vw, 48px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--fg);
    margin-bottom: 24px;
  }
  .contact-prompt em { font-style: italic; color: var(--accent); }
  .contact-sub {
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 40px;
    font-weight: 500;
  }
  .links { display: flex; gap: 14px; justify-content: center; }
  .link {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 4px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
      rgba(0,0,0,0.5);
    border: 1px solid rgba(232,232,234,0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fg);
    text-decoration: none;
    transition:
      transform 0.4s var(--ease-out),
      border-color 0.3s ease,
      box-shadow 0.4s ease,
      background 0.3s ease;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      inset 0 -1px 0 rgba(0,0,0,0.4),
      0 8px 24px -8px rgba(0,0,0,0.8);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }
  .link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
    transition: left 0.7s var(--ease-out);
  }
  .link svg {
    width: 20px; height: 20px;
    fill: var(--fg);
    opacity: 0.88;
    transition: opacity 0.3s ease;
    position: relative; z-index: 1;
  }
  .link:hover, .link:active {
    transform: translateY(-2px);
    border-color: rgba(232,232,234,0.3);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
      rgba(0,0,0,0.5);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 -1px 0 rgba(0,0,0,0.4),
      0 16px 36px -8px rgba(0,0,0,0.9);
  }
  .link:hover::before, .link:active::before { left: 100%; }
  .link:hover svg { opacity: 1; }

  /* Corner brackets */
  .corners {
    position: fixed;
    inset: 12px;
    z-index: 4;
    pointer-events: none;
  }
  .corners .c {
    position: absolute;
    width: 10px; height: 10px;
    border-color: rgba(232,232,234,0.1);
  }
  .corners .tl { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
  .corners .tr { top: 0; right: 0; border-top: 1px solid; border-right: 1px solid; }
  .corners .bl { bottom: 0; left: 0; border-bottom: 1px solid; border-left: 1px solid; }
  .corners .br { bottom: 0; right: 0; border-bottom: 1px solid; border-right: 1px solid; }

  /* ════════════════════════════════════════════════════════════════
     CINEMATIC BOOT SEQUENCE
     A 5-beat ignition. Black plate lifts → field ignites → status
     prints → name forges → chrome prints in. Skippable; honors
     reduced-motion (collapses to instant in the media query below).
     ════════════════════════════════════════════════════════════════ */
  .boot {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: boot-plate-out 1.0s ease 5.0s forwards;
  }
  @keyframes boot-plate-out {
    to { opacity: 0; background: transparent; }
  }
  /* Field ignition — the cosmos wakes behind the terminal as the seed blooms */
  body.boot-ignite .boot {
    background: radial-gradient(ellipse 90% 80% at 50% 42%,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.97) 55%,
      #000 100%);
  }
  body.boot-ignite .boot-seed {
    box-shadow: 0 0 32px 8px rgba(168, 216, 255, 0.35);
  }
  /* Finale crossfade — lattice + nebula bleed through before the plate vanishes */
  body.boot-reveal .boot {
    animation: boot-plate-reveal 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    background: radial-gradient(ellipse 100% 90% at 50% 40%,
      rgba(0, 0, 0, 0.42) 0%,
      rgba(0, 0, 0, 0.72) 50%,
      rgba(0, 0, 0, 0.92) 100%);
  }
  @keyframes boot-plate-reveal {
    0%   { opacity: 1; }
    55%  { opacity: 0.72; }
    100% { opacity: 0; background: transparent; }
  }
  body.booted .boot { display: none; }
  /* ════════════════════════════════════════════════════════════════
     CINEMATIC VIDEO INTRO — full-frame clip over an opaque black curtain,
     cross-dissolving into the live site. object-fit:contain so the user's
     clip is never cropped; the black curtain hides the letterbox seam.
     ════════════════════════════════════════════════════════════════ */
  .intro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 1;
    transition: opacity 1.15s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
  }
  .intro.intro-out { opacity: 0; pointer-events: none; }
  /* cinematic push-through: the clip eases in + blurs as it dissolves into the live site */
  .intro.intro-out .intro-stage { animation: none; transform: scale(1.16); filter: blur(16px) brightness(1.12) saturate(1.1); }
  .intro-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: intro-stage-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
    transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1), filter 1.15s ease;
  }
  @keyframes intro-stage-in {
    from { opacity: 0; transform: scale(1.05); }
    to   { opacity: 1; transform: scale(1); }
  }
  /* Sharp foreground clip — full frame, never cropped, lightly graded so the
     figure stays vivid while sitting on the dark site. */
  .intro-video {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter: saturate(0.85) brightness(0.82) contrast(1.1) hue-rotate(10deg);
    background: transparent;
    display: block;
  }
  .intro-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.5) saturate(1.05) hue-rotate(10deg) blur(48px);
    transform: scale(1.2);
    opacity: 0.6;
    display: none;
    pointer-events: none;
  }
  @media (min-width: 720px) { .intro-video-bg { display: block; } }
  @media (max-width: 719px) { .intro-video { object-fit: cover; } }
  .intro::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 120% 100% at 50% 50%, transparent 58%, rgba(0,0,0,0.5) 100%);
  }
  .intro-flash {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 50% 44%, rgba(214,240,255,0.95) 0%, rgba(168,216,255,0.55) 20%, rgba(168,216,255,0) 58%);
    mix-blend-mode: screen;
    will-change: opacity, transform;
  }
  .intro.intro-out .intro-flash { animation: intro-flash 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
  @keyframes intro-flash {
    0%   { opacity: 0; transform: scale(0.55); }
    26%  { opacity: 0.95; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.55); }
  }
  .intro-skip {
    position: absolute;
    z-index: 2;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
    right: calc(env(safe-area-inset-right, 0px) + 22px);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid rgba(232,232,234,0.18);
    background: rgba(10,12,16,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(232,232,234,0.82);
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .intro.intro-ready .intro-skip { opacity: 1; transform: translateY(0); }
  .intro-skip:hover {
    border-color: rgba(168,216,255,0.5);
    background: rgba(20,24,30,0.7);
    color: #fff;
  }
  .intro-skip:active { transform: scale(0.97); }
  .intro-skip-arrow { font-size: 15px; line-height: 1; opacity: 0.85; }
  @media (prefers-reduced-motion: reduce) {
    .intro-stage { animation: none; }
    .intro { transition: opacity 0.25s ease; }
  }

  /* ── FORGE IGNITION · data-stream + scanline overlay ──
     A faint sci-fi field of horizontal scanlines + a sweeping data band,
     fading as the system "wakes". Pure CSS, GPU-cheap, retired on boot. */
  .boot-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background:
      repeating-linear-gradient(0deg,
        rgba(232,232,234,0.05) 0px,
        rgba(232,232,234,0.05) 1px,
        transparent 1px,
        transparent 3px);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
    animation: boot-grid 5.2s ease forwards;
  }
  @keyframes boot-grid {
    0% { opacity: 0; }
    18% { opacity: 0.9; }
    78% { opacity: 0.55; }
    100% { opacity: 0; }
  }
  /* A single luminous data band sweeping down through the grid */
  .boot-scan {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    top: -4px;
    background: linear-gradient(90deg, transparent, rgba(232,232,234,0.85), transparent);
    box-shadow: 0 0 18px 3px rgba(232,232,234,0.45);
    opacity: 0;
    animation: boot-scan 4.8s cubic-bezier(0.5,0,0.2,1) 0.4s forwards;
  }
  @keyframes boot-scan {
    0% { top: -4px; opacity: 0; }
    8% { opacity: 1; }
    88% { opacity: 0.6; }
    100% { top: 100vh; opacity: 0; }
  }

  .boot-core {
    position: relative;
    width: 100%;
    max-width: 460px;
    padding: 0 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  /* The igniting seed — a single point that blooms into the network */
  .boot-seed {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255,255,255,0.0);
    animation: boot-seed 1.6s cubic-bezier(0.16,1,0.3,1) forwards;
  }
  @keyframes boot-seed {
    0%   { transform: scale(0); opacity: 0; box-shadow: 0 0 0 0 rgba(255,255,255,0); }
    16%  { transform: scale(1); opacity: 1; box-shadow: 0 0 24px 4px rgba(255,255,255,0.7); }
    100% { transform: scale(52); opacity: 0; box-shadow: 0 0 80px 12px rgba(255,255,255,0); }
  }

  /* ── FORGE IGNITION · terminal status console ──
     A multi-line monospace readout that types the boot narrative.
     Lines persist (terminal log feel) and dim as they scroll up. */
  .boot-console {
    width: 100%;
    min-height: 116px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: var(--muted);
    opacity: 0;
    animation: boot-console-in 0.5s ease 0.5s forwards;
  }
  @keyframes boot-console-in { to { opacity: 1; } }
  .boot-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    color: rgba(232,232,234,0.5);
    transition: color 0.4s ease, opacity 0.4s ease;
  }
  .boot-line .bl-prompt { color: var(--faint); flex: 0 0 auto; }
  .boot-line .bl-text { color: rgba(232,232,234,0.66); }
  .boot-line .bl-tag {
    margin-left: auto;
    padding-left: 12px;
    font-size: 9px;
    letter-spacing: 0.14em;
    color: rgba(232,232,234,0.85);
    flex: 0 0 auto;
  }
  .boot-line .bl-tag.ok { color: #b6f0c6; }
  .boot-line .bl-tag.sync { color: #a8d8ff; }
  .boot-line.dim { opacity: 0.34; }
  .boot-line.glitch .bl-text { animation: bl-glitch 0.32s steps(2) 2; }
  @keyframes bl-glitch {
    0% { transform: translateX(0); filter: none; }
    25% { transform: translateX(-1.5px); filter: brightness(1.6); }
    50% { transform: translateX(1.5px); filter: brightness(0.7); }
    75% { transform: translateX(-0.8px); }
    100% { transform: translateX(0); }
  }
  /* Blinking cursor that rides the active line */
  .boot-cursor {
    display: inline-block;
    width: 6px; height: 11px;
    margin-left: 2px;
    background: var(--fg);
    vertical-align: text-bottom;
    animation: bl-blink 0.9s steps(2) infinite;
  }
  @keyframes bl-blink { 50% { opacity: 0; } }
  /* The final manifesto line — cold chrome with a warm creative spark */
  .boot-line.final .bl-text {
    color: #f4f5f7;
    letter-spacing: 0.1em;
    text-shadow: 0 0 14px rgba(255,217,168,0.35);
  }
  .boot-line.final .bl-spark { color: #ffd9a8; text-shadow: 0 0 10px rgba(255,200,140,0.7); }

  /* Status readout (legacy node kept for compatibility, now hidden) */
  .boot-status { display: none; }

  /* ════════════════════════════════════════════════════════════════
     RESONANT ECHO · UNITY EVENT · HOLOGRAPHIC CARD
     The Echo itself is canvas-drawn (no DOM). These styles cover the
     full-screen unity bloom flash and the holographic resonance card.
     ════════════════════════════════════════════════════════════════ */
  .unity-flash {
    position: fixed;
    inset: 0;
    z-index: 38;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 50% 45%,
      rgba(255,217,168,0.18) 0%,
      rgba(232,236,245,0.10) 30%,
      transparent 70%);
    mix-blend-mode: screen;
  }
  .unity-flash.fire { animation: unity-flash 2.4s cubic-bezier(0.16,1,0.3,1) forwards; }
  @keyframes unity-flash {
    0% { opacity: 0; }
    14% { opacity: 1; }
    100% { opacity: 0; }
  }

  /* Holographic resonance card */
  .holo-card {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 42;
    width: min(86vw, 380px);
    transform: translate(-50%, -46%) scale(0.92);
    opacity: 0;
    pointer-events: none;
    border-radius: 16px;
    padding: 26px 24px 20px;
    background:
      linear-gradient(155deg, rgba(20,22,28,0.82), rgba(8,9,12,0.92));
    border: 1px solid rgba(232,232,234,0.16);
    box-shadow:
      0 30px 80px -20px rgba(0,0,0,0.9),
      inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
    transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out);
  }
  .holo-card.show { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
  /* Sweeping holographic sheen */
  .holo-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(115deg,
      transparent 30%,
      rgba(168,216,255,0.10) 45%,
      rgba(255,217,168,0.14) 52%,
      transparent 65%);
    transform: translateX(-40%);
    animation: holo-sheen 4.5s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes holo-sheen { 0%,100% { transform: translateX(-45%); } 50% { transform: translateX(45%); } }
  .holo-grid {
    position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
    background-image:
      linear-gradient(rgba(232,232,234,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(232,232,234,0.05) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000, transparent 80%);
  }
  .holo-card .hc-inner { position: relative; z-index: 1; }
  .holo-card .hc-tag {
    font-family: 'Geist Mono', monospace;
    font-size: 8px; letter-spacing: 0.42em; text-transform: uppercase;
    color: #ffd9a8; margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px;
  }
  .holo-card .hc-tag::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: #ffd9a8; box-shadow: 0 0 8px rgba(255,200,140,0.9);
  }
  .holo-card .hc-title {
    font-family: 'Instrument Serif', serif; font-style: italic;
    font-size: 26px; line-height: 1.1; color: var(--fg); margin-bottom: 4px;
  }
  .holo-card .hc-sub {
    font-family: 'Geist Mono', monospace; font-size: 10px;
    letter-spacing: 0.1em; color: var(--muted); margin-bottom: 18px;
  }
  .holo-card .hc-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 8px 0; border-top: 1px solid var(--line);
    font-family: 'Geist Mono', monospace; font-size: 10px;
  }
  .holo-card .hc-k { color: var(--faint); letter-spacing: 0.18em; text-transform: uppercase; font-size: 8px; }
  .holo-card .hc-v { color: var(--fg); letter-spacing: 0.06em; }
  .holo-card .hc-v.hash { color: #a8d8ff; }
  .holo-card .hc-actions { display: flex; gap: 10px; margin-top: 18px; }
  .holo-card .hc-btn {
    flex: 1; text-align: center; cursor: pointer;
    font-family: 'Geist Mono', monospace; font-size: 9px;
    letter-spacing: 0.22em; text-transform: uppercase;
    padding: 11px 8px; border-radius: 8px;
    border: 1px solid rgba(232,232,234,0.16);
    background: rgba(255,255,255,0.03); color: var(--fg);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .holo-card .hc-btn:hover, .holo-card .hc-btn:active {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,217,168,0.4);
    transform: translateY(-1px);
  }
  .holo-card .hc-btn.copied { color: #b6f0c6; border-color: rgba(182,240,198,0.4); }
  .holo-card .hc-close {
    position: absolute; top: 12px; right: 14px; z-index: 2;
    width: 22px; height: 22px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 14px; border-radius: 50%;
    transition: color 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .holo-card .hc-close:hover { color: var(--fg); background: rgba(255,255,255,0.06); }

  @media (prefers-reduced-motion: reduce) {
    .unity-flash, .holo-card::before { animation: none !important; }
    .weaver-line { display: none !important; }
  }

  /* ════════════════════════════════════════════════════════════════
     REALITY WEAVER
     A living holographic entity layered over the existing canvases.
     Constructions are drawn on the neural canvas itself (no new canvas).
     This covers only the DOM pieces: the refined merge line + a faint
     "presence" vignette that breathes when the Weaver is attentive.
     ════════════════════════════════════════════════════════════════ */
  .weaver-presence {
    position: fixed;
    inset: 0;
    z-index: 2;          /* above neural(1), below content(5) */
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 44%,
      rgba(255,217,168,0.05) 0%, transparent 60%);
    mix-blend-mode: screen;
    transition: opacity 1.2s ease;
  }
  .weaver-presence.attentive { opacity: 1; }

  /* ════════════════════════════════════════════════════════════════
     KARMA PORTAL — chrome orb + immersive holographic viewer
     ════════════════════════════════════════════════════════════════ */
  .karma-trigger { cursor: pointer; }
  .work-item.karma-trigger { transition: transform 0.4s var(--ease-out); }
  .work-item.karma-trigger:hover { transform: translateX(3px); }
  .portal-tag {
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border-color: rgba(232,232,234,0.28) !important;
    color: var(--fg) !important;
  }

  /* floating chrome orb in the hero */
  /* The orb is a miniature living artifact — a chrome lens containing a tiny
     orbital system that echoes the background galaxy. Dual counter-rotating
     orbits, an iridescent rim that catches light, a luminous core that breathes
     with the field's resonance. Reads as a PIECE of the cosmos, not a button. */
  .karma-orb {
    --kres: 0;                 /* resonance 0..1 from JS → glow intensity */
    position: absolute;
    right: clamp(20px, 5vw, 64px);
    bottom: calc(var(--botbar-h) + 40px);
    width: 84px; height: 84px;
    border-radius: 50%;
    border: none;
    background:
      radial-gradient(circle at 36% 32%, rgba(255,255,255,0.12), rgba(8,9,14,0.6) 62%, rgba(0,0,0,0.7) 100%);
    cursor: pointer; z-index: 22;
    padding: 0;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.14),
      inset 0 -8px 16px rgba(0,0,0,0.5),
      0 14px 50px -12px rgba(0,0,0,0.85),
      0 0 calc(16px + var(--kres) * 36px) rgba(180,200,235, calc(0.10 + var(--kres) * 0.5));
    opacity: 0; transform: scale(0.8) translateY(10px);
    transition: opacity 1.1s var(--ease-out), transform 0.5s var(--ease-out), box-shadow 0.5s ease;
    -webkit-tap-highlight-color: transparent;
    overflow: visible;
  }
  body.booted .karma-orb { opacity: 1; transform: scale(1) translateY(0); }
  .karma-orb:hover { transform: scale(1.07) translateY(-2px); }
  .karma-orb:active { transform: scale(0.98); }

  /* iridescent chrome rim — a conic sheen that slowly turns, catching spectral light */
  .karma-orb::before {
    content: ''; position: absolute; inset: -1px; border-radius: 50%;
    padding: 1px; pointer-events: none;
    background: conic-gradient(from 0deg,
      rgba(232,232,234,0.35), rgba(140,200,235,0.25), rgba(232,232,234,0.1),
      rgba(255,217,168,0.3), rgba(232,232,234,0.35));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: orb-rim 18s linear infinite;
    opacity: calc(0.5 + var(--kres) * 0.5);
  }
  @keyframes orb-rim { to { transform: rotate(360deg); } }

  /* inner lens — a darker well so the orbiting particles read with depth */
  .karma-orb .orb-core {
    position: absolute; inset: 14px; border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, rgba(20,24,34,0.0), rgba(0,0,0,0.55) 80%);
    overflow: hidden;
  }
  /* the luminous heart that breathes with resonance */
  .karma-orb .orb-core::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
    background: radial-gradient(circle, #fff, #b9c6e0 60%, transparent);
    box-shadow: 0 0 calc(10px + var(--kres) * 20px) rgba(220,232,255, calc(0.7 + var(--kres) * 0.3));
    animation: orb-heart 3.6s ease-in-out infinite;
  }
  @keyframes orb-heart { 0%,100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.25); opacity: 1; } }

  /* two counter-rotating orbital rings, each carrying a star — a micro-galaxy */
  .karma-orb .orb-ring,
  .karma-orb .orb-ring2 {
    position: absolute; border-radius: 50%; pointer-events: none;
    border: 1px solid rgba(200,214,240,0.10);
  }
  .karma-orb .orb-ring  { inset: 20px; animation: orb-spin 9s linear infinite; }
  .karma-orb .orb-ring2 { inset: 28px; animation: orb-spin 6s linear reverse infinite; border-color: rgba(200,214,240,0.07); }
  .karma-orb .orb-ring::after,
  .karma-orb .orb-ring2::after {
    content: ''; position: absolute; top: -1.5px; left: 50%; width: 3px; height: 3px;
    margin-left: -1.5px; border-radius: 50%; background: #dfe8fb;
    box-shadow: 0 0 6px rgba(200,220,255,0.9);
  }
  .karma-orb .orb-ring2::after { background: #ffd9a8; box-shadow: 0 0 6px rgba(255,200,140,0.9); }
  @keyframes orb-spin { to { transform: rotate(360deg); } }

  .karma-orb .orb-label {
    position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
    font-family: 'Geist Mono', monospace; font-size: 7px; letter-spacing: 0.3em;
    text-transform: uppercase; color: var(--faint); white-space: nowrap;
    transition: color 0.4s ease;
  }
  .karma-orb:hover .orb-label { color: var(--muted); }
  @media (max-width: 719px) {
    .karma-orb { width: 70px; height: 70px; right: 16px; bottom: calc(var(--botbar-h) + 34px); }
    .karma-orb .orb-ring { inset: 16px; } .karma-orb .orb-ring2 { inset: 23px; }
    .karma-orb .orb-core { inset: 11px; }
  }

  /* full-screen immersive viewer */
  .karma-portal {
    position: fixed; inset: 0; z-index: 70;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    background: rgba(0,0,0,0.0);
    opacity: 0; pointer-events: none;
    transition: opacity 0.7s var(--ease-out), background 0.7s ease;
  }
  .karma-portal.open {
    opacity: 1; pointer-events: auto;
    /* Solid, near-opaque backdrop instead of backdrop-filter blur. iOS Safari
       renders iframes BLACK inside a backdrop-filtered ancestor — so we never
       blur an ancestor of the game frame. Looks just as premium, works
       everywhere. */
    background: rgba(2,3,6,0.94);
  }
  .karma-portal .kp-aura {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(150,180,225,0.10), transparent 70%);
    opacity: 0; transition: opacity 1s ease;
  }
  .karma-portal.open .kp-aura { opacity: 1; }
  .kp-frame {
    position: relative; width: min(1100px, 100%); height: min(78vh, 820px);
    display: flex; flex-direction: column;
    border: 1px solid rgba(232,232,234,0.20); border-radius: 14px;
    background: linear-gradient(160deg, rgba(16,18,24,0.95), rgba(6,7,10,0.98));
    box-shadow: 0 40px 120px -30px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
    /* Animate opacity, NOT transform — a transform on the iframe's ancestor is
       another iOS black-iframe trigger. */
    opacity: 0;
    transition: opacity 0.6s var(--ease-out);
  }
  .karma-portal.open .kp-frame { opacity: 1; }
  .kp-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
  }
  .kp-title {
    font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.28em;
    text-transform: uppercase; color: var(--fg);
  }
  .kp-title .kp-dim { color: var(--faint); }
  .kp-actions { display: flex; gap: 8px; }
  .kp-btn {
    font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: 0.2em;
    text-transform: uppercase; padding: 9px 13px; border-radius: 7px;
    border: 1px solid rgba(232,232,234,0.16); background: rgba(255,255,255,0.03);
    color: var(--fg); cursor: pointer; text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .kp-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,217,168,0.4); transform: translateY(-1px); }
  .kp-stage {
    position: relative; flex: 1;
    background: #07071a;          /* matches the game's own theme-color */
    overflow: hidden;
    /* iOS: keep this a simple compositing context — no backdrop-filter, no
       blend modes, no transforms on or above the iframe. Those are the three
       things that make an embedded iframe render BLACK on iOS Safari. */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .kp-stage iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0; display: block;
    background: #07071a;
  }
  .kp-scanlines {
    position: absolute; inset: 0; pointer-events: none; z-index: 3;
    background-image: repeating-linear-gradient(0deg,
      rgba(160,185,225,0.04) 0px, rgba(160,185,225,0.04) 1px, transparent 1px, transparent 3px);
    /* 'screen' blend over an iframe is unreliable on iOS → plain overlay,
       and dropped entirely on touch via the rule below. */
    opacity: 0.35;
  }
  .kp-loading {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    color: var(--muted); font-family: 'Geist Mono', monospace;
    font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
    transition: opacity 0.6s ease;
  }
  .kp-loading.hide { opacity: 0; pointer-events: none; }
  .kp-spinner {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid rgba(232,232,234,0.15); border-top-color: #ffd9a8;
    animation: kp-spin 0.9s linear infinite;
  }
  @keyframes kp-spin { to { transform: rotate(360deg); } }

  /* ── LAUNCH CHAMBER (touch devices) ──
     The full-screen "enter the game" moment. Intentional and cinematic — a
     living orb, the title, and a single luminous entry. Never reads as an
     error or a fallback; this IS the mobile experience. */
  .kp-launch-wrap {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 0; padding: 28px; max-width: 380px;
    animation: kp-launch-in 0.9s var(--ease-out) both;
  }
  @keyframes kp-launch-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }
  /* hairline section marker — echoes the site's "Selected Work · 00x" system */
  .kp-launch-tag {
    font-family: 'Geist Mono', monospace; font-size: 8px; letter-spacing: 0.42em;
    text-transform: uppercase; color: var(--faint); margin-bottom: 30px;
    padding-bottom: 12px; position: relative;
  }
  .kp-launch-tag::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 28px; height: 1px; background: rgba(232,232,234,0.2);
  }
  .kp-launch-orb {
    position: relative; width: 104px; height: 104px; margin-bottom: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 32%, rgba(255,255,255,0.14), rgba(8,9,14,0.6) 62%, rgba(0,0,0,0.72));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.16),
      inset 0 -8px 18px rgba(0,0,0,0.5),
      0 0 60px rgba(180,200,235,0.28);
  }
  /* iridescent chrome rim — same spectral language as the hero orb */
  .kp-launch-orb::before {
    content: ''; position: absolute; inset: -1px; border-radius: 50%; padding: 1px;
    background: conic-gradient(from 0deg,
      rgba(232,232,234,0.4), rgba(140,200,235,0.28), rgba(232,232,234,0.1),
      rgba(255,217,168,0.34), rgba(232,232,234,0.4));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: orb-rim 16s linear infinite;
  }
  .kp-launch-orb span {
    position: absolute; border-radius: 50%; border: 1px solid rgba(200,214,240,0.14);
  }
  .kp-launch-orb span:nth-child(1) { inset: 16px; animation: orb-spin 8s linear infinite; }
  .kp-launch-orb span:nth-child(2) { inset: 27px; animation: orb-spin 5.5s linear reverse infinite; border-color: rgba(200,214,240,0.09); }
  .kp-launch-orb span:nth-child(3) {
    inset: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
    background: radial-gradient(circle, #fff, #b9c6e0 60%, transparent); border: none;
    box-shadow: 0 0 20px rgba(220,232,255,0.85); animation: orb-heart 3.4s ease-in-out infinite;
  }
  .kp-launch-orb span:nth-child(1)::after {
    content: ''; position: absolute; top: -2px; left: 50%; width: 3px; height: 3px;
    margin-left: -1.5px; border-radius: 50%; background: #ffd9a8; box-shadow: 0 0 6px rgba(255,200,140,0.9);
  }
  .kp-launch-orb span:nth-child(2)::after {
    content: ''; position: absolute; top: -1.5px; left: 50%; width: 2.5px; height: 2.5px;
    margin-left: -1.25px; border-radius: 50%; background: #dfe8fb; box-shadow: 0 0 5px rgba(200,220,255,0.9);
  }
  .kp-launch-title {
    font-family: 'Instrument Serif', serif; font-style: italic;
    font-size: clamp(34px, 9vw, 42px); line-height: 1;
    color: var(--fg); letter-spacing: 0; margin-bottom: 14px; text-transform: none;
    text-shadow: 0 0 30px rgba(255,217,168,0.18);
  }
  .kp-launch-sub {
    font-family: 'Instrument Serif', serif; font-style: italic;
    font-size: 16px; color: var(--accent); margin-bottom: 16px; line-height: 1.4;
    text-transform: none; letter-spacing: 0;
  }
  .kp-launch-meta {
    font-family: 'Geist Mono', monospace; font-size: 8px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--faint); margin-bottom: 30px;
  }
  .kp-launch-go {
    font-size: 11px !important; letter-spacing: 0.24em; padding: 15px 30px !important;
    border-color: rgba(255,217,168,0.45) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)) !important;
    box-shadow: 0 0 30px -6px rgba(255,217,168,0.3);
  }
  .kp-launch-note {
    font-family: 'Geist Mono', monospace; font-size: 7px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--faint); margin-top: 18px;
  }

  @media (prefers-reduced-motion: reduce) {
    .karma-orb .orb-core, .karma-orb .orb-ring, .kp-spinner,
    .kp-launch-orb span, .kp-launch-orb::before, .kp-launch-wrap { animation: none !important; }
  }
  /* Touch devices: give the game maximum room and drop the scanline overlay
     entirely (it's an iOS compositing risk over an iframe, and unneeded on a
     phone-sized viewer). The frame goes near-fullscreen for true immersion. */
  @media (max-width: 719px), (pointer: coarse) {
    .karma-portal { padding: 0; }
    .kp-frame { width: 100%; height: 100%; border-radius: 0; border: none; }
    .kp-scanlines { display: none; }
    .kp-head { padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }

    /* ── MOBILE NAME PERFORMANCE ──
       The two effects below re-rasterize every frame as the name tilts/sweeps,
       which is what made FRANCO BERNAL stutter while scrolling at the top on
       phones. We drop ONLY these two on touch devices — the chrome gradient,
       the specular sweep, and the gravity pool all remain, so the name still
       reads as polished, living metal. Desktop is untouched. */
    .name-svg .name-base { filter: none; }
    .name-svg .name-halo { display: none; }
    .name-display::before { display: none; }
    .name-display::after { opacity: 0.72; }

    /* ── CRITICAL MOBILE FIX: NO backdrop-filter over the live canvas ──
       backdrop-filter:blur() on fixed bars that sit over a constantly-redrawing
       canvas forces iOS Safari to re-blur the whole animation every frame — the
       single biggest cause of the hero-zone lag. We replace the live blur with a
       slightly stronger solid gradient: visually nearly identical, but free. */
    .console-top {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background: linear-gradient(180deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.5) 55%, transparent 100%);
    }
    .console-bot {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background: linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.5) 55%, transparent 100%);
    }

    /* Full-screen mix-blend-mode overlays force per-frame compositing of the
       whole viewport on mobile. The holographic scanline/sheen are a subtle
       desktop luxury; on phones they cost more than they're worth, so we retire
       them. The canvas itself carries the sci-fi load. */
    .holo-scan, .holo-sheen { display: none !important; }

    /* Reveal animations: keep the elegant fade + slide (cheap GPU transforms)
       but drop the per-element blur filter on mobile. Animating blur on several
       elements at once during a fast downward fling was the hitch felt when
       scrolling to the bottom the first time. */
    .reveal { filter: none !important; }
    .reveal.visible { filter: none !important; }
  }

  /* The single refined line that resolves the symbiotic merge */
  .weaver-line {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 44;
    transform: translate(-50%, -50%);
    width: min(92vw, 640px);
    text-align: center;
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: clamp(20px, 5vw, 30px);
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #f4f5f7;
    opacity: 0;
    pointer-events: none;
    text-shadow: 0 0 26px rgba(255,217,168,0.4);
  }
  .weaver-line .wl-sub {
    display: block;
    margin-top: 16px;
    font-family: 'Geist Mono', monospace;
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--muted);
    text-shadow: none;
  }
  .weaver-line .wl-spark { color: #ffd9a8; text-shadow: 0 0 12px rgba(255,200,140,0.7); }
  .weaver-line.reveal-in {
    animation: weaver-line-in 5.2s cubic-bezier(0.16,1,0.3,1) forwards;
  }
  @keyframes weaver-line-in {
    0%   { opacity: 0; filter: blur(10px); transform: translate(-50%,-50%) scale(0.96); }
    16%  { opacity: 1; filter: blur(0);    transform: translate(-50%,-50%) scale(1); }
    78%  { opacity: 1; filter: blur(0);    transform: translate(-50%,-50%) scale(1); }
    100% { opacity: 0; filter: blur(6px);  transform: translate(-50%,-50%) scale(1.01); }
  }

  /* Thin progress hairline */
  .boot-bar {
    width: 0%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--fg), transparent);
    box-shadow: 0 0 10px rgba(232,232,234,0.5);
    animation: boot-bar 4.9s cubic-bezier(0.45,0,0.25,1) 0.3s forwards;
  }
  @keyframes boot-bar {
    0% { width: 0%; opacity: 0; }
    8% { opacity: 1; }
    96% { opacity: 1; }
    100% { width: 100%; opacity: 0; }
  }

  /* Name forge: a dark→bright reveal driven by JS class on #name-display.
     Emerges from transparency into full chrome — no hard black silhouette flash.
     We animate opacity + brightness together on a long ease so the letters
     appear to condense out of light rather than switch on. */
  .name-display.forging .name-svg {
    filter: brightness(0.18) contrast(1.25);
    opacity: 0;
  }
  .name-display.forged .name-svg {
    filter: brightness(1) contrast(1.02);
    opacity: 1;
    transition: filter 1.3s cubic-bezier(0.16,1,0.3,1),
                opacity 0.9s cubic-bezier(0.22,1,0.36,1);
  }
  .name-display.forged .name-svg .name-rim {
    opacity: calc(0.48 + var(--wake) * 0.36);
  }
  .name-display.forged .name-svg .name-facet {
    opacity: calc(0.26 + var(--wake) * 0.42);
  }
  /* Mask wipe overlay — a vertical bright edge that sweeps once as the name forges */
  .name-forge-wipe {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg,
      transparent 0%,
      transparent 40%,
      rgba(255,255,255,0.85) 50%,
      transparent 60%,
      transparent 100%);
    mix-blend-mode: overlay;
    opacity: 0;
    transform: translateX(-60%);
  }
  .name-display.forged .name-forge-wipe {
    animation: forge-wipe 1.0s cubic-bezier(0.65,0,0.35,1) forwards;
  }
  @keyframes forge-wipe {
    0%   { opacity: 0; transform: translateX(-60%); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(60%); }
  }



  /* ── LIVING INSTRUMENT · title assembly ── */
  /* Each word stays intact on one line — characters animate inside it, but the
     line only ever breaks at real spaces, so a word wraps whole to the next
     line instead of splitting (no more "expe / riences"). */
  .asm-word {
    display: inline-block;
    white-space: nowrap;
  }
  .asm-char {
    display: inline-block;
    opacity: 0;
    transform: translate(var(--ax,0), var(--ay,0)) rotate(var(--ar,0)) scale(0.6);
    filter: blur(6px);
    transition: opacity 0.55s var(--ease-out), transform 0.7s var(--ease-out), filter 0.55s ease;
    will-change: transform, opacity, filter;
    /* SAFETY NET: if assembly JS never fires, force-reveal after 4s so a
       title can never be left permanently invisible. */
    animation: asm-failsafe 0.01s linear 4s forwards;
  }
  @keyframes asm-failsafe { to { opacity: 1; transform: none; filter: none; } }
  .asm-char.in {
    opacity: 1;
    transform: translate(0,0) rotate(0) scale(1);
    filter: blur(0);
    animation: none;
  }
  /* draw-with-light canvas at contact */
  #draw-canvas { z-index: 4; }
  @media (prefers-reduced-motion: reduce) {
    .asm-char { opacity: 1 !important; transform: none !important; filter: none !important; }
  }

  /* Console chrome (top/bottom bars, corners, rail) hold until booted */
  .console-top, .console-bot, .corners, .rail {
    opacity: 0;
    transition: opacity 0.9s ease;
  }
  body.booted .console-top,
  body.booted .console-bot,
  body.booted .corners,
  body.booted .rail { opacity: 1; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
  }

  .reveal {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(5px);
    transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s ease;
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  .reveal.d1 { transition-delay: 0.08s; }
  .reveal.d2 { transition-delay: 0.16s; }
  .reveal.d3 { transition-delay: 0.24s; }
  .reveal.d4 { transition-delay: 0.32s; }

  @media (max-width: 719px) {
    body::after { opacity: 0.10; }
    /* hover lift is meaningless on touch and can stick; rely on :active instead */
    .link:hover { transform: none; }
    .link:active {
      transform: translateY(-2px);
      border-color: rgba(232,232,234,0.3);
    }
  }

  @media (min-width: 720px) {
    :root {
      --pad: 32px;
      --topbar-h: 60px;
      --botbar-h: 68px;
    }
    .console-bot { font-size: 10px; }
    .console-bot .dim { font-size: 9px; }
    .console-row.meta { grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .readout-strip { grid-template-columns: repeat(4, 1fr); }
    .section-inner { gap: 28px; }
    .work-item { grid-template-columns: 36px 1fr auto; padding: 22px 0; }
  }

  @media (min-width: 1024px) {
    :root { --pad: 40px; }
    .section-title { font-size: clamp(40px, 4vw, 60px); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    .reveal { opacity: 1; transform: none; filter: none; }
    .boot { display: none !important; }
    .console-top, .console-bot, .corners, .rail { opacity: 1 !important; }
    .name-display .name-svg { filter: none !important; }
    /* Gravity pool rests as a calm centered highlight; no motion. */
    .name-svg .name-pool { opacity: 0.4 !important; }
  }

/* ──────────────────────────────────────────────────────────────────
   HUD UPGRADE LAYER (was <style id="hud-upgrade">) — additive accents:
   glass nav, scroll-progress beam, warp veil, scramble reveals.
   ────────────────────────────────────────────────────────────────── */

  :root {
    /* The cool HUD accent — promoted from the palette's existing hologram blue */
    --hud: #a8d8ff;
    --hud-soft: rgba(168,216,255,0.5);
    --hud-faint: rgba(168,216,255,0.16);
    --warm-accent: #ffd9a8;
  }

  /* ── SCROLL-PROGRESS BEAM ──
     A hair-thin luminous bar across the very top, cyan→warm, tracking scroll.
     Reads as a system telemetry strip, not a webby progress bar. */
  .scroll-beam {
    position: fixed;
    top: 0; left: 0;
    height: 2px; width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    z-index: 30;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(168,216,255,0) 0%, var(--hud) 45%, var(--warm-accent) 100%);
    box-shadow: 0 0 12px rgba(168,216,255,0.55);
    opacity: 0;
    transition: opacity 0.8s ease;
    will-change: transform;
  }
  body.booted .scroll-beam { opacity: 1; }

  /* ── FLOATING GLASS NAV (upgrades the existing dot rail) ── */
  .rail {
    right: 16px;
    gap: 0;
    padding: 14px 11px;
    border-radius: 100px;
    background: linear-gradient(180deg, rgba(20,22,28,0.46), rgba(8,9,12,0.62));
    border: 1px solid var(--hud-faint);
    backdrop-filter: blur(14px) saturate(1.25);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 14px 44px -14px rgba(0,0,0,0.85);
    opacity: 0;
    transform: translateY(-50%) translateX(22px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  }
  body.booted .rail { opacity: 1; transform: translateY(-50%) translateX(0); }

  /* vertical telemetry spine that fills with scroll progress */
  .rail-prog {
    position: absolute;
    top: 18px; bottom: 18px; left: 50%;
    width: 1px; transform: translateX(-50%);
    background: rgba(232,232,234,0.10);
    z-index: 0;
    overflow: hidden;
    border-radius: 1px;
  }
  .rail-prog-fill {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    transform: scaleY(0);
    transform-origin: top center;
    background: linear-gradient(180deg, var(--hud), var(--warm-accent));
    box-shadow: 0 0 8px var(--hud-soft);
    will-change: transform;
  }

  .rail-item {
    width: 24px; height: 24px;
    z-index: 1;
    position: relative;
    justify-content: center;
  }
  /* living pulse ring on the active dot */
  .rail-item.active::before {
    content: '';
    position: absolute; left: 50%; top: 50%;
    width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    border: 1px solid var(--hud);
    animation: rail-pulse 2.4s ease-out infinite;
    pointer-events: none;
  }
  @keyframes rail-pulse {
    0%   { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(3.4); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .rail-item.active::before { animation: none; opacity: 0; } }
  /* override the original dash → a HUD dot */
  .rail-item::after {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(232,232,234,0.26);
    box-shadow: none;
    transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out),
                background 0.4s ease, box-shadow 0.4s ease;
  }
  .rail-item:hover::after { background: rgba(232,232,234,0.6); }
  .rail-item.active::after {
    width: 7px; height: 7px;
    background: var(--hud);
    box-shadow: 0 0 11px var(--hud), 0 0 4px #fff;
  }

  /* hover/focus label chip (desktop pointer) */
  .rail-label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    white-space: nowrap;
    font-family: 'Geist Mono', monospace;
    font-size: 8px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--fg);
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(8,10,14,0.82);
    border: 1px solid var(--hud-faint);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s var(--ease-out), color 0.3s ease;
  }
  .rail-item:hover .rail-label,
  .rail-item:focus-visible .rail-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
  .rail-item.active .rail-label { color: var(--hud); border-color: var(--hud-soft); }
  @media (hover: none) { .rail-label { display: none; } }

  /* ── ACTIVE-SECTION HUD READOUT (top-left console) ── */
  .console-top .left {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0;
    transition: opacity 0.8s ease;
  }
  body.booted .console-top .left { opacity: 1; }
  .nav-readout-idx { color: var(--hud); font-feature-settings: "tnum" on; }
  .nav-readout-sep { color: var(--faint); }
  .nav-readout-name { color: var(--fg); transition: color 0.4s ease; }
  .nav-readout-dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--hud);
    box-shadow: 0 0 8px var(--hud-soft);
    flex: 0 0 auto;
    animation: nav-pulse 2.6s ease-in-out infinite;
  }
  @keyframes nav-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); box-shadow: 0 0 6px var(--hud-soft); }
    50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 12px var(--hud); }
  }
  @media (max-width: 560px) { .nav-readout-name { display: none; } }

  /* ── WARP VEIL · cinematic page transition ──
     Fires on nav jumps: a cyan scanline field flashes while a luminous band
     sweeps down, masking an instant scroll so navigation feels like a teleport
     between coordinates rather than a scroll. */
  .warp-veil {
    position: fixed; inset: 0;
    z-index: 56;
    pointer-events: none;
    opacity: 0;
    background:
      repeating-linear-gradient(0deg,
        rgba(168,216,255,0.05) 0px, rgba(168,216,255,0.05) 2px,
        transparent 2px, transparent 5px);
  }
  .warp-veil .warp-sweep {
    position: absolute; left: 0; right: 0;
    height: 42vh; top: -42vh;
    background: linear-gradient(180deg, transparent, rgba(168,216,255,0.20), transparent);
    box-shadow: 0 0 70px rgba(168,216,255,0.30);
  }
  .warp-veil .warp-edge {
    position: absolute; left: 0; right: 0; height: 2px;
    background: var(--hud);
    box-shadow: 0 0 16px var(--hud);
    top: -42vh;
  }
  .warp-veil.fire { animation: warp-veil 0.64s ease forwards; }
  .warp-veil.fire .warp-sweep { animation: warp-band 0.64s cubic-bezier(0.5,0,0.2,1) forwards; }
  .warp-veil.fire .warp-edge { animation: warp-band 0.64s cubic-bezier(0.5,0,0.2,1) forwards; }
  @keyframes warp-veil { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes warp-band { 0% { top: -42vh; } 100% { top: 100vh; } }

  /* ── SECTION-CHANGE CORNER PULSE ──
     The existing fixed corner brackets flash cyan as you cross into a new
     section — a quiet HUD acknowledgement that ties the whole frame together. */
  .corners .c {
    transition: border-color 0.75s ease, box-shadow 0.75s ease;
  }
  .corners.pulse .c {
    border-color: rgba(168,216,255,0.65);
    box-shadow: 0 0 12px rgba(168,216,255,0.22);
  }

  /* ── TERMINAL SCRAMBLE REVEAL (section labels) ── */
  .section-label .nav-scramble { color: var(--hud); }

  /* ── WORK ITEMS · sharper HUD hover ── */
  .work-item {
    transition: background 0.4s ease, padding-left 0.4s var(--ease-out);
    padding-left: 0;
  }
  .work-item:not(.karma-trigger):hover {
    background: linear-gradient(90deg, rgba(168,216,255,0.05), transparent 70%);
    padding-left: 10px;
  }
  .work-item.karma-trigger:hover {
    background: linear-gradient(90deg, rgba(168,216,255,0.07), transparent 70%);
  }
  .work-item .work-tag.portal-tag {
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  }
  .karma-trigger:hover .work-tag.portal-tag {
    border-color: var(--hud-soft) !important;
    box-shadow: 0 0 16px -2px var(--hud-soft);
  }

  /* ── BOLDER CONTACT TILES ── */
  .links { gap: 16px; flex-wrap: wrap; }
  .link.hud-tile {
    width: auto;
    min-width: 150px;
    height: 66px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 0 22px;
    border-radius: 10px;
  }
  .link.hud-tile::after {
    content: '';
    position: absolute;
    top: 0; left: 18px; right: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hud-soft), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .link.hud-tile:hover::after { opacity: 1; }
  .link.hud-tile:hover {
    border-color: var(--hud-soft);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      0 18px 40px -10px rgba(0,0,0,0.9),
      0 0 28px -6px var(--hud-soft);
  }
  .link.hud-tile svg { width: 22px; height: 22px; flex: 0 0 auto; }
  .link .link-text {
    display: flex; flex-direction: column; gap: 3px;
    text-align: left; position: relative; z-index: 1;
  }
  .link .link-name {
    font-family: 'Geist Mono', monospace;
    font-size: 11px; letter-spacing: 0.06em;
    color: var(--fg); font-weight: 500;
  }
  .link .link-sub {
    font-family: 'Geist Mono', monospace;
    font-size: 8px; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--faint);
    transition: color 0.3s ease;
  }
  .link.hud-tile:hover .link-sub { color: var(--hud); }
  @media (max-width: 480px) {
    :root { --pad: 16px; }
    .link.hud-tile { min-width: 0; width: 100%; }
    .console-top .right { font-size: 9px; letter-spacing: 0.12em; }
  }

  /* ── HUD hairlines on the console bars (subtle theme tie-in) ── */
  .console-top { border-bottom: 1px solid var(--hud-faint); }
  .console-bot { border-top: 1px solid var(--hud-faint); }

  @media (prefers-reduced-motion: reduce) {
    .warp-veil, .warp-veil .warp-sweep, .warp-veil .warp-edge { animation: none !important; }
    .scroll-beam, .rail-prog-fill { transition: none !important; }
  }

  /* ════════════════════════════════════════════════════════════════
     v2.2 · COOL LAYER — reticle, 3D tilt, cinematic chapter warp
     ════════════════════════════════════════════════════════════════ */

  /* ── CINEMATIC CHAPTER CARD (inside the warp veil) ──
     Navigation flashes the giant section name center-screen. */
  .warp-chapter {
    position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    opacity: 0; pointer-events: none; padding: 0 24px;
  }
  .warp-veil.fire .warp-chapter { animation: wc-in 0.64s cubic-bezier(0.16,1,0.3,1) forwards; }
  .wc-num {
    font-family: 'Geist Mono', monospace;
    font-size: 11px; letter-spacing: 0.5em; text-transform: uppercase;
    color: var(--hud); padding-left: 0.5em;
  }
  .wc-name {
    font-family: 'Instrument Serif', serif; font-style: italic;
    font-size: clamp(44px, 13vw, 104px); line-height: 0.92;
    color: #fff; text-align: center;
    text-shadow: 0 0 48px rgba(168,216,255,0.45);
  }
  .wc-line {
    width: 0; height: 1px; background: var(--hud);
    box-shadow: 0 0 10px var(--hud);
  }
  .warp-veil.fire .wc-line { animation: wc-line 0.64s cubic-bezier(0.16,1,0.3,1) forwards; }
  @keyframes wc-in {
    0%   { opacity: 0; transform: translateY(-50%) scale(0.92); }
    28%  { opacity: 1; }
    72%  { opacity: 1; transform: translateY(-50%) scale(1); }
    100% { opacity: 0; transform: translateY(-50%) scale(1.04); }
  }
  @keyframes wc-line { 0% { width: 0; } 45% { width: 120px; } 100% { width: 0; } }

  /* ── HUD TARGETING RETICLE (desktop pointer only) ── */
  .hud-reticle {
    position: fixed; left: 0; top: 0;
    width: 30px; height: 30px;
    z-index: 46; pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease, width 0.22s var(--ease-out), height 0.22s var(--ease-out);
    will-change: transform;
  }
  /* Targeting HUD only materializes when locked onto an interactive element —
     a purposeful reticle, never a constant cursor overlay. */
  /* The reticle is invisible by default and ONLY appears when locked onto an
     interactive target — and even then, softly. No free-floating cursor light. */
  .hud-reticle { opacity: 0 !important; }
  body.hud-cursor-on .hud-reticle.locked { opacity: 0.7 !important; }
  /* Kill the unlocked center dot entirely — it was the stray light that
     followed the cursor. The reticle now reads only as a deliberate lock-on. */
  .hud-reticle .rt-dot { display: none; }

  /* ── PERF: localize the hero name's mix-blend compositing ──
     The chrome name layers a specular sweep (lighten) + gravity pool (screen).
     Without isolation the compositor re-blends them against the ENTIRE galaxy
     backdrop every frame — the reason the hero ran heavier than the scrolled
     sections. `isolation: isolate` confines the blend to the name's own group
     (it sits on near-black, so the look is preserved) and lifts that cost. */
  #name-display { isolation: isolate; }
  .hud-reticle .rt-corner {
    position: absolute; width: 8px; height: 8px;
    border: 1.5px solid var(--hud);
    box-shadow: 0 0 6px var(--hud-soft);
    transition: border-color 0.25s ease;
  }
  .rt-corner.tl { left: 0; top: 0; border-right: 0; border-bottom: 0; }
  .rt-corner.tr { right: 0; top: 0; border-left: 0; border-bottom: 0; }
  .rt-corner.bl { left: 0; bottom: 0; border-right: 0; border-top: 0; }
  .rt-corner.br { right: 0; bottom: 0; border-left: 0; border-top: 0; }
  .hud-reticle .rt-dot {
    position: absolute; left: 50%; top: 50%;
    width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
    border-radius: 50%; background: var(--hud);
    box-shadow: 0 0 8px var(--hud);
    transition: opacity 0.2s ease;
  }
  .hud-reticle.locked .rt-dot { opacity: 0; }
  .hud-reticle.locked .rt-corner {
    border-color: var(--warm-accent);
    box-shadow: 0 0 8px rgba(255,217,168,0.6);
  }
  .hud-reticle .rt-label {
    position: absolute; left: 50%; bottom: -16px;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Geist Mono', monospace; font-size: 7.5px;
    letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--warm-accent);
    opacity: 0; transition: opacity 0.2s ease;
  }
  .hud-reticle.locked .rt-label { opacity: 0.95; }
  /* lock-on acquisition pulse — fires once when a new target is acquired */
  .hud-reticle.acquire .rt-corner {
    animation: rt-acquire 0.34s cubic-bezier(0.16,1,0.3,1);
  }
  @keyframes rt-acquire {
    0%   { transform: scale(1.6); }
    100% { transform: scale(1); }
  }
  /* (velocity glow removed: animating box-shadow forced a repaint every frame.
     The beam keeps its static glow from the base rule — compositor-free.) */

  /* ── 3D TILT + GLARE (cards) ── */
  [data-tilt] {
    transform-style: preserve-3d;
    transition: transform 0.5s var(--ease-out);
    will-change: transform;
  }
  .tilt-glare {
    position: absolute; inset: 0;
    pointer-events: none; border-radius: inherit;
    background: radial-gradient(circle at var(--gx,50%) var(--gy,50%),
      rgba(168,216,255,0.18), transparent 55%);
    opacity: 0; transition: opacity 0.4s ease; z-index: 2;
  }
  [data-tilt]:hover .tilt-glare { opacity: 1; }
  .work-item[data-tilt] { position: relative; }
  @media (hover: none) {
    [data-tilt] { transform: none !important; }
    .tilt-glare { display: none; }
  }

  /* ════════════════════════════════════════════════════════════════
     v2.2 · PREMIUM SMOOTHNESS + SCI-FI INSTRUMENT LAYER
     ════════════════════════════════════════════════════════════════ */

  /* ── Lighter compositing on touch ──
     backdrop-filter over the live galaxy canvas is the single most expensive
     thing on phones; swap the nav to a solid translucent fill there so the
     field stays at full framerate. */
  @media (hover: none), (max-width: 719px) {
    .rail {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background: linear-gradient(180deg, rgba(16,18,24,0.82), rgba(8,9,12,0.9));
    }
  }

  /* ── SECTION SCAN-SWEEP ──
     A thin light line reads each section into view as you reach it — the
     content feels "scanned in", not just faded. One transient GPU transform. */
  .sec-scan {
    position: absolute; left: 0; right: 0; top: 0; height: 2px;
    pointer-events: none; z-index: 6; opacity: 0;
    background: linear-gradient(90deg, transparent, var(--hud), transparent);
    box-shadow: 0 0 18px 2px var(--hud-soft);
    will-change: transform, opacity;
  }
  section.scanning .sec-scan { animation: sec-scan 1.05s cubic-bezier(0.5,0,0.2,1) forwards; }
  @keyframes sec-scan {
    0%   { transform: translateY(0); opacity: 0; }
    12%  { opacity: 0.85; }
    100% { transform: translateY(74vh); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .sec-scan { display: none; } }

  /* ── BOTTOM TELEMETRY · signal bars ── */
  .sig-bars {
    display: inline-flex; align-items: flex-end; gap: 2px;
    height: 10px; margin-left: 9px;
  }
  .sig-bars i {
    width: 2px; background: var(--hud); opacity: 0.8;
    border-radius: 1px; transform-origin: bottom;
    animation: sig 1.5s ease-in-out infinite;
  }
  .sig-bars i:nth-child(1) { height: 3px; animation-delay: 0s; }
  .sig-bars i:nth-child(2) { height: 6px; animation-delay: 0.18s; }
  .sig-bars i:nth-child(3) { height: 9px; animation-delay: 0.36s; }
  .sig-bars i:nth-child(4) { height: 5px; animation-delay: 0.54s; }
  @keyframes sig { 0%,100% { transform: scaleY(0.45); opacity: 0.45; } 50% { transform: scaleY(1); opacity: 0.95; } }
  @media (prefers-reduced-motion: reduce) { .sig-bars i { animation: none; } }

  /* ── LIVING CORNER HUD ──
     The fixed viewport brackets gain a faint crosshair tick + a slow breathe,
     so the whole frame reads as a spacecraft instrument viewport. */
  .corners .c::after {
    content: ''; position: absolute;
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--hud-faint);
    box-shadow: 0 0 6px var(--hud-faint);
  }
  .corners .tl::after { top: 6px; left: 6px; }
  .corners .tr::after { top: 6px; right: 6px; }
  .corners .bl::after { bottom: 6px; left: 6px; }
  .corners .br::after { bottom: 6px; right: 6px; }
  .corners.pulse .c::after { background: var(--hud); box-shadow: 0 0 8px var(--hud); }

  /* ── PREMIUM PRESS FEEDBACK (touch) ── */
  @media (hover: none) {
    .work-item { transition: transform 0.18s var(--ease-out), background 0.4s ease, padding-left 0.4s var(--ease-out); }
    .work-item:active { transform: scale(0.985); }
    .rail-item:active::after { transform: scale(1.4); }
  }

  /* ── CINEMATIC HERO DOLLY ──
     The hero recedes (scale + fade) as you scroll away, like a camera pull —
     transform/opacity only, so it stays perfectly smooth everywhere. */
  #hero .console {
    will-change: transform, opacity;
    transform-origin: 50% 36%;
    backface-visibility: hidden;
  }

  /* ── REFINED NAV MICRO-INTERACTION (desktop) ── */
  @media (hover: hover) {
    .rail-item::after { transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out), background 0.4s ease, box-shadow 0.4s ease, transform 0.35s var(--ease-out); }
    .rail-item:hover::after { transform: scale(1.55); }
  }

  /* ── SMOOTH CONTACT-TILE REVEAL ──
     The glassy tiles previously animated a blur-filter WHILE moving a
     backdrop-filtered box — the X/Twitter tile re-rasterized its blurred
     backdrop every frame and loaded rough. Fix: lighter glass blur, promote
     to a layer, drop the animated blur-filter, and reveal opacity-led with a
     short rise. Each tile is now its own reveal (d2 / d3) so they arrive in a
     refined sequence rather than as one heavy block. */
  .link.hud-tile {
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    will-change: opacity, transform;
  }
  .links .link.reveal { filter: none; transform: translateY(9px); }
  .links .link.reveal.visible { transform: translateY(0); }

  /* ════════════════════════════════════════════════════════════════
     HOLOGRAPHIC DATA-CORE — replaces the chrome orb (bottom-right)
     A projected wireframe polyhedron that rotates in real 3D, reacts to
     cursor (desktop) / gyroscope (mobile), and reads as a hologram lifting
     off the screen: chromatic edges (drawn on canvas), scanlines, a
     projector base, a resonance-driven aura, and an idle float.
     ════════════════════════════════════════════════════════════════ */
  .karma-orb.datacore {
    --kres: 0;
    position: fixed;
    left: 0; top: 0;            /* position is driven entirely by JS transform */
    right: auto; bottom: auto;
    width: 124px; height: 124px;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
    z-index: 22;
    /* roaming presence: JS writes translate3d() every frame. We keep the
       transition OFF for position (physics handles smoothing) and only the
       boot fade-in is eased. */
    will-change: transform, opacity;
    transition: opacity 1.1s var(--ease-out);
  }
  .karma-orb.datacore::before { display: none !important; }   /* kill chrome rim */
  /* The companion no longer hides past the hero — it roams the whole site.
     dc-dim is a soft, brief recede used only during fast scrolls so it never
     visually fights the content while the page is flying past. */
  .karma-orb.datacore.dc-dim {
    opacity: 0.32 !important;
  }
  /* resonance aura behind the core */
  .karma-orb.datacore .dc-glow {
    position: absolute; inset: -34%;
    border-radius: 50%;
    pointer-events: none; z-index: 0;
    /* static gradient + opacity modulation: changing --kres no longer forces a
       gradient re-raster + re-blur (that was a heavy repaint). Opacity changes
       ride the compositor for free. */
    background: radial-gradient(circle,
      rgba(168,216,255,0.5) 0%,
      rgba(168,216,255,0.06) 38%,
      transparent 68%);
    filter: blur(4px);
    opacity: calc(0.36 + var(--kres) * 0.9);
    will-change: opacity;
  }
  .karma-orb.datacore .dc-canvas {
    position: absolute; inset: -28%; z-index: 1;
    display: block;
    pointer-events: none;
    animation: dc-bob 4.5s ease-in-out infinite;
  }
  @keyframes dc-bob { 0%,100% { transform: translateY(2px); } 50% { transform: translateY(-4px); } }
  .karma-orb.datacore .dc-scan {
    position: absolute; inset: 6%; z-index: 2;
    pointer-events: none; border-radius: 8px;
    background: repeating-linear-gradient(0deg,
      rgba(180,222,255,0.07) 0px, rgba(180,222,255,0.07) 1px,
      transparent 1px, transparent 3px);
    opacity: 0.55;
  }
  /* projector pad the hologram floats above */
  .karma-orb.datacore .dc-base {
    position: absolute; left: 50%; bottom: -4px;
    transform: translateX(-50%);
    width: 52px; height: 11px; border-radius: 50%;
    pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse at center,
      rgba(168,216,255, calc(0.4 + var(--kres) * 0.4)), transparent 70%);
    animation: dc-base-pulse 4.5s ease-in-out infinite;
  }
  @keyframes dc-base-pulse { 0%,100% { transform: translateX(-50%) scaleX(1); opacity: 0.8; } 50% { transform: translateX(-50%) scaleX(1.18); opacity: 1; } }
  .karma-orb.datacore .orb-label { bottom: -20px; z-index: 3; }
  /* JS owns the datacore's transform (roaming position + scale). Neutralize the
     inherited hover/active/booted/surge button transforms so nothing fights the
     physics loop — the hover lift + surge burst are folded into the JS scale. */
  body.booted .karma-orb.datacore,
  .karma-orb.datacore:hover,
  .karma-orb.datacore:active,
  .karma-orb.datacore.dc-surge { transform: none; animation: none; }
  /* surge acknowledgement ring (pseudo-element — safe to animate independently) */
  .karma-orb.datacore::after {
    content: ''; position: absolute; inset: 8%;
    border-radius: 50%; pointer-events: none; z-index: 0;
    border: 1px solid rgba(168,216,255,0.6);
    opacity: 0; transform: scale(0.6);
  }
  .karma-orb.datacore.dc-surge::after { animation: dc-surge-ring 0.6s ease-out; }
  @keyframes dc-surge-ring {
    0%   { opacity: 0.7; transform: scale(0.55); }
    100% { opacity: 0;   transform: scale(1.7); }
  }
  @media (prefers-reduced-motion: reduce) {
    .karma-orb.datacore.dc-surge::after { animation: none !important; }
  }

  @media (max-width: 719px) {
    /* Smaller footprint on phones; position is driven by the JS roam loop,
       which keeps the figure inside the safe viewport bounds per section. */
    .karma-orb.datacore { width: 92px; height: 92px; }
    .karma-orb.datacore .dc-canvas { inset: -18%; }
    .karma-orb.datacore .dc-glow   { inset: -24%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .karma-orb.datacore .dc-canvas, .karma-orb.datacore .dc-base { animation: none !important; }
  }

  /* ════════════════════════════════════════════════════════════════
     MOBILE READABILITY LAYER  (phones / touch only — desktop untouched)
     ────────────────────────────────────────────────────────────────
     On a small screen the cinematic layers (code-rain, neural net, orb, rail)
     share the same narrow column as the text and start to fight it. This layer
     makes every effect YIELD to legibility without removing any of them:
       1. The background canvases recede behind a calm scrim.
       2. Body text gets brighter + a soft local backing so it always reads.
       3. The companion shrinks, dims, tucks into a safe corner, and is set to
          never sit on the reading column — it stays a delightful accent.
       4. The nav rail slims so it can't crowd the text.
     ════════════════════════════════════════════════════════════════ */
  @media (max-width: 719px), (pointer: coarse) {
    /* 1 ── keep the living backdrop bright (the glow + shine you liked) ──
       Only a whisper of pull-back so it never overpowers text, but the color
       and depth stay. (Previously these were dimmed too hard, which drained
       the atmosphere — restored.) */
    canvas#neural-canvas { opacity: 0.82; }
    canvas#fx-canvas     { opacity: 0.9; }
    #draw-canvas         { opacity: 1; }

    /* 2 ── give the TEXT its contrast locally, not by darkening the whole page.
       A soft shadow + a faint halo bound to each text block means the words
       stay sharp while the rest of the screen keeps all its color and shine. */
    .section-body { color: rgba(232,232,234,0.82); }
    .section-body strong { color: #fff; }
    .manifesto { color: rgba(232,232,234,0.94); }
    .section-body, .manifesto, .tagline, .section-title, .contact-prompt, .quote {
      text-shadow: 0 1px 8px rgba(0,0,0,0.8);
    }
    /* a localized radial veil sitting JUST behind each text column — fades to
       fully transparent at the edges, so there's no global darkening. */
    .section-body, .manifesto {
      position: relative;
    }
    .section-body::before, .manifesto::before {
      content: '';
      position: absolute;
      inset: -14px -20px;
      z-index: -1;
      pointer-events: none;
      background: radial-gradient(ellipse 100% 100% at 30% 50%,
        rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.28) 55%, rgba(0,0,0,0) 100%);
    }

    /* 3 ── the companion: a small, calm accent parked low, clear of the text.
       It brightens again on touch (handled in JS). `body.booted` prefix raises
       specificity above the global booted rule so these mobile values win. */
    body.booted .karma-orb.datacore,
    .karma-orb.datacore {
      width: 74px; height: 74px;
      opacity: 0.7;
      transition: opacity 0.5s ease;
    }
    .karma-orb.datacore .dc-canvas { inset: -16%; }
    .karma-orb.datacore .dc-glow   { inset: -20%; }
    /* it recedes a little while the page is actively scrolling */
    body.booted.is-scrolling .karma-orb.datacore,
    body.is-scrolling .karma-orb.datacore { opacity: 0.38; }
    /* a tap wakes it fully — overrides the scrolling dim for the surge moment */
    body .karma-orb.datacore.dc-surge { opacity: 1 !important; }

    /* 4 ── nav rail: slim AND far more transparent on mobile so it never
       competes with the text while reading/navigating. It gently firms up
       only while actively scrolling (when you're actually using it). */
    .rail {
      right: 6px; padding: 9px 6px;
      transform: translateY(-50%) scale(0.8);
      background: linear-gradient(180deg, rgba(20,22,28,0.5), rgba(8,9,12,0.6));
      border-color: rgba(168,216,255,0.06);
      /* no backdrop-filter on mobile: blur compositing is the #1 iOS frame killer */
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      box-shadow: none;
    }
    body.booted .rail { opacity: 0.4; transform: translateY(-50%) scale(0.8); }
    body.booted.is-scrolling .rail { opacity: 0.85; }
    /* the section-name label chips never show on touch (they're a hover tool) */
    .rail-label { display: none !important; }

    /* keep the HUD reticle fully off on touch (it's a desktop pointer tool) */
    .hud-reticle { display: none !important; }
  }

  /* ════════════════════════════════════════════════════════════════
     v4 · CONNECT-FIRST + INTERACTIVE CREDENTIALS + MOBILE DOCK
     ════════════════════════════════════════════════════════════════ */

  /* Connect lives in hero — operator card + links front and center */
  .console-row.hero-connect {
    position: relative;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
  }
  body.boot-reveal .console-row.hero-connect,
  body.booted .console-row.hero-connect,
  .console-row.hero-connect.hero-live {
    opacity: 1;
    transform: none;
  }
  #hero-connect {
    text-align: center;
    padding: clamp(4px, 1.5vh, 16px) 0 clamp(16px, 3vh, 32px);
  }
  #hero-connect .hero-connect-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }
  #hero-connect .contact-prompt {
    font-size: clamp(26px, 7.2vw, 44px);
    margin-bottom: 16px;
  }
  #hero-connect .contact-sub { margin-bottom: 24px; }
  #hero-connect .operator-card {
    margin: 8px auto 22px;
    width: 100%;
    max-width: 420px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 20px 48px -20px rgba(0,0,0,0.85),
      0 0 32px -12px var(--hud-soft);
  }
  #hero-connect .links {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }
  #hero-connect .link.hud-tile {
    width: 100%;
    min-width: 0;
    height: 62px;
  }
  @media (min-width: 720px) {
    #hero-connect .hero-connect-inner { max-width: 640px; }
    #hero-connect .links {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      max-width: none;
    }
    #hero-connect .link.hud-tile {
      width: auto;
      min-width: 168px;
    }
  }

  /* ── CREDENTIAL DECK ── */
  .cred-deck {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 640px;
  }
  .cred-deck-head { display: flex; flex-direction: column; gap: 14px; }
  .cred-stat {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
  }
  .cred-stat-num {
    font-family: 'Instrument Serif', serif;
    font-size: clamp(36px, 9vw, 48px);
    line-height: 1;
    color: var(--fg);
    font-feature-settings: "tnum" on;
  }
  .cred-stat-label {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .cred-bar {
    height: 2px;
    background: var(--line);
    border-radius: 2px;
    overflow: hidden;
  }
  .cred-bar-fill {
    display: block;
    height: 100%;
    width: 14%;
    background: linear-gradient(90deg, var(--hud), rgba(168,216,255,0.35));
    box-shadow: 0 0 12px var(--hud-soft);
    transition: width 0.55s var(--ease-out);
  }
  .cred-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .cred-tab {
    font-family: 'Geist Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 8px 14px;
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .cred-tab:hover, .cred-tab.active {
    color: var(--fg);
    border-color: var(--hud-soft);
    box-shadow: 0 0 18px -6px var(--hud-soft);
  }
  .cred-tab.active { background: rgba(168,216,255,0.08); }

  .cred-viewport {
    position: relative;
    min-height: 220px;
    perspective: 900px;
    touch-action: pan-y;
  }
  .cred-tap {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32%;
    max-width: 140px;
    z-index: 4;
    border: 0;
    padding: 0;
    margin: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.28), transparent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
  }
  .cred-tap-next {
    right: 0;
    left: auto;
    justify-content: flex-end;
    background: linear-gradient(270deg, rgba(0,0,0,0.28), transparent);
  }
  .cred-tap-prev { left: 0; justify-content: flex-start; }
  .cred-tap-glyph {
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1;
    color: var(--hud);
    opacity: 0.28;
    transition: opacity 0.25s ease, transform 0.25s var(--ease-out);
    pointer-events: none;
    padding: 0 6px;
  }
  .cred-tap:hover .cred-tap-glyph,
  .cred-tap:focus-visible .cred-tap-glyph {
    opacity: 0.62;
  }
  .cred-tap:active .cred-tap-glyph {
    opacity: 0.85;
    transform: scale(1.08);
  }
  @media (min-width: 720px) {
    .cred-tap { width: 22%; opacity: 0.85; }
    .cred-tap-glyph { opacity: 0; }
    .cred-viewport:hover .cred-tap-glyph { opacity: 0.35; }
    .cred-tap:hover .cred-tap-glyph { opacity: 0.7; }
  }
  .cred-viewport.cred-snap .cred-card.active {
    animation: cred-in 0.55s var(--ease-out);
  }
  @keyframes cred-in {
    from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.98); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  }
  .cred-track { position: relative; min-height: 220px; }
  .cred-card {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 22px 22px 20px;
    border: 1px solid rgba(232,232,234,0.14);
    border-radius: 14px;
    background:
      linear-gradient(165deg, rgba(18,22,30,0.82), rgba(6,7,10,0.88)),
      radial-gradient(120% 80% at 0% 0%, rgba(168,216,255,0.08), transparent 55%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 18px 40px -18px rgba(0,0,0,0.85);
    position: relative;
    overflow: hidden;
  }
  .cred-card.active { display: flex; }
  .cred-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hud-soft), transparent);
    opacity: 0.7;
  }
  .cred-card[data-domain="design"].active { border-color: rgba(196,214,233,0.22); }
  .cred-card[data-domain="data"].active { border-color: rgba(168,216,255,0.24); }
  .cred-card[data-domain="security"].active { border-color: rgba(255,217,168,0.22); }
  .cred-card[data-domain="ai"].active { border-color: rgba(180,255,220,0.2); }

  .cred-card-num {
    font-size: 9px;
    letter-spacing: 0.32em;
    color: var(--hud);
    font-feature-settings: "tnum" on;
  }
  .cred-card-domain {
    font-family: 'Geist Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--faint);
  }
  .cred-card-title {
    font-family: 'Instrument Serif', serif;
    font-size: clamp(22px, 5.6vw, 28px);
    line-height: 1.15;
    color: var(--fg);
    font-weight: 400;
    margin: 0;
  }
  .cred-card-issuer {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin: 0;
  }
  .cred-card-use {
    font-size: 13px;
    line-height: 1.55;
    color: var(--fg);
    opacity: 0.88;
    margin: 4px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }

  .cred-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }
  .cred-nav-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: rgba(0,0,0,0.45);
    color: var(--fg);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .cred-nav-btn:hover {
    border-color: var(--hud-soft);
    box-shadow: 0 0 16px -4px var(--hud-soft);
  }
  .cred-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 280px; }
  .cred-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(232,232,234,0.18);
    cursor: pointer;
    transition: transform 0.3s var(--ease-out), background 0.3s ease, box-shadow 0.3s ease;
  }
  .cred-dot.active {
    background: var(--hud);
    box-shadow: 0 0 8px var(--hud-soft);
    transform: scale(1.25);
  }

  /* ── MOBILE CONNECT DOCK ── */
  .connect-dock {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--botbar-h) + env(safe-area-inset-bottom, 0px) + 8px);
    z-index: 48;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 8px;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid rgba(168,216,255,0.16);
    background: linear-gradient(180deg, rgba(14,16,22,0.92), rgba(6,7,10,0.96));
    box-shadow: 0 12px 40px -8px rgba(0,0,0,0.9), 0 0 24px -8px var(--hud-soft);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .connect-dock[hidden] { display: none !important; }
  .dock-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 52px;
    border-radius: 10px;
    border: 1px solid rgba(232,232,234,0.1);
    background: rgba(255,255,255,0.03);
    color: var(--fg);
    text-decoration: none;
    font-family: 'Geist Mono', monospace;
    font-size: 8px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: transform 0.25s var(--ease-out), border-color 0.25s ease, box-shadow 0.25s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .dock-tile svg { width: 18px; height: 18px; fill: currentColor; opacity: 0.9; }
  .dock-tile:active { transform: scale(0.96); }
  .dock-tile.dock-primary {
    border-color: var(--hud-soft);
    background: linear-gradient(180deg, rgba(168,216,255,0.14), rgba(168,216,255,0.04));
    box-shadow: 0 0 20px -6px var(--hud-soft);
  }
  body.dock-on #hero-connect .links { padding-bottom: 72px; }
  body.dock-on section { padding-bottom: calc(var(--botbar-h) + env(safe-area-inset-bottom, 0px) + 88px); }
  /* id-specificity override so the hero (which now carries id-level padding)
     still clears the fixed mobile connect dock */
  body.dock-on #hero { padding-bottom: calc(var(--botbar-h) + env(safe-area-inset-bottom, 0px) + 96px); }

  @media (min-width: 720px) {
    .connect-dock { display: none !important; }
    body.dock-on section { padding-bottom: calc(var(--botbar-h) + env(safe-area-inset-bottom, 0px) + 24px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .cred-viewport.cred-snap .cred-card.active { animation: none; }
    .cred-bar-fill { transition: none; }
  }

  /* ════════════════════════════════════════════════════════════════
     v5 · CREDENTIAL DECK UPGRADE
     Tactile stacked deck + live 3D tilt + pointer sheen + per-domain
     accent. Everything is transform/opacity only and rAF-throttled, so
     it stays buttery on phones and never repaints layout.
     ════════════════════════════════════════════════════════════════ */
  .cred-viewport { perspective: 1100px; }
  .cred-track {
    transform: rotateX(var(--cry, 0deg)) rotateY(var(--crx, 0deg));
    transform-style: preserve-3d;
    transition: transform 0.55s var(--ease-out);
  }
  .cred-viewport.tilting .cred-track { transition: transform 0.12s linear; }

  /* stacked "paper" behind the active card — real deck depth */
  .cred-track::before,
  .cred-track::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: linear-gradient(165deg, rgba(16,20,28,0.7), rgba(6,7,10,0.85));
    pointer-events: none;
    z-index: 0;
  }
  .cred-track::before { transform: translate3d(0, 9px, -28px) scale(0.972); opacity: 0.5; }
  .cred-track::after  { transform: translate3d(0, 18px, -56px) scale(0.944); opacity: 0.28; }

  .cred-card { --cd: 168,216,255; position: relative; z-index: 1; }
  .cred-card[data-domain="design"]   { --cd: 196,214,233; }
  .cred-card[data-domain="data"]     { --cd: 168,216,255; }
  .cred-card[data-domain="security"] { --cd: 255,217,168; }
  .cred-card[data-domain="ai"]       { --cd: 168,255,214; }

  .cred-card.active {
    padding: 26px 24px 24px;
    border-radius: 16px;
    border-color: rgba(var(--cd), 0.3) !important;
    background:
      radial-gradient(130% 92% at 100% 0%, rgba(var(--cd), 0.13), transparent 56%),
      linear-gradient(165deg, rgba(18,22,30,0.92), rgba(6,7,10,0.95));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.07),
      0 26px 64px -26px rgba(0,0,0,0.92),
      0 0 40px -16px rgba(var(--cd), 0.5);
  }
  .cred-card.active::after {
    background: linear-gradient(90deg, transparent, rgba(var(--cd), 0.9), transparent);
    opacity: 0.9;
  }

  .cred-card-num,
  .cred-card-domain,
  .cred-card-title,
  .cred-card-issuer,
  .cred-card-use { position: relative; z-index: 2; }
  .cred-card-num { color: rgba(var(--cd), 0.92); }
  .cred-card-domain {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(var(--cd), 0.85);
  }
  .cred-card-domain::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgb(var(--cd));
    box-shadow: 0 0 9px rgba(var(--cd), 0.85);
    flex: none;
  }

  /* pointer-tracking specular sheen */
  .cred-sheen {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    background: radial-gradient(200px 200px at var(--mx, 50%) var(--my, 0%),
                rgba(255,255,255,0.12), transparent 62%);
    transition: opacity 0.45s ease;
  }
  .cred-card.active .cred-sheen { opacity: 1; }

  /* ghost domain index watermark */
  .cred-watermark {
    position: absolute;
    right: 16px;
    bottom: 2px;
    font-family: 'Instrument Serif', serif;
    font-size: 96px;
    line-height: 1;
    color: rgba(var(--cd), 0.07);
    pointer-events: none;
    z-index: 0;
    font-feature-settings: "tnum" on;
  }
  @media (max-width: 460px) { .cred-watermark { font-size: 74px; } }

  @media (prefers-reduced-motion: reduce) {
    .cred-track { transform: none !important; transition: none; }
  }

  /* ════════════════════════════════════════════════════════════════
     LEGIBILITY (global · desktop + mobile) — definitive
     Bright text + dark halos + dark backing pools that actually BLOCK the
     rain behind each reading block, so words are ALWAYS readable over the
     living backdrop without flattening the cosmos.
     ════════════════════════════════════════════════════════════════ */
  .contact-prompt, .contact-sub, .manifesto, .tagline,
  .readout-strip .r-v, .readout-strip .r-k,
  .section-title, .section-body, .pull-quote,
  .work-title, .work-desc,
  .operator-card .oc-name, .operator-card .oc-role, .operator-card .oc-loc {
    text-shadow: 0 1px 2px rgba(0,0,0,0.96), 0 0 12px rgba(0,0,0,0.86), 0 0 26px rgba(0,0,0,0.62);
  }
  .manifesto, .tagline { color: #f1f1f2; }
  .section-body { color: rgba(232,232,234,0.9); }
  .section-body strong { color: #fff; }

  .contact-prompt, .console-row.readout, .section-body, .pull-quote { position: relative; }
  .manifesto::before { content: none; }            /* superseded by the readout-row pool */
  .contact-prompt::before {
    content: ''; position: absolute; inset: -12px -7%; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 80% 135% at 50% 50%, rgba(2,4,8,0.82) 0%, rgba(2,4,8,0.5) 56%, rgba(2,4,8,0) 88%);
  }
  .console-row.readout::before {
    content: ''; position: absolute; inset: -14px -6%; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 96% 112% at 42% 50%, rgba(2,4,8,0.85) 0%, rgba(2,4,8,0.5) 58%, rgba(2,4,8,0) 90%);
  }
  .section-body::before {
    content: ''; position: absolute; inset: -10px -20px; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 100% 120% at 32% 50%, rgba(2,4,8,0.8) 0%, rgba(2,4,8,0.44) 58%, rgba(2,4,8,0) 92%);
  }


  /* ════════════════════════════════════════════════════════════════
     LAYOUT REFINEMENTS (final polish)
     ════════════════════════════════════════════════════════════════ */
  /* readable chip behind the discipline line so it never clashes with the bust */
  .contact-sub {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(4,6,10,0.55);
    box-shadow: inset 0 0 0 1px rgba(168,216,255,0.06);
  }
  /* clear the fixed footer at the end of the page */
  #credentials { padding-bottom: calc(var(--botbar-h) + env(safe-area-inset-bottom, 0px) + 40px); }

  @media (max-width: 719px) {
    /* reclaim wasted space at the very top of the hero */
    #hero { padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 2px); }
    #hero-connect { padding-top: 0; }
    #hero-connect .contact-sub { margin-bottom: 12px; }
    #hero-connect .operator-card { margin-top: 0; }
    #credentials { padding-bottom: calc(var(--botbar-h) + env(safe-area-inset-bottom, 0px) + 46px); }
  }

  /* desktop: shift the reading column left so text + bust are balanced,
     filling the empty left space and opening a clear gap to the sentinel */
  @media (min-width: 1024px) {
    #hero { align-items: flex-start; }
    #hero .console { margin-left: clamp(40px, 7vw, 150px); margin-right: auto; max-width: 760px; }
    #hero-connect { text-align: left; }
    #hero-connect .hero-connect-inner { align-items: flex-start; max-width: 560px; margin: 0; }
    #hero-connect .contact-prompt { text-align: left; }
    #hero-connect .operator-card { margin-left: 0; margin-right: 0; }
    #hero-connect .links { justify-content: flex-start; margin-left: 0; margin-right: 0; }
  }

  /* ════════════════════════════════════════════════════════════════
     FINAL POLISH — desktop balance, no-Sentinel completeness, harmony
     ════════════════════════════════════════════════════════════════ */

  /* Operator + Based-in to OPPOSITE TOP CORNERS on desktop, using the full
     width instead of bunching together. Mobile keeps its existing 2-up grid. */
  @media (min-width: 1024px) {
    #hero { position: relative; }
    #hero .console-row.meta {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 24px;
      width: 100%;
      max-width: none;
    }
    #hero .console-row.meta .console-cell {
      border-top: none;
      padding: 0;
    }
    #hero .console-row.meta .console-cell:last-child {
      text-align: right;
      align-items: flex-end;
    }
  }

  /* When the 3D Sentinel can't render (no WebGL), the hero must not leave the
     right half empty. Re-center the whole composition so it reads as a finished,
     intentional layout — what YOU see on this machine, and the ~2% of visitors
     without WebGL. Browsers WITH WebGL keep the left-text / right-entity split. */
  @media (min-width: 1024px) {
    body.no-sentinel #hero { align-items: center; }
    body.no-sentinel #hero .console {
      margin-left: auto;
      margin-right: auto;
      max-width: min(1000px, 88vw);
    }
    body.no-sentinel #hero-connect .hero-connect-inner {
      align-items: center;
      max-width: 600px;
      margin: 0 auto;
    }
    body.no-sentinel #hero-connect .contact-prompt { text-align: center; }
    body.no-sentinel #hero-connect .operator-card { margin-left: auto; margin-right: auto; }
    body.no-sentinel #hero-connect .links { justify-content: center; }
    /* the corner meta still spans full width — keep it */
  }

  /* ── COLOR HARMONY ── soften every floating panel so it melts into the void
     instead of reading as a flat lighter rectangle. A faded edge + barely-there
     fill + soft hairline = luxurious, not boxy. */
  .operator-card {
    background:
      radial-gradient(120% 140% at 50% 0%, rgba(168,216,255,0.04), transparent 60%),
      linear-gradient(165deg, rgba(18,21,28,0.42), rgba(8,9,13,0.34)) !important;
    border-color: rgba(232,232,234,0.10) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.04),
      0 24px 60px -28px rgba(0,0,0,0.7) !important;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }
  .link.hud-tile {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008)),
      rgba(8,10,14,0.34) !important;
    border-color: rgba(232,232,234,0.10) !important;
  }

  /* ── TIGHTEN WASTED SPACE ── pull the hero rows closer so the composition
     feels deliberate, not airy-empty. */
  #hero .console { gap: clamp(12px, 2.2vh, 22px); }
  #hero-connect { padding-top: 0; }
  #hero-connect .operator-card { margin-top: 6px; margin-bottom: 16px; }
  .console-row.readout { gap: 14px; }
  @media (min-width: 1024px) {
    body.no-sentinel #hero .console-row.readout { align-items: center; text-align: center; }
    body.no-sentinel #hero .readout-strip { max-width: 600px; margin: 0 auto; width: 100%; }
    body.no-sentinel #hero .manifesto,
    body.no-sentinel #hero .tagline { margin-left: auto; margin-right: auto; }
  }