/* A photographic wall: full frames, close joins and no separate image cards. */
.page-gallery {
  --gallery-pad: clamp(14px, 3vw, 52px);
  display: block;
  padding: 0 var(--gallery-pad) 40px;
  min-height: 0;
  overflow: visible;
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
}
.page-gallery .gallery-heading {
  width: 100%;
  max-width: 1760px;
  margin-inline: auto;
  padding: 24px 0 22px;
  text-shadow: none;
}
.page-gallery .breadcrumb { padding-right: 0; margin-bottom: 12px; color: var(--muted); }
.page-gallery .breadcrumb a { color: var(--accent); }
.page-gallery h1 { max-width: none; margin-bottom: 8px; color: var(--ink); font-size: clamp(34px, 4vw, 54px); }
.page-gallery .gallery-intro { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.gallery-mosaic { width: 100%; max-width: 1760px; margin-inline: auto; columns: 4; column-gap: 12px; }
.gallery-mosaic .gallery-tile { display: block; width: 100%; margin: 0 0 12px; break-inside: avoid; }
.gallery-tile > a { position: relative; display: block; overflow: hidden; border-radius: 3px; }
.gallery-tile:nth-child(5n + 2) > a { border-radius: 18px 3px 3px 3px; }
.gallery-tile:nth-child(5n + 4) > a { border-radius: 3px 3px 18px 3px; }
.gallery-tile picture, .gallery-tile img { display: block; width: 100%; height: auto; }
.gallery-tile img { object-fit: contain; }
.gallery-tile > a:hover { filter: brightness(1.04); }
.gallery-tile > a:focus-visible { outline-offset: -5px; outline-color: white; box-shadow: inset 0 0 0 7px var(--accent); }
/* The first mosaic tile is the hero photograph, rather than a repeated banner. */
.page-gallery .gallery-mosaic .hero-image {
  position: static;
  inset: auto;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0 0 12px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}
.page-gallery .gallery-mosaic .hero-image picture { position: static; inset: auto; width: 100%; height: auto; }
.page-gallery .gallery-mosaic .hero-image::after { display: none; }
@media (max-width: 1100px) {
  .gallery-mosaic { columns: 3; }
}
@media (max-width: 700px) {
  .gallery-mosaic { columns: 2; column-gap: 10px; }
  .gallery-mosaic .gallery-tile, .page-gallery .gallery-mosaic .hero-image { margin-bottom: 10px; }
  .page-gallery .gallery-heading { padding-top: 20px; padding-bottom: 18px; }
}
@media print {
  .gallery-mosaic { columns: 3; }
}