.album-page { padding: 28px 6% 60px; }
.album-page h1 { font-family: 'TSBlockBold', sans-serif; font-size: clamp(22px, 3vw, 42px); line-height: 1.3; margin: 20px 0 8px; overflow-wrap: anywhere; }
.photo-count { color: #999; margin-bottom: 28px; }
.photo-wall { columns: 4; column-gap: 8px; }
.photo-tile { display: block; break-inside: avoid; margin-bottom: 8px; }
.photo-tile img { display: block; width: 100%; height: auto; }
.photo-tile:hover { opacity: .85; }
.photo-viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; }
.photo-viewer::backdrop { background: rgba(0,0,0,.5); }
.photo-viewer[open] { display: flex; align-items: center; justify-content: center; }
.viewer-image { display: block; width: auto; height: auto; max-width: calc(100% - 128px); max-height: calc(100dvh - 100px); object-fit: contain; cursor: pointer; }
.viewer-image[hidden] { display: none; }
.photo-viewer button { position: absolute; z-index: 1; width: 44px; height: 44px; border: 1px solid #aaa; border-radius: 8px; background: rgba(0,0,0,.65); color: #fff; font-size: 28px; cursor: pointer; }
.photo-viewer button:hover { background: #b71919; }
.viewer-close { top: 12px; right: 12px; }
.viewer-prev { left: 12px; top: calc(50% - 22px); }
.viewer-next { right: 12px; top: calc(50% - 22px); }
.viewer-status { position: absolute; bottom: 12px; left: 60px; right: 60px; text-align: center; text-shadow: 0 1px 4px #000; pointer-events: none; }
html.viewer-open { overflow: hidden; }
@media (max-width: 1200px) { .photo-wall { columns: 3; } }
@media (max-width: 700px) {
  .album-page { padding: 24px 4% 40px; }
  .photo-wall { columns: 2; column-gap: 6px; }
  .photo-tile { margin-bottom: 6px; }
  .viewer-image { max-width: calc(100% - 16px); max-height: calc(100dvh - 140px); }
  .viewer-prev, .viewer-next { top: auto; bottom: 12px; }
}