/* ============ 索引页 / 全站外壳 ============ */

:root{
  --paper:#FBFAF7;--paper-2:#F3F1EA;--card:#FFFFFF;--ink:#1A1815;--ink-2:#514B43;--ink-3:#8A8276;
  --line:#E4E0D6;--line-2:#D2CCBE;--ember:#CE4B22;--ember-deep:#A93A18;--ember-soft:#F6E7DF;--gold:#B8862F;
  --serif:"Source Serif 4",Georgia,serif;--sans:"Inter",system-ui,"PingFang SC","Microsoft YaHei",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --maxw:880px;
}
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased;font-size:clamp(1rem,.5vw+.9rem,1.06rem);}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem);}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em;margin:0;}
.site-header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(251,250,247,.86);backdrop-filter:saturate(160%) blur(8px);z-index:10;}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding-block:.85rem;}
.brand{display:flex;flex-direction:column;}
.brand .name{font-family:var(--serif);font-weight:700;font-size:1.05rem;}
.brand .role{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);}
.nav a{font-size:.92rem;color:var(--ink-2);margin-left:1.1rem;}
.nav a:hover{color:var(--ember-deep);}
.hero{padding-block:clamp(2.6rem,7vw,4.4rem) clamp(1.6rem,4vw,2.4rem);border-bottom:1px solid var(--line);}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .8rem;display:flex;align-items:center;gap:.6rem;}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--line-2);}
.hero h1{font-size:clamp(2.1rem,5.5vw,3.2rem);font-weight:700;letter-spacing:-.025em;}
.hero p{font-size:clamp(1.05rem,1.3vw,1.25rem);color:var(--ink-2);max-width:60ch;margin:.9rem 0 0;}
.list{padding-block:clamp(2rem,5vw,3rem) 4rem;}
.item{display:block;background:var(--card);border:1px solid var(--line-2);border-radius:14px;padding:1.4rem 1.5rem;margin-bottom:1.2rem;box-shadow:0 1px 2px rgba(26,24,21,.04),0 8px 24px -14px rgba(26,24,21,.14);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.item:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(26,24,21,.05),0 18px 40px -18px rgba(26,24,21,.22);border-color:var(--ember);}
.item .tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.6rem;}
.tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ember-deep);background:var(--ember-soft);padding:.2em .6em;border-radius:6px;}
.tag.muted{color:var(--ink-3);background:var(--paper-2);}
.item h2{font-size:1.32rem;margin:0 0 .35rem;}
.item .sub{color:var(--ink-2);font-size:.98rem;margin:0 0 .7rem;}
.item .meta{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);}
.item .go{color:var(--ember-deep);font-weight:600;font-size:.92rem;margin-top:.6rem;display:inline-block;}
.note{margin-top:1.5rem;padding:.9rem 1.1rem;background:var(--paper-2);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;font-size:.86rem;color:var(--ink-2);}
.foot{border-top:1px solid var(--line);padding-block:1.6rem 2.4rem;font-family:var(--mono);font-size:.74rem;color:var(--ink-3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;}

.cols{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem;}
.col-btn{font-family:var(--sans);font-size:.86rem;line-height:1;color:var(--ink-2);
  background:var(--card);border:1px solid var(--line-2);border-radius:999px;
  padding:.62em 1.05em;cursor:pointer;transition:all .16s ease;}
.col-btn:hover{border-color:var(--ember);color:var(--ember-deep);}
.col-btn.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.col-btn b{font-weight:600;}
.col-btn span{opacity:.55;margin-left:.4em;font-variant-numeric:tabular-nums;}
.item[hidden]{display:none;}
@media(max-width:680px){.col-btn{font-size:.8rem;padding:.55em .9em;}}

/* ============ 文章正文主题 ============ */
:root{
--paper:#FBFAF7; --paper-2:#F3F1EA; --card:#FFFFFF;
--ink:#1A1815; --ink-2:#514B43; --ink-3:#8A8276;
--line:#E4E0D6; --line-2:#D2CCBE;
--ember:#CE4B22; --ember-deep:#A93A18; --ember-soft:#F6E7DF;
--gold:#B8862F; --good:#2E7D5B;
--serif:"Source Serif 4",Georgia,"Times New Roman",serif;
--sans:"Inter",system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
--mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
--maxw:880px;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
margin:0;background:var(--paper);color:var(--ink);
font-family:var(--sans);font-size:1.02rem;line-height:1.72;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

body>*{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem);}
body>header.title-block,body>h1:first-of-type{margin-top:clamp(2rem,6vw,3.4rem);}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.14;letter-spacing:-.01em;color:var(--ink);}
h1{font-size:clamp(2rem,5vw,3rem);font-weight:700;letter-spacing:-.025em;margin:.2em 0 .1em;}
.subtitle{font-size:1.15rem;color:var(--ink-2);font-family:var(--serif);font-style:italic;}
h2{font-size:clamp(1.45rem,3vw,2rem);margin:2.4em 0 .7em;padding-top:1.1em;border-top:1px solid var(--line);}
h3{font-size:1.22rem;margin:1.8em 0 .5em;color:var(--ember-deep);}
h4{font-size:1.05rem;margin:1.3em 0 .4em;color:var(--ink-2);font-weight:600;}
h1+.subtitle,header.title-block{margin-bottom:1.4em;}
p{margin:.55em 0 1.05em;}
a{color:var(--ember-deep);text-decoration:none;border-bottom:1px solid var(--ember-soft);}
a:hover{border-bottom-color:var(--ember);}
strong{font-weight:650;color:var(--ink);}
em{color:var(--ink-2);}
code{font-family:var(--mono);font-size:.86em;background:var(--paper-2);padding:.1em .35em;border-radius:4px;color:var(--ember-deep);}
mark{background:var(--ember-soft);color:var(--ember-deep);padding:0 .2em;border-radius:3px;}
ul,ol{margin:.4em 0 1.15em;padding-left:1.5em;}
li{margin:.32em 0;}
li::marker{color:var(--ink-3);}
blockquote{
margin:1.2em 0;padding:.4em 1.1em;border-left:3px solid var(--ember);
background:var(--paper-2);color:var(--ink-2);border-radius:0 6px 6px 0;
}
blockquote p:last-child{margin-bottom:.4em;}
hr{border:none;border-top:1px solid var(--line-2);margin:2.4em 0;}

.table-wrap,table{margin:1.3em 0;}
table{
width:100%;border-collapse:collapse;font-size:.9rem;line-height:1.5;
background:var(--card);border:1px solid var(--line-2);border-radius:10px;overflow:hidden;
}
thead th{
background:var(--ink);color:var(--paper);font-family:var(--sans);font-weight:600;
text-align:left;padding:.6em .8em;font-size:.82rem;letter-spacing:.01em;vertical-align:bottom;
}
tbody td{padding:.55em .8em;border-top:1px solid var(--line);vertical-align:top;}
tbody tr:nth-child(even){background:var(--paper-2);}
tbody tr:hover{background:var(--ember-soft);}
table code{background:transparent;padding:0;}

header#title-block-header{margin-top:clamp(2rem,6vw,3.4rem);padding-bottom:1.6em;border-bottom:2px solid var(--ember);}
h1.title{font-size:clamp(2rem,5vw,3rem);font-weight:700;margin:.1em 0 .2em;}
p.subtitle{font-size:1.18rem;color:var(--ink-2);font-family:var(--serif);font-style:italic;margin:.2em 0 .9em;}
nav#TOC{
background:var(--paper-2);border:1px solid var(--line-2);border-radius:12px;
padding:1.1em 1.4em;margin:1.8em auto 2.4em;font-size:.92rem;
}
nav#TOC::before{content:"目录 · Contents";display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.7em;}
nav#TOC ul{padding-left:1.1em;}
nav#TOC>ul{padding-left:0;}
nav#TOC li{margin:.2em 0;}
nav#TOC a{border-bottom:none;color:var(--ink-2);}
nav#TOC a:hover{color:var(--ember-deep);}
nav#TOC ul ul{font-size:.88em;color:var(--ink-3);}

.author,.date{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:.2em 0;}
small{color:var(--ink-3);font-size:.82rem;line-height:1.45;overflow-wrap:anywhere;word-break:break-word;}

a,code,td,th,p,li{overflow-wrap:anywhere;}

.footer-note{margin:3.5em 0 2.5em;padding-top:1.4em;border-top:1px solid var(--line);font-size:.85rem;color:var(--ink-3);font-family:var(--mono);}

img{max-width:100%;height:auto;display:block;}
figure{margin:1.9em 0;}
figure img{margin-inline:auto;border-radius:12px;border:1px solid var(--line);box-shadow:0 1px 3px rgba(26,24,21,.06);}
figcaption{margin-top:.7em;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--ink-3);text-align:center;line-height:1.5;}
@media print{
body{background:#fff;font-size:10.5pt;}
thead th{background:#1A1815 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
tbody tr:nth-child(even){background:#F3F1EA !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
h2{break-after:avoid;}table{break-inside:avoid;}
}
@media(max-width:680px){
body{font-size:.98rem;}

table{font-size:.82rem;}
td,th{word-break:normal;overflow-wrap:normal;}
}

@media(min-width:1040px){

body>*{max-width:1040px;}
body{font-size:1.05rem;line-height:1.78;}

body>figure{max-width:1100px;}
body>figure img{max-height:600px;width:auto;}

table{font-size:.95rem;}
thead th{font-size:.88rem;}
}
@media(min-width:1280px){

body>.tbl{max-width:1200px;}
}

.tbl{margin-block:1.5em;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line-2);border-radius:10px;}
.tbl>table{margin:0;min-width:560px;border:0;border-radius:0;}
.tbl::-webkit-scrollbar{height:8px;}
.tbl::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:5px;}

/* ============ 修补 ============ */
/* ============================================================
   读物主题修补 · 2026-07-26
   修 4 个实测确认的渲染 bug，附在 reading.css 之后加载。
   ============================================================ */

/* [1] 对齐 bug：body>*{margin-inline:auto} 被各元素的 margin 简写
   （p{margin:.55em 0 1.05em} 等）重置成 0，同特异度、位置在后 → 覆盖。
   结果：header/nav 居中而正文贴左，1440 视口下错位 200px。
   修法：用 :is() 把特异度抬到 (0,0,2) 压过单类型选择器，不用 !important。 */
body > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, hr,
           table, figure, blockquote, pre, div, section, details) {
  margin-inline: auto;
}

/* [2] figure 比正文宽 60px 且同样贴左 → 右侧突出、左右不对称。
   统一到与正文同宽。 */
figure { max-width: var(--maxw); }
@media (min-width: 1040px) { body > figure { max-width: 1040px; } }

/* [3] 中文没有真斜体，font-style:italic 会被浏览器几何倾斜 → 又糊又歪。 */
.subtitle, p.subtitle { font-style: normal; }

/* [4] 宽表格在窄屏撑出横向滚动（整页可左右拖）。
   主题里本来就定义了 .tbl 滚动容器，但 pandoc 输出从没套上；
   构建脚本现在会自动包一层，这里补齐它在窄屏的行为。 */
.tbl { margin-block: 1.5em; overflow-x: auto; -webkit-overflow-scrolling: touch;
       border: 1px solid var(--line-2); border-radius: 10px; }
.tbl > table { margin: 0; border: 0; border-radius: 0; min-width: 560px; }
body > .tbl { margin-inline: auto; }

/* [5] 窄屏下让示意图铺满视口宽度，尽量保住图内文字的可读性。
   SVG 是矢量，放大不糊，读者可双指缩放看细节。 */
@media (max-width: 680px) {
  body > figure {
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: 0;
  }
  body > figure img { border-radius: 0; max-height: none; width: 100%; }
  body > figure figcaption { padding-inline: 1.1rem; }
}

/* ---- Worker 版新增：面包屑 / 专栏链接按钮 ---- */
.crumb{font-size:.9rem;margin:.6em 0 0;}
.crumb a{color:var(--ink-3);text-decoration:none;}
.crumb a:hover{color:var(--ember-deep);}
a.col-btn{text-decoration:none;display:inline-flex;align-items:center;}
.reading-article .site-header{border-bottom:1px solid var(--line);}
.brand{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:var(--ink);text-decoration:none;}