.gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.gallery-hero { color: var(--white); background: var(--navy); }
.gallery-hero-inner { min-height: 22rem; display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); padding-block: 3.5rem; }
.gallery-hero .eyebrow { color: var(--yellow); }
.gallery-hero h1 { max-width: 12ch; margin-bottom: 1rem; color: var(--white); font-family: var(--sans); font-size: clamp(3rem, 5.5vw, 5rem); font-weight: 850; letter-spacing: -.05em; text-transform: uppercase; }
.gallery-hero .lead { color: #d4e0e7; }
.gallery-hero-image { --photo-fallback: #15566d; min-height: 16rem; border: .5rem solid var(--white); transform: rotate(1.5deg); }
.gallery-heading h1 { margin-bottom: .8rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 12rem; gap: .85rem; }
.gallery-item:nth-child(7n + 1), .gallery-item:nth-child(7n + 5) { grid-row: span 2; }
.gallery-item:nth-child(7n + 3) { grid-column: span 2; }
.gallery-grid .photo-frame { height: 100%; min-height: 0; }
.gallery-item:focus-visible .photo-frame { outline: 3px solid var(--yellow); outline-offset: -3px; }
.gallery-hint { color: var(--muted); font-size: .8rem; }
@media (max-width: 760px) {
  .gallery-hero-inner { grid-template-columns: 1fr; padding-block: 2.5rem; }
  .gallery-hero-image { min-height: 14rem; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 10rem; }
  .gallery-item:nth-child(7n + 3) { grid-column: auto; }
}
@media (max-width: 480px) { .gallery-grid { grid-auto-rows: 9rem; gap: .5rem; } }
body[data-page="gallery"] .gallery-item .photo-frame::before { transition: filter .3s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
body[data-page="gallery"] .gallery-item:hover .photo-frame::before,
body[data-page="gallery"] .gallery-item:focus-visible .photo-frame::before { filter: saturate(1.12); }
body[data-page="gallery"] .gallery-item .photo-caption { opacity: .8; transform: translateY(5px); transition: opacity .2s ease, transform .2s ease; }
body[data-page="gallery"] .gallery-item:hover .photo-caption,
body[data-page="gallery"] .gallery-item:focus-visible .photo-caption { opacity: 1; transform: translateY(0); }
body[data-page="gallery"] .gallery-item:nth-child(3n) { transition-delay: .04s; }
body[data-page="gallery"] .gallery-item:nth-child(3n + 1) { transition-delay: .08s; }
body[data-page="gallery"] .lightbox:not([hidden]) { animation: lightbox-appear .22s ease-out both; }
body[data-page="gallery"] .lightbox .photo-frame { animation: lightbox-photo-appear .28s ease-out both; }
body[data-page="gallery"] .lightbox-nav,
body[data-page="gallery"] .lightbox-close { transition: color .18s ease, background-color .18s ease, transform .18s ease; }
body[data-page="gallery"] .lightbox-nav:hover { transform: translateY(-50%) scale(1.08); }
body[data-page="gallery"] .lightbox-close:hover { color: var(--navy); background: var(--yellow); }
@keyframes lightbox-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes lightbox-photo-appear { from { opacity: .6; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }

/* Preserve uploaded portraits and landscapes in an airy masonry gallery. */
.gallery-hero-image { width: 100%; min-width: 0; min-height: 0; aspect-ratio: 4 / 3; }
.gallery-heading { margin-bottom: 1.5rem; }
.gallery-grid { display: block; columns: 3; column-gap: 1rem; }
.gallery-item { display: block; width: 100%; margin: 0 0 1rem; break-inside: avoid; overflow: hidden; border-radius: .5rem; }
.gallery-grid .photo-frame { display: block; height: auto; }
.gallery-grid .photo-frame img { width: 100%; height: auto; transition: transform .5s ease; }
.gallery-grid .photo-frame::before { display: none; }
.gallery-grid .photo-frame::after { border: 0; background: linear-gradient(transparent 55%, rgb(2 19 29 / 72%)); }
body[data-page="gallery"] .gallery-item .photo-caption { z-index: 2; right: 0; bottom: 0; left: 0; width: 100%; max-width: none; margin: 0; padding: 2rem 1rem 1rem; color: #fff; background: transparent; font-size: .9rem; opacity: 1; transform: none; text-shadow: 0 1px 5px #000; }
.gallery-item:hover img { transform: scale(1.025); }
body[data-page="gallery"] .lightbox { z-index: 200; width: 100%; height: 100%; padding: 4.5rem 4rem 1.5rem; background: rgb(2 12 19 / 97%); }
body[data-page="gallery"] .lightbox-inner { width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; }
body[data-page="gallery"] .lightbox .photo-frame { width: 100%; min-height: 0; flex: 1; background: transparent; animation: none; }
body[data-page="gallery"] .lightbox .photo-frame::before, body[data-page="gallery"] .lightbox .photo-frame::after, .lightbox .photo-caption { display: none; }
.lightbox-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lightbox-label { flex: 0 0 auto; margin: .8rem 0 0; }
.lightbox-fullscreen { position: absolute; top: 1.25rem; right: 4.8rem; width: 2.8rem; height: 2.8rem; border: 1px solid white; color: white; background: transparent; font-size: 1.5rem; cursor: pointer; }
@media (max-width: 760px) { .gallery-grid { columns: 2; } .gallery-heading { align-items: flex-start; flex-direction: column; gap: .5rem; } }
@media (max-width: 480px) { .gallery-grid { columns: 1; } body[data-page="gallery"] .lightbox { padding: 4.5rem .65rem 4.5rem; } .lightbox-nav { top: auto; bottom: .6rem; transform: none; } body[data-page="gallery"] .lightbox-nav:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .gallery-item:hover img { transform: none; } }