3.2.61 修 h2/h3 层级倒挂：h2 提到 24/700，h4 降到 500 参与分层 #29

3.2.60 我自己造出的问题：只把 h3 提到 20px/600，h2 一直是 20px/500
⇒ 两级同字号、h3 还粗 100，三级标题比二级更抢眼，层级是倒的。

根因不是实现难，是判据漏了：3.2.60 写了 52 条断言全绿，但**没有任何
一条断言 h2 > h3**（只查了 h3 > 正文），倒挂在全绿里完全隐形。

改法（用户选 D 方案，并要求 h4 一起调）
  h2  24px / 700 / 左 5px 蓝条 + 浅灰底（行高 41→46）
  h3  20px / 600 / 左 3px 蓝条 + 底 1px 细线，无底色
  h4  17px / 500 / 纯文字
  p   16px / 350

两处细节的理由
  · h4 600→500：600 与 h3 同重，只剩 3px 字号差，看着像"同一级被缩小"。
    降到 500 让字重也参与分层；仍明显重于正文 350（差 150），不会糊回正文。
  · h2 行高 41→46：24px 字配 41px 行高，灰底上下各只剩 8.5px、看着发扁。

写进注释的两条铁律
  ① 字号与字重必须同时严格递减：24>20>17>16、700>600>500>350
  ② 装饰强度也递减：蓝条+灰底 > 蓝条+细线 > 无 > 无
  任一级调了要回头核对相邻两级，不能只盯自己那一级。

验证
  · _geom361_route.js  56 / 0（双端面，新增 G1~G8 层级递减 + H 装饰 + I 行高）
    G7/G8 是「严格」递减，不允许相等 —— 只写 >= 的话 h2=h3=20px 照样能过
  · _falsify361.js     10 / 10
    R1 = 把整份 CSS 退回 3.2.60 的倒挂状态 ⇒ 56→40，红 16 条，G1/G2 命中
    （这一项通过才证明上一轮的盲区真的堵住了）
  · _css360_selfcheck.js  28 / 0（改动后它主动报红提示 h4 期望过期，更新后全绿）

assets/css/site.css

@@ -125,30 +125,53 @@
   margin: 0;
 }
 
-/* 正文二级标题：左侧蓝条 + 浅灰底，横向铺满（负 margin 吃掉正文的 16px 内距） */
+/* 正文二级标题：左侧蓝条 + 浅灰底，横向铺满（负 margin 吃掉正文的 16px 内距）
+ *
+ * 3.2.61（工单 #29 追加）：字号 20→24、字重 500→700。
+ * 🔴 这是 3.2.60 留下的层级倒挂的修复：3.2.60 把 h3 提到 20px/600，
+ *    而 h2 一直是 20px/500 —— 结果 h2 和 h3 同字号、h3 还更粗 100，
+ *    三级标题比二级标题更抢眼。用户一眼就看出"h3 比 h2 还大"。
+ *    根因是当时只动了 h3，没把 h2 一起拉起来，而且判据里
+ *    **没有任何一条断言 h2 > h3**，所以 52 条全绿也照样漏了。
+ * ⇒ 往后调任一标题级别，必须同时断言相邻两级的**字号 + 字重**
+ *   都单调递减（见 _geom361_route.js 的 G 组）。
+ *
+ * 行高 41→46：24px 字配 41px 行高，上下各只剩 8.5px，灰底看着发扁；
+ * 46px 让上下各留 11px。这个 11px 是**算出来的**：
+ *   24px 字的实际墨迹高约 24×0.88 ≈ 21px（中文黑体 ascent+descent 之内），
+ *   行框 46px 减 21px 再除以 2 ≈ 12.5px，与 3.2.60 的 20px/41px
+ *   （20×0.88=17.6，41-17.6=23.4，/2≈11.7px）基本持平。 */
 .k-main .details .article .content h2 {
   margin: 16px -16px;
   padding: 0 10px;
   border-left: 5px solid #00a2ff;
   background-color: rgba(243, 243, 243, 0.7);
-  font-size: 20px;
+  font-size: 24px;
-  line-height: 41px;
+  font-weight: 700;
+  line-height: 46px;
 }
 
 /* ── 正文三级标题：左侧细竖线 + 底部细线（3.2.60 / 工单 #29）
  *
- * 改之前 h3 只有 `font-size:18px; font-weight:500`，没有任何装饰，
+ * 3.2.60 之前 h3 只有 `font-size:18px; font-weight:500`，没有任何装饰，
  * 而正文是 16px/350 —— **只差 2px 字号、150 字重**，放在长文里根本分不出来。
- * 对比之下 h2 有蓝条+灰底，越显得 h3 就是"一段稍微粗一点的字"。
  *
- * 层级梯度（改后）：
+ * 层级梯度（3.2.61 定稿，三级 + 四级同步调整）：
- *     h2  20px / 500 / 左 5px 蓝条 + 浅灰底   ← 最重，分节
+ *     h2  24px / 700 / 左 5px 蓝条 + 浅灰底   ← 最重，分节
  *     h3  20px / 600 / 左 3px 蓝条 + 底 1px 细线，无底色
- *     h4  17px / 600 / 纯加粗
+ *     h4  17px / 500 / 纯文字，无装饰
  *     p   16px / 350
  *
+ * 🔴 两条铁律（3.2.60 违反第 1 条，导致 h3 比 h2 还抢眼）：
+ *    ① 字号与字重**同时**严格递减：24>20>17>16、700>600>500>350；
+ *    ② 装饰强度也递减：蓝条+灰底 > 蓝条+细线 > 无 > 无。
+ *    任一级调了，必须回头核对相邻两级的下行关系，别只盯自己那一级。
+ *
  * 为什么 h3 竖线用 3px 而不是 h2 的 5px：同族但更轻，一眼能看出次一级。
  * 为什么 h3 不加底色：h2 已经有灰底，h3 再铺一层整篇会碎成一块块。
+ * 为什么 h4 用 500 而不是 600：600 与 h3 同字重，就只剩字号 3px 的差别，
+ *    视觉上"像同一个级别被缩了一点"。降到 500 后，字重也参与分层。
+ *    500 仍然明显重于正文的 350（差 150），不会糊回正文里去。
  *
  * ⚠️ 特异性必须是 (0,4,1) 起步、并把字号/字重一起写死：
  *    kratos 的 `.k-main .details .article .content h3` 是 (0,4,1)，
@@ -165,15 +188,18 @@
   line-height: 32px;
 }
 
-/* ── 正文四级标题：17px / 600（工单 #29）
+/* ── 正文四级标题：17px / 500（3.2.61 定稿）
  *
- * h3 涨到 20px 后，h4 若还是 16px 会跟正文挤在一起、层级断层，
+ * 字号 17px 保持不动（h3 20px 之下、正文 16px 之上的唯一合理档位，
- * 所以同步上调到 17px 并加重字重。不加任何装饰 —— 到第四级
+ * 再往下压到 16px 就与正文同大、层级直接断层）。
- * 再加线就会满屏都是线。 */
+ * 字重 600 → 500：600 与 h3 完全同重，等于只有 3px 字号差，
+ * 看着像"同一级被缩小"，不像下一级。降到 500 让字重也参与分层。
+ *
+ * 不加任何装饰 —— 到第四级再加线就满屏都是线了。 */
 .k-main .details .article .content h4 {
   margin: 20px 0 12px;
   font-size: 17px;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 30px;
 }
 

style.css

@@ -1,7 +1,7 @@
 /*
 Theme Name: Kratos_Yang
 Text Domain: kratos_Yang
-Version: 3.2.60
+Version: 3.2.61
 Requires PHP: 7.0
 Description: 这是一个Kratos主题的分支版本，用来增加一些定制化功能。
 Tags: 博客, 双栏, 响应式, 自定义背景, 自定义颜色, 自定义图标, 自定义菜单, 特色图像, 收录优化, 邮件中心, 主题选项, 小工具, 文章置顶, 无障碍友好