.gallery-page {
  --gallery-margin: clamp(20px, 4vw, 76px);
  --wall: #f1f1ef;
  --secondary: #5d5d58;
  --hairline: #deded9;
  --gallery-ink: #282825;
  --canvas-shadow: 0 1px 2px rgb(35 32 28 / 20%), 0 5px 5px -2px rgb(35 32 28 / 24%), 1px 15px 16px -7px rgb(35 32 28 / 32%);
  --framed-shadow: 0 0 0 1px #766d60, 0 0 0 3px #c8b59d, 0 0 0 4px #af9c84, 0 5px 7px 2px rgb(35 32 28 / 19%), 1px 16px 17px -4px rgb(35 32 28 / 28%);
}
.gallery-page [hidden] { display: none !important; }
.gallery-page .breadcrumbs { padding: 14px var(--gallery-margin) 0; font-size: 15px; }
.gallery-heading, .viewing-room, .exhibition, .artist-profile, .scale-comparison {
  margin-inline: var(--gallery-margin);
}
.gallery-page :is(.gallery-heading nav a, .gallery-caption a, .artist-text a, .work-story summary, .scale-comparison summary) {
  text-decoration: underline;
  text-decoration-color: #a9aaa5;
  text-decoration-thickness: 1px;
  text-underline-offset: .23em;
}
.gallery-page :is(.gallery-heading nav a, .gallery-caption a, .artist-text a, summary):hover { text-decoration-color: currentColor; }
.gallery-page :is(a, button, select, summary):focus-visible {
  outline: 1px solid #446864;
  outline-offset: 1px;
}
.gallery-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding-block: 9px 14px;
}
.work-info h1 {
  margin: 0;
  font-size: clamp(36px, 3.4vw, 64px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--gallery-ink);
}
.gallery-heading h1 {
  margin: 0;
  font-size: clamp(18px, 1.7vw, 32px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  color: #585955;
}
.gallery-heading nav { display: flex; gap: 12px 24px; flex-wrap: wrap; }
.gallery-heading nav a { font-size: 16px; }

.viewing-room {
  position: relative;
  margin-inline: 0;
  --stage-height: clamp(290px, min(48vw, 65svh), 820px);
  --slide-size: 100%;
}
.viewing-room .slide-window { margin: 0; }
.viewing-room .room-track.gallery-track { padding-inline: 0; gap: 0; }
.viewing-room .gallery-caption { padding-inline: var(--gallery-margin); }
.slide-window { position: relative; margin-right: calc(-1 * var(--gallery-margin)); }
.gallery-page .gallery-track {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: var(--slide-size);
  align-items: start;
  gap: clamp(16px, 2.6vw, 52px);
  padding: 0 var(--gallery-margin) 10px 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #acaca7 #f3f3f1;
}
.gallery-track > * { scroll-snap-align: start; min-width: 0; }
.gallery-track[data-dragging] { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.gallery-track[data-dragging] a { cursor: grabbing; }
.gallery-scene { margin: 0; }
.room-stage {
  position: relative;
  width: 100%;
  height: var(--stage-height);
  overflow: hidden;
  background-color: var(--wall);
  container-type: size;
}
.room-installation::before, .gallery-page .solo-room::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("galerie/lege-zaal.webp") 50% 60% / cover no-repeat;
  filter: grayscale(.72) brightness(1.08) contrast(.96);
  opacity: .52;
}
.room-installation::before { background-position: 50% 76%; }
.room-stage::after, .gallery-page .solo-room::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgb(255 254 249 / 54%), transparent 68%);
}
.room-stage .hung-work, .gallery-page .solo-room img { z-index: 1; }
.hung-work {
  position: absolute;
  left: var(--position);
  top: 42%;
  transform: translate(-50%, -50%);
  width: min(23cqw, 53cqh);
  aspect-ratio: var(--ratio);
  display: grid;
  place-items: center;
}
/* Een spot strijkt van linksboven langs het doek. De kegel geeft richting,
   de elliptische lichtvlek laat zowel het begin als het einde zacht verlopen. */
.gallery-page :is(.hung-work, .mounted-canvas, .measured-work, .photo-light)::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -96% -61% -12% -65%;
  background: radial-gradient(ellipse 49% 51% at 51% 50%,
    rgb(255 250 231 / 94%) 0%, rgb(255 248 224 / 82%) 38%,
    rgb(255 249 229 / 55%) 61%, rgb(255 250 235 / 18%) 81%, transparent);
  mask-image: conic-gradient(at 35% -15%, transparent 131deg,
    rgb(0 0 0 / 18%) 139deg, rgb(0 0 0 / 80%) 149deg, black 158deg 183deg,
    rgb(0 0 0 / 74%) 192deg, rgb(0 0 0 / 14%) 202deg, transparent 209deg);
}
.gallery-page :is(.hung-work, .mounted-canvas, .measured-work)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(158deg, rgb(255 244 217 / 23%), rgb(255 249 233 / 8%) 46%, transparent 78%);
  mix-blend-mode: soft-light;
}
.hung-work img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: fill;
  box-shadow: var(--canvas-shadow);
}
.room-daylight::before { background-image: url("galerie/zaal-met-bank.webp"); background-position: 50% 80%; }
.room-daylight .hung-work { top: 40%; }
.room-pair::before {
  background-image: url("galerie/zaal-met-daklicht.webp");
  background-position: center 47%;
  filter: saturate(.54) brightness(1.04);
  opacity: .92;
}
.room-pair .hung-work { top: 47%; }
.room-flowers .hung-work { width: min(24cqw, 49cqh); }
.gallery-caption {
  color: var(--secondary);
  font-size: 15px;
  line-height: 1.6;
  padding: 16px 0;
}
.gallery-caption strong { color: var(--gallery-ink); font-weight: 500; margin-right: 20px; }
.gallery-controls { display: flex; gap: 8px; align-items: center; }
.room-controls { justify-content: end; padding: 8px var(--gallery-margin) 0 0; }
.gallery-controls button {
  width: 44px; height: 44px; border: 1px solid #d4d4d0; border-radius: 50%;
  display: grid; place-items: center; background: white; color: var(--gallery-ink);
}
.gallery-controls button:hover:enabled { border-color: #777771; }
.gallery-controls button:disabled { opacity: .38; cursor: default; }
.gallery-controls svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.gallery-controls output { font-size: 15px; color: var(--secondary); font-variant-numeric: tabular-nums; margin-right: 5px; }
.slide-window .gallery-controls button {
  position: absolute; z-index: 1; top: calc(var(--stage-height) / 2);
  transform: translateY(-50%); background: rgb(255 255 255 / 94%);
}
.slide-window [data-prev] { left: clamp(8px, 1.2vw, 24px); }
.slide-window [data-next] { right: clamp(8px, 1.2vw, 24px); }

.gallery-page .exhibition { padding: clamp(44px, 6vw, 100px) 0 0; }
.gallery-page .sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.gallery-page :is(.painting-series [id], #alle-schilderijen, #over-martine, #in-de-ruimte) { scroll-margin-top: var(--anchor-gap, 38px); }
.collection-heading, .series-heading h2, .artist-profile h2 {
  margin: 0; font-weight: 400; color: var(--gallery-ink); line-height: 1.15; letter-spacing: -.02em;
}
.collection-heading, .artist-profile h2 { font-size: clamp(30px, 2.6vw, 48px); }
.exhibition-nav {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px;
  padding-block: 12px; margin-top: 16px; border-block: 1px solid var(--hairline);
}
.exhibition-nav nav { display: flex; flex-wrap: wrap; gap: 2px clamp(16px, 2vw, 36px); }
.exhibition-nav nav a, .collection-select select {
  display: inline-block; padding: 5px 0; color: #41413d; font-size: 16px;
}
.exhibition-nav nav a:hover { text-decoration: underline; text-underline-offset: .23em; }
.collection-select select { font-family: inherit; border: 0; background: white; cursor: pointer; }
.painting-series {
  --slide-size: 72%;
  --stage-height: clamp(205px, min(47vw, calc(100svh - 387px)), 700px);
  padding-top: clamp(38px, 4.2vw, 78px);
}
.painting-series[aria-labelledby="figuratief"], .painting-series[aria-labelledby="bloemen-stillevens"] {
  --slide-size: 66%;
  margin-left: min(4vw, 72px);
}
.painting-series[aria-labelledby="landschappen"] { --slide-size: 79%; }
.painting-series + .painting-series { margin-top: clamp(32px, 5vw, 84px); border-top: 1px solid var(--hairline); }
.series-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.series-heading h2 { font-size: clamp(25px, 2.3vw, 40px); }
.series-heading p { font-size: 16px; margin-top: 5px; color: var(--secondary); }
.series-heading output { font-size: 15px; color: var(--secondary); font-variant-numeric: tabular-nums; }
.exhibition-work { min-width: 0; }
.painting-link { display: block; }
.gallery-page .exhibition-work figure {
  margin: 0; position: relative; display: block; overflow: clip;
  width: 100%; height: var(--stage-height);
  container-type: size;
  background: radial-gradient(ellipse at 49% -8%, #fffefa 0%, #f8f8f5 38%, #eeefed 78%, #e8e9e7 100%);
}
.mounted-canvas {
  position: absolute; top: var(--mount-y, 50%); left: 50%;
  width: max-content; transform: translate(-50%, -50%); z-index: 1;
}
.gallery-page .exhibition-work figure img {
  display: block; width: auto; height: auto;
  max-width: 88cqw; max-height: 85cqh;
  object-fit: contain;
  box-shadow: var(--canvas-shadow);
}
.gallery-page .exhibition-work .painting-link:hover img { opacity: 1; }
.gallery-page .exhibition-work h3 {
  margin: 10px 0 2px; font-size: clamp(17px, 1.12vw, 20px); line-height: 1.3;
  font-weight: 400; letter-spacing: -.012em; color: var(--gallery-ink);
}
.gallery-page .exhibition-work .work-medium { margin: 0 0 3px; color: var(--secondary); font-size: 15px; line-height: 1.4; }
.painting-link:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.work-label { display: flex; flex-wrap: wrap; gap: 2px 0; color: var(--secondary); font-size: 15px; line-height: 1.45; }
.gallery-page .exhibition-work .painting-link img, .gallery-page .room-stage .hung-work img {
  filter: brightness(var(--reproduction-light, 1.015));
}
.work-label span + span::before { content: "·"; margin: 0 .55em; color: #777; }
.work-story { margin-top: 8px; }
.work-story summary, .scale-comparison summary {
  width: fit-content; padding-block: 4px; list-style: none; color: #4a4a45; font-size: 15px; cursor: pointer;
}
.work-story summary::-webkit-details-marker, .scale-comparison summary::-webkit-details-marker { display: none; }
.painting-story { max-width: 60ch; }
.gallery-page .painting-story p { margin: 12px 0 0; font-size: clamp(16px, 1.18vw, 19px); line-height: 1.7; color: #43443f; }

.gallery-page .work-nav { padding: 12px var(--gallery-margin); font-size: 15px; }
.gallery-page .catalogue-detail { display: block; padding: 0 var(--gallery-margin) clamp(38px, 4.3vw, 76px); }
.solo-installation { margin: 0; }
.gallery-page .solo-room {
  --mount-y: 42%;
  position: relative; isolation: isolate; display: grid; place-items: center; width: 100%;
  height: clamp(260px, min(38vw, 55svh), 740px);
  container-type: size; overflow: hidden; padding: 0; border: 0; cursor: zoom-in; background: var(--wall);
}
.gallery-page .solo-room img {
  width: auto; height: auto; object-fit: contain;
  max-width: min(79cqw, calc(var(--physical-width,115) * .32cqw));
  max-height: min(62cqh, calc(var(--physical-height,120) * .52cqh));
  box-shadow: var(--canvas-shadow);
}
.gallery-page :is(.exhibition-work, .room-stage, .solo-room).virtually-framed img { box-shadow: var(--framed-shadow); }
.gallery-page .image-hint { color: var(--secondary); font-size: 15px; text-align: left; margin: 12px 0 0; }
.image-hint span { padding-inline: .3em; }
.work-reading { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(28px, 7vw, 120px); margin-top: clamp(28px, 3.7vw, 64px); }
.gallery-page .work-info { display: flex; flex-direction: column; align-items: start; gap: 14px; }
.gallery-page .work-info h1 { font-size: clamp(32px, 2.9vw, 51px); }
.gallery-page .work-info dl { font-size: 16px; max-width: 36em; margin: 0; }
.gallery-page .work-info dl div { grid-template-columns: minmax(108px, .46fr) 1fr; border: 0; padding: 2px 0; }
.gallery-page .work-info .button { background: white; color: #343532; border: 1px solid #a3a59e; box-shadow: none; margin-top: 8px; }
.gallery-page .work-info .button:hover { background: #f3f3ef; }
.detail-story p:first-child { margin-top: 0; }
.gallery-page .work-context { margin: 0 var(--gallery-margin) 42px; max-width: 1000px; padding: 0; }
.work-context img { width: auto; max-width: 100%; }
.work-context .interior-photo {
  position: relative; width: fit-content; max-width: 100%; overflow: hidden; isolation: isolate;
}
.interior-photo .photo-light {
  position: absolute; pointer-events: none; mix-blend-mode: soft-light;
  left: var(--canvas-left); top: var(--canvas-top);
  width: var(--canvas-width); height: var(--canvas-height);
}
.gallery-page .work-context p { text-align: left; font-size: 15px; color: var(--secondary); }

.scale-comparison { margin-bottom: 32px; border-top: 1px solid var(--hairline); padding-top: 15px; }
.scale-comparison .measured-wall { max-width: 820px; margin-top: 18px; }
.measured-wall {
  position: relative;
  width: 100%;
  aspect-ratio: var(--wall-width) / var(--wall-height);
  background: var(--wall) url("galerie/lege-zaal.webp") 50% 57% / cover no-repeat;
  isolation: isolate;
  overflow: hidden;
}
.gallery-page .measured-work {
  position: absolute;
  width: calc(100% * var(--width) / var(--wall-width));
  height: calc(100% * var(--height) / var(--wall-height));
  left: calc(100% * var(--center) / var(--wall-width));
  top: calc(100% * (var(--floor) - 130) / var(--wall-height));
  transform: translate(-50%, -50%);
  background: #e5e3de;
  box-shadow: 1px 2px 3px #25211c35, 2px 5px 6px #25211c30;
}
.gallery-page .measured-work img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  filter: none;
}
.scale-bench {
  position: absolute;
  left: calc(100% * var(--bench-left) / var(--wall-width));
  top: calc(100% * (var(--floor) - 45) / var(--wall-height));
  height: calc(100% * 45 / var(--wall-height));
  width: calc(100% * var(--bench-width) / var(--wall-width));
  background: linear-gradient(to right, #746250 0%, #a69681 3.7%, transparent 3.8% 96.2%, #70624f 96.3%, #9c8975 100%);
}
.scale-bench::before {
  content: "";
  position: absolute;
  inset: 0 -2.5% auto;
  height: 13%;
  background: linear-gradient(#d1c3b2 0 30%, #b7a58d 34%, #97846e 92%, #80715e);
  box-shadow: 0 2px 2px #3e342332;
}
.scale-bench::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -4%;
  right: -4%;
  bottom: -4%;
  height: 9%;
  border-radius: 50%;
  background: #39352e52;
  filter: blur(3px);
}
.gallery-page .work-pagination { margin-inline: var(--gallery-margin); padding-inline: 0; border-top: 1px solid var(--hairline); }
.gallery-page .art-dialog { background: #f3f2f0; }
.gallery-page .art-dialog img { filter: none; }
.gallery-page .artist-profile { border-top: 1px solid var(--hairline); margin-block: clamp(48px, 6vw, 100px); padding-top: clamp(30px, 3.5vw, 64px); }
.artist-profile h2 { font-size: clamp(26px, 2.1vw, 38px); }
.artist-layout { display: grid; grid-template-columns: minmax(180px, 435px) minmax(0, 57ch); gap: clamp(32px, 4.5vw, 72px) clamp(30px, 6vw, 96px); align-items: start; margin-top: 24px; }
.artist-layout figure { margin: 0; }
.artist-layout figure img { display: block; width: 100%; height: auto; }
.artist-layout figcaption { font-size: 15px; color: var(--secondary); margin-top: 10px; }
.artist-text h3 { margin: 0 0 9px; font-size: clamp(19px, 1.45vw, 23px); font-weight: 500; line-height: 1.35; letter-spacing: -.01em; }
.artist-text p + h3 { margin-top: 28px; }
.artist-text p { color: #494946; font-size: 17px; line-height: 1.7; margin: 0 0 16px; }
.artist-visit { display: inline-block; margin-inline-start: 18px; }

@media (max-width: 1000px) {
  .viewing-room { --stage-height: clamp(280px, min(78vw, 62svh), 560px); }
  .room-single .hung-work { left: 50%; width: min(68cqw, 53cqh); }
  .painting-series { --stage-height: clamp(205px, min(70vw, calc(100svh - 370px)), 600px); --slide-size: 86%; }
}
@media (max-width: 760px) {
  .gallery-heading { flex-wrap: wrap; gap: 12px; }
  .gallery-heading nav { gap: 20px; }
  .viewing-room { --stage-height: clamp(245px, min(100vw, 59svh), 480px); }
  .painting-series { --stage-height: clamp(200px, min(100vw, calc(100svh - 326px)), 480px); --slide-size: 88%; }
  .painting-series[aria-labelledby] { margin-left: 0; --slide-size: 88%; }
  .painting-series[aria-labelledby="figuratief"], .painting-series[aria-labelledby="bloemen-stillevens"] { --slide-size: 83%; }
  .gallery-page .gallery-track { gap: 14px; }
  .gallery-caption strong { display: block; margin: 0; }
  .exhibition-nav { gap: 4px 16px; }
  .series-heading { align-items: center; }
  .work-reading, .artist-layout { grid-template-columns: 1fr; }
  .gallery-page .solo-room { height: clamp(255px, 75vw, 435px); }
  .gallery-page .solo-room img { max-width: min(80cqw, calc(var(--physical-width,110) * .57cqw)); }
  .artist-visit { display: block; margin: 8px 0 0; }
}
@media (prefers-reduced-motion: reduce) { html:has(.gallery-page) { scroll-behavior: auto; } }

.gallery-page .view-enquiry { max-width: 39ch; margin: 0; font-size: 16px; line-height: 1.55; }
.paint-detail { margin: 15px var(--gallery-margin) 36px; }
.paint-detail summary { width: fit-content; padding-block: 6px; font-size: 16px; cursor: pointer; }
.paint-detail figure { max-width: 680px; margin: 12px 0; }
.detail-crop { aspect-ratio: 1.9; overflow: clip; }
.gallery-page .detail-crop img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.7); }
.paint-detail figcaption { margin-top: 8px; font-size: 15px; color: var(--secondary); }

@media (min-width: 1001px) {
  .room-installation:not(.room-pair):not(.room-flowers):not(.museum-room) .hung-work { top: 38.5%; }
}

@media (max-width: 760px) {
  html:has(.gallery-page) { scroll-padding-top: 116px; }
  .gallery-page { --anchor-gap: 8px; }
}
@media (max-width: 760px) and (max-height: 650px) {
  .painting-series { --stage-height: clamp(170px, min(94vw, calc(100svh - 340px)), 300px); }
}

/* De recente werken op de homepage gebruiken dezelfde galeriezalen en bediening. */
@media (min-width: 1001px) {
  .home-paintings .viewing-room { --stage-height: max(310px, 34vw, min(44vw, calc(100svh - 395px))); }
}
.home-paintings .gallery-caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; padding-top: 14px; }
.home-paintings .gallery-caption strong { margin: 0; }
.home-paintings .gallery-caption small { font-size: .95em; color: var(--secondary); }
.home-paintings .room-controls { padding-top: 0; }
@media (max-width: 760px) {
  .home-paintings .gallery-caption { display: grid; gap: 1px; }
}

/* Zaalbeelden op de homepage. De doekrand loopt mee met het formaat van het doek. */
.home-paintings .room-installation::after {
  background: radial-gradient(ellipse at 19% 0%, rgb(255 248 226 / 30%), transparent 60%);
}
/* Het interieur en het doek delen één fotovlak. Een uitsnede verandert hun onderlinge schaal niet. */
.interior-plane {
  position: absolute;
  container-type: size;
  width: max(100cqw, 200cqh);
  aspect-ratio: 2 / 1;
  left: var(--pan-x, 50%);
  top: var(--pan-y, 71%);
  transform: translate(calc(-1 * var(--pan-x, 50%)), calc(-1 * var(--pan-y, 71%)));
  background: var(--interior-photo) center / 100% 100% no-repeat;
}
.furnished-room {
  container-name: interieur;
  min-height: 38vw;
}
.living-room {
  --interior-photo: url("galerie/woonkamer-met-meditatiekussen.webp");
  --compact-photo: url("galerie/woonkamer-met-meditatiekussen-vierkant.webp");
  --pan-x: 60%;
  --pan-y: 88%;
  --hang-center: 50%;
}
.study-room {
  --interior-photo: url("galerie/werkkamer-met-veldboeket.webp?v=2");
  --compact-photo: url("galerie/werkkamer-met-veldboeket-vierkant.webp?v=2");
  --pan-x: 73%;
  --pan-y: 82%;
  --hang-center: 49.5%;
}
.visitors-room {
  --interior-photo: url("galerie/woonkamer-met-bezoekers.webp");
  --canvas-width: 16.2%;
  --hang-center: 46%;
  --pan-y: 81%;
}
.home-paintings .furnished-room .hung-work {
  left: var(--position);
  top: var(--hang-center);
  width: var(--canvas-width);
}
.furnished-room::after { content: none; }
.home-paintings .hung-work {
  container-type: size;
  isolation: isolate;
}
.home-paintings .hung-work .doekrand {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: 3px 4px 3px rgb(51 38 27 / 35%), 7px 10px 7px -2px rgb(65 48 35 / 33%), 13px 19px 16px -5px rgb(68 51 37 / 29%);
}
.home-paintings .doekrand::before, .home-paintings .doekrand::after {
  content: ""; position: absolute;
  background-image: linear-gradient(var(--kantschaduw), var(--kantschaduw)), var(--randfoto);
  background-size: 100% 100%, 100cqw 100cqh;
  background-position: right bottom;
}
.home-paintings .doekrand::before {
  --kantschaduw: rgb(42 33 27 / 22%);
  left: 100%; top: 0; width: clamp(2px, 1.45cqw, 7px); height: 100%;
  transform: skewY(30deg); transform-origin: left top;
}
.home-paintings .doekrand::after {
  --kantschaduw: rgb(40 31 25 / 33%);
  left: 0; top: 100%; width: 100%; height: clamp(1.15px, .84cqw, 4.05px);
  transform: skewX(60deg); transform-origin: left top;
}
.home-paintings .room-stage .hung-work img {
  box-shadow: 0 0 1px rgb(35 28 23 / 25%);
  filter: brightness(var(--reproduction-light, 1)) contrast(var(--reproduction-contrast, 1)) saturate(var(--reproduction-saturation, 1));
}
@media (max-width: 1000px) {
  .visitors-room.room-single { --pan-x: 73%; }
  .home-paintings .visitors-room.room-single .hung-work { left: 50%; }
  .visitors-room.room-continuation {
    --interior-photo: url("galerie/zaal-met-bloesem.webp");
    --canvas-width: 21%;
    --pan-x: 50%;
  }
  /* Beide werken blijven ook zichtbaar als de browser de zaal niet splitst. */
  .home-paintings .visitors-room:not(.room-single) { height: auto; aspect-ratio: 2 / 1; }
}

/* De vierkante foto's brengen ook op een smal scherm het doek en de inrichting samen. */
@container interieur (max-aspect-ratio: 1.45) {
  :is(.living-room, .study-room) .interior-plane {
    --interior-photo: var(--compact-photo);
    --hang-center: 43%;
    --pan-x: 50%;
    --pan-y: 84%;
    width: max(100cqw, 100cqh);
    aspect-ratio: 1;
  }
  .home-paintings .living-room .hung-work { left: 34%; width: 33%; }
  .home-paintings .study-room .hung-work { left: 52%; width: 32%; }
}

/* De foto en de doeken delen één muur en dus één schaal en ooghoogte. */
.museum-room {
  --interior-photo: url("galerie/museum-twee-lichtbundels.webp");
  --wall-height-cm: 270;
  --pan-y: 70%;
  height: auto;
  aspect-ratio: 2.3;
}
.museum-bench {
  --interior-photo: url("galerie/museum-bezoekster.webp");
}
.museum-figurative { --interior-photo: url("galerie/zaal-met-bloesem.webp"); }
.museum-healing { --interior-photo: url("galerie/woonwand-met-edelstenen.webp"); }
.museum-moss { --interior-photo: url("galerie/zaal-mosgroen.webp"); }
.museum-taupe { --interior-photo: url("galerie/woonwand-taupe.webp"); }
.museum-chalk { --interior-photo: url("galerie/woonwand-krijtwit.webp"); }
.museum-room::before, .museum-room::after { content: none; }
:is(.museum-bench, .museum-pair) .interior-plane::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: saturate(.43) brightness(1.025);
  mask-image: linear-gradient(to bottom, black 82%, transparent 88%);
  pointer-events: none;
}
.museum-room .hung-work {
  container-type: size;
  top: 46%;
  left: var(--position);
  width: calc(100cqh * var(--width-cm) / var(--wall-height-cm));
  aspect-ratio: var(--width-cm) / var(--height-cm);
  box-shadow: 1px 2px 1px rgb(56 42 31 / 45%), 3px 4px 2px rgb(62 44 28 / 40%),
              5px 8px 8px -3px rgb(73 52 35 / 42%), 11px 17px 17px -7px rgb(76 56 36 / 33%);
}
.museum-room .hung-work::before { opacity: .38; }
.museum-moss .hung-work::before { opacity: .16; }
:is(.museum-taupe, .museum-chalk) .hung-work::after {
  background: linear-gradient(132deg, rgb(255 251 238 / 31%) 10%, rgb(255 252 244 / 19%) 37%, transparent 68%);
}
.museum-room .hung-work img {
  object-fit: fill;
  box-shadow: none;
}
.museum-room .quarter-turn img {
  inset: 50% auto auto 50%;
  width: 100cqh;
  height: 100cqw;
  max-width: none;
  transform: translate(-50%, -50%) rotate(-90deg);
}
@media (max-width: 1000px) {
  .museum-room { aspect-ratio: 1.7; }
  .museum-room.room-single { --pan-x: 33%; }
  .museum-room.room-continuation { --pan-x: 75%; }
  .museum-room:has(.hung-work + .hung-work) { aspect-ratio: 2; }
}
@media (max-width: 600px) {
  .museum-room { aspect-ratio: 1.42; }
  .museum-bench { --pan-x: 75%; }
  .museum-taupe { --pan-x: 77%; }
  .museum-chalk { --pan-x: 22%; }
  .museum-room.room-single { --pan-x: 0%; }
  .museum-room.room-continuation { --pan-x: 100%; }
}
@media (min-width: 901px) {
  .painting-series .slide-window { container-type: inline-size; }
  .painting-series[aria-labelledby] { --slide-size: 66.4cqw; }
  .painting-series .gallery-track { column-gap: clamp(18px, 2vw, 36px); }
}

/* Het schilderij en zijn titel delen op een laptop één scherm met de navigatie. */
@media (min-width: 761px) and (orientation: landscape) {
  .gallery-overview {
    --gallery-sitebar-height: 146px;
    --room-ratio: 2.3;
  }

  .gallery-overview .breadcrumbs { padding-block: 8px 0; }
  .gallery-opening {
    display: flex;
    flex-direction: column;
    height: min(calc(100svh - var(--gallery-sitebar-height)), calc(100vw / var(--room-ratio) + 140px));
    min-height: 350px;
  }
  .gallery-opening .viewing-room {
    flex: 1;
    min-height: 0;
    container-type: size;
  }
  .gallery-opening .slide-window {
    --stage-height: min(calc(100cqw / var(--room-ratio)), calc(100cqh - 56px));
    width: min(100%, calc(var(--stage-height) * 2.55));
    margin-inline: auto;
  }
  .gallery-opening .museum-room { height: var(--stage-height); aspect-ratio: auto; }
  .gallery-opening .gallery-caption { padding: 11px 70px 11px 0; margin-left: var(--gallery-margin); }
  .gallery-opening .room-track.gallery-track { padding-bottom: 0; }
  .gallery-opening .room-controls { padding: 0; }
  .gallery-opening .room-controls output {
    position: absolute;
    right: var(--gallery-margin);
    top: calc(var(--stage-height) + 11px);
    margin: 0;
  }
}
@media (min-width: 761px) and (max-width: 1000px) and (orientation: landscape) {
  .gallery-overview { --room-ratio: 1.7; }
}

.gallery-page .solo-room.monumental { --mount-y: 40%; height: clamp(320px, min(54vw, 68svh), 760px); }
.gallery-page .solo-room.monumental img { max-width: 79cqw; max-height: 69cqh; }
.gallery-page .solo-room.monumental::before { background-position: 50% min(0px, calc(83cqh - max(76cqh, 42.75cqw))); }

.gallery-page .slide-window .gallery-controls button {
  position:absolute; top:var(--arrow-top,calc(var(--stage-height) * .875)); transform:translateY(-50%);
  display:grid; place-items:center; width:44px; height:44px; padding:0; border:0;
  border-radius:50%; background:radial-gradient(circle, rgb(245 245 242 / 86%) 0 18px, transparent 19px); color:#161616;
}
.gallery-page .slide-window .gallery-controls svg { width:17px; height:17px; }
.gallery-page .slide-window .gallery-controls button:disabled { opacity:1; color:#888; }

/* Chevronpunt: 13,5 px SVG-marge + 8/24 van de 17 px brede SVG. */
.gallery-page .slide-window [data-prev] { left:calc(var(--caption-inset, var(--gallery-margin)) - 19.167px); }
.gallery-page .slide-window [data-next] { right:calc(var(--caption-inset, var(--gallery-margin)) - 19.167px); }