/* Keep the English typography hierarchy; replace only the Japanese font and wrapping. */
html:lang(ja) {
  --font-japanese: 'Noto Sans JP', sans-serif;
  --font-family-primary: var(--font-japanese);
  --font-family-heading: var(--font-japanese);
  --font-family-serif: var(--font-japanese);
}

/* Component rules also set keep-all, so an inherited body rule is insufficient. */
html:lang(ja) body,
html:lang(ja) body * {
  word-break: normal !important;
}

/* The Voice demo has its own font token and a literal serif modal heading. */
html:lang(ja) .voice-demo {
  --font: var(--font-japanese);
}

html:lang(ja) .voice-demo .demo-modal h2 {
  font-family: var(--font-japanese);
}