.hpv-chapter h2 {
  margin: 0;
  font: inherit;
}

.hpv-intro-boundary {
  display: contents;
}

.hpv-boards > .about-image001 {
  aspect-ratio: 830 / 452;
}

.hpv-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #eadce0;
  object-fit: contain;
}

@media (min-width: 761px) {
  body[data-project="hpv-animation"] {
    --footer-gap: 112;
  }

  .hpv-page {
    padding-top: calc(100vw * 1160 / 2880);
  }

  .hpv-chapters {
    margin-inline: calc(100vw * 100 / 1440);
  }

  .hpv-chapter {
    display: grid;
    grid-template-columns: calc(100vw * 387 / 1440) minmax(0, 1fr);
  }

  .hpv-intro-boundary {
    position: absolute;
    display: block;
    left: calc(100vw * 97.5 / 1440);
    top: calc(100vw * var(--start) / 1440);
    width: calc(100vw * 330 / 1440);
    height: calc(100vw * (var(--end) - var(--start)) / 1440);
    padding-bottom: calc(100vw * 32 / 1440);
  }

  .hpv-page .hpv-intro-boundary .bloom-piece {
    position: relative;
    inset: auto;
  }

  .hpv-chapter h2 {
    position: relative;
    align-self: start;
    width: calc(100vw * var(--w) / 1440);
    height: calc(100vw * 30 / 1440);
    color: transparent;
  }

  .hpv-chapter h2::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    mask: var(--bloom-glyph) center / 100% 100% no-repeat;
    pointer-events: none;
  }

  .hpv-boards {
    gap: calc(100vw * 74 / 2880) calc(100vw * 46 / 2880);
  }

  .hpv-illustration {
    margin-top: calc(100vw * 212 / 2880);
  }

  .hpv-outcome {
    margin-top: calc(100vw * 76 / 2880);
  }
}

/* 007: follow the scroll, pause in the viewport, then leave with the section. */
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .hpv-page .hpv-intro-boundary .hpv-motion007 {
    position: sticky;
    top: min(20svh, calc(100vw * var(--start) / 1440));
  }

  .hpv-chapter .hpv-motion007 {
    position: sticky;
    top: min(calc(50svh - 0.65em), calc(100vw * 580 / 1440));
    margin-bottom: calc(100vw * 32 / 1440);
  }
}

@media (max-width: 760px) {
  .hpv-chapters {
    margin-inline: var(--gutter);
  }

  .hpv-chapter {
    margin-top: 36px;
  }

  .hpv-chapter h2 {
    margin-bottom: 12px;
  }
}