/* ==========================================================================
   文章详情版式（blog-02-detail） / 页面
   --------------------------------------------------------------------------
   只按需加载：inc/enqueue.php 里 read 和 page 两种版式都引这个文件。
   对应模板：single.php / page.php。

   结构是两栏：正文（.read-main）+ 右侧栏（.aib-side）。
   正文栏由 --read-measure 钉死在 720px，见 style.css 的令牌段。

   ── 一条贯穿全文件的约束 ──────────────────────────────────────────────

   **--ink-3 在这一版里两个底都站得住，所以这条约束已经撤了。**

   这条原来是"只准出现在白面上"，理由是 --surface-2（#f7f7f5）差 0.01 不合格
   （注释里记的是 4.49:1）——那个数是照上一版墨色量的，已经不成立：
   这一版自己的 --ink-3 是 #6b6e74（见 style.css 的 .layout-read 令牌段），
   白面 5.11、--surface-2 4.77，两个都过。
   （这几个数是 check-contrast.php 第 4 节第二张表打出来的。）
   ⚠ 别拿这条旧规矩去改代码——按它去把 --ink-3 换成 --ink-2，
     改的是一处**已经合格**的地方，只是白折腾一圈。

   至于代码块、表头、引用块里现在确实写的 --ink-2，那是层级的活：
   那些块里的字是正文，本来就该比元信息重一档。

   ── 强调色：为什么这里也用 --accent-btn ──────────────────────────────

   这一版自己的 --accent 是深墨蓝 #1e3a5c，白字压上去、压在白底上都是
   11.57:1，两种用法都过——所以**只跑默认设置的话**，写成 var(--accent)
   一点问题都没有。

   但强调色是后台可选的。站长一旦在「参数设置」里挑了朱红，
   body.aish-accent-vermilion 就把 --accent 换成 #de3f27，
   而它的权重 (0,1,1) 压过 .layout-read 的 (0,1,0)：
   .read-prose a 立刻变成亮朱红压白底，4.33:1。

   所以这里不能按"我这个版式的颜色够深"来判断——那个判断在别人
   改一个下拉框之后就失效了。凡是**要压字、或者自己就是字**的位置
   一律走 --accent-btn：默认档下它等于这个墨蓝，视觉上零变化；
   换成朱红时它自动跟到 #bf3220，也过。

   描边、focus 环、hover 边框不动，那些不承载文字。
   ========================================================================== */

/* ==========================================================================
   1. 两栏骨架
   ========================================================================== */

/* 正文栏定宽。width: 100% + max-width + margin-inline: auto，
   而不是只写 max-width + auto 外边距。

   三个边界情况要同时对：
     - 视口落在两个断开点中间（比如 1180px）时，网格轨道比 720 宽，
       正文自己居中在那个轨道里，不会跟着变宽；
     - ≤900px 网格塌成一栏时，正文仍然居中，不会拉成满宽；
     - 轨道比正文窄时（390px 的手机上），正文必须**跟着轨道一起缩**。

   width: 100% 那一句就是为第三种情况写的，缺了它会出大问题：
   .read-main 是网格子项，而网格子项默认 justify-self: stretch 才会撑满轨道；
   一旦写了 margin-inline: auto，stretch 就失效了，元素的宽度会退回
   **fit-content**——也就是"内容想要多宽就多宽"，max-width 只是给它封顶。
   于是面包屑里那行不换行的长标题（443px 左右）把整栏顶到 493px，
   在 390px 的手机上整页横向滚动，标题被切掉一截。
   桌面上完全看不出来，因为那时候 fit-content 早就被 max-width 封在 720 了。

   min-width: 0 是给长英文单词/URL 留的，和上面那句无关。 */
.read-main {
  min-width: 0;
  width: 100%;
  max-width: var(--read-measure);
  margin-inline: auto;
}

/* 正文栏上下留白。用长写属性，不能用 padding 简写——
   这个元素同时带着 .aib-shell，而 .aib-shell 的左右内边距是 padding 简写写的，
   这里的简写会把左右抹成 0（blog.css 里同样的坑，注释更详细）。 */
.read-wrap {
  padding-top: var(--gap-4);
  padding-bottom: var(--gap-6);
}

/* 面包屑压成一行。
   最后一级是文章标题，而它下面紧跟着就是同一个标题的 <h1>——
   长中文标题在 720px 里会把面包屑顶成两行，两行重复的标题。
   这里只压最后一级（[aria-current]），前面几级正常显示；
   flex-wrap: nowrap 是为了让它"缩"，而不是"换行"——
   默认的 min-width: auto 会让 flex 子项拒绝收缩，必须先归零。 */
.read-crumb .aib-crumb {
  flex-wrap: nowrap;
  margin-bottom: var(--gap-3);
}
.read-crumb .aib-crumb [aria-current] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   2. 文章头
   ========================================================================== */

.read-head { margin-bottom: var(--gap-4); }

.read-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* 元信息：时间 / 分类 / 作者。
   --ink-3 压在 .read-main 的白面上（这一版正文区是纯白，
   和 --bg 同色），实测 5.11:1。 */
.read-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--gap-2);
  font-size: 13px;
  color: var(--ink-3);
}
.read-meta a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.read-meta a:hover { color: var(--accent-btn); }

/* 特色图。压在整个正文栏宽上，不做投影——
   "纯白纸"这一版里，图片自己就是内容，加装饰反而像广告位。

   比例写成 1200 / 630 而不是"16 / 9"，因为 add_image_size('aish-hero')
   就是按这个尺寸裁的（它同时是 Open Graph 的标准尺寸，40:21）。
   这两个数字**必须**一样：写 16:9 的话图还是那张 1200×630 的图，
   但会被 object-fit: cover 上下各切掉 3%，正好切在标题字上。
   故意取整成 16:9 是这里最容易犯的一个错——两个比例看着差不多，
   差的那一点却刚好落在裁切边缘。 */
.read-hero {
  margin-bottom: var(--gap-4);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2);
}
.read-hero img {
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

/* ==========================================================================
   3. 正文排版
   --------------------------------------------------------------------------
   这一节是整份文件的重点。所有规则都挂在 .read-prose 下面，
   不用元素选择器直接作用于全站——.read-prose 之外还有导航、页脚、
   侧栏，那些地方的 p / ul / a 有自己的样子。
   ========================================================================== */

.read-prose {
  font-size: 16px;
  /* 中文正文的行高比西文要紧一点但不能太松：1.9 是纯文字的上限，
     再松段落之间就散了，读起来会断气。 */
  line-height: 1.9;
  /* 正文色用 --ink-2（#24272c，15:1），标题用 --ink（#101113，19:1）。
     两者都很深、数值上差得不多——这是**有意**的：正文就该接近黑，
     层级靠字号和字重撑，不靠把正文调浅。把正文调灰是很多主题
     读起来累的根源。 */
  color: var(--ink-2);
  /* 长串不断行就撑破这一栏。overflow-wrap 是继承的，写在容器上
     一句管住所有后代；磁力链那一条在 3.3b 里另写了 anywhere——
     那个比这个更强，两者不冲突（见那一节的说明）。 */
  overflow-wrap: break-word;
}

/* --- 3.1 段落与节奏 ----------------------------------------------------- */

.read-prose > * + * { margin-top: var(--gap-3); }
/* 标题自己的上下边距比通用的那条大得多，所以单独管，见下。 */
.read-prose > p + p { margin-top: var(--gap-2); }

/* --- 3.2 标题 ----------------------------------------------------------- */

/*
 * h2 左边那条竖线是这一版唯一的装饰，它承担一个很实际的功能：
 * 中文长文里小节标题和正文的字号差距不大（22px vs 16px），
 * 通读时很容易错过。一条 3px 的墨蓝竖线让"这里换节了"在一屏之外也认得出。
 * 竖线取 --accent 是安全的：它不压字，按非文字门槛 3:1 判。
 * 这一版默认的墨蓝在白面上 11.57:1，就算站长换成最浅的那一档强调色，
 * 也仍然在 3:1 之上——这个位置各档都会被 check-contrast.php 量一遍
 * （第 1 节的"品牌色当图形"那两条）。
 */
/*
 * h1：**正文里的**一级标题。
 *
 * ═════════════════════════════════════════════════════════════════════
 * 这一条为什么必须存在（0.23.0 补的，之前一条规则都没有）
 * ═════════════════════════════════════════════════════════════════════
 * 在此之前 .read-prose h1 在整个 assets/css/ 里零命中，于是正文里的
 * <h1> 退回浏览器默认：2em（= 32px）、bold、而外边距被 style.css
 * 那句全局 reset（h1,h2,h3,h4,p… { margin: 0 }）抹平。
 *
 * 页面上那个 32px 的 .read-title 是模板印的站点标题，正文里的 h1 是
 * 文档自己写的一级标题——两个一样大、一样粗、中间零间距，
 * 看起来就是"标题很粗、字体过大、间距过小、很挤"。
 *
 * 0.23.0 起，重复的那一个已经在渲染时被摘掉了
 * （aish_drop_dup_h1()，见 inc/prose.php）。但这一条规则
 * 仍然要有，而且**不是兜底**：文档不以标题开头、或者一节一个小标题
 * 用 h1 写的，都会走到这里。少了它，那些情况又会退回 32px 无间距。
 *
 * 26px 这个数是有位置的：夹在 .read-title（32，页面标题）和
 * h2（20，小节）之间。比页面标题小一档，比小节大一档——
 * 层级一眼能认出来，谁也不用跟谁比字重。
 */
.read-prose h1 {
  margin-top: var(--gap-5);
  margin-bottom: var(--gap-3);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

/*
 * h2：小节标题。
 *
 * 0.23.0 从 22px 收到 20px、竖线的内边距从 --sp-3 收到 --sp-2。
 * 原因是站长反馈的「很挤」还有第二层：正文 16px 配 22px 的粗体，
 * 跨度偏大，加上左边那根 3px 的竖线，整行看着很重、很占地方。
 * 20px 仍然比正文明显大（层级没丢），但一排下来不再有那种压迫感。
 * 竖线本身留着——它承担的功能在下面那段注释里，和字号是两件事。
 */
.read-prose h2 {
  margin-top: var(--gap-5);
  margin-bottom: var(--gap-3);
  padding-left: var(--sp-2);
  border-left: 3px solid var(--accent);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

.read-prose h3 {
  margin-top: var(--gap-4);
  margin-bottom: var(--gap-2);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--ink);
}

.read-prose h4 {
  margin-top: var(--gap-3);
  margin-bottom: var(--gap-2);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

/* 正文第一个元素不该有上边距——那会在标题和正文之间凭空多出一段空白，
   而开头恰恰是最不该有空白的地方。h2 那条同理，否则顶部会挂一条悬空的竖线。 */
.read-prose > :first-child { margin-top: 0; }

/* --- 3.3 链接 ----------------------------------------------------------- */

/*
 * 正文里的链接必须能认出来，而且**不能只靠颜色**。
 * WCAG 1.4.1 要求信息不能只通过颜色传达：色觉障碍用户看到的是
 * 一段普通的黑字，根本不知道中间有个链接。加上下划线之后，
 * 颜色才只是"锦上添花"，而不是唯一的线索。
 *
 * 下划线用 text-underline-offset 拉开一点、再压细，
 * 中文的字身比西文满，贴着底线的下划线会切成笔画。
 */
.read-prose a {
  color: var(--accent-btn);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.read-prose a:hover {
  text-decoration-color: currentColor;
}

/* --- 3.3b 资源链接：网盘 / 磁力 -----------------------------------------
   类名由 inc/setup.php 的 aish_content_link_kinds() 打上（挂在 the_content
   上），这里只管它们长什么样。
   ---------------------------------------------------------------------- */

/*
 * 为什么值得单独做一套：这一站的文章（尤其是资源分享类）正文里，
 * 网盘分享页和磁力链是**内容本身**，不是"顺便提一句的参考链接"。
 * 原本它们和普通外链长得一模一样——一行强调色的字加一条下划线，
 * 读者要判断"哪条是网盘、哪条是磁力"只能把地址逐个读完。
 *
 * 两个色对都是**现成的、已经在硬指标表里核过 90 种状态**的组合，
 * 一条新颜色都没引入（check-contrast.php 的 $mustPass）：
 *   常态   --accent-dk 压 --accent-soft
 *   hover  --on-accent 压 --accent-btn
 * 和 .read-tags a 用的是同一对，所以强调色换成任何一档，
 * 这一块跟着走的和标签区一模一样，不会单独歪掉。
 *
 * ⚠ 下划线**保留**，而且改成 currentColor（比普通链接那条 40% 的
 *   下划线更实）。WCAG 1.4.1：信息不能只靠颜色传达——加了底色也一样，
 *   色觉障碍读者看到的是一个没有下划线的色块。底色是锦上添花，
 *   下划线才是那个"这是链接"的线索。
 *
 * box-decoration-break: clone：长地址会在胶囊内部折行，不 clone 的话
 * 底色在折行处连成一整块、左右内边距只作用于首尾，看着像一段
 * 被涂了色的文字；clone 之后每一行都是完整的胶囊。
 * （-webkit- 那个前缀是给 Safari 的，它到现在还只认带前缀的。）
 */
.read-prose a.aib-link--pan,
.read-prose a.aib-link--magnet {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-dk);
  text-decoration-color: currentColor;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.read-prose a.aib-link--pan:hover,
.read-prose a.aib-link--magnet:hover {
  background: var(--accent-btn);
  color: var(--on-accent);
}

/* 磁力链用等宽字。
   理由不是"技术感"：magnet:?xt=urn:btih: 后面那 40 位哈希是给人
   核对用的（对上一条、对下一条，看是不是同一个种子），而比例字体
   里 0/O、1/l/I 分不出来，核对这件事就做不了。
   字号降半档：那串哈希本来就比正文长得多，16px 会让它占掉半屏。

   overflow-wrap: anywhere 是**必须**的，不是保险——磁力链中间没有
   一个空格，浏览器默认只在空格处断行，于是一条磁力链会横向撑破
   720px 的正文栏、把整页顶出横向滚动条。搜索结果卡片那边是同一笔账
   （style.css 的 .aib-list-title 记过，用的是同一个值）。 */
.read-prose a.aib-link--magnet {
  font-family: var(--mono);
  font-size: .875em;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

/* --- 3.4 列表 ----------------------------------------------------------- */

/*
 * **这一段不能省。** style.css 的基础重置里有
 *     ul, ol { padding: 0; list-style: none; }
 * 那是给导航和卡片列表准备的（那些地方本来就不该有圆点），
 * 但它同时也作用于**正文里**的列表——文章里的分点会变成
 * 一段没有项目符号、也没有缩进的裸文字，几条并列的内容糊在一起。
 *
 * 这里把它还原回来。不用 list-style: revert，因为要明确指定
 * 每一层的符号形状（嵌套三层都用同样的圆点会分不出层级）。
 */
.read-prose ul,
.read-prose ol {
  margin-top: var(--gap-3);
  margin-bottom: var(--gap-3);
  padding-left: 1.6em;
}
.read-prose ul { list-style: disc; }
.read-prose ol { list-style: decimal; }
.read-prose li + li { margin-top: var(--sp-2); }

/* 嵌套列表的上下边距要比顶层小：顶层列表是"内容块之间"，
   嵌套列表是"同一个块内部"，用同一个值会让层级读起来是平的。 */
.read-prose li > ul,
.read-prose li > ol {
  margin-top: var(--sp-1);
  margin-bottom: 0;
}
.read-prose ul ul { list-style: circle; }
.read-prose ul ul ul { list-style: square; }
.read-prose ol ol { list-style: lower-alpha; }

/* 项目符号和序号用强调色。
   它是**符号**，不承载信息——去掉它这一条照样读得懂，所以按图形的门槛
   判。取 --accent-btn 而不是 --accent：两档在这个位置都过，
   但 --accent-btn 是"当文字用"的那一档，一列圆点里出现品牌亮色
   反而比正文还抢眼，而列表符号不该是页面上最亮的东西。
   对比度对：--accent-btn 压白面，硬指标表里已有这一条。 */
.read-prose li::marker { color: var(--accent-btn); }

/* 正文里的粗体提一档墨。
   正文是 --ink-2（#24272c），加粗之后还是同一个色，只靠字重区分——
   中文没有西文那种明显的笔画对比，16px 下的粗体字重差在有些屏幕上
   几乎看不出来。提到 --ink（#101113）之后"这句是重点"才真的立得住。
   两档墨都是硬指标表里核过的（各自压 --surface）。 */
.read-prose strong,
.read-prose b { color: var(--ink); }

/* --- 3.5 引用 ----------------------------------------------------------- */

/*
 * 引用块。左边那道竖线是原有的，0.22.0 在此基础上补了浅底和圆角。
 *
 * 为什么值得补：这一站的文章里，引用块几乎总是"提示 / 注意 / 划重点"
 * （AI 写的资源文章尤其爱这么用）。只有一道竖线的时候，一块提示读起来
 * 和正文段落几乎一样——竖线在 720px 的一行里只占最左边那 3px，
 * 通读时一晃就过去了。加了底之后整块"凸"起来，是**块**而不是一行字。
 *
 * 底色取 --accent-soft：它和左边那道 --accent 的竖线本来就是一套
 * （同一档强调色的浅底），竖线和块面同色系，看着是一个整体。
 *
 * ⚠ 底是新的：块里的字是 --ink-2，这一对（--ink-2 / --accent-soft）
 *   在 check-contrast.php 的硬指标表里**新加了一条**，90 种强调色状态
 *   逐格算过。加这一条不是因为"大概没问题"——引用块里的代码块
 *   （--ink 压 --surface-2）、链接（--accent-btn 压 --accent-soft）
 *   各自都有各自的条目，字压底这一对同样要有。
 */
.read-prose blockquote {
  margin: var(--gap-4) 0;
  padding: var(--sp-3) var(--gap-3);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--accent-soft);
}
/* 引用块里的文字不换色。
   换成 --ink-3 是常见做法，但那样和正文的对比度会拉开一大截
   （--ink-3 是 5.11:1，正文用的 --ink-2 是 14.98:1），
   读者会以为这段是"次要信息"而不是"引来的话"。
   靠左边的竖线、缩进和底色区分就够了。 */
.read-prose blockquote > * + * { margin-top: var(--gap-2); }

/* --- 3.6 代码 ----------------------------------------------------------- */

.read-prose code {
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: .9em;
  /* 代码块底是 --surface-2，不是白面，所以这里必须用 --ink */
  color: var(--ink);
}

.read-prose pre {
  margin: var(--gap-3) 0;
  padding: var(--sp-5);
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink);
}
/* pre 里面再套一层 padding 就会双份内边距，圆角也会变成两层。 */
.read-prose pre code {
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: inherit;
  color: inherit;
}

/* 横向滚动是**故意**留在这里的。
   style.css 里给侧栏写的是"绝不引入嵌套滚动区"，那是另一回事：
   这里的替代方案是整页横向滚动——两害相权，让一个代码块自己滚更轻。
   代码行的换行是不能做的：换行之后粘贴出去就不对了。 */

/* --- 3.7 图与图表 ------------------------------------------------------- */

.read-prose img {
  margin: var(--gap-3) auto;
  border-radius: var(--radius);
}

.read-prose figure { margin: var(--gap-4) 0; }
.read-prose figure img { margin: 0 auto; }

.read-prose figcaption {
  margin-top: var(--sp-2);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
  /* 图注在纯白上，--ink-3 合格 */
  color: var(--ink-3);
}

/* --- 3.8 表格 -----------------------------------------------------------
   .aib-table-wrap 由 inc/setup.php 的 aish_content_wrap_tables() 加进来，
   这里只负责它在正文里的间距。表格本身的观感在 style.css 的 .aib-table。
   ---------------------------------------------------------------------- */
.read-prose .aib-table-wrap { margin: var(--gap-4) 0; }

/* --- 3.9 多页文章的分页 -------------------------------------------------
   只有正文里插了 <!--nextpage--> 才有输出，即 wp_link_pages()。

   样式刻意写成**按元素**（a / [aria-current]）而不是按类名：
   wp_link_pages() 输出的类名是核心自己的（post-page-numbers / current），
   它随 WordPress 版本变过，而这里没有本地 WordPress 可以对着验证。
   元素和 aria-current 是语义，不会变——核心换十次类名，
   这两条规则照样命中。
   ---------------------------------------------------------------------- */

.read-pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin: var(--gap-4) 0;
  font-variant-numeric: tabular-nums;
}
.read-pages a,
.read-pages > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--ink-2);
}
.read-pages a:hover {
  border-color: var(--accent-btn);
  color: var(--accent-btn);
}
.read-pages > [aria-current] {
  border-color: var(--accent-btn);
  background: var(--accent-btn);
  color: var(--on-accent);
  font-weight: 600;
}

/* --- 3.10 分隔线 -------------------------------------------------------- */

.read-prose hr {
  margin: var(--gap-5) 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* --- 3.11 Gutenberg 的块对齐类 ------------------------------------------
   编辑器里点"居中/右对齐"会给元素加这些类。它们在 WP_OWNED 的通配里，
   所以核验页的类名检查会跳过——但**跳过不等于不用写**：
   不写的话，编辑器里设的对齐在前台就是不生效的，
   而且这种"后台看着对、前台不一样"的问题最难被发现。

   .alignwide / .alignfull 不做通栏：正文栏是 720px 定宽居中，
   让它俩突破到视口宽需要 width: 100vw + 负 margin，
   在桌面端会跑出两栏之外、盖住侧栏，还要靠 overflow 兜底。
   真要做通栏是另一个版式的事，不是这里加两行。
   ---------------------------------------------------------------------- */

.read-prose .has-text-align-center { text-align: center; }
.read-prose .has-text-align-right  { text-align: right; }
.read-prose .has-text-align-left   { text-align: left; }

/* 通栏图在**这一版里**按普通图处理：不突破正文栏。
   见上面那段——这是取舍，不是遗漏。 */
.read-prose .alignwide,
.read-prose .alignfull { margin-left: 0; margin-right: 0; }

/* ==========================================================================
   4. 文章脚：标签、文末广告位、上下篇
   ========================================================================== */

/* 文末广告位的容器（single.php / page.php 里那层 .read-ad）。
   里面是 aish_ad_row() 渲染出来的格子，没配广告时那一格是空的，
   而 .aib-ad-cell:empty{display:none} 在 style.css 里——所以这里
   **没有**也不需要一条 :empty 规则：容器里始终有那个格子节点，
   :empty 永远匹配不上（blog.css 的 .blog-note-ad 记过同一件事）。

   只给 margin-top，不给 margin-bottom：下面是 .read-nav 的 gap-5，
   两个相邻外边距本来就取大的那个，写出来只是多一处要跟着改的数。

   为什么没配广告时**不会**留下一块空白——靠的是外边距穿透：
   没有广告时这一层高度是 0、没有边框也没有内边距，于是它的
   margin-top 会和上下两个外边距合并成**一个** gap-5，和没有这一层
   时一模一样。所以要给这一层加 border / padding / display:grid
   之类的属性时得先想一下：那会让穿透失效，空的时候凭空多出一段
   空白，而这段空白在配了广告的站上永远看不见。 */
.read-ad {
  margin-top: var(--gap-5);
}

.read-foot {
  margin-top: var(--gap-5);
  padding-top: var(--gap-4);
  border-top: 1px solid var(--line);
}

.read-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.read-tags a {
  display: inline-block;
  padding: 3px var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  font-size: 12.5px;
  /* 标签压在自家浅强调底（--accent-soft）上，字色取 --accent-dk。
     这一对（--accent-dk / --accent-soft）在 check-contrast.php 的
     硬指标表里单列了一条，90 种状态逐格算过，全部 ≥ 4.5。
     hover 反过来是白字压力度更大的 --accent-btn，也是单列的一条。
     （对比度永远是"字色 vs 底色"这一对的关系，
       不能拿"白字压强调色"的那个数来套这里。） */
  color: var(--accent-dk);
}
.read-tags a:hover {
  background: var(--accent-btn);
  color: var(--on-accent);
}

/* 上下篇。两块等宽并排，右侧那块文字右对齐——
   视觉上"上一篇在左、下一篇在右"要一眼看出来，
   两块都左对齐的话读者得逐字读才能分辨哪个是哪个。 */
.read-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--gap-5);
}

.read-nav-item {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .16s ease, background-color .16s ease;
}
.read-nav-item:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* 只有一块时不要占满整行——一块占满会让人以为是"一条横条"，
   而它其实是"上一篇"。grid-column 让它待在原来的位置上。

   两条都写死列号，包括看起来"本来就是第一列"的 --prev。
   不写的话 --prev 靠的是自动排布，只有"上一篇"没有"下一篇"时
   确实落在第 1 列、看不出问题——但自动排布的结果取决于源码顺序和
   前面有没有别的网格子元素。写成显式的，这个位置就是声明出来的，
   以后往 .read-nav 里加第三块（比如"相关文章"）也不会把上一篇挤走。 */
.read-nav-item--prev { grid-column: 1; text-align: left; }
.read-nav-item--next { grid-column: 2; text-align: right; }

.read-nav-label {
  display: block;
  font-size: 12px;
  /* 白面上 */
  color: var(--ink-3);
}
.read-nav-title {
  display: block;
  margin-top: var(--sp-2);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
}

/* 没有上一篇时留一个空格子，而不是让"下一篇"跑到左边去。
   位置本身携带信息——它在右半边就说明那是"下一篇"。 */

/* ==========================================================================
   5. 评论
   ========================================================================== */

.read-comments {
  margin-top: var(--gap-6);
  padding-top: var(--gap-5);
  border-top: 1px solid var(--line);
}

.read-comments .comment-list {
  padding-left: 0;
  list-style: none;
}
/* 嵌套回复靠左内边距表示层级，不用竖线——
   嵌套三层之后会出现三道竖线，中文正文里看着很吵。 */
.read-comments .children {
  padding-left: var(--gap-3);
  list-style: none;
}

.read-comments .comment-body {
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
}
.read-comments .comment-body > * + * { margin-top: var(--sp-2); }

.read-comments .comment-author {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.read-comments .comment-author img { display: inline-block; vertical-align: middle; }
.read-comments .comment-metadata {
  font-size: 12.5px;
  /* 白面上 */
  color: var(--ink-3);
}
.read-comments .comment-content { color: var(--ink-2); }
.read-comments .comment-content > * + * { margin-top: var(--sp-2); }
.read-comments .reply { font-size: 13px; }
.read-comments .comment-reply-link { color: var(--accent-btn); }

/* 头像。核心给的是 <img class="avatar avatar-44 photo">，
   圆角和尺寸对齐都写在这里——不加的话头像是个直角方块，
   在全是圆角的面板里显得很突兀。 */
.read-comments .avatar {
  border-radius: var(--radius-pill);
  margin-right: var(--sp-3);
}

/* 楼主自己的回复加一条左线。
   用 --accent 而不是换个背景色：评论区里出现色块会让人以为
   那是一条"被引用的、次要的"内容，而它恰恰是作者本人的话。 */
.read-comments .bypostauthor > .comment-body {
  border-left: 3px solid var(--accent);
  padding-left: var(--sp-4);
}

/* 待审核提示。
   这一条**必须**在（这正是"多层审核"对读者那一侧的接口）：
   评论提交后如果被拦下来又不告诉用户，他会以为提交失败了，
   然后一遍一遍重发。核心给的文案和这个类名都现成，只是没人给它样式。 */
.read-comments .comment-awaiting-moderation {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  font-size: 13px;
  color: var(--accent-dk);
}

/* 隐私勾选框。核心把它和说明文字塞在同一个 <p> 里，
   不处理的话复选框和文字会基线对齐成一高一低。 */
.read-comments .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}
.read-comments .comment-form-cookies-consent input { margin-top: 5px; flex: none; }
.read-comments .comment-form-cookies-consent label {
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.7;
}

.read-comments .comment-respond { margin-top: var(--gap-5); }
.read-comments-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.read-comments .comment-reply-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.read-comments .comment-notes,
.read-comments .logged-in-as {
  margin-top: var(--sp-2);
  font-size: 13px;
  color: var(--ink-2);
}
.read-comments-closed {
  padding: var(--sp-5) 0;
  font-size: 14px;
  color: var(--ink-2);
}

/* 表单控件。WP 默认给的是无样式的裸控件，
   一行行贴在白底上会显得整个评论区"没做完"。 */
.read-comments input[type="text"],
.read-comments input[type="email"],
.read-comments input[type="url"],
.read-comments textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 14.5px;
  color: var(--ink);
}
.read-comments input:focus,
.read-comments textarea:focus {
  border-color: var(--accent);
  outline: none;
}
.read-comments .comment-form > p { margin-top: var(--sp-4); }
.read-comments .comment-form label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: 13.5px;
  color: var(--ink-2);
}
/* 必填项那个星号。核心给的是 <span class="required">*</span>——
   不给它颜色的话，它和标签文字同色，读者根本注意不到"哪个必须填"，
   而这恰恰是表单被反复提交失败的最常见原因。 */
.read-comments .required { color: var(--accent-btn); }

.read-comments .form-submit { margin-top: var(--sp-5); }
.read-comments .submit {
  padding: 0 var(--sp-6);
  height: 40px;
  border: 0;
  border-radius: var(--radius-sm);
  /* 白字压实底：默认档是墨蓝 11.57:1，换成朱红档时 --accent-btn 自动
     跟到 #bf3220（5.69:1），两端都过。 */
  background: var(--accent-btn);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--on-accent);
}
.read-comments .submit:hover { background: var(--accent-dk); }

/* ==========================================================================
   6. 页面（page.php）
   --------------------------------------------------------------------------
   这一节**没有规则，是故意的**。

   页面和文章共用同一份正文排版，差别只有"少了什么"：
   页面没有日期、没有分类、没有上下篇、没有标签。少的那几块
   由 page.php 决定不输出，不需要任何 CSS 去抵消。

   留这一节是想说明一个更一般的取舍：**能用"不输出"解决的，
   就不要用"输出了再隐藏"解决。** 一条 .page-title { display: none }
   看着也行，但读屏软件仍会念出来、爬虫仍会读到，而且半年后
   没人记得那行是干嘛的。模板里少写一个 <p> 则什么副作用都没有。

   页面头部直接用 .read-head，和文章一样——一个 <h1> 加下面一段正文，
   这两个页面类型的需求没有差别，为它们分一个类纯属自找麻烦。
   ========================================================================== */

/* ==========================================================================
   7. 404
   ========================================================================== */

.notfound {
  padding: var(--gap-6) 0 var(--gap-7);
  text-align: center;
}

.notfound-code {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  /* 用 --ink-3（白底 5.11:1）而不是"更该用"的 --line-2。
     写成 --line-2 才是第一直觉——一个灰得几乎看不见的大数字，
     纯装饰，不承载信息。但它过不了对比度检查，而且是**该**过不了：
     5.11:1 的 56px 灰字看着仍然是大背景的一部分，
     而 --line-2 的 1.5:1 在低视力、或者屏幕反光的情况下就是彻底看不见了。
     "看不见也无所谓"和"看不见"是两回事，前者是设计意图，
     后者是缺陷——而它们长得一模一样，所以选前者。 */
  color: var(--ink-3);
  user-select: none;
}

.notfound-title {
  margin-top: var(--gap-3);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
}

.notfound-desc {
  margin-top: var(--gap-2);
  margin-inline: auto;
  max-width: 40em;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-2);
}

/* 404 上放完整的多类型搜索区：
   用户点进来的原因十有八九是"某个资源没搜到"，这时候
   给他一个能立刻改词重搜的框，比给一句"你走错路了"有用得多。 */
.notfound-search {
  margin: var(--gap-5) auto 0;
  max-width: 640px;
  text-align: left;
}

.notfound .aib-btns {
  margin-top: var(--gap-4);
  justify-content: center;
}

/* 最新收录。用 .aib-list 那套现成的列表样式（style.css 的共用层），
   这里只负责把它和上面那块拉开距离——
   它是"接着找"的最后一条出路，要给够留白才不会被当成页脚的一部分。
   左对齐：上面的 404 那块是居中的，这一块是列表，
   居中的列表读起来每一行都要重新找行首。 */
.notfound-recent {
  margin-top: var(--gap-6);
  padding-top: var(--gap-5);
  border-top: 1px solid var(--line);
  text-align: left;
}

/* ==========================================================================
   8. 窄屏
   ========================================================================== */

@media (max-width: 900px) {
  /* 网格塌成一栏，侧栏掉到正文下面。
     这时候正文仍然由 .read-main 的 max-width 收在 720px 并居中。 */
  .read-wrap { padding-top: var(--gap-3); }
}

@media (max-width: 640px) {
  .read-title { font-size: 24px; }
  .read-prose { font-size: 15.5px; line-height: 1.85; }
  /* h1 跟着 .read-title 那一档一起降：24 的页面标题配 26 的正文一级标题
     是反的，窄屏上还会把标题顶成三行。 */
  .read-prose h1 { font-size: 21px; }
  .read-prose h2 { font-size: 19px; }
  .read-prose h3 { font-size: 17px; }

  /* 上下篇改成一列：并排的两块在 375px 下各只剩 160px 左右，
     标题会被折成四五行，两块高度还不一样，看着像没对齐。 */
  .read-nav { grid-template-columns: minmax(0, 1fr); }
  .read-nav-item--next {
    grid-column: 1;
    text-align: left;
  }
}