/* Native modal provides focus containment and Escape handling. */
.artCard__photo:focus-visible, .womenCard__photo:focus-visible { outline: 3px solid #c9ad73; outline-offset: -4px; }
#portfolioLightbox { width: min(1100px, 94vw); max-width: 94vw; max-height: 94dvh; padding: 52px 12px 12px; border: 1px solid #c9ad73; background: #101410; color: #fff; }
#portfolioLightbox::backdrop { background: rgb(0 0 0 / .9); }

/* The frame shows one photo; the track carries the previous and next just outside
   it, so a swipe drags the neighbour into view.

   The frame is also the gesture target: the track is shifted a full slide left, so
   its own box sits off screen and no touch can land on it.

   JS fixes the height when the preview opens and never changes it again - a frame
   that resized per photo threw the whole dialog around - so nothing here animates.
   The height below is only a fallback for when the script has not run.

   Safari understands pan-y but not the pinch-zoom keyword, and one unknown value
   voids the whole declaration, so the supported form ships first. */
.portfolioLightbox__viewport { height: min(66vw, 72dvh, 850px); overflow: hidden; cursor: grab; touch-action: pan-y; }
.portfolioLightbox__viewport { touch-action: pan-y pinch-zoom; }
.portfolioLightbox__track { height: 100%; display: flex; will-change: transform; }
.portfolioLightbox__viewport.is-dragging { cursor: grabbing; }
.portfolioLightbox__slide { flex: 0 0 100%; display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }

#portfolioLightbox button { min-width: 44px; min-height: 44px; border: 1px solid #c9ad73; background: #101410; color: #fff; font-size: 28px; cursor: pointer; }
#portfolioLightbox button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#portfolioLightbox [data-close] { position: absolute; right: 12px; top: 4px; }
.portfolioLightbox__controls { display: flex; justify-content: center; gap: 16px; margin-top: 10px; }
.portfolioLightbox__hint { margin: 8px 0 0; color: #c9ad73; font-size: 12px; text-align: center; }
@media (hover: hover) and (pointer: fine) { .portfolioLightbox__hint { display: none; } }

/* On a phone every pixel of chrome is a pixel the photo does not get, so the
   dialog gives back its margins and the controls tighten up. */
@media (max-width: 700px) {
  #portfolioLightbox { width: 97vw; max-width: 97vw; max-height: 96dvh; padding: 44px 6px 8px; }
  #portfolioLightbox [data-close] { right: 6px; }
  .portfolioLightbox__controls { gap: 12px; margin-top: 6px; }
  .portfolioLightbox__hint { margin-top: 5px; font-size: 11px; }
}