@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');
  :root{
    --paper:#F1F2EA; --ink:#24352B; --dim:#8FA093; --hair:rgba(36,53,43,.16);
    --sap:#B8862F; --sap-soft:#D8B36A;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --body:"Instrument Sans",system-ui,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-snap-type:y mandatory}
  @media (max-width:860px){html{scroll-snap-type:y proximity}}
  body{background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
  ::selection{background:#639070;color:var(--paper)}
  a{color:inherit}

  #field{position:fixed;inset:0;z-index:0;display:block}

  /* ---------- nav ---------- */
  nav{position:fixed;inset:0 0 auto 0;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
      padding:18px clamp(20px,3.4vw,44px);transition:background .4s}
  nav.scrolled{background:linear-gradient(color-mix(in srgb,var(--paper) 94%,transparent) 60%,transparent)}
  .nav-links{display:flex;gap:26px;font:400 13.5px/1 var(--body)}
  .nav-links a{text-decoration:none;color:color-mix(in srgb,var(--ink) 80%,transparent);transition:color .2s}
  .nav-links a:hover{color:var(--ink)}
  .mark{justify-self:center;display:block}
  .nav-status{justify-self:end;display:flex;align-items:center;gap:9px;
      font:400 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
  .nav-status b{color:var(--ink);font-weight:400;font-variant-numeric:tabular-nums}
  .dot{width:6px;height:6px;border-radius:50%;background:var(--sap);animation:pulse 2.2s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

  /* ---------- story shell ---------- */
  .story{position:relative;z-index:2}
  section{position:relative;pointer-events:none;scroll-snap-align:start;scroll-snap-stop:always}
  .inner{pointer-events:auto}

  /* ---------- hero (reference layout) ---------- */
  .hero{top:0;height:100vh}
  .banner{position:absolute;top:70px;left:clamp(16px,3vw,40px);right:clamp(16px,3vw,40px);
      border:1px solid var(--hair);height:58px;display:flex;align-items:center;gap:18px;
      padding:0 20px;pointer-events:auto;background:color-mix(in srgb,var(--paper) 55%,transparent)}
  .banner .orn{flex:none;color:var(--dim);opacity:.8}
  .banner-msg{font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
  .banner-msg b{color:var(--ink);font-weight:600}
  .leader{flex:1;border-bottom:1px dotted color-mix(in srgb,var(--ink) 26%,transparent);height:1px;min-width:30px}
  .chip{font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
      padding:9px 13px;white-space:nowrap;color:color-mix(in srgb,var(--ink) 75%,transparent);transition:.2s}
  .chip b{font-weight:400}
  .chip.solid{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}
  .chip:hover{background:var(--ink);color:var(--paper)}

  .hero-copy{position:absolute;left:clamp(20px,3.4vw,44px);top:44%;transform:translateY(-50%)}
  .hero h1{font:500 clamp(34px,3.6vw,52px)/1.12 var(--body);letter-spacing:-.02em;max-width:11em}
  .hero-actions{margin-top:30px;display:flex;align-items:center;gap:24px}
  .hero-side{position:absolute;right:clamp(20px,3.4vw,44px);top:44%;transform:translateY(-50%);
      max-width:300px;font-size:16.5px;line-height:1.55;color:color-mix(in srgb,var(--ink) 85%,transparent);
      text-align:left;pointer-events:auto}
  .hero-strip{position:absolute;left:clamp(20px,3.4vw,44px);right:clamp(20px,3.4vw,44px);bottom:30px;
      display:flex;align-items:baseline;justify-content:space-between;gap:24px;pointer-events:auto}
  .strip-stat{font-size:15px;color:color-mix(in srgb,var(--ink) 82%,transparent)}
  .trades{display:flex;gap:clamp(16px,3vw,44px);font:400 11.5px/1 var(--mono);letter-spacing:.22em;
      text-transform:uppercase;color:var(--dim)}

  /* ---------- chapters ---------- */
  .chapter{height:100vh;display:flex;align-items:center;padding:0 clamp(20px,6vw,96px)}
  .chapter[data-side="right"]{justify-content:flex-end}
  .chapter[data-side="center"]{justify-content:center;text-align:center}
  .card{max-width:450px;pointer-events:auto;padding:40px 38px;
      background:radial-gradient(115% 115% at 50% 40%, color-mix(in srgb,var(--paper) 72%,transparent) 35%, color-mix(in srgb,var(--paper) 38%,transparent) 65%, transparent 90%);
      opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
  .card.in{opacity:1;transform:none}
  .card::before{content:"";display:block;width:34px;height:1px;background:var(--ink);margin-bottom:22px;opacity:.55}
  .chapter[data-side="center"] .card::before{margin:0 auto 22px}
  .tag{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px;
      font:400 10.5px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
  .chapter[data-side="center"] .tag{justify-content:center;gap:10px}
  .tag.gold{color:var(--sap)}
  h2{font:500 clamp(28px,3.1vw,40px)/1.14 var(--body);letter-spacing:-.018em;margin-bottom:14px}
  .card p{color:color-mix(in srgb,var(--ink) 85%,transparent);font-size:15.5px}
  .card p + p{margin-top:11px}

  .ledger{margin-top:24px;font:400 11.5px/1.75 var(--mono);letter-spacing:.02em}
  .ledger-row{padding:11px 0 11px 15px;border-left:2px solid color-mix(in srgb,var(--dim) 45%,transparent)}
  .ledger-row .who{display:block;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:2px}
  .ledger-row.dead .what{color:var(--dim)}
  .ledger-row.live{border-left-color:var(--sap)}
  .ledger-row.live .who{color:var(--sap)}
  .ledger-row.live .who::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
      background:var(--sap);margin-right:8px;animation:pulse 2s ease-in-out infinite}

  /* ---------- cta ---------- */
  .cta{height:100vh}
  .cta .card{max-width:620px}
  .cta h2{font-size:clamp(36px,4.6vw,58px)}
  .actions{margin-top:26px;display:flex;gap:22px;justify-content:center;align-items:center}
  .btn{font:500 14.5px/1 var(--body);color:var(--paper);background:var(--ink);text-decoration:none;
      padding:15px 28px;border-radius:999px;transition:background .25s,transform .25s;display:inline-block}
  .btn:hover{background:#3D5548;transform:translateY(-1px)}
  .btn.gold{background:var(--sap)}
  .btn.gold:hover{background:#9c7024}
  .ghost{font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
      border-bottom:1px solid var(--dim);padding-bottom:4px}
  .ghost:hover{border-color:var(--ink)}

  .foot{position:absolute;bottom:22px;left:0;right:0;text-align:center;
      font:400 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

  /* ---------- hud & cue ---------- */
  .hud{position:fixed;left:22px;bottom:18px;z-index:9;color:var(--dim);font:400 10.5px/1 var(--mono);
      letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity .5s}
  .hud.on{opacity:1}
  .hud b{color:var(--ink);font-weight:400;font-variant-numeric:tabular-nums}
  .cue{position:fixed;left:50%;bottom:96px;z-index:9;transform:translateX(-50%);color:var(--dim);
      font:400 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;transition:opacity .6s}

  @media (max-width:860px){
    nav{grid-template-columns:auto 1fr;padding:14px 20px}
    .nav-links{gap:16px;font-size:12.5px}
    .nav-status{display:none}
    .mark{justify-self:end}
    .banner{top:60px;height:auto;flex-wrap:wrap;padding:12px 14px;gap:10px}
    .banner .orn,.leader{display:none}
    .hero-copy{top:36%}
    .hero h1{font-size:clamp(30px,8vw,40px)}
    .hero-actions{margin-top:22px;flex-wrap:wrap;gap:18px}
    .hero-side{position:absolute;right:auto;left:20px;top:auto;bottom:110px;transform:none;max-width:78vw}
    .hero-strip{flex-direction:column;gap:10px;align-items:flex-start;bottom:22px}
    .trades{flex-wrap:wrap;gap:14px}
    .chapter{padding:0 16px;justify-content:center!important}
    .card{padding:30px 22px}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .dot,.ledger-row.live .who::before{animation:none}
    .card{transition:none;opacity:1;transform:none}
  }