/* A gallery in five rooms. The artworks stay whole; the visitor sets the pace. */
:root {
  color-scheme: dark;
  --visit-serif: 'Iowan Old Style', 'Baskerville', 'Palatino Linotype', Georgia, serif;
  --visit-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --header-height: 80px;
  --rail-space: 124px;
  --focus: #e7c58a;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 0; }
body { margin: 0; background: #17261f; color: #f2edde; font-family: var(--visit-serif); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }
img { display: block; max-width: 100%; }
button, a, summary, input { touch-action: manipulation; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: .6rem; left: 1rem; z-index: 100; padding: .8rem 1.2rem; color: #252d25; background: #f4efdf; transform: translateY(-160%); font: .9rem/1.5 var(--visit-sans); }
.skip-link:focus { transform: none; }

/* The two small pieces of museum furniture that travel with you. */
.visit-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-height);
  padding: .7rem clamp(1.25rem, 4vw, 4.5rem);
  color: #f0ebdc;
  background: rgba(20, 29, 23, .94);
  border-bottom: 1px solid #56604b;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .85rem; min-height: 44px; font: .7rem/1.25 var(--visit-sans); letter-spacing: .16em; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 38px; border-right: 1px solid #6f765f; padding-right: .5rem; font: italic 2.65rem/.9 var(--visit-serif); letter-spacing: -.1em; color: #d9c79e; }
.brand small { display: block; margin-top: .35rem; color: #c6cbbd; font: .69rem/1.3 var(--visit-serif); letter-spacing: .03em; }
.visit-tools { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; min-width: 0; }
.tool { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .6rem .9rem; border: 1px solid transparent; border-radius: 3px; color: #e0e2d5; background: transparent; font: .78rem/1.35 var(--visit-sans); white-space: nowrap; text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.tool:hover { color: #fff8e9; background: #35432f; border-color: #6c765d; }
.tool[aria-pressed="true"] { color: #f7deb0; border-color: #a2926e; background: #41462f; }
#room-map-toggle { border-color: #727861; }
.sound-feedback { position: absolute; top: calc(100% + .5rem); right: clamp(1.25rem, 4vw, 4.5rem); display: grid; justify-items: end; gap: .4rem; max-width: min(310px, calc(100vw - 2rem)); }
.volume-control { display: flex; align-items: center; gap: .8rem; padding: .55rem .9rem; border: 1px solid #69745a; border-radius: 3px; color: #ecebdc; background: #263322; box-shadow: 0 8px 22px #0004; font: .75rem/1.4 var(--visit-sans); }
.volume-control input { width: 116px; height: 44px; accent-color: #d9c79e; }
#sound-status { margin: 0; padding: .7rem .9rem; border: 1px solid #69745a; border-radius: 3px; color: #ecebdc; background: #263322; box-shadow: 0 8px 22px #0004; font: .75rem/1.65 var(--visit-sans); }
#sound-status:empty { display: none; }

.visit-route {
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 30;
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr) 84px;
  align-items: center;
  gap: 1rem;
  width: min(calc(100% - 3rem), 1180px);
  min-height: 76px;
  padding: .5rem .85rem;
  color: #e9e6d8;
  background: rgba(23, 31, 24, .96);
  border: 1px solid #68705b;
  border-radius: 4px;
  box-shadow: 0 8px 30px #0003;
  transform: translateX(-50%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: var(--visit-sans);
}
.route-caption { display: flex; flex-direction: column; gap: .1rem; padding-left: .2rem; color: #bfc6b6; font-size: .63rem; line-height: 1.4; }
#room-count { color: #eee2c4; font-size: .73rem; letter-spacing: .15em; font-variant-numeric: tabular-nums; }
#drift-toggle { min-height: 44px; padding: .45rem .55rem; border: 1px solid #737d60; border-radius: 3px; color: #e8e1c8; background: transparent; font: .65rem/1.4 var(--visit-sans); text-align: left; }
#drift-toggle:hover { background: #35432f; }
#drift-toggle[aria-pressed="true"] { color: #263126; background: #e1dac4; }
.room-stops { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; min-width: 0; }
.room-stops a { display: flex; flex-direction: column; justify-content: center; gap: .35rem; min-width: 0; min-height: 58px; padding: .45rem .65rem; border: 1px solid transparent; border-radius: 2px; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.room-stops a:hover { background: #35432f; border-color: #6e7a60; }
.room-stops a[aria-current="location"] { color: #263126; background: #e1dac4; border-color: #e1dac4; }
.stop-number { font: .66rem/1 var(--visit-sans); letter-spacing: .12em; font-variant-numeric: tabular-nums; opacity: .8; }
.stop-name { font-size: .69rem; line-height: 1.35; }
.route-exit { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; font-size: .72rem; text-decoration: none; }
.route-exit:hover { text-decoration: underline; }

/* Architecture, light, and wall colour come from the work in each room. */
.gallery-room {
  --wall: #17281f;
  --room-ink: #f1ecda;
  --room-muted: #c6cbb6;
  --room-accent: #dec792;
  --room-line: #d1d1b342;
  --frame: #202317;
  --next-wall: #2b1d15;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: max(100svh, 800px);
  padding: calc(var(--header-height) + 3.5rem) clamp(1.5rem, 5vw, 5.5rem) calc(var(--rail-space) + 3rem);
  color: var(--room-ink);
  background: var(--wall);
  scroll-margin-top: 0;
}
.gallery-room:focus { outline: none; }
.gallery-room::after { content: ''; position: absolute; inset: auto 0 -1px; z-index: -1; height: clamp(110px, 18vh, 230px); pointer-events: none; background: linear-gradient(180deg, transparent, var(--next-wall)); }
.room-atmosphere { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 70% 42%, #cbbc9630, transparent 64%); }
.room-atmosphere img { width: 100%; height: 100%; object-fit: cover; opacity: .88; filter: blur(26px) saturate(.85) brightness(.92); transform: scale(1.12); }
.room-atmosphere::before { content: ''; position: absolute; inset: -10%; z-index: 1; background: radial-gradient(ellipse at 70% 36%, color-mix(in srgb, var(--room-accent) 30%, transparent), transparent 45%), radial-gradient(ellipse at 24% 78%, #b4c48b21, transparent 48%); filter: blur(30px); opacity: .75; }
.room-atmosphere::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, var(--wall) 0%, color-mix(in srgb, var(--wall) 89%, transparent) 23%, color-mix(in srgb, var(--wall) 27%, transparent) 100%), linear-gradient(0deg, var(--wall), transparent 30%); }
.room-inner { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr); align-items: center; gap: clamp(2.75rem, 5vw, 6rem); width: 100%; max-width: 1430px; margin: 0 auto; }
.room-copy { min-width: 0; padding: 1.5rem 0; }
.room-kicker { display: flex; align-items: center; gap: .8rem; margin: 0 0 2rem; color: var(--room-accent); font: .64rem/1.5 var(--visit-sans); letter-spacing: .17em; text-transform: uppercase; }
.room-number { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--room-line); font-size: .65rem; letter-spacing: .04em; }
.room-kicker > [lang] { margin-left: .1rem; font-size: 1.05rem; }
.room-copy h1, .room-title { margin: 0; font-weight: 400; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.room-copy h1 { font-size: clamp(3.5rem, 5.25vw, 5.5rem); }
.room-title { font-size: clamp(3rem, 4.45vw, 5.1rem); }
.room-intro { max-width: 30ch; margin: 1.7rem 0 0; color: var(--room-muted); font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.6; }
.looking-prompt { max-width: 33ch; margin: 2.4rem 0 1.6rem; padding-left: 1rem; border-left: 1px solid var(--room-accent); color: var(--room-ink); font-size: 1.04rem; font-style: italic; line-height: 1.75; }
.wander-link { display: inline-flex; align-items: center; gap: .85rem; min-height: 48px; max-width: 100%; color: var(--room-accent); font: .79rem/1.55 var(--visit-sans); text-decoration: none; }
.wander-link:hover { text-decoration: underline; text-underline-offset: .4em; }
.wander-link > span { flex: 0 0 auto; font-size: 1.15rem; }
.pace-note { margin: .35rem 0 0; color: var(--room-muted); font: .69rem/1.6 var(--visit-sans); }
.soundtrack-card { max-width: 390px; margin-top: 1.5rem; border-top: 1px solid var(--room-line); border-bottom: 1px solid var(--room-line); }
.soundtrack-card summary { display: flex; align-items: center; gap: .65rem; min-height: 48px; padding: .65rem 0; color: var(--room-accent); font: .73rem/1.5 var(--visit-sans); list-style: none; cursor: pointer; }
.soundtrack-card summary::-webkit-details-marker { display: none; }
.soundtrack-expand { margin-left: auto; font-size: 1.1rem; }
.soundtrack-card[open] .soundtrack-expand { transform: rotate(45deg); }
.soundtrack-body { padding: .65rem 0 .4rem; }
.soundtrack-body h2 { margin: 0; font-size: 1.6rem; font-weight: 400; }
.soundtrack-body > p { margin: .8rem 0 1rem; color: var(--room-muted); font-size: .95rem; line-height: 1.65; }
.soundtrack-body audio { display: block; width: 100%; min-width: 0; height: 54px; margin: 1rem 0; }
.soundtrack-body .soundtrack-note { margin-bottom: .2rem; font: .68rem/1.65 var(--visit-sans); }
.soundtrack-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 0; color: var(--room-accent); font: .7rem/1.5 var(--visit-sans); }
.room-door { display: block; max-width: 31ch; width: fit-content; min-height: 44px; margin-top: 1rem; padding: .55rem 0; color: var(--room-muted); font: .75rem/1.65 var(--visit-sans); }
.room-door:hover { color: var(--room-ink); }
.between-invitation { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; max-width: 100%; margin-top: .5rem; padding: .5rem 0; color: var(--room-accent); font: .73rem/1.6 var(--visit-sans); }

/* The frame hugs the actual image, including portraits and folding screens. */
.exhibit { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.artwork-view { position: relative; display: block; width: fit-content; max-width: 100%; padding: 5px; border: 1px solid #a89b7538; background: var(--frame); box-shadow: 0 4px 12px #0005, 0 30px 70px -15px #0009, 0 0 90px -25px color-mix(in srgb, var(--room-accent) 24%, transparent); text-decoration: none; }
.artwork { width: auto; height: auto; max-width: 100%; max-height: clamp(280px, calc(100svh - var(--header-height) - var(--rail-space) - 270px), 720px); object-fit: contain; }
.enlarge-hint { position: absolute; right: .8rem; bottom: .8rem; display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; padding: .4rem .65rem; border: 1px solid #e5dfc940; border-radius: 2px; color: #f3efdf; background: #182017e8; font: .65rem/1.3 var(--visit-sans); opacity: .92; transition: background .2s, opacity .2s; }
.artwork-view:hover .enlarge-hint, .artwork-view:focus-visible .enlarge-hint { opacity: 1; background: #35432f; }
.wall-label { width: min(100%, 680px); margin-top: 1.55rem; padding: .25rem 0 0; }
.work-heading :is(h2, h3, h4) { margin: 0; font-size: 1.18rem; font-weight: 400; line-height: 1.4; }
.work-heading cite { font-style: normal; }
.work-heading p { margin: .4rem 0 0; color: var(--room-muted); font: .74rem/1.55 var(--visit-sans); }
.work-heading p span { padding: 0 .25rem; opacity: .6; }
.museum-note { margin-top: .65rem; border-bottom: 1px solid var(--room-line); }
.museum-note summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: .55rem 0; color: var(--room-muted); font: .72rem/1.55 var(--visit-sans); list-style: none; cursor: pointer; }
.museum-note summary::-webkit-details-marker { display: none; }
.museum-note summary:hover { color: var(--room-ink); }
.museum-note summary > span { font-size: 1.1rem; transition: transform .2s; }
.museum-note[open] summary > span { transform: rotate(45deg); }
.note-body { padding: .65rem 0 1.2rem; font-size: 1rem; line-height: 1.7; }
.note-body p { margin: 0 0 .9rem; }
.note-body .material { color: var(--room-muted); font: .72rem/1.7 var(--visit-sans); }
.note-invitation { font-style: italic; }
.museum-source, .deeper-link { display: block; width: fit-content; max-width: 100%; min-height: 44px; padding: .65rem 0; font: .73rem/1.6 var(--visit-sans); }
.museum-source { color: var(--room-muted); }
.deeper-link { color: var(--room-accent); }

/* Stay in the room a little longer. These works share the wall, not a carousel. */
.room-companions { scroll-margin-top: calc(var(--header-height) + 1rem); grid-column: 1 / -1; min-width: 0; margin-top: clamp(2rem, 4vw, 4.5rem); padding-top: clamp(3rem, 5vw, 5rem); border-top: 1px solid var(--room-line); }
.companions-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: .9rem clamp(2rem, 5vw, 5rem); }
.companions-kicker { grid-column: 1 / -1; margin: 0; color: var(--room-accent); font: .64rem/1.65 var(--visit-sans); letter-spacing: .14em; text-transform: uppercase; }
.companions-heading h3 { max-width: 19ch; margin: 0; font-size: clamp(2rem, 3.15vw, 3rem); font-weight: 400; line-height: 1.13; letter-spacing: -.035em; text-wrap: balance; }
.companions-intro { max-width: 44ch; margin: 0; color: var(--room-muted); font-size: 1.04rem; line-height: 1.7; }
.companion-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(3rem, 8vw, 8rem); max-width: 1160px; margin: clamp(2.5rem, 5vw, 5rem) auto 0; }
.companion-exhibit { width: 100%; }
.companion-exhibit:nth-child(2) { margin-top: clamp(3rem, 5vw, 5rem); }
.companion-exhibit .artwork { max-height: clamp(240px, 29vw, 350px); }
.companion-exhibit .wall-label { width: 100%; max-width: 480px; margin-top: 1.5rem; }
.companion-exhibit .work-heading h4 { font-size: 1.17rem; }
.companion-prompt { max-width: 44ch; margin: 1.15rem 0 .65rem; color: var(--room-ink); font-size: 1rem; font-style: italic; line-height: 1.7; }
.companions-footer { display: flex; justify-content: flex-end; margin-top: clamp(2.5rem, 4vw, 4rem); padding-top: 1.2rem; border-top: 1px solid var(--room-line); }

/* A few echoes, then room for the visitor's own connections. */
.between-works { grid-column: 1 / -1; min-width: 0; margin-top: clamp(2.5rem, 5vw, 5rem); padding-top: clamp(3rem, 6vw, 6rem); border-top: 1px solid var(--room-line); scroll-margin-top: calc(var(--header-height) + 1.5rem); }
.between-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 1rem clamp(2rem, 5vw, 5rem); }
.between-heading h2 { margin: 0; font-size: clamp(2.9rem, 4.8vw, 4.5rem); font-weight: 400; line-height: 1.05; letter-spacing: -.045em; }
.between-heading > p:last-child { max-width: 44ch; margin: 0; color: var(--room-muted); font-size: 1.1rem; line-height: 1.7; }
.echo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(3.5rem, 6vw, 6rem); margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.echo-card { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; align-items: start; gap: .75rem clamp(2rem, 4vw, 4rem); min-width: 0; padding-top: clamp(2rem, 3vw, 3rem); border-top: 1px solid var(--room-line); }
.echo-pictures { grid-column: 1; grid-row: 1 / 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; }
.echo-pictures figure { min-width: 0; margin: 0; }
.echo-pictures a { display: grid; place-items: center; height: clamp(300px, 28vw, 360px); min-height: 44px; padding: .4rem; border: 1px solid var(--room-line); background: #17201b; }
.echo-pictures a:hover { border-color: var(--room-accent); }
.echo-pictures img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.echo-pictures figcaption { margin-top: .8rem; font-size: .83rem; line-height: 1.45; }
.echo-pictures figcaption span { display: block; margin-top: .3rem; color: var(--room-muted); font: .63rem/1.55 var(--visit-sans); }
.echo-card h3 { grid-column: 2; grid-row: 1; margin: .15rem 0 .5rem; font-size: clamp(1.75rem, 2.5vw, 2.35rem); font-weight: 400; line-height: 1.2; letter-spacing: -.025em; }
.echo-card > p { grid-column: 2; max-width: 45ch; margin: 0 0 .5rem; color: var(--room-muted); font-size: 1rem; line-height: 1.75; }
.echo-card > .echo-description { grid-row: 2; }
.echo-card > .echo-question { grid-row: 3; color: var(--room-ink); font-style: italic; }
.echo-open { grid-column: 2; grid-row: 4; align-self: start; display: inline-flex; align-items: center; justify-content: space-between; gap: .8rem; width: fit-content; min-width: min(100%, 220px); max-width: 100%; min-height: 48px; margin-top: .35rem; padding: .7rem 0; border: 0; border-top: 1px solid var(--room-line); color: var(--room-accent); background: transparent; font: .73rem/1.5 var(--visit-sans); text-align: left; }
.echo-open:hover { color: var(--room-ink); border-color: var(--room-accent); }
.between-footnote { max-width: 56ch; margin: 2.75rem 0 .35rem; color: var(--room-muted); font: .72rem/1.7 var(--visit-sans); }

.room-dusk { --wall: #2b1d15; --room-ink: #f5e8d1; --room-muted: #d2bfa6; --room-accent: #edc188; --room-line: #e1bf893b; --frame: #292014; --next-wall: #e7e3d9; }
.room-dusk .room-atmosphere img { opacity: .92; filter: blur(28px) saturate(.95) brightness(.92); object-position: 68% 40%; }
.room-dusk .wall-label { max-width: 500px; }
.room-form { color-scheme: light; --wall: #e7e3d9; --room-ink: #30372c; --room-muted: #535e4d; --room-accent: #53633d; --room-line: #62694c40; --frame: #1e211a; --focus: #6b723c; --next-wall: #51432b; }
.room-form .room-atmosphere { background: radial-gradient(ellipse at 70% 36%, #fffdf4 0%, #f4f0e582 33%, transparent 68%), linear-gradient(105deg, #d9d5c8, #eeeadd 55%, #d0cec0); }
.room-form .room-atmosphere::after { background: linear-gradient(90deg, #e7e3d9b3, transparent 64%); }
.room-form .artwork-view { padding: clamp(12px, 1.7vw, 25px); border: 1px solid #aaa48f; background: #1b1e18; box-shadow: 0 0 0 6px #c8c3b46b, 0 4px 8px #292e2440, 0 30px 48px -18px #333a287d; }
.room-form .companion-exhibit .artwork-view { padding: 10px; }
.room-form .wall-label { max-width: 540px; }
.room-poems { --wall: #51432b; --room-ink: #fff0d0; --room-muted: #e1ceb0; --room-accent: #f1d495; --room-line: #f0d59540; --frame: #342617; --next-wall: #24302e; }
.room-poems .room-atmosphere img { opacity: .9; filter: blur(22px) saturate(.86) brightness(.95); }
.room-poems .artwork-view { padding: 7px; border-color: #dfc57d70; }
.room-colour { --wall: #24302e; --room-ink: #f7eedd; --room-muted: #cdd1bf; --room-accent: #f3c5a0; --room-line: #d7cfa63d; --frame: #28271e; --next-wall: #16251e; }
.room-colour .room-atmosphere img { opacity: .85; filter: blur(28px) saturate(1.05) brightness(.9); }
.room-colour .wall-label { max-width: 610px; }

/* A little drifting light is optional. Only the room being visited moves. */
body[data-motion="on"] .gallery-room.is-active .room-atmosphere img { animation: pigment-drift 28s ease-in-out infinite alternate; }
body[data-motion="on"] .gallery-room.is-active .room-atmosphere::before { animation: light-drift 23s ease-in-out infinite alternate; }
body[data-motion="on"] .gallery-room.is-active .room-inner > .exhibit > .artwork-view { animation: artwork-float 24s ease-in-out infinite alternate; }
body[data-motion="on"] .gallery-room.is-active .room-inner > .exhibit > .artwork-view:is(:hover, :focus-visible) { animation-play-state: paused; }
body:has(.visit-dialog[open]) .gallery-room * { animation-play-state: paused; }
@keyframes pigment-drift { from { transform: scale(1.12) translate(-.6%, .25%); } to { transform: scale(1.16) translate(.7%, -.5%); } }
@keyframes light-drift { from { transform: translate(-1.2%, .7%) scale(1); opacity: .5; } to { transform: translate(1.5%, -.8%) scale(1.04); opacity: .85; } }
@keyframes artwork-float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -7px, 0); } }

/* A floor plan and a quiet full-work viewing room, both native dialogs. */
.visit-dialog { --focus: #5f743f; position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: clamp(1.25rem, 4vw, 4rem); border: 0; color: #2c352b; background: #eeeadd; color-scheme: light; overflow: auto; overscroll-behavior: contain; }
.visit-dialog:not([open]) { display: none; }
.visit-dialog::backdrop { background: #10190fea; }
.dialog-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding-bottom: .6rem; border-bottom: 1px solid #6974524a; background: inherit; }
.dialog-eyebrow { margin: 0; font: .68rem/1.6 var(--visit-sans); letter-spacing: .12em; text-transform: uppercase; }
.dialog-close { flex: 0 0 auto; min-height: 44px; padding: .6rem 1rem; border: 1px solid #6b7653; border-radius: 2px; color: inherit; background: transparent; font: .8rem/1.4 var(--visit-sans); }
.dialog-close:hover { background: #68754a1a; }
#room-map > h2 { margin: 2.5rem 0 .8rem; font-size: clamp(2.7rem, 4.8vw, 4.8rem); font-weight: 400; line-height: 1.1; letter-spacing: -.045em; }
.map-intro { max-width: 45ch; margin: 0; color: #59614f; font-size: 1.1rem; line-height: 1.65; }
.floor-plan { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 2.7rem 0; }
.floor-plan a { display: grid; grid-template-rows: auto minmax(140px, 22vw) auto auto; align-content: start; min-width: 0; padding: 1rem; border: 1px solid #a9ae96; color: #303b2c; background: #f7f3e7; text-decoration: none; transition: border-color .2s, background .2s; }
.floor-plan a:hover { background: #e1e5ce; border-color: #4b6240; }
.floor-plan a:is([aria-current="location"], [aria-current="page"]) { border-color: #4d633e; box-shadow: inset 0 0 0 2px #4d633e; }
.plan-number { padding-bottom: .7rem; color: #576146; font: .7rem/1.5 var(--visit-sans); letter-spacing: .13em; }
.floor-plan img { width: 100%; height: 100%; min-height: 0; padding: .5rem; object-fit: contain; background: #21291e; }
.floor-plan strong { margin-top: 1.2rem; font-size: clamp(1.05rem, 1.4vw, 1.35rem); font-weight: 400; line-height: 1.35; }
.floor-plan a > span:last-child { margin-top: .35rem; color: #647052; font: .68rem/1.55 var(--visit-sans); }
.map-footer { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; padding-top: 1.3rem; border-top: 1px solid #a9ae96; font: .78rem/1.7 var(--visit-sans); }
.map-footer p { max-width: 65ch; margin: 0; color: #58624c; }
.map-footer a { flex: 0 0 auto; min-height: 44px; padding: .6rem 0; }
.artwork-dialog { --focus: #e7c58a; color-scheme: dark; color: #f0e9d7; background: #151c15; padding: 1rem clamp(1rem, 3vw, 3rem); overflow: hidden; }
.artwork-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: .7rem; }
.artwork-dialog .dialog-header { position: static; border-color: #667257; }
.artwork-dialog .dialog-close { border-color: #83916f; }
#viewer-image { width: 100%; height: 100%; min-height: 0; max-height: 100%; padding: 1rem 0; object-fit: contain; }
.viewer-label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 1.5rem; align-items: baseline; padding: .65rem 0 max(.65rem, env(safe-area-inset-bottom)); border-top: 1px solid #667257; }
.viewer-label h2 { margin: 0; font-size: clamp(1.05rem, 1.7vw, 1.5rem); font-weight: 400; line-height: 1.4; }
.viewer-label p { grid-column: 1; margin: 0; color: #bbc5b0; font: .75rem/1.55 var(--visit-sans); }
.viewer-label a { grid-column: 2; grid-row: 1; align-self: center; display: flex; align-items: center; min-height: 44px; color: #ddcea9; font: .75rem/1.5 var(--visit-sans); }
.viewer-actions { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: .5rem; }
.viewer-actions .viewer-behind { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding: .55rem .85rem; border: 1px solid #6d795c; border-radius: 2px; color: #e8dec4; font: .73rem/1.45 var(--visit-sans); text-decoration: none; }
.viewer-behind:hover { background: #303c28; border-color: #a7b48b; }
.making-link { display: flex; align-items: center; gap: .75rem; width: fit-content; max-width: 100%; min-height: 44px; margin-top: .55rem; padding: .55rem 0; color: var(--room-accent); font: .73rem/1.6 var(--visit-sans); text-decoration-thickness: 1px; }
.viewer-pair, .viewer-rest { display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; max-width: 100%; padding: .55rem .85rem; border: 1px solid #6d795c; border-radius: 2px; color: #e8dec4; background: transparent; font: .73rem/1.45 var(--visit-sans); }
.viewer-pair:hover, .viewer-rest:hover { background: #303c28; border-color: #a7b48b; }
.viewer-browse { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .75rem; padding: .25rem 0 max(.25rem, env(safe-area-inset-bottom)); }
.viewer-browse button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; max-width: 100%; min-height: 44px; padding: .65rem 1rem; border: 1px solid #6d795c; border-radius: 2px; color: #e8dec4; background: transparent; font: .75rem/1.45 var(--visit-sans); }
.viewer-browse button:hover { background: #303c28; border-color: #a7b48b; }
.viewer-browse button:disabled { color: #839078; border-color: #444e3b; cursor: default; }
#viewer-previous { justify-self: start; }
#viewer-next { justify-self: end; }
#viewer-position { margin: 0; color: #bbc5b0; font: .7rem/1.5 var(--visit-sans); text-align: center; font-variant-numeric: tabular-nums; }

/* The comparison table keeps the pictures whole and their labels in view. */
.encounter-dialog { --focus: #e7c58a; color-scheme: dark; color: #f0e9d7; background: #19231e; padding: 1rem clamp(1.25rem, 5vw, 5rem) 3rem; }
.encounter-dialog > * { max-width: 1400px; margin-left: auto; margin-right: auto; }
.encounter-dialog .dialog-header { top: -1rem; margin-top: -1rem; padding-top: 1rem; border-color: #667257; background: #19231e; }
.encounter-dialog .dialog-close { border-color: #83916f; }
#encounter-title { margin-top: 2rem; margin-bottom: .7rem; font-size: clamp(2.75rem, 4.7vw, 4.4rem); font-weight: 400; line-height: 1.04; letter-spacing: -.045em; }
.encounter-intro { margin-top: 0; margin-bottom: 1.5rem; color: #c1cbbb; font-size: 1.08rem; line-height: 1.7; }
.encounter-presets { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }
.encounter-presets button, .encounter-modes button, #encounter-copy { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; padding: .65rem 1rem; border: 1px solid #68745c; border-radius: 2px; color: #e2dcc8; background: transparent; font: .74rem/1.5 var(--visit-sans); }
.encounter-presets button:hover, .encounter-modes button:hover, #encounter-copy:hover { border-color: #abb991; background: #34432e; }
.encounter-presets button[aria-pressed="true"], .encounter-modes button[aria-pressed="true"] { color: #273021; border-color: #d2ccaf; background: #e1dac4; }
.encounter-selectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.encounter-selectors label { display: grid; gap: .6rem; min-width: 0; color: #bdc7b5; font: .72rem/1.6 var(--visit-sans); }
.encounter-selectors select { width: 100%; min-width: 0; max-width: 100%; min-height: 48px; padding: .7rem .8rem; border: 1px solid #7d896c; border-radius: 2px; color: #f0e9d7; background: #222e25; font: .82rem/1.5 var(--visit-sans); text-overflow: ellipsis; }
.encounter-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; margin-top: 1rem; margin-bottom: 1.4rem; }
.encounter-modes { display: flex; flex-wrap: wrap; gap: .5rem; }
.layer-control { display: grid; grid-template-columns: auto minmax(100px, 180px) 3ch; align-items: center; gap: .7rem; min-width: 0; max-width: 100%; color: #bdc7b5; font: .7rem/1.5 var(--visit-sans); }
.layer-control input { display: block; width: 100%; min-width: 0; height: 44px; margin: 0; accent-color: #e5c88d; }
.layer-control output { color: #f0e9d7; font-variant-numeric: tabular-nums; }
.encounter-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1.3rem clamp(1rem, 3vw, 3rem); isolation: isolate; }
.encounter-work { display: grid; min-width: 0; margin: 0; }
.encounter-image { display: grid; place-items: center; min-width: 0; height: clamp(240px, 47svh, 580px); padding: .65rem; border: 1px solid #7d896c55; background: #111913; }
.encounter-image img { width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: contain; }
.encounter-work figcaption { min-width: 0; padding: 1rem 0 .25rem; }
.encounter-work h3 { margin: 0; font-size: clamp(1.08rem, 1.65vw, 1.5rem); font-weight: 400; line-height: 1.45; }
.encounter-work figcaption p { margin: .4rem 0 .25rem; color: #bdc7b5; font: .73rem/1.6 var(--visit-sans); }
.encounter-work figcaption a { display: inline-flex; align-items: center; min-height: 44px; padding: .6rem 0; color: #e1cda6; font: .72rem/1.5 var(--visit-sans); }
.encounter-stage[data-view="layer"]::before { content: ''; grid-column: 1 / -1; grid-row: 1; align-self: stretch; background: #000; border: 1px solid #7d896c55; }
.encounter-stage[data-view="layer"] .encounter-work { display: contents; }
.encounter-stage[data-view="layer"] .encounter-image { grid-column: 1 / -1; grid-row: 1; border-color: transparent; background: transparent; mix-blend-mode: plus-lighter; }
.encounter-stage[data-view="layer"] [data-slot="left"] .encounter-image { opacity: calc(1 - var(--mix, .5)); }
.encounter-stage[data-view="layer"] [data-slot="right"] .encounter-image { opacity: var(--mix, .5); }
.encounter-stage[data-view="layer"] [data-slot="left"] figcaption { grid-column: 1; grid-row: 2; }
.encounter-stage[data-view="layer"] [data-slot="right"] figcaption { grid-column: 2; grid-row: 2; }
.encounter-note { margin-top: .8rem; margin-bottom: 1.8rem; color: #b4bea9; font: .69rem/1.7 var(--visit-sans); }
.encounter-reflection { padding: 1.5rem 0 1.5rem 1.4rem; border-top: 1px solid #71805a55; border-bottom: 1px solid #71805a55; border-left: 2px solid #bdab7d; background: linear-gradient(90deg, #c6bc8710, transparent 65%); }
#encounter-prompt { max-width: 72ch; margin: 0; color: #d1d8c5; font-size: 1.03rem; line-height: 1.8; }
#encounter-question { max-width: 65ch; margin: .9rem 0 0; color: #f0e9d7; font-size: 1.18rem; font-style: italic; line-height: 1.7; }
.encounter-share { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem .8rem; margin-top: 1.8rem; }
.encounter-share label { grid-column: 1 / -1; color: #bdc7b5; font: .73rem/1.6 var(--visit-sans); }
.encounter-share input { width: 100%; min-width: 0; min-height: 46px; padding: .7rem .85rem; border: 1px solid #68745c; border-radius: 2px; color: #e2dcc8; background: #222e25; font: .72rem/1.5 var(--visit-sans); }
.encounter-status { min-height: 1.7em; margin-top: .7rem; margin-bottom: 0; color: #d1d8c5; font: .72rem/1.7 var(--visit-sans); }

@media (min-width: 1700px) {
  .gallery-room { padding-top: calc(var(--header-height) + 5rem); padding-bottom: calc(var(--rail-space) + 5rem); }
  .room-inner { gap: 6rem; }
}
@media (min-width: 881px) {
  .room-form .room-inner > .exhibit .artwork { max-height: clamp(260px, calc(100svh - var(--header-height) - var(--rail-space) - 300px), 690px); }
}
@media (max-width: 1100px) {
  .visit-route { grid-template-columns: 106px minmax(0, 1fr) 72px; gap: .6rem; }
  .room-inner { gap: 2.5rem; grid-template-columns: minmax(0, .88fr) minmax(0, 1.25fr); }
  .room-copy h1 { font-size: clamp(3.6rem, 5.8vw, 4.8rem); }
  .room-title { font-size: clamp(3rem, 4.9vw, 4.5rem); }
  .room-intro { font-size: 1.1rem; }
  .floor-plan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .floor-plan a { grid-template-rows: auto 200px auto auto; }
  .echo-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: .75rem; }
  .echo-pictures { grid-column: 1; grid-row: auto; margin-bottom: 1rem; }
  .echo-card h3, .echo-card > p, .echo-open { grid-column: 1; grid-row: auto; }
  .echo-card > .echo-description, .echo-card > .echo-question { grid-row: auto; }
  .echo-card > p { max-width: 52ch; }
}
@media (max-width: 880px) {
  .gallery-room { min-height: 100svh; padding: calc(var(--header-height) + 2.5rem) clamp(1.5rem, 6vw, 3.5rem) calc(var(--rail-space) + 3rem); }
  .room-inner { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; max-width: 680px; }
  .room-copy { padding: 0; }
  .room-copy h1 { font-size: clamp(3.7rem, 8.4vw, 5.5rem); }
  .room-title { font-size: clamp(3.4rem, 7.5vw, 4.8rem); }
  .room-intro { max-width: 42ch; }
  .looking-prompt { margin-top: 1.7rem; }
  .room-kicker { margin-bottom: 1.4rem; }
  .room-door { max-width: 100%; margin-top: .4rem; }
  .artwork { max-height: 72svh; }
  .wall-label { width: 100%; }
  .room-companions { margin-top: 1.5rem; padding-top: 3.5rem; }
  .companions-heading { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .companions-heading h3 { max-width: 24ch; }
  .companions-intro { max-width: 48ch; }
  .companion-grid { gap: 2.5rem; }
  .between-heading { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .between-heading > p:last-child { max-width: 52ch; }
  .echo-grid { gap: 3.5rem; }
  .echo-pictures a { height: clamp(300px, 40vw, 360px); }
  .echo-card h3 { font-size: 1.85rem; }
  .echo-open { width: fit-content; min-width: min(100%, 220px); }
  .room-atmosphere::after { background: linear-gradient(180deg, var(--wall) 0%, color-mix(in srgb, var(--wall) 80%, transparent) 32%, color-mix(in srgb, var(--wall) 40%, transparent) 60%, var(--wall) 100%); }
  .guide-link { display: none; }
  .map-footer { flex-direction: column; gap: .5rem; }
}
@media (min-width: 601px) and (max-width: 700px) {
  .visit-header { gap: .75rem; }
  .visit-tools { gap: .25rem; }
  .visit-tools .tool { padding-inline: .5rem; }
}
@media (max-width: 600px) {
  :root { --header-height: 108px; --rail-space: 148px; }
  .visit-header { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .1rem .35rem; padding: .4rem .8rem; }
  .brand { grid-column: 1 / 3; grid-row: 1; gap: .5rem; min-height: 44px; font-size: .6rem; letter-spacing: .11em; }
  .brand-mark { width: 25px; height: 33px; padding-right: .45rem; font-size: 2.05rem; }
  .brand small { display: none; }
  .visit-tools { display: contents; }
  .tool { gap: .3rem; min-width: 0; padding: .5rem .2rem; font-size: .65rem; text-align: center; white-space: normal; }
  #motion-toggle { grid-column: 1; grid-row: 2; }
  #sound-toggle { grid-column: 2; grid-row: 2; }
  #breath-toggle { grid-column: 3; grid-row: 2; }
  #room-map-toggle { grid-column: 3; grid-row: 1; }
  .guide-link { display: inline-flex; grid-column: 3; grid-row: 2; font-size: .61rem; }
  .breathing-available .guide-link { display: none; }
  .sound-feedback { right: .8rem; }
  .visit-route { bottom: max(.5rem, env(safe-area-inset-bottom)); width: calc(100% - 1rem); min-height: 68px; padding: .3rem; grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .room-stops { grid-row: 1; gap: .15rem; }
  .route-caption { grid-row: 2; display: flex; flex-direction: row; justify-content: space-between; align-items: center; min-height: 44px; padding: .25rem .3rem 0; border-top: 1px solid #74806560; }
  #room-count { font-size: .61rem; }
  #drift-toggle { min-height: 44px; border-color: transparent; font-size: .67rem; }
  .room-stops a { justify-content: flex-start; align-items: center; gap: .3rem; min-height: 58px; padding: .45rem .2rem; text-align: center; }
  .stop-number { font-size: .62rem; }
  .stop-name { font-size: .59rem; line-height: 1.35; }
  .route-exit { display: none; }
  .gallery-room { padding: calc(var(--header-height) + 2.2rem) 1.5rem calc(var(--rail-space) + 2rem); }
  .room-inner { gap: 2.3rem; }
  .room-kicker { gap: .6rem; font-size: .59rem; letter-spacing: .13em; }
  .room-copy h1 { font-size: clamp(3rem, 11.8vw, 4.4rem); }
  .room-title { font-size: clamp(2.8rem, 10.5vw, 4rem); }
  .room-intro { margin-top: 1.25rem; font-size: 1.05rem; }
  .looking-prompt { font-size: 1rem; }
  .wander-link { font-size: .74rem; }
  .room-door { font-size: .7rem; }
  .artwork-view { padding: 5px; }
  .artwork { max-height: 72svh; }
  .room-form .artwork-view { padding: 10px; box-shadow: 0 0 0 4px #c8c3b46b, 0 18px 35px -14px #333a2880; }
  .enlarge-hint { right: .5rem; bottom: .5rem; padding: .3rem .5rem; font-size: .59rem; }
  .wall-label { margin-top: 1.3rem; }
  .work-heading :is(h2, h3, h4) { font-size: 1.1rem; }
  .work-heading p { font-size: .69rem; }
  .note-body { font-size: .95rem; }
  .room-companions { margin-top: 1rem; padding-top: 2.75rem; }
  .companions-kicker { font-size: .6rem; letter-spacing: .11em; }
  .companions-heading h3 { font-size: 2.15rem; }
  .companions-intro { font-size: 1rem; }
  .companion-grid { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; margin-top: 2.5rem; }
  .companion-exhibit:nth-child(2) { margin-top: 0; }
  .companion-exhibit .artwork { max-height: min(350px, 70svh); }
  .companion-exhibit .work-heading h4 { font-size: 1.1rem; }
  .companion-prompt { font-size: .96rem; }
  .companions-footer { justify-content: flex-start; margin-top: 2rem; }
  .between-works { margin-top: 1rem; padding-top: 3rem; }
  .between-heading h2 { font-size: 2.9rem; }
  .between-heading > p:last-child { font-size: 1.03rem; }
  .echo-pictures { gap: .8rem; }
  .echo-pictures a { height: 200px; }
  .echo-pictures figcaption { font-size: .81rem; }
  .between-footnote { margin-top: 2rem; }
  .visit-dialog { padding: 1rem; }
  .dialog-eyebrow { max-width: 25ch; font-size: .6rem; }
  .dialog-close { padding: .6rem .75rem; font-size: .75rem; }
  #room-map > h2 { margin-top: 1.8rem; font-size: 2.75rem; }
  .map-intro { font-size: 1rem; }
  .floor-plan { grid-template-columns: minmax(0, 1fr); gap: .75rem; margin: 1.7rem 0; }
  .floor-plan a { grid-template-columns: 1.3rem 5rem minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: .25rem .7rem; padding: .75rem; }
  .plan-number { grid-row: 1 / 3; align-self: center; padding: 0; font-size: .63rem; }
  .floor-plan img { grid-column: 2; grid-row: 1 / 3; height: 98px; padding: .3rem; }
  .floor-plan strong { grid-column: 3; grid-row: 1; align-self: end; margin: 0; font-size: 1.08rem; }
  .floor-plan a > span:last-child { grid-column: 3; grid-row: 2; align-self: start; margin: 0; font-size: .63rem; }
  .map-footer { font-size: .72rem; }
  .artwork-dialog { padding: .75rem 1rem; }
  .viewer-label { grid-template-columns: minmax(0, 1fr); gap: .3rem; padding-top: .7rem; }
  .viewer-label h2 { font-size: 1.12rem; }
  .viewer-label p { font-size: .68rem; }
  .viewer-label a { grid-column: 1; grid-row: auto; font-size: .7rem; }
  .viewer-actions { grid-column: 1; grid-row: auto; }
  .viewer-actions .viewer-behind { padding: .45rem .6rem; font-size: .65rem; }
  .viewer-pair, .viewer-rest { min-height: 44px; padding: .45rem .6rem; gap: .45rem; font-size: .65rem; }
  .viewer-browse { grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; }
  .viewer-browse button { padding: .55rem .65rem; font-size: .68rem; }
  #viewer-position { font-size: .64rem; }
  #viewer-image { padding: .5rem 0; }
  .encounter-dialog { padding: .75rem 1rem 1.5rem; }
  .encounter-dialog .dialog-header { top: -.75rem; margin-top: -.75rem; padding-top: .75rem; }
  #encounter-title { margin-top: 1.5rem; font-size: 2.9rem; }
  .encounter-intro { margin-bottom: 1.25rem; font-size: 1rem; }
  .encounter-presets { gap: .4rem; margin-bottom: 1.25rem; }
  .encounter-presets button, .encounter-modes button { padding: .6rem .7rem; font-size: .67rem; }
  .encounter-selectors { grid-template-columns: minmax(0, 1fr); gap: .85rem; }
  .encounter-selectors label { gap: .35rem; font-size: .68rem; }
  .encounter-selectors select { font-size: .75rem; }
  .encounter-toolbar { align-items: stretch; margin-bottom: 1rem; }
  .encounter-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .layer-control { width: 100%; grid-template-columns: minmax(0, 1fr) 3ch; gap: .25rem .65rem; }
  .layer-control label { grid-column: 1 / -1; }
  .encounter-stage { column-gap: .8rem; row-gap: .8rem; }
  .encounter-image { height: 270px; padding: .4rem; }
  .encounter-work figcaption { padding-top: .8rem; }
  .encounter-work h3 { font-size: 1.05rem; }
  .encounter-work figcaption p { font-size: .65rem; }
  .encounter-work figcaption a { font-size: .66rem; }
  .encounter-note { font-size: .65rem; margin-bottom: 1.25rem; }
  .encounter-reflection { padding: 1.1rem 0 1.1rem .85rem; }
  #encounter-prompt { font-size: .97rem; }
  #encounter-question { font-size: 1.08rem; }
  .encounter-share { grid-template-columns: minmax(0, 1fr); margin-top: 1.25rem; }
  #encounter-copy { justify-self: start; min-width: 110px; }
}
@media (max-width: 359px) {
  .echo-pictures a { height: 165px; }
  .encounter-stage[data-view="beside"] { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .encounter-stage[data-view="beside"] .encounter-image { height: 290px; }
  .encounter-stage[data-view="layer"] .encounter-image { height: 300px; }
}
/* The quiet room borrows its light from the work the visitor brings in. */
.rest-stop { grid-column: 1 / -1; display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); margin: 1rem 0 0; padding: clamp(2rem, 5vw, 4rem) 0; border-top: 1px solid var(--room-line); }
.rest-mark { display: grid; place-items: center; width: 112px; aspect-ratio: 1; border: 1px solid #d8c59a88; border-radius: 50%; box-shadow: 0 0 45px #d8c59a0d; }
.rest-mark span { width: 5px; height: 5px; background: #d8c59a; border-radius: 50%; }
.rest-stop h3 { margin: .6rem 0 .8rem; font-weight: 400; font-size: clamp(2rem, 3.2vw, 3rem); letter-spacing: -.03em; }
.rest-stop p:not(.companions-kicker) { max-width: 52ch; margin: 0; color: var(--room-muted); font-size: 1.06rem; line-height: 1.75; }
.rest-links { display: flex; flex-wrap: wrap; gap: .35rem 2rem; margin-top: 1.1rem; }
.rest-links a { display: inline-flex; align-items: center; gap: .9rem; min-height: 44px; color: var(--room-accent); font: .76rem/1.6 var(--visit-sans); }
.breathing-dialog { --focus: #e7c58a; isolation: isolate; color-scheme: dark; color: #eee9d9; background: #19231e; padding: 1rem clamp(1.25rem, 5vw, 5rem) 2.5rem; }
.breathing-atmosphere { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; background: #19231e; }
.breathing-atmosphere img { width: 100%; height: 100%; object-fit: cover; filter: blur(55px) saturate(.65); opacity: .15; transform: scale(1.15); }
.breathing-dialog .dialog-header { top: -1rem; margin-top: -1rem; padding-top: 1rem; border-color: #75816766; background: #19231e; }
.breathing-dialog .dialog-close { border-color: #81916b; }
#breathing-title { margin: 2rem 0 .8rem; font-weight: 400; font-size: clamp(2.65rem, 4.5vw, 4.7rem); letter-spacing: -.04em; line-height: 1.1; }
.breathing-intro { max-width: 58ch; margin: 0; color: #c5cbb9; font-size: 1.1rem; line-height: 1.7; }
.breathing-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); margin: 2rem 0; }
.breathing-guide { grid-column: 2; grid-row: 1; }
.breathing-work { grid-column: 1; grid-row: 1; min-width: 0; margin: 0; }
#breathing-work-image { width: 100%; height: min(49vh, 480px); object-fit: contain; }
.breathing-work figcaption { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid #75816766; }
.breathing-work h3 { margin: 0; font-weight: 400; font-size: 1.35rem; line-height: 1.5; }
.breathing-work p { margin: .4rem 0; color: #bdc6b2; font: .73rem/1.6 var(--visit-sans); }
.breathing-work a { display: inline-flex; align-items: center; min-height: 44px; color: #e4c98f; font: .73rem/1.6 var(--visit-sans); }
.breathing-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; padding-top: 1rem; border-top: 1px solid #75816766; font: .75rem/1.7 var(--visit-sans); }
.breathing-footer p { max-width: 55ch; color: #bdc6b2; }
.breathing-footer a { display: inline-flex; align-items: center; gap: 1rem; min-height: 44px; color: #e4c98f; }
.breathing-sound { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1.5rem 0; color: #bdc6b2; font: .72rem/1.6 var(--visit-sans); }
.breathing-sound label { display: flex; align-items: center; gap: .75rem; }
.breathing-sound input { width: 110px; height: 44px; accent-color: #e4c98f; }
.breathing-sound p { margin: 0; }
@media (max-width: 760px) {
  .breathing-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 1rem; }
  .breathing-guide, .breathing-work { grid-column: 1; grid-row: auto; }
  #breathing-work-image { height: auto; max-height: 50vh; }
}
@media (max-width: 600px) {
  .rest-stop { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 2.5rem 0; }
  .rest-mark { width: 76px; }
  .rest-links { flex-direction: column; align-items: flex-start; }
  .breathing-dialog { padding: .75rem 1rem 2rem; }
  .breathing-dialog .dialog-header { top: -.75rem; margin-top: -.75rem; padding-top: .75rem; }
  .breathing-dialog .dialog-eyebrow { max-width: 13ch; }
  #breathing-title { margin-top: 1.5rem; }
  .breathing-intro { font-size: 1rem; }
}
@media (min-width: 601px) and (max-height: 500px) {
  .artwork-dialog { padding: .5rem 1rem; }
  .artwork-dialog[open] { gap: .35rem; }
  .artwork-dialog .dialog-header { min-height: 44px; padding-bottom: .2rem; }
  .viewer-label { gap: .15rem 1rem; padding: .35rem 0; }
  .viewer-label h2 { font-size: 1rem; line-height: 1.3; }
  .viewer-label p { font-size: .65rem; }
  .viewer-label > a { grid-row: 1 / 3; font-size: .68rem; }
  .viewer-actions { grid-column: 1 / -1; grid-row: 3; }
  .viewer-pair, .viewer-rest, .viewer-actions .viewer-behind { padding: .45rem .6rem; font-size: .65rem; }
  .viewer-browse { padding-block: 0; }
  .viewer-browse button { padding: .4rem .65rem; }
  #viewer-image { padding: .2rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .room-atmosphere { display: none; }
  .visit-header, .visit-route { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .room-stops a[aria-current], .tool[aria-pressed="true"] { outline: 2px solid Highlight; }
  .artwork-view { border: 1px solid CanvasText; }
}
@media print {
  :root { color-scheme: light; }
  .visit-header, .visit-route, .room-atmosphere, .enlarge-hint, .wander-link, .room-door, .skip-link { display: none; }
  .gallery-room { --room-ink: #222; --room-muted: #444; --room-accent: #222; min-height: 0; padding: 2rem 0; background: white; color: #222; break-after: page; }
  .room-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .room-copy h1, .room-title { font-size: 2.5rem; }
  .artwork { max-height: 50vh; }
  .artwork-view { box-shadow: none; }
  .visit-dialog { display: none !important; }
}