/* custom.css — additions for the static malchow.com build.
   Loaded after site.css. The original design is kept; this file adds:
   - self-hosted fonts mapped onto the Adobe Fonts names site.css uses
   - CSS-only nav dropdowns (site.css hid them behind a JS class)
   - the mobile-nav open state (template markup + site.css styles kept)
   - static grid galleries + lightbox (replacing the JS slideshow)
   - a small homepage hero */

/* --- Fonts ------------------------------------------------------------- */
/* site.css references adobe-caslon-pro, proxima-nova, "Open Sans" and Lato
   from Adobe Fonts (Typekit). Those families are self-hosted here via
   metric-compatible substitutes; no third-party requests remain. */
@font-face {
  font-family: "adobe-caslon-pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/libre-caslon-400.woff2") format("woff2");
}
@font-face {
  font-family: "adobe-caslon-pro";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/libre-caslon-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "proxima-nova";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-var.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/open-sans-var.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/open-sans-var-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/lato-300.woff2") format("woff2");
}

/* --- Nav dropdowns without JS ------------------------------------------ */
/* site.css collapses .subnav to height:0 and only opens it via a
   .active-folder class the Squarespace runtime used to set. Open it on
   hover/keyboard focus instead. */
.main-nav li.folder:hover > .subnav,
.main-nav li.folder:focus-within > .subnav {
  height: auto;
  overflow: visible;
}

/* --- Mobile nav --------------------------------------------------------- */
/* The template's own #mobileNav markup and site.css styles (red panel at
   <=800px, "Menu" toggle link) are kept as-is; site.css keeps the panel
   collapsed with height:0. site.js toggles body.mobile-nav-open. */
body.mobile-nav-open #mobileNav {
  height: auto;
  overflow: visible;
}

/* --- Grid galleries ----------------------------------------------------- */
/* Replaces the JS slideshow in #galleryWrapper. */
.grid-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  padding: 0;
}
.grid-item {
  margin: 0;
  overflow: hidden;
  background: #f4f4f4;
  cursor: zoom-in;
}
.grid-item img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.grid-item:hover img {
  transform: scale(1.04);
}
@media only screen and (max-width: 640px) {
  .grid-gallery {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
  }
  .grid-item img {
    height: 150px;
  }
}
/* On gallery pages site.css positions #galleryWrapper absolutely over the
   whole viewport; the original slideshow cleared the fixed sidebar with its
   own margins (margin:40px; margin-left:285px). Do the same for the grid.
   At <=800px site.css makes #galleryWrapper static again, so this is
   desktop-only. */
@media only screen and (min-width: 801px) {
  .collection-type-gallery .grid-gallery {
    margin: 40px 40px 0 285px;
  }
}

/* --- Lightbox (built by site.js) ---------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  background: rgba(12, 12, 12, .94);
  align-items: center;
  justify-content: center;
}
.lightbox.open {
  display: flex;
}
.lightbox img {
  max-width: 92vw;
  max-height: 85vh;
  object-fit: contain;
}
.lightbox-caption {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  color: #bbb;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
}
.lightbox button {
  position: absolute;
  background: none;
  border: 0;
  color: #eee;
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
  padding: 14px 18px;
  opacity: .55;
  font-family: Georgia, serif;
}
.lightbox button:hover {
  opacity: 1;
}
.lightbox-close {
  top: 6px;
  right: 10px;
  font-size: 34px;
}
.lightbox-prev {
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox-next {
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}

/* --- Homepage hero ------------------------------------------------------ */
/* The published homepage was empty apart from the nav. */
.home-hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 24px 60px;
  text-align: center;
}
.home-hero .tagline {
  font-family: adobe-caslon-pro, Georgia, serif;
  font-size: 18px;
  line-height: 1.7;
  color: #333;
  max-width: 34em;
  margin: 0 auto 34px;
}
.home-hero figure {
  margin: 0;
}
.home-hero img {
  width: 100%;
  height: auto;
  display: block;
}
.home-hero figcaption {
  margin-top: 10px;
  font-family: "Open Sans", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #999;
}
.home-hero figcaption a {
  color: #999;
}