.exhibition {
  --floor-height: clamp(124px, 8vw, 160px);
  position: relative;
  isolation: isolate;
  background: linear-gradient(#08090cc4, #08090c99),
    #05060a url("assets/basalt.webp") center / cover;
  color: #f2eee7;
}
.exhibit-wall {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
  mask-image: linear-gradient(to bottom, transparent, #000 min(2vw, 24px));
}
.exhibit-bay {
  position: relative;
  display: grid;
  /* The photographed opening runs from row 127 to 696 of the 941px plate.
     Let the framed document and its clearances set the middle track's height. */
  grid-template-rows: 127fr 569fr var(--floor-height);
  isolation: isolate;
  /* Each bay shows a 313px slice of the 1672px wall photo. */
  --slice: calc(100% * var(--slice-start) / (1672 - 313));
  --crop-x: calc(100% * var(--opening-x) / (1672 - var(--opening-width)));
  --crop-width: calc(100% * 1672 / var(--opening-width));
  /* Continue the original reflective floor beneath the captions. */
  background: linear-gradient(#05060983, #05060983),
    url("assets/showroom.webp") var(--slice) bottom / 534.1853% calc(var(--floor-height) * 941 / 245) no-repeat;
}
/* Above the floor, paint only the first 696 rows of the photograph. */
.exhibit-bay::before {
  content: "";
  position: absolute;
  inset: 0 0 var(--floor-height);
  z-index: -2;
  background: url("assets/showroom.webp") var(--slice) top / 534.1853% calc(100% * 941 / 696) no-repeat;
  filter: brightness(.5) saturate(.74);
}
.exhibit-bay:nth-child(5n+1) { --slice-start: 56;   --opening-x: 101;  --opening-width: 217; }
.exhibit-bay:nth-child(5n+2) { --slice-start: 369;  --opening-x: 419;  --opening-width: 212; }
.exhibit-bay:nth-child(5n+3) { --slice-start: 682;  --opening-x: 731;  --opening-width: 213; }
.exhibit-bay:nth-child(5n+4) { --slice-start: 995;  --opening-x: 1044; --opening-width: 214; }
.exhibit-bay:nth-child(5n+5) { --slice-start: 1308; --opening-x: 1357; --opening-width: 219; }
.exhibit-bay::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 var(--floor-height);
  pointer-events: none;
  background: radial-gradient(ellipse 26% 63% at 50% 25%, #ffefc945, transparent 86%),
    url("assets/showroom.webp") var(--slice) top / 534.1853% calc(100% * 941 / 696) no-repeat;
  clip-path: inset(21.2% 17% 1%);
  mask-image: conic-gradient(from var(--lamp-angle, 0deg) at 50% 21.2%, transparent 139deg, #0009 158deg, #000 174deg 186deg, #0009 202deg, transparent 221deg);
  opacity: var(--spotlight, .12);
  transition: opacity .34s ease;
}
.exhibit-open, .exhibit-pending {
  position: relative;
  grid-row: 2;
  margin-left: calc(100% * (var(--opening-x) - var(--slice-start)) / 313);
  display: grid;
  place-items: end center;
  width: calc(100% * var(--opening-width) / 313);
  padding: 13% 0 8.6%;
  border: 0;
  background: none;
  color: inherit;
}
.exhibit-open {
  --cast-shadow: 0 2px 2px #0807068c, 1px 4px 6px #0006;
  cursor: zoom-in;
}
.exhibit-frame {
  position: relative;
  display: block;
  isolation: isolate;
  padding: clamp(5px, .52vw, 9px);
  background: linear-gradient(145deg, #b2996d, #5a4a38 14%, #312a22 54%, #837057 86%, #d2b88e);
  box-shadow: inset 0 0 0 1px #e9dabe80, inset 0 0 0 3px #2d281f99,
    var(--cast-shadow, 2px 4px 3px #080706c9, 3px 12px 18px #000a);
}
.exhibit-frame img {display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px #241c11;}
.exhibit-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, #fff9dc17, transparent 44%, #1e17100e);
}
.exhibit-open .exhibit-frame {
  /* One frame size across the wall, with visible stone on both sides. */
  width: min(calc(100% * 164 / var(--opening-width)), 292.5px);
  transform-origin: center bottom;
  transform: scale(var(--frame-zoom, 1));
  filter: brightness(var(--paper-light, .81));
  transition: transform .4s cubic-bezier(.2,.68,.23,1), filter .34s ease;
}
.exhibit-open .exhibit-frame img {
  aspect-ratio: 300 / 390;
  object-fit: contain;
  background: #eae4d6;
}
.exhibit-label {
  position: absolute;
  inset: calc(100% + 14px) -16% auto;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .65em;
  text-align: center;
  text-wrap: balance;
  line-height: 1.4;
  font-size: clamp(13px, 1.04vw, 17px);
  font-weight: 600;
  text-shadow: 0 1px 5px #000;
}
.exhibit-label small {color: #dacdb9; font-size: .72em; letter-spacing: .05em; font-variant-numeric: tabular-nums;}
.exhibit-label > span {min-width:0;overflow-wrap:break-word}
.exhibit-bay:has(.exhibit-open:focus-visible) {
  --paper-light: 1.04; --spotlight: 1; --frame-zoom: 1.045;
}
@media (hover:hover) and (pointer:fine) {
  .exhibit-bay:has(.exhibit-open:hover) {
    --paper-light: 1.04; --spotlight: 1; --frame-zoom: 1.045;
  }
}
.exhibit-heading {
  padding: clamp(30px, 3.2vw, 56px) var(--gutter) 0;
  text-shadow: 0 2px 12px #000;
}
.exhibit-heading h2 {font-size: clamp(30px, 3vw, 54px); letter-spacing: -.05em; line-height: 1.18;}
.exhibit-viewer {
  --viewer-width: min(92vw, 640px, calc((100dvh - 80px) * .7));
  width: var(--viewer-width);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  color: #f3f0e8;
}
.exhibit-viewer::backdrop {background: #050609eb;}
html:has(.exhibit-viewer[open]) {overflow: hidden; scrollbar-gutter: stable;}
.exhibit-viewer-bar {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px;}
.exhibit-viewer-bar h2 {font-size: clamp(14px, 1.2vw, 18px); font-weight: 600;}
.exhibit-close {display: flex; align-items: center; gap: 9px; min-height: 44px; border: 0; padding: 0 4px; background: none; font-size: 14px;}
.exhibit-close span {font-size: 22px; font-weight: 400;}
.exhibit-enlarged {padding: clamp(7px, .8vw, 13px);}
.exhibit-enlarged img {max-height: calc(100dvh - 95px); object-fit: contain; background: #eae4d6;}
@media (max-width:1000px) {
  .exhibition {
    background: linear-gradient(110deg, #08090cb5, #0405098c 48%, #030408bc),
      url("assets/basalt-mobile.webp") center / cover no-repeat;
  }
  .exhibit-wall {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    row-gap: clamp(80px, 10vw, 96px);
    padding: clamp(24px, 4.5vw, 42px) 1.2% 100px;
    justify-items: center;
    mask-image: none;
  }
  .exhibit-bay {
    display: block;
    background: none;
    grid-column: auto;
    width: min(80%, 260px);
  }
  .exhibit-bay::before, .exhibit-bay::after {
    inset: 0;
    background: url("assets/showroom.webp") var(--crop-x) 34.1398% / var(--crop-width) 165.3779% no-repeat;
  }
  .exhibit-bay::before {filter: brightness(.74) saturate(.74);}
  .exhibit-bay::after {
    clip-path: inset(0);
    mask-image: conic-gradient(from var(--lamp-angle, 0deg) at 50% 6%, transparent 134deg, #000 165deg 195deg, transparent 226deg);
  }
  .exhibit-open, .exhibit-pending {width: 100%; margin-left: 0; padding: 20% 0 13%;}
  .exhibit-pending {height: 100%;}
  .exhibit-open .exhibit-frame {width: 76%; padding: clamp(2px, .48vw, 5px);}
  .exhibit-label {inset: calc(100% + 6px) -7% auto; gap: .32em; font-size: clamp(11px, 1.85vw, 15px);}
  .exhibit-heading h2 {font-size: clamp(26px, 6vw, 34px);}
}
@media (max-width:600px) {
  .exhibit-wall {grid-template-columns:repeat(2,minmax(0,1fr));row-gap:92px}
  .exhibit-label {font-size:13px}
}