/* ═══════════════════════════════════════════════════════
    Japanese pages (/ja/...): loaded after each page's own styles.
    The site's fonts carry Latin letters only, so Japanese text falls back to the
    system's Japanese fonts, named here so Windows doesn't pick a Chinese one.
    ═══════════════════════════════════════════════════════ */

:root:lang(ja) {
    --ja-fonts: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo",
        "Noto Sans JP", sans-serif;
    /* The pages' own font stacks with the Japanese fonts in place of the generic ones. */
    --font-title: "Inter", "Inter Fallback", -apple-system, "Segoe UI", var(--ja-fonts);
    --font-display: "Archivo", "Arial Black", var(--ja-fonts);
}

:root:lang(ja):has(.sf2-stage) {
    --font-body: "Inter Tight", -apple-system, "Segoe UI", var(--ja-fonts);
}

:root:lang(ja):has(.spu-stage) {
    /* simpleSPU's own Rubik fonts, with the Japanese fonts behind them. */
    --font-display: "Rubik Mono One", "Arial Black", var(--ja-fonts);
    --font-body: "Rubik", -apple-system, "Segoe UI", var(--ja-fonts);
}

:root:lang(ja):has(.tape-stage) {
    --font-body: "Inter", "Inter Fallback", -apple-system, "Segoe UI", var(--ja-fonts);
}

/* The guides set everything in Archivo (sheet.css): keep it for the Latin letters. */
:root:lang(ja):has(.guide-page) {
    --font-title: "Archivo", "Archivo Fallback", -apple-system, "Segoe UI", var(--ja-fonts);
    --font-body: "Archivo", "Archivo Fallback", -apple-system, "Segoe UI", var(--ja-fonts);
}

/* Japanese doesn't break at spaces: keep line breaks off small kana and closing
   punctuation, and let headings break between phrases where the browser can. */
:lang(ja) body {
    line-break: strict;
    overflow-wrap: anywhere;
}

/* In the guides' tables, "anywhere" lets the columns squeeze until English names like
   GeneralUser split mid-word. Japanese still breaks between characters without it. */
:lang(ja) .legal-table-wrap :is(th, td) {
    overflow-wrap: normal;
}

:lang(ja) h1,
:lang(ja) h2,
:lang(ja) h3,
:lang(ja) .product-hero__title {
    word-break: auto-phrase;
    /* The tight tracking suits Latin headings but squeezes kana and kanji together. */
    letter-spacing: 0;
}

/* simpleSPU's headings use Rubik Mono One, which has one weight, so the Japanese letters
   fall back to a thin system font. Ask for bold, which only the Japanese font has: with
   font-synthesis off, the browser doesn't fake a bold Rubik for the Latin letters. */
:root:lang(ja):has(.spu-stage) :is(h1, h2) {
    font-weight: 700;
    font-synthesis: none;
}

/* simpleSPU's header button names its own font stack: put the Japanese fonts behind Rubik. */
:lang(ja) .site-header[data-cta="retro"] .nav-cta {
    font-family: "Rubik", -apple-system, "Segoe UI", var(--ja-fonts);
}

/* ダウンロード is wider than Download: a little less padding keeps the header on a 360px phone. */
@media (max-width: 380px) {
    :lang(ja) .site-header[data-cta="retro"] .nav-cta {
        padding-inline: 0.6rem;
    }
}