/* ==========================================================================
   home.css —— 首页专栏化版式（BK-S6-06）
   用户：src/pages/index.astro、/articles/、六个 /col/<slug>/ —— 一共 8 个页面。
   视觉真源：design/专栏化首页.v2.dc.html 画板 2a（桌面 1280）/ 2c（移动端 375）；
             1c（专栏落地页）/ 1e（全部文章落地页）v2 没重画，仍看 v1 那份。
             数值照抄画板，改之前先回去看稿。

   与 base.css 的分工：站头、站脚、`.rows/.row*` 列表行、`.kicker/.byline/.avatar/.state-pill`
   这些**跨页面**的东西留在 base.css；本文件只装这 8 个页面独有的版式。
   挂载走 src/lib/asset-version.mjs 的 HOME_CSS_HREF（内容哈希戳，别退回裸路径）。

   断点沿用书籍页那套（1120 / 900 / 700），不另开一套口径。
   ========================================================================== */

/* ---------- 通用：区块外壳与区头 ---------- */
.hm-sec { border-bottom: 1px solid var(--line); }
.hm-sec.tint { background: var(--acsoft2); }          /* 稿里「全部文章」与「书籍」两区是浅金底 */
/* 版心走 base.css 的 --container（BK-S6-09 起 1360）：这 8 个页面都是「扫」的列表型页面 */
.hm-sec > .in { max-width: var(--container); margin: 0 auto; padding: 26px 32px 30px; display: flex; flex-direction: column; gap: 16px; }

.hm-hd { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
/* 栏名与右侧入口都 flex:none：这一行里**只有栏介（.line）该被压缩**，
   少了这条，窄屏会把「AI 工作流实战」逐字折成三行。 */
.hm-hd .t { font-family: var(--serif); font-weight: 900; font-size: 20px; flex: none; }
.hm-hd .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--ink3); white-space: nowrap; }
/* 一句话栏介：挤不下时先牺牲它，不许把右边的「查看全部」挤掉 */
.hm-hd .line { font-size: 12.5px; color: var(--ink3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-hd .all { margin-left: auto; flex: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--acink); white-space: nowrap; }

/* ---------- 通用：封面 ----------
   一张封面 = 3:2 外链 SVG + 1px 描边 + 圆角 6。
   hover **只做描边转金**：不加阴影、不放大、不位移（稿 2a 的明确口径）。 */
.hm-cov { display: block; min-width: 0; }
.hm-cov img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border: 1px solid var(--line); border-radius: 6px; background: var(--acsoft2);
  transition: border-color .15s;
}
.hm-cov:hover img { border-color: var(--ac); }

/* ---------- 通用：标签胶囊 ---------- */
.tagc {
  font-size: 10.5px; color: var(--acink); background: var(--acsoft2); border: 1px solid var(--line);
  padding: 1px 8px; border-radius: 99px; white-space: nowrap; cursor: pointer; line-height: 1.7;
}
.tagc:hover { background: var(--acsoft); color: var(--acink); }
.hm-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- 通用：灰字 meta 行里的两个提级元素（口径与 base.css 的 .row-meta 一致） ----------
   观看量是这行里唯一的社会证明（BK-S6-01），提一级字色让它先被看见；
   「高赞」= 点赞率进同平台前 25%，门槛在 src/lib/source-stats.mjs 按分位算。 */
.hm-hero .meta .pop, .hm-card .meta .pop { color: var(--ink2); }
.hm-hero .meta .hot, .hm-card .meta .hot {
  font-size: 10.5px; font-weight: 500; color: var(--acink); background: var(--acsoft);
  border-radius: 99px; padding: 1px 8px; line-height: 1.7;
}

/* ---------- 通用：最新 / 热门 分段控件（稿 2a 与 1e 同一枚，尺寸差一档） ---------- */
.hm-seg { position: relative; display: flex; border: 1px solid var(--line); border-radius: 9px; background: var(--sf); padding: 2px; flex: none; }
.hm-seg .pill { position: absolute; top: 2px; bottom: 2px; left: 2px; width: 52px; background: var(--acsoft); border-radius: 6px; transition: left .32s cubic-bezier(.3, .8, .3, 1); }
.hm-seg button {
  position: relative; width: 52px; text-align: center; padding: 3px 0; font-size: 11.5px; font-weight: 400;
  color: var(--ink3); background: none; border: none; cursor: pointer; font-family: var(--sans);
  line-height: 1.5; transition: color .3s;
}
.hm-seg button.on { color: var(--acink); font-weight: 600; }
.hm-seg[data-sort="hot"] .pill { left: 54px; }
/* 1e 的区头里那枚大一号（padding 3 / 宽 58 / 圆角 10） */
.hm-seg.lg { border-radius: 10px; padding: 3px; }
.hm-seg.lg .pill { top: 3px; bottom: 3px; left: 3px; width: 58px; border-radius: 7px; }
.hm-seg.lg button { width: 58px; padding: 4px 0; font-size: 12px; }
.hm-seg.lg[data-sort="hot"] .pill { left: 61px; }

/* ==========================================================================
   首页 · 主编推荐（稿 2a：1 大 + 3 小，右列用 A 案「左文右 148px 缩略图」）
   ========================================================================== */
.hm-feat > .in { padding: 28px 32px 32px; }
/* v1 稿这处区头小一档（15px），v2 拉回与「全部文章」/ 六个分区同规格（serif 900 / 20px），
   所以这里**不再有 .t 的字号覆盖**——通用的 .hm-hd 就是唯一口径，别再加回来。 */
.hm-feat-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 0; }

.hm-hero { display: flex; flex-direction: column; gap: 13px; padding-right: 40px; border-right: 1px solid var(--line); min-width: 0; }
.hm-hero .kick { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--acink); }
/* 主文封面**放标题右侧**（288px），不通栏 —— 通栏 640px 会喧宾夺主，见稿 2a 的说明 */
.hm-hero .top { display: grid; grid-template-columns: 1fr 288px; gap: 24px; align-items: start; }
.hm-hero .top.no-cov { grid-template-columns: 1fr; }   /* 还没画封面的期：文字占满，不留一块空图廓 */
.hm-hero .tx { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hm-hero .hm-cov { grid-column: 2; grid-row: 1; }
.hm-hero h2 { margin: 0; font-family: var(--serif); font-weight: 900; font-size: 29px; line-height: 1.45; }
/* 主文这里**没有 .sum 规则**了（BK-S6-09 第四刀）：摘要段已并进下面的 .body 单块。
   右列的 .hm-pick .sum 是另一回事，还在。 */
/* 主文正文段。**上限按行数给，不写死像素**：稿 2a 给它的是 `flex:1; overflow:hidden`，
   即「正文吃掉左列剩下的空间、超出就裁掉」，两列底边因此永远齐平
   （.hm-feat-grid 两个格子等高拉伸，.meta 的 margin-top:auto 把 meta + 标签钉在底边）。

   ⚠️ 分清两件事，改这里之前先读完：
     · **齐平不是靠 clamp 保证的** —— 靠的是本规则的 `flex:1 1 auto; min-height:0; overflow:hidden`
       三件套：正文能被压到任意矮，所以左列的 min-content 高度里根本不含它，
       右列多高左列就跟到多高。clamp 调成多少都不会把齐平推翻。
     · **clamp 管的是截断落在哪** —— 没有它，overflow:hidden 会从半个字腰斩；
       有它，截断落在整行末尾并带省略号。所以这个数该**贴着可用空间取，不该保守留一大截**。

   ⚠️ 但「齐平」有**方向**：上面那套只保证「右列比左列高时，左列跟上去」。
   反过来——左列自然高度**超过**右列——没有任何机制把右列拉长，空洞就长在右边
   （.hm-picks 被网格拉伸，最后一条 pick 底下露出一片白）。所以这个数的正确取法是
   「让主文自然高度**不越过**右列」，宁可差半行，也不许反超。

   ⚠️ 还有一条前提：**本段必须是主文里唯一的长文本块**。第四刀之前标题下还有一个
   独立的 .sum 摘要段，它不归 clamp 管、列一窄就长高（1440 时 103.6px、950 时 181.3px），
   把左列固有高顶过右列，齐平当场失效（950 实测左底凸出 117.4px，1280 也凸 11.7px）。
   现在摘要已并进本段（语料见 content.mjs 的 heroBodyText，从 TL;DR 第 1 条起拼），
   **别再往主文里加不受 clamp 管的文本段**，否则这套倒推立刻失真。

   行数上限由右列自然高度倒推。PICK_COUNT=2（第三刀）+ 摘要合段（第四刀）之后，
   1440×900 实测重算：
     右列两条内容 415.4px − 主文除正文外的 307.5px = 107.9px 余量 ÷ 26.325px 行高 ≈ 4.1 行 → 取 4。
   全档实测佐证（clamp → 左列空档 / 左列凸出）：
     3 → 29.0 / 0    4 → 2.7 / 0    5 → 0 / 23.7    6 → 0 / 50.0
   5 起主文就反超右列、空洞换到右边长，模块也跟着变高。取 4 时模块 529.4px、两边都不露洞。

   ⚠️ PICK_COUNT 改回 3 就必须回来重推这个数——它是**派生值**，跟着右列条数走，
   别把 4 当常量留在这儿。语料侧不用动：heroBodyText 备着 520 字，clamp 小只是显示得少。 */
.hm-hero .body {
  margin: 0; font-size: 13.5px; line-height: 1.95; color: var(--ink2); max-width: 44em;
  flex: 1 1 auto; min-height: 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.hm-hero .meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink3); margin-top: auto; }
.hm-hero .meta .guest { color: var(--ink2); font-weight: 500; }
.hm-hero .meta .st { color: var(--ink3); }
.hm-hero .hm-tags .tagc { padding: 1px 9px; }

.hm-picks { display: flex; flex-direction: column; padding-left: 36px; min-width: 0; }
.hm-pick { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line2); min-width: 0; }
.hm-pick .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hm-pick .l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hm-pick .kick { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--acink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-pick .st { margin-left: auto; font-size: 10.5px; color: var(--ink3); white-space: nowrap; }
.hm-pick h3 { margin: 0; font-family: var(--serif); font-weight: 800; font-size: 16px; line-height: 1.55; }
/* v2 给右列三条补了两行摘要（稿 2a 右列 A 案），字号 / 行高 / 截断与卡片上的 .hm-card .sum 同一副值 */
.hm-pick .sum { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* margin-top:auto 挂在 .meta 上 = 把「meta + 它后面的一切」整体钉到这一条的底边。
   BK-S6-09 在 meta 之后加了标签行，钉住的那一坨跟着变成「meta + 标签」，不用改这里。 */
.hm-pick .meta { font-size: 11px; color: var(--ink3); margin-top: auto; }
/* 标签胶囊（BK-S6-09）：与主文底部同款 .tagc，只把与 meta 的间距收到 5px ——
   .tx 的通用 gap 是 6，标签紧跟在同属灰字底行的 meta 后面，贴近一点读起来是一组。 */
.hm-pick .hm-tags { margin-top: -1px; }
.hm-pick .hm-cov { width: 148px; flex: none; align-self: center; }

/* ==========================================================================
   首页 · 卡片网格（「全部文章」区与六个专栏分区共用同一张卡）
   ========================================================================== */
.hm-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hm-card { background: var(--sf); border: 1px solid var(--line); border-radius: 10px; padding: 12px 12px 13px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hm-card .l1 { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 2px 0; }
.hm-card .kick { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--acink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-card .no { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--ink3); white-space: nowrap; }
.hm-card .st { margin-left: auto; font-size: 10.5px; color: var(--ink3); white-space: nowrap; }
.hm-card h3 { margin: 0; font-family: var(--serif); font-weight: 800; font-size: 16px; line-height: 1.55; padding: 0 2px; }
.hm-card .sum { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--ink2); padding: 0 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-card .meta { font-size: 11px; color: var(--ink3); margin-top: auto; padding: 0 2px; display: flex; flex-wrap: wrap; gap: 8px; }
.hm-card .meta .guest { color: var(--ink2); }
.hm-card .hm-tags { padding: 0 2px; }
/* 读完的卡与右列条目压暗（稿 2a 的 opacity 绑定），与列表行 .row.read 同一口径。
   主文（.hm-hero）不压暗：稿上它没有这个绑定，整块 hero 变灰也太重。 */
.hm-card.read, .hm-pick.read { opacity: .68; }

/* 「全部文章」区：最新 / 热门两套卡都在 DOM 里，切换只换显隐 —— 排序信号不出现在产物里 */
.hm-all .hm-cards[hidden] { display: none; }

/* ==========================================================================
   首页 · 专栏吸顶 Tab 条（稿 2a 新组件，BK-S6-08）
   ========================================================================== */
/* 稿上写的是 top:0 —— 那是静态画板里站头不吸顶的简化。站上 .site-header 自己就是
   sticky top:0 / z-index 50，真照抄 top:0，这条会滑进站头**背后**、彻底看不见。
   所以按书籍页 .bkl-nav 的成例落地：吸在站头实测高度（--hm-hd）正下方、z-index 压在站头之下。
   其余取值（26 gap / 13px / padding 13-2-11 / 下边线 / 横滑）逐条照稿 2a。
   稿 2a 那道 `0 1px 6px rgba(33,26,10,.05)` 投影已按用户拍板删掉（BK-S6-09）：
   吸顶带靠 1px 底边线与正文分层就够了，别再捡回来——书籍页 .bkl-nav 本来也没有投影。 */
.hm-tabs { position: sticky; top: var(--hm-hd, 62px); z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.hm-tabs .in { max-width: var(--container); margin: 0 auto; display: flex; align-items: stretch; gap: 26px; padding: 0 32px; overflow-x: auto; scrollbar-width: none; }
.hm-tabs .in::-webkit-scrollbar { display: none; }
.hm-tabs a {
  font-size: 13px; font-weight: 400; color: var(--ink2); padding: 13px 2px 11px; line-height: 1.55;
  white-space: nowrap; flex: none; cursor: pointer; box-shadow: inset 0 -2px 0 transparent;
  transition: color .2s, box-shadow .2s;
}
.hm-tabs a:hover { color: var(--acink); }               /* 稿 2a 的 style-hover */
/* 稿只画了点击态；`.on` 由 index.astro 的 scroll-spy 随滚动挂上（初始无选中态） */
.hm-tabs a.on { color: var(--acink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--ac); }

/* 分区锚点落点 = 站头 + Tab 条的**实测**总高（--hm-stick，index.astro 脚本量的，与 spy 判定同源）。
   兜底 108px = 桌面站头 62 + Tab 条 46；脚本一跑就被真值盖掉。 */
.hm-col { scroll-margin-top: var(--hm-stick, 108px); }

/* ==========================================================================
   首页 · 书籍区（稿 2a：书封竖版 2:3 行内底对齐；2c：横滑 88×132）
   ========================================================================== */
.hm-books-row { display: flex; gap: 16px; align-items: flex-end; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.hm-book { width: 104px; flex: none; display: flex; flex-direction: column; gap: 7px; }
.hm-book img {
  display: block; width: 104px; height: 156px; object-fit: cover; background: var(--sf);
  border: 1px solid var(--line); border-left: 4px solid var(--ac); border-radius: 3px 7px 7px 3px;
  box-shadow: 2px 3px 8px rgba(33, 26, 10, .08); transition: border-color .15s;
}
.hm-book:hover img { border-color: var(--ac); }
.hm-book .t { font-size: 10.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 末位虚线砖：稿上是「+57 本整理中」，站上书全都已上架，所以它是通往书籍页的入口 */
.hm-book-more {
  width: 104px; height: 156px; flex: none; box-sizing: border-box; border: 1.5px dashed var(--line); border-radius: 7px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--ink3);
}
.hm-book-more .a { font-size: 18px; line-height: 1; }
.hm-book-more .b { font-size: 10.5px; }
.hm-book-more:hover { border-color: var(--ac); color: var(--acink); }

/* ==========================================================================
   /articles/ 与 /col/<slug>/ 的区头带（稿 1e / 1c 同一副骨架）
   ========================================================================== */
.arc-hero { border-bottom: 1px solid var(--line); background: var(--acsoft2); }
.arc-hero > .in { max-width: var(--container); margin: 0 auto; padding: 40px 32px 30px; display: flex; flex-direction: column; gap: 12px; }
.arc-crumb { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--ink3); flex-wrap: wrap; }
.arc-crumb .cur { color: var(--acink); }
.arc-ttl { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.arc-hero h1 { margin: 0; font-family: var(--serif); font-weight: 900; font-size: 34px; line-height: 1.4; }
.arc-lede { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--ink2); max-width: 44em; }
.arc-stat { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--ink3); flex-wrap: wrap; }

.arc-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 2px; }
.arc-chips .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--ink3); }
.arc-chip { font-size: 11.5px; color: var(--ink2); background: var(--sf); border: 1px solid var(--line); padding: 3px 12px; border-radius: 99px; white-space: nowrap; cursor: pointer; line-height: 1.6; }
.arc-chip:hover { border-color: var(--ac); color: var(--ink2); }
.arc-chip.on { background: var(--ac); border-color: var(--ac); color: var(--bg); font-weight: 500; }
.arc-chip.on:hover { color: var(--bg); }
.arc-hit { margin-left: 8px; font-size: 11.5px; color: var(--ink2); }
.arc-hit b { font-family: var(--mono); font-weight: 700; color: var(--acink); }
.arc-clear { font-size: 11.5px; color: var(--acink); font-weight: 700; cursor: pointer; }
/* 命中数 / 清空 / 空态靠 hidden 开合；这几处本身是 flex，得压过自己的 display */
.arc-chips [hidden], .arc-list [hidden], .hm-cards[hidden] { display: none !important; }

/* 阅读状态筛选（BK-S2-10 的老部件，随全量列表一起从首页搬到这里）：
   与标签胶囊分行摆，窄屏不至于把两套筛选挤成一团。 */
.arc-states { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 11px; flex-wrap: wrap; }
.arc-states .lbl { letter-spacing: .14em; font-size: 10px; color: var(--ink3); }
.arc-states a { cursor: pointer; color: var(--ink3); border-bottom: 2px solid transparent; padding-bottom: 2px; white-space: nowrap; }
.arc-states a:hover { color: var(--acink); }
.arc-states a.active { color: var(--ink); font-weight: 700; border-bottom-color: var(--ac); }

/* ---------- 列表流（.rows/.row* 的骨架在 base.css，这里只加两页独有的三处） ---------- */
.arc-list { max-width: 1000px; margin: 0 auto; padding: 14px 0 36px; }
.arc-list .rows { max-width: none; }
.arc-list .row { padding: 17px 36px; }
/* 稿 1c/1e：摘要**单行截断**，让一屏能扫更多条 —— 列表流的职责是「挑」，不是「读」 */
.arc-list .row-sum { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arc-list .row-col { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--acink); white-space: nowrap; }
.arc-list .row-meta .tagc { margin-left: -4px; }
.arc-empty { padding: 40px 0; text-align: center; font-size: 13px; color: var(--ink3); }
.arc-more { padding: 18px 36px; font-size: 12.5px; color: var(--ink3); }
.arc-more button { font-size: 12.5px; color: var(--ink3); background: none; border: none; cursor: pointer; font-family: var(--sans); padding: 0; }
.arc-more button:hover { color: var(--acink); }

/* ==========================================================================
   响应式
   ========================================================================== */

/* ---- ≤1120px：主文封面缩一档，四栏卡片先降三栏 ---- */
@media (max-width: 1120px) {
  .hm-hero .top { grid-template-columns: 1fr 220px; }
  .hm-cards { grid-template-columns: repeat(3, 1fr); }
  .hm-cards > :nth-child(4) { display: none; }         /* 三栏时只出三张，不留半行空位 */
}

/* ---- ≤900px：主编推荐落成上下两块 ---- */
@media (max-width: 900px) {
  .hm-feat-grid { grid-template-columns: 1fr; }
  .hm-hero { padding-right: 0; border-right: none; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
  .hm-picks { padding-left: 0; }
  .hm-cards { grid-template-columns: repeat(2, 1fr); }
  .hm-cards > :nth-child(4) { display: flex; }         /* 两栏时四张正好两行 */
}

/* ---- ≤700px：整页按稿 2c 的移动端形态 ---- */
@media (max-width: 700px) {
  .hm-sec > .in { padding: 18px 18px 8px; gap: 10px; }
  .hm-hd { flex-wrap: wrap; gap: 8px; }
  .hm-hd .k { display: none; }                          /* 375 宽塞不下等宽小字，与书籍页窄屏同口径 */
  .hm-hd .t { font-size: 17px; }
  /* 稿 2c：栏名与「全部 N 篇 →」一行，栏介自己另起一行（order 排到最后） */
  .hm-hd .line { order: 3; flex-basis: 100%; font-size: 11px; margin-top: -3px; white-space: normal; }
  .hm-hd .all { font-size: 10px; letter-spacing: .08em; }

  /* 主文：封面通栏、压在标题上方（DOM 顺序就是封面在前，桌面靠 grid 摆回右侧） */
  .hm-feat > .in { padding: 20px 18px 22px; gap: 10px; }
  .hm-feat .hm-hd { display: none; }                    /* 稿 2c 把「主编推荐」并进了 kicker 那行 */
  .hm-hero { gap: 10px; padding-bottom: 0; border-bottom: none; }
  /* align-items 必须跟着从 start 改回 stretch：桌面那条是 grid 的纵向对齐，
     换成 flex-column 之后它管的是**横向**，留着 start 会让封面缩成图片的固有宽度、通不了栏。 */
  .hm-hero .top { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
  .hm-hero h2 { font-size: 21px; line-height: 1.5; }
  /* 窄屏主文正文段（BK-S6-09 第四刀改）。原来这里是 `.hm-hero .body { display:none }` ——
     那时摘要由独立的 .sum 段落印，长正文段不上移动端。第四刀把两段并成一块之后，
     **再隐藏它就等于摘要也一起没了、主文只剩一个光标题**，所以改成「显示，但照原
     .sum 的排印与行数走」：字号行高照抄原 .sum（13px / 1.8），行数取 5 ——
     375 宽下原 .sum 正好占 5 行，手机上的观感与合并前基本一致。
     窄屏没有齐平问题（≤900 主编推荐已落成上下两块），所以这个 5 是纯排版取值，
     与桌面那个按右列高度倒推的 clamp 无关，改桌面那个时别顺手动它。 */
  .hm-hero .body { font-size: 13px; line-height: 1.8; -webkit-line-clamp: 5; }
  .hm-hero .meta { font-size: 11px; gap: 10px; }
  .hm-picks { padding-top: 8px; }

  /* 卡片网格 → 列表行（左文右 92px 缩略图） */
  .hm-cards { display: flex; flex-direction: column; gap: 0; }
  .hm-cards > :nth-child(4) { display: none; }          /* 稿 2c 每区取前 3 条 */
  .hm-card {
    display: grid; grid-template-columns: 1fr 92px; column-gap: 12px; align-items: center;
    background: none; border: none; border-bottom: 1px solid var(--line2); border-radius: 0; padding: 13px 0;
  }
  .hm-card .hm-cov { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .hm-card > :not(.hm-cov) { grid-column: 1; }
  .hm-card .l1, .hm-card h3, .hm-card .sum, .hm-card .meta { padding: 0; }
  .hm-card h3 { font-size: 15px; }
  .hm-card .sum { font-size: 11.5px; line-height: 1.65; }
  .hm-card .meta { font-size: 10.5px; }
  .hm-card .hm-tags { display: none; }
  /* 「全部文章」区的行不带摘要（稿 2c）。
     专栏区的行**保留了 NO. 期号**：2c 把它收掉、把状态并进底部 meta 行，但这里的状态是
     行首那条 flex 行的成员，收掉期号就只剩一枚右对齐的「○ 未读」独占一行、看着更空。
     所以期号留着，与同页「全部文章」的行读起来是一类东西。 */
  .hm-all .hm-card .sum { display: none; }

  .hm-pick { gap: 12px; }
  .hm-pick .hm-cov { width: 92px; }
  .hm-pick h3 { font-size: 15px; font-weight: 700; }
  /* 桌面版新加的两行摘要不上移动端：2c 这轮没重画，同页「全部文章」的行也是不带摘要的
     （见上面 .hm-all .hm-card .sum），右列跟着走同一口径，移动端版式与改版前一字不差。 */
  .hm-pick .sum { display: none; }
  /* 同理，BK-S6-09 给右列加的标签胶囊也不上移动端：同页的卡片行本来就藏标签
     （见上面 .hm-card .hm-tags），且本单的边界是「移动端零改动」。 */
  .hm-pick .hm-tags { display: none; }

  /* Tab 条：横滑不变，只把间距与字号收一档（与书籍页架位条窄屏同口径） */
  .hm-tabs .in { gap: 18px; padding: 0 18px; }
  .hm-tabs a { font-size: 12px; padding: 11px 1px 9px; }

  /* 书籍区：横滑，书封 88×132 */
  .hm-books > .in { padding: 18px 0 22px; gap: 0; }
  .hm-books .hm-hd { padding: 0 18px; }
  .hm-books-row { gap: 12px; padding: 14px 18px 4px; }
  .hm-book, .hm-book-more { width: 88px; }
  .hm-book img { width: 88px; height: 132px; border-left-width: 3px; border-radius: 3px 6px 6px 3px; }
  .hm-book-more { height: 132px; }

  /* /articles/ 与 /col/ 的区头带 */
  .arc-hero > .in { padding: 22px 18px 18px; gap: 10px; }
  .arc-hero h1 { font-size: 24px; }
  .arc-lede { font-size: 13px; }
  .arc-list { padding: 6px 0 28px; }
  .arc-list .row { padding: 15px 18px; }
  .arc-more { padding: 16px 18px; }
}