/* Japanese type overrides. Linked only from /ja/ pages, after guides.css.
 *
 * Same lesson the app learned in mobile/constants/theme.js (`scriptTextStyle`):
 * Fraunces and Inter carry no CJK glyphs, so Japanese falls back to a system
 * face and inherits Latin-tuned metrics that are wrong for it. Negative
 * tracking closes up already-dense glyphs, Latin line-height crowds them
 * vertically, and italic is not a thing Japanese typography does.
 */

body,
.nav-logo,
.guide-card h2,
.article-dek,
.related-card .title {
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic',
    'Noto Sans JP', Meiryo, -apple-system, sans-serif;
}

/* Fraunces is the editorial voice on headings; Mincho is its Japanese
   counterpart, so headings stay visually distinct from body copy. */
h1, h2, h3,
.guides-hero h1,
.article-head h1 {
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif JP',
    serif;
  letter-spacing: normal;
}

/* Kill every Latin-tuned negative tracking. Tighter than normal is actively
   harmful on kana/kanji, which are already full-width. */
body, h1, h2, h3, p,
.guides-hero h1,
.article-head h1,
.guide-card h2,
.related-card .title {
  letter-spacing: normal;
}

/* Japanese needs more leading than Latin at the same size, not less. */
.article-body { line-height: 2; }
.article-body li { line-height: 1.95; }
.article-head h1 { line-height: 1.45; }
.guides-hero h1 { line-height: 1.5; }
.guide-card h2 { line-height: 1.6; }

/* No italic in Japanese typography — synthesised obliques just skew the
   fallback face. Emphasis carries as weight instead. */
em, i, .guides-hero h1 em {
  font-style: normal;
  font-weight: 600;
}

/* Break lines the way Japanese expects: never mid-word for Latin runs, and
   honour kinsoku (no leading 。、) for the Japanese runs. */
.article-body, .article-head, .guide-card, .related-card {
  line-break: strict;
  overflow-wrap: break-word;
}