/* The Photography page's grid and full-screen viewer, the same in every look. */
.gallery {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) var(--g, 16px) clamp(3rem, 6vw, 5rem);
  columns: 4 260px;
  column-gap: 10px;
}
.gallery a { display: block; margin: 0 0 10px; break-inside: avoid; cursor: zoom-in; }
.gallery img { display: block; width: 100%; height: auto; background: rgba(127, 127, 127, 0.15); }
@media (max-width: 560px) {
  .gallery { columns: 2; column-gap: 6px; }
  .gallery a { margin-bottom: 6px; }
}

.viewer {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  background: #080808; touch-action: pan-y;
}
.viewer.open { display: flex; }
.viewer img { max-width: 96vw; max-height: 88vh; max-height: 88dvh; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.viewer .bar {
  position: absolute; inset: auto 0 0; display: flex; gap: 1.2rem; align-items: center; justify-content: center;
  padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
  font: 500 13px/1 system-ui, -apple-system, sans-serif; color: #aaa;
}
.viewer button { border: 0; background: none; color: #ddd; font: inherit; padding: 0.4rem 0.2rem; cursor: pointer; }
.viewer button:hover { color: #fff; }
.viewer .count { font-variant-numeric: tabular-nums; min-width: 5.5em; text-align: center; }
html.viewing { overflow: hidden; }