:root{--bg:#050607;--bg2:#0b0e10;--ink:#d9d4c7;--dim:#8f8a7e;--blood:#c3271f;--blood2:#ff3b2f;--ghost:#cfe6ff;--paper:#e9dfc6;--ease:cubic-bezier(.22,1,.36,1)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(19px,1.35vw,22px);line-height:1.6;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--blood2);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:#000;color:#fff;padding:10px 16px}
.skip:focus{left:12px}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(18px,4.5vw,60px)}
.wrap.narrow{max-width:760px}
.center{text-align:center}

/* atmosphere layers */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{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)}}
.fog{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.fog i{position:absolute;left:-50%;width:200%;height:60%;bottom:-15%;background:radial-gradient(40% 50% at 30% 60%,rgba(190,205,215,.10),transparent 70%),radial-gradient(35% 45% at 70% 40%,rgba(190,205,215,.08),transparent 70%);filter:blur(20px);animation:fog 38s linear infinite}
.fog i:nth-child(2){bottom:20%;opacity:.6;animation-duration:55s;animation-direction:reverse}
.fog i:nth-child(3){bottom:-25%;opacity:.8;animation-duration:27s}
@keyframes fog{from{transform:translateX(0)}to{transform:translateX(25%)}}
.power{position:fixed;inset:0;z-index:150;background:#000;pointer-events:none;opacity:0}
html.blackout .power{opacity:1}

/* header */
.top{position:fixed;inset:0 0 auto;z-index:100;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px clamp(16px,4vw,48px);background:linear-gradient(#050607ee,#05060700)}
.mark{font-family:Creepster,cursive;font-size:clamp(22px,2.2vw,30px);letter-spacing:.04em;color:var(--blood2);text-decoration:none;text-shadow:0 0 18px rgba(255,59,47,.45)}
.top nav{display:flex;gap:clamp(12px,2vw,28px);align-items:center}
.top nav a{font-family:"Special Elite",monospace;font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:#e9e4d6;padding:10px 0}
.top nav a:hover{color:var(--blood2)}
.top .book{border:1px solid var(--blood);padding:9px 16px!important;color:#fff!important;background:rgba(195,39,31,.25)}
@media (max-width:760px){.top nav a:not(.book){display:none}}

/* hero */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:1fr 1.05fr;align-items:end;gap:0;overflow:hidden;background:#000}
.hero-img{position:relative;height:100svh}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 0;filter:contrast(1.05) brightness(.95)}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,#000 100%),linear-gradient(0deg,#000 0%,transparent 30%)}
.hero-copy{position:relative;z-index:3;padding:0 clamp(18px,4vw,60px) clamp(40px,10vh,110px)}
.kicker{font-family:"Special Elite",monospace;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);margin:0 0 14px}
.title{font-family:Creepster,cursive;font-weight:400;font-size:clamp(64px,8.6vw,150px);line-height:.92;margin:0;color:#eee6d6;letter-spacing:.02em;text-shadow:0 0 30px rgba(255,255,255,.12)}
.title span{display:block;color:var(--blood2);text-shadow:0 0 26px rgba(255,59,47,.55)}
.lede{font-size:clamp(22px,2vw,30px);margin:22px 0 0;max-width:24ch;color:#e5dfd0}
.lede em{color:var(--ghost)}
.enter{display:inline-flex;gap:12px;align-items:center;margin-top:34px;font-family:"Special Elite",monospace;letter-spacing:.2em;text-transform:uppercase;font-size:14px;text-decoration:none;color:#fff;border-bottom:1px solid var(--blood);padding-bottom:6px}
.enter span{animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;align-items:end}
  .hero-img{position:absolute;inset:0;height:auto}
  .hero-img::after{background:linear-gradient(0deg,#000 8%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.1) 75%)}
  .hero-copy{padding-top:60svh}
}
.flick{animation:flick 6s infinite}
@keyframes flick{0%,18%,22%,24%,60%,100%{opacity:1}19%,23%{opacity:.25}61%{opacity:.6}}

/* chapters */
.chapter{position:relative;padding:clamp(80px,12vw,170px) 0;z-index:3}
.num{font-family:Creepster,cursive;font-size:clamp(28px,3vw,40px);color:var(--blood);margin:0 0 6px}
h2{font-family:"IM Fell English",Georgia,serif;font-weight:400;font-size:clamp(36px,4.6vw,68px);line-height:1.05;margin:0 0 26px;color:#efe8d8}
p{margin:0 0 1.1em}
.big{font-family:"IM Fell English",Georgia,serif;font-size:clamp(26px,2.6vw,38px);line-height:1.25;color:#efe8d8}
.big em{color:var(--blood2);font-style:italic}
.blood{color:var(--blood2)!important}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,90px);align-items:center}
@media (max-width:860px){.two{grid-template-columns:1fr}}

/* mirror + clipping */
.mirror{margin:0}
.frame{position:relative;padding:22px;border-radius:50% 50% 12px 12px/34% 34% 12px 12px;background:linear-gradient(145deg,#3a2c1b,#1a120a 45%,#4a3820);box-shadow:inset 0 0 0 3px #5b4526,0 30px 60px -20px #000,0 0 60px rgba(195,39,31,.12)}
.clip{background:var(--paper);color:#2a241a;padding:26px 22px 20px;border-radius:44% 44% 6px 6px/26% 26% 6px 6px;font-family:"Special Elite",monospace;filter:sepia(.5) contrast(1.05);transform:rotate(-1.5deg);box-shadow:inset 0 0 50px rgba(80,50,10,.45)}
.clip .paper{text-align:center;font-size:11px;letter-spacing:.3em;border-bottom:2px solid #2a241a;padding-bottom:6px;margin-bottom:10px}
.clip .head{font-family:"IM Fell English",serif;font-size:clamp(28px,2.6vw,40px);line-height:1;text-align:center;margin:8px 0}
.clip .sub{text-align:center;font-size:13px;margin-bottom:14px}
.clip .col{font-size:13.5px;line-height:1.55;margin:0 0 8px}
.redact{background:#1d1a14;color:#1d1a14;letter-spacing:-1px}
.mirror figcaption{font-family:"Special Elite",monospace;font-size:12px;color:var(--dim);margin-top:14px;text-align:center}

/* tv flicker */
.tv{position:relative;max-width:1100px;margin:clamp(50px,7vw,90px) auto 0;padding:0 clamp(18px,4vw,60px)}
.tv img{width:100%;border-radius:6px;filter:brightness(.55)}
html.lights .tv img{filter:brightness(1.05) saturate(.9)}
.static{position:absolute;inset:0 clamp(18px,4vw,60px);border-radius:6px;opacity:0;mix-blend-mode:screen;background:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 3px)}
html.lights .static{opacity:.6}
.tvlabel{position:absolute;left:calc(clamp(18px,4vw,60px) + 16px);bottom:10px;margin:0;font-family:"Special Elite",monospace;font-size:12px;letter-spacing:.3em;color:#9fb;opacity:.7}

/* the boy */
.boy{min-height:110svh;display:flex;align-items:center;overflow:hidden}
.boy-bg,.wonder-bg,.stay-bg{position:absolute;inset:0;z-index:-1}
.boy-bg img,.wonder-bg img,.stay-bg img{width:100%;height:100%;object-fit:cover;opacity:.32}
.boy-bg::after,.wonder-bg::after,.stay-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 50%,transparent,#050607 80%)}
.ghost{position:absolute;right:clamp(4%,12vw,18%);top:18%;width:clamp(110px,14vw,190px);height:auto;mix-blend-mode:screen;opacity:0;filter:blur(1px) brightness(1.2);pointer-events:none}
.whisper{font-family:"IM Fell English",serif;font-style:italic;font-size:clamp(46px,7vw,110px);line-height:1.1;color:var(--ghost);text-shadow:0 0 24px rgba(207,230,255,.6);margin:30px 0 0}
.whisper span{display:inline-block;opacity:0;filter:blur(8px)}

/* camera */
.cam{position:relative;max-width:900px;margin:clamp(30px,4vw,50px) auto;border:1px solid #2a2f33;overflow:hidden;background:#000}
.cam img{width:100%;filter:grayscale(1) contrast(1.25) brightness(.8) sepia(.2) hue-rotate(60deg)}
.cam .orbs,.wonder .orbs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 4px);pointer-events:none;animation:roll 7s linear infinite}
@keyframes roll{to{background-position:0 400px}}
.hud{position:absolute;inset:10px 14px auto;display:flex;justify-content:space-between;gap:10px;font-family:"Special Elite",monospace;font-size:clamp(11px,1.2vw,14px);color:#e8ffe8;text-shadow:0 0 6px #000;letter-spacing:.08em}
.rec{color:#ff4b4b;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.alert{position:absolute;left:50%;bottom:22px;transform:translate(-50%,30px);opacity:0;background:rgba(10,10,10,.85);border:1px solid var(--blood2);padding:12px 20px;text-align:center;font-family:"Special Elite",monospace;color:#fff;box-shadow:0 0 30px rgba(255,59,47,.5);white-space:nowrap}
.alert b{display:block;color:var(--blood2);font-weight:400;letter-spacing:.12em;text-transform:uppercase;font-size:clamp(13px,1.6vw,18px)}
.alert small{font-size:11px;color:#bbb;letter-spacing:.1em}
.cam.on .alert{opacity:1;transform:translate(-50%,0);transition:all .5s var(--ease);animation:alertpulse 1.6s ease-in-out infinite}
@keyframes alertpulse{50%{box-shadow:0 0 60px rgba(255,59,47,.9)}}

.wonder{overflow:hidden}

/* polaroids */
.polaroids{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);margin-top:30px}
.pol{margin:0;background:#e9e4d6;padding:12px 12px 44px;box-shadow:0 20px 40px -14px #000;position:relative}
.pol:nth-child(odd){transform:rotate(-2.2deg)}.pol:nth-child(even){transform:rotate(1.8deg)}
.pol img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:sepia(.25) contrast(1.05)}
.pol figcaption{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-family:"Special Elite",monospace;font-size:14px;color:#2b261d}
.pol::before{content:"";position:absolute;top:-10px;left:50%;width:70px;height:22px;margin-left:-35px;background:rgba(220,210,180,.6);transform:rotate(-3deg)}
@media (max-width:760px){.polaroids{grid-template-columns:1fr 1fr}}

/* finale */
.stay{min-height:90svh;display:flex;align-items:center;overflow:hidden}
.finale{font-family:Creepster,cursive;font-size:clamp(46px,7vw,110px);line-height:1;color:#efe8d8;margin:30px 0 18px;letter-spacing:.02em}
.last{font-size:clamp(22px,2vw,30px);color:var(--ghost)}
.ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:30px 0}
.btn{display:inline-flex;align-items:center;min-height:52px;padding:14px 30px;border:1px solid #d9d4c7;font-family:"Special Elite",monospace;font-size:14px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:#fff;transition:background .4s,box-shadow .4s}
.btn:hover{background:#ffffff14}
.btn.blood{border-color:var(--blood2);background:var(--blood);box-shadow:0 0 30px rgba(255,59,47,.4)}
.btn.blood:hover{background:var(--blood2)}
.small{font-size:15px;color:var(--dim)}
.small a{color:#e5dfd0}

.foot{position:relative;z-index:3;border-top:1px solid #1c2024;padding:30px clamp(18px,4vw,60px);text-align:center;font-family:"Special Elite",monospace;font-size:13px;color:var(--dim)}
.foot p{margin:6px 0}

.js .reveal{opacity:0;transform:translateY(18px);filter:blur(4px)}
@media (prefers-reduced-motion:reduce){
  .grain,.fog i,.flick,.rec,.scan,.enter span{animation:none!important}
  .js .reveal{opacity:1;transform:none;filter:none}
  .whisper span{opacity:1;filter:none}
  .ghost{opacity:.35}
  .cam .alert{opacity:1;transform:translate(-50%,0)}
}
.ghost{-webkit-mask-image:radial-gradient(ellipse 48% 50% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 48% 50% at 50% 50%,#000 55%,transparent 100%)}
.pol img{filter:sepia(.25) contrast(1.05) brightness(1.35)}
.top{background:linear-gradient(#050607,#050607cc 60%,#05060700)}
.pol img{height:auto}
.btn.red{border-color:var(--blood2);background:var(--blood);box-shadow:0 0 30px rgba(255,59,47,.4);color:#fff}
.btn.red:hover{background:var(--blood2)}
.cam img{filter:grayscale(1) contrast(1.25) brightness(1.15) sepia(.2) hue-rotate(60deg)}
@media (max-width:900px){
  .hero{display:block;min-height:0}
  .hero-img{position:relative;inset:auto;height:auto}
  .hero-img img{height:auto;aspect-ratio:1320/1947}
  .hero-img::after{background:linear-gradient(0deg,#000 0%,transparent 25%)}
  .hero-copy{padding:10px 18px 60px}
  .hero .title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}