/* 卫辉 · 读城 — 墨青 / 宣纸 / 朱砂 / 赭金（降饱和、留白优先） */
:root{
  /* 色板锁死为六个色族，每族三档：默认（浅底）/ -l（暗底）/ -d（浅底上的强调字）。
     透明度一律 rgb(var(--x-rgb)/α)；正文里不允许再出现新的颜色字面量。
     暗底前景统一为宣纸暖白（--tx-d 族），不再混用冷灰。 */
  --ink:#0d181e; --ink2:#16262c; --ink3:#223b43;
  --paper:#f5f0e6; --paper2:#e9e0cf; --paper3:#dacdb6; --paper-hi:#fbf7ee;
  --cinnabar:#a8503c; --cinnabar-l:#dd9d8b; --cinnabar-d:#8a3f2f;
  --gold:#b3924f; --gold-l:#d8bd85; --gold-d:#8a6524;
  --river:#5d939c; --river-l:#97c6cf; --river-d:#2c6b76;
  --moss:#66795e; --moss-l:#93b79a;
  --tx:#1a282e; --tx2:#54666d; --tx-d:#f2ece0; --tx-d2:#adb4a6;
  --line:rgb(var(--tx-rgb)/.14); --line-d:rgb(var(--txd-rgb)/.18);
  --ink-rgb:13 24 30; --ink2-rgb:22 38 44; --ink3-rgb:34 59 67;
  --paper-rgb:245 240 230; --paper2-rgb:233 224 207; --paper3-rgb:218 205 182; --paperhi-rgb:251 247 238;
  --cinn-rgb:168 80 60; --cinnl-rgb:221 157 139; --cinnd-rgb:138 63 47;
  --gold-rgb:179 146 79; --goldl-rgb:216 189 133; --goldd-rgb:138 101 36;
  --river-rgb:93 147 156; --riverl-rgb:151 198 207; --riverd-rgb:44 107 118;
  --moss-rgb:102 121 94; --mossl-rgb:147 183 154;
  --tx-rgb:26 40 46; --tx2-rgb:84 102 109; --txd-rgb:242 236 224; --txd2-rgb:173 180 166;
  /* 卷三 V6：纸底章节里嵌一块墨底仪器（沙盘台框）。翻令牌时要有"墨底五值"的原样
     可引，故在此固定别名；别名只引用上面已有的值，色板仍是六族三档，正文不出新色。 */
  --onink-tx:#f2ece0; --onink-tx2:#adb4a6; --onink-goldl:#d8bd85;
  --onink-rgb:var(--txd-rgb); --onink-line:rgb(var(--onink-rgb)/.18);
  --serif:"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC","SimSun",serif;
  --kai:"Kaiti SC","STKaiti","KaiTi",var(--serif);
  --sans:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  --sh:0 18px 46px rgb(var(--ink-rgb)/.22);
  /* 四级字阶：展示 / 标题 / 正文 / 辅助
     V8 补三档并档：辅助带原先由 .62/.66/.70/.72/.74/.76/.78/.82/.85/.90/.92/.95/.97/.98/.102
     各自为政，1440 宽下量到 37 个字号；现收到 12 / 13 / 15 三个台阶，
     正文与标题档不动。 */
  --fs-d:clamp(2.1rem,5.4vw,3.3rem);
  --fs-h:clamp(1.28rem,2.2vw,1.62rem);
  --fs-h3:1.1875rem;
  --fs-b:1.0625rem;
  --fs-sm:.9375rem;
  --fs-s:.8125rem;
  --fs-2xs:.75rem;
  /* Premium 动效令牌。来源 spark-output/context/motion-plan.json；档位外的时长即缺陷 */
  --dur-immediate:160ms; --dur-quick:220ms; --dur-standard:420ms; --dur-slow:600ms;
  --ease-signature:cubic-bezier(.4,0,.2,1);
  --ease-enter:cubic-bezier(.05,.7,.1,1);
  --ease-exit:cubic-bezier(.4,0,1,1);
  --t-point:var(--dur-immediate) var(--ease-signature);
  --t-hover:var(--dur-quick) var(--ease-signature);
  --t-move:var(--dur-standard) var(--ease-signature);
  --t-enter:var(--dur-standard) var(--ease-enter);
  --t-hero:var(--dur-slow) var(--ease-enter);
  /* 粘顶落点：固定顶栏的下沿（进度条 3px + 顶栏本体）。所有"贴着顶栏下沿停"的
     东西共用这一个数——节头 .pin、名册右栏 .vd-file，以及各锚点的 scroll-margin-top。
     原先是各写各的 62 / 66 / 84：节头停在 66、顶栏只到 62.1，中间那 3.9px 是一条
     没被任何一层盖住的缝，往下滚时正文正好从缝里穿过去，看着就是"吸住了但贴歪了"。
     顶栏是磨砂半透明、字体载入前后高度也会变，所以脚本会按实测下沿回写它
     （app.js 的 setStick），这条常量只是脚本没到位时的兜底。 */
  --stick:62px;
  /* V12b：光标的三个手势档。默认就是原生关键字，命中媒体查询那档才被换成描金贴图。 */
  --cur-hand:pointer;--cur-grab:grab;--cur-grab-d:grabbing;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--tx);
  font-family:var(--sans);font-size:var(--fs-b);line-height:1.88;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
/* 裸链接要有手：Chrome 的 a[href]{cursor:pointer} 是 UA 样式表给的，
   :root 上那条继承不过去（继承永远输给元素自己的 UA 声明）。这里补一条作者规则，
   套在 :where() 里＝特异度 0，既盖过 UA，又打不过任何带 class 的既有规则。
   窄屏/触屏时 --cur-hand 就是原生 pointer，等于没换。 */
:where(a[href]){cursor:var(--cur-hand)}
/* V12：光标整套换成墨青描金。母版 AI 生成，本地缩到成品尺寸后**再**补 1px 象牙描边
   （先描后缩等于没描），热点自己算。箭头 20×26 热点 (1,1) 就是箭尖。
   V12b 把手势也接上：--cur-hand（点东西的手型，全站 41 处 pointer 档走它）、
   --cur-grab / --cur-grab-d（拖轴、拖时间轴、转沙盘时的那只手）。三个变量在 :root
   里就是原生关键字本身，所以窄屏、触屏、以及脚本没命中的场合一律退回系统光标，
   不多下一张图。zoom-in（图卡）与 ew-resize（对比滑块）故意不换 —— 那两个是
   另一种动作，换成手反而说错话。 */
@media (min-width:40rem) and (pointer:fine) and (hover:hover){
  /* 必须也用 :root：`html` 是 (0,0,1)，打不过上面 :root 那条 (0,1,0) 的默认档，
     变量会永远停在原生关键字上（本轮第一版就是这么"看着接了其实没接"）。 */
  :root{cursor:url(assets/ui/cursor-arrow.png) 1 1,auto;
    --cur-hand:url(assets/ui/cursor-pointer.png) 2 1,pointer;
    --cur-grab:url(assets/ui/cursor-grab.png) 15 15,grab;
    --cur-grab-d:url(assets/ui/cursor-grabbing.png) 12 14,grabbing}
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;margin:0;line-height:1.3}
h2{font-size:var(--fs-h);letter-spacing:.02em}
h3{font-size:var(--fs-h3);letter-spacing:.02em}
p{margin:0 0 1.05em}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ================= V10：全站滚动条（一条墨痕） =================
   浏览器默认滚动条是系统灰，跟这套纸/墨/金没有任何关系。全站会真的长出滚动条的地方
   原先有十处——正文（九页）、.tbl-scroll 表横滚、.dtab 深度台账、.pstrip 图带、.tl-track
   沙盘轴带、.ts-card 乡镇弹窗、.cmdk-list 找村面板、.vd-file 册页右栏、.sb-drawer
   抽屉、.dr-list 底册；只有 .pstrip 单独描过一笔 6px，其余全交给系统。于是统一。
   V14 的账：抽屉与它那格底册一并拆掉，剩下八处；.tl-track 还滚，但这一处
   故意不给滚动条（见下面 .sb-tl 那一段的 scrollbar-width:none），所以名单里它只剩名字。

   形态：12px 通道里让出 8px 可见条（2px 透明描边 + background-clip），两侧透出底，
   看上去是压在纸边上的一道墨痕，不是一根灰色滑块。静止墨青 / 悬停赭金 / 拖动加重。
   8px 是能拖得中的下限——再细就成"看得见但点不到"。

   --sb-fg / --sb-hi 存的是**色族三分量**而不是成品色，这是 V6 那条 --line-d 的同一课：
   自定义属性的替换发生在声明它的那一层。若在这里直接写 rgb(var(--tx-rgb)/.26)，
   墨底那一层就翻不回来。所以每条 scrollbar 规则现场用 rgb(var(--sb-fg)/α) 取值，
   纸底默认 --tx-rgb（墨青）+ --goldd-rgb，墨底那几块表面改指 --onink-rgb / --goldl-rgb。
   用 --onink-* 而不是 --txd-rgb：后者会被卷三 section#time 翻成墨色，
   --onink-rgb 固定在 :root 上展开成"242 236 224"，无论嵌在哪一节都是墨底前景。

   双通道不打架：Firefox 不认 ::-webkit-scrollbar，用标准 scrollbar-width/scrollbar-color，
   并把它们关进 @supports(-moz-appearance:none)（Chromium 与 Safari 都为假）。
   Chromium 121+ 两套都认，一旦同时给出，标准属性会盖掉 pseudo 的细节造型，
   所以这里**只**给 Chromium 那条 pseudo 路径，成品色就不会被 thin 拍平。 */
:root{--sb-d:.75rem;--sb-d-hero:.875rem;--sb-fg:var(--tx-rgb);--sb-hi:var(--goldd-rgb);
  --sb-hero:linear-gradient(180deg,rgb(var(--ink2-rgb)/.94),
    rgb(var(--gold-rgb)/.6) 42%,rgb(var(--goldd-rgb)/.86) 58%,rgb(var(--cinn-rgb)/.92))}
.chapter.dark,.hero,.sandbox,.sb-frame,.sb-pop,.roll-hero,.cmp,.gband{--sb-fg:var(--onink-rgb);--sb-hi:var(--goldl-rgb)}
::-webkit-scrollbar{width:var(--sb-d);height:var(--sb-d)}
::-webkit-scrollbar-track{background:rgb(var(--sb-fg)/.05)}
::-webkit-scrollbar-corner{background:rgb(var(--sb-fg)/.05)}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-thumb{background-color:rgb(var(--sb-fg)/.26);
  border:2px solid transparent;border-radius:99px;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--sb-hi)/.62);border-width:1px}
::-webkit-scrollbar-thumb:active{background-color:rgb(var(--sb-hi)/.8);border-width:1px}

/* ---------- 正文那一根：一轴卷色 ----------
   全站只有窗口滚动条吃到这条（特异度压过上面那条裸 pseudo）。锚点要 html、body 两条
   pseudo 各写全：本站 body 带 overflow-x:hidden，overflow 传播给视口后，窗口滚动条的
   样式源实测落在 **body** 而不是 html（只写 html 时 width/thumb 全不生效，量到的仍是
   裸 pseudo 那档）。而选择器组里的 pseudo 元素**不会分发**——`html,body::-x` 只等于
   `html` + `body::-x`，前者拿到的是一条给元素盒子本身的裸规则。所以两边各写一条，
   谁的浏览器认谁是锚，就都罩住。
   其余九处仍是那根墨痕——大场面炫、小场面不吵。
   色序读的是这本书自己的脊：卷首靛墨（--ink2）→ 中段赭金（--gold→--gold-d，
   由亮转沉）→ 卷尾烧成朱砂（--cinnabar，它在站点里一直是"存疑／落印"那一笔）。
   炫的部分不在渐变本身，而在 background-attachment:local：它把背景的定位面换成
   **滚动容器的全长**，于是条子只涂出与自己所在位置对齐的那一段——滚到卷首它是墨，
   滚到殿后它是朱。滚动条顺手当了进度条，而且是一条会换颜色的。
   local 万一被哪一版浏览器忽略，退化成"静止的三段染"，仍然是一根书签，不塌。
   描金那圈内描边是给缎带收骨的：没有它，半透明的染压在纸上会糊成一条没骨的色带；
   有了它边缘立起来，缎面才出来。hover 时不另写颜色——上面那两条裸 pseudo 的
   赭金底色仍在渐变底下透上来，等于"指尖蹭亮"。 */
/* 通道也从 12 抬到 14：一轴颜色压在 8px 上显不出缎子，抬到 10px 才有条缕。
   只有正文吃这一条，其余九处仍按 --sb-d 走 12px，不会跟着一起胖。 */
html::-webkit-scrollbar,body::-webkit-scrollbar{width:var(--sb-d-hero);height:var(--sb-d-hero)}
html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{background-image:var(--sb-hero);
  background-attachment:local;
  box-shadow:inset 0 0 0 1px rgb(var(--goldl-rgb)/.45),inset 0 0 6px rgb(var(--paperhi-rgb)/.22)}
@supports (-moz-appearance:none){
  *{scrollbar-width:thin;scrollbar-color:rgb(var(--sb-fg)/.3) rgb(var(--sb-fg)/.05)}
  /* Firefox 的滚动条只有"条色 + 槽色"两个槽位，渐变与 local 都进不去。
     正文这一根退成中段赭金那一档：至少还是"金"，不至于变回系统灰。 */
  html,body{scrollbar-color:rgb(var(--goldd-rgb)/.66) rgb(var(--tx-rgb)/.05)}
}

/* ================= V11：正文那一根换成"织金卷轴"覆盖层 =================
   V10 的墨痕、V10b 的一轴卷色都是**原生 pseudo**，被否掉的不是配色是天花板：
   ::-webkit-scrollbar 只能改宽窄、圆角、底色和 hover/active，塞不进图案，
   更不可能有"按住时展开、滑出一枚题签"这种事。所以这一根不再染色，改成画在窗口右边的
   一层覆盖物：原生条只在 .sv7-on 就位时才关（伪类锚在 html 与 body 两处，
   量过的实情是窗口条样式源落在 body，见上面 V10b 那段注释），
   触屏档与 no-JS 一律不关——它们继续用 V10b 那条缎带当退路，不会出现"没条可看"。

   形态（样机变体 B）：16px 的裱边槽里躺着一段 12px 卷身，上下各压一枚描金轴头；
   轴头用 right 锚定 + 固定宽度，所以卷身展宽时轴头不跟着拉长。
   交互只有一条（用户点名的那一条）：**按住拖动**时卷身从 12px 展到 22px，
   左侧滑出一枚题签写当前节名，松手即收回。hover 不加展宽、不加刻度、不吸附，
   免得平时吵正文。

   V12 换了材质，没换形态：卷身不再是代码画的 repeating-linear-gradient 丝缕，
   改成一张 24×96 的宣纸织金贴图（AI 母版本地抠底压缩，992 B）按 12×48 双向平铺——
   双向是为了展宽到 22px 时纹理不跟着拉伸，只多铺一根。轴头试过用贴图，量下来
   雕花压到 17×5 px 就糊成一团金斑，反而不如代码画的两档渐变，所以只把它加高到 8px。
   颜色仍走既有六族三档，只有题签底 --gold-d 配 --tx-d 字与轴头 --gold-l→--gold-d。 */
:root{--sv7-w:1rem;--sv7-th:.75rem;--sv7-th-d:1.4rem;--sv7-w-d:calc(var(--sv7-th-d) + .15rem)}
html.sv7-on::-webkit-scrollbar{display:none;width:0;height:0}
html.sv7-on body::-webkit-scrollbar{display:none;width:0;height:0}
@supports (-moz-appearance:none){
  /* Firefox 从来没有 ::-webkit-scrollbar 这条路，所以它原本就只吃到 scrollbar-width:thin，
     V10b 那条渐变在这边一直是退成一档赭金。覆盖层对它反而是升级，同一套 DOM 通用。 */
  html.sv7-on,html.sv7-on body{scrollbar-width:none}
}
.sv7r{position:fixed;right:0;top:var(--stick,62px);bottom:0;width:var(--sv7-w);z-index:48;
  background:rgb(var(--ink-rgb)/.05);border-left:1px solid rgb(var(--ink-rgb)/.1);
  touch-action:none;overflow:visible;user-select:none;-webkit-user-select:none}
.sv7t{position:absolute;right:1px;width:var(--sv7-th);min-height:2.4rem;border-radius:.2rem;cursor:var(--cur-grab);
  background:url(assets/ui/sv7-paper.png) 0 0/var(--sv7-th) 48px repeat;
  border:1px solid rgb(var(--goldd-rgb)/.62);box-shadow:0 1px 3px rgb(var(--ink-rgb)/.22);
  transition:width var(--dur-quick) var(--ease-enter),box-shadow var(--dur-quick) var(--ease-enter)}
.sv7t::before,.sv7t::after{content:"";position:absolute;right:-.14rem;left:auto;
  width:calc(var(--sv7-th) + .28rem);height:.5rem;border-radius:.14rem;
  background:linear-gradient(180deg,var(--gold-l),var(--gold-d));
  box-shadow:0 1px 2px rgb(var(--ink-rgb)/.42)}
.sv7t::before{top:-.38rem}
.sv7t::after{bottom:-.38rem}
.sv7r.drag .sv7t{width:var(--sv7-th-d);box-shadow:0 2px 9px rgb(var(--ink-rgb)/.34);cursor:var(--cur-grab-d)}
.sv7g{position:absolute;right:calc(100% + .55rem);top:50%;transform:translate(.4rem,-50%);
  max-width:15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--kai);font-size:var(--fs-2xs);letter-spacing:.04em;padding:.2rem .5rem;
  background:var(--gold-d);color:var(--tx-d);border-radius:.15rem;
  box-shadow:0 2px 8px rgb(var(--ink-rgb)/.3);opacity:0;pointer-events:none;
  transition:opacity var(--dur-quick),transform var(--dur-standard) var(--ease-signature)}
.sv7g::after{content:"";position:absolute;left:100%;top:50%;margin-top:-.22rem;
  border:.22rem solid transparent;border-left-color:var(--gold-d)}
.sv7r.drag .sv7g{opacity:1;transform:translate(0,-50%)}
/* 右下那颗回顶钮原本只离右边 11—25px，会被裱边槽压住，覆盖层就位时给它让出一条槽宽 */
html.sv7-on .siderail{right:calc(clamp(.7rem,1.8vw,1.6rem) + var(--sv7-w))}
@media (prefers-reduced-motion:reduce){.sv7t,.sv7g{transition:none}}

/* ---------- 进度条 / 顶栏 ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:60;background:rgb(var(--ink-rgb)/.14)}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cinnabar),var(--gold))}
.topbar{position:fixed;top:3px;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.55rem clamp(1rem,4vw,2.4rem);backdrop-filter:blur(10px);
  background:rgb(var(--paperhi-rgb)/.72);border-bottom:1px solid var(--line);transition:background var(--dur-quick),color var(--dur-quick)}
.topbar.on-dark{background:rgb(var(--ink-rgb)/.6);border-color:var(--line-d);color:var(--tx-d)}
.mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--serif);letter-spacing:.08em}
.seal{width:2rem;height:2rem;flex:none;display:grid;place-items:center;background:var(--cinnabar);color:var(--paper-hi);
  font-family:var(--kai);font-size:1.05rem;border-radius:4px;box-shadow:inset 0 0 0 1px rgb(var(--txd-rgb)/.3)}
.seal.big{width:3.2rem;height:3.2rem;font-size:1.7rem}
/* 河南文旅标志：顶栏裁出鼎形主标，页脚放完整方形标 */
.logo{width:2rem;height:2rem;flex:none;border-radius:.45rem;background:var(--paper-hi) url("assets/citylogo.jpg") 48.6% 28.9%/197% auto no-repeat;
  box-shadow:0 0 0 1px rgb(var(--ink2-rgb)/.14),0 1px 5px rgb(var(--ink-rgb)/.18)}
.topbar.on-dark .logo{box-shadow:0 0 0 1px rgb(var(--txd-rgb)/.2),0 1px 7px rgb(var(--ink-rgb)/.56)}
.logo-card{flex:none;display:inline-grid;place-items:center;background:var(--paper-hi);border-radius:.62rem;padding:.3rem;
  box-shadow:0 0 0 1px rgb(var(--txd-rgb)/.18),0 2px 12px rgb(var(--ink-rgb)/.46)}
.logo-card img{display:block;width:5.2rem;height:5.2rem}
.topbar nav{display:flex;gap:.15rem;flex-wrap:wrap;position:relative}
.topbar nav a{text-decoration:none;font-size:.92rem;padding:.3rem .7rem;border-radius:99px;color:inherit;opacity:.78;transition:var(--dur-quick)}
.topbar nav a:hover,.topbar nav a.act{opacity:1;background:rgb(var(--cinn-rgb)/.12)}
.topbar.on-dark nav a:hover,.topbar.on-dark nav a.act{background:rgb(var(--gold-rgb)/.24)}
/* 脚本就位后，七个板块收成一只下拉；没脚本时上面那套平铺照旧，链接本来就是正文。 */
.navbtn{display:none}
/* 无脚本：面板这层壳摊平（display:contents），七个链接直接排进 nav 的 flex。 */
.topbar nav .navlist{display:contents}
html.js .navbtn{display:inline-flex;align-items:center;line-height:1;gap:.45rem;cursor:var(--cur-hand);
  font:inherit;font-size:.92rem;letter-spacing:.06em;color:var(--tx);padding:.34rem .8rem;
  border-radius:99px;border:1px solid var(--line);background:rgb(var(--paperhi-rgb)/.88);transition:var(--dur-quick)}
.navbtn:hover{background:rgb(var(--cinn-rgb)/.14);border-color:rgb(var(--cinnd-rgb)/.4);color:var(--cinnabar-d)}
.nb-cur{font-family:var(--serif);color:var(--cinnabar-d)}
.nb-i{width:.42rem;height:.42rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-.12rem);transition:transform var(--dur-quick);flex:none;align-self:center}
.navbtn[aria-expanded="true"] .nb-i{transform:rotate(-135deg) translateY(-.1rem)}
html.js .topbar nav>button{margin-left:auto}
html.js .topbar nav .navlist{display:none}
html.js .topbar nav.open .navlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.1rem .3rem;position:absolute;right:0;top:calc(100% + .75rem);z-index:51;
  min-width:min(21rem,84vw);padding:.55rem .6rem .65rem;color:var(--tx);
  background:rgb(var(--paperhi-rgb)/.97);border:1px solid var(--line);border-radius:.7rem;
  box-shadow:0 .9rem 2.4rem rgb(var(--ink-rgb)/.28)}
/* 面板永远是宣纸底，所以它内部的 hover / 当前项也照浅底那一套，不跟顶栏换肤 */
.topbar nav.open .navlist a:hover,.topbar nav.open .navlist a.act{background:rgb(var(--cinn-rgb)/.12)}
html.js .topbar nav.open .navlist a{padding:.42rem .6rem;font-size:.95rem;text-align:center}
/* 下拉展开时把顶栏抬起来，别让它压在面板上 */
html.js .topbar:has(nav.open){z-index:52}
@media (max-width:900px){
  html.js .topbar{flex-direction:row;align-items:center}
  /* 窄屏那条横滚规则会给 nav 加上 overflow，绝对定位的面板会被它剪掉 —— 这里放开 */
  html.js .topbar nav{width:auto;overflow:visible}
  html.js .topbar nav.open .navlist{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- 页面骨架 ---------- */

/* ---------- 章节骨架 ---------- */
main{padding-top:0}
[data-sec]{scroll-margin-top:var(--stick)}
.chapter{padding:clamp(4.5rem,10vh,7.5rem) clamp(1.1rem,5vw,3.4rem);position:relative}
.chapter.alt{background:linear-gradient(180deg,var(--paper),var(--paper2) 60%,var(--paper))}
.chapter.dark{background:radial-gradient(120% 80% at 12% 0%,var(--ink3),var(--ink) 62%);color:var(--tx-d)}
.chapter.dark h1,.chapter.dark h2{color:var(--tx-d)}
.chap-head{max-width:60rem;margin:0 auto clamp(2.4rem,5.5vw,3.8rem)}
.roll{font-family:var(--kai);letter-spacing:.5em;color:var(--cinnabar);font-size:var(--fs-sm);margin:0 0 .5rem}
.dark .roll{color:var(--gold)}
.chap-head h2{font-size:var(--fs-d);letter-spacing:.05em;margin-bottom:.7rem}
.dek{max-width:52rem;color:var(--tx2);font-size:1.03rem}
.dark .dek{color:var(--tx-d2)}
.sub{font-family:var(--serif);font-size:1.5rem;margin:clamp(2.4rem,6vw,3.6rem) 0 1.2rem;letter-spacing:.04em}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:clamp(1.1rem,2.8vw,2rem);max-width:74rem;margin:0 auto clamp(1.6rem,4vw,2.4rem)}
.grid-2.late{margin-top:clamp(2.2rem,5vw,3rem)}
.wrapmax{max-width:74rem;margin:0 auto}

.panel,.panel-glass{position:relative;padding:clamp(1.5rem,3.4vw,2.4rem);border-radius:6px;
  background:rgb(var(--paperhi-rgb)/.6);border:1px solid var(--line);box-shadow:0 8px 26px rgb(var(--ink-rgb)/.07)}
.panel-glass{background:rgb(var(--txd-rgb)/.05);border-color:var(--line-d);box-shadow:none;color:var(--tx-d)}
.panel-glass h2{color:var(--tx-d)}
.panel-glass .dek,.panel-glass .mini,.panel-glass .facts em{color:var(--tx-d2)}
.panel h2,.panel-glass h2{font-size:var(--fs-h);margin-bottom:.8rem;letter-spacing:.03em}
.panel.wide{max-width:74rem;margin:clamp(2rem,5vw,3rem) auto 0}
.hint{font-size:.86rem;color:var(--tx2);opacity:.8;margin:-.2rem 0 .8rem}
.dark .hint{color:var(--tx-d2)}
.mini{font-size:.9rem;color:var(--tx2);line-height:1.7;margin:.7rem 0 0}
.dark .mini{color:var(--tx-d2)}
.warn{color:var(--cinnabar);font-size:.88rem}
.src{max-width:74rem;margin:clamp(2rem,5vw,2.6rem) auto 0;font-size:.85rem;color:var(--tx2);opacity:.85;border-top:1px dashed var(--line);padding-top:.9rem}
.dark .src{color:var(--tx-d2);border-color:var(--line-d)}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:flex;align-items:flex-end;position:relative;overflow:hidden;
  padding:6.5rem clamp(1.1rem,5vw,3.4rem) clamp(1.5rem,4vh,2.8rem);color:var(--tx-d);background:var(--ink)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:52% 62%;filter:saturate(.84) contrast(1.04) brightness(.88);transform:scale(1.06);will-change:transform}
/* 图上压字：靠这层渐变兜住对比度，不靠文字描边 */
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgb(var(--ink-rgb)/.78),rgb(var(--ink-rgb)/.32) 34%,rgb(var(--ink-rgb)/.55) 56%,rgb(var(--ink-rgb)/.76) 76%,rgb(var(--ink-rgb)/.88))}
.hero-in{position:relative;z-index:2;width:100%;max-width:82rem;margin:0 auto;text-shadow:0 1px 2px rgb(var(--ink-rgb)/.85),0 0 18px rgb(var(--ink-rgb)/.6)}
.hero-main{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(1.2rem,5vw,4rem);
  align-items:end;margin-bottom:clamp(1.5rem,4vh,2.4rem)}
/* 首屏坐标行：字号小但字距大，当作图注而不是正文
   —— 与轮播图注共用同一套排版，不另起 veil */
.coord{font-size:.82rem;letter-spacing:.3em;color:rgb(var(--txd-rgb)/.78);margin:0 0 1rem}
.title{font-size:clamp(4.4rem,15vw,10.5rem);line-height:.86;letter-spacing:.03em;margin:0}
.title em{display:inline-block;font-style:normal;background:linear-gradient(180deg,var(--paper-hi),var(--gold-l));
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 20px 60px rgb(var(--ink-rgb)/.51)}
.hero-side{border-left:1px solid rgb(var(--txd-rgb)/.2);padding-left:clamp(1rem,2.4vw,1.9rem);
  padding-bottom:clamp(.2rem,1.2vw,.9rem)}
.alias{font-family:var(--kai);font-size:clamp(1rem,2.1vw,1.42rem);letter-spacing:.34em;color:var(--gold-l);margin:0 0 .8rem}
.lede{font-size:clamp(1.06rem,1.9vw,1.34rem);line-height:2.05;color:rgb(var(--txd-rgb)/.9);margin:0}
.scrollcue{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;font-size:.84rem;letter-spacing:.2em;color:rgb(var(--txd-rgb)/.8)}
.scrollcue i{width:1px;height:42px;background:linear-gradient(rgb(var(--txd-rgb)/.1),var(--gold));position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;inset:0 0 auto;height:12px;background:var(--gold);animation:drop 1.9s infinite}
@keyframes drop{0%{transform:translateY(-14px)}70%,100%{transform:translateY(42px)}}
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem 1.8rem;flex-wrap:wrap}
/* min-height 交给内容自身撑开：图片矮于此值时不出现空洞，
   长图注也不会顶掉 hero-foot */
.hero-cap{display:flex;align-items:center;gap:.62rem;flex:1 1 20rem;min-width:0;margin:0;max-width:36rem;
  min-height:calc(var(--fs-s) * 3.5);
  font-size:var(--fs-s);letter-spacing:.05em;line-height:1.75;color:rgb(var(--txd-rgb)/.74)}
.hero-cap span{flex:none;font-family:var(--kai);font-size:.72rem;letter-spacing:.24em;color:var(--gold);
  border:1px solid rgb(var(--gold-rgb)/.42);border-radius:3px;padding:.12rem .48rem}
.hero-cap i{flex:none;font-style:normal;width:1px;height:.95em;background:rgb(var(--txd-rgb)/.32)}

/* 首屏之后的数字附证带：浅底、发线分栏 */
.factband{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgb(var(--paperhi-rgb)/.5),rgb(var(--paperhi-rgb)/0));
  padding:clamp(2.6rem,6vw,3.8rem) clamp(1rem,4vw,2.4rem)}
.fb-in{max-width:74rem;margin:0 auto}
.fb-h{font-family:var(--serif);font-size:var(--fs-s);letter-spacing:.34em;color:var(--tx2);margin:0 0 1.4rem}
.hero-facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin:0 0 1.3rem}
.hero-facts li{padding:.5rem 1.1rem;border-left:1px solid var(--line)}
.hero-facts li:first-child{border-left:0;padding-left:0}
.hero-facts b{display:block;font-family:var(--serif);font-size:clamp(1.35rem,2.3vw,1.9rem);color:var(--ink2);line-height:1.2;white-space:nowrap}
.hero-facts span{display:block;font-size:var(--fs-s);color:var(--tx2);letter-spacing:.04em;line-height:1.65;margin-top:.3rem}
.fb-note{font-size:var(--fs-s);color:var(--tx2);margin:0;letter-spacing:.02em}
.fb-note a{color:var(--cinnabar);border-bottom:1px dotted rgb(var(--cinn-rgb)/.5);text-decoration:none}
@media (max-width:900px){
  .hero-main{grid-template-columns:1fr;gap:1.1rem;align-items:start}
  .hero-side{border-left:0;padding-left:0;border-top:1px solid rgb(var(--txd-rgb)/.2);padding-top:.9rem}
  .hero-facts{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1rem;row-gap:.4rem}
  .hero-facts li{border-left:0;padding:.7rem 0;border-top:1px solid var(--line)}
  .hero-facts li:first-child{padding-left:0}
  .hero-facts li:nth-child(-n+3){border-top:0}
}
@media (max-width:560px){
  .hero-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-facts li:nth-child(-n+3){border-top:1px solid var(--line)}
  .hero-facts li:nth-child(-n+2){border-top:0}
}

/* ---------- 卷一:九格方位盘 ---------- */
.nb-dial{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:.4rem 0 1rem;max-width:25rem;
  padding:3px;border:1px solid var(--line);border-radius:6px;background:var(--line)}
.nbcel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;min-height:3.9rem;
  padding:.6rem .3rem .66rem;border:1px solid transparent;border-radius:4px;cursor:var(--cur-hand);text-align:center;
  background:rgb(var(--paperhi-rgb)/.92);color:var(--tx);
  transition:background var(--dur-immediate),border-color var(--dur-immediate),color var(--dur-immediate)}
.nbcel i{font-style:normal;font-family:var(--serif);font-size:.7rem;letter-spacing:.1em;color:var(--tx2)}
.nbcel b{font-family:var(--serif);font-size:.98rem;letter-spacing:.03em;color:var(--ink2)}
.nbcel:hover,.nbcel.act{background:var(--ink2);border-color:var(--ink2)}
.nbcel:hover b,.nbcel.act b{color:var(--tx-d)}
.nbcel:hover i,.nbcel.act i{color:var(--gold-l)}
.nbcel:focus-visible{outline:2px solid var(--cinnabar);outline-offset:2px}
.nbcel.mid{background:rgb(var(--gold-rgb)/.2);cursor:default}
.nbcel.mid b{color:var(--gold-d);font-size:1.04rem}
.nbcel.none{background:rgb(var(--paperhi-rgb)/.42);border-style:dashed;border-color:var(--line);cursor:default}
.nbcel.none b{font-size:.82rem;color:var(--tx2);opacity:.62}
.nb-read{font-size:.98rem;min-height:4.4em;color:var(--tx2)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0}
.chips li{font-size:.88rem;padding:.26rem .74rem;border:1px solid var(--line);border-radius:99px;background:rgb(var(--paperhi-rgb)/.7);transition:var(--dur-quick)}
.chips li:hover{border-color:var(--river-d);color:var(--river-d);transform:translateY(-2px)}
.chips li.on{background:rgb(var(--river-rgb)/.14);border-color:var(--river-d);color:var(--river-d)}

/* tiles 气候 */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.95rem;max-width:74rem;margin:clamp(2rem,5vw,3rem) auto 0}
.tile{padding:1.1rem .9rem;border-radius:6px;background:rgb(var(--paperhi-rgb)/.66);border:1px solid var(--line);text-align:center;transition:var(--dur-quick)}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--gold)}
.tile b{font-family:var(--serif);font-size:2.1rem;color:var(--ink2);line-height:1}
.tile i{font-style:normal;font-size:.9rem;color:var(--cinnabar);margin-left:.2rem}
.tile span{display:block;font-size:.84rem;color:var(--tx2);margin-top:.4rem;letter-spacing:.04em}

/* ---------- 卷二:区划 ---------- */
/* 两组控件放进同一块面板：排序走下划线、筛选走胶囊，状态互不混淆 */
.ctrls{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.8rem;max-width:74rem;margin:0 auto 1.6rem;
  padding:.9rem 1.2rem;border:1px solid var(--line);border-radius:8px;background:rgb(var(--paperhi-rgb)/.55)}
.ctrl{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ctrl+.ctrl{border-left:1px solid var(--line);padding-left:1.8rem}
.ctrl>.cl{font-size:var(--fs-s);color:var(--tx2);letter-spacing:.16em;margin-right:.3rem}
.ctrl button{font:inherit;font-size:var(--fs-s);color:var(--tx2);background:transparent;border:0;
  padding:.18rem .1rem;cursor:var(--cur-hand);transition:var(--dur-quick);border-bottom:1px solid transparent}
.ctrl.sort button:hover{color:var(--ink2)}
.ctrl.sort button.act{color:var(--ink2);border-bottom-color:var(--ink3);font-weight:600}
.ctrl.filt button{border:1px solid var(--line);border-radius:999px;padding:.22rem .82rem;background:rgb(var(--paperhi-rgb)/.7)}
.ctrl.filt button:hover{border-color:var(--gold);color:var(--ink2)}
.ctrl.filt button.act{background:var(--cinnabar);border-color:var(--cinnabar);color:var(--paper-hi)}
.ctrl-note{margin:0 0 0 auto;font-size:var(--fs-s);color:var(--tx2);letter-spacing:.02em}
.ctrl-note b{color:var(--cinnabar);font-weight:600}
@media (max-width:760px){
  .ctrls{flex-direction:column;align-items:flex-start;gap:.9rem}
  .ctrl+.ctrl{border-left:0;padding-left:0;border-top:1px dashed var(--line);padding-top:.8rem;width:100%}
  .ctrl-note{margin:0}
}
.regions{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:.95rem;max-width:74rem;margin:0 auto}
/* 卷二屏 0：十三个乡镇的航拍格子，点一格翻到它自己那一屏 */
.rg-nav{grid-template-columns:repeat(auto-fill,minmax(min(100%,10.5rem),1fr));gap:.7rem}
/* 这排格子不能领 .sc-vis 的那一屏预留高度。共享骨架给主视觉块写的是
   html.scenes .scene .sc-vis{min-height:min(52vh,24rem)}，而网格容器的 align-content
   默认值 normal 在网格里等价于 stretch：地形筛选一收，行数从 3 行掉到 2 行、1 行，
   剩下的格子就被拉伸去填满那 384px（1440 实测：13 格 120.5px → 8 格 186.4px → 5 格 384px），
   于是“同一个格子里的镇，卡片大小不一样”。格子的高度该由它自己的图决定，不该拿来垫屏。
   选择器多带一个 .rg-nav 是为了压过上面那条三级的 min-height。 */
html.scenes .scene .sc-vis.rg-nav{min-height:0;align-content:start}
@media (max-width:700px){.rg-nav{grid-template-columns:repeat(auto-fill,minmax(8.2rem,1fr));gap:.55rem}}
.rgtile{display:block;position:relative;text-decoration:none;color:inherit;overflow:hidden;
  border:1px solid var(--line);border-radius:6px;background:rgb(var(--paperhi-rgb)/.75);
  transition:var(--dur-quick)}
.rgtile img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;filter:saturate(.9);
  transition:transform var(--dur-standard) var(--ease-signature)}
.rgtile::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;
  background:linear-gradient(180deg,rgb(var(--ink-rgb)/.06),rgb(var(--ink-rgb)/.66));pointer-events:none}
.rgtile b,.rgtile i{position:absolute;left:.6rem;z-index:2;pointer-events:none}
.rgtile b{bottom:1.45rem;font-family:var(--serif);font-size:1.06rem;font-weight:700;
  letter-spacing:.04em;color:var(--tx-d);text-shadow:0 1px 8px rgb(var(--ink-rgb)/.7)}
.rgtile i{bottom:.5rem;font-style:normal;font-size:.72rem;letter-spacing:.1em;
  color:rgb(var(--txd-rgb)/.86);text-shadow:0 1px 6px rgb(var(--ink-rgb)/.7)}
/* 角标：这一格在册几个村、其中几个留过名。密度对比的第一眼，不点进弹窗也能比。
   <s> 只当壳用，去掉删除线；里面的 <b> 要按住上面 .rgtile b 那一条，否则会被抬成镇名。 */
.rgtile .rg-tally{position:absolute;top:.4rem;right:.4rem;left:auto;z-index:3;text-decoration:none;
  font-family:var(--sans);font-size:.72rem;line-height:1.45;letter-spacing:.05em;white-space:nowrap;
  padding:.14rem .38rem;color:rgb(var(--txd-rgb)/.9);background:rgb(var(--ink-rgb)/.66);
  border:1px solid rgb(var(--gold-rgb)/.48);border-radius:3px;pointer-events:none}
.rgtile .rg-tally b{position:static;bottom:auto;left:auto;display:inline;margin:0;padding:0;
  font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.05em;
  color:var(--gold-l);text-shadow:none;background:none;border:0;box-shadow:none}
.rgtile:hover .rg-tally,.rgtile:focus-visible .rg-tally{border-color:rgb(var(--gold-rgb)/.85)}
.rgtile:hover,.rgtile:focus-visible{border-color:var(--gold);box-shadow:var(--sh);transform:translateY(-2px)}
.rgtile:hover img{transform:scale(1.06)}
.rgtile.off{display:none}
/* 五枚数字 chip 现在只活弹窗里（乡镇长屏 V5 起撤掉，一个乡镇只讲一遍） */
.t-anchor{display:block;height:0;scroll-margin-top:calc(var(--stick) + 22px)}
/* 被链接直接指到的落点容器：它们不是节（拿不到 [data-sec] 那条），落位时开头一段
   正好压在固定顶栏底下。按 .t-anchor 同一个数补齐。 */
#ledger,#doubtTable,#regTable,#doubtNote{scroll-margin-top:calc(var(--stick) + 22px)}
.tw-stats{display:flex;flex-wrap:wrap;gap:.45rem;margin:.9rem 0 1.05rem}
.tw-stats .st{display:flex;align-items:baseline;gap:.3rem;padding:.34rem .7rem;
  border:1px solid var(--line);border-radius:5px;background:rgb(var(--paperhi-rgb)/.8)}
.tw-stats .st b{font-family:var(--serif);font-size:var(--fs-h3);font-weight:700;color:var(--ink2)}
.tw-stats .st i{font-style:normal;font-size:var(--fs-2xs);letter-spacing:.08em;color:var(--tx2)}
@media (max-width:640px){.node,.dtab tr{scroll-margin-top:118px}}

/* ---------- 数据表 / 列表 / 水患 ---------- */
.grid-2.wide{margin-top:clamp(2.2rem,5vw,3rem)}
.tbl{width:100%;border-collapse:collapse;margin:.3rem 0 .2rem;font-size:var(--fs-sm)}
.tbl-scroll{overflow-x:auto;padding-bottom:.2rem}
.tbl-scroll .tbl{min-width:30rem}
.tbl th{text-align:left;font-weight:400;font-family:var(--sans);font-size:var(--fs-s);letter-spacing:.08em;color:var(--tx2);
  padding:.4rem .5rem;border-bottom:1px solid var(--gold);white-space:nowrap}
.tbl td{padding:.5rem;border-bottom:1px dashed var(--line);vertical-align:top;line-height:1.6}
.tbl tbody tr{transition:background var(--dur-quick)}
.tbl tbody tr:hover{background:rgb(var(--gold-rgb)/.08)}
.tbl td:first-child{font-family:var(--serif);font-size:var(--fs-b);color:var(--ink2);white-space:nowrap}
.tbl td:nth-child(3){font-variant-numeric:tabular-nums;color:var(--cinnabar);white-space:nowrap}
.tbl th:last-child,.tbl td:last-child{color:var(--tx2);font-size:var(--fs-s)}
h3.sub{font-family:var(--serif);font-size:1.1rem;margin:1.3rem 0 .4rem;color:var(--ink2);letter-spacing:.04em}
.bullets{list-style:none;display:grid;gap:.55rem;margin:0;font-size:.9rem;line-height:1.72;color:var(--tx2)}
.bullets b{color:var(--ink2);font-weight:600}
.bullets li{padding-left:1rem;position:relative}
.bullets li::before{content:"";position:absolute;left:0;top:.72rem;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.flood{margin-top:clamp(2.2rem,5vw,3rem)}
.flood-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));gap:.8rem;margin-top:.4rem}
.fitem{padding:1rem .95rem;border-radius:5px;background:rgb(var(--ink3-rgb)/.05);border:1px solid var(--line);border-left:3px solid var(--river);transition:var(--dur-quick)}
.fitem:hover{border-left-color:var(--cinnabar);transform:translateY(-3px);box-shadow:var(--sh)}
.fitem .fy{display:block;font-size:.76rem;letter-spacing:.1em;color:var(--tx2)}
.fitem b{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--ink2);margin:.25rem 0 .4rem;line-height:1.2}
.fitem p{margin:0;font-size:.85rem;line-height:1.7;color:var(--tx2)}
.fitem:last-child{border-left-color:var(--cinnabar);background:rgb(var(--cinn-rgb)/.06)}
.fitem:last-child b{color:var(--cinnabar)}

/* 产业链 / 项目链条。默认按纸底解算（--tx-rgb 底 + --goldd-rgb 箭头），
   墨底表面（.panel-glass / .dark）由下面的覆盖翻回宣纸暖白。 */
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem;margin:.5rem 0 .9rem}
.chain span{font-size:.84rem;padding:.3rem .68rem;border-radius:4px;border:1px solid var(--line);
  background:rgb(var(--tx-rgb)/.055);color:var(--tx);line-height:1.4}
.chain span em{display:block;font-style:normal;font-size:.74rem;color:var(--tx2)}
.chain i{font-style:normal;color:var(--gold-d);font-size:.9rem}
.panel-glass .chain span,.dark .chain span{border-color:var(--line-d);
  background:rgb(var(--txd-rgb)/.07);color:var(--tx-d)}
.panel-glass .chain span em,.dark .chain span em{color:var(--tx-d2)}
.panel-glass .chain i,.dark .chain i{color:var(--gold-l)}
.panel-glass h3.sub{color:var(--tx-d)}
.proj{display:grid;gap:.6rem;margin:.4rem 0 0}
.proj li{display:grid;grid-template-columns:6.6rem 1fr;gap:.7rem;align-items:baseline;font-size:.88rem;color:var(--tx-d2);line-height:1.6}
.proj b{font-family:var(--serif);font-size:1.12rem;color:var(--gold);text-align:right;line-height:1.3}

/* ---------- 卷四:府城图版 / 街巷 / 名录 ---------- */
.plate{max-width:74rem;margin:0 auto}
.plate-in{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(1rem,3vw,2rem);align-items:start}
.city-read{padding:1rem 1.1rem;border-radius:5px;background:rgb(var(--ink3-rgb)/.06);border:1px solid var(--line);min-height:9.5rem}
.city-read b{display:block;font-family:var(--serif);font-size:1.24rem;color:var(--cinnabar);margin-bottom:.4rem}
.city-read p{margin:0;font-size:.92rem;line-height:1.8;color:var(--tx2)}
.streets{display:grid;gap:0}
.streets li{padding:.62rem 0;border-bottom:1px dashed var(--line);font-size:.94rem;transition:var(--dur-quick)}
.streets li:last-child{border-bottom:0}
.streets li:hover{padding-left:.4rem;background:rgb(var(--gold-rgb)/.07)}
.streets b{display:block;font-family:var(--serif);font-size:1.06rem;color:var(--ink2)}
.streets em{display:block;font-style:normal;font-size:.85rem;color:var(--tx2);line-height:1.65}
.tbl-2{display:grid;gap:1.4rem}
.note-i{max-width:74rem;margin:.9rem auto 0}
.fig{margin:1.1rem 0 0}
.fig img{width:100%;height:auto;border-radius:5px;border:1px solid var(--line);filter:saturate(.9)}
.fig figcaption{font-size:.78rem;color:var(--tx2);line-height:1.6;margin-top:.45rem;letter-spacing:.02em}
.wide-fig{margin-top:1.4rem;border-top:1px dashed var(--line);padding-top:1.2rem}
@media (max-width:900px){
  .plate-in{grid-template-columns:1fr}
  .tbl-2{gap:1.8rem}
}

/* 人口 */
.pop{display:grid;gap:1rem;margin:.6rem 0}
.pop-row{display:grid;grid-template-columns:1fr auto;gap:.3rem .8rem;font-size:.92rem;padding-bottom:.9rem;border-bottom:1px dashed var(--line)}
.pop-row:last-child{border:0;padding-bottom:0}
.pop-row span{color:var(--tx2)}
.pop-row b{font-family:var(--serif);font-size:1.5rem;color:var(--ink2);text-align:right}
.pop-row i{grid-column:1/-1;position:relative;height:7px;border-radius:99px;background:rgb(var(--ink2-rgb)/.1)}
.pop-row i b{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--cinnabar),var(--gold));border-radius:99px;transition:width var(--dur-standard)}
.in .pop-row i b{width:calc(var(--v) * 1%)}
.pop-row em{grid-column:1/-1;font-style:normal;font-size:.82rem;color:var(--tx2)}

/* facts 列表 */
.facts{display:grid;gap:.55rem}
.facts li{display:grid;grid-template-columns:1fr auto;gap:.15rem .8rem;padding:.55rem 0;border-bottom:1px dashed var(--line);font-size:.94rem}
.dark .facts li,.panel-glass .facts li{border-color:var(--line-d)}
.facts li:last-child{border-bottom:0}
.facts span{color:var(--tx2)}
.facts b{font-family:var(--serif);color:var(--ink2);text-align:right}
.panel-glass .facts b{color:var(--gold)}
.facts em{grid-column:1/-1;font-style:normal;font-size:.84rem;color:var(--tx2);opacity:.85}
.warnlist b{color:var(--cinnabar)}

/* ---------- 卷三:时间轴 ---------- */
.tl{max-width:74rem;margin:0 auto;display:grid;grid-template-columns:1fr;gap:1.4rem}
.tl-year{text-align:center}
.tl-year b{display:block;font-family:var(--serif);font-size:clamp(3.4rem,13vw,7.6rem);line-height:1;color:var(--gold);letter-spacing:.02em;transition:var(--dur-quick)}
.tl-year span{font-family:var(--kai);letter-spacing:.4em;font-size:1rem;color:var(--tx-d2)}
.tl-track{position:relative;overflow-x:auto;overflow-y:hidden;padding:1.6rem .4rem 1.2rem;cursor:var(--cur-grab)}
.tl-track.drag{cursor:var(--cur-grab-d);scroll-behavior:auto}
/* 这条脊线必须由 .tl-items 自己画。原来它是 .tl-track（横滚容器）的绝对定位子元素，
   而绝对定位的 left:0;right:0 量的是**滚动口**——实测 805px，不是内容全长 6630px，
   且它跟着内容一起滚：滚过第一屏，线就留在身后，后面三十六站各自孤零零。
   挂到 .tl-items（position:relative + min-width:max-content）身上，两头才是轴的真头尾。
   对齐顺带修好：轨道自己吃了上内边距，旧线比圆心高了 5.7px。
   渐变改成实色——六千多像素上摊两端淡出各三千像素，等于没有淡出；
   窗口两头的淡出本来就有 .tl-track 那道 mask 在做。 */
.tl-items{display:flex;gap:0;min-width:max-content;position:relative}
.tl-items::before{content:"";position:absolute;left:0;right:0;top:2.2rem;transform:translateY(-50%);height:1px;background:var(--line-d)}
.tl-node{flex:none;width:11.5rem;padding-top:2.3rem;position:relative;text-align:center;background:none;border:0;color:inherit;cursor:var(--cur-hand);font:inherit}
.tl-node::before{content:"";position:absolute;top:2.2rem;left:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;
  background:var(--ink);border:1px solid var(--tx-d2);transition:var(--dur-quick)}
.tl-node .yy{display:block;font-family:var(--serif);font-size:var(--fs-h3);color:var(--tx-d);opacity:.62;transition:var(--dur-quick)}
.tl-node .nn{display:block;font-size:.9rem;color:var(--tx-d2);margin-top:.15rem}
/* 三十六站里只有这一年画得出来：沙盘就是按它建的，轴上得能一眼认出这一格 */
.tl-node.home .yy::after{content:"本图";display:inline-block;margin-left:.3rem;padding:.02rem .3rem;
  border:1px solid rgb(var(--gold-rgb)/.55);border-radius:3px;font-family:var(--kai);
  font-size:.6rem;letter-spacing:.08em;color:var(--gold);vertical-align:.2em}
.tl-node:hover::before,.tl-node.act::before{background:var(--cinnabar);border-color:var(--gold);transform:translate(-50%,-50%) scale(1.5)}
.tl-node:hover .yy,.tl-node.act .yy{opacity:1;color:var(--gold)}
.tl-card{max-width:44rem;margin:0 auto;min-height:8.4rem}
.tl-card h3{font-size:1.3rem;color:var(--tx-d);margin-bottom:.5rem;letter-spacing:.03em}
.tl-card p{color:var(--tx-d2);margin:0}
.tl-card p b{color:var(--gold);font-weight:600}
.tl-card p em{font-style:normal;color:var(--gold-l);border-bottom:1px dotted rgb(var(--gold-rgb)/.55)}
.tl-card .kicker{font-family:var(--kai);color:var(--gold);letter-spacing:.2em;font-size:.9rem;display:block;margin-bottom:.3rem}

/* ---------- 卷四:人文 ---------- */
.sites4{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.9rem;max-width:74rem;margin:0 auto}
.sites4>.site{grid-column:span 2}
.sites4>.site:nth-child(-n+2){grid-column:span 3}
@media (max-width:62rem){.sites4{grid-template-columns:repeat(2,minmax(0,1fr))}.sites4>.site,.sites4>.site:nth-child(-n+2){grid-column:auto}}
@media (max-width:32rem){.sites4{grid-template-columns:minmax(0,1fr)}}
.site{padding:1.2rem;border-radius:6px;background:rgb(var(--paperhi-rgb)/.7);border:1px solid var(--line);transition:var(--dur-quick);position:relative}
.site:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.site>b{display:block;font-family:var(--serif);font-size:1.4rem;color:var(--ink2)}
.site em{display:block;font-style:normal;font-size:.8rem;color:var(--cinnabar);letter-spacing:.02em;margin:.3rem 0 .6rem}
.site p{font-size:.92rem;color:var(--tx2);margin:0}
.site p+p{margin-top:.6rem}
.site p b{font-weight:700;color:var(--ink2)}
.site p.warn{color:var(--cinnabar);font-size:.88rem;border-left:2px solid rgb(var(--cinn-rgb)/.35);padding-left:.6rem}
.sites4>.site{display:flex;flex-direction:column}
.site .keep{margin-top:auto;padding-top:.7rem;font-size:.8rem;line-height:1.6;color:var(--tx2);border-top:1px dashed rgb(var(--gold-rgb)/.32)}
.site .keep>i{font-style:normal;font-family:var(--kai);color:var(--gold);letter-spacing:.06em;margin-right:.4rem}
.dishes{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.dishes li{font-size:.9rem;padding:.3rem .75rem;border-radius:3px;background:rgb(var(--cinn-rgb)/.07);border:1px solid rgb(var(--cinn-rgb)/.2);color:var(--cinnabar-d);transition:var(--dur-quick)}
.dishes li:hover{background:var(--cinnabar);color:var(--paper-hi)}
.dishes em{font-style:normal;font-size:.75rem;opacity:.7;margin-left:.25rem}
/* 人物名册（卷四 V3b）：一人一枚竖排名刺，正文收在下面那一格里，点谁读谁。
   名刺是定死的 2.75 × 6.9rem，名字字号由字数反推（4.3rem ÷ 字数，封顶 1.3rem），
   所以两字的名字和三字的名字占的是同一只盒子——模块统一不靠约定，靠这个算式。
   两个字要留意：竖排（writing-mode:vertical-rl）里每个汉字的实际占位是字号的 1.346 倍
   （用的是字体 em 高，不是 line-height:1），三字名按 6.3rem 会挤成两列，所以盒高与算式都是按这个倍数定的。 */
.people{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.8rem 1.35rem;max-width:74rem;margin:0 auto}
.pgrp{display:flex;gap:.45rem}
.p-era{writing-mode:vertical-rl;display:flex;align-items:center;gap:.34rem;padding:.15rem .3rem;
  border-left:2px solid rgb(var(--cinn-rgb)/.45)}
.p-era b{font-family:var(--kai);font-weight:600;font-size:.9rem;letter-spacing:.2em;color:var(--cinnabar-d)}
.p-era i{font-style:normal;font-size:.72rem;letter-spacing:.04em;color:var(--tx2)}
.p-row{display:flex;flex-wrap:wrap;gap:.4rem}
.per-slip{flex:0 0 auto;width:2.75rem;height:6.9rem;display:flex;align-items:stretch;justify-content:center;
  padding:.5rem .1rem;border:1px solid var(--line);border-radius:4px;background:rgb(var(--paperhi-rgb)/.8);
  font:inherit;color:inherit;cursor:var(--cur-hand);transition:var(--dur-quick)}
.per-slip b{writing-mode:vertical-rl;text-align:center;font-family:var(--kai);font-weight:600;line-height:1;
  letter-spacing:.05em;color:var(--ink2);font-size:min(1.3rem,calc(4.3rem/var(--n,3)))}
.per-slip:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--sh)}
.per-slip:focus-visible{outline:2px solid var(--cinnabar);outline-offset:2px}
.per-slip.on{background:var(--cinnabar);border-color:var(--cinnabar-d)}
.per-slip.on b{color:var(--paper-hi)}
/* 读数行：谁在场、一共几人、要不要一次全展开 */
.per-bar{display:flex;align-items:baseline;gap:.7rem;max-width:74rem;margin:.9rem auto .5rem;
  padding-top:.6rem;border-top:1px dashed var(--line);font-size:.82rem;color:var(--tx2)}
.per-bar .pb-no{font-family:var(--kai);font-size:.94rem;letter-spacing:.12em;color:var(--cinnabar-d)}
.per-bar .pb-tx{flex:1 1 auto}
.pb-all{font:inherit;font-size:.76rem;letter-spacing:.06em;color:var(--gold-d);background:none;
  border:1px solid rgb(var(--goldd-rgb)/.42);border-radius:3px;padding:.22rem .62rem;cursor:var(--cur-hand);transition:var(--dur-quick)}
.pb-all:hover{background:rgb(var(--goldd-rgb)/.1);color:var(--cinnabar-d)}
.per-book{display:grid;gap:.55rem;max-width:74rem;margin:0 auto}
.per-card{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:0 1.15rem;align-items:start;
  padding:.95rem 1.1rem;border:1px solid var(--line);border-left:3px solid var(--cinnabar);border-radius:5px;
  background:rgb(var(--paperhi-rgb)/.72)}
.per-card[hidden]{display:none}
.pc-plate{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.4rem;height:100%;min-height:5.6rem;padding:.5rem .25rem;border-radius:3px;
  border:1px solid rgb(var(--goldd-rgb)/.34);background:rgb(var(--gold-rgb)/.07)}
.pc-plate b{writing-mode:vertical-rl;font-family:var(--kai);font-weight:600;font-size:1.2rem;
  letter-spacing:.1em;line-height:1;color:var(--ink2)}
.pc-plate i{font-style:normal;font-size:.7rem;line-height:1.35;text-align:center;color:var(--tx2)}
/* 一字印：只有史料里立得住那个字的人才盖得到 */
.pc-seal{position:absolute;right:-.4rem;bottom:-.4rem;width:1.55rem;height:1.55rem;border-radius:50%;
  display:grid;place-items:center;background:var(--cinnabar);color:var(--paper-hi);
  font-family:var(--kai);font-size:.8rem;box-shadow:0 1px 5px rgb(var(--ink-rgb)/.3)}
.pc-body .role{display:block;font-size:.82rem;color:var(--cinnabar-d);letter-spacing:.05em;margin:.05rem 0 .4rem}
.pc-body p{font-size:.94rem;line-height:1.85;color:var(--tx2);margin:0}
.pc-body p b{font-weight:700;color:var(--ink2)}
.pc-body .doubt{display:block;margin-top:.4rem;font-size:.8rem;color:var(--gold-d)}
@media (max-width:640px){
  .people{gap:.6rem .8rem}
  .per-card{grid-template-columns:minmax(0,1fr);gap:.55rem}
  .pc-plate{flex-direction:row;justify-content:flex-start;gap:.6rem;min-height:0;padding:.4rem .6rem}
  .pc-plate b{writing-mode:horizontal-tb;font-size:1.2rem}
}

/* ---------- 卷五:交通 ---------- */
/* 卷五整卷把 --gold 压到浅底档（见 3072 行），可这块图是墨底：画布上高速线用的
   是默认档 #b3924f，图例却继承到压暗后的 #8a6524，两条色差 2.2 倍——所以在图块
   这一层把 --gold 换回默认档，让图例那支笔与画布那支笔是同一支。 */
section#traffic .net{--gold:#b3924f}
.net{background:linear-gradient(168deg,var(--ink2),var(--ink) 72%);border-color:rgb(var(--txd-rgb)/.16);color:var(--tx-d)}
.net h2{color:var(--tx-d)}
/* 吸附节头全站那一条底是纸（paperhi/.93）：搬进墨底图块就成了压在图上的一张便利贴，
   这里只换底色与分隔线，sticky、金进度线与题号亮档（.dark .sec-no）照旧继承。 */
section#traffic .net .pin{background:rgb(var(--ink-rgb)/.92);box-shadow:0 1px 0 var(--line-d)}
.net .hint,.net .mini{color:var(--tx-d2)}
.net-read{min-height:3em;margin-top:.6rem}
.legend{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.9rem;font-size:.82rem;color:var(--tx-d2)}
.legend i{display:inline-block;width:22px;height:0;vertical-align:middle;margin-right:.35rem;border-top-width:3px;border-top-style:solid}
.sw.rail{border-color:var(--tx-d2)}.sw.hsr{border-color:var(--cinnabar);border-top-style:dashed}
.sw.expw{border-color:var(--gold)}.sw.nw{border-color:var(--moss-l);border-top-style:dotted}.sw.gw{border-color:var(--river)}

/* ---------- 卷六:图表 ---------- */
.keyfig{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.85rem;max-width:74rem;margin:0 auto clamp(1.8rem,4vw,2.4rem)}
.kf{padding:1.05rem;border-radius:6px;background:rgb(var(--txd-rgb)/.05);border:1px solid var(--line-d);transition:var(--dur-quick)}
.kf:hover{border-color:var(--gold);transform:translateY(-3px);background:rgb(var(--gold-rgb)/.09)}
.kf b{font-family:var(--serif);font-size:2.05rem;color:var(--tx-d);line-height:1}
.kf i{font-style:normal;font-size:var(--fs-sm);color:var(--gold);margin-left:.15rem}
.kf span{display:block;font-size:var(--fs-s);color:var(--tx-d2);margin-top:.35rem}
.kf em{display:block;font-style:normal;font-size:var(--fs-s);color:rgb(var(--cinn-rgb)/.85);margin-top:.15rem}

.tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem}
.tabs button{padding:.42rem .95rem;border-radius:99px;border:1px solid var(--line-d);background:transparent;color:var(--tx-d2);font-size:.9rem;cursor:var(--cur-hand);transition:var(--dur-quick)}
.tabs button:hover{color:var(--tx-d);border-color:var(--gold)}
.tabs button[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink2);font-weight:600}
.chart-hold h2{font-size:1.28rem;margin-bottom:.8rem}
#chart{position:relative}
#chart svg{width:100%;height:auto;display:block;overflow:visible}
#chart .gl{stroke:rgb(var(--txd-rgb)/.09);stroke-width:1}
#chart .ax{stroke:rgb(var(--txd-rgb)/.28);stroke-width:1}
#chart .lb{font-size:11px;fill:var(--tx-d2);font-family:var(--sans)}
#chart .vl{font-size:11.5px;fill:var(--tx-d);font-family:var(--serif)}
#chart .col{transition:var(--dur-quick);cursor:var(--cur-hand)}
#chart .col:hover{opacity:.82}
#chart .miss{fill:none;stroke:rgb(var(--txd-rgb)/.25);stroke-dasharray:4 4}
#chart .ln{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round}
#chart .ln2{fill:none;stroke:var(--river);stroke-width:2.2}
#chart .dot{fill:var(--ink2);stroke:var(--gold);stroke-width:2;cursor:var(--cur-hand)}
#chart .zero{fill:rgb(var(--txd-rgb)/.04);stroke:rgb(var(--txd-rgb)/.14)}
#chart .seg{cursor:var(--cur-hand);transition:var(--dur-quick);stroke:rgb(var(--ink-rgb)/.35);stroke-width:1}
#chart .seg:hover{opacity:.8}
#chart .grow{transform-origin:bottom;animation:grow var(--dur-slow) var(--ease-enter) backwards}
@keyframes grow{from{transform:scaleY(0)}}
#chart .fadein{animation:fadein var(--dur-slow) var(--ease-signature) backwards}
@keyframes fadein{from{opacity:0}}
.chart-note{font-size:.86rem;color:var(--tx-d2);margin:.9rem 0 0;border-top:1px dashed var(--line-d);padding-top:.7rem}
.clusters{display:grid;gap:.8rem;margin:.4rem 0 1rem}
.clusters li{border-left:2px solid var(--gold);padding-left:.8rem}
.clusters b{font-family:var(--serif);font-size:1.05rem;color:var(--tx-d)}
.clusters em{display:block;font-style:normal;font-size:.88rem;color:var(--tx-d2)}
.panel-glass .chips li{background:rgb(var(--txd-rgb)/.05);border-color:var(--line-d);color:var(--tx-d)}
.panel-glass .chips li:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- 尾声 ---------- */
.closing{background:linear-gradient(180deg,var(--paper) 0%,var(--paper2) 100%)}
.goals{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.85rem;max-width:74rem;margin:0 auto 2rem}
.goal{padding:1.1rem;border-radius:6px;background:rgb(var(--paperhi-rgb)/.8);border:1px solid var(--line);text-align:center;transition:var(--dur-quick)}
.goal:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.goal b{font-family:var(--serif);font-size:1.95rem;color:var(--cinnabar);display:block;line-height:1.05}
.goal span{font-size:.88rem;color:var(--tx2);display:block;margin-top:.3rem}
.four{max-width:74rem;margin:0 auto 2.4rem;padding:clamp(1.2rem,3vw,1.8rem);border-top:2px solid var(--cinnabar);border-bottom:1px solid var(--line)}
.four h2{font-size:1.4rem;margin-bottom:.5rem}
.bye{max-width:44rem;margin:clamp(2.5rem,7vw,4rem) auto 0;text-align:center;border:0;padding:0}
.bye p{font-family:var(--serif);font-size:clamp(1.25rem,3.6vw,1.85rem);line-height:1.85;letter-spacing:.03em;color:var(--ink2)}
.bye cite{font-family:var(--kai);font-style:normal;color:var(--cinnabar);letter-spacing:.2em;font-size:1rem}

/* ---------- 页脚 v4：换卷 · 目录 · 底线 ---------- */
.foot{background:var(--ink);color:var(--tx-d);padding:clamp(2rem,5vw,3rem) clamp(1.1rem,5vw,3.4rem) 1.3rem}
.foot>*{max-width:74rem;margin-inline:auto}
.foot>.ft-map,.foot>.foot-bar{margin-top:clamp(1.25rem,3vw,1.85rem)}

/* 1. 本卷读完 → 下一卷：一条横卡，不铺数字方块 */
.ft-next{display:flex;align-items:baseline;flex-wrap:wrap;gap:.4rem .9rem;width:100%;
  padding:clamp(.85rem,2vw,1.1rem) clamp(.9rem,2.1vw,1.3rem);
  border:1px solid var(--line-d);border-radius:6px;background:rgb(var(--ink3-rgb)/.34);
  text-decoration:none;color:var(--tx-d);
  transition:border-color var(--t-hover),background var(--t-hover)}
.ft-next:hover,.ft-next:focus-visible{border-color:rgb(var(--gold-rgb)/.55);background:rgb(var(--ink3-rgb)/.62)}
.ftn-tag{flex:none;font-family:var(--kai);font-size:.75rem;letter-spacing:.26em;color:var(--gold)}
.ftn-vol{flex:none;font-family:var(--kai);font-style:normal;font-size:.8rem;letter-spacing:.1em;color:var(--tx-d2)}
.ftn-name{font-family:var(--serif);font-weight:400;font-size:clamp(1.05rem,2vw,1.3rem);letter-spacing:.03em;color:var(--paper-hi)}
.ftn-hook{flex:1 1 13rem;min-width:0;font-style:normal;font-size:.84rem;line-height:1.7;color:var(--tx-d2)}
.ftn-arrow{flex:none;align-self:center;width:1.6rem;color:var(--gold);transition:transform var(--t-hover)}
.ft-next:hover .ftn-arrow,.ft-next:focus-visible .ftn-arrow{transform:translateX(4px)}

/* 2. 站内目录：九卷压成一行文字链，当前卷标“今” */
.ft-line{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;text-align:center;margin:0;padding:.8rem .1rem;list-style:none;
  border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);gap:0}
.ft-line li{display:flex;align-items:baseline}
.ft-line li+li::before{content:"·";margin:0 .6rem;color:rgb(var(--gold-rgb)/.45)}
.ft-line a{display:inline-flex;align-items:baseline;gap:.38rem;padding:.14rem .06rem;
  font-size:.88rem;letter-spacing:.02em;text-decoration:none;color:var(--tx-d2);transition:color var(--t-hover)}
.ft-line a i{font-style:normal;font-family:var(--kai);font-size:.74rem;letter-spacing:.1em;color:rgb(var(--gold-rgb)/.8)}
.ft-line a:hover,.ft-line a:focus-visible{color:var(--paper-hi)}
.ft-line a.cur{color:var(--cinnabar-l)}
.ft-line a.cur i{color:var(--cinnabar-l)}
.ft-line a.cur::after{content:"今";margin-left:.3rem;font-family:var(--kai);font-size:.72rem;letter-spacing:.08em;color:rgb(var(--cinnl-rgb)/.85)}

/* 目录网格：≥768px 时 4 列等宽，8 项正好 2 行；窄屏保持流式换行 */
@media (min-width:768px){
  .ft-line{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:0 .6rem;border-top:none;border-bottom:none;padding:.8rem 0}
  .ft-line li+li::before{content:none}
  /* 用 ::after 在每格右侧补点号（最后一格不补） */
  .ft-line li:not(:nth-child(4n))::after{content:"·";margin-left:.6rem;color:rgb(var(--gold-rgb)/.45)}
}

/* 3. 底线：品牌 + 署名一行，说明整行 */
.foot-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.5rem 1.4rem;
  padding-top:1.1rem;border-top:1px solid var(--line-d)}
.ftb-brand{grid-area:1/1/2/2;display:flex;align-items:center;gap:.62rem;min-width:0}
.ftb-brand b{font-family:var(--serif);font-weight:400;font-size:1rem;letter-spacing:.05em;color:var(--paper-hi)}
.ftb-brand i{font-style:normal;font-family:var(--kai);font-size:.74rem;letter-spacing:.16em;color:var(--gold)}
.ftb-brand .logo-card{padding:.16rem;border-radius:.42rem}
.ftb-brand .logo-card img{width:2.05rem;height:2.05rem;object-fit:cover;border-radius:.28rem}
.ftb-meta{grid-area:2/1/3/3;font-size:.76rem;line-height:1.75;color:var(--tx-d2)}
.ftb-meta b{font-family:var(--serif);font-weight:400;color:var(--paper-hi)}
.ftb-meta a{color:var(--gold);text-decoration:none;border-bottom:1px dotted rgb(var(--gold-rgb)/.5)}
.ftb-meta a:hover,.ftb-meta a:focus-visible{border-bottom-color:var(--gold)}
.ftb-sign{grid-area:1/2/2/3;justify-self:end;white-space:nowrap;font-size:.76rem;letter-spacing:.06em;color:rgb(var(--txd2-rgb)/.78)}
.ftb-sign b{font-family:var(--kai);font-weight:400;letter-spacing:.12em;color:var(--gold)}
.ftb-sign a{color:inherit;text-decoration:none;border-bottom:1px dotted rgb(var(--gold-rgb)/.5);transition:var(--dur-quick)}
.ftb-sign a:hover,.ftb-sign a:focus-visible{border-bottom-style:solid;border-bottom-color:var(--gold)}

/* ---------- 侧边浮动竖轨：回到本页顶部 + 数字台账入口 ---------- */
.siderail{position:fixed;right:clamp(.7rem,1.8vw,1.6rem);bottom:clamp(4.2rem,11vh,6.5rem);z-index:46;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  opacity:0;transform:translateX(130%);pointer-events:none;
  transition:opacity var(--dur-standard),transform var(--dur-standard) var(--ease-signature)}
.siderail.on{opacity:1;transform:none;pointer-events:auto}
.sidetop,.sideledger{display:flex;flex-direction:column;align-items:center;gap:.34rem;padding:.62rem .48rem .55rem;
  cursor:var(--cur-hand);border-radius:99px;border:1px solid rgb(var(--ink2-rgb)/.2);
  background:rgb(var(--paperhi-rgb)/.92);backdrop-filter:blur(10px);color:var(--tx2);
  box-shadow:0 10px 26px rgb(var(--ink-rgb)/.2);
  transition:background var(--dur-standard),color var(--dur-standard),border-color var(--dur-standard)}
.sidetop .ar,.sideledger .ar{font-style:normal;font-size:1.05rem;line-height:1;color:var(--cinnabar);transition:var(--dur-quick)}
.sidetop .lb,.sideledger .lb{writing-mode:vertical-rl;font-size:.74rem;letter-spacing:.2em}
.sidetop:hover,.sidetop:focus-visible,.sideledger:hover,.sideledger:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--ink2)}
.sidetop:hover .ar,.sidetop:focus-visible .ar,.sideledger:hover .ar,.sideledger:focus-visible .ar{color:var(--ink2)}
.sideledger .ar{color:var(--gold-d)}
.sideledger:hover .ar,.sideledger:focus-visible .ar{color:var(--ink2)}
@media (max-width:640px){
  .siderail{right:.55rem;bottom:3.6rem;gap:.4rem}
  .sidetop,.sideledger{padding:.5rem .38rem .45rem}
  .sidetop .lb,.sideledger .lb{font-size:.72rem;letter-spacing:.14em}
}

/* ---------- 数字台账浮层：从按钮中心扩散满屏 ---------- */
.ledger-overlay{position:fixed;inset:0;z-index:80;overflow:hidden}
.lo-veil{position:absolute;inset:0;background:rgb(var(--ink-rgb)/.6);opacity:0;
  transition:opacity .4s ease;pointer-events:none}
.lo-veil.show{opacity:1}
.lo-circle{position:absolute;border-radius:50%;background:var(--paper-hi);pointer-events:none;
  transform:scale(0);transition:transform .55s cubic-bezier(.32,.72,0,1)}
.lo-circle.expand{transform:scale(1)}
.lo-frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(.6rem,2.4vw,2rem);opacity:0;transform:scale(.96);
  transition:opacity .38s ease .3s,transform .38s ease .3s}
.lo-frame.in{opacity:1;transform:none}
.lo-sheet{width:100%;max-width:82rem;height:100%;background:var(--paper-hi);border-radius:10px;
  border:1px solid var(--line);box-shadow:0 24px 64px rgb(var(--ink-rgb)/.32);overflow:hidden}
.lo-sheet iframe{width:100%;height:100%;border:0;display:block}
.lo-close{position:absolute;top:clamp(.5rem,1.6vw,1rem);right:clamp(.5rem,1.6vw,1rem);z-index:3;
  width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--line);background:var(--paper);
  color:var(--tx2);font-size:1.15rem;line-height:1;cursor:var(--cur-hand);
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgb(var(--ink-rgb)/.18);
  transition:background var(--dur-quick),color var(--dur-quick),border-color var(--dur-quick)}
.lo-close:hover,.lo-close:focus-visible{background:var(--cinnabar);color:#fff;border-color:var(--cinnabar)}
@media (max-width:640px){
  .lo-frame{padding:.4rem}
  .lo-sheet{border-radius:7px}
}

/* 站内说明用的失效来源标记：只留题名，不再加链 */
span.cite.dead{cursor:default;background:rgb(var(--cinn-rgb)/.09);color:var(--cinnabar-d);
  border:1px dashed rgb(var(--cinn-rgb)/.45)}
span.cite.dead i{display:block;font-style:normal;font-size:1em;letter-spacing:.02em;opacity:.8}

/* ---------- 提示气泡 ---------- */
.tip{position:fixed;z-index:70;pointer-events:none;opacity:0;transform:translate(-50%,-118%);
  max-width:min(23rem,80vw);padding:.6rem .8rem;border-radius:5px;background:rgb(var(--ink-rgb)/.95);color:var(--tx-d);
  font-size:.86rem;line-height:1.6;box-shadow:0 10px 30px rgb(var(--ink-rgb)/.56);transition:opacity var(--dur-quick);border:1px solid rgb(var(--gold-rgb)/.4)}
.tip.show{opacity:1}
.tip b{color:var(--gold);font-family:var(--serif);display:block;margin-bottom:.15rem}
.tip em{font-style:normal;color:var(--tx-d2);display:block;font-size:.8rem}

/* ---------- 三维视图（ECharts GL） ---------- */
.mode{display:flex;gap:.5rem;margin:.2rem 0 .9rem}
.mode button{padding:.34rem .95rem;border:1px solid var(--line);background:rgb(var(--paperhi-rgb)/.6);
  border-radius:99px;font-size:var(--fs-s);letter-spacing:.06em;cursor:var(--cur-hand);color:var(--tx2);transition:var(--dur-quick)}
.mode button:hover{border-color:var(--gold);color:var(--tx)}
.mode button.act{background:var(--ink3);border-color:var(--ink3);color:var(--paper-hi)}
.v3d{position:relative;height:clamp(330px,44vw,470px);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0,var(--paper-hi) 0,var(--paper2) 70%,var(--paper3) 100%)}
.v3d canvas{display:block;cursor:var(--cur-grab);touch-action:none}
.v3d canvas:active{cursor:var(--cur-grab-d)}
.pick{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.pick button{padding:.28rem .7rem;border-radius:99px;border:1px solid var(--line);background:transparent;
  font-size:var(--fs-s);color:var(--tx2);cursor:var(--cur-hand);transition:var(--dur-quick)}
.pick button:hover{border-color:var(--cinnabar);color:var(--cinnabar);background:rgb(var(--cinn-rgb)/.06)}
.pick button.act{background:var(--cinnabar);border-color:var(--cinnabar);color:var(--paper-hi)}
.d3 .hint{margin-bottom:1rem}

@media (max-width:900px){
  .v3d{min-height:0}
}

/* ---------- 卷三 V2:城垣十六笔 ---------- */
.wlog{list-style:none;margin:1.15rem 0 .3rem;padding:0;display:grid}
.wlog li{display:grid;grid-template-columns:8.4rem minmax(0,1fr);gap:.8rem;align-items:baseline;
  padding:.5rem 0;border-bottom:1px dashed var(--line-d)}
.wlog li:last-child{border-bottom:0}
.wlog b{font-family:var(--serif);font-size:var(--fs-b);color:var(--gold);letter-spacing:.02em;white-space:nowrap}
.wlog span{font-size:var(--fs-sm);line-height:1.78;color:var(--tx-d2)}
.wlog li.now{padding:.5rem .55rem;border-left:2px solid var(--gold);border-bottom-color:transparent;
  border-radius:4px;background:rgb(var(--paperhi-rgb)/.72)}
.wlog li.now span{color:var(--tx-d)}
.wlog li.now em{font-style:normal;color:var(--gold)}
@media (max-width:640px){.wlog li{grid-template-columns:minmax(0,1fr);gap:.12rem}}
.perim-hold{display:grid;gap:clamp(.7rem,1.8vw,1.1rem);margin:1rem 0 .3rem}
#perimBars{height:clamp(250px,30vw,300px)}

/* ---------- 卷三 V2:沙盘画布 ---------- */
/* 画布底色就取基础 .v3d 的纸色渐变：canvas 出图后是不透明的 0xe9e0cf，
   未出图那一段要接着同一张纸，不另调色。夜读档是唯一例外——场景色压到 #16212a，
   不改这一条的话首帧之前会闪一块米色。 */
.v3d.night{background:#16212a}
.atlas-viz{height:clamp(360px,58vw,620px)}
/* 兜底：three 写进画布的内联尺寸优先级更高，所以这条只在内联缺失时生效——
   让画布与主机等宽等高，而不是按位图尺寸（位图是 dpr 倍）撑破 overflow:hidden */
.atlas-viz>canvas{display:block;width:100%;height:100%}
.atlas-bar{display:flex;flex-wrap:wrap;gap:.5rem .7rem;align-items:center;margin:.95rem 0 .8rem}
.atlas-bar .mode{margin:0}
.dark .pick button{border-color:var(--line-d);color:var(--tx-d2)}
.dark .pick button:hover{border-color:var(--gold);color:var(--gold);background:rgb(var(--gold-rgb)/.08)}
.dark .mode button{border-color:var(--line-d);background:rgb(var(--txd-rgb)/.05);color:var(--tx-d2)}
.dark .mode button:hover{border-color:var(--gold);color:var(--tx-d)}
.dark .mode button.act{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.atlas-state{font-family:var(--serif);font-size:var(--fs-s);letter-spacing:.06em;color:rgb(var(--txd-rgb)/.6)}
.atlas-search{flex:1 1 11rem;min-width:0;padding:.36rem .8rem;border-radius:99px;border:1px solid var(--line-d);
  background:rgb(var(--txd-rgb)/.05);color:var(--tx-d);font-size:.85rem}
.atlas-search::placeholder{color:rgb(var(--txd-rgb)/.42)}
.atlas-search:focus{outline:none;border-color:var(--gold);background:rgb(var(--gold-rgb)/.07);color:var(--tx-d)}
.dark .city-read{background:rgb(var(--txd-rgb)/.05);border-color:var(--line-d)}
.dark .city-read b{color:var(--gold)}
.dark .city-read p{color:var(--tx-d2)}

/* ---------- 沙盘标签 / 指北 ---------- */
.atlas-labels{position:absolute;inset:0;z-index:2;pointer-events:none}
.al-lab{position:absolute;top:0;left:0;pointer-events:auto;padding:.15rem .42rem;border-radius:3px;
  border:1px solid rgb(var(--ink-rgb)/.2);background:rgb(var(--paperhi-rgb)/.86);color:var(--ink2);
  font-family:var(--serif);font-size:var(--fs-2xs);line-height:1.3;letter-spacing:.02em;white-space:nowrap;cursor:var(--cur-hand);
  transition:background var(--dur-immediate),color var(--dur-immediate),opacity var(--dur-immediate),border-color var(--dur-immediate)}
.al-lab::after{content:"";position:absolute;left:50%;bottom:-6px;width:1px;height:6px;background:currentColor;opacity:.5}
.al-lab:hover{background:var(--paper-hi);border-color:var(--ink2)}
.al-lab.out{opacity:0;pointer-events:none}
/* 全景里两个名字撞上时，后者收起 —— 不是坏了，是让位；飞近了自己回来 */
.al-lab.cull{opacity:0;pointer-events:none}
.al-lab.far{opacity:.3}
.al-lab.act{background:var(--cinnabar);border-color:var(--cinnabar);color:var(--paper-hi)}
.al-lab[hidden]{display:none}
/* 被"点它就是为了看它"这条豁免请回来的那一件：标签要看得出来是被请回来的 */
.al-lab.gone{border-style:dashed;opacity:.72;text-decoration:underline dotted rgb(var(--txd-rgb)/.45);text-underline-offset:.22em}
.atlas-viz.night .al-lab{background:rgba(20,31,40,.78);color:#dbe6ee;border-color:rgba(219,230,238,.24)}
.atlas-viz.night .al-lab:hover{background:rgba(35,52,65,.94)}
.atlas-compass{position:absolute;right:.7rem;bottom:.7rem;z-index:3;width:2.6rem;height:2.6rem;border-radius:50%;
  border:1px solid rgb(var(--ink-rgb)/.22);background:rgb(var(--paperhi-rgb)/.62);pointer-events:none;overflow:hidden}
.atlas-compass i{position:absolute;inset:.3rem;display:block;transform:rotate(var(--az,0deg));transition:transform .1s linear}
.atlas-compass i::before,.atlas-compass i::after{content:"";position:absolute;left:50%;margin-left:-1.5px;width:3px;border-radius:2px}
.atlas-compass i::before{top:0;height:48%;background:var(--cinnabar)}
.atlas-compass i::after{bottom:0;height:48%;background:rgb(var(--ink-rgb)/.32)}
.atlas-viz.night .atlas-compass{border-color:rgba(219,230,238,.26);background:rgba(20,31,40,.6)}
.atlas-viz.night .atlas-compass i::after{background:rgba(219,230,238,.28)}
.atlas-fb{position:absolute;inset:0;z-index:4;display:grid;gap:.6rem;align-content:center;padding:1rem;background:var(--paper2)}
/* 三维首帧之前，这里本来是一块米色空框 —— 这句话给那半秒到几秒一个着落。
   它由 atlas.js（接手时）和页面看门狗（认输时）两边摘掉，不会挂着"正在载入"不走。 */
.atlas-load{position:absolute;left:1rem;right:1rem;top:50%;transform:translateY(-50%);z-index:3;margin:0;
  text-align:center;font-family:var(--kai);font-size:var(--fs-s);line-height:1.9;letter-spacing:.14em;
  color:rgb(var(--txd-rgb)/.6);pointer-events:none}
/* hidden 属性只是浏览器默认的 display:none，被上一条的 display:grid 直接盖掉。
   不写这条，平面图永远铺在画布上面（z-index:4 + 不透明底），三维模型就"看不见"。 */
.atlas-fb[hidden]{display:none}
.atlas-fb img{width:100%;height:auto;max-height:58vh;object-fit:contain;border-radius:4px;border:1px solid var(--line)}
.atlas-fb p{margin:0;font-size:var(--fs-s);line-height:1.7;color:var(--tx2)}
.atlas-fb button{justify-self:center;margin-top:.1rem}
.atlas-off .atlas-labels,.atlas-off .atlas-compass{display:none}
@media (max-width:680px){
  .atlas-viz{height:clamp(320px,86vw,440px)}
}

/* ---------- 沙盘:类别筛选与名册 ---------- */
.atlas-filter{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--rack,9.4rem),1fr));gap:.34rem .7rem;margin:0}
/* 三组各有自己的题头与自己的格，格宽跟着控件台那副格子走：
   格局 / 建筑 / 城外的分界因此看得见，不再是十个同色小药片糊成一行。 */
.atlas-filter .fg{display:flex;align-items:flex-start;gap:.42rem;min-width:0}
.atlas-filter .fg>b{flex:0 0 auto;padding-top:.34rem;font-family:var(--kai);font-size:var(--fs-2xs);
  letter-spacing:.16em;color:rgb(var(--txd-rgb)/.6)}
.atlas-filter .fg-c{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:.26rem}
.atlas-filter button{display:inline-flex;align-items:center;gap:.32rem;padding:.2rem .55rem;border-radius:99px;
  border:1px solid var(--line-d);background:transparent;color:var(--tx-d2);font-size:var(--fs-2xs);cursor:var(--cur-hand);transition:var(--dur-quick)}
.atlas-filter button i{flex:0 0 auto;width:.62rem;height:.62rem;border-radius:2px;display:inline-block}
.atlas-filter button:hover{color:var(--tx-d);border-color:var(--gold)}
.atlas-filter button.off{opacity:.4}
.atlas-filter button.off i{filter:grayscale(1)}
/* ---------- 卷三 V4:底册密排 ---------- */
/* 84 处全文仍留在静态 DOM 里（无 JS、搜索引擎都读得到），只是默认收成一行一条。
   展开态由 atlas.js 拨两个类：.exp 在按钮上、.open 在 li 上，li 占满一整行。 */
.atlas-roster{list-style:none;margin:.2rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));gap:.3rem .45rem;align-items:start}
.atlas-roster li{list-style:none;min-width:0}
.atlas-roster li.open{grid-column:1/-1}
.atlas-roster li.gone{display:none}
.atlas-roster button{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.5rem;
  align-items:baseline;width:100%;text-align:left;padding:.32rem .55rem;cursor:var(--cur-hand);border-radius:4px;
  border:1px solid var(--line-d);border-left-width:3px;background:rgb(var(--txd-rgb)/.04);transition:var(--dur-quick)}
/* 名字右边那一个小数字就是这一处全部的年代线索（1368–1648 / 1585 增 / –1958） */
.atlas-roster button::after{content:attr(data-era);grid-column:2;justify-self:end;white-space:nowrap;
  font-family:var(--serif);font-size:.72rem;letter-spacing:.03em;color:rgb(var(--txd-rgb)/.45)}
.atlas-roster button:hover{background:rgb(var(--gold-rgb)/.09);border-color:var(--gold);border-left-color:var(--gold)}
.atlas-roster button.act{background:rgb(var(--cinn-rgb)/.15);border-color:var(--cinnabar);border-left-color:var(--cinnabar)}
.atlas-roster button.dim{opacity:.26}
.atlas-roster button.off{display:none}
/* 此年不在场上的：留在册里划虚线，不删。删掉就等于说"这个名字不属于这座城"，
   而它只是这一年还没建或已经拆；点它仍然有效（沙盘会把它单独请回画面）。 */
.atlas-roster button.away{opacity:.5;border-left-style:dashed}
.atlas-roster button.away:hover{opacity:1}
.atlas-roster .an{grid-column:1;font-family:var(--serif);font-size:var(--fs-sm);color:var(--tx-d);letter-spacing:.02em}
.atlas-roster .ad{display:none;grid-column:1/-1;margin-top:.3rem;font-size:.83rem;line-height:1.78;color:var(--tx-d2)}
.atlas-roster button.exp .ad{display:block}
.atlas-roster button.exp{background:rgb(var(--gold-rgb)/.07)}
.atlas-roster [data-cat="gate"]{border-left-color:#b3924f}
.atlas-roster [data-cat="guan"]{border-left-color:#c9a0dc}
.atlas-roster [data-cat="wang"]{border-left-color:#e8c96a}
.atlas-roster [data-cat="xue"]{border-left-color:#d99a8c}
.atlas-roster [data-cat="miao"]{border-left-color:#5aa85a}
.atlas-roster [data-cat="ku"]{border-left-color:#b8955f}
.atlas-roster [data-cat="jie"]{border-left-color:#a9977a}
.atlas-roster [data-cat="shui"]{border-left-color:#7fb6c2}
/* 只有名字、没有街面的那一行：虚线边标出差别，但照常可点 —— 它飞到位、只是那儿没有一条街 */
.atlas-roster button.nostreet{border-left-style:dashed}
/* 三张图与一把尺里的老地图：不能按 4/3 裁，裁掉图例与比例尺就白放 */
.atlas-srcs .pc img{aspect-ratio:auto;height:auto;object-fit:contain;background:var(--paper2);cursor:zoom-in}
.atlas-srcs .pc{flex:0 0 clamp(13rem,40vw,20rem)}

html.js [data-sec] .reveal{opacity:0;transform:translateY(26px);transition:opacity var(--dur-standard) var(--ease-signature),transform var(--dur-standard) var(--ease-signature)}
html.js [data-sec] .in.reveal,html.js [data-sec] .reveal.in{opacity:1;transform:none}

/* 页脚不做入场动画：它在视口最末端，揭示只会添乱 */

@media (max-width:900px){
  .tl-node{width:9.4rem}
  /* 窄屏底线：署名仍贴右和brand 同排，说明独占整行 */
  .foot-bar{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:.8rem 1.2rem}
  .ftb-meta{max-width:34rem}
}
@media (max-width:640px){
  body{font-size:16px}
  .topbar{flex-direction:column;align-items:flex-start;gap:.2rem;padding:.5rem .9rem}
  .topbar nav{width:100%;overflow-x:auto;gap:0;scrollbar-width:none;padding-bottom:.1rem}
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav a{font-size:.86rem;padding:.24rem .58rem;white-space:nowrap}
  [data-sec]{scroll-margin-top:96px}
  .facts li{grid-template-columns:1fr}
  .facts b{text-align:left}
  .keyfig{grid-template-columns:repeat(2,1fr)}
  .ftn-hook{flex-basis:100%}
  .foot-bar{grid-template-columns:1fr;gap:.75rem}
  .ftb-brand,.ftb-meta,.ftb-sign{justify-self:start;margin-left:0;margin-right:0}
  .ftb-meta{grid-area:2/1/3/2;max-width:none}
  .ftb-sign{grid-area:3/1/4/2;white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-sec] .reveal{opacity:1;transform:none}
}

/* ---------- 折叠依据与句内来源 ---------- */
details.more{margin:.55rem 0 0;border-top:1px dashed var(--line);padding-top:.5rem}
details.more>summary{cursor:var(--cur-hand);list-style:none;font-size:var(--fs-s);letter-spacing:.06em;color:var(--tx2);user-select:none;transition:var(--dur-quick)}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"＋ ";color:var(--gold)}
details.more[open]>summary::before{content:"－ "}
details.more>summary:hover{color:var(--gold)}
details.more>div{margin-top:.45rem;font-size:var(--fs-s);line-height:1.8;color:var(--tx2)}
/* 暗底章节里再翻回暖白，浅底面板上的 --tx-d 会直接看不见 */
.dark details.more>summary,.dark details.more>div{color:var(--tx-d2)}
.dark details.more>summary:hover{color:var(--gold)}
a.cite,span.cite{display:inline-block;margin-left:.28rem;padding:.05rem .38rem;border-radius:3px;
  font-size:var(--fs-2xs);letter-spacing:.04em;line-height:1.5;text-decoration:none;vertical-align:.08em;
  background:rgb(var(--paperhi-rgb)/.86);color:var(--gold-d);border:1px solid rgb(var(--gold-rgb)/.32);transition:var(--dur-quick)}
a.cite:hover{background:var(--gold);color:var(--ink2);border-color:var(--gold)}

/* ---------- 站外链接统一标记：新窗口 + ↗ ---------- */
a[href^="http"]{text-underline-offset:.22em}
a[href^="http"]::after{content:"↗";font-size:.74em;margin-left:.24em;opacity:.55;vertical-align:.14em}
a[href^="http"]:hover::after{opacity:1}

/* ---------- 首页分卷入口：12 栏非对称目录 ---------- */
.chaps{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(.8rem,1.8vw,1.35rem);
  max-width:82rem;margin:0 auto}
.chap{grid-column:span 6;position:relative;display:flex;flex-direction:column;gap:.5rem;
  --cpad-y:clamp(1.15rem,2.4vw,1.7rem);--cpad-x:clamp(1.1rem,2vw,1.5rem);
  padding:var(--cpad-y) var(--cpad-x);
  border:1px solid var(--line);border-radius:6px;text-decoration:none;color:inherit;overflow:hidden;
  background:linear-gradient(180deg,rgb(var(--paperhi-rgb)/.8),rgb(var(--paper2-rgb)/.45));
  box-shadow:0 6px 18px rgb(var(--ink-rgb)/.06);
  transition:transform var(--dur-standard) var(--ease-signature),box-shadow var(--dur-standard),border-color var(--dur-standard),background var(--dur-standard)}
.chap.c7{grid-column:span 7}
.chap.c5{grid-column:span 5}
.chap-ph{position:relative;margin:calc(-1*var(--cpad-y)) calc(-1*var(--cpad-x)) -.3rem;
  aspect-ratio:16/9;overflow:hidden;background:var(--ink2)}
.chap-ph img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) contrast(1.02);
  transition:transform var(--dur-standard) var(--ease-signature)}
.chap:hover .chap-ph img,.chap:focus-visible .chap-ph img{transform:scale(1.04)}
.chap-ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgb(var(--ink-rgb)/.22),rgb(var(--ink-rgb)/0) 34%,rgb(var(--ink-rgb)/.62))}
.chap-ph figcaption{position:absolute;left:var(--cpad-x);right:var(--cpad-x);bottom:.5rem;z-index:1;
  font-family:var(--kai);font-size:.76rem;letter-spacing:.1em;line-height:1.5;color:rgb(var(--txd-rgb)/.92);
  text-shadow:0 1px 6px rgb(var(--ink-rgb)/.7)}
.chap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--cinnabar),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform var(--dur-standard)}
.chap:hover,.chap:focus-visible{transform:translateY(-4px);border-color:rgb(var(--gold-rgb)/.5);
  box-shadow:0 18px 36px rgb(var(--ink-rgb)/.14);background:linear-gradient(180deg,rgb(var(--paperhi-rgb)/.95),rgb(var(--paper2-rgb)/.6))}
.chap:hover::after,.chap:focus-visible::after{transform:scaleX(1)}
.chap-hd{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
/* 卷二章标是区间数（341—342），窄屏一行放不下时让它整块换行，而不是挤出槽口。 */
@media (max-width:40rem){.chap-hd{flex-wrap:wrap;gap:.3rem 1rem}}
.chap .cn{font-family:var(--kai);font-size:.8rem;letter-spacing:.24em;color:var(--cinnabar);white-space:nowrap}
.chap .ck{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,2.9vw,2.3rem);line-height:1;
  color:var(--ink2);white-space:nowrap;font-variant-numeric:tabular-nums;transition:color var(--dur-quick)}
.chap .ck i{font-style:normal;font-family:var(--sans);font-weight:400;font-size:.72rem;letter-spacing:.05em;
  color:var(--tx2);margin-left:.35rem;vertical-align:.16em}
.chap:hover .ck{color:var(--cinnabar)}
.chap h3{font-size:clamp(1.28rem,2.2vw,1.58rem);letter-spacing:.03em}
.chap p{margin:0;font-size:.9rem;line-height:1.75;color:var(--tx2);max-width:44rem}
.chap .tops{display:flex;flex-wrap:wrap;gap:.32rem;margin-top:.3rem}
.chap .tops li{font-size:.75rem;line-height:1.5;padding:.14rem .5rem;border-radius:3px;
  background:rgb(var(--ink3-rgb)/.07);color:var(--tx2)}
.chap .tops li.x{background:rgb(var(--cinn-rgb)/.11);color:var(--cinnabar)}
.chap .tops:empty{display:none}
.chap .go-in{margin-top:auto;padding-top:.6rem;font-style:normal;font-size:.78rem;letter-spacing:.14em;color:var(--gold)}
@media (max-width:1080px){.chap,.chap.c7,.chap.c5{grid-column:span 6}}
@media (max-width:700px){.chap,.chap.c7,.chap.c5{grid-column:span 12}}

/* 尾声与附录：无框横长条，与正卷分开层级 */
.band{max-width:82rem;margin:clamp(1.1rem,2.6vw,1.7rem) auto 0;border-top:1px solid var(--line)}
.band-i{display:grid;grid-template-columns:clamp(6rem,10vw,9rem) minmax(0,1fr) auto 1.6rem;
  gap:clamp(.7rem,2vw,1.4rem);align-items:center;padding:.95rem .1rem;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:var(--dur-quick)}
.band-i:hover{background:rgb(var(--gold-rgb)/.07);padding-left:.7rem}
.band-i .bl{grid-column:1;grid-row:1;font-family:var(--kai);font-size:.8rem;letter-spacing:.2em;color:var(--cinnabar)}
.band-i .bt{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;gap:.55rem;font-size:.86rem;color:var(--tx2);line-height:1.65}
.band-i .bt b{font-family:var(--serif);font-size:1.06rem;font-weight:700;color:var(--ink2);letter-spacing:.02em}
.band-i .bk{grid-column:3;grid-row:1;font-family:var(--serif);font-size:1.35rem;color:var(--ink2);white-space:nowrap;font-variant-numeric:tabular-nums}
.band-i .bk i{font-style:normal;font-family:var(--sans);font-size:.7rem;color:var(--tx2);margin-left:.25rem}
.band-i .ba{grid-column:4;grid-row:1;font-style:normal;color:var(--gold);text-align:right;transition:transform var(--dur-standard)}
.band-i:hover .ba{transform:translateX(4px)}
.ph-credit{max-width:82rem;margin:clamp(1.5rem,3vw,2.2rem) auto 0;padding-top:1rem;
  border-top:1px solid var(--line);font-size:var(--fs-s);line-height:1.85;color:var(--tx2);letter-spacing:.02em}
.ph-credit a{color:var(--cinnabar);border-bottom:1px dotted rgb(var(--cinn-rgb)/.5);text-decoration:none}
@media (max-width:700px){
  .band-i{grid-template-columns:1fr auto;gap:.4rem .8rem}
  .band-i .bk{grid-column:2;justify-self:end}
  .band-i .bt{grid-column:1/-1;grid-row:2}
  .band-i .ba{display:none}
}

/* ---------- 节锚点落位（卷内目录 rail 与卷末翻页已撤，只留顶栏高度） ---------- */
button.ghost{font-size:.74rem;padding:.22rem .6rem;border:1px solid var(--line);border-radius:99px;
  background:none;cursor:var(--cur-hand);color:var(--tx2);transition:var(--dur-quick);letter-spacing:.04em}
button.ghost:hover{border-color:var(--cinnabar);color:var(--cinnabar)}
button.ghost[aria-pressed="true"]{background:rgb(var(--cinn-rgb)/.1);border-color:var(--cinnabar);color:var(--cinnabar)}
.chapter{scroll-margin-top:0}
.node{scroll-margin-top:calc(var(--stick) + 22px)}
.node.flash{animation:flash var(--dur-slow) var(--ease-signature)}
@keyframes flash{0%,100%{box-shadow:0 0 0 0 rgb(var(--gold-rgb)/0)}
  18%{box-shadow:0 0 0 3px rgb(var(--gold-rgb)/.55)}60%{box-shadow:0 0 0 3px rgb(var(--gold-rgb)/.25)}}

/* ---------- 节编号 ---------- */
.sec-no{display:block;font-family:var(--serif);font-size:.72rem;letter-spacing:.22em;color:var(--gold);margin-bottom:.4rem}
.sec-no i{font-style:normal;color:var(--tx2);opacity:.55}
.dark .sec-no i{color:var(--tx-d2)}

/* ---------- 渐进式展开 ---------- */
.deep{display:none}
.deep.on{display:block;animation:drp var(--dur-standard) var(--ease-signature)}
@keyframes drp{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.deep>p:first-child{margin-top:.5rem}
.foldbtn{display:inline-flex;align-items:center;gap:.4rem;margin:.15rem 0 .5rem;padding:.28rem .7rem;
  border:1px dashed rgb(var(--cinn-rgb)/.5);border-radius:99px;background:rgb(var(--cinn-rgb)/.05);cursor:var(--cur-hand);
  color:var(--cinnabar);font-size:.78rem;letter-spacing:.04em;transition:var(--dur-quick)}
.foldbtn em{font-style:normal;opacity:.7;font-size:.72rem}
.foldbtn i{font-style:normal;transition:transform var(--dur-standard)}
.foldbtn:hover{background:rgb(var(--cinn-rgb)/.12);border-style:solid}
.foldbtn.open i{transform:rotate(180deg)}
.dark .foldbtn{border-color:rgb(var(--gold-rgb)/.55);color:var(--gold);background:rgb(var(--gold-rgb)/.08)}

/* ---------- 另读（跨卷/跨节） ---------- */
.rel{display:flex;flex-wrap:wrap;align-items:center;gap:.34rem;margin:.9rem 0 0;padding-top:.6rem;
  border-top:1px dashed var(--line)}
.rel>b{font-family:var(--kai);font-weight:400;font-size:.76rem;letter-spacing:.2em;color:var(--cinnabar);margin-right:.2rem}
.dark .rel{border-color:var(--line-d)}
.rel a{display:inline-flex;align-items:baseline;gap:.35rem;text-decoration:none;padding:.2rem .55rem;border-radius:3px;
  border:1px solid rgb(var(--ink2-rgb)/.12);background:rgb(var(--ink3-rgb)/.05);font-size:.76rem;color:var(--tx2);transition:var(--dur-quick)}
.rel a span{font-family:var(--serif);color:var(--tx)}
.rel a em{font-style:normal;opacity:.62;font-size:.72rem}
.rel a:hover{border-color:var(--gold);background:rgb(var(--gold-rgb)/.14);transform:translateY(-1px)}
/* 暗底面板上另有三档原色不够：--cinnabar 3.3、--tx2 2.3、--gold 2.2，
   卷六整章暗底与卷五网络图共用这一条亮档补救。 */
.dark .rel a{border-color:var(--line-d);background:rgb(var(--txd-rgb)/.06);color:var(--tx-d2)}
.dark .rel a span{color:var(--tx-d)}
.dark .rel>b{color:var(--cinnabar-l)}
.dark .sec-no{color:var(--gold-l)}
@media (max-width:640px){.rel a em{display:none}}
.deep.on{margin-top:.45rem}

/* ---------- depth.js：内容基座 ---------- */
.dtab{overflow-x:auto;margin:.4rem 0 .2rem}
.dtab .tbl{min-width:40rem}
.dtab tr{scroll-margin-top:calc(var(--stick) + 22px)}
.dtab tr.flash{animation:flash var(--dur-slow) var(--ease-signature)}
.dtab .tbl td:nth-child(3){white-space:normal;color:inherit;font-variant-numeric:normal}
.dtab .tbl td:nth-child(2){color:var(--cinnabar);font-variant-numeric:tabular-nums}
.dark .tbl th{color:var(--tx-d2);border-bottom-color:var(--line-d)}
.dark .tbl td{border-bottom-color:var(--line-d);color:var(--tx-d2)}
.dark .tbl td:first-child{color:var(--tx-d)}
.dark .tbl td:nth-child(2){color:var(--gold)}
.dark .tbl tbody tr:hover{background:rgb(var(--gold-rgb)/.1)}
.src-l{font-size:var(--fs-s);text-decoration:none;color:var(--river-d);border-bottom:1px dotted rgb(var(--river-rgb)/.5);white-space:nowrap}
.src-l:hover{color:var(--cinnabar);border-color:var(--cinnabar)}
.dark .src-l{color:var(--river-l)}
.tbl td i.q{display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;
  background:rgb(var(--cinn-rgb)/.14);color:var(--cinnabar);font-style:normal;font-size:.72rem;font-weight:700}
.more-rows{display:block;width:100%;margin:.7rem 0 0;font-size:.82rem}
.led-here{display:inline-block;margin:.85rem 0 0;font-size:.78rem;text-decoration:none;color:var(--tx2);
  border:1px dashed var(--line);border-radius:99px;padding:.28rem .7rem;transition:var(--dur-quick)}
.led-here b{color:var(--cinnabar);font-variant-numeric:tabular-nums}
.led-here:hover{border-color:var(--gold);border-style:solid;color:var(--tx);background:rgb(var(--gold-rgb)/.1)}
.dark .led-here{color:var(--tx-d2);border-color:var(--line-d)}
.dark .led-here:hover{color:var(--tx-d);background:rgb(var(--gold-rgb)/.14)}
.dark .led-here b{color:var(--gold)}
.lg-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.7rem}
.chips-lg{display:flex;flex-wrap:wrap;gap:.35rem}
.chips-lg button{font-size:.78rem;padding:.26rem .62rem;border-radius:99px;border:1px solid var(--line);
  background:rgb(var(--paperhi-rgb)/.7);color:var(--tx2);cursor:var(--cur-hand);transition:var(--dur-quick);font-family:inherit}
.chips-lg button:hover{border-color:var(--river-d);color:var(--river-d)}
.chips-lg button.act{background:rgb(var(--river-rgb)/.16);border-color:var(--river-d);color:var(--river-d)}
.lg-act{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.lg-act input{font:inherit;font-size:.84rem;padding:.34rem .6rem;border:1px solid var(--line);border-radius:4px;
  background:rgb(var(--paperhi-rgb)/.85);color:var(--tx);min-width:15rem}
.lg-act input:focus{outline:2px solid var(--gold);outline-offset:1px}
.lg-note{font-size:.82rem;color:var(--tx2);margin:0 0 .5rem}
.lg-note b{color:var(--cinnabar);font-variant-numeric:tabular-nums}
.lg-note em{font-style:normal;color:var(--cinnabar);font-weight:700}
/* ---------- 台账 · 线装账册皮肤（全部只罩 #ledger，不动别处的表） ----------
   账首三笔总账（数字一次性滚上来）、逐行对应的卷色圆点带、字第 N 号编行、
   数值列收朱、存疑改盖“疑”印（一次性落印，带 8% 回弹过冲）。 */
#ledger .lg-head{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin:.1rem 0 .8rem}
#ledger .lg-kpi{display:grid;gap:.05rem;padding:.55rem .7rem .5rem;
  background:rgb(var(--paperhi-rgb)/.8);border:1px solid var(--line);border-top:3px double rgb(var(--cinn-rgb)/.55)}
#ledger .lg-kpi>span{font-size:.72rem;letter-spacing:.18em;color:var(--tx2)}
#ledger .lg-kpi>b{font-family:var(--serif);font-size:1.55rem;line-height:1.15;color:var(--cinnabar);font-variant-numeric:tabular-nums}
#ledger .lg-kpi>b.lg-date{font-size:1.18rem;color:var(--gold-d)}
#ledger .lg-kpi>i{font-style:normal;font-size:.7rem;color:var(--tx2)}
#ledger .lg-dots{display:flex;flex-wrap:wrap;gap:.28rem;padding:.6rem .65rem;margin-bottom:.15rem;
  background:rgb(var(--paper2-rgb)/.5);border:1px solid var(--line)}
#ledger .lg-dot{width:9px;height:9px;padding:0;border:0;cursor:var(--cur-hand);border-radius:50%;
  background:rgb(var(--dc)/.9);transition:transform var(--t-point),box-shadow var(--t-point)}
#ledger .lg-dot:hover,#ledger .lg-dot:focus-visible{transform:scale(1.8);box-shadow:0 0 0 2px rgb(var(--cinn-rgb)/.3)}
#ledger .lg-dot.doubt{border-radius:2px;background:transparent;box-shadow:inset 0 0 0 1.5px rgb(var(--cinn-rgb)/.85)}
#ledger .lg-dot.doubt:hover,#ledger .lg-dot.doubt:focus-visible{box-shadow:inset 0 0 0 1.5px var(--cinnabar),0 0 0 2px rgb(var(--cinn-rgb)/.3)}
#ledger .lg-dot.d-index{--dc:var(--ink3-rgb)}
#ledger .lg-dot.d-geo{--dc:var(--riverd-rgb)}
#ledger .lg-dot.d-region{--dc:var(--moss-rgb)}
#ledger .lg-dot.d-time{--dc:var(--cinnd-rgb)}
#ledger .lg-dot.d-culture{--dc:var(--goldd-rgb)}
#ledger .lg-dot.d-traffic{--dc:var(--river-rgb)}
#ledger .lg-dot.d-money{--dc:var(--gold-rgb)}
#ledger .lg-dot.d-next{--dc:var(--tx2-rgb)}
#ledger .lg-dots-cap{margin:.1rem 0 .8rem;font-size:.72rem;color:var(--tx2)}
/* 点号在前，全局 .dtab 按第 2 列染数值、第 3 列收行距的两条规则都要在这里挪一位 */
#ledger .tbl-led{border-left:3px double rgb(var(--cinn-rgb)/.5)}
#ledger .tbl-led th:first-child,#ledger .tbl-led td:first-child{width:5.6rem;background:rgb(var(--paper2-rgb)/.45)}
#ledger .tbl-led td:nth-child(3){color:var(--cinnabar);font-variant-numeric:tabular-nums}
#ledger .tbl-led td:nth-child(4){color:inherit}
#ledger .lg-no{font-family:var(--kai);font-size:.74rem;color:var(--tx2);letter-spacing:.05em;white-space:nowrap}
#ledger .tbl-led tbody tr{transition:background var(--t-hover)}
#ledger .tbl-led tbody tr:hover{background:rgb(var(--cinn-rgb)/.045)}
#ledger .tbl-led tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--cinnabar)}
/* 疑印：朱框方印、左倾 8°，只落一次 */
#ledger .tbl td i.q{width:1.45rem;height:1.45rem;border-radius:.2rem;border:2px solid rgb(var(--cinn-rgb)/.9);
  background:rgb(var(--cinn-rgb)/.08);font-family:var(--serif);font-size:.8rem;color:var(--cinnabar);
  transform:rotate(-8deg);animation:lg-stamp 320ms var(--ease-enter) both}
@keyframes lg-stamp{from{opacity:0;transform:scale(1.8) rotate(-18deg)}
  60%{opacity:1;transform:scale(.9) rotate(-5deg)}to{opacity:1;transform:scale(1) rotate(-8deg)}}
#ledger .lg-enter{animation:lg-rise var(--dur-quick) var(--ease-enter) both}
@keyframes lg-rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
/* 书签签：左方右圆的纸签，active 烧朱砂 */
#ledger .chips-lg button{border-radius:.15rem .55rem .55rem .15rem;border-left:3px solid rgb(var(--gold-rgb)/.8);
  padding:.26rem .62rem .26rem .5rem}
#ledger .chips-lg button:hover{border-color:var(--cinnabar);color:var(--cinnabar)}
#ledger .chips-lg button.act{background:rgb(var(--cinn-rgb)/.12);border-color:var(--cinnabar);color:var(--cinnabar);font-weight:600}
/* 台账四视图页签：账 / 存疑 / 口径 / 依据，与书签签同一皮肤 */
.lg-tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.9rem}
.lg-tabs button{font-size:.82rem;padding:.3rem .8rem;border-radius:.15rem .55rem .55rem .15rem;
  border:1px solid var(--line);border-left:3px solid rgb(var(--gold-rgb)/.8);
  background:rgb(var(--paperhi-rgb)/.7);color:var(--tx2);cursor:var(--cur-hand);
  transition:var(--dur-quick);font-family:inherit}
.lg-tabs button:hover{border-color:var(--cinnabar);color:var(--cinnabar)}
.lg-tabs button.act{background:rgb(var(--cinn-rgb)/.12);border-color:var(--cinnabar);color:var(--cinnabar);font-weight:600}
.lg-pane[hidden]{display:none}
.lg-pane+.lg-pane{margin-top:1rem}
/* ---------- 对话查账（ledger-chat.js）：气泡流、条目卡、追问签 ---------- */
.lg-chat{display:flex;flex-direction:column;gap:.7rem;margin:0 0 1.1rem}
.lg-chat:empty{display:none}
.lg-turn{max-width:min(92%,34rem);font-size:.88rem;line-height:1.65}
.lg-u{align-self:flex-end;background:var(--cinnabar);color:#fdf8ee;
  padding:.5rem .85rem;border-radius:.75rem .75rem .15rem .75rem}
.lg-a{align-self:flex-start;display:flex;gap:.5rem;max-width:min(96%,40rem)}
.lg-seal{flex:0 0 1.9rem;height:1.9rem;border-radius:3px;background:var(--ink);color:var(--paper-hi);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;align-self:flex-start}
.lg-abody{flex:1;background:rgb(var(--paperhi-rgb)/.85);border:1px solid var(--line);
  border-radius:.15rem .75rem .75rem .75rem;padding:.7rem .85rem}
.lg-abody .lg-head{margin:0 0 .5rem}
.lg-abody .lg-head b{color:var(--cinnabar);font-variant-numeric:tabular-nums}
/* 成句导语（ledger-ask.js）：先说一句人话，卡降为引用。文字墙是这条线，两句封顶。 */
.lg-say{margin:0 0 .45rem;font-size:.95rem;line-height:1.75;color:var(--tx)}
.lg-say b{color:var(--cinnabar);font-weight:700}
/* 答案正文里就地可点的账页链接：加粗＋朱色＋下划线，一眼看出是链接不是正文。
   用 <button> 而不是 <a>：点了不跳锚点、不进浏览历史，键盘 Tab 也照样能聚焦。 */
/* 行内引用链接：padding 会让下划线一路画到空白里，所以留白一律走 margin */
.lg-ref{font:inherit;font-weight:700;color:var(--cinnabar);background:none;border:0;padding:0;
  margin:0 .18em;cursor:pointer;text-decoration:underline;text-decoration-thickness:.09em;text-underline-offset:.24em}
.lg-ref:hover{text-decoration-thickness:.16em}
.lg-ref:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}
.lg-rest{margin:.15rem 0 0;font-size:.78rem;color:var(--tx2);line-height:2}
.lg-ref2{font-weight:600;font-size:.82rem;text-decoration-style:dotted}
.lg-sep{color:var(--tx2);opacity:.6}
.lg-abody .lg-say+.lg-head{font-size:.75rem;color:var(--tx2);margin:0 0 .4rem;letter-spacing:.02em}
.lg-cite{margin:0 0 .4rem;font-size:.72rem;color:var(--tx2);font-family:var(--kai);letter-spacing:.06em}
.lg-kw{font-size:.74rem;color:var(--tx2);margin:0 0 .4rem}
.lg-more{font-size:.76rem;color:var(--tx2);margin:.45rem 0 0}
.lg-items{display:flex;flex-direction:column;gap:.45rem}
.lg-item{display:grid;grid-template-columns:auto 1fr;gap:.1rem .55rem;text-align:left;font-family:inherit;
  background:rgb(var(--paper-rgb)/.6);border:1px solid var(--line);border-left:3px solid var(--cinnabar);
  border-radius:.15rem .5rem .5rem .15rem;padding:.42rem .6rem;cursor:var(--cur-hand);color:var(--tx);
  transition:var(--dur-quick)}
.lg-item:hover{border-color:var(--cinnabar);background:rgb(var(--cinn-rgb)/.07)}
.lg-item:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.lg-item .li-y{grid-column:1;font-variant-numeric:tabular-nums;color:var(--cinnabar);font-weight:700;white-space:nowrap}
.lg-item .li-t{grid-column:2;font-weight:600}
.lg-item .li-v{grid-column:2;font-size:.84rem}
.lg-item .li-q{grid-column:2;font-style:normal;color:var(--cinnabar);font-size:.76rem;font-weight:700}
.lg-item .li-src{grid-column:1/-1;font-style:normal;font-size:.72rem;color:var(--tx2)}
.lg-sug{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}
.lg-sug button{font:inherit;font-size:.74rem;font-family:inherit;padding:.16rem .6rem;border-radius:99px;
  border:1px dashed var(--line);background:none;color:var(--tx2);cursor:var(--cur-hand);transition:var(--dur-quick)}
.lg-sug button:hover{border-color:var(--cinnabar);border-style:solid;color:var(--cinnabar)}
/* ---------- 追问区：独立于对话气泡，放在 dock 上方 ---------- */
.lg-followup{padding:.6rem 0 .3rem;display:flex;gap:.4rem;flex-wrap:wrap;min-height:0;opacity:0;
  transition:opacity var(--dur-quick) ease, min-height var(--dur-quick) ease}
.lg-followup.has-items{opacity:1;min-height:2.2rem}
.lg-followup-label{font-size:.74rem;color:var(--tx2);margin-right:.4rem;font-family:var(--kai)}
.lg-followup button{font:inherit;font-size:.74rem;font-family:inherit;padding:.16rem .6rem;border-radius:99px;
  border:1px dashed var(--line);background:none;color:var(--tx2);cursor:var(--cur-hand);transition:var(--dur-quick)}
.lg-followup button:hover{border-color:var(--cinnabar);border-style:solid;color:var(--cinnabar)}
@media (prefers-reduced-motion:reduce){#ledger .lg-enter,#ledger .tbl td i.q{animation:none}}
@media (max-width:860px){#ledger .lg-head{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---------- 本地语义查账（ledger-ai.js）：状态签、麦克风、契度、朱笔高亮、账页 ---------- */
#ledger .lg-ai{font-size:.72rem;color:var(--tx2);border:1px dashed var(--line);border-radius:99px;
  padding:.24rem .62rem;white-space:nowrap;font-family:var(--kai);letter-spacing:.08em}
#ledger .lg-ai.load{color:var(--gold-d);border-color:rgb(var(--gold-rgb)/.6);border-style:solid}
#ledger .lg-ai.ok{color:var(--cinnabar);border-color:rgb(var(--cinn-rgb)/.55);border-style:solid;background:rgb(var(--cinn-rgb)/.06)}
#ledger .lg-mic{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--line);
  background:rgb(var(--paperhi-rgb)/.85);color:var(--tx2);cursor:var(--cur-hand);transition:var(--dur-quick)}
#ledger .lg-mic:hover{color:var(--cinnabar);border-color:var(--cinnabar)}
#ledger .lg-mic.on{background:var(--cinnabar);color:rgb(var(--paperhi-rgb));border-color:var(--cinnabar);
  box-shadow:0 0 0 4px rgb(var(--cinn-rgb)/.18)}
#ledger .lg-fit{display:inline-block;margin-left:.35rem;font-size:.72rem;font-weight:700;color:var(--gold-d);
  border:1px solid rgb(var(--gold-rgb)/.5);border-radius:3px;padding:0 .26rem;font-variant-numeric:tabular-nums;vertical-align:.1em}
#ledger .tbl-led tbody tr[data-li]{cursor:var(--cur-hand)}
::highlight(wh-hit){background-color:rgb(168 80 60/.22);color:inherit}
#lgPage{width:min(30rem,88vw);margin:auto;padding:1.6rem 1.7rem 1.35rem;position:relative;
  border:1px solid rgb(var(--cinn-rgb)/.5);border-top:3px double var(--cinnabar);border-radius:.4rem;
  background:var(--paper-hi);color:var(--tx);box-shadow:var(--sh)}
#lgPage::backdrop{background:rgb(var(--ink-rgb)/.45)}
#lgPage .pg-roll{margin:0;font-size:.72rem;letter-spacing:.22em;color:var(--tx2)}
#lgPage h3{margin:.15rem 0 .35rem;font-family:var(--serif);font-size:1.06rem;color:var(--tx)}
#lgPage .pg-num{display:block;font-family:var(--serif);font-size:clamp(1.7rem,6vw,2.5rem);line-height:1.25;
  color:var(--cinnabar);font-variant-numeric:tabular-nums}
#lgPage .pg-year{margin:.1rem 0 .55rem;font-size:.82rem;color:var(--tx2)}
#lgPage .pg-src{font-size:.84rem;color:var(--tx2);border-top:1px dashed var(--line);padding-top:.55rem;margin:0 0 .6rem}
#lgPage .pg-go{display:inline-block;font-size:.84rem;color:var(--river-d);text-decoration:none;
  border-bottom:1px dotted rgb(var(--river-rgb)/.5)}
#lgPage .pg-go:hover{color:var(--cinnabar);border-color:var(--cinnabar)}
#lgPage .pg-x{position:absolute;top:.45rem;right:.6rem;border:0;background:none;font-size:1.15rem;
  color:var(--tx2);cursor:var(--cur-hand);line-height:1}
#lgPage .pg-x:hover{color:var(--cinnabar)}
#lgPage i.q{display:inline-grid;place-items:center;width:1.3rem;height:1.3rem;margin-left:.3rem;
  border:2px solid rgb(var(--cinn-rgb)/.9);border-radius:.2rem;transform:rotate(-8deg);
  color:var(--cinnabar);font-style:normal;font-size:.74rem;font-family:var(--serif);background:rgb(var(--cinn-rgb)/.08)}
#lgPage[popover]{opacity:1;transform:none;
  transition:opacity var(--dur-quick) var(--ease-signature),transform var(--dur-quick) var(--ease-signature),
    overlay var(--dur-quick) var(--ease-signature) allow-discrete,display var(--dur-quick) var(--ease-signature) allow-discrete}
@starting-style{#lgPage[popover]{opacity:0;transform:translateY(14px) scale(.97)}}
@media (prefers-reduced-motion:reduce){#lgPage[popover]{transition:none}}
.stg{border-top:1px dashed var(--line-d)}
.stg:last-of-type{border-bottom:1px dashed var(--line-d)}
.stg summary{display:flex;align-items:baseline;gap:.8rem;padding:.72rem .2rem;cursor:var(--cur-hand);list-style:none}
.stg summary::-webkit-details-marker{display:none}
.stg summary b{font-family:var(--serif);font-size:1.12rem;color:var(--tx-d);letter-spacing:.04em}
.stg summary em{font-style:normal;font-size:.78rem;color:var(--tx-d2);font-variant-numeric:tabular-nums}
.stg summary i{margin-left:auto;font-style:normal;color:var(--gold);transition:transform var(--dur-standard)}
.stg[open] summary i{transform:rotate(180deg)}
/* 站点底册：一行一站，点一行就地展开全文 —— 与沙盘底下的 .atlas-roster 同一套读法 */
.tl-rows{display:grid;gap:0;padding:0 .2rem .9rem}
.tl-row{border-top:1px dashed var(--line-d)}
.tl-row>summary{display:grid;grid-template-columns:4.6rem 5.4rem minmax(0,1fr) auto;
  align-items:baseline;gap:.55rem;padding:.46rem .1rem;cursor:var(--cur-hand);list-style:none;
  transition:var(--dur-quick)}
.tl-row>summary::-webkit-details-marker{display:none}
.tl-row>summary:hover{background:rgb(var(--gold-rgb)/.07)}
.tl-row>summary b{font-family:var(--serif);font-size:.95rem;color:var(--gold);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.tl-row>summary span{font-family:var(--kai);font-size:.78rem;color:var(--tx-d2);letter-spacing:.08em}
.tl-row>summary u{text-decoration:none;font-size:.9rem;color:var(--tx-d)}
.tl-row>summary u b{color:var(--gold);font-weight:600}
.tl-row>summary::after{content:"＋";font-size:.8rem;color:rgb(var(--txd-rgb)/.5);transition:transform var(--dur-quick)}
.tl-row[open]>summary{background:rgb(var(--gold-rgb)/.06)}
.tl-row[open]>summary::after{content:"－";color:var(--gold)}
.tl-row>div{padding:0 .1rem .68rem}
.tl-row>div>p{margin:0;font-size:.88rem;line-height:1.78;color:var(--tx-d2)}
.tl-row>div>p b{color:var(--gold);font-weight:600}
.tl-row>div>p em{font-style:normal;color:var(--gold-l);border-bottom:1px dotted rgb(var(--gold-rgb)/.55)}
@media (max-width:640px){
  .tl-row>summary{grid-template-columns:3.9rem minmax(0,1fr) auto}
  .tl-row>summary span{grid-column:2;justify-self:start}
}
/* ---------- 首页三条路径：阶梯式横条 ---------- */
.paths{display:grid;gap:0;max-width:82rem;margin:0 auto;border-top:1px solid var(--line)}
.pth{display:grid;grid-template-columns:clamp(2.6rem,5vw,4.2rem) minmax(0,1fr) auto;
  gap:clamp(.9rem,3vw,2.2rem);align-items:start;padding:clamp(1.05rem,2.6vw,1.6rem) .1rem;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:var(--dur-quick)}
.pth:hover{background:rgb(var(--gold-rgb)/.07);padding-left:.75rem}
.pno{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1;color:var(--paper3);
  font-variant-numeric:tabular-nums;transition:color var(--dur-quick)}
.pth:hover .pno{color:var(--cinnabar)}
.pbody{display:grid;gap:.2rem}
.pbody b{font-family:var(--serif);font-size:clamp(1.15rem,2.2vw,1.42rem);letter-spacing:.03em;color:var(--ink2)}
.pbody i{font-style:normal;font-size:.85rem;letter-spacing:.04em;color:var(--cinnabar)}
.pbody p{margin:.2rem 0 .35rem;font-size:.88rem;line-height:1.7;color:var(--tx2);max-width:52rem}
.pchain{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin-top:.35rem}
.pchain em{font-style:normal;font-size:.76rem;font-family:var(--serif);color:var(--tx);
  padding:.16rem .5rem;border-radius:3px;background:rgb(var(--river-rgb)/.13)}
.pchain i{font-style:normal;color:var(--gold);font-size:.72rem}
.pdur{font-size:.78rem;letter-spacing:.1em;color:var(--tx2);white-space:nowrap;padding-top:.35rem}
@media (max-width:700px){
  .pth{grid-template-columns:2.2rem minmax(0,1fr)}
  .pdur{grid-column:2;justify-self:start;padding-top:.2rem}
}
@media (max-width:860px){.lg-bar{align-items:flex-start}.lg-act input{min-width:0;flex:1}}

/* ================= 内页实景化：卷首图带 · 图卡 · 对比 · 联动 · 灯箱 ================= */
.roll-hero{position:relative;overflow:hidden;background:var(--ink);color:var(--tx-d);isolation:isolate;
  margin:calc(-1*clamp(4.5rem,10vh,7.5rem)) calc(-1*clamp(1.1rem,5vw,3.4rem)) clamp(2.2rem,5vw,3.4rem);
  min-height:clamp(330px,52vh,470px);display:flex;align-items:flex-end}
.rh-bg{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:1fr}
.rh-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.03);will-change:transform}
.roll-hero.split .rh-bg{grid-template-columns:1fr 1fr;gap:1px;background:rgb(var(--txd-rgb)/.3)}
.roll-hero.split .rh-bg img:first-child{object-position:60% 45%}
.roll-hero.split .rh-bg img:last-child{object-position:50% 55%}
.rh-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgb(var(--ink-rgb)/.8),rgb(var(--ink-rgb)/.44) 44%,rgb(var(--ink-rgb)/.9))}
.rh-in{position:relative;z-index:2;width:100%;max-width:74rem;margin:0 auto;
  padding:clamp(3.4rem,9vw,5.6rem) clamp(1.1rem,5vw,3.4rem) clamp(2.6rem,6vw,3.6rem)}
.roll-hero .roll{color:var(--gold);opacity:.92}
.roll-hero h1{font-size:var(--fs-d);letter-spacing:.05em;color:var(--tx-d);margin:0 0 .7rem;text-shadow:0 2px 26px rgb(var(--ink-rgb)/.55)}
.roll-hero .dek{color:rgb(var(--txd-rgb)/.86);font-size:var(--fs-b);max-width:46rem;text-shadow:0 1px 16px rgb(var(--ink-rgb)/.5)}
.rh-cap{position:absolute;right:clamp(1.1rem,5vw,3.4rem);bottom:.7rem;z-index:3;margin:0;max-width:24rem;
  text-align:right;font-size:var(--fs-2xs);line-height:1.6;letter-spacing:.08em;color:var(--tx-d2)}
.rh-cap i{display:block;font-style:normal;opacity:.86}

.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13.5rem),1fr));gap:clamp(.65rem,1.6vw,1rem);
  margin:1.1rem 0 .5rem}
.pc{margin:0;position:relative;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:rgb(var(--paperhi-rgb)/.72);
  box-shadow:0 4px 14px rgb(var(--ink-rgb)/.05);transition:box-shadow var(--dur-standard),transform var(--dur-standard),border-color var(--dur-standard)}
.pc:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgb(var(--ink-rgb)/.13);border-color:rgb(var(--gold-rgb)/.5)}
.pc img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:saturate(.9);cursor:zoom-in;
  transition:transform var(--dur-standard) var(--ease-signature)}
.pc:hover img{transform:scale(1.055)}
.pc figcaption{padding:.5rem .62rem .58rem;font-size:.78rem;line-height:1.6;color:var(--tx2);border-top:1px solid var(--line)}
.pc figcaption b{display:block;font-family:var(--serif);font-size:var(--fs-sm);font-weight:700;color:var(--ink2);letter-spacing:.02em}
.pc .badge{position:absolute;top:.45rem;left:.45rem;z-index:2;font-size:var(--fs-2xs);letter-spacing:.12em;
  padding:.12rem .42rem;border-radius:2px;background:rgb(var(--ink-rgb)/.72);color:rgb(var(--txd-rgb)/.92)}
.pc .badge.y{background:rgb(var(--cinn-rgb)/.86)}
.pstrip{display:flex;gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.7rem;margin:1rem 0 .3rem}
.pstrip .pc{flex:0 0 clamp(11.5rem,38vw,16rem);scroll-snap-align:start}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.6rem,1.6vw,1rem);margin:1.1rem 0 .4rem}

.cmp{position:relative;margin:1.1rem 0 .4rem;aspect-ratio:3/2;overflow:hidden;border-radius:5px;
  border:1px solid var(--line);background:var(--ink);--pos:52%;user-select:none}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.86)}
.cmp .after{clip-path:inset(0 0 0 var(--pos))}
.cmp .before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp .handle{position:absolute;top:0;bottom:0;left:var(--pos);z-index:3;width:2px;margin-left:-1px;
  background:rgb(var(--txd-rgb)/.92);pointer-events:none;box-shadow:0 0 12px rgb(var(--ink-rgb)/.61)}
.cmp .handle::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:2.1rem;height:2.1rem;border-radius:50%;background:rgb(var(--ink-rgb)/.82);color:var(--tx-d);
  display:grid;place-items:center;font-size:.9rem}
.cmp .tag{position:absolute;top:.55rem;z-index:3;font-family:var(--kai);font-size:var(--fs-2xs);letter-spacing:.16em;
  padding:.14rem .5rem;border-radius:2px;background:rgb(var(--ink-rgb)/.72);color:rgb(var(--txd-rgb)/.94)}
.cmp .tag.l{left:.55rem}.cmp .tag.r{right:.55rem}
.cmp input{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;appearance:none}
.cmp-note{font-size:var(--fs-s);color:var(--tx2);margin:.35rem 0 0;letter-spacing:.02em}

[data-lk]{transition:background var(--dur-immediate),box-shadow var(--dur-immediate),border-color var(--dur-immediate)}
tr.hi td,.pc.hi,.rgtile.hi{background:rgb(var(--gold-rgb)/.17)}
.rgtile.hi{border-color:rgb(var(--gold-rgb)/.62);box-shadow:0 10px 24px rgb(var(--ink-rgb)/.12)}

.lbx{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:clamp(1rem,4vw,3rem);
  background:rgb(var(--ink-rgb)/.94);backdrop-filter:blur(2px)}
.lbx.on{display:grid}
.lbx figure{margin:0;max-width:min(1080px,92vw);text-align:center}
.lbx img{max-width:100%;max-height:74vh;border-radius:4px;box-shadow:0 26px 70px rgb(var(--ink-rgb)/.71)}
.lbx figcaption{margin-top:.9rem;font-size:.85rem;line-height:1.75;letter-spacing:.03em;color:rgb(var(--txd-rgb)/.84)}
.lbx button{position:absolute;font:inherit;color:rgb(var(--txd-rgb)/.86);background:rgb(var(--txd-rgb)/.08);
  border:1px solid rgb(var(--txd-rgb)/.24);border-radius:3px;cursor:var(--cur-hand);padding:.34rem .8rem;transition:var(--dur-quick)}
.lbx button:hover{background:rgb(var(--txd-rgb)/.18);color:var(--tx-d)}
.lbx .lb-x{top:1rem;right:1.1rem}
.lbx .lb-p{left:1.1rem;top:50%;transform:translateY(-50%);font-size:1.3rem;line-height:1;padding:.5rem .7rem}
.lbx .lb-n{right:1.1rem;top:50%;transform:translateY(-50%);font-size:1.3rem;line-height:1;padding:.5rem .7rem}
.ph-note{font-size:.76rem;color:var(--tx2);letter-spacing:.03em;margin:.5rem 0 0;padding-top:.6rem;border-top:1px dotted var(--line)}
.ph-note a{color:var(--cinnabar);border-bottom:1px dotted rgb(var(--cinn-rgb)/.5);text-decoration:none}
@media (max-width:700px){
  .roll-hero{min-height:clamp(300px,58vh,420px);flex-direction:column;align-items:stretch}
  .roll-hero.split .rh-bg{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .rh-in{padding:clamp(2.6rem,10vw,3.4rem) clamp(1.1rem,5vw,3.4rem) .7rem}
  .rh-cap{position:static;text-align:left;max-width:none;padding:0 clamp(1.1rem,5vw,3.4rem) .9rem}
  .pair{grid-template-columns:1fr}
  .lbx .lb-p{left:.5rem}.lbx .lb-n{right:.5rem}
}

html.lb-on{overflow:hidden}

/* 图表图例开关 */
#chart .lg{cursor:var(--cur-hand)}
#chart .lg text{transition:opacity var(--dur-quick)}
#chart .lg.off rect{opacity:.22}
#chart .lg.off text{opacity:.45;text-decoration:line-through}
#chart .lg:focus{outline:none}
#chart .lg:focus rect{stroke:var(--gold);stroke-width:1.6}
.lg-hint{margin:.5rem 0 0;font-size:.78rem;color:var(--tx2);letter-spacing:.02em}
.chapter.dark .lg-hint{color:rgb(var(--txd-rgb)/.66)}
.lg-reset{font:inherit;font-size:.76rem;letter-spacing:.08em;margin-left:.5rem;cursor:var(--cur-hand);
  color:var(--gold);background:none;border:1px solid rgb(var(--gold-rgb)/.5);border-radius:3px;padding:.1rem .5rem}
.lg-reset:hover{background:rgb(var(--gold-rgb)/.14)}

/* ---------- ECharts 图层容器 ---------- */
.ec-box{width:100%}
#chart{height:clamp(352px,45vw,410px)}
#regDensity{height:clamp(21rem,42vw,27rem)}
.ec-bars{height:clamp(240px,30vw,280px)}
.ec-pie{height:clamp(272px,34vw,330px)}
.ec-tall{height:clamp(268px,31vw,300px)}
/* 四库只有四根条，300 px 里挤成牙签；给它一层楼的高度 */
.ec-dam{height:clamp(360px,32vw,440px)}
.ec-thin{height:clamp(158px,19vw,186px)}
.ec-profile{height:clamp(232px,26vw,282px)}
.ec-net{aspect-ratio:38/17;min-height:240px;max-height:500px}

/* ================= P0 共享骨架：分屏章节 · 图集原语 · 指认
   来自 spark-output/context/motion-plan.json 的 Premium 规范：时长 160/220/420/600
   原则：JS 缺席时正文照常可读，动效只是锦上添花（HTML 不依赖它） ================= */

/* 1) 分屏章节 .scene：节号带 → 主视觉 → 正文 → 明细入口/读数条 */
.scene{display:flex;flex-direction:column;gap:clamp(.55rem,1.4vw,1rem)}
html.scenes .scene{min-height:calc(100vh - 136px);justify-content:center;scroll-snap-align:start}
/* 分屏是 flex column，子项默认的 min-width:auto 会让图集/图表按内容撑破屏宽 */
.scene>*{min-width:0;max-width:100%}
html.scenes{scroll-snap-type:y proximity}
.scene .sec-no{margin-bottom:.1rem}
.scene .sc-txt{max-width:46rem;margin:0}
html.scenes .scene .sc-vis{min-height:min(52vh,24rem)}
.scene .sc-vis>.ec-box,.scene .sc-vis>canvas{min-height:inherit}
.scene .foldbtn{align-self:flex-start}
html.scenes .roll-hero{scroll-snap-align:start}
/* 封面页没有卷内目录，但同样按“一屏一段”走：hero / 数字带 / 分卷 / 路径各占一屏 */
html.scenes .hero,html.scenes .factband{scroll-snap-align:start}
html.scenes .factband{min-height:calc(100vh - 136px);display:flex;align-items:center}
html.scenes .factband .fb-in{width:100%}
html.scenes main>section.chapter{scroll-snap-align:start}
html.scenes .scene .sc-txt+.sc-txt{margin-top:-.3rem}

/* 2) 图集三形态：cluster（1 主图 + ≤6 子图）/ strip（横向带）/ compare（今昔滑块） */
.deck{margin:1rem 0 .45rem}
.deck figure{margin:0}
.deck img{cursor:zoom-in}
.deck figcaption{padding:.5rem .62rem .58rem;font-size:.78rem;line-height:1.6;color:var(--tx2);border-top:1px solid var(--line)}
.deck figcaption b{display:block;font-family:var(--serif);font-size:.98rem;font-weight:700;color:var(--ink2);letter-spacing:.02em}

.deck-cluster{display:grid;gap:clamp(.5rem,1.2vw,.8rem);grid-template-columns:repeat(3,minmax(0,1fr))}
.deck-cluster>:first-child{grid-column:1/-1}
.deck-cluster>:first-child img{aspect-ratio:16/7}
.deck-cluster>*{border:1px solid var(--line);border-radius:5px;overflow:hidden;background:rgb(var(--paperhi-rgb)/.72)}
.deck-cluster img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:saturate(.9)}
.deck-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.6rem,1.6vw,1rem)}
/* 剖面两头这两幅原图就是 16:9，不必裁成 4:3 */
.deck-duo.terr-pair img{aspect-ratio:16/9}
.deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13.5rem),1fr));gap:clamp(.65rem,1.6vw,1rem)}
.deck-grid>*,.deck-duo>*{border:1px solid var(--line);border-radius:5px;overflow:hidden;background:rgb(var(--paperhi-rgb)/.72)}
.deck-grid img,.deck-duo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:saturate(.9)}
@media (max-width:760px){
  .deck-cluster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .deck-cluster>:first-child{grid-column:1/-1}
  .deck-duo{grid-template-columns:1fr}
}

/* cluster 逐张落位：40ms/张、--i 由 JS 封顶在 5（总滞后 ≤200ms）；backwards 让延迟期间保持初始态，
   动画结束后交还基础样式，hover 位移不被 fill-mode 锁死 */
@keyframes dkin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html.js .deck-cluster:not(.in)>*{opacity:0}
html.js .deck-cluster.in>*{animation:dkin var(--dur-quick) var(--ease-enter) backwards;animation-delay:calc(var(--i,0)*40ms)}
/* duo / strip / grid / compare 整块一次性淡入，不逐张接力 */
html.js .deck-duo,html.js .deck-strip,html.js .deck-grid,html.js .deck-compare{opacity:0;transition:opacity var(--dur-standard) var(--ease-signature)}
html.js .deck-duo.in,html.js .deck-strip.in,html.js .deck-grid.in,html.js .deck-compare.in{opacity:1}
.deck-strip{display:flex;gap:.7rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.5rem}
.deck-strip::-webkit-scrollbar{display:none}
.deck-strip>*{flex:0 0 clamp(11.5rem,38vw,16rem);border:1px solid var(--line);border-radius:5px;overflow:hidden;background:rgb(var(--paperhi-rgb)/.72)}
.deck-strip img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.9)}

/* compare 键盘可用：range 本身吃 ←→/Home/End，step=2 即每次 2%；焦点框用 outline，不做 box-shadow 过渡 */
.deck-compare input:focus-visible~.handle,.cmp input:focus-visible~.handle{background:var(--cinnabar)}
.deck-compare:focus-within,.cmp:focus-within{outline:1px solid var(--cinnabar);outline-offset:2px}
.deck-compare .handle,.cmp .handle{transition:background var(--dur-immediate) var(--ease-signature)}

/* 3) 统一读数条：文字交叉淡入 220ms，永不做位移 */
.read{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .8rem;margin:.7rem 0 0;
  padding:.5rem .8rem;border-left:2px solid var(--gold);background:rgb(var(--gold-rgb)/.07);min-height:2.5rem;
  transition:opacity var(--dur-quick) var(--ease-signature)}
.read.sw{opacity:0}
.read b{font-family:var(--serif);font-size:1.02rem;letter-spacing:.02em;color:var(--cinnabar)}
.read span{font-size:.85rem;color:var(--tx2);line-height:1.7}
.read i{font-style:normal;margin-left:auto;font-size:.7rem;letter-spacing:.16em;color:var(--tx2);opacity:.55}
.dark .read{border-left-color:var(--gold);background:rgb(var(--gold-rgb)/.1)}
.dark .read b{color:var(--gold)}
.dark .read span{color:var(--tx-d2)}
.dark .read i{color:var(--tx-d2)}
.kbd-hint{font-size:.72rem;letter-spacing:.1em;color:var(--tx2);opacity:.7}
.dark .kbd-hint{color:var(--tx-d2)}

/* 降级：关 JS 与系统 reduce 都走这条路——位移归零，保留可读性 */
@media (prefers-reduced-motion:reduce){
  html.scenes{scroll-snap-type:none}
  html.scenes .scene{min-height:0;justify-content:flex-start}
  html.js .deck-cluster:not(.in)>*,html.js .deck-duo,html.js .deck-strip,html.js .deck-grid,html.js .deck-compare{opacity:1}
  html.js .deck-cluster.in>*{animation:none}
  .read.sw{opacity:1}
}

/* ================= 首屏轮播：四张脸 · 图注联动 · 换卷入口 ================= */

/* 1) hero 四层身份图：叠放，只淡入淡出，不做位移 */
.hero-bg img{position:absolute;inset:0;opacity:0;transition:opacity var(--dur-slow) var(--ease-signature)}
.hero-bg img.on{opacity:1}
.lede{opacity:1;transition:opacity var(--dur-standard) var(--ease-enter)}
.lede.out{opacity:0;transition:var(--dur-quick) var(--ease-exit)}

/* 四张脸的切换轨：既是图注也是本卷入口 */
.hero-tabs{display:flex;flex-wrap:wrap;gap:.42rem;margin:0 0 clamp(1.05rem,2.8vh,1.6rem)}
.ht{position:relative;flex:1 1 8.4rem;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;gap:.12rem .58rem;padding:.58rem .72rem .64rem;text-align:left;cursor:var(--cur-hand);
  font:inherit;color:rgb(var(--txd-rgb)/.7);background:rgb(var(--ink-rgb)/.34);
  border:1px solid rgb(var(--txd-rgb)/.16);border-radius:4px;backdrop-filter:blur(2px);
  transition:background var(--t-hover),border-color var(--t-hover),color var(--t-hover),transform var(--t-hover)}
.ht .hn{grid-row:span 2;font-family:var(--serif);font-size:.74rem;letter-spacing:.06em;color:rgb(var(--gold-rgb)/.8)}
.ht b{font-family:var(--kai);font-weight:400;font-size:1.02rem;letter-spacing:.14em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ht em{font-style:normal;font-size:.7rem;letter-spacing:.2em;color:rgb(var(--txd-rgb)/.46)}
.ht::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--cinnabar),var(--gold));transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-move)}
.ht:hover{background:rgb(var(--txd-rgb)/.1);color:rgb(var(--txd-rgb)/.92);transform:translateY(-2px)}
.ht:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ht.on{color:var(--paper-hi);border-color:rgb(var(--gold-rgb)/.62);background:rgb(var(--gold-rgb)/.2)}
.ht.on::after,.ht:hover::after{transform:scaleX(1)}
.ht.on em{color:rgb(var(--txd-rgb)/.66)}

/* 2) 六个数字：账格式细线网格，一格一入口，口径在格内浮出 */
.fb-h i{font-style:normal;display:inline-block;margin-left:.9rem;font-family:var(--sans);
  font-size:.76rem;letter-spacing:.06em;color:var(--tx2)}
.hero-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-bottom:1.4rem}
.hero-facts li{padding:0;border-left:0;background:rgb(var(--paperhi-rgb)/.72)}
.hero-facts li a{display:block;height:100%;padding:clamp(.8rem,1.7vw,1.1rem) clamp(.8rem,1.5vw,1.1rem) .9rem;
  text-decoration:none;color:inherit;transition:background var(--t-hover)}
.hero-facts b{font-size:clamp(1.65rem,3.3vw,2.4rem);color:var(--ink2);transition:color var(--t-hover)}
.hero-facts b i{font-style:normal;font-variant-numeric:tabular-nums}
.hero-facts span{margin-top:.34rem}
.hero-facts em{display:block;margin-top:.42rem;font-style:normal;font-size:.76rem;line-height:1.6;
  letter-spacing:.02em;color:var(--tx2);opacity:0;transition:opacity var(--t-move)}
.hero-facts li a:hover,.hero-facts li a:focus-visible{background:rgb(var(--gold-rgb)/.12)}
.hero-facts li a:hover b,.hero-facts li a:focus-visible b{color:var(--cinnabar)}
.hero-facts li a:hover em,.hero-facts li a:focus-visible em{opacity:1}
.hero-facts li a:focus-visible{outline:2px solid var(--cinnabar);outline-offset:-2px}
@media (hover:none){.hero-facts em{opacity:.72}}

/* 3) 分卷卡：题名用拉伸链接铺满整卡，卡片只有一个可聚焦入口；章节条浮在它上面 */
.chap-ph{display:block}
.chap .chap-t::after{content:"";position:absolute;inset:0}
.chap .tops li:not(.x){position:relative;z-index:1}
.chap-ph figcaption{pointer-events:none}
.chap .chap-t{color:inherit;text-decoration:none;transition:color var(--t-hover)}
.chap:hover .chap-t,.chap .chap-t:hover{color:var(--cinnabar)}
.chap .tops li{transition:background var(--t-hover),color var(--t-hover)}
.chap .tops li a{display:block;color:inherit;text-decoration:none}
.chap .tops li:not(.x):hover,.chap .tops li:not(.x):focus-within{background:rgb(var(--cinn-rgb)/.16);color:var(--cinnabar)}
.chap .tops li a:focus-visible{outline:2px solid var(--cinnabar);outline-offset:1px;border-radius:3px}
.chap .go-in{text-decoration:none;transition:color var(--t-hover),letter-spacing var(--t-hover)}
.chap:hover .go-in{color:var(--cinnabar)}

/* 4) 三条路径：链条里每一站都可点（外层不再用 a 套 a） */
.pth{cursor:default}
.pth>.pbody>b a{color:inherit;text-decoration:none;transition:color var(--t-hover)}
.pth>.pbody>b a:hover{color:var(--cinnabar)}
.pth .pchain em{transition:background var(--t-hover),color var(--t-hover)}
.pth .pchain em:hover{background:rgb(var(--cinn-rgb)/.16);color:var(--cinnabar)}
.pchain a{display:block;color:inherit;text-decoration:none}

/* 5) 计时：自动播放的时长落在变量上，页脚与工具条共用同一个节奏
   */
.hero{--slide-dur:6500ms}
.ht .hprog{position:absolute;left:0;bottom:0;z-index:1;height:2px;width:100%;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--gold),var(--paper-hi));transform:scaleX(0);transform-origin:left}
.hero.auto .ht.on .hprog{animation:hfill var(--slide-dur) linear forwards}
.hero.paused .ht.on .hprog{animation-play-state:paused}
@keyframes hfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* 当前格的下划线：静态就不闪，只在切换时随动效走 */
.ht.on::after{background:rgb(var(--txd-rgb)/.16)}
.hero:not(.auto) .ht.on::after{background:linear-gradient(90deg,var(--cinnabar),var(--gold))}
.hnav{width:1.72rem;height:1.72rem;flex:none;display:grid;place-items:center;padding:0;cursor:var(--cur-hand);
  color:rgb(var(--txd-rgb)/.62);background:transparent;
  border:1px solid rgb(var(--txd-rgb)/.2);border-radius:50%;
  transition:color var(--t-hover),background var(--t-hover),border-color var(--t-hover)}
.hnav svg{width:.46rem;height:.82rem}
.hnav:hover{color:var(--paper-hi);background:rgb(var(--gold-rgb)/.24);border-color:rgb(var(--gold-rgb)/.6)}
.hnav:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hero-tools{display:flex;align-items:flex-end;gap:clamp(1rem,2.2vw,1.8rem);margin-left:auto}
.hero-pager{display:flex;align-items:center;gap:.62rem}
.hnum{display:flex;align-items:baseline;gap:.26rem;margin:0;font-family:var(--serif);font-size:.78rem;
  letter-spacing:.16em;color:rgb(var(--txd-rgb)/.5);font-variant-numeric:tabular-nums}
.hnum b{font-weight:400;font-size:1.06rem;color:var(--gold)}
.hnum i{font-style:normal;opacity:.55}
.hpause{display:inline-flex;align-items:center;gap:.44rem;padding:.34rem .66rem;cursor:var(--cur-hand);
  font:inherit;font-size:.74rem;letter-spacing:.16em;color:rgb(var(--txd-rgb)/.68);
  background:rgb(var(--ink-rgb)/.3);border:1px solid rgb(var(--txd-rgb)/.16);border-radius:999px;
  backdrop-filter:blur(2px);transition:color var(--t-hover),background var(--t-hover),border-color var(--t-hover)}
.hpause:hover{color:var(--paper-hi);background:rgb(var(--gold-rgb)/.2);border-color:rgb(var(--gold-rgb)/.58)}
.hpause:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hpause .g{position:relative;width:10px;height:10px;flex:none}
.hpause .g::before,.hpause .g::after{content:"";position:absolute;top:1px;bottom:1px;width:2.6px;
  border-radius:1px;background:currentColor;transition:opacity var(--t-hover),clip-path var(--t-hover)}
.hpause .g::before{left:2px}
.hpause .g::after{right:2px}
.hero.paused .hpause .g::before{left:0;right:0;top:0;bottom:0;width:auto;border-radius:0;
  clip-path:polygon(0 0,100% 50%,0 100%)}
.hero.paused .hpause .g::after{opacity:0}

@media (max-width:700px){
  .hero-tabs{gap:.34rem}
  .ht{flex:1 1 calc(50% - .34rem);padding:.5rem .6rem .58rem}
  .ht b{font-size:.94rem;letter-spacing:.1em}
  .fb-h i{display:block;margin:.5rem 0 0}
  /* 窄屏：工具条不再贴右，CTA 与图注各自换行 */
  .hero-tools{flex-wrap:wrap;margin-left:0;gap:.72rem 1.2rem}
  .hpause{padding:.3rem .56rem}
}
/* 图注正文不能沿用那枚“实景”小徽标的样式 */
.hero-cap #heroCap{flex:1 1 auto;font-family:inherit;font-size:var(--fs-s);
  letter-spacing:.05em;color:rgb(var(--txd-rgb)/.74);border:0;padding:0}
@media (min-width:561px) and (max-width:860px){.hero-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hero-facts{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){
  .hero-bg img{transition:none}
  .lede,.lede.out{opacity:1;transition:none}
  .ht:hover{transform:none}
  .hero-facts em{opacity:.72}
  .hero.auto .ht.on .hprog{animation:none}
  .ht.on::after{background:linear-gradient(90deg,var(--cinnabar),var(--gold))}
}


/* ---------- 卷一原语（P4）：尺寸卡 / 地貌色带 / 地貌账卡 / 双列面板 / 库容构成条 / 水体名录 / 渠道账卡 / 过程时间轴
   全部一次性入场，无循环；位移 ≤20px，配色只用 :root 六族 ---------- */

.dims{display:grid;gap:clamp(.55rem,1.4vw,.9rem);margin:.95rem 0 .2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,10.4rem),1fr))}
.dims .dim{padding:1rem .95rem 1.05rem;border:1px solid var(--line);border-radius:6px;
  background:rgb(var(--paperhi-rgb)/.66);transition:var(--dur-quick)}
.dims .dim:hover{border-color:rgb(var(--gold-rgb)/.62);transform:translateY(-3px);box-shadow:0 10px 24px rgb(var(--ink-rgb)/.1)}
.dims b{font-family:var(--serif);font-size:clamp(1.85rem,3.4vw,2.45rem);line-height:1;color:var(--ink2);letter-spacing:.01em}
.dims i{font-style:normal;font-size:.86rem;color:var(--cinnabar);margin-left:.22rem}
.dims span{display:block;font-size:.84rem;color:var(--tx2);margin-top:.44rem;letter-spacing:.04em}
.dims em{display:block;font-style:normal;font-size:.74rem;line-height:1.55;color:var(--gold-d);margin-top:.22rem}

.terr-bar{display:flex;gap:3px;height:5.4rem;margin:.95rem 0 0;border-radius:5px;overflow:hidden}
.terr-seg{display:flex;flex-direction:column;justify-content:flex-end;gap:.1rem;padding:.5rem .62rem;
  min-width:0;color:var(--tx-d);text-align:left;transition:filter var(--dur-quick)}
.terr-seg.mtn{flex:29.7 1 0;background:var(--ink3)}
.terr-seg.hil{flex:18.2 1 0;background:var(--moss)}
.terr-seg.pln{flex:52.1 1 0;background:var(--gold)}
.terr-seg b{font-family:var(--serif);font-size:1.02rem;letter-spacing:.06em}
.terr-seg span{font-size:.75rem;opacity:.9}
.terr-seg:hover{filter:brightness(1.14)}
.terr-seg.hi{filter:brightness(1.2);outline:2px solid var(--cinnabar);outline-offset:-2px}
html.js .terr-bar .terr-seg{clip-path:inset(0 100% 0 0)}
html.js .terr-bar.in .terr-seg{clip-path:inset(0);
  transition:clip-path var(--dur-standard) var(--ease-enter);transition-delay:calc(var(--i,0)*90ms)}
/* 窄屏三段各有 60 px 上下限，带内数字会把比例挤变形：只留名称，数字交给读数条与地貌账卡 */
@media (max-width:680px){.terr-seg span{display:none}}

.two{display:grid;gap:clamp(1rem,2.6vw,1.8rem);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr))}
.two>*{min-width:0;max-width:100%}
/* 图卡整块都可以点开：光标与照片一致 */
.pc:has(img[data-lb]){cursor:zoom-in}

/* 三块地貌账卡：左边一条色标对上一节的同名色带段，悬停任一处两处一起亮 */
.terr-cards{display:grid;gap:clamp(.7rem,1.8vw,1.15rem);margin:1.35rem 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr))}
.tcard{position:relative;padding:1.35rem 1.35rem 1.5rem;border:1px solid var(--line);border-left:4px solid var(--tc);
  border-radius:6px;background:rgb(var(--paperhi-rgb)/.72);transition:var(--dur-quick)}
.tcard.mtn{--tc:var(--ink3)}
.tcard.hil{--tc:var(--moss)}
.tcard.pln{--tc:var(--gold)}
.tcard:hover{border-color:rgb(var(--gold-rgb)/.62);box-shadow:0 10px 24px rgb(var(--ink-rgb)/.1);
  transform:translateY(-3px)}
.tcard>b{font-family:var(--serif);font-size:1.22rem;letter-spacing:.08em;color:var(--ink2)}
.tcard>em{float:right;font-style:normal;font-size:.98rem;letter-spacing:.04em;color:var(--tc);margin-top:.28rem}
.tcard .num{display:block;clear:both;font-family:var(--serif);font-size:clamp(2.35rem,4.8vw,3.5rem);
  line-height:1.06;color:var(--ink2);margin-top:.62rem;letter-spacing:-.01em}
.tcard .num i{font-style:normal;font-size:1rem;color:var(--cinnabar);margin-left:.28rem}
.tcard .mb{display:block;clear:both;height:6px;margin:1rem 0 .8rem;border-radius:3px;
  background:var(--line);overflow:hidden;text-decoration:none}
.tcard .mb::before{content:"";display:block;height:100%;width:var(--w);background:var(--tc)}
.tcard p{margin:.2rem 0 0;font-size:.87rem;line-height:1.82;color:var(--tx2)}
html.js .terr-cards .mb::before{transform:scaleX(0);transform-origin:left center}
html.js .terr-cards.in .mb::before{transform:none;
  transition:transform var(--dur-slow) var(--ease-enter);transition-delay:calc(var(--i,0)*90ms)}

/* 库容构成条：整条长按总库容等比，深色段是能用的兴利，浅色段是死库容 */
.stack{display:grid;gap:1.05rem;margin:1.1rem 0 0}
.srow{display:grid;grid-template-columns:4.6rem minmax(0,1fr) 5.9rem;gap:.8rem;align-items:center;
  padding:.3rem .26rem;border-radius:4px;transition:background var(--dur-immediate)}
.srow:hover{background:rgb(var(--gold-rgb)/.12)}
.srow>b{font-family:var(--serif);font-size:1.06rem;letter-spacing:.02em;color:var(--ink2)}
.sb-wrap{display:flex;flex-direction:column;gap:.16rem;min-width:0}
.sbar{display:flex;height:1.75rem;border-radius:4px;overflow:hidden;background:rgb(var(--tx-rgb)/.07)}
.sbar i{display:block;height:100%;width:var(--w)}
.sbar .use{background:var(--river-d)}
.sbar .dead{background:rgb(var(--river-rgb)/.32)}
.sleg{font-size:.76rem;letter-spacing:.02em;color:var(--tx2)}
.srow .num{font-family:var(--serif);font-size:1.2rem;color:var(--ink2);text-align:right;white-space:nowrap}
.srow .num i{font-style:normal;font-size:.72rem;color:var(--tx2);margin-left:.14rem}
.stack-leg{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;margin:1.05rem 0 0;
  font-size:.72rem;color:var(--tx2)}
.stack-leg i{display:inline-block;width:1.5rem;height:.78rem;border-radius:2px;vertical-align:-1px}
.stack-leg .use{background:var(--river-d)}
.stack-leg .dead{background:rgb(var(--river-rgb)/.32)}
html.js .stack .sbar{clip-path:inset(0 100% 0 0)}
html.js .stack.in .sbar{clip-path:inset(0);
  transition:clip-path var(--dur-standard) var(--ease-enter);transition-delay:calc(var(--i,0)*90ms)}
@media (max-width:680px){.stack{gap:.85rem}.srow{grid-template-columns:3.2rem minmax(0,1fr) 4.4rem;gap:.5rem}
  .sbar{height:1.35rem}.sleg{font-size:.72rem}}

.riv-body{display:grid;gap:clamp(1rem,2.4vw,1.7rem);align-items:start;margin-top:.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.riv-body>*{min-width:0;max-width:100%}
.rivets{display:grid;gap:1px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--line)}
.rivet{display:grid;grid-template-columns:8rem 1fr;gap:.7rem;padding:.58rem .72rem;
  background:rgb(var(--paperhi-rgb)/.88)}
.rivet.no{background:rgb(var(--paperhi-rgb)/.46)}
.rivet b{font-family:var(--serif);font-size:.97rem;color:var(--ink2);letter-spacing:.02em}
.rivet.no b{color:var(--tx2)}
.rivet span{font-size:.82rem;line-height:1.66;color:var(--tx2)}
.rivet em{font-style:normal;color:var(--cinnabar)}
.rivet.no em{color:var(--gold-d)}
@media (max-width:620px){.rivet{grid-template-columns:1fr;gap:.18rem}}

.canal{display:grid;gap:clamp(.6rem,1.6vw,.95rem);margin:.75rem 0 .2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13.6rem),1fr))}
.canal .cn{padding:.95rem 1rem 1rem;border:1px solid var(--line);border-left:3px solid var(--river);
  border-radius:5px;background:rgb(var(--paperhi-rgb)/.6);transition:var(--dur-quick)}
.canal .cn:hover{transform:translateY(-3px);box-shadow:var(--sh);border-left-color:var(--cinnabar)}
.canal b{font-family:var(--serif);font-size:1.72rem;line-height:1;color:var(--ink2)}
.canal i{font-style:normal;font-size:.84rem;color:var(--cinnabar);margin-left:.2rem}
.canal span{display:block;font-size:.82rem;color:var(--tx2);margin:.42rem 0 .45rem;letter-spacing:.04em}
.canal p{margin:0;font-size:.82rem;line-height:1.72;color:var(--tx2)}
.canal p em{font-style:normal;color:var(--gold-d);font-weight:600}
.canal .cn.dbt{border-left-color:var(--gold);background:rgb(var(--gold-rgb)/.07)}
.canal .cn.dbt b{color:var(--gold-d)}

.chrono{display:grid;gap:.55rem .9rem;margin:.95rem 0 .3rem;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.chrono li{position:relative;padding:.62rem .8rem .7rem 1.18rem;border:1px solid var(--line);
  border-radius:5px;background:rgb(var(--paperhi-rgb)/.62);transition:var(--dur-quick)}
.chrono li::before{content:"";position:absolute;left:.44rem;top:1.02rem;width:7px;height:7px;
  border-radius:50%;background:var(--river)}
.chrono li:hover{border-color:rgb(var(--gold-rgb)/.62);box-shadow:0 10px 24px rgb(var(--ink-rgb)/.1)}
.chrono .cy{display:block;font-size:.73rem;letter-spacing:.1em;color:var(--tx2)}
.chrono b{display:block;font-family:var(--serif);font-size:1.06rem;color:var(--ink2);margin:.14rem 0 .3rem}
.chrono p{margin:0;font-size:.82rem;line-height:1.7;color:var(--tx2)}
.chrono p em{display:block;font-style:normal;font-size:.77rem;color:var(--gold-d);margin-top:.2rem}
.chrono li.hot::before{background:var(--cinnabar)}
.chrono li.hot b{color:var(--cinnabar)}
.chrono li.end{border-left:3px solid var(--cinnabar);background:rgb(var(--cinn-rgb)/.06)}
.chrono li.end::before{background:var(--cinnabar)}
.chrono li.end b{color:var(--cinnabar)}
html.js .dims:not(.in) .dim,html.js .canal:not(.in) .cn,html.js .chrono:not(.in) li{opacity:0}
html.js .dims.in .dim,html.js .canal.in .cn,html.js .chrono.in li{
  animation:dkin var(--dur-quick) var(--ease-enter) backwards;animation-delay:calc(var(--i,0)*45ms)}

@media (prefers-reduced-motion:reduce){
  html.js .dims .dim,html.js .canal .cn,html.js .chrono li{opacity:1}
  html.js .dims.in .dim,html.js .canal.in .cn,html.js .chrono.in li{animation:none}
  html.js .terr-bar .terr-seg,html.js .stack .sbar{clip-path:none}
  html.js .terr-cards .mb::before{transform:none}
}

/* ================= 卷一 V2 版式（排列组合重做 · 密度优先）
   1) .prow 六栏图列：固定行高 + 图注压在图上，替掉「首图独占一行 + 一小格」的 cluster
   2) .two / .riv-body 改 12 栏按权重分栏，短栏用 .spread 拉开，不留整块空白
   3) .pin 节头随滚动在场；.said 叙事行 + .lede-row 把叙述与操作说明并排，填满栏宽
   4) .gband 出血实景横带；.note-row 把两条脚注并成一行
   5) 滚动驱动落位（animation-timeline）+ @container 密度 + @view-transition，全部渐进增强
   作用域 section#geo / section#region（卷二）；其余各页等这一版验收后再铺开。 ================= */

:is(section#geo,section#region){padding-bottom:clamp(2.4rem,5vh,3.6rem)}
:is(section#geo,section#region) .sub{font-size:1.3rem;margin-top:clamp(1.15rem,2.4vw,1.7rem)}
:is(section#geo,section#region) .tiles{margin-top:clamp(.8rem,1.8vw,1.15rem)}
:is(section#geo,section#region) .hint{margin-bottom:.62rem}
:is(section#geo,section#region) .panel{padding:clamp(1.15rem,2.4vw,1.7rem) clamp(1.1rem,2.6vw,1.9rem);container-type:inline-size;view-timeline:--pan block}
:is(section#geo,section#region) .panel.wide{margin-top:clamp(1.3rem,3vw,2rem)}
:is(section#geo,section#region) .grid-2{margin-bottom:clamp(1.2rem,3vw,1.8rem)}
:is(section#geo,section#region) .src{margin-top:clamp(1.3rem,3vw,2rem);line-height:1.85}
:is(section#geo,section#region) .src b{color:var(--ink2);font-weight:600;letter-spacing:.03em}
.rivet.dbt{background:rgb(var(--gold-rgb)/.09)}
.rivet.dbt b{color:var(--gold-d)}
:is(section#geo,section#region) p{line-height:1.78}
:is(section#geo,section#region) .sc-h{text-wrap:balance}

/* --- 1) 图列 mosaic：六栏网格 + 固定行高 + 图注压在图上
   排布规则：n 为奇数→「sp6 + (n-1)/2 组 sp3」；n 为偶数→「两个 sp6 + (n-2)/2 组 sp3」。
   这样在宽栏（6 栏）、窄栏（4 栏）与手机（单列）三档里都恰好铺满，不留空格。 --- */
.prow{--rh:clamp(6.4rem,22cqw,13.5rem);display:grid;gap:clamp(.34rem,.8vw,.55rem);
  grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:var(--rh);margin:1rem 0 .25rem}
.prow>.pc{grid-column:span 3;position:relative;display:flex;flex-direction:column}
.prow>.pc[data-sp="6"]{grid-column:span 6}
/* 独占整行的头图占两行轨道：与半栏图同比例，不会被压成一条 5:1 的胶片 */
.prow:not([data-free])>.pc[data-sp="6"]{grid-row:span 2}
.prow img{width:100%;height:100%;flex:1 1 auto;min-height:0;aspect-ratio:auto;object-fit:cover;border-radius:0}
.prow figcaption{position:absolute;left:0;right:0;bottom:0;border-top:0;padding:.36rem .58rem .42rem;font-size:.75rem;
  color:rgb(var(--txd-rgb)/.95);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  background:linear-gradient(180deg,rgb(var(--ink-rgb)/0),rgb(var(--ink-rgb)/.58) 38%,rgb(var(--ink-rgb)/.88))}
.prow figcaption b{display:inline;margin-right:.34rem;font-size:.88rem;color:var(--paper-hi)}
.prow>.pc:hover figcaption,.prow>.pc:focus-within figcaption{-webkit-line-clamp:4;
  background:linear-gradient(180deg,rgb(var(--ink-rgb)/.26),rgb(var(--ink-rgb)/.8) 40%,rgb(var(--ink-rgb)/.94))}
.prow .badge{top:.4rem;left:.4rem}
/* 自由档：图版与地图不能按固定行高裁切，恢复按自身比例展开、图注回到下方 */
.prow[data-free]{grid-auto-rows:auto}
.prow[data-free]>.pc{display:block}
.prow[data-free] img{height:auto;aspect-ratio:4/3}
.prow[data-free]>.pc[data-sp="6"] img{aspect-ratio:16/9}
.prow[data-free] figcaption{position:static;display:block;overflow:visible;-webkit-line-clamp:unset;
  padding:.42rem .58rem .5rem;border-top:1px solid var(--line);color:var(--tx2);
  background:rgb(var(--paperhi-rgb)/.72)}
.prow[data-free] figcaption b{display:block;margin-right:0;color:var(--ink2)}
.prow[data-free]>.pc:hover figcaption{background:rgb(var(--paperhi-rgb)/.72);-webkit-line-clamp:unset}
@container (max-width:48rem){.prow{--rh:clamp(7.2rem,36cqw,11.5rem);grid-template-columns:repeat(4,minmax(0,1fr))}
  .prow>.pc{grid-column:span 2}.prow>.pc[data-sp="6"]{grid-column:span 4}}
/* 单列档收到 24rem：手机与 464 窄窗仍是一列大图，
   26rem 上下的窄面板改用四列，两两并排不留空。 */
@container (max-width:24rem){.prow{--rh:clamp(8.5rem,48cqw,12.5rem);grid-template-columns:minmax(0,1fr)}
  .prow>.pc,.prow>.pc[data-sp="6"]{grid-column:1/-1}
  .prow:not([data-free])>.pc[data-sp="6"]{grid-row:auto}}
html.js .prow:not(.in)>*{opacity:0}
html.js .prow.in>*{animation:dkin var(--dur-quick) var(--ease-enter) backwards;animation-delay:calc(var(--i,0)*40ms)}

/* --- 2) 权重分栏 --- */
:is(section#geo,section#region) .two,:is(section#geo,section#region) .riv-body{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
:is(section#geo,section#region) .two>*,:is(section#geo,section#region) .riv-body>*{grid-column:span var(--sp,6);min-width:0;container-type:inline-size}
:is(section#geo,section#region) .spread{display:grid;align-content:space-between;gap:clamp(.7rem,1.8vw,1.1rem)}
@media (max-width:880px){:is(section#geo,section#region) .two>*,:is(section#geo,section#region) .riv-body>*{grid-column:1/-1}}

/* --- 3) 节头在场 + 叙事行 --- */
/* 上沿压进顶栏下沿 1px：这两个都是磨砂半透明层，只要留出一条整缝，
   滚过去的正文就会从缝里穿出来，看着像吸住了但位置不对。 */
:is(section#geo,section#region,section#time,section#culture,section#traffic,section#money) .pin{position:sticky;top:calc(var(--stick) - 1px);z-index:4;margin:-.15rem -.35rem .5rem;padding:.34rem .45rem;
  border-radius:5px;background:rgb(var(--paperhi-rgb)/.93);backdrop-filter:blur(9px);box-shadow:0 1px 0 var(--line)}
:is(section#geo,section#region,section#time,section#culture,section#traffic,section#money) .pin .sec-no{margin-bottom:.05rem}
:is(section#geo,section#region,section#time,section#culture,section#traffic,section#money) .pin .sc-h{margin-bottom:0}
:is(section#geo,section#region,section#time,section#culture,section#traffic,section#money) .pin .said{margin-top:.42rem}
/* 读数行落在图下方时（先看见图，再听结论） */
:is(section#geo,section#region) .ec-box+.said{margin:.85rem 0 0}
@media (max-width:880px){:is(section#geo,section#region,section#time,section#culture,section#traffic,section#money) .pin{position:static;top:auto;margin-bottom:.5rem}}
/* display 不能省：这是一个空的 <i>，默认 display:inline，
   而非替换行内元素既不吃 height 也不吃 transform —— 进度线在卷一/卷二上
   一直是零尺寸（实量 rect 0×0），只是没人看得见。立成块才谈得上那 2px 和 scaleX。 */
.pinline{display:block;height:2px;margin-top:.45rem;border-radius:2px;transform-origin:left center;
  background:linear-gradient(90deg,var(--cinnabar),var(--gold))}
.said{margin:0;padding-left:.95rem;border-left:2px solid rgb(var(--cinn-rgb)/.5);font-family:var(--kai);
  font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.9;color:var(--ink2);max-width:none;text-wrap:pretty}
.said b{font-weight:600;color:var(--cinnabar);font-variant-numeric:tabular-nums}
.said i{display:block;font-style:normal;font-size:.8rem;letter-spacing:.05em;color:var(--tx2);margin-top:.18rem}
.lede-row{display:grid;gap:.3rem 1.5rem;align-items:end;margin:.1rem 0 .7rem;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.lede-row>.hint{margin:0;padding-bottom:.15rem}
@container (max-width:44rem){.lede-row{grid-template-columns:minmax(0,1fr)}}
.note-row{display:grid;gap:.15rem 1.5rem;margin:.6rem 0 .1rem;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.note-row>.ph-note,.note-row>.mini{margin:0;padding-top:0;border-top:0}
@container (max-width:44rem){.note-row{grid-template-columns:minmax(0,1fr)}}

/* --- 4) 出血实景横带（.gband：与首页 .band 目录条目彻底隔离，不再继承 max-width:82rem）
   高度按宽度驱动（vw）而不是视口比例：窄窗口不会再退化成 184px 的一条缝。 --- */
:is(section#geo,section#region) .gband{position:relative;overflow:hidden;isolation:isolate;color:var(--tx-d);background:var(--ink);
  max-width:none;margin:clamp(1.3rem,3vw,2rem) calc(-1*clamp(1.1rem,5vw,3.4rem)) 0;
  min-height:clamp(258px,26vw,420px);display:flex;align-items:flex-end}
:is(section#geo,section#region) .gband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  object-position:50% 46%;filter:saturate(.82) contrast(1.04)}
:is(section#geo,section#region) .gband .gb-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgb(var(--ink-rgb)/.52),rgb(var(--ink-rgb)/.22) 42%,rgb(var(--ink-rgb)/.9))}
/* 文字列与正文网格同一条左边线：横向内缩 = .chapter 内边距 + .panel 内边距，
   上限按 74rem 内容列再加两侧 .chapter 内边距，宽屏时随正文一起居中。 */
:is(section#geo,section#region) .gband .gb-in{position:relative;z-index:2;width:100%;
  max-width:calc(74rem + clamp(2.2rem,10vw,6.8rem));margin:0 auto;
  padding:clamp(1.4rem,3.2vw,2.2rem) calc(clamp(1.1rem,5vw,3.4rem) + clamp(1.1rem,2.6vw,1.9rem)) clamp(1.5rem,3.6vw,2.4rem)}
:is(section#geo,section#region) .gband .gb-k{font-family:var(--kai);font-size:clamp(1.12rem,2.1vw,2rem);line-height:1.7;margin:0;
  max-width:40rem;text-shadow:0 2px 22px rgb(var(--ink-rgb)/.6)}
:is(section#geo,section#region) .gband .gb-k b{font-weight:400;color:var(--gold-l)}
:is(section#geo,section#region) .gband .gb-cap{margin:.5rem 0 0;font-size:.72rem;letter-spacing:.08em;color:rgb(var(--txd-rgb)/.68)}

/* --- 5) 外链与锚点在场感 --- */
:is(section#geo,section#region) a.cite{border-bottom:1px dotted rgb(var(--goldd-rgb)/.5);text-decoration:none}
:is(section#geo,section#region) a.cite:hover{border-bottom-style:solid;background:rgb(var(--cinn-rgb)/.08)}
:is(section#geo,section#region) a.cite[target]::after{content:"↗";font-size:.72em;margin-left:.16em}
:is(section#geo,section#region) .node:target{box-shadow:0 0 0 1px var(--gold),0 10px 30px rgb(var(--ink-rgb)/.12)}

/* ================= 渐进增强：滚动驱动落位（不靠 JS、无循环；减弱动效时全静） ================= */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html.js .prow:not(.in)>*,html.js .prow.in>*{opacity:1;animation:dkin var(--dur-standard) var(--ease-enter) both;
      animation-timeline:view();animation-range:entry 4% cover 20%;animation-delay:0s}
    html.js .terr-bar .terr-seg{clip-path:inset(0 100% 0 0);animation:wipeR var(--dur-standard) linear both;
      animation-timeline:view();animation-range:entry 12% cover 34%;transition:none}
    html.js .stack .sbar{clip-path:inset(0 100% 0 0);animation:wipeR var(--dur-standard) linear both;
      animation-timeline:view();animation-range:entry 14% cover 36%;transition:none}
    html.js .terr-cards .mb::before{transform:scaleX(0);transform-origin:left center;
      animation:growX var(--dur-slow) linear both;animation-timeline:view();animation-range:entry 18% cover 40%}
    :is(section#geo,section#region) .lede-row>.said,:is(section#geo,section#region) .note-row>.said{clip-path:inset(0 0 100% 0);animation:unmask var(--dur-standard) linear both;
      animation-timeline:view();animation-range:entry 8% cover 26%}
    :is(section#geo,section#region) .gband>img{animation:bandDrift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    :is(section#geo,section#region) .gband .gb-veil{animation:bandVeil linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
    /* 节头进度线：时间轴取本节的 view（sticky 元素自身的 view 会退化，所以命名给 panel） */
    .pinline{transform:scaleX(0);animation:growX linear both;animation-timeline:--pan;animation-range:cover 4% cover 96%}
    @keyframes wipeR{to{clip-path:inset(0 0 0 0)}}
    @keyframes growX{to{transform:scaleX(1)}}
    @keyframes unmask{to{clip-path:inset(0 0 0 0)}}
    @keyframes bandDrift{from{transform:translateY(-9px) scale(1.03)}to{transform:translateY(9px) scale(1.03)}}
    @keyframes bandVeil{from{opacity:.4}to{opacity:1}}
  }
}

/* 跨卷导航交叉淡入；不支持的浏览器原样跳转 */
@view-transition{navigation:auto}

/* ================= 卷二 V4：乡镇弹窗 · 村落名册 · 聚落星野 ================= */
/* 弹窗用 div + class 而不是原生 dialog：showModal 会把面板推进 top layer，
   弹窗里再点开放大的灯箱（.lbx z-index:120）就永远压在下面了。 */
.ts{position:fixed;inset:0;z-index:100;display:none;place-items:center;
  padding:clamp(.6rem,3vw,2.4rem);background:rgb(var(--ink-rgb)/.68)}
.ts.on{display:grid}
html.ts-on{overflow:hidden}
.ts-card{position:relative;width:min(62rem,100%);max-height:min(88vh,54rem);overflow:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,rgb(var(--paperhi-rgb)/.985),rgb(var(--paper-rgb)/.975));
  border:1px solid rgb(var(--gold-rgb)/.4);box-shadow:var(--sh)}
.ts-in{padding:clamp(1.05rem,3vw,2rem) clamp(1.05rem,3.4vw,2.3rem) clamp(1.2rem,3vw,1.8rem)}
.ts-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
/* 卡内一滚，标题行连同「关闭 ✕」就滚出可视区（实测滚到底时按钮 top 到 −32，
   命不中）。把标题行钉在卡顶：它是不透明底，盖住从它下面滚过的正文。 */
.ts-card .ts-hd{position:sticky;top:0;z-index:2;padding-top:.1rem;margin-top:-.1rem;
  background:rgb(var(--paperhi-rgb));box-shadow:0 1px 0 var(--line)}
.ts-eb{margin:0;font-family:var(--kai);font-size:.74rem;letter-spacing:.22em;color:var(--cinnabar-d)}
.ts-t{margin:.34rem 0 0;font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,4.4vw,2.15rem);
  line-height:1.22;color:var(--ink)}
.ts-t em{display:block;font-style:normal;font-family:var(--kai);font-weight:400;
  font-size:.86rem;letter-spacing:.06em;color:var(--tx2);margin-top:.3rem}
.ts-x{flex:none;border:1px solid var(--line);background:rgb(var(--paper2-rgb)/.6);color:var(--tx);
  font-family:var(--sans);font-size:.76rem;letter-spacing:.1em;padding:.42rem .72rem;cursor:var(--cur-hand);
  transition:background var(--t-hover),border-color var(--t-hover),color var(--t-hover)}
.ts-x:hover,.ts-x:focus-visible{background:rgb(var(--cinn-rgb)/.12);border-color:rgb(var(--cinn-rgb)/.5);color:var(--cinnabar-d)}
.ts-dek{margin:0;font-size:var(--fs-b);line-height:1.95;color:var(--tx)}
.ts-dek em{font-style:normal;display:block;margin-top:.5rem;font-size:.8rem;line-height:1.8;color:var(--tx2);
  border-left:2px solid rgb(var(--gold-rgb)/.5);padding-left:.7rem}
.ts-said{margin:.85rem 0 0;font-family:var(--kai);font-size:1rem;line-height:1.85;color:var(--ink2);
  background:rgb(var(--gold-rgb)/.09);border-left:2px solid rgb(var(--gold-rgb)/.55);padding:.7rem .9rem}
.ts-said b{font-weight:700;color:var(--cinnabar-d)}
.ts-said i{font-style:normal;display:block;margin-top:.34rem;font-size:.84rem;color:var(--tx2)}

/* 村落名册：静态在乡镇屏里、动态在弹窗里，两处同一份 DOM 结构 */
.vl-hd{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem;margin:1.25rem 0 0;
  font-family:var(--kai);font-size:1.02rem;letter-spacing:.06em;color:var(--ink2)}
.vl-hd em{font-style:normal;font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;color:var(--tx2)}
.vlist{display:flex;flex-wrap:wrap;gap:.28rem;margin:.55rem 0 0;padding:0;list-style:none}
.vlist li{font-size:.78rem;line-height:1.5;padding:.26rem .52rem;border:1px solid var(--line);
  background:rgb(var(--paper2-rgb)/.42);color:var(--tx);transition:background var(--t-point),border-color var(--t-point)}
.vlist li.mut{color:var(--tx2);font-style:italic;background:none;border-style:dashed}
.vlist li.hit,.vlist li.hi{background:rgb(var(--gold-rgb)/.26);border-color:rgb(var(--gold-rgb)/.72);color:var(--ink)}
.vl-none{margin:.5rem 0 0;font-size:.82rem;line-height:1.85;color:var(--tx2)}
.vl-sub{margin:.62rem 0 0;font-family:var(--kai);font-size:.78rem;letter-spacing:.14em;color:var(--tx2)}
.vlist.com li{border-style:dashed;background:none;color:var(--tx2)}
.vl-note{margin:.5rem 0 0;padding-left:.62rem;border-left:2px solid var(--line);
  font-size:.78rem;line-height:1.85;color:var(--tx2)}
.vl-src{margin:.5rem 0 0;font-size:.72rem;line-height:1.7;color:var(--tx2)}
.ts-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.2rem,1fr));gap:.55rem;margin:.6rem 0 0}
.ts-strip .pc{position:relative;overflow:hidden;border:1px solid var(--line);cursor:zoom-in;background:none}
.ts-strip .pc img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  filter:saturate(.9);transition:transform var(--t-move)}
.ts-strip .pc:hover img{transform:scale(1.05)}
.ts-strip .pc figcaption{position:static;padding:.34rem .45rem;font-size:.7rem;line-height:1.5;color:var(--tx2);
  background:rgb(var(--paper-rgb)/.7);border-top:1px solid var(--line)}
.ts-ft{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:1.15rem;padding-top:.9rem;
  border-top:1px solid var(--line);font-size:.8rem}
.ts-ft a{border:1px solid rgb(var(--cinn-rgb)/.4);color:var(--cinnabar-d);text-decoration:none;
  padding:.36rem .66rem;transition:background var(--t-hover),color var(--t-hover)}
.ts-ft a:hover,.ts-ft a:focus-visible{background:rgb(var(--cinn-rgb)/.12)}
.ts-ft span{color:var(--tx2);font-size:.72rem}

/* --- 阈值滑杆：拖一条线，格子里不合规的镇实时退到纸背后 --- */
.cal{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem .8rem}
/* 轨线细到 2px 是刻意的，但原来命中区也只有 2px：用鼠标去抓这条线基本靠运气。
   现在盒子与轨道都是 1rem 高（厚到能点中），那 2px 的线由轨道自己的渐变画在正中，
   位置由尺寸算出来，不靠浏览器默认的居中行为；滑块直径 .95rem ≈ 轨道高，顶上对齐就正好压在线上。
   别用 padding + background-clip 撑命中区：全站 box-sizing:border-box，padding 会把 content 压成 0。 */
.cal input[type=range]{flex:1 1 9rem;min-width:7rem;height:1rem;margin:0;padding:0;appearance:none;
  background:transparent;cursor:ew-resize}
.cal input[type=range]::-webkit-slider-runnable-track{height:1rem;
  background:linear-gradient(rgb(var(--ink-rgb)/.22),rgb(var(--ink-rgb)/.22)) no-repeat center/100% 2px}
.cal input[type=range]::-webkit-slider-thumb{appearance:none;width:.95rem;height:.95rem;margin-top:0;border-radius:50%;
  background:var(--cinnabar);border:2px solid var(--paper-hi);box-shadow:0 1px 6px rgb(var(--ink-rgb)/.3)}
.cal input[type=range]::-moz-range-track{height:1rem;border-radius:2px;
  background:linear-gradient(rgb(var(--ink-rgb)/.22),rgb(var(--ink-rgb)/.22)) no-repeat center/100% 2px}
.cal input[type=range]::-moz-range-thumb{width:.95rem;height:.95rem;border:2px solid var(--paper-hi);border-radius:50%;background:var(--cinnabar)}
/* 读数必须占一个定宽的槽：它是这条 flex 行里唯一随内容变宽的东西，
   而滑杆 flex-grow:1 吃的正是剩下的空间——于是拖到「1,290 人/km²」这种长读数时，
   槽一变宽，滑杆就跟着变宽（465px 视口实测同一根轨 206→185→195px，非线性来回跳）：
   手指不动，轨下的数值却跟着换档，下方乡镇格明暗反复；宽视口下整个 box 还会从 488 撑到 533。
   9.9rem 是三种口径 × 全部档位量出来的最宽读数（151px）再留一点余量。 */
.cal .cv{flex:0 0 9.9rem;white-space:nowrap;font-variant-numeric:tabular-nums;
  font-family:var(--serif);font-size:.95rem;font-weight:700;color:var(--ink2)}
.cal .cv i{font-style:normal;font-family:var(--sans);font-weight:400;font-size:.7rem;letter-spacing:.08em;color:var(--tx2)}
/* 阈值口径三选一：选中态只认 aria-pressed（play.js 点一次只改这一个属性） */
.cal-opts{display:flex;gap:.34rem}
.cal-opts button{border:1px solid var(--line);border-radius:999px;padding:.2rem .72rem;
  background:rgb(var(--paperhi-rgb)/.7)}
.cal-opts button:hover{border-color:var(--gold);color:var(--ink2)}
.cal-opts button[aria-pressed="true"]{background:var(--cinnabar);border-color:var(--cinnabar);color:var(--paper-hi)}
.rgtile.dim{opacity:.2;filter:grayscale(.7)}
.rgtile.dim img{transform:none}
.rgtile,#regTable tbody tr{transition:opacity var(--t-point),filter var(--t-point)}
/* 明细表与格子同进同退：筛掉的地形不占行，阈值线之下的行减淡 */
#regTable tbody tr.dim{opacity:.3}
#regTable tbody tr.off{display:none}

/* --- 找村命令面板 --- */
.cmdk{position:fixed;inset:0;z-index:140;display:none;place-items:start center;
  padding:clamp(2.2rem,11vh,7rem) 1rem 1rem;background:rgb(var(--ink-rgb)/.62)}
.cmdk.on{display:grid}
.cmdk-box{width:min(44rem,100%);background:linear-gradient(180deg,rgb(var(--paperhi-rgb)/.99),rgb(var(--paper-rgb)/.98));
  border:1px solid rgb(var(--gold-rgb)/.45);box-shadow:var(--sh);overflow:hidden}
.cmdk-in{display:flex;align-items:center;gap:.6rem;padding:.75rem .9rem;border-bottom:1px solid var(--line)}
.cmdk-in b{font-family:var(--kai);font-size:.8rem;letter-spacing:.16em;color:var(--cinnabar-d);flex:none}
.cmdk input{flex:1;min-width:0;border:0;background:none;font-family:var(--sans);font-size:1rem;color:var(--ink)}
.cmdk input:focus{outline:none}
.cmdk-list{margin:0;padding:.35rem;list-style:none;max-height:min(46vh,26rem);overflow:auto}
.cmdk-list li{display:flex;align-items:baseline;gap:.55rem;padding:.42rem .6rem;cursor:var(--cur-hand);
  border-left:2px solid transparent}
.cmdk-list li b{font-family:var(--serif);font-size:.98rem;font-weight:700;color:var(--ink)}
.cmdk-list li i{font-style:normal;font-size:.72rem;letter-spacing:.06em;color:var(--tx2)}
.cmdk-list li[aria-selected=true]{background:rgb(var(--gold-rgb)/.18);border-left-color:var(--gold)}
.cmdk-empty{margin:0;padding:1rem;font-size:.84rem;color:var(--tx2)}
.cmdk-hint{margin:0;padding:.5rem .9rem .7rem;font-size:.7rem;letter-spacing:.06em;color:var(--tx2)}

/* --- 找村那只手（游戏已拆掉，只剩按钮本体还在用） --- */
.pl-btn{border:1px solid var(--line);background:rgb(var(--paper2-rgb)/.55);color:var(--tx);
  font-family:var(--sans);font-size:.78rem;letter-spacing:.08em;padding:.4rem .74rem;cursor:var(--cur-hand);
  transition:background var(--t-hover),border-color var(--t-hover)}
.pl-btn:hover,.pl-btn:focus-visible{background:rgb(var(--gold-rgb)/.16);border-color:rgb(var(--gold-rgb)/.6)}
.pl-btn:disabled{opacity:.45;cursor:default}

/* --- 三百五十七个名字 · 一册留名名册（行政档案的形制：底册在左，档在右）---
   左栏是全底册：按 2019 年代码表的名册次序分十三段，段头带这一镇的在册/留名计数，
   名字排成紧凑清单，一枚一档；右栏是当前点开的那一档，宽屏跟着页面钉住。
   名字后面那个字是记号：它在公开名录里留下过哪一类（六类，见册下的图例）。
   这一屏不需要脚本也读得完整：357 个名字与 177 份档案的全部正文都在静态文本里，
   脚本只加"点开"这一件事，所以动效一律不做入场前提。 */
.vd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,23.5rem);
  gap:clamp(1rem,2.4vw,2rem);align-items:start;margin:clamp(1.1rem,2.6vw,1.7rem) 0 0}
.vd-roll{min-width:0;display:grid;gap:.4rem}
.vd-sec{font-style:normal;display:block;padding:.52rem .62rem .6rem;scroll-margin-top:6rem;
  border:1px solid var(--line);border-left:2px solid rgb(var(--gold-rgb)/.48);
  background:rgb(var(--paperhi-rgb)/.55);
  transition:border-color var(--t-hover),background var(--t-hover)}
.vd-sec.hi{background:rgb(var(--gold-rgb)/.13);border-left-color:var(--gold)}
.vd-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .55rem;margin:0 0 .38rem;
  font-family:var(--kai);font-weight:700;font-size:.92rem;letter-spacing:.14em;color:var(--cinnabar-d)}
.vd-t em{font-style:normal;font-family:var(--sans);font-weight:400;font-size:.72rem;
  letter-spacing:.05em;color:var(--tx2)}
/* 段头那只手：名册是本页最后一屏，从这里要能回到那一镇的册页（乡镇正文只有那一处） */
.vd-tbtn{margin-left:auto;border:1px solid var(--line);background:none;color:var(--tx2);
  font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;padding:.16rem .5rem;cursor:var(--cur-hand);
  transition:color var(--t-hover),border-color var(--t-hover),background var(--t-hover)}
.vd-tbtn:hover,.vd-tbtn:focus-visible{color:var(--cinnabar-d);border-color:rgb(var(--cinn-rgb)/.45);
  background:rgb(var(--cinn-rgb)/.08)}
/* 一枚一名：留过名的带记号，社区/居委会用楷体虚线，空白村照常可点。
   字号压到 .78rem 是为了 357 枚在一屏里读得完——这是这一屏的主职。 */
.vd-n{display:inline-block;vertical-align:top;margin:.12rem .1rem;padding:.2rem .42rem;
  font-family:var(--serif);font-size:.78rem;line-height:1.5;color:var(--tx);cursor:var(--cur-hand);
  border:1px solid transparent;border-radius:2px;
  transition:color var(--t-point),background var(--t-point),border-color var(--t-point)}
.vd-n:hover,.vd-n:focus-visible{color:var(--ink);background:rgb(var(--gold-rgb)/.24);
  border-color:rgb(var(--gold-rgb)/.58)}
.vd-n.has{border-color:rgb(var(--tx-rgb)/.16);background:rgb(var(--paper3-rgb)/.42)}
.vd-n.hit{color:var(--ink);background:rgb(var(--gold-rgb)/.46);border-color:rgb(var(--gold-rgb)/.82)}
.vd-n[data-sel]{color:var(--cinnabar-d);background:rgb(var(--cinn-rgb)/.13);
  border-color:rgb(var(--cinn-rgb)/.52)}
.vd-n.com{font-family:var(--kai);color:var(--tx2)}
/* 记号与六类配色：色板不新添，只在既有五族里取一档。默认赭金（文物点）。
   默认档只挂给「自己不带 data-c 的那一枚」：写成 .vd-cat span 或 .vd-key i>b 这类
   双段选择器，权重压过 [data-c=…]，六类会全数退回赭金，配色等于没做。
   data-c 挂在谁身上由 HTML 决定，颜色靠自定义属性往下继承。 */
.vd-mk:not([data-c]),.vd-cat span:not([data-c]),.vd-key i:not([data-c]){--cc:var(--gold-rgb);--ct:var(--gold-d)}
[data-c=wenwu]{--cc:var(--gold-rgb);--ct:var(--gold-d)}
[data-c=cunluo]{--cc:var(--river-rgb);--ct:var(--river-d)}
[data-c=feiye]{--cc:var(--cinn-rgb);--ct:var(--cinnabar-d)}
[data-c=shifan]{--cc:var(--moss-rgb);--ct:var(--moss)}
[data-c=zuoluo]{--cc:var(--ink3-rgb);--ct:var(--ink3)}
/* 老地名与文物点同属赭金一族，靠深浅分档：底与框用 goldd（#8a6524），字也用它 */
[data-c=diming]{--cc:var(--goldd-rgb);--ct:var(--gold-d)}
.vd-mk{font-style:normal;font-family:var(--sans);font-size:.72rem;line-height:1;letter-spacing:0;
  display:inline-block;vertical-align:.08em;margin-left:.24rem;padding:.18rem .2rem;
  border:1px solid rgb(var(--cc)/.5);background:rgb(var(--cc)/.16);color:var(--ct)}
/* 册页里的记号跟在村名后头，一律留左距；档案条目里记号领在名目前面，反过来留右距 */
.vd-list .vd-mk{margin-left:0;margin-right:.34rem}
/* 右栏：点开的那一档 */
.vd-file{position:sticky;top:calc(var(--stick) + 1.5rem);min-width:0;align-self:start;max-height:calc(100vh - 7rem);
  overflow:auto;overscroll-behavior:contain;padding:clamp(.9rem,2vw,1.3rem);
  border:1px solid var(--line);border-top:2px solid rgb(var(--gold-rgb)/.6);
  background:linear-gradient(180deg,rgb(var(--paperhi-rgb)/.92),rgb(var(--paper-rgb)/.78))}
/* 名册屏里节头横条（sticky，实测高 62–67px，不透明底、z-index:4）和右栏册页
   会同时粘着。册页原来的 5.4rem 落点正好压在横条下沿之上：金边整条被盖住，
   第一行村名的上半字也吃进条里（1440 宽实测重叠 33px）。把册页粘到横条之下。
   ≤1000px 时册页是 static 并被搬进名册那一段，不适用。 */
@media (min-width:1001px){
  #vilField .vd-file{top:calc(var(--stick) + 4.2rem + .4rem);max-height:calc(100vh - var(--stick) - 4.2rem - 3rem)}
}
.vd-idle{margin:0;font-family:var(--kai);font-size:.86rem;line-height:1.9;color:var(--tx2)}
.vd-rec h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .55rem;margin:0 0 .48rem;
  font-size:1.16rem;color:var(--ink)}
.vd-rec h3 i{font-style:normal;font-family:var(--kai);font-size:.74rem;letter-spacing:.12em;
  color:var(--cinnabar-d)}
.vd-rec h3 em{font-style:normal;font-family:var(--sans);font-size:.72rem;letter-spacing:.05em;
  color:var(--tx2);border:1px solid var(--line);padding:.1rem .4rem}
.vd-cat{display:flex;flex-wrap:wrap;gap:.62rem;margin:0 0 .7rem;font-size:.72rem;color:var(--tx2)}
/* 一类一枚：盒子只画在记号上（和名册里那些 .vd-mk 同一形制），类别名做裸标签，
   否则一个 chip 套一个 chip，颜色被边框切两回反而认不出来 */
.vd-cat span{display:inline-flex;align-items:center;gap:.32rem}
.vd-cat i{font-style:normal;font-family:var(--sans);font-size:.72rem;line-height:1;letter-spacing:0;
  padding:.18rem .2rem;border:1px solid rgb(var(--cc)/.5);background:rgb(var(--cc)/.16);color:var(--ct)}
.vd-list{display:grid;gap:.62rem;margin:0;padding:0;list-style:none}
.vd-list li{padding-top:.62rem;border-top:1px dashed var(--line);font-size:.8rem;line-height:1.75}
.vd-list li:first-child{border-top:0;padding-top:0}
.vd-list li>b{display:block;font-family:var(--serif);font-size:.95rem;font-weight:700;
  color:var(--ink);margin-bottom:.26rem}
.vd-fl{font-style:normal;font-family:var(--kai);font-size:.7rem;letter-spacing:.08em;
  color:var(--cinnabar-d);border-left:2px solid rgb(var(--cinn-rgb)/.4);padding-left:.42rem;margin-left:.4rem}
.vd-lv,.vd-yr,.vd-gr{display:inline-block;margin:.1rem .34rem 0 0;padding:.13rem .42rem;
  font-size:.72rem;letter-spacing:.04em;color:var(--tx2);
  background:rgb(var(--paper3-rgb)/.5);border:1px solid var(--line)}
.vd-gr{background:none;border-style:dashed}
/* 引录：照抄原文那一行，不改一个字，所以用楷体并与底栏拉开 */
.vd-q{margin:.42rem 0 0;padding:.46rem .62rem;font-family:var(--kai);font-size:.78rem;line-height:1.8;
  color:var(--ink2);background:rgb(var(--paper2-rgb)/.5);border-left:2px solid rgb(var(--gold-rgb)/.5)}
.vd-no,.vd-src2{margin:.4rem 0 0;font-size:.73rem;line-height:1.8;color:var(--tx2)}
.vd-no b{color:var(--ink)}
.vd-x{display:flex;flex-wrap:wrap;gap:.55rem;align-items:baseline;margin:.52rem 0 0;font-size:.7rem}
.vd-x a{text-decoration:none}
.vd-go{color:var(--river-d);border-bottom:1px solid rgb(var(--river-rgb)/.42)}
.vd-go:hover,.vd-go:focus-visible{color:var(--river);border-bottom-color:rgb(var(--river-rgb)/.8)}
/* 空白村：没留下登记也要把话说满，右栏不留空 */
.vd-rec.nil h3 em{border-style:dashed}
.vd-nil{margin:0 0 .5rem;padding:.6rem .72rem;font-family:var(--kai);font-size:.94rem;line-height:1.8;
  color:var(--cinnabar-d);border:1px solid rgb(var(--cinn-rgb)/.34);background:rgb(var(--cinn-rgb)/.06)}
/* 册后：注单、总计、图例、口径 */
.vd-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:.5rem 1.4rem;
  margin:clamp(1rem,2.2vw,1.5rem) 0 0;padding:0;list-style:none}
.vd-note{margin:0;font-size:.72rem;line-height:1.8;color:var(--tx2);
  border-left:2px solid rgb(var(--gold-rgb)/.42);padding-left:.6rem}
.vd-note b{font-family:var(--kai);color:var(--ink);margin-right:.35rem}
.vd-tally{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .9rem;margin:1.15rem 0 0;
  padding-top:.85rem;border-top:1px solid var(--line)}
.vd-tally b{font-family:var(--serif);font-size:1.02rem;letter-spacing:.06em;color:var(--cinnabar-d)}
.vd-tally span{font-size:.76rem;color:var(--tx2)}
.vd-jump{font-size:.72rem;color:var(--river-d);text-decoration:none;
  border-bottom:1px solid rgb(var(--river-rgb)/.42)}
.vd-jump:hover,.vd-jump:focus-visible{border-bottom-color:rgb(var(--river-rgb)/.8)}
.vd-key{display:flex;flex-wrap:wrap;align-items:center;gap:.42rem .8rem;margin:.5rem 0 0;
  font-size:.7rem;color:var(--tx2)}
.vd-key i{font-style:normal;display:inline-flex;align-items:center;gap:.3rem}
.vd-key i>b{font-family:var(--sans);font-size:.72rem;line-height:1;padding:.18rem .22rem;
  border:1px solid rgb(var(--cc)/.5);background:rgb(var(--cc)/.16);color:var(--ct)}
.vd-key s{text-decoration:none;font-size:.72rem;opacity:.82}
.vd-key .vd-kn s{border-left:2px solid var(--line);padding-left:.5rem;margin-left:.2rem}
.vd-src{margin:.7rem 0 0;font-size:.72rem;line-height:1.85;color:var(--tx2)}
.vd-src b{color:var(--ink)}
.vd-alt{margin:.5rem 0 0;font-size:.72rem;color:var(--tx2);font-style:italic}
@media (max-width:1000px){
  .vd-grid{grid-template-columns:minmax(0,1fr)}
  .vd-file{position:static;max-height:none}
  /* 窄屏时 play.js 把这一栏搬进被点那一段的末尾，就地摊开 */
  .vd-sec>.vd-file{margin-top:.7rem}
}
@media (max-width:680px){
  .vd-n{font-size:.74rem;padding:.18rem .34rem}
  .vd-t{font-size:.86rem;letter-spacing:.1em}
  .vd-roll{gap:.34rem}
}

/* 减弱动效：弹窗只出现不位移 */
@media (prefers-reduced-motion:no-preference){
  .ts{opacity:0;transition:opacity var(--dur-quick) var(--ease-exit)}
  .ts.on{opacity:1}
  .ts-card{transform:translateY(14px);opacity:.4;transition:transform var(--dur-standard) var(--ease-enter),opacity var(--dur-standard) var(--ease-enter)}
  .ts.on .ts-card{transform:none;opacity:1}
  .cmdk{opacity:0;transition:opacity var(--dur-immediate) var(--ease-exit)}
  .cmdk.on{opacity:1}
  .cmdk-box{transform:translateY(-10px);transition:transform var(--dur-quick) var(--ease-enter)}
  .cmdk.on .cmdk-box{transform:none}
}

/* ================= 卷三 V3：沙盘优先 =================
   首屏交给沙盘：画布铺满台框，控件浮在框上，时间轴压在框底。

   台框是 grid 而不是逐个数 absolute —— .sb-bar 里的按钮一定会折行，
   写死 top 的浮层下一次折行就压到别人身上。这里让画布占满全部格
   （grid-column/row 都 1/-1），浮层各领一格，位置由格子定，
   压序由 DOM 序 + position:relative 定：画布是 z-index:0 的层叠上下文，
   它自己的绝对定位子元素（标签、指北、兜底图）都关在里面，
   于是后写的浮层一定盖在整块画布之上，不用猜 z-index。 */
.sandbox{
  /* 底部轴带的高。指北针要停在它上面，所以这个数得能被引用；
     atlas.js 会按实测轴带高回写，这里的 7.4rem 只是脚本没到位时的兜底。 */
  --tlh:7.4rem;
  position:relative;
  margin:0 calc(-1*clamp(1.1rem,5vw,3.4rem));
  padding:clamp(1.2rem,3vw,1.9rem) clamp(1.1rem,5vw,3.4rem) clamp(2.2rem,5vw,3.4rem);
  background:radial-gradient(126% 76% at 50% 0,var(--ink3) 0,var(--ink) 58%);
  border-top:1px solid var(--line-d);
}
.sb-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(.75rem,1.7vw,1.1rem)}

/* ---------- 台头：只剩一个标题 ----------
   台头原来挂着一整段导语（怎么点、怎么拖、先切哪个），后来那是引导卡的活；
   V13 把引导卡换成控件台最后那一行悬停指引，又删掉「空间探索 / 时间漫游」两个读法钮
   —— 两种读法各有各的家（点标签读单点，翻这条轴读时代），不需要先拨一个总闸选边。
   （V12 撤掉的四枚统计牌仍然成立：四个数在沙盘里各有一处自己的家，
   36 在轴上的读数里、84 在底册那一行说明里、1603 在标题与轴带「本图之年」那一档里。
   1px=1.2346m 原来挂在画布下角那句读图注上，V14 把那张牌删了（批注①：占地方、
   没什么用），这一句改住在「三张图与一把尺」那一节和台面之下的口径第五条里。
   台头再说一遍，只是让人对两处。） */
.sb-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem 1.3rem}
/* 标题要能被挤得下（flex-shrink:1 + min-width:0）：它原来写着 flex:0 0 auto，
   363px 的一行汉字在 301px 的窄屏上不肯折行，整页横向滚出 29px。 */
.sb-head h2{font-size:var(--fs-h);letter-spacing:.04em;flex:1 1 auto;min-width:0;color:var(--tx-d)}

/* ---------- 台框 ---------- */
/* 高是 min-height 不是 height：左下那一摞（引导 + 图例）加上顶部控件条和底部轴带，
   合起来完全可能超过 84svh。写死 height 的话网格行会溢出容器，被 overflow:hidden
   裁掉的正是最底下那条时间轴 —— 轴带看不见就等于整个联动没法用。
   现在让内容把框顶高，画布（跨满全部格）跟着长，three 拿到的仍是确定高度。 */
.sb-frame{position:relative;display:grid;overflow:hidden;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  min-height:clamp(560px,84vh,880px);min-height:clamp(560px,84svh,880px);
  border:1px solid var(--line-d);border-radius:6px;background:var(--ink)}
/* 画布整框铺开，但它是*绝对定位*的：作为普通网格项跨满 1-5 行时，
   它的 min-content 高度会回灌给网格行——resize() 读到多高就把 canvas 写成多高，
   写高了的 canvas 又把行撑高，ResizeObserver 再量一次……一次 351 宽的窗口里
   这条循环把台框一路顶到 3323px 高。抽出文档流后行高只由浮层与轴带决定，
   框高由 min-height 兜底，画布拿到的仍是一个确定的框。 */
.sb-frame>.atlas-viz{position:absolute;inset:0;z-index:0;height:auto;border:0;border-radius:0}
/* 浮层一律 relative：静态定位的网格项会画在 z-index:0 的画布层*底下*
   （定位元素后进绘制层），带底的轴带就会变成一块透明的空条。
   V14：点位浮层是唯一一个 absolute 的——它要跟着画布上那一处走，不能占网格行。 */
.sb-bar,.sb-tl{position:relative;z-index:5}
.sb-pop{position:absolute;left:0;top:0;z-index:8}
/* 控件台 V13：不再是「一行挤五个钮」的 flex 串，而是一副按列对齐的格子。
   一格 = 一个属性名（.ctl-n）+ 它自己的那几个钮，钮在格内撑满等宽 ——
   所以换设备只是换列数（宽屏 4 列、窄屏 2 列），不换排法，也不会挤成一条参差不齐的长队。
   --rack 是这套格子唯一的尺寸旋钮，图层那三组筛选片共用它，两处列宽因此对得上。
   最后一行 .bar-foot 是悬停指引的落点：鼠标停在哪个钮上，那一行就说那个钮做什么。
   墨底为什么是 .9 不是 .6：这四块牌子浮在画布上，而画布在白天那一档是米色的
   （scene.background #e9e0cf）。60% 的墨压在米上，实测 12px 的属性名只剩 2.6:1、
   指引行 1.8:1 —— 到了夜里又变成另一套对比度。牌子是仪器面板不是毛玻璃窗，
   所以控件台、图例、抽屉、轴带四块一律提到 .9，让昼夜两档共用同一份可读性。 */
/* 批注③：这一排要能折起来。折的不是整块牌子（折完就没有「收起／展开」的落点了），
   而是中间那副格子：收成一条以后只剩最后一行——一颗钮、一句悬停指引、一句巡城态。
   所以格子的 grid 从本体挪进 .bar-body，本体只做一个竖排。 */
.sb-bar{grid-column:1/-1;grid-row:1;justify-self:stretch;align-self:start;
  max-width:min(100%,41rem);padding:.5rem .55rem .45rem;border-radius:6px;
  border:1px solid var(--line-d);background:rgb(var(--ink-rgb)/.9);backdrop-filter:blur(6px)}
.bar-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--rack,9.4rem),1fr));gap:.5rem}
.sb-bar[data-fold="off"] .bar-body,
.sb-bar[data-fold="off"] .ctl-hint{display:none}
.sb-bar .ctl{display:grid;grid-template-rows:auto auto;gap:.3rem;min-width:0;align-content:start}
.sb-bar .ctl-wide{grid-column:1/-1}
.sb-bar .ctl-n{font-family:var(--kai);font-size:var(--fs-2xs);letter-spacing:.2em;color:rgb(var(--txd-rgb)/.55)}
.sb-bar .ctl-b{display:flex;flex-wrap:wrap;gap:.3rem;min-width:0}
.sb-bar .bar-foot{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:.2rem .9rem;margin:0;padding-top:.34rem;border-top:1px solid var(--line-d)}
/* 折叠钮：两块（控件台、轴带）共用这一颗皮肤。字面只有「收起／展开」两字，
   说清按下去会发生什么这件事交给 data-tip——可轴带折起时指引行是不在的，
   所以 JS 同时把 title 也写上，鼠标划过原生气泡还在。 */
.fold-btn{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .66rem;border-radius:99px;
  border:1px solid var(--line-d);background:transparent;color:var(--tx-d2);
  font-family:var(--serif);font-size:var(--fs-2xs);letter-spacing:.12em;
  cursor:var(--cur-hand);transition:var(--dur-quick)}
.fold-btn:hover,.fold-btn:focus-visible{border-color:var(--gold);color:var(--gold)}
.fold-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* 这一行是拖轴时唯一的"数目反馈"：不报数，用户无从知道增减到底发生了没有。 */
.era-count{margin:.42rem 0 0;font-family:var(--serif);font-size:var(--fs-2xs);line-height:1.7;
  letter-spacing:.02em;color:var(--gold-l)}
.era-count:empty{display:none}
/* 指北针仍要停在轴带之上：它是画布的绝对定位子元素，所以引用带高来躲。
   横向不再让——抽屉那一列 V14 拆掉了，画布右沿就是台框右沿。 */
.sb-frame .atlas-compass{right:.7rem;bottom:calc(var(--tlh) + .7rem)}
/* 三维开不起来时，兜底平面图铺满整框、而浮层按 DOM 序还压在它上面。
   不跟浮层抢层（那样会把轴带一起埋掉，内容跟着没了），
   改让图自己的内容排进浮层之间的空档：上让出一条控件的高度，下让出轴带。
   右边不再让：抽屉那一列 V14 拆掉了。 */
@media (min-width:901px){
  .sb-frame .atlas-fb{padding:4.8rem .8rem calc(var(--tlh) + 1rem) .8rem}
}
/* 三维没起来时，凡是靠 init() 才成立的浮层一并收掉：视角、镜头、夜景、图层筛选、
   巡城态、抽屉里那颗「回到本图之年」——HTML 给每一格都标了 data-need3d，
   收的时候只按这一个属性点名。V13 之前是逐个写死 #atlasOver 这类选择器的，
   控件台改成格子之后那样会漏掉整格的属性名，留一个空标题在图上。
   留在平面图上的：全屏钮（#sbFull 是节级别的，平面图同样值得放大看）、
   底部这条轴与轴带里那一档史料（时代这一档不靠模型，翻照翻、读照读）、
   台面之下那三条（名录与账本来就在画布之外，跟三维没关系）。
   写成 :has 而不是 JS 摘节点，是因为「再试一次」成功后这些还得自己长回来。 */
.sb-frame:has(.atlas-viz.atlas-off) [data-need3d]{display:none}

/* ---------- 点位浮层：批注④的那"一小片区域" ----------
   原来这一档住右栏，跟时代那一档挤在同一只抽屉里，两档之间靠一颗「‹ 返回」来回切。
   V14 按批注把抽屉整个拆掉：读年代的那一半搬进底部轴带（下面 .tl-era 那一段），
   读点位这一半不再占一整列，而是浮在画布上、贴在它说的那一处头顶——点一个名字，
   这片区域就在标签上方弹出来，说完这一处的来历与年代，✕ 一按就没有了。
   位置由 atlas.js 的 placePop() 每帧写 transform（left/top 永远留 0，见上面 .sb-pop 的定位），
   所以这里不能给 transform 加 transition：镜头飞过去的时候浮层要贴着那一处走，
   缓动会拖在后面，看着像浮层自己滑错了地方。窄屏（900 断点）它退回竖排，
   那一段里 JS 也不再写 transform。 */
.sb-pop{width:min(23rem,86%);max-height:min(52%,20rem);overflow-y:auto;overscroll-behavior:contain;
  padding:.6rem .72rem .66rem;border-radius:6px;border:1px solid var(--line-d);
  border-left:2px solid var(--gold);background:rgb(var(--ink-rgb)/.94);backdrop-filter:blur(8px);
  box-shadow:0 14px 34px rgb(var(--ink-rgb)/.34)}
.sb-pop[hidden]{display:none}
/* 类别名与 ✕ 同一行：那颗是绝对定位的，题头不给右边留一颗的宽度就会被压住。 */
.pop-kind{display:block;padding-right:2rem;font-family:var(--kai);font-size:var(--fs-2xs);
  letter-spacing:.22em;color:var(--gold)}
.pop-x{position:absolute;right:.5rem;top:.5rem;width:1.55rem;height:1.55rem;border-radius:50%;
  border:1px solid var(--line-d);background:transparent;color:var(--tx-d2);
  font-size:var(--fs-2xs);line-height:1;cursor:var(--cur-hand);transition:var(--dur-quick)}
.pop-x:hover,.pop-x:focus-visible{border-color:var(--cinnabar);color:var(--cinnabar)}
.sb-pop .city-read{min-height:0;margin-top:.42rem;padding:.62rem .7rem;
  background:rgb(var(--txd-rgb)/.05);border-color:var(--line-d)}
.sb-pop .city-read b{font-size:var(--fs-h3)}
.sb-pop .city-read p{font-size:var(--fs-s);line-height:1.76}
.pop-roster{display:inline-block;margin-top:.5rem;font-size:var(--fs-s);color:var(--gold-l);text-decoration:none;
  border-bottom:1px dotted rgb(var(--gold-rgb)/.55)}
/* 这条不能省：display:inline-block 会盖掉 UA 的 [hidden]{display:none}，
   于是 JS 把 hidden 设上以后，"到底册"那条链接照样画在浮层里。 */
.pop-roster[hidden]{display:none}
.pop-roster:hover,.pop-roster:focus-visible{border-bottom-color:var(--gold);border-bottom-style:solid}

/* ---------- 轴带里的时代那一档：抽屉拆出来的后半 ----------
   V13 把一栏拆成点读 / 时代两档，V14 干脆把两档分到两个地方：这一档跟着它描述的那条轴走，
   翻一站就在轴下面换一次史料，不再需要「点读→返回→时代」那一趟来回。
   .tl-era[hidden] 那条不能省：下面写的是 display:grid，
   不压回来的话 UA 的 [hidden] 会被盖掉，收起的那一档照样画在带子里。 */
.sb-tl .tl-era{display:grid;gap:.42rem;align-content:start;min-width:0;
  grid-column:1/-1;grid-row:2;margin:.5rem .95rem 0;padding-top:.55rem;border-top:1px dashed var(--line-d)}
.sb-tl .tl-era[hidden]{display:none}
.sb-tl .dr-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem .6rem;margin:0}
.sb-tl .dr-h>b{font-family:var(--kai);font-size:var(--fs-2xs);letter-spacing:.22em;color:rgb(var(--txd-rgb)/.62)}
.sb-tl .dr-era,.sb-tl .era-count{margin:0}
.sb-tl .dr-card{margin-top:.05rem}
.dr-era-x{padding:.2rem .58rem;border-radius:99px;border:1px solid var(--line-d);background:transparent;
  font-family:var(--serif);font-size:var(--fs-2xs);letter-spacing:.04em;color:var(--tx-d2);cursor:var(--cur-hand);transition:var(--dur-quick)}
.dr-era-x:hover,.dr-era-x:focus-visible{border-color:var(--gold);color:var(--gold)}
.dr-era{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .5rem;margin:.55rem 0 0}
.dr-era b{font-family:var(--serif);font-size:var(--fs-h3);color:var(--gold);letter-spacing:.03em}
/* 这一年下面接的是整句口径说明（画不出来 / 增减依据），不是两个字的标签，
   所以排版要按句子来：字距收回正常、给足行高，靠 flex-wrap 自己掉到年份下面。 */
.dr-era span{font-size:var(--fs-2xs);line-height:1.68;letter-spacing:.02em;color:rgb(var(--txd-rgb)/.66)}
/* 这一站只给前五行：全轴的全文在下方 #tlAll 整表里，轴带这一档不收成第二堵墙。 */
.dr-card{margin-top:.7rem;padding-top:.6rem;border-top:1px dashed var(--line-d);min-height:3.4rem}
.dr-card .kicker{display:block;margin-bottom:.22rem;font-family:var(--kai);font-size:var(--fs-2xs);
  letter-spacing:.2em;color:var(--gold)}
.dr-card h3{margin:0 0 .3rem;font-size:var(--fs-b);letter-spacing:.03em;color:var(--tx-d)}
.dr-card p{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
  margin:0;font-size:var(--fs-s);line-height:1.72;color:var(--tx-d2)}
.dr-card p b{color:var(--gold);font-weight:600}
.dr-card p em{font-style:normal;color:var(--gold-l);border-bottom:1px dotted rgb(var(--gold-rgb)/.55)}

/* ---------- 底部轴带（批注②：这条有问题，而且要能折） ----------
   报上来的"有问题"，量出来是两处：
   一、开页时轴带停在 scrollLeft=0，本站那一站（第 17 位）在屏幕外两千多像素——
       轴上写的第一个数是「商末」，城里站的却是 1603。现在由 app.js 的 centerTrack()
       把当前站摆到正中间，开页、翻站、折回来、改窗宽四种场合都走这一个函数。
   二、这条带按 V10 的统一造型长出一根 12px 圆头滚动条，一根墨痕飘在轨道底下，
       看着像一条坏掉的进度条。带子的横向移动本来就是拖 / 滚轮 / 两端箭头三件事在做，
       滑块不给额外信息，所以这一处单独把滚动条收掉，改用两端各淡出 2.2rem 的遮罩
       来说"这里还能滚"（遮罩同时盖住了滑块原来占的那条位置，不会露出一截空槽）。
   折叠：折起来只剩年份读数、站号与两端箭头；箭头不消失，照着能翻站，
   轴下面那一档也跟着收起，于是这一带从 ~7.4rem 压到一行读数的高度。 */
.sb-tl{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:auto auto;align-items:stretch;gap:0;padding:.4rem 0 .45rem;border-top:1px solid var(--line-d);
  /* 两颗箭头显式落第一行的两头：.tl 与 .tl-era 都指定了格子，自动布球会把箭头
     按稀疏 packing 往第二行塞，带子就变成一颗箭头在上、一颗在下的错位。 */
  
  /* 这一档上沿不能只给 .8：轴带浮在白天的米色画布上，上沿那一格量出来是 57,64,65，
     本站年号（赭金 19px 常规体）压上去只剩 3.6:1，「/ 36」更是 4.39 —— 都是差一点就合格的。
     上沿提到与另外三块牌子同档的 .9，渐变还留着（.9→.96），最低的一档也从 3.6 走到 4.8。 */
  background:linear-gradient(180deg,rgb(var(--ink-rgb)/.9),rgb(var(--ink-rgb)/.96));backdrop-filter:blur(7px)}
.sb-tl>.tl-arrow{grid-row:1}
.sb-tl>button:first-of-type{grid-column:1}
.sb-tl>button:last-of-type{grid-column:3}
.sb-tl .tl{min-width:0;max-width:none;margin:0;padding:0 .7rem;gap:.2rem .9rem;
  grid-column:2;grid-row:1;grid-template-columns:minmax(5.4rem,auto) minmax(0,1fr);align-items:center}
.sb-tl .tl-year{text-align:left}
.sb-tl .tl-year b{font-size:clamp(1.9rem,4.4vw,2.9rem)}
.sb-tl .tl-year span{font-size:var(--fs-2xs);letter-spacing:.26em}
.sb-tl .tl-track{padding:.42rem .2rem .3rem;scrollbar-width:none;-ms-overflow-style:none;
  mask-image:linear-gradient(90deg,transparent,#000 2.2rem,#000 calc(100% - 2.2rem),transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.2rem,#000 calc(100% - 2.2rem),transparent)}
.sb-tl .tl-track::-webkit-scrollbar{width:0;height:0}
/* 折叠态：轨道与那一档一起收掉，两颗箭头跟着变窄（4rem 宽的实心块守一条空带不像话），
   但留在场上——折起来以后翻站靠的就是它们。 */
.sb-tl[data-fold="off"] .tl-track,
.sb-tl[data-fold="off"] .tl-era{display:none}
.sb-tl[data-fold="off"] .tl{grid-template-columns:minmax(0,1fr)}
.sb-tl[data-fold="off"] .tl-arrow{width:2.4rem;font-size:1.15rem}

/* ---------- 台面之下：名录与账 ---------- */
.sb-under{width:100%;max-width:74rem;margin:clamp(1.2rem,3vw,1.8rem) auto 0}
.sb-under .atlas-search{display:block;width:min(22rem,100%);margin-bottom:.2rem}
/* 台面之下不再是 .panel-glass：这几条原来靠面板拿到的深色前景要自己说一遍，
   否则 .ph-note 与数字条会拿浅底配色画在深底上，等于看不见。 */
.sb-under h3.sub{color:var(--tx-d)}
.sb-under .ph-note{color:var(--tx-d2);border-top-color:var(--line-d)}
.sb-under .ph-note a{color:var(--gold-l);border-bottom-color:rgb(var(--gold-rgb)/.5)}
.sb-under .tw-stats .st{border-color:var(--line-d);background:rgb(var(--txd-rgb)/.05)}
.sb-under .tw-stats .st b{color:var(--gold)}
.sb-under .tw-stats .st i{color:var(--tx-d2)}
.sb-under .pc{background:rgb(var(--txd-rgb)/.06);border-color:var(--line-d);box-shadow:none}
.sb-under .pc figcaption{color:var(--tx-d2);border-top-color:var(--line-d)}
.sb-under .pc figcaption b{color:var(--tx-d)}

/* ---------- 窄屏：台面拆成一列竖排，3D 仍然在场 ----------
   低质量档由 atlas.js 的 quality 定，这里只管版面：画布给一段定高，
   浮层按画布 → 控件台 → 点位浮层 → 轴带的顺序摊开。
   控件台那副格子在这一档自己退到两列：--rack 一个旋钮，列数跟着框宽算，不必另写断点。 */
@media (max-width:900px){
  .sb-frame{display:flex;flex-direction:column;height:auto;border:0;border-radius:0;
    border-block:1px solid var(--line-d)}
  .sb-frame>*{position:static;order:initial;width:auto;max-width:none;max-height:none;overflow:visible;
    min-width:0;border-radius:0;justify-self:auto;align-self:auto}
  /* 这条必须自己声明 position：桌面档为了躲 ResizeObserver 的高度回灌，
     把画布写成了绝对定位铺满台框；而 .sb-frame>* 的 position:static
     特异度只有 (0,1,1)，压不住 .sb-frame>.atlas-viz 的 (0,2,0)，
     结果窄屏里画布脱离竖排、正好盖在控件条那一格上。 */
  .sb-frame>.atlas-viz{position:relative;inset:auto;order:0;height:min(56vh,430px);
    height:min(56svh,430px);overflow:hidden}
  /* 三维起不来时画布格让给兜底平面图：定高会把图与说明裁掉，
     这时按内容排，只留一个下限。 */
  .sb-frame>.atlas-viz:has(.atlas-fb:not([hidden])){height:auto;min-height:min(56svh,430px)}
  .sb-bar{order:1;background:rgb(var(--ink-rgb)/.3);border:0;border-bottom:1px solid var(--line-d);
    border-radius:0;backdrop-filter:none;padding:.5rem 0;--rack:8.6rem}
  /* 窄屏里控件台只有 300 上下的宽度：四列会把每格压到 70，钮整个换行，反而比现在高。
     退回两列，同时把筛选片摊成一列——属性名贴在片左边，十枚片于是只用三行。 */
  .sb-bar .atlas-filter{grid-template-columns:minmax(0,1fr);gap:.3rem}
  /* 窄屏不玩"浮在画布上"：那一段画布只有 56svh，一块 23rem 的面板压在城上等于把城盖住。
     浮层退回竖排里自己那一格，像原来抽屉那样按内容长。JS 在这一档不写 transform，
     免得静态元素被一个平移推歪。 */
  .sb-frame>.sb-pop{position:static;order:2;transform:none;width:auto;max-height:none;
    background:rgb(var(--ink-rgb)/.22);backdrop-filter:none;box-shadow:none;
    border:0;border-left:2px solid var(--gold);border-radius:0;padding:.7rem 0}
  .sb-tl{order:3;background:rgb(var(--ink-rgb)/.4);border:0;border-bottom:1px solid var(--line-d)}
  /* 竖排时轴带不在画布下沿之内，--tlh 那条避让要收回来，
     否则指北针会从画布底边往上飘出一整个带高。 */
  .sb-frame .atlas-compass{right:.7rem;bottom:.7rem}
  .sb-tl .tl{grid-template-columns:minmax(0,1fr);gap:.3rem}
}

/* ================= 卷三 V11：全屏浏览 =================
   全屏交给整节沙盘（.sandbox.fs），不交给台框那一格：控件台、抽屉、轴带是一整套读法，
   只把台框放进去等于把台账与轴留在屏幕外，拿到的是半个沙盘。
   进全屏后砍掉的两块：导语（.sb-dek，点法与翻法已经写在控件台与轴带上）与台面之下
   （.sb-under，那是名录与账，属于"看完这一屏再往下翻"的东西）。

   版面只认 .fs 一个类，不写 :fullscreen —— 选择器组里混一个不被支持的伪类
   会整条规则作废，而 iOS Safari 对非 video 元素根本没有 requestFullscreen。
   原生全屏成功时浏览器自己把元素铺进顶层，我们再挂同一个类；钉视口这一条
   （position:fixed;inset:0）在两种情况下拿到的都是满屏盒子，版式只有一份。
   层级 110：压过页面上的顶栏(50)/滚动进度(60)/提示(70)/时间轴弹窗(100)，
   但不压灯箱(120)与命令面板(140)——那两个是从别处召出来的，该盖过这一节。

   每条都带 section#time：V9 把这一节收进栏宽时写的是 section#time .sandbox，
   特异度 (1,1,1)。裸 .sandbox.fs 只有 (0,2,0)，会被那条按字面压过去 —— 于是全屏里
   留着 74rem 上限与那层 .6 透明度的纸底，屏幕四边露出一截正文，整块浮层跟着发灰。
   底色在这里抄回墨底（与 .sb-frame 同一支径向渐变）：全屏读的是仪器，不是纸。 */
html.sb-fslock{overflow:hidden}
section#time .sandbox.fs{position:fixed;inset:0;z-index:110;margin:0;max-width:none;
  border:0;border-radius:0;padding:clamp(.7rem,1.5vw,1.15rem);
  display:flex;flex-direction:column;overflow:hidden;
  background:radial-gradient(126% 76% at 50% 0,var(--ink3) 0,var(--ink) 58%)}
section#time .sandbox.fs .sb-in{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  gap:clamp(.5rem,1.2vw,.8rem)}
section#time .sandbox.fs .sb-head{flex:0 0 auto}
section#time .sandbox.fs .sb-dek,section#time .sandbox.fs .sb-under{display:none}
/* 浮层里那条「到底册」指的是台面之下那一格，全屏已经把 .sb-under 收掉了，
   留着就是一条点了没反应的死链；出了全屏它自己回来。 */
section#time .sandbox.fs .pop-roster{display:none}
/* 台框的 min-height 是按 84svh 定的，全屏里那正是它该拿的剩余空间，
   留着下限反而会把轴带顶出屏幕：收成 0，交给 flex 分。 */
section#time .sandbox.fs .sb-frame{flex:1 1 auto;min-height:0;height:auto}
/* 窄屏的全屏是竖排一列（上面那条 900px 规则改的），内容一定超过一屏高，
   所以这一档要能滚：flex 不再把台框拽满，画布给一段按屏幕算的定高。 */
@media (max-width:900px){
  section#time .sandbox.fs{overflow-y:auto;overscroll-behavior:contain}
  section#time .sandbox.fs .sb-in{flex:0 0 auto;min-height:0}
  section#time .sandbox.fs .sb-frame{flex:0 0 auto}
  section#time .sandbox.fs .sb-frame>.atlas-viz{height:min(60svh,520px)}
}

/* ================= 卷三 V13：控件台、悬停指引、轴两端的大箭头 =================
   V12 那对钮做成了「一颗胶囊里塞两颗小圆钮」，实测还是 2.3rem(≈37px) 的一点，
   观众的眼睛先落在轴带上，再往下找一排更小的字 —— 这一屏唯一一个每站都要按的动作，
   仍然像附属品。这一版按批注改成带子两端各一颗实心大箭头：整条带子的高度都归它，
   一眼就在两头；站号不再挤在中间那颗胶囊里，改贴在年份读数的右边。
   控件台那副格子（.ctl / .ctl-b / .bar-foot）、筛选片的三组属性、抽屉的两档，
   皮肤都写在这一段里，版面骨架在上面各自的段落里。 */
section#time .sb-tl .tl-arrow{flex:0 0 auto;width:clamp(3.1rem,6.4vw,4rem);padding:0;
  border:0;border-inline:1px solid var(--line-d);background:rgb(var(--paperhi-rgb)/.06);
  font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1;
  color:var(--tx-d);cursor:var(--cur-hand);transition:var(--dur-quick)}
section#time .sb-tl .tl-arrow:first-child{border-left:0}
section#time .sb-tl .tl-arrow:last-child{border-right:0}
section#time .sb-tl .tl-arrow:hover{background:var(--gold);color:var(--ink)}
section#time .sb-tl .tl-arrow:active{transform:scale(.97)}
section#time .sb-tl .tl-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
section#time .sb-tl .tl-arrow:disabled{opacity:.28;cursor:default}
/* .tl-idx 必须自己声明 inline-flex：基线那条 .tl-year b{display:block}
   会把里面的 <b>17</b> 变成整行，读数就成了「17 / 36 竖着排」。 */
section#time .sb-tl .tl-year .tl-idx{display:inline-flex;align-items:baseline;gap:.3rem;margin-left:.55rem;
  font-family:var(--serif);font-size:var(--fs-2xs);letter-spacing:.04em;color:rgb(var(--txd-rgb)/.6);
  font-variant-numeric:tabular-nums}
section#time .sb-tl .tl-year .tl-idx b{font-size:var(--fs-h3);line-height:1;letter-spacing:.02em;color:var(--gold)}
section#time .sb-tl .tl-year .tl-idx i{font-style:normal}

/* 控件台里每一颗钮撑满自己那一格：等宽、等高、字居中，四列排开时是一面齐的。 */
.sb-bar .ctl-b button{flex:1 1 auto;text-align:center;padding:.34rem .6rem;min-height:1.9rem;
  border-radius:99px;border:1px solid var(--line-d);background:rgb(var(--txd-rgb)/.05);
  color:var(--tx-d2);font-family:var(--serif);font-size:var(--fs-s);letter-spacing:.04em;
  cursor:var(--cur-hand);transition:var(--dur-quick)}
.sb-bar .ctl-b button:hover{border-color:var(--gold);color:var(--tx-d)}
.sb-bar .ctl-b button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.sb-bar .ctl-b button.act{background:var(--gold);border-color:var(--gold);color:var(--ink)}
/* 全屏那颗的状态只写在 aria-pressed 上（atlas.js 点一次只改这一个属性），
   没按下去时它就该和旁边那颗立体视角的选中态一样看得出来是按住了。 */
.sb-bar .ctl-b button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}

/* 悬停指引那一行：它取代了原来画布左下那张教人怎么操作的卡。
   min-height 两行是硬要求 —— 这一行的字比它短，写上去就会把控件台顶高一档，
   鼠标每划过一个钮，整面控件就跟着抖一次。 */
.ctl-hint{margin:0;flex:1 1 12rem;min-height:2.6em;font-family:var(--serif);
  font-size:var(--fs-2xs);line-height:1.6;letter-spacing:.02em;color:var(--gold-l)}
.sb-bar .atlas-state{flex:0 0 auto;margin:0}

/* ================= 卷三 V6：配色归一（纸底）+ 外围折叠 + 溢出 =================
   卷三原来是本章唯一的 chapter dark，与前四卷的纸底接不上。这一版整节回到
   .chapter.alt，只把沙盘那一方台框留给墨底 —— 仪器是仪器，纸是纸。

   翻面靠令牌，不靠再写一遍颜色：这一节所有前景与描边都取自
   --tx-d / --tx-d2 / --line-d / --gold-l / --txd-rgb 这五个"暗底五件套"
   （台头 chip、模式钮、名录、搜索、抽屉、轴带、数字卡、图注全走它们）。
   所以在 section#time 把它们声明成纸底值，整套组件自己翻成纸底；
   再在 .sb-frame 内按别名抄回墨底。

   --line-d 必须跟着一起重写：它在 :root 上写作 rgb(var(--txd-rgb)/.18)，
   自定义属性的替换发生在声明它的那一层，后代里只改 --txd-rgb，
   继承下来的 --line-d 不会重算 —— 只翻一个的结果是描边仍是墨底透白。 */
section#time{--tx-d:var(--tx);--tx-d2:var(--tx2);--line-d:var(--line);--gold-l:var(--gold);--txd-rgb:var(--tx-rgb)}
/* V8 补漏：V6 只把 .sb-frame 抄回墨底，可这一节里还有三处表面自身就是墨底——
   .roll-hero（background:var(--ink)，压着卷首标题、导语与图注）、
   .cmp（同 --ink，压着滑块竖线、⇆ 钮与两个年号 chip）、
   .pc .badge（自身 rgb(--ink-rgb/.72) 的角标）。翻令牌是按祖先翻的，
   这三处的底没翻，前景却被翻成了深字，于是深字压深底：1440 宽实测
   h1 的对比度只有 1.15:1，dek 1.55:1，badge 1.6:1——就是那批"突兀的、看不清的元素"。
   把它们和 .sb-frame 一起点名抄回墨底；其他页这两组别名本来就是墨底值，无副作用。 */
.sb-frame,.roll-hero,.cmp,.pc .badge{--tx-d:var(--onink-tx);--tx-d2:var(--onink-tx2);
  --line-d:var(--onink-line);--gold-l:var(--onink-goldl);--txd-rgb:var(--onink-rgb)}

/* V8 补漏（二）：金字在纸底上只有 2.4:1（实测 49 处：纪年列、单位、台头读数、
   二十几个数、＋ 记号）。金族三档里 --gold-d 的定义就是"浅底上的强调字"，
   所以按本节作用域改走 --gold-d；墨底四处不在 section#time 的直接作用域内
   （它们各自另有一组别名），仍用 --gold。*/
section#time .wlog b,section#time .wlog li.now em,section#time .kf i,
section#time .pchain i,section#time .sb-under .tw-stats .st b,
section#time details.more>summary::before,section#time details.more>summary:hover{color:var(--gold-d)}
section#time .wlog li.now{border-left-color:var(--gold-d)}
/* 存疑记号原来写作 rgb(--cinn-rgb/.85)，透到纸上只剩 3.46:1。*/
section#time .kf em{color:var(--cinnabar)}
/* V8 补漏（三）：数卡片底下那层 rgb(--txd-rgb/.05) 是"暗算底"，
   在纸上等于把底压暗一档，金字被拖到 4.25:1。换成纸亮底后同一批金字回到 4.6 以上；
   hover 另给一层暖金，保住"能点"的反馈。墨底那一页（卷四）不吃这条，故只在本节作用域。*/
section#time .kf{background:rgb(var(--paperhi-rgb)/.72)}
section#time .kf:hover{background:rgb(var(--gold-rgb)/.12)}

/* 台框里的钮原来靠 .dark 前缀着色；这一节不再是 dark，皮改按控件台那副格子重申。 */
.sb-frame .city-read b{color:var(--gold)}
.sb-frame .city-read p{color:var(--tx-d2)}
/* 载入句压在纸色画布底上，取纸底字色（跟着台框翻成透白就看不见了）。 */
.sb-frame .atlas-load{color:var(--tx-d2)}

/* ---------- 台面底色：从墨底渐变换成宣纸 ---------- *
   V9：这块渐变 wash 只在沙盘还出血铺满整章时才有意义（它当时是「一屏台面」）。
   现在沙盘和正文面板同栏同底，wash 就成了六块纸里唯一一块带底纹的，
   反而像突兀元素，所以 V9 那条把皮肤统一成 .panel 的平纸底。 */
.sandbox{background:radial-gradient(120% 62% at 50% 0,rgb(var(--paperhi-rgb)/.9),rgb(var(--paperhi-rgb)/0) 66%);
  border-top:1px solid var(--line)}

/* ---------- 台头下面那句导语：沙盘第一次出现在纸底卷里，需要先说一句再进框 ---------- */
.sb-dek{max-width:64rem;margin:.1rem 0 .25rem;font-size:var(--fs-sm);line-height:1.92;color:var(--tx2)}

/* ---------- 三份外围资料：三张折叠卡 ----------
   原来是一路往下堆的长栏：沙盘占满一屏，它外围的名录、二十几个数、口径说明
   全压在下面，屏幕不够时既看不见沙盘也够不着资料。现在默认全收，
   沙盘底下只有三行，要哪份开哪份。记号沿用站点统一的 ＋/－。 */
.sb-under>.sb-fold{margin:0 0 .5rem;padding:0;border:1px solid var(--line);border-radius:6px;
  background:rgb(var(--paperhi-rgb)/.6)}
.sb-under>.sb-fold>summary{padding:.72rem .95rem;font-size:var(--fs-sm);letter-spacing:.02em;color:var(--tx)}
.sb-under>.sb-fold[open]>summary{color:var(--gold-d)}
.sb-under>.sb-fold>div{margin:0;padding:0 .95rem .95rem;font-size:var(--fs-s);line-height:1.85;color:var(--tx2)}
/* 折叠里的名录仍是一行一条的密排；搜索框跟着变宽一点，好在一屏里看得下命中数。 */
.sb-under>.sb-fold .atlas-roster{grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr))}

/* ---------- 溢出三处 ----------
   一、数字卡原来是 flex 串成一行的签：254 户那一条有二百字，签就变成一堵墙，
       窄签挤在同一行时 b 与 i 还互相压。改自适配网格，一条一格，文字在格内折行。
   二、十六笔的年份列：1654 / 1656 / 1663 与 1958 / 1970s 都是 nowrap，
       8.4rem 装不下，字尾戳进正文那一列。列加宽、字号收一档（窄屏仍单列，见 640 断点）。
   三、读图版三张图的图注本来就在 figure 内，不另处理。 */
.sb-under .tw-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17.5rem),1fr));
  gap:.45rem;align-items:start;margin:.7rem 0 .9rem}
.sb-under .tw-stats .st{display:block;padding:.5rem .68rem}
.sb-under .tw-stats .st b{display:block;margin-bottom:.12rem;font-size:var(--fs-h3)}
.sb-under .tw-stats .st i{display:block;font-size:var(--fs-2xs);line-height:1.74;letter-spacing:.02em}
@media (min-width:641px){
  .wlog li{grid-template-columns:9.7rem minmax(0,1fr)}
  .wlog b{font-size:var(--fs-b)}
}

/* ================= 卷三 V7：层级与控件收口（V14：底册改住台面之下） ================= */

/* 一、底册这一层 V7 是"整份住进抽屉"，V14 按批注④把抽屉拆了，底册因此搬到台面之下
   那三条折叠里的第一条（#sbRoster）。搬过来要付的一笔账：这一格是纸底，
   抽屉里那套墨底前景（--tx-d / --gold / 那条 .45 的年代小数）在这里全部换了意思，
   所以金色走 --gold-d、年代小数加深到 .72，两条都在下面这几行里点名。
   原来那套"栏头钉住 / 题头让开搜索框 / 底册在自己那一格里滚"的机械全部作废：
   底册不再有自己的滚动容器，跟着页面滚，sticky 反而会把题头浮到别的模块上面。 */
.dr-group{margin:.9rem 0 .3rem;font-family:var(--kai);font-size:var(--fs-2xs);
  letter-spacing:.18em;color:var(--gold-d)}
#sbRoster>.mini,#sbRoster .mini{font-size:var(--fs-2xs);line-height:1.76;margin:.4rem 0 .6rem;color:var(--tx2)}
#sbRoster .atlas-roster button::after{color:rgb(var(--tx-rgb)/.72)}
#sbRoster .atlas-search{width:min(24rem,100%)}

/* 二、字阶层级：引导句原来比正文还小一档（.86 / .9 / 1.06），读起来像脚注。
   V8 再收一步：这一节的辅助带不再各写各的 rem，全部落到 12 / 13 / 15 三个台阶上，
   台阶名就是 --fs-2xs / --fs-s / --fs-sm（见 :root）。 */
section#time .hint{font-size:var(--fs-sm);line-height:1.9;opacity:1;margin:-.1rem 0 1.05rem}
section#time .mini{font-size:var(--fs-sm);line-height:1.84;margin:.72rem 0 0}
section#time .ph-note,section#time .src{font-size:var(--fs-s);opacity:1}
section#time .pc figcaption{font-size:var(--fs-s);line-height:1.68}
section#time .atlas-roster .ad{font-size:var(--fs-s);line-height:1.82}
/* 小标题与上一节的 h2 只差一档，靠字族、字距和上间距把层级拉开 */
section#time h3.sub{font-size:var(--fs-h3);margin:clamp(1.7rem,3.4vw,2.4rem) 0 .5rem}

/* 三、控件与交互态：够得着、分得清。翻页键原来 1.85rem（≈30px），
   低于可点下限；控件条内部分组用一条竖线分开，不再五颗挤成一行。 */
/* V13 起这三条各归其主：翻页键成了轴两端那颗 .tl-arrow，
   控件条的内部分组成了 .ctl 那一副格子，引导句从图例挪进了每格自己的属性名与
   悬停指引那一行。原来的 .tl-ctrl / .pick / .mode / .lg-tip 四条在此一并删掉。 */

/* 四、画布上的标签：纸底（DAY 档画布就是 --paper2）原来那层白底几乎看不见边界，
   字号也压在 .72；抬一档并给一点纸面阴影，让名字浮在城上而不是糊在图上。
   夜读档另有 .atlas-viz.night 那组规则，这里不动它。 */
.al-lab{font-size:var(--fs-2xs);padding:.16rem .46rem;box-shadow:0 1px 5px rgb(var(--ink-rgb)/.16)}

/* ================= 卷三 V9：沙盘归栏 · 图带摊平 · 节头吸附 ================= */

/* ① 沙盘和五块正文面板同栏、同距、同皮肤。
   特异度 section#time .sandbox = (1,1,1)，压得住 1922 的基线和 2192 的 V6 台面色。
   这一改要付的账写在这儿：台框内宽从 1316 收到约 1105，减去抽屉那 21.5rem(344)，
   画布那一列只剩 760 上下；沙盘是绝对定位铺满台框的，所以变小的是可拖转的视口，
   不是组件本身。换来的是这一页只剩一种栏宽、上下各有跟正文一样的 48px 呼吸。 */
section#time .sandbox{max-width:74rem;margin:clamp(2rem,5vw,3rem) auto 0;
  padding:clamp(1.15rem,2.4vw,1.7rem) clamp(1.1rem,2.6vw,1.9rem) clamp(1.6rem,3.4vw,2.4rem);
  border:1px solid var(--line);border-radius:6px;
  background:rgb(var(--paperhi-rgb)/.6);box-shadow:0 8px 26px rgb(var(--ink-rgb)/.07)}

/* ② 两条横带改成自适配网格，一次把图全摊开：
   1105 内宽按 minmax(15.5rem,1fr) + 16.8px 间距算 = 4 格（十一站 4/4/3 三行），
   六件物证走 .pgrid3 的 20rem = 3 格两行，读图版三张各占一格。
   overflow 从 auto 换回 visible：卡里的图注本来就在卡片内，不再需要带内滚。
   只作用于卷三 —— .pstrip/.deck-strip 是全站共用的原语，别页仍按横带读。 */
section#time .pstrip,section#time .deck-strip{display:grid;overflow:visible;
  scroll-snap-type:none;padding-bottom:0;gap:clamp(.7rem,1.5vw,1rem);
  margin:clamp(1.1rem,2.4vw,1.6rem) 0 clamp(.85rem,2vw,1.25rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr))}
section#time .pstrip .pc,section#time .deck-strip>*{flex:none;min-width:0;scroll-snap-align:none}
section#time .pstrip.pgrid3{grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr))}
section#time .pstrip.atlas-srcs{grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
/* 读图版三张是 object-fit:contain + 原比例高，格子一宽（320→357）图就跟着长；
   1603 那张是 1440×1800 的竖幅，给它一个高度上限，免得一块竖wall顶开整节。 */
section#time .pstrip.atlas-srcs .pc img{max-height:16.5rem}

/* ③ 节头进度线的时间轴：geo/region 那条把 --pan 和收紧后的 padding 写在了一起，
   卷三的字面 padding 是 V8 定过的，不能跟，所以单独只补时间轴这一半。 */
section#time .panel.wide{view-timeline:--pan block}

/* ================= 卷四 V2：人文层的六个新原语 =================
   这一页正文密度全站最高，所以原语只做三件事：把"两说并列""一支分成两路"
   "按年摆开"这类结构画成格子，让名录能按级别筛，以及把层头从节的编号系统里
   摘出去（app.js:600 会跳过 .chap-head 里的 h2）。全部走六族三档令牌，不新增色。
   一律 section#culture 作用域：.pair/.chips-lg/.tbl 是全站共用原语。 */

/* ① 层头：比 .sub 轻、比 .panel h2 重，加一道横脊表明"换层了" */
section#culture .chap-head{max-width:74rem;margin:clamp(2.6rem,6vw,4.2rem) auto clamp(1.3rem,3vw,2rem);
  padding-top:clamp(1.1rem,2.6vw,1.7rem);border-top:1px solid var(--line)}
section#culture .chap-head h2{font-family:var(--kai);font-size:clamp(1.5rem,3.4vw,2.05rem);
  letter-spacing:.24em;color:var(--ink2);margin:0 0 .5rem}
section#culture .chap-head .dek{font-size:var(--fs-sm);max-width:44rem}
section#culture .chap-head:first-of-type{border-top:0;margin-top:0}
/* 自查补：人物名册不属于本页 26 节——它是章头，app.js 建 NODES3 时跳过 .chap-head 里的 h2，
   所以这一整块没有任何吸着的东西。390 屏量到名刺带 827px、读数条 42px、正文格 163px，
   合计 1032px 比一屏还高：滚进某一个人的正文时，「在场的是谁 / 共 23 人」已经滚出屏幕，
   翻页翻到第几人只能靠记忆。这里给名册套一层 .perm 当边界，读数条在边界内吸住，
   出得名册自己落回去——不会像直接吸在 section 上那样一路压到后面的面板。
   .perm 只圈名刺带和正文格，章头留在外面：章头一进去就成了父级里第一个 div，
   会被上面那条 :first-of-type 认成"本页第一个层头"而丢掉横脊。 */
section#culture .perm{position:relative}
section#culture .perm>.per-bar{position:sticky;top:calc(var(--stick) - 1px);z-index:4;
  padding:.4rem .7rem;border-top:0;border-radius:5px;box-shadow:0 1px 0 var(--line);
  background:rgb(var(--paperhi-rgb)/.93);backdrop-filter:blur(9px)}

/* ② 两说并列：.pair 原来是双栏图集，这里给它一个文字牌面。
   子元素一律用 > 选中，否则 .side 里正文的 <b> 会被当标题拉成块。 */
section#culture .pair .side{padding:.9rem 1.05rem;border-radius:5px;border:1px solid var(--line);
  border-left:3px solid var(--cinnabar);background:rgb(var(--paperhi-rgb)/.6)}
section#culture .pair .side> b{display:block;font-family:var(--serif);font-size:var(--fs-h3);
  letter-spacing:.02em;color:var(--ink2);margin-bottom:.4rem}
section#culture .pair .side p{margin:0;font-size:var(--fs-sm);line-height:1.85;color:var(--tx2)}

/* ③ 一支分成两路（汲冢书古本／今本） */
section#culture .lineage{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:.8rem;margin:1rem 0 .3rem}
section#culture .lg-col{padding:.85rem 1rem;border:1px solid var(--line);border-radius:5px;
  background:rgb(var(--paperhi-rgb)/.55)}
section#culture .lg-col> b{display:block;font-family:var(--kai);letter-spacing:.16em;
  font-size:var(--fs-sm);color:var(--gold-d)}
section#culture .lg-col> em{display:block;font-style:normal;font-size:var(--fs-sm);line-height:1.85;
  color:var(--tx2);margin-top:.4rem}
section#culture .lg-col> i{display:block;font-style:normal;font-size:var(--fs-s);color:var(--cinnabar);
  margin-top:.55rem;padding-top:.5rem;border-top:1px dashed var(--line)}

/* ④ 数字牌：把"可核 / 不可核"摊成能一眼数清的格子（卷五、卷六也要用，故并页） */
:is(section#culture,section#traffic,section#money) .numcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr));
  gap:.7rem;margin:1rem 0 .4rem}
:is(section#culture,section#traffic,section#money) .nc{padding:.7rem .85rem;border-radius:5px;border:1px solid var(--line);
  background:rgb(var(--ink3-rgb)/.05);display:grid;gap:.25rem;align-content:start}
:is(section#culture,section#traffic,section#money) .nc> b{font-family:var(--serif);font-size:clamp(1.35rem,3vw,1.85rem);line-height:1.15;
  color:var(--cinnabar-d);letter-spacing:.02em}
:is(section#culture,section#traffic,section#money) .nc> em{font-style:normal;font-size:var(--fs-2xs);line-height:1.6;color:var(--tx2)}

/* ⑤ 碑面：左栏刻文、右栏账。两块底色分开，读的人不必猜哪边是原文 */
section#culture .stele{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
  gap:.9rem;margin:1rem 0}
section#culture .stl-l{font-family:var(--kai);font-size:var(--fs-sm);line-height:2.05;color:var(--ink);
  padding:1rem 1.1rem;border-radius:4px;border:1px solid rgb(var(--ink-rgb)/.16);
  background:rgb(var(--ink-rgb)/.045)}
section#culture .stl-r{font-size:var(--fs-sm);line-height:1.95;color:var(--tx2);padding:.2rem 0}
section#culture .stele b{font-family:var(--serif);font-weight:700;color:var(--ink2);letter-spacing:.02em}
section#culture .stl-l b{color:var(--cinnabar-d);margin-right:.45rem}

/* ⑥ 五教并陈：一条建制线一格 */
section#culture .creed{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:.75rem;margin:1.2rem 0 .3rem}
section#culture .cd{padding:.9rem 1rem;border-radius:5px;display:grid;gap:.4rem;align-content:start;
  border:1px solid var(--line);border-top:2px solid rgb(var(--river-rgb)/.55);
  background:rgb(var(--paperhi-rgb)/.55)}
section#culture .cd> b{font-family:var(--kai);letter-spacing:.18em;font-size:var(--fs-sm);color:var(--river-d)}
section#culture .cd> em{font-style:normal;font-size:var(--fs-2xs);line-height:1.75;color:var(--tx)}
section#culture .cd> span{font-size:var(--fs-2xs);line-height:1.65;color:var(--tx2);
  padding-top:.45rem;border-top:1px dashed var(--line)}

/* ⑦ 年历（V4 换形：原 .seas 四格 → 十二格月历）：空格必须明写"未检索到"，
     不许用底色把没查到的月份伪装成"和平无事" */
section#culture .ycal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.5rem;margin:.7rem 0 .2rem}
section#culture .yc{display:grid;gap:.26rem;align-content:start;padding:.6rem .7rem .65rem;
  border:1px solid var(--line);border-radius:5px;background:rgb(var(--paper2-rgb)/.3)}
section#culture .yc> i{font-family:var(--kai);font-size:var(--fs-2xs);letter-spacing:.12em;color:var(--tx2)}
section#culture .yc> b{font-family:var(--serif);font-size:var(--fs-sm);line-height:1.45;color:var(--ink2)}
section#culture .yc> em{font-style:normal;font-size:var(--fs-2xs);line-height:1.7;color:var(--tx2)}
section#culture .yc> s{text-decoration:none;font-size:var(--fs-2xs);line-height:1.6;color:var(--cinnabar-d);
  padding-top:.26rem;border-top:1px dashed rgb(var(--cinn-rgb)/.38)}
section#culture .yc.has{background:rgb(var(--gold-rgb)/.13);border-color:rgb(var(--gold-rgb)/.42)}
/* 填了的格子靠底色认，不靠字色：金色月名量到只有 4.32:1，压不住 12px 小字，
   所以改成同深浅但加粗，底色已经是金。 */
section#culture .yc.has> i{font-weight:700}
section#culture .yc:not(.has)> s{padding-top:0;border-top:0;color:var(--tx2)}
section#culture .yc.band{grid-column:span 2;background:rgb(var(--cinn-rgb)/.08);
  border-color:rgb(var(--cinn-rgb)/.3)}
section#culture .yc.note{grid-column:span 2;background:none;border-style:dashed}
section#culture .yc.note u{text-decoration:none;font-weight:700;color:var(--gold-d)}
section#culture .yc.note s{text-decoration:none;color:var(--cinnabar-d)}
/* 月历换档：1440 四列、1000 三列、720 两列。band/note 一到窄档就通栏，
   不然 3 列 / 2 列除不尽 14 格，末尾会留一个洞。 */
@media (max-width:1000px){
  section#culture .ycal{grid-template-columns:repeat(3,minmax(0,1fr))}
  section#culture .yc.band,section#culture .yc.note{grid-column:1/-1}
}
@media (max-width:720px){section#culture .ycal{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ⑧ 名录筛选：点级别只改可见行，行本身全在静态 DOM 里（SEO 与可核性都在） */
:is(section#culture,section#traffic) [data-fltbar]{margin:.3rem 0 .9rem}
:is(section#culture,section#traffic) [data-flt].off{display:none}
:is(section#culture,section#traffic) .flt-count{font-family:var(--serif);font-style:normal;color:var(--cinnabar-d);
  padding:0 .18rem}
:is(section#culture,section#traffic) .tbl tr.hi[data-flt]{background:rgb(var(--gold-rgb)/.17)}

@media (max-width:640px){
  section#culture .stele{grid-template-columns:1fr}
  section#culture .chap-head h2{letter-spacing:.14em}
}

/* ================= 卷四 V3：一处真 BUG + 整页缩到能读完 =================
   ①「现有的一些内容和背景颜色一致，这是一个错误」——查实：.chain 是给墨底面板做的
     原语（字色 --tx-d），这一页 29 节全是纸底，六处链条共 69 个节点解算出 1.07:1，
     等于看不见。原语已按底翻档（纸底默认、.panel-glass/.dark 才回到宣纸暖白，
     卷六那两处用法不动）。这一页剩下的纸底不合格项都是同一类：强调色用了默认档
     金色（2.69:1），辅助字用了 opacity 稀释（.hint 3.61 / .foldbtn em 2.78 /
     .sec-no i 2.27）。所以这里只做两件事——把页内的 --gold 指到 -d 档、
     --tx2 压深一档，再把页内的 opacity 稀释全部取消。
   ② 这一页量出来 40,607px，是其余八卷的 1.2–1.7 倍，滑块因此特别短。
     缩的三条杠杆按收益排：图集一律横滑（见 HTML，12 处 .pcards→.pstrip，省 ≈8,100px，
     顺带满足"模块统一"）、面板内边距与节间距收紧（省 ≈2,600px）、
     名录长表收进定高窗口（省 ≈900px，行仍全在静态 DOM 里）。 */
section#culture{--gold:#8a6524;--tx2:#3f5057}
section#culture .hint,section#culture .src,section#culture .ph-note,
section#culture .facts em,section#culture .foldbtn em,section#culture .sec-no i,
section#culture .rel a em,section#culture .dishes em{opacity:1}

/* 面板内边距：原来上下 2.4rem、左右 2.4rem，29 节累下来就是六屏空气 */
section#culture .panel{padding:clamp(1rem,2.1vw,1.45rem) clamp(1rem,2.2vw,1.55rem)}
section#culture .panel.wide{margin-top:clamp(.9rem,2vw,1.3rem)}
section#culture .panel p{margin-bottom:.6em}
section#culture .hint{margin:-.1rem 0 .55rem}
section#culture .mini{margin-top:.45rem}
section#culture .chap-head{margin:clamp(1.4rem,3vw,2rem) auto clamp(.65rem,1.5vw,.9rem);
  padding-top:clamp(.7rem,1.6vw,1rem)}
section#culture h3.sub{margin:clamp(.95rem,2vw,1.3rem) 0 .3rem}
section#culture .rel{margin-top:.5rem;padding-top:.42rem}
section#culture .src{margin-top:clamp(1.1rem,2.6vw,1.6rem);padding-top:.6rem}
/* 横滑带：一条贴一条，不留整屏宽的空白 */
section#culture .pstrip{gap:.55rem;margin:.7rem 0 .15rem;padding-bottom:.5rem}
section#culture .pcards{margin:.7rem 0 .2rem}
section#culture .pair{margin:.7rem 0 .15rem}
section#culture .lineage,section#culture .numcards,section#culture .stele,
section#culture .creed,section#culture .halves{margin:.7rem 0 .15rem}
section#culture .sites4{gap:.55rem}
section#culture .tbl-2{gap:.85rem}
/* 名录：定高窗口内滚。行数一行不减，只是不再摊成 1,354px 的长条 */
section#culture .tbl-win{max-height:27rem;overflow:auto;border:1px solid var(--line);
  border-radius:5px;background:rgb(var(--paperhi-rgb)/.5)}
section#culture .tbl-win .tbl{border-top:0}
@media (max-width:760px){section#culture .tbl-win{max-height:none;overflow:visible;border:0}}

/* ================= 卷四 V3b：五条批注 =================
   ①「名字的模块吸附没做到」：这一页 26 个面板标题此前一个 .pin 都没包（卷一 9、卷二 8、
     卷三 5，卷四 0），所以滚起来没有任何节头在场。吸附选择器已把 #culture 并进去，
     标题全部换成 .pin 壳，节号 chip 由生成器落在壳内，与其余三卷同构。
   ③「有的模块大、有的模块小 / 两侧留白不够」：查实不是错觉——.panel 根本不限宽，
     量出来跟着章节内容盒走（1440 视口 = 1331px），而 .panel.wide 限 74rem = 1184px。
     于是"窄"面板反而比"宽"面板还宽出 147px，两侧只剩 54px。这里把本页所有顶层面板
     一律收到 74rem、居中，和已有的 .grid-2、名册、底册同一条竖线，两侧留白变成 128px。
     只选 > 直接子元素：.grid-2 里那 8 个面板是网格项，给它们 auto 外边距会取消
     stretch 对齐、双双缩成内容宽。
   ⑤「横向滚动的东西没加相对应的空间」：带子被面板边线一刀切断时看不出右边还剩几张，
     原生横向滚动条又压在最末一张的图注上。补三件——右端一道渐隐（只在真滚得动时挂）、
     条下一根与 scrollLeft 联动的进度线、以及一个"第 X–Y 张 / 共 N 张"读数。
     进度线是带子的兄弟节点，画在带子外面，所以带子自身高度一寸没涨。 */
section#culture > .panel{max-width:74rem;margin:clamp(.9rem,2vw,1.3rem) auto 0}
/* 自查补：卷四的节头吸住了，但节头里那条进度线是死的——量到 26 条全部
   transform 恒为 scaleX(1)，因为在 1402px 高的面板里从 5% 滚到 95% 也不变。
   根因不在 .pinline 那条规则，在时间轴：--pan 只在 geo/region（1633 行）和
   time 的 .panel.wide（2542 行）上声明过，卷四的面板一个都没有，
   animation-timeline:--pan 认不到名字就退化成常亮。这里按量到的实情补：
   本页装 .pin 的盒子全是 .panel（V4 并节之后 13 个，且个个兼 .wide），所以只补这一条。 */
section#culture .panel{view-timeline:--pan block}
.pstrip.ps-more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.6rem),rgb(0 0 0/0));
  mask-image:linear-gradient(90deg,#000 calc(100% - 2.6rem),rgb(0 0 0/0))}
.psrail{display:flex;align-items:center;gap:.7rem;margin:.15rem 0 .55rem}
.pstrack{position:relative;flex:1 1 auto;height:2px;border-radius:2px;
  background:rgb(var(--gold-rgb)/.26);overflow:hidden}
.pstrack b{display:block;height:100%;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,var(--cinnabar),var(--gold));transition:transform .12s linear}
.pstag{flex:0 0 auto;font-family:var(--kai);font-size:.74rem;letter-spacing:.08em;
  color:var(--tx2);white-space:nowrap}
/* 挂不进名册的窄屏：读数留着，进度线让它自己占满 */
@media (max-width:520px){.psrail{gap:.5rem}.pstag{font-size:.7rem}}
@media (prefers-reduced-motion:reduce){.pstrack b{transition:none}}

/* V3b 补：把 --gold 指到 -d 档之后，凡是"金底 + 深字"的悬停态都翻了脸——
   #8a6524 底压 #16262c 字只有 2.94:1。这两处按下/悬停时改成浅字。
   .sidetop/.sideledger 挂在 body 上、不在 section#culture 里，只能借 :has() 认页面；
   不支持 :has() 的浏览器退回原状（一个悬停态，不影响可读正文）。 */
section#culture a.cite:hover{background:var(--gold);border-color:var(--gold);color:var(--paper-hi)}
body:has(section#culture) .sidetop:hover,body:has(section#culture) .sidetop:focus-visible,
body:has(section#culture) .sideledger:hover,body:has(section#culture) .sideledger:focus-visible{color:var(--paper-hi)}
body:has(section#culture) .sidetop:hover .ar,body:has(section#culture) .sidetop:focus-visible .ar,
body:has(section#culture) .sideledger:hover .ar,body:has(section#culture) .sideledger:focus-visible .ar{color:var(--paper-hi)}

/* ============ 卷四 V4：26 节并为 13 节之后的五处新形式 ============
   并节不是删内容：原 13 个独立成节的标题降成 h3.part / h4.sub 留在原位，
   旧节名各留一个 <span class="t-anchor" id="t-旧节名"> 静态锚点，
   所以 depth.js / data.html / index.html / region.html 的深链一条都不用改。 */

/* ① 层级：h2（吸附台头）> h3.part（并进来的原节）> h4.sub（节内小标题）
   卷五 V2 起共用：本页「线上的样子」五块牌子与「城里的那一段」用的是同一套层级。 */
:is(section#culture,section#traffic) h3.part{position:relative;padding-left:.72rem;margin:clamp(1.05rem,2.3vw,1.45rem) 0 .35rem;
  font-family:var(--serif);font-size:1.06rem;font-weight:700;letter-spacing:.05em;color:var(--ink2)}
:is(section#culture,section#traffic) h3.part::before{content:"";position:absolute;left:0;top:.26em;bottom:.22em;width:3px;
  border-radius:2px;background:linear-gradient(180deg,var(--gold),rgb(var(--gold-rgb)/.22))}
:is(section#culture,section#traffic) .pane>h3.part:first-of-type,:is(section#culture,section#traffic) .half>h3.part:first-of-type{margin-top:.1rem}
:is(section#culture,section#traffic) h4.sub{font-family:var(--kai);font-weight:600;font-size:var(--fs-s);letter-spacing:.06em;
  color:var(--gold-d);margin:clamp(.85rem,1.9vw,1.15rem) 0 .3rem}

/* ② 四块牌子：一处标签台换四块，标签沿用全站 .chips-lg，选中态从水蓝改成本页金
   （卷五是五块：普速 / 高铁 / 高速 / 国省道 / 农村与山区） */
:is(section#culture,section#traffic) .pane{margin:.55rem 0 .7rem;padding:clamp(.7rem,1.6vw,1rem) clamp(.7rem,1.7vw,1.05rem);
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 5px 5px 0;
  background:rgb(var(--paperhi-rgb)/.62)}
:is(section#culture,section#traffic) .chips-lg button:hover{border-color:var(--gold-d);color:var(--gold-d)}
:is(section#culture,section#traffic) .chips-lg button.act{background:rgb(var(--gold-rgb)/.2);border-color:var(--gold-d);color:var(--ink2)}

/* ③ 两本账 / 收尾两段：并排两栏，读起来是"对照"而不是"又来一屏" */
:is(section#culture,section#traffic) .halves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.7rem,1.8vw,1.1rem);align-items:start}
:is(section#culture,section#traffic) .half{padding:clamp(.75rem,1.7vw,1.05rem);border:1px solid var(--line);border-radius:5px;
  background:rgb(var(--paperhi-rgb)/.55)}
@media (max-width:900px){:is(section#culture,section#traffic) .halves{grid-template-columns:minmax(0,1fr)}}

/* ④ 诗文八条：横滑诗句带（原 ul.facts 八行 → 一轴能推的短帖） */
section#culture .pstrip.poems{align-items:stretch}
section#culture .pstrip.poems .pm{flex:0 0 clamp(13.5rem,30vw,17.5rem);display:grid;gap:.3rem;
  align-content:start;padding:.7rem .8rem .75rem;border-top:2px solid var(--gold);
  background:rgb(var(--paperhi-rgb)/.78)}
section#culture .pm-y{font-family:var(--kai);font-size:var(--fs-2xs);letter-spacing:.09em;color:var(--cinnabar-d)}
section#culture .pm-t{font-family:var(--serif);font-size:var(--fs-h3);font-weight:600;line-height:1.5;color:var(--ink2)}
section#culture .pm-n{font-style:normal;font-size:var(--fs-2xs);line-height:1.75;color:var(--tx2);
  padding-top:.3rem;border-top:1px dashed var(--line)}
section#culture .pm-n b{font-weight:700;color:var(--cinnabar-d)}

/* ⑤ 迁民碑三个数：三个数先摊在台面上，点开才给算法——数字是主角，解释收进 details */
section#culture .tnum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin:.7rem 0 .15rem}
section#culture .tnum details{border:1px solid var(--line);border-radius:5px;
  background:rgb(var(--gold-rgb)/.1)}
section#culture .tnum summary{display:flex;align-items:baseline;gap:.5rem;padding:.6rem .75rem;
  cursor:var(--cur-hand);list-style:none}
section#culture .tnum summary::-webkit-details-marker{display:none}
section#culture .tnum summary>b{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2rem);line-height:1;
  color:var(--cinnabar-d);font-variant-numeric:tabular-nums}
section#culture .tnum summary>i{font-style:normal;font-size:var(--fs-2xs);letter-spacing:.06em;color:var(--tx2)}
section#culture .tnum summary::after{content:"＋";margin-left:auto;align-self:center;
  font-family:var(--serif);color:var(--gold-d)}
section#culture .tnum details[open] summary::after{content:"－"}
section#culture .tnum summary:focus-visible{outline:2px solid var(--gold-d);outline-offset:2px;border-radius:4px}
section#culture .tnum details>div{margin:0 .75rem .7rem;padding:.5rem 0 0;font-size:var(--fs-2xs);
  line-height:1.8;color:var(--tx2);border-top:1px dashed var(--line)}
section#culture .tnum details>div b{font-weight:700;color:var(--cinnabar-d)}
@media (max-width:700px){section#culture .tnum{grid-template-columns:1fr}}

/* ============ 卷四 V5：06「两本账」重排 ============
   改之前量到的实情（1440 视口）：两笔账装在 .halves 左右两栏里，林姓那栏 1719px 高、
   徐氏那栏只有 803px，短栏底下空出一块 916×557 的死区；两栏各只有 522px 宽，
   里面 12 行 .facts 平均每行 150px，还是文字墙；两张图证那条横带挂着进度轨却滚不动
   （scrollWidth 522 == 可视宽 522），五张图那条要横滚 793px 才看完；.numcards 的四格
   在 522px 里排成 3+1，又留一格空。
   这版：①「并排放」不再靠两栏，改成上下两幅满幅、中间一道骑缝；
   ② 林姓那本画成一座塔——四层自上而下逐层放宽，第五层塔基是空的（虚线 + 斜纹），
      每层右端一枚年代，让"塔基查不到"变成看得见的形状；
   ③ 反证不缩进塔里，单列一批三条，本站的判词占满末行；
   ④ 徐氏那块改成一枚定牌（金底）加三块划掉的旧牌，"必须区分"与"未检索到"另用底色；
   ⑤ 两组图都换成六栏 mosaic：五张图 2+2+2 / 3+3 两行铺满不留洞，
      两张图证按自身比例展开，竖碑不裁字。
   正文一行没减：原来 .facts 里的每句都搬进了 .str-b / .led-cx / .adr-* 的对应位置。 */

/* ⓪ 一本 = 一整幅；.led 自己就是容器，窄档按它的宽度切，不按视口切 */
section#culture .led{container-type:inline-size;padding:.2rem 0 .3rem}
section#culture .led>h3.part:first-of-type{margin-top:.2rem}
section#culture .led>.mini{max-width:66rem}
section#culture .led-tag{display:flex;align-items:baseline;gap:.6rem;margin:0 0 .5rem;
  padding-bottom:.42rem;border-bottom:1px solid var(--line)}
section#culture .led-tag>i{flex:0 0 auto;font-style:normal;font-family:var(--kai);font-weight:700;
  font-size:var(--fs-2xs);letter-spacing:.22em;color:var(--paper-hi);background:var(--gold-d);
  padding:.2rem .52rem .24rem;border-radius:2px}
section#culture .led-tag>span{font-family:var(--kai);font-size:var(--fs-sm);letter-spacing:.18em;
  color:var(--gold-d)}

/* ① 塔：--in 是这一层左右各收进去的量，逐层放宽，到塔基收尽 */
section#culture .tower{list-style:none;margin:.6rem 0 .2rem;padding:0;display:grid;gap:.4rem}
section#culture .str{--in:0%;margin-inline:var(--in);min-width:0;display:grid;
  grid-template-columns:minmax(6.2rem,8.4rem) minmax(0,1fr) auto;gap:.4rem .85rem;align-items:baseline;
  padding:.55rem .85rem .6rem 1rem;border-top:1px solid rgb(var(--gold-rgb)/.52);
  border-left:3px solid var(--gold)}
section#culture .tower .str:nth-child(1){--in:12%}
section#culture .tower .str:nth-child(2){--in:9%}
section#culture .tower .str:nth-child(3){--in:6%}
section#culture .tower .str:nth-child(4){--in:3%}
section#culture .str-k{font-family:var(--kai);font-size:var(--fs-2xs);letter-spacing:.12em;
  line-height:1.6;color:var(--gold-d)}
section#culture .str-k>i{display:block;font-style:normal;letter-spacing:.02em;color:var(--tx2);
  margin-top:.12rem}
section#culture .str-b{min-width:0;font-size:var(--fs-sm);line-height:1.8}
section#culture .str-b>b{display:block;font-weight:700;letter-spacing:.01em;color:var(--ink2)}
section#culture .str-b>em{display:block;font-style:normal;font-size:var(--fs-2xs);line-height:1.75;
  color:var(--tx2);margin-top:.14rem}
section#culture .str-b em b{font-weight:700;color:var(--cinnabar-d)}
section#culture .str>time{align-self:start;padding-left:.6rem;white-space:nowrap;
  font-family:var(--serif);font-size:var(--fs-2xs);letter-spacing:.06em;color:var(--gold-d);
  border-left:1px solid rgb(var(--gold-rgb)/.36)}
/* 塔基：这一层没有实物，所以画成一块空的底座——四边虚线 + 斜纹，左边一道朱线 */
section#culture .str.base{margin-top:.35rem;border:1px dashed rgb(var(--cinn-rgb)/.55);
  border-left:3px solid var(--cinnabar);
  background:repeating-linear-gradient(135deg,rgb(var(--cinn-rgb)/.09) 0 6px,rgb(var(--cinn-rgb)/0) 6px 13px)}
section#culture .str.base .str-k,section#culture .str.base .str-b>b,section#culture .str.base>time{
  color:var(--cinnabar-d)}
section#culture .str.base .str-k>i{color:var(--tx2)}
section#culture .str.base>time{border-left-color:rgb(var(--cinn-rgb)/.42)}

/* ② 反证：三条独立成批，不缩进塔里；判词占满末行 */
section#culture .led-cx{list-style:none;margin:.3rem 0 .5rem;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(.9rem,2.6vw,2rem)}
section#culture .led-cx>li{min-width:0;padding:.5rem 0 .55rem;border-top:1px dashed var(--line);
  font-size:var(--fs-sm);line-height:1.8}
section#culture .led-cx .cx-k{display:block;margin-bottom:.16rem;font-family:var(--kai);
  font-size:var(--fs-2xs);letter-spacing:.14em;color:var(--cinnabar-d)}
section#culture .led-cx>li>b{font-weight:700;color:var(--ink2)}
section#culture .led-cx>li>b b{font-weight:700;color:var(--cinnabar-d)}
section#culture .led-cx>li>em{display:block;margin-top:.12rem;font-style:normal;
  font-size:var(--fs-2xs);line-height:1.72;color:var(--tx2)}
section#culture .led-cx>li em b{font-weight:700;color:var(--cinnabar-d)}
section#culture .led-cx>.verdict{grid-column:1/-1;margin-top:.4rem;padding:.62rem .85rem .68rem;
  border:1px solid rgb(var(--cinn-rgb)/.44);border-left:3px solid var(--cinnabar);
  border-radius:0 4px 4px 0;background:rgb(var(--cinn-rgb)/.07);line-height:1.85}

/* ③ 读数：四个数摊成一行仪表读数——flex 末项自动铺满，不会排成 3+1 空一格 */
section#culture .led-ro{list-style:none;margin:.8rem 0 .3rem;padding:.45rem 0;display:flex;
  flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section#culture .led-ro>li{flex:1 1 9.5rem;min-width:0;display:grid;gap:.14rem;align-content:start;
  padding:.1rem .75rem;border-left:1px solid var(--line)}
section#culture .led-ro>li:first-child{padding-left:0;border-left:0}
section#culture .led-ro>li>b{font-family:var(--serif);font-size:clamp(1.2rem,2.6vw,1.6rem);
  line-height:1.2;letter-spacing:.01em;color:var(--cinnabar-d);font-variant-numeric:tabular-nums}
section#culture .led-ro>li>i{font-style:normal;font-size:var(--fs-2xs);line-height:1.65;color:var(--tx2)}
section#culture .led-ro>.void{background:repeating-linear-gradient(135deg,rgb(var(--cinn-rgb)/.09) 0 6px,
  rgb(var(--cinn-rgb)/0) 6px 13px)}
section#culture .led-ro>.void>b{font-size:clamp(1rem,2.2vw,1.3rem)}

/* ④ 骑缝：两本之间的一道装订缝，说的是"各记各的、谁也别盖谁" */
section#culture .led-seam{display:flex;align-items:center;gap:clamp(.7rem,2vw,1.3rem);
  margin:clamp(1.4rem,3.4vw,2.2rem) 0 .2rem}
section#culture .led-seam::before,section#culture .led-seam::after{content:"";flex:1 1 0;height:1px;
  background:linear-gradient(90deg,rgb(var(--gold-rgb)/0),rgb(var(--gold-rgb)/.62),rgb(var(--gold-rgb)/0))}
section#culture .led-seam>span{flex:0 0 auto;padding:.2rem .75rem;text-align:center;
  font-family:var(--kai);font-size:var(--fs-2xs);letter-spacing:.16em;color:var(--tx2);
  border:1px dashed rgb(var(--gold-rgb)/.6);border-radius:2px}

/* ⑤ 定牌与旧牌：一枚正的、三块划掉的，对错不用再说一遍 */
section#culture .led-adr{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,4fr);
  gap:clamp(.7rem,1.9vw,1.2rem);align-items:stretch;margin:.65rem 0 .3rem}
section#culture .adr-right{min-width:0;display:flex;flex-direction:column;padding:.85rem .95rem .95rem;
  border-radius:4px;border:1px solid rgb(var(--gold-rgb)/.62);border-top:3px solid var(--gold-d);
  background:linear-gradient(180deg,rgb(var(--gold-rgb)/.22),rgb(var(--gold-rgb)/.07))}
section#culture .adr-k{display:block;margin-bottom:.32rem;font-family:var(--kai);font-weight:700;
  font-size:var(--fs-2xs);letter-spacing:.18em;color:var(--ink2)}
section#culture .adr-right>b{display:block;font-family:var(--serif);font-weight:700;
  font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.5;letter-spacing:.02em;color:var(--ink2)}
section#culture .adr-right p{margin:.5rem 0 0;font-size:var(--fs-2xs);line-height:1.9;color:var(--tx2)}
section#culture .adr-right p b{font-weight:700;color:var(--ink2)}
section#culture .adr-right p.adr-note{margin-top:auto;padding-top:.55rem;
  border-top:1px dashed rgb(var(--gold-rgb)/.55)}
section#culture .adr-wrong{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(.5rem,1.4vw,.8rem);align-content:start}
section#culture .adr-wrong>li{grid-column:span 2;min-width:0;padding:.6rem .72rem .66rem;
  border:1px dashed rgb(var(--cinn-rgb)/.48);border-radius:0 4px 4px 0;
  background:rgb(var(--cinn-rgb)/.05);font-size:var(--fs-s);line-height:1.7}
section#culture .adr-wrong .aw-k{display:block;margin-bottom:.2rem;font-family:var(--kai);
  font-size:var(--fs-2xs);letter-spacing:.12em;color:var(--cinnabar-d)}
section#culture .adr-wrong>li>b{display:block;font-weight:700;color:var(--tx2);
  text-decoration:line-through;text-decoration-color:var(--cinnabar);text-decoration-thickness:1.5px}
section#culture .adr-wrong>li>i{display:block;margin-top:.22rem;font-style:normal;
  font-size:var(--fs-2xs);line-height:1.7;color:var(--tx2)}
/* 这两条不是"说错的"，一条是别处、一条是查不到，所以换水蓝底、不划线 */
section#culture .adr-wrong>.other,section#culture .adr-wrong>.void{grid-column:span 3;
  border-style:solid;border-color:rgb(var(--river-rgb)/.45);background:rgb(var(--river-rgb)/.07)}
section#culture .adr-wrong>.other .aw-k,section#culture .adr-wrong>.other>b{color:var(--river-d)}
section#culture .adr-wrong>.other>b{text-decoration:none;font-family:var(--serif);font-size:var(--fs-sm)}
section#culture .adr-wrong>.other>b b{color:var(--river-d)}
section#culture .adr-wrong>.void{background:repeating-linear-gradient(135deg,rgb(var(--river-rgb)/.1) 0 6px,
  rgb(var(--river-rgb)/0) 6px 13px)}
section#culture .adr-wrong>.void .aw-k{color:var(--river-d)}
section#culture .adr-wrong>.void>b{color:var(--cinnabar-d);text-decoration:none;
  font-family:var(--serif);font-size:var(--fs-sm)}

/* ⑥ 两张图证：V5 我曾给它们另开一套"不限高 + contain 保碑面"的排法，
   实测下来这是全站唯一超出图卡上限的块（626px vs 其他 12 节一律 216–256px），
   占了本节 39% 的高度。V6 改回交还给 .prow 定行高机制：横竖各占半栏、
   cover 裁切、图注压在图上，与名册、底册、其余图带同一条竖线和同一个行高。
   竖碑被切的是下半截，取上偏保住碑额与「宣圣真笔」题字；完整碑面进灯箱看。 */
section#culture .led-figs{margin:.9rem 0 .35rem}
/* 类名别再叫 .stele：本页 2599 行那个 .stele 是"竖碑条文网格"，
   同名会把 display:grid + margin 拽进图卡，实测两张卡因此一高一矮。 */
section#culture .led-figs>.upright>img{object-position:center 14%}

/* ⑦ 五张图那条：从横滚 793px 改成两行铺满——2+2+2 接 3+3，六栏正好填满 */
section#culture .led-strip>.pc[data-sp="2"]{grid-column:span 2}

/* 窄档一律按 .led 的宽度切（容器查询），不是按视口切 */
@container (max-width:48rem){
  section#culture .led-cx{grid-template-columns:minmax(0,1fr)}
  section#culture .led-adr{grid-template-columns:minmax(0,1fr)}
  section#culture .adr-wrong>li,section#culture .adr-wrong>.other{grid-column:span 3}
  section#culture .adr-wrong>li:last-child{grid-column:span 6}
  section#culture .led-strip>.pc{grid-column:span 2}
  section#culture .led-strip>.pc[data-sp="2"]{grid-column:span 2}
  section#culture .led-strip>.pc:last-child{grid-column:span 4}
}
@container (max-width:34rem){
  section#culture .tower .str:nth-child(n){--in:0%}
  section#culture .str{grid-template-columns:minmax(0,1fr) auto;row-gap:.22rem;padding:.6rem .7rem .66rem}
  section#culture .str-k{grid-column:1/-1}
  section#culture .adr-wrong>li,section#culture .adr-wrong>.other,
  section#culture .adr-wrong>.void,section#culture .adr-wrong>li:last-child{grid-column:span 6}
  /* 最窄一档整条改成竖着摞：六栏留着，每张图占满 1/-1，
     省得 span 3 掉进一列网格里凭空撑出两条隐式列、把版面顶出横向溢出。 */
  section#culture .led-strip{grid-template-columns:minmax(0,1fr);--rh:clamp(8rem,44cqw,11.5rem)}
  section#culture .led-strip>.pc,section#culture .led-strip>.pc[data-sp="2"],
  section#culture .led-strip>.pc:last-child{grid-column:1/-1}
}

/* ================= 卷五 V2：节头在自己那一节的上下区间里浮动 =================
   这一页原本是全站唯一没接上滚动机制的正文页，两处都是缺项不是写错：
   ① .pin 不在 sticky 组里（见 1741/1748 行），所以节头跟着正文一起滚走；
   ② panel 没声明 view-timeline:--pan，而 .pinline 的 animation-timeline:--pan
      找不到锚就静默停在 scaleX(0)——不报错、不显示，那条金线一直不长度。
   container-type 一起补上：.prow 的行高按 22cqw 算，没有它图带会照视口宽度排、
   在窄面板里顶出横向溢出（卷四 V4 就是这么翻的车）。 */
section#traffic .panel{padding:clamp(1rem,2.1vw,1.45rem) clamp(1rem,2.2vw,1.55rem);
  container-type:inline-size;view-timeline:--pan block}
section#traffic .panel.wide{margin-top:clamp(.9rem,2vw,1.3rem)}
section#traffic .hint{margin:-.1rem 0 .55rem}
section#traffic .mini{margin-top:.45rem}
section#traffic h3.sub{margin:clamp(.95rem,2vw,1.3rem) 0 .3rem}
section#traffic .numcards,section#traffic .halves,section#traffic .chrono{margin:.75rem 0 .2rem}
section#traffic .prow{margin:.9rem 0 .25rem}

/* 对比度与卷四同一条修：默认 --gold 在纸底只有 2.69:1，本页 .sec-no / .bullets
   的圆点 / .pinline 右端都吃它，用得更密，所以同样指到 -d 档并取消 opacity 稀释。 */
section#traffic{--gold:#8a6524;--tx2:#3f5057}
section#traffic .hint,section#traffic .src,section#traffic .ph-note,
section#traffic .facts em,section#traffic .foldbtn em,section#traffic .sec-no i,
section#traffic .rel a em,section#traffic .cmp-note{opacity:1}

/* 主题化交互：本页每一块都挂 data-lk（ln: 线路 / nd: 节点），悬停即在网络图上
   点亮那条线。原来的反馈只有 .pc.hi 与 tr.hi 两个底色，扩到数字牌、账行、
   时间线——加一道朱色左轨，读起来就是"这根线上的一站被标出来了"。
   图卡自己的 cursor:zoom-in（1232 行）不动，指针只在能点的行上变手型。 */
section#traffic tr[data-lk],section#traffic .nc[data-lk],
section#traffic .chrono li[data-lk],section#traffic .facts li[data-lk]{cursor:var(--cur-hand)}
section#traffic .nc.hi,section#traffic .half.hi,section#traffic .facts li.hi,
section#traffic .bullets li.hi,section#traffic .chrono li.hi{
  background:rgb(var(--gold-rgb)/.17);box-shadow:inset 3px 0 0 var(--cinnabar)}
/* 时间线卡片被点亮时，圆点同步换成朱色，与图上线路加粗同一拍 */
section#traffic .chrono li.hi::before{background:var(--cinnabar)}
section#traffic .chrono li.hi{border-color:rgb(var(--cinn-rgb)/.5)}

/* 层头 / 呼吸：数值与卷四 2627–2632、2753–2763 那几行取同一套，两页并排看不是两套版式。
   这里的 .chap-head 不写 :first-of-type 归零——本页第一个 div 是 #rollHero，
   三个层头都不是"父级里第一个 div"，横脊会全部保住，正是想要的。 */
section#traffic .panel p{margin-bottom:.6em}
section#traffic .chap-head{max-width:74rem;margin:clamp(1.4rem,3vw,2rem) auto clamp(.65rem,1.5vw,.9rem);
  padding-top:clamp(.7rem,1.6vw,1rem);border-top:1px solid var(--line)}
section#traffic .chap-head h2{font-family:var(--kai);font-size:clamp(1.5rem,3.4vw,2.05rem);
  letter-spacing:.24em;color:var(--ink2);margin:0 0 .5rem}
section#traffic .chap-head .dek{font-size:var(--fs-sm);max-width:44rem}
section#traffic .rel{margin-top:.5rem;padding-top:.42rem}
section#traffic .src{margin-top:clamp(1.1rem,2.6vw,1.6rem);padding-top:.6rem}
@media (max-width:640px){section#traffic .chap-head h2{letter-spacing:.14em}}


/* ================= 卷六 V2：配色归一（纸底） =================
   卷六原来是本章唯一一页 chapter dark，也是 .panel-glass 的唯一用户（7 处），
   与前八卷的纸底接不上。这一版整节回到 .chapter.alt，翻法照抄卷三 V6 的令牌路径：
   这一节的原语（.kf / .tabs / .chain / .facts / .proj / #chart 的 .gl .ax）前景与描边
   全取自暗底五件套，所以在 section#money 把它们声明成纸底值，整套组件自己翻面，
   不重写任何一条颜色。--line-d 必须跟着一起重写：它在 :root 上写作 rgb(var(--txd-rgb)/.18)，
   自定义属性的替换发生在声明它的那一层，后代里只改 --txd-rgb，继承下来的 --line-d
   不会重算——只翻一个的结果是描边仍是墨底透白。
   自身仍是墨底的表面（.roll-hero、.pc .badge）已在卷三那条全局抄回名单里点名，不受影响。 */
section#money{--tx-d:var(--tx);--tx-d2:var(--tx2);--line-d:var(--line);--gold-l:var(--gold);--txd-rgb:var(--tx-rgb)}
/* V8 同款补漏：默认档金色压在纸上只有 2.4:1，强调字改走 --gold-d（它的定义就是浅底上的强调字）。
   选中态那颗 .tabs 钮是金底墨字，不吃这条——否则字底同深。 */
section#money .kf i,section#money .proj b{color:var(--gold-d)}
/* .kf 底下那层 rgb(--txd-rgb/.05) 翻完成了"暗算底"，等于把纸压暗一档、把金字拖下去；
   换纸亮底，hover 另给一层暖金保住"能读"的反馈。 */
section#money .kf{background:rgb(var(--paperhi-rgb)/.72)}
section#money .kf:hover{background:rgb(var(--gold-rgb)/.12)}

/* ================= 卷六 V3：§03「一年的账拆开看」 =================
   这一节是本页唯一的新形态（横向条 + 下面两张账表），所以只给它补三件事，
   原语全部复用别页已经跑通的那套：.numcards/.nc 靠 :is() 并页（2677–2686）、
   .pin 靠 1776–1783 那组、表靠 .dtab .tbl。这里不再写任何颜色字面量。
   container-type + view-timeline 一起声明：缺前者，.fisbar 的横向排布按视口算，
   窄面板里会顶出横向溢出（卷四 V4、卷五 V2 都翻过一次）；缺后者，.pinline 的
   animation-timeline:--pan 找不到锚，那条金线静默停在 scaleX(0)——不报错、不显示。 */
section#money #fis24{container-type:inline-size;view-timeline:--pan block;
  padding:clamp(1rem,2.1vw,1.45rem) clamp(1rem,2.2vw,1.55rem)}
section#money #fis24 .said{margin-bottom:.15rem}
section#money #fis24 .hint{margin:-.05rem 0 .5rem}

/* 切面按钮：不能用 .tabs 这个类名——ec.js 绑的是全文档 $$(".tabs button")，
   depth.js 绑的是第一个 $(".tabs")，借用就会把上面图表区的切换一起带走。
   几何与选中态照抄 694–697 那组 .tabs（同一个 pill），只是这里直接用纸底令牌写。 */
section#money .fisbar{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.15rem 0 .6rem}
section#money .fisbar button{padding:.42rem .95rem;border-radius:99px;border:1px solid var(--line);
  background:transparent;color:var(--tx2);font-family:var(--serif);font-size:var(--fs-s);
  letter-spacing:.04em;cursor:var(--cur-hand);transition:background var(--dur-quick),
  color var(--dur-quick),border-color var(--dur-quick)}
section#money .fisbar button:hover{color:var(--tx);border-color:var(--gold)}
section#money .fisbar button[aria-selected="true"]{background:var(--gold);border-color:var(--gold);
  color:var(--ink2);font-weight:600}

/* 图高必须显式给：.ec-box 只有 width:100%，ECharts 在 0 高容器上静默画不出来。
   cmp 面有 8 类 × 两根条 + 图例，同一档高度会把类别名挤成一团。 */
section#money #fisChart{height:clamp(15rem,26vw,19rem);margin:.15rem 0 .1rem}
section#money #fisChart.cmp{height:clamp(20rem,34vw,26rem)}

/* 账行 ↔ 图上条：.hi 的底色由 1296 行全站那条 tr.hi td 给，这里只补两道——
   首列一道朱轨（和卷五 3083 行 .nc.hi 同一拍），数字列右对齐等宽。 */
section#money #fisLedger tr[data-lk]{cursor:var(--cur-hand)}
section#money #fisLedger tr.hi td:first-child{box-shadow:inset 3px 0 0 var(--cinnabar)}
section#money .fis-bal td:nth-child(2),section#money .fis-bal td:nth-child(3),
section#money .fis-bal td:nth-child(4),section#money .fis-sub td:nth-child(2),
section#money .fis-cmp td:nth-child(2),section#money .fis-cmp td:nth-child(3),
section#money .fis-cmp td:nth-child(4),section#money .fis-cmp td:nth-child(5){
  text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
section#money .fis-cmp th:nth-child(n+2):nth-child(-n+5),
section#money .fis-bal th:nth-child(n+2):nth-child(-n+4),
section#money .fis-sub th:nth-child(2){text-align:right}
/* 合计行：表头那条虚线换成实线，一眼看出这是"相加之后"而不是又一项。 */
section#money .fis-bal tbody tr:last-child td{border-bottom:0;padding-top:.6rem;
  border-top:1px solid var(--line)}
section#money .fis-bal tbody tr:last-child td:nth-child(2){color:var(--ink2)}
section#money .fis-bal tbody tr:last-child td:first-child em{font-style:normal;color:var(--tx2);
  font-family:var(--sans);font-size:var(--fs-s);letter-spacing:.04em}
section#money .fis-bal tbody tr:last-child:hover{background:transparent}
section#money #fis24 .note-row{margin-top:.85rem}
section#money #fis24 .mini{margin-top:.45rem}
section#money #fis24 h3.sub{margin:clamp(1.15rem,2.4vw,1.6rem) 0 .3rem}
@media (max-width:640px){
  /* 手机上五列六列的账一定横向滚，滚动的边界要看得见，否则读者以为后面没了 */
  section#money #fis24 .dtab{-webkit-overflow-scrolling:touch}
  section#money .fisbar button{flex:1 1 auto;text-align:center}
}

/* 对比度与卷四 2759、卷五 3079 同一条修：默认 --gold 压在纸上只有 2.69:1，
   本页 .sec-no 的编号 / .pinline 右端 / .tabs 选中态都吃它；--tx2 再叠上
   .hint 的 .8 与 .src 的 .85，实际只剩约 3.4:1，而本页 .src 有十七处。
   同一档修法：指到 -d 深金、把 --tx2 压深，并取消这两处的 opacity 稀释。 */
section#money{--gold:#8a6524;--tx2:#3f5057}
section#money .hint,section#money .src,section#money .ph-note,
section#money .facts em,section#money .sec-no i,section#money .rel a em{opacity:1}

/* ---------- 卷六 §04：百年换引擎经济时间轴 ---------- */
#tl-money .pin{text-align:center;padding:1.5rem 0 .8rem}
.tl-hint{font-size:.82rem;text-align:center;color:var(--tx-d);margin-bottom:.8rem}
.econ-prev,.econ-next{transition:var(--dur-quick)}
.econ-prev:hover,.econ-next:hover{background:rgb(var(--gold-rgb)/.1);border-color:var(--gold);color:var(--ink2)}

/* ---------- 卷六 §05：产业图册 tab ---------- */
.imtabs{display:flex;flex-wrap:wrap;gap:.35rem;margin:.8rem 0 .5rem;padding-left:.2rem}
.imtabs button{padding:.3rem .7rem;border-radius:99px;border:1px solid var(--line);background:none;color:var(--tx-d2);cursor:var(--cur-hand);font-size:.82rem;font:inherit;transition:var(--dur-quick)}
.imtabs button[aria-selected="true"],.imtabs button:hover{background:var(--gold);border-color:var(--gold);color:var(--ink2);font-weight:600}
.pstrip.imgrid{max-height:28rem;overflow-x:auto;scroll-snap-type:x mandatory}
.pstrip.imgrid figure.pc{width:18rem;min-width:18rem;scroll-snap-align:start}

/* ---------- 卷六 §06：压力卡行 ---------- */
.kf-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:.8rem;margin:1rem 0}
.kf-row .kf{padding:.85rem;display:flex;align-items:baseline;gap:.4rem;border:1px solid var(--line);border-radius:6px;background:rgb(var(--paperhi-rgb)/.5);position:relative}
.kf-row .kf b{font-size:clamp(1.1rem,2.2vw,1.5rem);white-space:nowrap}
.kf-row .kf i{font-style:normal;font-size:.82rem;color:var(--tx-d);opacity:.85;white-space:nowrap}
.kf-row .kf span{font-size:.78rem;color:var(--tx-d2);margin-left:.2rem}
.kf-row .kf em{display:block;width:100%;font-size:.75rem;color:var(--tx-d2);margin-top:.3rem;line-height:1.5;border-top:1px dashed rgb(var(--line-rgb)/.4);padding-top:.25rem}
.kf-row .kfs em{color:var(--cinnabar)}
.kf-row .kfif em{color:var(--cinnabar)}
.kf-row .kftx em{color:var(--cinnabar)}
.kf-row .kfip em{color:var(--cinnabar)}

/* ---------- 卷六 §06-08：存疑表 ---------- */
.db-table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.88rem}
.db-table th{text-align:left;padding:.5rem .6rem;background:rgb(var(--paperhi-rgb)/.8);border-bottom:2px solid var(--line);font-weight:600;font-size:.82rem;position:sticky;top:0;z-index:1}
.db-table td{padding:.45rem .6rem;border-bottom:1px solid var(--line-d);vertical-align:top}
.db-table tr:hover td{background:rgb(var(--gold-rgb)/.04)}
.db-table .diff-l{color:var(--tx-d2)}
.db-table .diff-m{color:var(--cinnabar);font-weight:600}
.db-table .diff-h{color:var(--cinnabar);font-weight:700}
.db-table .solved{color:#1a8a5a;font-weight:600}
.db-table .unsolved{color:var(--tx-d2);font-style:normal}
@media(max-width:600px){.db-table{font-size:.8rem}.db-table th,.db-table td{padding:.35rem .3rem}}

/* 图册移动端：卡片缩窄 */
@media(max-width:640px){.pstrip.imgrid figure.pc{width:15rem;min-width:15rem}}

/* 卷六数字牌：四张一排，消掉 3+1 的参差留白；窄屏落回 2×2 */
section#money .numcards{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){section#money .numcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){section#money .numcards{grid-template-columns:minmax(0,1fr)}}

/* 卷六钱从哪里来 (end) ---------- */

/* ---------- 触屏热区：四类“只有一个入口、却小于 24px”的控件 ----------
   正文里的行内链接（a.cite / a.src-l / a.lv）按 WCAG 2.5.8 的 inline 例外不计；
   台账点阵（.lg-dot）受密度所限，热区放大到 24px 会把这条带子撑成十几行，
   留作设计决定，这里不动。 */
@media (pointer:coarse){
  .al-lab{min-height:24px}
  .vd-tbtn{min-height:24px;padding-top:.28rem;padding-bottom:.28rem}
  .chap .chap-t{padding-block:.3rem}
  .ftb-sign a,.ftb-r a{padding-block:.34rem}
  /* 年表拖条：盒子只有 1rem 高，手指按上去容易滑出。轨道那 2px 的线是渐变画在盒子正中的，
     把盒子抬到 1.5rem 线跟着居中、滑块仍贴轨道，视觉不动、命中区过 24px。 */
  .cal input[type=range]{height:1.5rem}
  .vd-jump{display:inline-block;min-height:24px;padding-block:.2rem}
}

/* ---------- 台账全屏对话壳（data.html）----------
   布局：左栏（新问一笔/四视图/状态/分卷）+ 主区（hero 或对话流 + 底部 dock）
   + 右侧账表抽屉。禁用 JS 时 html 无 app-js 类，整块不生效，正文退回文档流。 */
html.app-js body.app-mode{overflow:hidden}
html.app-js body.app-mode .topbar,
html.app-js body.app-mode .progress{display:none}
main.app{display:flex;height:100vh;height:100dvh;margin:0 auto;max-width:none;padding:0;gap:0;background:var(--paper)}

/* 左栏 */
.rail{flex:0 0 15.5rem;display:flex;flex-direction:column;gap:.9rem;
  padding:1rem .85rem 1.1rem;border-right:1px solid var(--line);background:var(--paper-hi);overflow-y:auto}
.rail .mark{display:flex;align-items:center;gap:.5rem;font-weight:600;color:var(--tx);text-decoration:none;font-size:.92rem}
.rail .mark .logo{width:1.7rem;height:1.7rem;border-radius:50%;flex:0 0 1.7rem;
  background:radial-gradient(circle at 34% 30%,rgb(var(--gold-rgb)/.95),rgb(var(--cinnd-rgb)) 72%);
  box-shadow:0 0 0 1px rgb(var(--ink-rgb)/.16)}
.rail-new{font:inherit;font-size:.84rem;padding:.42rem .7rem;cursor:var(--cur-hand);color:var(--tx);
  border:1px solid var(--line);border-left:3px solid var(--cinnabar);border-radius:.15rem .55rem .55rem .15rem;
  background:rgb(var(--cinn-rgb)/.05);transition:background var(--dur-quick)}
.rail-new:hover{background:rgb(var(--cinn-rgb)/.12)}
.rail-lab{margin:.2rem 0 -.35rem;font-size:.7rem;letter-spacing:.22em;color:var(--tx2)}
.rail-views{display:flex;flex-direction:column;gap:.28rem}
.rail-views button{font:inherit;font-size:.82rem;text-align:left;padding:.34rem .6rem;cursor:var(--cur-hand);
  border:1px solid var(--line);border-left:3px solid transparent;border-radius:.15rem .55rem .55rem .15rem;
  background:transparent;color:var(--tx);transition:all var(--dur-quick)}
.rail-views button:hover{border-left-color:var(--gold)}
.rail-views button.act{border-left-color:var(--cinnabar);background:rgb(var(--cinn-rgb)/.12);font-weight:600}
.rail-meta{font-size:.72rem;color:var(--tx2);line-height:1.7;border-top:1px dashed var(--line);padding-top:.6rem}
.rail-vols{display:flex;flex-direction:column;gap:.1rem;border-top:1px dashed var(--line);padding-top:.6rem}
.rail-vols a{font-size:.78rem;color:var(--tx2);text-decoration:none;padding:.12rem .3rem;border-radius:4px}
.rail-vols a:hover{color:var(--cinnabar);background:rgb(var(--cinn-rgb)/.08)}

/* 主区 */
.stage{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.thread{flex:1 1 auto;overflow-y:auto;padding:1.2rem clamp(1rem,4vw,3rem) 1rem;scroll-behavior:smooth}
/* data.html 的 .hero 撞了首页轮播 hero 的规则（min-height:100svh / 暗底 / flex 贴底），
   在本页作用域内全部退回默认，只保留壳层自己的居中样式。 */
.stage .hero{display:block;min-height:0;padding:0;background:none;color:inherit;overflow:visible;position:static}
.stage .hero{max-width:38rem;margin:14vh auto 0;text-align:center}
.stage .hero[hidden]{display:none}
.stage .hero h1{font-size:clamp(1.5rem,3.4vw,2.15rem);margin:0 0 .7rem;color:var(--tx)}
.stage .hero p{font-size:.88rem;line-height:1.8;color:var(--tx2);margin:0 0 1.4rem}
.stage .hero-sugs{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.stage .hero-sugs button{font:inherit;font-size:.82rem;padding:.4rem .85rem;cursor:var(--cur-hand);color:var(--tx);
  border:1px dashed rgb(var(--gold-rgb)/.75);border-radius:.15rem .55rem .55rem .15rem;background:transparent;
  transition:all var(--dur-quick)}
.stage .hero-sugs button:hover{border-style:solid;background:rgb(var(--gold-rgb)/.12)}
/* 来源与红线压成一句小字，放在例句后面：它是给较真的人看的凭据，不该当开场白 */
.stage .hero p.hero-fine{font-size:.74rem;line-height:1.7;color:var(--tx2);opacity:.82;margin:1.3rem 0 0;
  font-family:var(--kai);letter-spacing:.02em}
.lg-chat:empty{margin:0}
/* 对话列在宽主区里居中收拢，与 hero 同宽 */
.thread .lg-chat{width:100%;max-width:44rem;margin-left:auto;margin-right:auto}

/* 底部输入台：#lgQ / #lgMic / #lgAi 由脚本从账表条搬入此处，作用域样式在 .dock-ctl 重描 */
.dock{flex:0 0 auto;padding:.85rem clamp(1rem,4vw,3rem) 1rem;border-top:1px solid var(--line);background:var(--paper-hi)}
.dock-inner{display:flex;align-items:center;gap:.55rem}
.dock-ctl{display:flex;align-items:center;gap:.5rem;flex:1 1 auto;min-width:0;
  border:1px solid var(--line);border-radius:.15rem .75rem .75rem .75rem;background:var(--paper);padding:.3rem .55rem}
.dock-ctl input{font:inherit;font-size:.92rem;padding:.4rem .3rem;border:0;background:transparent;color:var(--tx);
  flex:1 1 auto;min-width:0}
.dock-ctl input:focus{outline:none}
.dock-ctl:focus-within{border-color:var(--cinnabar);box-shadow:0 0 0 2px rgb(var(--cinn-rgb)/.22)}
.dock-ctl .lg-ai{font-size:.72rem;color:var(--tx2);border:1px dashed var(--line);border-radius:99px;padding:.14rem .5rem;white-space:nowrap}
.dock-ctl .lg-ai.load{color:var(--gold-d);border-color:rgb(var(--gold-rgb)/.6);border-style:solid}
.dock-ctl .lg-ai.ok{color:var(--cinnabar);border-color:rgb(var(--cinn-rgb)/.55);border-style:solid;background:rgb(var(--cinn-rgb)/.06)}
.dock-ctl .lg-mic{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--tx2);cursor:var(--cur-hand);flex:0 0 2rem}
.dock-ctl .lg-mic:hover{color:var(--cinnabar);border-color:var(--cinnabar)}
.dock-ctl .lg-mic.on{background:var(--cinnabar);color:rgb(var(--paperhi-rgb));border-color:var(--cinnabar)}
.dock-send{flex:0 0 auto;width:2.6rem;height:2.6rem;border:0;border-radius:.15rem .75rem .75rem .15rem;cursor:var(--cur-hand);
  background:var(--cinnabar);color:var(--paper-hi);font-family:var(--kai);font-size:1.05rem;
  box-shadow:0 3px 10px rgb(var(--cinn-rgb)/.38);transition:transform 120ms}
.dock-send:hover{transform:translateY(-1px)}
.dock-send:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dock-note{display:flex;justify-content:space-between;gap:.6rem;margin:.45rem 0 0;font-size:.7rem;color:var(--tx2)}
.dock-drawer{font:inherit;font-size:.7rem;border:0;background:transparent;color:var(--gold-d);cursor:var(--cur-hand);padding:0}
.dock-drawer:hover{color:var(--cinnabar)}

/* 右侧账表抽屉：窄屏为覆盖层，宽屏并排 */
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:55;width:min(46rem,94vw);display:flex;flex-direction:column;
  border-left:1px solid var(--line);background:var(--paper-hi);box-shadow:-14px 0 34px rgb(var(--ink-rgb)/.18);
  transform:translateX(100%);visibility:hidden;
  transition:transform 320ms cubic-bezier(.2,0,0,1),visibility 0s linear 320ms}
.drawer.open{transform:none;visibility:visible;transition:transform 320ms cubic-bezier(.2,0,0,1)}
.drawer-head{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem .7rem;border-bottom:1px solid var(--line)}
.drawer-head b{font-size:.95rem}
.drawer-head #drawerSub{font-size:.72rem;color:var(--tx2);margin-inline-start:auto}
.drawer-x{font:inherit;font-size:1.1rem;line-height:1;border:0;background:transparent;color:var(--tx2);cursor:var(--cur-hand);padding:.2rem .4rem}
.drawer-x:hover{color:var(--cinnabar)}
.drawer-body{flex:1 1 auto;overflow-y:auto;padding:.9rem clamp(.8rem,2vw,1.4rem) 3rem}
.drawer-body .panel{box-shadow:none;border:0;background:transparent;padding:0;margin:0}
@media (min-width:70rem){
  .drawer{width:min(42rem,52vw)}
}

/* 窄屏：左栏收成顶部一条 */
@media (max-width:62rem){
  main.app{flex-direction:column}
  .rail{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem;
    border-right:0;border-bottom:1px solid var(--line);padding:.6rem .8rem;overflow:visible}
  .rail-lab,.rail-vols,.rail-meta br{display:none}
  .rail-meta{font-size:.72rem;border-top:0;padding-top:0;margin-inline-start:auto}
  .rail-views{flex-direction:row;flex-wrap:wrap}
  .stage .hero{margin-top:8vh}
}
html.app-js body.app-mode .foot{display:none}

/* 高度链修正：flex 子项默认 min-height:auto 会被内容撑破 100dvh 容器，
   导致窄屏 dock 溢出视口底部。逐层放开收缩，让 thread 成为唯一滚动区、dock 贴底。 */
main.app{overflow:hidden}
.stage{min-height:0}
.thread{min-height:0}
.dock{flex:0 0 auto}