/* Concept: walk through a museum. A dim lobby, then three galleries with real wall colors:
   oxblood salon, Cranbrook-era bottle green, contemporary white cube. Works are never cropped. */
:root{color-scheme:dark;
--lobby:#22282c;--lobby-ink:#f1eee8;--lobby-muted:#b5bcbd;--gilt:#d8b268;
--oxblood:#4c1a20;--bottle:#15372e;--cube:#ebeae5;--char:#16191b;
--display:'Bodoni Moda',Didot,'Times New Roman',serif;--text:'Newsreader',Georgia,serif;--ui:'Hanken Grotesk',system-ui,sans-serif;
--wall:var(--lobby);--ink:var(--lobby-ink);--muted:var(--lobby-muted);--accent:var(--gilt);--line:rgba(255,255,255,.2);--glow:rgba(255,255,255,.075)}
.r1{--wall:var(--oxblood);--ink:#f6ebdf;--muted:#d6bdae;--accent:#e6bd70;--line:rgba(255,255,255,.22)}
.r2{--wall:var(--bottle);--ink:#ecf2e8;--muted:#aec6b6;--accent:#e2bf67;--line:rgba(255,255,255,.2)}
.r3{--wall:var(--cube);--ink:var(--char);--muted:#565c5e;--accent:#8b1e2c;--line:rgba(0,0,0,.2);--glow:rgba(255,255,255,.75);color-scheme:light}
@view-transition{navigation:auto}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wall);color:var(--ink);font:400 1.125rem/1.6 var(--text)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;text-wrap:balance;margin:0}
.wrap{width:100%;max-width:1480px;margin-inline:auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.top{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;align-items:baseline;padding-block:20px}
.brand{font:500 1.25rem var(--display);text-decoration:none}
.top nav{display:flex;gap:22px;font:500 .9rem var(--ui)}.top nav a{text-decoration:none}.top nav a:hover{text-decoration:underline}

/* Hero: one painting at a time, the wall tinted by the work itself */
.lobby{position:relative;overflow:hidden;isolation:isolate}
.ambient{position:absolute;inset:-12%;z-index:-1;background-size:cover;background-position:center;filter:blur(70px) saturate(1.2);opacity:0;transition:opacity 1.4s ease}
.ambient.on{opacity:.48}
.lobby::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 62% at 34% 34%,transparent,rgba(20,24,27,.72))}
.show{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,1fr);gap:clamp(28px,5vw,88px);align-items:center;padding-block:12px 8px}
.stage{display:grid;place-items:center;height:clamp(340px,60vh,640px);min-width:0}
.stage figure{grid-area:1/1;margin:0;height:100%;width:100%;display:grid;place-items:center;opacity:0;transition:opacity 1.1s ease;pointer-events:none;min-height:0}
.stage figure.on{opacity:1;pointer-events:auto}
.stage a{display:block;height:100%;max-width:100%;min-height:0}
.stage img{height:100%;width:auto;max-width:100%;object-fit:contain;box-shadow:0 34px 70px -18px rgba(0,0,0,.72),0 3px 8px rgba(0,0,0,.5)}
.plaques{display:grid;min-width:0}
.plaque{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .7s ease}
.plaque.on{opacity:1;visibility:visible}
.plaque small{display:block;font:500 .9rem var(--ui);color:var(--accent)}
.plaque h2{font-size:clamp(2.1rem,3.4vw,3.3rem);margin:10px 0 14px}
.plaque p{margin:0 0 14px;max-width:32em}
.plaque cite{display:block;font:400 .92rem/1.45 var(--ui);color:var(--muted);font-style:normal;margin-bottom:16px}.plaque cite i{color:var(--ink)}
.visit{font:500 1rem var(--ui);text-underline-offset:.3em}
.controls{display:flex;align-items:center;gap:14px;margin-top:22px;font:500 .88rem var(--ui);color:var(--muted);min-height:32px}
.controls button{border:1px solid var(--line);padding:4px 12px;border-radius:99px;color:var(--ink)}
.controls button:hover{border-color:var(--ink)}
.controls output{font-variant-numeric:tabular-nums}
.marquee{font-size:clamp(3.6rem,13.4vw,13.5rem);line-height:.9;letter-spacing:-.02em;padding-block:14px 26px;white-space:nowrap;font-weight:400}
.intro{max-width:36em;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.35;margin:0;padding-bottom:44px}

/* Floor plan: sticky navigation and search */
.finder{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:#1a1f22;color:#f1eee8;--ink:#f1eee8;--muted:#b5bcbd;--line:rgba(255,255,255,.22);font:500 .9rem var(--ui)}
.finder .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding-block:10px}
.plan{display:flex;gap:4px;flex:0 1 auto;min-width:0}
.plan a{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;text-decoration:none;border-radius:4px}
.plan a::before{content:"";width:14px;height:14px;background:var(--s);border:1px solid rgba(255,255,255,.45)}
.plan a:hover,.plan a[aria-current=true]{background:rgba(255,255,255,.14)}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-left:auto;min-width:0}
.tools input,.tools select{font:400 .92rem var(--ui);color:#f1eee8;background:#2b3236;border:1px solid var(--line);padding:6px 10px;border-radius:4px;max-width:100%;min-width:0}
.tools input{width:220px}.tools input::placeholder{color:#b5bcbd}
#status{color:var(--muted);min-width:5.2em;font-variant-numeric:tabular-nums}

/* Rooms */
.room{background-color:var(--wall);background-image:radial-gradient(520px circle at var(--mx,-999px) var(--my,-999px),var(--glow),transparent 70%);color:var(--ink);padding-block:clamp(56px,8vw,120px)}
.roomhead{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(40px,6vw,84px)}
.roomhead h2{font-size:clamp(3.2rem,8.5vw,8.5rem);letter-spacing:-.015em}
.roomhead .span{display:block;letter-spacing:normal;font:500 1rem var(--ui);color:var(--accent);margin-bottom:12px}
.walltext{margin:0;max-width:30em}
.hang{columns:3 300px;column-gap:clamp(32px,4.5vw,72px);margin-bottom:clamp(48px,7vw,96px)}
.work{display:block;break-inside:avoid;text-decoration:none;margin:0 0 clamp(40px,5vw,72px)}
.frame{display:block;padding:9px;background:#23160d;box-shadow:inset 0 0 0 1px #b08d4c,0 26px 44px -16px rgba(0,0,0,.68);margin-bottom:16px;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.frame img{width:100%}
.work:hover .frame{transform:translateY(-5px)}
.work h3{font-size:1.65rem;line-height:1.1}.work:hover h3{color:var(--accent)}
.work span{display:block;font:400 .9rem/1.45 var(--ui);color:var(--muted);margin-top:5px}.work i{color:var(--ink)}
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));column-gap:clamp(32px,4.5vw,72px);border-top:1px solid var(--line)}
.who{display:block;text-decoration:none;padding-block:20px 22px;border-bottom:1px solid var(--line);min-width:0}
.who h3{font-size:clamp(1.8rem,2.8vw,2.55rem);transition:transform .35s cubic-bezier(.2,.7,.2,1),color .2s}
.who:hover h3{transform:translateX(10px);color:var(--accent)}
.who .facts{display:block;font:500 .88rem/1.4 var(--ui);color:var(--muted);margin-top:6px}
.who .line{display:block;font-size:1.04rem;line-height:1.4;margin-top:7px;max-width:34em}
.empty{font-size:1.3rem;padding-block:64px;text-align:center}

/* Artist page */
.artist{padding-block:clamp(26px,4vw,56px) clamp(56px,8vw,110px);background-color:var(--wall);background-image:radial-gradient(520px circle at var(--mx,-999px) var(--my,-999px),var(--glow),transparent 70%)}
.back{font:500 .92rem var(--ui)}
.artist h1{font-size:clamp(3.2rem,9.5vw,9.5rem);letter-spacing:-.02em;line-height:.96;margin:18px 0 18px;overflow-wrap:break-word}
.artist .lede{font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.3;max-width:30em;margin:0 0 clamp(36px,5vw,64px)}
.plates{display:grid;gap:clamp(36px,5vw,72px);justify-items:center;margin-bottom:clamp(44px,6vw,80px)}
.plates figure{margin:0;display:grid;justify-items:center;max-width:100%}
.zoom{display:block;max-width:100%;cursor:zoom-in}
.zoom .frame{margin:0;padding:clamp(7px,1vw,14px)}.zoom img{max-height:82vh;width:auto;max-width:100%}
.zoom:hover .frame{transform:translateY(-4px)}
.plates figcaption{font:400 .95rem/1.45 var(--ui);color:var(--muted);margin-top:14px;text-align:center}.plates figcaption i{color:var(--ink)}
.cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.prose{max-width:37em}.prose p{margin:0 0 1em}.prose p:first-child::first-letter{font:400 3.7em/.82 var(--display);float:left;padding:.08em .1em 0 0;color:var(--accent)}
.label{font:400 .96rem/1.5 var(--ui);background:var(--plaque,rgba(255,255,255,.07));padding:22px 24px;box-shadow:0 12px 26px -16px rgba(0,0,0,.6);position:sticky;top:76px;min-width:0}
.r3 .label{--plaque:#fff}
.label h2{font:600 .96rem var(--ui);margin:18px 0 5px;color:var(--accent)}.label h2:first-child{margin-top:0}
.label ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.elsewhere{font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.4;border-block:1px solid var(--line);padding-block:22px;margin:0 0 clamp(36px,5vw,60px);max-width:44em}
.elsewhere ul{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:6px;font:500 1rem var(--ui)}
.turn{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);margin-top:clamp(44px,6vw,80px);padding-top:22px}
.turn a{text-decoration:none;font:400 clamp(1.25rem,2.4vw,2rem)/1.1 var(--display);min-width:0}.turn a:hover{color:var(--accent)}
.turn small{display:block;font:500 .85rem var(--ui);color:var(--muted);margin-bottom:6px}.turn a:last-child{text-align:right}
dialog{border:0;padding:0;background:transparent;color:#f1eee8;max-width:100vw;max-height:100vh;width:100vw;height:100vh;overflow:hidden}
dialog::backdrop{background:rgba(13,15,17,.95)}
dialog[open]{display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;gap:10px;padding:20px}
dialog img{min-height:0;height:100%;width:auto;max-width:100%;object-fit:contain}
dialog footer{display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:center;font:400 .95rem var(--ui);text-align:center}
dialog button{border:1px solid rgba(255,255,255,.5);border-radius:99px;padding:5px 15px;font:500 .9rem var(--ui)}
.page{padding-block:clamp(36px,6vw,80px) clamp(64px,8vw,110px)}.page h1{font-size:clamp(3rem,8vw,7rem);margin-bottom:32px}.page h2{font-size:2.2rem;margin:42px 0 12px}.page .prose p:first-child::first-letter{all:unset}
.page ul{padding-left:1.1em}
.foot{background:#1a1f22;color:#b5bcbd;font:400 .9rem/1.6 var(--ui);padding-block:26px 44px}.foot p{margin:0;max-width:60em}
[hidden]{display:none!important}
@media(max-width:900px){.show{grid-template-columns:minmax(0,1fr)}.stage{height:clamp(280px,54vh,520px)}.roomhead,.cols{grid-template-columns:minmax(0,1fr)}.label{position:static}.tools{margin-left:0;width:100%}.tools input{flex:1 1 150px;width:auto}.tools select{flex:1 1 120px}.marquee{white-space:normal}.plan{width:100%}.plan a{flex:1;justify-content:center;padding-inline:6px}html{scroll-padding-top:150px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}@view-transition{navigation:none}}