/* ============================================================
bazicn 门户 · 文章排版
源文件：tools/content/assets/article.css（门户仓库内相对路径）
产物： build/article.css（由 build-content.mjs 逐字节拷贝）
⚠ 本文件是**公开分发**的（切换到生产后 /article.css 可直接 curl）。
注释里不要写服务器绝对路径与内部仓库名 —— 那等于把构建机的目录结构
写进公网可读的文件。守卫 check-article-page.mjs [3b] 对此有断言。
引用： （排在 styles.css 之后）
------------------------------------------------------------
🔴 两条硬纪律，守卫 check-article-page.mjs [3] 机械断言：
1. **零颜色字面量**。全部 var(--color-*)。半透明一律走
color-mix(in oklab, N%, transparent)，不写 rgb()/rgba()/hsl()。
（transparent 是关键字不是字面量；oklab 混合在浅色宣纸底上
比 sRGB 插值少一层灰浊。）
2. **所有 font-size 的计算值 ≥ 0.625rem（10px）**。10px 是全站字号硬下限，
clamp() 的第一个参数同样受这条约束。
字号刻度就地定义在 --article-* 里，集中一处、附理由。
tokens.css 目前只导出了 --text-2xs(11px) / --text-3xs(10px) 两级
（它们是 W5 为"状态标签"这类极小字加的），没有正文刻度可用；
本文件不去 tokens.css 里补 —— 那份是设计真源的落地副本，
门户这边手改会与真源静默分叉。刻度先在这里落地并跑一段时间，
等它稳定了再走 design 真源提升为全站 token。
══ 中文长文排版的取值与理由（不要照搬英文 prose）══════════════
[A] 正文 16px，不就近取 14px。
汉字是**全字面框**排布：一个字撑满 em 方框，笔画从边到边。
14px 下宋体/衬线体的横画只有约 1 物理像素，在非 HiDPI 屏上会掉进
亚像素渲染变灰、变糊；而拉丁小写字母的 x-height 只占 em 的 ~0.5，
同样 14px 的拉丁文实际墨迹比汉字小得多，所以英文 prose 的 14px
经验值不能平移过来。ziwei 的阅读区裁决同为 16px 取整。
[B] 行高 1.9（正文），不是拉丁 prose 惯用的 1.5–1.65。
同样源于全字面框：汉字之间**没有**拉丁文那种由 x-height 以下、
ascender 以上的空白自然形成的行内留白，字块贴着字块。
中文段落的"气口"只能靠 line-height 让出来。
1.9 × 16px = 30.4px 行距，对应约 0.9 个字高的行间空白 —— 低于 1.75
会出现"上下行笔画黏连"的观感，高于 2.0 则一行一行散开、丢失段落块感。
标题反过来收紧（1.35/1.5）：字号大、字重高，同样的比例会显得松垮。
[C] 行宽用 em（≈字数）而不是 ch。
ch 是 "0" 的宽度，对等宽拉丁有意义，对汉字毫无意义（1 汉字 = 1em）。
36em ≈ 每行 36 个汉字，落在中文阅读舒适区 30–40 字之间。
[D] 中西文混排间距。
正确做法是在中文与拉丁/数字之间插入约 1/8 em 的间隙。
CSS 的 text-autospace 正是干这个的，但支持面还很窄 ⇒ 这里**声明它**
作为渐进增强，并把回退纪律写进作者文档：**md 源里中英之间手写半角空格**
（所谓"盘古之白"）。绝不用全局 letter-spacing 冒充 —— 那会把汉字之间
也一起撑开，破坏汉字最重要的均匀字距，且让标点更松。
[E] 标点挤压。
中文全角标点自带左右各半个字宽的空白，连续标点（」、）与行首行尾的
标点会留出难看的空洞。text-spacing-trim: normal 是规范给的解法
（行首行尾及相邻标点收掉多余的半角），同样按渐进增强声明：
不支持的浏览器只是维持现状，不会错位。
[F] 禁则处理靠浏览器默认的 CJK 换行规则（。，、」等不许出现在行首）。
不设 word-break: break-all —— 那会把拉丁单词从中间劈开。
长 URL 单独用 overflow-wrap 处理。
[G] 段落用**段间距**而不是首行缩进 2em。
纸媒的首行缩进依赖固定行宽与高密度排版；屏幕上行宽是流动的、
段落之间还夹着标题/引用/代码块，缩进的段首识别度明显弱于空行。
============================================================ */
.article-page {
/* ── 字号刻度（全部 ≥ 0.625rem） ───────────────────────── */
--article-h1: clamp(1.75rem, 1.15rem + 2.6vw, 2.5rem);
--article-h2: clamp(1.3rem, 1.06rem + 1.05vw, 1.55rem);
--article-h3: 1.125rem;
--article-text: 1rem; /* [A] */
--article-lede: 1.0625rem;
--article-code: 0.9375rem; /* 等宽拉丁字面小，15px 与正文 16px 视觉等重 */
--article-meta: 0.8125rem;
--article-kicker: var(--text-2xs);
/* ── 行高 ─────────────────────────────────────────────── */
--article-leading: 1.9; /* [B] */
--article-leading-tight: 1.35;
--article-leading-code: 1.7; /* 代码行内多为拉丁，1.9 会散 */
/* ── 度量 ─────────────────────────────────────────────── */
--article-measure: 36em; /* [C] ≈ 36 个汉字 */
--article-rhythm: 1.2em; /* 段间距：约 0.63 行，line-height 已提供大量呼吸 */
--article-anchor-offset: 5.25rem; /* 粘性页眉 min-height 4.25rem + 1rem 余量 */
padding-block: clamp(1.75rem, 1rem + 3vw, 3.25rem) clamp(3rem, 2rem + 4vw, 5rem);
}
/* 页面级 smooth scroll 由 styles.css 打开（html { scroll-behavior: smooth }）。
点目录锚点时它是好事，但对前庭不适用户是明确的伤害源，这里补上退出口。 */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* ── 版面骨架 ─────────────────────────────────────────────
窄屏单列，DOM 顺序即视觉顺序：标题 → 目录 → 正文 → 上下篇。
宽屏把目录移到右栏并 sticky。用 grid-template-areas 而不是
flex + order：order 会让 Tab 焦点顺序与视觉顺序分叉。 */
.article-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
'head'
'rail'
'prose'
'pager';
gap: 0;
}
.article-head { grid-area: head; }
.rail { grid-area: rail; }
.prose { grid-area: prose; }
.article-pager { grid-area: pager; }
@media (min-width: 62rem) {
.article-grid {
grid-template-columns: minmax(0, 1fr) 14rem;
grid-template-areas:
'head rail'
'prose rail'
'pager rail';
column-gap: clamp(2rem, 4vw, 4rem);
}
/* 契约明确允许 outline 为空（无标题短文、以及只有 h3 没有 h2 的文章）——
那时模板不输出