@font-face{font-family:Archivo;src:url(/fonts/archivo-var-latin.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  --y:#ffc400;--k:#0a0a0a;--w:#fff;
  --mute:#595959;          /* secondary text on white, 7:1 */
  --mute-y:#3d3000;        /* secondary text on yellow */
  --ease:cubic-bezier(.2,.8,.2,1);
  --pad:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0}
html{background:var(--k);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--w);color:var(--k);font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;line-height:1.5;overflow-x:hidden}
::selection{background:var(--k);color:var(--y)}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:4px solid var(--k);outline-offset:3px}
.poster :focus-visible,.list :focus-visible{outline-color:var(--k)}
.skip{position:fixed;left:8px;top:-60px;z-index:100;background:var(--k);color:var(--y);padding:10px 16px;font-weight:800;text-decoration:none}
.skip:focus{top:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- nav ---------- */
.nav{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:14px var(--pad);transition:opacity .25s;pointer-events:none}
.nav>*{pointer-events:auto}
.nav .mark{font-weight:900;font-stretch:125%;font-size:20px;letter-spacing:-.045em;text-decoration:none;opacity:0;transition:opacity .3s}
.nav.show .mark{opacity:1}
.nav ul{display:flex;gap:clamp(12px,2.4vw,32px);list-style:none;padding:0;margin-left:auto}
.nav a.l{font-weight:800;font-size:12px;letter-spacing:.14em;text-decoration:none;padding:6px 0;border-bottom:3px solid transparent}
.nav a.l:hover{border-bottom-color:currentColor}

/* ---------- hero / dive ---------- */
.poster{position:relative;background:var(--y)}
.js .poster{height:280vh}
.pin{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:var(--y)}
.js .pin{position:sticky;top:0}
.wordmark{position:absolute;left:0;right:0;top:5vh;text-align:center;font-size:19.5vw;line-height:.95;font-weight:900;font-stretch:125%;letter-spacing:-.045em;user-select:none;will-change:transform,opacity}
.wordmark:hover{animation:tear .5s steps(2) 1}
@keyframes tear{0%{text-shadow:-.04em 0 #ff2a1a,.04em 0 #0a52ff;clip-path:inset(0 0 55% 0);transform:translateX(-.8%)}25%{clip-path:inset(40% 0 20% 0);transform:translateX(1%)}50%{text-shadow:.03em 0 #ff2a1a,-.03em 0 #0a52ff;clip-path:inset(10% 0 60% 0)}75%{clip-path:inset(0 0 0 0);transform:translateX(-.5%)}100%{text-shadow:none;clip-path:none;transform:none}}
.badge{position:absolute;left:calc(72% + var(--half,0px) - 46px);top:calc(60% - var(--half,0px) - 16px);z-index:3;background:var(--w);border:3px solid var(--k);padding:8px 14px;font-weight:800;font-size:clamp(12px,1.3vw,18px);letter-spacing:.06em;transform:rotate(5deg)}
.lead{position:absolute;left:var(--pad);bottom:15vh;max-width:50vw;will-change:opacity}
.lead h1{font-size:min(7.6vw,9.5vh);line-height:.95;font-weight:900;font-stretch:88%;letter-spacing:-.03em;margin:0}
.btns{display:flex;gap:10px;margin-top:3vh;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;background:var(--k);color:var(--y);border:4px solid var(--k);padding:14px 24px;font-weight:800;font-size:clamp(13px,1.4vw,19px);line-height:1;letter-spacing:.04em;border-radius:60px;cursor:pointer;transition:transform .2s var(--ease),background .2s,color .2s}
.btn:hover{transform:translateY(-3px)}
.btn.o{background:transparent;color:var(--k)}
.btn.o:hover{background:var(--k);color:var(--y)}
.cv{--s:min(44vh,42vw);position:absolute;left:72%;top:60%;width:var(--s);height:var(--s);transform:translate(-50%,-50%);will-change:transform;padding:0;border:0;background:#000;cursor:crosshair;touch-action:pan-y;display:block}
.cv img,.cv canvas{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.cv canvas{opacity:0;transition:opacity .4s}
.cv.gl canvas{opacity:1}
.hint{position:absolute;left:72%;transform:translateX(-50%);top:calc(60% - var(--half,0px) - 30px);font-weight:800;font-size:13px;letter-spacing:.14em;white-space:nowrap}
.tape{position:absolute;left:-6%;right:-6%;bottom:2.5vh;background:var(--k);color:var(--y);transform:rotate(-2deg) skewX(var(--sk,0deg));overflow:hidden;white-space:nowrap;padding:14px 0;font-weight:800;font-size:clamp(16px,2vw,28px);letter-spacing:.06em;will-change:transform,opacity}
.tape div{display:inline-block;animation:m 26s linear infinite}
@keyframes m{to{transform:translateX(-50%)}}
.tape:hover div{animation-play-state:paused}
.dive{position:absolute;left:50%;bottom:9vh;transform:translateX(-50%);width:94vw;text-align:center;color:var(--w);font-weight:900;font-stretch:80%;font-size:clamp(30px,7vw,110px);line-height:1;letter-spacing:-.01em;opacity:0;pointer-events:none;z-index:4;text-shadow:0 2px 24px #000a}

/* ---------- index ---------- */
.index,.also,.words,.about{background:var(--w);padding:14vh var(--pad) 8vh}
.index{padding-bottom:4vh}
.big{word-spacing:.1em;font-size:min(17vw,230px);line-height:.85;letter-spacing:-.05em;font-weight:900;font-stretch:100%;margin-bottom:5vh;text-wrap:balance}
.big.m{font-size:min(11vw,150px)}
.meta{font-weight:700;font-size:clamp(13px,1.3vw,18px);letter-spacing:.1em;margin:-14px 0 4vh}
.plat{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:7vh}
.row{display:grid;grid-template-columns:clamp(60px,9vw,120px) 1fr auto;align-items:baseline;gap:2vw;border-top:5px solid var(--k);padding:2.2vh 1vw;text-decoration:none;color:var(--k);transition:background .2s,color .2s}
.row b{word-spacing:.14em;font-size:min(8vw,112px);line-height:1;letter-spacing:-.04em;font-weight:800;font-stretch:70%;transition:font-stretch .45s var(--ease),letter-spacing .45s var(--ease);text-wrap:balance}
.row i,.row em,.row .lk a{font-style:normal;font-weight:800;font-size:clamp(12px,1.3vw,18px);letter-spacing:.1em}
.row .lk{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.row .lk a{text-decoration:none;padding:4px 0;border-bottom:3px solid transparent}
.row .lk a:hover{border-bottom-color:currentColor}
a.row:hover,a.row:focus-visible,div.row:hover,div.row:focus-within{background:var(--k);color:var(--y)}
a.row:hover b,a.row:focus-visible b,div.row:hover b{font-stretch:125%;letter-spacing:-.05em}
.row:last-of-type{border-bottom:5px solid var(--k)}
#peek{position:fixed;left:0;top:0;width:min(25vw,330px);aspect-ratio:1;object-fit:cover;pointer-events:none;z-index:30;clip-path:inset(100% 0 0 0);transition:clip-path .35s var(--ease);will-change:transform}
#peek.on{clip-path:inset(0 0 0 0)}

/* ---------- words (T001 lyrics) ---------- */
.words .intro{font-size:clamp(16px,1.6vw,22px);max-width:60ch;margin:-14px 0 5vh;color:var(--mute)}
details.t{border-top:5px solid var(--k)}
details.t:last-of-type{border-bottom:5px solid var(--k)}
details.t>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:clamp(60px,9vw,120px) 1fr auto;align-items:baseline;gap:2vw;padding:2.2vh 1vw}
details.t>summary::-webkit-details-marker{display:none}
details.t>summary b{word-spacing:.14em;font-size:min(8vw,112px);line-height:1;letter-spacing:-.04em;font-weight:800;font-stretch:70%;transition:font-stretch .45s var(--ease)}
details.t>summary i,details.t>summary em{font-style:normal;font-weight:800;font-size:clamp(12px,1.3vw,18px);letter-spacing:.1em}
details.t>summary:hover{background:var(--k);color:var(--y)}
details.t>summary:hover b{font-stretch:125%}
@media (min-width:761px){details.t[open]>summary b{font-stretch:125%}}
details.t[open]>summary em::before{content:"CLOSE −";}
details.t:not([open])>summary em::before{content:"OPEN +";}
.t-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);padding:4vh 1vw 8vh}
.lyrics p{font-size:clamp(17px,1.5vw,21px);line-height:1.55;max-width:44ch}
.lyrics .stanza-label{display:block;margin:2.4em 0 .6em;font-weight:900;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.lyrics .stage{color:var(--mute);font-style:italic}
.lyrics sup,.notes sup{font-weight:800;font-size:.7em}
.notes h3{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:900;margin:0 0 1em}
.notes .footnotes p{font-size:16px;margin-bottom:1em;max-width:46ch}
.notes .liner{font-size:16px;color:var(--mute);margin:2.4em 0 1.4em;max-width:46ch}
.credits{display:grid;grid-template-columns:minmax(96px,34%) 1fr;border-top:3px solid var(--k)}
.credits dt,.credits dd{padding:9px 0;border-bottom:1px solid #c9c9c9;font-size:15px}
.credits dt{font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px;padding-right:24px;padding-top:12px}
.credits dd{margin:0}

/* ---------- about ---------- */
.about .body{font-size:clamp(19px,2.2vw,30px);line-height:1.4;max-width:30em;font-weight:600}
.about .body p+p{margin-top:1em}
.about .body .drop{font-weight:900}

/* ---------- list ---------- */
.list{background:var(--y);padding:14vh var(--pad)}
.list h2{font-size:min(9.4vw,140px);line-height:.9;letter-spacing:-.04em;word-spacing:.1em;font-weight:900;font-stretch:100%;text-wrap:balance}
.list form{margin-top:6vh;display:flex;gap:12px;flex-wrap:wrap;max-width:900px}
.list input{flex:1;min-width:min(100%,240px);padding:18px 24px;font:700 clamp(17px,1.6vw,22px) Archivo,sans-serif;border:5px solid var(--k);background:transparent;color:var(--k);border-radius:60px}
.list input::placeholder{color:var(--mute-y)}
.list button{padding:18px 38px;background:var(--k);color:var(--y);border:0;font:800 clamp(17px,1.6vw,22px) Archivo,sans-serif;cursor:pointer;border-radius:60px}
.list .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.list button:disabled{opacity:.6;cursor:progress}
.list .fine.ok,.list .fine.bad{font-weight:800;color:var(--k)}
.list .fine{margin-top:18px;font-size:14px;font-weight:600;color:var(--mute-y);max-width:60ch}

/* ---------- footer ---------- */
.foot{background:var(--k);color:var(--y);padding:6vh var(--pad);display:flex;gap:24px 48px;justify-content:space-between;flex-wrap:wrap;font-weight:700;font-size:14px;letter-spacing:.08em}
.foot a{text-decoration:none;border-bottom:2px solid transparent}
.foot a:hover{border-bottom-color:currentColor}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot :focus-visible{outline-color:var(--y)}

/* ---------- cursor ring (fine pointers only) ---------- */
#cur{position:fixed;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:99;transition:width .25s,height .25s,margin .25s;display:none}
#cur.big{width:84px;height:84px;margin:-42px 0 0 -42px}
@media (hover:hover) and (pointer:fine){#cur{display:block}}

/* ---------- narrow screens ---------- */
@media (max-width:760px){
  .nav ul{gap:12px}.nav a.l{font-size:11px;letter-spacing:.1em}
  .nav .mark{font-size:16px}
  .wordmark{top:7vh;font-size:21vw}
  .badge{left:auto;top:auto;bottom:12vh;right:3vw;font-size:11px;padding:6px 10px;z-index:6}
  .lead{max-width:none;right:var(--pad);bottom:auto;top:calc(7vh + 22vw)}
  .lead h1{font-size:11vw}
  .btn{padding:12px 18px;font-size:13px}
  .cv{--s:min(38vh,66vw);left:50%;top:73%}
  .hint{left:50%;top:calc(73% - var(--half,0px) - 28px);font-size:11px}
  .row{grid-template-columns:1fr}
  .row i{order:-1}.row .lk{justify-content:flex-start}
  .row b{font-size:12vw}
  details.t>summary{grid-template-columns:1fr auto}
  details.t>summary i{display:none}
  details.t>summary b{font-size:11vw}
  .t-body{grid-template-columns:1fr}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tape div{animation:none}
  .wordmark:hover{animation:none}
  .js .poster{height:auto}.js .pin{position:relative}
}