/* ════════════════════════════════════════════════════════════════
   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.
   ════════════════════════════════════════════════════════════════ */

  /* ── SELF-HOSTED FONTS ──
     Served from /fonts in this repo — no Google Fonts request, so no visitor
     data ever touches a third party and the type can never be slowed or broken
     by an external CDN. Geist + Geist Mono are variable fonts (one file spans
     every weight used). Latin subset (the site is English-only). */
  @font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/geist-var-latin.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/geist-mono-var-latin.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/instrument-serif-latin.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/instrument-serif-italic-latin.woff2') format('woff2');
  }
  /* Zodiak (editorial serif) + Panchang (interface display) — self-hosted,
     downloaded from Fontshare (ITF Free Font License). Same rule as above:
     no third-party request may ever slow or break the type. */
  @font-face {
    font-family: 'Zodiak';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/zodiak-300.woff2?r=2') format('woff2');
  }
  @font-face {
    font-family: 'Zodiak';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/zodiak-300-italic.woff2?r=2') format('woff2');
  }
  @font-face {
    font-family: 'Zodiak';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/zodiak-400.woff2?r=2') format('woff2');
  }
  @font-face {
    font-family: 'Zodiak';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/zodiak-400-italic.woff2?r=2') format('woff2');
  }
  @font-face {
    font-family: 'Panchang';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/panchang-400.woff2?r=2') format('woff2');
  }
  @font-face {
    font-family: 'Panchang';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/panchang-500.woff2?r=2') format('woff2');
  }
  @font-face {
    font-family: 'Panchang';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/panchang-600.woff2?r=2') format('woff2');
  }

  /* ── 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;
    /* The render buffer is a fixed size (full screen height on mobile); cover
       scales it uniformly to fill the stage so the mobile URL bar showing/hiding
       only triggers a smooth compositor scale — never a buffer realloc or a
       stretch. This is what keeps the entity perfectly smooth while scrolling. */
    object-fit: cover;
    object-position: center center;
  }
  /* 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;
  }
  .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;
  }
  /* In-copy links (e.g. the CC BY model credit) stay quiet: inherit the muted
     tone with a faint underline, brightening on hover — never browser blue. */
  .work-desc a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(232,232,234,0.25);
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
  }
  .work-desc a:hover {
    color: var(--fg);
    text-decoration-color: var(--hud);
  }

  .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;
  }
  .intro-motion-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.85) brightness(0.82) contrast(1.1) hue-rotate(10deg);
    display: none;
    pointer-events: none;
  }
  .intro.intro-image-mode .intro-video,
  .intro.intro-image-mode .intro-video-bg { display: none; }
  .intro.intro-image-mode .intro-motion-image { display: block; }
  @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-play {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
    min-width: 148px;
    min-height: 48px;
    transform: translate(-50%, 10px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid rgba(168,216,255,0.5);
    background: rgba(7,10,15,0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .intro.intro-play-required .intro-play {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
  .intro-play:active { background: rgba(20,28,38,0.92); }
  .intro-play-glyph { font-size: 10px; }
  .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,
  a.work-item: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; }
  }


/* ════════════════════════════════════════════════════════════════
   v6 · POLISH PASS — tighter mobile hero + richer micro-interactions.
   Purely additive; appended last so it wins by source order. No JS,
   no layout-structure changes — only spacing, type sheen, and hover.
   ════════════════════════════════════════════════════════════════ */

/* 1 · MOBILE — kill the dead band under the hero readout. On phones the
   console is shorter than 90vh, so centering left a void where the (now
   removed) scroll hint floated. Size the hero to its content and pull the
   first section up to meet it. */
@media (max-width: 719px) {
  #hero {
    min-height: auto;
    justify-content: flex-start;
    padding-bottom: clamp(20px, 4vh, 40px);
  }
  #build-section { padding-top: clamp(16px, 3vh, 34px); }
}

/* ================================================================
   v21 · OPTICAL STUDIO SIGNATURE
   Fashion-house typography without clipping masks on the letterforms.
   ================================================================ */

.intro-ident {
  top: 50%;
  width: min(1120px, calc(100vw - max(64px, 8vw)));
  padding: clamp(28px, 5vw, 72px) clamp(8px, 1.8vw, 26px);
  overflow: visible;
}

.intro-ident::before {
  content: '';
  position: absolute;
  inset: 0;
  border-block: 1px solid rgba(255,255,255,.13);
  opacity: 0;
  transform: scaleX(.18);
  animation: studio-frame-in 1.15s .08s var(--ease-out) forwards;
}

.intro-ident-mark {
  position: absolute;
  left: 50%;
  top: 0;
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: .04em;
  color: rgba(255,255,255,.88);
  font-family: var(--font-editorial);
  font-size: clamp(12px, 1.25vw, 18px);
  line-height: 1;
  transform: translate(-50%, -50%) scale(.78);
  opacity: 0;
  filter: blur(5px);
  animation: studio-mark-in .75s .28s var(--ease-out) forwards;
  text-shadow: 0 4px 18px rgba(0,0,0,.9);
}

.intro-ident-mark i { font-style: normal; font-weight: 300; }
.intro-ident-mark b { font-style: italic; font-weight: 300; }

.intro-ident-axis {
  left: 7%;
  right: 7%;
  top: 61%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18) 14%, rgba(255,255,255,.72) 50%, rgba(255,255,255,.18) 86%, transparent);
  animation-duration: 1.35s;
  animation-delay: .32s;
}

.intro-ident-name {
  position: relative;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
  width: 100%;
  margin: 0;
  padding: clamp(16px, 2.5vw, 34px) clamp(10px, 2.5vw, 36px);
  overflow: visible;
  font-size: inherit;
  line-height: 1;
  text-shadow: 0 16px 56px rgba(0,0,0,.82);
}

.intro-ident-franco,
.intro-ident-bernal {
  display: block;
  min-width: 0;
  margin: 0;
  overflow: visible;
  clip-path: none;
  opacity: 0;
  color: transparent;
  background: linear-gradient(112deg, #b9bdc2 0%, #fff 43%, #c9ccd0 61%, #f8f8f5 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  will-change: opacity, transform, filter, letter-spacing;
}

.intro-ident-franco {
  justify-self: end;
  padding: .3em .04em;
  font-family: var(--font-interface);
  font-size: clamp(28px, 4.6vw, 70px);
  font-style: normal;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: .22em;
  text-transform: uppercase;
  transform: translateX(-24px);
  filter: blur(7px);
  animation: studio-franco-in 1.05s .18s var(--ease-out) forwards,
             studio-silver-pass 1.6s .8s ease-out both;
}

.intro-ident-bernal {
  justify-self: start;
  padding: .22em .14em .3em .05em;
  font-family: var(--font-editorial);
  font-size: clamp(78px, 12vw, 178px);
  font-style: italic;
  font-weight: 300;
  line-height: .92;
  letter-spacing: -.055em;
  transform: translateX(34px) scale(.96);
  filter: blur(9px);
  animation: studio-bernal-in 1.12s .34s var(--ease-out) forwards,
             studio-silver-pass 1.7s .92s ease-out both;
}

.intro-ident-studio {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: auto;
  margin: 0;
  padding: 0 clamp(14px, 2vw, 24px);
  border: 0;
  background: rgba(4,5,6,.56);
  font-size: clamp(7px, .65vw, 9px);
  letter-spacing: .62em;
  line-height: 1;
  transform: translate(-50%, 50%);
  filter: blur(4px);
  animation: studio-credit-v21 .8s .92s var(--ease-out) forwards;
}

@keyframes studio-frame-in { to { opacity: 1; transform: scaleX(1); } }
@keyframes studio-mark-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); } }
@keyframes studio-franco-in {
  0% { opacity: 0; transform: translateX(-24px); filter: blur(7px); letter-spacing: .34em; }
  100% { opacity: 1; transform: translateX(0); filter: blur(0); letter-spacing: .22em; }
}
@keyframes studio-bernal-in {
  0% { opacity: 0; transform: translateX(34px) scale(.96); filter: blur(9px); }
  100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}
@keyframes studio-credit-v21 {
  0% { opacity: 0; transform: translate(-50%, 80%); filter: blur(4px); }
  100% { opacity: 1; transform: translate(-50%, 50%); filter: blur(0); }
}
@keyframes studio-silver-pass {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@media (max-width: 719px) {
  .intro-ident {
    width: calc(100vw - 34px);
    padding: clamp(28px, 6vh, 48px) 0;
  }
  .intro-ident-name {
    grid-template-columns: 1fr;
    gap: clamp(2px, 1vh, 10px);
    width: 100%;
    margin: 0;
    padding: clamp(16px, 3vh, 28px) clamp(12px, 4vw, 24px);
  }
  .intro-ident-franco {
    justify-self: start;
    padding: .28em .03em;
    font-size: clamp(25px, 8.2vw, 44px);
    letter-spacing: .2em;
  }
  .intro-ident-bernal {
    justify-self: end;
    max-width: 100%;
    padding: .18em .14em .28em .08em;
    font-size: clamp(76px, 25vw, 132px);
    line-height: .9;
  }
  .intro-ident-axis { left: 10%; right: 10%; top: 54%; }
  .intro-ident-studio {
    padding-inline: 12px;
    font-size: 8px;
    letter-spacing: .54em;
  }
}

@media (max-width: 380px) {
  .intro-ident { width: calc(100vw - 24px); }
  .intro-ident-name { padding-inline: 10px; }
  .intro-ident-franco { font-size: clamp(22px, 8vw, 30px); }
  .intro-ident-bernal { font-size: clamp(68px, 24.5vw, 92px); }
}

@media (max-height: 520px) {
  .intro-ident { padding-block: 22px; }
  .intro-ident-name {
    grid-template-columns: .9fr 1.1fr;
    gap: 16px;
    padding-block: 8px;
  }
  .intro-ident-franco {
    justify-self: end;
    font-size: clamp(20px, 4.5vw, 44px);
  }
  .intro-ident-bernal {
    justify-self: start;
    font-size: clamp(58px, 11vw, 112px);
  }
  .intro-ident-axis { top: 60%; }
}

/* 2 · LIVING ACCENT — the italic accent words in section titles stay crisp,
   bright and fully legible (solid fill + the dark scrim), with a slow cyan
   glow that breathes so the type reads lit, never blurry. */
@keyframes accent-glow {
  0%, 100% {
    text-shadow: 0 1px 2px rgba(0,0,0,0.96), 0 0 12px rgba(0,0,0,0.82), 0 0 18px rgba(150,200,255,0.16);
  }
  50% {
    text-shadow: 0 1px 2px rgba(0,0,0,0.96), 0 0 14px rgba(0,0,0,0.86), 0 0 30px rgba(168,216,255,0.42);
  }
}
.section-title em {
  color: #d8ecff;
  -webkit-text-fill-color: #d8ecff;
  background: none;
}
@media (prefers-reduced-motion: no-preference) {
  .section-title em { animation: accent-glow 6.5s ease-in-out infinite; }
}

/* 3 · WORK ITEMS — the two interactive entries (portal + h3lp) answer the
   cursor: the index ignites, the title draws a cyan underline, and the
   external link reveals where it goes. Static entries are untouched. */
.work-item .work-title {
  position: relative;
  background-image: linear-gradient(var(--hud), var(--hud));
  background-size: 0% 1px;
  background-position: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.55s var(--ease-out);
  padding-bottom: 3px;
}
a.work-item:hover .work-title,
.work-item.karma-trigger:hover .work-title { background-size: 100% 1px; }
a.work-item:hover .work-num,
.work-item.karma-trigger:hover .work-num {
  color: var(--hud);
  text-shadow: 0 0 12px var(--hud-soft);
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
/* 4 · READOUT CELLS — a whisper of response on hover/press. */
.readout-strip .r-cell { transition: transform 0.4s var(--ease-out); }
.readout-strip .r-cell:hover { transform: translateY(-2px); }
.readout-strip .r-cell:hover .r-k { color: var(--hud); transition: color 0.3s ease; }

/* ════════════════════════════════════════════════════════════════════
   THE DESIGN VAULT (002) — expandable live-demo portfolio.
   The 002 row is a portal trigger; this panel unfolds beneath it with a
   grid of live GitHub Pages demos (one door per niche). Collapse is the
   grid-template-rows 0fr/1fr trick: no JS height math, buttery on mobile.
   Palette, type roles, and hover language all inherited from the site.
   ════════════════════════════════════════════════════════════════════ */

  .vault-trigger { cursor: pointer; }
  .vault-trigger .work-tag { min-width: 86px; justify-content: center; }
  .vault-trigger.vault-open { border-bottom-color: transparent; }

  .vault-panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    border-bottom: 1px solid var(--line);
    transition: grid-template-rows 0.65s var(--ease-out), visibility 0s linear 0.65s;
  }
  .vault-panel.open {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.65s var(--ease-out), visibility 0s;
  }
  .vault-inner { min-height: 0; overflow: hidden; }
  .vault-body { padding: 20px 0 26px; }

  .vault-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
  }
  .vault-head-label {
    font-family: 'Geist Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--hud);
    white-space: nowrap;
  }
  .vault-head-rule { flex: 1; height: 1px; background: var(--line); }
  .vault-head-meta {
    font-family: 'Geist Mono', monospace;
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--faint);
    white-space: nowrap;
  }

  .vault-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .vault-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 18px 14px;
    border: 1px solid rgba(232,232,234,0.10);
    border-radius: 12px;
    background: linear-gradient(165deg, rgba(16,18,24,0.66), rgba(7,8,11,0.72));
    text-decoration: none;
    opacity: 0;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--ease-out);
    will-change: opacity, transform;
  }
  .vault-panel.open .vault-card {
    animation: vaultIn 0.55s var(--ease-out) both;
    animation-delay: calc(0.12s + var(--vd) * 0.09s);
  }
  @keyframes vaultIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  /* hairline crest, same language as the contact hud-tiles */
  .vault-card::after {
    content: '';
    position: absolute;
    top: 0; left: 16px; right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hud-soft), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .vault-card:hover {
    border-color: var(--hud-soft);
    box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 0 16px -6px var(--hud-soft);
    transform: translateY(-3px);
  }
  .vault-card:hover::after { opacity: 1; }
  .vault-card:focus-visible {
    outline: 1px solid var(--hud-soft);
    outline-offset: 2px;
  }

  .vc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .vc-niche {
    font-family: 'Geist Mono', monospace;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--hud);
    opacity: 0.85;
  }
  .vc-num {
    font-family: 'Geist Mono', monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.3em;
    color: var(--faint);
    font-feature-settings: "tnum" on;
  }
  .vc-name {
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.15;
    color: var(--fg);
    margin-top: 2px;
  }
  .vc-line {
    font-family: 'Geist Mono', monospace;
    font-size: 10.5px;
    line-height: 1.55;
    letter-spacing: -0.005em;
    color: var(--muted);
    flex: 1;
  }
  .vc-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .vc-enter {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg);
    transition: color 0.3s ease, letter-spacing 0.3s var(--ease-out);
  }
  .vault-card:hover .vc-enter { color: var(--hud); letter-spacing: 0.28em; }
  .vc-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Geist Mono', monospace;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .vc-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #7fd6a4;
    box-shadow: 0 0 8px rgba(127,214,164,0.7);
  }

  .vault-foot {
    margin-top: 14px;
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: -0.005em;
    color: var(--faint);
  }
  .vault-foot a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(232,232,234,0.25);
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
  }
  .vault-foot a:hover { color: var(--fg); text-decoration-color: var(--hud-soft); }

  /* ── Mobile: the showroom becomes a deck — one card, side taps or a
     swipe, dots below. Same interaction language as the credentials deck,
     so nobody has to scroll a stack of cards on a phone. ── */
  .vault-deck-ui { display: none; }
  .vd-side { display: none; }
  @media (max-width: 760px) {
    .vault-head-meta { display: none; }
    .vault-viewport { position: relative; overflow: hidden; margin: 0 -2px; padding: 2px; }
    /* side tap zones over the card edges, same gesture as the credentials
       deck: the whole flank is tappable, the glyph is just the hint */
    .vd-side {
      display: flex;
      align-items: center;
      position: absolute;
      top: 2px; bottom: 2px;
      width: 17%;
      z-index: 2;
      border: 0;
      background: transparent;
      color: var(--muted);
      font-family: 'Geist Mono', monospace;
      font-size: 20px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: color 0.25s ease, opacity 0.25s ease;
    }
    .vd-side span { opacity: 0.4; transition: opacity 0.25s ease, transform 0.25s ease; }
    .vd-side-prev { left: 0; justify-content: flex-start; padding-left: 10px; }
    .vd-side-next { right: 0; justify-content: flex-end; padding-right: 10px; }
    .vd-side:active { color: var(--hud); }
    .vd-side:active span { opacity: 1; transform: scale(1.25); }
    .vd-side[disabled] { opacity: 0; pointer-events: none; }
    .vault-grid {
      display: flex;
      gap: 14px;
      transition: transform 0.45s var(--ease-out);
      will-change: transform;
    }
    .vault-card { flex: 0 0 100%; }
    .vault-deck-ui {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-top: 14px;
    }
    .vd-tap {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid rgba(232,232,234,0.16);
      background: rgba(7,8,11,0.7);
      color: var(--fg);
      font-family: 'Geist Mono', monospace;
      font-size: 16px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .vd-tap:active { border-color: var(--hud-soft); color: var(--hud); }
    .vd-tap[disabled] { opacity: 0.3; pointer-events: none; }
    .vd-dots { display: flex; gap: 8px; }
    .vd-dots span {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--faint);
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }
    .vd-dots span.on { background: var(--hud); box-shadow: 0 0 8px var(--hud-soft); }
  }

  /* ── ADAPTIVE GLASS (fx-lite) ──
     Set by demoteTier() in script.js when real frame timing says the GPU is
     struggling. Backdrop blur is the most expensive per-frame effect on weak
     hardware; without it every panel still carries its gradient + border, so
     the look degrades to clean, never to broken. Capable machines never get
     this class and keep full glass. */
  body.fx-lite *,
  body.fx-lite *::before,
  body.fx-lite *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ── CHAPTER PASS (natural-scroll section crossings) ──
     A lighter sibling of .fire: the chapter card and the faint scanline field
     breathe in and out, but no sweep band and no scroll takeover. Driven by
     setActive() in script.js; suppressed after rail warps and under reduced
     motion at the JS layer, and force-disabled here as a second net. */
  .warp-veil.chapter-pass { animation: warp-veil-soft 0.9s ease forwards; }
  .warp-veil.chapter-pass .warp-chapter { animation: wc-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  .warp-veil.chapter-pass .wc-line { animation: wc-line 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  @keyframes warp-veil-soft {
    0% { opacity: 0; }
    25% { opacity: 0.55; }
    100% { opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .warp-veil.chapter-pass,
    .warp-veil.chapter-pass .warp-chapter,
    .warp-veil.chapter-pass .wc-line { animation: none !important; }
  }

/* ================================================================
   v17 · THE LIVING PROOF ENGINE
   The portfolio now moves from identity to commissioned proof to action.
   The visual language stays monochrome, cinematic, and instrument precise.
   ================================================================ */

:root {
  --ice: #dff1ff;
  --ice-soft: rgba(168, 216, 255, 0.22);
  --ice-faint: rgba(168, 216, 255, 0.08);
  --void-panel: rgba(4, 7, 11, 0.78);
  --specimen-edge: rgba(214, 234, 250, 0.18);
}

/* Film ignition */
.intro::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.28), transparent 26%, transparent 72%, rgba(0,0,0,0.72)),
    repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(255,255,255,0.025) 25%);
  mix-blend-mode: normal;
}
.intro-signature {
  position: absolute;
  z-index: 6;
  left: clamp(18px, 3vw, 48px);
  right: clamp(18px, 3vw, 48px);
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: auto minmax(44px, 180px) auto;
  align-items: center;
  gap: 14px;
  width: min(480px, calc(100% - 36px));
  font-family: var(--font-system);
  font-size: 8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}
.intro-signature-line {
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.7), rgba(255,255,255,0.06));
  transform-origin: left;
  animation: intro-line-draw 1.4s var(--ease-out) both;
}
.intro-sound {
  position: absolute;
  z-index: 7;
  right: clamp(18px, 3vw, 48px);
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  background: rgba(0,0,0,0.48);
  color: rgba(255,255,255,0.78);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-system);
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.intro-sound-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.36);
  transition: background .25s ease, box-shadow .25s ease;
}
.intro-sound[aria-pressed="true"] .intro-sound-dot {
  background: var(--ice);
  box-shadow: 0 0 10px var(--hud);
}
@keyframes intro-line-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Hero proof layer */
.hero-eyebrow {
  width: min(100%, 560px);
  display: grid;
  grid-template-columns: auto minmax(36px, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: var(--font-system);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(223, 241, 255, 0.68);
}
.hero-eyebrow-line {
  height: 1px;
  background: linear-gradient(90deg, var(--hud-soft), rgba(168,216,255,0.02));
}
.proof-ledger {
  width: min(100%, 660px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2px;
  border-top: 1px solid rgba(168,216,255,0.14);
  border-bottom: 1px solid rgba(168,216,255,0.08);
  background: linear-gradient(90deg, rgba(5,8,13,0.72), rgba(5,8,13,0.18));
}
.proof-signal {
  min-width: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid rgba(168,216,255,0.08);
}
.proof-signal:last-child { border-right: 0; }
.proof-signal-key,
.proof-signal-value {
  font-family: var(--font-system);
  text-transform: uppercase;
  white-space: nowrap;
}
.proof-signal-key { font-size: 7px; letter-spacing: .24em; color: var(--faint); }
.proof-signal-value { font-size: 9px; letter-spacing: .12em; color: rgba(240,248,255,.84); overflow: hidden; text-overflow: ellipsis; }
.proof-signal-value i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border-radius: 50%;
  background: #b9e9cc;
  box-shadow: 0 0 8px rgba(185,233,204,.64);
}

/* Broader cinematic canvas */
#build-section .section-inner,
#credentials .section-inner,
#signal .section-inner { max-width: 1160px; }
#build-section { padding-top: clamp(72px, 10vh, 140px); }
#credentials { padding-bottom: clamp(80px, 11vh, 150px); }
.section-title { max-width: 920px; }
#build-section .section-title { font-size: clamp(43px, 6.8vw, 88px); line-height: .94; }
#build-section .section-body { max-width: 650px; }
.pull-quote {
  max-width: 760px;
  padding: 18px 0 18px clamp(18px, 3vw, 38px);
  border-left-color: var(--hud-soft);
  color: rgba(245,248,252,.82);
}

/* Commissioned work as a museum specimen, not another card */
.proof-specimen {
  position: relative;
  margin-top: clamp(24px, 5vw, 64px);
  border-top: 1px solid var(--specimen-edge);
  border-bottom: 1px solid rgba(214,234,250,.1);
  background:
    linear-gradient(135deg, rgba(168,216,255,.055), transparent 34%),
    linear-gradient(180deg, rgba(5,8,13,.9), rgba(2,4,7,.72));
  isolation: isolate;
}
.proof-specimen::before,
.proof-specimen::after {
  content: '';
  position: absolute;
  z-index: 3;
  width: 22px;
  height: 22px;
  pointer-events: none;
  border-color: rgba(223,241,255,.44);
}
.proof-specimen::before { top: -1px; left: 0; border-top: 1px solid; border-left: 1px solid; }
.proof-specimen::after { right: 0; bottom: -1px; border-right: 1px solid; border-bottom: 1px solid; }
.specimen-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  padding: 0 clamp(16px, 2.2vw, 30px);
  border-bottom: 1px solid rgba(168,216,255,.09);
  font-family: var(--font-system);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(223,241,255,.65);
}
.specimen-state { display: inline-flex; align-items: center; gap: 8px; color: rgba(232,232,234,.48); }
.specimen-state i { width: 5px; height: 5px; border-radius: 50%; background: #b9e9cc; box-shadow: 0 0 9px rgba(185,233,204,.72); }
.specimen-grid { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); min-height: 560px; }
.specimen-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: clamp(30px, 5vw, 68px);
  border-right: 1px solid rgba(168,216,255,.09);
}
.specimen-kicker {
  font-family: var(--font-system);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .24em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--hud);
}
.specimen-copy h3 {
  font-family: var(--font-editorial);
  font-size: clamp(44px, 5.4vw, 76px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.035em;
  color: #f1f3f5;
}
.specimen-copy h3 em { font-weight: 400; color: var(--ice); }
.specimen-line {
  max-width: 430px;
  font-family: var(--font-system);
  font-size: 12px;
  line-height: 1.75;
  color: rgba(232,232,234,.66);
}
.specimen-proof { display: flex; flex-wrap: wrap; gap: 7px 16px; }
.specimen-proof span {
  position: relative;
  padding-left: 12px;
  font-family: var(--font-system);
  font-size: 8px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(232,232,234,.52);
}
.specimen-proof span::before { content: ''; position: absolute; left: 0; top: 50%; width: 5px; height: 1px; background: var(--hud); }
.specimen-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.specimen-actions button,
.specimen-actions a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid rgba(232,232,234,.13);
  border-radius: 999px;
  background: rgba(0,0,0,.3);
  color: rgba(245,248,252,.76);
  font-family: var(--font-system);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease, background .3s ease, transform .3s var(--ease-out);
}
.specimen-actions a { border-color: var(--hud-soft); color: var(--ice); }
.specimen-actions button:hover,
.specimen-actions a:hover { border-color: rgba(223,241,255,.5); color: #fff; transform: translateY(-2px); }
.specimen-film { position: relative; min-width: 0; overflow: hidden; background: #020304; }
.specimen-film::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,4,7,.55), transparent 20%, transparent 82%, rgba(2,4,7,.26)),
    linear-gradient(180deg, rgba(2,4,7,.2), transparent 36%, rgba(2,4,7,.62));
}
.specimen-film video {
  width: 100%;
  height: 100%;
  min-height: 560px;
  display: block;
  object-fit: cover;
  opacity: .88;
  filter: saturate(.82) contrast(1.06) brightness(.82);
  transform: scale(1.025);
  transition: transform 1.2s var(--ease-out), filter .8s ease, opacity .8s ease;
}
.proof-specimen.is-playing .specimen-film video { opacity: 1; filter: saturate(.96) contrast(1.05) brightness(.9); transform: scale(1); }
.specimen-reticle span { position: absolute; z-index: 2; width: 24px; height: 24px; border-color: rgba(223,241,255,.36); pointer-events: none; }
.specimen-reticle span:nth-child(1) { top: 18px; left: 18px; border-top: 1px solid; border-left: 1px solid; }
.specimen-reticle span:nth-child(2) { top: 18px; right: 18px; border-top: 1px solid; border-right: 1px solid; }
.specimen-reticle span:nth-child(3) { bottom: 18px; left: 18px; border-bottom: 1px solid; border-left: 1px solid; }
.specimen-reticle span:nth-child(4) { right: 18px; bottom: 18px; border-right: 1px solid; border-bottom: 1px solid; }
.specimen-film-meta {
  position: absolute;
  z-index: 3;
  left: 30px;
  right: 30px;
  bottom: 25px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-system);
  font-size: 8px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}

/* Existing work becomes a precise archive below the flagship */
.work-head { margin-top: clamp(52px, 8vw, 96px); }
.work-list { margin-top: 20px; border-top-color: rgba(168,216,255,.14); }
.work-item {
  min-height: 112px;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  padding: 24px 8px;
  transition: padding .45s var(--ease-out), background .45s ease, transform .45s var(--ease-out);
}
.work-item:hover { padding-left: 22px; background: linear-gradient(90deg, rgba(168,216,255,.055), transparent 72%); }
.work-num { font-size: 10px; color: rgba(168,216,255,.55); }
.work-title { font-size: clamp(24px, 3vw, 38px); }
.work-desc { max-width: 720px; }

/* Credential chamber */
#credentials .section-title { font-size: clamp(42px, 6vw, 76px); }
.cred-deck { width: min(100%, 820px); max-width: none; margin-top: 46px; }
.cred-deck-head { padding: 0 4px; }
.cred-card { border-radius: 2px; padding: clamp(24px, 4vw, 44px); min-height: 260px; }
.cred-card-title { font-size: clamp(30px, 5vw, 48px); }
.cred-card-use { font-family: var(--font-system); }
.cred-tab { min-height: 44px; border-radius: 2px; }
.cred-nav-btn { width: 44px; height: 44px; border-radius: 2px; }

/* Final conversion surface */
#signal {
  min-height: 92svh;
  padding-top: clamp(80px, 12vh, 160px);
  padding-bottom: calc(var(--botbar-h) + env(safe-area-inset-bottom, 0px) + clamp(70px, 10vh, 130px));
  overflow: hidden;
}
#signal::before {
  content: '';
  position: absolute;
  width: min(90vw, 1000px);
  aspect-ratio: 1;
  right: -34vw;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid rgba(168,216,255,.08);
  box-shadow: 0 0 0 14vw rgba(168,216,255,.018), 0 0 0 28vw rgba(168,216,255,.012);
  pointer-events: none;
}
.signal-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); align-items: center; gap: clamp(42px, 8vw, 110px); margin-top: clamp(26px, 5vh, 64px); }
.signal-copy { position: relative; z-index: 2; }
.signal-kicker {
  margin-bottom: 22px;
  font-family: var(--font-system);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--hud);
}
.signal-copy h2 {
  max-width: 820px;
  font-family: var(--font-editorial);
  font-size: clamp(48px, 7.5vw, 104px);
  font-weight: 400;
  line-height: .91;
  letter-spacing: -.042em;
  color: #f2f3f5;
}
.signal-copy h2 em { color: var(--ice); }
.signal-copy > p:last-child { max-width: 610px; margin-top: 28px; font-family: var(--font-system); font-size: 12px; line-height: 1.8; color: rgba(232,232,234,.65); }
.signal-gate {
  position: relative;
  z-index: 2;
  width: min(100%, 360px);
  aspect-ratio: 1;
  justify-self: end;
  border-radius: 50%;
  border: 1px solid rgba(223,241,255,.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  color: #f5f8fb;
  text-decoration: none;
  background: radial-gradient(circle at 50% 45%, rgba(168,216,255,.12), rgba(5,8,13,.68) 45%, rgba(1,2,4,.92) 72%);
  box-shadow: inset 0 0 60px rgba(168,216,255,.045), 0 40px 100px -50px rgba(168,216,255,.35);
  transform: translate3d(var(--gate-x, 0), var(--gate-y, 0), 0);
  transition: transform .45s var(--ease-out), border-color .4s ease, box-shadow .4s ease;
}
.signal-gate-orbit {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px dashed rgba(168,216,255,.17);
  animation: gate-orbit 24s linear infinite;
}
.signal-gate-index { font-family: var(--font-system); font-size: 8px; letter-spacing: .26em; text-transform: uppercase; color: rgba(223,241,255,.52); }
.signal-gate-title { font-family: var(--font-editorial); font-size: clamp(32px, 4vw, 50px); letter-spacing: -.025em; }
.signal-gate-arrow { font-family: var(--font-system); font-size: 22px; color: var(--hud); transition: transform .4s var(--ease-out); }
.signal-gate:hover { border-color: rgba(223,241,255,.58); box-shadow: inset 0 0 80px rgba(168,216,255,.08), 0 45px 120px -42px rgba(168,216,255,.48); }
.signal-gate:hover .signal-gate-arrow { transform: translate(5px, -5px); }
.signal-footer { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: clamp(60px, 10vh, 120px); padding-top: 18px; border-top: 1px solid rgba(168,216,255,.1); }
.signal-footer span { font-family: var(--font-system); font-size: 8px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
@keyframes gate-orbit { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .specimen-grid { grid-template-columns: 1fr; }
  .specimen-copy { border-right: 0; border-bottom: 1px solid rgba(168,216,255,.09); }
  .specimen-film,
  .specimen-film video { min-height: clamp(360px, 72vw, 620px); }
  .signal-grid { grid-template-columns: 1fr; }
  .signal-gate { justify-self: start; width: min(78vw, 340px); }
  #signal::before { right: -55vw; }
}

@media (max-width: 719px) {
  html,
  body {
    overflow-x: clip;
  }
  canvas#neural-canvas,
  canvas#fx-canvas,
  canvas#draw-canvas {
    max-width: 100%;
  }
  .sentinel-stage,
  .vault-viewport {
    max-width: 100%;
  }
  .vault-viewport {
    contain: paint;
  }
  .rail,
  body.booted .rail {
    right: 0;
    gap: 0;
    padding: 6px 2px;
    transform: translateY(-50%) scale(1);
  }
  .rail-item {
    width: 44px;
    height: 44px;
  }
  .cred-dots {
    gap: 0;
    max-width: 280px;
  }
  .cred-dot {
    position: relative;
    width: 44px;
    height: 44px;
    background: transparent;
    box-shadow: none;
  }
  .cred-dot::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(232,232,234,0.18);
    transform: translate(-50%, -50%);
    transition: transform .3s var(--ease-out), background .3s ease, box-shadow .3s ease;
  }
  .cred-dot.active {
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  .cred-dot.active::after {
    background: var(--hud);
    box-shadow: 0 0 8px var(--hud-soft);
    transform: translate(-50%, -50%) scale(1.25);
  }
  .intro-signature { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); grid-template-columns: auto 1fr; }
  .intro-signature-line { display: none; }
  .intro-signature-state { text-align: right; }
  .intro-sound { right: 14px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .hero-eyebrow { margin-bottom: 12px; }
  .hero-eyebrow span:last-child { display: none; }
  .hero-eyebrow { grid-template-columns: auto minmax(28px, 1fr); }
  .proof-ledger { grid-template-columns: 1fr; }
  .proof-signal { min-height: 48px; flex-direction: row; align-items: center; justify-content: space-between; border-right: 0; border-bottom: 1px solid rgba(168,216,255,.07); }
  .proof-signal:last-child { border-bottom: 0; }
  .proof-signal-key,
  .proof-signal-value { white-space: normal; }
  #build-section { padding-top: clamp(54px, 8vh, 84px); }
  #build-section .section-title { font-size: clamp(42px, 13vw, 62px); }
  .pull-quote { font-size: clamp(19px, 6vw, 26px); }
  .proof-specimen { margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); }
  .specimen-topline { padding: 0 var(--pad); }
  .specimen-grid { min-height: 0; }
  .specimen-copy { padding: 32px var(--pad) 36px; }
  .specimen-copy h3 { font-size: clamp(48px, 15vw, 70px); }
  .specimen-film,
  .specimen-film video { min-height: 72svh; }
  .specimen-film video { transform: none; }
  .specimen-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .specimen-actions a { grid-column: 1 / -1; }
  .specimen-reticle span:nth-child(1), .specimen-reticle span:nth-child(2) { top: 12px; }
  .specimen-reticle span:nth-child(1), .specimen-reticle span:nth-child(3) { left: 12px; }
  .specimen-reticle span:nth-child(2), .specimen-reticle span:nth-child(4) { right: 12px; }
  .specimen-reticle span:nth-child(3), .specimen-reticle span:nth-child(4) { bottom: 12px; }
  .specimen-film-meta { left: 20px; right: 20px; bottom: 18px; }
  .work-item { grid-template-columns: 42px minmax(0, 1fr); min-height: 0; padding: 22px 0; }
  .work-item:hover { padding-left: 0; }
  .work-tag { grid-column: 2; justify-self: start; min-height: 36px; display: inline-flex; align-items: center; }
  .work-title { font-size: clamp(25px, 8vw, 34px); }
  .cred-deck { margin-top: 30px; }
  #signal { min-height: auto; padding-top: 84px; }
  .signal-copy h2 { font-size: clamp(52px, 16vw, 76px); }
  .signal-gate { width: min(88vw, 330px); justify-self: center; }
  .signal-footer { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-signature-line,
  .signal-gate-orbit { animation: none !important; }
  .specimen-film video,
  .signal-gate { transition: none !important; transform: none !important; }
}

/* ================================================================
   v18 · INTENT COMPILER
   Futurism is expressed as behavior: visitors select the outcome the
   site must create, then open a project channel compiled around it.
   ================================================================ */

:root {
  --font-editorial: 'Zodiak', 'Instrument Serif', Georgia, serif;
  --font-interface: 'Panchang', 'Geist', sans-serif;
}

.contact-prompt,
.manifesto,
.section-title,
.pull-quote,
.specimen-copy h3,
.work-title,
.cred-card-title,
.intent-intro h2 {
  font-family: var(--font-editorial);
  font-weight: 300;
}

.contact-prompt em,
.manifesto em,
.section-title em,
.specimen-copy h3 em,
.work-title em,
.intent-intro h2 em {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-style: italic;
}

.hero-eyebrow,
.section-label,
.work-head,
.specimen-topline,
.specimen-kicker,
.specimen-proof,
.specimen-actions,
.signal-footer,
.rail-label {
  font-family: var(--font-interface);
}

.contact-prompt {
  letter-spacing: -.045em;
  line-height: .94;
}

.section-title {
  letter-spacing: -.047em;
  line-height: .91;
}

.operator-card,
.link.hud-tile,
.proof-specimen,
.cred-card {
  border-radius: 0;
}

.operator-card,
.link.hud-tile {
  background: linear-gradient(120deg, rgba(10, 15, 22, .82), rgba(4, 7, 11, .52));
  border-color: rgba(194, 225, 248, .15);
}

.link.hud-tile:hover {
  border-color: rgba(223, 241, 255, .46);
  background: linear-gradient(120deg, rgba(18, 28, 39, .9), rgba(5, 9, 14, .6));
}

.specimen-actions {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: start;
}

.specimen-actions button {
  border-radius: 0;
  font-family: var(--font-interface);
  letter-spacing: .12em;
}

.specimen-private-note {
  grid-column: 1 / -1;
  display: block;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(168, 216, 255, .1);
  font-family: var(--font-interface);
  font-size: 7px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(232, 232, 234, .4);
}

#signal {
  min-height: 100svh;
  padding-top: clamp(80px, 11vh, 140px);
  overflow: hidden;
}

#signal::before {
  content: none;
}

.signal-inner {
  width: min(100%, 1240px);
}

.intent-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .42fr);
  align-items: end;
  gap: 34px;
  margin-top: clamp(28px, 5vh, 58px);
}

.intent-kicker {
  grid-column: 1 / -1;
  margin-bottom: -12px;
  font-family: var(--font-interface);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: .23em;
  text-transform: uppercase;
  color: rgba(223, 241, 255, .58);
}

.intent-intro h2 {
  max-width: 880px;
  font-size: clamp(56px, 7.5vw, 108px);
  line-height: .86;
  letter-spacing: -.055em;
  color: #f1f3f6;
}

.intent-intro h2 em {
  color: var(--ice);
}

.intent-intro > p:last-child {
  max-width: 320px;
  padding-bottom: 8px;
  font-family: var(--font-system);
  font-size: 11px;
  line-height: 1.8;
  color: rgba(232, 232, 234, .56);
}

.intent-machine {
  --beam-x: 50%;
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
  min-height: 570px;
  margin-top: clamp(42px, 7vh, 82px);
  border-top: 1px solid rgba(208, 234, 252, .2);
  border-bottom: 1px solid rgba(208, 234, 252, .16);
  background: rgba(2, 5, 8, .54);
  overflow: hidden;
  isolation: isolate;
}

.intent-machine::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(168, 216, 255, .035) 1px, transparent 1px),
    linear-gradient(rgba(168, 216, 255, .028) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.18));
}

.intent-options {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  border-right: 1px solid rgba(208, 234, 252, .13);
}

.intent-option {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 7px 16px;
  width: 100%;
  min-height: 148px;
  padding: 24px clamp(20px, 3vw, 42px);
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid rgba(208, 234, 252, .1);
  border-radius: 0;
  background: transparent;
  color: #f3f5f7;
  text-align: left;
  cursor: pointer;
  transition: background .55s ease, color .35s ease;
}

.intent-option:last-child {
  border-bottom: 0;
}

.intent-option::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(168, 216, 255, .12), rgba(168, 216, 255, .015) 58%, transparent);
  transform: translateX(-102%);
  transition: transform .65s var(--ease-out);
}

.intent-option:hover::before,
.intent-option:focus-visible::before,
.intent-option.is-active::before {
  transform: translateX(0);
}

.intent-option::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--ice);
  box-shadow: 0 0 18px rgba(168, 216, 255, .8);
  transform: translateY(-50%);
  transition: height .5s var(--ease-out);
}

.intent-option.is-active::after {
  height: 66%;
}

.intent-option-index {
  position: relative;
  z-index: 1;
  grid-row: 1 / span 2;
  padding-top: 7px;
  font-family: var(--font-interface);
  font-size: 7px;
  letter-spacing: .18em;
  color: rgba(168, 216, 255, .55);
}

.intent-option-word {
  position: relative;
  z-index: 1;
  font-family: var(--font-editorial);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.04em;
}

.intent-option-detail {
  position: relative;
  z-index: 1;
  grid-column: 2;
  max-width: 340px;
  font-family: var(--font-system);
  font-size: 9px;
  line-height: 1.65;
  color: rgba(232, 232, 234, .44);
}

.intent-option-state {
  position: relative;
  z-index: 1;
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-interface);
  font-size: 6px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(232, 232, 234, .28);
}

.intent-option.is-active .intent-option-state {
  color: var(--ice);
}

.intent-output {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 4.5vw, 64px);
  overflow: hidden;
}

.intent-output::before,
.intent-output::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.intent-output::before {
  width: min(52vw, 700px);
  height: 1px;
  left: 6%;
  top: 48%;
  background: linear-gradient(90deg, transparent, rgba(223, 241, 255, .32), transparent);
  transform: rotate(-23deg);
  transform-origin: center;
}

.intent-output::after {
  inset: 0;
  background: radial-gradient(circle at 72% 48%, rgba(168, 216, 255, .075), transparent 38%);
}

.intent-output-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-interface);
  font-size: 7px;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: rgba(232, 232, 234, .4);
}

.intent-lock {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(223, 241, 255, .65);
}

.intent-lock i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b9e9cc;
  box-shadow: 0 0 10px rgba(185, 233, 204, .74);
}

.intent-output-word {
  position: absolute;
  z-index: -1;
  left: clamp(18px, 3vw, 50px);
  top: 46%;
  max-width: 100%;
  font-family: var(--font-interface);
  font-size: clamp(58px, 8.5vw, 132px);
  font-weight: 600;
  line-height: .78;
  letter-spacing: -.07em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(202, 230, 250, .2);
  transform: translateY(-50%) skewY(-4deg);
  white-space: nowrap;
  transition: opacity .35s ease, transform .7s var(--ease-out);
}

.intent-output.is-switching .intent-output-word {
  opacity: 0;
  transform: translateY(-42%) skewY(-4deg);
}

#intent-output-copy {
  position: relative;
  z-index: 2;
  max-width: 470px;
  margin: auto 0 34px;
  font-family: var(--font-editorial);
  font-size: clamp(28px, 3.3vw, 48px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: rgba(245, 248, 251, .9);
}

.intent-transmit {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 8px 20px;
  min-height: 116px;
  padding: 22px 24px;
  border: 1px solid rgba(223, 241, 255, .22);
  color: #f7f9fb;
  text-decoration: none;
  background: linear-gradient(90deg, rgba(168, 216, 255, .09), rgba(168, 216, 255, .015));
  transition: border-color .4s ease, background .4s ease, transform .45s var(--ease-out);
}

.intent-transmit::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  background: var(--ice);
  box-shadow: 0 0 18px rgba(168, 216, 255, .7);
  transition: width .65s var(--ease-out);
}

.intent-transmit:hover,
.intent-transmit:focus-visible {
  border-color: rgba(223, 241, 255, .58);
  background: linear-gradient(90deg, rgba(168, 216, 255, .15), rgba(168, 216, 255, .025));
  transform: translateY(-3px);
}

.intent-transmit:hover::before,
.intent-transmit:focus-visible::before {
  width: 100%;
}

.intent-transmit-meta {
  grid-column: 1;
  font-family: var(--font-interface);
  font-size: 6px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(223, 241, 255, .52);
}

.intent-transmit-title {
  grid-column: 1;
  font-family: var(--font-editorial);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.03em;
}

.intent-transmit-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-interface);
  font-size: 26px;
  color: var(--ice);
  transition: transform .4s var(--ease-out);
}

.intent-transmit:hover .intent-transmit-arrow,
.intent-transmit:focus-visible .intent-transmit-arrow {
  transform: translate(5px, -5px);
}

.intent-beam {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: var(--beam-x);
  width: 1px;
  pointer-events: none;
  opacity: .32;
  background: linear-gradient(180deg, transparent, rgba(223, 241, 255, .85) 22%, rgba(223, 241, 255, .2) 68%, transparent);
  box-shadow: 0 0 20px rgba(168, 216, 255, .2);
  transition: left .18s linear, opacity .35s ease;
}

.intent-machine:not(:hover) .intent-beam {
  opacity: .08;
}

.signal-footer {
  justify-content: space-between;
  gap: 16px 30px;
  margin-top: 42px;
}

@media (max-width: 900px) {
  .intent-intro {
    grid-template-columns: 1fr;
  }
  .intent-intro > p:last-child {
    padding-bottom: 0;
  }
  .intent-machine {
    grid-template-columns: 1fr;
  }
  .intent-options {
    border-right: 0;
    border-bottom: 1px solid rgba(208, 234, 252, .13);
  }
}

@media (max-width: 719px) {
  .intent-intro {
    margin-top: 34px;
  }
  .intent-intro h2 {
    font-size: clamp(52px, 16vw, 76px);
  }
  .intent-machine {
    min-height: 0;
    margin-left: calc(var(--pad) * -1);
    margin-right: calc(var(--pad) * -1);
  }
  .intent-option {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    min-height: 126px;
    padding: 22px var(--pad);
  }
  .intent-option-word {
    font-size: clamp(34px, 11vw, 48px);
  }
  .intent-option-detail {
    padding-right: 10px;
  }
  .intent-output {
    min-height: 480px;
    padding: 28px var(--pad) 34px;
  }
  .intent-output-word {
    left: var(--pad);
    top: 40%;
    font-size: clamp(54px, 18vw, 76px);
  }
  #intent-output-copy {
    margin-top: auto;
    margin-bottom: 28px;
    font-size: clamp(28px, 9vw, 42px);
  }
  .intent-transmit {
    min-height: 108px;
    padding: 20px;
  }
  .signal-footer {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intent-beam {
    display: none;
  }
  .intent-option::before,
  .intent-option::after,
  .intent-output-word,
  .intent-transmit,
  .intent-transmit::before,
  .intent-transmit-arrow {
    transition: none !important;
  }
}

/* ================================================================
   v19 · STUDIO IDENT + OUTCOME FIELD
   The opening is a silent name reveal. Section 03 is a spatial control,
   not a list of choices: visitors blend the reaction the site must create.
   ================================================================ */

/* Silent studio title sequence */
html.intro-active,
html.intro-active body {
  overflow: hidden !important;
}

.intro-ident {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  width: min(1180px, calc(100% - clamp(36px, 8vw, 120px)));
  transform: translate(-50%, -50%);
  pointer-events: none;
  isolation: isolate;
  transition: opacity .65s ease, transform .9s var(--ease-out), filter .9s ease;
}

.intro-ident-axis {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 52%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12) 10%, rgba(255,255,255,.64) 50%, rgba(255,255,255,.12) 90%, transparent);
  transform: scaleX(0);
  transform-origin: center;
  animation: studio-axis-in .95s .05s var(--ease-out) forwards;
}

.intro-ident-name {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(13px, 3.5vw, 58px);
  margin: 0;
  color: rgba(250,251,252,.96);
  font-family: var(--font-editorial);
  font-size: clamp(66px, 11.5vw, 176px);
  font-weight: 300;
  line-height: .78;
  letter-spacing: -.065em;
  text-shadow: 0 14px 50px rgba(0,0,0,.72);
}

.intro-ident-franco,
.intro-ident-bernal {
  display: inline-block;
  opacity: 0;
  will-change: opacity, transform, clip-path;
}

.intro-ident-franco {
  clip-path: inset(100% 0 0 0);
  transform: translateY(28px);
  animation: studio-name-up .9s .12s var(--ease-out) forwards;
}

.intro-ident-bernal {
  font-style: italic;
  clip-path: inset(0 0 100% 0);
  transform: translateY(-26px);
  animation: studio-name-down .9s .22s var(--ease-out) forwards;
}

.intro-ident-studio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(88%, 940px);
  margin: clamp(22px, 4vh, 42px) auto 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.78);
  font-family: var(--font-interface);
  font-size: clamp(8px, .8vw, 12px);
  font-weight: 500;
  letter-spacing: .52em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  animation: studio-credit-in .65s .52s ease forwards;
  text-shadow: 0 2px 14px rgba(0,0,0,.95);
}

.intro.intro-out .intro-ident {
  opacity: 0;
  transform: translate(-50%, -52%) scale(1.035);
  filter: blur(7px);
}

.intro-skip {
  z-index: 8;
  min-width: 92px;
  min-height: 44px;
  justify-content: center;
  border-radius: 0;
  border-color: rgba(255,255,255,.28);
  background: rgba(0,0,0,.26);
  color: rgba(255,255,255,.82);
  font-family: var(--font-interface);
  font-size: 8px;
  font-weight: 500;
  backdrop-filter: blur(14px);
}

.intro-skip::before {
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  width: 12px;
  height: 1px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 0 12px rgba(168,216,255,.38);
  transition: width .45s var(--ease-out);
}

.intro-skip:hover::before,
.intro-skip:focus-visible::before {
  width: calc(100% + 2px);
}

@keyframes studio-axis-in {
  to { transform: scaleX(1); }
}

@keyframes studio-name-up {
  0% { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(28px); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}

@keyframes studio-name-down {
  0% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-26px); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}

@keyframes studio-credit-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Outcome field */
#signal::before {
  display: none;
}

.outcome-intro {
  display: grid;
  grid-template-columns: minmax(130px, .32fr) minmax(0, 1.25fr) minmax(220px, .43fr);
  align-items: end;
  gap: clamp(22px, 4vw, 64px);
  margin-top: clamp(54px, 9vh, 110px);
}

.outcome-kicker {
  align-self: start;
  padding-top: 10px;
  color: rgba(223,241,255,.58);
  font-family: var(--font-interface);
  font-size: 7px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .23em;
  text-transform: uppercase;
}

.outcome-intro h2 {
  margin: 0;
  color: #f2f4f6;
  font-family: var(--font-editorial);
  font-size: clamp(58px, 7.8vw, 116px);
  font-weight: 300;
  line-height: .88;
  letter-spacing: -.055em;
}

.outcome-intro h2 em {
  color: var(--ice);
  font-weight: 300;
}

.outcome-intro > p:last-child {
  max-width: 250px;
  padding-bottom: 6px;
  color: rgba(232,232,234,.56);
  font-family: var(--font-system);
  font-size: 10px;
  line-height: 1.8;
}

.outcome-system {
  --point-x: 56%;
  --point-y: 50%;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  min-height: 720px;
  margin-top: clamp(48px, 8vh, 90px);
  overflow: hidden;
  border-top: 1px solid rgba(208,234,252,.22);
  border-bottom: 1px solid rgba(208,234,252,.16);
  background: rgba(1,3,6,.72);
  isolation: isolate;
}

.outcome-system::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(168,216,255,.026) 1px, transparent 1px),
    linear-gradient(rgba(168,216,255,.021) 1px, transparent 1px);
  background-size: 54px 54px;
}

.outcome-field {
  position: relative;
  min-width: 0;
  min-height: 720px;
  overflow: hidden;
  border-right: 1px solid rgba(208,234,252,.14);
  cursor: crosshair;
  background:
    radial-gradient(circle at var(--point-x) var(--point-y), rgba(168,216,255,.11), transparent 22%),
    linear-gradient(145deg, rgba(10,17,25,.62), rgba(1,3,6,.34));
  transition: background-position .18s linear;
}

.outcome-field::before,
.outcome-field::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.outcome-field::before {
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 4px, rgba(255,255,255,.012) 5px);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.78), transparent 95%);
}

.outcome-field::after {
  left: var(--point-x);
  top: var(--point-y);
  width: min(44vw, 520px);
  aspect-ratio: 1;
  border: 1px solid rgba(223,241,255,.055);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 70px rgba(168,216,255,.011), 0 0 0 140px rgba(168,216,255,.006);
  transition: left .18s linear, top .18s linear;
}

.outcome-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
}

.outcome-plane {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.outcome-anchor {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 3px;
  min-width: 150px;
  min-height: 54px;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(244,247,250,.68);
  text-align: left;
  cursor: pointer;
  transition: color .35s ease, transform .5s var(--ease-out);
}

.outcome-anchor::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  width: 18px;
  height: 1px;
  background: rgba(168,216,255,.38);
  transition: width .5s var(--ease-out), box-shadow .35s ease;
}

.outcome-anchor:hover,
.outcome-anchor:focus-visible,
.outcome-anchor[aria-pressed="true"] {
  color: #fff;
}

.outcome-anchor:hover::before,
.outcome-anchor:focus-visible::before,
.outcome-anchor[aria-pressed="true"]::before {
  width: calc(100% - 20px);
  background: var(--ice);
  box-shadow: 0 0 15px rgba(168,216,255,.34);
}

.outcome-anchor > span {
  padding-top: 3px;
  color: rgba(168,216,255,.52);
  font-family: var(--font-interface);
  font-size: 6px;
  letter-spacing: .2em;
}

.outcome-anchor > strong {
  font-family: var(--font-editorial);
  font-size: clamp(22px, 2.3vw, 34px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.035em;
}

.outcome-anchor > small {
  color: rgba(232,232,234,.36);
  font-family: var(--font-interface);
  font-size: 6px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.outcome-anchor-remember {
  left: 50%;
  top: 9%;
  text-align: center;
  transform: translate(-50%, -50%);
}

.outcome-anchor-remember::before {
  left: 50%;
  transform: translateX(-50%);
}

.outcome-anchor-remember:hover::before,
.outcome-anchor-remember:focus-visible::before,
.outcome-anchor-remember[aria-pressed="true"]::before {
  width: calc(100% - 20px);
}

.outcome-anchor-trust {
  left: 9%;
  top: 86%;
  transform: translate(-10%, -50%);
}

.outcome-anchor-choose {
  left: 91%;
  top: 86%;
  text-align: right;
  transform: translate(-90%, -50%);
}

.outcome-anchor-choose::before {
  left: auto;
  right: 10px;
}

.outcome-core {
  position: absolute;
  z-index: 5;
  left: var(--point-x);
  top: var(--point-y);
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: grab;
  transform: translate(-50%, -50%);
  transition: left .16s linear, top .16s linear;
  touch-action: none;
}

.outcome-core:active {
  cursor: grabbing;
}

.outcome-core-ring,
.outcome-core-point {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.outcome-core-ring {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(223,241,255,.52);
  box-shadow: 0 0 24px rgba(168,216,255,.16), inset 0 0 18px rgba(168,216,255,.06);
}

.outcome-core-ring::before,
.outcome-core-ring::after {
  content: '';
  position: absolute;
  background: var(--ice);
}

.outcome-core-ring::before {
  left: 50%;
  top: -5px;
  width: 1px;
  height: 10px;
}

.outcome-core-ring::after {
  left: -5px;
  top: 50%;
  width: 10px;
  height: 1px;
}

.outcome-core-point {
  width: 7px;
  height: 7px;
  background: #f4fbff;
  box-shadow: 0 0 12px rgba(168,216,255,.88), 0 0 28px rgba(168,216,255,.34);
}

.outcome-core:focus-visible .outcome-core-ring {
  outline: 1px solid #fff;
  outline-offset: 6px;
}

.outcome-field-meta {
  position: absolute;
  z-index: 4;
  left: 22px;
  right: 22px;
  bottom: 14px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  pointer-events: none;
  color: rgba(232,232,234,.32);
  font-family: var(--font-interface);
  font-size: 6px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.outcome-readout {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 720px;
  padding: clamp(30px, 4.6vw, 68px);
  overflow: hidden;
  background:
    linear-gradient(140deg, rgba(10,16,23,.78), rgba(2,5,8,.5)),
    radial-gradient(circle at 100% 0, rgba(168,216,255,.08), transparent 42%);
}

.outcome-readout-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: rgba(232,232,234,.42);
  font-family: var(--font-interface);
  font-size: 6px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.outcome-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(223,241,255,.62);
}

.outcome-status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ccead6;
  box-shadow: 0 0 10px rgba(185,233,204,.65);
}

.outcome-code {
  position: absolute;
  z-index: 0;
  left: clamp(18px, 3.5vw, 54px);
  top: 18%;
  max-width: calc(100% - 36px);
  overflow: hidden;
  color: transparent;
  font-family: var(--font-interface);
  font-size: clamp(48px, 6.5vw, 102px);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.08em;
  white-space: nowrap;
  -webkit-text-stroke: 1px rgba(202,230,250,.12);
}

.outcome-readout h3 {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin: auto 0 20px;
  color: rgba(248,250,252,.96);
  font-family: var(--font-editorial);
  font-size: clamp(38px, 4.5vw, 64px);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.042em;
}

#outcome-copy {
  position: relative;
  z-index: 2;
  max-width: 510px;
  margin: 0 0 32px;
  color: rgba(232,232,234,.55);
  font-family: var(--font-system);
  font-size: 10px;
  line-height: 1.8;
}

.outcome-meters {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 13px;
  margin-bottom: 34px;
}

.outcome-meters > div {
  display: grid;
  grid-template-columns: 86px minmax(40px, 1fr) 26px;
  align-items: center;
  gap: 12px;
}

.outcome-meters span,
.outcome-meters strong {
  color: rgba(223,241,255,.58);
  font-family: var(--font-interface);
  font-size: 6px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.outcome-meters strong {
  text-align: right;
  color: rgba(244,249,252,.78);
}

.outcome-meters i {
  position: relative;
  display: block;
  height: 1px;
  overflow: visible;
  background: rgba(223,241,255,.12);
}

.outcome-meters b {
  position: absolute;
  left: 0;
  top: -1px;
  display: block;
  width: 0;
  height: 3px;
  background: rgba(223,241,255,.72);
  box-shadow: 0 0 10px rgba(168,216,255,.26);
  transition: width .35s var(--ease-out);
}

.outcome-transmit {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 20px;
  min-height: 98px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid rgba(223,241,255,.2);
  color: #f7f9fb;
  text-decoration: none;
  background: rgba(168,216,255,.035);
  transition: border-color .35s ease, background .35s ease, transform .45s var(--ease-out);
}

.outcome-transmit::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  background: var(--ice);
  box-shadow: 0 0 15px rgba(168,216,255,.52);
  transition: width .6s var(--ease-out);
}

.outcome-transmit:hover,
.outcome-transmit:focus-visible {
  border-color: rgba(223,241,255,.54);
  background: rgba(168,216,255,.08);
  transform: translateY(-3px);
}

.outcome-transmit:hover::before,
.outcome-transmit:focus-visible::before {
  width: 100%;
}

.outcome-transmit > span {
  grid-column: 1;
  font-family: var(--font-editorial);
  font-size: clamp(27px, 3vw, 40px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.03em;
}

.outcome-transmit > small {
  grid-column: 1;
  color: rgba(223,241,255,.42);
  font-family: var(--font-interface);
  font-size: 6px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.outcome-transmit > b {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--ice);
  font-family: var(--font-interface);
  font-size: 24px;
  font-weight: 400;
  transition: transform .35s var(--ease-out);
}

.outcome-transmit:hover > b,
.outcome-transmit:focus-visible > b {
  transform: translate(5px, -5px);
}

@media (max-width: 1000px) {
  .outcome-intro {
    grid-template-columns: 1fr;
  }
  .outcome-kicker {
    padding-top: 0;
  }
  .outcome-intro > p:last-child {
    padding-bottom: 0;
  }
  .outcome-system {
    grid-template-columns: 1fr;
  }
  .outcome-field {
    border-right: 0;
    border-bottom: 1px solid rgba(208,234,252,.14);
  }
}

@media (max-width: 719px) {
  .intro-ident {
    width: calc(100% - 34px);
  }
  .intro-ident-name {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0 5vw;
    font-size: clamp(72px, 24vw, 112px);
    line-height: .68;
  }
  .intro-ident-bernal {
    align-self: flex-end;
  }
  .intro-ident-axis {
    top: 49%;
  }
  .intro-ident-studio {
    width: calc(100% - 10vw);
    margin-top: 30px;
    font-size: 8px;
    letter-spacing: .46em;
  }
  .intro-skip {
    right: calc(env(safe-area-inset-right, 0px) + 16px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }
  .outcome-intro {
    margin-top: 34px;
  }
  .outcome-intro h2 {
    font-size: clamp(48px, 14.8vw, 72px);
  }
  .outcome-system {
    margin-left: calc(var(--pad) * -1);
    margin-right: calc(var(--pad) * -1);
  }
  .outcome-field {
    min-height: 560px;
    touch-action: pan-y;
  }
  .outcome-anchor {
    min-width: 126px;
    min-height: 58px;
    padding: 8px;
  }
  .outcome-anchor > strong {
    font-size: clamp(20px, 6.6vw, 28px);
  }
  .outcome-anchor > small {
    font-size: 5px;
    letter-spacing: .1em;
  }
  .outcome-anchor-trust {
    left: 7%;
    top: 84%;
    transform: translate(-4%, -50%);
  }
  .outcome-anchor-choose {
    left: 93%;
    top: 84%;
    transform: translate(-96%, -50%);
  }
  .outcome-readout {
    min-height: 610px;
    padding: 30px var(--pad) 34px;
  }
  .outcome-code {
    left: var(--pad);
    top: 17%;
    font-size: clamp(44px, 14vw, 62px);
  }
  .outcome-readout h3 {
    margin-top: auto;
    font-size: clamp(38px, 11vw, 52px);
  }
  #outcome-copy {
    font-size: 10px;
  }
  .outcome-meters > div {
    grid-template-columns: 80px minmax(30px, 1fr) 22px;
    gap: 8px;
  }
  .outcome-transmit {
    min-height: 104px;
  }
  .signal-footer {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-ident-axis,
  .intro-ident-franco,
  .intro-ident-bernal,
  .intro-ident-studio {
    animation: none !important;
    opacity: 1;
    clip-path: none;
    transform: none;
  }
  .outcome-core,
  .outcome-field::after,
  .outcome-meters b,
  .outcome-transmit,
  .outcome-transmit::before,
  .outcome-transmit > b {
    transition: none !important;
  }
}

/* ================================================================
   v20 · RELEASE EDIT
   Subtract the forced final chapter, protect the studio wordmark, and turn
   the paid client proof into one compact film surface with real controls.
   ================================================================ */

/* Italic display faces need optical breathing room outside their CSS box. */
.intro-ident-name {
  width: calc(100% + 32px);
  margin-left: -16px;
  padding: .12em .08em .18em;
  overflow: visible;
  font-size: clamp(62px, 10.8vw, 164px);
}

.intro-ident-franco,
.intro-ident-bernal {
  padding-inline: .07em;
  margin-inline: -.07em;
  overflow: visible;
}

.intro .intro-skip,
.intro.intro-ready .intro-skip {
  opacity: 1;
  transform: translateY(0);
}

#build-section {
  padding-top: clamp(58px, 8vh, 108px);
}

#build-section .section-title {
  margin-bottom: 0;
}

.proof-specimen {
  margin-top: clamp(30px, 5vh, 54px);
}

.proof-specimen::before,
.proof-specimen::after {
  display: none;
}

.specimen-topline {
  min-height: 42px;
  font-family: var(--font-interface);
  font-size: 6px;
  letter-spacing: .22em;
}

.specimen-grid {
  grid-template-columns: minmax(250px, .56fr) minmax(0, 1.44fr);
  min-height: 390px;
}

.specimen-copy {
  gap: 15px;
  padding: clamp(26px, 3.5vw, 48px);
}

.specimen-kicker {
  font-family: var(--font-interface);
  font-size: 6px;
  letter-spacing: .18em;
}

.specimen-copy h3 {
  font-size: clamp(42px, 5vw, 68px);
  line-height: .88;
}

.specimen-line {
  max-width: 360px;
  font-size: 10px;
  line-height: 1.68;
}

.specimen-private-note {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 32px;
  margin-top: 5px;
  color: rgba(223,241,255,.42);
  font-family: var(--font-interface);
  font-size: 5px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.specimen-film {
  position: relative;
  min-height: 390px;
  aspect-ratio: 1364 / 632;
  display: grid;
  place-items: center;
  background: #000;
}

.specimen-film::after {
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.08), transparent 58%, rgba(0,0,0,.7));
}

.specimen-film video,
.proof-specimen.is-playing .specimen-film video {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: #000;
  opacity: 1;
  filter: saturate(.94) contrast(1.03) brightness(.9);
  transform: none;
}

.specimen-film-hit {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 0;
  background: rgba(0,0,0,.28);
  color: #fff;
  cursor: pointer;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(12px);
  transition: opacity .3s ease, border-color .3s ease, background .3s ease, transform .4s var(--ease-out);
}

.specimen-film-hit span {
  margin-left: 3px;
  font-size: 18px;
}

.specimen-film-hit:hover,
.specimen-film-hit:focus-visible {
  border-color: #fff;
  background: rgba(11,18,25,.66);
  transform: translate(-50%, -50%) scale(1.04);
}

.proof-specimen.is-playing .specimen-film-hit {
  opacity: 0;
  pointer-events: none;
}

.specimen-film-controls {
  position: absolute;
  z-index: 4;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: grid;
  grid-template-columns: auto auto minmax(80px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 4px 8px;
  border-top: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.46);
  backdrop-filter: blur(14px);
}

.specimen-film-controls button {
  min-width: 48px;
  min-height: 44px;
  padding: 0 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255,255,255,.78);
  font-family: var(--font-interface);
  font-size: 6px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
}

.specimen-film-controls button:hover,
.specimen-film-controls button:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.07);
}

.specimen-time {
  min-width: 76px;
  color: rgba(255,255,255,.56);
  font-family: var(--font-interface);
  font-size: 6px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.specimen-progress {
  width: 100%;
  min-width: 60px;
  height: 44px;
  margin: 0;
  accent-color: #dff1ff;
  cursor: pointer;
}

.work-head {
  margin-top: clamp(42px, 6vw, 72px);
}

#credentials {
  min-height: auto;
  padding-bottom: calc(var(--botbar-h) + env(safe-area-inset-bottom, 0px) + clamp(54px, 8vh, 92px));
}

.kp-btn {
  min-height: 44px;
}

@media (max-width: 900px) {
  .specimen-grid {
    grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  }
  .specimen-film,
  .specimen-film video {
    min-height: 0;
  }
}

@media (max-width: 719px) {
  .intro-ident-name {
    width: calc(100% + 12px);
    margin-left: -6px;
    padding: .15em .06em .2em;
    font-size: clamp(64px, 21.5vw, 100px);
  }
  #build-section {
    padding-top: clamp(48px, 7vh, 70px);
  }
  .proof-specimen {
    margin-top: 28px;
  }
  .specimen-topline {
    min-height: 44px;
  }
  .specimen-grid {
    grid-template-columns: 1fr;
  }
  .specimen-copy {
    gap: 13px;
    padding: 26px var(--pad) 28px;
    border-right: 0;
  }
  .specimen-copy h3 {
    font-size: clamp(46px, 14vw, 64px);
  }
  .specimen-film {
    width: 100%;
    min-height: 0;
    aspect-ratio: auto;
    display: block;
    padding-bottom: 98px;
    border-top: 1px solid rgba(168,216,255,.1);
  }
  .specimen-film video {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1364 / 632;
    object-fit: contain;
  }
  .specimen-film-hit {
    width: 58px;
    height: 58px;
  }
  .specimen-film-controls {
    left: 8px;
    right: 8px;
    bottom: 0;
    grid-template-columns: auto 1fr auto auto;
    gap: 4px;
    min-height: 98px;
    padding: 4px 6px 2px;
  }
  #specimen-control {
    grid-column: 1;
    grid-row: 1;
  }
  .specimen-time {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    justify-self: end;
    padding-right: 5px;
  }
  .specimen-progress {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 34px;
  }
  .specimen-audio,
  .specimen-expand {
    grid-row: 1;
  }
  .specimen-audio {
    grid-column: 3;
  }
  .specimen-expand {
    grid-column: 4;
  }
  .work-head {
    margin-top: 36px;
  }
  #credentials {
    padding-bottom: calc(var(--botbar-h) + env(safe-area-inset-bottom, 0px) + 48px);
  }
}

/* v21 cascade lock: keep the optical signature above all legacy intro rules. */
.intro-ident {
  top: 50%;
  width: min(1120px, calc(100vw - max(64px, 8vw)));
  padding: clamp(28px, 5vw, 72px) clamp(8px, 1.8vw, 26px);
  overflow: visible;
}
.intro-ident-axis {
  left: 7%;
  right: 7%;
  top: 61%;
  animation-duration: 1.35s;
  animation-delay: .32s;
}
.intro-ident-name {
  position: relative;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
  width: 100%;
  margin: 0;
  padding: clamp(16px, 2.5vw, 34px) clamp(10px, 2.5vw, 36px);
  overflow: visible;
  font-size: inherit;
  line-height: 1;
}
.intro-ident-franco,
.intro-ident-bernal {
  display: block;
  min-width: 0;
  margin: 0;
  overflow: visible;
  clip-path: none;
  opacity: 0;
  color: transparent;
  background: linear-gradient(112deg, #b9bdc2 0%, #fff 43%, #c9ccd0 61%, #f8f8f5 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}
.intro-ident-franco {
  justify-self: end;
  padding: .3em .04em;
  font-family: var(--font-interface);
  font-size: clamp(28px, 4.6vw, 70px);
  font-style: normal;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: .22em;
  text-transform: uppercase;
  transform: translateX(-24px);
  filter: blur(7px);
  animation: studio-franco-in 1.05s .18s var(--ease-out) forwards,
             studio-silver-pass 1.6s .8s ease-out both;
}
.intro-ident-bernal {
  justify-self: start;
  padding: .22em .14em .3em .05em;
  font-family: var(--font-editorial);
  font-size: clamp(78px, 12vw, 178px);
  font-style: italic;
  font-weight: 300;
  line-height: .92;
  letter-spacing: -.055em;
  transform: translateX(34px) scale(.96);
  filter: blur(9px);
  animation: studio-bernal-in 1.12s .34s var(--ease-out) forwards,
             studio-silver-pass 1.7s .92s ease-out both;
}
.intro-ident-studio {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: auto;
  margin: 0;
  padding: 0 clamp(14px, 2vw, 24px);
  border: 0;
  background: rgba(4,5,6,.56);
  font-size: clamp(7px, .65vw, 9px);
  letter-spacing: .62em;
  line-height: 1;
  transform: translate(-50%, 50%);
  filter: blur(4px);
  animation: studio-credit-v21 .8s .92s var(--ease-out) forwards;
}

@media (max-width: 719px) {
  .intro-ident {
    width: calc(100vw - 34px);
    padding: clamp(28px, 6vh, 48px) 0;
  }
  .intro-ident-name {
    grid-template-columns: 1fr;
    gap: clamp(2px, 1vh, 10px);
    width: 100%;
    margin: 0;
    padding: clamp(16px, 3vh, 28px) clamp(12px, 4vw, 24px);
  }
  .intro-ident-franco {
    justify-self: start;
    padding: .28em .03em;
    font-size: clamp(25px, 8.2vw, 44px);
    letter-spacing: .2em;
  }
  .intro-ident-bernal {
    justify-self: end;
    max-width: 100%;
    padding: .18em .14em .28em .08em;
    font-size: clamp(76px, 25vw, 132px);
    line-height: .9;
  }
  .intro-ident-axis { left: 10%; right: 10%; top: 54%; }
  .intro-ident-studio {
    padding-inline: 12px;
    font-size: 8px;
    letter-spacing: .54em;
  }
}

@media (max-width: 380px) {
  .intro-ident { width: calc(100vw - 24px); }
  .intro-ident-name { padding-inline: 10px; }
  .intro-ident-franco { font-size: clamp(22px, 8vw, 30px); }
  .intro-ident-bernal { font-size: clamp(68px, 24.5vw, 92px); }
}

@media (max-height: 520px) {
  .intro-ident { padding-block: 22px; }
  .intro-ident-name {
    grid-template-columns: .9fr 1.1fr;
    gap: 16px;
    padding-block: 8px;
  }
  .intro-ident-franco { justify-self: end; font-size: clamp(20px, 4.5vw, 44px); }
  .intro-ident-bernal { justify-self: start; font-size: clamp(58px, 11vw, 112px); }
  .intro-ident-axis { top: 60%; }
}

/* v22 · SIGNATURE SCRIM — a static soft radial shade behind the wordmark so
   the silver letterforms stay legible over the film's bright passages
   (tiger fur, armor highlights). No animation: present from frame one,
   invisible against the dark boot, fail-safe by construction. */
.intro-ident::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -30% -10%;
  pointer-events: none;
  background: radial-gradient(closest-side at 50% 50%,
    rgba(3, 4, 6, .62) 0%,
    rgba(3, 4, 6, .42) 54%,
    rgba(3, 4, 6, 0) 100%);
}

/* v22 · MOBILE CARD LEGIBILITY — on narrow screens the Sentinel sits centered
   behind the operator card and link tiles; deepen their glass so the name and
   labels never lose contrast against the bright chrome bust. Desktop keeps the
   lighter glass (the entity lives beside the card there, not behind it). */
@media (max-width: 719px) {
  .operator-card {
    background:
      radial-gradient(120% 140% at 50% 0%, rgba(168, 216, 255, .04), transparent 60%),
      linear-gradient(165deg, rgba(13, 16, 22, .88), rgba(6, 8, 12, .78)) !important;
  }
  .link.hud-tile {
    background: linear-gradient(rgba(16, 20, 27, .88), rgba(7, 9, 13, .8)) !important;
  }
}

/* ================================================================
   v23 · MAISON SIGNATURE
   The intro lockup rebuilt the way a fashion house titles a film:
   an engraved monogram drawn stroke by stroke, the name in spaced
   Zodiak capitals arriving letter by letter, one cyan glimmer along
   the hairline as the only technology tell, then the caption.
   Restraint carries the luxury; the film carries the drama.
   ================================================================ */
.intro-ident {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(16px, 3vh, 28px);
  text-align: center;
}

.ident-mark {
  width: clamp(72px, 12vh, 108px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .85)) drop-shadow(0 0 2px rgba(0, 0, 0, .55));
}
.ident-mark .mk {
  fill: none;
  stroke: url(#ident-mkg);
  stroke-width: 3;
  stroke-linecap: square;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: mk-draw .75s var(--ease-out) forwards;
}
.ident-mark .mk-stem { animation-delay: .12s; }
.ident-mark .mk-f1   { animation-delay: .40s; }
.ident-mark .mk-f2   { animation-delay: .52s; }
.ident-mark .mk-b1   { animation-delay: .66s; }
.ident-mark .mk-b2   { animation-delay: .82s; }
@keyframes mk-draw { to { stroke-dashoffset: 0; } }

.ident-name {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: .9em;
  row-gap: .3em;
  margin: 0;
  padding-left: .3em;   /* optical re-center: letter-spacing trails each glyph */
  font-family: 'Zodiak', 'Instrument Serif', Georgia, serif;
  font-weight: 300;
  font-size: clamp(24px, 4.2vw, 56px);
  line-height: 1.06;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #eceef0;
  text-shadow: 0 10px 34px rgba(0, 0, 0, .78);
}
.ident-w { display: inline-flex; }
.ident-name i {
  display: inline-block;
  font-style: normal;
  opacity: 0;
  transform: translateY(.32em);
  filter: blur(8px);
  animation: lt-in .95s calc(.95s + var(--i) * 60ms) var(--ease-out) forwards;
}
@keyframes lt-in {
  60% { filter: blur(1.5px); }
  to  { opacity: 1; transform: none; filter: blur(0); }
}

.ident-axis {
  position: relative;
  width: min(72%, 560px);
  height: 1px;
  background: linear-gradient(90deg, transparent,
    rgba(255,255,255,.16) 12%, rgba(255,255,255,.62) 50%,
    rgba(255,255,255,.16) 88%, transparent);
  transform: scaleX(0);
  transform-origin: center;
  animation: axis-in .8s 2.1s var(--ease-out) forwards;
}
@keyframes axis-in { to { transform: scaleX(1); } }
.ident-axis::after {
  content: '';
  position: absolute;
  inset: -1px 0;
  background: linear-gradient(90deg, transparent, rgba(168, 216, 255, .85), transparent);
  background-size: 18% 100%;
  background-repeat: no-repeat;
  background-position: -20% 0;
  opacity: 0;
  animation: axis-glimmer 1.15s 2.95s ease-in-out forwards;
}
@keyframes axis-glimmer {
  0%   { opacity: 0; background-position: -20% 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { opacity: 0; background-position: 120% 0; }
}

.ident-caption {
  display: flex;
  justify-content: center;
  margin: 0;
  padding-left: .62em;
  font-family: 'Panchang', 'Geist', sans-serif;
  font-weight: 500;
  font-size: clamp(8px, .72vw, 10px);
  letter-spacing: .62em;
  color: rgba(212, 219, 228, .72);
}
.ident-caption span {
  opacity: 0;
  animation: cap-in .7s var(--ease-out) forwards;
}
.ident-caption span:nth-child(1) { animation-delay: 2.55s; }
.ident-caption span:nth-child(2) { animation-delay: 2.63s; }
.ident-caption span:nth-child(3) { animation-delay: 2.71s; }
.ident-caption span:nth-child(4) { animation-delay: 2.79s; }
.ident-caption span:nth-child(5) { animation-delay: 2.87s; }
.ident-caption span:nth-child(6) { animation-delay: 2.95s; }
@keyframes cap-in { to { opacity: 1; } }

/* v23 · small-phone air: tighten tracking slightly under 420px so the name
   keeps one line with real margins even on 320px-class screens. */
@media (max-width: 419px) {
  .ident-name { font-size: clamp(21px, 6.1vw, 24px); letter-spacing: .24em; padding-left: .24em; }
  .ident-caption { letter-spacing: .5em; padding-left: .5em; }
}