/* A consistent presentation surface for drawings, materials and model studies. */
.gallery {gap:36px 28px; align-items:start}
.gallery figure {display:flex; flex-direction:column}
.gallery figure:is([data-category="drawings"],[data-category="materials"],[data-category="models"]):not(.wide) .gallery-button {
  aspect-ratio:4 / 3;
  display:grid;
  place-items:center;
  padding:clamp(16px,2vw,28px);
  background:#eeebdf;
}
.gallery figure:is([data-category="drawings"],[data-category="materials"],[data-category="models"]):not(.wide) .gallery-button img {
  width:100%;
  height:100%;
  min-height:0;
  aspect-ratio:auto;
  object-fit:contain;
}
.gallery figcaption {align-items:baseline; min-height:3.7em; gap:16px; padding-top:14px}
.gallery figcaption>span:last-child {font-size:11px; letter-spacing:.04em}
.gallery-arrow {bottom:12px; right:12px; width:32px; height:32px}
.gallery-button {transition:box-shadow .2s ease; cursor:zoom-in}
@media(hover:hover) {
  .gallery-button:hover {box-shadow:inset 0 0 0 1px var(--line)}
  .gallery-button:hover .gallery-arrow {transform:translateX(3px)}
}
.filter {min-height:44px}
.filter-count {margin-left:7px; opacity:.65; font-size:11px; font-variant-numeric:tabular-nums}

/* The viewer reserves its own rows, including iPhone safe areas and long captions. */
.lightbox[open] {display:grid; grid-template-rows:auto minmax(0,1fr) auto}
.lightbox .viewer-bar,.lightbox .viewer-nav {position:static; height:auto; min-height:68px; flex-shrink:0}
.lightbox .viewer-bar {padding:calc(12px + env(safe-area-inset-top)) 20px 12px; border-bottom:1px solid #ffffff18}
.lightbox .viewer-bar button,.lightbox .viewer-nav button {min-width:44px; min-height:44px; height:auto; display:inline-flex; align-items:center; justify-content:center}
.lightbox .viewer-stage {height:100%; min-height:0; margin:0; padding:20px; overscroll-behavior:contain; touch-action:pan-y pinch-zoom; cursor:grab}
.lightbox .viewer-stage img {max-width:100%; max-height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none}
.lightbox .viewer-stage.zoomed {display:block; touch-action:pan-x pan-y pinch-zoom; cursor:auto}
.lightbox .viewer-stage.zoomed img {width:var(--viewer-zoom-width,2000px); max-width:none; max-height:none; height:auto; margin:0 auto}
.lightbox .viewer-nav {padding:12px 20px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid #ffffff18}
.lightbox .viewer-caption {max-width:65ch; max-height:20dvh; overflow:auto; overscroll-behavior:contain}
.viewer-caption-text {display:block}
.viewer-hint {display:block; margin-top:5px; font-size:11px; color:#afb6aa; font-weight:400}
.viewer-bar button:disabled,.viewer-nav button:disabled {opacity:.35; cursor:default}
@media(max-width:700px) {
  .gallery {gap:28px}
  .gallery figcaption {min-height:0; padding-top:12px}
  .gallery figure:is([data-category="drawings"],[data-category="materials"],[data-category="models"]):not(.wide) .gallery-button {padding:16px}
  .lightbox .viewer-bar {padding-right:12px; padding-left:12px; gap:8px}
  .lightbox .viewer-bar>div {gap:8px}
  .lightbox .viewer-stage {padding:12px}
  .lightbox .viewer-nav {padding-right:12px; padding-left:12px; gap:10px}
}
@media(prefers-reduced-motion:reduce) {
  .gallery-button,.gallery-arrow {transition:none}
}