/* Chinese typography overrides. setLang() sets , which activates everything here. Chinese glyphs need no negative tracking and sit better on looser leading, so these rules undo the Latin letter-spacing and adjust size where the translated string runs longer. Load this last. Every rule must stay scoped under [lang="zh"]. */ [lang="zh"] .hero-title { letter-spacing: 0; line-height: 1.1; font-size: clamp(1.75rem, 2.44vw + 1.18rem, 3.25rem); } [lang="zh"] .hero-badge { font-size: var(--step--1); letter-spacing: 0.04em; } [lang="zh"] .hero-sub { line-height: 1.6; } [lang="zh"] .hero-ctas { gap: 40px; } [lang="zh"] .s-title { letter-spacing: 0; line-height: 1.2; } [lang="zh"] .btn-black-lg, [lang="zh"] .btn-gray { font-size: var(--step--1); padding: 8px 16px; font-weight: 500; letter-spacing: 0; } [lang="zh"] .footer-tagline { font-size: var(--step--2); line-height: 1.2; } /* ── NARROW SCREENS ── The tightened leading above was tuned against short desktop strings that fit on one or two lines. The same string on a phone wraps to five or six, and 1.2 leading on stacked CJK is genuinely hard to read — CJK wants looser leading than Latin when it wraps, not tighter. */ @media (max-width: 1023px) { [lang="zh"] .footer-tagline { line-height: 1.7; } [lang="zh"] .page-hero-sub { line-height: 1.7; } } @media (max-width: 767px) { /* 40px between two stacked full-width buttons reads as a broken layout. */ [lang="zh"] .hero-ctas { gap: var(--gap-grid); } } /* The Chinese buttons trade padding for a smaller face, which drops them to ~35px tall. CJK targets want to be larger than their Latin equivalents on touch, not smaller. */ @media (pointer: coarse), (max-width: 1023px) { [lang="zh"] .btn-black-lg, [lang="zh"] .btn-gray { padding: 10px 18px; min-height: var(--tap); } }