:root{
--bg: oklch(0.15 0.01 60);
--fg: oklch(0.94 0.02 85);
--muted: oklch(0.74 0.02 80);
--card: oklch(0.17 0.012 60 / 0.84);
--line: oklch(1 0 0 / 0.14);
--brand: oklch(0.78 0.1 85);
--brand-fg: oklch(0.15 0.01 60);
--display: "Playfair Display", Georgia, "Times New Roman", serif;
--mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
--sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--nav-h: 56px;
--ease: cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-snap-type:y mandatory;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 var(--mono);overflow-x:hidden;touch-action:pan-y}
button{font:inherit;color:inherit}
a{color:inherit}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;outline:none}
#veil{position:fixed;inset:0;background:var(--bg);z-index:1;pointer-events:none;transition:opacity .9s var(--ease)}
#veil.off{opacity:0}
#walk{position:relative;z-index:0}
#grain{position:fixed;inset:-40px;z-index:1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-size:160px 160px;animation:grain .9s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-14px,9px)}40%{transform:translate(11px,-17px)}60%{transform:translate(-7px,21px)}80%{transform:translate(19px,4px)}100%{transform:translate(0,0)}}
body.plain #grain{display:none}
#walk .stop{height:100svh;scroll-snap-align:start;scroll-snap-stop:always}
/* the bar */
.bar{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:calc(6px + env(safe-area-inset-top)) 12px 6px 16px;background:linear-gradient(oklch(0.12 0.01 60 / .85),oklch(0.12 0.01 60 / 0))}
.mark{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.01em;white-space:nowrap;text-decoration:none}
.mark i{color:var(--brand);font-style:italic}
.tools{display:flex;gap:4px}
.tool{min-height:44px;min-width:44px;padding:0 10px;border:0;background:none;border-radius:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tool[aria-pressed=true]{color:var(--brand)}
.tool:focus-visible,.go:focus-visible,.nav button:focus-visible,.pin:focus-visible,.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.tool svg{width:16px;height:16px}
/* the rooms' nav = the site's nav */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:repeat(var(--rooms,6),1fr);
padding:0 4px env(safe-area-inset-bottom);background:oklch(0.12 0.01 60 / .9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.nav button{height:var(--nav-h);border:0;background:none;cursor:pointer;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
position:relative;padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav button .n{display:block;font-size:9px;opacity:.6;margin-bottom:1px}
.nav button[aria-current=true]{color:var(--fg)}
.nav button[aria-current=true]::after{content:"";position:absolute;left:22%;right:22%;top:0;height:2px;background:var(--brand)}
/* a room's page */
.room{position:fixed;z-index:4;left:10px;right:10px;bottom:calc(var(--nav-h) + 10px + env(safe-area-inset-bottom));
background:var(--card);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);border:1px solid var(--line);
padding:16px 16px 14px;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease);max-height:52svh;overflow:hidden}
.room.on{opacity:1;transform:none;pointer-events:auto}
.kick{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin:0 0 6px}
.kick .of{color:var(--muted);letter-spacing:.1em;display:block;margin-top:2px}
.room h1,.room h2{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.01em;margin:0 0 8px;text-wrap:balance}
.room h1{font-size:clamp(34px,10vw,64px);font-weight:900}
.room h1 em,.room h2 em{font-style:italic;color:var(--brand)}
.room h2{font-size:clamp(24px,6.6vw,38px)}
.room p{margin:0 0 10px;color:var(--muted);font:15px/22px var(--sans)}
.room p.kick,.room p.hint,.room p.fine{font-family:var(--mono)}
.rows{list-style:none;margin:8px 0 10px;padding:0;border-top:1px solid var(--line)}
.rows li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line);font-size:12px}
.rows .t{color:var(--muted);font-variant-numeric:tabular-nums;min-width:58px}
.rows .a{font-family:var(--display);font-size:15px;font-weight:700;color:var(--fg);min-width:0}
.rows .a small{display:block;font-family:var(--sans);font-weight:400;font-size:13px;color:var(--muted);line-height:1.4;margin-top:2px}
.rows .r{color:var(--muted);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;text-align:right}
.rows .p{font-family:var(--display);font-size:20px;font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}
.rows li.hl .a,.rows li.hl .t{color:var(--brand)}
.rows.tight li{padding:4px 0}
.acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
.btn{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 16px;border:1px solid var(--fg);background:var(--fg);color:var(--brand-fg);
font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-decoration:none}
.btn.ghost{background:none;color:var(--fg);border-color:var(--line)}
.btn .dot{width:7px;height:7px;background:var(--brand);display:inline-block}
.fine{font-size:10.5px;color:var(--muted);margin:8px 0 0;letter-spacing:.02em}
.hint{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.room p.hint{font-size:10px;line-height:1.45;letter-spacing:.14em;margin-top:18px;opacity:.8}
.hint svg{width:14px;height:14px;animation:nudge 1.6s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateY(2px);opacity:.5}50%{transform:translateY(-3px);opacity:1}}
.names{font-family:var(--display);font-size:15px;line-height:1.5;margin:4px 0 8px}
.names b{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);display:block;margin-top:6px}
.names span{color:var(--fg)}
.names span+span::before{content:" / ";color:var(--muted)}
.foot{margin-top:10px;padding-top:8px;border-top:1px solid var(--line);font-size:10.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 14px}
.desk-only{display:none}
.grab{display:none}
@media (max-width:899px){
.room{max-height:none;padding-top:24px}
.grab{display:block;position:absolute;top:0;left:0;right:0;height:44px;border:0;background:none;cursor:pointer;padding:0}
.grab::before{content:"";position:absolute;top:9px;left:50%;width:36px;height:4px;margin-left:-18px;background:var(--line);border-radius:2px}
.room:not([data-i="0"]):not(.open) > p:not(.kick),.room:not(.open) .rows,.room:not(.open) .names,.room:not(.open) .foot,.room:not(.open) .acts .fine{display:none}
.room.open{max-height:calc(100svh - var(--nav-h) - 84px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.room:not([data-i="0"]):not(.open) .kick .of{display:none}
.room.open .more::after{content:" \2193"}
.room:not(.open) .more::after{content:" \2191"}
}
@media (min-width:900px){ .more{display:none} }
/* pins: things in the room you can tap */
#pins{position:fixed;inset:0;z-index:3;pointer-events:none}
.pin{position:absolute;left:0;top:0;pointer-events:auto;min-height:44px;min-width:44px;display:flex;align-items:center;gap:7px;padding:0 10px 0 6px;
border:0;background:none;cursor:pointer;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);white-space:nowrap;
transition:opacity .35s var(--ease)}
.pin i{width:12px;height:12px;border:1.5px solid var(--brand);border-radius:50%;flex:none;position:relative;background:oklch(0.15 0.01 60 / .5)}
.pin i::after{content:"";position:absolute;inset:-6px;border:1px solid var(--brand);border-radius:50%;animation:ping 2.2s ease-out infinite;opacity:0}
@keyframes ping{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.pin.off{opacity:0;pointer-events:none}
.pin span{background:rgba(10,8,6,.72);padding:4px 8px;border-radius:2px;font-size:11px;letter-spacing:.12em;color:#e8dfcc}
@media (max-width:420px){ .tool{white-space:nowrap;padding:0 8px;letter-spacing:.1em} .tools{gap:0} }
#stepfade{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(to top,#0e0b09 0,#0e0b09 22%,rgba(14,11,9,0) 52%)}
body.plain #stepfade{display:none}
/* fallback note */
.nogl{display:none}
body.plain .nogl{display:block}
/* plain page: the same site, flat */
body.plain{touch-action:auto}
html.plain{scroll-snap-type:none}
body.plain #stage,body.plain #walk,body.plain #pins,body.plain #veil{display:none}
body.plain main{padding:calc(70px + env(safe-area-inset-top)) 16px calc(var(--nav-h) + 30px)}
body.plain .room{position:static;opacity:1;transform:none;pointer-events:auto;max-height:none;margin:0 auto 14px;max-width:640px;background:oklch(0.17 0.012 60)}
body.plain .hint{display:none}
@media (min-width:900px){
.bar{padding:14px 18px 14px 28px}
.mark{font-size:20px}
.nav{left:auto;right:24px;bottom:24px;width:auto;display:flex;gap:2px;border:1px solid var(--line);padding:0 6px}
.nav button{height:48px;padding:0 12px;font-size:10.5px}
.nav button .n{display:inline;margin:0 6px 0 0}
.room{left:32px;right:auto;top:50%;bottom:auto;width:500px;max-height:calc(100vh - 140px);transform:translateY(calc(-50% + 12px));padding:24px 24px 20px}
.room.on{transform:translateY(-50%)}
.room p{font-size:16px;line-height:24px}
.kick .of{display:inline;margin-left:10px}
.rows li{font-size:12.5px;padding:8px 0}
.rows .a{font-size:17px}
.desk-only{display:inline}
.btn.desk-only{display:inline-flex}
.phone-only{display:none}
body.plain .room{transform:none}
}
@media (prefers-reduced-motion:reduce){
#grain{animation:none}
.room,.pin,#veil{transition-duration:.01s}
.hint svg,.pin i::after{animation:none}
}
/* ---- rooms engine additions ---- */
/* the room's subject sits right of a left card; a site can put the card on the right (card: "right") */
body.card-right .room{left:auto;right:32px}
@media (max-width:899px){ body.card-right .room{left:10px;right:10px} }
/* surfaces: live HTML laid onto the photo through four points (marquees, screens, posters): sharp at any size */
#surfaces{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.surface{position:absolute;left:0;top:0;transform-origin:0 0;transition:opacity .35s var(--ease);display:flex;align-items:center;justify-content:center;text-align:center;
backface-visibility:hidden;will-change:transform}
.surface.off{opacity:0}
body.plain #surfaces{display:none}
/* the song */
#play[hidden]{display:none}
#play[aria-pressed=true]{color:var(--brand)}
#play svg{width:15px;height:15px}
/* the way on: a pin that asks to be followed; the way back: one that doesn't compete */
.pin.lead i{width:16px;height:16px;background:var(--brand);border-color:var(--brand)}
.pin.lead i::after{inset:-9px;border-width:2px;animation-duration:1.6s}
.pin.lead span{background:var(--brand);color:var(--brand-fg);font-weight:700;letter-spacing:.16em;padding:6px 10px}
.pin.lead:hover span{filter:brightness(1.1)}
.pin.quiet:not(.off){opacity:.55}.pin.quiet span{font-size:10px}.pin.quiet i::after{animation:none}
/* a first-screen cue, outside the card (S.cue) */
.cue{position:fixed;z-index:4;left:50%;bottom:calc(var(--nav-h) + 22px + env(safe-area-inset-bottom));transform:translateX(-50%);text-align:center;pointer-events:none;
opacity:0;transition:opacity .5s var(--ease);font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--fg);text-shadow:0 1px 10px rgba(0,0,0,.9)}
.cue.on{opacity:1}.cue small{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.14em;text-transform:none;color:var(--muted)}
.cue .ar{display:inline-block;animation:nudge 1.6s var(--ease) infinite}
@media (max-width:899px){.cue{display:none}}
@media (min-width:900px){.room .hint{display:none}}
body.plain .cue{display:none}
/* a sign that switches on when you arrive (a surface with cls "switch") */
.surface.switch{opacity:0}.surface.switch.off{visibility:hidden}.surface.switch.go{animation:switchon 1.5s steps(1,end) .7s backwards}
@keyframes switchon{0%{opacity:1}14%{opacity:.25}22%{opacity:1}34%{opacity:.45}40%{opacity:1}52%{opacity:0}60%{opacity:.75}68%{opacity:0}100%{opacity:0}}
/* the list, once you're on it */
form.list.sent{display:none}
.room .done{display:none}form.list.sent+.done{display:block}
/* doors that swing open as you walk through them (a surface with cls "doors": ) */
.surface.doors{perspective:900px;overflow:hidden}
.surface.doors::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 56%,rgba(255,240,248,calc(var(--open,0) * .55)),rgba(255,240,248,0) 70%)}
.surface.doors::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 calc(var(--open,0) * 30px) calc(var(--open,0) * 6px) rgba(255,190,222,calc(var(--open,0) * .6))}
.surface.doors i{position:absolute;top:0;bottom:0;background-repeat:no-repeat}
.surface.doors .hall{left:0;right:0;background-size:cover;filter:brightness(calc(.6 + var(--open,0) * .6))}
.surface.doors .l,.surface.doors .r{width:50%;backface-visibility:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.surface.doors .l{left:0;transform-origin:0 50%;transform:rotateY(calc(var(--open,0) * -108deg))}
.surface.doors .r{right:0;transform-origin:100% 50%;transform:rotateY(calc(var(--open,0) * 108deg))}
.surface.doors video.hall{width:100%;height:100%;object-fit:cover;display:block}
#doorglow{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(circle at var(--gx,50%) var(--gy,42%),rgba(255,110,180,.7),rgba(255,92,168,.22) 28%,rgba(255,92,168,0) 58%)}
body.plain #doorglow{display:none}
/* light that falls into the room (a surface with cls "light ..."): on the page itself, screen-blended, coming up with --open */
.surface.light{position:fixed;z-index:2;mix-blend-mode:screen;pointer-events:none;display:block}
.surface.light i{position:absolute;inset:0;opacity:var(--open,0)}
body.plain .surface.light{display:none}
#tilt[aria-pressed=true]{color:var(--brand)}#tilt[data-state=asking]{opacity:.6}#tilt[data-state=denied] span::after{content:" off"}
@media (min-width:900px){#tilt{display:none}}
@media (max-width:379px){.bar .tools{gap:2px}.bar .tool{padding-left:7px;padding-right:7px;letter-spacing:.08em}#tilt span{display:none}}