body.theme-story {
  background: #f3f0eb;
}

.theme-story .site-header {
  position: fixed;
  width: 100%;
}

.theme-story .site-header:not(.is-scrolled) .brand,
.theme-story .site-header:not(.is-scrolled) .nav-list a {
  color: #fff;
}

.theme-story .site-header:not(.is-scrolled) .menu-toggle {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}

.theme-story .site-header:not(.is-scrolled) .menu-toggle span {
  background: #fff;
}

.story-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: end;
}

.story-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(0.9);
}

.story-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0.7));
}

.story-hero-content {
  position: relative;
  z-index: 1;
  color: #fff;
  padding-top: calc(var(--header-height) + var(--space-xl));
  padding-bottom: var(--space-4xl);
}

.story-hero-content p {
  color: rgba(255, 255, 255, 0.85);
}

.story-band {
  padding: var(--space-4xl) 0;
}

.story-band img {
  width: 100%;
  border-radius: var(--radius-lg);
  min-height: 520px;
  object-fit: cover;
}

.story-band-dark {
  background: #1f2937;
  color: #fff;
}

.story-band-dark p,
.story-band-dark .eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 980px) {
  .reverse-on-mobile {
    display: flex;
    flex-direction: column-reverse;
  }

  .story-band img {
    min-height: 360px;
  }
}

@media (max-width: 640px) {
  .story-hero {
    min-height: 86vh;
  }

  .story-hero-content {
    padding-top: calc(var(--header-height) + var(--space-lg));
    padding-bottom: var(--space-3xl);
  }

  .story-band {
    padding: var(--space-3xl) 0;
  }

  .story-band img {
    min-height: 260px;
  }
}