/* =========================================================
   观澜堂 · 排版基线 typography.css
   作用：统一中文字体、建立字阶、修正标点与数字排版
   放在 style.css 之后加载，只做"字体与排版"，不改布局与配色
   ========================================================= */

/* ---------- 1. 字体来源：只用本机/系统字体，不依赖外网 CDN ----------
   之前页面挂着 fonts.googleapis.com，国内被墙 → 既不生效又阻塞渲染。
   这里用 local() 直接指向系统里已装的思源宋体 / 思源黑体，
   装了就一定命中，没装的机器自动落到后面指定的系统字体。 */
@font-face{
  font-family:"GL Serif";
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:local("Noto Serif SC"),local("Source Han Serif SC"),local("思源宋体"),
      local("Songti SC"),local("STSong"),local("SimSun"),local("宋体");
}
@font-face{
  font-family:"GL Sans";
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:local("Noto Sans SC"),local("Source Han Sans SC"),local("思源黑体"),
      local("PingFang SC"),local("Microsoft YaHei"),local("微软雅黑"),
      local("DengXian"),local("SimHei");
}

:root{
  --serif:"GL Serif","Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
  --sans:"GL Sans","Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei","DengXian","SimHei",system-ui,sans-serif;

  /* 字阶：全站统一，避免各处随手写 font-size */
  --fs-display:clamp(29px,4.4vw,52px);   /* 首屏主标题 */
  --fs-h1:clamp(26px,3.6vw,44px);        /* 内页页头标题 */
  --fs-h2:clamp(23px,3.1vw,37px);        /* 区块标题 */
  --fs-h3:clamp(17px,1.55vw,20px);       /* 卡片标题 */
  --fs-lead:clamp(15px,1.15vw,16.5px);   /* 引导段 */
  --fs-body:15.5px;                      /* 正文 */
  --fs-sm:13.5px;
  --fs-xs:12px;
  --fs-en:11.5px;                        /* 英文小标签 */

  /* 行高：中文大标题收紧、正文放松 */
  --lh-display:1.22;
  --lh-head:1.34;
  --lh-body:1.85;

  /* 字距：中文标题不铺开，英文小标签拉开做标识感 */
  --ls-cn:.012em;
  --ls-title:.008em;
  --ls-en:.18em;

  /* 中文标点不占满格 + 开启字距优化（思源字体支持 halt） */
  --ff-cjk:"kern" 1,"liga" 1,"halt" 1;
}

/* ---------- 2. 全局渲染 ---------- */
html{text-rendering:optimizeLegibility}
body{
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-cn);
  font-feature-settings:var(--ff-cjk);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* 数字统一等宽，价格/战绩/年份对齐才整齐 */
.stat .n,.price .num,.medal b,.hero-chip b,.hero-trust .t b,.tl .age,.award-head .sum{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"kern" 1;
}

/* ---------- 3. 标题体系 ---------- */
.hero h1,.page-head h1,.h1,.h2,.h3,.quote-block p,.cta-band h2,.lead-form h3,.card h3,.point h3,.tl h3,.news-card h3,.qa h3,.info-card h3,.price .name,.price .ask,.map-box span,.missing h4,.doc h2,.award-head h3{
  font-family:var(--serif);
  letter-spacing:var(--ls-title);
}

.hero h1{
  font-size:var(--fs-display);
  line-height:var(--lh-display);
  font-weight:700;
  letter-spacing:.006em;       /* 大字号的字距要克制，之前 .03em 显得散 */
}

.page-head h1{
  font-size:var(--fs-h1);
  line-height:1.26;
  font-weight:700;
  letter-spacing:.006em;
}

.h2,
.course-tease .left .h2,
.cta-band h2{
  font-size:var(--fs-h2);
  line-height:var(--lh-head);
  font-weight:700;
  letter-spacing:.006em;
}

.h3,.card h3,.point h3,.tl h3,.qa h3,.info-card h3,.news-card h3{
  font-size:var(--fs-h3);
  line-height:1.5;
  font-weight:700;
}

/* 英文小标签：拉开字距做标识感，但不要拉到 .3em 那么夸张 */
.h2 .en,.h1 .en,.eyebrow,.course-tease .panel-no,.hero .quote,.tl .age,.award-head .sum,.site-footer .quote-line{
  letter-spacing:var(--ls-en);
}
.eyebrow{font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--ls-en)}
.h2 .en,.h1 .en{font-size:var(--fs-en);font-weight:600;letter-spacing:var(--ls-en)}
.hero .quote{font-size:var(--fs-sm);letter-spacing:.22em}

/* ---------- 4. 正文与段落 ---------- */
p,li,td,th,label,input,select,textarea{
  letter-spacing:var(--ls-cn);
}
.lead,.hero p.sub,.page-head p,.cta-band p,.news-card p,.card p,.point p,.tl p,.doc p,.doc li{
  line-height:var(--lh-body);
}
.lead,.news-card p,.card p,.point p,.doc p{
  color:var(--ink-3);           /* 正文用墨色第三级，比 --muted 更实、更像印刷品 */
}
.hero p.sub{color:rgba(247,244,238,.82);line-height:1.9}
.page-head p{color:rgba(247,244,238,.74);line-height:1.9}
.quote-block p{font-size:clamp(18px,1.9vw,23px);line-height:1.95;letter-spacing:.02em}
.quote-block cite{font-size:var(--fs-sm);letter-spacing:.06em}

/* 中文段落里西文与数字的字形，交给系统拉丁字体更整洁 */
strong,b{font-weight:600}

/* ---------- 5. 导航：不允许换行、不被挤压 ---------- */
.nav{flex-wrap:nowrap}
.menu{flex-wrap:nowrap}
.menu a{
  white-space:nowrap;
  flex:0 0 auto;
  font-size:14px;
  font-weight:500;
  letter-spacing:.02em;
  line-height:1.2;
  padding:9px 11px;
}
.menu a.active{font-weight:600}
.nav-cta{flex:0 0 auto}
/* 1240–1400px 之间菜单仍然展开（更窄才收进抽屉），
   这一段容易挤到换行，所以把字号与内边距再收一档 */
@media(min-width:1241px) and (max-width:1400px){
  .menu a{padding:8px 9px;font-size:13.5px}
  .nav-cta .btn{padding:10px 14px;font-size:13.5px}
  .brand-txt b{font-size:19px}
}
.brand-txt b{font-family:var(--serif);letter-spacing:.14em;font-weight:700}
.brand-txt i{font-size:9.5px;letter-spacing:.22em;font-weight:600}

/* ---------- 6. 按钮与表单控件 ---------- */
.btn{
  font-size:15px;
  font-weight:600;
  letter-spacing:.03em;
  line-height:1;
}
.btn-lg{font-size:15.5px}
.nav-cta .btn,.mobile-bar a,.chip{letter-spacing:.02em}
.chip{font-size:var(--fs-sm);font-weight:500}
.field label{font-size:var(--fs-xs);letter-spacing:.06em;color:var(--ink-3)}
.field input,.field select,.field textarea{font-size:15px;letter-spacing:var(--ls-cn)}
.lead-form .desc{font-size:var(--fs-sm);color:var(--ink-3)}
.form-note{font-size:var(--fs-xs);color:var(--muted)}

/* ---------- 7. 卡片、列表、表格 ---------- */
.work .cap{font-size:var(--fs-xs);letter-spacing:.02em}
.work .cap b{font-family:var(--serif);font-size:13px;font-weight:600}
.pill{font-size:var(--fs-xs);letter-spacing:.04em}
.course-tease li{letter-spacing:var(--ls-cn)}
.course-tease li span:last-child{font-size:var(--fs-sm)}
.stat .t{font-size:var(--fs-sm);letter-spacing:.04em}
.hero-trust .t span{font-size:var(--fs-xs);letter-spacing:.08em}
.medal span,.award-row .aw-author{letter-spacing:.04em}
table.tier th{font-size:var(--fs-sm);letter-spacing:.06em}
table.tier td{font-size:14.5px}

/* ---------- 8. 页脚 ---------- */
.site-footer h5{font-size:15px;letter-spacing:.1em}
.site-footer a,.site-footer .contact-line{font-size:var(--fs-sm);letter-spacing:var(--ls-cn)}
.site-footer .bottom{font-size:var(--fs-xs)}

/* ---------- 9. 移动端微调 ---------- */
@media(max-width:680px){
  :root{
    --fs-display:clamp(26px,7.6vw,34px);
    --fs-h1:clamp(23px,6.6vw,30px);
    --fs-h2:clamp(21px,5.6vw,27px);
    --fs-body:15px;
    --lh-body:1.82;
  }
  .hero h1{letter-spacing:.004em}
  .menu a{font-size:14px}
}