:root{--serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;--sans:"Jost","Helvetica Neue",Arial,sans-serif;--heavy:"Inter",Helvetica,Arial,sans-serif;--paper:#d3d6d4;--ink:#0a0a0a;--cream:#f3e6c8;--red:#ff3a12;--green:#7dffc6;--amber:#ffb35c;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--paper)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;color:var(--ink);font-family:var(--sans);overflow-x:hidden;
 background:var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
body::before{content:"";position:fixed;left:50%;top:0;bottom:0;width:1px;background:rgba(120,120,120,.45);z-index:6;pointer-events:none}
/* film grain, stepped like step-printed frames */
.grain{position:fixed;inset:-50%;z-index:9;pointer-events:none;opacity:.18;mix-blend-mode:overlay;animation:g .8s steps(6) infinite;
 background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes g{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
/* red edge strip + letterbox bars */
.edge{position:fixed;right:0;top:0;bottom:0;width:16px;background:var(--red);z-index:10;display:flex;align-items:center;justify-content:center}
.edge span{writing-mode:vertical-rl;font:400 7px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.bar{position:fixed;left:0;right:16px;z-index:8;background:#000;display:flex;justify-content:space-between;align-items:center;padding:0 3vw;font:300 10px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#c9b88f}
.bar.t{top:0;height:calc(26px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px)}
.bar.b{bottom:0;height:calc(26px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
.poster{position:relative;min-height:100vh;min-height:100svh;overflow:hidden}
.poster>*{position:absolute}
.lbl{font:300 10px/1.3 var(--sans);letter-spacing:.06em}
/* gradients between black and paper */
.fade{height:32vh}
.down{background:linear-gradient(#000,transparent)}
.up{background:linear-gradient(transparent,#000)}
.fade{position:relative;z-index:2}
/* mirrored micro-type */
.mir{left:3vw;right:calc(3vw + 16px);display:flex;justify-content:space-between;gap:1rem;font:9px/1.2 var(--serif);font-style:italic;text-transform:uppercase;letter-spacing:.04em;transform:scaleX(-1);z-index:4;white-space:nowrap;overflow:hidden}
/* heavy type with red/green ghosting */
.start,.word{margin:0;font-family:var(--heavy);font-weight:800;line-height:.8;letter-spacing:-.075em;z-index:5;pointer-events:none}
.start{writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(5rem,13vw,13rem);left:3vw;top:calc(26px + 5vh);color:var(--cream);text-shadow:-.03em 0 rgba(255,58,18,.7),.03em 0 rgba(0,255,190,.45),0 0 .4em rgba(255,130,60,.4)}
.word{text-transform:uppercase;font-size:clamp(4rem,19vw,19rem);white-space:nowrap}
.zh{font:300 12px var(--sans);letter-spacing:.35em;z-index:4}
.txt{max-width:270px;z-index:4}
.txt p{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.5vw,23px);line-height:1.15}
.codes{writing-mode:vertical-rl;transform:rotate(180deg);font:800 clamp(11px,1.2vw,17px)/1.25 var(--heavy);letter-spacing:-.03em;text-transform:uppercase;z-index:4}
.codes b{display:block;font-weight:800}
/* ---------- video slots ---------- */
.v{margin:0;outline:none}
.fv{inset:0;z-index:0}
.clip{position:absolute;inset:0;background:radial-gradient(circle at 30% 60%,#3a0a0e,#0b0707);overflow:hidden}
.v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s;filter:saturate(1.5) contrast(1.2) sepia(.3) hue-rotate(-12deg) brightness(.85)}
.v.on video{opacity:1}
.tint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;background:linear-gradient(115deg,rgba(190,15,25,.65),rgba(0,110,85,.55))}
.ht{position:absolute;inset:0;pointer-events:none;background:radial-gradient(#000 38%,transparent 42%) 0 0/3px 3px;mix-blend-mode:multiply;opacity:.3}
.vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.65)),linear-gradient(to top,rgba(0,0,0,.6),transparent 40%)}
.v.on .clip{cursor:pointer}
.empty{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;text-align:center;font:300 10px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#b9a77d}
.v.on .empty{display:none}
.empty label{border:1px solid #8a7a58;padding:6px 14px;border-radius:99px;cursor:pointer;color:var(--cream)}
.empty input{display:none}
/* controls */
.big{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;border:1px solid rgba(243,230,200,.75);background:rgba(0,0,0,.35);color:var(--cream);font-size:18px;padding:0 0 0 4px;cursor:pointer;z-index:8;backdrop-filter:blur(4px)}
.v.on.paused .big{display:block}
.big:hover,.big:focus-visible{background:var(--red);border-color:var(--red);color:#000}
.ctrl{display:none;position:absolute;left:0;right:16px;bottom:26px;align-items:center;gap:16px;padding:34px calc(3vw) 14px 3vw;background:linear-gradient(transparent,rgba(0,0,0,.8));z-index:8;font:300 10px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--cream);opacity:.6;transition:opacity .3s}
.v.on .ctrl{display:flex}
.v:hover .ctrl,.v:focus-within .ctrl{opacity:1}
@media(hover:none){.ctrl{opacity:1}}
.ctrl button{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:8px 0;white-space:nowrap}
.ctrl button:hover,.ctrl button:focus-visible{color:var(--red);outline:none}
.time{min-width:96px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.seek{flex:1;min-width:60px;-webkit-appearance:none;appearance:none;height:2px;margin:0;cursor:pointer;outline:none;background:linear-gradient(to right,var(--red) var(--p,0%),rgba(243,230,200,.3) var(--p,0%))}
.seek::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--red);border:0}
.seek::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--red);border:0}
.v:focus-visible .clip{box-shadow:inset 0 0 0 2px var(--red)}
/* hero (black, video) */
.p0{color:var(--cream)}
.p0 .m1{top:calc(26px + 2vh)}.p0 .m2{bottom:130px}
.p0 .stmt{right:calc(6vw + 16px);top:calc(26px + 9vh);width:min(46vw,640px);margin:0;font:italic 500 clamp(22px,2.9vw,46px)/1.02 var(--serif);letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.65);z-index:4}
.p0 .tag{left:26vw;bottom:190px;z-index:4}
.p0 .codes{left:calc(50% + 2vw);bottom:190px}
.p0>*:not(.v),.p2>*:not(.v){pointer-events:none}
/* 01 on paper */
.p1{min-height:115vh}
.p1 .m1{top:3vh}.p1 .m2{bottom:calc(26px + 3vh)}
.p1 .word{left:-1vw;top:7vh;text-shadow:-.03em 0 rgba(255,58,18,.75),.03em 0 rgba(0,163,122,.6)}
.p1 .zh{left:6vw;top:calc(7vh + 16vw)}
.p1 .txt{left:6vw;bottom:16vh}
.door{right:calc(5vw + 16px);top:24vh;width:34vw;aspect-ratio:4/5;overflow:hidden;z-index:2;background:radial-gradient(ellipse at 50% 100%,#2c2c2c,#0b0b0b 70%)}
.door::before{content:"";position:absolute;left:34%;top:22%;width:32%;height:64%;background:linear-gradient(160deg,#ffe3a8,#ffb35c 40%,#2e8f7a);box-shadow:0 0 70px 12px rgba(255,179,92,.45)}
.door::after{content:"";position:absolute;left:58%;top:20%;width:14%;height:66%;background:#1b1b1b;clip-path:polygon(0 4%,100% 0,100% 100%,0 96%);border-left:1px solid #555}
.door span{position:absolute;right:10px;bottom:8px;font:300 10px var(--sans);letter-spacing:.3em;color:var(--cream);z-index:3}
/* 02 over video 2 */
.p2{color:var(--cream)}
.p2 .word{left:5vw;top:calc(26px + 8vh);color:var(--cream);text-shadow:-.03em 0 rgba(255,58,18,.75),.03em 0 rgba(0,255,190,.5),0 0 .4em rgba(255,130,60,.35)}
.p2 .zh{left:6vw;top:calc(26px + 8vh + 16vw)}
.p2 .txt{right:calc(6vw + 16px);bottom:150px;text-shadow:0 1px 6px #000}
.p2 .m1{top:calc(26px + 2vh)}
/* 03 on paper, amber lamp */
.p3{min-height:115vh}
.p3 .m1{top:3vh}.p3 .m2{bottom:calc(26px + 3vh)}
.lamp{right:-10vw;top:30vh;width:52vw;aspect-ratio:1;border-radius:50%;filter:blur(3px);z-index:1;background:radial-gradient(circle,#ffe3a8 0,#ffb35c 24%,rgba(255,90,40,.6) 48%,transparent 70%)}
.p3 .word{left:-1vw;top:7vh;font-size:clamp(3rem,13.4vw,14rem);text-shadow:-.03em 0 rgba(255,58,18,.75),.03em 0 rgba(0,163,122,.6)}
.p3 .zh{left:6vw;top:calc(7vh + 12vw)}
.p3 .txt{left:6vw;bottom:16vh}
.foot{position:relative;z-index:2;background:#000;color:#b9a77d;display:flex;justify-content:space-between;padding:6vh calc(3vw + 16px) calc(26px + 6vh) 3vw;font:300 10px var(--sans);letter-spacing:.25em;text-transform:uppercase}
@media(max-width:760px){
 .poster{min-height:0;display:flex;flex-direction:column;gap:20px;padding:12vh 6vw 14vh}
 .p0,.p2{min-height:100vh;min-height:100svh;justify-content:flex-end;padding-bottom:150px}
 .poster>*{position:relative!important;inset:auto!important;transform:none!important;width:100%!important;max-width:none!important;margin:0}
 .poster>.fv{position:absolute!important;inset:0!important;height:100%!important}
 .start{writing-mode:horizontal-tb;font-size:26vw}
 .word,.p3 .word{font-size:20vw!important}
 .codes{writing-mode:horizontal-tb}
 .p0 .stmt{font-size:24px}
 .door,.lamp{width:72%!important;margin-left:auto!important}
 .ctrl{flex-wrap:wrap;gap:6px 14px}
 .seek{order:-1;flex-basis:100%}
 .time{min-width:0;margin-right:auto}
}
@media(prefers-reduced-motion:reduce){.grain{animation:none}}