.intro { padding: 1rem 0 1.5rem; }
.intro h1 { font-size: clamp(2.3rem, 6vw, 4rem); }

.fact { padding: 1.75rem; margin-bottom: 2.5rem; max-width: 760px; }
.fact .eyebrow { margin-bottom: .6rem; }
.fact-text { margin: 0 0 1.25rem; font: 500 clamp(1.4rem, 3.2vw, 1.9rem)/1.35 var(--display); }

h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 1.1rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem; }
.photo {
  position: relative; padding: 0; overflow: hidden;
  aspect-ratio: 1; border: 1px solid var(--line); border-radius: 22px;
  background: #0a1a15; cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .25s;
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) { .photo:hover { transform: translateY(-4px); border-color: var(--line-hi); } }
@media (hover: hover) { .photo:hover img { transform: scale(1.06); } }
.photo:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; }
.photo span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1rem .8rem;
  background: linear-gradient(180deg, transparent, rgba(7, 18, 15, .85));
  font: 600 1.1rem var(--display); text-align: left;
}
.note { color: var(--muted); }

dialog#lightbox {
  max-width: min(94vw, 900px); max-height: 94vh; padding: 1rem;
  border: 1px solid var(--line); border-radius: 26px;
  background: rgba(10, 26, 21, .97); color: var(--ink); text-align: center;
}
dialog#lightbox::backdrop { background: rgba(3, 9, 7, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#lightbox-img { max-width: 100%; max-height: 68vh; border-radius: 18px; display: block; margin: 0 auto; }
#lightbox-caption { margin: .8rem 0 1rem; font: 600 1.3rem var(--display); }