/* =========================================================
   TEMPLE — the home page: boot log → threshold → the dark courtyard.
   Flashlight over two plates (dark / lit), framed hotspots, CCTV HUD.
   Each room opens a page of the site (see js/temple.js).
   ========================================================= */
:root{--void: #050505;--ink: #0b0b0b;--soot: #121212;--concrete: #807c75;--concrete-dk: #2b2a28;--concrete-lt: #a9a59c;--bone: #dcd7ca;--bone-dim: rgba(220, 215, 202, .52);--bone-faint: rgba(220, 215, 202, .16);--bone-ghost: rgba(220, 215, 202, .06);--blood: #a1070d;--blood-hot: #d3141c;--blood-glow: rgba(190, 14, 20, .45);--chrome: linear-gradient(180deg, #f3f0e9 0%, #c9c5bc 38%, #6c6a66 50%, #b3afa7 62%, #e9e5dc 100%);--display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;--mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;--t-micro: 9.5px;--t-small: 10.5px;--t-body: 12px;--track-wide: .32em;--track-mid: .16em;--gutter: clamp(16px, 2.4vw, 32px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-t: env(safe-area-inset-top, 0px);--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in: cubic-bezier(.7, 0, .84, 0);--z-scene: 1;--z-hud: 20;--z-rail: 25;--z-crt: 50;--z-whisper: 60;--z-flash: 70;--z-transition: 80;--z-cursor: 90}
*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
html,body,#root{height:100%}
html{background:var(--void);color-scheme:dark;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{background:var(--void);color:var(--bone);font-family:var(--mono);font-size:var(--t-body);line-height:1.5;letter-spacing:.04em;text-transform:uppercase;overflow:hidden;overscroll-behavior:none;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
img,svg,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;cursor:pointer;-webkit-appearance:none;appearance:none}
:focus{outline:none}
:focus-visible{outline:1px solid var(--bone);outline-offset:4px}
::selection{background:var(--blood);color:var(--bone)}
.app{position:fixed;inset:0;overflow:hidden}
.dim{color:var(--bone-dim)}
.blood{color:var(--blood);-webkit-text-fill-color:var(--blood)}
.caret{display:inline-block;width:.6em;height:1.05em;margin-left:.15em;vertical-align:-.15em;background:var(--bone);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}
}
html.has-cursor,html.has-cursor *{cursor:none!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.2s!important}
}
.crt{position:fixed;inset:0;z-index:var(--z-crt);pointer-events:none}
.crt__grain{position:absolute;inset:-50%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");opacity:.075;animation:grain .9s steps(6) infinite;will-change:transform}
@keyframes grain{0%{transform:translate(0)}
20%{transform:translate(-7%,4%)}
40%{transform:translate(5%,-9%)}
60%{transform:translate(-3%,7%)}
80%{transform:translate(8%,2%)}
to{transform:translate(-4%,-5%)}
}
.crt__scan{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);opacity:.55}
.crt__scan:after{content:"";position:absolute;left:0;right:0;height:14vh;top:-20vh;background:linear-gradient(180deg,transparent,rgba(220,215,202,.035) 40%,rgba(220,215,202,.06) 50%,transparent);animation:tracking 14s linear infinite}
@keyframes tracking{0%,62%{transform:translateY(0)}
to{transform:translateY(150vh)}
}
.crt__vignette{position:absolute;inset:0;background:radial-gradient(ellipse 120% 95% at 50% 48%,transparent 45%,rgba(0,0,0,.55) 80%,rgba(0,0,0,.9) 100%)}
.glitch{position:relative;display:inline-block}
.glitch:before,.glitch:after{content:attr(data-text);position:absolute;inset:0;opacity:0;pointer-events:none;background:none}
.glitch.is-glitching{animation:gl-shake .16s steps(2) infinite}
.glitch.is-glitching:before{opacity:1;color:var(--blood-hot);-webkit-text-fill-color:var(--blood-hot);clip-path:inset(14% 0 56% 0);transform:translate(-.045em);animation:gl-a .16s steps(2) infinite}
.glitch.is-glitching:after{opacity:1;color:var(--bone);-webkit-text-fill-color:var(--bone);clip-path:inset(64% 0 9% 0);transform:translate(.06em);animation:gl-b .16s steps(2) infinite}
@keyframes gl-shake{50%{transform:translate(.01em,-.01em) skew(-2deg)}
}
@keyframes gl-a{50%{clip-path:inset(38% 0 40% 0);transform:translate(.05em)}
}
@keyframes gl-b{50%{clip-path:inset(4% 0 80% 0);transform:translate(-.07em)}
}
.sigil{color:var(--bone);overflow:visible}
.sigil__eye{transform-box:fill-box;transform-origin:center;animation:blink 11s infinite}
.sigil--watching .sigil__iris{animation:wander 13s ease-in-out infinite}
.sigil--closed .sigil__iris{opacity:0}
.sigil--closed .sigil__eye{animation:none;transform:scaleY(.12)}
@keyframes blink{0%,95%,to{transform:scaleY(1)}
96.5%{transform:scaleY(.08)}
}
@keyframes wander{0%,to{transform:translate(0)}
20%{transform:translate(-7px)}
30%{transform:translate(-7px)}
55%{transform:translate(6px,1px)}
70%{transform:translate(6px,1px)}
}
.heartbeat{width:100%;height:100%}
.cursor{display:none;position:fixed;inset:0;pointer-events:none;z-index:var(--z-cursor)}
html.has-cursor .cursor{display:block}
.cursor__ring,.cursor__dot{position:fixed;left:0;top:0;width:0;height:0;will-change:transform}
.cursor__ring:before,.cursor__dot:before{content:"";position:absolute;left:0;top:0;transform:translate(-50%,-50%);transition:width .35s var(--ease-out),height .35s var(--ease-out),border-color .3s,background .3s,border-radius .3s,opacity .3s}
.cursor__ring:before{width:26px;height:26px;border:1px solid rgba(220,215,202,.35);border-radius:50%}
.cursor__dot:before{width:3px;height:3px;background:var(--bone);border-radius:50%}
.cursor__label{position:absolute;left:20px;top:8px;font-size:var(--t-micro);letter-spacing:var(--track-mid);color:var(--bone-dim);white-space:nowrap}
.cursor[data-state=interactive] .cursor__ring:before{width:46px;height:46px;border-color:var(--bone)}
.cursor[data-state=audio] .cursor__ring:before{width:18px;height:18px;border-color:var(--bone)}
.cursor[data-state=secret] .cursor__ring:before{width:34px;height:34px;border-style:dashed;border-color:#dcd7ca80}
.cursor[data-state=danger] .cursor__ring:before{width:2px;height:44px;border:0;border-radius:0;background:var(--blood-hot);box-shadow:0 0 12px var(--blood-glow)}
.cursor[data-state=danger] .cursor__dot:before{opacity:0}
.cursor.is-down .cursor__ring:before{width:14px;height:14px}
.cursor.is-away{opacity:0}
.sound{display:inline-flex;align-items:center;gap:8px;padding:8px 4px 8px 10px;font-size:var(--t-small);letter-spacing:var(--track-mid);color:var(--bone-dim);pointer-events:auto;transition:color .3s}
.sound:hover{color:var(--bone)}
.sound__bars{display:inline-flex;align-items:flex-end;gap:2px;height:10px}
.sound__bars i{width:2px;height:100%;background:currentColor;transform-origin:bottom;animation:bar 1.1s ease-in-out infinite}
.sound__bars i:nth-child(2){animation-delay:-.4s}
.sound__bars i:nth-child(3){animation-delay:-.7s}
.sound__bars i:nth-child(4){animation-delay:-.2s}
.sound.is-muted .sound__bars i{animation:none;transform:scaleY(.2)}
@keyframes bar{0%,to{transform:scaleY(.25)}
50%{transform:scaleY(1)}
}
.secret-trigger{position:absolute;z-index:3;background:transparent}
.secret-trigger.st--round{border-radius:50%}
.secret-trigger.is-hit:after{content:"";position:absolute;inset:-30%;border:1px solid var(--bone-faint);border-radius:inherit;animation:ping .7s var(--ease-out) forwards}
@keyframes ping{0%{transform:scale(.4);opacity:1}
to{transform:scale(1.4);opacity:0}
}
.door-btn{position:relative;display:inline-block;padding:17px 38px;border:1px solid rgba(220,215,202,.38);font-size:var(--t-body);letter-spacing:.4em;color:var(--bone);overflow:hidden;transition:border-color .4s}
.door-btn__edge{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--bone);transform:translate(-50%);opacity:.55;transition:width .7s var(--ease-out),opacity .3s}
.door-btn__text{position:relative;mix-blend-mode:difference;padding-left:.4em}
.door-btn:hover,.door-btn:focus-visible{border-color:var(--bone)}
.door-btn:hover .door-btn__edge,.door-btn:focus-visible .door-btn__edge{width:100%;opacity:1}
.door-btn.is-disabled{opacity:.35;cursor:not-allowed}
.door-btn.is-disabled .door-btn__edge{display:none}
.whisper{position:fixed;left:50%;bottom:calc(15vh + var(--safe-b));z-index:var(--z-whisper);transform:translate(-50%);display:flex;gap:12px;align-items:baseline;max-width:min(92vw,640px);padding:11px 16px;background:#050505c7;border-left:2px solid var(--blood);font-size:var(--t-body);letter-spacing:.2em;animation:whisper-in .5s var(--ease-out);backdrop-filter:blur(2px)}
.whisper__tag{color:var(--blood-hot);font-size:var(--t-micro);flex:none}
@keyframes whisper-in{0%{opacity:0;transform:translate(-50%,6px)}
}
.flash{position:fixed;inset:0;z-index:var(--z-flash);display:grid;place-content:center;justify-items:center;gap:18px;padding:var(--gutter);text-align:center;background:#000;animation:flash-in .3s steps(3) both}
.flash__sigil{color:var(--bone);opacity:.9}
.flash__text{font-family:var(--display);font-weight:900;font-size:clamp(38px,8.5vw,128px);line-height:.9;letter-spacing:.01em;max-width:14ch}
.flash__sub{color:var(--blood-hot);letter-spacing:.5em;font-size:var(--t-small)}
@keyframes flash-in{0%{background:var(--blood)}
40%{background:#000}
60%{background:#1a0000}
to{background:#000}
}
.transition{position:fixed;inset:0;z-index:var(--z-transition);background:#000;pointer-events:all;display:grid;place-items:center}
.transition__line{width:100%;height:2px;background:var(--bone);box-shadow:0 0 18px #ffffffb3;opacity:0}
.transition--fade.is-in{animation:t-fade-in .9s var(--ease-in) both}
.transition--fade.is-out{animation:t-fade-out .9s var(--ease-out) both}
.transition--crt.is-in{animation:t-fade-in .65s steps(4) both}
.transition--crt.is-in .transition__line{animation:t-line .65s var(--ease-in) both}
.transition--crt.is-out{animation:t-fade-out .65s steps(5) both}
.transition--cut.is-in{animation:t-cut .38s steps(1) both}
.transition--cut.is-out{animation:t-fade-out .38s steps(2) both}
@keyframes t-fade-in{0%{opacity:0}
to{opacity:1}
}
@keyframes t-fade-out{0%{opacity:1}
to{opacity:0}
}
@keyframes t-line{0%{opacity:0;transform:scaleY(60)}
45%{opacity:1;transform:scale(1)}
85%{opacity:1;transform:scaleX(.02)}
to{opacity:0;transform:scaleX(0)}
}
@keyframes t-cut{0%{opacity:1;background:var(--blood)}
12%{background:#000}
to{opacity:1;background:#000}
}
.loader{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:22px;padding:var(--gutter);padding-bottom:calc(var(--gutter) + 8vh + var(--safe-b));background:#000;font-size:var(--t-small);letter-spacing:var(--track-mid);color:var(--bone-dim);transition:opacity .6s}
.loader.is-ready{opacity:0}
.loader__log{width:min(100%,460px)}
.loader__line{display:flex;gap:.7em;animation:line-in .12s steps(2)}
.loader__prompt{color:var(--bone-faint)}
.loader__status{margin-left:auto;color:var(--bone)}
.loader__status.is-bad{color:var(--blood-hot)}
.loader__bar{display:flex;gap:0;font-size:10px;letter-spacing:0;color:var(--bone)}
.loader__rest{color:var(--bone-faint)}
.loader__pct{margin-left:14px;letter-spacing:var(--track-mid);color:var(--bone-dim)}
@keyframes line-in{0%{opacity:0}
}
.entrance{position:fixed;inset:0;display:grid;place-items:center;padding:var(--gutter);background:radial-gradient(ellipse 70% 55% at 50% 55%,#0e0b0b,#050505 55%,#020202)}
.entrance__beat{position:absolute;left:0;right:0;top:50%;height:120px;transform:translateY(-50%);opacity:0;transition:opacity 2.6s}
.entrance.step-1 .entrance__beat{opacity:.7}
.entrance.step-2 .entrance__beat,.entrance.step-3 .entrance__beat,.entrance.step-4 .entrance__beat{opacity:.28}
.entrance__center{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.entrance__sigil{margin-bottom:clamp(14px,2.5vh,26px);opacity:0;transition:opacity 2s .8s}
.entrance.step-2 .entrance__sigil,.entrance.step-3 .entrance__sigil,.entrance.step-4 .entrance__sigil{opacity:.85}
.entrance__title{position:relative;font-family:var(--display);font-weight:900;font-size:clamp(64px,17.5vw,280px);white-space:nowrap;line-height:.8;letter-spacing:-.005em;opacity:0;filter:blur(14px);transform:scale(1.05);transition:opacity 2.4s var(--ease-out),filter 2.4s var(--ease-out),transform 3.2s var(--ease-out)}
.entrance__title .glitch{background:var(--chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding:0 .02em}
.entrance__title:after{content:"";position:absolute;left:50%;top:-12%;bottom:-14%;width:2px;margin-left:-1px;background:var(--blood);box-shadow:0 0 14px var(--blood-glow);transform:scaleY(0);transform-origin:top;transition:transform 1.3s var(--ease-out) 1.6s}
.entrance.step-2 .entrance__title,.entrance.step-3 .entrance__title,.entrance.step-4 .entrance__title{opacity:1;filter:blur(0);transform:none}
.entrance.step-2 .entrance__title:after,.entrance.step-3 .entrance__title:after,.entrance.step-4 .entrance__title:after{transform:scaleY(1)}
.entrance__phrase{min-height:1.6em;margin-top:clamp(20px,4vh,38px);font-size:clamp(10.5px,1.1vw,13px);letter-spacing:.42em;color:var(--bone-dim);padding-left:.42em}
.entrance__door{margin-top:clamp(34px,7vh,64px);display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity 1.6s,transform 1.6s var(--ease-out)}
.entrance.step-4 .entrance__door{opacity:1;transform:none;pointer-events:auto}
.entrance__hint{margin-top:18px;font-size:var(--t-micro);letter-spacing:.3em;color:var(--bone-faint)}
.entrance__corner{position:absolute;bottom:calc(var(--gutter) + var(--safe-b));font-size:var(--t-micro);letter-spacing:var(--track-mid);color:var(--bone-faint)}
.entrance__corner--l{left:var(--gutter)}
.entrance__corner--r{right:var(--gutter)}
.room{position:fixed;inset:0;display:grid;grid-template-rows:auto 1fr;padding:var(--gutter);padding-top:calc(var(--gutter) + var(--safe-t));background:radial-gradient(ellipse 60% 50% at 50% 50%,#101010,#040404 80%);animation:room-in 1.4s var(--ease-out)}
@keyframes room-in{0%{opacity:0;transform:scale(1.04)}
}
.room__ghost{position:absolute;right:-4vw;bottom:-14vh;font-family:var(--display);font-weight:900;font-size:min(78vw,110vh);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(220,215,202,.07);pointer-events:none}
.room__head{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center}
.room__back{padding:8px 0;font-size:var(--t-small);letter-spacing:var(--track-mid);color:var(--bone-dim);transition:color .3s}
.room__back:hover{color:var(--bone)}
.room__body{position:relative;z-index:1;align-self:center;justify-self:center;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:640px}
.room__sigil{opacity:.8;margin-bottom:26px}
.room__num{font-size:var(--t-small);letter-spacing:.5em;color:var(--bone-dim)}
.room__title{margin-top:6px;font-family:var(--display);font-weight:900;font-size:clamp(64px,13vw,190px);line-height:.85}
.room__offering{margin-top:22px;font-size:var(--t-small);letter-spacing:.34em;color:var(--bone-dim)}
.room__whisper{margin-top:34px;min-height:3em;max-width:34ch;font-size:13px;letter-spacing:.14em;line-height:1.7}
.room__sealed,.room__game .dim{margin-top:40px;font-size:var(--t-micro);letter-spacing:.3em}
.room__game{margin-top:36px;display:flex;flex-direction:column;align-items:center}
.room__game .dim{margin-top:16px}
.temple{position:fixed;inset:0;overflow:hidden;touch-action:none;--r: clamp(150px, 19vw, 300px)}
.temple__void{position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 50% 38%,#16181b,#0b0c0d 45%,#040404 85%)}
.temple__void:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 45% at 58% 20%,rgba(210,215,225,.22),transparent 70%);opacity:0;animation:lightning 19s infinite}
.temple__stage{position:absolute;left:50%;top:50%;width:min(79.5vh,150vw);width:min(79.5svh,150vw);aspect-ratio:896 / 1195;transform:translate(-50%,-50%) translate3d(calc(var(--px, 0) * -16px),calc(var(--py, 0) * -10px),0);will-change:transform}
.temple__plates{position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 13%,#000 87%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 9%,#000 78%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 13%,#000 87%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 9%,#000 78%,transparent 100%);mask-composite:intersect}
.temple__plates picture,.temple__plate{position:absolute;inset:0;width:100%;height:100%}
.temple__plate{object-fit:cover;pointer-events:none}
.temple__plate--lit{-webkit-mask-image:radial-gradient(circle at var(--lx, 60%) var(--ly, 62%),#000 0,rgba(0,0,0,.82) calc(var(--r) * .3),rgba(0,0,0,.3) calc(var(--r) * .68),transparent var(--r));mask-image:radial-gradient(circle at var(--lx, 60%) var(--ly, 62%),#000 0,rgba(0,0,0,.82) calc(var(--r) * .3),rgba(0,0,0,.3) calc(var(--r) * .68),transparent var(--r));transition:filter .6s}
.temple.is-red .temple__plate--lit{filter:sepia(1) saturate(5.5) hue-rotate(-42deg) brightness(.72) contrast(1.15)}
.temple__plate--flash{opacity:0;animation:lightning 19s infinite}
@keyframes lightning{0%,86%{opacity:0}
86.4%{opacity:.55}
86.9%{opacity:.06}
87.5%{opacity:.42}
89.5%,to{opacity:0}
}
.temple__doorlight{position:absolute;pointer-events:none;mix-blend-mode:screen;animation:flicker 9s steps(1) infinite}
.temple__doorlight--low{left:55%;top:59%;width:11%;height:20%;background:radial-gradient(ellipse 30% 40% at 50% 42%,rgba(255,246,228,.5),rgba(255,240,215,.12) 55%,transparent 75%)}
.temple__doorlight--high{left:55%;top:45%;width:7.5%;height:8.5%;background:radial-gradient(ellipse 40% 45% at 50% 50%,rgba(255,246,228,.38),transparent 75%);animation-delay:-3.3s}
@keyframes flicker{0%,to{opacity:1}
41%{opacity:1}
41.5%{opacity:.3}
42%{opacity:1}
42.6%{opacity:.15}
43.2%{opacity:.9}
77%{opacity:1}
77.4%{opacity:.55}
77.8%{opacity:1}
}
.temple.is-red .temple__doorlight{opacity:.25;animation:none}
.temple__watcher{position:absolute;left:56.1%;top:46.6%;width:4.4%;height:5.6%;overflow:hidden;pointer-events:none}
.temple__watcher i{position:absolute;bottom:-4%;left:0;width:46%;height:96%;background:radial-gradient(circle at 50% 17%,#000 0 15%,transparent 16.5%),radial-gradient(ellipse 50% 60% at 50% 88%,#000 0 58%,transparent 60%);filter:blur(.6px);opacity:.92;transform:translate(-120%);animation:watcher 27s infinite}
@keyframes watcher{0%,58%{transform:translate(-120%)}
62%{transform:translate(60%)}
71%{transform:translate(60%)}
72.5%{transform:translate(62%) scaleX(.94)}
76%,to{transform:translate(260%)}
}
.hotspot{position:absolute;z-index:4;color:var(--bone)}
.hotspot__frame{position:absolute;inset:0;opacity:0;transform:scale(1.12);transition:opacity .4s,transform .6s var(--ease-out);--c: currentColor;background:linear-gradient(var(--c),var(--c)) top left / 10px 1px no-repeat,linear-gradient(var(--c),var(--c)) top left / 1px 10px no-repeat,linear-gradient(var(--c),var(--c)) top right / 10px 1px no-repeat,linear-gradient(var(--c),var(--c)) top right / 1px 10px no-repeat,linear-gradient(var(--c),var(--c)) bottom left / 10px 1px no-repeat,linear-gradient(var(--c),var(--c)) bottom left / 1px 10px no-repeat,linear-gradient(var(--c),var(--c)) bottom right / 10px 1px no-repeat,linear-gradient(var(--c),var(--c)) bottom right / 1px 10px no-repeat}
.hotspot__mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:9px;letter-spacing:.1em;color:var(--bone);opacity:.32;white-space:nowrap;animation:mark 5.5s ease-in-out infinite;transition:opacity .4s}
.hotspot__mark:before{content:"+";margin-right:4px;opacity:.8}
@keyframes mark{0%,to{opacity:.18}
50%{opacity:.45}
}
.hotspot.is-red{color:var(--blood-hot)}
.hotspot__label{position:absolute;top:50%;display:flex;flex-direction:column;gap:4px;width:max-content;max-width:260px;padding:10px 14px;background:#050505b8;text-align:left;opacity:0;pointer-events:none;transition:opacity .35s,transform .5s var(--ease-out)}
.hotspot__label--right{left:calc(100% + 18px);transform:translate(-8px,-50%);border-left:1px solid currentColor}
.hotspot__label--left{right:calc(100% + 18px);transform:translate(8px,-50%);border-right:1px solid currentColor;text-align:right}
.hotspot__label b{font-family:var(--display);font-weight:800;font-size:26px;line-height:.95;letter-spacing:.02em;color:var(--bone)}
.hotspot__label i{font-style:normal;font-size:var(--t-small);letter-spacing:.14em;color:var(--bone-dim)}
.hotspot__label em{font-style:normal;font-size:var(--t-micro);letter-spacing:.3em;color:var(--bone-faint)}
.hotspot.is-red .hotspot__label em{color:var(--blood-hot)}
.hotspot.is-focus .hotspot__frame{opacity:.85;transform:none}
.hotspot.is-focus .hotspot__mark{opacity:0;animation:none}
.hotspot.is-focus .hotspot__label{opacity:1;transform:translateY(-50%)}
.hotspot.is-hidden .hotspot__frame{--c: var(--bone-dim)}
.temple__fog{position:absolute;left:0;right:0;bottom:0;height:48%;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 45%);mask-image:linear-gradient(180deg,transparent,#000 45%)}
.temple__fog i{position:absolute;inset:0 -40%;background:radial-gradient(ellipse 22% 32% at 20% 70%,rgba(150,152,156,.09),transparent 70%),radial-gradient(ellipse 26% 28% at 55% 80%,rgba(150,152,156,.08),transparent 70%),radial-gradient(ellipse 20% 30% at 85% 65%,rgba(150,152,156,.07),transparent 70%);animation:fog 70s linear infinite alternate}
.temple__fog i+i{animation-duration:110s;animation-direction:alternate-reverse;opacity:.7;top:20%}
@keyframes fog{0%{transform:translate(-12%)}
to{transform:translate(12%)}
}
.temple.is-arriving .temple__stage{animation:arrive 3.6s var(--ease-out) both}
@keyframes arrive{0%{opacity:0;transform:translate(-50%,-50%) scale(1.14)}
to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.temple.is-leaving .temple__stage{transform-origin:var(--zx) var(--zy);animation:descend 1.1s var(--ease-in) forwards}
@keyframes descend{0%{transform:translate(-50%,-50%) scale(1);opacity:1}
to{transform:translate(-50%,-50%) scale(3.6);opacity:.2}
}
.temple.is-leaving .hud,.temple.is-leaving .rail,.temple.is-leaving .temple__fog{opacity:0;transition:opacity .5s}
.temple.is-shaking .temple__stage{animation:shake .45s steps(6)}
@keyframes shake{0%,to{transform:translate(-50%,-50%)}
20%{transform:translate(calc(-50% - 5px),calc(-50% + 2px))}
40%{transform:translate(calc(-50% + 4px),calc(-50% - 2px))}
60%{transform:translate(calc(-50% - 3px),-50%)}
80%{transform:translate(calc(-50% + 2px),calc(-50% + 1px))}
}
.hud{position:absolute;inset:0;z-index:var(--z-hud);pointer-events:none;font-size:var(--t-small);letter-spacing:var(--track-mid);line-height:1.65}
.hud>div{position:absolute}
.hud__tl{top:calc(var(--gutter) + var(--safe-t));left:var(--gutter);display:flex;gap:12px;align-items:flex-start}
.hud__tr{top:calc(var(--gutter) + var(--safe-t) - 8px);right:var(--gutter)}
.hud__bl{bottom:calc(var(--gutter) + var(--safe-b));left:var(--gutter)}
.hud__br{bottom:calc(var(--gutter) + var(--safe-b));right:var(--gutter);text-align:right;color:var(--bone-dim)}
.hud__sigil{margin-top:1px}
.rec{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;background:var(--blood-hot);box-shadow:0 0 8px var(--blood-glow);animation:caret 1.4s steps(1) infinite}
.hud__caption{position:absolute;top:14vh;left:50%;transform:translate(-50%);padding:6px 12px;background:#0000008c;white-space:nowrap;font-size:var(--t-small);letter-spacing:.24em}
.hud__corners i{position:absolute;width:18px;height:18px;border:0 solid var(--bone-faint)}
.hud__corners i:nth-child(1){top:10px;left:10px;border-top-width:1px;border-left-width:1px}
.hud__corners i:nth-child(2){top:10px;right:10px;border-top-width:1px;border-right-width:1px}
.hud__corners i:nth-child(3){bottom:10px;left:10px;border-bottom-width:1px;border-left-width:1px}
.hud__corners i:nth-child(4){bottom:10px;right:10px;border-bottom-width:1px;border-right-width:1px}
.hud__corners{position:absolute;inset:0}
.rail{position:absolute;left:0;right:0;bottom:0;z-index:var(--z-rail);padding:40px 16px calc(14px + var(--safe-b));background:linear-gradient(180deg,transparent 0%,rgba(4,4,4,.88) 38%,#040404 100%)}
.rail__list{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.rail__chip{width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 0 8px;border:1px solid var(--bone-faint);color:var(--bone-dim);transition:border-color .3s,color .3s,background .3s}
.rail__chip b{font-family:var(--display);font-weight:800;font-size:20px;line-height:1;color:var(--bone)}
.rail__chip span{font-size:8px;letter-spacing:.12em;white-space:nowrap}
.rail__chip.is-red b{color:var(--blood-hot)}
.rail__chip.is-on{border-color:var(--bone);background:var(--bone-ghost);color:var(--bone)}
.rail__chip.is-on.is-red{border-color:var(--blood-hot)}
.rail__card{display:grid;grid-template-columns:1fr auto;align-items:end;gap:2px 14px;margin-bottom:12px;padding:12px 14px;border-left:2px solid var(--bone);background:#0c0c0ce6;animation:whisper-in-up .4s var(--ease-out)}
.rail__card.is-red{border-left-color:var(--blood-hot)}
@keyframes whisper-in-up{0%{opacity:0;transform:translateY(8px)}
}
.rail__num{grid-column:1 / -1;font-size:var(--t-small);letter-spacing:var(--track-mid)}
.rail__teaser{font-family:var(--display);font-weight:800;font-size:22px;line-height:1;letter-spacing:.02em}
.rail__enter{padding:9px 14px;border:1px solid var(--bone);font-size:var(--t-small);letter-spacing:.24em;white-space:nowrap}
.rail__card.is-red .rail__enter{border-color:var(--blood-hot);color:var(--blood-hot)}
@media(pointer:coarse){.temple{--r: clamp(120px, 34vw, 240px)}
.temple__stage{top:calc(50% - 62px);left:calc(50% + 5vw);width:min(122vw,calc((100vh - 170px)*.8));width:min(122vw,calc((100svh - 170px)*.8))}
.hotspot__label{display:none}
.hotspot__mark{font-size:8px}
.hud__bl,.hud__br{display:none}
.hud__caption{top:auto;bottom:190px;font-size:9px;letter-spacing:.18em}
.whisper{bottom:calc(150px + var(--safe-b))}
.temple~.whisper{bottom:calc(150px + var(--safe-b))}
.hud__corners{display:none}
}
@media(max-width:420px){.hud{font-size:9.5px}
}


/* ---- site additions ---- */
[hidden]:not([hidden=until-found i]) { display: none !important; }
a.hotspot { display: block; text-decoration: none; }
.hotspot__label .hotspot__page { color: var(--bone-dim); }
.hotspot.is-red .hotspot__label .hotspot__page { color: var(--blood-hot); }
noscript { position: fixed; inset: 0; display: grid; place-content: center; gap: 12px; text-align: center; padding: 16px; }
noscript a { color: var(--bone); }


/* ---- a room with two pages behind it (Blood Room → The Album / Merch) ---- */
.choice { position: absolute; left: 50%; top: 50%; z-index: var(--z-whisper); transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(92vw, 460px); padding: 26px 22px 18px;
  background: rgba(5, 5, 5, .9); border-left: 2px solid var(--bone); text-align: center; backdrop-filter: blur(2px);
  animation: whisper-in-up .4s var(--ease-out); }
.choice.is-red { border-left-color: var(--blood-hot); }
.choice__num { font-size: var(--t-small); letter-spacing: var(--track-mid); color: var(--bone-dim); }
.choice__q { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: .02em; }
.choice__doors { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.choice__doors .door-btn { padding: 15px 26px; text-decoration: none; }
.choice__close { margin-top: 4px; padding: 8px; font-size: var(--t-micro); letter-spacing: .3em; color: var(--bone-faint); transition: color .3s; }
.choice__close:hover { color: var(--bone); }

/* ---- socials: bottom centre of the courtyard, in the CCTV style ----
   solid brand marks in bone; on hover a surveillance frame locks on and the mark bleeds red */
.hud__social { position: absolute; left: 50%; bottom: calc(var(--gutter) + var(--safe-b)); transform: translateX(-50%); display: flex; gap: clamp(10px, 1.6vw, 22px); pointer-events: auto; }
.hud__social a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px; color: var(--bone-dim); text-decoration: none; transition: color .3s; }
.hud__social svg { width: 21px; height: 21px; transition: transform .4s var(--ease-out), filter .3s, color .3s; }
.hud__social span { font-size: var(--t-micro); letter-spacing: var(--track-mid); white-space: nowrap; }
.hud__frame { position: absolute; inset: 0; opacity: 0; transform: scale(1.15); transition: opacity .3s, transform .5s var(--ease-out); --c: var(--bone);
  background: linear-gradient(var(--c), var(--c)) top left / 7px 1px no-repeat, linear-gradient(var(--c), var(--c)) top left / 1px 7px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 7px 1px no-repeat, linear-gradient(var(--c), var(--c)) top right / 1px 7px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 7px 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 1px 7px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 7px 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 1px 7px no-repeat; }
.hud__social a:hover, .hud__social a:focus-visible { color: var(--bone); }
.hud__social a:hover .hud__frame, .hud__social a:focus-visible .hud__frame { opacity: .8; transform: none; }
.hud__social a:hover svg, .hud__social a:focus-visible svg { color: var(--blood-hot); transform: scale(1.12); filter: drop-shadow(0 0 8px var(--blood-glow)); }
/* phones: the room bar owns the bottom, so the socials sit under the camera label, icons only */
@media (pointer: coarse) {
  .hud__social { bottom: auto; top: calc(var(--gutter) + var(--safe-t) + 40px); gap: 10px; }
  .hud__social span { display: none; }
  .hud__social a { padding: 8px; }
}

/* ---- the password at the threshold ---- */
.gate { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gate[hidden] { display: none; }
.door-btn[hidden] { display: none; }
.gate__ask { font-size: var(--t-small); letter-spacing: .42em; padding-left: .42em; color: var(--bone-dim); }
.gate__in { width: 150px; padding: 10px 0 8px; background: transparent; border: 0; border-bottom: 1px solid rgba(220, 215, 202, .45); color: var(--bone);
  font: 500 26px/1 var(--mono); letter-spacing: .6em; text-indent: .6em; text-align: center; outline: none; caret-color: var(--blood-hot); user-select: text; -webkit-user-select: text; }
.gate__in::placeholder { color: var(--bone-faint); }
.gate__in:focus { border-bottom-color: var(--bone); }
.gate__msg { min-height: 1.4em; font-size: var(--t-micro); letter-spacing: .3em; color: var(--blood-hot); }
.gate.is-wrong .gate__in { border-bottom-color: var(--blood-hot); color: var(--blood-hot); animation: gate-shake .42s steps(6); }
.gate.is-open .gate__in { border-bottom-color: var(--bone); color: var(--bone); text-shadow: 0 0 12px rgba(220, 215, 202, .6); }
@keyframes gate-shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.gate__row { display: flex; align-items: flex-end; gap: 10px; }
.gate__go { width: 40px; height: 40px; border: 1px solid rgba(220, 215, 202, .45); color: var(--bone); font-size: 18px; letter-spacing: 0; transition: border-color .3s, color .3s, background .3s; }
.gate__go:hover, .gate__go:focus-visible { border-color: var(--bone); background: var(--bone-ghost); }
.gate.is-wrong .gate__go { border-color: var(--blood-hot); color: var(--blood-hot); }
/* narrow phones: the copyright gets the whole bottom line */
@media (max-width: 560px) { .entrance__corner--r { display: none; } .entrance__corner--l { right: var(--gutter); text-align: center; } }

/* ---- phone turned sideways: the temple takes the full height, the room menu becomes a column on the right ---- */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  .temple { --rail-w: clamp(190px, 30vw, 250px); }
  .temple__stage { top: 50%; left: calc((100vw - var(--rail-w)) / 2); width: min(calc(100vw - var(--rail-w)), 78vh); width: min(calc(100vw - var(--rail-w)), 78svh); }
  .rail { left: auto; top: 0; bottom: 0; right: 0; width: var(--rail-w); display: flex; flex-direction: column; justify-content: flex-end;
    padding: 48px max(12px, env(safe-area-inset-right)) calc(10px + var(--safe-b)) 12px;
    background: linear-gradient(90deg, transparent 0%, rgba(4,4,4,.88) 22%, #040404 100%); }
  .rail__list { grid-template-columns: 1fr; gap: 4px; }
  .rail__chip { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 5px 10px; }
  .rail__chip b { font-size: 15px; min-width: 22px; text-align: left; }
  .rail__chip span { font-size: 8.5px; }
  .rail__card { margin-bottom: 8px; padding: 8px 10px; gap: 2px 8px; grid-template-columns: 1fr; }
  .rail__teaser { font-size: 15px; }
  .rail__enter { padding: 7px 10px; justify-self: start; }
  .hud__tr { right: calc(var(--rail-w) + 8px); }
  .hud__caption { bottom: 14px; left: calc((100vw - var(--rail-w)) / 2); }
  .whisper, .temple ~ .whisper { bottom: calc(12px + var(--safe-b)); left: calc((100vw - var(--rail-w)) / 2); max-width: calc(100vw - var(--rail-w) - 24px); }
}
/* the entrance, sideways: tighter spacing so the hint clears the copyright line */
@media (orientation: landscape) and (max-height: 500px) {
  .entrance__sigil { margin-bottom: 8px; }
  .entrance__hint { margin-top: 10px; }
  .entrance__corner { bottom: calc(8px + var(--safe-b)); }
}