/* ─────────────────────────────────────────────────────────────────────────
   book.css —— 书籍详情页（BK-S6-02）
   视觉真源：design/书籍详情页.v1.dc.html 画板 1a（桌面 1280）与 1b（移动端 390）。
   token 一律复用 base.css 的 :root（--bg、--sf、--ink 三档、--line 两档、--ac 系列、--serif、--mono），
   本文件只补设计稿要而 base.css 没有的那一个：--kai（楷体）。

   ⚠️ 注释里别用星号当通配符列 token 名（写成「--ink 星号 斜杠 --line」那种形态）：
   星号紧跟斜杠就是注释的结束符，注释会**提前闭合**，紧跟其后的 :root 整块被解析器当垃圾吞掉。
   本文件踩过一次 —— --kai 静默失效、楷体退回默认无衬线，页面不报错、只是长得不对。

   ⚠️ 引用方式：必须走 src/lib/asset-version.mjs 的 BOOK_CSS_HREF（内容哈希版本戳）。
   裸路径会撞上 Pages 给样式表的 4 小时边缘缓存，重演 2026-08-20 那次「新 HTML + 旧 CSS」。
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* 设计稿 1a 的 --kai。楷体那一档排印在稿上属于「手写声音」，与分享卡同一套 */
  --kai: 'Kaiti SC', 'STKaiti', 'KaiTi', 'Noto Serif SC', serif;
}

/* ═══════════ hero 书卡（稿 1a 上半） ═══════════ */

/* ⚠️ 详情页（/book/<slug>/）的三个容器 —— .bk-hero .in / .bk-main / .bk-nb .in —— 一律
   `var(--container-read)`（1160），**不许换成 --container**（1360）。BK-S6-09 把站头与所有
   列表型页面加宽到 1360 时这三处刻意没跟：正文行长是阅读的底线，越过 1160 眼睛回行就开始丢行。
   站头因此比正文宽 200px，那是有意的版式（宽站头 + 窄正文），不是没对齐。
   落地页 /books/ 那一组 .bkl-* 相反，它是「扫」的页面，跟着 --container 走。 */
.bk-hero { border-bottom: 1px solid var(--line); background: var(--acsoft2); }
.bk-hero .in { max-width: var(--container-read); margin: 0 auto; padding: 26px 32px 34px; display: flex; flex-direction: column; gap: 22px; }
.bk-hero .crumb { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--ink3); }
.bk-hero .crumb .shelf { color: var(--acink); }
.bk-hero .grid { display: grid; grid-template-columns: 224px 1fr; gap: 44px; align-items: start; }

.bk-hero .cover { display: flex; flex-direction: column; gap: 9px; }
.bk-hero .cover img {
  width: 224px; height: 318px; object-fit: cover; display: block;
  border-radius: 4px 12px 12px 4px; background: var(--sf);
  box-shadow: 0 22px 44px -18px rgba(74, 60, 32, .5), 0 3px 8px rgba(74, 60, 32, .16);
}

.bk-hero .meta { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.bk-hero .badges { display: flex; align-items: center; gap: 10px; }
.bk-hero .kind { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; color: var(--acink); border: 1px solid var(--ac); border-radius: 99px; padding: 2px 10px; }
.bk-hero .state { font-size: 11px; background: var(--acsoft); color: var(--acink); padding: 3px 11px; border-radius: 99px; font-weight: 500; }
.bk-hero h1 { margin: 0; font-family: var(--serif); font-weight: 900; font-size: 36px; line-height: 1.35; }
.bk-hero h1 .en { font-family: var(--sans); font-weight: 400; font-size: 13px; color: var(--ink3); letter-spacing: .02em; margin-left: 10px; white-space: nowrap; }
.bk-hero .facts { display: flex; gap: 16px; font-size: 12.5px; color: var(--ink3); flex-wrap: wrap; }
.bk-hero .tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bk-hero .shelf-link { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--acink); }
.bk-hero .tag { font-size: 10.5px; color: var(--acink); background: var(--bg); border: 1px solid var(--line); padding: 1px 9px; border-radius: 99px; white-space: nowrap; }

.bk-hero .claim { display: flex; gap: 14px; padding: 6px 0 0; }
.bk-hero .claim .q { font-family: var(--serif); font-size: 38px; line-height: .9; color: var(--ac); font-weight: 900; flex: none; }
.bk-hero .claim p { margin: 0 0 6px; font-family: var(--serif); font-size: 18.5px; line-height: 1.75; font-weight: 700; max-width: 32em; }
.bk-hero .claim .src { font-size: 11.5px; color: var(--ink3); }

/* ═══════════ 正文两栏（稿 1a 下半） ═══════════ */

.bk-main { max-width: var(--container-read); margin: 0 auto; padding: 6px 32px 0; display: grid; grid-template-columns: minmax(0, 1fr) 204px; gap: 56px; }
.bk-col { min-width: 0; padding-bottom: 60px; }

.bk-intro { margin: 26px 0 0; font-size: 14.5px; line-height: 1.85; color: var(--ink2); }
.bk-intro blockquote { margin: 0 0 14px; padding: 2px 0 2px 18px; border-left: 3px solid var(--line); color: var(--ink2); }
.bk-intro p { margin: 0 0 12px; }

.bk-sec { margin: 34px 0 40px; scroll-margin-top: 90px; }
.bk-sec .hd { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.bk-sec .hd .t { font-family: var(--serif); font-weight: 800; font-size: 19px; }
.bk-sec .hd .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--ink3); }
.bk-sec .hd .hint { font-size: 11.5px; color: var(--ink3); }

/* 核心论点（稿 1a：上下双线的方框，上粗下细） */
.bk-sec[data-key="tldr"] { margin: 26px 0 8px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); padding: 20px 2px 22px; }
.bk-sec[data-key="tldr"] .hd .t { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--acink); font-weight: 400; }
.bk-sec[data-key="tldr"] .hd .k { display: none; }
.bk-tldr { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 15.5px; line-height: 1.85; color: var(--ink); }
.bk-tldr li { display: flex; gap: 12px; }
.bk-tldr li .n { font-family: var(--mono); font-size: 12px; color: var(--ink3); padding-top: 3px; flex: none; }

/* 正文散文 */
.bk-prose { font-size: 16px; line-height: 1.9; color: var(--ink); }
.bk-prose p { margin: 0 0 14px; }
.bk-prose ul, .bk-prose ol { margin: 0 0 14px; padding-left: 1.2em; }
.bk-prose li { margin-bottom: 10px; }
.bk-prose h4 { margin: 24px 0 10px; font-family: var(--serif); font-weight: 800; font-size: 17px; line-height: 1.5; }
.bk-prose blockquote { margin: 0 0 14px; padding: 2px 0 2px 18px; border-left: 3px solid var(--ac); font-family: var(--serif); font-size: 15.5px; line-height: 1.8; color: var(--acink); }
.bk-prose a { color: var(--acink); }
.bk-prose strong { color: var(--ink); }
.bk-prose img { max-width: 100%; height: auto; margin: 14px 0; border-radius: 8px; border: 1px solid var(--line); background: var(--sf); }
.bk-prose code { font-family: var(--mono); font-size: .9em; background: var(--acsoft2); border-radius: 4px; padding: 1px 5px; }
/* 表格横向可滚：拆书稿里的对照表列数不定，绝不让它把 body 撑出横向滚动条 */
.bk-prose table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.bk-prose th, .bk-prose td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; line-height: 1.75; }
.bk-prose th { background: var(--acsoft2); font-weight: 700; white-space: nowrap; }

/* 逐章（稿 1a：mono 章号 + 宋体章名 + 正文） */
.bk-ch { margin: 42px 0 46px; scroll-margin-top: 90px; }
.bk-ch > .n { font-family: var(--mono); font-size: 11px; color: var(--acink); }
.bk-ch h3 { margin: 8px 0 16px; font-family: var(--serif); font-weight: 800; font-size: 22px; line-height: 1.5; }
.bk-ch h3 .en { display: block; font-family: var(--sans); font-weight: 400; font-size: 12px; color: var(--ink3); letter-spacing: .02em; margin-top: 5px; }

/* 结构脉络末尾那张可点的章节表（稿 1a：条目可点，跳到对应章） */
.bk-outline { margin: 18px 0 4px; display: flex; flex-direction: column; gap: 4px; }
.bk-outline .cap { font-size: 11.5px; color: var(--ink3); margin-bottom: 6px; }
.bk-outline .grp { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; }
.bk-outline .g { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--acink); }
.bk-outline a { display: flex; align-items: baseline; gap: 12px; padding: 6px 10px 6px 18px; margin-left: -10px; border-radius: 6px; text-decoration: none; }
.bk-outline a:hover { background: var(--acsoft2); }
.bk-outline a .n { font-family: var(--mono); font-size: 10.5px; color: var(--ink3); flex: none; }
.bk-outline a .t { font-size: 14.5px; color: var(--ink2); font-weight: 500; }

/* 概念词典（稿 1a：两列卡片）。源数据是一张两列 markdown 表——
   把 tbody 变成网格、每个 tr 变成一张卡，术语用宋体加粗、释义用小字，
   与稿上的卡片同形。书里若写成列表而不是表格，就退回普通散文，不至于坏掉。 */
.bk-sec[data-key="glossary"] .bk-prose table { display: block; overflow: visible; margin: 0; font-size: inherit; }
.bk-sec[data-key="glossary"] .bk-prose thead { display: none; }
.bk-sec[data-key="glossary"] .bk-prose tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bk-sec[data-key="glossary"] .bk-prose tr { display: flex; flex-direction: column; gap: 7px; background: var(--sf); border: 1px solid var(--line); border-radius: 10px; padding: 15px 18px; }
.bk-sec[data-key="glossary"] .bk-prose td { display: block; border: 0; padding: 0; }
.bk-sec[data-key="glossary"] .bk-prose td:first-child { font-family: var(--serif); font-weight: 800; font-size: 15.5px; color: var(--ink); }
.bk-sec[data-key="glossary"] .bk-prose td:first-child strong { font-weight: 800; }
.bk-sec[data-key="glossary"] .bk-prose td + td { font-size: 13px; line-height: 1.8; color: var(--ink2); }

/* 批判性审视（稿 1a：只换左边线颜色，不做警告框） */
.bk-sec[data-key="critique"] .bk-prose { border-left: 3px solid var(--ink3); padding: 4px 0 4px 22px; font-size: 14px; line-height: 1.85; color: var(--ink2); }
.bk-sec[data-key="critique"] .bk-prose ul { list-style: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.bk-sec[data-key="critique"] .bk-prose li { margin: 0; }

/* ═══════════ 右侧目录轨道（稿 1a：常驻展开的 204px 栏） ═══════════ */

.bk-rail-col { position: relative; }
.bk-rail {
  position: sticky; top: 76px; padding: 30px 0 20px; display: flex; flex-direction: column;
  max-height: calc(100vh - 96px); overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none; overscroll-behavior: contain;
  mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.bk-rail::-webkit-scrollbar { display: none; }
.bk-rail .cap { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--ink3); margin-bottom: 10px; padding-left: 8px; flex: none; }
.bk-rail a {
  display: flex; align-items: center; gap: 12px; height: 24px; flex: none;
  padding: 0 10px 0 30px; margin-left: -10px; border-radius: 6px; text-decoration: none;
  transition: background .12s;
}
/* 层级缩进（BK-S6-05）：一级（节，.major）贴左，二级（章）整行右缩进。
   与文章页 base.css 的 .rail 同一算法：行缩进 = 杠长差 + 14px 真缩进。
   这边杠长差是 6px（20 vs 14），故 30px = 10px（原左内边距）+ 6px + 14px，
   二级标签正好比一级右移 14px —— 与本文件移动端目录面板（.bk-mtoc .panel a 的 16→30）同一档。
   30px 也大于「当前条目」把杠拉长到 30px 带来的 16px 位移，所以读到一级节时层级也不会被拉平。 */
.bk-rail a.major { padding-left: 10px; }
.bk-rail a:hover { background: var(--acsoft); }
.bk-rail .dash { width: 14px; height: 2px; border-radius: 2px; background: var(--line); flex: none; transition: width .18s, background .18s; }
.bk-rail a.major .dash { width: 20px; }
.bk-rail a.done .dash { background: var(--ac); }
.bk-rail a.cur .dash { width: 30px; background: var(--ac); }
.bk-rail .lbl { font-size: 12px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .18s; }
.bk-rail .lbl .n { font-family: var(--mono); font-size: 10px; color: var(--ink3); margin-right: 7px; }
.bk-rail a.cur .lbl { color: var(--acink); font-weight: 700; }
.bk-rail a:hover .lbl { color: var(--acink); font-weight: 600; }

/* ═══════════ 这本书的邻居（稿 1a 底部） ═══════════ */

.bk-nb { border-top: 1px solid var(--line); background: var(--acsoft2); }
.bk-nb .in { max-width: var(--container-read); margin: 0 auto; padding: 26px 32px 34px; display: flex; flex-direction: column; gap: 20px; }
.bk-nb .hd { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bk-nb .hd .t { font-family: var(--serif); font-weight: 900; font-size: 20px; }
.bk-nb .hd .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--ink3); }
.bk-nb .hd .s { font-size: 12px; color: var(--ink3); }
.bk-nb .row { display: flex; gap: 16px; align-items: stretch; overflow-x: auto; padding-bottom: 4px; }
.bk-nb .spine {
  width: 104px; flex: none; height: 138px; box-sizing: border-box;
  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);
  padding: 12px 10px; display: flex; flex-direction: column; text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
.bk-nb .spine:hover { transform: translateY(-2px); box-shadow: 3px 6px 14px rgba(33, 26, 10, .14); }
.bk-nb .spine .kind { font-family: var(--mono); font-size: 8px; letter-spacing: .18em; color: var(--ink3); }
.bk-nb .spine .t { font-family: var(--serif); font-weight: 800; font-size: 13.5px; line-height: 1.5; margin-top: 8px; color: var(--ink); overflow: hidden; }
.bk-nb .spine .a { font-size: 9px; color: var(--ink3); margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-nb .pods { display: flex; flex-direction: column; gap: 12px; }
.bk-nb .pods .cap { font-size: 11.5px; color: var(--ink3); }
.bk-nb .pods .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bk-nb .pods a { display: flex; flex-direction: column; gap: 6px; background: var(--sf); border: 1px solid var(--line); border-radius: 10px; padding: 15px 18px; text-decoration: none; }
.bk-nb .pods .no { font-family: var(--mono); font-size: 10px; color: var(--ink3); letter-spacing: .08em; }
.bk-nb .pods .t { font-family: var(--serif); font-weight: 700; font-size: 16px; line-height: 1.5; color: var(--ink); }
.bk-nb .pods .m { font-size: 12px; color: var(--ink3); }

/* ═══════════ 移动端顶部目录（稿 1b） ═══════════ */

.bk-mtoc { display: none; position: sticky; top: 0; z-index: 45; background: var(--bg); border-bottom: 1px solid var(--line); }
.bk-mtoc .bar { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 16px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bk-mtoc .bar .ic { font-size: 12px; }
.bk-mtoc .bar .lb { font-size: 12px; font-weight: 700; flex: none; }
.bk-mtoc .bar .cur { font-size: 11.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-mtoc .bar .pct { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--acink); flex: none; }
.bk-mtoc .bar .caret { font-size: 9px; color: var(--ink3); flex: none; transition: transform .15s; }
.bk-mtoc .bar[aria-expanded="true"] .caret { transform: rotate(180deg); }
.bk-mtoc .panel { max-height: 60vh; overflow-y: auto; border-top: 1px solid var(--line2); padding: 6px 0 10px; background: var(--bg); }
.bk-mtoc .panel a { display: block; padding: 8px 16px 8px 30px; font-size: 13px; color: var(--ink2); text-decoration: none; }
.bk-mtoc .panel a.major { padding-left: 16px; font-weight: 600; color: var(--ink); }
.bk-mtoc .panel a .n { font-family: var(--mono); font-size: 10px; color: var(--ink3); margin-right: 8px; }

/* ═══════════ 运行时注入内容的版式 ═══════════
   这里只有**样式**：类名是不透明的，文案一个字都不在这儿——
   标题与落款全部由接口下发或烘在 payload 里。公开产物不该透露它长什么样、叫什么。 */

/* 成组追加在某一节末尾的注入块 */
.bk-notes { margin: 24px 0 4px; display: flex; flex-direction: column; gap: 18px; }
/* 楷体 + 金棕折角括号（稿 1a 那一档手写声音的排印） */
.bk-note { display: flex; gap: 14px; }
.bk-note-mark { width: 18px; height: 13px; box-sizing: border-box; border-left: 2.5px solid var(--ac); border-bottom: 2.5px solid var(--ac); margin-top: 10px; flex: none; }
.bk-note-body { min-width: 0; font-family: var(--kai); font-size: 15.5px; line-height: 1.95; color: var(--ink); }
.bk-note-body > :first-child { margin-top: 0; }
.bk-note-body p { margin: 0 0 10px; }
.bk-note-body ul, .bk-note-body ol { margin: 0 0 10px; padding-left: 1.2em; }
.bk-note-body li { margin-bottom: 8px; }
.bk-note-body blockquote { margin: 0 0 10px; padding: 0; border: 0; color: inherit; font-family: inherit; }
.bk-note-body img { max-width: 100%; height: auto; border-radius: 8px; }
.bk-note-src { margin-top: 8px; font-family: var(--kai); font-size: 12.5px; color: var(--ink3); }

/* 文末整块：复用 base.css 已有的那套区块版式，这里只按稿 1a 调间距与内文排版 */
.bk-wiifm { scroll-margin-top: 90px; }
.bk-wiifm .wiifm-body table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 13.5px; }
.bk-wiifm .wiifm-body th, .bk-wiifm .wiifm-body td { border: 1px solid var(--line); padding: 8px 11px; text-align: left; vertical-align: top; }
.bk-wiifm .wiifm-body img { max-width: 100%; height: auto; border-radius: 8px; }
.bk-wiifm .bk-note-body { font-size: 14.5px; }

/* ═════════════════════════════════════════════════════════════════════════
   书籍落地页 /books/（v2：BK-S6-07；v1 是 BK-S6-03）
   —— 稿 design/书籍详情页.v2.dc.html 的 3a（桌面 1280）/ 3b（移动端 390），
   已按主页 blog 范式重画：浅底 hero → 米金横条的「全部书籍」→ 架位 tab → 七个书架。
   前缀一律 .bkl-*，与详情页的 .bk-* 分开：两套版式共用这一份样式表，
   但除了 token 与那副楷体折角括号之外没有共享规则，别互相 @extend。
   ═════════════════════════════════════════════════════════════════════════ */

/* 区头（稿 3a 上半）：**暖纸浅底**（= body 的 --bg），与主页主编推荐区一致。
   v1 那块米金底（--acsoft2）已按用户拍板去掉——底色下移给了「全部书籍」那条横条，
   一页里只留一处米金，浅底 hero 才压得住下面那条。 */
.bkl-hero { border-bottom: 1px solid var(--line); }
.bkl-hero .in { max-width: var(--container); margin: 0 auto; padding: 38px 32px 30px; display: flex; flex-direction: column; gap: 12px; }
.bkl-hero h1 { margin: 0; font-family: var(--serif); font-weight: 900; font-size: 36px; line-height: 1.4; }
.bkl-hero .lede { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--ink2); max-width: 44em; }
.bkl-hero .stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; font-size: 11.5px; color: var(--ink3); }
.bkl-hero .stat .sep { color: var(--line); }
.bkl-hero .stat .lg { color: var(--acink); }

/* 全部书籍（稿 3a：米金横条 + 滑块 + 书封横排，对齐主页「全部文章」区）
   `background: var(--acsoft2)` 就是稿上那条米金横条——现在整页只有这一处底色。 */
.bkl-all { border-bottom: 1px solid var(--line); background: var(--acsoft2); }
.bkl-all .in { max-width: var(--container); margin: 0 auto; padding: 26px 32px 28px; display: flex; flex-direction: column; gap: 14px; }
/* 这一行里有滑块，所以是 align-items:center（书架分区那种纯文字区头才用 baseline） */
.bkl-all .hd { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bkl-all .hd .t { font-family: var(--serif); font-weight: 900; font-size: 20px; flex: none; }
.bkl-all .hd .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--ink3); white-space: nowrap; }
/* 稿 3a 这一行右端原本还有个「查看全部 · N 本 →」，BK-S6-10 按用户判定删净、不留占位：
   本页往下就是全量，那个入口哪儿也去不了。现在这行只剩「区名 + eyebrow + 滑块」，全左对齐。 */
/* 横滑条：`overflow-x:auto` 只作用在这一行，绝不让 body 出横向滚动条 */
.bkl-all .row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }

/* ── 两端的渐变遮罩（BK-S6-10 第二刀）──
   一排 14 本必定溢出版心，两端各叠一片渐变，提示「这一排还能往下滑」。
   ⚠️ 遮罩挂在 .bkl-rail（**不滚动**的外壳）上，绝不能挂到 .row 上：
   .row 自己是滚动容器，绝对定位的子元素会跟着内容一起滚走，滑两下就跑出视野。
   渐变色必须走 --acsoft2 这个 token（这条横条自己的底色），看起来才是「书封淡出到底色里」
   而不是蒙了一块灰纱 —— 也因为 base.css 的深色主题会把 --acsoft2 换成 #221d10，
   写死浅色值的话深色主题下这两片就是两块突兀的米黄。 */
.bkl-all .bkl-rail { position: relative; }
.bkl-all .fade {
  position: absolute; top: 0; bottom: 0; width: 56px; z-index: 1;
  opacity: 0; transition: opacity .18s;
  pointer-events: none;                  /* 绝不挡住底下书封的点击 */
}
.bkl-all .fade.l { left: 0; background: linear-gradient(to right, var(--acsoft2), transparent); }
.bkl-all .fade.r { right: 0; background: linear-gradient(to left, var(--acsoft2), transparent); }
/* 三态由页尾脚本挂类：滚到最左只有 can-r · 中段两片都在 · 滚到底只剩 can-l */
.bkl-all .bkl-rail.can-l .fade.l,
.bkl-all .bkl-rail.can-r .fade.r { opacity: 1; }
.bkl-all .mini { width: 112px; flex: none; display: flex; flex-direction: column; gap: 4px; }
.bkl-all .mini img {
  display: block; width: 112px; height: 159px; 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 4px 10px rgba(33, 26, 10, .1);
}
/* 书名（BK-S6-12 新增的一行）。
   ⚠️ `min-height` 锁两行高**不能省**：书名一行的和两行的混在一排里，
   下面那行小字（读到 42% / 上架日）的基线就参差不齐，整排看着像没对齐的牙齿。
   锁死之后不管书名一行还是两行，caption 都落在同一条水平线上。
   超过两行截断（`封面下 112px 宽 × 两行` 约十来个汉字，够放绝大多数中文书名）。 */
.bkl-all .mini .t {
  font-family: var(--serif); font-size: 11.5px; font-weight: 600; line-height: 1.4; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* 封面下那行小字。BK-S6-13 起左边可能站一枚圆形进度环（「最近阅读」态），所以改成 flex 一行。
   兜底态「最新上架」只有上架日那串文字、没有环 —— 单个文本子项在 flex 行里与原来的块级渲染
   一模一样，所以这条不分叉写两份。**不加 min-height**：有环没环是**整排一致**的
   （两种数据态各画各的一整排，永不同排混排），锁高只会让兜底那排白白高出一截。 */
.bkl-all .mini .d { font-family: var(--mono); font-size: 9px; color: var(--acink); display: flex; align-items: center; gap: 5px; }
/* 环的几何写在 JS 里（viewBox 26 照抄首页「继续阅读」条），这里只管**渲染尺寸**：
   112px 宽的卡上 26px 太抢戏，收到 18px；viewBox 一个字不动 = 等比缩放，与站内
   .resume-bar 窄屏收成 20px 是同一招。`flex:none` 免得长文案把环压扁。 */
.bkl-all .mini .d .ring { flex: none; display: block; width: 18px; height: 18px; }
/* 「最新上架 / 最受欢迎」滑块（.bkl-seg）的样式随 BK-S6-12 整档删除：
   那枚控件已经不渲染了，留着样式只会让下一个人以为页面上还有它。
   它本是主页 home.css `.hm-seg` 的同款，将来真要再做分档，从那边抄回来比从这儿考古快。 */

/* 架位 tab 导航（稿 3a/3b：吸顶 + 高亮当前架，active 下划线金）
   ⚠️ `top` 必须是站头的实际高度：站头自己也是 sticky（base.css .site-header），
   写死 0 会让两条顶栏重叠。--bkl-hd 由 /books/ 页尾脚本量出来并挂在 :root 上，
   脚本没跑起来时退回 62px（桌面站头的实测高度），最坏情况只是差几像素、不会叠。 */
.bkl-nav { position: sticky; top: var(--bkl-hd, 62px); z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.bkl-nav .in { max-width: var(--container); margin: 0 auto; display: flex; align-items: center; gap: 26px; padding: 0 32px; overflow-x: auto; scrollbar-width: none; }
.bkl-nav .in::-webkit-scrollbar { display: none; }
.bkl-nav a { font-size: 13px; color: var(--ink2); padding: 11px 2px; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
.bkl-nav a:hover { color: var(--acink); }        /* 稿 3a 的 style-hover */
.bkl-nav a.on { color: var(--acink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--ac); }

/* 书架分区 */
/* scroll-margin-top 用「站头 + 胶囊条」的实测总高（--bkl-stick，落地页脚本量的），
   锚点跳过去时架头正好停在两条吸顶栏底下 8px。兜底 108px = 桌面 62 + 46，脚本一跑就被真值盖掉。 */
.bkl-shelf { border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--bkl-stick, 108px) + 8px); }
.bkl-shelf:last-of-type { border-bottom: 0; padding-bottom: 26px; }
.bkl-shelf .in { max-width: var(--container); margin: 0 auto; padding: 30px 32px 38px; display: flex; flex-direction: column; gap: 20px; }
/* 架头一行：架名 + EN eyebrow + 一句话定位。
   稿 3a 右端那个「查看全部 · N 本 →」BK-S6-10 已按用户判定删净（每架在本页就是全量）。
   压缩规则仍与主页 .hm-hd 同一套：**只有一句话定位该被压缩**，
   少了这条，窄一点的桌面会把整行折成两行、架名与定位错开。 */
.bkl-shelf .hd { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex-wrap: wrap; }
.bkl-shelf .hd .n { font-family: var(--serif); font-weight: 900; font-size: 21px; flex: none; }
.bkl-shelf .hd .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--ink3); white-space: nowrap; }
.bkl-shelf .hd .line { font-size: 12.5px; color: var(--ink3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 镇架之书 C 位（稿 3a：放大一档 + 楷体金棕折角推荐理由） */
.bkl-pick { display: flex; gap: 26px; align-items: center; background: var(--acsoft2); border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; }
.bkl-pick > .cv { flex: none; }
.bkl-pick > .cv img {
  display: block; width: 150px; height: 213px; object-fit: cover; background: var(--sf);
  border: 1px solid var(--line); border-left: 5px solid var(--ac); border-radius: 3px 8px 8px 3px;
  box-shadow: 4px 8px 18px rgba(33, 26, 10, .16);
}
.bkl-pick .bd { flex: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.bkl-pick .bd > .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--acink); }
.bkl-pick .ttl { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bkl-pick .ttl a { font-family: var(--serif); font-weight: 900; font-size: 21px; }
.bkl-pick .ttl .a { font-size: 11.5px; color: var(--ink3); }
.bkl-pick .why { display: flex; gap: 11px; }
/* 折角括号：与详情页注入批注的 .bk-note-mark 同一副，只是小一档——都是「店主在说话」 */
.bkl-pick .why .mark { width: 15px; height: 11px; box-sizing: border-box; border-left: 2px solid var(--ac); border-bottom: 2px solid var(--ac); margin-top: 9px; flex: none; }
.bkl-pick .why .tx { font-family: var(--kai); font-size: 14.5px; line-height: 1.9; color: var(--ink); }
.bkl-pick .bdgs { display: flex; gap: 5px; flex-wrap: wrap; }
.bkl-pick .bdg { font-size: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 99px; padding: 2px 8px; color: var(--ink2); }

/* 书封网格（稿 3a：一行 6 本，hover 浮出一句话主张） */
/* 亲密性（用户 2026-08-30）：卡**内**元素抱紧、卡**间**拉开。
   行距 > 列距：卡片下缘是两行文字，横向靠留白分组就够，纵向要压过行间距才不会串到下一排。 */
.bkl-shelf .grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 34px 26px; }
.bkc { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bkc .cvw { position: relative; display: block; }
.bkc img.cv {
  display: block; width: 100%; height: auto; aspect-ratio: 448 / 636; object-fit: cover; background: var(--sf);
  border: 1px solid var(--line); border-left: 4px solid var(--ac); border-radius: 3px 8px 8px 3px;
  box-shadow: 3px 6px 14px rgba(33, 26, 10, .12);
}
/* 角标（✍ 批注）：小而克制，压在封面右下角。荐语 💬 与听书 🎧 今天无数据、恒不渲染 */
.bkc .bdgs { position: absolute; bottom: 8px; right: 8px; display: flex; gap: 3px; }
.bkc .bdg { font-size: 9.5px; line-height: 1.4; background: var(--bg); border: 1px solid var(--line); border-radius: 99px; padding: 1px 5px; color: var(--ink2); }
/* hover 浮层：整张封面翻成墨底，压上这本书的一句话主张 */
.bkc .bkq {
  position: absolute; inset: -1px; border-radius: 3px 8px 8px 3px;
  background: var(--ink); color: var(--bg); padding: 14px 12px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  opacity: 0; transition: opacity .18s; pointer-events: none;
}
.bkc:hover .bkq, .bkc:focus-visible .bkq { opacity: .97; }
/* 一句话主张长度不齐（实测 18–256 字），封面就这么大，超了就截——不让它顶破卡片 */
.bkc .bkq .q { font-family: var(--serif); font-size: 12.5px; line-height: 1.75; font-weight: 600; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.bkc .bkq .go { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; opacity: .6; }
/* 书名（BK-S6-13）。原来这格只有封面 + 作者，认不出是哪本书。
   排印**整份照抄横排 .mini 卡**（上面 .bkl-all .mini .t）：衬线 600、11.5px、1.4 行高、
   两行截断、`min-height` 锁两行高。两处是同一种卡（封面 + 书名 + 一行小字），
   不给书架另起一套排印。**不锁 min-height**：锁两行会让单行书名的卡在书名与作者之间空出 16px，
   书名一行的和两行的挨在一格里，作者行会整行错位。
   （`line-clamp` 标准属性一并写上，与同文件 .bkc .bkq .q 一致。） */
.bkc .t {
  font-family: var(--serif); font-size: 11.5px; font-weight: 600; line-height: 1.4; color: var(--ink);
  padding: 0 2px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.bkc .a { font-size: 10.5px; color: var(--ink3); padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 主张常驻行只属于移动端（稿 3b）；桌面靠 hover 浮层 */
.bkc .claim { display: none; }
/* 触屏没有 hover，浮层永远掀不开、还会在点击时闪一下 —— 直接不渲染，主张交给常驻行 */
@media (hover: none) {
  .bkc .bkq { display: none; }
  .bkc .a { display: none; }
  .bkc .claim { display: block; font-size: 9.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ═══════════ 响应式 ═══════════ */

/* 轨道栏放不下就收起，正文独占（与文章页 .rail 的 1120px 断点同口径） */
@media (max-width: 1120px) {
  .bk-main { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bk-rail-col { display: none; }
}

@media (max-width: 860px) {
  .bk-sec[data-key="glossary"] .bk-prose tbody { grid-template-columns: 1fr; }
  .bk-nb .pods .grid { grid-template-columns: 1fr; }
}

/* 稿 1b：书封上下堆叠、目录收成顶部一条 */
@media (max-width: 700px) {
  .bk-mtoc { display: block; }
  .bk-hero .in { padding: 22px 18px 26px; gap: 12px; align-items: center; }
  .bk-hero .crumb { justify-content: center; font-size: 9.5px; }
  .bk-hero .grid { grid-template-columns: 1fr; gap: 12px; justify-items: center; }
  .bk-hero .cover img { width: 140px; height: 199px; border-radius: 3px 9px 9px 3px; box-shadow: 0 16px 32px -14px rgba(74, 60, 32, .5), 0 2px 6px rgba(74, 60, 32, .16); }
  .bk-hero .meta { align-items: center; text-align: center; gap: 10px; width: 100%; }
  .bk-hero h1 { font-size: 23px; line-height: 1.4; }
  .bk-hero h1 .en { display: block; margin: 4px 0 0; font-size: 11px; white-space: normal; }
  .bk-hero .facts { justify-content: center; gap: 10px; font-size: 11px; }
  .bk-hero .tags { justify-content: center; gap: 7px; }
  .bk-hero .claim { align-self: stretch; text-align: left; gap: 10px; padding: 4px 2px 0; }
  .bk-hero .claim .q { font-size: 28px; line-height: 1; }
  .bk-hero .claim p { font-size: 14.5px; line-height: 1.8; }

  .bk-main { padding: 4px 18px 0; }
  .bk-sec { margin: 26px 0 30px; }
  .bk-sec .hd .t { font-size: 16px; }
  .bk-sec[data-key="tldr"] { margin: 22px 0 6px; padding: 16px 2px 18px; }
  .bk-tldr { font-size: 13.5px; line-height: 1.8; gap: 10px; }
  .bk-prose { font-size: 14px; line-height: 1.85; }
  .bk-ch { margin: 30px 0 34px; }
  .bk-ch h3 { font-size: 18px; }
  .bk-note-body { font-size: 14px; line-height: 1.9; }
  .bk-nb .in { padding: 18px 18px 22px; }
  .bk-nb .spine { width: 88px; height: 118px; padding: 10px 9px; }
  .bk-nb .spine .t { font-size: 12px; }
}

/* ───────── 落地页的响应式：书封网格逐档减列，700px 以下整体切到稿 3b ───────── */

/* 6 列在 1120px 视口以下就挤了（每本不足 160px，书名在封面上认不出来），逐档减。
   BK-S6-09 把版心放到 1360 后每本更宽裕，列数按工单不变，这两档断点照旧管用。 */
@media (max-width: 1120px) { .bkl-shelf .grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 900px)  { .bkl-shelf .grid { grid-template-columns: repeat(4, 1fr); } }

/* 稿 3b（移动端 390）：网格一行 3 本 · C 位改横躺卡 · 主张常驻一行截断 */
@media (max-width: 700px) {
  .bkl-hero .in { padding: 22px 18px 18px; gap: 8px; }
  .bkl-hero h1 { font-size: 26px; }
  .bkl-hero .lede { font-size: 12.5px; line-height: 1.75; }
  .bkl-hero .stat { font-size: 10.5px; gap: 6px; }

  /* 稿 3b：横条整条通栏（内容自己带 18px 内边距），书封 86×122 */
  .bkl-all .in { padding: 16px 0 14px; gap: 0; }
  .bkl-all .hd { padding: 0 18px; gap: 8px; }
  .bkl-all .hd .t { font-size: 15px; }
  .bkl-all .hd .k { display: none; }           /* 稿 3b 没有这一档等宽小字，窄屏也确实塞不下 */
  .bkl-all .row { gap: 11px; padding: 11px 18px 2px; }
  /* 390 宽上 56px 的遮罩会盖掉大半本书，收到 36px（约等于窄屏书封的 0.4 本） */
  .bkl-all .fade { width: 36px; }
  .bkl-all .mini { width: 86px; gap: 4px; }
  .bkl-all .mini img { width: 86px; height: 122px; border-left-width: 3px; border-radius: 3px 6px 6px 3px; box-shadow: 2px 3px 8px rgba(33, 26, 10, .1); }
  /* 86px 宽只放得下 5 个汉字/行，字号跟着降一档；两行锁高的道理与桌面同 */
  .bkl-all .mini .t { font-size: 10.5px; }
  .bkl-all .mini .d { font-size: 8px; gap: 4px; }
  /* 环跟着卡一起降档：86px 宽的卡上 18px 占掉五分之一，收到 15px。viewBox 照旧不动。 */
  .bkl-all .mini .d .ring { width: 15px; height: 15px; }

  .bkl-nav .in { gap: 18px; padding: 0 18px; }
  .bkl-nav a { font-size: 12px; padding: 9px 1px; }

  .bkl-shelf .in { padding: 18px 18px 22px; gap: 14px; }
  /* 稿 3b 的架头是两行：第一行架名，一句话定位单独落第二行
     （稿上第一行右端那个「全部 N 本 →」已随 BK-S6-10 一并删掉） */
  .bkl-shelf .hd { gap: 8px 8px; margin-bottom: -4px; }
  .bkl-shelf .hd .n { font-size: 17px; }
  .bkl-shelf .hd .k { display: none; }
  .bkl-shelf .hd .line { flex: 1 0 100%; order: 3; font-size: 10.5px; white-space: normal; }

  .bkl-pick { gap: 13px; align-items: flex-start; border-radius: 10px; padding: 13px 14px; }
  .bkl-pick > .cv img { width: 74px; height: 105px; border-left-width: 3px; border-radius: 2px 5px 5px 2px; box-shadow: 2px 4px 9px rgba(33, 26, 10, .14); }
  .bkl-pick .bd { gap: 4px; }
  .bkl-pick .bd > .k { font-size: 8.5px; letter-spacing: .14em; }
  .bkl-pick .ttl { gap: 6px; }
  .bkl-pick .ttl a { font-size: 14.5px; line-height: 1.45; }
  .bkl-pick .ttl .a { font-size: 9.5px; }
  .bkl-pick .why { gap: 8px; }
  .bkl-pick .why .mark { width: 11px; height: 8px; border-left-width: 1.5px; border-bottom-width: 1.5px; margin-top: 7px; }
  .bkl-pick .why .tx { font-size: 11.5px; line-height: 1.75; }
  .bkl-pick .bdg { font-size: 9px; padding: 1px 7px; }

  .bkl-shelf .grid { grid-template-columns: repeat(3, 1fr); gap: 11px; }
  .bkc { gap: 5px; }
  .bkc img.cv { border-left-width: 3px; border-radius: 3px 6px 6px 3px; box-shadow: 2px 4px 9px rgba(33, 26, 10, .11); }
  .bkc .bdgs { bottom: 6px; right: 6px; gap: 2px; }
  .bkc .bdg { font-size: 8px; padding: 0 4px; line-height: 1.5; }
  /* 书名跟着降一档，与横排 .mini 卡窄屏那档同数（10.5px / 锁两行高）——BK-S6-13 */
  .bkc .t { font-size: 10.5px; }
  /* 稿 3b：封面下常驻一行主张（截断），作者行让位——一行只够放一样东西 */
  .bkc .bkq { display: none; }
  .bkc .a { display: none; }
  .bkc .claim { display: block; font-size: 9.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}