/* v3 — black, poster-scale. Hero without words, the mark writes itself; DECAY-style tag block; films edge to edge; two decks on a rail. */
:root{--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
body{font-size:14px}
[data-block]{position:relative}
/* hero */
.hero{position:relative;overflow:hidden;background:#000}
.hero .hrail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;user-select:none}
.hero .hrail::-webkit-scrollbar{display:none}
.hero .hrail:active{cursor:grabbing}
.hero .slide{flex:0 0 100%;position:relative;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
.hero video.bg{width:100%;height:min(100svh,56vw);min-height:420px;object-fit:cover;display:block}
.hero video.mark{position:absolute;left:2%;bottom:-9%;width:min(66%,900px);mix-blend-mode:screen;pointer-events:none;filter:contrast(1.08)}
/* tag block (small print, square, date) */
.tag{font-family:var(--mono);font-size:12px;line-height:1.35;letter-spacing:.02em;color:var(--ink);display:grid;gap:10px;width:max-content}
.tag .sq{display:block;width:9px;height:9px;background:var(--ink)}
.tag.red .sq{background:var(--red)}
/* title block */
.title{padding:9vh var(--g) 10vh;max-width:1400px;margin:0 auto;min-height:70vh;overflow:hidden}
.title .big .l{display:block}
.title .tag{margin-bottom:9vh}
.title .big{font-family:"Archivo Narrow",Impact,"Arial Narrow",sans-serif;font-weight:700;font-size:clamp(64px,13.5vw,220px);line-height:.82;letter-spacing:-.025em;margin:0;text-transform:uppercase}
.title .by{font-family:"Inter Tight",Helvetica,Arial,sans-serif;font-weight:500;font-size:clamp(18px,2.4vw,30px);letter-spacing:-.01em;margin:28px 0 0;line-height:1.15}
.title .by .x{color:var(--red);font-weight:400;margin:0 .35em}
.title .by small{display:block;color:var(--grey);font-size:13px;font-weight:400;letter-spacing:.02em;margin-top:8px;font-family:var(--mono)}
.title .print{columns:3;column-gap:28px;font-size:12px;line-height:1.45;color:#b4b4b4;max-width:980px;margin-top:9vh}
.title .print p{margin:0 0 1em;break-inside:avoid}
.title .strokes{position:absolute;inset:0;pointer-events:none;overflow:visible}
.title .strokes img{position:absolute;mix-blend-mode:screen}
.title .s1{left:-3%;top:24%;width:104%}
.title .s2{left:42%;top:40%;width:66%;transform:rotate(-5deg)}
.title .s3{left:58%;top:84%;width:40%;transform:rotate(2.5deg)}
/* films — edge to edge, hairline transport */
.films{display:grid;gap:14vh}
figure.player{margin:0;position:relative}
figure.player video{width:100%;display:block;background:#000;cursor:pointer}
figure.player .cap{display:flex;justify-content:space-between;gap:16px;padding:10px var(--g) 0;font-family:var(--mono);font-size:12px;color:var(--grey);letter-spacing:.03em}
figure.player .cap b{color:var(--ink);font-weight:500}
.transport{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:12px var(--g) 0;color:var(--ink)}
.transport .pp{appearance:none;background:none;border:0;padding:6px;margin:-6px;color:inherit;cursor:pointer;display:inline-flex;opacity:.9}
.transport .scrub{position:relative;height:28px;cursor:pointer;touch-action:none}
.transport .bar{position:absolute;left:0;right:0;top:50%;height:1px;background:#3a3a3a}
.transport .fill{position:absolute;left:0;top:0;height:1px;width:0;background:var(--ink)}
.transport .head{position:absolute;top:-4px;left:0;width:1px;height:9px;background:var(--ink);margin-left:-.5px}
.transport .time{font-family:var(--mono);font-size:12px;color:var(--grey);letter-spacing:.03em;min-width:9ch;text-align:right}
figure.player.playing .time{color:var(--ink)}
/* interstitial clip from the pool */
.inter video{width:100%;height:min(70svh,46vw);object-fit:cover;display:block;background:#000}
/* decks on a rail */
.decks{padding:12vh 0 0}
.decks .head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:0 var(--g) 18px;max-width:1400px;margin:0 auto;font-family:var(--mono);font-size:12px;color:var(--grey);letter-spacing:.03em}
.decks .head a{color:var(--grey);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
.decks .head a.on{color:var(--ink);border-bottom-color:var(--ink)}
.rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail>.slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
.deck{max-width:none;margin:0;padding:0}
.deck .deck-meta,.deck .tape-keys,.deck .tape-meta{padding-left:var(--g);padding-right:var(--g)}
.tape-stage{max-width:1100px;margin:0 auto;padding:0 var(--g)}
.stage{width:100%}
.tape-stage{width:100%}
/* sheet */
.sheet{max-width:1180px;margin:12vh auto 0;padding:0 var(--g)}
.row{grid-template-columns:160px 1fr;font-size:13px}
.row b{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.poem{font-size:15px}
footer.vc{max-width:1180px;margin:12vh auto 0;padding:0 var(--g) 10vh}
footer.vc img{width:180px}
@media (max-width:760px){
  .hero video.bg{height:68svh;min-height:0}
  .hero video.mark{width:92%;left:0;bottom:-6%}
  .title{padding-top:7vh;min-height:0}.title .tag{margin-bottom:7vh}.title .big{font-size:21vw}.title .print{columns:1;margin-top:7vh}
  .title .s1{top:18%}.title .s2{top:33%;left:8%;width:95%}.title .s3{top:88%;left:40%;width:60%}
  .films{gap:9vh}
  .stage{height:min(100svh,132vw)!important}
  
  .row{grid-template-columns:1fr;gap:6px}
}
@media (prefers-reduced-motion:reduce){.hero video.mark{display:none}}
/* subtitles */
figure.player{position:relative}
figure.player .frame{position:relative}
figure.player .subs{position:absolute;left:0;right:0;bottom:7%;padding:0 var(--g);text-align:center;font-family:"Inter Tight",Helvetica,Arial,sans-serif;font-weight:500;font-size:clamp(15px,1.9vw,26px);line-height:1.3;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 18px rgba(0,0,0,.7);pointer-events:none;opacity:0;transition:opacity .15s}
figure.player .subs.show{opacity:1}
.transport .lang{display:flex;gap:2px;margin-left:6px}
.transport .lang button{appearance:none;background:none;border:0;padding:4px 6px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--grey);cursor:pointer;border-bottom:1px solid transparent}
.transport .lang button.on{color:var(--ink);border-bottom-color:var(--ink)}
.transport{grid-template-columns:auto 1fr auto auto}

.poem{font-size:14px;line-height:1.5;columns:2;column-gap:40px;max-width:760px}
.poem i{display:block;font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-bottom:4px;font-style:normal}
.poem .who{margin:0 0 1.2em;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--grey)}
@media (max-width:760px){.poem{columns:1}}

@media (max-width:760px){.decks .head{display:grid;grid-template-columns:1fr;gap:6px}.decks .head>span:last-child{display:none}.decks .head a{display:inline-block;margin-right:14px}figure.player .cap{display:block}figure.player .cap span{display:block}figure.player .cap span+span{color:var(--grey);margin-top:2px}.transport{gap:10px}.transport .time{min-width:0}}

/* one column for everything: the title block sets the measure, nothing runs wider */
:root{--col:1400px}
.hero,.films,.inter,.decks .rail,.decks .head,.sheet,footer.vc{max-width:var(--col);margin-left:auto;margin-right:auto}
.hero{padding:0 var(--g)}
.hero video.bg{height:min(78vh,42vw)}
figure.player,.inter{padding:0 var(--g)}
.deck{padding:0 var(--g)}
.decks .head{padding-left:var(--g);padding-right:var(--g)}
@media (max-width:760px){.hero,figure.player,.inter,.deck{padding:0}.hero video.bg{height:68svh}}