/* Display page title — balanced two-line editorial lockup. */
.display-page .sub-hero {
  padding-bottom: 7vw;
}

.display-page .sub-hero h1 {
  width: 100%;
  font-size: clamp(4.2rem, 10vw, 9.4rem);
  line-height: 0.94;
  letter-spacing: -0.052em;
}

.display-page .display-word,
.display-page .styling-word {
  display: block;
}

.display-page .display-word {
  color: var(--brown);
}

.display-page .styling-word {
  width: max-content;
  margin-top: 0.12em;
  margin-left: 22vw;
  color: var(--pink);
  line-height: 0.9;
}

.display-page .sub-hero h1 em {
  margin-top: 0.16em;
  margin-left: 20vw;
  line-height: 0.96;
  letter-spacing: -0.04em;
}

.display-page .sub-hero > p {
  margin-top: clamp(2rem, 4vw, 4.5rem);
}

@media (max-width: 800px) {
  .display-page .sub-hero {
    min-height: 68vh;
    padding: 24vw 6vw 12vw;
  }

  .display-page .sub-hero h1 {
    font-size: clamp(3.15rem, 15vw, 5.6rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
  }

  .display-page .styling-word {
    margin-top: 0.18em;
    margin-left: 12vw;
    line-height: .94;
  }

  .display-page .sub-hero h1 em {
    margin-top: 0.2em;
    margin-left: 11vw;
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .display-page .sub-hero > p {
    margin-top: 2.5rem;
  }
}