/* 读书一块:排字封面、转身书架、星图、两条线的首页、一期全文、书页目录、章节页。
   规矩:颜色只用 site.css 的变量和书布色;所有选择器以 .rv- 或 .rd- 开头(封面和书架首页也用)。
   系统开了「减少动态」时,site.css 已把所有动画与过渡关掉。 */

/* ═══════════ 封面 ═══════════ */
.rv-cv{position:relative;display:block;width:100%;aspect-ratio:3/4;container-type:inline-size;overflow:hidden;background:var(--cb,var(--paper-2));color:var(--cf,var(--ink))}
.rv-real{background:var(--paper-2)}
.rv-real img{width:100%;height:100%;object-fit:cover}
.rv-real img.rv-fit{object-fit:contain}
.rv-ci{position:absolute;inset:0;display:flex;flex-direction:column;gap:5cqw;padding:7cqw 7cqw 9cqw}
.rv-cti{display:block;font-family:var(--title);font-weight:900;font-size:12cqw;line-height:1.16;letter-spacing:.005em;overflow-wrap:anywhere}
.rv-long .rv-cti{font-size:8.6cqw}                 /* 书名长:收一档,免得一个词拆两行 */
.rv-cm{flex:1 1 0;min-height:0;width:calc(100% + 14cqw);margin-left:-7cqw;color:inherit;opacity:.85}
.rv-low .rv-cm{order:-1;margin-top:-7cqw}
.rv-cau{display:block;font-family:var(--en);font-style:italic;font-size:6cqw;line-height:1.35;overflow-wrap:anywhere;padding-right:12cqw}
.rv-cs{position:absolute;right:3.5cqw;bottom:2.6cqw;font-family:var(--sans);font-size:max(9px,3cqw);opacity:.62;letter-spacing:.04em}
.rv-bookcv .rv-cv{height:100%;aspect-ratio:auto}
.rv-sc-cv .rv-cv,.rv-row4cv .rv-cv{height:100%;aspect-ratio:auto}

/* ═══════════ 转身书架 ═══════════ */
.rv-shelf1w{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding:34px 0 0;scrollbar-width:thin;cursor:grab;touch-action:pan-x pan-y}
.rv-shelf1w.dragging{cursor:grabbing;user-select:none}
.rv-shelf1w.dragging .rv-b1{pointer-events:none}
.rv-shelf1{display:flex;align-items:flex-end;gap:3px;width:max-content;min-width:100%;border-bottom:5px solid var(--ink);transform:skewX(var(--lean,0deg));transform-origin:0 100%}
.rv-shelf1w.right .rv-shelf1{justify-content:flex-end}
.rv-b1{position:relative;flex:none;width:var(--w);height:var(--h);padding:0;border:0;background:none;transition:width .6s var(--ease);cursor:pointer}
.rv-b1.out{width:var(--cw)}
.rv-b1s{position:absolute;inset:0;display:block;perspective:900px}
.rv-b1spine{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-start;padding:16px 0 10px;overflow:hidden;
  background:var(--cb);color:var(--cf);transform-origin:left center;transition:transform .6s var(--ease),opacity .35s,box-shadow .2s;box-shadow:inset 3px 0 0 rgba(255,255,255,.07),inset -2px 0 0 rgba(0,0,0,.18)}
.rv-b1spine span{writing-mode:vertical-rl;font-family:var(--en);font-style:italic;font-weight:500;font-size:13.5px;letter-spacing:.03em;line-height:1.15;white-space:nowrap}
.rv-b1spine.has-zh{flex-direction:column;align-items:center;justify-content:space-between}
.rv-b1zh{writing-mode:vertical-rl;font-family:var(--title);font-weight:900;font-size:11.5px;letter-spacing:.1em;line-height:1;white-space:nowrap;opacity:.9;padding-top:8px;background:linear-gradient(currentColor,currentColor) 50% 0/8px 1px no-repeat}
.rv-b1spine.tight-zh .rv-b1zh{font-size:11px;letter-spacing:0;padding-top:6px}
.rv-b1spine.no-zh .rv-b1zh{display:none}
.rv-b1.hit .rv-b1spine::before{content:"";position:absolute;top:5px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--pen);box-shadow:0 0 0 1.5px var(--paper)}
.rv-b1face{position:absolute;inset:0;display:block;transform-origin:left center;transform:rotateY(-90deg);opacity:0;backface-visibility:hidden;transition:transform .6s var(--ease),opacity .2s .1s;box-shadow:0 10px 22px -12px rgba(0,0,0,.55)}
.rv-b1face .rv-cv{height:100%;aspect-ratio:auto}
.rv-b1.out .rv-b1face{transform:rotateY(0);opacity:1}
.rv-b1.out .rv-b1spine{transform:rotateY(90deg);opacity:0}
.rv-b1:hover:not(.out) .rv-b1spine{transform:translateY(-6px)}
.rv-cap1{min-height:4.4em;margin:12px 0 0;font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--ink-2);text-align:left}
.rv-cap1 b{font-family:var(--en);font-style:italic;font-weight:500;font-size:17px;color:var(--ink)}
.rv-cap1 small{display:block;font-family:var(--serif);font-size:14.5px;color:var(--dim)}
.rv-cap1 .pen{font-size:15px;margin-right:4px}

/* ═══════════ 星图 ═══════════ */
button.chip{cursor:pointer}
button.chip[aria-pressed="true"]{border-color:var(--ink);color:var(--ink)}
.rv-tools,.rv-t4{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 8px}
.rv-t4 .sp{flex:1 1 12px}
.rv-sk4{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.rv-skywrap{position:relative;border:1px solid var(--line);background:var(--panel)}
.rv-skywrap svg{width:100%;height:auto;overflow:visible}
.rv-band{fill:var(--paper-2);opacity:.55}
.rv-band.alt{opacity:.25}
.rv-fl{font-family:var(--sans);font-size:12px;font-weight:600;fill:var(--ink-2)}
.rv-sky.narrow .rv-fl{font-size:11px;fill:var(--dim)}
.rv-grid{stroke:var(--line);stroke-width:1}
.rv-tk{font-family:var(--sans);font-size:11px;fill:var(--dim);text-anchor:middle}
.rv-star{cursor:pointer;outline:none}
.rv-hit{fill:transparent}
.rv-halo{fill:var(--ink);opacity:.1}
.rv-core{fill:var(--ink);transform-box:fill-box;transform-origin:center;transition:transform .3s var(--ease)}
.rv-ring{fill:none;stroke:var(--pen);stroke-width:2;opacity:0}
.rv-star:hover .rv-ring,.rv-star:focus-visible .rv-ring,.rv-star.sel .rv-ring{opacity:1}
.rv-star:hover .rv-core,.rv-star.sel .rv-core{transform:scale(1.5)}
.rv-sl{font-family:var(--en);font-style:italic;font-size:12px;fill:var(--ink-2);text-anchor:middle;paint-order:stroke;stroke:var(--panel);stroke-width:3px;stroke-linejoin:round}
.rv-sky.narrow .rv-star:not(:hover):not(:focus-visible):not(.sel) .rv-sl{display:none}
.rv-sc{position:absolute;z-index:5;display:flex;gap:12px;width:min(300px,calc(100% - 8px));padding:12px;background:var(--panel);border:1px solid var(--ink);box-shadow:0 12px 24px -10px rgba(0,0,0,.35);animation:rv-pop .3s var(--ease) both}
@keyframes rv-pop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
.rv-sc-cv{flex:none;display:block;width:84px;height:112px}
.rv-sc-tx{min-width:0}
.rv-sc-tx b{display:block;font-family:var(--en);font-style:italic;font-weight:500;font-size:15px;line-height:1.35}
.rv-sc-tx small{display:block;margin-bottom:8px;font-family:var(--sans);font-size:11.5px;color:var(--dim)}
.rv-sc-bt{display:flex;flex-wrap:wrap;gap:6px}
.rv-sc-bt .btn{padding:3px 12px;font-size:12.5px}
.rv-list4 h3{margin:18px 0 6px;font-family:var(--title);font-weight:900;font-size:16px}
.rv-list4 h3:first-child{margin-top:0}
.rv-row4{display:grid;grid-template-columns:44px 1fr;gap:4px 12px;align-items:start;width:100%;padding:10px 0;border:0;border-top:1px solid var(--line);background:none;text-align:left}
.rv-row4:hover{background:var(--panel)}
.rv-row4cv{display:block;width:44px;height:58px}
.rv-row4 b{font-family:var(--en);font-style:italic;font-weight:500;font-size:15px}
.rv-row4 small{display:block;font-family:var(--sans);font-size:12.5px;color:var(--dim)}
.rv-row4 em{display:block;font-style:normal;font-size:13px;color:var(--ink-2)}

/* ═══════════ 读书首页:线分开两条线 ═══════════ */
.rd-home .spread{--spine:50vw;min-height:calc(100vh - var(--bar))}
@media (max-width:899px){.rd-home .spread{--spine:4.56vw;min-height:0}}
.rd-home h1{margin:0;font-family:var(--title);font-weight:900;font-size:clamp(30px,3.6vw,54px);line-height:1.2}
.rd-sub{margin:.5em 0 1.4em;font-size:15.5px;color:var(--ink-2);max-width:30em}
.rd-side-k{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:1.6em 0 0}
.rd-side-k .n{font-family:var(--sans);font-size:12.5px;color:var(--dim)}
.rd-jump{display:none;font-family:var(--sans);font-size:13px;gap:14px;padding:12px 0 14px}
@media (max-width:899px){.rd-jump{display:flex}}
.rd-today{margin-top:6px}
.rd-sec-k{margin:1.8em 0 .5em;font-family:var(--sans);font-size:12.5px;letter-spacing:.12em;color:var(--dim)}
.rd-hero{display:block}
.rd-hero .ttl-h{font-size:clamp(26px,3.3vw,50px);font-size:min(clamp(26px,3.3vw,50px),calc(100cqw / var(--n,8)))}
.rd-hero .ttl-en{font-size:clamp(16px,1.4vw,21px)}
.rd-hero .ttl-q{font-size:clamp(15.5px,1.2vw,18px)}
.rd-hero:hover .ttl-h{color:var(--ink)}
.rd-go{display:inline-block;margin-top:.8em;font-family:var(--title);font-weight:900;font-size:16px}
.rd-log{list-style:none;margin:0;padding:0}
.rd-log a{display:block;padding:9px 0;border-top:1px solid var(--line)}
.rd-log b{font-family:var(--title);font-weight:900;font-size:16.5px;line-height:1.4}
.rd-log small{display:block;font-family:var(--sans);font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.rd-log .pen{font-size:15px;margin-right:6px}

/* 今天的四本单本加一位思想家:一行一本 */
.rd-four{list-style:none;margin:1.4em 0 0;padding:0}
.rd-four a{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.rd-four li:last-child a{border-bottom:1px solid var(--line)}
.rd-fcv{display:block;width:56px;aspect-ratio:2/3;overflow:hidden;background:var(--paper-2)}
.rd-fcv .rv-cv{height:100%;aspect-ratio:auto}
.rd-fcv img{display:block;width:100%;height:100%;object-fit:cover}
.rd-ftx{display:block;min-width:0}
.rd-fzh{display:block;width:fit-content;max-width:100%;font-family:var(--title);font-weight:900;font-size:17px;line-height:1.35;overflow-wrap:anywhere;background:linear-gradient(var(--pen),var(--pen)) 0 100%/0 2px no-repeat;transition:background-size .35s var(--ease)}
.rd-four a:hover .rd-fzh,.rd-four a:focus-visible .rd-fzh{background-size:100% 2px}
.rd-fen{display:block;font-family:var(--en);font-style:italic;font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.rd-ftx small{display:block;font-family:var(--sans);font-size:12px;color:var(--dim)}
.rd-from{margin:1.6em 0 0;font-family:var(--sans);font-size:12.5px;color:var(--dim)}
.rd-from b{color:var(--ink-2);font-weight:600}
.rd-from a{text-decoration:underline}
.rd-portrait{display:flex;align-items:center;justify-content:center;width:min(100%,clamp(200px,24vw,360px));aspect-ratio:3/4;margin:0 auto}
.rd-portrait img{display:block;width:100%;height:100%;object-fit:contain}
@media (max-width:899px){.rd-portrait{margin-left:0}}

/* ═══════════ 一天全文 ═══════════ */
.rd-issue .pl{position:relative}
.rd-stick{position:sticky;top:calc(var(--bar) + 24px)}
.rd-sec-h{display:block;margin-top:1.8em;font-family:var(--sans);font-size:12.5px;letter-spacing:.1em;color:var(--dim)}
.rd-p{margin:.3em 0 0;font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.95;max-width:33em}
.rd-ask{margin:.3em 0 0;font-family:var(--title);font-weight:900;font-size:clamp(22px,2.2vw,32px);line-height:1.35;max-width:17em}
.rd-tag-note{margin:1.4em 0 0;padding-top:.8em;border-top:1px solid var(--line);font-family:var(--sans);font-size:12px;color:var(--dim);max-width:44em}
.rd-pn{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2vw,20px);margin-top:clamp(28px,4vw,48px)}
.rd-pn a{display:block;min-width:0;padding:clamp(12px,1.8vw,20px) 0;border-top:2px solid var(--ink)}
.rd-pn a.next{text-align:right}
.rd-pn small{display:block;font-family:var(--sans);font-size:12px;color:var(--dim)}
.rd-pn b{display:block;margin-top:2px;font-family:var(--title);font-weight:900;font-size:clamp(15px,1.5vw,19px);line-height:1.35;overflow-wrap:anywhere}
.rd-pn .off{display:block;padding:clamp(12px,1.8vw,20px) 0;color:var(--faint);border-top:2px solid var(--line-2)}

/* ═══════════ 书页:封面在左,目录挂在线右边 ═══════════ */
.rd-cover{width:min(100%,clamp(200px,24vw,360px),calc((100svh - 190px) * .66));margin:0 auto;box-shadow:0 18px 34px -22px rgba(0,0,0,.5)}
/* 真书封多是 2:3 的竖长条,框也按 2:3 摆,免得书名被切头切脚;排字封照旧 3:4 */
.rd-cover .rv-real{aspect-ratio:2/3}
.rd-cap{width:min(100%,clamp(200px,24vw,360px));margin:10px auto 0;font-family:var(--sans);font-size:12px;color:var(--dim)}
.rd-toc{list-style:none;margin:1.6em 0 0;padding:0;max-width:44em}
.rd-toc a{display:grid;grid-template-columns:2.6em minmax(0,1fr);gap:6px;padding:12px 0;border-top:1px solid var(--line)}
.rd-toc li:last-child a{border-bottom:1px solid var(--line)}
.rd-toc .n{font-family:var(--sans);font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums;padding-top:4px}
.rd-toc b{display:block;font-family:var(--title);font-weight:900;font-size:clamp(16px,1.4vw,19px);line-height:1.4}
.rd-toc em{display:block;margin-top:2px;font-style:normal;font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.rd-toc .wait b{font-weight:400;font-family:var(--serif)}
.rd-tagsrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
@media (max-width:899px){.rd-book .pl{padding-bottom:0}.rd-cover,.rd-cap{margin-left:0}}

/* ═══════════ 章节页:线靠左,字挂在线右边 ═══════════ */
.rd-ch{--spine:clamp(20px,9vw,150px)}
.rd-ch.spread{display:block;padding:clamp(28px,5vw,64px) var(--gut) clamp(40px,6vw,88px) calc(var(--spine) + clamp(18px,3vw,44px));min-height:calc(100vh - var(--bar))}
.rd-back{display:inline-block;margin-bottom:10px;font-family:var(--sans);font-size:13px;color:var(--dim)}
.rd-chno{display:block;font-family:var(--en);font-style:italic;font-weight:500;font-size:clamp(34px,5vw,64px);line-height:1;color:var(--ink-2)}
.rd-cname{display:block;margin:.2em 0 0;font-family:var(--title);font-weight:900;font-size:clamp(25px,3.6vw,48px);line-height:1.2;overflow-wrap:anywhere;max-width:22em}
.rd-prog{margin:12px 0 0;max-width:360px}
.rd-prog .cap{margin:0 0 6px}
.rd-bar{height:3px;background:var(--line);overflow:hidden}
.rd-bar i{display:block;height:100%;background:var(--pen);transition:width .6s var(--ease)}
.prose{margin-top:clamp(22px,3vw,36px)}
.prose p{margin:0 0 1.15em;max-width:35em;font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.98}
.rd-brief-l{margin:clamp(20px,3vw,32px) 0 0;font-size:clamp(17px,1.5vw,21px);line-height:1.75;max-width:30em}
.rd-pending{margin:clamp(20px,3vw,32px) 0 0;padding:22px 24px;max-width:34em;border:1px dashed var(--line-2);color:var(--dim)}
.rd-ch .cap{margin-top:12px}

/* ═══ 思想家的两样零件(门面和读书页共用,零件在 shared/thinker-ui.js)═══ */
/* ── 思想家:头像四周浮着关键词和时代(照旧站韩炳哲「疲劳场」的语义场)── */
.tfbox{position:absolute;inset:0;display:block}
.tf{position:relative;width:100%;height:100%;display:grid;place-items:center}
.tf-w{position:absolute;inset:0;pointer-events:none}
.tf-w:not(.fit){visibility:hidden}
.tw{position:absolute;transform:translate(-50%,-50%);translate:var(--px,0) var(--py,0);transition:translate 1s var(--ease),opacity .5s;white-space:nowrap;text-align:center;opacity:.36;color:var(--ink);line-height:1.1}
.tw b,.tw i{display:block;animation:twd var(--d,24s) ease-in-out var(--dl,0s) infinite alternate}
.tw b{font-family:var(--en);font-style:italic;font-weight:500;text-transform:uppercase;letter-spacing:.04em;font-size:calc(clamp(13px,1.45vw,24px) * var(--z,1))}
.tw i{margin-top:.3em;font-style:normal;font-family:var(--serif);font-size:calc(clamp(10.5px,.82vw,13px) * (.7 + var(--z,1) * .3));letter-spacing:.2em;color:var(--ink-2)}
.tw-far{opacity:.2;filter:blur(.7px)}
.tw-era b{font-family:var(--sans);font-style:normal;font-weight:600;text-transform:none;letter-spacing:.14em;font-size:calc(clamp(10.5px,.8vw,12.5px) * var(--z,1))}
.tw-era{opacity:.5}
.tw-era i{color:var(--pen);font-family:var(--serif)}
.tw.near{opacity:.78;filter:none}
@keyframes twd{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(var(--dx,0),var(--dy,0),0)}100%{transform:translate3d(calc(var(--dx,0) * -.55),calc(var(--dy,0) * .45),0)}}
.tf-pt{position:relative;z-index:1;display:block;height:56%;width:auto;max-width:46%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 10px 18px rgba(0,0,0,.08))}
.tf-cv{position:relative;z-index:1;display:block;width:38%;box-shadow:0 18px 30px -20px rgba(0,0,0,.6)}
.tf::after{content:"";position:absolute;left:24%;right:24%;top:18%;bottom:14%;border-radius:50%;background:radial-gradient(closest-side,var(--paper-2),transparent);z-index:0;pointer-events:none}

/* 手画的横轴:他的一生,几部主要作品摆在轴上下,今天这本红笔圈出来;位置由 thinker-ui.js 量了再排 */
.wx{margin:1.1em 0 0;max-width:38em}
.wx-k{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.wx-k .pen{font-size:clamp(17px,1.35vw,20px)}
.wx-k small{font-family:var(--sans);font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.wx-ln{--ly:64px;position:relative;height:128px;margin:4px 0 0}
.wx-ln:not(.fit) .wx-is{visibility:hidden}
.wx-svg{position:absolute;left:0;right:0;top:calc(var(--ly) - 20px);width:100%;height:40px;overflow:visible}
.wx-svg path{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.wx-svg .wx-a2{opacity:.3;stroke-width:1.1}
.wx-svg .wx-post{stroke-dasharray:3 6;opacity:.55;stroke-width:1.3}
.wx-dot{position:absolute;top:var(--ly);width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 1.5px var(--ink-2)}
.wx-is{list-style:none;margin:0;padding:0}
.wx-i{position:absolute;top:0;bottom:0;width:0}
.wx-i::before{content:"";position:absolute;left:-.75px;width:1.5px;top:calc(var(--ly) + 1px);height:9px;background:var(--ink);transform:rotate(var(--tilt,0deg))}
.wx-i.up::before{top:calc(var(--ly) - 10px)}
.wx-i.wx-e::before{display:none}
.wx-i.today::before{top:calc(var(--ly) - 13px);height:26px;width:2px;left:-1px;background:var(--pen)}
.wx-lb{position:absolute;top:calc(var(--ly) + 12px);display:flex;flex-direction:column;align-items:center;gap:3px;white-space:nowrap;text-align:center;line-height:1.25}
.wx-i.up .wx-lb{flex-direction:column-reverse}
.wx-lb::before{content:"";position:absolute;left:var(--lx,50%);height:var(--lead,0px);border-left:1px dotted var(--line-2)}
.wx-i.dn .wx-lb::before{bottom:100%}
.wx-i.up .wx-lb::before{top:100%}
.wx-y{position:relative;display:inline-block;font-family:var(--penf);font-weight:500;font-size:15px;line-height:1;color:var(--ink-2);transform:rotate(var(--tilt,0deg))}
.wx-y svg{position:absolute;left:-13px;right:-13px;top:-9px;bottom:-9px;width:calc(100% + 26px);height:calc(100% + 18px);overflow:visible}
.wx-y svg path{fill:none;stroke:var(--pen);stroke-width:1.3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s .3s cubic-bezier(.5,.1,.3,1)}
.in .wx-y svg path,.sl.on .wx-y svg path{stroke-dashoffset:0}
.wx-t{font-family:var(--serif);font-size:12.5px;color:var(--ink-2)}
.wx-t i{font-family:var(--en);font-style:italic;font-size:13px;color:var(--ink)}
.wx-n{font-family:var(--sans);font-size:10.5px;line-height:1.2;color:var(--dim)}
.wx-ey{font-family:var(--penf);font-weight:500;font-size:12px;color:var(--faint)}
.wx-i.today{z-index:2}
.wx-hd{display:flex;align-items:baseline;gap:12px}
.wx-i.today .wx-y{font-size:19px;color:var(--pen)}
.wx-i.today .wx-hd em{font-style:normal;font-size:15px}
.wx-i.today .wx-t{font-family:var(--title);font-weight:900;font-size:14px;color:var(--pen)}
@media (max-width:899px){
  .wx{max-width:none}
  .wx-t{font-size:11.5px}
  .wx-t i{font-size:12px}
}

/* 一天全文里的思想家:左栏是头像加四周浮着的关键词 */
.rd-field{position:relative;width:min(100%,520px);aspect-ratio:5/6;margin:0 auto}
@media (max-width:899px){.rd-field{margin-left:0;width:100%;max-width:440px}}

/* 章节页右栏的配图:导读一栏在左,图贴在右边跟着滚;窄屏放到导读前面 */
.rd-body{display:grid;grid-template-columns:minmax(0,35em) minmax(220px,380px);gap:clamp(28px,4.4vw,72px);align-items:start}
.rd-main{min-width:0}
.rd-fig{position:sticky;top:calc(var(--bar) + 28px);margin-top:clamp(22px,3vw,36px)}
.rd-fig figure{margin:0}
.rd-fig-im{background:var(--paper-2);box-shadow:0 22px 34px -24px rgba(0,0,0,.55)}
.rd-fig-im img{display:block;width:100%;height:auto;max-height:62vh;object-fit:contain}
.rd-fig figcaption{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--dim)}
.rd-fig-t{font-family:var(--title);font-weight:900;font-size:14.5px;line-height:1.45;color:var(--ink)}
.rd-fig-w{font-family:var(--serif);font-size:13.5px;color:var(--ink-2)}
.rd-fig-s{overflow-wrap:anywhere}
.rd-fig-s i{font-style:normal;display:inline-block;margin-right:8px;padding:0 5px;border:1px solid var(--line-2);font-size:11px;letter-spacing:.06em;color:var(--ink-2)}
.rd-fig-s a{text-decoration:underline;text-decoration-color:var(--line-2)}
.rd-fig-ai{font-size:11px;color:var(--faint)}
@media (max-width:1099px){.rd-body{display:flex;flex-direction:column-reverse;gap:0}.rd-fig{position:static;max-width:440px}}
/* 那一天的出处折起来,只露一行(样式本体在 site.css 的 .src-fold) */
.rd-fold{margin:.6em 0 0;font-family:var(--sans);font-size:12px;color:var(--dim);max-width:44em}
.rd-fold>p{line-height:1.75}
.rd-fold a{text-decoration:underline;text-underline-offset:2px;word-break:break-all}
/* 书系的来历卡(2026-11-07 要的:「书系的出处和出版初衷等信息不太够」):像图书馆的索书卡,粗线起头、细线分格。
   出版社、开张、创办人或主编、共几本一排四格;为什么办占一整行;底下一行是出处网址。首页书系页和读书页每天那页共用 */
.sh-card{margin:16px 0 0;max-width:36em;border-top:2px solid var(--ink);padding-top:8px}
.sh-card-k{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:0 0 2px;font-family:var(--sans);font-weight:600;font-size:12.5px;letter-spacing:.12em;color:var(--ink)}
.sh-card-k small{font-weight:400;font-size:11.5px;letter-spacing:.04em;color:var(--dim)}
.sh-card dl{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.3fr) minmax(0,1.4fr) minmax(0,.75fr);column-gap:14px;margin:0}
.sh-card dl>div{padding:7px 0;border-bottom:1px solid var(--line);min-width:0}
.sh-card dl>div.w{grid-column:1/-1}
.sh-card dt{font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;color:var(--dim)}
.sh-card dd{margin:2px 0 0;font-size:13.5px;line-height:1.65;color:var(--ink-2);overflow-wrap:anywhere}
.sh-card dd a,.sh-card-src a{color:var(--ink-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.sh-card-src{margin:7px 0 0;font-family:var(--sans);font-size:12px;line-height:1.8;color:var(--dim)}
.sh-card-src i{font-style:normal;margin:0 7px}
@media (max-width:560px){.sh-card dl{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ═══════════ 研究者视角专属的入口(2026-11-07):书页目录下一块,章节页导读下一条。这一间本身的样式在 research.css ═══════════ */
.rd-rv{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;margin:clamp(24px,3vw,36px) 0 0;max-width:44em;padding:16px 18px;border:1.5px solid var(--ink);background:var(--panel);box-shadow:5px 5px 0 -1px var(--paper-2),5px 5px 0 0 var(--line-2);transition:transform .35s var(--ease)}
.rd-rv:hover{transform:translateY(-2px)}
.rd-rv .tags{margin:0 0 4px}
.rd-rv b{display:block;font-family:var(--title);font-weight:900;font-size:clamp(16px,1.4vw,19px);line-height:1.4}
.rd-rv small{display:block;margin-top:2px;font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.rd-rv-lock{flex:none;width:22px;height:26px;fill:none;stroke:var(--ink);stroke-width:1.6}
.rd-rv-go{font-family:var(--sans);font-size:13.5px;font-weight:600;white-space:nowrap}
.rd-rv:hover .lnk{background-size:100% 2px}
/* 读书页顶上那扇门(11-08):比书页里的研究者视角卡矮一截 */
.rd-vault{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;margin:0 0 clamp(14px,1.6vw,22px);max-width:36em;padding:10px 14px;border:1.5px solid var(--ink);background:var(--panel);box-shadow:4px 4px 0 -1px var(--paper-2),4px 4px 0 0 var(--line-2);color:inherit;transition:transform .35s var(--ease)}
.rd-vault:hover{transform:translateY(-2px)}
.rd-vault .tags{margin:0 0 2px}
.rd-vault small{display:block;font-size:13px;line-height:1.6;color:var(--ink-2)}
.rd-vault:hover .lnk,.rd-vault:focus-visible .lnk{background-size:100% 2px}
@media (max-width:600px){.rd-vault{grid-template-columns:auto minmax(0,1fr)}.rd-vault .rd-rv-go{grid-column:2}}
@media (max-width:600px){ .rd-rv{grid-template-columns:auto minmax(0,1fr)} .rd-rv-go{grid-column:2} }
/* ═══ 精读:回原书读过的批注本(2026-11-07 晚,close-ui.js) ═══ */
.cl{border-top:1px solid var(--line)}
.cl-jump{margin:1.6em 0 0}
.cl-jump a{font-size:clamp(16px,1.25vw,19px);color:var(--ink-2)}
.cl-jump a:hover .pen,.cl-jump a:focus-visible .pen{text-decoration:underline;text-underline-offset:4px}
/* 借阅条:像夹在书里的一张卡,右上角一枚红章 */
.cl-slip{position:relative;width:min(100%,360px);margin:0 auto;padding:18px 20px 16px;background:var(--panel);border:1px solid var(--line-2);box-shadow:4px 5px 0 var(--paper-2);transform:rotate(-.6deg)}
.cl-slip::before{content:"";position:absolute;left:14px;right:14px;top:44px;border-top:1px dashed var(--line-2)}
.cl-slip-h{display:flex;align-items:baseline;gap:10px;margin:0 0 18px;font-family:var(--sans)}
.cl-slip-h b{font-family:var(--title);font-weight:900;font-size:22px;letter-spacing:.08em}
.cl-slip-h span{font-size:12px;letter-spacing:.1em;color:var(--dim)}
.cl-slip dl{margin:0;display:grid;grid-template-columns:4.6em minmax(0,1fr);gap:8px 10px;font-size:13.5px;line-height:1.6}
.cl-slip dt{font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;color:var(--dim);padding-top:2px}
.cl-slip dd{margin:0;color:var(--ink-2);overflow-wrap:anywhere}
.cl-slip dd i{display:block;font-family:var(--en);font-size:13px;color:var(--dim)}
.cl-stamp{position:absolute;right:12px;top:10px;padding:3px 8px;border:2px solid var(--pen);border-radius:3px;font-family:var(--penf);font-size:15px;color:var(--pen);transform:rotate(7deg);opacity:.82;letter-spacing:.06em;mix-blend-mode:multiply}
:root[data-theme="dark"] .cl-stamp{mix-blend-mode:normal}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cl-stamp{mix-blend-mode:normal}}
.cl-wait{border-style:dashed;box-shadow:none;background:transparent}
.cl-wait .cl-stamp{border-style:dashed}
/* 页码尺:竖线、页码刻度、红圈(引了原文的页)、「读到这儿」跟着走 */
.cl-rl{margin:34px auto 0;width:min(100%,360px)}
.cl-rl figcaption{font-size:15px;margin:0 0 26px}
.cl-rl-in{position:relative;height:clamp(240px,34vh,380px);margin-left:64px}
.cl-rl-ln{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ink);border-radius:2px}
.cl-tks,.cl-mks{list-style:none;margin:0;padding:0}
.cl-tk{position:absolute;left:0;top:calc(var(--p)*100%);width:10px;height:0;border-top:1.5px solid var(--ink)}
.cl-tk span{position:absolute;right:16px;top:-9px;font-family:var(--en);font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}
.cl-mk{position:absolute;left:20px;top:calc(var(--p)*100%);transform:translateY(-50%)}
.cl-mk a{display:inline-grid;place-items:center;width:30px;height:30px;font-family:var(--penf);font-size:19px;color:var(--pen);border:1.6px solid var(--pen);border-radius:47% 53% 44% 56%/52% 45% 55% 48%;background:var(--paper);transition:transform .25s var(--ease),background .25s}
.cl-mk:nth-child(2n) a{margin-left:34px}
.cl-mk a:hover,.cl-mk a:focus-visible,.cl-mk a.now{transform:scale(1.15) rotate(-6deg);background:var(--pen);color:var(--paper)}
.cl-at{position:absolute;left:-6px;top:calc(var(--p)*100%);transition:top .55s var(--ease);pointer-events:none}
.cl-at::before{content:"";position:absolute;left:0;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--pen);box-shadow:0 0 0 4px color-mix(in srgb,var(--pen) 22%,transparent)}
.cl-at{z-index:2}
.cl-at i{position:absolute;right:14px;top:-12px;white-space:nowrap;font-style:normal;font-size:14px;background:var(--paper);padding:0 6px;border-radius:3px}
.cl-ai{margin-top:26px}
/* 右栏 */
.cl-h{margin:.2em 0 0;font-family:var(--title);font-weight:900;font-size:clamp(24px,2.3vw,34px);line-height:1.35;max-width:18em}
.cl-lede{margin:.9em 0 0;font-size:clamp(17px,1.4vw,20px);line-height:1.9;max-width:32em;color:var(--ink)}
.cl-pg{font-family:var(--penf);color:var(--pen);white-space:nowrap;font-size:.95em}
.cl-sts{list-style:none;margin:.6em 0 0;padding:0 0 0 46px;position:relative;max-width:34em}
.cl-sts::before{content:"";position:absolute;left:15px;top:10px;bottom:10px;width:1.5px;background:var(--line-2)}
.cl-st{position:relative;padding:.5em 0 1.1em;transition:opacity .35s}
.cl-no{position:absolute;left:-46px;top:.45em;width:32px;height:32px;display:grid;place-items:center;font-size:18px;background:var(--paper);border:1.5px solid var(--line-2);border-radius:50%;transition:border-color .3s,background .3s,color .3s}
.cl-st.now .cl-no{border-color:var(--pen);background:var(--pen);color:var(--paper)}
.cl-st h3{margin:0;font-family:var(--title);font-weight:900;font-size:clamp(18px,1.45vw,21px);line-height:1.45}
.cl-st p{margin:.35em 0 0;font-size:clamp(16px,1.25vw,18px);line-height:1.95}
.cl-qs{list-style:none;margin:.8em 0 0;padding:0;display:grid;gap:22px;max-width:36em}
.cl-q{position:relative;padding:20px 22px 18px 54px;background:var(--panel);border:1px solid var(--line);transition:box-shadow .4s,border-color .4s}
.cl-q.now,.cl-q.flash{border-color:var(--line-2);box-shadow:5px 6px 0 var(--paper-2)}
.cl-qn{position:absolute;left:16px;top:18px;font-size:24px}
.cl-q blockquote{position:relative;margin:0;display:inline-block;font-family:var(--en);font-style:italic;font-size:clamp(19px,1.65vw,24px);line-height:1.4;color:var(--ink)}
.cl-qt::before{content:"“"}.cl-qt::after{content:"”"}
.cl-ul{display:block;width:100%;height:12px;margin-top:2px;overflow:visible}
.cl-ul path{fill:none;stroke:var(--pen);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease) .1s}
.cl-q.drawn .cl-ul path{stroke-dashoffset:0}
.cl-qpg{display:block;margin:6px 0 0;font-size:15px}
.cl-q p{margin:.5em 0 0;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.9;color:var(--ink-2)}
.cl-look{list-style:none;margin:.6em 0 0;padding:0;max-width:34em}
.cl-look li{margin:0 0 .6em}
.cl-look label{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;cursor:pointer;font-size:clamp(16px,1.25vw,18px);line-height:1.85}
.cl-look input{position:absolute;opacity:0;width:1px;height:1px}
.cl-box{width:24px;height:24px;margin-top:4px;border:1.6px solid var(--ink-2);border-radius:3px 5px 4px 6px;transform:rotate(-2deg)}
.cl-box svg{width:30px;height:30px;margin:-8px 0 0 -1px;overflow:visible}
.cl-box path{fill:none;stroke:var(--pen);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .4s var(--ease)}
.cl-look input:checked+.cl-box path{stroke-dashoffset:0}
.cl-look input:checked~.cl-lt{color:var(--dim)}
.cl-look input:focus-visible+.cl-box{outline:2px solid var(--pen);outline-offset:3px}
.cl-cnt{margin-left:8px;font-size:14px;letter-spacing:0}
.cl-none .cl-lede{color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.cl-ul path,.cl-box path,.cl-at,.cl-mk a{transition:none}}
/* 手机:尺子横过来,夹在借阅条下面 */
@media (max-width:899px){
  .cl .rd-stick{position:static}
  .cl-slip{transform:none;margin:0}
  .cl-rl{margin:24px 0 0;width:100%}
  .cl-rl-in{height:84px;margin:0 8px}
  .cl-rl-ln{left:0;right:0;top:40px;bottom:auto;width:auto;height:2px}
  .cl-tk{top:40px;left:calc(var(--p)*100%);width:0;height:10px;border-top:0;border-left:1.5px solid var(--ink)}
  .cl-tk span{right:auto;left:-8px;top:14px}
  .cl-mk{top:6px;left:calc(var(--p)*100%);transform:translateX(-50%)}
  .cl-mk:nth-child(2n) a{margin-left:0}
  .cl-mk a{width:26px;height:26px;font-size:16px}
  .cl-at{top:40px;left:calc(var(--p)*100%);transition:left .55s var(--ease)}
  .cl-at::before{left:-7px}
  .cl-at i{right:auto;left:-30px;top:30px;display:none}
  .cl-sts{padding-left:40px}.cl-no{left:-40px;width:28px;height:28px;font-size:16px}.cl-sts::before{left:13px}
  .cl-q{padding:16px 16px 14px 44px}.cl-qn{left:12px;top:14px;font-size:21px}
}