.gallery {
  --gallery-height: min(max(260px, calc(100svh - 210px)), calc(100vw - 136px));
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 64px;
  overflow-x: auto;
  margin: 24px -48px 0 -6px;
  padding: 6px 48px 22px 6px;
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.gallery:focus-visible {outline: 2px solid var(--accent); outline-offset: 4px;}
/* Keep small mouse-wheel movements from snapping back to the previous painting. */
.gallery.is-wheel-scrolling {scroll-snap-type: none;}
.gallery .work {
  flex: 0 0 auto;
  width: min(calc(var(--gallery-height) * var(--image-ratio)), calc(100vw - 136px));
  scroll-snap-align: start;
}
.gallery .work-stage {
  height: var(--gallery-height);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.gallery .work-stage img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: left bottom;
}
.gallery .work figcaption {margin-top: 16px; align-items: baseline;}
.gallery .caption-title {min-width: 0; overflow-wrap: anywhere;}
.gallery .caption-title.is-titled {
  font-family: var(--font-display);
  font-size: 27px;
  font-style: normal;
  line-height: 1.1;
}
.gallery .caption-meta {white-space: normal; text-align: right; flex-shrink: 0; max-width: 40%;}
.gallery-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 12px;
}
.gallery-tools p {font-size: var(--type-meta); color: var(--muted); margin: 0;}
.gallery-controls {display: flex; align-items: center; gap: 10px; flex-shrink: 0;}
.gallery-controls[hidden] {display: none;}
.gallery-position {font-size: var(--type-meta); color: var(--muted); margin-right: 14px; font-variant-numeric: tabular-nums;}
.gallery-controls button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 21px;
  line-height: 1;
}
.gallery-controls button:hover:not(:disabled) {border-color: var(--accent);}
.gallery-controls button:disabled {opacity: .3; cursor: default;}
.art-pointer {display: none;}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .art-pointer {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    width: 26px;
    height: 26px;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(245, 243, 238, .85);
    pointer-events: none;
    transition: width 100ms ease, height 100ms ease;
  }
  .art-pointer[hidden] {display: none;}
  .art-pointer.is-image {width: 38px; height: 38px;}
  .art-pointer-active .gallery .work > a {cursor: none;}
}
@media (min-width: 1500px) {
  .gallery {gap: 80px; margin-right: -64px; padding-right: 64px;}
}
@media (max-width: 900px) {
  .gallery {--gallery-height: min(max(260px, calc(100svh - 210px)), 90vw); gap: 36px; margin-right: -28px; padding-right: 28px;}
  .gallery .work {width: min(calc(var(--gallery-height) * var(--image-ratio)), 90vw);}
}
@media (max-width: 600px) {
  .gallery {
    --gallery-height: min(max(230px, calc(100svh - 250px)), calc(100vw - 40px));
    gap: 24px;
    margin-top: 20px;
    margin-right: -20px;
    padding-right: 20px;
  }
  .gallery .work {width: min(calc(var(--gallery-height) * var(--image-ratio)), calc(100vw - 40px));}
  .gallery-tools {gap: 16px; align-items: flex-start; margin-top: 14px;}
  .gallery-tools p {max-width: 160px; font-size: var(--type-meta); line-height: 1.6;}
  .gallery-controls {gap: 8px;}
  .gallery-position {margin-right: 3px;}
}