/* ================================================================
   locale-ja.css — Japanese-only typographic overrides.
   Loaded LAST on every /jp/ page, so it wins the cascade by source
   order at equal specificity (no !important needed). Japanese needs
   different type treatment than the Latin/Han default in base.css.
   ================================================================ */


/* === 1 · No italics on Japanese ===============================
   Slanted kana/kanji is poor typography. Emphasis keeps the accent
   COLOUR its component already sets — we only drop the slant.
   Romanised pinyin (.vocab-pinyin, .medallion-pinyin) and the French
   resource intro are NOT Japanese, so they keep their italic. */
.hero h1 em,
.page-header h1 em,
.cta-final h2 em,
.end-cta h2 em,
.about-end-cta h2 em,
.features-summary,
.post-outro,
.story-postcard blockquote,
.post-nav-disabled {
  font-style: normal;
}


/* === 2 · Line metrics tuned for CJK ===========================
   base.css sets headings to line-height 1.05 + negative tracking,
   which is built for Latin display type. Kanji are denser and taller,
   so they clip and cram at those values — loosen for Japanese. */
h1, h2, h3, h4 {
  line-height: 1.35;
  letter-spacing: 0.01em;
}

/* Body copy: a touch more leading aids CJK readability (1.6 → 1.8). */
body {
  line-height: 1.8;
}


/* === 3 · Display headings sized for Japanese ==================
   base.css h1 maxes at 5rem / weight 900 and h2 at 3rem — built for
   Latin display (Fraunces). Dense kanji at that size/weight read as a
   heavy black wall (the hero felt oversized). Japanese gothic wants a
   smaller, lighter setting to breathe. */
h1 {
  font-size: clamp(1.9rem, 3.0vw + 1rem, 3.3rem);
  font-weight: 700;
}
h2 {
  font-size: clamp(1.5rem, 1.8vw + 0.8rem, 2.3rem);
  font-weight: 700;
}
.hero h1 { letter-spacing: 0.02em; }
/* Banner figures: trim from 3.4rem/900 so the longest value (マンツーマン)
   fits on one line at this gothic, rather than being forced to wrap. */
.longterm-stat .num { font-size: clamp(1.8rem, 1.6vw + 1rem, 2.6rem); font-weight: 700; }


/* === 4 · Japanese line-breaking (the basic miss) ==============
   Latin wraps on the spaces between words. Japanese has NO spaces, so the
   browser breaks a line at ANY character — mid-word, inside katakana, right
   before 。、 — unless told the Japanese rules. That's why headings/CTAs
   were snapping at ugly points.
     · line-break: strict   → proper 禁則処理 (punctuation/small kana never
                               stranded at the start or end of a line)
     · word-break: auto-phrase → break at natural phrase (文節) boundaries
                               instead of arbitrary characters (Chromium)
     · text-wrap: balance   → even out multi-line headings, remove orphans */
/* Body prose: kinsoku rules + may break between characters (correct for
   long Japanese paragraphs — phrase-level control is only for headings). */
body { line-break: strict; overflow-wrap: anywhere; }

/* Headings + CTAs: break ONLY at the <wbr> points placed at phrase (文節)
   boundaries in the markup. keep-all stops the browser snapping mid-phrase;
   overflow-wrap is the narrow-screen safety net so nothing ever overflows. */
h1, h2,
.big-btn, .header-cta,
.nav-links .btn-primary, .ask-cta {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* Stat / figure text: a katakana loan-word like マンツーマン must stay whole —
   .num etc. aren't headings, so they were still snapping mid-word. keep-all
   keeps the word together (and breaks at the spaces/「/」 where present). */
.longterm-stat .num,
.hero-stats div strong,
.intro-fact .value,
.intro-fact small,
.explore-fact strong,
.explore-fact span {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* Emphasis highlight (apricot bar behind <em>) repeats per line, not stretched. */
em { -webkit-box-decoration-break: clone; box-decoration-break: clone; }