/* Static-site fallbacks for layout that Squarespace's JavaScript used to do. */

/* Masonry gallery: JS positioned items absolutely; CSS columns instead.
   Column counts follow the breakpoints in the images' original sizes= attr. */
.gallery-masonry .gallery-masonry-wrapper { display: block; column-count: 4; column-gap: 50px; }
.gallery-masonry .gallery-masonry-item { break-inside: avoid; margin: 0 0 50px; }
@media (max-width: 992px) {
  .gallery-masonry .gallery-masonry-wrapper { column-count: 3; }
}
@media (max-width: 768px) {
  .gallery-masonry .gallery-masonry-wrapper { column-count: 2; column-gap: 20px; }
  .gallery-masonry .gallery-masonry-item { margin-bottom: 20px; }
}

/* Fonts: headings used "Acumin Pro" and the nav "Brandon Grotesque", both Adobe
   Fonts served through Squarespace's Typekit license, which does not come with
   the site. Poppins, already self-hosted for the body text, stands in. To use
   something else, change these two lines. */
:root {
  --heading-font-font-family: "Poppins";
  --site-navigation-font-font-family: "Poppins";
}

/* Nav size: Poppins is wider than Brandon Grotesque, and the logo plus the
   "closed" button leave the nav little room, so at Squarespace's 1.4rem the
   links wrapped onto two lines. 0.9 (~14px) keeps them on one line down to
   about a 1366px-wide window. */
:root {
  --site-navigation-font-font-size-value: 0.9;
}

/* Section background photos: hidden until JS renders its "zoom" effect on a
   canvas. Just show the photo. */
.background-image-fx { visibility: visible; }

/* Mobile menu overlay. The site's custom.css asks for a sage background with
   white links, but a later Squarespace rule (.site-wrapper .header-menu
   .header-menu-bg) outranks it and paints the overlay white, so the links were
   invisible -- on the live Squarespace site too. This restores the intent. */
.site-wrapper .header-menu .header-menu-bg.theme-bg--primary { background-color: #b5c9bc; }