.lightbox {
  width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: var(--space-8) var(--space-9);
  border: 0; background: var(--fg); color: var(--bg);
}
.lightbox[open] { display: grid; place-items: center; animation: lb-in var(--dur-med) var(--ease-out); }
.lightbox::backdrop { background: var(--fg); }
@keyframes lb-in { from { opacity: 0; } }
.lightbox figure { display: grid; gap: var(--space-3); justify-items: center; max-height: 100%; min-height: 0; }
.lightbox img { max-width: 100%; max-height: calc(100svh - 10rem); width: auto; height: auto; animation: lb-in var(--dur-med) var(--ease-out); }
.lightbox figcaption { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.04em; color: var(--ink-muted); text-align: center; }
.lb-btn {
  position: absolute; width: var(--btn-h); height: var(--btn-h); border-radius: 50%;
  border: var(--hairline) solid var(--ink-border); background: transparent; color: var(--bg);
  font-size: 1.2rem; cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast);
}
.lb-btn:hover { background: var(--bg); color: var(--fg); }
.lb-close { top: var(--space-5); right: var(--space-5); }
.lb-prev { left: var(--space-5); top: 50%; translate: 0 -50%; }
.lb-next { right: var(--space-5); top: 50%; translate: 0 -50%; }
@media (max-width: 600px) {
  .lightbox { padding: var(--space-8) var(--space-3); }
  .lb-prev, .lb-next { top: auto; bottom: var(--space-5); translate: none; }
}
.has-cursor .lightbox, .has-cursor .lightbox * { cursor: auto !important; }