.public-page-hero {
  min-height: 420px;
  display: grid;
  align-items: center;
  padding-block: 64px;
  background:
    radial-gradient(circle at 82% 18%, rgba(91, 67, 230, 0.38), transparent 34%),
    radial-gradient(circle at 70% 100%, rgba(25, 169, 116, 0.14), transparent 32%),
    var(--ink-950);
  color: #fff;
  view-transition-name: public-page-hero;
}

.public-page-hero__inner {
  display: grid;
  align-content: center;
}

.public-page-hero__breadcrumb {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
}

.public-page-hero__breadcrumb a:hover,
.public-page-hero__breadcrumb a:focus-visible {
  color: #fff;
}

.public-page-hero .eyebrow {
  margin: 0 0 14px;
}

.public-page-hero h1 {
  max-width: 920px;
  margin: 0;
  font-size: clamp(44px, 5vw, 60px);
  line-height: 1.1;
}

.public-page-hero__lead {
  max-width: 760px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 17px;
}

@view-transition {
  navigation: auto;
}

.site-header {
  view-transition-name: site-header;
}

::view-transition-group(site-header),
::view-transition-group(public-page-hero) {
  animation-duration: 180ms;
  animation-timing-function: ease-out;
}

@media (max-width: 820px) {
  .public-page-hero {
    min-height: 400px;
    padding-block: 56px;
  }

  .public-page-hero h1 {
    font-size: clamp(40px, 8vw, 54px);
  }
}

@media (max-width: 600px) {
  .public-page-hero {
    min-height: 420px;
    padding-block: 48px;
  }

  .public-page-hero h1 {
    font-size: 38px;
  }

  .public-page-hero__lead {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}