/* An immersive light garden. Keep the room's walking and responsive geometry. */
:root {
  --ink:#faf4ff;
  --muted:#b3a7c9;
  --paper:#130e24;
  --accent:#d0b4ff;
  --neon:#c6ff84;
}
body { background:#100b20; }
.site-header {
  position:relative;
  z-index:10;
  height:76px;
  margin:0;
  padding:0 4.3%;
  background:#100b20;
  border-bottom:1px solid #e4caff18;
}
.wordmark { color:#faf4ff; font-size:13px; letter-spacing:1.5px; }
.wordmark:before { content:'✳'; color:var(--neon); font-size:30px; margin-right:4px; font-weight:400; }
.header-actions { display:flex; align-items:center; gap:28px; }
.text-button, .entrance-label .text-button { color:#f8f0ff; border-color:#b898e05c; }
#motion-toggle { background:none; color:#b8aaca; font-size:12px; padding:10px 0; }
#motion-toggle:hover { color:#fff; }
button:focus-visible,a:focus-visible { outline:2px solid var(--neon); outline-offset:6px; }
.gallery { background:#100b20; border:0; isolation:isolate; }
#light-field { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.gallery-viewport { z-index:1; }
.gallery-world { background:transparent; }
.floor {
  border:0;
  background:linear-gradient(180deg,#b093f008,#8c53d014 40%,#100b2020);
  box-shadow:none;
}
.entrance-label { z-index:2; width:77vw; }
.entrance-label h1 {
  max-width:100%;
  font-family:Georgia, "Times New Roman", serif;
  font-style:italic;
  font-size:clamp(58px, 8.6vw, 132px);
  font-weight:400;
  line-height:1.01;
  letter-spacing:-.045em;
  margin:0 0 25px;
  color:#fff6fe;
  text-shadow:0 0 70px #d574ff20;
}
.entrance-label h1 em {
  font-style:normal;
  background:linear-gradient(100deg,#ffadcd 0%,#dc9dff 50%,#8febff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.entrance-label .entrance-note { font:400 17px/1.7 "Helvetica Neue",Arial,sans-serif; letter-spacing:0; color:#d6c7e6; max-width:330px; margin:0 0 32px; }
.entrance-label .text-button {
  display:flex; align-items:center; gap:30px;
  background:var(--neon); color:#211136;
  border:0; border-radius:50px;
  padding:17px 24px; font-size:16px; font-weight:600;
  box-shadow:0 0 40px #c6ff8414;
  transition:box-shadow .2s,transform .2s;
}
.entrance-label .text-button:hover { transform:translateY(-3px); box-shadow:0 0 35px #c6ff843a; }
.entrance-label .text-button span { margin:0; font-size:25px; }
.painting { --aura:#ba6cff; }
.painting:nth-child(2) { --aura:#ff8cb4; }
.painting:nth-child(3) { --aura:#6cf2da; }
.painting:nth-child(4) { --aura:#ffbd7e; }
.painting:nth-child(5) { --aura:#8d9aff; }
.painting:nth-child(6) { --aura:#e9ee9d; }
.painting:before {
  width:calc(var(--art-width) + 180px); height:calc(var(--art-height) + 160px);
  top:-80px; left:-90px;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--aura) 18%,transparent),transparent 68%);
  filter:blur(20px);
}
.art-button,
.painting:nth-child(2n) .art-button,
.painting:nth-child(3n) .art-button {
  padding:0; border:1px solid #d1b5ff40;
  border-radius:46% 46% 12px 12px / 30% 30% 12px 12px;
  background:#151025;
  box-shadow:0 0 40px color-mix(in srgb,var(--aura) 12%,transparent),0 22px 60px #0005;
  transform:rotate(-2deg);
  transition:transform .35s,border-color .35s,box-shadow .35s;
}
.painting:nth-child(2n) .art-button { transform:rotate(2deg); border-radius:12px 12px 46% 46% / 12px 12px 30% 30%; }
.art-button img { border-radius:inherit; }
.painting.is-near .art-button,.art-button:hover {
  transform:rotate(0deg) translateY(-5px);
  border-color:var(--aura);
  box-shadow:0 0 55px color-mix(in srgb,var(--aura) 24%,transparent),0 22px 60px #0006;
}
.placard { background:none; border:0; padding:18px 6px; margin-bottom:24px; }
.placard h2 { font:italic 400 31px/1.06 Georgia, "Times New Roman", serif; letter-spacing:-1.2px; color:#fff4ff; }
.placard p { color:#bdb0cf; font:500 12px/1.5 "Helvetica Neue", Arial, sans-serif; letter-spacing:1.6px; text-transform:uppercase; }
.painting.is-near .placard h2 { color:var(--aura); }
.end-label { color:#f6edff; }
.end-label p { font-size:44px; font-weight:650; }
.end-label .eyebrow { color:#c6ff84; }
.avatar { filter:drop-shadow(0 0 12px #cbb5ff6b); }
@media(max-width:600px) {
  .avatar { cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
}
.avatar-shadow { background:#d4b2ff4d; box-shadow:0 0 18px #ab78ff80; }
.body { background:#be9dff; }
.arm { background:linear-gradient(#be9dff 78%,#ecc5a5 78%); }
.hair { background:#30243a; }
.leg { background:#50435c; }
.leg:after { background:#f2dbff; }
.you-label { color:#e1d1fa; }
.furnishing { filter:drop-shadow(0 0 10px #b485ff25); }
.bench-seat { background:linear-gradient(#a895cc 0 40%,#746291 40%); box-shadow:0 0 12px #ba90ff20; }
.bench-leg { background:#564268; }
.plant-pot { background:linear-gradient(90deg,#534269,#9370a8); box-shadow:inset 0 5px #bba1d2; }
.plant-stem { background:#899b91; }
.leaf { background:#97d5ba; box-shadow:0 0 15px #8ce6b425; }
.leaf-two { background:#d4f6ac; }
.leaf-three { background:#5a6d67; }
.furnishing:after { background:#c8a8f025; }
.inspect-button,
.inspect-button:hover {
  z-index:5; background:#c6ff84; color:#211136;
  border:1px solid #c6ff84; box-shadow:0 0 30px #c6ff8420;
  font-weight:600;
}
.walk-controls { z-index:5; }
.walk-controls, .walk-controls button {
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.walk-controls button { display:grid; place-items:center; touch-action:none; }
.walk-controls svg {
  width:23px; height:23px; pointer-events:none;
  fill:none; stroke:currentColor; stroke-width:1.25;
  stroke-linecap:round; stroke-linejoin:round;
}
.walk-controls button,
kbd,.chapter-map button {
  color:#ece0ff; background:#271b3ad9; border-color:#b39bcd50;
  backdrop-filter:blur(12px);
}
.walk-controls button:hover,.chapter-map button:hover { background:#503670; border-color:#c6a0ff; }
.walk-controls button:active { background:#78569a; }
.gallery-navigation { z-index:5; }
.instructions { color:#b7a7ca; }
.chapter-map:before { background:#c7a4ef30; }
.chapter-map button[aria-current=true] { background:#d0b4ff; color:#211136; border-color:#d0b4ff; outline-color:#d0b4ff26; }
.chapter-map button { transition:background .2s,transform .2s; }
.chapter-map button:hover { transform:translateY(-3px); }
.light-hint { position:absolute; right:26px; bottom:23px; z-index:4; color:#ad9abc; font-size:11px; letter-spacing:.4px; pointer-events:none; }
dialog { background:#1c132c; color:#f7eeff; border-color:#b392d844; box-shadow:0 30px 100px #0008; border-radius:20px; }
dialog::backdrop { background:#090413c9; backdrop-filter:blur(12px); }
.close-button { color:#f5e9ff; background:#312143; border-radius:50%; }
.detail-art { background:radial-gradient(ellipse at center,#513365,#171022); }
.detail-art img { border:1px solid #c6a5f14d; border-radius:140px 140px 8px 8px; box-shadow:0 0 40px #9d62ee26; }
.detail-copy h2 { color:#fff3ff; font-weight:650; }
.detail-subtitle { color:#d0b4ff; }
.small-rule { background:#c6ff84; }
.detail-copy>p:not(.eyebrow):not(.detail-subtitle),#about-dialog>p:not(.eyebrow) { color:#d2c3df; }
.detail-copy .placeholder-note { color:#a18ead!important; }
.detail-navigation .text-button,#about-dialog .text-button { color:#c6ff84; border-color:#c6ff8450; }
@media(max-width:1050px) { .light-hint { display:none; } }
@media(max-width:600px) {
  .site-header { height:71px; padding:0 18px; }
  .wordmark { font-size:10px; letter-spacing:.4px; gap:5px; }
  .wordmark:before { font-size:23px; }
  .header-actions { gap:17px; }
  #motion-toggle { font-size:10px; }
  .header-actions .text-button { font-size:12px; }
  .header-actions .text-button span { margin-left:5px; }
  .entrance-label { width:76vw; }
  .entrance-label h1 { font-size:clamp(38px, 10.7vw, 64px); margin-bottom:22px; }
  .entrance-label .entrance-note { font-size:14px; max-width:220px; margin-bottom:25px; }
  .entrance-label .text-button { padding:13px 18px; font-size:14px; gap:15px; }
  .placard { padding:0; margin:0; }
  .placard h2 { font-size:27px; }
  .placard p { font-size:12px; }
  .detail-art img { border-radius:90px 90px 8px 8px; }
}
@media(prefers-reduced-motion:reduce) {
  .art-button,.painting:nth-child(2n) .art-button { transform:none; }
}

/* Jump the figure while its shadow stays on the gallery floor. */
.person { translate:0 calc(-1 * var(--jump-height, 0px)); }
.avatar-shadow { transform:scale(var(--shadow-scale, 1)); opacity:var(--shadow-opacity, 1); }
.avatar.jumping .arm-left { animation:none; transform:rotate(32deg); }
.avatar.jumping .arm-right { animation:none; transform:rotate(-32deg); }
.avatar.jumping .leg-left { animation:none; transform:rotate(10deg); }
.avatar.jumping .leg-right { animation:none; transform:rotate(-10deg); }
.gallery-viewport:focus-visible { outline:1px solid #c6ff8460; outline-offset:-4px; }

/* An artwork and its wall label, suspended separately in the gallery. */
#painting-dialog {
  width:min(1160px, 94vw);
  max-height:94dvh;
  padding:58px 20px 28px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow-y:auto;
}
#painting-dialog[open] {
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);
  align-items:center;
  gap:clamp(28px, 5vw, 72px);
}
#painting-dialog::backdrop { background:#110b20e6; backdrop-filter:blur(18px); }
#painting-dialog .close-button {
  top:0; right:20px; width:40px; height:40px;
  background:transparent; border:1px solid #dbc7f26b;
}
#painting-dialog .close-button:hover { background:#ffffff18; }
#painting-dialog .detail-art { padding:0; background:none; min-width:0; }
#painting-dialog .detail-art img {
  width:auto; height:auto; max-width:100%; max-height:72dvh;
  object-fit:contain; border:0; border-radius:0;
  box-shadow:0 20px 60px #0006, 0 0 55px #bb85f51a;
}
.detail-label-group { min-width:0; padding-top:36px; }
#painting-dialog .detail-copy {
  position:relative;
  padding:38px clamp(26px, 3.3vw, 44px) 36px;
  background:#f3eddf;
  color:#342740;
  box-shadow:0 16px 40px #0003;
}
#painting-dialog .detail-copy::before {
  content:none;
}
#painting-dialog .detail-copy h2 {
  font:italic 400 clamp(32px, 3.7vw, 46px)/1.06 Georgia, "Times New Roman", serif;
  letter-spacing:-1.2px; color:#342740; margin:0 0 16px;
}
#painting-dialog .detail-subtitle {
  font:500 12px/1.5 "Helvetica Neue", Arial, sans-serif;
  letter-spacing:1.6px; text-transform:uppercase; color:#735981; margin:0;
}
#painting-dialog .small-rule { width:100%; background:#34274030; margin:24px 0; }
#painting-dialog #detail-description {
  font:400 15px/1.8 "Helvetica Neue", Arial, sans-serif;
  color:#463c49; margin:0;
}
#painting-dialog .detail-navigation { margin:26px 0 0; }
#painting-dialog .detail-navigation .text-button {
  font-size:13px; color:#e3d4f2; border-color:#e3d4f23d; padding-bottom:7px;
}
#painting-dialog .detail-navigation .text-button:hover { color:#c6ff84; border-color:#c6ff84; }
@media(max-width:700px) {
  #painting-dialog { width:94vw; padding:54px 14px 24px; }
  #painting-dialog[open] { grid-template-columns:1fr; gap:28px; }
  #painting-dialog .close-button { right:14px; }
  #painting-dialog .detail-art img { max-height:47dvh; }
  .detail-label-group { padding-top:0; }
  #painting-dialog .detail-copy { padding:28px; }
  #painting-dialog .detail-copy h2 { font-size:36px; }
}

#about-dialog > p:last-of-type:not(.eyebrow) {
  font-size:12px;
  line-height:1.6;
  color:#b3a4c2;
  margin-top:24px;
}
#about-dialog > p:last-of-type .text-button { font-size:inherit; }

/* Ceiling-hung fabric signs share the room with the artwork. */
.site-header {
  position:absolute; inset:0 0 auto; height:0;
  margin:0; padding:0 5vw; border:0; background:transparent;
  align-items:flex-start; pointer-events:none;
}
.gallery { height:100dvh; }
/* Leave a clear band below the hanging signs, borrowing room from the floor. */
:root {
  --ceiling-clearance:72px;
  --art-height:clamp(240px, calc(100dvh - 490px), 550px);
  --floor-height:calc(max(180px, (100% - var(--art-height) + 50px) / 2) - var(--ceiling-clearance));
}
.painting { top:calc((100% - 180px) / 2 + var(--ceiling-clearance)); }
.entrance-label { top:var(--ceiling-clearance); }
.site-header .header-actions { align-items:flex-start; gap:26px; }
.ceiling-banner {
  --hang:34px; --banner-width:200px;
  position:relative; display:block; width:var(--banner-width);
  padding-top:var(--hang); pointer-events:auto;
  filter:drop-shadow(0 5px 12px #0002);
}
.ceiling-banner::before {
  content:""; position:absolute; top:0; left:18%;
  width:64%; height:var(--hang);
  border-left:1px solid #d4cebf66; border-right:1px solid #d4cebf66;
  pointer-events:none;
}
.ceiling-banner::after {
  content:""; position:absolute; top:calc(var(--hang) - 1px); left:0;
  width:100%; height:1px;
  background:#b9b2a5; pointer-events:none;
}
.site-header .banner-cloth {
  position:relative; display:block; width:100%; margin:0; border:0;
  color:#382b47; text-align:left;
  background:#dce8f0;
  font:italic 400 28px/1 Georgia,"Times New Roman",serif;
  padding:18px 22px 24px;
  min-height:92px;
  clip-path:polygon(0 0,100% 0,100% 94%,65% 100%,0 94%);
  transition:filter .2s;
}
.site-header .banner-cloth:hover { filter:brightness(1.08); }
.banner-motion { --banner-width:124px; }
.site-header #motion-toggle {
  padding:22px 20px; min-height:92px;
  font:italic 400 20px/1.2 Georgia,"Times New Roman",serif;
  color:#382b47; background:#dce8f0;
}
.banner-about { --banner-width:120px; }
.site-header #about-button {
  padding:22px 20px; min-height:92px;
  font-size:20px; background:#dce8f0;
}
.site-header #about-button span { display:inline; margin-left:8px; font:400 16px/1 Arial,sans-serif; }
.site-header button:focus-visible { outline:0; filter:brightness(1.15); box-shadow:inset 0 0 0 3px #69449b; }
.site-header .banner-home:focus-visible { outline:2px solid var(--neon); outline-offset:7px; }
@media(max-width:600px) {
  :root {
    --ceiling-clearance:40px;
    --art-height:clamp(200px, calc(100dvh - 500px), 350px);
    --floor-height:210px;
  }
  .painting { top:calc((100% - 220px) / 2 + var(--ceiling-clearance)); }
  .site-header { padding:0 20px; }
  .site-header .header-actions { gap:14px; }
  .ceiling-banner { --hang:22px; }
  .banner-home { --banner-width:136px; }
  .site-header .banner-home .banner-cloth { min-height:80px; padding:17px 14px; font-size:23px; }
  .banner-motion { --banner-width:72px; }
  .site-header #motion-toggle { min-height:80px; padding:18px 10px; font-size:16px; }
  .banner-about { --banner-width:72px; }
  .site-header #about-button { min-height:80px; padding:18px 10px; font-size:16px; }
  .site-header #about-button span { font-size:12px; margin-left:4px; }
}
@media(max-width:360px) {
  .site-header { padding:0 13px; }
  .site-header .header-actions { gap:10px; }
  .banner-home { --banner-width:120px; }
  .site-header .banner-home .banner-cloth { font-size:22px; }
}