/* lightbox.css — colours come from the site tokens (css/tokens.css). */
html.lb-open { overflow: hidden; }
dialog.lb {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: rgb(0 0 0 / .92);                                        /* fallback: no color-mix */
  background: color-mix(in srgb, var(--bg, #000) 94%, transparent);
  color: var(--ink, #fff);
}
dialog.lb[open] { display: flex; align-items: center; justify-content: center; }
dialog.lb figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .7rem; }
dialog.lb figure img {
  width: auto; height: auto; max-width: min(94vw, 1600px);
  max-height: calc(100vh - 9rem); max-height: calc(100dvh - 9rem);
}
dialog.lb figcaption {
  margin: 0; max-width: 68ch; max-height: 6rem; overflow: auto; padding: 0 1rem;
  text-align: center; font-size: .95rem; line-height: 1.4; color: var(--ink-soft, #ccc);
}
dialog.lb button {
  position: absolute; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%;
  border: 1px solid var(--rule, #666); background: var(--bg-soft, #222); color: var(--ink, #fff);
  font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
dialog.lb button:hover { color: var(--accent, #fff); }
dialog.lb button:focus-visible { outline: 2px solid var(--accent, #fff); outline-offset: 2px; }
dialog.lb .lb-close { top: 1rem; right: 1rem; }
dialog.lb .lb-prev, dialog.lb .lb-next { top: 50%; margin-top: -1.375rem; }
dialog.lb .lb-prev { left: 1rem; }
dialog.lb .lb-next { right: 1rem; }
dialog.lb .lb-status {
  position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;                          /* visually hidden, still announced */
}
@media (prefers-reduced-motion: no-preference) {
  dialog.lb[open] figure img { animation: lb-in .18s ease-out; }
  @keyframes lb-in { from { opacity: .3; transform: scale(.98); } }
}