.reference-lightbox [hidden] { display: none !important; }
.reference-lightbox button:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.reference-lightbox { width: min(1200px, 94vw); max-height: 94dvh; padding: 20px; border: 0; border-radius: 18px; background: var(--bg); color: var(--navy-deeper); margin: auto; box-shadow: var(--sh-lg); }
.reference-lightbox::backdrop { background: rgba(12, 19, 44, .8); }
.reference-lightbox-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.reference-lightbox h2 { font-size: 18px; line-height: 1.4; margin: 0; }
.reference-lightbox button { flex-shrink: 0; border: 1px solid var(--border); background: var(--surface); color: var(--navy-deeper); font: inherit; padding: 10px 16px; border-radius: 24px; cursor: pointer; }
.reference-lightbox-image { display: block; width: auto; max-width: 100%; margin-inline: auto; max-height: calc(94dvh - 112px); object-fit: contain; }
.reference-image-error { padding: 40px 0; }

@media (max-width: 600px) {
  .reference-lightbox { padding: 14px; }
  .reference-lightbox h2 { font-size: 15px; }
  .reference-lightbox button { padding: 8px 12px; }
}

.reference-gallery-open { overflow: hidden; }