/* ARTWORK TRANSITION POSITION
   Move the strip UP by 70px on desktop and mobile, without moving the gallery.
   Adjust -70px below: more negative = higher; closer to zero = lower.
   This adds an offset to the shared position and preserves mobile centering. */
.artwork-page .hero-transition {
  margin-top: -70px;
}

/* Consistent thumbnail width; height follows each original image's aspect ratio. */
.art-gallery { position: relative; z-index: 27; width: calc(1280 * var(--u)); max-width: calc(100% - 40px); margin: 0 auto; padding: calc(70 * var(--u)) 0 calc(120 * var(--u)); display: grid; gap: calc(70 * var(--u)); }
.art-thumbnail { display: block; border: max(8px, calc(20 * var(--u))) solid white; background: #1d2c43; }
.art-thumbnail img { width: 100%; height: auto; filter: grayscale(1); transition: filter .25s ease; }
.art-thumbnail:hover img, .art-thumbnail:focus-visible img { filter: grayscale(0); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* GALLERY TITLE — the heading occupies its own row, pushing all artwork down.
   Change the heading margin-bottom to adjust the space before the first image. */
.art-gallery-heading { display: flex; align-items: center; justify-content: center; gap: calc(20 * var(--u)); margin-bottom: calc(-20 * var(--u)); }
.art-gallery-icon { width: calc(139 * var(--u)); height: auto; flex: none; }
.art-gallery-heading h1 { margin: 0; font-size: calc(56 * var(--u)); line-height: 1.15; }
@media (max-width: 700px) {
  .art-gallery-heading { gap: 16px; margin-bottom: 5px; }
  .art-gallery-icon { width: 72px; }
  .art-gallery-heading h1 { font-size: 30px; min-width: 0; }
}
/* A modal dialog sits above the shared page's stacking layers. */
.art-lightbox { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: white; overflow: auto; overscroll-behavior: contain; }
.art-lightbox::backdrop { background: rgba(0,0,0,.8); }
.lightbox-stage { box-sizing: border-box; width: max-content; min-width: 100%; min-height: 100%; padding: 72px 5vw 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* Default: original pixel size, NEVER upscale and never limit the height.
   Very tall or very wide originals remain scrollable. */
.lightbox-image { display: block; width: auto; height: auto; max-width: none; max-height: none; flex: none; filter: none; }
/* At browser widths up to 1920px, shrink only images wider than 90vw. */
@media (max-width: 1920px) { .lightbox-image { max-width: 90vw; } }
.lightbox-close { position: fixed; top: 14px; right: 18px; z-index: 2; width: 48px; height: 48px; padding: 0; background: #10151ee6; border: 1px solid #ffffff70; border-radius: 50%; color: white; font: 36px/1 Arial,sans-serif; cursor: pointer; }
.lightbox-close:hover { background: #34445b; }
.lightbox-status { font: 16px/1.5 system-ui,sans-serif; max-width: 80vw; text-align: center; }
.lightbox-status:empty { display: none; }
.lightbox-image[hidden] { display: none; }
html.lightbox-open, html.lightbox-open body { overflow: hidden; }
@media (max-width: 700px) { .art-gallery { width: auto; padding-top: 35px; padding-bottom: 60px; gap: 35px; } }
@media (prefers-reduced-motion: reduce) { .art-thumbnail img { transition: none; } }

.artwork-page .art-gallery {
  margin-top: -125px;
}
.artwork-page .art-gallery-icon {
  width: 119px;
  height: 119px;
}

/* AUTOMATIC PORTRAITS: half the original image width, centred; narrow screens
   shrink it further. The existing border is outside those image dimensions. */
.art-gallery { grid-template-columns: minmax(0, 1fr); }
.art-thumbnail.is-portrait {
  --portrait-border: max(8px, calc(20 * var(--u)));
  width: calc(var(--portrait-width) + var(--portrait-border) + var(--portrait-border));
  max-width: 100%;
  min-width: 0;
  justify-self: center;
}
/* Portrait popups fit between 72px top and 40px bottom padding.
   Width/height remain auto, preserving proportions and preventing enlargement. */
.lightbox-image.is-portrait {
  max-width: 90vw;
  max-height: calc(100vh - 112px);
  max-height: calc(100dvh - 112px);
}