/* Dusk gallery: an ink-violet perimeter around a warm, neutral exhibition wall. */
html[data-surface="dusk"] {
  --paper: #302d37;
  --ink: #e9e4dd;
  --muted: #c2b9c7;
  --line: #5a515f;
  --accent: #c5b1d6;
  --soft: #4c4058;
  --wall: #494548;
  --wall-edge: #625d65;
  color-scheme: dark;
  background: #24232c;
}
html[data-surface="dusk"] body {
  min-height: 100svh;
  isolation: isolate;
  background:
    linear-gradient(90deg, #211d29 0, #28232f 9%, transparent 22%, transparent 80%, #231e2c 100%),
    linear-gradient(180deg, #302a39 0, #24232c 500px, #23212b 100%);
}
html[data-surface="dusk"] ::selection { background: #72627f; color: #fff9f0; }
html[data-surface="dusk"] .site-header {
  position: relative;
  z-index: 2;
  background: #2a2632ed;
  border-bottom-color: #62596d;
  box-shadow: 0 1px 0 #c7b7d31f, 0 17px 30px -25px #0d0917;
}
html[data-surface="dusk"] .site-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 5vw;
  right: 5vw;
  height: 2px;
  background: linear-gradient(90deg, transparent, #94859e 20%, #d1cbd3 52%, #8a7898 82%, transparent);
  box-shadow: 0 2px 14px #b0a0c32b;
  pointer-events: none;
}
html[data-surface="dusk"] main { position: relative; isolation: isolate; }
html[data-surface="dusk"] main::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 540px at 21% 80px, #8f7e9b1f, transparent 85%),
    linear-gradient(90deg, transparent, #38323fc7 13%, #36313bde 70%, transparent);
  pointer-events: none;
}
html[data-surface="dusk"] .trail { border-bottom: 1px solid #a294b224; margin-bottom: 18px; }
html[data-surface="dusk"] :is(.art-stage, .encounter-pair, .movement-wall, .compare-pair, .about-art) {
  position: relative;
  isolation: isolate;
}
html[data-surface="dusk"] :is(.art-stage, .encounter-pair, .movement-wall, .compare-pair, .about-art)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -24px -24px -22px;
  background:
    radial-gradient(ellipse 90% 380px at 20% 0, #d2b48c29, transparent 90%),
    linear-gradient(90deg, transparent, #51494cbd 11%, #49414ca6 84%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 24px, #000 calc(100% - 28px), transparent);
  pointer-events: none;
}
html[data-surface="dusk"] :is(.art-stage, .encounter-pair, .movement-wall, .compare-pair, .about-art)::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -21px;
  left: 10%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c4b1ce1f 55%, transparent);
  pointer-events: none;
}
html[data-surface="dusk"] .encounter { padding-top: 18px; padding-bottom: 47px; }
html[data-surface="dusk"] .encounter-copy {
  padding: 28px 0 28px 26px;
  border-left: 1px solid #8a799840;
  background: linear-gradient(90deg, #7b608b12, transparent 60%);
}
html[data-surface="dusk"] .encounter-line { color: #c2b9c5; }
html[data-surface="dusk"] .pair-heading { padding-bottom: 42px; }
html[data-surface="dusk"] .encounter-pair { margin-bottom: 46px; }
html[data-surface="dusk"] .pair-after { padding: 25px 0 0; border-top: 1px solid #78678352; }
html[data-surface="dusk"] :is(.art-main-button img, .encounter-figure img, .wall-image img, .compare-pair img, .about-art img) {
  box-shadow: 0 1px 3px #09080d59, 0 20px 42px -26px #09080d85;
}
html[data-surface="dusk"] :is(.art-zoom-hint, .wall-open) {
  color: #49404e;
  background: #e9e2d6ee;
  border: 1px solid #fff6e540;
}
html[data-surface="dusk"] :is(.stage-caption, .encounter-figure figcaption > span, .encounter-figure small, .wall-art figcaption p, .compare-pair figcaption, .about-art figcaption) { color: #c6bcc7; }
html[data-surface="dusk"] .stage-caption { margin-top: 18px; }
html[data-surface="dusk"] .room-invitation {
  background: linear-gradient(90deg, #76618415, #d9ccbc04 50%, transparent);
  border-top-color: #76688080;
  padding: 26px 20px 16px;
}
html[data-surface="dusk"] .page-title { border-bottom: 1px solid #b0a1bb1f; margin-bottom: 22px; }
html[data-surface="dusk"] .page-title aside { color: #ad9abd; }
html[data-surface="dusk"] .room-card {
  padding: 16px 16px 20px;
  background: #45404a78;
  box-shadow: inset 0 1px 0 #b1a2b438, 0 1px 0 #110b1880;
}
html[data-surface="dusk"] .room-cover { background: #484348; box-shadow: 0 8px 15px -12px #08050e; }
html[data-surface="dusk"] .room-card-header { padding-top: 3px; }
html[data-surface="dusk"] .movement-nav {
  background: #302b38ef;
  border-color: #66566e;
  box-shadow: 0 9px 18px -16px #0f0819;
  backdrop-filter: blur(12px);
}
html[data-surface="dusk"] .movement-nav button[aria-current="step"] { background: #8870982e; }
html[data-surface="dusk"] .movement-heading { margin-bottom: 58px; }
html[data-surface="dusk"] .movement + .movement { margin-top: 104px; }
html[data-surface="dusk"] .movement-wall::before { inset: -26px -24px -24px; }
html[data-surface="dusk"] .movement-wall::after { bottom: -23px; }
html[data-surface="dusk"] .movement:nth-of-type(even) .movement-wall::before {
  background: radial-gradient(ellipse 90% 380px at 20% 0, #bdb1be18, transparent 90%), linear-gradient(90deg, transparent, #49434fc2 11%, #423b48a6 84%, transparent);
}
html[data-surface="dusk"] .movement-number { color: #9e87af; }
html[data-surface="dusk"] .room-ending { padding-top: 60px; border-color: #76688080; }
html[data-surface="dusk"] .catalog-controls {
  padding: 18px 22px;
  background: #4c424f26;
  border-color: #72617940;
  box-shadow: none;
}
html[data-surface="dusk"] .search-field input { color: var(--ink); }
html[data-surface="dusk"] .search-field input::placeholder { color: #ada1b4; }
html[data-surface="dusk"] .catalog-select option { background: #37303f; color: var(--ink); }
html[data-surface="dusk"] .filter-chip[aria-pressed="true"] { background: #79638a3b; }
html[data-surface="dusk"] .filter-chip:hover { background: #7565802e; }
html[data-surface="dusk"] .art-card .card-image {
  background: #3b3540;
  border: 0;
  box-shadow: none;
}
html[data-surface="dusk"] .art-card .card-image img { box-shadow: none; }
html[data-surface="dusk"] :is(.card-version, .card-seen) { background: #e9e2d7ed; color: #504359; }
html[data-surface="dusk"] .card-save { color: #a997b6; }
html[data-surface="dusk"] .card-save[aria-pressed="true"] { color: #d6b6ee; }
html[data-surface="dusk"] .about-layout { padding-top: 82px; }
html[data-surface="dusk"] .about-art { margin-top: 12px; }
html[data-surface="dusk"] .about-copy { padding-left: 25px; border-left: 1px solid #8a799840; }
html[data-surface="dusk"] .compare-pair { margin-top: 42px; margin-bottom: 47px; }
html[data-surface="dusk"] .compare-pair.single { margin-top: 42px; margin-bottom: 47px; }
html[data-surface="dusk"] .encounter-switch { background: #29223180; box-shadow: inset 0 1px 0 #c1b0cb17; }
html[data-surface="dusk"] .outline-button[aria-pressed="true"] { background: #7c648e33; }
html[data-surface="dusk"] .trail-archive-list { background: #332d3c; border-color: #7d688e; box-shadow: 0 15px 35px #0b071a80; }
html[data-surface="dusk"] .trail-archive-list button img { background: #4b454c; }
html[data-surface="dusk"] .solid-button { color: #302634; background: #d6c5dc; }
html[data-surface="dusk"] .solid-button:hover { background: #ead7ef; }
html[data-surface="dusk"] .site-footer { background: #2c263480; border-top-color: #76688070; }
@media (max-width: 800px) {
  html[data-surface="dusk"] :is(.art-stage, .encounter-pair, .movement-wall, .compare-pair, .about-art)::before { left: -16px; right: -16px; }
  html[data-surface="dusk"] .encounter { gap: 50px; }
  html[data-surface="dusk"] .encounter-copy { border-left: 0; padding: 0; background: none; }
  html[data-surface="dusk"] .pair-after { gap: 6vw; }
  html[data-surface="dusk"] .room-card { padding: 12px 12px 18px; }
  html[data-surface="dusk"] .about-layout { padding-top: 56px; gap: 65px; }
  html[data-surface="dusk"] .about-copy { border-left: 0; padding-left: 0; }
}
@media (max-width: 520px) {
  html[data-surface="dusk"] body { background: #211d2a; }
  html[data-surface="dusk"] main::before { left: 0; right: 0; background: linear-gradient(90deg, #302a3800, #36313cc7 17%, #36313cc7 82%, #30293800); }
  html[data-surface="dusk"] .site-header::before { left: 5vw; right: 5vw; }
  html[data-surface="dusk"] .trail { margin-bottom: 0; }
  html[data-surface="dusk"] .page-wrap:has(> .encounter) .trail { margin-bottom: 12px; }
  html[data-surface="dusk"] :is(.art-stage, .encounter-pair, .movement-wall, .compare-pair, .about-art)::before {
    inset: -12px -10px -15px;
    background: radial-gradient(ellipse 140% 240px at 20% 0, #c2ab8d24, transparent), linear-gradient(90deg, #51494c1f, #51494cbd 20%, #49414c85 82%, #49414c1f);
  }
  html[data-surface="dusk"] :is(.art-stage, .encounter-pair, .movement-wall, .compare-pair, .about-art)::after { bottom: -14px; height: 1px; }
  html[data-surface="dusk"] .encounter { padding-top: 0; gap: 36px; padding-bottom: 30px; }
  html[data-surface="dusk"] .pair-heading { padding-bottom: 25px; }
  html[data-surface="dusk"] .encounter-pair { margin-bottom: 31px; }
  html[data-surface="dusk"] .encounter-figure:last-child { margin-bottom: 0; }
  html[data-surface="dusk"] .pair-after { padding-top: 20px; }
  html[data-surface="dusk"] .room-invitation { padding: 21px 0 10px; }
  html[data-surface="dusk"] .page-title { margin-bottom: 17px; }
  html[data-surface="dusk"] .room-card { padding: 11px 11px 18px; }
  html[data-surface="dusk"] .rooms-page .room-grid { gap: 27px; }
  html[data-surface="dusk"] .movement-heading { margin-bottom: 38px; }
  html[data-surface="dusk"] .movement + .movement { margin-top: 60px; }
  html[data-surface="dusk"] .movement-wall .wall-art:last-child { margin-bottom: 0; }
  html[data-surface="dusk"] .catalog-controls { padding: 10px 10px 14px; }
  html[data-surface="dusk"] .compare-pair, html[data-surface="dusk"] .compare-pair.single { margin-top: 27px; margin-bottom: 33px; }
  html[data-surface="dusk"] .about-layout { padding: 44px 7vw 35px; gap: 48px; }
  html[data-surface="dusk"] .site-footer { margin-top: 50px; }
}

/* Keep whole gestures visible before inviting the visitor to zoom in. */
html[data-surface="dusk"] .pair-heading { padding-bottom: 20px; }
html[data-surface="dusk"] .pair-heading h1 { margin-top: 5px; }
html[data-surface="dusk"] .exhibition-page .room-heading { padding-top: 14px; }
html[data-surface="dusk"] .exhibition-page .page-title { padding: 12px 0 22px; }
html[data-surface="dusk"] .exhibition-page .page-title h1 { font-size: clamp(28px, 3vw, 40px); margin: 7px 0; }
html[data-surface="dusk"] .movement { margin-top: 30px; }
html[data-surface="dusk"] .movement-heading { margin-bottom: 24px; }
html[data-surface="dusk"] .movement-heading h2 { font-size: 25px; margin-bottom: 9px; }
html[data-surface="dusk"] .wall-image img,
html[data-surface="dusk"] .wall-art.portrait .wall-image img { width: auto; max-width: 100%; max-height: min(620px, 67svh); }
@media(min-width:801px) {
  html[data-surface="dusk"] .encounter-pair:not(.single) { width: min(100%, calc(clamp(220px, 100svh - 285px, 640px) * var(--pair-ratio) + 28px)); }
}
@media(max-width:520px) {
  html[data-surface="dusk"] .pair-heading { padding-bottom: 18px; }
  html[data-surface="dusk"] .pair-heading .eyebrow { display: none; }
  html[data-surface="dusk"] .pair-heading h1 { font-size: 20px; margin: 4px 0 10px; }
  html[data-surface="dusk"] .exhibition-page .room-heading { padding-top: 7px; }
  html[data-surface="dusk"] .exhibition-page .page-title { padding: 4px 0 15px; }
  html[data-surface="dusk"] .exhibition-page .page-title .eyebrow { display: none; }
  html[data-surface="dusk"] .exhibition-page .page-title h1 { font-size: 27px; }
  html[data-surface="dusk"] .movement { margin-top: 25px; }
  html[data-surface="dusk"] .movement-heading { margin-bottom: 18px; }
  html[data-surface="dusk"] .movement-heading h2 { font-size: 21px; }
}
html[data-surface="dusk"] .compare-head { padding: 9px 0 10px; }
html[data-surface="dusk"] .compare-head h1 { font-size: 28px; margin: 6px 0; }
html[data-surface="dusk"] .compare-head .eyebrow { display: none; }
html[data-surface="dusk"] .compare-pair,
html[data-surface="dusk"] .compare-pair.single { margin-top: 20px; }
@media(max-width:520px) {
  html[data-surface="dusk"] .compare-head h1 { font-size: 25px; }
  html[data-surface="dusk"] .compare-head { padding-top: 5px; }
  html[data-surface="dusk"] .compare-pair,
  html[data-surface="dusk"] .compare-pair.single { margin-top: 16px; }
}
html[data-surface="dusk"] .wall-art { display: flex; flex-direction: column; align-items: center; }
html[data-surface="dusk"] .wall-art figcaption { width: min(100%, calc(min(620px, 67svh) * var(--work-ratio))); max-width: none; }
/* The room overview gives the introduction; the exhibition starts with its works. */
.movement-notes { display: none; }
@media(max-width:520px) {
  .movement-intro { display: none; }
  .movement-notes { display: block; }
  .movement-notes summary { cursor: pointer; min-height: 34px; padding: 6px 0; color: var(--muted); font-size: 11px; }
  .movement-notes[open] summary { color: var(--accent); }
  html[data-surface="dusk"] .movement-notes p { padding: 5px 0 8px; }
  html[data-surface="dusk"] .movement-heading { margin-bottom: 14px; }
}

/* About is a short reference page, reached after choosing to learn about the work. */
html[data-surface="dusk"] .about-layout { padding-top: 38px; }
html[data-surface="dusk"] .about-copy h1 { font-size: clamp(28px, 3vw, 36px); }
@media(max-width:800px) {
  html[data-surface="dusk"] .about-layout { display: flex; flex-direction: column; padding-top: 24px; gap: 30px; }
  html[data-surface="dusk"] .about-copy { order: 0; }
  html[data-surface="dusk"] .about-copy h1 { font-size: 28px; margin: 10px 0 20px; }
  html[data-surface="dusk"] .about-art { order: 1; width: 100%; margin: 0; }
  html[data-surface="dusk"] .about-art img { max-height: 270px; }
}