/* Lightbox: the dialog fills the screen (its empty area is the backdrop click target) and centers the framed work.
   Phones: the arrows sit together under the work; from tablets up, on its sides.
   On touch screens script.js takes every gesture in it (touch-action: none): swipe sideways for the next work,
   down to close, pinch or double-tap to zoom an image. While a finger moves things there's no transition */

html:has(.lightbox[open]) { overflow: hidden; }
.lightbox { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 76px 16px 100px; overflow: hidden; border: 0; background: transparent; color: var(--ink); touch-action: none; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: color-mix(in srgb, var(--ink) 84%, transparent); }
.lightbox-frame { margin: 0; padding: 10px 10px 0; border: var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: 8px 8px 0 var(--color-1); animation: pop .35s cubic-bezier(.34, 1.56, .64, 1); }
.lightbox-image, .lightbox-video { width: auto; max-width: calc(100vw - 60px); max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px); border: 2.5px solid var(--ink); border-radius: 14px; background: var(--band, var(--paper)); }
/* A zoomed image spills over its frame and caption (the buttons stay on top) */
.lightbox-image { position: relative; z-index: 1; }
.lightbox-frame, .lightbox-image { transition: transform .3s cubic-bezier(.34, 1.3, .64, 1); }
.lightbox.is-touching .lightbox-frame, .lightbox.is-touching .lightbox-image { transition: none; }
.lightbox-video { display: block; }
.lightbox-caption { padding: 10px 8px 12px; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.1; text-align: center; }
.lightbox-caption:empty { padding: 0 0 10px; }
.lightbox-button { position: absolute; z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: 4px 4px 0 var(--color-1); cursor: pointer; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .2s; }
.lightbox-button:active { background: var(--color-1); transform: scale(.94); }
@media (hover: hover) {
  .lightbox-button:hover { background: var(--color-1); transform: scale(1.08); }
}
.lightbox-button svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox-button:focus-visible { outline-color: var(--paper); }
.lightbox-close { top: 14px; right: 14px; }
.lightbox-prev, .lightbox-next { bottom: 22px; }
.lightbox-prev { left: calc(50% - 72px); }
.lightbox-next { right: calc(50% - 72px); }
.lightbox.is-single .lightbox-prev, .lightbox.is-single .lightbox-next { display: none; }

@media (min-width: 681px) {
  .lightbox { padding: 24px 100px; }
  .lightbox-image, .lightbox-video { max-width: min(100vw - 230px, 820px); max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); }
  .lightbox-close { top: 22px; right: 22px; }
  .lightbox-prev, .lightbox-next { top: 50%; bottom: auto; margin-top: -28px; }
  .lightbox-prev { left: 24px; }
  .lightbox-next { right: 24px; }
}