/* Brand in the desktop hero, original header when stacked. */
[data-hero-theme="purple"] .hero-wordmark {
  display: none;
  max-width: 100%;
  background: var(--hero-accent);
  mask: url('../assets/tastyful-wordmark.svg') center / contain no-repeat;
}

.hero-wordmark img {
  width: 100%;
  height: auto;
  display: block;
  /* Preserve the original vector's dimensions and accessible image name. */
  opacity: 0;
}

[data-hero-theme="purple"] .hero-tagline {
  margin-top: 0;
}

[data-hero-theme="purple"] .bold-copy .intro {
  margin-top: 18.2px;
}

@media (max-width: 580px) {
  [data-hero-theme="purple"] .bold-copy .intro {
    margin-top: 16.1px;
  }
}

/* Keep this boundary aligned with the hero's two-column layout. */
@media (min-width: 801px) {
  [data-hero-theme="purple"] .bold-copy {
    --hero-heading-size: clamp(60px, 6.4vw, 92px);
  }

  [data-hero-theme="purple"] .bold-copy h1 {
    font-size: var(--hero-heading-size);
  }

  [data-hero-theme="purple"] .hero-header,
  [data-hero-theme="purple"] .hero-tagline {
    display: none;
  }

  [data-hero-theme="purple"] .bold-hero {
    padding-block: 32px;
  }

  [data-hero-theme="purple"] .bold-stage {
    --phone-reference-width: clamp(260px, 22vw, 312px);
    --phone-centering-offset: 35px;
    padding: 12px 0;
    justify-content: flex-start;
  }

  [data-hero-theme="purple"] .bold-stage > .showcase-phone {
    /* Preserve the old phone's left edge while growing toward the right margin. */
    margin-left: calc((100% - var(--phone-reference-width) + var(--phone-centering-offset)) / 2);
    width: min(380px, calc((100% + var(--phone-reference-width) - var(--phone-centering-offset)) / 2));
  }

  [data-hero-theme="purple"] .hero-wordmark {
    display: block;
    /* Preserve the 231px logo / 92px headline proportion as both shrink. */
    width: calc(var(--hero-heading-size) * 231 / 92);
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  [data-hero-theme="purple"] .bold-stage {
    --phone-centering-offset: 20px;
  }
}