.hero {
  position: relative;
  width: 100%;
  /* 150vw cap: only constrains extreme portrait screens (height > 1.5× width) */
  height: min(calc(100svh - var(--header-height)), 150vw);
  min-height: 280px;
  overflow: hidden;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 59.88% 40%;
}

.hero__text {
  position: absolute;
  z-index: 2;
  /* aligns with repertoire inner: (viewport − max-width) / 2 on wide screens */
  left: max(var(--gutter), calc((100% - var(--max-width)) / 2));
  top: 15%;
  text-align: left;
  max-width: 42%;
}

.hero__text h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 4.5rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: #ffffff;
}

/* Hide title when viewport is too narrow to fit it cleanly over the curtain */
@media (max-width: 650px) {
  .hero__text {
    display: none;
  }
}