/* 首页(门面第二版,2026-11-07)。滚动就是收线:一根线从杆尖垂下来,红钩吊在屏幕底,下一页的上沿碰到钩就被吊上来。动的部分在 shared/reel.js。
   html.live 是「动着的」状态;「减少动态」时没有它,就是普通往下读,杆、线、浮漂、钩静态画好。
   第一屏照旧站:钓鱼人在左,站名和一句话在右,别的都不放;第二页是会自己翻的看板。 */

/* ── 第一屏:钓鱼人 ──
   钓鱼人按屏幕宽算(杆尖落在中缝上),屏幕矮了再按高缩,缩了就整张往右挪,杆尖照旧落在中缝上;这样常见笔记本上第一屏正好一屏,「往下滚,收线」看得见 */
.sp1{--fw:calc(var(--spine) / .9544);--fw:min(calc(var(--spine) / .9544),calc((100vh - var(--bar) - 18px) / .7992));--fw:min(calc(var(--spine) / .9544),calc((100svh - var(--bar) - 18px) / .7992));
  --fh:calc(var(--fw) * .7992);min-height:calc(100vh - var(--bar));min-height:calc(100svh - var(--bar))}
.sp1::before{top:auto;height:calc(var(--fh) * .9119)}          /* 没有动的时候:杆尖到页底 */
.fisher{position:absolute;left:calc(var(--spine) - var(--fw) * .9544);bottom:0;width:var(--fw);height:var(--fh);pointer-events:none}
.fl{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
#scene{position:absolute;left:0;pointer-events:none}
.stars{display:none;position:absolute;left:0;top:0;width:100%;height:60%;pointer-events:none}
.stars circle{fill:var(--ink)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .fisher img{filter:invert(1)}
  :root:not([data-theme="light"]) .stars{display:block}
}
:root[data-theme="dark"] .fisher img{filter:invert(1)}
:root[data-theme="dark"] .stars{display:block}
/* 他自己也在动:小腿晃,树摇,头微微点。上身的呼吸和后仰跟着线的张力走,在 reel.js 里 */
.f-body{transform-origin:35.2% 47.05%;will-change:transform}
.f-leg{transform-origin:48.8% 48.05%;animation:legsway 3.4s ease-in-out infinite alternate}
.f-head{transform-origin:37.6% 21.5%;animation:nod 5.2s ease-in-out infinite alternate}
.f-tree1{transform-origin:56% 46.2%;animation:treesway 4.6s ease-in-out infinite alternate}
.f-tree2{transform-origin:68% 47.8%;animation:treesway 5.8s ease-in-out -1.7s infinite alternate}
.stars circle:nth-child(3n){animation:twinkle 3.1s ease-in-out infinite alternate}
.stars circle:nth-child(3n+1){animation:twinkle 4.7s ease-in-out -1s infinite alternate}
@keyframes legsway{from{transform:rotate(-2.1deg)}to{transform:rotate(2.3deg)}}
@keyframes nod{from{transform:rotate(-1.1deg)}to{transform:rotate(1.3deg)}}
@keyframes treesway{from{transform:skewX(-1.1deg)}to{transform:skewX(1.5deg)}}
@keyframes twinkle{from{opacity:.25}to{opacity:1}}

/* 石堤上那杯咖啡(2026-11-07 加):摆在系船桩和篮子中间,热气往上飘。外框点不到,只有杯子点得到;
   鼠标划过、键盘停上去、手机上点一下,他头边浮起几颗手绘的红心(动作在 front.js)。杯子是代码画的,跟着深浅色换,不走插画那层反色 */
.cup{position:absolute;left:12.3%;bottom:47%;width:4.5%;z-index:2;color:var(--ink);pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:0;
  appearance:none;-webkit-appearance:none;margin:0;padding:0;border:0;background:none;font:inherit}   /* 11-08 起是按钮(点了弹小卡),按钮自带的灰底、边框抹掉 */
.cup::before{content:"";position:absolute;inset:-8px -14px -6px}
.cup:focus-visible::before{outline:2px solid var(--pen);outline-offset:2px;border-radius:6px}
.cup-v{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:currentColor;stroke-width:max(1px,calc(var(--fw) * .0021));stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 92%;transition:transform .35s var(--ease)}
.cup-v path{vector-effect:non-scaling-stroke}
.cup-v .cup-fill{fill:var(--paper);stroke:none}
.cup-v .cup-joe{fill:currentColor;opacity:.82}
.cup-v .cup-h{opacity:.7}
.cup-v .cup-steam{opacity:.6}
.cup.say .cup-v{transform:rotate(-5deg) translateY(-1px)}
html.live .cup-steam path{animation:steam 3.6s ease-in-out infinite}
html.live .cup-steam path:nth-child(2){animation-delay:-1.2s}
html.live .cup-steam path:nth-child(3){animation-delay:-2.4s}
@keyframes steam{0%{opacity:0;transform:translateY(5px)}35%{opacity:.85}100%{opacity:0;transform:translateY(-8px)}}
.cup-say{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);font-size:max(14px,calc(var(--fw) * .025));line-height:1.15;white-space:nowrap;text-align:center;opacity:0;transition:opacity .25s;pointer-events:none;
  text-shadow:0 0 2px var(--paper),0 0 4px var(--paper),0 0 6px var(--paper),0 0 8px var(--paper)}   /* 压在插画上:一圈纸色的晕把红字托出来 */
.cup.say .cup-say{opacity:1}
/* 红心:五颗,位置、大小、先后、往哪飘都写死,不用随机数 */
.hearts{position:absolute;inset:0;z-index:3;pointer-events:none;--k:1}
.ht{position:absolute;left:var(--x);top:var(--y);width:calc(max(12px,var(--fw) * .027) * var(--s,1));opacity:0;color:var(--pen)}
.ht svg{display:block;width:100%;height:auto;overflow:visible}
.ht .h-f{fill:currentColor;fill-opacity:.2;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.ht .h-s{fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;opacity:.75}
.ht1{--x:43%;--y:3%;--s:1;--d:0s;--dx:6px;--dy:-64px;--r:-10deg}
.ht2{--x:48.6%;--y:0%;--s:.72;--d:.2s;--dx:16px;--dy:-54px;--r:12deg}
.ht3{--x:35.4%;--y:1%;--s:.84;--d:.38s;--dx:-12px;--dy:-60px;--r:-16deg}
.ht4{--x:52%;--y:7%;--s:.62;--d:.56s;--dx:20px;--dy:-44px;--r:18deg}
.ht5{--x:40%;--y:-4%;--s:1.16;--d:.74s;--dx:-4px;--dy:-74px;--r:4deg}
/* 冒出来(一成半)、浮着往上飘(到七成)、最后三成才淡掉:每一段各自缓进缓出 */
html.live .fisher.love .ht{animation:heartup 2.4s ease-in-out var(--d) both}
@keyframes heartup{
  0%{opacity:0;transform:translate(0,10px) scale(.3) rotate(var(--r));animation-timing-function:cubic-bezier(.3,1.5,.6,1)}
  15%{opacity:1;transform:translate(0,0) scale(1) rotate(var(--r))}
  70%{opacity:1;transform:translate(calc(var(--dx) * .7),calc(var(--dy) * var(--k) * .7)) scale(1) rotate(calc(var(--r) * .2))}
  100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) * var(--k))) scale(.9) rotate(calc(var(--r) * -.6))}
}
html:not(.live) .fisher.love .ht{opacity:1;transform:rotate(var(--r))}
.hint{position:absolute;left:calc(var(--spine) + clamp(24px,3vw,48px));bottom:16px;margin:0;font-size:17px;line-height:1.2;z-index:6;pointer-events:none;white-space:nowrap}
.hint i{display:inline-block;width:1px;height:18px;margin-left:8px;background:var(--pen);vertical-align:-3px;transform-origin:50% 0;animation:hintline 1.5s var(--ease) infinite}
@keyframes hintline{0%{transform:scaleY(0)}60%,100%{transform:scaleY(1);opacity:0}}
html:not(.live) .hint{display:none}

/* ── 第一屏右页:站名和一句话。站名学旧站那样三行压满,用正体衬线(思源宋的拉丁字),不用粗宋 ── */
.sp1 .pl{padding:0}
.sp1 .pr{display:flex;align-items:center;padding-top:clamp(24px,4vh,56px);padding-bottom:clamp(64px,11vh,120px)}
.hero{position:relative;z-index:2;max-width:36em}
.hero-k{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 clamp(8px,1.6vh,18px);font-family:var(--sans);font-weight:600;font-size:clamp(11px,.85vw,12.5px);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)}
.hero-k>span+span::before{content:"";display:inline-block;width:18px;height:1px;margin:0 14px 0 -4px;background:var(--line-2);vertical-align:middle}
.ko{font-family:"OasisKo","Source Han Serif K","Noto Serif KR","Noto Serif CJK KR","Batang","AppleMyungjo",serif;letter-spacing:0;text-transform:none}
.hero-k .ko{margin-left:.15em;font-weight:700}
.hero-n{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(50px,min(8.6vw,13.4vh),156px);line-height:.93;letter-spacing:-.025em;color:var(--ink)}
.hero-n span{display:block}
.hero-n span:nth-child(2){padding-left:.06em}
/* 站名底下:标语中英两行、四个信条、一句捐赠的话(2026-11-07 读书室主人的话,原来那句「读书,每天换一竿。」和两段说明挪到了关于页) */
.hero-s{margin:clamp(12px,2.4vh,28px) 0 0;font-family:var(--title);font-weight:900;font-size:clamp(24px,2.5vw,40px);line-height:1.25;letter-spacing:.03em}
.hero-se{margin:.18em 0 0;font-family:var(--en);font-style:italic;font-size:clamp(16px,1.3vw,21px);line-height:1.4;color:var(--ink-2)}
.hero-c{list-style:none;margin:clamp(12px,2.2vh,24px) 0 0;padding:0;display:flex}
.hero-c li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:7px;align-items:baseline;padding:1px clamp(12px,1.3vw,20px);border-left:1px solid var(--line-2)}
.hero-c li:first-child{padding-left:0;border-left:0}
.hero-c .n{font-family:var(--sans);font-size:10.5px;color:var(--pen);font-variant-numeric:tabular-nums}
.hero-c b{font-family:var(--title);font-weight:900;font-size:clamp(15px,1.15vw,18px);line-height:1.3;white-space:nowrap}
.hero-c i{grid-column:2;font-family:var(--en);font-style:italic;font-size:12.5px;line-height:1.35;color:var(--dim);white-space:nowrap}
@media (min-width:900px) and (max-width:1199px){
  .hero-c{display:grid;grid-template-columns:repeat(2,max-content);row-gap:10px}
  .hero-c li:nth-child(3){padding-left:0;border-left:0}
}
.hero-g{margin:clamp(12px,2.2vh,22px) 0 0;max-width:31em;font-size:13.5px;line-height:1.75;color:var(--ink-2)}
.hero-g a{display:inline-flex;align-items:baseline;gap:5px;margin-left:6px;font-family:var(--sans);font-size:13px;color:var(--ink);white-space:nowrap}
.hero-g a:hover .lnk,.hero-g a:focus-visible .lnk{background-size:100% 2px}
/* 咖啡杯小图标 .cup-i、小咖啡钮 .cf-btn 在 shared/coffee.css(读书页也用) */
.hero-by{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(14px,2.8vh,32px);padding:6px 14px 6px 6px;border:1px solid var(--line-2);border-radius:99px;font-family:var(--sans);font-size:13px;color:var(--ink-2);background:var(--paper);transition:border-color .25s,transform .3s var(--ease)}
.hero-by:hover{border-color:var(--ink);transform:translateY(-2px)}
.hero-by .ys{display:grid;place-items:center;width:28px;height:28px;border:2px solid var(--ink);font-style:normal;font-family:var(--title);font-weight:900;font-size:11.5px;line-height:1;background:var(--paper)}
.hero-by b{font-weight:600;color:var(--ink)}
/* 笔记本屏矮:站名大字收一点;再矮,信条只留中文。这样常见笔记本上首屏还是正好一屏,「往下滚,收线」看得见 */
@media (max-height:800px) and (min-width:900px){.hero-n{font-size:clamp(50px,min(8.6vw,12vh),156px)}}
@media (max-height:700px) and (min-width:900px){.hero-c i{display:none}.hero-g{margin-top:10px}.hero-by{margin-top:12px}}
/* 说辞右边那截空白:一面若隐若现的书墙(2026-11-07 要的:「右侧空白做一个透明度30%左右的这种书墙?若隐若现?」)。
   真书封一张张淡入淡出、淡没了就换下一本;整面三成上下的淡,左边和上下沿渐隐进纸里;压在说辞底下,点不到 */
.sp1 .pr{position:relative}
.hwall{position:absolute;top:0;bottom:0;right:0;z-index:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 2s var(--ease);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 36%),linear-gradient(180deg,transparent,#000 13%,#000 84%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 36%),linear-gradient(180deg,transparent,#000 13%,#000 84%,transparent);mask-composite:intersect}
.hwall.in{opacity:.32}
.hwall[hidden]{display:none}
.hw-g{position:absolute;left:-6%;top:-12%;display:grid;gap:var(--gap);transform:rotate(-5deg);transform-origin:50% 0}
.hw{display:block;width:var(--cw);transform:translateY(calc(var(--y) * var(--cw) * .75))}
.hw .rv-cv{box-shadow:0 12px 20px -12px rgba(0,0,0,.6)}
.hw .rv-cs{display:none}
html.live .hw{animation:hwfade var(--t) ease-in-out var(--d) infinite}
@keyframes hwfade{0%,100%{opacity:0}24%,66%{opacity:1}}
/* 夜里白书封太跳:再淡一点、压暗一点,只留个影子 */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hwall.in{opacity:.17}:root:not([data-theme="light"]) .hw-g{filter:brightness(.72) saturate(.75)}}
:root[data-theme="dark"] .hwall.in{opacity:.17}
:root[data-theme="dark"] .hw-g{filter:brightness(.72) saturate(.75)}
@media (max-width:899px){.hwall{display:none}}

/* ── 翻天的那一行 ── */
.dayrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0;font-family:var(--sans);font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}
.dayrow b{font-weight:600;color:var(--ink)}
.dayrow .pen{font-size:17px}
.flip{margin-left:auto;display:flex;gap:4px}
.flip button{background:none;border:0;padding:2px 8px;font-family:var(--sans);font-size:13px;color:var(--ink)}
.flip button[disabled]{color:var(--faint);cursor:default}

/* ── 看板(第二页):今天这一竿,几张轮着翻。左页是画面,右页是字,底下一排目录,进度条走完翻下一张 ──
   --vis 画面高:跟着屏幕高走,一屏放得下 */
.sp-board{--vis:clamp(250px,calc(100vh - var(--bar) - 236px),620px);--vis:clamp(250px,calc(100svh - var(--bar) - 236px),620px);
  grid-template-rows:auto minmax(0,1fr) auto;min-height:calc(100vh - var(--bar));min-height:calc(100svh - var(--bar))}
.bo-head{grid-column:1 / -1;display:grid;grid-template-columns:var(--spine) minmax(0,1fr);align-items:baseline;padding-top:clamp(16px,2.6vh,30px)}
.bo-k{margin:0;padding:0 clamp(24px,3.2vw,52px);display:flex;align-items:baseline;gap:12px}
.bo-k .pen{font-size:clamp(19px,1.6vw,24px)}
.bo-k small{font-family:var(--sans);font-size:12px;color:var(--dim);letter-spacing:.06em}
.bo-head #dayrow{padding:0 var(--gut) 0 clamp(24px,3vw,48px)}
.bo-stage{grid-column:1 / -1;display:grid;min-height:0;transform-origin:var(--spine) 50%}
.sl{grid-area:1 / 1;display:grid;grid-template-columns:var(--spine) minmax(0,1fr);align-items:center;min-height:0;opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s}
.sl.on{opacity:1;visibility:visible;transition:opacity .5s .06s,visibility 0s}
.sl-v{position:relative;height:var(--vis);margin:clamp(10px,1.6vh,20px) clamp(24px,3.2vw,52px);transform:translate3d(30px,0,0);transition:transform .8s var(--ease)}
.sl.on .sl-v{transform:none}
.sl.was .sl-v{transform:translate3d(-30px,0,0)}
.sl-t{min-width:0;padding:clamp(10px,1.6vh,20px) var(--gut) clamp(10px,1.6vh,20px) clamp(24px,3vw,48px);display:flex;flex-direction:column;justify-content:center;max-height:calc(var(--vis) + 40px);overflow:hidden}
.sl-t .ttl-h{font-size:clamp(26px,3.4vw,54px);font-size:min(clamp(26px,3.4vw,54px),calc(100cqw / var(--n,8)))}
.sl-t .ttl-en{font-size:clamp(16px,1.4vw,21px)}
.sl-t .ttl-q{font-size:clamp(15px,1.15vw,18px);margin-top:.8em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.sl-t .ttl-end{display:none}
.sl-ask{margin:1em 0 0;font-family:var(--title);font-weight:900;font-size:clamp(16px,1.35vw,20px);line-height:1.5;max-width:24em}
.sl-ask .para-h{font-weight:400}
.sl-go{display:inline-block;margin-top:1.1em;font-family:var(--title);font-weight:900;font-size:clamp(15px,1.2vw,18px);align-self:flex-start}
.tag-pen{font-size:clamp(17px,1.5vw,21px);line-height:1}
/* 目录:一张一格,正在看的那格上面一道进度条 */
/* 标签和按钮只放右页:中缝上吊着鱼线和钩子,底栏横穿过去会被线压住 */
.bo-foot{grid-column:1 / -1;display:flex;align-items:flex-end;gap:clamp(12px,1.6vw,28px);padding:0 var(--gut) clamp(16px,2.6vh,28px) calc(var(--spine) + clamp(24px,3vw,48px))}
.bo-tabs{list-style:none;margin:0;padding:0;flex:1;display:flex;gap:clamp(10px,1.4vw,22px);min-width:0}
.bo-tabs li{flex:1 1 0;min-width:0}
.bo-tab{position:relative;display:block;width:100%;text-align:left;background:none;border:0;border-top:1.5px solid var(--line-2);padding:10px 0 0;color:var(--dim);font:inherit;cursor:pointer;transition:color .25s}
.bo-tab:hover{color:var(--ink)}
.bo-tab.on{color:var(--ink);border-top-color:var(--line-2)}
.bo-tk{display:flex;align-items:baseline;gap:8px;font-family:var(--title);font-weight:900;font-size:clamp(13.5px,1.05vw,15.5px);line-height:1.35;white-space:nowrap}
.bo-tk .n{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.06em;color:var(--dim);font-variant-numeric:tabular-nums}
.bo-tab small{display:block;margin-top:2px;font-family:var(--sans);font-size:12px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bo-pg{position:absolute;left:0;right:0;top:-1.5px;height:2px;overflow:hidden;opacity:0}
.bo-tab.on .bo-pg{opacity:1}
.bo-pg i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.bo-tab.on .bo-pg i{animation:bofill var(--slide,7000ms) linear forwards;animation-play-state:paused}
.sp-board.run .bo-tab.on .bo-pg i{animation-play-state:running}
html:not(.live) .bo-tab.on .bo-pg i{animation:none;transform:scaleX(1)}
@keyframes bofill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bo-ctl{display:flex;align-items:center;gap:12px;flex:none;padding-bottom:2px}
.bo-n{display:flex;align-items:baseline;gap:4px;font-family:var(--sans);font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.bo-n b{font-family:var(--title);font-weight:900;font-size:24px;line-height:1;color:var(--ink)}
.bo-arw{display:flex;gap:6px}
.bo-arw button,.bo-pause{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);background:var(--paper);display:grid;place-items:center;padding:0 0 2px;font-size:19px;line-height:1;color:var(--ink);transition:border-color .2s,transform .2s var(--ease)}
.bo-pause{font-size:12px;padding:0;font-family:var(--sans);font-weight:700}
.bo-arw button:hover,.bo-pause:hover{border-color:var(--ink);transform:scale(1.06)}
.bo-pause[aria-pressed="true"]{border-color:var(--pen);color:var(--pen)}
html:not(.live) .bo-pause{display:none}

/* 书系那张:左页一整面书皮墙,斜着摆、出边就裁;右下角一个大数字 */
.wl .rv-cs{display:none}
.wallbox{position:absolute;inset:0;display:block;overflow:hidden;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.wall{position:absolute;left:-8%;right:-14%;top:-16%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 12px;padding:10px;transform:rotate(-5deg)}
.wl{display:block;box-shadow:0 12px 20px -12px rgba(0,0,0,.65);transform:translate3d(0,calc(var(--y,0) * 34%),0) rotate(var(--r,0deg));transition:transform .9s var(--ease),box-shadow .3s}
.sl-s.on .wl{transform:translate3d(0,calc(var(--y,0) * 34% - (var(--c,0) - 1.5) * 6px),0) rotate(var(--r,0deg))}
.wl .rv-cv{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.wallbox:hover .wl{box-shadow:0 18px 26px -14px rgba(0,0,0,.7)}
.wall-cap{position:absolute;left:10px;bottom:8px;z-index:2;background:var(--paper);padding:1px 8px;font-family:var(--sans);font-size:11px;color:var(--dim);letter-spacing:.04em}
.wall-n{position:absolute;right:0;bottom:0;z-index:2;display:flex;align-items:baseline;gap:4px;padding:10px 16px 8px 18px;background:var(--paper);font-family:var(--sans);font-size:13px;color:var(--dim)}
.wall-n b{font-family:var(--title);font-weight:900;font-size:clamp(34px,3.6vw,56px);line-height:.9;color:var(--ink)}

/* 精读那张:一张大书封,歪一点 */
.sl-cv{position:absolute;top:0;bottom:0;left:50%;aspect-ratio:3/4;max-width:100%;transform:translateX(-50%) rotate(-2deg);box-shadow:0 26px 40px -26px rgba(0,0,0,.6);transition:transform .5s var(--ease)}
.sl-cv:has(.rv-real){aspect-ratio:2/3}
.sl-cv:hover{transform:translateX(-50%) rotate(0) translateY(-4px)}
.sl-cv .rv-cv{width:100%;height:100%;aspect-ratio:auto}
.sl-chs{list-style:none;margin:.9em 0 0;padding:0;max-width:30em;font-size:14px;line-height:1.5}
.sl-chs a{display:grid;grid-template-columns:2.2em minmax(0,1fr);padding:5px 0;border-top:1px solid var(--line)}
.sl-chs li:last-child a{border-bottom:1px solid var(--line)}
.sl-chs .n{font-family:var(--sans);font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums;padding-top:2px}
/* 看板第五张「看展」:左页小展墙(当期挂大的,其余三间一根线),右页「墙上还有」 */
.xw{--av:calc(var(--vis) - 130px);position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,4vh,40px)}
.xw .sw-hang{margin-top:0}
.xw-main{--ph:calc(var(--av) * .64)}
.xw-rest{--ph:calc(var(--av) * .36)}
.xw-rest .sw-term{top:-8px;right:-8px;font-size:10.5px;padding:0 6px 1px}
.xw-rest .sw-go{font-size:13px}
.xw .sw-frm:hover .sw-pend{transform:none}
.xw .sw-frm:hover .sw-mat{box-shadow:0 24px 32px -16px rgba(0,0,0,.6)}
.xw .sw-frm:hover .sw-go{opacity:1;transform:none}
.sl-xk{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:1em 0 0;font-size:13px}
.sl-xk .para-h{margin:0}
.sl-xk a{font-family:var(--sans);font-size:12.5px;color:var(--dim)}
.sl-xl{margin-top:.4em}
.sl-xl .w{min-width:0}
.sl-xl small{margin-left:10px;font-family:var(--sans);font-size:11.5px;color:var(--dim)}
@media (max-height:760px) and (min-width:900px){.sl-x .ttl-q{-webkit-line-clamp:2}.sl-xk{margin-top:.6em}.sl-xl a{padding:3px 0}.sl-x .sl-go{margin-top:.7em}}
@media (max-height:680px) and (min-width:900px){.sl-x .ttl-q{display:none}}

/* ── 书廊:八本书立成一排(照旧站书封走廊,用 CSS 3D 自己写,不引库)。正中那本正对着你,后面的斜着排到中缝 ── */
.cr{position:absolute;inset:0;touch-action:pan-y;outline:none;cursor:grab;user-select:none;-webkit-user-select:none}
.cr.dragging{cursor:grabbing}
.cr:focus-visible{outline:2px solid var(--pen);outline-offset:6px}
.cr-scene{position:absolute;left:0;right:0;top:0;bottom:46px;perspective:1300px;perspective-origin:50% 40%}
.cr-bk{position:absolute;left:0;bottom:0;border:0;padding:0;background:none;color:inherit;cursor:pointer;transform-style:preserve-3d;
  transition:transform .75s cubic-bezier(.2,.8,.15,1),filter .5s,opacity .5s;will-change:transform}
.cr-f{position:absolute;inset:0;display:block;box-shadow:0 22px 34px -22px rgba(0,0,0,.65);background:var(--paper-2)}
.cr-f .rv-cv{width:100%;height:100%;aspect-ratio:auto}
.cr-f .rv-cs{display:none}
/* 书口:书右边露出一道纸页 */
.cr-bk::after{content:"";position:absolute;top:2px;bottom:2px;right:-7px;width:7px;background:repeating-linear-gradient(90deg,#efebe1 0 1px,#d9d3c5 1px 2px);transform-origin:0 50%;transform:rotateY(60deg);box-shadow:inset -1px 0 0 rgba(0,0,0,.12)}
.cr-bk.l::after{right:auto;left:-7px;transform-origin:100% 50%;transform:rotateY(-60deg)}
/* 地上的影子 */
.cr-bk::before{content:"";position:absolute;left:6%;right:6%;bottom:-14px;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.28),transparent);transform:rotateX(70deg);pointer-events:none}
.cr-bk.l,.cr-bk.r{filter:brightness(.9) saturate(.9)}
.cr-bk.on{filter:none}
.cr-bk.on .cr-f{box-shadow:0 34px 46px -26px rgba(0,0,0,.7)}
.cr-bk.r:hover{filter:brightness(1)}
.cr-cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;gap:12px;margin:0;font-family:var(--sans);font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.cr-n b{font-family:var(--title);font-weight:900;font-size:24px;color:var(--ink);margin-right:3px}
.cr-g{font-size:18px}
.cr-hint{margin-left:auto;font-size:16px;transition:opacity .5s}
.cr.touched .cr-hint{opacity:.35}
.cr-ttl{min-height:0}
.cr-ttl .ttl-q{-webkit-line-clamp:2}
.cr-list{list-style:none;margin:1em 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(14px,1.6vw,26px);max-width:34em}
.cr-lk{display:block;margin-bottom:3px;font-family:var(--sans);font-size:11.5px;letter-spacing:.08em;color:var(--dim)}
.cr-lg ol{list-style:none;margin:0;padding:0}
.cr-lg button{display:grid;grid-template-columns:2em minmax(0,1fr);width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:4px 0;font:inherit;font-size:13.5px;line-height:1.5;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:color .2s,padding .3s var(--ease)}
.cr-lg button .n{font-family:var(--sans);font-size:11px;color:var(--dim);padding-top:2px}
.cr-lg button:hover{color:var(--ink)}
.cr-lg button.on{color:var(--pen);padding-left:6px}
.cr-lg button.on .n{color:var(--pen)}
.cd-from{margin:0;padding-top:.6em;font-family:var(--sans);font-size:12px;color:var(--dim)}
.cd-from b{font-weight:600;color:var(--ink-2)}

/* ── 本周书系的书架加摘要 ── */
.sec-k{margin:0 0 .9em;font-family:var(--sans);font-size:12.5px;letter-spacing:.12em;color:var(--dim)}
.sec-k .pen{font-size:17px;letter-spacing:0;margin-left:8px}
#digest>.pact:first-child{margin:0 0 clamp(20px,3vh,32px)}   /* 书系页右栏最上面的约定卡(推荐,还不是精读),和下面「留一个问题」隔开 */
.ask{margin:0;font-family:var(--title);font-weight:900;font-size:clamp(24px,3vw,44px);line-height:1.3;max-width:15em}
.para{margin:1.1em 0 0;font-size:clamp(16px,1.25vw,18px);line-height:1.9;max-width:33em}
.para-h{display:block;font-family:var(--sans);font-size:12.5px;letter-spacing:.1em;color:var(--dim);margin-bottom:.2em}
.more{display:inline-block;margin-top:1.4em;font-family:var(--title);font-weight:900;font-size:clamp(16px,1.4vw,20px)}
.note{margin:.4em 0 1em;font-size:14.5px;color:var(--ink-2)}
.sp2 .rv-shelf1{min-height:296px}
/* 先摊开一整面书封,这套多少本一眼看全;落定一秒多,一本本飞进书架、转身露出书脊
   (2026-11-07 要的:「应该有图2的类似41本大预览,然后变成书架上的书的一个动画」)。只在动着的时候有 */
.sp2 .pl{position:relative}
.sh-pre{position:absolute;z-index:3;overflow:hidden;pointer-events:none}
.sh-g{position:absolute;display:grid;grid-template-columns:repeat(var(--c),var(--w));gap:var(--g)}
.sh-t{display:block;width:var(--w);transform:rotate(var(--r));transform-origin:0 0;box-shadow:0 10px 18px -12px rgba(0,0,0,.6)}
.sh-t .rv-cs{display:none}
.sh-t .rv-cv{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.sp2.in .sh-t{animation:shin .7s var(--ease) backwards;animation-delay:calc(var(--i) * 14ms)}
@keyframes shin{from{opacity:0;transform:translate3d(0,26px,0) rotate(var(--r))}}
.sh-n{position:absolute;right:0;bottom:0;margin:0;display:flex;align-items:baseline;gap:5px;padding:10px 16px 8px 18px;background:var(--paper);font-family:var(--sans);font-size:13px;color:var(--dim);transition:opacity .35s}
.sh-n b{font-family:var(--title);font-weight:900;font-size:clamp(38px,4vw,62px);line-height:.9;color:var(--ink)}
.sh-n small{margin-left:8px;font-family:var(--en);font-style:italic;font-size:14px;letter-spacing:0}
.going .sh-n{opacity:0}
.pl.pre .rv-b1{opacity:0}
.pl.pre .rv-shelf1{border-bottom-color:transparent}
.sp2 .rv-shelf1{transition:border-color .6s}
.pl.pre #sh-cap,.pl.pre .sh-card{opacity:0}
.pl.going .rv-b1{transition:width .6s var(--ease),opacity .3s ease var(--d,0ms)}
#sh-cap,.sh-card{transition:opacity .6s}
.pl.going #sh-cap,.pl.going .sh-card{transition-delay:1.2s}
.sh-again{margin-left:14px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.sh-again .pen{margin-left:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.sh-again:hover .pen{text-decoration-thickness:2px}

/* ── 八本:今天四本、昨天四本,两排;点一本右边换全文 ── */
.eight{width:min(100%,clamp(300px,33vw,520px));margin:0 auto}
.eg-k{display:flex;align-items:baseline;gap:10px;margin:18px 0 8px;font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--dim)}
.eg-k:first-child{margin-top:0}
.eg-k .pen{font-size:17px;letter-spacing:0}
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.1vw,16px)}
.fr{display:block;background:none;border:0;padding:0;text-align:left;color:inherit;cursor:pointer}
.fr-cv{display:block;box-shadow:0 12px 22px -18px rgba(0,0,0,.6);transition:transform .4s var(--ease),box-shadow .3s}
.fr-cv .rv-cv{aspect-ratio:2/3}
.fr:hover .fr-cv{transform:translateY(-5px) rotate(-1.2deg)}
.fr.on .fr-cv{outline:2px solid var(--pen);outline-offset:4px}
.fr-k{display:flex;align-items:baseline;gap:6px;margin-top:7px;font-family:var(--sans);font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden}
.fr-k b{font-family:var(--title);font-weight:900;font-size:14px;color:var(--ink)}
.fr.on .fr-k b{color:var(--pen)}
.sp3 .cv-cap{width:min(100%,clamp(300px,33vw,520px))}
.from{margin:1.2em 0 0;font-family:var(--sans);font-size:12.5px;color:var(--dim)}
.from b{font-weight:600;color:var(--ink-2)}
.from a{color:var(--ink)}
html.live .fr-cv{transform:rotate(calc(var(--rise,0) * -6deg)) translate3d(0,calc(var(--rise,0) * 40px),0)}

/* ── 思想家页:左边头像在关键词场里,右边那本书和横轴 ── */
.tfbig{width:min(100%,clamp(300px,36vw,560px));aspect-ratio:1/1.02;max-height:calc(100svh - var(--bar) - 210px);margin:0 auto}
.who{display:flex;flex-direction:column;gap:2px;width:min(100%,clamp(220px,25vw,380px));margin:12px auto 0;text-align:center}
.who b{font-family:var(--title);font-weight:900;font-size:clamp(24px,2.4vw,36px);line-height:1.2}
.who i{font-family:var(--en);font-style:italic;font-size:17px;color:var(--ink-2)}
.who small{font-family:var(--sans);font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.sp4 .cv-cap{width:min(100%,clamp(260px,30vw,440px));margin-left:auto;margin-right:auto;text-align:center}

/* ── 精读 ── */
.bigcover{width:min(100%,clamp(220px,25vw,380px),calc((100svh - 210px) * .66));margin-left:auto;margin-right:auto;box-shadow:0 18px 34px -22px rgba(0,0,0,.5)}
.bigcover .rv-cv{aspect-ratio:3/4}
.bigcover .rv-real,.fr-cv .rv-cv{aspect-ratio:2/3}
.cv-cap{margin:10px auto 0;width:min(100%,clamp(220px,25vw,380px));font-family:var(--sans);font-size:12px;color:var(--dim)}
.chs{list-style:none;margin:1.2em 0 0;padding:0;max-width:40em}
.chs a{display:grid;grid-template-columns:2.4em minmax(0,1fr);gap:4px;padding:7px 0;border-top:1px solid var(--line)}
.chs li:last-child a{border-bottom:1px solid var(--line)}
.chs .n{font-family:var(--sans);font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums;padding-top:3px}
.chs .t{font-size:15.5px;line-height:1.55}
/* 精读往回翻:书封两边圆按钮,底下一排小书脊(和读书页书架同色同比例),翻到哪本哪本抽出来一点 */
.gstage{position:relative;--gcw:min(100%,clamp(220px,25vw,380px),calc((100svh - 290px) * .66))}
.gstage .bigcover{width:var(--gcw)}
.gface{display:block;backface-visibility:hidden}
.g-arw{position:absolute;top:50%;z-index:2;width:40px;height:40px;margin-top:-20px;border-radius:50%;border:1px solid var(--line-2);background:var(--paper);display:grid;place-items:center;padding:0 0 3px;font-size:23px;line-height:1;color:var(--ink);cursor:pointer;transition:border-color .2s,color .2s,transform .2s var(--ease),opacity .2s}
.g-prev{left:max(0px,calc(50% - var(--gcw) / 2 - 62px))}
.g-next{right:max(0px,calc(50% - var(--gcw) / 2 - 62px))}
.g-arw:hover:not([disabled]){border-color:var(--ink);color:var(--pen);transform:scale(1.08)}
.g-arw[disabled]{opacity:.28;cursor:default}
.gshelf{display:flex;align-items:flex-end;justify-content:center;gap:14px;margin:32px auto 0;width:var(--gcw)}
.gsp{display:flex;align-items:flex-end;gap:2px;padding:0 6px;border-bottom:3px solid var(--ink)}
.gsp button{position:relative;flex:none;width:var(--w);height:var(--h);padding:0;border:0;background:var(--cb);cursor:pointer;box-shadow:inset 1px 0 0 rgba(255,255,255,.1),inset -1px 0 0 rgba(0,0,0,.2);transition:transform .3s var(--ease)}
.gsp button:hover{transform:translateY(-4px)}
.gsp button.on{transform:translateY(-9px)}
.gsp button.on::before{content:"";position:absolute;left:50%;top:-11px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--pen)}
.gn{padding-bottom:1px;font-family:var(--sans);font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.gn b{font-family:var(--title);font-weight:900;font-size:20px;color:var(--ink)}
.g-more{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 26px;margin:1.4em 0 0}
.g-more .more{margin-top:0}
.g-all{font-family:var(--sans);font-size:13.5px;color:var(--ink-2)}

/* ── 往期 ── */
.sp-past h2,.sp-about h2{margin:0;font-family:var(--title);font-weight:900;font-size:clamp(22px,2.5vw,36px);line-height:1.25}
.ledger{list-style:none;margin:0;padding:0;grid-column:1 / -1}
.ledger a{display:grid;grid-template-columns:var(--spine) minmax(0,1fr);align-items:baseline;padding:12px 0;border-top:1px solid var(--line)}
.ledger .d{justify-self:end;padding-right:clamp(24px,3vw,48px);font-family:var(--sans);font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.ledger .d .pen{font-size:16px;margin-right:8px}
.ledger .w{padding:0 var(--gut) 0 clamp(24px,3vw,48px);min-width:0}
.ledger .w b{font-family:var(--title);font-weight:900;font-size:clamp(17px,1.7vw,24px);line-height:1.35}
.ledger .w small{display:block;font-family:var(--sans);font-size:12.5px;color:var(--dim)}
.ledger a{position:relative;transition:transform .4s var(--ease)}
.ledger a::after{content:"";position:absolute;left:calc(var(--spine) - 7px);top:-1px;width:15px;height:28px;background:var(--pen);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 42'%3E%3Cpath d='M9 0V26a8 8 0 0 0 11 0V21l-4 4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 42'%3E%3Cpath d='M9 0V26a8 8 0 0 0 11 0V21l-4 4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity:0;transform:translateY(-16px);transition:opacity .2s,transform .4s var(--ease);pointer-events:none}
@media (hover:hover){.ledger a:hover{transform:translateX(12px)}.ledger a:hover::after{opacity:1;transform:none}}
.sp-past{grid-template-rows:auto auto 1fr}
.ledger-blank{grid-column:1 / -1;min-height:40px;background:repeating-linear-gradient(var(--line) 0 1px,transparent 1px 66px);border-top:0}
.sp-past .pl{text-align:right}
.sp-past .pr,.sp-past .pl{padding-bottom:16px}

/* ── 关于 Yuan소원:英文在前、中文在后;右页是看展、谱系图集、读论文三扇门,栏目和接下来 ── */
.sp-about{grid-template-rows:auto auto 1fr auto}
.ab-l{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.ab-n{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(48px,6.4vw,104px);line-height:.95;letter-spacing:-.02em}
.ab-n .ko{font-weight:700;font-size:.82em;margin-left:.06em}
/* 头衔(11-08):粗宋一行,英文斜体跟一行;底下照旧是博士候选人三行小字 */
.ab-title{margin:.75em 0 0;display:flex;flex-direction:column;gap:2px}
.ab-title b{font-family:var(--title);font-weight:900;font-size:clamp(17px,1.5vw,22px);line-height:1.35;letter-spacing:.04em}
.ab-title i{font-family:var(--en);font-style:italic;font-size:clamp(13.5px,1vw,15.5px);color:var(--ink-2)}
.ab-title+.ab-role{margin-top:.6em}
.ab-role{margin:.9em 0 0;font-family:var(--sans);font-weight:600;font-size:clamp(11px,.85vw,12.5px);line-height:2;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.ab-en{margin:1.4em 0 0;max-width:27em;font-family:var(--serif);font-size:clamp(16px,1.25vw,19px);line-height:1.7}
.ab-zh{margin:.9em 0 0;max-width:27em;font-size:14.5px;line-height:1.85;color:var(--ink-2)}
.ab-sns{list-style:none;margin:1.6em 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.ab-sns li{display:flex;align-items:baseline;gap:8px;padding:6px 12px;border:1px dashed var(--line-2);font-family:var(--sans);font-size:12.5px;color:var(--dim)}
.ab-sns b{font-weight:600;color:var(--ink-2)}
.ab-sns small{font-size:11px;color:var(--faint)}
/* 有了真链接的那几格(2026-11-07 给了账号):实线框,整格可点,停上去反白 */
.ab-sns li.on{padding:0;border-style:solid}
.ab-sns li.on a{display:flex;align-items:baseline;gap:8px;padding:6px 12px;color:inherit;transition:background .2s,color .2s}
.sns-i{flex:none;width:18px;height:18px;align-self:center}
.sns-i text{font-family:var(--sans);font-size:6.5px;font-weight:700;letter-spacing:-.03em}
.sns-b{fill:none;stroke:#00a1d6;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.ab-sns li.on i{font-style:normal;color:var(--ink-2)}
.ab-sns li.on a:hover,.ab-sns li.on a:focus-visible{background:var(--ink);color:var(--paper)}
.ab-sns li.on a:hover b,.ab-sns li.on a:hover small,.ab-sns li.on a:hover i,.ab-sns li.on a:focus-visible b,.ab-sns li.on a:focus-visible small,.ab-sns li.on a:focus-visible i{color:var(--paper)}
.ab-doors{list-style:none;margin:0;padding:0;max-width:34em}
.ab-doors li{display:grid;grid-template-columns:2.6em minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;align-items:baseline;padding:14px 0;border-top:1.5px dashed var(--line-2)}
.ab-doors li:last-child{border-bottom:1.5px dashed var(--line-2)}
.ab-doors .n{grid-row:1 / 3;font-family:var(--sans);font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.ab-doors b{font-family:var(--title);font-weight:900;font-size:clamp(20px,1.9vw,28px);line-height:1.2}
.ab-doors i{margin-left:10px;font-family:var(--en);font-style:italic;font-size:15px;color:var(--dim)}
.ab-doors small{grid-column:2;display:block;margin-top:3px;font-family:var(--sans);font-size:12.5px;color:var(--dim)}
.ab-doors .chip{grid-column:3;grid-row:1}
/* 已经开放的入口(看展):整行能点,实线隔开,签子是实框;停上去签子反白、大字下面红笔划一道 */
.ab-lock{display:inline-block;width:.6em;height:.72em;margin-right:.28em;vertical-align:-.02em;fill:none;stroke:currentColor;stroke-width:1.7}
.ab-doors li.on{display:block;padding:0;border-top-style:solid}
.ab-doors li.on>a{display:grid;grid-template-columns:2.6em minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;align-items:baseline;padding:14px 0;color:inherit}
.ab-doors li.on .chip{border-color:var(--ink);color:var(--ink);transition:background .2s,color .2s}
.ab-doors li.on a:hover .chip,.ab-doors li.on a:focus-visible .chip{background:var(--ink);color:var(--paper)}
.ab-doors li.on a:hover .lnk,.ab-doors li.on a:focus-visible .lnk{background-size:100% 2px}
/* 四个信条(左)和请我喝杯咖啡(右):左边贴着中缝右对齐,和右边的「这里还有」对称 */
.sp-about>.ab-l,.sp-about>.ab-r{padding-bottom:clamp(16px,2.4vw,36px)}
.ab-creed,.ab-give{padding-top:clamp(10px,2vw,28px);padding-bottom:clamp(10px,2vw,28px)}
.ab-creed{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.ab-c{list-style:none;margin:0;padding:0;width:min(100%,27em)}
.ab-c li{display:grid;grid-template-columns:minmax(0,1fr) auto 2.4em;column-gap:14px;align-items:baseline;padding:11px 0;border-top:1.5px dashed var(--line-2)}
.ab-c li:last-child{border-bottom:1.5px dashed var(--line-2)}
.ab-c i{grid-column:1;grid-row:1;font-family:var(--en);font-style:italic;font-size:15px;color:var(--dim)}
.ab-c b{grid-column:2;grid-row:1;font-family:var(--title);font-weight:900;font-size:clamp(22px,2.1vw,32px);line-height:1.2}
.ab-c .n{grid-column:3;grid-row:1;font-family:var(--sans);font-size:11.5px;color:var(--pen);font-variant-numeric:tabular-nums}
.ab-gp{margin:0;max-width:30em;font-size:clamp(15px,1.15vw,17.5px);line-height:1.95}
.ab-sign{margin:.5em 0 0;font-family:var(--sans);font-size:13px;color:var(--dim)}
.ab-sign .ko{margin-left:.1em}
.ab-gbs{display:flex;flex-wrap:wrap;gap:10px 12px;margin:18px 0 0}   /* 咖啡钮(11-08 起);充电钮只在 front.js 的 GIVE_ON 打开时跟在后面 */
.ab-gb{display:inline-flex;align-items:center;gap:8px;margin-top:0;padding:8px 16px 8px 12px;border:1.5px solid var(--ink);border-radius:99px;font-family:var(--sans);font-size:14px;color:var(--ink);transition:background .2s,color .2s,transform .3s var(--ease)}
.ab-gb .cup-i{width:16px;height:21px}
.ab-gb i{font-style:normal}
.ab-gb:hover,.ab-gb:focus-visible{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
/* 最底下一行:邮箱 */
.sp-about .coda{padding-bottom:clamp(18px,3vh,32px)}
.ab-mail{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;padding:0 var(--gut) clamp(32px,5vh,56px) calc(var(--spine) + clamp(24px,3vw,48px));font-family:var(--sans);font-size:13.5px;color:var(--dim)}
.ab-mail a{font-weight:600;color:var(--ink);background:linear-gradient(var(--pen),var(--pen)) 0 100%/0 2px no-repeat;transition:background-size .35s var(--ease)}
.ab-mail a:hover,.ab-mail a:focus-visible{background-size:100% 2px}
.mail-i{flex:none;width:24px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-2)}
.sp-about .idx{margin-top:clamp(22px,3vw,40px);max-width:34em}
.cols{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(14px,1.6vw,24px)}
.cols li{min-width:0;border-top:1.5px solid var(--ink)}
.cols a{display:block;padding:8px 0 0;transition:transform .25s var(--ease)}
.cols a:hover{transform:translateY(-2px)}
.cols .n{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.08em;color:var(--dim);font-variant-numeric:tabular-nums}
.cols .tag{margin:6px 6px 0 0;font-size:12.5px;padding:0 6px;white-space:nowrap}
.cols small{display:block;margin-top:5px;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--dim)}
.cols small span{display:block}
.cols small span+span{color:var(--ink-2)}
.next{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:20px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.next .pen{font-size:16px}
.next span+span::before{content:"";display:inline-block;width:5px;height:5px;margin-right:7px;border-radius:50%;background:var(--line-2);vertical-align:2px}
.coda{grid-column:1 / -1;align-self:end;margin:0;padding:0 var(--gut) clamp(58px,9vh,96px) calc(var(--spine) + clamp(24px,3vw,48px));font-family:var(--title);font-weight:900;font-size:clamp(34px,6.2vw,100px);line-height:1.08;letter-spacing:-.01em}

/* ── 看展(2026-11-07 加的一页):左页一面挂画墙,每间展的封面挂在一枚红钩上,一个栏目一根挂镜线;右页是展签目录。
   停在目录哪一行(或哪张画),那张画扶正、别的淡下去,目录下面那段换成它的简介。被线吊上来时画跟着歪,落定晃两下才挂稳。
   画的高度按屏幕高算(两排画、一屏装下),屏幕矮了画跟着小,不出屏;名单加了栏目多出一排,画再小一点,小到底就让这页长一点 ── */
.sp-show .pl,.sp-show .pr{padding-top:clamp(28px,4vh,56px);padding-bottom:clamp(28px,4vh,56px)}
.sp-show .pl{display:flex;flex-direction:column}
.sw-wall{--ph:max(110px,min(clamp(120px,17vw,270px),calc((100vh - var(--bar) - 320px) / var(--rows,2))));
  --ph:max(110px,min(clamp(120px,17vw,270px),calc((100svh - var(--bar) - 320px) / var(--rows,2))));
  flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,3vh,34px);padding-bottom:22px}
.sw-rail{display:flex;align-items:baseline;gap:10px;margin:0;font-family:var(--sans);font-size:12.5px;letter-spacing:.06em;color:var(--dim)}
.sw-rail a{font-family:var(--title);font-weight:900;font-size:15px;letter-spacing:.04em;color:var(--ink)}
.sw-rail span+span::before{content:"";display:inline-block;width:14px;height:1px;margin:0 10px 0 0;background:var(--line-2);vertical-align:middle}
/* 挂镜线:一根墨线,两头各钉一颗小钉 */
.sw-hang{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:clamp(18px,2.2vw,34px);margin-top:7px;padding:0 clamp(4px,.7vw,10px);border-top:1.5px solid var(--ink)}
.sw-hang::before,.sw-hang::after{content:"";position:absolute;top:-4.5px;width:6px;height:6px;border:1.5px solid var(--ink);border-radius:50%;background:var(--paper)}
.sw-hang::before{left:-3px}.sw-hang::after{right:-3px}
.sw-frm{--ar:.75;--m:7px;position:relative;display:block;flex:var(--ar) 1 0;min-width:0;max-width:calc(var(--ph) * var(--ar) + var(--m) * 2 + 3px);padding-top:16px;color:inherit;transition:opacity .35s,filter .35s}
.sw-frm .sw-hk{position:absolute;left:50%;top:0;width:12px;height:23px;margin-left:-7.9px;background:var(--pen);z-index:2;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 42'%3E%3Cpath d='M9 0V26a8 8 0 0 0 11 0V21l-4 4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 42'%3E%3Cpath d='M9 0V26a8 8 0 0 0 11 0V21l-4 4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
.sw-frm .sw-pend{position:relative;display:block;padding-top:18px;transform-origin:50% 0;transform:rotate(var(--tilt,0deg));transition:transform .8s cubic-bezier(.3,1.55,.45,1)}
.sw-frm .sw-wire{position:absolute;left:12%;top:0;width:76%;height:18px;overflow:visible}
.sw-frm .sw-wire path{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sw-frm .sw-mat{position:relative;display:block;padding:var(--m);background:var(--paper);border:1.5px solid var(--ink);box-shadow:0 14px 22px -14px rgba(0,0,0,.55);transition:box-shadow .35s}
.sw-frm img{display:block;width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.sw-tc{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;width:100%;aspect-ratio:var(--ar);padding:10px;background:var(--paper-2);overflow:hidden}
.sw-tc b{font-family:var(--title);font-weight:900;font-size:clamp(14px,1.3vw,19px);line-height:1.25}
.sw-tc i{font-family:var(--en);font-style:italic;font-size:12px;color:var(--dim)}
/* 展期牌子:贴在画框右上角,斜一点;限时红底白字,长期墨框 */
.sw-term{position:absolute;z-index:3;top:-10px;right:-10px;padding:1px 8px 2px;font-family:var(--sans);font-size:11.5px;font-weight:700;font-style:normal;letter-spacing:.08em;line-height:1.6;white-space:nowrap;transform:rotate(5deg);box-shadow:0 5px 10px -5px rgba(0,0,0,.5)}
.sw-term.t-limited{background:var(--pen);color:#fff}
.sw-term.t-long{background:var(--paper);color:var(--ink);border:1.5px solid var(--ink)}
.sw-tm{display:inline-block;margin-left:10px;padding:0 6px;vertical-align:.25em;font-family:var(--sans);font-size:11px;font-weight:700;font-style:normal;letter-spacing:.06em;line-height:1.6;border:1.5px solid currentColor;white-space:nowrap}
.sw-tm.t-limited{color:var(--pen)}
.sw-tm.t-long{color:var(--ink-2)}
.sw-frm .sw-go{position:absolute;left:-20px;right:-20px;top:100%;margin-top:7px;text-align:center;font-size:16px;line-height:1.2;white-space:nowrap;opacity:0;transform:translateY(-5px);transition:opacity .25s,transform .35s var(--ease);pointer-events:none}
.sw-frm.on .sw-pend{transform:none}
.sw-frm.on .sw-mat{box-shadow:0 24px 32px -16px rgba(0,0,0,.6)}
.sw-frm.on .sw-go{opacity:1;transform:none}
.sp-show.has-on .sw-frm:not(.on){opacity:.38;filter:saturate(.3)}
html.live .sp-show .sw-frm .sw-pend{rotate:calc(var(--rise,0) * var(--sw,1) * 9deg)}
/* 读论文一页(11-08):借看展那页的墙和目录;只有两张竖海报,挂得比展封面大,一根挂镜线上并排 */
.sp-paper .sw-wall{--ph:max(140px,min(clamp(160px,21vw,330px),calc(100vh - var(--bar) - 310px)));--ph:max(140px,min(clamp(160px,21vw,330px),calc(100svh - var(--bar) - 310px)))}
.sp-paper .sw-hang{gap:clamp(26px,3.4vw,52px)}
.sp-paper .sw-frm img{aspect-ratio:auto;object-fit:contain}
.sp-paper .sw-term{top:-9px;right:-12px}
/* 右页:大字「看展」、名单里的导语、展签目录、简介、全部展 */
.sw-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 18px;margin:0;font-family:var(--title);font-weight:900;font-size:clamp(40px,5.2vw,80px);line-height:1.08;letter-spacing:.03em}
.sw-h i{font-family:var(--en);font-style:italic;font-weight:500;font-size:clamp(18px,1.9vw,27px);letter-spacing:0;color:var(--ink-2)}
.sw-lead{margin:.6em 0 0;max-width:30em;font-size:clamp(14.5px,1.1vw,16px);line-height:1.8;color:var(--ink-2)}
.sw-list{margin:clamp(16px,2.8vh,30px) 0 0;padding:0;max-width:40em}
.sw-list ol{list-style:none;margin:0;padding:0}
/* 目录一类一组,和左页的挂镜线一一对上:组头是类名(标题宋)+ 英文斜体 + 栏目 + 几间,第一行上面压一道粗墨线,像那根挂镜线 */
.sw-grp+.sw-grp{margin-top:clamp(14px,2.6vh,26px)}
.sw-gh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0;padding:0 0 7px;font-family:var(--sans);font-size:12.5px;font-weight:400;letter-spacing:.06em;color:var(--dim)}
.sw-gh .t{font-family:var(--title);font-weight:900;font-size:16px;letter-spacing:.04em;color:var(--ink)}
.sw-gh em{font-family:var(--en);font-style:italic;font-size:13.5px;letter-spacing:0;color:var(--ink-2)}
.sw-gh .c::before{content:"";display:inline-block;width:14px;height:1px;margin:0 10px 0 0;background:var(--line-2);vertical-align:middle}
.sw-gh .ct{margin-left:auto;font-variant-numeric:tabular-nums}
.sw-gl{margin:2px 0 6px;max-width:36em;font-size:13.5px;line-height:1.7;color:var(--ink-2)}   /* 每组底下的导语(11-08 夜加) */
.sw-grp li:first-child a{border-top:1.5px solid var(--ink)}
.sw-list a{position:relative;display:grid;grid-template-columns:2.6em minmax(0,1fr) auto;column-gap:10px;align-items:baseline;padding:11px 0;border-top:1px solid var(--line);color:inherit;transition:transform .4s var(--ease)}
.sw-list li:last-child a{border-bottom:1px solid var(--line)}
.sw-list .n{font-family:var(--sans);font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums;transition:color .2s}
.sw-list .w{min-width:0}
.sw-list b{display:block;font-family:var(--title);font-weight:900;font-size:clamp(17px,1.5vw,22px);line-height:1.35}
.sw-list .sub{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;margin-top:2px}
.sw-list i{font-family:var(--en);font-style:italic;font-size:14px;color:var(--ink-2)}
.sw-list small{font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:var(--dim)}
.sw-list i+small::before{content:"";display:inline-block;width:4px;height:4px;margin:0 10px 0 0;border-radius:50%;background:var(--line-2);vertical-align:2px}
.sw-list .ar{font-family:var(--sans);font-size:15px;color:var(--dim);transition:transform .3s var(--ease),color .2s}
.sw-list a.on .n{color:var(--pen)}
.sw-list a.on .lnk{background-size:100% 2px}
.sw-list a.on .ar{color:var(--pen);transform:translateX(5px)}
/* 停上去:这一行往右让一点,中缝上落下一枚红钩(和往期那页一样) */
.sw-list a::after{content:"";position:absolute;left:calc(-1 * clamp(24px,3vw,48px) - 7px);top:-1px;width:15px;height:28px;background:var(--pen);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 42'%3E%3Cpath d='M9 0V26a8 8 0 0 0 11 0V21l-4 4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 42'%3E%3Cpath d='M9 0V26a8 8 0 0 0 11 0V21l-4 4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity:0;transform:translateY(-16px);transition:opacity .2s,transform .4s var(--ease);pointer-events:none}
@media (hover:hover){.sw-list a.on{transform:translateX(12px)}.sw-list a.on::after{opacity:1;transform:none}}
.sw-cap{margin:16px 0 0;max-width:40em;min-height:5.25em;padding-left:14px;border-left:2px solid var(--pen);font-size:14.5px;line-height:1.75;color:var(--ink-2)}
.sw-cap .pen{margin-right:8px;font-size:17px}
.sw-cap .g{margin-right:10px;font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--dim)}
.sw-more{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 26px;margin:1.1em 0 0}
.sw-more .more{margin-top:0}
@media (min-width:900px){.sw-list .sw-bl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-height:760px) and (min-width:900px){.sw-h{font-size:min(clamp(40px,5.2vw,80px),8.4vh)}.sw-list{margin-top:14px}.sw-list a{padding:8px 0}.sw-cap{min-height:3.5em;margin-top:12px}}
@media (max-height:680px) and (min-width:900px){.sw-lead{display:none}}
/* 分两组以后多了两行组头:屏幕矮于 820(如 1366×768、1366×640)时标题、组距、每行再收一点,整页仍是一屏 */
@media (max-height:820px) and (min-width:900px){.sw-h{font-size:min(clamp(40px,5.2vw,80px),7.6vh)}.sw-list{margin-top:12px}.sw-grp+.sw-grp{margin-top:10px}.sw-gh{padding-bottom:4px}.sw-list a{padding:7px 0}.sw-cap{min-height:3.5em;margin-top:10px}.sw-more{margin-top:.7em}}
@media (max-height:700px) and (min-width:900px){.sw-head .sec-k{display:none}.sw-h{font-size:min(clamp(40px,5.2vw,80px),7vh)}.sw-list a{padding:5px 0}.sw-list b{font-size:17px}}

/* ── 动着的时候:每页至少一屏高,吸顶;上升、后退、下垂都是 reel.js 逐帧写的 ── */
.spreads{overflow-x:clip}
#reel{position:fixed;left:0;top:0;z-index:45;pointer-events:none}
html.live .stack{position:relative;z-index:0}
html.live .stack>.spread{position:sticky;top:var(--stick,var(--bar));min-height:calc(100vh - var(--bar));min-height:calc(100svh - var(--bar));transform-origin:var(--spine) 0}
html.live .stack>.spread:not(:last-child){margin-bottom:var(--dwell,0)}
html.live .stack>.spread:nth-child(1){z-index:10}html.live .stack>.spread:nth-child(2){z-index:20}html.live .stack>.spread:nth-child(3){z-index:30}
html.live .stack>.spread:nth-child(4){z-index:40}html.live .stack>.spread:nth-child(5){z-index:50}html.live .stack>.spread:nth-child(6){z-index:60}html.live .stack>.spread:nth-child(7){z-index:70}
html.live .stack>.spread:nth-child(8){z-index:80}html.live .stack>.spread:nth-child(9){z-index:90}
/* 11-08 加了「读论文」一页,首页成了 10 页;多写两页的位置,以后再加页别忘了往下续 */
html.live .stack>.spread:nth-child(10){z-index:100}html.live .stack>.spread:nth-child(11){z-index:110}html.live .stack>.spread:nth-child(12){z-index:120}
/* 中缝:只有正在被吊上来的那一页印着;其他时候那根线就是中缝 */
html.live .spread::before{opacity:0;transition:opacity .22s}
html.live .spread.rising::before{opacity:1;transition:none}
html.live .spread::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--shade,0);pointer-events:none;z-index:9}
html.live .spread.rising{will-change:transform,clip-path}
/* 被吊着的时候,两栏错开一点,书架往一边歪,封面歪着,到位才站正;全都跟滚动联动,往回滚就倒回去 */
html.live .spread>.pl{transform:translate3d(0,calc(var(--rise,0) * 84px),0)}
html.live .spread>.pr{transform:translate3d(0,calc(var(--rise,0) * 38px),0)}
html.live .sp-board .sl-v{translate:0 calc(var(--rise,0) * 70px)}
html.live .sp-board .sl-t{translate:0 calc(var(--rise,0) * 32px)}
html.live .bigcover{transform:rotate(calc(var(--rise,0) * -7deg)) translate3d(0,calc(var(--rise,0) * 46px),0);transform-origin:50% 100%}
html.live .rv-shelf1{transform:skewX(calc(var(--rise,0) * -6deg + var(--lean,0deg)));transform-origin:0 100%}
html.live .stack .rv-shelf1w{scrollbar-width:none}
html.live .stack .rv-shelf1w::-webkit-scrollbar{display:none}
html.live .stack .spread.rising .rv-shelf1w{overflow-x:hidden}
/* 被吊着的时候书廊不接手势(手指竖推不会被它接走) */
html.live .stack .spread.rising .cr{pointer-events:none}
/* 第一页被盖住以后,他就不用动了 */
.sp1.off *{animation-play-state:paused !important}
/* 顶栏中缝处的小线轮:线就是从这儿放下来的,滚一下它转一下 */
.spool{position:absolute;left:calc(var(--spine) - 12px);bottom:-12px;width:24px;height:24px;pointer-events:none;color:var(--ink)}
.spool svg{width:100%;height:100%;overflow:visible}
@media print{#reel,.hint,.spool{display:none}html.live .stack>.spread{position:relative;transform:none !important;clip-path:none !important;margin:0}html.live .spread::before{opacity:1}.sl{position:relative;opacity:1;visibility:visible}}
html.live .ledger li{transform:translate3d(0,calc(var(--rise,0) * var(--n,0) * 16px),0)}

/* ── 窄屏:钓鱼人翻过来,杆尖落在左边的线上;别的都改上下摆 ── */
@media (max-width:899px){
  .sp1{--fw:100vw;--fh:calc(100vw * .7992);min-height:0}
  .sp1::before{top:calc(var(--fh) * .0881);height:auto;bottom:0}
  .fisher{position:relative;display:block;left:auto;bottom:auto;margin-left:calc(-1 * (var(--spine) + 16px))}
  .fisher{transform:scaleX(-1)}
  .hint{left:calc(var(--spine) + 24px);bottom:auto;top:calc(var(--fh) * .84);top:min(calc(var(--fh) * .84),calc(100vh - var(--bar) - 48px));top:min(calc(var(--fh) * .84),calc(100svh - var(--bar) - 48px));font-size:15px}
  .stars{width:100%;height:calc(var(--fh) * .5)}
  .sp1 .pl{display:block;padding:0}
  .sp1 .pr{display:block;padding:14px 0 44px}
  .hero-k{font-size:10.5px;letter-spacing:.24em;margin-bottom:8px}
  .hero-n{font-size:clamp(46px,15.5vw,76px);line-height:.92}
  .hero-s{font-size:24px;margin-top:14px}
  .hero-se{font-size:16px}
  .hero-c{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));row-gap:10px}
  .hero-c li:nth-child(3){padding-left:0;border-left:0}
  .hero-g{font-size:14px}
  .cup{left:11.6%;width:5.6%}
  .cup-say{transform:translateX(-50%) scaleX(-1)}   /* 窄屏钓鱼人整张左右翻过来了,小字再翻回来 */
  .ht{top:calc(var(--y) + 9%)}
  .hearts{--k:.62}
  .hero-by{margin-top:16px}

  /* 看板:上图下字,画面矮一些;目录横着能滑 */
  .sp-board{--vis:clamp(230px,62vw,330px);display:block}
  .bo-head{display:block;padding-top:18px}
  .bo-k{padding:0;margin-bottom:6px}
  .bo-head #dayrow{padding:0}
  .bo-stage{margin-top:6px}
  .sl{display:block}
  .sl-v{margin:10px 0 0}
  .sl-t{padding:16px 0 6px;max-height:none;overflow:visible}
  .sl-t .ttl-h{font-size:min(30px,calc(100cqw / var(--n,8)))}
  .sl-t .ttl-q{-webkit-line-clamp:4}
  .xw-rest{display:none}
  .xw-main{--ph:calc(var(--vis) - 74px)}
  .bo-foot{display:block;padding:8px 0 22px}
  .bo-tabs{overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px;gap:14px}
  .bo-tabs::-webkit-scrollbar{display:none}
  .bo-tabs li{flex:0 0 42%}
  .bo-ctl{justify-content:flex-end;margin-top:12px}
  .cr-list{grid-template-columns:minmax(0,1fr);gap:8px}
  .cr-lg button{font-size:13px}
  .tfbig{width:100%;max-height:none}
  .ab-l{align-items:flex-start;text-align:left}
  .ab-sns{justify-content:flex-start}
  .ab-creed{align-items:flex-start;text-align:left}
  .ab-c li{grid-template-columns:2.4em auto minmax(0,1fr)}
  .ab-c .n{grid-column:1}.ab-c b{grid-column:2}.ab-c i{grid-column:3}
  .ab-creed,.ab-give{padding-top:14px;padding-bottom:14px}
  .sp-about .coda{padding-bottom:14px}
  .ab-mail{padding:0 0 48px}
  .eight{width:100%}
  .sp3 .cv-cap{width:100%}
  .ledger a::after{display:none}
  .ledger a{display:block}.ledger .d{display:block;padding:0;text-align:left}.ledger .w{display:block;padding:0}
  .sp-past .pl{text-align:left}
  .coda{padding:18px 0 72px;font-size:clamp(34px,11vw,60px)}
}

/* 窄屏的看展:大字和导语在上,画墙在中间,目录在下面;没有「停上去」,每行直接带简介 */
@media (max-width:899px){
  .sp-show{display:flex;flex-direction:column}
  .sp-show .pr{display:contents}
  .sp-show .sw-head{order:-1;padding-top:28px}
  .sp-show .pl{padding:22px 0 4px}
  .sp-show .sw-wall{--ph:clamp(110px,42vw,190px);gap:22px;padding-bottom:26px}
  .sw-hang{gap:clamp(16px,5vw,28px)}
  .sw-frm .sw-go{display:none}
  .sw-cap{display:none}
  .sw-list{margin-top:4px}
  .sw-list a::after{display:none}
  .sw-list .sub{display:block}.sw-list i{display:block}.sw-list i+small::before{display:none}
  .sw-gh em{display:none}
  .sw-list .sw-bl{display:block;margin-top:5px;font-size:13.5px;line-height:1.7;color:var(--ink-2)}
  .sp-show .sw-more{padding-bottom:44px}
  .sp-paper .sw-wall{--ph:clamp(150px,50vw,240px)}
}