/* lightbox.css -- the floating window a photo flies into (see lightbox.js).
 * Light, frosted backdrop so the ring stays visible -- and still turning --
 * behind the photo: you lifted one print off the ring, you didn't leave.
 */

.lightbox {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: transparent; color: var(--a-ink);
}
/* The frosted layer is a real element, faded by lightbox.js: WebKit does not
   reliably run animations on ::backdrop, and a stuck one leaves the page
   behind the photo unfrosted. */
.lightbox::backdrop { background: transparent; }
/* Tint strong enough to carry the photo on its own -- blur is a bonus that
   some renderers skip (headless WebKit, "reduce transparency"). */
.lb-veil {
  position: fixed; inset: 0;
  background: rgba(243, 243, 241, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.05); backdrop-filter: blur(16px) saturate(1.05);
}
@media (prefers-reduced-transparency: reduce) {
  .lb-veil { background: rgba(243, 243, 241, 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* left/top/width/height are set by lightbox.js; the flight animates them. */
.lb-frame {
  position: fixed; overflow: hidden;
  border-radius: 4px; background: #e8e8e5;
  transform-origin: 50% 50%;
  box-shadow: 0 44px 90px -42px rgba(17, 17, 17, 0.55), 0 14px 32px -20px rgba(17, 17, 17, 0.35);
  cursor: zoom-out;
}
.lb-img, .lb-ghost { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.lb-img { object-fit: cover; }
/* The card's own crop, stretched exactly onto the card at take-off. */
.lb-ghost { z-index: 1; object-fit: fill; pointer-events: none; }

.lb-cap {
  position: fixed;
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
}
.lb-meta { display: flex; align-items: baseline; gap: 14px; min-width: 0; margin: 0; }
.lb-title { font-weight: 500; font-size: clamp(1rem, 0.3vw + 0.92rem, 1.15rem); letter-spacing: -0.01em; }
.lb-tag { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--a-ink-3); }
.lb-gallery { min-height: 44px; font-size: 0.92rem; }

.lb-close {
  position: fixed; z-index: 2;
  top: max(env(safe-area-inset-top), 14px); right: max(env(safe-area-inset-right), 14px);
  width: 44px; height: 44px; border-radius: 50%;
  appearance: none; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.72); color: var(--a-ink);
  font: inherit; font-size: 1.6rem; line-height: 1;
  box-shadow: 0 6px 18px -10px rgba(17, 17, 17, 0.5);
  transition: background-color 0.2s ease;
}
.lb-close:hover { background: #fff; }
.lb-close:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 2px; }

@media (max-width: 639px) {
  .lb-cap { flex-direction: column; align-items: stretch; }
  .lb-gallery { width: 100%; }
}