/* Last Light: The Apartment — site
   Everything is dark; the pointer is the lantern. Switching it off turns every card and every resident. */

@font-face{font-family:"Cormorant";src:url(../fonts/cg-500.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant";src:url(../fonts/cg-500-ext.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant";src:url(../fonts/cg-500i.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant";src:url(../fonts/cg-500i-ext.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant";src:url(../fonts/cg-600.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant";src:url(../fonts/cg-600-ext.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Courier Prime";src:url(../fonts/cp-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(../fonts/cp-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(../fonts/cp-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plex Cond";src:url(../fonts/plex-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Cond";src:url(../fonts/plex-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --night:#07080b; --night-2:#0b0d13; --night-3:#121520;
  --paper:#e9e1cf; --paper-2:#d8ccb2; --dim:#8e8676; --dimmer:#5d584f;
  --amber:#f2c14e; --amber-2:#ffdc8a; --rust:#9a3a22; --glass:#cfeedd; --ink:#1b1712;
  --serif:"Cormorant",Georgia,"Times New Roman",serif;
  --type:"Courier Prime","Courier New",monospace;
  --ui:"Plex Cond","Arial Narrow",system-ui,sans-serif;
  --gut:clamp(16px,4vw,56px);
  --r:clamp(150px,22vw,300px);           /* lantern radius */
  --px:50vw; --py:50vh;                  /* lantern position (viewport) */
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html{background:var(--night);-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--night);color:var(--paper);font:400 17px/1.6 var(--ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-gated{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--amber);color:var(--ink)}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.eyebrow{font:italic 400 15px/1.2 var(--type);color:var(--dim);margin:0 0 20px}
.display{font:500 clamp(46px,7.4vw,112px)/.92 var(--serif);letter-spacing:-.015em;margin:0 0 34px;color:var(--paper)}
.display em{font-style:italic;color:var(--amber)}
body.dark .display em{color:#9fb6d6}
p{margin:0 0 1em}
.sun{color:var(--amber)} .moon{color:#9fb6d6}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.when-dark{display:none} body.dark .when-dark{display:inline} body.dark .when-lit{display:none}

/* ------------------------------------------------------------------ grain, lamp, toast */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.075;mix-blend-mode:overlay;background-size:180px 180px;animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.lamp{position:fixed;left:0;top:0;z-index:120;pointer-events:none;width:0;height:0;transform:translate(var(--px),var(--py))}
.lamp i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--amber-2);box-shadow:0 0 18px 6px rgba(242,193,78,.55),0 0 80px 30px rgba(242,193,78,.12);transition:transform .3s var(--ease),background .3s,box-shadow .3s}
body.dark .lamp i{background:transparent;box-shadow:inset 0 0 0 1px rgba(159,182,214,.6);transform:scale(.8)}
.js body:not(.has-fine) .lamp{display:none}
@media (hover:hover) and (pointer:fine){ .has-fine, .has-fine a, .has-fine button{cursor:none} }
.toast{position:fixed;left:50%;bottom:28px;z-index:95;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:rgba(10,11,15,.92);border:1px solid #2a2c33;padding:10px 16px;font:400 13px/1.3 var(--type);color:var(--paper);transition:.4s var(--ease);white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ------------------------------------------------------------------ gate */
.gate{position:fixed;inset:0;z-index:100;background:#030304;display:grid;place-items:center;transition:opacity 1.1s ease .2s,visibility 0s 1.3s}
.gate.is-done{opacity:0;visibility:hidden}
.gate__inner{display:flex;flex-direction:column;align-items:center;gap:30px;padding:24px;text-align:center}
.gate__logo{width:min(380px,74vw);height:auto;opacity:.86;filter:brightness(.7)}
.strike{position:relative;width:120px;height:120px;display:grid;place-items:center;border-radius:50%;touch-action:none;-webkit-user-select:none;user-select:none}
.strike__ring{position:absolute;inset:0;transform:rotate(-90deg)}
.strike__ring circle{fill:none;stroke:#26262a;stroke-width:1.5}
.strike__ring .strike__fill{stroke:var(--amber);stroke-dasharray:352;stroke-dashoffset:352;stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.strike__match{position:relative;width:4px;height:44px;background:linear-gradient(#c9a678,#8a6a45);border-radius:2px;transform:rotate(18deg)}
.strike__match i{position:absolute;left:-3px;top:-8px;width:10px;height:12px;border-radius:50% 50% 45% 45%;background:#8f2f1f}
.strike.is-lit .strike__match i{background:radial-gradient(circle at 50% 70%,#fff6d0,#ffc95a 40%,#e0662a 70%,transparent 72%);width:18px;height:30px;left:-7px;top:-30px;filter:blur(.3px);animation:flame .12s infinite alternate}
@keyframes flame{to{transform:scale(1.06,.95) translateX(.6px)}}
.strike__label{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);white-space:nowrap;font:400 13px/1 var(--type);letter-spacing:.08em;color:var(--paper)}
.gate__hint{font:400 12px/1.4 var(--type);color:var(--dimmer);margin:28px 0 0}
.gate__quiet{font:400 12px/1 var(--type);color:var(--dim);text-decoration:underline;text-underline-offset:4px;margin-top:-14px}
.gate__flare{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(255,220,150,.9),rgba(242,160,60,.25) 25%,transparent 60%)}
.gate.is-done .gate__flare{animation:flare 1.2s ease-out}
@keyframes flare{0%{opacity:0}12%{opacity:1}100%{opacity:0}}

/* ------------------------------------------------------------------ bar */
.bar{position:fixed;inset:0 0 auto;z-index:70;display:flex;align-items:center;justify-content:space-between;padding:18px var(--gut);pointer-events:none;transition:opacity .6s}
.bar > *{pointer-events:auto}
body.is-gated .bar{opacity:0}
.bar__mark{text-decoration:none}
.bar__word{font:600 19px/1 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--paper)}
.bar__word b{font-weight:600;color:var(--amber);text-shadow:0 0 12px rgba(242,193,78,.8)}
body.dark .bar__word b{color:var(--paper);text-shadow:none;opacity:.45}
.intercom{display:flex;gap:6px;padding:6px 14px;border-radius:4px;background:linear-gradient(170deg,#3a3020,#1f1910 60%,#2c2417);box-shadow:inset 0 1px 0 rgba(255,230,180,.18),0 10px 24px -10px #000;position:relative}
.intercom::before,.intercom::after{content:"";position:absolute;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#bfa572,#4b3d24)}
.intercom::before{left:5px}.intercom::after{right:5px}
.ic{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);padding:2px}
.ic__btn{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#d6c08e,#7a6237 60%,#3d301a);box-shadow:0 0 0 1.5px #14100a;transition:box-shadow .3s,background .3s}
.ic[aria-pressed="true"] .ic__btn{background:radial-gradient(circle at 45% 40%,#fff1c4,#f2c14e 45%,#b9801f);box-shadow:0 0 0 1.5px #14100a,0 0 10px rgba(242,193,78,.8)}
.ic__slot{display:flex;align-items:center;gap:7px;height:24px;padding:0 9px;background:#e6decb;box-shadow:inset 0 1px 2px rgba(0,0,0,.5);font:700 11px/1 var(--type);letter-spacing:.04em;white-space:nowrap}
.ic:hover .ic__slot{background:#f3ecdb}
.lamp-switch__pips{display:flex;gap:2px}
.lamp-switch__pips i{width:3px;height:10px;border-radius:1px;background:#9a3a22}
.lamp-switch__pips i.spent{background:#b9b0a0}
.ic.sputter{animation:sputter .5s steps(2) 2}
@keyframes sputter{50%{opacity:.35}}
.lang__en,.lang__tr{color:#9d9486}.lang__en{margin-right:2px}
html[lang="en"] .lang__en,html[lang="tr"] .lang__tr{color:var(--ink)}
@media (max-width:720px){.ic--get{display:none}.intercom{padding:5px 10px;gap:4px}.ic__slot{padding:0 6px;font-size:10px}.bar__word{font-size:15px}.bar{padding:14px}}

/* ------------------------------------------------------------------ reveal (lantern mask) */
.reveal{--x:50%;--y:50%;position:relative}
.reveal__lit{-webkit-mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),#000 0,rgba(0,0,0,.92) 35%,rgba(0,0,0,.35) 70%,transparent 100%);mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),#000 0,rgba(0,0,0,.92) 35%,rgba(0,0,0,.35) 70%,transparent 100%);transition:opacity .5s ease}
body.dark .reveal__lit{opacity:0}
.reveal::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle calc(var(--r) * .85) at var(--x) var(--y),rgba(255,186,92,.13),transparent 70%);mix-blend-mode:screen;transition:opacity .5s}
body.dark .reveal::after{opacity:0}
body.flicker .reveal__lit{animation:flick .45s steps(1) 1}
@keyframes flick{0%{opacity:1}15%{opacity:.1}30%{opacity:.9}45%{opacity:0}60%{opacity:1}}

/* ------------------------------------------------------------------ 1 · door */
.door{position:relative;height:280vh}
.door__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#020203}
.door__scene{position:absolute;left:50%;top:50%;width:max(100vw,216.4vh);aspect-ratio:1688/780;transform:translate(-50%,-50%) scale(var(--zoom,1));transform-origin:68.2% 60.6%;will-change:transform}
.door__img{position:absolute;inset:0;width:100%;height:100%}
.door__glass{position:absolute;left:62.7%;top:41%;width:11.3%;height:29.4%;background:radial-gradient(ellipse at 50% 45%,rgba(207,238,221,.55),rgba(207,238,221,.12) 55%,transparent 75%);mix-blend-mode:screen;animation:breathe 5s ease-in-out infinite;pointer-events:none}
.door__glass.off{animation:none;opacity:.05}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:.8}}
.door__open{position:absolute;left:59.775%;bottom:0;width:21.09%;height:72.308%;opacity:var(--open,0);pointer-events:none}
.door__slip{position:absolute;left:64.633%;bottom:4.615%;width:4.917%;height:5.513%;opacity:.0;transition:opacity 2s}
.door.is-late .door__slip{opacity:1}
.door__shade{position:absolute;inset:0;background:radial-gradient(ellipse 55% 45% at 18% 82%,rgba(2,2,3,.75),transparent 70%),linear-gradient(0deg,rgba(2,2,3,.7),transparent 26%);pointer-events:none;opacity:calc(1 - var(--p,0) * 2)}
.door__copy{position:absolute;left:var(--gut);bottom:clamp(90px,16vh,170px);width:min(640px,calc(100% - 2*var(--gut)));opacity:calc(1 - var(--p,0) * 3);transform:translateY(calc(var(--p,0) * -60px))}
.door__title{margin:0 0 26px}
.door__title img{width:min(560px,100%);height:auto;filter:drop-shadow(0 0 30px rgba(0,0,0,.8))}
.door__type{font:400 clamp(16px,1.6vw,20px)/1.55 var(--type);color:var(--paper);min-height:3.2em;margin:0;max-width:30em}
.door__type .caret{display:inline-block;width:.55em;height:1.05em;background:var(--amber);vertical-align:-.15em;margin-left:2px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.door__cue{position:absolute;left:68.2%;bottom:30px;transform:translateX(-50%);opacity:calc(1 - var(--p,0) * 6);pointer-events:none}
.door__cue svg{width:18px;height:30px;fill:#000;stroke:rgba(242,193,78,.35);stroke-width:1;filter:drop-shadow(0 0 6px rgba(242,193,78,.5));animation:keyglow 3.2s ease-in-out infinite}
@keyframes keyglow{0%,100%{filter:drop-shadow(0 0 3px rgba(242,193,78,.25))}50%{filter:drop-shadow(0 0 12px rgba(242,193,78,.75))}}
.door__black{position:absolute;inset:0;background:#000;opacity:var(--black,0);pointer-events:none}

/* ------------------------------------------------------------------ 2 · building */
.bldg{position:relative;background:radial-gradient(ellipse 70% 60% at 62% 52%,#121621,#0a0c12 70%)}
.bldg__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(300px,.8fr) 1.6fr;align-items:center}
.bldg__rooms{grid-column:2;grid-row:1;position:relative;height:100%}
.room{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .9s ease,transform 1.4s var(--ease);transform:scale(1.04)}
.room.is-on{opacity:1;transform:none}
.room__frame{position:relative;width:min(112%,calc(100vh * 1.75));aspect-ratio:1600/739;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,rgba(0,0,0,.6) 78%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,rgba(0,0,0,.6) 78%,transparent 100%)}
.room__frame img{position:absolute;inset:0;width:100%;height:100%}
.bldg__copy{grid-column:1;grid-row:1;padding:0 0 0 var(--gut);position:relative;z-index:2}
.bldg__name{font:500 clamp(44px,6vw,92px)/.95 var(--serif);margin:0 0 22px;min-height:1em}
.bldg__line{font:400 clamp(15px,1.25vw,18px)/1.6 var(--type);color:var(--paper);max-width:24em;min-height:4.8em;margin:0 0 26px}
.bldg__hint{font:400 12px/1.5 var(--type);color:var(--dimmer);max-width:26em}
.bldg__steps > div{height:100vh}
.bldg__count{color:var(--paper)}
.dial{position:absolute;top:auto;bottom:calc(50% + 150px);left:var(--gut);width:150px;z-index:3}
.dial__face{width:100%;height:auto;overflow:visible}
.dial__arc{fill:none;stroke:#3a3426;stroke-width:1}
.dial__ticks text{font:600 12px var(--ui);fill:var(--dimmer);text-anchor:middle;transition:fill .4s}
.dial__ticks text.on{fill:var(--amber)}
.dial__ticks line{stroke:#3a3426;stroke-width:1}
.dial__needle{transform-origin:110px 110px;transition:transform 1.1s cubic-bezier(.3,1.5,.4,1)}
.dial__needle line{stroke:var(--amber);stroke-width:1.5}
.dial__needle circle{fill:#16130d;stroke:var(--amber)}
.dial__floor{display:none}
@media (max-width:760px){ .door__scene{transform:translate(-66%,-50%) scale(var(--zoom,1));width:max(100vw,236vh)} .door__copy{bottom:clamp(70px,12vh,120px)} }
@media (max-width:860px){
  .bldg__stick{grid-template-columns:1fr;grid-template-rows:1.25fr auto;align-items:start}
  .bldg__rooms{grid-column:1;grid-row:1;height:58vh;margin-top:12vh}
  .room__frame{width:150%}
  .bldg__copy{grid-row:2;padding:0 var(--gut)}
  .bldg__line{min-height:6.4em}
  .dial{top:64px;width:150px}
}

/* ------------------------------------------------------------------ 3 · faces */
.faces{position:relative;padding:22vh 0 18vh;background:linear-gradient(var(--night-2),var(--night) 30%)}
.faces__intro{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,80px);max-width:1000px;font-size:19px;color:var(--paper-2)}
.matches{display:grid;gap:10px;align-content:start}
.matches__row{display:flex;gap:14px;height:62px;align-items:flex-end;margin-bottom:14px}
.match{position:relative;width:5px;height:52px;border-radius:2px;background:linear-gradient(#d8b98a,#9b7a50);transform:rotate(-8deg);transform-origin:bottom}
.match:nth-child(2){transform:rotate(-3deg)}.match:nth-child(3){transform:rotate(4deg)}.match:nth-child(4){transform:rotate(9deg)}
.match::before{content:"";position:absolute;left:-3px;top:-7px;width:11px;height:12px;border-radius:50% 50% 45% 45%;background:#8f2f1f;transition:background .6s}
.match::after{content:"";position:absolute;left:-6px;top:-30px;width:17px;height:28px;border-radius:50% 50% 40% 40%;background:radial-gradient(circle at 50% 75%,#fff6d0,#ffc95a 40%,#e0662a 70%,transparent 72%);opacity:0;transform:scale(.4);transform-origin:50% 100%;transition:opacity .2s,transform .2s}
.match.burn::after{opacity:1;transform:scale(1);animation:flame .12s infinite alternate}
.match.spent{background:linear-gradient(#3b342b 0 45%,#9b7a50 45%)}
.match.spent::before{background:#1a1714}
.matches p{margin:0;font:400 16px/1.5 var(--type);color:var(--paper-2)}
.hand{display:flex;justify-content:center;gap:0;padding:12vh var(--gut) 6vh;perspective:1600px;min-height:520px}
.card{--rot:0deg;--lift:0px;--w:clamp(150px,13.2vw,220px);position:relative;width:var(--w);aspect-ratio:5/7.4;margin:0 calc(var(--w) * -.06);transform:translateY(var(--lift)) rotate(var(--rot));transition:transform .6s var(--ease);flex:none;outline:none}
.card:hover,.card:focus-visible{--lift:-34px;z-index:3}
.card__in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.5,0,.2,1)}
.card.is-turned .card__in{transform:rotateY(180deg)}
body.dark .card:not(.is-held) .card__in{transform:rotateY(180deg)}
body.dark .card.is-held .card__in{transform:none}
.cf{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.4)}
.cf--l{background:#e8dfca;color:#1b1712}
.cf--d{background:#16171c;color:#d9d3c4;transform:rotateY(180deg)}
.cf::after{content:"";position:absolute;inset:0;background-image:var(--noise);background-size:120px;opacity:.18;mix-blend-mode:multiply;pointer-events:none}
.cf--d::after{mix-blend-mode:screen;opacity:.08}
.cf__art{position:relative;margin:9px 9px 0;aspect-ratio:420/336;overflow:hidden;border-radius:3px;background:#222}
.cf__art img{width:100%;height:100%;object-fit:cover}
.cf--d .cf__art img{filter:grayscale(.55) brightness(.55) contrast(1.15) hue-rotate(185deg) saturate(1.4)}
.cf__cost{position:absolute;left:6px;top:6px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 var(--type);background:#f3ecdc;color:#1b1712;box-shadow:0 0 0 2px #1b1712}
.cf--d .cf__cost{background:#1b1c22;color:#e9e1cf;box-shadow:0 0 0 2px #6f84a6}
.cf__face{position:absolute;right:6px;top:6px;font:700 10px/1 var(--type);letter-spacing:.14em;padding:5px 7px;border-radius:2px;background:rgba(242,193,78,.92);color:#1b1712}
.cf--d .cf__face{background:rgba(111,132,166,.92);color:#0d0f14}
.cf__name{font:700 clamp(14px,1.25vw,17px)/1.1 var(--type);letter-spacing:.04em;margin:12px 12px 6px}
.cf__text{font:400 clamp(12px,1vw,14px)/1.35 var(--ui);margin:0 12px;flex:1}
.cf__text b{font-weight:600}
.cf__note{font:italic 400 11px/1.35 var(--type);margin:0 12px 12px;opacity:.6}
.faces__tip{font:400 12px/1.5 var(--type);color:var(--dimmer);text-align:center}
@media (max-width:860px){
  .faces__intro{grid-template-columns:1fr}
  .hand{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:8vh var(--gut) 6vh;gap:14px;min-height:0}
  .card{margin:0;--rot:0deg !important;--lift:0px !important;scroll-snap-align:center;--w:64vw;aspect-ratio:5/6.6}
  .card:hover{--lift:0px}
}

/* ------------------------------------------------------------------ 4 · foes */
.foes{padding:16vh 0 18vh;background:var(--night)}
.foes__head{display:grid;grid-template-columns:1.3fr 1fr;align-items:end;gap:40px}
.foes__lede{color:var(--paper-2);font-size:19px;max-width:28em}
.ledger{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:1240px;margin:8vh auto 0;padding:0 var(--gut)}
.foe{position:relative;border-top:1px solid #23242a;border-left:1px solid #23242a;padding:26px 24px 30px;min-height:470px;display:flex;flex-direction:column;overflow:hidden}
.foe:nth-child(3n){border-right:1px solid #23242a}
.foe:nth-last-child(-n+3){border-bottom:1px solid #23242a}
.foe__no{font:400 11px/1 var(--type);letter-spacing:.2em;color:var(--dimmer)}
.foe__fig{position:relative;height:230px;margin:18px 0 10px}
.foe__fig img{position:absolute;inset:0;margin:auto;max-height:100%;width:auto;transition:opacity .7s ease}
.foe__fig .d{opacity:0}
body.dark .foe__fig .l{opacity:0} body.dark .foe__fig .d{opacity:1}
.foe__fig::before{content:"";position:absolute;left:15%;right:15%;bottom:0;height:20px;border-radius:50%;background:radial-gradient(rgba(0,0,0,.7),transparent 70%)}
.foe__glow{position:absolute;left:50%;top:150px;width:360px;height:360px;transform:translate(-50%,-50%);background:radial-gradient(rgba(242,193,78,.13),transparent 65%);transition:opacity .6s;pointer-events:none}
body.dark .foe__glow{background:radial-gradient(rgba(111,132,166,.12),transparent 65%)}
.foe__name{font:500 32px/1 var(--serif);margin:0 0 4px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.foe__hp{font:400 12px/1 var(--type);color:var(--dim);white-space:nowrap}
.foe__look{font:italic 400 14px/1.45 var(--type);color:var(--paper-2);min-height:4.4em;margin:10px 0 18px;position:relative}
.foe__look span{transition:opacity .5s}
.foe__look .d{position:absolute;inset:0;opacity:0}
body.dark .foe__look .l{opacity:0} body.dark .foe__look .d{opacity:1}
.foe__int{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;border:1px solid #2a2b31;border-radius:4px;overflow:hidden}
.foe__int div{padding:10px 12px;font:400 13px/1.2 var(--type);color:var(--dimmer);transition:.4s}
.foe__int div + div{border-left:1px solid #2a2b31}
.foe__int small{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:5px}
body:not(.dark) .foe__int .l{color:var(--ink);background:var(--amber)}
body.dark .foe__int .d{color:#0d0f14;background:#9fb6d6}
@media (max-width:980px){
  .foes__head{grid-template-columns:1fr}
  .ledger{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;padding:0}
  .foe{flex:0 0 78vw;scroll-snap-align:start;border-bottom:1px solid #23242a}
  .foe:first-child{margin-left:var(--gut)}
}

/* ------------------------------------------------------------------ 5 · peephole */
.peep{position:relative;background:#050608;padding:0 0 16vh}
.peep__stage{position:relative;height:100vh;height:100svh;overflow:hidden;touch-action:pan-y}
.peep__base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.32) saturate(.7)}
.peep__stage::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(5,6,8,.9) 90%),linear-gradient(transparent 60%,#050608);pointer-events:none}
.peep__lens{--lx:50%;--ly:50%;--s:min(46vw,46vh);position:absolute;left:var(--lx);top:var(--ly);width:var(--s);height:var(--s);transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;z-index:2;box-shadow:0 0 0 2px #6b5530,0 0 0 9px #241d12,0 0 0 11px #8a6d3c,0 30px 80px rgba(0,0,0,.9)}
.peep__mag{position:absolute;inset:0;background:url(../img/rooms/kapilar_isik.webp) no-repeat;background-size:var(--bw) var(--bh);background-position:var(--bx) var(--by);filter:brightness(.95) contrast(1.05)}
.peep__room{position:absolute;inset:-8%;background:#000 50% 50%/150% auto no-repeat;opacity:0;transform:scale(1.25);transition:opacity .45s ease,transform .9s var(--ease);filter:contrast(1.05) saturate(.9)}
.peep__room.on{opacity:1;transform:scale(1)}
.peep__room[data-door="0"]{background-image:url(../img/rooms/daire_l.webp)}.peep__room[data-door="1"]{background-image:url(../img/rooms/ters_salon_l.webp)}.peep__room[data-door="2"]{background-image:url(../img/rooms/mutfak2_l.webp)}
body.dark .peep__room{filter:brightness(.35) saturate(.5) hue-rotate(190deg)}
.peep__ring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,transparent 46%,rgba(0,0,0,.4) 60%,rgba(0,0,0,.94) 71%),radial-gradient(circle at 35% 30%,rgba(255,255,255,.12),transparent 30%);pointer-events:none}
.peep__label{position:absolute;left:50%;bottom:17%;transform:translateX(-50%);font:italic 400 13px/1.2 var(--type);color:var(--paper);white-space:nowrap;text-shadow:0 1px 6px #000;opacity:0;transition:opacity .4s}
.peep__label.on{opacity:1}
.peep__copy{position:relative;margin-top:-22vh;z-index:3}
.peep__copy p:not(.eyebrow){max-width:30em;color:var(--paper-2);font-size:19px}

/* ------------------------------------------------------------------ 6 · rules */
.rules{padding:18vh 0;background:linear-gradient(#050608,var(--night-2))}
.rules__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,100px);align-items:center}
.rules__list{list-style:none;margin:0;padding:0;display:grid;gap:18px;max-width:32em}
.rules__list li{border-top:1px solid #23242a;padding-top:16px;color:var(--paper-2);font-size:18px}
.rules__list b{font:700 14px/1 var(--type);letter-spacing:.08em;text-transform:uppercase;color:var(--paper);display:block;margin-bottom:6px}
.notice{position:relative;margin:0;background:#ebe4d2;color:#1d1912;padding:44px 40px 36px;transform:rotate(1.4deg);box-shadow:0 40px 80px -30px rgba(0,0,0,.9);max-width:460px;justify-self:center}
.notice::after{content:"";position:absolute;inset:0;background-image:var(--noise);background-size:120px;opacity:.25;mix-blend-mode:multiply;pointer-events:none}
.notice__tape{position:absolute;top:-12px;left:50%;width:120px;height:26px;transform:translateX(-50%) rotate(-3deg);background:rgba(235,222,180,.6);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.notice__title{font:700 15px/1 var(--type);letter-spacing:.32em;text-transform:uppercase;text-align:center;margin-bottom:26px;padding-bottom:16px;border-bottom:1px dashed #9a8f78}
.notice__list{margin:0;padding:0 0 0 22px;font:400 16px/1.4 var(--type);display:grid;gap:18px}
.notice__list q{display:block;font-weight:700}
.notice__list q::before,.notice__list q::after{content:""}
.notice__list small{display:block;font-size:12.5px;color:#5a5244;margin-top:4px}
.notice__sign{font:italic 400 14px/1 var(--type);text-align:right;margin:26px 0 0;color:#5a5244}
@media (max-width:900px){.rules__grid{grid-template-columns:1fr}.notice{padding:40px 24px 30px}}

/* ------------------------------------------------------------------ 7 · board */
.board{padding:16vh 0 18vh;background:var(--night-2)}
.board__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:start}
.board__copy > p:not(.eyebrow){color:var(--paper-2);font-size:19px;max-width:28em}
.drawing{margin:44px 0 0;max-width:420px;transform:rotate(-2deg)}
.drawing img{width:100%;height:auto;box-shadow:0 30px 60px -24px rgba(0,0,0,.9)}
.voice{display:flex;align-items:center;gap:12px;margin-top:18px;font:italic 400 16px/1.4 var(--type);color:var(--paper);text-align:left}
.voice__icon{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid rgba(242,193,78,.5);position:relative}
.voice__icon::before{content:"";position:absolute;left:14px;top:11px;border:8px solid transparent;border-left:12px solid var(--amber);border-right:0}
.voice.is-playing .voice__icon::before{left:12px;top:12px;width:4px;height:14px;border:0;background:var(--amber);box-shadow:8px 0 0 var(--amber)}
.felt{position:relative;background:#121212;border-radius:6px;padding:30px 30px 26px;box-shadow:inset 0 0 0 10px #2b2016,inset 0 0 0 12px #4a3826,0 40px 80px -30px rgba(0,0,0,.9);background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 13px)}
.felt__head{font:700 13px/1 var(--type);letter-spacing:.4em;text-transform:uppercase;color:#d9d6cc;text-align:center;padding:10px 0 18px}
.felt__row{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:10px;font:700 clamp(15px,1.6vw,20px)/1 var(--type);letter-spacing:.1em;text-transform:uppercase;color:#ece9e0;padding:15px 8px;border-top:1px solid rgba(255,255,255,.06)}
.felt__row:nth-child(odd) .felt__name{transform:translateY(1px) rotate(-.25deg)}
.felt__row:nth-child(even) .felt__name{transform:translateX(1px) rotate(.2deg)}
.felt__no{color:var(--amber)}
.felt__tag{font-size:11px;letter-spacing:.2em;background:var(--amber);color:var(--ink);padding:5px 8px}
.felt__row:not(.is-free) .felt__name{opacity:.82}
.felt__foot{display:flex;justify-content:center;gap:18px;color:#5f5b52;font-size:10px;padding-top:16px}
@media (max-width:900px){.board__grid{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ 8 · get (doorbell) */
.get{position:relative;min-height:100vh;overflow:hidden;background:#020203;display:grid;align-items:center}
.get__scene{position:absolute;inset:0;opacity:.55}
.get__scene img{position:absolute;left:50%;top:50%;width:max(100%,216vh);height:auto;transform:translate(-68.2%,-50%)}
.get__scene .get__open{width:auto;height:auto}
.get::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 50% 55%,transparent,rgba(2,2,3,.85) 75%)}
.get__inner{position:relative;z-index:2;display:grid;justify-items:center;gap:40px;padding:18vh var(--gut);text-align:center}
.get__title{font:italic 500 clamp(40px,5.4vw,84px)/1.05 var(--serif);margin:0;color:var(--paper);max-width:17em;text-wrap:balance}
.bell{display:inline-block;text-decoration:none;color:var(--ink)}
.bell__plate{display:flex;align-items:center;gap:16px;padding:14px 16px 14px 14px;border-radius:6px;background:linear-gradient(160deg,#4a3c26,#2a2116 55%,#3a2e1d);box-shadow:inset 0 1px 0 rgba(255,230,180,.25),inset 0 -1px 0 rgba(0,0,0,.6),0 20px 40px -14px #000;position:relative}
.bell__plate::before,.bell__plate::after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c9b07a,#5a4a2c)}
.bell__plate::before{left:5px}.bell__plate::after{right:5px}
.bell__slot{display:grid;gap:2px;min-width:190px;padding:10px 16px;background:#e9e1cf;box-shadow:inset 0 1px 3px rgba(0,0,0,.45);font:700 17px/1.1 var(--type);letter-spacing:.06em;text-align:left;margin-left:6px}
.bell__slot small{font:400 11px/1.2 var(--type);letter-spacing:0;color:#5a5244}
.bell__push{width:42px;height:42px;border-radius:50%;margin-right:6px;background:radial-gradient(circle at 40% 35%,#f6dc9a,#c49a45 45%,#6e5426 80%);box-shadow:0 0 0 3px #1c160e,0 0 0 4px #5b4a2c,0 0 22px rgba(242,193,78,.35);transition:transform .15s,box-shadow .3s}
.bell:hover .bell__push{box-shadow:0 0 0 3px #1c160e,0 0 0 4px #5b4a2c,0 0 34px rgba(242,193,78,.7)}
.bell:active .bell__push{transform:scale(.92)}
.get__note{font:400 14px/1.7 var(--type);color:var(--dim);margin:0}

.foot{border-top:1px solid #17181d;padding:26px 0 40px;font:400 13px/1.4 var(--type);color:var(--dimmer)}
.foot__inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.foot nav{display:flex;flex-wrap:wrap;gap:22px}
.foot a{color:var(--dim);text-decoration:none}.foot a:hover{color:var(--paper)}

/* ------------------------------------------------------------------ appear */
.js [data-rise]{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js [data-rise].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  .grain{display:none}
}