/* "story_hero" layout: a full-bleed cover image under a bottom-up veil, with a display heading
   aligned to the bottom of the shared container. Brand-neutral — the veil and the heading take
   their colours from the overlay colour scheme, and every measurement is a merchant setting. */
.story-hero {
  position: relative;
  display: block;
}
.story-hero__body { position: relative; }
.story-hero__image {
  width: 100%;
  height: min(var(--story-hero-vh, 56vh), var(--story-hero-max, 520px));
  object-fit: cover;
  object-position: center center;
  display: block;
}
.story-hero__veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(
    to top,
    rgba(var(--color-background), 0.9),
    rgba(var(--color-background), 0.2) 60%,
    rgba(var(--color-background), 0)
  );
}
.story-hero__inner {
  width: 100%;
  padding-block: var(--story-hero-pad, 44px);
}
.story-hero__inner--center { text-align: center; }
.story-hero .story-hero__heading {
  color: rgba(var(--color-text));
  white-space: pre-line;
  font-size: clamp(var(--story-hero-h-min, 38px), var(--story-hero-h-vw, 5.2vw), var(--story-hero-h-max, 76px));
  line-height: var(--story-hero-h-lh, 0.94);
  max-width: var(--story-hero-h-width, none);
}
@media (max-width: 560px) {
  .story-hero .story-hero__heading {
    font-size: clamp(
      var(--story-hero-h-min-narrow, 34px),
      var(--story-hero-h-vw-narrow, 10vw),
      var(--story-hero-h-max-narrow, 48px)
    );
  }
}
@media (max-width: 480px) {
  .story-hero__image {
    height: min(var(--story-hero-vh-narrow, 48vh), var(--story-hero-max-narrow, 380px));
  }
}