/* ============================================================
   gallery.css
   ────────────────────────────────────────────────────────────
   Small page-specific stylesheet for gallery.html.
   ============================================================ */

.gallery-head {
  display: grid;
  gap: var(--s-4);
  max-width: 64ch;
  margin-bottom: var(--s-7);
}
.gallery-title {
  font-size: var(--t-h2);
  line-height: 1.0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--ls-display);
  color: var(--ink-900);
}
.gallery-lede {
  font-size: var(--t-lede);
  color: var(--ink-700);
  line-height: 1.5;
  max-width: 54ch;
}

/* The gallery grid uses the same bento class but with tighter row
   height so images fill the viewport in a denser mosaic. */
.gallery-grid {
  grid-auto-rows: clamp(120px, 11vw, 180px);
}

.gallery-tile {
  /* All gallery tiles are image-only by default — clicking opens
     the URL in a new tab if one is provided. Hover already does
     a 4% scale via tile--image base rule. */
  border-radius: var(--r-md);
}

/* For the giant 12-col wide hero gallery tile, use the larger radius
   to match the page hero. */
.gallery-tile--wide { border-radius: var(--r-lg); }