.gallery-page { min-height: 100vh; }
.gallery-page .gallery-header,
.gallery-page .gallery-main,
.gallery-page > footer { width: min(1200px, calc(100% - 40px)); margin-right: auto; margin-left: auto; }
.gallery-header { padding: 2rem 0 1.5rem; border-bottom: 1px solid var(--line); }
.gallery-header h1 { margin: 1.2rem 0 .2rem; color: #fff; font-size: clamp(1.65rem, 4vw, 2.35rem); line-height: 1.2; }
.gallery-header p { margin: 0; color: var(--muted); }
.back-link { font-size: .85rem; text-decoration: none; }
.back-link span { margin-right: .25rem; }
.gallery-main { padding: 2rem 0 4rem; }
.album-grid, .photo-grid { display: grid; margin: 0; padding: 0; list-style: none; }
.album-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.25rem; }
.album { position: relative; display: block; overflow: hidden; border: 1px solid #333; background: var(--panel); color: #fff !important; text-decoration: none; }
.album img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .25s ease, opacity .25s ease; }
.album:hover img, .album:focus img { transform: scale(1.02); opacity: .86; }
.album-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; }
.album-copy strong { font-size: .95rem; }
.album-copy small { color: var(--muted); white-space: nowrap; }
.photo-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); grid-auto-rows: 230px; gap: .65rem; }
.photo { display: block; width: 100%; height: 100%; overflow: hidden; background: #111; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease, opacity .2s ease; }
.photo:hover img, .photo:focus img { transform: scale(1.025); opacity: .82; }
.gallery-empty { color: var(--muted); }
.gallery-page > footer { padding: 1rem 0 2rem; border-top: 1px solid var(--line); color: #777; font-size: .75rem; text-align: center; }
.lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 8, 8, .97); color: #fff; }
.lightbox::backdrop { background: #080808; }
.lightbox[open] { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 4rem; grid-template-rows: minmax(0, 1fr) auto; align-items: center; }
.lightbox figure { grid-column: 2; min-width: 0; height: calc(100dvh - 3.5rem); margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; }
.lightbox figure img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.lightbox figcaption { min-height: 2.5rem; max-width: 52rem; padding: .7rem; color: #bbb; text-align: center; }
.photo-metadata, .photo-caption { display: block; }
.photo-metadata { margin-bottom: .25rem; color: #888; font-size: .75rem; letter-spacing: .025em; }
.photo-caption { white-space: pre-wrap; }
.photo-metadata[hidden], .photo-caption[hidden], .lightbox figcaption[hidden] { display: none; }
.lightbox button { z-index: 1; border: 0; background: transparent; color: #ddd; cursor: pointer; }
.lightbox button:hover, .lightbox button:focus { color: var(--accent); }
.lightbox-close { position: fixed; top: .25rem; right: .5rem; width: 3rem; height: 3rem; font-size: 2rem; }
.lightbox-prev, .lightbox-next { height: 6rem; font-size: 3rem; }
.lightbox-count { grid-column: 1 / -1; margin: 0; padding: 0 0 .75rem; color: #888; font-size: .75rem; text-align: center; }
body.viewer-open { overflow: hidden; }
@media (max-width: 600px) {
  .gallery-page .gallery-header, .gallery-page .gallery-main, .gallery-page > footer { width: calc(100% - 30px); }
  .gallery-header { padding-top: 1.5rem; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: min(44vw, 220px); gap: .35rem; }
  .lightbox[open] { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; }
  .lightbox-prev, .lightbox-next { font-size: 2.5rem; }
}