/* Language switcher + CJK type — applied on every page (EN + 中文) */

/* ---------- Switcher in nav ---------- */
.nav-lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: clamp(8px, 1.2vw, 16px);
  margin-left: clamp(8px, 1.2vw, 16px);
  border-left: 1px solid var(--c-rule-soft);
}
.nav-lang a.lang {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  padding-block: 6px;
  transition: color 0.2s var(--ease-out);
}
.nav-lang a.lang:hover { color: var(--c-ink); }
.nav-lang a.lang[aria-current="page"] {
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-accent);
}
.nav-lang .sep { color: var(--c-ink-3); opacity: 0.5; }

@media (max-width: 820px) {
  .nav-lang {
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
    padding-top: 16px;
    border-top: 1px solid var(--c-rule-soft);
    width: 100%;
  }
}

/* ---------- Chinese typography overrides ---------- */
/*
  Strategy: keep the Jost / JetBrains Mono / Lora cascade exactly as-is for
  Latin glyphs. Add Noto Sans SC / Noto Serif SC as a fallback so any CJK
  char drops cleanly into a sibling-weight Noto face. Hairlines (200/300)
  in Jost map to Noto Sans SC weights 300/400 since Noto's 200 is thin
  beyond legibility at body size.
*/
:root {
  --f-display-cjk: "Jost", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --f-body-cjk: "Jost", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --f-serif-cjk: "Lora", "Noto Serif SC", "Songti SC", "STZhongsong", Georgia, serif;
  --f-mono-cjk: "JetBrains Mono", "Noto Sans SC", "PingFang SC", ui-monospace, monospace;
}

[lang="zh-Hans"] body,
[lang="zh-Hans"] {
  font-family: var(--f-body-cjk);
}
[lang="zh-Hans"] h1,
[lang="zh-Hans"] h2,
[lang="zh-Hans"] h3,
[lang="zh-Hans"] h4 {
  font-family: var(--f-display-cjk);
  letter-spacing: -0.005em; /* tighter than -0.01em for CJK readability */
}
[lang="zh-Hans"] .serif,
[lang="zh-Hans"] h1.serif,
[lang="zh-Hans"] h2.serif,
[lang="zh-Hans"] h3.serif,
[lang="zh-Hans"] .statement,
[lang="zh-Hans"] .end-title {
  font-family: var(--f-serif-cjk);
  font-style: normal; /* italic Chinese serif looks wrong */
}
[lang="zh-Hans"] .kicker,
[lang="zh-Hans"] .meta,
[lang="zh-Hans"] .nav-lang a.lang,
[lang="zh-Hans"] .ledger .cell .num,
[lang="zh-Hans"] .process .step .num,
[lang="zh-Hans"] .proof .row-p .label,
[lang="zh-Hans"] .why .row-w .head,
[lang="zh-Hans"] .caption-row .cap,
[lang="zh-Hans"] .cta,
[lang="zh-Hans"] .form-card label {
  font-family: var(--f-mono-cjk);
  letter-spacing: 0.16em; /* slightly tighter — wider tracking hurts CJK */
}

/* Emphasis replacement — Chinese has no real italic convention.
   Convert italic-flag accents to terracotta + medium weight. */
[lang="zh-Hans"] em.flag,
[lang="zh-Hans"] .cover-title em,
[lang="zh-Hans"] .chapter-title em,
[lang="zh-Hans"] .end-title em {
  font-family: inherit;
  font-style: normal;
  color: var(--c-accent);
  font-weight: 500;
}
[lang="zh-Hans"] .statement em {
  font-style: normal;
  color: inherit;
  font-weight: 500;
}

/* Stretch the rotated rail label a bit since 中文 chars are wider than Latin */
[lang="zh-Hans"] .rail .label {
  letter-spacing: 0.18em;
}

/* Optional: small visual rhythm for line-broken Chinese body copy */
[lang="zh-Hans"] p,
[lang="zh-Hans"] .body-text,
[lang="zh-Hans"] .lead {
  line-height: 1.65;
}

/* Restore tighter line-height for compact statement displays */
[lang="zh-Hans"] .statement { line-height: 1.25; }
[lang="zh-Hans"] .end-title { line-height: 1.2; }
[lang="zh-Hans"] .chapter-title { line-height: 1.05; }
[lang="zh-Hans"] .cover-title { line-height: 1.05; }

/* Deck switcher pill — mirrors .deck-back style, top-right */
.deck-lang {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid rgba(244, 239, 226, 0.18);
  border-radius: 999px;
  background: rgba(13, 12, 10, 0.55);
  backdrop-filter: blur(8px);
  color: rgba(244, 239, 226, 0.55);
}
.deck-lang a {
  color: rgba(244, 239, 226, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}
.deck-lang a:hover { color: #f4efe2; }
.deck-lang a[aria-current="page"] {
  color: #f4efe2;
  border-bottom: 1px solid var(--c-accent);
}
.deck-lang .sep { opacity: 0.5; }
@media (max-width: 720px) {
  .deck-lang { top: 12px; right: 12px; font-size: 11px; padding: 7px 12px; }
}