/* ══════════════════════════════
   "HOW IT ALL ACTUALLY STARTED" — photo mosaic
   True masonry via CSS multi-column layout: tiles flow top-to-bottom
   within each column, wrapping to the next column, so there are never
   any gaps (unlike a CSS grid with fixed spans). Tiles are placeholders
   for now — swap each one's content for a real <img> when photos are
   ready (see the HTML for exactly where each numbered tile lives).

   Each .story-tile-N below gets its own hand-picked height — deliberately
   irregular so it reads as a scattered collage, not a uniform grid.
══════════════════════════════ */
#story {
  background: #fff;
  padding: 4rem 80px 6rem;
}

.story-inner {
  max-width: 1300px;
  margin: 0 auto;
}

.story-grid {
  column-count: 4;
  column-gap: 14px;
}

/* placeholder look — swap for a real photo by replacing this div's
   content with an <img class="story-tile" src="..."> */
.story-tile {
  background: #eeece8;
  border: 2px dashed #c9c5be;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a29c90;
  font: 600 13px/1 'DM Sans', sans-serif;
  overflow: hidden;
  margin-bottom: 14px;
  /* keeps a tile from being split across two columns */
  break-inside: avoid;
}

/* once a real photo replaces the placeholder, this makes it fill the tile */
.story-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* hand-picked heights, each different from its neighbors on purpose */
.story-tile-1  { height: 260px; }
.story-tile-2  { height: 170px; }
.story-tile-3  { height: 320px; }
.story-tile-4  { height: 210px; }
.story-tile-5  { height: 150px; }
.story-tile-6  { height: 240px; }
.story-tile-7  { height: 300px; }
.story-tile-8  { height: 180px; }
.story-tile-9  { height: 220px; }
.story-tile-10 { height: 260px; }
.story-tile-11 { height: 190px; }
.story-tile-12 { height: 230px; }
.story-tile-13 { height: 270px; }

/* the one tile that holds the caption, styled like text overlaid on a
   photo (dark scrim + light text) rather than a plain placeholder box */
.story-tile--text {
  background: linear-gradient(160deg, #4a4744, #2a2826);
  border: none;
  color: #fff;
  font: 700 clamp(18px, 1.8vw, 26px)/1.3 'Oswald', sans-serif;
  text-align: center;
  padding: 20px;
}
.story-tile--text span { color: #ff3b30; }

/* ── TABLET ── */
@media (max-width: 900px) {
  #story { padding: 3rem 32px 4rem; }
  .story-grid { column-count: 3; }
}

/* ── MOBILE ── */
@media (max-width: 560px) {
  #story { padding: 2.5rem 20px 3rem; }
  .story-grid { column-count: 2; column-gap: 10px; }
  .story-tile { margin-bottom: 10px; }
  .story-tile--text { font-size: clamp(15px, 5vw, 20px); padding: 14px; }
}