@font-face{font-family:Playfair;src:url(fonts/playfair.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --wall:#F4F3F0; --ink:#111112; --accent:#111112;
  --dim:color-mix(in oklab,var(--ink) 62%,transparent);
  --line:color-mix(in oklab,var(--ink) 14%,transparent);
  --t0:13px; --t1:16px; --t2:20px; --t3:25px; --t4:31px; --t5:39px; --t6:49px; --t7:61px; --t8:76px; --t9:95px;
  --s1:8px; --s2:16px; --s3:32px; --s4:64px; --s5:128px;
  --gut:clamp(20px,5vw,80px);
  --ease:cubic-bezier(.16,1,.3,1);
  --serif:Playfair,"Iowan Old Style",Georgia,serif;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wall);color:var(--ink);font:400 var(--t1)/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,p,ol,dl,dd{margin:0;padding:0}
ol{list-style:none}
a{color:inherit;text-decoration:none}
h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
p{text-wrap:pretty}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:var(--s2);top:var(--s2);z-index:30;background:var(--ink);color:var(--wall);padding:12px 18px;border-radius:99px;font-size:var(--t0);transform:translateY(-200%)}
.skip:focus{transform:none}
.k{font-size:var(--t0);letter-spacing:.02em;color:var(--dim)}

/* header */
#bar{position:absolute;inset:0 0 auto 0;z-index:10;display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--gut);padding-top:max(var(--s2),env(safe-area-inset-top));transition:opacity .9s var(--ease)}
.mark{font:500 var(--t2)/1 var(--serif);letter-spacing:-.01em}
.mark a{display:inline-flex;align-items:center;min-height:44px}
.open{display:flex;align-items:center;gap:8px;font-size:var(--t0);color:var(--dim);margin-right:auto}
.open i{width:7px;height:7px;border-radius:50%;background:var(--accent);transition:background-color .9s var(--ease)}
#bar nav{display:flex;gap:var(--s3);font-size:var(--t0)}
#bar nav a,#foot a{min-height:44px;display:inline-flex;align-items:center;background:linear-gradient(currentColor,currentColor) 0 72%/0 1px no-repeat;transition:background-size .3s var(--ease)}
#bar nav a:hover,#foot a:hover{background-size:100% 1px}

/* the room */
#room{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:var(--wall)}
#wall{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.4s var(--ease)}
html.ready #wall{opacity:1}
#nogl{display:none}
html.nogl #wall{display:none}
html.nogl #nogl{display:block;position:absolute;left:var(--sx);top:var(--sy);width:var(--s);height:var(--s);background:conic-gradient(from 45deg,#E63B2E 25%,#1D4ED8 0 50%,#F5B700 0 75%,#111 0)}
#chair{position:absolute;left:var(--cx);top:var(--cy);width:var(--cw);height:var(--ch);opacity:var(--co,1);pointer-events:none}
#chair svg{width:100%;height:100%;display:block;overflow:visible}
#chair::after{content:"";position:absolute;left:-6%;right:-10%;bottom:-3.5%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(10,10,12,.34),transparent);z-index:-1}
#series{position:absolute;left:var(--tx);top:var(--sy);height:var(--s);display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);
  font:400 var(--tf)/1 var(--serif);letter-spacing:-.01em;color:var(--accent);opacity:var(--co,1);white-space:nowrap;pointer-events:none;transition:color .9s var(--ease)}
#series span{display:block;transition:opacity .6s var(--ease)}
#series.swap span{opacity:0}

#label{position:absolute;right:var(--gut);bottom:calc(var(--floor) + 28px);width:230px;display:grid;gap:6px;font-size:var(--t0);line-height:1.45}
#label .no{display:flex;justify-content:space-between;align-items:center;font-variant-numeric:tabular-nums;color:var(--dim)}
#l-state{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
#l-state::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
#l-state:not(.live)::before{background:none;box-shadow:inset 0 0 0 1px var(--ink)}
#label .ti{font:400 var(--t3)/1.1 var(--serif);letter-spacing:-.01em}
#label .me{color:var(--dim)}
#label .bar{height:1px;background:var(--line);margin-top:6px;overflow:hidden}
#l-bar{display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(0)}

#ctl{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:4px;border-radius:99px;
  background:color-mix(in oklab,var(--wall) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 1px var(--line);transition:opacity .9s var(--ease);white-space:nowrap}
#ctl button{min-height:44px;padding:0 16px;border:0;border-radius:99px;background:none;font-size:var(--t0);font-weight:500;cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease)}
#ctl button:hover:not(:disabled){background:color-mix(in oklab,var(--ink) 8%,transparent)}
#ctl button[aria-pressed=true],#ctl button[aria-pressed=true]:hover:not(:disabled){background:var(--ink);color:var(--wall)}
#ctl button:disabled{opacity:.35;cursor:default}
#ctl .div{width:1px;height:20px;background:var(--line);margin:0 4px}

/* kiosk: the room clears to just the wall */
html.kiosk #bar,html.kiosk #ctl,html.kiosk #label{opacity:0;pointer-events:none}
html.kiosk.awake #ctl,html.kiosk.awake #label{opacity:1;pointer-events:auto}

/* the show */
main>section:not(#room){padding:var(--s5) var(--gut);border-top:1px solid var(--line)}
#show{display:grid;gap:var(--s4)}
#show h2{font-size:var(--t8);max-width:18ch}
.count{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:var(--s3)}
.num{font:300 var(--t9)/1 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
#count{display:flex}
#count .d{height:1em;overflow:hidden}
#count .d b{display:block;font-weight:inherit;transition:transform 1.25s var(--ease)}
#count .d b i{display:block;height:1em;font-style:normal}
.cap{max-width:34ch;color:var(--dim);padding-bottom:10px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.three li{border-top:1px solid var(--line);padding-top:var(--s2);display:grid;gap:var(--s2);align-content:start}
.three h3{font-size:var(--t3)}
.three p{color:var(--dim)}

/* program */
#program{display:grid;gap:var(--s4)}
.prog-head{display:grid;gap:var(--s2);max-width:34rem}
.prog-head h2{font-size:var(--t7)}
.prog-head p:not(.k){color:var(--dim)}
#grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
#grid button{display:grid;gap:var(--s2);width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer}
#grid .th{aspect-ratio:1;background:#e9e8e4;overflow:hidden;position:relative}
#grid img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
#grid button:hover img,#grid button:focus-visible img{transform:scale(1.045)}
#grid .nm{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2)}
#grid .nm b{font:400 var(--t3)/1.1 var(--serif);letter-spacing:-.01em}
#grid .nm i{font-style:normal;font-size:var(--t0);color:var(--dim);font-variant-numeric:tabular-nums}
#grid .ds{font-size:var(--t0);color:var(--dim);margin-top:-8px}

/* visit */
#visit{display:grid;gap:var(--s4)}
.facts div{display:grid;grid-template-columns:minmax(120px,1fr) 3fr;align-items:baseline;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line)}
.facts div:last-child{border-bottom:1px solid var(--line)}
.facts dt{font-size:var(--t0);color:var(--dim)}
.facts dd{font:400 var(--t7)/1.05 var(--serif);letter-spacing:-.02em}
.hang{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.hang p{max-width:44ch;color:var(--dim)}
.pill{border:1px solid var(--ink);background:var(--ink);color:var(--wall);border-radius:99px;min-height:56px;padding:0 28px;font-weight:500;cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease)}
.pill:hover{background:none;color:var(--ink)}

#foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s3) var(--gut) var(--s4);border-top:1px solid var(--line);font-size:var(--t0);color:var(--dim)}
#foot nav{display:flex;gap:0 var(--s3);flex-wrap:wrap}
#foot a{color:var(--ink)}
#toast{position:fixed;left:50%;bottom:84px;transform:translate(-50%,12px);z-index:40;background:var(--ink);color:var(--wall);font-size:var(--t0);padding:10px 16px;border-radius:99px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
#toast.on{opacity:1;transform:translate(-50%,0)}

html.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*60ms)}
html.js .rv.in{opacity:1;transform:none}

@media (max-width:1000px){
  #grid{grid-template-columns:repeat(3,1fr)}
  #show h2{font-size:var(--t7)}
  .facts dd{font-size:var(--t6)}
}
@media (max-width:700px){
  #bar nav{display:none}
  #label{right:var(--gut);left:42vw;bottom:auto;top:calc(100% - var(--floor) + 18px);width:auto}
  #label .me{display:none}
  #ctl{gap:0}
  #ctl button{padding:0 11px}
  #ctl .div,#b-link{display:none}
  main>section:not(#room){padding:var(--s4) var(--gut) var(--s5)}
  #show h2{font-size:var(--t5)}
  .count{grid-template-columns:1fr;gap:var(--s1)}
  .num{font-size:var(--t8)}
  .three{grid-template-columns:1fr}
  .prog-head h2{font-size:var(--t5)}
  #grid{grid-template-columns:repeat(2,1fr);gap:var(--s3) var(--s2)}
  #grid .nm{flex-direction:column;gap:2px}
  #grid .nm b{font-size:var(--t2)}
  #grid .ds{display:none}
  .facts div{grid-template-columns:1fr;gap:var(--s1);padding:var(--s2) 0}
  .facts dd{font-size:var(--t4)}
  #foot{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  html.js .rv{opacity:1;transform:none}
}