/* Bale — 米白纸质书架。参考:Ash 的书架视频(拼贴书脊、胶带、抽书)
   + Stripe Press(单本书的展示份量)+ Public Domain Review(安静的阅读版式)。
   桌面优先,首版只保证 Mac。 */

:root{
  --paper:#f2ede4;
  --paper-hi:#faf6ef;
  --ink:#2e2a24;
  --ink-soft:#6f675c;
  --ink-faint:#a49a8c;
  --rule:#ddd4c6;
  --board:#cdbfa9;
  --tape:rgba(214,200,170,.62);
  --shelf-h:clamp(330px,52vh,470px);
  --gap:6px;

  /* 材质:内联 SVG 湍流噪声,不用外部贴图。
     纸=细颗粒 / 卡纸=粗麻点 / 布=经纬 / 木=竖纹(x 频率高、y 频率低) */
  --tx-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23f)' opacity='0.5'/%3E%3C/svg%3E");
  --tx-board:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.32' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='130' height='130' filter='url(%23f)' opacity='0.62'/%3E%3C/svg%3E");
  --tx-linen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.55 0.06' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23f)' opacity='0.55'/%3E%3C/svg%3E");
  --tx-wood:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5 0.008' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='260' filter='url(%23f)' opacity='0.55'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html,body{height:100%}
/* 根元素也要铺纸色:body 的渐变只到 body 高度,页面一滚顶部就会露出
   浏览器在 dark mode 下的默认深色底。color-scheme 同时锁住表单控件的配色。 */
html{background:#ece6db;color-scheme:light}
body{
  margin:0;
  background:
    radial-gradient(120% 70% at 50% -10%, var(--paper-hi) 0%, var(--paper) 55%, #ece6db 100%);
  background-attachment:fixed;
  color:var(--ink);
  font:15px/1.6 "Songti SC","Source Han Serif SC",Georgia,"Times New Roman",serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* 纸张颗粒 */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(rgba(120,100,70,.055) 1px, transparent 1px);
  background-size:3px 3px;
}

/* ── 顶栏 ───────────────────────────── */
.topbar{
  position:relative;z-index:2;
  display:flex;align-items:baseline;justify-content:space-between;
  padding:26px 44px 0;
}
.brand{display:flex;align-items:baseline;gap:14px}
.mark{
  font-size:26px;letter-spacing:.22em;text-transform:uppercase;
  font-family:"Optima","Avenir Next",Helvetica,sans-serif;font-weight:600;
}
.sub{font-size:13px;color:var(--ink-soft);letter-spacing:.08em}
.stat{font-size:12px;color:var(--ink-faint);letter-spacing:.06em;font-variant-numeric:tabular-nums}

/* ── 今日话题 ────────────────────────── */
.today{position:relative;z-index:2;max-width:1120px;margin:34px auto 0;padding:0 44px}
.today-label{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint);
  font-family:"Avenir Next",sans-serif;margin-bottom:14px;
}
.today-meta{
  margin-top:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:12px;color:var(--ink-faint);font-family:"Avenir Next",sans-serif;
}
.themes{display:flex;gap:8px;flex-wrap:wrap}
.themes span{
  border:1px solid var(--rule);border-radius:2px;padding:2px 8px;color:var(--ink-soft);
}
.linky{
  background:none;border:none;padding:0;cursor:pointer;color:var(--ink-faint);
  font:inherit;border-bottom:1px solid var(--rule);
}
.linky:hover{color:var(--ink)}

/* ── 书架:一面横向的墙 ─────────────────
   41 本按真实书本尺度排开(约 3.4 屏宽),不再压缩到一屏。
   段与段之间放纸质隔板,分区信息不用多点一次就能看见。 */
.svg-defs,.defs{position:absolute;width:0;height:0;overflow:hidden}

.shelf-wrap{position:relative;z-index:1;margin-top:30px}
.wall{
  overflow-x:auto;overflow-y:visible;
  padding:26px 0 6px;
  scrollbar-width:thin;scrollbar-color:var(--rule) transparent;
  /* 两头淡出,提示墙还没到头 */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46px,#000 calc(100% - 46px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 46px,#000 calc(100% - 46px),transparent 100%);
}
.wall::-webkit-scrollbar{height:8px}
.wall::-webkit-scrollbar-thumb{background:var(--rule);border-radius:4px}
.wall::-webkit-scrollbar-track{background:transparent}
.wall-inner{display:inline-block;min-width:100%;padding:0 56px}

.shelf{
  display:flex;align-items:flex-end;
  gap:var(--gap);height:var(--shelf-h);
  perspective:1800px;
}
.board{
  position:relative;height:13px;
  background:
    linear-gradient(180deg,#cbbb9f,#ab9475 55%,#8e7859),
    var(--tx-wood);
  background-blend-mode:normal,multiply;
  background-size:auto,220px 100%;
  border-radius:1px;
  box-shadow:0 14px 34px rgba(90,70,40,.26), inset 0 1px 0 rgba(255,255,255,.32);
}
/* 书脚跟搁板的接触阴影 —— 没有它,书看着是浮在板上的 */
.board::before{
  content:"";position:absolute;left:0;right:0;top:-9px;height:9px;
  background:linear-gradient(180deg,transparent,rgba(70,52,30,.26));
}
.shelf-hint{
  text-align:center;margin-top:16px;font-size:11px;letter-spacing:.18em;
  color:var(--ink-faint);font-family:"Avenir Next",sans-serif;
}

/* 段标签:贴在搁板下沿的一张小纸卡 */
.labels{display:flex;gap:var(--gap);margin-top:0}
.lab{
  position:relative;flex:0 0 auto;
  padding-top:13px;
  font:10.5px/1 "Avenir Next","PingFang SC",sans-serif;
  color:var(--ink-faint);letter-spacing:.22em;
  display:flex;align-items:baseline;gap:8px;
}
.lab::before{
  content:"";position:absolute;left:0;top:0;width:26px;height:1px;background:var(--rule);
}
.lab b{font-weight:500;color:var(--ink-soft);letter-spacing:.16em}
.lab i{font-style:normal;opacity:.7;font-variant-numeric:tabular-nums}

/* 隔板:一张比书稍矮的硬纸片,竖排写着这一段是什么 */
.divider{
  position:relative;flex:0 0 auto;width:26px;align-self:flex-end;
  background:linear-gradient(96deg,#ded2ba,#cdbfa4 55%,#c0b096);
  border-radius:2px 2px 0 0;
  box-shadow:0 3px 10px rgba(80,60,35,.20), inset -2px 0 4px rgba(0,0,0,.10),
             inset 2px 0 3px rgba(255,255,255,.30);
  display:flex;align-items:center;justify-content:center;
  margin:0 10px;
}
.divider::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:2px 2px 0 0;
  background:var(--tx-board);background-size:120px 120px;opacity:.5;mix-blend-mode:multiply;
}
.dv-name{
  writing-mode:vertical-rl;
  font:11px/1 "PingFang SC","Songti SC",sans-serif;
  letter-spacing:.3em;color:#5f5241;
  white-space:nowrap;overflow:hidden;text-overflow:clip;max-height:78%;
}

/* ── 书脊 ─────────────────────────────
   一本书 = 若干张纸叠出来的:纸胎(带毛边)+ 覆膜纸 + 底部色块 + 胶带 + 小色片。
   文字单独一层,不进位移滤镜,否则字会跟着抖。 */
.spine{
  position:relative;flex:0 0 auto;cursor:pointer;
  border:none;padding:0;background:none;
  transform-origin:bottom center;
  transition:transform .38s cubic-bezier(.2,.8,.25,1), filter .38s ease;
  filter:drop-shadow(0 3px 9px rgba(80,60,35,.20));
}
.spine:hover{transform:translateY(-16px);filter:drop-shadow(0 18px 30px rgba(80,60,35,.30));z-index:5}
.spine:focus-visible{outline:1px solid var(--ink-soft);outline-offset:4px}
.spine.dim{opacity:.4}

/* 纸胎:书脊本体。左右两条边被 feDisplacementMap 打毛。 */
.sp-paper{
  position:absolute;inset:0;
  filter:url(#deckle);
  border-radius:1px 1px 0 0;
}
.sp-paper::after{
  content:"";position:absolute;inset:0;border-radius:1px 1px 0 0;
  /* 书脊是圆的:两侧压暗、中间提亮 */
  background:linear-gradient(90deg,
    rgba(0,0,0,.26) 0, rgba(0,0,0,.05) 12%, rgba(255,255,255,.13) 42%,
    rgba(255,255,255,.05) 62%, rgba(0,0,0,.10) 88%, rgba(0,0,0,.30) 100%);
}
.sp-tex{
  position:absolute;inset:0;pointer-events:none;
  mix-blend-mode:multiply;border-radius:1px 1px 0 0;
}
.tex-paper .sp-tex{background:var(--tx-paper);background-size:170px 170px;opacity:.55}
.tex-board .sp-tex{background:var(--tx-board);background-size:130px 130px;opacity:.62}
.tex-linen .sp-tex{
  background:var(--tx-linen),
    repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 1px,transparent 1px 3px);
  background-size:150px 150px,auto,auto;opacity:.5;
}
.tex-wood .sp-tex{background:var(--tx-wood);background-size:100% 260px;opacity:.55}

/* 覆膜纸:盖在书脊前面的半透明硫酸纸,要能透出下面的书 */
.sp-sheet{
  position:absolute;pointer-events:none;
  background:linear-gradient(168deg,rgba(255,253,247,.92),rgba(240,233,220,.62) 60%,rgba(228,220,203,.72));
  box-shadow:0 1px 6px rgba(90,70,40,.10);
  filter:url(#deckle3);
}
/* 底部色块 */
.sp-band{position:absolute;left:0;right:0;bottom:0;pointer-events:none;filter:url(#deckle2)}
.sp-band i{position:absolute;left:0;right:0;bottom:0;display:block}
/* 小色片 */
.sp-patch{position:absolute;pointer-events:none;filter:url(#deckle2);border-radius:1px;opacity:.9}
/* 胶带:半透明、两头露出书脊、微微歪 */
.sp-tape{
  position:absolute;pointer-events:none;
  background:linear-gradient(180deg,rgba(226,214,186,.95),rgba(206,192,160,.86));
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  filter:url(#deckle2);
}
.sp-tape::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.30) 0 2px,transparent 2px 6px);
}
/* 布面精装的书头布 */
.sp-headband{
  position:absolute;left:2px;right:2px;top:0;height:5px;
  background:repeating-linear-gradient(90deg,#d8c8a6 0 2px,#8d7a56 2px 4px);
  opacity:.85;
}

/* 文字层 */
.sp-face{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;
  padding:14px 0 18px;pointer-events:none;
}
.sp-no{
  font:10px/1 "Avenir Next",sans-serif;letter-spacing:.12em;
  opacity:.62;margin-bottom:14px;
}
.sp-title{
  writing-mode:vertical-rl;
  font-size:13px;letter-spacing:.15em;
  font-family:"Avenir Next",Helvetica,sans-serif;
  text-transform:uppercase;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1 1 auto;max-height:100%;
  text-shadow:0 1px 0 rgba(255,255,255,.14);
}
.sp-author{
  writing-mode:vertical-rl;
  font-size:9.5px;letter-spacing:.1em;opacity:.74;
  font-family:"Avenir Next",sans-serif;white-space:nowrap;
  max-height:24%;overflow:hidden;margin-top:12px;
}
/* 未译完的书:书脊底部留一道浅痕 */
.spine.pending .sp-face::after{
  content:"";position:absolute;left:5px;right:5px;bottom:6px;height:3px;
  background:repeating-linear-gradient(90deg,#c9713f 0 4px,transparent 4px 8px);
  opacity:.9;
}

/* ── 详情覆盖层 ──────────────────────── */
/* display:flex 会盖掉 hidden 属性,必须显式让 hidden 赢 */
.overlay[hidden],.ask-out[hidden],.art-note[hidden],.citecard[hidden]{display:none!important}
.overlay{
  position:fixed;inset:0;z-index:20;
  background:rgba(238,232,222,.945);
  backdrop-filter:blur(18px) saturate(1.1);
  display:flex;align-items:flex-start;justify-content:center;
  padding:46px 40px;overflow-y:auto;
  animation:fade .22s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.close{
  position:absolute;top:22px;right:30px;
  background:none;border:none;font-size:30px;line-height:1;cursor:pointer;
  color:var(--ink-faint);
}
.close:hover{color:var(--ink)}

.detail{
  display:grid;grid-template-columns:minmax(220px,340px) minmax(400px,600px);
  gap:clamp(32px,5vw,66px);align-items:center;
  max-width:1080px;width:100%;margin:auto 0;
  animation:rise .34s cubic-bezier(.2,.8,.25,1);
}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ── 自制书套 ─────────────────────────
   跟书脊同一套材质:纸胎(毛边)+ 底纹 + 底部色块 + 制版标记 + 胶带。
   不是原版封面 —— 书下面那行小字必须说清楚。 */
.detail-left{display:flex;flex-direction:column;align-items:center;perspective:1400px}
.bigbook{
  position:relative;width:min(290px,27vw);height:min(415px,60vh);
  transform:rotateY(-19deg) rotateX(3deg);
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.8,.25,1);
}
.bigbook:hover{transform:rotateY(-11deg) rotateX(2deg)}
.bb-cover{
  position:absolute;inset:0;border-radius:2px 4px 4px 2px;
  box-shadow:0 32px 60px rgba(70,52,30,.35), 0 4px 12px rgba(70,52,30,.2);
}
.bb-paper{position:absolute;inset:0;filter:url(#deckle);border-radius:2px 4px 4px 2px}
.bb-tex{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;
  border-radius:2px 4px 4px 2px;
}
.tex-paper .bb-tex{background:var(--tx-paper);background-size:210px 210px;opacity:.5}
.tex-board .bb-tex{background:var(--tx-board);background-size:160px 160px;opacity:.55}
.tex-linen .bb-tex{
  background:var(--tx-linen),
    repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px);
  background-size:190px 190px,auto,auto;opacity:.45;
}
.tex-wood .bb-tex{background:var(--tx-wood);background-size:100% 320px;opacity:.5}
/* 封面的光:左上受光,右下压暗 */
.bb-cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:2px 4px 4px 2px;
  background:linear-gradient(105deg, rgba(255,255,255,.20), transparent 34%, rgba(0,0,0,.16));
}
.bb-band{position:absolute;left:0;right:0;bottom:0;filter:url(#deckle2)}
.bb-band i{position:absolute;left:0;right:0;bottom:0;display:block}
.bb-sheet{
  position:absolute;left:-8px;top:-10px;right:-4px;bottom:-4px;pointer-events:none;
  background:linear-gradient(168deg,rgba(255,253,247,.55),rgba(238,231,217,.28) 55%,rgba(226,218,201,.42));
  filter:url(#deckle3);opacity:.5;
}
.bb-tape{
  position:absolute;left:-12px;right:-12px;height:24px;pointer-events:none;
  background:linear-gradient(180deg,rgba(226,214,186,.92),rgba(206,192,160,.82));
  box-shadow:0 1px 3px rgba(0,0,0,.12);filter:url(#deckle2);
}
.bb-tape::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 3px,transparent 3px 8px);
}
/* 制版标记:参考视频每张封面上那个冷冷的几何图形 */
.bb-motif{position:absolute;left:0;right:0;pointer-events:none;opacity:.5}
/* 书口 */
.bb-edge{
  position:absolute;top:5px;bottom:5px;right:-13px;width:13px;
  background:repeating-linear-gradient(180deg,#efe7d8 0 2px,#dfd4c0 2px 4px);
  transform:rotateY(78deg);transform-origin:left center;border-radius:0 2px 2px 0;
}

/* 封面上的字 */
.bb-face{
  position:absolute;inset:0;display:flex;flex-direction:column;
  padding:clamp(20px,2.4vw,30px) clamp(18px,2.2vw,26px);
  pointer-events:none;
}
.bb-kicker{
  font:9.5px/1.4 "Avenir Next",sans-serif;letter-spacing:.22em;text-transform:uppercase;
  opacity:.66;display:flex;justify-content:space-between;gap:10px;
}
.bb-kicker b{font-weight:500}
.bb-title{
  margin-top:clamp(22px,3vh,38px);
  font:clamp(19px,2.1vw,26px)/1.28 "Songti SC","Source Han Serif SC",Georgia,serif;
  font-weight:600;letter-spacing:.005em;
}
.bb-author{
  margin-top:12px;
  font:11.5px/1.5 "Avenir Next",sans-serif;letter-spacing:.14em;
  text-transform:uppercase;opacity:.72;
}
/* 大号数字和页脚都压在底部色块上 —— 要用浅色,跟参考视频一样 */
.bb-num{
  margin-top:auto;
  font:clamp(46px,6vw,68px)/1 Georgia,"Times New Roman",serif;
  font-variant-numeric:lining-nums;align-self:flex-end;
  color:#fbf6ea;text-shadow:0 1px 2px rgba(0,0,0,.10);
}
.bb-foot{
  margin-top:14px;display:flex;justify-content:space-between;gap:12px;
  font:9.5px/1.4 "Avenir Next",sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:#fbf6ea;opacity:.9;text-shadow:0 1px 2px rgba(0,0,0,.22);
}
/* 书套声明 —— 不能省 */
.bb-note{
  margin-top:26px;text-align:center;
  font:10.5px/1.6 "Avenir Next","PingFang SC",sans-serif;letter-spacing:.1em;
  color:var(--ink-faint);
}

/* 右栏 */
.d-kicker{
  font:11px/1 "Avenir Next",sans-serif;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:18px;
}
.d-title{margin:0;font-size:clamp(23px,2.6vw,31px);line-height:1.28;font-weight:600;letter-spacing:.01em}
.d-author{margin-top:10px;color:var(--ink-soft);font-size:15px}
.d-meta{
  margin:26px 0 0;padding:20px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:auto 1fr;gap:9px 20px;font-size:13px;
}
.d-meta dt{color:var(--ink-faint);font-family:"Avenir Next",sans-serif;letter-spacing:.06em}
.d-meta dd{margin:0;color:var(--ink)}
.d-blurb{margin:22px 0 0;font-size:15.5px;line-height:1.85;color:#413b33}

/* 问这本书 */
.ask{margin-top:30px;border-top:1px solid var(--rule);padding-top:22px}
.ask-head{
  font:11px/1 "Avenir Next",sans-serif;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:14px;
}
.ask-form{display:flex;gap:10px}
.ask-form input{
  flex:1;background:rgba(255,255,255,.55);border:1px solid var(--rule);border-radius:2px;
  padding:11px 14px;font:14px/1.4 inherit;color:var(--ink);
}
.ask-form input:focus{outline:none;border-color:var(--ink-soft);background:rgba(255,255,255,.78)}
.ask-form button{
  border:1px solid var(--ink);background:var(--ink);color:var(--paper-hi);
  padding:0 22px;border-radius:2px;cursor:pointer;font:14px inherit;letter-spacing:.1em;
}
.ask-form button:disabled{opacity:.45;cursor:default}
.ask-suggest{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.ask-suggest button{
  background:none;border:1px solid var(--rule);border-radius:2px;
  padding:5px 10px;font:12px inherit;color:var(--ink-soft);cursor:pointer;
}
.ask-suggest button:hover{border-color:var(--ink-soft);color:var(--ink)}
.ask-out{
  margin-top:18px;max-height:min(230px,26vh);overflow:auto;
  background:rgba(255,255,255,.5);border:1px solid var(--rule);border-radius:2px;
  padding:16px 18px;font-size:14px;line-height:1.8;white-space:pre-wrap;
}
.ask-out .muted{color:var(--ink-faint)}
.ask-out .err{color:#a4502e}

/* ── 话题正文 ─────────────────────────
   每日卡是这个站的节奏,不是首页上一条装饰带。
   引文卡可展开、自用阶段含原文 —— 见项目笔记「首版范围」第 3 项。 */
.art-overlay,.list-overlay{align-items:flex-start;padding:0}
.article{
  max-width:760px;width:100%;margin:0 auto;padding:64px 44px 90px;
  animation:rise .34s cubic-bezier(.2,.8,.25,1);
}
.art-head{border-bottom:1px solid var(--rule);padding-bottom:26px;margin-bottom:34px}
.art-meta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;
  font:12px "Avenir Next",sans-serif;color:var(--ink-faint);letter-spacing:.06em;
}
.art-q{margin:0;font-size:30px;line-height:1.44;font-weight:500;letter-spacing:.01em}
.art-note{
  margin-top:18px;padding:10px 14px;border-left:2px solid #c9905f;
  background:rgba(201,144,95,.09);
  font:12.5px/1.7 "PingFang SC",sans-serif;color:#7a5a3c;
}
.art-body{font-size:16px;line-height:1.95;color:#3b352d}
.art-body h2{
  margin:44px 0 16px;font-size:16px;font-weight:600;letter-spacing:.14em;
  font-family:"Avenir Next","PingFang SC",sans-serif;color:var(--ink-soft);
  padding-bottom:8px;border-bottom:1px solid var(--rule);
}
.art-body h3{margin:30px 0 12px;font-size:16.5px;font-weight:600;line-height:1.5}
.art-body p{margin:0 0 18px}
.art-body ul,.art-body ol{margin:0 0 20px;padding-left:24px}
.art-body li{margin-bottom:9px}
.art-body code{
  font:.88em "SF Mono",ui-monospace,Menlo,monospace;
  background:rgba(120,100,70,.09);padding:1px 5px;border-radius:2px;
}
.art-body strong{font-weight:600;color:var(--ink)}

/* 引文卡:正文里是一个小标记,点开是书 → 章 → 行号 → 原文 */
.cite{
  display:inline-block;vertical-align:baseline;margin:0 2px;
  font:10.5px/1 "Avenir Next",sans-serif;letter-spacing:.05em;
  border:1px solid var(--rule);border-radius:2px;padding:3px 7px;
  background:rgba(255,255,255,.5);color:var(--ink-soft);cursor:pointer;
}
.cite:hover{border-color:var(--ink-soft);color:var(--ink)}
.cite.on{background:var(--ink);color:var(--paper-hi);border-color:var(--ink)}
.citecard{
  margin:14px 0 22px;border:1px solid var(--rule);border-left:2px solid var(--ink-soft);
  background:rgba(255,255,255,.55);padding:16px 18px;border-radius:2px;
}
.cc-book{font-size:14px;font-weight:600}
.cc-where{
  margin-top:5px;font:11.5px "Avenir Next",sans-serif;color:var(--ink-faint);
  letter-spacing:.04em;
}
.cc-text{
  margin-top:12px;padding-top:12px;border-top:1px dashed var(--rule);
  font:13.5px/1.85 "Songti SC",Georgia,serif;color:#4a4238;white-space:pre-wrap;
}
.cc-none{margin-top:10px;font-size:12.5px;color:#a4502e}
.art-ask{margin-top:52px;border-top:1px solid var(--rule);padding-top:26px}
.art-src{
  margin-top:40px;font:11px/1.8 "Avenir Next",sans-serif;
  color:var(--ink-faint);letter-spacing:.04em;
}
.art-src code{font-size:11px}

/* ── 全部话题 ─────────────────────────── */
.topiclist{max-width:820px;width:100%;margin:0 auto;padding:64px 44px 90px;animation:rise .34s cubic-bezier(.2,.8,.25,1)}
.tl-head{border-bottom:1px solid var(--rule);padding-bottom:20px;margin-bottom:8px}
.tl-head h2{margin:0;font-size:24px;font-weight:500}
.tl-sub{margin-top:10px;font:12px "Avenir Next",sans-serif;color:var(--ink-faint);letter-spacing:.05em}
.tl-row{
  width:100%;text-align:left;background:none;border:none;
  border-bottom:1px solid var(--rule);padding:18px 2px;cursor:pointer;
  display:grid;grid-template-columns:88px 1fr auto;gap:18px;align-items:baseline;
  font:inherit;color:var(--ink);
}
.tl-row:hover{background:rgba(255,255,255,.42)}
.tl-row[disabled]{cursor:default;color:var(--ink-faint)}
.tl-row[disabled]:hover{background:none}
.tl-date{font:11.5px "Avenir Next",sans-serif;color:var(--ink-faint);letter-spacing:.04em}
.tl-q{font-size:15px;line-height:1.62}
.tl-tag{
  font:10px "Avenir Next",sans-serif;letter-spacing:.14em;white-space:nowrap;
  border:1px solid var(--rule);border-radius:2px;padding:3px 8px;color:var(--ink-faint);
}
.tl-tag.has{border-color:var(--ink-soft);color:var(--ink-soft)}

.today-q{
  display:block;text-align:left;background:none;border:none;padding:0;cursor:pointer;
  font:500 25px/1.5 inherit;color:var(--ink);letter-spacing:.01em;max-width:30em;
}
.today-q:hover{color:#000}
.today-state{color:var(--ink-faint)}

.foot{
  position:relative;z-index:2;text-align:center;
  padding:26px 0 34px;font-size:11px;letter-spacing:.14em;
  color:var(--ink-faint);font-family:"Avenir Next",sans-serif;
}

/* 语言开关 —— 挂在导航条末尾 */
#langToggle{
  background:none;border:1px solid var(--rule);border-radius:2px;
  padding:4px 10px;cursor:pointer;
  font:11px/1 "Avenir Next",sans-serif;letter-spacing:.14em;
  color:var(--ink-soft);
}
#langToggle:hover{border-color:var(--ink-soft);color:var(--ink)}

/* ── 书籍页:这本书能帮我理解什么 ───────── */
.bc-lens{
  margin:0 0 16px;padding:8px 12px;
  border-left:2px solid var(--rule);
  font:11.5px/1.7 "Avenir Next","PingFang SC",sans-serif;
  color:var(--ink-faint);letter-spacing:.04em;
}
.bc-quote{
  display:block;margin:8px 0 0;padding-left:12px;
  border-left:2px solid var(--rule);
  font:13px/1.75 "Songti SC",Georgia,serif;color:#57503f;quotes:none;
}
.bc-others{
  display:block;margin-top:8px;
  font:10.5px/1.5 "Avenir Next",sans-serif;letter-spacing:.08em;
  color:var(--ink-faint);font-style:normal;
}

/* ── 摘抄卡 ─────────────────────────────
   主体是转述,引文是配角 —— 版权分档见 make_cards.py 的说明。 */
.cards-overlay{align-items:flex-start;padding:0}
.cardsheet{max-width:1120px;width:100%;margin:0 auto;padding:64px 44px 90px;
  animation:rise .34s cubic-bezier(.2,.8,.25,1)}
.cs-head{border-bottom:1px solid var(--rule);padding-bottom:20px;margin-bottom:34px}
.cs-head h2{margin:0;font-size:24px;font-weight:500}
.cs-sub{margin-top:10px;font:12px "Avenir Next",sans-serif;color:var(--ink-faint);letter-spacing:.05em}
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:30px}

.excerpt{
  background:rgba(255,255,255,.5);border:1px solid var(--rule);border-radius:2px;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 2px 10px rgba(80,60,35,.07);
}
.ex-img{margin:0;position:relative}
.ex-img img{display:block;width:100%;height:170px;object-fit:cover}
/* AI 图必须自报家门 —— 不能让它看着像史料图像 */
.ex-img figcaption{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,transparent,rgba(40,32,22,.72));
  color:#f2ece0;padding:16px 12px 7px;
  font:9.5px/1.3 "Avenir Next","PingFang SC",sans-serif;letter-spacing:.1em;
}
.ex-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.excerpt h3{margin:0 0 12px;font-size:17px;line-height:1.5;font-weight:600}
.ex-text{margin:0 0 16px;font-size:13.5px;line-height:1.85;color:#4a4238}
.ex-quote{
  margin:0 0 14px;padding:10px 0 10px 13px;border-left:2px solid var(--ink-soft);
  font:12.5px/1.75 Georgia,"Times New Roman",serif;color:#57503f;
}
.ex-noquote{margin:0 0 14px;font-size:11.5px;color:#a4502e;line-height:1.6}
.ex-caveat{
  margin:0 0 16px;padding:8px 11px;background:rgba(201,144,95,.10);
  border-left:2px solid #c9905f;
  font:11.5px/1.7 "PingFang SC",sans-serif;color:#7a5a3c;
}
.ex-src{
  margin-top:auto;padding-top:12px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;
  font:10.5px "Avenir Next",sans-serif;color:var(--ink-faint);letter-spacing:.04em;
}
.ex-tier{border:1px solid var(--rule);border-radius:2px;padding:2px 6px}
.excerpt.incopyright .ex-tier{border-color:#c9905f;color:#a4703c}
.ex-src code{font-size:10px;opacity:.8;width:100%}

/* 书籍页目录 —— 折叠,默认收起,不抢研究笔记的位置 */
.toc{margin:0 0 18px;border:1px solid var(--rule);border-radius:2px;background:rgba(255,255,255,.4)}
.toc summary{
  cursor:pointer;padding:10px 13px;list-style:none;
  font:11.5px "Avenir Next","PingFang SC",sans-serif;letter-spacing:.08em;color:var(--ink-soft);
}
.toc summary::-webkit-details-marker{display:none}
.toc summary::before{content:"▸ ";opacity:.5}
.toc[open] summary::before{content:"▾ "}
.toc summary:hover{color:var(--ink)}
.toc-list{
  margin:0;padding:2px 16px 12px 34px;max-height:300px;overflow-y:auto;
  font:12.5px/1.85 "Songti SC",Georgia,serif;color:#4a4238;
}
.toc-list li.untranslated{color:var(--ink-faint)}
.toc-list li.untranslated::after{content:" · 未译";font-size:10px;opacity:.7}
.toc-note{
  margin:0;padding:9px 13px;border-top:1px dashed var(--rule);
  font:11px/1.7 "PingFang SC",sans-serif;color:#7a5a3c;background:rgba(201,144,95,.08);
}

/* 成书语境 —— 从书自己的序言抽的,每项可回原文核 */
.ctx{margin:0 0 18px;padding:14px 16px;background:rgba(255,255,255,.42);
  border:1px solid var(--rule);border-radius:2px}
.ctx-note{margin:0 0 12px;font:13.5px/1.9 "Songti SC",Georgia,serif;color:#4a4238}
.ctx-rows{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;
  font:12px/1.7 "Avenir Next","PingFang SC",sans-serif}
.ctx-rows dt{color:var(--ink-faint);letter-spacing:.06em}
.ctx-rows dd{margin:0;color:var(--ink-soft)}
.ctx-cite{margin-left:7px;font-size:10px;letter-spacing:.08em;color:var(--ink-faint);
  border-bottom:1px dotted var(--rule);cursor:help}
.ctx-cite:hover{color:var(--ink)}
.ctx-from{margin:12px 0 0;padding-top:9px;border-top:1px dashed var(--rule);
  font:10.5px/1.6 "PingFang SC",sans-serif;color:var(--ink-faint)}
.ctx-none{margin:0 0 18px;padding:10px 13px;border-left:2px solid var(--rule);
  font:12px/1.8 "PingFang SC",sans-serif;color:var(--ink-faint)}
.ctx-none span{opacity:.75}

/* 卡片新版式:引文在前(实物),转述在后(解说) */
.ex-quote cite{
  display:block;margin-top:8px;font-style:normal;
  font:10px "Avenir Next",sans-serif;letter-spacing:.12em;color:var(--ink-faint);
}
.ex-obs{
  margin:0 0 14px;padding:9px 12px;border:1px dashed var(--rule);border-radius:2px;
  font:12px/1.75 "PingFang SC",sans-serif;color:#4a4238;
}
.ex-obs.empty{color:var(--ink-faint);font-style:italic;background:rgba(120,100,70,.03)}
.ex-topic{
  width:100%;color:var(--ink-faint);cursor:pointer;
  border-bottom:1px solid var(--rule);padding-bottom:1px;
}
.ex-topic:hover{color:var(--ink)}
/* 没能通过逐字校验的引文:退到落款处一个小标签,不抢标题下方的位置。
   这是个诚实标注,不是错误提示,不该是整张卡第二显眼的东西。 */
.ex-tier.noq{border-style:dashed;color:var(--ink-faint);cursor:help}

/* ── 关于 ───────────────────────────── */
.about-overlay{align-items:flex-start;padding:0}
.about{max-width:660px;width:100%;margin:0 auto;padding:70px 44px 100px;
  animation:rise .34s cubic-bezier(.2,.8,.25,1)}
.ab-head{border-bottom:1px solid var(--rule);padding-bottom:26px;margin-bottom:8px}
.ab-head h1{margin:0;font-size:30px;font-weight:500;letter-spacing:.01em}
.ab-deck{margin:14px 0 0;font-size:15px;color:var(--ink-soft);line-height:1.8}
.about section{margin-top:40px}
.about h2{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.16em;
  font-family:"Avenir Next","PingFang SC",sans-serif;color:var(--ink-soft)}
.about p{margin:0 0 15px;font-size:15.5px;line-height:1.95;color:#3b352d}
.about ul{margin:0 0 15px;padding-left:22px}
.about li{margin-bottom:11px;font-size:15px;line-height:1.9;color:#3b352d}
.about b{font-weight:600;color:var(--ink)}
.about i{font-style:italic}
.ab-note{padding:12px 15px;background:rgba(201,144,95,.09);
  border-left:2px solid #c9905f;font-size:13.5px!important;line-height:1.85!important;
  color:#7a5a3c!important}
.ab-state p{color:var(--ink-soft);font-size:14.5px}