/* Lightbox dialog styles */

.lightbox {
  border: 0;
  padding: 0;
  max-inline-size: min(96vw, 72rem);
  max-block-size: 92svh;
  background: var(--color-ink);
  color: #f4efe5;
  border-radius: var(--radius-medium);
}
.lightbox::backdrop { background: rgb(10 22 26 / 0.85); backdrop-filter: blur(4px); }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
.lightbox__caption { font-size: var(--text-xs); color: #c3d4d3; max-width: 52ch; }
.lightbox__close, .lightbox__prev, .lightbox__next {
  inline-size: 2.6rem; block-size: 2.6rem;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  font-size: 1.1rem;
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: rgb(255 255 255 / 0.12); }
.lightbox__stage { display: grid; place-items: center; background: #0a161a; }
.lightbox__stage img { max-block-size: 62svh; width: auto; max-inline-size: 100%; object-fit: contain; }
.lightbox__nav { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); font-size: var(--text-xs); color: #c3d4d3; }