/* ============================================================
   FolioSort — Traditional Chinese typography layer
   ============================================================

   Loaded LAST in <head> on /zh/ 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 Han characters, so every Chinese glyph silently falls
   through to the next family in the stack. That stack ended at
   `system-ui, sans-serif`, which resolves to a Chinese face only when
   the *operating system* is set to Chinese — a Taiwanese reader on an
   English-locale Windows machine would land on the generic sans-serif.
   The stacks below name the real faces instead.

   This is deliberately NOT a copy of css/foliosort-ja.css. Two things
   differ beyond the font names:
     * the Japanese stack (Hiragino / Yu Gothic / Meiryo) contains no
       Traditional Chinese glyph forms — where the codepoints overlap
       the shapes are the Japanese variants (骨, 直, 每 all differ), so
       reusing it would render Chinese in visibly wrong forms;
     * `line-break: strict` is a Japanese rule and is absent here — see
       the line-breaking section below.

   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 Chinese runs fall through to the CJK face. That mixed rendering
   is normal and expected on Chinese sites.
   ============================================================ */

:root {
  /* PingFang TC: macOS 10.11+ and iOS. Microsoft JhengHei (微軟正黑體):
     Windows 7+ in the TW/HK SKUs and installable everywhere else. Noto
     Sans TC: Linux, Android, and anyone who has it. Heiti TC: older
     macOS. PMingLiU (新細明體) is deliberately absent — it is the old
     serif default we are here to avoid, and it is what a bare
     `sans-serif` can still fall back to on an old Windows box.

     TC rather than HK throughout: the two differ on a few hundred
     regional glyph variants and Taiwan is the larger market. HK readers
     read TW forms without difficulty; the specific HK forms are only
     "more correct" for HK, never necessary. */
  --zh-sans: 'PingFang TC', 'PingFang HK', 'Microsoft JhengHei UI',
             'Microsoft JhengHei', '微軟正黑體', 'Noto Sans TC',
             'Noto Sans CJK TC', 'Heiti TC', sans-serif;
  --zh-mono: 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', monospace;

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

/* ── Headings ────────────────────────────────────────────────
   The Latin design sets `letter-spacing: -.015em; line-height: 1.12`.
   Both are wrong here. Han characters are full-width squares that
   already sit edge to edge, so negative tracking makes them touch, and
   1.12 leaves no room for the dense high-stroke-count glyphs that
   Traditional Chinese has far more of than Japanese (鑑, 灣, 檔). */
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 ───────────────────────────────────────────────
   Chinese needs more leading than Latin at the same size: the glyphs
   fill their em box completely, so lines read as denser blocks. Slightly
   less than the Japanese layer uses (1.85/1.9) — Chinese has no kana, so
   the texture is uniform and does not need the extra separation. */
body {
  font-family: var(--body);
  line-height: 1.8;
}

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

/* ── Line breaking ───────────────────────────────────────────
   Chinese has no inter-word spaces; browsers may break between almost
   any two Han characters, which is correct and is the default.

   `line-break: strict` is deliberately NOT set here, unlike the Japanese
   layer. That value exists to turn on 禁則処理, whose extra rules are
   about *Japanese* typography: small kana (っゃゅょ) and the long vowel
   mark ー must not begin a line. Traditional Chinese has neither of those
   characters. The rules Chinese does need — closing punctuation
   （。，、」）〉》 never starts a line, opening punctuation （「〈《 never
   ends one — are part of the default `line-break: auto` behaviour in
   every current browser, so the default is already correct and `strict`
   would only add Japanese-specific constraints that never apply.

   `overflow-wrap: anywhere` is deliberately NOT used either: 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 {
  word-break: normal;
  overflow-wrap: break-word;
}

/* ── Eyebrow / label text ────────────────────────────────────
   These labels carry .06em–.16em tracking plus uppercase. Uppercase is
   a no-op on Han characters, but tracking that wide pulls a Chinese
   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
   "第一幕 — 整理" in Chinese, 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 Chinese 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(--zh-sans);
  font-feature-settings: 'tnum' 1;
}

/* ── `ch`-based measures ─────────────────────────────────────
   `ch` is the advance width of the digit "0" — about half a full-width
   Han glyph — so any measure set in `ch` is roughly half as wide as
   intended once the text is Chinese. `em` is the right unit here: one em
   is exactly one full-width glyph. (The /zh/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 ─────────────────────────────────────────────────
   Chinese CTA labels are usually *shorter* than their English source
   ("免費下載" is four glyphs against "Download Free"), the opposite of the
   Japanese problem — but the longer ones still overflow buttons sized for
   the English string, and the tracking has to go either way. */
.btn, .btn--lg, .btn--sub {
  letter-spacing: normal;
  white-space: normal;
  text-align: center;
}
