.hero {
  background: var(--black);
  color: var(--paper);
  padding: 0;
  border: 0;
  min-height: 100svh;
  overflow: hidden;
}
.hero .wrap {
  min-height: 100svh;
  padding-top: clamp(1.5rem, 3.5vw, 3.5rem);
}
.hero .wrap::after {
  content: "";
  display: block;
  clear: both;
}
.hero-portrait {
  float: right;
  width: min(62vw, 36rem);
  margin-top: calc(-1 * clamp(1.5rem, 3.5vw, 3.5rem));
  margin-right: calc(-1 * var(--gutter));
  shape-outside: polygon(100% 0, 93% 7%, 78% 14%, 64% 25%, 55% 39%, 58% 53%, 47% 67%, 16% 77%, 0 87%, 0 100%, 100% 100%);
  shape-margin: 16px;
  pointer-events: none;
}
.hero-portrait img {
  width: 100%;
  min-height: 100svh;
  object-fit: cover;
  object-position: right top;
}
.hero-text {
  padding-top: clamp(0.25rem, 1vw, 0.75rem);
  padding-bottom: 3rem;
}
.hero-text h1 {
  padding-top: 0;
  margin-bottom: 0.12em;
  line-height: 0.92;
}
.hero-text .line {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1rem + 1.8vw, 2.25rem);
  line-height: 1.08;
  margin: 0 0 1.1rem;
  color: #d8d8d8;
}
.hero-text .lead {
  max-width: 46ch;
  margin-bottom: 2rem;
}
.hero-text .cta {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--paper);
  text-decoration: none;
  font-size: var(--fs-body);
  line-height: 1;
}
.hero-text .cta:hover { background: var(--paper); color: var(--black); }

@media (max-width: 768px) {
  .hero,
  .hero .wrap { min-height: 0; }
  .hero .wrap { padding-top: 0.5rem; }
  .hero-portrait {
    width: min(62vw, 36rem);
    margin-top: -1rem;
    shape-outside: polygon(100% 0, 94% 6%, 78% 13%, 65% 23%, 58% 36%, 60% 49%, 49% 63%, 20% 73%, 0 83%, 0 100%, 100% 100%);
    shape-margin: 16px;
  }
  .hero-portrait img {
    height: 31rem;
    min-height: 0;
    object-fit: cover;
    object-position: right top;
  }
  .hero-text { padding-top: 0; }
  .hero-text h1 { line-height: 0.88; }
  .hero-title-separator { display: none; }
  .hero-title-role { color: var(--muted); }
}

/* Keep the portrait at its original desktop starting height now that it
   precedes the heading in the document flow. */
@media (min-width: 1024px) {
  .hero-portrait {
    margin-top: calc(var(--fs-h1) + var(--fs-h1) - 0.18rem - clamp(1.5rem, 3.5vw, 3.5rem));
  }
}

@media (max-width: 390px) {
  .hero-portrait {
    shape-outside: polygon(100% 0, 94% 7%, 79% 14%, 67% 25%, 61% 38%, 63% 50%, 52% 64%, 22% 75%, 2% 85%, 0 100%, 100% 100%);
  }
  .hero-text h1 { font-size: clamp(2.05rem, 10.2vw, 2.5rem); }
  .hero-text .line { font-size: clamp(1.2rem, 6.2vw, 1.55rem); }
  .hero-text .lead { font-size: 1rem; line-height: 1.45; }
}

@media (max-width: 360px) {
  .hero-portrait {
    shape-outside: polygon(100% 0, 95% 7%, 81% 14%, 69% 25%, 63% 38%, 65% 50%, 54% 64%, 24% 75%, 3% 85%, 0 100%, 100% 100%);
  }
}