:root {
  color-scheme: dark;
  --ink: #191a18;
  --paper: #eee8dc;
  --muted: #b7b0a1;
  --gold: #c4a474;
  --wayfinding: #d9d1c2; /* where the visitor is: ivory, apart from the gold that introduces a title */
  --toolbar-gap: 0px;
  --line: rgb(196 164 116 / 25%);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: Montserrat, sans-serif;
  --site-header-height: 84px;
  --site-top: calc(var(--site-header-height) + var(--wp-admin--admin-bar--height, 0px));
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  /* One size for every room label and caption (eyebrows, toplines). */
  --label-size: 10px;
}
@media (max-width: 760px) { :root { --label-size: 9px; } }

*, *::before, *::after { box-sizing: border-box; }
:root { scroll-padding-top: calc(var(--site-top) + 20px); scrollbar-gutter: stable; }
/* Moving between rooms of the site dissolves briefly, like turning in the gallery. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--serif); -webkit-font-smoothing: antialiased; }
body:has(dialog[open]) { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button, h1, h2, p, figure { margin: 0; }
button { background: none; border: 0; }
img { display: block; max-width: 100%; }
svg { flex: 0 0 auto; }
[hidden] { display: none !important; }
::selection { background: #a78c62; color: #10110f; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 7px; }
section:focus, aside:focus { outline: none; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 14px 20px; background: var(--paper); color: var(--ink); transform: translateY(-160%); font-family: var(--sans); font-size: 14px; }
.skip-link:focus { transform: translateY(0); }
main[tabindex='-1']:focus { outline: none; }
.eyebrow { color: var(--gold); font: 500 var(--label-size)/1.6 var(--sans); text-transform: uppercase; letter-spacing: .18em; }
/* Room toplines tell the visitor where they are; they read in ivory so the gold eyebrow above each title stands apart. */
.room-topline .eyebrow, .encounter-topline .eyebrow, .artist-scene__topline .eyebrow { color: var(--wayfinding); }
/* Held stages are one small screen tall. A phone that hides its toolbar while scrolling grows the screen by this gap,
   so their wall and floor continue below them by as much; it is zero wherever the toolbar never hides. */
@supports (height: 1lvh) { :root { --toolbar-gap: calc(100lvh - 100svh); } }
/* Rooms below the first screen keep their photographs until they come near (inc/performance.php marks them),
   so a phone on a slow connection spends its bandwidth on the first screen. */
.ab-js [data-defer-bg]:not(.is-near), .ab-js [data-defer-bg]:not(.is-near) *,
.ab-js [data-defer-bg]:not(.is-near)::before, .ab-js [data-defer-bg]:not(.is-near)::after,
.ab-js [data-defer-bg]:not(.is-near) ::before, .ab-js [data-defer-bg]:not(.is-near) ::after { background-image: none !important; }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 44px; padding: 8px 0; border-bottom: 1px solid rgb(196 164 116 / 65%); color: var(--gold); font: 500 10px/1.6 var(--sans); text-transform: uppercase; letter-spacing: .17em; transition: color 160ms ease, transform 160ms var(--ease-out); }
.text-link > span { font: 22px/1 var(--serif); transition: transform 200ms var(--ease-out); }
.text-link:active, button:active { transform: scale(.98); }

.site-header { --brand-caption-height: 12.8px; --brand-caption-gap: 9px; position: fixed; z-index: 30; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; height: var(--site-header-height); padding-inline: 12% 8%; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.site-header > :is(.desktop-nav, .menu-toggle, .mobile-nav) { margin-bottom: calc(var(--brand-caption-height) + var(--brand-caption-gap)); }
/* A soft shade behind the menu keeps it legible when text or photographs pass underneath; the wall stays visible. */
.site-header::before { content: ''; position: absolute; z-index: -1; inset: 0 0 -70px; background: linear-gradient(180deg, rgb(10 11 9 / 62%), rgb(10 11 9 / 30%) 55%, transparent); pointer-events: none; }
/* Keep the WordPress toolbar above the persistent navigation, also on phones. */
body.admin-bar #wpadminbar { position: fixed; }
.brand { display: inline-flex; flex-direction: column; gap: 9px; flex-shrink: 0; }
.brand__name { font: 500 clamp(15px, 1.25vw, 22px)/1.2 var(--serif); text-transform: uppercase; letter-spacing: .18em; color: var(--gold); }
.brand__subtitle { display: block; font: 400 8px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--paper); }
/* The photographer of a portrait, discreet under its caption. */
.photo-credit { display: block; margin-top: 4px; color: var(--muted); font: 400 9px/1.6 var(--sans); font-style: normal; letter-spacing: .06em; text-transform: none; }
.desktop-nav { display: flex; align-items: center; }
.desktop-nav a { display: inline-flex; gap: 16px; align-items: center; min-height: 44px; position: relative; }
.desktop-nav a::after { content: ''; position: absolute; bottom: 6px; left: 0; right: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--ease-out); }
.mobile-nav { display: none; }

.gallery-floor-junction { position: relative; height: clamp(64px, 6vw, 96px); background: #141611; pointer-events: none; }
.gallery-floor-junction img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.gallery-floor-junction::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 25%), transparent 28%, rgb(0 0 0 / 12%) 62%, #141611); box-shadow: inset 0 1px rgb(194 176 145 / 12%); }

.gallery-entrance { position: relative; isolation: isolate; height: 100svh; min-height: 700px; max-height: 1160px; overflow: clip; background: #252520; }
.room { position: absolute; z-index: -2; inset: -1% -1% 0; transform-origin: 60% 55%; }
.room__surface { position: absolute; inset: -2%; background: url('images/gallery-room.webp') center / 100% 100% no-repeat; transform-origin: 62% 45%; }
.room::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 3%, rgb(5 7 6 / 20%) 16%, rgb(8 9 8 / 18%) 42%, rgb(5 6 5 / 5%) 66%, rgb(6 7 6 / 20%)), linear-gradient(180deg, rgb(0 0 0 / 29%), transparent 25%, transparent 74%, rgb(0 0 0 / 8%)); }
.room__light { position: absolute; inset: 0; opacity: .12; background: linear-gradient(116deg, transparent 12%, rgb(255 229 171 / 22%) 15%, transparent 22%); }
.entrance-composition { position: absolute; top: 18%; bottom: 23%; left: 12%; right: 8%; display: grid; grid-template-columns: minmax(260px, 1.1fr) minmax(0, 1.35fr) minmax(80px, .35fr); align-items: center; gap: clamp(25px, 3.5vw, 72px); }
.entrance-copy { align-self: center; padding-bottom: 2%; }
.entrance-copy__eyebrow { margin-bottom: 29px; }
h1 { font-weight: 400; }
h1 em, h2 em { font-weight: 400; }
.entrance-copy__description { margin-top: 29px; color: #d3ccbd; line-height: 1.4; }
.entrance-art { position: relative; justify-self: center; width: min(100%, calc((100svh - var(--site-top)) * .46)); }
.artwork__mount { position: relative; }
.artwork__frame { display: block; position: relative; width: 100%; aspect-ratio: var(--work-width) / var(--work-height); background: #151512; padding: 5px; border: 1px solid #b59b67; box-shadow: inset 0 0 0 1px #514330, inset 0 0 0 3px #b39a69, 1px 1px 0 1px #2e2519, 5px 8px 8px rgb(0 0 0 / 42%), 14px 25px 27px -7px rgb(0 0 0 / 50%); }
.artwork__frame::after { content: ''; position: absolute; pointer-events: none; inset: 5px; box-shadow: inset 0 0 6px rgb(0 0 0 / 25%); }
.artwork__frame img { width: 100%; height: 100%; object-fit: contain; }
.artwork__observe { position: absolute; z-index: 1; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 16px; padding: 10px 14px; background: rgb(20 20 17 / 92%); color: var(--paper); font: 400 10px/1.4 var(--sans); letter-spacing: .08em; opacity: 0; transform: translateY(5px); transition: transform 200ms var(--ease-out), opacity 200ms ease; }
.artwork__observe span { font-size: 18px; }
.artwork__frame:focus-visible .artwork__observe { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  a.artwork__frame[data-artwork], a[data-artwork] > img { cursor: url('observer-cursor.svg?v=2') 26 26, zoom-in; }
  .artwork__frame:hover:not(:focus-visible) .artwork__observe { visibility: hidden; }
}
.artwork__number { font: 400 10px/1.5 var(--sans); color: var(--gold); letter-spacing: .1em; }
.artwork--hero .artwork__caption { display: flex; align-items: baseline; justify-content: center; column-gap: 12px; padding-top: 17px; }
.artwork--hero .artwork__number::after { content: ' /'; }
.artwork--hero .artwork__name { font-style: italic; font-size: 18px; line-height: 1.2; }
.entrance-aside { color: #d0bea1; font: 400 9px/2.25 var(--sans); letter-spacing: .17em; text-transform: uppercase; }
.entrance-aside span { display: block; width: 36px; height: 1px; margin-top: 26px; background: var(--gold); }
.entrance-bottom { position: absolute; bottom: 36px; left: 12%; right: 8%; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; font: 400 9px/1.6 var(--sans); text-transform: uppercase; letter-spacing: .12em; }
.room-label { display: flex; align-items: center; gap: 13px; color: #d0c6b5; }
.room-label__line { width: 36px; height: 1px; background: var(--gold); }
.scroll-invitation { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 44px; color: #e5dece; }
.scroll-invitation > span:last-child { font: 26px/1 var(--serif); }

h2 { font-weight: 400; letter-spacing: -.025em; }
/* One footer for every room: identity, navigation, social links, then the legal line. */
.site-footer { display: block; padding: 40px 12% 25px; border-top: 1px solid var(--line); background: #191c18; }
.site-footer__top { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.site-footer .brand__name { font-size: 15px; }
.site-footer .brand__subtitle { margin-top: 9px; }
.site-footer__navigation { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer__navigation a { display: inline-flex; align-items: center; min-height: 44px; color: #c1b8a6; font: 400 11px/1.5 var(--sans); transition: color 160ms ease; }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 24px; margin-top: 30px; padding-top: 18px; border-top: 1px solid rgb(196 164 116 / 13%); }
.site-footer__legal { font: 400 10px/1.8 var(--sans); color: #aaa392; }
.site-footer__legal a { color: var(--gold); transition: color 160ms ease; }
.site-footer__separator { margin-inline: 10px; color: rgb(196 164 116 / 45%); }
.site-footer__top-link { font-size: 10px; }
.home-secondary-link { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; color: #c6bdab; font: 400 11px/1.6 var(--sans); transition: color 160ms ease; }
.home-secondary-link > span[aria-hidden] { color: var(--gold); font: 19px/1 var(--serif); transition: transform 200ms var(--ease-out); }
.social-links { display: flex; flex: 0 0 auto; gap: 10px; }
.social-links a { display: inline-flex; justify-content: center; align-items: center; width: 44px; height: 44px; color: var(--gold); border: 1px solid rgb(196 164 116 / 42%); border-radius: 50%; transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease; }
.social-links svg { transition: transform 200ms var(--ease-out); }
.social-links a:focus-visible { outline-offset: 4px; }
.site-footer .social-links { gap: 8px; }
.site-footer .social-links a { width: 32px; height: 32px; }
.site-footer .social-links svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
  .site-footer__legal a:hover, .site-footer__navigation a:hover, .home-secondary-link:hover { color: var(--paper); }
  .home-secondary-link:hover > span[aria-hidden] { transform: translate(2px, -2px); }
  .social-links a:hover { color: var(--paper); border-color: var(--gold); background-color: rgb(196 164 116 / 8%); }
  .social-links a:hover svg { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .social-links svg { transition: none; }
  .social-links a:hover svg { transform: none; }
  .home-secondary-link > span[aria-hidden] { transition: color 160ms ease; }
  .home-secondary-link:hover > span[aria-hidden] { transform: none; }
}
.content-page { min-height: 75vh; padding: 180px 12% 100px; }

@media (hover: hover) and (pointer: fine) {
  .desktop-nav a:hover::after { transform: scaleX(1); }
  .text-link:hover { color: #eee3c9; }
  .text-link:hover > span { transform: translate(2px, -2px); }
}

/* A room that holds the visitor must fill the screen, or the space above it would show while it is held. */
@media (min-width: 961px) and (min-height: 650px) {
  [data-room]:not([data-room='pinned']):not([data-room='static']) { min-height: 100svh; }
}

@media (min-width: 1800px) {
  .site-header { padding-left: max(12%, calc((100% - 1460px) / 2)); padding-right: max(8%, calc((100% - 1500px) / 2)); }
  .entrance-composition, .entrance-bottom { left: max(12%, calc((100% - 1460px) / 2)); right: max(8%, calc((100% - 1500px) / 2)); }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .site-header { padding-inline: 11% 6%; gap: 22px; }
  .brand__name { font-size: 16px; }
  .entrance-composition { left: 12%; right: 9%; grid-template-columns: .95fr 1fr; gap: 5%; }
  .entrance-aside { display: none; }
  .entrance-art { width: min(100%, calc((100svh - var(--site-top)) * .43)); }
}

@media (max-width: 760px) {
  :root { --site-header-height: 72px; }
  .site-header { --brand-caption-height: 11.2px; --brand-caption-gap: 6px; padding-inline: 24px; gap: 18px; }
  .brand { gap: 6px; }
  .brand__name { font-size: 13px; letter-spacing: .12em; }
  .brand__subtitle { font-size: 7px; letter-spacing: .12em; }
  .mobile-nav summary { display: flex; align-items: center; gap: 10px; min-height: 44px; list-style: none; cursor: pointer; color: var(--paper); font: 400 9px/1.5 var(--sans); }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav__panel { border: 1px solid #655439; box-shadow: 0 12px 30px rgb(0 0 0 / 50%); }
  .mobile-nav__links { display: grid; }
  .mobile-nav__links a { min-height: 53px; align-items: center; justify-content: space-between; font-size: 23px; }
  .mobile-nav__links a + a { border-top: 1px solid rgb(196 164 116 / 15%); }
  .mobile-nav__links a span { color: var(--gold); }
  .gallery-entrance { height: auto; min-height: 100svh; max-height: none; padding: 115px 24px 35px; }
  .room { inset: 0; }
  .room__surface { inset: 0; background-size: auto 100%; background-position: 55% center; }
  .room::after { background: linear-gradient(180deg, rgb(10 12 9 / 50%), rgb(8 10 7 / 22%) 27%, transparent 50%, rgb(8 10 7 / 27%)); }
  .entrance-composition { position: relative; inset: auto; display: flex; flex-direction: column; }
  .entrance-copy { align-self: stretch; padding: 0; text-align: center; }
  .entrance-copy__eyebrow { margin-bottom: 14px; }
  h1 br { display: none; }
  h1 em { display: block; }
  .entrance-copy__description { margin-top: 16px; line-height: 1.3; }
  .entrance-copy__description br { display: none; }
  .entrance-art { width: min(68vw, 29svh); min-width: 210px; }
  .artwork__frame { padding: 4px; }
  .artwork__frame::after { inset: 4px; }
  .artwork--hero .artwork__caption { padding-top: 12px; }
  .artwork--hero .artwork__name { font-size: 17px; }
  .entrance-aside { display: none; }
  .entrance-bottom { position: relative; inset: auto; display: flex; flex-direction: column; align-items: center; gap: 15px; margin-top: 25px; }
  .room-label { display: none; }
  .scroll-invitation { gap: 5px; font-size: 8px; }
  .artwork__observe { display: none; }
  .site-footer { padding: 34px 28px 18px; }
  .site-footer__top { display: block; }
  .site-footer .brand__name { font-size: 14px; }
  .site-footer__navigation { margin-top: 23px; column-gap: 22px; row-gap: 0; }
  .site-footer__top > .social-links { margin-top: 20px; }
  .site-footer__navigation a { font-size: 10px; }
  .site-footer__bottom { margin-top: 22px; gap: 12px 14px; }
  .site-footer__legal { font-size: 9px; }
  .site-footer__separator { display: block; height: 0; overflow: hidden; margin: 0; }
  .site-footer__separator--pair { display: inline; height: auto; margin-inline: 10px; }
  .site-footer__top-link { font-size: 9px; gap: 9px; }
  .content-page { padding: 130px 24px 60px; }
}

@media (max-width: 360px) {
  .site-header { --brand-caption-height: 9.6px; padding-inline: 18px; }
  .brand__name { font-size: 11px; }
  .brand__subtitle { font-size: 6px; }
  .gallery-entrance { padding-inline: 18px; }
  .mobile-nav summary > span:first-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .room, .entrance-composition, [data-reveal] { transform: none !important; }
  .artwork__observe, .desktop-nav a::after, .text-link > span { transition: opacity 160ms ease, color 160ms ease; }
  .text-link:active, button:active { transform: none; }
}

/* A short, scroll-controlled passage into the gallery. */
.gallery-journey { position: relative; }
.immersion-caption, .immersion-anchor { display: none; }
/* Positioned so its clip holds the wall of works (absolutely placed bays) before the scripts pin it: otherwise the
   page briefly spreads to the whole wall's width and a phone shows the next work in a corner. */
.has-journey .gallery-stage { position: relative; height: 100svh; overflow: clip; isolation: isolate; }
.has-journey .gallery-entrance { height: 100%; min-height: 0; max-height: none; }
.has-journey .room, .has-journey .wall-fixtures { transform-origin: 62% 38%; }
.has-journey .entrance-art { transform-origin: 50% 42%; }
.has-journey .immersion-caption { display: block; position: absolute; top: 36%; left: 12%; width: 31%; max-width: 470px; opacity: 0; pointer-events: none; }
.immersion-caption__quote { letter-spacing: -.025em; text-wrap: balance; }
.immersion-caption__quote em { color: #d5bc90; }
.immersion-caption__echo { color: var(--muted); font-style: italic; }
.has-journey .immersion-anchor { display: block; position: absolute; top: 80svh; width: 1px; height: 1px; scroll-margin-top: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The site's seven rooms, with a native modal on compact screens. */
.desktop-nav { gap: clamp(13px, 1.6vw, 29px); }
/* A little more presence over the photographs: larger, medium weight, a soft shadow for contrast. */
.desktop-nav a { font-size: 18px; font-weight: 500; letter-spacing: .01em; text-shadow: 0 1px 10px rgb(0 0 0 / 55%); }
.desktop-nav a::after { height: 1.5px; }
.desktop-nav a[aria-current='page'] { color: var(--gold); }
.menu-toggle { display: none; align-items: center; gap: 12px; min-height: 44px; font: 400 10px/1.5 var(--sans); }
.menu-icon { display: block; width: 23px; height: 8px; border-block: 1px solid var(--gold); }
.navigation-dialog { position: fixed; inset: 0; margin: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; padding: 27px clamp(28px, 7vw, 100px) max(24px, env(safe-area-inset-bottom)); border: 0; background: #20221d; color: var(--paper); overflow-y: auto; overscroll-behavior: contain; }
.navigation-dialog[open] { display: flex; flex-direction: column; }
.navigation-dialog > * { flex-shrink: 0; }
.navigation-dialog::backdrop { background: #151712; }
.navigation-dialog__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.navigation-dialog__top .brand__name { font-size: 15px; line-height: 1.5; }
.navigation-close { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 0 0 12px; font: 400 10px/1.5 var(--sans); }
/* A drawn cross, gold like the menu icon it replaces, sits on the word's centre line and on the right edge; a typeset × sank below. */
.navigation-close__icon { position: relative; width: 14px; height: 14px; }
.navigation-close__icon::before, .navigation-close__icon::after { content: ''; position: absolute; top: 50%; left: -3px; right: -3px; height: 1px; margin-top: -.5px; background: var(--gold); }
.navigation-close__icon::before { transform: rotate(45deg); }
.navigation-close__icon::after { transform: rotate(-45deg); }
.navigation-dialog__invitation { margin: clamp(24px, 6vh, 65px) 0 20px; }
.navigation-dialog__links { max-width: 760px; }
.navigation-dialog__links a { display: flex; align-items: baseline; min-height: 53px; gap: 23px; border-bottom: 1px solid rgb(196 164 116 / 17%); padding: 7px 0; font-size: clamp(32px, 5.3vh, 58px); line-height: 1.06; letter-spacing: -.025em; }
.navigation-dialog__links a[aria-current='page'] { color: var(--gold); }
.navigation-number { font: 400 9px/1.5 var(--sans); color: #a29a87; letter-spacing: .1em; }
.navigation-arrow { margin-left: auto; font-size: 24px; color: var(--gold); }
.navigation-dialog__bottom { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; margin-top: auto; padding-top: 35px; color: var(--muted); font: 400 9px/1.8 var(--sans); }
.navigation-dialog__bottom a { display: flex; gap: 16px; align-items: center; min-height: 44px; color: var(--gold); }
.navigation-dialog__social, .mobile-nav__social { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.navigation-dialog__social .social-links, .mobile-nav__social .social-links { gap: 12px; }
.navigation-dialog__social svg, .mobile-nav__social svg { width: 16px; height: 16px; }
@media (max-width: 1100px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .mobile-nav { display: block; }
  .mobile-nav__panel { position: absolute; top: 100%; max-height: calc(100dvh - var(--site-top)); overflow-y: auto; left: 0; right: 0; background: var(--ink); padding: 20px; }
  .mobile-nav__links a { display: flex; padding: 10px 0; }
}
@media (max-width: 760px) {
  /* Phone menu: titles sized for a hand-held screen, all seven visible without scrolling. */
  .navigation-dialog__links a { min-height: 46px; font-size: clamp(26px, 7.4vw, 32px); gap: 18px; padding: 6px 0; }
  .navigation-arrow { font-size: 19px; }
}

/* An artwork opens into a room, with a quiet editorial cartel. */
.art-dialog { position: fixed; inset: 0; margin: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; padding: 0; border: 0; background: #1c1f1a; color: var(--paper); overflow: auto; overscroll-behavior: contain; }
.art-dialog[open] { display: grid; grid-template-rows: 77px minmax(0, 1fr) 67px; }
.art-dialog::backdrop { background: #151712; }
.art-dialog__top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 0 3.5%; border-bottom: 1px solid var(--line); background: #1c1f1a; }
.art-dialog__signature { font: 500 15px/1.2 var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.art-dialog__edition { font: 400 9px/1.5 var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.dialog-close { display: flex; min-height: 44px; color: var(--paper); }
.art-dialog__layout { display: grid; grid-template-columns: 58% 42%; min-height: 0; }
.art-dialog__stage { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 48% 38%, #59574b, #35392f 60%, #272c24); display: flex; align-items: center; justify-content: center; padding: 42px 60px 76px; }
.art-dialog__stage::after { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .12; background: url('images/gallery-room.webp') 50% 30% / cover; }
.art-dialog[data-collection='fresco'] .art-dialog__stage { background: #2b251e; padding: 52px 35px 85px; }
.art-dialog[data-collection='fresco'] .art-dialog__stage::after { opacity: 1; background: linear-gradient(rgb(18 16 12 / 15%), rgb(18 16 12 / 35%)), url('images/fresco-room-close.webp') center / 100% 100%; }
.art-dialog[data-collection='fresco'] .art-dialog__image img { border: 0; box-shadow: 0 10px 30px rgb(0 0 0 / 30%); }
.art-dialog[data-collection='fresco'] .art-dialog__content { background: linear-gradient(135deg, #28261f, #1c1f1a); }
.art-dialog[data-collection='fresco'] .art-dialog__stage.is-zoomed { padding: 0; }
.art-dialog__image { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; }
.art-dialog__image img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border: 1px solid #a48b5d; box-shadow: 8px 15px 35px rgb(0 0 0 / 48%); }
.detail-toggle { position: absolute; z-index: 1; bottom: 24px; left: 28px; display: flex; align-items: center; gap: 12px; padding: 0 15px; min-height: 44px; border: 1px solid rgb(221 210 186 / 35%); border-radius: 30px; background: rgb(26 29 23 / 85%); font: 400 9px/1.5 var(--sans); letter-spacing: .04em; }
.detail-toggle > span:first-child { font-size: 19px; }
.art-dialog__stage-note { position: absolute; bottom: 39px; right: 30px; font-style: italic; color: #d1c6b2; }
.art-dialog__content { overflow-y: auto; overscroll-behavior: contain; padding: clamp(35px, 6vh, 80px) clamp(32px, 4.5vw, 90px) 45px; }
.art-dialog h2 { text-wrap: balance; }
.art-dialog__facts { font: 400 11px/1.8 var(--sans); letter-spacing: .06em; color: #d3c9b7; }
.art-dialog__technique { font: 400 10px/1.8 var(--sans); color: var(--muted); margin-top: 9px; max-width: 270px; }
.art-dialog__divider { width: 45px; height: 1px; background: var(--gold); }
.art-dialog__text { white-space: pre-line; }
.art-dialog__views { position: absolute; bottom: 27px; right: 28px; display: flex; gap: 14px; padding: 4px 12px; background: rgb(20 21 17 / 88%); }
.art-dialog__views button { min-height: 34px; white-space: nowrap; color: var(--muted); font: 400 9px/1.5 var(--sans); border-bottom: 1px solid transparent; }
.art-dialog__views button[aria-pressed='true'] { color: var(--gold); border-color: var(--gold); }
.has-alternate-views .art-dialog__stage-note { display: none; }
.art-dialog__contact { margin-top: 30px; gap: 15px; }
.art-dialog__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding: 0 3.5%; }
.art-dialog__bottom button { display: flex; align-items: center; gap: 22px; min-height: 44px; font: 400 9px/1.5 var(--sans); text-transform: uppercase; letter-spacing: .12em; }
.art-dialog__bottom button > span { font: 26px/1 var(--serif); color: var(--gold); }
.art-dialog__bottom-title { font-style: italic; color: var(--muted); }
.art-dialog__stage.is-zoomed { padding: 0; }
.art-dialog__stage.is-zoomed .art-dialog__image { display: block; overflow: auto; overscroll-behavior: contain; }
.art-dialog__stage.is-zoomed img { max-width: none; max-height: none; width: var(--detail-width); height: auto; margin: 0 auto; border: 0; box-shadow: none; }
.art-dialog__stage.is-zoomed .art-dialog__stage-note { display: none; }
@media (max-width: 1100px) {
  .art-dialog__layout { grid-template-columns: 54% 46%; }
  .art-dialog__stage { padding-inline: 30px; }
  .art-dialog__stage-note { display: none; }
  .art-dialog__content { padding-inline: 30px; }
}
@media (max-width: 760px) {
  .art-dialog[open] { display: block; }
  .art-dialog__top { position: sticky; top: 0; height: 67px; padding: 0 23px; }
  .art-dialog__signature { font-size: 11px; max-width: 160px; line-height: 1.5; }
  .art-dialog__edition, .dialog-close > span:first-child { display: none; }
  .dialog-close { width: 44px; justify-content: center; }
  .art-dialog__layout { display: block; }
  .art-dialog__stage { height: 66svh; min-height: 380px; padding: 30px 30px 80px; }
  .has-alternate-views .art-dialog__stage { padding-bottom: 128px; }
  .art-dialog .art-dialog__views { bottom: 76px; left: 50%; right: auto; transform: translateX(-50%); }
  .art-dialog[data-collection='fresco'] .art-dialog__stage { height: clamp(320px, 100vw, 460px); min-height: 0; padding: 35px 22px 75px; }
  .detail-toggle { left: 50%; transform: translateX(-50%); white-space: nowrap; bottom: 18px; }
  .detail-toggle:active { transform: translateX(-50%) scale(.98); }
  .art-dialog__content { overflow: visible; padding: 38px 28px 42px; }
  .art-dialog__bottom { min-height: 70px; padding: 0 25px; }
  .art-dialog__bottom-title { display: none; }
  .art-dialog__bottom button { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .entrance-art, .entrance-copy, .immersion-caption { transform: none !important; }
}

/* Separate, readable editorial rooms. Content remains editable in WordPress. */
.interior-page { padding-top: 165px; }
.page-introduction { padding: 55px 12% 65px; border-bottom: 1px solid var(--line); }
.page-introduction h1 { max-width: 1080px; margin-top: 28px; text-wrap: balance; }
.page-introduction__lead { margin-top: 30px; color: var(--muted); font-style: italic; }
.prose p + p { margin-top: 25px; }
.prose h2 { margin: 60px 0 24px; line-height: 1.1; }
.editorial-content { max-width: 900px; margin: 0 auto; padding: 65px 40px 90px; }
.editorial-content > p:first-child { color: #e6dcc8; }
/* Plain text pages (legal notice, privacy): titles in the gallery's serif, links and lists read as such. */
.editorial-content h2 { font-family: var(--serif); font-weight: 400; color: var(--paper); }
.editorial-content > h2:first-child { margin-top: 0; }
.editorial-content a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.editorial-content ul { margin: 18px 0 0; padding-left: 20px; }
.editorial-content li + li { margin-top: 8px; }
.editorial-content ul + p { margin-top: 25px; }
.editorial-content strong { color: #e6dcc8; font-weight: 500; }
.page-next { padding: 50px 12% 65px; background: #252820; color: var(--paper); }
.page-next .eyebrow { color: var(--gold); margin-bottom: 25px; }
.page-next > a { display: flex; justify-content: space-between; gap: 25px; line-height: 1.15; }
.exhibition-entry { display: grid; grid-template-columns: 62px 1fr; gap: 27px; padding: 40px 0; border-bottom: 1px solid var(--line); }
.exhibition-entry .eyebrow { padding-top: 8px; }
.exhibition-entry h2 { margin: 0 0 15px; }
.exhibition-entry__date { font: 400 10px/1.9 var(--sans); color: var(--gold); margin-bottom: 20px; }
.exhibition-entry p:last-child { color: var(--muted); }
@media (max-width: 760px) {
  .interior-page { padding-top: 100px; }
  .page-introduction { padding: 40px 28px; }
  .editorial-content { padding: 40px 28px 55px; }
  .page-next { padding: 40px 28px; }
  .exhibition-entry { grid-template-columns: 38px 1fr; gap: 13px; padding: 30px 0; }
}

/* A quieter type scale: the paintings carry the visual weight. */
h1 { font-size: clamp(48px, 5vw, 72px); line-height: 1.04; letter-spacing: -.025em; }
#entrance-title > em { color: #d5bc90; }
h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.12; }
.gallery-scene__copy h2 em, #dialog-title em { color: #d5bc90; font-style: italic; }
.entrance-copy__description { font-size: 18px; }
.immersion-caption__quote { font-size: clamp(28px, 3vw, 42px); line-height: 1.15; margin-top: 22px; }
.immersion-caption__echo { font-size: 18px; margin-top: 20px; }
.art-dialog h2 { font-size: clamp(32px, 3vw, 44px); line-height: 1.12; margin: 18px 0 22px; letter-spacing: -.015em; }
.art-dialog__text, .prose { font: 400 15px/1.85 var(--sans); color: #c9c4b9; }
.art-dialog__content { display: flex; flex-direction: column; justify-content: safe center; }
.art-dialog__content > * { flex-shrink: 0; }
.art-dialog__contact { width: fit-content; font-size: 10px; letter-spacing: .09em; }
.art-dialog__contact > [data-contact-label] { font: inherit; transform: none; }
.art-dialog__divider { margin: 28px 0; }
.dialog-close { align-items: center; gap: 17px; font: 400 12px/1 var(--sans); }
.dialog-close > span { display: block; line-height: 1; }
.dialog-close svg { display: block; width: 20px; height: 20px; }
.art-dialog__stage-note { font-size: 15px; }
.art-dialog__bottom-title { font-size: 16px; }
.page-introduction h1 { font-size: clamp(40px, 4.5vw, 64px); line-height: 1.1; }
.page-introduction__lead { font-size: clamp(19px, 2vw, 25px); }
.prose h2 { font-size: clamp(26px, 2.8vw, 36px); }
.editorial-content > p:first-child { font-size: 15px; line-height: 1.85; }
.exhibition-entry h2 { font-size: 28px; }
.exhibition-entry p:last-child { font-size: 15px; }
.page-next > a { font-size: clamp(28px, 3vw, 42px); }

/* Contact keeps its context in the subject, without exposing personal data in URLs. */
.contact-form-panel { scroll-margin-top: 40px; }
.contact-form-panel:focus { outline: none; }
.contact-form-panel h2 { font-size: 32px; margin: 16px 0 35px; }
.contact-form { font-family: var(--sans); }
.contact-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-field { margin-bottom: 25px; min-width: 0; }
.form-field label { display: block; margin-bottom: 12px; color: #d4cbb9; font: 400 12px/1.5 var(--sans); }
.form-field label span { color: var(--gold); }
.form-field input, .form-field textarea { display: block; width: 100%; border: 1px solid #69624e; border-radius: 0; padding: 14px 15px; background: #20231d; color: var(--paper); font: 400 15px/1.6 var(--sans); }
.form-field textarea { resize: vertical; min-height: 180px; }
.form-field input:focus-visible, .form-field textarea:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
.form-field [aria-invalid='true'] { border-color: #d99e88; }
.field-error { color: #efb49e; font: 400 12px/1.6 var(--sans); margin-top: 10px; }
.contact-form__note { max-width: 460px; font: 400 11px/1.7 var(--sans); color: var(--muted); }
.contact-form__note a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.contact-form__submit { margin-top: 24px; font-size: 11px; letter-spacing: .1em; }
.contact-form__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-notice { border-left: 2px solid #d99e88; padding: 18px 23px; margin: 0 0 30px; background: #28271f; font: 400 14px/1.75 var(--sans); }
.form-notice h3 { font: 400 28px/1.2 var(--serif); margin: 0 0 15px; }
.form-notice ul { padding-left: 18px; margin-bottom: 0; }
.form-notice a { text-decoration: underline; text-underline-offset: 3px; }
.form-notice--success { border-color: var(--gold); }
.form-notice--success .text-link { margin-top: 25px; text-decoration: none; }
@media (max-width: 760px) {
  h1 { font-size: 46px; }
  .art-dialog h2 { font-size: 32px; }
  .art-dialog__content { display: block; }
  .art-dialog__text, .prose { font-size: 14px; line-height: 1.85; }
  .editorial-content > p:first-child { font-size: 14px; }
  .page-introduction h1 { font-size: 40px; }
  .page-introduction__lead { font-size: 21px; }
  .exhibition-entry h2 { font-size: 25px; }
  .exhibition-entry p:last-child { font-size: 14px; }
  .page-next > a { font-size: 30px; }
  .dialog-close > span { display: none; }
  .contact-form__pair { grid-template-columns: 1fr; gap: 0; }
  .contact-form-panel h2 { font-size: 28px; }
  .form-field input, .form-field textarea { font-size: 16px; }
}

/* A first-visit opening through light, with independent surfaces for the camera approach. */
.artwork--hero { transform-origin: 50% 42%; }
.artwork--hero .artwork__mount { isolation: isolate; }
.picture-light { position: absolute; z-index: -1; inset: -30% -45%; pointer-events: none; background: radial-gradient(ellipse closest-side at 50% 45%, rgb(242 203 133 / 23%), transparent 100%); opacity: .58; }
.picture-lamp { position: absolute; bottom: calc(100% - 15px); left: 23%; width: 54%; pointer-events: none; filter: drop-shadow(2px 5px 3px rgb(0 0 0 / 60%)); }
.picture-lamp img { width: 100%; height: auto; }
@media (min-width: 761px) {
  .artwork--hero .picture-lamp { bottom: calc(100% - 10px); }
}
.picture-shade { position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, rgb(3 5 4 / 68%), rgb(3 5 4 / 88%)); opacity: 0; pointer-events: none; }
/* The fixtures share both camera planes with the wall, while remaining accessible controls. */
.wall-fixtures { position: absolute; z-index: 4; inset: -1% -1% 0; transform-origin: 60% 55%; pointer-events: none; }
.wall-fixtures__surface { position: absolute; inset: -2%; transform-origin: 62% 45%; }
.wall-switch { position: absolute; right: 12%; top: 64%; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 72px; min-height: 44px; padding: 4px 8px 8px; pointer-events: auto; }
.wall-switch__plate { position: relative; display: block; width: 36px; height: 36px; filter: drop-shadow(1px 2px 1px rgb(0 0 0 / 65%)); }
.wall-switch__plate img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 160ms var(--ease-out); }
.wall-switch__off { opacity: 0; mask: url('images/wall-switch-on.webp') center / contain no-repeat; }
.wall-switch__label { font: 400 8px/1.6 var(--sans); letter-spacing: .09em; color: #e0d5c1; }
.wall-switch__label > span { display: block; color: var(--muted); font-size: 8px; letter-spacing: 0; }
.picture-shade, .picture-light, .picture-lamp { transition: opacity 250ms var(--ease-out); }
[data-light='off'] .picture-shade { opacity: .88; }
[data-light='off'] .picture-light { opacity: 0; }
[data-light='off'] .picture-lamp { opacity: .38; }
[data-light='off'] .wall-switch__on { opacity: 0; }
[data-light='off'] .wall-switch__off { opacity: 1; }
.light-instant .picture-shade, .light-instant .picture-light, .light-instant .picture-lamp, .light-instant .wall-switch__plate img { transition: none; }
@media (max-width: 1100px) and (min-width: 761px) {
  .wall-switch { right: 9%; top: 69%; width: 64px; }
  .wall-switch__plate { width: 32px; height: 32px; }
}
@media (max-width: 760px) {
  .entrance-composition { gap: 50px; }
  .picture-lamp { bottom: calc(100% - 5px); }
  .wall-fixtures, .wall-fixtures__surface { display: contents; }
  .wall-switch { position: relative; inset: auto; flex-direction: row; width: fit-content; margin: 12px auto 0; padding: 0; gap: 10px; }
  .wall-switch__plate { width: 32px; height: 32px; }
  .wall-switch__label { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .room__surface, .artwork--hero, .wall-fixtures, .wall-fixtures__surface { transform: none !important; }
  .picture-shade, .picture-light, .picture-lamp, .wall-switch__plate img { transition: none; }
}

/* One continuous wall: the photographs, their lamps and the room travel together. */
.room__extension { display: none; }
/* A two-pixel overlap prevents hairline gaps when the moving surfaces land between device pixels. */
.has-journey .room__extension { display: block; position: absolute; top: -2%; bottom: -2%; left: calc(var(--bay) * 100% - 1px); width: calc(100% + 2px); background: linear-gradient(rgb(6 7 6 / 12%), rgb(6 7 6 / 12%)), url('images/gallery-room.webp') 60% center / 140% 100% no-repeat; }
.room__extension--mirror { transform: scaleX(-1); }
.gallery-scene { --gallery-unit: min(.32vw, 4px); position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 12%; min-height: 85svh; padding: 110px 12%; background: linear-gradient(rgb(12 14 11 / 12%), rgb(12 14 11 / 12%)), url('images/gallery-room.webp') 60% center / 140% 100% no-repeat; }
.gallery-scene__plant { position: absolute; z-index: -1; right: -5%; bottom: 3%; width: min(18vw, 280px); pointer-events: none; }
.gallery-scene__plant::before { content: ''; position: absolute; left: 22%; bottom: 1%; width: 65%; height: 5%; background: radial-gradient(ellipse, rgb(0 0 0 / 65%), transparent 70%); }
.gallery-scene__plant img { position: relative; width: 100%; height: auto; filter: brightness(.82) saturate(.8); }
.gallery-scene__plant--left { left: 1.5%; right: auto; width: min(13vw, 200px); }
.gallery-journey:not(.has-journey) .gallery-scene { overflow: clip; }
.gallery-scene__copy { max-width: 430px; }
.gallery-scene__copy .eyebrow > span { margin-inline: 9px; color: var(--muted); }
.gallery-scene__copy h2 { margin-top: 22px; font-size: clamp(28px, 3vw, 42px); line-height: 1.12; text-wrap: balance; }
.gallery-scene__excerpt { margin-top: 25px; color: #d0c9bb; font: 400 15px/1.85 var(--sans); }
.gallery-scene__copy .text-link, .immersion-caption .text-link { margin-top: 26px; font-size: 9px; letter-spacing: .1em; pointer-events: auto; }
.gallery-scene.gallery-collection { display: grid; grid-template-columns: 1fr; place-items: center; }
.gallery-collection__copy { width: min(100%, 580px); text-align: center; pointer-events: auto; }
.gallery-collection__copy h2 { margin-top: 24px; font-size: clamp(34px, 3vw, 44px); line-height: 1.12; }
.gallery-collection__copy h2 em { color: #d5bc90; }
.gallery-collection__description { max-width: 460px; margin: 25px auto 0; color: #d0c9bb; font: 400 15px/1.85 var(--sans); }
.gallery-collection__copy .gallery-collection-link { margin-top: 30px; }
.gallery-collection-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 52px; max-width: 100%; padding: 12px 20px; background: #c4a474; color: #20221c; border: 1px solid #d5bc90; font: 500 11px/1.6 var(--sans); letter-spacing: .035em; transition: background-color 160ms ease; }
.gallery-collection-link > span { font: 25px/1 var(--serif); }
@media (hover: hover) and (pointer: fine) {
  .gallery-collection-link:hover { background-color: #dcc399; }
}
.gallery-scene__art { justify-self: center; width: calc(var(--relative-width) * var(--gallery-unit)); }
.gallery-scene .artwork__mount { isolation: isolate; }
.gallery-scene .picture-lamp { width: calc(65 * var(--gallery-unit)); left: 50%; transform: translateX(-50%); }
.has-journey .gallery-sequence { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* Until home.js has measured the room, the bays have no geometry of their own (their place and size come from
   --gallery-center-* and --gallery-scale): each browser falls back differently, and Firefox hung the next work in the
   top right corner. They stay hidden until the engine takes the wall over, in the task that removes is-awaiting-wall. */
.is-awaiting-wall .gallery-sequence { visibility: hidden; }
.has-journey .gallery-scene { position: absolute; top: 0; bottom: 0; left: calc(var(--bay, 1) * 100%); width: 100%; display: block; min-height: 0; padding: 0; background: none; }
.has-journey .gallery-scene__copy { position: absolute; left: 12%; top: var(--gallery-center-y); width: 31%; transform: translateY(-50%); pointer-events: auto; }
.has-journey .gallery-scene__art { position: absolute; left: var(--gallery-center-x); top: var(--gallery-center-y); transform: translate(-50%, -50%); pointer-events: auto; }
.has-journey .gallery-scene { --gallery-unit: var(--gallery-scale); }
.has-journey .gallery-collection__copy { position: absolute; left: 50%; top: 45%; width: min(76%, 580px); transform: translate(-50%, -50%); }
.has-journey .room-label { visibility: hidden; }
.has-journey .entrance-bottom { z-index: 5; }
.gallery-pagination { position: absolute; z-index: 6; bottom: clamp(88px, 14svh, 140px); left: 12%; display: flex; gap: 6px; align-items: center; }
.gallery-pagination a { min-width: 40px; min-height: 44px; display: flex; align-items: center; gap: 9px; padding: 8px 4px; color: #b9b2a3; font: 400 10px/1 var(--sans); }
.gallery-pagination__line { display: block; width: 22px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--ease-out); }
.gallery-pagination a[aria-current='true'] { color: var(--gold); }
.gallery-pagination a[aria-current='true'] .gallery-pagination__line { transform: scaleX(1); }
@media (max-width: 760px) {
  .gallery-scene { --gallery-unit: min(.47vw, 2.4px); display: flex; flex-direction: column; gap: 70px; padding: 60px 28px 85px; min-height: 100svh; }
  .gallery-scene__copy { text-align: center; max-width: 380px; }
  .gallery-scene__copy h2 { font-size: 28px; margin-top: 14px; }
  .gallery-scene__excerpt { font-size: 14px; line-height: 1.7; margin-top: 15px; }
  .gallery-scene__copy .text-link { margin-top: 12px; font-size: 8px; }
  .gallery-collection__copy h2 { font-size: 34px; margin-top: 20px; }
  .gallery-collection__description { font-size: 14px; margin-top: 22px; }
  .gallery-collection__copy .gallery-collection-link { margin-top: 26px; }
  .gallery-collection-link { min-height: 46px; padding: 9px 17px; font-size: 10px; gap: 18px; }
  .gallery-scene .picture-lamp { bottom: calc(100% - 5px); }
  .gallery-scene__plant { width: 24%; right: -3%; bottom: 9%; }
  .gallery-scene__plant--left { left: -5%; right: auto; width: 22%; }
  .has-journey .gallery-entrance { padding: 0; }
  .has-journey .entrance-composition { position: absolute; inset: 114px 24px 145px; justify-content: space-between; gap: 42px; }
  .has-journey .entrance-copy h1 { font-size: 42px; }
  .has-journey .entrance-copy__description { font-size: 16px; margin-top: 14px; }
  .has-journey .entrance-art { width: min(54vw, 27svh); min-width: 0; }
  .has-journey .immersion-caption { top: 180px; left: 28px; width: calc(100% - 56px); max-width: none; text-align: center; }
  .has-journey .immersion-caption__quote { font-size: 29px; margin-top: 14px; }
  .has-journey .immersion-caption__echo { margin-top: 10px; font-size: 16px; }
  .has-journey .immersion-caption .text-link { margin-top: 10px; font-size: 8px; }
  .has-journey .gallery-scene__copy { top: var(--gallery-copy-y); left: 28px; width: calc(100% - 56px); max-width: none; }
  .has-journey .gallery-collection__copy { width: calc(100% - 56px); }
  .has-journey .wall-fixtures, .has-journey .wall-fixtures__surface { display: block; }
  .has-journey .wall-fixtures { inset: 0; }
  .has-journey .wall-fixtures__surface { inset: 0; }
  .has-journey .wall-switch { position: absolute; right: 8%; top: 76%; margin: 0; }
  /* The label leaves the compact wall but keeps naming the switch for assistive technology. */
  .has-journey .wall-switch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .has-journey .entrance-bottom { position: absolute; left: 28px; right: 28px; bottom: 22px; margin: 0; flex-direction: row; justify-content: flex-end; }
  .has-journey .room-label { display: none; }
  .has-journey .scroll-invitation { font-size: 7px; }
  /* « Observer l’œuvre » hangs under the painting, on the wall, never between the text and the frame. */
  .has-journey .gallery-stage, .has-journey .gallery-entrance { overflow-x: clip; overflow-y: visible; }
  .has-journey .room { bottom: calc(-1 * var(--toolbar-gap)); }
  /* Every bay shows the room photograph as the entrance does (same scale and crop, mirrored every other bay):
     the wall and the floor line run on without a seam while the works travel. */
  .has-journey .room__extension { top: 0; bottom: 0; background: url('images/gallery-room.webp') 55% center / auto 100% no-repeat; }
  /* One veil spans the whole wall, so no seam is darkened twice where two bays meet. */
  .has-journey .room::after { z-index: 1; right: -1000%; }
  /* The plants stand on that floor line, measured with the room's zoom (home.js sets --floor-y). */
  .has-journey .gallery-scene__plant { bottom: calc(100% - var(--floor-y, 88%) - 26px); }
    .text-link--under { position: absolute; top: calc(100% + 14px); left: 50%; margin: 0; transform: translateX(-50%); font-size: 8px; white-space: nowrap; }
  /* Short phones stack the rooms. The photograph's floor line, at 82.9 % of its height, is held a fixed height above
     each room's foot, so the painting, its switch and « Observer l’œuvre » stay on the wall whatever the text above. */
  .gallery-journey:not(.has-journey) .room__surface { background-size: auto calc((100% - 110px) / .829); background-position: 55% top; }
  .gallery-journey:not(.has-journey) .gallery-scene { padding-bottom: 146px; background-size: auto, 140% calc((100% - 70px) / .829); background-position: 0 0, 60% top; }
  .gallery-journey:not(.has-journey) .text-link--after { display: flex; width: fit-content; margin: 10px auto 0; font-size: 8px; }
  .gallery-journey:not(.has-journey) .entrance-bottom { margin-top: 56px; }
  .wall-switch--beside { position: absolute; left: calc(100% + 14px); bottom: 2%; top: auto; right: auto; margin: 0; }
  .wall-switch--beside .wall-switch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Phones: the numbers share the bottom line with the invitation, leaving the wall under the painting free. */
  .gallery-pagination { left: 20px; bottom: 28px; gap: 0; }
  .gallery-pagination a { min-width: 35px; gap: 5px; font-size: 9px; }
  .gallery-pagination__line { width: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-pagination__line { transition: none; }
}