:root {
      --void: #070708;
      --ink: #e8e7e2;
      --dim: #8a8983;
      --ghost: #4a4946;
      --line: rgba(232,231,226,.08);
      --lime: #c6ef3a;
      --flow: #5cc8ff;
      --trail: #ff4f8d;
      --poc: #f3e15a;
      --va: #9a6dff;
      --base: #d6c43a;
      --baseb: #4adf78;
      --sans: "Schibsted Grotesk", "Avenir Next", system-ui, sans-serif;
      --mono: "IBM Plex Mono", ui-monospace, monospace;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { background: var(--void); color: var(--ink); }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--sans);
      font-weight: 400;
      line-height: 1.45;
      text-rendering: optimizeLegibility;
    }
    body::before {
      content: "";
      position: fixed; inset: 0; pointer-events: none; z-index: 80;
      opacity: .045;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
    }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 40;
      display: flex; align-items: center; justify-content: space-between;
      padding: 22px 28px;
      background: linear-gradient(180deg, rgba(7,7,8,.94), rgba(7,7,8,.55) 62%, transparent);
      gap: 24px;
    }
    .word {
      font-weight: 600; letter-spacing: -.04em; font-size: 15px;
    }
    .access {
      font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
      text-transform: uppercase;
      min-height: 44px; display: inline-flex; align-items: center;
    }
    .access span { border-bottom: 1px solid currentColor; padding-bottom: 2px; }

    .stage {
      position: sticky; top: 0; height: 100svh;
      display: grid; grid-template-columns: 32% 1fr;
      overflow: hidden;
    }
    .rail {
      padding: 88px 36px 48px 28px;
      display: flex; flex-direction: column; justify-content: center;
      z-index: 2;
    }
    .k {
      font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
      text-transform: uppercase; color: var(--lime); margin-bottom: 18px;
      min-height: 14px;
    }
    h1, h2 {
      font-size: clamp(34px, 4.2vw, 58px);
      font-weight: 600; letter-spacing: -.045em; line-height: .92;
      margin-bottom: 18px;
    }
    .blurb {
      color: var(--dim); font-size: 16px; max-width: 28ch; min-height: 5.6em;
    }
    .blurb b { color: var(--ink); font-weight: 500; }
    .meta {
      margin-top: 28px;
      font-family: var(--mono); font-size: 10px; color: var(--ghost);
      letter-spacing: .12em; text-transform: uppercase;
    }

    .viewport {
      position: relative;
      margin: 72px 28px 28px 0;
      border: 1px solid var(--line);
      background: #0b0b0d;
      min-height: 0;
    }
    #chart { width: 100%; height: 100%; display: block; }
    .hud {
      position: absolute; inset: 0; pointer-events: none;
      font-family: var(--mono); font-size: 10px; color: var(--ghost);
      letter-spacing: .08em;
    }
    .hud .tl { position: absolute; top: 12px; left: 14px; }
    .hud .tr { position: absolute; top: 12px; right: 14px; color: var(--dim); }
    .hud .br { position: absolute; bottom: 12px; right: 14px; }
    .hud .bl { position: absolute; bottom: 12px; left: 14px; }

    .story { position: relative; z-index: 1; }
    .beat { height: 88vh; }
    .beat:first-child { height: 100vh; }

    .end {
      position: relative; z-index: 3;
      min-height: 100svh;
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: 48px 28px 56px;
      background: linear-gradient(180deg, transparent, var(--void) 28%);
    }
    .end h2 { max-width: 14ch; }
    .end p { color: var(--dim); max-width: 42ch; margin: 12px 0 28px; }
    .end-row { display: flex; gap: 28px; align-items: baseline; flex-wrap: wrap; }
    .end a.access { mix-blend-mode: normal; color: var(--lime); }
    .fine { font-size: 12px; color: var(--ghost); max-width: 46ch; margin-top: 32px; }

    @media (max-width: 860px) {
      nav { padding: 16px 18px; mix-blend-mode: normal; background: var(--void); }
      .stage {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(42svh, 1fr) auto;
        height: 100svh;
      }
      .viewport { order: -1; margin: 58px 14px 0; min-height: 42svh; }
      .rail { padding: 16px 18px 20px; justify-content: flex-start; }
      h1, h2 { font-size: 30px; }
      .blurb { min-height: 0; max-width: none; font-size: 15px; }
      .beat { height: 72vh; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .viewport * { transition: none !important; }
    }
  
    .links { display: flex; gap: 18px; flex: 1; justify-content: center; font-size: 12px; color: var(--dim); letter-spacing: .04em; }
    .links a { min-height: 44px; display: inline-flex; align-items: center; }
    .links a:hover, .links a.on { color: var(--ink); }
    .stage.short { height: 78svh; }
    .essay {
      position: relative; z-index: 3;
      width: min(820px, calc(100% - 56px));
      margin: 0 auto; padding: 24px 0 96px;
    }
    .essay h3 {
      font-size: 28px; letter-spacing: -.03em; font-weight: 600;
      margin: 56px 0 14px;
    }
    .essay p { color: var(--dim); margin: 0 0 14px; font-size: 17px; line-height: 1.6; }
    .essay p b { color: var(--ink); font-weight: 500; }
    .well {
      margin: 28px 0 8px; border: 1px solid var(--line); background: #0b0b0d;
      min-height: 280px; position: relative; overflow: hidden;
    }
    .well img { width: 100%; height: auto; display: block; }
    .well .ph {
      position: absolute; inset: 0; display: flex; align-items: flex-end;
      padding: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
      text-transform: uppercase; color: var(--ghost);
      background: repeating-linear-gradient(to right, transparent 0 47px, rgba(255,255,255,.03) 47px 48px),
                  repeating-linear-gradient(to bottom, transparent 0 39px, rgba(255,255,255,.025) 39px 40px);
    }
    .well:has(img[src]:not([src=""])) .ph { display: none; }
    @media (max-width: 860px) {
      .links { display: none; }
      .essay { width: calc(100% - 36px); }
      .research-door { padding: 76px 18px 22px; }
      .research-door__row { flex-direction: column; align-items: flex-start; }
    }

    .research-door {
      position: relative; z-index: 6;
      padding: 84px 28px 26px;
      border-bottom: 1px solid var(--line);
      background: var(--void);
    }
    .research-door__k {
      font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
      text-transform: uppercase; color: var(--lime); margin-bottom: 12px;
    }
    .research-door__row {
      display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
    }
    .research-door h2 {
      font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 8px;
    }
    .research-door p { color: var(--dim); max-width: 52ch; font-size: 15px; }