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

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

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

   **--ink-3 只准出现在白面上。**

   这一版页面底和内容面都是纯白，所以正常用是够的（白底 4.82:1）。
   但 --surface-2（#f7f7f5）已经在 4.49:1 了，差 0.01 不合格——
   而代码块、表头、引用块都铺在 --surface-2 上。
   所以那几处里面的次要文字一律走 --ink-2，不走 --ink-3。

   ── 对比度：这一版不需要任何手脚 ────────────────────────────────────

   博客版式和首页的强调色（橙 / 红）在白底上只有 3.58 / 4.33:1，
   所以那两个文件里到处是"强调色只能当底不能当字"的绕行。
   这一版的 --accent 是深墨蓝 #1e3a5c，白字压上去、压在白底上都是 11.57:1，
   两种用法一次通过。所以下面可以放心地 .read-prose a { color: var(--accent) }，
   不需要像 blog.css 那样把每个 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 是白面上（4.82:1），这一条成立的前提是它们不在 --surface-2 里。 */
.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); }

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

   比例写成 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);
}

/* --- 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 当色块是安全的：11.57:1，不涉及文字对比度。
 */
.read-prose h2 {
  margin-top: var(--gap-5);
  margin-bottom: var(--gap-3);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--accent);
  font-size: 22px;
  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);
  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.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; }

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

.read-prose blockquote {
  margin: var(--gap-4) 0;
  padding: var(--sp-1) 0 var(--sp-1) var(--gap-3);
  border-left: 3px solid var(--accent);
}
/* 引用块里的文字不换色。
   换成 --ink-3 是常见做法，但那样会掉到 4.82: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);
  color: var(--accent);
}
.read-pages > [aria-current] {
  border-color: var(--accent);
  background: var(--accent);
  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. 文章脚：标签、上下篇
   ========================================================================== */

.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-dk：--accent 只有 11.57:1 的底，
     而这行字是压在 #eef2f7 上的，两者都合格，取深的那个更稳。
     （对比度是"字色 vs 底色"这一对的关系，和"白字压强调色"不是一回事。） */
  color: var(--accent-dk);
}
.read-tags a:hover {
  background: var(--accent);
  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); }

/* 头像。核心给的是 <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); }

.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);
  /* 白字压 --accent：这一版是 11.57:1，不需要像首页那样绕 */
  background: var(--accent);
  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（白底 4.82:1）而不是"更该用"的 --line-2。
     写成 --line-2 才是第一直觉——一个灰得几乎看不见的大数字，
     纯装饰，不承载信息。但它过不了对比度检查，而且是**该**过不了：
     4.82: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; }
  .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;
  }
}