@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Noto+Serif+SC:wght@400;600;900&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{--paper:#E6E6E6;--ink:#1B2B26;--ox:#7A1E2B;--rule:#1B2B2633}
*{box-sizing:border-box}html{background:var(--paper);color:var(--ink)}
body{margin:0;font-family:'Noto Serif SC',serif;line-height:1.9;font-size:18px}
a{color:inherit}.mono{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.mast{display:grid;grid-template-columns:1fr auto;align-items:end;padding:28px 6vw 14px;border-bottom:3px double var(--ink)}
.mast h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(48px,9vw,128px);line-height:.85;margin:0;letter-spacing:-.02em}
.mast h1 i{color:var(--ox)}
.index{padding:0 6vw 80px}
.entry{display:grid;grid-template-columns:8ch 1.1fr 1fr;gap:4vw;padding:44px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.entry .num{font-family:'Instrument Serif',serif;font-size:72px;line-height:1;color:var(--ox)}
.entry h2{font-weight:900;font-size:clamp(26px,3vw,40px);line-height:1.25;margin:.2em 0}
.entry .en{font-family:'Instrument Serif',serif;font-style:italic;font-size:22px;opacity:.75}
.entry img{width:100%;display:block;filter:saturate(.9);mix-blend-mode:multiply}
.entry:hover h2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.opening{display:grid;grid-template-columns:1fr 1fr;min-height:90vh;border-bottom:3px double var(--ink)}
.opening .t{padding:6vw;display:flex;flex-direction:column;justify-content:space-between}
.opening h1{font-weight:900;font-size:clamp(40px,5.5vw,84px);line-height:1.1;margin:.3em 0}
.opening .en{font-family:'Instrument Serif',serif;font-style:italic;font-size:28px}
.opening img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
dl.meta{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0}dl.meta dt{opacity:.6}dl.meta dd{margin:0}
article.body{max-width:min(46em,88vw);margin:0 auto;padding:72px 32px 120px}
article.body h2{font-size:28px;font-weight:900;margin:2.4em 0 .6em;border-top:1px solid var(--ink);padding-top:.6em}
article.body blockquote{margin:1.6em 0;padding-left:1em;border-left:3px solid var(--ox);font-family:'Instrument Serif',serif;font-size:21px;line-height:1.5}
.note{margin:2.4em -6vw 2.4em 0;padding:22px 26px;background:var(--ink);color:var(--paper);position:relative}
.note::before{content:'编者点评';display:block;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.3em;color:#E8A9A0;margin-bottom:8px}
.note p{margin:.4em 0}
.notice{border:1px solid var(--ink);padding:14px 18px;font-size:15px}
footer{padding:30px 6vw;border-top:1px solid var(--rule)}
@media(max-width:800px){.entry{grid-template-columns:1fr}.opening{grid-template-columns:1fr}.note{margin-right:0}}
.readorig{display:inline-block;margin-top:18px;padding:12px 22px;background:var(--ox);color:#F3E9E6;text-decoration:none;font-family:'IBM Plex Mono',monospace;letter-spacing:.15em;font-size:13px}
.readorig:hover{background:var(--ink)}
article.body h3{font-size:21px;font-weight:900;margin:1.8em 0 .4em}
article.body table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.6;margin:1.4em 0}
article.body th{text-align:left;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;border-bottom:2px solid var(--ink);padding:8px 10px}
article.body td{border-bottom:1px solid var(--rule);padding:10px;vertical-align:top}
article.body td:first-child{font-weight:600;white-space:nowrap}
article.body pre{background:#CFCFCF;padding:20px 22px;overflow-x:auto;font-family:'IBM Plex Mono',monospace;font-size:13.5px;line-height:1.7;white-space:pre-wrap}
article.body ol.check{list-style:none;padding:0;counter-reset:c}
article.body ol.check li{counter-increment:c;padding:10px 0 10px 3em;border-bottom:1px solid var(--rule);position:relative}
article.body ol.check li::before{content:counter(c,decimal-leading-zero);position:absolute;left:0;font-family:'Instrument Serif',serif;font-size:26px;color:var(--ox);line-height:1.3}
.toc{border-top:3px double var(--ink);border-bottom:1px solid var(--ink);padding:16px 0;margin-bottom:2em}
.toc ol{margin:6px 0 0;padding-left:1.4em;columns:2;column-gap:3em;font-size:16px}
@media(max-width:800px){.toc ol{columns:1}article.body td:first-child{white-space:normal}}
/* category homepage */
.tabs{display:flex;flex-wrap:wrap;gap:0;padding:0 6vw;border-bottom:1px solid var(--ink);position:sticky;top:0;background:var(--paper);z-index:5}
.tabs button{all:unset;cursor:pointer;padding:14px 22px 12px;font-family:'Noto Serif SC',serif;font-size:16px;border-right:1px solid var(--rule)}
.tabs button:first-child{padding-left:0}
.tabs button[aria-pressed=true]{color:var(--ox);box-shadow:inset 0 -3px 0 var(--ox)}
.tabs button sup{font-family:'IBM Plex Mono',monospace;font-size:11px;margin-left:4px;opacity:.6}
.cat{padding:56px 6vw 24px}
.cat-head{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:baseline;border-bottom:3px double var(--ink);padding-bottom:10px;margin-bottom:32px}
.cat-head .roman{font-family:'Instrument Serif',serif;font-size:56px;line-height:1;color:var(--ox)}
.cat-head h2{margin:0;font-weight:900;font-size:clamp(26px,2.6vw,38px)}
.cat-head h2 i{font-family:'Instrument Serif',serif;font-weight:400;font-size:.7em;margin-left:12px;opacity:.7}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:0;border-left:1px solid var(--rule)}
.card{display:flex;flex-direction:column;text-decoration:none;padding:0 26px 28px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);transition:background .25s}
.card:hover{background:#DADADA}
.card .img{margin:0 -26px 20px;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--ink)}
.card img{width:100%;height:100%;object-fit:cover;display:block;mix-blend-mode:multiply;transition:transform .5s}
.card:hover img{transform:scale(1.03)}
.card h3{font-weight:900;font-size:26px;line-height:1.3;margin:.3em 0 .1em}
.card .en{font-family:'Instrument Serif',serif;font-style:italic;font-size:19px;opacity:.75;line-height:1.3}
.card .hook{font-size:16px;line-height:1.75;margin:14px 0 18px;flex:1}
.card .by{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--ink);padding-top:10px}
.card:hover h3{color:var(--ox)}
.soon{padding:28px 0 8px;font-family:'Instrument Serif',serif;font-style:italic;font-size:22px;opacity:.55}
@media(max-width:700px){.grid{grid-template-columns:1fr}.cat-head{grid-template-columns:auto 1fr}.cat-head .mono{display:none}}
/* per-article tint (set by scripts/build.py) */
body.article{background:var(--tint,var(--paper))}
body.article .opening{background:var(--tint,var(--paper))}
.opening figure.cover{margin:0;display:flex;flex-direction:column;justify-content:center;padding:6vw 6vw 6vw 0}
.opening figure.cover img{width:100%;height:auto;object-fit:contain;mix-blend-mode:normal;border:1px solid var(--rule)}
.credit{margin-top:10px;font-size:11px;opacity:.7}
.credit a{text-decoration:underline}
@media(max-width:800px){.opening figure.cover{padding:0 6vw 6vw}}

/* compact cards v2 */
.grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{padding:0 18px 16px}
.card .img{margin:0 -18px 12px;aspect-ratio:2/1}
.card img{object-position:center 40%}
.card h3{font-size:19px;line-height:1.4;margin:0 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .hook{font-size:14px;line-height:1.6;margin:0 0 10px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .by{display:block;font-size:11px;padding-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat{padding:40px 6vw 16px}.cat-head{margin-bottom:22px}
.card .by{margin-top:auto}
/* card hit-area fix: box ends at visible bottom */
.grid{align-items:start;grid-auto-rows:auto}
.card{align-self:start;height:auto;min-height:0;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.card:focus{outline:none}
.card:focus-visible{outline:2px solid var(--ox);outline-offset:-2px;background:#DADADA}
.cat{position:relative;isolation:isolate}
/* portrait cards v3 (3:4, ~3 per row at 1440) */
.grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.card{aspect-ratio:3/4;padding:0 22px 18px}
.card .img{aspect-ratio:auto;flex:1 1 auto;min-height:0;margin:0 -22px 16px}
.card img{object-fit:cover;object-position:center 45%}
.card h3{font-size:22px;margin:0 0 6px}
.card .hook{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:15px;line-height:1.65;margin:0 0 12px;min-height:3.3em}
.card .by{margin-top:0;font-size:11.5px}
@media(max-width:700px){.card{aspect-ratio:auto}.card .img{aspect-ratio:4/3;flex:none}}
/* v3.1: match Zhu's box (~365x488 css px at 1440) */
.grid{grid-template-columns:repeat(auto-fill,minmax(330px,368px));border-left:0}
.card{border-left:1px solid var(--rule)}
/* v3.2: full 1px border on all sides */
.grid{gap:20px;border:0}
.card{border:1px solid var(--rule);box-sizing:border-box}
.card .img{position:relative;z-index:0}
/* editor diagrams */
figure.fig{margin:2.2em 0;border:1px solid var(--rule);background:#E6E6E6}
figure.fig img{display:block;width:100%;height:auto}
figure.fig figcaption{padding:10px 14px;border-top:1px solid var(--rule);font-size:11.5px}
/* column alignment: every block in the article body shares the text column edges */
article.body>*{max-width:100%}
article.body figure,article.body figure.fig,article.body table,article.body pre,article.body img,article.body .note,article.body .notice,article.body blockquote,article.body .toc{
  box-sizing:border-box;width:100%;margin-left:0;margin-right:0}
article.body img{display:block;height:auto}
article.body figure.fig img{width:100%}
article.body pre{overflow-x:auto}
article.body table{display:table;table-layout:auto}
@media(max-width:800px){article.body table{display:block;overflow-x:auto}}

/* Keep every card's artwork and divider aligned, regardless of title length. */
.card h3{min-height:2.8em}
.card .img{flex:0 0 auto;aspect-ratio:5/4}
@media(max-width:700px){.card .img{aspect-ratio:4/3}}