/* Reserve space below the centered content for the lake to dissolve into the page. */
:root .hero.hero--lake-fade {
  --lake-content-space: clamp(72px, 7vw, 110px);
  --lake-fade-depth: clamp(130px, 13vw, 190px);
  min-height: calc(820px + var(--lake-fade-depth));
  padding-block: var(--lake-content-space) calc(var(--lake-content-space) + var(--lake-fade-depth));
  align-content: center;
  grid-template-rows: auto auto;
  row-gap: 28px;
}

:root .hero.hero--lake-fade::before {
  content: '';
  display: block;
  position: absolute;
  inset: auto 0 0;
  height: var(--lake-fade-depth);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--bg) 12%, transparent) 18%,
    color-mix(in srgb, var(--bg) 42%, transparent) 42%,
    color-mix(in srgb, var(--bg) 78%, transparent) 70%,
    color-mix(in srgb, var(--bg) 96%, transparent) 91%,
    var(--bg) 100%
  );
}

:root .hero.hero--lake-fade + .news-section {
  border-top: 0;
}

@media (max-width: 760px) {
  :root .hero.hero--lake-fade {
    --lake-content-space: 56px;
    --lake-fade-depth: 100px;
    min-height: 0;
  }
}

@media print {
  :root .hero.hero--lake-fade {
    min-height: 0;
    padding-block: 0;
  }

  :root .hero.hero--lake-fade::before {
    display: none;
  }
}

/* Keep the full-width shoreline broad, with room around the centered biography. */
:root[data-about-style="glass"] .hero.hero--lake-fade > .hero-landscape {
  object-position:center 53%;
  transform:translate3d(var(--scene-shift-x),var(--scene-shift-y),0) scale(1.02);
}
:root[data-about-style="glass"] .hero.hero--lake-fade .hero__copy {
  background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(250,250,247,.89) 53%,rgba(245,248,248,.87));
}
:root[data-theme="dark"][data-about-style="glass"] .hero.hero--lake-fade .hero__copy {
  background:linear-gradient(145deg,rgba(25,31,39,.95),rgba(24,29,36,.91));
}
@media(max-width:760px) {
  :root[data-about-style="glass"] .hero.hero--lake-fade > .hero-landscape { object-position:45% center; }
}
