:root{--bg:#0b0b10;--or:#ff781e;--cy:#00dcff;--pu:#7b3cff;--go:#ffbe5a;--wh:#fff;--a:var(--or);--b:var(--cy);--d:0;--p:0;
--disp:"Oswald","Impact","Arial Narrow Bold","Haettenschweiler",sans-serif;--body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-snap-type:y mandatory;scroll-behavior:smooth;background:var(--bg)}
body{color:var(--wh);font-family:var(--body);background:var(--bg);overflow-x:hidden}
@supports not (height:100svh){.screen{min-height:100vh}}
:focus-visible{outline:3px solid var(--go);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;z-index:50;background:var(--go);color:#000;padding:.5rem}
.skip:focus{left:.5rem}
.bar{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:.5rem .8rem;background:linear-gradient(#0b0b10e6,#0b0b1000)}
.brand{display:flex;gap:.45rem;align-items:center;color:#fff;text-decoration:none;font:700 .8rem/1 var(--disp);letter-spacing:.14em}
.brand img{border-radius:50%}
.snd{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}
.snd small{font-size:.6rem;color:#bbb}
#sound{font:700 .72rem/1 var(--disp);letter-spacing:.1em;padding:.45rem .7rem;border:2px solid var(--cy);color:var(--cy);background:#0b0b10cc;border-radius:99px;cursor:pointer}
#sound[aria-pressed=true]{background:var(--cy);color:#000}
.dots{position:fixed;right:.45rem;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:.45rem}
.dots button{width:12px;height:12px;border-radius:50%;border:2px solid #fff9;background:transparent;cursor:pointer;padding:0}
.dots button[aria-current=true]{background:var(--a,#fff);border-color:#fff;transform:scale(1.3)}
.screen{position:relative;min-height:100vh;min-height:100svh;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:4.2rem 2rem 2.2rem 1.1rem;isolation:isolate}
.inner{position:relative;z-index:2;width:100%;max-width:1100px}
.ord{position:absolute;z-index:0;right:-2vw;bottom:-4vh;font:700 clamp(9rem,42vw,30rem)/.8 var(--disp);color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--a) 55%,transparent);opacity:.5;pointer-events:none;transform:translateY(calc(var(--p)*12vh)) rotate(calc(var(--p)*-4deg))}
.screen::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 15% 20%,color-mix(in srgb,var(--a) 28%,transparent),transparent 55%),radial-gradient(ellipse at 90% 90%,color-mix(in srgb,var(--b) 18%,transparent),transparent 50%)}
.kicker{font:600 .78rem/1.2 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--a);margin-bottom:.8rem}
.stmt{position:relative;font:700 clamp(2rem,9.4vw,5.6rem)/.98 var(--disp);text-transform:uppercase;letter-spacing:calc(.005em + var(--d)*.12em);
 text-shadow:calc(var(--d)*-9px) 0 var(--or),calc(var(--d)*9px) 0 var(--cy);
 transform:skewX(calc(var(--p)*-14deg)) translateX(calc(var(--p)*-4vw)) scaleY(calc(1 + var(--d)*.12));transform-origin:left center;will-change:transform;overflow-wrap:break-word;hyphens:manual}
.stmt.long{font-size:clamp(1.7rem,7.6vw,4.4rem)}
.stmt.big{font-size:clamp(2.7rem,13vw,8rem)}
.stmt.mid{font-size:clamp(2.2rem,10vw,5rem)}
.stmt::before,.stmt::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:calc(var(--d)*1.6)}
.stmt::before{color:var(--cy);clip-path:inset(calc(10% + var(--j,0)*40%) 0 calc(60% - var(--j,0)*30%) 0);transform:translateX(calc(var(--d)*22px))}
.stmt::after{color:var(--or);clip-path:inset(calc(55% + var(--j,0)*20%) 0 calc(10% + var(--j,0)*10%) 0);transform:translateX(calc(var(--d)*-26px)) scaleX(-1);transform-origin:center}
.stmt .w{display:inline-block;transform:translateY(calc(var(--d)*var(--wv,0)*1em)) rotate(calc(var(--d)*var(--wv,0)*12deg))}
.split .hl{color:var(--a)}
.catch{margin-top:1.1rem;color:var(--go);font:600 clamp(1rem,3.8vw,1.35rem)/1.4 var(--body);max-width:40ch}
.q{margin-top:1rem;font:700 clamp(1rem,4vw,1.4rem)/1.2 var(--disp);letter-spacing:.06em}
.vote{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.btn{font:700 clamp(.9rem,3.6vw,1.1rem)/1 var(--disp);letter-spacing:.08em;padding:.8rem 1rem;border:2px solid var(--a);background:transparent;color:#fff;border-radius:6px;cursor:pointer;min-height:44px}
.btn[aria-pressed=true]{background:var(--a);color:#000}
.btn .n{font-family:var(--body);font-weight:800;margin-left:.45rem;opacity:.85}
.note{margin-top:.6rem;font-size:.72rem;color:#c8c8d0}
.cue{margin-top:2.2rem;font:600 .72rem/1 var(--body);letter-spacing:.3em;color:#ddd;display:flex;align-items:center;gap:.6rem}
.cue i{width:2px;height:34px;background:linear-gradient(var(--go),transparent);animation:drip 1.6s infinite}
@keyframes drip{0%{transform:scaleY(.2);transform-origin:top}60%{transform:scaleY(1)}100%{opacity:0}}
.title .hero{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#0b0b10b0,#0b0b10cc 55%,#0b0b10),url(hero.jpg) center/cover no-repeat;transform:scale(calc(1.05 + var(--d)*.15))}
.tag{margin-top:1rem;color:var(--go);font:700 clamp(1rem,4.2vw,1.6rem)/1.25 var(--disp);letter-spacing:.08em}
/* then vs now */
.tn .pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,3rem);align-items:start}
.tn .half{padding:1rem;border-left:4px solid}
.tn .then{border-color:var(--go);color:#f1dfba;filter:sepia(.35)}
.tn .now{border-color:var(--cy);opacity:var(--now,1);transform:translateX(calc((1 - var(--now,1))*40px)) skewX(calc((1 - var(--now,1))*-20deg));text-shadow:calc((1 - var(--now,1))*-8px) 0 var(--or),calc((1 - var(--now,1))*8px) 0 var(--cy)}
.tn .lbl{font:700 .85rem/1 var(--disp);letter-spacing:.3em;margin-bottom:.5rem;display:block}
.tn .then .lbl{color:var(--go)}.tn .now .lbl{color:var(--cy)}
.tn h3{font:700 clamp(1.4rem,5.4vw,3rem)/1.02 var(--disp);text-transform:uppercase}
.tn p{margin-top:.5rem;font-size:clamp(.9rem,3.4vw,1.1rem);line-height:1.4}
.tn .now h3{color:#fff}
/* submit */
form{display:grid;gap:.4rem;margin-top:1rem;max-width:560px}
label{font-size:.8rem;font-weight:600;color:#ddd}
textarea,input{font:1rem/1.4 var(--body);color:#fff;background:#14141c;border:2px solid #3a3a48;border-radius:6px;padding:.6rem}
textarea:focus,input:focus{border-color:var(--cy)}
.row{text-align:right;font-size:.75rem;color:#bbb}
.send{margin-top:.5rem;--a:var(--or);background:var(--or);color:#000;justify-self:start}
#msg{min-height:1.2em;font-size:.85rem;color:var(--go)}
.hp{position:absolute;left:-9999px}
.yours-h{margin-top:1.2rem;font:700 1rem/1 var(--disp);letter-spacing:.2em;color:var(--cy)}
#yours{list-style:none;max-height:22vh;overflow:auto;margin-top:.4rem}
#yours li{border-left:3px solid var(--pu);padding:.35rem .6rem;margin:.3rem 0;font-size:.9rem;background:#ffffff08}
#yours li small{display:block;color:#aaa}
footer{margin-top:1rem;font-size:.72rem;color:#aaa}
.submit .stmt{transform:none}
@media (max-width:700px){
 .tn .pair{grid-template-columns:1fr;gap:.6rem}.tn .half{padding:.5rem .7rem}
 .snd small{display:none}
 .screen{padding:3.8rem 1.9rem 1.4rem .9rem}
}
@media (max-height:700px) and (max-width:700px){.tn h3{font-size:1.35rem}.tn p{font-size:.85rem}}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *{animation:none!important;transition:none!important}
 .stmt,.ord,.title .hero,.stmt .w{transform:none!important;letter-spacing:normal!important;text-shadow:3px 0 0 color-mix(in srgb,var(--a) 50%,transparent)!important}
 .stmt::before,.stmt::after{display:none}
 .tn .now{opacity:1!important;transform:none!important;text-shadow:none!important}
}
/* tall content fallback: never trap scrolling */
@media (max-height:520px){html{scroll-snap-type:y proximity}}