@font-face{font-family:Bricolage;src:url(/fonts/bricolage.woff2);font-weight:200 800;font-display:swap}
@font-face{font-family:Newsreader;src:url(/fonts/newsreader.woff2);font-weight:200 800;font-display:swap}
@font-face{font-family:Newsreader;font-style:italic;src:url(/fonts/newsreader-i.woff2);font-weight:200 800;font-display:swap}
@font-face{font-family:Caveat;src:url(/fonts/caveat.woff2);font-weight:400 700;font-display:swap}
@font-face{font-family:PlexMono;src:url(/fonts/plexmono.woff2);font-display:swap}
:root{--bd:#16221f;--bd2:#1d2d29;--chalk:#EDE6D3;--dim:#b7b09c;--amber:#E8A317;--ink:#101a18}
*{box-sizing:border-box;margin:0}
html{background:var(--bd);color:var(--chalk);scroll-behavior:smooth}
body{font:400 1.12rem/1.65 Newsreader,Georgia,serif;min-height:100vh;background:radial-gradient(120% 80% at 70% 0,#22362f,var(--bd) 60%)}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--amber);color:var(--ink);padding:8px 12px;z-index:99}
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
header{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(18px,4vw,48px);mix-blend-mode:normal}
header .lg{display:flex;gap:12px;align-items:center;text-decoration:none}
header .lg svg.fw{height:26px;width:auto;color:var(--chalk)}
header .lg span{font:500 .72rem PlexMono,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);border-left:1px solid #4a5a54;padding-left:12px}
nav{display:flex;gap:clamp(10px,2vw,26px)}nav a{font:500 .72rem PlexMono,monospace;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--dim);padding:6px 2px;border-bottom:1px solid transparent}
nav a:hover,nav a[aria-current]{color:var(--chalk);border-color:var(--amber)}
main{position:relative;z-index:2}
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 clamp(18px,5vw,72px) 12vh}
.hero h1{font:800 clamp(3rem,10.5vw,10rem)/.9 Bricolage,sans-serif;letter-spacing:-.04em;max-width:11ch}
.hero h1 em{font:italic 500 1em Newsreader,serif;color:var(--amber);letter-spacing:-.02em}
.hero p{max-width:34em;margin-top:28px;font-size:clamp(1.15rem,1.7vw,1.5rem);color:var(--dim)}
.hero .scrawl{font:600 1.7rem Caveat,cursive;color:var(--amber);margin-top:26px;transform:rotate(-2deg)}
.syll{padding:12vh 0 4vh}
.syll>h2{font:500 .78rem PlexMono,monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);padding:0 clamp(18px,5vw,72px);margin-bottom:28px}
.track{display:flex;gap:clamp(14px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 clamp(18px,5vw,72px) 34px;scrollbar-color:var(--amber) transparent}
.room{flex:0 0 min(78vw,520px);scroll-snap-align:start;background:rgba(237,230,211,.05);border:1px solid rgba(237,230,211,.16);border-radius:4px;padding:28px 28px 34px;text-decoration:none;display:flex;flex-direction:column;min-height:440px;position:relative;transition:transform .3s,background .3s}
.room:hover{transform:translateY(-6px);background:rgba(237,230,211,.09)}
.room b{font:800 7rem/1 Bricolage,sans-serif;color:transparent;-webkit-text-stroke:1px rgba(237,230,211,.3);letter-spacing:-.05em}
.room h3{font:700 1.9rem/1.1 Bricolage,sans-serif;margin:auto 0 12px;letter-spacing:-.02em}
.room p{color:var(--dim);font-size:1.02rem}.room .go{font:600 1.4rem Caveat,cursive;color:var(--amber);margin-top:16px}
.lede{padding:16vh clamp(18px,5vw,72px) 8vh;max-width:60rem}
.lede p{font:500 clamp(1.7rem,3.6vw,3rem)/1.18 Newsreader,serif;letter-spacing:-.01em}
.lede p+p{font:400 1.15rem/1.7 Newsreader,serif;color:var(--dim);margin-top:26px;max-width:36em}
.bring{padding:10vh clamp(18px,5vw,72px);display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:36px 48px;border-top:1px solid rgba(237,230,211,.12);margin-top:6vh}
.bring h3{font:700 1.15rem Bricolage,sans-serif;margin-bottom:8px;color:var(--amber)}.bring p{color:var(--dim);font-size:1.02rem}
/* room page */
.rp{padding:22vh clamp(18px,5vw,72px) 8vh;max-width:78rem;margin:auto}
.rp .num{font:600 .78rem PlexMono,monospace;letter-spacing:.2em;color:var(--amber);text-transform:uppercase}
.rp h1{font:800 clamp(2.4rem,7vw,6.4rem)/.95 Bricolage,sans-serif;letter-spacing:-.04em;margin:14px 0 30px;max-width:14ch}
.rp .deck{font:italic 400 clamp(1.3rem,2.4vw,1.9rem)/1.4 Newsreader,serif;max-width:32em;color:var(--chalk)}
.sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px 56px;padding:44px 0;border-top:1px solid rgba(237,230,211,.14)}
.sec h2{font:700 1.5rem/1.2 Bricolage,sans-serif;letter-spacing:-.02em}.sec p{max-width:36em;color:#d8d2c0}
.margin{margin:60px 0 20px;padding:26px 30px;border-left:3px solid var(--amber);background:rgba(232,163,23,.07)}
.margin h2{font:600 1.6rem Caveat,cursive;color:var(--amber);margin-bottom:8px}.margin ul{padding-left:1.2em;color:var(--dim)}
.nextroom{display:flex;justify-content:space-between;gap:20px;padding:40px 0;border-top:1px solid rgba(237,230,211,.14);font:600 1.5rem Caveat,cursive}
.nextroom a{color:var(--amber);text-decoration:none}
footer{position:relative;z-index:2;padding:12vh clamp(18px,5vw,72px) 10vh;border-top:1px solid rgba(237,230,211,.12)}
footer svg.fw{width:min(60vw,420px);height:auto;color:var(--chalk)}footer p{margin-top:22px;color:var(--dim);font-size:.95rem}
.eye path{fill:none;stroke-linecap:round;stroke-width:20;stroke:#EB0089;animation:eyeE 6s ease-in-out infinite}
.eye .eb{display:none}
@keyframes eyeE{0%,20%{d:path("M473 92 L473 92");stroke:#EB0089}50%,70%{d:path("M450 92 L496 92");stroke:#E8A317}100%{d:path("M473 92 L473 92");stroke:#EB0089}}
@media(max-width:760px){nav{display:none}.sec{grid-template-columns:1fr}.room{min-height:360px}.room b{font-size:5rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.eye path{animation:none}.room{transition:none}}
body.room #scene{opacity:.22}
.long{margin:56px 0 0;padding:44px 0 8px;border-top:1px solid rgba(237,230,211,.14);max-width:40rem;margin-left:auto}
.long h2{font:italic 500 clamp(1.7rem,3vw,2.4rem)/1.15 Newsreader,serif;color:var(--amber);margin-bottom:22px}
.long p{font-size:1.2rem;line-height:1.75;color:#e0dac8;margin-bottom:1.1em}.long p:first-of-type::first-letter{font:800 3.4em/.85 Bricolage,sans-serif;float:left;margin:.06em .12em 0 0;color:var(--chalk)}
@media(max-width:760px){.hero h1{font-size:15vw}.long{margin-left:0}}