/* Universal type scale. English and Chinese use these four sizes only.
   The rules live in a cascade layer, so these !important sizes win over
   every unlayered stylesheet, including Chinese-only overrides.

   Heading      36px   page titles, section titles, hero headlines, key figures
   Sub-heading  22px   card titles and lesser headings
   Body         16px   paragraphs, lists, navigation, buttons, form fields
   Extra-info   14px   kickers, captions, labels, meta
*/
@layer type {
  :root {
    --type-heading: 36px;
    --type-subheading: 22px;
    --type-body: 16px;
    --type-extra: 14px;
  }

  /* Body is the default for every element, in both languages. */
  body,
  body * {
    font-size: var(--type-body) !important;
  }

  /* Sub-headings */
  body h3,
  body h4,
  body h5,
  body h6,
  body h3 *,
  body h4 *,
  body h5 *,
  body h6 * {
    font-size: var(--type-subheading) !important;
  }

  /* Headings, including the big stat figures */
  body h1,
  body h2,
  body h1 *,
  body h2 *,
  body .num,
  body .num *,
  body .mk,
  body .mk * {
    font-size: var(--type-heading) !important;
  }

  /* Extra info. Class selectors outrank the element rules above. */
  body .kicker,
  body .kicker *,
  body .idx,
  body .idx *,
  body .cine-kicker,
  body .cine-kicker *,
  body .chip,
  body .chip *,
  body .cine-chip,
  body .cine-chip *,
  body .role,
  body .role *,
  body .who,
  body .who *,
  body .xp-step-status,
  body .xp-step-status *,
  body .xp-beat-kicker,
  body .xp-beat-kicker *,
  body .xp-highlight-label,
  body .xp-highlight-label *,
  body .phone-scroll-index,
  body .phone-scroll-index *,
  body .screen-kicker,
  body .screen-kicker *,
  body .screen-meta,
  body .screen-meta *,
  body .pilot-status,
  body .pilot-status *,
  body .hint,
  body .hint *,
  body .toast-text,
  body .toast-text *,
  body .page-progress-label,
  body .page-progress-label *,
  body figcaption,
  body figcaption *,
  body small,
  body small *,
  body cite,
  body cite * {
    font-size: var(--type-extra) !important;
  }

  /* Join section: the yellow label is uppercase English. Chinese needs a
     small step up so the characters match that visual size. */
  html[data-lang="zh"] #cta .cta-label,
  html[data-lang="zh"] #cta .cta-label .zh-b {
    font-size: 18px !important;
  }

  /* Icons follow the size of the text they sit beside. */
  body .bi {
    font-size: 1em !important;
  }

  body .fab-whatsapp {
    font-size: var(--type-subheading) !important;
  }
}