/* ============================================================
   Photo lightbox — native <dialog>, no library
   ============================================================ */
.lb {
  padding: 0;
  border: 0;
  max-width: 100vw;
  max-height: 100dvh;
  width: 100%;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}
.lb::backdrop { background: rgba(51, 32, 30, .92); }

.lb__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 5vw, 5rem);
}
.lb__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
}

.lb__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.lb__btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lb__btn svg { width: 20px; height: 20px; }
.lb__btn[hidden] { display: none; }

.lb__close { top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem); }
.lb__prev  { left: clamp(.5rem, 2vw, 1.5rem);  top: 50%; transform: translateY(-50%); }
.lb__next  { right: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }

.lb__count {
  position: absolute;
  bottom: clamp(.9rem, 2vw, 1.6rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ui);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .lb__prev, .lb__next { top: auto; bottom: clamp(.9rem, 2vw, 1.6rem); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lb__btn { transition: none; }
  /* The thumbnail-grows-into-photo morph is motion; drop it to a plain swap. */
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}