/* Reuse the two hairlines from Words × Journey × Web, without adopting
   that section's heading size or changing View Site's existing palette. */
body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__reverse-film-heading-copy h2 > .service-hero__reverse-film-formula {
  display: flex;
  align-items: center;
  gap: var(--view-site-formula-gap);
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

body.service-website-page .service-hero__reverse-film-formula i::before,
body.service-website-page .service-hero__reverse-film-formula i::after {
  background: rgba(255, 255, 255, 0.78);
}

/* Keep the longer caption inside the copy column, with room on its right. */
body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__reverse-film-heading-copy {
  --view-site-formula-gap: clamp(8px, 0.8vw, 12px);
  --view-site-formula-mark: clamp(46px, 4.2vw, 64px);
  box-sizing: border-box;
  max-width: 100%;
  padding-inline-end: clamp(16px, 1.25vw, 20px);
}

body.service-website-page .service-hero__reverse-film-formula i {
  width: var(--view-site-formula-mark);
}

body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__reverse-film-heading-copy .service-hero__reverse-film-heading-subline {
  /* Seven full-width glyphs + two marks + four gaps above;
     fourteen full-width glyphs with 0.05em tracking below. */
  font-size: calc((7.56em + 2 * var(--view-site-formula-mark) + 4 * var(--view-site-formula-gap)) / 14.7);
  margin-top: clamp(8px, 0.65vw, 12px);
  letter-spacing: 0.05em;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Move the desktop heading and description together, keeping the wordmark in place. */
@media (min-width: 1024px) {
  body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__reverse-film-heading-copy {
    --view-site-copy-offset: clamp(24px, 3vw, 48px);
    position: relative;
    left: calc(-1 * var(--view-site-copy-offset));
    width: calc(100% + var(--view-site-copy-offset));
    max-width: none;
  }
}

@media (max-width: 820px) {
  body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__reverse-film-heading-copy {
    --view-site-formula-mark: 34px;
  }
}

@media (max-width: 360px) {
  body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__reverse-film-heading-copy {
    --view-site-formula-gap: 4px;
    --view-site-formula-mark: 25px;
  }

  body.service-website-page .service-hero__reverse-film-formula i::before,
  body.service-website-page .service-hero__reverse-film-formula i::after {
    width: 20px;
  }
}