/* ============ Typography system (loaded last) ============
   One family per role, one size scale.
   · Display (titles, big numbers): Fredoka — rounded and cute; Chinese falls through to ZCOOL KuaiLe
   · Text (everything else): Mali — friendly rounded Thai + Latin; Chinese uses the clean system face
   · Sizes: t1 12 · t2 14 · t3 16 (body) · t4 18 · t5 22 · section titles · hero */
:root,html[data-lang="zh"],html[data-lang="th"]{
  --t1:12px; --t2:14px; --t3:16px; --t4:18px; --t5:22px;
  --t-title:clamp(28px,5.4vw,42px); --t-hero:clamp(60px,14vw,150px); --t-num:clamp(30px,5vw,44px);
  --cn-text:'PingFang SC','HarmonyOS Sans SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
  --ui:'Mali',var(--cn-text);
  --serif:'Mali',var(--cn-text);
  --disp:'Fredoka','Mali','ZCOOL KuaiLe',var(--cn-text);
}
body{font-family:var(--ui);font-size:var(--t3);line-height:1.75;letter-spacing:.005em;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}

/* hero */
.hero h1{font-family:var(--disp)!important;font-weight:600!important;font-size:var(--t-hero)!important;line-height:1.02!important;letter-spacing:-.01em}
.hero h1 .amp{font-family:'Fredoka',sans-serif!important;font-weight:500;font-style:normal!important}
.hero .sub{font-family:var(--disp);font-weight:600;font-size:clamp(20px,3.6vw,28px);letter-spacing:.01em}
.hero .lede{font-size:var(--t4);line-height:1.85;max-width:640px}
.greet{font-family:var(--disp);font-weight:600;font-size:var(--t4)}
.eyebrow{font-family:'Fredoka',sans-serif;font-size:var(--t1);letter-spacing:.22em}

/* section headings: one look everywhere */
main section > h2,main section h2.reveal,.playful h2,.box h3,.cap-paper h3{font-family:var(--disp)!important;font-weight:600!important;font-style:normal!important;line-height:1.25!important;letter-spacing:.01em!important}
main section > h2,main section h2.reveal,.playful h2{font-size:var(--t-title)!important;margin-bottom:6px}
.kicker,p.kicker,small.kicker{font-family:'Fredoka','Mali',var(--cn-text)!important;font-weight:600!important;font-size:var(--t1)!important;letter-spacing:.2em!important;text-transform:uppercase}
.hint,p.hint{font-size:var(--t2)!important;line-height:1.75!important}
.lf h4,.dm h4,#visit-box h4{font-family:var(--disp)!important;font-weight:600!important;font-size:var(--t4)!important}

/* numbers: one rounded face, one size per role */
.stats strong,.st2 strong,.cc .digits,.g-growth b,.match b,.trip-n,.call .times b,.medal .mi,.jar b{font-family:'Fredoka',sans-serif!important;font-weight:600!important}
.stats strong{font-size:var(--t-num)!important;line-height:1.1!important}
.stats span,.st2 span,.cc .u{font-size:var(--t2)!important}

/* body copy blocks keep the same text face (no more serif/sans switching) */
.voice,.note,.dq-ans span,.slip span,.kp-text,.ch-text,#typed,.letter,.term,.cap-paper p,.ch-q,.dq-q{font-family:var(--serif)!important}
.voice,.dq-ans span,.kp-text,.ch-text,.cap-paper p{font-size:var(--t3)!important;line-height:1.85!important}
.ch-q,.dq-q{font-size:var(--t4)!important}

/* controls */
.btn-gold,.chip,.lang b,.who-chips button{font-family:var(--ui);font-weight:600}
.btn-gold{font-size:var(--t3)}.btn-gold.sm,.chip{font-size:var(--t2)}

/* Chinese titles: the cute face only where it shines (headings), body stays clean */
html[lang^="zh"] main section > h2,html[lang^="zh"] .playful h2{letter-spacing:.04em!important}