/* Shared first-screen title geometry for the four primary site routes. */
:root {
  --site-hero-title-family: var(
    --parlo-display,
    "Syne Local",
    "PingFang SC",
    "Microsoft YaHei UI",
    "Microsoft YaHei",
    sans-serif
  );
  --site-hero-title-size: clamp(52px, 4.15vw, 60px);
  --site-hero-title-weight: 500;
  --site-hero-title-leading: 1.08;
  --site-hero-title-tracking: -0.035em;
}

:is(
  body[data-page="home"] #hero-title.hero-title-zh,
  body[data-page="products"] #hero-title.product-hero-title-zh,
  body[data-page="company"] #company-title.display-cn,
  body[data-page="careers"] #careers-title.display-cn
) {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  color: var(--parlo-white, #f5f5f2) !important;
  font-family: var(--site-hero-title-family) !important;
  font-size: var(--site-hero-title-size) !important;
  font-style: normal !important;
  font-weight: var(--site-hero-title-weight) !important;
  line-height: var(--site-hero-title-leading) !important;
  letter-spacing: var(--site-hero-title-tracking) !important;
  text-align: center !important;
  text-wrap: balance;
  white-space: normal !important;
}

:is(
  body[data-page="home"] #hero-title.hero-title-zh,
  body[data-page="products"] #hero-title.product-hero-title-zh
) .title-line {
  min-height: calc(1em * var(--site-hero-title-leading)) !important;
  margin-top: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
}

/* Inner-page heroes already center their content inside a full viewport.
   Remove the inherited outer block padding so the copy is not centered below it. */
body:is([data-page="company"], [data-page="careers"]) .page-main > .hero {
  padding-block: 0 !important;
}

@media (max-width: 559px) {
  :root {
    --site-hero-title-size: 32px;
    --site-hero-title-leading: 1.12;
    --site-hero-title-tracking: -0.03em;
  }
}