/* ============================================================
   FolioSort — Japanese typography layer
   ============================================================

   Loaded LAST in <head> on /ja/ pages only, so it wins over both
   the inline <style> of the v6 homepage and css/foliosort-v2.css.

   Why this file exists at all: Outfit, DM Sans and JetBrains Mono are
   all shipped as `-latin` subsets (assets/fonts/*-latin-*.woff2). They
   contain no kana and no kanji, so every Japanese character silently
   falls through to the next family in the stack. That stack ended at
   `system-ui, sans-serif`, which resolves to a Japanese face only when
   the *operating system* is set to Japanese — a Japanese reader on an
   English-locale Windows machine would land on the generic sans-serif,
   i.e. MS PGothic. The stacks below name the real faces instead.

   The Latin faces are kept in front on purpose: FolioSort, macOS, EXIF,
   GPS and the version numbers still render in Outfit/DM Sans, and only
   the Japanese runs fall through to the CJK face. That mixed rendering
   is normal and expected on Japanese sites.
   ============================================================ */

:root {
  /* Hiragino: macOS. Yu Gothic UI: Windows 8.1+. Meiryo: older Windows.
     Noto Sans JP: Linux and anyone who has it installed. MS PGothic is
     deliberately absent — it is the fallback we are here to avoid. */
  --ja-sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI',
             'Yu Gothic', Meiryo, 'Noto Sans JP', sans-serif;
  --ja-mono: 'HiraginoSans-W3', 'Yu Gothic UI', Meiryo, 'Noto Sans JP', monospace;

  --display: 'Outfit', var(--ja-sans);
  --body: 'DM Sans', var(--ja-sans);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, var(--ja-mono);
}

/* ── Headings ────────────────────────────────────────────────
   The Latin design sets `letter-spacing: -.015em; line-height: 1.12`.
   Both are wrong here. Kanji and kana are full-width squares that
   already sit edge to edge, so negative tracking makes them touch,
   and 1.12 leaves no room for the tall/dense glyphs. */
h1, h2, h3, h4, h5,
.hero h1, .hero h2 {
  letter-spacing: normal;
  line-height: 1.4;
}

/* Display-scale headings can run tighter than body copy, but not as
   tight as the Latin original. */
h1, .hero h1 { line-height: 1.3; }

/* ── Body copy ───────────────────────────────────────────────
   Japanese needs more leading than Latin at the same size: the glyphs
   fill their em box completely, so lines read as denser blocks. */
body {
  font-family: var(--body);
  line-height: 1.85;
}

p, li, dd, figcaption, blockquote {
  line-height: 1.9;
}

/* ── Line breaking ───────────────────────────────────────────
   Japanese has no inter-word spaces; browsers may break between almost
   any two characters, which is correct. What is *not* automatic is
   禁則処理 — the rule that small kana (っゃゅょ), long vowel marks and
   closing punctuation must never begin a line, and opening brackets
   must never end one. `line-break: strict` turns that on.

   `overflow-wrap: anywhere` is deliberately NOT used: it would let the
   browser split Latin product names like "FolioSort" mid-word. */
body, p, li, h1, h2, h3, h4, h5, td, th, dd, dt, figcaption, blockquote {
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
}

/* ── Eyebrow / label text ────────────────────────────────────
   These labels carry .06em–.16em tracking plus uppercase. Uppercase is
   a no-op on kana and kanji, but tracking that wide pulls a Japanese
   label apart into a row of disconnected characters — full-width glyphs
   already carry their own side bearings, so the extra space reads as a
   gap between words that aren't there.

   The list is explicit rather than a blanket rule because a handful of
   these labels are Latin by definition and still want the wide setting:
   .up__tier and .pr-card__tier ("PRO" / "ELITE") and .how__num ("STEP 01").
   Those are deliberately absent below.

   .act__n IS in the list: it reads "Act 01 — Organize" in English but
   "第1幕 — 整理" in Japanese, so it is mostly full-width here. */
.eyebrow, .kicker, .act__n, .hero__eyebrow, .hero--feature .hero__eyebrow, .hero__badge,
.glance__eyebrow, .glance__card th, .mess__label, .sim__bar-title, .sim__pane-label,
.demo__col-label, .up__eyebrow, .up__badge, .foot h4, .fmt__group h3,
.tri__tag, .tag, .pill, .badge, .pcard__badge, .pcard__for,
.pr-badge, .pr-promo, .pr-table .grp td, .pr-anchor__item .who,
.tldr__facts dt, .rail span, .act__tag, .feat .new, .tools__tab .new,
.slider-mock label, .ps-panel__label, .aud .mono-tag, .says__q figcaption, .vfy__by {
  letter-spacing: .04em;
}

/* ── Italics ─────────────────────────────────────────────────
   There is no italic cut of any Japanese face. Browsers synthesise one
   by shearing the glyphs, which looks like a rendering fault rather
   than emphasis. `<i>` is left alone because it is used for icons. */
em {
  font-style: normal;
  font-weight: 600;
}

/* ── Numerals and units ──────────────────────────────────────
   Prices, version numbers and file counts stay in the Latin face so
   they keep proportional (not full-width) digits. */
.price, .pcard__price, .num, time, .version {
  font-family: 'DM Sans', var(--ja-sans);
  font-feature-settings: 'tnum' 1;
}

/* ── `ch`-based measures ─────────────────────────────────────
   `ch` is the advance width of the digit "0" — about half a full-width
   Japanese glyph — so any measure set in `ch` is roughly half as wide as
   intended once the text is Japanese. `em` is the right unit here: one em
   is exactly one full-width glyph. (The /ja/upgrade page carries its own
   copy of this correction for .up h1 / .up__sub, which live in that page's
   inline <style> and are not reachable from here.) */
.act__lede { max-width: 38em; }

/* ── Buttons ─────────────────────────────────────────────────
   Japanese CTA labels are physically wider than their English source
   ("無料でダウンロード" vs "Download Free"), and the buttons were sized
   for the shorter string. Allow them to wrap rather than overflow. */
.btn, .btn--lg, .btn--sub {
  letter-spacing: normal;
  white-space: normal;
  text-align: center;
}
