/* Language-specific type systems. Keep CJK glyph selection deterministic. */
:root {
  --font-latin: "Figtree", Arial, Helvetica, sans-serif;
  --font-ja: "Figtree", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", "Noto Sans JP", sans-serif;
  --font-zh-hans: "Figtree", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --font-zh-hant: "Figtree", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Source Han Sans TC", sans-serif;
  --afield-body-font: var(--font-ja);
}

html { scroll-padding-top: 87px; }

html[lang="en"] { --afield-body-font: var(--font-latin); }
html[lang="ja"] { --afield-body-font: var(--font-ja); }
html[lang="zh-Hans"] { --afield-body-font: var(--font-zh-hans); }
html[lang="zh-Hant"] { --afield-body-font: var(--font-zh-hant); }

html body,
html button,
html input,
html textarea,
html select,
html .header,
html .footer,
html .language__menu {
  font-family: var(--afield-body-font);
}

html .wordmark,
html .entry__word,
html .header__brand,
html .footer__brand {
  font-family: var(--font-latin);
}

.u-nowrap { white-space: nowrap; }

/*
 * Responsive line composition
 *
 * Headings should keep a deliberate silhouette when their container narrows,
 * while prose should avoid weak one- or two-character final lines. These are
 * shared rules so the same copy behaves consistently on the homepage and on
 * every interior page.
 */
html :where(
  h1,
  h2,
  h3,
  .audience-row__title,
  .operation-row__name,
  .support__invitation
) {
  text-wrap: balance;
}

html :where(
  h1 > span,
  h2 > span,
  h3 > span,
  .hero__line,
  .operations__title > span,
  .model-b__title > span,
  .audiences__title > span,
  .support__title > span
) {
  text-wrap: balance;
}

html :where(
  main p,
  main li,
  main dd,
  .operation-row__detail,
  .audience-row__description,
  .audience-row__details,
  .support__terms
) {
  text-wrap: pretty;
}

/* Short interface copy benefits from the stronger heading-style composer. */
html :where(
  .needs__card p,
  .operation-row__detail,
  .model-b__touchpoint p,
  .model-b__panel p,
  .audience-row__description,
  .audience-row__details > span,
  .route-hero__lede,
  .route-hero__principle,
  .section-intro > p,
  .step p,
  .fact p,
  .status__copy > p,
  .statement p,
  .about-context__body p,
  .about-contact__lead,
  .about-contact__note
) {
  text-wrap: balance;
}

html:is([lang="ja"], [lang="zh-Hans"], [lang="zh-Hant"]) :where(
  h1,
  h2,
  h3,
  p,
  li,
  dd,
  .audience-row__title,
  .audience-row__description,
  .operation-row__detail,
  .support__invitation,
  .support__terms
) {
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
}

@media (max-width: 850px) {
  html { scroll-padding-top: 72px; }

  /* CJK has a break opportunity between almost every character. On narrow
     screens balancing prevents a one- or two-character orphan at the end. */
  html:is([lang="ja"], [lang="zh-Hans"], [lang="zh-Hant"]) :where(
    main p,
    main li,
    main dd
  ) {
    text-wrap: balance;
  }
}