/* ═══════════════════════════════════════════════════════════════════════
   中文版排版层 —— 只有 zh.html 加载它。

   这一层做的事只有一件：把为拉丁字母调好的那套尺寸，改成汉字也站得住的
   尺寸。版心、栏格（--label / --measure / --aside）、颜色、动效全部沿用
   main.css，一个数都没动 —— 两版的正文起止在同一条竖线上，是故意的。

   英文版看不到这个文件，所以也不会去下载中文字体。
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 中文正文字体 ─────────────────────────────────────────────────────
   思源宋体 SC 的子集，只含这一页真正出现过的汉字和全角标点。
   unicode-range 锁死在 CJK 区，浏览器排拉丁字时根本不会来问它。

   为什么必须自托管：这页原来的中文回退链是「苹方 / 华文宋体 / 宋体」，
   在一台没装中文字体的 Linux 上一个都匹配不到（实测三个全部落到 DejaVu
   Sans，一个拉丁字体）。英文版只有十来个汉字，看不出来；中文版满页都是，
   就等于把版面交给访客机器上碰巧装了什么。

   只有 400 一个字重，中文版整页没有一处粗体 —— 宋体没有真粗体，浏览器
   硬撑出来的假粗只会把笔画糊在一起。要强调就换字号和字体，见下面的题记。 */
@font-face {
  font-family: "Noto Serif SC Subset";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/notoserif-cn-subset.woff2") format("woff2");
  unicode-range: U+3000-303F, U+4E00-9FFF, U+FF00-FFEF;
}

/* ─── 题记和竖排用的毛笔楷书 ───────────────────────────────────────────
   马善政毛笔楷书，真毛笔写的楷，笔画有提按。只装扉页题记那三行和竖排
   时间线这六十来个字，24 KB。

   为什么只给这几处：满页毛笔字就成了模板。毛笔是这一页的「手写」那一层，
   印刷的那一层（章节标题、身份、条目标题）仍然是老宋，正文是思源宋。
   一页上一种手写、两种印刷，各归各位。                                  */
@font-face {
  font-family: "Ma Shan Zheng Subset";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/brush-cn-subset.woff2") format("woff2");
  unicode-range: U+3000-303F, U+4E00-9FFF, U+FF00-FFEF;
}

/* ─── 中文版的大字 ─────────────────────────────────────────────────────
   还是京华老宋体，但装的是中文版排成大字的那批（章节标题、身份、条目
   标题），75 个字 39 KB。

   为什么另起一个字族名而不是把它并进 fonts.css 里那个：英文版只用得上
   姓名和序号那十八个字，10 KB。同名的两个 @font-face 谁后声明谁盖住谁，
   合并就等于让英文版跟着下载它一辈子用不上的六十个字。换个名字挂在
   --font-cn 的第二位，各下各的。                                        */
@font-face {
  font-family: "KingHwa OldSong CN";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/oldsong-cn-subset.woff2") format("woff2");
  unicode-range: U+3000-303F, U+4E00-9FFF, U+FF00-FFEF;
}

:root {
  /* 拉丁字仍然走 Spectral / Prata / Plex Mono，汉字自动落到后面那一款。
     浏览器是逐字回退的，所以「柏林工业大学 Süssmuth 课题组」这种句子
     不用做任何标记，两种字自己各归各位 —— 这也是中西混排唯一正确的做法，
     给整段套一个中文字体会把拉丁部分一起换掉。 */
  --font-body: "Spectral", "Noto Serif SC Subset", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", "Noto Serif SC Subset", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
  /* 大字用京华老宋体，它是这一版的脸。两个子集按大小排，姓名和序号命中
     前一个（英文版也在用，多半已经在缓存里），其余大字命中后一个，都没有
     的字退到思源宋体，不留豆腐块。 */
  --font-display: "Prata", "KingHwa OldSong", "KingHwa OldSong CN",
    "Noto Serif SC Subset", Georgia, serif;
  --font-cn: "KingHwa OldSong", "KingHwa OldSong CN", "Noto Serif SC Subset", serif;
  /* 毛笔那一层。它只装了二十来个字，漏掉的自动退到老宋和思源宋，
     所以就算忘了跑子集脚本，页面上也只是那一个字换了副面孔。 */
  --font-brush: "Ma Shan Zheng Subset", "KingHwa OldSong", "KingHwa OldSong CN",
    "Noto Serif SC Subset", serif;

  /* 朱。一页水墨只用墨和纸两色，第三色永远是朱 —— 这是中国书画自己的
     规矩，不算破「三色不加第四色」那条。整站只落在题记里的一个词上。
     深色模式下要提亮，暗底上的暗红会闷成一块黑。 */
  --zhu: #9a3a2e;

  /* 题记三行的字号。下面那条数字横线要和它一样宽，所以得是个变量。
     比英文版那段（--lede）大约大 7%：同样的字号下毛笔楷比宋体挤，
     笔画有提按有连带，抬一点每一笔才都看得见。
     ⚠ 这里的 rem 不是 16px。main.css 把根字号做成了流体的，1440 上
     19.3px，390 上 17px —— 照 16px 折算会一路偏大四成。 */
  --cn-lede: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --zhu: #c85f4e; }
}
:root[data-theme="dark"] { --zhu: #c85f4e; }

/* ─── 正文 ─────────────────────────────────────────────────────────────
   行距是中文和拉丁最大的一处不同。拉丁字母有升部降部，行与行之间自带
   缝隙；汉字是一个个实心方块，1.62 的行距会糊成一堵墙。1.78 是能把
   「一行一行」重新读出来的下限。                                        */
body {
  line-height: 1.78;
  /* 苹方和宋体在 macOS 上被 antialiased 抽掉一层，横画会细到发虚。
     中文版交还给系统的次像素渲染。 */
  -webkit-font-smoothing: auto;
}

/* 标点挤压：行末的句号逗号、连着出现的全角标点，按中文排版惯例压掉多余
   的那半个字身（GB/T 15834）。Chromium 认这个属性，别的浏览器直接忽略，
   忽略了也只是标点略松，不会错版。 */
html { text-spacing-trim: normal; }

/* 汉字和拉丁之间那 1/4 个字的空隙，是「排过」和「打出来的」之间最明显的
   一道线。这里不靠 CSS 的 text-autospace（支持面还太窄，各浏览器行为也
   不一致），而是在 data/ 和 zh.html 的原文里直接打一个普通空格：
   「AI 药物发现」「HELM 表示法」。比 1/4 em 略宽一点点，但可复制、
   Ctrl-F 搜得到、任何浏览器上都一样，而且一个字节的机关都没有。         */

/* ─── 首屏 ───────────────────────────────────────────────────────────── */

/* 中文版里中文名是主角，所以它是 h1，也应该更大。英文版正好相反。 */
.name-cn {
  font-size: clamp(2.5rem, 1.75rem + 2.4vw, 3.4rem);
  letter-spacing: 0.08em;
  margin-right: -0.08em;
}
/* 拉丁名退到次席。仍然和中文名同一条基线，不另起一行 —— 这就是英文版
   那个 masthead 的镜像，只是主次调了个个儿。 */
.name-lat {
  font-size: clamp(0.82rem, 0.7rem + 0.42vw, 1.05rem);
  letter-spacing: 0.22em;
  margin-right: -0.22em;
}

/* 小字号统一抬一档。同样是 12px，一个拉丁字母只有两三笔，一个汉字有十几
   笔要挤进同一个方框里。0.78rem（约 15px）是这一页汉字还能看清的下限。 */
.eyebrow { font-size: 0.8rem; letter-spacing: 0.1em; }
.toggle { font-size: 0.72rem; }
.tb-nav a { font-size: 0.8rem; letter-spacing: 0.08em; }

/* 竖排的那条时间线。这一条本来就是 writing-mode: vertical-rl —— 英文版里
   是躺倒的字母，中文进去正好是真竖排，一个字一个字往下走。
   字体从等宽换成毛笔楷：等宽是给拉丁字设计的，它根本没有汉字，之前那三个
   词是从系统兜底里捡来的，和这条竖线没有任何关系。
   竖排时 letter-spacing 是字与字之间的距离，0.3em 才有竖排该有的疏朗。 */
.arc {
  font-family: var(--font-brush);
  font-size: 1.02rem;
  letter-spacing: 0.3em;
}
/* 当前这一段更大更实，靠字号和墨色分主次，不靠字重 —— 毛笔字没有粗体，
   浏览器硬撑出来的假粗会把笔画糊死。 */
.arc li { padding-left: 1.35rem; }
.arc .now { font-size: 1.22rem; font-weight: 400; }

/* ─── 扉页的题记 ───────────────────────────────────────────────────────
   英文版是一整段，里面用一个 <b> 把最要紧的那句挑出来加粗。中文这么办
   不行：汉字之间没有空格，一整段读下来是均匀的一堵墙，重音挑不出来。
   宋体也没有真粗体，浏览器硬撑出来的假粗只会把笔画糊在一起。

   所以中文版拆成三行 —— 引子、那一句、注脚 —— 整段换成毛笔楷书。

   为什么是毛笔而不是继续用老宋：老宋和思源宋是同一族印刷体，放大一档只是
   「同一个声音说大声点」。换成手写的笔迹，才是换了一个人在说话。

   为什么只给这三行：这一屏别的地方全是印刷体 —— 右边一栏、下面的正文、
   章节标题。手写只占三行才叫题记，满页毛笔就成了模板。

   .lede-text / .pull / .coda 这三个类名 main.css 里本来就有：英文版原先
   也是三段式，后来并回了一整段，样式留下了。这里接着用。 */
.lede-text {
  /* 字体挂在这一层上，三行一起拿到；单独改哪一行只改字号和颜色。 */
  font-family: var(--font-brush);
  /* 原来这段留白挂在 .standfirst 上，现在段落有三个了，挪到外面来 */
  padding-block: clamp(1.9rem, 3.4vw, 2.9rem);
  gap: clamp(1.1rem, 1.9vw, 1.6rem);
}
.standfirst,
.coda {
  /* 一行 28 个字（30em 扣掉字距）。这个数是照着字数定的：上面那句 48 字
     宽屏上正好两行，下面那句 22 字一行，中间那句短，三行长短相间。留了
     三四个字的余量，改长一两个字也不会立刻多折一行；再长就会折，折了就
     把它写短点 —— 题记掉出一个孤零零的尾巴，比句子长一点难看得多。 */
  max-width: 30em;
  padding-block: 0;
  /* 英文版把 .standfirst 单独指给了 Playfair 斜体（那是拉丁文里的「手写」），
     那条规则直接落在元素上，会盖掉这里从 .lede-text 继承下来的毛笔。所以中文
     版得把毛笔明写一遍 —— 两版各有各的手写体，谁也不是谁的翻译。 */
  font-family: var(--font-brush);
  font-style: normal;
  font-size: var(--cn-lede);
  font-weight: 400;
  /* 毛笔字的笔画伸得比印刷体远，撇捺会探到行外，行距要比正文的 1.78 再
     松一档，上一行的捺才不压下一行的头。 */
  line-height: 1.95;
  letter-spacing: 0.05em;
}
.standfirst { color: var(--ink-2); }
.coda { color: var(--muted); }
/* 那一句。比上下两行大一档半，比姓名小一截 —— 它是这页最响的一句话，
   但不该跟名字抢。 */
.pull {
  max-width: none;
  font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.05rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.06em;
  color: var(--ink);
}
/* 数字那一行的横线要和上面的字一样宽。 */
.figures { max-width: calc(30 * var(--cn-lede)); }

/* ─── 题记里的重点 ─────────────────────────────────────────────────────
   毛笔楷只有一个字重，加粗这条路走不通；整段又已经是手写体，也没有第二
   只手可换。所以两处重点各用一种手法，一个用笔，一个用色，谁也不像谁。

   墨痕是默认的：题记里任何一个 <b> 都会得到它。再加 class="zhu" 就换成
   朱色。用哪个词，把 <b> 挪过去就行。                                  */

/* 假粗要先关掉。main.css 里 .standfirst b 是 600，那是给 Spectral 的
   真粗体准备的，中文这边一个字重都没有，600 只会让浏览器去糊笔画。

   nowrap 不是排版洁癖，是这两种手法都得靠它：被强调的词折了行，朱色会
   断成两截，墨痕更糟 —— 绝对定位的那一道遇上折行的行内盒会直接塌成
   0 宽，量到过（1024 和 390 上都是）。整个词一起换行，两边都不出事。
   前提是词要短，两到四个字；再长就该换一种说法，不是换一种画法。 */
.lede-text b {
  position: relative;
  font-weight: 400;
  white-space: nowrap;
}

/* 一、一道墨痕。两头尖、中间厚，是笔尖扫过去留下的，不是下划线 ——
   下划线两头齐平、粗细一样，一眼就看得出是 HTML 画的。
   clip-path 那一串点描的就是这个枣核形，高度和位置全用 em，字号一变
   它自己跟着变。不能用 text-decoration：下划线没法做成两头尖。 */
.lede-text b::after {
  content: "";
  position: absolute;
  left: -0.04em;
  /* 末字后面还挂着一格 letter-spacing，墨痕不该把那道空白也划上 */
  right: 0.06em;
  bottom: -0.15em;
  height: 0.11em;
  background: currentColor;
  clip-path: polygon(0 58%, 3% 22%, 22% 4%, 58% 0, 88% 12%, 100% 44%,
                     97% 88%, 62% 100%, 24% 96%, 4% 84%);
  opacity: 0.8;
}

/* 二、朱。旧书上圈点批注就是这一色。不加大、不加线，光换颜色就够跳 ——
   满页水墨里唯一的一点红，全站只此一处，落第二处就不值钱了。 */
.lede-text b.zhu { color: var(--zhu); }
.lede-text b.zhu::after { display: none; }

/* ─── 照片下面这一栏 ───────────────────────────────────────────────────
   整栏印刷体。毛笔只出现在左边的题记和中间那条竖线上 —— 这一栏是说明
   文字，它越安静，左边那三行越响。
   身份沿用 main.css 的老宋，只把字号抬一档：1.02rem 上的汉字比同尺寸的
   拉丁字母挤得多，「博士研究生」五个字里有三个是十几笔的。 */
.status { font-size: 1.14rem; line-height: 1.5; }

/* 0.34em 的字距，两个字撑开成一小段，读起来像题款上的小字而不像表单标签。
   末字后面那一道空白要拉回来，否则标签整体看着偏左。 */
.facts dt { font-size: 0.72rem; letter-spacing: 0.34em; margin-right: -0.34em; }
.facts dd { font-size: 0.9rem; line-height: 1.62; }
.links a { font-size: 0.78rem; }
.figures dt, .figures dd { font-size: 0.78rem; letter-spacing: 0.1em; }

/* ─── 章节栏外 ─────────────────────────────────────────────────────────
   英文版：汉字序号「壹」是栏外唯一的大字，压着英文标题。
   中文版：标题本身就是汉字，序号不必再替它扛「中国风」这件事，于是缩小
   一档退回索引记号的位置，标题接上来当主角。
   底下再挂一行小号英文，正好和英文版的栏外对调。                        */
.secnum { font-size: 2rem; }
.sectitle {
  margin-top: 0.35rem;
  font-size: clamp(1.95rem, 1.6rem + 1vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: 0.08em;
  /* 「技能 / 兴趣」是唯一折行的一节，行距要跟着放开 */
  margin-right: -0.08em;
}
.secalt {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ─── 条目 ───────────────────────────────────────────────────────────── */
.when, .pub-year { font-size: 0.76rem; }
.entry h3 { font-size: 1.32rem; line-height: 1.42; letter-spacing: 0.02em; }
.org { font-size: 1.02rem; line-height: 1.7; }
.supervisor { font-size: 0.95rem; }
.place { font-size: 0.76rem; letter-spacing: 0.09em; }
.notes li { line-height: 1.82; }
.tag { font-size: 0.74rem; letter-spacing: 0.08em; }
.more { font-size: 0.8rem; letter-spacing: 0.1em; }

/* ─── 技能与兴趣 ─────────────────────────────────────────────────────── */
.subhead { font-size: 0.8rem; letter-spacing: 0.1em; }
/* 标签只有两到四个字，落在 8.5rem 的栏里显得空 —— 这是有意留的。栏格
   两版共用，中文版单独收窄就意味着两版的正文不在同一条竖线上起头。
   真觉得太空，改 main.css 里的 --label，两版会一起动。 */
.skills dt { font-size: 0.82rem; letter-spacing: 0.1em; }
.skills dd { line-height: 1.8; }
.interests h4 { font-size: 1.26rem; line-height: 1.35; letter-spacing: 0.02em; }
.interests p { font-size: 1rem; line-height: 1.8; }

/* 汉字没有真正的斜体，浏览器只会把它整个压斜，很难看。中文原文里不要给
   汉字套 <em> / <i>；期刊名、拉丁学名这些该斜的本来也都是拉丁字。 */

/* ─── 手机 ───────────────────────────────────────────────────────────── */
@media (max-width: 34rem) {
  .standfirst, .coda { line-height: 1.85; }
  .sectitle { letter-spacing: 0.05em; }
}

/* ─── 纸上 ───────────────────────────────────────────────────────────── */
@media print {
  /* 屏幕上那一句要一眼看见，纸上不用 —— 一行题记占掉四分之一页没有意义。
     三行仍然分开，层次还在，只是音量收回来。 */
  .lede-text { padding-block: 0; }
  .pull { font-size: 1.35rem; letter-spacing: 0.03em; }

  /* 引子和注脚回到正文的宋体。这份打出来是简历，整段毛笔字不合场合，
     而且激光打印机会把提按压成一样粗。手写只留中间那一行。 */
  .standfirst, .coda {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    letter-spacing: 0.02em;
  }

  /* 纸上没有第二种墨。朱色在黑白机上会压成一块灰，比周围还淡，反倒成了
     减弱；所以它在纸上也收成墨痕，两处重点变成同一种手法。 */
  .lede-text b.zhu { color: inherit; }
  .lede-text b.zhu::after { display: block; }
}