/* =========================================================
   STORM — MEMORY LANE
   -----------------------------------------------------------
   Loads ON TOP of base-web-style.css.

   Most of the page is base: .spi-section-padded + .spi-container
   for every section, .spi-row.spi-cols-2 for the hours/location
   pair, .spi-split.is-reverse.has-gap.is-vcenter for the portrait
   beside the copy, .spi-grid for the four display cards,
   .spi-figure for the portrait, and .spi-h* / .spi-body /
   .spi-eyebrow / .btn.default throughout.

   The banner is base's .spi-banner.is-center. What is left is the
   black hours/location band and the two small image treatments.
   ========================================================= */

/* ---------------------------------------------------------
   1. BANNER (.ml-hero)
   The banner itself is base's .spi-banner.is-center — the frame,
   the artwork sizing and the centred title block all come from
   base-web-style.css section 7 now.

   It is used WITHOUT .is-overlay, and that is the point of the
   modifier being opt-in: this artwork is a deliberately composed
   shot whose left third is bright sky and pale cladding, so the
   title block is DARK type with no scrim. Verified rendering in
   rgb(25,28,27) on all three lines. White would be unreadable.

   Only the heights and the type colour are Memory Lane's.
--------------------------------------------------------- */
.ml-hero {
  --spi-banner-h: 600px;
  --spi-banner-h-tablet: 500px;
  /* Phones: 480px up to 425px wide, growing with the screen to 560px
     by 505px, instead of jumping 80px at a 425px breakpoint. Base only
     reads this knob at 600px and below. */
  --spi-banner-h-mobile: clamp(480px, 100vw + 55px, 560px);
}

.ml-hero-eyebrow,
.ml-hero-title,
.ml-hero-sub {
  color: var(--spi-black);
}

.ml-hero-eyebrow {
  margin: 0 0 4px;
}

/* The size comes from base's .spi-display at its default step —
   40px floor, 7vw, 88px ceiling — which is exactly what this
   banner needs, so there is nothing to tune here. */
.ml-hero-title {
  margin: 0;
}

.ml-hero-sub {
  margin: 8px 0 0;
}

/* The mobile crop is a tall portrait (320x522), so the banner goes
   TALLER rather than cropping the subject out of it — which is why
   these override base's smaller mobile default.

   Note which KNOB each band sets: base reads --spi-banner-h above
   1024, --spi-banner-h-tablet from 601-1024 and --spi-banner-h-mobile
   at 600 and below. Setting --spi-banner-h here instead of the tablet
   knob is silently ignored, which is exactly the bug this page had
   for a moment — 768px rendered 500px against the 560px it ships. */
@media (max-width: 768px) {
  .ml-hero { --spi-banner-h-tablet: 560px; }
}

/* ---------------------------------------------------------
   2. DARK BAND (.ml-dark)
   Hours and location sit on a dark band in the middle of an
   otherwise light page. Base's tokens keep their meanings — the
   band simply paints itself with --spi-black and writes on it
   with --spi-white.
--------------------------------------------------------- */
.ml-dark {
  background: var(--spi-black);
  color: var(--spi-white);
}

/* Base's --spi-text-muted is a DARK muted meant for light grounds.
   This band is the one place on the page that needs a light one. */
.ml-dark .spi-body {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.82);
}

/* The two headings in the band are a pale mint in the current
   design. It is not one of base's tokens and appears nowhere
   else, so it stays a literal here. */
.ml-accent {
  color: #d1e7e1;
}

.ml-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
}

/* ---------------------------------------------------------
   3. DISPLAY CARDS (.ml-museum)
   Image, title, copy — with no card around them. The design
   puts these straight on the page, so none of base's card
   components apply; the grid cell is the card. Only the image
   treatment and the caption casing are left.
--------------------------------------------------------- */
/* Auto-fill rather than base's fixed two tracks. At 1920 a fixed
   2-up put each caption on a 708px line — roughly 95 characters,
   well past a comfortable measure — while the original page wrapped
   400px cards and simply fitted more per row on a wide screen. This
   restores that: 1 up on a phone, 2 on a tablet, 4 on a large
   desktop, with the track never growing past a readable width. */
.ml-museum-grid {
  margin-top: var(--spi-section-y);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}


.ml-museum-img {
  width: 100%;
  height: auto;
  border-radius: var(--spi-radius-md);
  margin-bottom: 12px;
}

/* These titles are sentence-style captions, not the short labels
   .spi-h3 is built for, so they keep their own casing. Everything
   else about the heading — family, weight, size, spacing — is
   base's. */
.ml-museum .spi-h3 {
  text-transform: none;
  margin-bottom: 6px;
}

@media (max-width: 600px) {
  .ml-museum-grid {
    margin-top: var(--spi-section-y-mobile);
  }
}