.hero {
  /* Match the black background embedded in the portrait. */
  --black: #000000;
  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: var(--brand-line);
}
.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(--brand-line); }
}

/* 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%);
  }
}

.hero a:focus-visible { outline-color: var(--brand-white); }

/* Desktop composition: preserve the complete portrait, including the shirt button. */
@media (min-width: 1024px) {
  header.site { background: #000000; }
  header.site .wrap { height: 4rem; }
  section.hero,
  section.hero .wrap { min-height: 0; }
  section.hero .wrap {
    width: calc(100% - 2 * var(--gutter));
    padding-top: 0;
  }
  section.hero .hero-text {
    position: relative;
    /* The desktop header occupies 4rem; the hero fills the remaining viewport. */
    min-height: calc(100svh - 4rem);
    padding-top: clamp(1rem, 3svh, 2rem);
    padding-bottom: clamp(1.5rem, 4svh, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
  }
  section.hero .hero-portrait {
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(-1 * var(--gutter));
    width: 44%;
    margin: 0;
    float: none;
    shape-outside: none;
  }
  section.hero .hero-portrait picture { height: 100%; }
  section.hero .hero-portrait img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: right bottom;
  }
  section.hero .hero-text h1,
  section.hero .hero-text .line,
  section.hero .hero-text .lead { width: 60%; }
  section.hero .hero-text h1 {
    font-size: clamp(3rem, min(5.5vw, 9svh), 6.5rem);
    line-height: 1.02;
    margin-bottom: clamp(1rem, 2.5svh, 2rem);
  }
  section.hero .hero-title-separator { display: none; }
  section.hero .hero-title-role {
    display: block;
    margin-top: 0.75rem;
    font-family: var(--sans);
    font-size: clamp(1.3rem, min(2.1vw, 3.5svh), 2.5rem);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0;
  }
  section.hero .hero-text .line {
    font-size: clamp(1.35rem, 1.6vw, 1.8rem);
    line-height: 1.3;
    margin-bottom: clamp(0.75rem, 2svh, 1.5rem);
  }
  section.hero .hero-text .lead {
    /* Widen the copy while keeping it clear of the complete portrait. */
    width: min(68%, 88ch, calc(100% - min(44%, 45svh) + var(--gutter) - 2rem));
    max-width: none;
    margin-bottom: clamp(1rem, 2.5svh, 2rem);
  }
}