.story-opening-banner {
  min-height: calc(100svh - 1px);
}

.story-opening-banner > img {
  inset: 0 0 0 35.4%;
  width: 64.6%;
  object-position: center;
  filter: saturate(.85);
}

.story-opening-banner .about-hero-scrim {
  inset: 0 auto 0 0;
  width: 35.4%;
  background: #2a261f;
}

.story-opening-banner .about-hero-copy {
  width: min(33%, 38rem);
  margin: 0 0 clamp(5rem, 12vh, 10rem) clamp(2rem, 4vw, 5rem);
}

.story-opening-banner .about-hero-copy h1 {
  max-width: 34rem;
  font-size: clamp(3rem, 3.55vw, 4.5rem);
  line-height: 1.08;
}

/* Keep the page header visually continuous with the hero's dark left panel. */
.story-page .site-header {
  --sans: Avenir, "Avenir Next", Arial, sans-serif;
  font-family: var(--sans);
}

.site-header,
.site-header.is-scrolled {
  background: #2a261f;
  border-bottom: 0;
}

.story-page .site-header:not(.nav-open) {
  color: var(--ivory) !important;
  background: #2a261f;
}

.story-page .site-header:not(.nav-open) .brand::after {
  background-image: url("assets/loom-tile-logo-beige.svg") !important;
}

.story-page .site-header.nav-open {
  color: var(--ink) !important;
  background: transparent;
}

.story-page .site-header.nav-open .brand::after {
  background-image: url("assets/loom-tile-logo-deep-brown.svg") !important;
}

.story-passage .who__body p {
  color: #756b60;
}

/* Mirrors the Collections closing CTA treatment while preserving this page's copy. */
.story-closing.projects-cta {
  position: relative;
  overflow: hidden;
  background: var(--loom-green);
}

.story-closing.projects-cta .collection-cta-inner {
  position: relative;
  z-index: 1;
}

@media (max-width: 720px) {
  .story-opening-banner { min-height: 42rem; }

  .story-opening-banner > img {
    inset: 0;
    width: 100%;
  }

  .story-opening-banner .about-hero-scrim {
    inset: 0;
    width: 100%;
    background: linear-gradient(90deg, rgba(42, 38, 31, .88), rgba(42, 38, 31, .16));
  }

  .story-opening-banner .about-hero-copy { width: min(80%, 28rem); }
}