/* zh.css —— 所有自有模板共用的中文排版基础（doc/35 §3）。
   模板自己的样式表在它后面加载，只定版式与配色；这里只管"中文怎么排才不难看"。

   约定的变量（模板在 :root 里覆盖）：
     --ink 正文色  --ink-soft 次要文字  --paper 底色  --line 分隔线  --brand 主色  --accent 点缀色
     --font-body 正文字体栈  --font-display 展示字体栈  --wrap 版心宽  --measure 正文栏宽
   品牌色由代码从资料里取（theme.brand / theme.accent），模板在 <style> 里写进这些变量；
   深浅变化一律用 color-mix 现算，不另设一套色板。 */

:root {
  --ink: #23262b;
  --ink-soft: #5c6169;
  --paper: #ffffff;
  --line: color-mix(in oklab, var(--ink) 14%, var(--paper));
  --brand: #1d4ed8;
  --accent: var(--brand);
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --font-display: var(--font-body);
  --wrap: 1120px;
  --measure: 36em;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.8;
  /* 避头尾 + 标点挤压 + 中西文间距：浏览器不支持的属性自动忽略 */
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
  text-spacing-trim: normal;
  text-autospace: normal;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

/* 中文没有斜体：浏览器只会把字硬拉斜 */
em, i, cite, address, dfn, var { font-style: normal; }
em { font-weight: 700; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .02em;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }   /* 尽量不让最后一行只剩一两个字 */
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: var(--measure); }

/* 数字：等宽、单位小一号 */
.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.unit { font-size: .45em; margin-left: .15em; font-weight: 400; letter-spacing: 0; }

/* 竖排：只给短标题与引语 */
.vertical { writing-mode: vertical-rl; text-orientation: mixed; }
.vertical .num { text-combine-upright: all; }

/* 只给读屏器看的字 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 官网框共用的几样：面包屑、文章正文 */
.crumbs { font-size: 14px; color: var(--ink-soft); }
.crumbs a:hover { color: var(--brand); }
.crumbs span + span::before { content: "/"; margin: 0 .6em; color: var(--line); }

.prose { max-width: var(--measure); font-size: 17px; line-height: 1.85; }
.prose h2 { font-size: 1.45em; margin: 2em 0 .8em; }
.prose h3 { font-size: 1.2em; margin: 1.6em 0 .6em; }
.prose p { margin: 0 0 1.1em; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: .3em 0; }
.prose blockquote {
  margin: 1.4em 0; padding: .2em 0 .2em 1.1em;
  border-left: 3px solid var(--brand); color: var(--ink-soft);
}
.prose img { margin: 1.4em 0; border-radius: 4px; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .92em; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: .55em .6em; text-align: left; vertical-align: top; }

@media (max-width: 640px) {
  :root { --gutter: 18px; }
  body { font-size: 16px; }
  .prose { font-size: 16px; }
}