/* Noto Sans SC title subset; SIL OFL 1.1, bundled with copyright and license. */
@font-face {
  font-family: "Noto Sans SC Titles";
  src: url("../fonts/noto-sans-sc-titles/noto-sans-sc-titles.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
:root {
  --font-page-title: "Noto Sans SC Titles", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --fs-page-title: clamp(32px, 3.4vw, 44px);
  --weight-page-title: 500;
  --leading-page-title: 1.3;
}
/* Shared title family; homepage and About retain their requested type scales.
   Specificity keeps legacy page styles from overriding these shared tokens.
   Animation, transform, opacity, colour and section layout stay page-owned. */
html[lang] body[data-page] .page-wrapper h1,
html[lang] body[data-page] .page-wrapper .hero-slides h2 {
  font-family: var(--font-page-title);
  font-size: var(--fs-page-title);
  font-weight: var(--weight-page-title);
  line-height: var(--leading-page-title);
  letter-spacing: -.015em;
  font-style: normal;
  font-synthesis: none;
  text-wrap: balance;
  overflow-wrap: break-word;
}
/* Homepage is intentionally more prominent than inner-page titles. */
body[data-page="index"] {
  --fs-page-title: clamp(42px, 4.2vw, 56px);
  --leading-page-title: 1.2;
}
/* English homepage titles run longer; keep them a step below the Chinese scale. */
html[lang="en"] body[data-page="index"] {
  --fs-page-title: clamp(30px, 2.9vw, 40px);
  --leading-page-title: 1.18;
  --font-page-title: var(--font-sans);
}
/* The Chinese homepage already downloads this same upstream font for body text.
   Reuse its variable subset at weight 500 instead of downloading a second font. */
html[lang="zh-CN"] body[data-page="index"] {
  --font-page-title: "Noto Sans SC Home", "PingFang SC", "Microsoft YaHei", sans-serif;
}
/* Restore the original About size hierarchy while keeping the chosen typeface. */
body[data-page="about"] {
  --fs-page-title: clamp(22px, 2vw, 32px);
  --leading-page-title: 1.45;
}
.about-masthead__lead {
  font-family: var(--font-page-title);
  font-weight: 500;
}
@media (max-width: 575px) {
  :root { --fs-page-title: clamp(30px, 8vw, 32px); }
  body[data-page="index"] { --fs-page-title: clamp(34px, 9.2vw, 38px); }
  html[lang="en"] body[data-page="index"] { --fs-page-title: clamp(26px, 7vw, 30px); }
  body[data-page="about"] { --fs-page-title: 22px; --leading-page-title: 1.55; }
}
/* Second homepage slide is a longer slogan; keep it well below the lead title. */
html[lang] body[data-page="index"] .page-wrapper .hero-slides h2.hero-title--long {
  font-size: clamp(32px, 3.15vw, 44px);
  line-height: 1.22;
  letter-spacing: -.015em;
}
@media (max-width: 575px) {
  html[lang] body[data-page="index"] .page-wrapper .hero-slides h2.hero-title--long {
    font-size: 32px;
  }
}