/* Landing: one continuous ink scene. The canvas is fixed; everything else blends over it. */
body.scene{background:var(--paper);overflow-x:hidden}
body.scene canvas#gl{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;display:block;pointer-events:none}
.snav,.ch-hero .hero,.pin,.close-in,.sfoot{position:relative}
.snav{position:fixed;z-index:10}
.chapter-count{z-index:10}
.pin{position:sticky}
body.scene.nogl{background:var(--paper) url(/img/ink-still.jpg) center/cover fixed no-repeat}
.blend{color:#fff;mix-blend-mode:difference}

.snav{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:28px var(--gut);z-index:10}
.snav .links a{opacity:.6}
.snav .cta,.big-cta{background:#fff;color:#000}
.chapter-count{position:fixed;left:var(--gut);bottom:28px;font-size:11px;letter-spacing:.12em;opacity:.55}

/* hero (approved) */
.ch-hero{position:relative;height:100vh;height:100svh;min-height:620px}
.ch-hero .hero{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gut) 76px}
.ch-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(64px,10.5vw,168px);line-height:.9;letter-spacing:-.025em}
.ch-hero h1 i{font-style:italic}

/* pinned chapters */
.track{position:relative}
.t-sign{height:210vh}.t-read{height:320vh}.t-land{height:240vh}.t-token{height:200vh}
.pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut)}
.kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:26px}
.mega{font-family:var(--serif);font-weight:400;font-size:clamp(64px,11.5vw,190px);line-height:.88;letter-spacing:-.03em}
.mega i,.big i{font-style:italic;color:inherit}
.big{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.4vw,84px);line-height:.95;letter-spacing:-.02em}
.lede{max-width:430px;margin-top:34px;font-size:16px;line-height:1.6;opacity:.78}
.t-sign .pin{align-items:flex-start}
.t-land .pin{align-items:flex-end;text-align:right}
.t-land .lede{margin-left:auto}
.lastline{margin-top:22px;font-size:11.5px;opacity:.55}
.lastline a{text-decoration:none;border-bottom:1px solid currentColor}

/* chapter reveal (set by ink.js through --in, 0..1) */
.pin{--in:1}
body.anim .pin{--in:0}
.pin > *:not(.readwall){opacity:var(--in);transform:translateY(calc((1 - var(--in)) * 40px));will-change:opacity,transform}

/* the read wall: ciphertext everywhere, a lens shows the plain message */
.t-read .pin{padding:0}
.readwall{position:absolute;inset:0;overflow:hidden;opacity:var(--in)}
.hexwall{position:absolute;inset:-10px;font-size:13px;line-height:1.55;letter-spacing:.06em;white-space:pre-wrap;word-break:break-all;opacity:.34;
  -webkit-mask:radial-gradient(circle at var(--lx,50%) var(--ly,50%),transparent 0,transparent var(--lr,120px),#000 calc(var(--lr,120px) + 70px));
          mask:radial-gradient(circle at var(--lx,50%) var(--ly,50%),transparent 0,transparent var(--lr,120px),#000 calc(var(--lr,120px) + 70px))}
.plain{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 8vw;
  -webkit-mask:radial-gradient(circle at var(--lx,50%) var(--ly,50%),#000 0,#000 var(--lr,120px),transparent calc(var(--lr,120px) + 70px));
          mask:radial-gradient(circle at var(--lx,50%) var(--ly,50%),#000 0,#000 var(--lr,120px),transparent calc(var(--lr,120px) + 70px))}
.plain p{font-family:var(--serif);font-style:italic;font-size:clamp(40px,6.4vw,104px);line-height:1;letter-spacing:-.02em;max-width:14ch;transition:opacity .4s}
.plain span{margin-top:22px;font-size:12px;letter-spacing:.08em;opacity:.6}
.plain.swap p{opacity:0}
.read-cap{position:absolute;left:var(--gut);bottom:72px;max-width:640px;pointer-events:none}
.hint{margin-top:20px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.55}

/* scroll dissolve letters */
.dissolve{white-space:nowrap}
.dissolve .ch{display:inline-block;will-change:transform,opacity,filter}
.dissolve .sp{width:.26em}

/* token */
.t-token .pin{align-items:center;text-align:center}
.ticker{font-family:var(--serif);font-weight:400;font-size:clamp(96px,24vw,400px);line-height:.8;letter-spacing:-.04em}
.tk-row{display:flex;gap:10px;align-items:stretch;justify-content:center;margin-top:38px;flex-wrap:wrap}
.tk-ca{display:flex;align-items:center;gap:14px;background:none;border:1px solid currentColor;color:inherit;border-radius:8px;padding:12px 14px 12px 18px;font-size:12.5px;cursor:pointer;max-width:100%}
.tk-ca span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85}
.tk-ca b{font-weight:500;font-family:var(--sans);font-size:12.5px;background:#fff;color:#000;border-radius:5px;padding:5px 9px}
.tk-buy{display:flex;align-items:center;background:#fff;color:#000;text-decoration:none;font-weight:500;font-size:14px;border-radius:8px;padding:0 20px}
.tk-sub{margin-top:18px;font-size:13px;opacity:.6}

/* close */
.ch-close{position:relative;height:100vh;height:100svh;min-height:560px;display:flex;flex-direction:column}
.close-in{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 var(--gut)}
.big-cta{margin-top:40px;font-size:15px;padding:14px 22px;border-radius:8px;text-decoration:none}
.sfoot{display:flex;justify-content:space-between;align-items:center;padding:28px var(--gut);font-size:13px}
.sfoot nav{display:flex;gap:26px;align-items:center}
.sfoot nav a{text-decoration:none;opacity:.65}
.sfoot .mono{font-size:11.5px}

@media (max-width:760px){
  :root{--gut:20px}
  .snav{padding:20px var(--gut)}
  .snav .links{display:none}
  .chapter-count{bottom:18px}
  .ch-hero .hero{padding:0 var(--gut) 44px}
  .ch-hero h1{font-size:clamp(72px,22vw,120px)}
  .ch-hero .row{flex-direction:column;align-items:flex-start;gap:24px}
  .hero-side{width:100%}
  .mega{font-size:clamp(56px,17vw,96px)}
  .lede{font-size:15px}
  .t-land .pin{align-items:flex-start;text-align:left}.t-land .lede{margin-left:0}
  .dissolve{white-space:normal}
  .hexwall{font-size:11px}
  .read-cap{bottom:56px;right:var(--gut)}
  .tk-row{flex-direction:column;align-items:stretch;width:100%}
  .tk-buy{justify-content:center;padding:14px}
  .sfoot{flex-direction:column;gap:14px;align-items:flex-start}
  .sfoot nav{flex-wrap:wrap;gap:16px}
}
@media (prefers-reduced-motion:reduce){.pin > *{transform:none!important}}

/* ---------- Orpheus chapters ---------- */
.t-play{height:220vh}.t-roll{height:300vh}.t-chain{height:220vh}.t-band{height:220vh}
.t-play .pin{align-items:flex-start}
.t-chain .pin{align-items:flex-end;text-align:right}
.t-chain .lede{margin-left:auto}
.t-band .pin{align-items:flex-start}
.mega i,.big i,.ch-hero h1 i{font-style:italic}
.pad-row{display:flex;gap:10px;align-items:center;margin-top:36px;flex-wrap:wrap}
.key-btn{display:flex;align-items:center;gap:12px;background:none;border:1px solid currentColor;color:inherit;font:inherit;font-size:15px;font-weight:500;padding:14px 22px 14px 14px;border-radius:10px;cursor:pointer;transition:transform .12s}
.key-btn b{font-family:var(--mono);font-weight:500;font-size:12px;width:26px;height:26px;display:grid;place-items:center;background:#fff;color:#000;border-radius:6px}
.key-btn.hit,.key-btn:active{transform:scale(.95)}
.pad-hint{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-left:8px}
.t-roll .pin{padding:0}
.roll{position:absolute;left:0;right:0;top:12vh;height:46vh;opacity:var(--in)}
.roll canvas{width:100%;height:100%;display:block}
.roll-cap{position:absolute;left:var(--gut);bottom:64px;max-width:640px;pointer-events:none}
.inst-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:40px;width:min(760px,100%)}
.inst{display:flex;flex-direction:column;align-items:flex-start;gap:28px;background:none;border:1px solid currentColor;color:inherit;font:inherit;font-family:var(--serif);font-size:28px;line-height:1;padding:14px 16px 16px;border-radius:10px;cursor:pointer;text-align:left;transition:transform .12s}
.inst span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;font-family:var(--mono)}
.inst:active{transform:scale(.97)}
.lede.small{font-size:14px;margin-top:22px}
@media (max-width:760px){
  .inst-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inst{font-size:22px;gap:18px}
  .t-chain .pin{align-items:flex-start;text-align:left}.t-chain .lede{margin-left:0}
  .roll-cap{bottom:48px;right:var(--gut)}
}