/* Full-screen photo/film viewer. Shared by the home page and the portfolio,
   so it lives on its own rather than inside one page's stylesheet. */
/* ---------- lightbox: full-screen viewer for gallery + films ----------
   Arrows are deliberately near-transparent so they sit over the photograph
   without competing with it, and come up on hover/focus. */
.lb {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  gap: clamp(6px, 2vw, 26px);
  padding: clamp(14px, 3vw, 40px);
  background: rgba(16, 15, 11, 0.94);
  opacity: 0; transition: opacity 0.28s ease;
}
.lb.is-open { display: flex; opacity: 1; }
.lb__stage { display: flex; flex-direction: column; align-items: center; min-width: 0; margin: 0; }
.lb__img {
  max-width: min(100%, 1400px); max-height: 84vh;
  width: auto; height: auto; object-fit: contain; display: block;
}
.lb__cap {
  margin-top: 14px; text-align: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(252, 251, 245, 0.62);
}
.lb__nav, .lb__x {
  flex: 0 0 auto; cursor: pointer;
  background: rgba(252, 251, 245, 0.06);
  border: 1px solid rgba(252, 251, 245, 0.18);
  color: rgba(252, 251, 245, 0.55);
  font-family: var(--mono);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.lb__nav { width: clamp(42px, 4vw, 56px); height: clamp(42px, 4vw, 56px); font-size: 18px; border-radius: 50%; }
.lb__nav:hover, .lb__nav:focus-visible,
.lb__x:hover, .lb__x:focus-visible {
  background: rgba(252, 251, 245, 0.16); color: var(--warm-white);
  border-color: rgba(252, 251, 245, 0.5);
}
.lb__x {
  position: absolute; top: clamp(12px, 2vw, 26px); right: clamp(12px, 2vw, 26px);
  width: 42px; height: 42px; font-size: 22px; line-height: 1; border-radius: 50%;
}
.lb__nav[hidden] { visibility: hidden; }
body.lb-open { overflow: hidden; }
@media (max-width: 700px) {
  /* arrows move below the photo on a phone so they never cover it */
  .lb { flex-wrap: wrap; }
  .lb__stage { order: 1; flex: 1 0 100%; }
  .lb__nav--prev { order: 2; }
  .lb__nav--next { order: 3; }
  .lb__img { max-height: 68vh; }
}