.picture-header {
  position: relative;
  overflow: hidden;
  margin-bottom: 4.5rem;

  .header {
    position: relative;

    .header__image {
      width: 100%;
      height: 100svh;
      background-size: cover;
      background-position: center center;
    }

    /* Soft scrim: darkest behind the centered headline, fading to near-clear
       at the edges — keeps the photo visible while the text stays legible. */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(
        ellipse 75% 65% at center,
        rgba(43, 38, 34, 0.6) 0%,
        rgba(43, 38, 34, 0.4) 45%,
        rgba(43, 38, 34, 0.1) 100%
      );
    }

    .header__content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, calc(-50% + (var(--top-bar-height) / 2)));
      z-index: 1;

      width: min(90svw, 640px);
      padding: 2rem;
      text-align: center;

      h1,
      h3 {
        color: var(--color-accent);
        text-shadow: 0 0.2rem 2rem rgba(0, 0, 0, 0.45);
      }

      h1 {
        margin-bottom: 0.3em;
      }

      .btn {
        margin-top: 1rem;
      }
    }
  }
}