/* TMWS v5 additions */
#gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block;background:#121212}
main,#top{position:relative;z-index:1}
.hero{position:relative;z-index:2}
#world{position:relative;pointer-events:none}
#hud{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.foot{position:relative;z-index:4}
.coll-hell .product,.coll-hell .manifesto{background:transparent!important}
.coll-hell .product{background:radial-gradient(ellipse at 50% 60%,rgba(18,18,18,.15),rgba(18,18,18,.7))!important}
.coll-hell .giant{color:rgba(200,41,36,.55);mix-blend-mode:screen}
.hs{position:absolute;inset:0;visibility:hidden}
.hs.on{visibility:visible}
.hs .h-head{position:absolute;left:6vw;top:16vh;max-width:min(560px,80vw)}
.hs.r .h-head{left:auto;right:6vw;text-align:right}
.h-num{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:#AE9C74;opacity:0;transition:opacity .6s}
.hs.on .h-num{opacity:1}
.h-title{font-family:'Playfair Display',serif;font-style:italic;font-weight:900;font-size:clamp(40px,7vw,104px);line-height:.95;color:#F3F1E9;margin:.1em 0 0;text-shadow:0 3px 0 #592223,0 0 30px rgba(0,0,0,.6)}
.h-title i,.h-ins i{display:inline-block;font-style:inherit;opacity:0;transform:translateX(.35em) scaleY(1.3);filter:blur(4px);transition:opacity .5s cubic-bezier(.19,1,.22,1),transform .7s cubic-bezier(.19,1,.22,1),filter .5s;transition-delay:calc(var(--i)*38ms)}
.hs.on .h-title i,.hs.on .h-ins i{opacity:1;transform:none;filter:none}
.h-cap{position:absolute;left:6vw;bottom:12vh;max-width:min(420px,62vw);background:#F3F1E9;color:#121212;padding:16px 20px 14px;border:3px solid #121212;box-shadow:6px 6px 0 #121212;transform:rotate(-1.2deg) translateY(30px);opacity:0;transition:all .7s cubic-bezier(.19,1,.22,1) .35s}
.hs.r .h-cap{left:auto;right:6vw;transform:rotate(1.2deg) translateY(30px)}
.hs.on .h-cap{opacity:1;transform:rotate(-1.2deg)}
.hs.r.on .h-cap{transform:rotate(1.2deg)}
.h-cap p{margin:0;font-family:'Playfair Display',serif;font-size:clamp(15px,1.35vw,19px);line-height:1.35}
.h-cap p.note{font-style:italic}
.h-cap .ref{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-top:8px;color:#C82924}
.h-cap span{opacity:0;transition:opacity .3s;transition-delay:calc(.4s + var(--i)*45ms)}
.hs.on .h-cap span{opacity:1}
/* bare: let the quieter/heavier beats breathe — no boxed citation card, just ink over the art */
.h-cap.bare{background:radial-gradient(ellipse at 35% 50%,rgba(5,4,3,.6) 0%,rgba(5,4,3,.4) 50%,transparent 85%);border:none;box-shadow:none;padding:14px 18px;margin:-14px -18px;max-width:min(460px,52vw)}
.h-cap.bare p{font-family:'Playfair Display',serif;font-style:italic;font-weight:700;font-size:clamp(20px,2.6vw,34px);line-height:1.3;color:#F3F1E9;text-shadow:0 2px 3px #000,0 0 24px rgba(0,0,0,.95),0 1px 0 #000}
.panel-f{position:absolute;width:min(300px,26vw);aspect-ratio:4/3;background:#121212;padding:6px;clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%);transition:clip-path .67s cubic-bezier(.7,0,.2,1)}
.panel-f img{width:100%;height:100%;object-fit:cover;display:block;clip-path:inherit}
.hs.on .panel-f{clip-path:var(--poly)}
.panel-f.p0{right:7vw;top:22vh;--poly:polygon(4% 0,100% 6%,96% 100%,0 92%);transition-delay:.55s}
.panel-f.p1{right:20vw;bottom:10vh;width:min(240px,20vw);--poly:polygon(0 4%,94% 0,100% 96%,6% 100%);transition-delay:.85s}
.hs.r .panel-f.p0{right:auto;left:7vw}.hs.r .panel-f.p1{right:auto;left:22vw}
.h-ins{position:absolute;left:50%;top:44vh;transform:translate(-50%,-50%);width:90vw;text-align:center;font-family:'Playfair Display',serif;font-weight:900;font-style:italic;font-size:clamp(30px,5.4vw,84px);color:#F3F1E9;text-shadow:0 3px 0 #C82924,0 0 40px #000;line-height:1.05}
.h-ins small{display:block;font:12px 'Space Mono',monospace;letter-spacing:.25em;text-transform:uppercase;color:#AE9C74;margin-top:14px;font-style:normal;text-shadow:none}
.hs.dante .h-head{top:auto;bottom:14vh;left:50%;transform:translateX(-50%);text-align:center;max-width:90vw}
.hs.dante .h-title{font-size:clamp(34px,5vw,76px)}
.progress em{font-style:normal;opacity:.7;margin-left:.6em}
@media (max-width:820px){
 .hs .h-head{top:13vh;left:6vw}.hs.r .h-head{right:6vw}
 .h-cap{bottom:8vh;left:5vw;right:5vw;max-width:none}.hs.r .h-cap{left:5vw;right:5vw}
 .panel-f.p1{display:none}.panel-f.p0{width:44vw;top:auto;bottom:34vh;right:5vw}
}

#splat{position:fixed;left:50%;top:50%;width:min(90vw,90vh);height:min(90vw,90vh);z-index:3;pointer-events:none;opacity:0;transform:translate(-50%,-50%)}
.h-title .w,.h-ins .w{display:inline-block;white-space:nowrap}
.h-ins{-webkit-text-stroke:1.5px #121212;paint-order:stroke fill}

/* v8: shirt design plates (design untouched; grit lives in the frame) */
#plates{position:fixed;inset:0;z-index:85;pointer-events:none}
.dplate{position:absolute;right:8vw;top:17vh;height:62vh;margin:0;opacity:0;transform:translateY(30px) rotate(1.5deg) scale(.96);transition:opacity .5s,transform .7s cubic-bezier(.2,1.4,.4,1)}
.dplate.r{right:auto;left:8vw;transform:translateY(30px) rotate(-1.5deg) scale(.96)}
.dplate.on{opacity:1;transform:rotate(1.5deg)}.dplate.r.on{transform:rotate(-1.5deg)}
.dp-frame{position:relative;height:100%;aspect-ratio:784/1168;padding:12px;background:#121212;clip-path:polygon(1% 2%,30% 0,62% 1.5%,99% 0,100% 35%,98.5% 70%,100% 99%,64% 100%,35% 98.5%,0 100%,1.5% 64%,0 30%)}
.dp-frame::before{content:"";position:absolute;inset:0;background:#592223;filter:url(#rough);opacity:.9}
.dp-frame::after{content:"";position:absolute;inset:3px;border:3px solid #F3F1E9;filter:url(#rough);pointer-events:none}
.dp-frame img{position:relative;z-index:1;display:block;height:100%;width:100%;object-fit:contain;filter:none!important;mix-blend-mode:normal}
.dplate figcaption{margin-top:10px;color:#F3F1E9;text-align:center;letter-spacing:.2em;font-size:11px;text-shadow:0 1px 0 #121212}
@media (max-width:820px){.dplate,.dplate.r{left:50%;right:auto;top:25vh;height:auto;width:50vw;transform:translate(-50%,30px)}.dplate.on,.dplate.r.on{transform:translate(-50%,0) rotate(1deg)}.dp-frame{height:auto;width:100%}}
/* demon comic squares removed — vortex scene dropped */

/* v8c: shirts stand where the figures stood (centre-low), clear of the comic insets */
.dplate,.dplate.r{left:50%;right:auto;top:auto;bottom:7vh;height:48vh;transform:translate(-50%,30px) rotate(1.5deg) scale(.96)}
.dplate.on,.dplate.r.on{transform:translate(-50%,0) rotate(1.5deg)}.dplate.r.on{transform:translate(-50%,0) rotate(-1.5deg)}
@media (max-width:820px){.dplate,.dplate.r{left:5vw;bottom:auto;top:29vh;width:min(40vw,calc(40vh * 0.671));height:auto;transform:translateY(30px)}.dplate.on,.dplate.r.on{transform:rotate(-1deg)}}
@media (min-width:821px){.dplate{left:53%;height:44vh}.dplate.r{left:47%;height:44vh}}

/* v8e: carcass shirt raised off the carcass; rope tree inset moved to the opposite side */
@media (min-width:821px){.dplate[data-id=carcass]{left:auto;right:5vw;top:47vh;bottom:auto;height:36vh;transform:translateY(30px) rotate(1.5deg)}.dplate[data-id=carcass].on{transform:rotate(1.5deg)}
 .hs[data-id=rope] .panel-f.p0{left:auto;right:7vw;top:34vh}}
@media (max-width:820px){.hs[data-id=rope] .panel-f.p0{left:auto;right:5vw}}

/* v10x: canvas/DOM seam kill — the DOM red was composited over the canvas red with no
   grain = hard hex mismatch + black rails. Now: NO DOM red at all; the fixed canvas
   (mode 2.55 red flood with grain comp pass) shows through the transparent sections,
   so canvas red and DOM red are literally the same pixels. */
.coll-hell{background:transparent!important}
.coll-hell .product{background:transparent!important}
.coll-hell .manifesto{background:transparent!important;padding:60px 5vw 40px!important}
.coll-hell section{background:transparent!important}
.coll-hell .card{box-shadow:none}                        /* red seat, no painted mat */
.padding-ticket{display:none}                            /* null selector guard */
