:root{
  --bg:#070707;--bg2:#0b0b0b;--panel:#101010;--panel2:#141414;
  --line:#292929;--text:#eeeae4;--muted:#928d85;--red:#b10f0f;--red2:#d51d1d
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;overflow-x:hidden}
::selection{background:#8d0c0c;color:white}
#rain{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.28}
.noise{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.vignette{position:fixed;inset:0;z-index:49;pointer-events:none;box-shadow:inset 0 0 160px rgba(0,0,0,.82)}
header,main{position:relative;z-index:1}
.hero{min-height:100vh;padding:28px 6vw 35px;display:flex;flex-direction:column;justify-content:space-between;border-bottom:1px solid var(--line);background:radial-gradient(circle at 70% 35%,rgba(126,0,0,.15),transparent 26%),linear-gradient(rgba(6,6,6,.5),rgba(6,6,6,.97))}
nav{display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{font-family:"Cormorant Garamond",serif;font-size:30px;color:white;text-decoration:none;border:1px solid #444;padding:7px 12px;font-weight:700}
.navlinks{display:flex;gap:27px}
.navlinks a{color:#a09b95;text-decoration:none;text-transform:uppercase;font-size:11px;letter-spacing:.13em}
.navlinks a:hover{color:white}
.thin{border:1px solid #3c3c3c;background:transparent;color:#999;padding:10px 13px;cursor:pointer;font-size:10px;letter-spacing:.12em}
.hero-copy{max-width:1100px;margin:85px 0 70px 7vw}
.micro,.section-head>span,.section-head>div>span{font-size:10px;letter-spacing:.23em;color:#817b74;text-transform:uppercase}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif}
h1{font-size:clamp(65px,10.7vw,155px);line-height:.78;margin:22px 0 35px;letter-spacing:-.045em;font-weight:600}
h1 em{font-style:normal;color:var(--red2);text-shadow:0 0 28px rgba(210,0,0,.22)}
.hero-copy>p{max-width:760px;color:#b8b3ac;line-height:1.6;font-size:clamp(18px,2vw,26px)}
.actions{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.btn{min-height:48px;border:1px solid #3c3c3c;padding:0 20px;display:inline-flex;align-items:center;color:#ddd;text-decoration:none;font-size:11px;letter-spacing:.12em;font-weight:700}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn:hover{border-color:#888}.btn.red:hover{background:#d01818}
.statusbar{display:flex;gap:16px;align-items:center;color:#67625d;font-size:9px;letter-spacing:.17em}
.statusbar i{height:1px;background:#2f2f2f;flex:1}

.section{padding:105px 7vw;border-bottom:1px solid #1e1e1e}
.section.dark{background:#090909}
.section-head{max-width:790px;margin-bottom:50px}
.section-head.wide{max-width:none;display:flex;justify-content:space-between;align-items:end;gap:35px}
.section-head h2{font-size:clamp(47px,6vw,78px);margin:8px 0 10px;font-weight:600}
.section-head p{color:#8d8881;line-height:1.7;margin:0}
.searchbox input{width:min(330px,75vw);background:#101010;border:1px solid #333;color:#ddd;padding:14px 15px;outline:none}
.searchbox input:focus{border-color:#6c6c6c}
.lore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.lore-grid article{min-height:220px;border:1px solid var(--line);background:#0d0d0d;padding:27px}
.lore-grid b{font-size:11px;color:#6e6963;letter-spacing:.18em}
.lore-grid h3{font-size:31px;margin:24px 0 8px}
.lore-grid p{color:#85817b;line-height:1.65;font-size:13px}
.quote{margin-top:18px;border:1px solid #3b1717;background:linear-gradient(130deg,#100909,#0c0c0c);padding:50px}
.quote small{color:#755e5a;letter-spacing:.2em}
.quote p{font-family:"Cormorant Garamond",serif;font-size:clamp(32px,5vw,66px);margin:15px 0 0}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:25px}
.filter{background:#101010;border:1px solid #292929;color:#777;padding:10px 13px;cursor:pointer;font-size:10px;letter-spacing:.11em}
.filter:hover,.filter.active{color:white;border-color:#666;background:#171717}
.scene-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.scene{min-height:260px;background:#101010;border:1px solid var(--line);padding:22px;cursor:pointer;text-align:left;color:#ddd;display:flex;flex-direction:column;transition:.2s}
.scene:hover{transform:translateY(-4px);border-color:#555;background:#131313}
.scene .top{display:flex;justify-content:space-between;color:#625e59;font-size:10px;letter-spacing:.14em}
.scene h3{font-size:29px;margin:35px 0 8px;line-height:1}
.scene p{color:#77736e;font-size:12px;line-height:1.55;margin:0}
.scene .tag{margin-top:auto;padding-top:18px;color:#8c8882;font-size:10px}
.scene[data-cat="TERROR"]{border-color:#391717}
.scene[data-cat="FINAL"]{border-color:#512020}
.scene[data-cat="307"] h3,.scene[data-cat="TERROR"] h3{color:#eee3e3}

.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#282828;border:1px solid #282828}
.step{background:#0c0c0c;padding:32px;min-height:230px}
.step b{color:#6a655f;font-size:10px;letter-spacing:.18em}
.step h3{font-size:34px;margin:26px 0 10px}
.step p{font-size:13px;line-height:1.65;color:#807b75}
.map-section{background:#080808}
.building{max-width:1100px;margin:0 auto;border:1px solid #323232;background:#111;padding:12px}
.floor{min-height:105px;border-bottom:1px solid #303030;display:grid;grid-template-columns:130px repeat(10,1fr);gap:6px;align-items:stretch;padding:7px}
.floor:last-child{border-bottom:0}
.floor>span{display:flex;align-items:center;padding:10px;color:#67625d;font-size:10px;letter-spacing:.14em}
.floor>div{border:1px solid #2f2f2f;background:#0a0a0a;display:flex;align-items:center;justify-content:center;color:#5f5b56;font-size:11px}
.floor.danger .apt307{border-color:#751111;background:#180a0a;color:#d8b8b8;box-shadow:inset 0 0 30px rgba(160,0,0,.15)}
.floor.utility{grid-template-columns:130px repeat(3,1fr)}
.floor.basement{grid-template-columns:130px repeat(3,1fr);background:#0a0a0a}
.route{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin-top:25px;color:#6e6963;font-size:10px;letter-spacing:.12em}
.route b{color:#3e3b38}
.ending{text-align:center;padding:160px 20px 180px;background:#050505}
.ending small{letter-spacing:.26em;color:#555}
.ending h2{font-size:clamp(110px,20vw,290px);line-height:.78;margin:25px 0;color:#ae0f0f}
.ending p{letter-spacing:.45em;color:#5c5852}

.modal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.86);display:none;align-items:center;justify-content:center;padding:20px}
.modal.show{display:flex}
.modal-card{width:min(900px,100%);max-height:88vh;overflow:auto;background:#0e0e0e;border:1px solid #404040;padding:38px;position:relative;box-shadow:0 30px 100px #000}
.x{position:absolute;right:18px;top:14px;background:none;border:0;color:#777;font-size:31px;cursor:pointer}
.modal-top{display:flex;gap:15px;align-items:center;color:#777;font-size:10px;letter-spacing:.16em}
#mNum{font-family:"Cormorant Garamond",serif;font-size:40px;color:#c6c1bb}
.modal-card>h2{font-size:57px;margin:10px 0}
.modal-card>p{color:#96918b;line-height:1.7}
.modal-columns{display:grid;grid-template-columns:1fr 1fr;gap:35px;border-top:1px solid #2a2a2a;margin-top:28px;padding-top:25px}
.modal-columns h4{font-size:10px;letter-spacing:.17em;color:#6f6a64}
.modal-columns ul{padding-left:18px;color:#918c86;line-height:1.75;font-size:13px}
.modal-columns p{color:#918c86;line-height:1.7;font-size:13px}
.terror{border-top:1px solid #2b2b2b;margin-top:25px;padding-top:18px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.12em;color:#666}
.terror b{color:#c7b5b2}
.notification{position:fixed;right:24px;bottom:24px;z-index:90;width:min(360px,calc(100vw - 48px));background:#0f0f0f;border:1px solid #551414;padding:17px 19px;transform:translateY(160%);transition:.4s;box-shadow:0 20px 60px #000}
.notification.show{transform:translateY(0)}
.notification small{display:block;font-size:9px;letter-spacing:.16em;color:#725f5b;margin-bottom:7px}
.notification strong{font-family:"Cormorant Garamond",serif;font-size:24px}

.glitch{animation:glitch .16s 5}
@keyframes glitch{25%{transform:translate(-4px,2px)}50%{transform:translate(5px,-2px)}75%{transform:translate(-2px,-3px)}}
@media(max-width:1050px){.scene-grid{grid-template-columns:repeat(3,1fr)}.lore-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){
  .navlinks{display:none}.hero-copy{margin-left:0}.section-head.wide{display:block}.searchbox{margin-top:20px}
  .scene-grid{grid-template-columns:repeat(2,1fr)}.timeline{grid-template-columns:repeat(2,1fr)}
  .floor{grid-template-columns:100px repeat(5,1fr);min-height:130px}.floor>span{grid-row:span 2}
  .modal-columns{grid-template-columns:1fr}
}
@media(max-width:560px){
  .hero,.section{padding-left:20px;padding-right:20px}h1{font-size:62px}
  .lore-grid,.scene-grid,.timeline{grid-template-columns:1fr}.quote{padding:30px 24px}
  .scene{min-height:220px}.statusbar{font-size:8px}
  .floor{grid-template-columns:75px repeat(2,1fr);min-height:200px}.floor>span{grid-row:span 5}
  .floor.utility,.floor.basement{grid-template-columns:75px 1fr}
  .floor.utility>span,.floor.basement>span{grid-row:span 3}
  .modal-card{padding:28px 22px}.modal-card>h2{font-size:42px}
}