/* One building, seven rooms. Left column scrolls through the rooms; the figure on the right changes with each one. */
:root{
  --xtra:110px;--hd:max(calc(100vh + var(--xtra)),66.667vw);--wd:max(100vw,150vh);
  --stone:#E9E4DC; --paper:#F2EFEA; --ink:#1A1916; --ink-2:#4A4740; --muted:#7A756B;
  --navy:#1E2A44; --brass:#B08A4E; --line:#D3CDC2; --cream:#CFC6B6; --gold:#E9D3A3;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  color-scheme: light;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--stone);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
img{max-width:100%}

/* top bar */
.bar{position:fixed;top:0;left:0;right:0;z-index:30;padding-top:env(safe-area-inset-top,0px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.bar-in{max-width:1440px;margin:0 auto;height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-inline:clamp(0px,3vw,40px)}
.mark{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.mark b{font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:-.01em}
.mark span{font-size:15px;font-weight:600;letter-spacing:.22em;color:var(--muted)}
.nav{display:flex;gap:24px;font-size:14px;align-items:center}
.nav a.lnk{position:relative;padding:6px 0;white-space:nowrap}
.nav a.lnk::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ink);transition:right .35s ease}
.nav a.lnk:hover::after,.nav a.lnk.on::after{right:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;height:52px;padding:0 26px;background:var(--navy);color:var(--paper);font-size:15px;font-weight:500;border:0;cursor:pointer;transition:transform .25s ease, background .25s ease;white-space:nowrap}
.btn:hover{background:#15203A;transform:translateY(-1px)}
.btn.sm{height:40px;padding:0 18px;font-size:14px}
.btn .arr{transition:transform .25s ease}.btn:hover .arr{transform:translateX(4px)}

/* fixed stage */
.stage{position:fixed;inset:0;bottom:calc(-1*var(--xtra));z-index:1;pointer-events:none}
.stage-in{position:absolute;right:max(0px,calc((100vw - 1440px)/2));top:0;bottom:var(--xtra);width:min(52vw,760px);display:flex;align-items:flex-end;justify-content:center;perspective:1200px;transition:opacity 1s ease}
.glow{position:absolute;left:50%;top:52%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,250,240,.9),rgba(242,239,234,.35) 55%,rgba(233,228,220,0) 100%)}
.orbits{position:absolute;left:50%;top:50%;width:min(92%,680px);aspect-ratio:1;transform:translate(-50%,-48%)}
.orbits svg{width:100%;height:100%;overflow:visible}
.floor{position:absolute;left:50%;bottom:5.5vh;width:46%;height:28px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(26,25,22,.28),rgba(26,25,22,0));filter:blur(2px)}
.fig{position:relative;height:min(92vh,980px);aspect-ratio:640/1229;margin-bottom:4vh;transform-style:preserve-3d;will-change:transform}
.fig canvas,.fig img{position:absolute;inset:0;width:100%;height:100%}
.fig img{object-fit:contain;transition:opacity .5s ease}
.tag{position:absolute;left:50%;bottom:calc(2.2vh + var(--xtra));transform:translateX(-50%);display:flex;gap:14px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-2);white-space:nowrap}
.tag i{display:block;width:28px;height:1px;background:var(--brass)}

/* backdrops: theatre for the stage, pub for the bar */
.theatre,.pub{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;background:#120b09}
.theatre img,.pub img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.theatre img{object-position:50% 42%;transform:scale(1.16) translateX(10%);transform-origin:50% 62%}
.theatre::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,11,9,.86) 0%,rgba(18,11,9,.7) 34%,rgba(18,11,9,.1) 58%,rgba(18,11,9,0) 70%),linear-gradient(to top,rgba(18,11,9,.75),rgba(18,11,9,0) 30%)}
.pub{background:#0e0906}
.pub img{object-position:50% 0%;transition:opacity 1s ease}
.pub img.b{opacity:0}
.pub.pour img.b{opacity:1}
.pub::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(14,9,6,.8) 0%,rgba(14,9,6,.55) 26%,rgba(14,9,6,.05) 46%,rgba(14,9,6,0) 60%),linear-gradient(to top,rgba(14,9,6,.5),rgba(14,9,6,0) 22%)}
.glass{position:absolute;left:calc(50vw - .07*var(--wd));bottom:calc(100vh + var(--xtra) - .715*var(--hd));width:min(8vw,130px);opacity:0;pointer-events:none;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45));display:none;z-index:2}
.on-club .glass{display:block}
.on-stage .theatre{opacity:1}
.on-club .pub{opacity:1}
.on-stage .glow,.on-stage .orbits,.on-stage .floor{opacity:0}
.on-club .stage-in{opacity:0}
.dk .tag{color:var(--cream)}
.on-club .tag{opacity:0}
.dk .mark b,.dk .mark span,.dk .nav a.lnk{color:#F2EFEA}
.dk .nav a.lnk::after{background:#F2EFEA}
.dk .btn.sm{background:#F2EFEA;color:#1A1916}
.dk .rail a b{border-color:var(--cream)}
.dk .rail a span{color:var(--cream)}
.dk .col{color:#F2EFEA}
.dk .col h2,.dk .col .lede,.dk .col .hud b{color:#F2EFEA}
.dk .col .eye,.dk .col .hud span,.dk .col .note,.dk .meter span{color:var(--cream)}
.dk .col .hud{border-color:rgba(242,239,234,.18)}
.dk .col .feed{color:var(--gold)}
.dk .meter .bar{background:rgba(242,239,234,.18)}
.dk .ammo button,.dk .drinks button{background:rgba(242,239,234,.06);border-color:rgba(242,239,234,.22);color:#F2EFEA}
.dk .ammo button:hover,.dk .drinks button:hover{border-color:var(--gold);background:rgba(242,239,234,.12)}
.dk .endcard{border:1px solid rgba(176,138,78,.5)}
.dk .card{border:1px solid rgba(176,138,78,.45)}
.dk .join-row .note{color:var(--cream)}
.dk .btn{background:#F2EFEA;color:#1A1916}
.dk .btn:hover{background:#fff}

/* wardrobe rail */
.rail{position:fixed;z-index:20;right:max(18px,calc(env(safe-area-inset-right,0px) + 18px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:22px;font-family:var(--mono);font-size:10px;color:var(--muted)}
.rail a span{opacity:0;transform:translateX(6px);transition:all .3s ease;white-space:nowrap}
.rail a:hover span,.rail a.on span{opacity:1;transform:none}
.rail a b{display:block;width:9px;height:9px;border-radius:50%;border:1px solid var(--muted);transition:all .3s ease}
.rail a.got b{background:var(--brass);border-color:var(--brass)}
.rail a.on b{transform:scale(1.5);border-color:var(--ink);background:var(--ink)}
.dk .rail a.on b{border-color:#F2EFEA;background:#F2EFEA}

/* chapters */
main{position:relative;z-index:5}
.ch{min-height:100vh;display:flex;align-items:center;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:110px 64px}
#wd .col{gap:18px}
.ch-in{width:100%;max-width:1440px;margin:0 auto;padding-inline:clamp(0px,3vw,40px)}
.col{width:min(44vw,560px);display:flex;flex-direction:column;gap:26px}
.bar-ch .ch-in{display:flex;justify-content:flex-end}
.bar-ch .col{width:min(34vw,440px);gap:20px}
.bar-ch h2{font-size:clamp(32px,3.4vw,50px)}
.after{display:flex;flex-direction:column;gap:16px}
.after[hidden]{display:none}
.bar-ch .card{aspect-ratio:1.9;max-width:340px;padding:16px}
.bar-ch .card .no{font-size:30px}
.bub{position:fixed;z-index:28;right:calc(50vw + .115*var(--wd) + 64px);top:calc(.085*var(--hd));width:min(30vw,440px,calc(50vw - .115*var(--wd) - 80px));background:var(--paper);color:var(--ink);padding:18px 20px 14px;border:2px solid var(--ink);border-radius:34px;box-shadow:6px 7px 0 rgba(26,25,22,.22);display:none;transform-origin:100% 50%}
.on-club .bub.v{display:block;animation:pop .35s cubic-bezier(.2,.9,.3,1.2)}
.bub .tail{position:absolute;right:-56px;top:58%;width:62px;height:44px;overflow:visible}
.bub .tf{fill:var(--paper)}.bub .ts{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
.bub p{margin:0;font-family:var(--serif);font-size:clamp(18px,1.3vw,24px);line-height:1.3;min-height:2.6em}
.bub p .cur{display:inline-block;width:2px;height:.9em;background:var(--ink);vertical-align:-.1em;margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{to{opacity:0}}
.bub-f{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em}
.bub-f button{width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);background:var(--ink);color:var(--paper);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,opacity .2s ease,background .2s ease}
.bub-f button:hover{transform:translateX(3px)}
#bubPrev:hover{transform:translateX(-3px)}
.bub-f button[disabled]{opacity:.25;cursor:default;transform:none}
.bub.ready #bubNext:not([disabled]){animation:nudge 1.2s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(4px)}}
.bub .btn,.dk .bub .btn{display:inline-flex;margin-top:14px;height:46px;padding:0 22px;font-size:15px;background:var(--ink);color:var(--paper)}
.bub .btn:hover,.dk .bub .btn:hover{background:#000}
.bub .btn[hidden]{display:none}
.ch.stage-ch{min-height:120vh}
.hud{display:flex;gap:22px;align-items:baseline;border-top:1px solid var(--line);padding-top:14px}
.hud div{display:flex;flex-direction:column;gap:2px}
.hud b{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.hud span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted)}
.ammo{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;pointer-events:auto}
.ammo button,.drinks button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:76px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;font-size:11px;font-family:var(--mono);transition:transform .15s ease,border-color .2s ease,background .2s ease}
.ammo button:hover,.drinks button:hover{border-color:var(--ink);transform:translateY(-2px)}
.ammo button:active,.drinks button:active{transform:scale(.95)}
.ammo svg,.ammo img{width:30px;height:30px;object-fit:contain}
.feed{min-height:22px;font-family:var(--serif);font-style:italic;font-size:22px;color:var(--navy)}
.endcard{display:flex;flex-direction:column;gap:12px;padding:18px;background:var(--ink);color:var(--paper)}
.endcard[hidden]{display:none}
.endcard b{font-family:var(--serif);font-weight:300;font-size:40px;line-height:1}
.endcard .btn{background:var(--paper);color:var(--ink);align-self:flex-start}
.endcard .btn.ghost{background:transparent;color:var(--paper);border:1px solid #6F685D}
.wear{position:absolute;inset:0;pointer-events:none;--nx:48%;--ny:18%;opacity:0;transition:opacity .4s ease}
.on-stage .wear{opacity:1}
.wear .starpin{position:absolute;width:4.2%;left:calc(var(--nx) + var(--dx));top:calc(var(--ny) + var(--dy));transform:translate(-50%,-50%) rotate(var(--r,0deg));filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.wear .stain{position:absolute;width:16%;left:calc(var(--nx) + var(--dx));top:calc(var(--ny) + var(--dy));transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(var(--sc,1));opacity:.92}
.fig .wear img{position:static;display:block;width:100%;height:auto;object-fit:unset}
.meter{display:flex;flex-direction:column;gap:6px}
.meter .bar{height:8px;background:rgba(127,127,127,.25);position:relative;overflow:hidden}
.meter .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#B08A4E,#E9D3A3);transition:width .4s ease}
.meter .bar u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--brass);left:70%}
.meter span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);display:flex;justify-content:space-between}
.fx{position:fixed;inset:0;z-index:25;pointer-events:none;overflow:hidden}
.proj{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;will-change:transform}
.proj svg,.proj img{width:100%;height:100%;object-fit:contain}
.spark{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--brass);margin:-3px 0 0 -3px}
.eye{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.eye i{width:26px;height:1px;background:var(--brass);flex:none}
h1,h2{margin:0;font-family:var(--serif);font-weight:300;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:clamp(46px,6.2vw,92px);line-height:1}
h2{font-size:clamp(36px,4.2vw,62px);line-height:1.04}
h1 em,h2 em{font-style:italic}
.lede{margin:0;font-size:18px;line-height:1.6;color:var(--ink-2);max-width:46ch}
.note{font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.5}
.note a{text-decoration:underline;text-underline-offset:3px}
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}

/* reveal: visible at rest, gentle lift when entering */
.rv{transition:transform .9s cubic-bezier(.2,.7,.1,1), opacity .9s ease}
.pre .rv{transform:translateY(18px);opacity:.35}
.pre .in .rv{transform:none;opacity:1}

/* story timeline */
.tl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tl li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.tl b{font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.facts div{display:flex;flex-direction:column;gap:4px;min-width:0}
.facts b{font-family:var(--serif);font-weight:400;font-size:26px;white-space:nowrap}
.facts span{font-size:13px;color:var(--muted)}

/* work rail */
.works{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;margin-right:calc(-1 * clamp(0px,3vw,40px));scrollbar-width:thin}
.works::-webkit-scrollbar{height:4px}.works::-webkit-scrollbar-thumb{background:var(--line)}
.wk{flex:none;width:160px;scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;pointer-events:auto;background:none;border:0;padding:0;text-align:left;color:inherit;cursor:pointer;font:inherit}
.wk .pst{aspect-ratio:2/3;background:var(--ink);position:relative;overflow:hidden;border:1px solid transparent;transition:transform .4s ease,border-color .3s ease,box-shadow .3s ease}
.wk .pst img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.wk:hover .pst{transform:translateY(-4px)}
.wk:hover .pst img{transform:scale(1.04)}
.wk.on .pst{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
.wk .meta{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--muted);font-family:var(--mono)}
.wk .meta strong{font-family:var(--sans);font-weight:500;font-size:13px;color:var(--ink);line-height:1.3}
.wk .go{font-size:11px;font-weight:600;color:var(--navy);opacity:0;transition:opacity .25s ease;font-family:var(--sans)}
.wk:hover .go,.wk.on .go{opacity:1}
.wk.on .go{color:var(--brass)}
.film{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:16px}
.film-h{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.film-h b{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:-.01em}
.film-h span{font-family:var(--mono);font-size:12px;color:var(--muted)}
.film-b{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;font-size:15px;line-height:1.5;color:var(--ink-2)}
.film-b a{font-weight:600;color:var(--navy);white-space:nowrap}

/* appearances */
.apps{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.ap{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.ap .d{font-family:var(--mono);font-size:12px;line-height:1.3}
.ap .d b{display:block;font-family:var(--serif);font-weight:400;font-size:28px;letter-spacing:-.02em}
.ap .t{min-width:0}.ap .t b{display:block;font-weight:500}.ap .t b a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}.ap .t b a:hover{text-decoration-color:var(--brass)}.ap .t span{font-size:13px;color:var(--muted)}
.ap .l{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.apps.past .ap{padding:9px 0;grid-template-columns:72px minmax(0,1fr)}
.apps.past .ap .d b{font-size:22px}
.apps.past .ap .t b{font-weight:500;font-size:14px}
.apps.past .ap .t span{font-size:12px}
#see .col{gap:18px}
.ap .l a,.ap .l button{font-size:13px;font-weight:600;color:var(--navy);white-space:nowrap;background:none;border:0;padding:0;cursor:pointer;font-family:inherit}

/* latest */
.clips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.clip{display:flex;flex-direction:column;gap:8px;min-width:0;background:none;border:0;padding:0;text-align:left;color:inherit;cursor:pointer;font:inherit}
.clip .th{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.clip .th img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;display:block}
.clip:hover .th img{transform:scale(1.05)}
.clip .th span{position:absolute;left:10px;top:10px;font-family:var(--mono);font-size:10px;padding:4px 7px;background:var(--paper);color:var(--ink)}
.clip .th u{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(242,239,234,.92);display:flex;align-items:center;justify-content:center}
.clip b{font-size:13px;font-weight:500;line-height:1.35}

/* the bar */
.drinks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;pointer-events:auto}
.drinks button{min-height:78px;gap:6px}
.drinks img{width:32px;height:32px;object-fit:contain}
.drinks button.on{border-color:var(--gold)}
.card{position:relative;width:min(100%,420px);aspect-ratio:1.6;background:var(--ink);color:var(--paper);padding:22px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.card::after{content:"";position:absolute;right:-40%;top:-60%;width:90%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(176,138,78,.45)}
.card .r{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--cream);position:relative}
.card .no{font-family:var(--serif);font-weight:300;font-size:40px;line-height:1.05;position:relative;letter-spacing:-.02em}
.card .no em{font-style:italic}
.card .looks{display:flex;gap:6px;position:relative}
.card .looks i{width:14px;height:14px;border-radius:50%;border:1px solid #6F685D}
.card .looks i.got{background:var(--brass);border-color:var(--brass)}
.join-row{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
footer{position:relative;z-index:5;padding-block:18px calc(18px + env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));border-top:1px solid var(--line);background:var(--stone)}
footer .ch-in{display:flex;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;font-size:12px;color:var(--muted);line-height:1.6}
footer .soc{display:flex;gap:18px}
footer .faq{display:block;border-top:1px solid var(--line);margin-top:14px;padding-top:4px}
footer .faq details{border-top:1px solid var(--line);padding:8px 0}
footer .faq details.faq-top{border-top:0}
footer .faq details.faq-top>summary{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:400}
footer .faq details.faq-top>details:first-of-type{border-top:0;margin-top:6px}
footer .faq summary{cursor:pointer;font-size:13px;color:var(--ink-2);font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:12px}
footer .faq summary::-webkit-details-marker{display:none}
footer .faq summary::after{content:"+";color:var(--brass);font-family:var(--mono)}
footer .faq details[open] summary::after{content:"–"}
footer .faq p{margin:8px 0 4px;font-size:13px;line-height:1.6;color:var(--muted);max-width:70ch}
footer .soc a{text-decoration:underline;text-underline-offset:3px}

/* toast */
.toast{position:fixed;z-index:40;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,140%);background:var(--ink);color:var(--paper);padding:12px 18px;display:flex;gap:12px;align-items:center;font-size:13px;transition:transform .5s cubic-bezier(.2,.8,.2,1);white-space:nowrap}
.toast.show{transform:translate(-50%,0)}
.toast i{width:10px;height:10px;border-radius:50%;background:var(--brass)}

/* phone */
@media (max-width:820px){
  .nav a.lnk{display:none}
  .stage-in{width:100vw;right:-22vw;opacity:.98}
  .fig{height:72vh;margin-bottom:6vh}
  .tag{display:none}
  .rail{right:max(10px,calc(env(safe-area-inset-right,0px) + 10px));top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:none;gap:8px}
  .rail a span{display:none}
  .ch{align-items:flex-end;padding-block:96px 48px}
  .col{width:100%;max-width:none;background:rgba(242,239,234,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:18px;gap:14px}
  .ch.home .col{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0 0 8px;max-width:62%}
  .on-work .stage-in{right:0;width:100vw;align-items:flex-start}
  .on-work .fig{height:50vh;margin-top:60px;margin-bottom:0}
  #work h2{font-size:28px}
  #work .wk{width:118px}
  #work .film-h b{font-size:22px}
  #work.ch{padding-block:0 16px}
  .on-stage .stage-in{right:0;width:100vw;align-items:flex-start}
  .on-stage .fig{height:54vh;margin-top:56px;margin-bottom:0}
  .dk .col{background:rgba(18,11,9,.78)}
  #stage .lede{display:none}
  #stage h2{font-size:30px}
  #stage .ammo button{min-height:60px;gap:3px}
  #stage .ammo svg,#stage .ammo img{width:24px;height:24px}
  #stage .hud b{font-size:26px}
  #stage.ch{padding-block:0 16px}
  .on-stage .theatre::after{background:linear-gradient(to top,rgba(18,11,9,.9) 0%,rgba(18,11,9,.55) 45%,rgba(18,11,9,.15) 70%,rgba(18,11,9,.35) 100%)}
  .on-stage .theatre img{transform:scale(1.35) translateX(2%);transform-origin:50% 55%}
  .bar-ch .ch-in{justify-content:flex-start}
  .bar-ch .col{width:100%}
  .on-club .col{background:rgba(14,9,6,.8)}
  #club h2{font-size:32px}
  .pub img{top:22vh;height:calc(78vh + var(--xtra));object-position:50% 0}
  .pub::before{content:"";position:absolute;left:0;right:0;top:0;height:30vh;background:linear-gradient(to bottom,#0e0906 60%,rgba(14,9,6,0));z-index:1}
  .pub::after{background:linear-gradient(to top,rgba(14,9,6,.92) 0%,rgba(14,9,6,.5) 40%,rgba(14,9,6,.1) 62%,rgba(14,9,6,.3) 100%)}
  .glass{left:8vw;bottom:auto;top:46vh;width:16vw}
  .bub{left:14px;right:14px;top:calc(80px + env(safe-area-inset-top,0px));width:auto;padding:16px 18px 12px;border-radius:26px}
  .bub .tail{right:auto;left:46%;top:auto;bottom:-44px;transform:rotate(80deg)}
  .bub p{font-size:19px;min-height:0}
  .bub .btn{height:42px}
  .drinks button{min-height:64px;gap:4px}
  .drinks img{width:26px;height:26px}
  .bar-ch .card{max-width:none}
  .card{aspect-ratio:1.7;padding:16px}
  .card .no{font-size:30px}
  .ch.home h1{font-size:44px}
  .lede{font-size:16px}
  .works{margin-right:-22px}
  .tl li{grid-template-columns:64px minmax(0,1fr);font-size:14px;padding:8px 0}
  .tl b{font-size:17px}
  .facts b{font-size:20px}
  .clips{gap:10px}
  .ap{grid-template-columns:56px minmax(0,1fr) auto;gap:10px}
  .ap .d b{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .rv,.fig img,.btn,.wk .pst,.clip .th img,.toast{transition:none}
  .on-club .bub.v,.bub.ready #bubNext:not([disabled]){animation:none}
  .pre .rv{transform:none;opacity:1}
}