/* ─────────────────────────────────────────
   SECTION — OUR STORY (short version, home page)
   Taped-in photo on the left (same gesture as the welcome photo, tilted
   the other way), a few lines + "Read our story" on the right.
   The full story lives on story.html.
───────────────────────────────────────── */

.story-teaser { background: var(--surface); }  /* beige */

.story-teaser-body {
  display: grid;
  grid-template-columns: minmax(240px, 380px) minmax(0, 560px);
  justify-content: center;
  gap: clamp(48px, 7vw, 120px);
  align-items: center;
}

.story-teaser-photo-wrap {
  position: relative;
  transform: rotate(-2deg);
}

.story-teaser-tape {
  transform: translateX(-50%) rotate(-6deg);
}

.story-teaser-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-teaser-photo-wrap .photo-frame {
  aspect-ratio: 3 / 4;
}

.story-teaser-text .section-header {
  margin-bottom: 32px;
}

.story-teaser-text p {
  color: var(--text-secondary);
}

.story-teaser-text p + p { margin-top: 16px; }

.story-teaser-more { margin-top: 36px; }


/* responsive — tablet: photo on top, text below */
@media (max-width: 1024px) {
  .story-teaser-body {
    grid-template-columns: minmax(0, 560px);
    gap: 56px;
  }

  .story-teaser-photo-wrap {
    width: min(280px, 80%);
    margin: 0 auto;
  }
}


/* responsive — mobile */
@media (max-width: 640px) {
  .story-teaser-body { gap: 48px; }

  .story-teaser-text .section-header { margin-bottom: 24px; }
}