/* Overrides for the Chinese, Japanese and Korean pages (loaded only by those). The shared
   stylesheet is tuned for Latin text; these adjust what CJK text needs different. */

/* Poppins for Latin text, then system fonts: Poppins and Caveat have no CJK glyphs. */
html[lang="zh-CN"] {
  --font-sans: "Poppins", system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
}
html[lang="ja"] {
  --font-sans: "Poppins", system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
}
html[lang="ko"] {
  --font-sans: "Poppins", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", sans-serif;
}
/* The handwriting face only exists for Latin letters, so use the sans for the script spots. */
html[lang="zh-CN"], html[lang="ja"], html[lang="ko"] { --font-script: var(--font-sans); }

body { line-height: 1.75; }

/* No real italic in CJK fonts (the browser would slant the glyphs): emphasise with weight and
   colour instead. The brand name in the logo and hero stays Latin, so it keeps its italic. */
.page-hero h1 em, .section-title em { font-style: normal; font-weight: 700; }

/* Wide letter-spacing and capitals are a Latin device. */
.eyebrow, .motto, .quote-sub, .price span { letter-spacing: .08em; text-transform: none; }
h1, h2, h3 { letter-spacing: 0; line-height: 1.3; }
.hero h1 { line-height: 1.15; }

/* max-width in ch is the width of a "0", about half a CJK character. */
.lead { max-width: 14em; line-height: 1.6; }
.page-hero .lead { max-width: 26em; }
.feature p { max-width: 16em; }
.section-intro { max-width: 36em; }
.cta-band p { max-width: 32em; }

/* Line breaking: Korean words stay whole, CJK punctuation is kept off line starts. */
html[lang="ko"] body { word-break: keep-all; }
html[lang="zh-CN"] body, html[lang="ja"] body { line-break: strict; }

/* Balanced line breaks, so a heading never ends on one stranded character. */
h1, h2, h3, .lead { text-wrap: balance; }