html, body { overflow-x: clip; }
    .font-geist  { font-family: 'Geist', sans-serif !important; }
    .font-serif-accent { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

    /* ── Palette tokens (unchanged) ─────────────────────────────────────── */
    :root {
      --ink: #c2410c;            /* burnt orange — buttons + footer */
      --cream: #FBF4E7;
      --paper: #FBF3D4;
      --paper-edge: #EFE2B4;
      --paper-text: #5A4B2E;
      --pin: #C2562F;
    }
    .surface-ink { background-color: var(--ink); }
    .btn-ink { background-color: var(--ink); transition: background-color .3s ease, box-shadow .3s ease; }
    .btn-ink:hover { background-color: color-mix(in srgb, var(--ink), #ffffff 14%); }

    /* ── WebGL background canvas — behind all content, cursor-reactive ──── */
    #bgScene { position: fixed; inset: 0; z-index: -10; pointer-events: none; }
    #bgScene::before {
      content: ""; position: absolute; inset: 0;
      background:
        radial-gradient(40rem 30rem at 72% 12%, rgba(251,146,60,0.14), transparent 60%),
        radial-gradient(38rem 28rem at 28% 30%, rgba(244,63,94,0.10), transparent 60%);
    }
    #bgScene canvas { position: relative; }

    /* ── Film grain — subtle premium texture over the gradient ──────────── */
    body::after {
      content: ""; position: fixed; inset: 0; z-index: -5; pointer-events: none;
      opacity: .035;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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)'/%3E%3C/svg%3E");
    }

    /* ── Scroll progress hairline ────────────────────────────────────────── */
    #scrollProgress {
      position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 60;
      background: linear-gradient(90deg, #f59e0b, #f43f5e);
      transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
    }

    /* ── Sticky nav — turns to frosted glass once you scroll ────────────── */
    #siteHeader { transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease, backdrop-filter .35s ease; border-bottom: 1px solid transparent; }
    #siteHeader.is-scrolled {
      background: rgba(255,255,255,.72);
      -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
      border-color: rgba(17,24,39,.06);
      box-shadow: 0 1px 0 rgba(17,24,39,.02), 0 8px 24px -16px rgba(17,24,39,.18);
    }
    #siteHeader nav a[aria-current="true"] { color: #111827; }
    #siteHeader nav a { position: relative; }
    #siteHeader nav a::after {
      content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1.5px;
      background: linear-gradient(90deg, #f59e0b, #f43f5e); transition: right .3s ease;
    }
    #siteHeader nav a:hover::after, #siteHeader nav a[aria-current="true"]::after { right: 0; }

    /* ── Floating drift for the pinned post-it notes ─────────────────────── */
    @keyframes floatSoft {
      0%,100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
      50%     { transform: translateY(-7px) rotate(var(--rot, 0deg)); }
    }
    .postit { animation: floatSoft 5.4s ease-in-out infinite; }

    /* ── Command marquee ─────────────────────────────────────────────────── */
    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    #marquee .track { display: flex; width: max-content; animation: marquee 36s linear infinite; }
    #marquee:hover .track { animation-play-state: paused; }
    #marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

    /* ── Spotlight cards — cursor-tracked radial highlight ───────────────── */
    .spot { position: relative; overflow: hidden; }
    .spot::before {
      content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
      opacity: 0; transition: opacity .4s ease;
      background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(245,158,11,.10), rgba(244,63,94,.05) 45%, transparent 70%);
    }
    .spot:hover::before { opacity: 1; }

    /* ── Hero headline word-mask (set up by JS; harmless without it) ─────── */
    .word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
    .word-mask > span { display: inline-block; will-change: transform; }

    /* ── Scrollytelling steps ─────────────────────────────────────────────── */
    .how-step { transition: opacity .45s ease; }
    @media (min-width: 1024px) {
      .how-step { opacity: .3; }
      .how-step.is-active { opacity: 1; }
    }
    .terminal-caret { display: inline-block; width: .55em; height: 1.1em; vertical-align: text-bottom; background: #fbbf24; animation: caretBlink 1s steps(1) infinite; }
    @keyframes caretBlink { 50% { opacity: 0; } }

    /* ── Scroll cue ──────────────────────────────────────────────────────── */
    @keyframes cueDrop { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(6px); opacity: .4; } }
    .scroll-cue-dot { animation: cueDrop 1.8s ease-in-out infinite; }

    /* ── Focus visibility (keyboard users) ───────────────────────────────── */
    a:focus-visible, button:focus-visible {
      outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px;
    }
    .skip-link {
      position: absolute; left: 1rem; top: -100%; z-index: 100;
      background: #111827; color: #fff; padding: .5rem 1rem; border-radius: 0 0 .5rem .5rem;
      font-size: .8rem; transition: top .2s ease;
    }
    .skip-link:focus { top: 0; }

    /* ── Reduced motion: kill every ornament, keep every word ────────────── */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .postit, #marquee .track, .scroll-cue-dot, .terminal-caret { animation: none !important; }
    }