/* Gallery page: the home gallery + experience sections (home.css) under an inner-page banner. */
body.page-gallery { background: var(--cream); }

/* home.css pins the header in the flow (home hero); inner pages overlap it like the other banners */
@media (min-width: 1025px) {
  .is-inner .site-header { margin-bottom: -90px; }
}

/* ===== Banner (as on FAQs) ===== */
.gallery-banner { display: flex; align-items: flex-end; min-height: 560px; padding: 150px 15px 70px; }
.gallery-banner__inner { width: 100%; }
.gallery-banner__inner { display: flex; flex-direction: column; gap: 16px; max-width: 1200px; margin: 0 auto; text-align: center; }
.gallery-banner__crumb { font: 500 12px/1.5 var(--sans); color: var(--rust); }
.gallery-banner__crumb svg { margin: 0 3px; fill: #fff; }
.gallery-banner__title { font: 500 64px/1.1 var(--serif); color: var(--ink); }

.gallery-main { padding: 24px 0 60px; }

/* Full gallery: a calm masonry of natural proportions (the home mosaic is tuned for its own 9 photos) */
.lens__grid--masonry { display: block; columns: 3; column-gap: 22px; }
.lens__grid--masonry .lens__item { grid-area: auto; height: auto; margin-bottom: 22px; break-inside: avoid; aspect-ratio: auto; }
.lens__grid--masonry .lens__item img { height: auto; }

@media (max-width: 1024px) {
  .lens__grid--masonry { column-gap: 16px; }
  .lens__grid--masonry .lens__item { margin-bottom: 16px; }
}
@media (max-width: 767px) {
  .lens__grid--masonry { columns: 2; column-gap: 12px; }
  .lens__grid--masonry .lens__item { margin-bottom: 12px; grid-column: auto; grid-row: auto; }
  .gallery-banner { min-height: 340px; padding: 60px 20px 40px; }
  .gallery-banner__title { font-size: 48px; }
}