/*
 * shared/ja.css — Japanese typography.
 *
 * Linked with a cache-bust query on every /ja/*.html page, e.g.
 * shared/ja.css?v=20260924b (bump on change, see CLAUDE.md "Deploying").
 * Loaded after css/tokens.css, shared/tokens-consumer.css and
 * shared/tokens-practitioner.css so its `html[lang="ja"]` overrides win.
 *
 * Goal: Latin glyphs keep the brand fonts (DM Sans, DM Serif Text, Fraunces,
 * Inter Tight, Poppins); Japanese glyphs fall through to Noto Sans JP /
 * Noto Serif JP, which none of those Latin fonts cover. Every /ja page
 * already loads Noto Sans JP + Noto Serif JP from Google Fonts (see
 * docs/tasks/2026-09-24-japanese-translation.md).
 *
 * Design rules honoured: no emoji, sentence case, no drop shadows, one
 * easing curve — this file only touches font stacks and line-breaking.
 */

html[lang="ja"] {
  /* Kundali homepage / account.html track (css/tokens.css, css/home.css) */
  --font-sans: "DM Sans", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "DM Sans", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "DM Serif Text", "Noto Serif JP", Georgia, serif;

  /* Consumer track (shared/tokens-consumer.css: app.html, faq, pricing, ...) */
  --font-body: "Inter Tight", "Noto Sans JP", sans-serif;

  /* Practitioner track (shared/tokens-practitioner.css) overrides both
     display and body to Poppins, and adds a mono fallback. Noto Sans JP
     covers Japanese glyphs for all three — the practitioner track has no
     serif face. */
  --font-mono: "JetBrains Mono", "Noto Sans JP", monospace;
}

/* tokens-consumer.css and tokens-practitioner.css both set --font-display;
   the practitioner one is Poppins (sans), so it needs a sans JP fallback,
   not the serif one above. This selector has the same specificity as the
   html[lang="ja"] block above and comes after it, so on a page carrying
   .ds-practitioner (or similar practitioner-track marker) it wins for
   --font-display while the Kundali/consumer serif rule above stays the
   default. Kept scoped to avoid overriding the Kundali DM Serif Text case. */
html[lang="ja"][data-track="practitioner"],
html[lang="ja"] .ds-practitioner {
  --font-display: "Poppins", "Noto Sans JP", sans-serif;
}

/* Line-breaking: Japanese has no spaces between words, so the browser's
   default line-break can split mid-phrase awkwardly. `strict` avoids
   breaking after opening brackets / before closing punctuation; long
   unbroken strings (URLs, English product names) still wrap via
   overflow-wrap instead of overflowing their container. */
html[lang="ja"] body {
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Body copy reads more comfortably with a touch more line-height in
   Japanese. Headings keep their existing (tighter) line-height. */
html[lang="ja"] p,
html[lang="ja"] li {
  line-height: 1.8;
}

/* Negative letter-spacing (tuned for Latin display faces) compresses
   Japanese glyphs unpleasantly — remove it for :lang(ja) headings and
   labels site-wide. */
:lang(ja) {
  letter-spacing: normal;
}

/* Display headings read visibly larger in Japanese than in English at the
 * same declared font-size: Noto Sans JP / Noto Serif JP glyphs are full
 * em-square kanji with no ascender/descender, so they carry more ink than
 * mixed-case Latin text at an identical clamp() value (confirmed 2026-09-24
 * by side-by-side screenshot of / vs /ja/ at 1440x900 and 390x844 — the
 * hero heading and section h2s were the visibly oversized elements; body
 * copy, numbered list items, chat-example bubbles, nav, buttons and the
 * numeric price panel were not, so those are left alone). Each rule below
 * restates its English counterpart's clamp() from css/home.css scaled to
 * ~90%, which is the typical correction for CJK-vs-Latin visual parity.
 * If css/home.css changes one of these clamp() ranges, rescale the match
 * here in the same session — this file does not derive from it.
 */
html[lang="ja"] .ds-hero h1 {
  font-size: clamp(40px, 5.4vw, 76px);
}

/* .ds-hero--split (the Kundali homepage hero, index.html) still wrapped to
 * 7-8 lines at 1440px against 5 in English even after the general 90%
 * scale-down above, because this variant's h1 is unconstrained-width
 * (max-width: none) inside a 1fr/1fr grid column rather than centred with
 * a ch-based max-width. Scaled down further (72px -> 64px) and the text
 * column widened slightly against the photo column so it wraps to ~5 lines,
 * matching English (confirmed 2026-09-24 at 1440x900 and 390x844). */
html[lang="ja"] .ds-hero--split .ds-wrap {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}

html[lang="ja"] .ds-hero--split h1 {
  font-size: clamp(40px, 4.6vw, 64px);
}

/* The desktop Japanese split ratio must yield to the shared single-column
   mobile hero. This file loads after home.css, so the responsive override
   needs to be restated here at the same breakpoint. */
@media (max-width: 980px) {
  html[lang="ja"] .ds-hero--split .ds-wrap {
    grid-template-columns: 1fr;
  }
}

/* Japanese header labels are wider than their English equivalents. Keep the
   wordmark intact and recover the few pixels needed at phone widths without
   changing the English header. */
@media (max-width: 640px) {
  html[lang="ja"] .ds-head .ds-wrap {
    gap: 8px;
  }

  html[lang="ja"] .ds-head .ds-wordmark {
    flex-shrink: 0;
    white-space: nowrap;
  }

  html[lang="ja"] .ds-head .ds-btn {
    padding-right: 10px;
    padding-left: 10px;
  }

  html[lang="ja"] .ds-menu summary {
    white-space: nowrap;
  }
}

@media (max-width: 374px) {
  html[lang="ja"] .ds-head .ds-wrap {
    gap: 6px;
  }

  html[lang="ja"] .ds-head .ds-wordmark {
    font-size: 18px;
  }

  html[lang="ja"] .ds-head .ds-btn {
    padding-right: 7px;
    padding-left: 7px;
    font-size: 12px;
  }

  html[lang="ja"] .ds-menu summary {
    font-size: 13px;
  }
}

html[lang="ja"] .ds-sec__head h2 {
  font-size: clamp(31px, 3.4vw, 47px);
}

html[lang="ja"] .ds-founder h2 {
  font-size: clamp(27px, 2.7vw, 38px);
}

html[lang="ja"] .ds-stage__t {
  font-size: clamp(22px, 2vw, 27px);
}

html[lang="ja"] .journey-body h2 {
  font-size: clamp(24px, 2.7vw, 29px);
}

html[lang="ja"] .ds-account h1 {
  font-size: clamp(27px, 3.1vw, 36px);
}

html[lang="ja"] .mk-panel h2 {
  font-size: 22px;
}