:root{
  --ink:#14181d;
  --ink-soft:#2b333c;
  --bg:#f6f5f2;
  --paper:#ffffff;
  --line:#d9d6cf;
  --line-soft:#e8e5de;
  --amber:#b06a12;
  --amber-soft:#f2e2c9;
  --steel:#40607a;
  --muted:#6c737c;
  --radius:3px;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Noto Serif SC","Source Han Serif SC","Songti SC",Georgia,"Times New Roman",serif;
  font-size:16.5px;
  line-height:1.85;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--amber)}
h1,h2,h3,h4{font-family:"Noto Serif SC","Source Han Serif SC",Georgia,serif;line-height:1.3;margin:0 0 .6em}
p{margin:0 0 1.05em}
ul,ol{padding-left:1.3em}
.sans{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif}

/* ---------- top bar ---------- */
.topbar{
  background:var(--ink);
  color:#e9e6df;
  font-size:13px;
  letter-spacing:.06em;
}
.topbar .wrap{
  max-width:var(--maxw);margin:0 auto;padding:9px 24px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:"Noto Sans SC",system-ui,sans-serif;
}
.topbar a{color:#e9e6df}
.topbar .dot{color:#b06a12;margin-right:6px}

/* ---------- masthead ---------- */
.masthead{
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.masthead .wrap{
  max-width:var(--maxw);margin:0 auto;padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:46px;height:46px;border-radius:var(--radius);border:1px solid var(--line)}
.brand-name{font-size:22px;letter-spacing:.12em;margin:0;font-family:"Noto Serif SC","Source Han Serif SC",Georgia,serif;line-height:1.3}
.brand-sub{
  font-family:"Noto Sans SC",system-ui,sans-serif;
  font-size:11.5px;color:var(--muted);letter-spacing:.22em;margin-top:2px;
}
.mast-links{display:flex;gap:22px;font-size:14px;font-family:"Noto Sans SC",system-ui,sans-serif;color:var(--muted)}

/* ---------- primary nav ---------- */
.mainnav{background:var(--paper);border-bottom:3px double var(--line)}
.mainnav .wrap{
  max-width:var(--maxw);margin:0 auto;padding:0 24px;
  display:flex;gap:4px;flex-wrap:wrap;
}
.mainnav a{
  display:block;padding:12px 15px;
  font-family:"Noto Sans SC",system-ui,sans-serif;
  font-size:14.5px;letter-spacing:.08em;color:var(--ink-soft);
  border-bottom:2px solid transparent;
}
.mainnav a:hover{border-bottom-color:var(--amber);color:var(--amber)}
.mainnav a.on{border-bottom-color:var(--amber);color:var(--amber);font-weight:600}

/* ---------- page shell : left rail + wide data column ---------- */
.shell{
  max-width:var(--maxw);margin:0 auto;padding:34px 24px 60px;
  display:grid;grid-template-columns:236px minmax(0,1fr);gap:42px;
  align-items:start;
}
.rail{position:sticky;top:18px;font-family:"Noto Sans SC",system-ui,sans-serif;font-size:13.5px}
.rail-block{border-top:2px solid var(--ink);padding-top:12px;margin-bottom:26px}
.rail-block h3{
  font-size:12px;letter-spacing:.24em;color:var(--muted);
  font-family:"Noto Sans SC",system-ui,sans-serif;font-weight:600;margin-bottom:10px;
}
.rail-list{list-style:none;margin:0;padding:0}
.rail-list li{border-bottom:1px dotted var(--line);padding:7px 0}
.rail-list a{display:flex;justify-content:space-between;gap:8px;color:var(--ink-soft)}
.rail-list .cnt{color:var(--muted);font-size:12px}
.rail-note{
  background:var(--amber-soft);border-left:3px solid var(--amber);
  padding:12px 14px;font-size:12.5px;line-height:1.75;color:#5a4018;
}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.35fr 1fr;gap:30px;align-items:end;margin-bottom:30px}
.hero-media{border:1px solid var(--line);overflow:hidden}
.hero-media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.hero-body h1{font-size:34px;letter-spacing:.02em;margin-top:14px;margin-bottom:14px}
.kicker{
  font-family:"Noto Sans SC",system-ui,sans-serif;
  font-size:12px;letter-spacing:.28em;color:var(--amber);text-transform:uppercase;
}
.lede{color:var(--ink-soft);font-size:17px}
.hero-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:18px;
}
.hero-stats div{background:var(--paper);padding:12px 14px}
.hero-stats b{display:block;font-size:19px;letter-spacing:.02em}
.hero-stats span{font-family:"Noto Sans SC",system-ui,sans-serif;font-size:11.5px;color:var(--muted);letter-spacing:.1em}

/* ---------- section rhythm : alternating zigzag ---------- */
.sect{padding:30px 0;border-top:1px solid var(--line)}
.sect-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.sect-head h2{font-size:23px;margin:0}
.sect-head .num{
  font-family:"Noto Sans SC",system-ui,sans-serif;font-size:12px;letter-spacing:.2em;color:var(--muted);
}
.zig{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.zig.rev .zig-media{order:2}
.zig-media{border:1px solid var(--line);overflow:hidden;background:var(--paper)}
.zig-media img{width:100%;aspect-ratio:16/11;object-fit:cover}
.zig-body h3{font-size:20px;margin-bottom:10px}
.zig-body p{color:var(--ink-soft);font-size:15.5px}
.tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.tag{
  font-family:"Noto Sans SC",system-ui,sans-serif;font-size:12px;letter-spacing:.08em;
  border:1px solid var(--line);padding:3px 9px;color:var(--muted);background:var(--paper);border-radius:999px;
}

/* ---------- data table ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);background:var(--paper)}
table.data{width:100%;border-collapse:collapse;font-family:"Noto Sans SC",system-ui,sans-serif;font-size:13.5px}
table.data caption{
  text-align:left;padding:12px 14px;font-size:12px;letter-spacing:.18em;color:var(--muted);
  border-bottom:1px solid var(--line-soft);
}
table.data th,table.data td{padding:10px 14px;border-bottom:1px solid var(--line-soft);text-align:left;white-space:nowrap}
table.data th{background:#efece5;font-weight:600;letter-spacing:.06em;color:var(--ink-soft)}
table.data tr:last-child td{border-bottom:0}
table.data td.up{color:#9a5a08;font-weight:600}
table.data td.down{color:var(--steel);font-weight:600}

/* ---------- card entries (asymmetric) ---------- */
.entries{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line);border:1px solid var(--line)}
.entry{background:var(--paper);padding:20px 20px 18px;display:flex;flex-direction:column;gap:8px}
.entry .meta{font-family:"Noto Sans SC",system-ui,sans-serif;font-size:11.5px;letter-spacing:.14em;color:var(--amber)}
.entry h3{font-size:17.5px;margin:0}
.entry p{font-size:14.5px;color:var(--ink-soft);margin:0}
.entry .go{font-family:"Noto Sans SC",system-ui,sans-serif;font-size:12.5px;color:var(--steel);margin-top:auto}

/* ---------- reading columns ---------- */
.readgrid{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.readcol p:first-child::first-letter{
  float:left;font-size:52px;line-height:.9;padding:4px 10px 0 0;color:var(--amber);
  font-family:Georgia,serif;
}
.pull{
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  padding:16px 0;margin:6px 0 22px;font-size:18.5px;line-height:1.65;color:var(--ink);
}
.pull cite{display:block;font-family:"Noto Sans SC",system-ui,sans-serif;font-size:12px;letter-spacing:.16em;color:var(--muted);font-style:normal;margin-top:10px}

/* ---------- article page ---------- */
.crumb{font-family:"Noto Sans SC",system-ui,sans-serif;font-size:12.5px;color:var(--muted);margin-bottom:16px;letter-spacing:.05em}
.crumb a{color:var(--muted)}
.crumb span{margin:0 7px;color:#bbb}
.artgrid{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:44px;align-items:start}
article.post h1{font-size:31px;line-height:1.28;margin-bottom:12px}
.post-meta{
  font-family:"Noto Sans SC",system-ui,sans-serif;font-size:12.5px;color:var(--muted);
  letter-spacing:.08em;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:24px;
  display:flex;gap:16px;flex-wrap:wrap;
}
.fig{margin:0 0 24px;border:1px solid var(--line);background:var(--paper)}
.fig img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig figcaption{
  font-family:"Noto Sans SC",system-ui,sans-serif;font-size:12px;color:var(--muted);
  padding:9px 13px;border-top:1px solid var(--line-soft);
}
.post h2{font-size:22px;margin-top:34px;padding-top:16px;border-top:1px solid var(--line-soft)}
.post h3{font-size:17.5px;margin-top:22px;color:var(--ink-soft)}
.post ul,.post ol{margin:0 0 1.1em}
.post li{margin-bottom:.4em}
.post table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px;background:var(--paper)}
.post table th,.post table td{border:1px solid var(--line-soft);padding:9px 12px;text-align:left}
.post table th{background:#efece5}
.keybox{
  background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--amber);
  padding:16px 18px;margin:24px 0;font-size:15px;
}
.keybox h3{margin:0 0 8px;font-size:14px;font-family:"Noto Sans SC",system-ui,sans-serif;letter-spacing:.16em;color:var(--amber)}
.keybox ul{margin:0;padding-left:1.15em}

/* ---------- sidebar (article aside) ---------- */
aside.side{border-top:2px solid var(--ink);padding-top:14px;font-family:"Noto Sans SC",system-ui,sans-serif}
aside.side h2{font-size:12.5px;letter-spacing:.22em;color:var(--muted);font-family:"Noto Sans SC",system-ui,sans-serif;margin-bottom:12px}
aside.side .rel{list-style:none;margin:0 0 26px;padding:0;font-size:14px}
aside.side .rel li{padding:11px 0;border-bottom:1px dotted var(--line)}
aside.side .rel a{display:block;line-height:1.6}
aside.side .rel small{display:block;color:var(--muted);font-size:11.5px;letter-spacing:.1em;margin-top:3px}
aside.side .note{font-size:12.5px;color:var(--muted);line-height:1.8;background:var(--paper);border:1px solid var(--line);padding:12px 14px}

/* ---------- category page ---------- */
.cathead{border-bottom:3px double var(--line);padding-bottom:18px;margin-bottom:26px}
.cathead h1{font-size:30px;margin-bottom:8px}
.cathead p{color:var(--ink-soft);max-width:62ch}
.postlist{list-style:none;margin:0;padding:0}
.postlist li{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;padding:18px 0;border-bottom:1px solid var(--line-soft)}
.postlist img{width:132px;height:92px;object-fit:cover;border:1px solid var(--line)}
.postlist h3{font-size:17.5px;margin:0 0 6px}
.postlist p{margin:0;font-size:14.5px;color:var(--ink-soft)}
.postlist .meta{font-family:"Noto Sans SC",system-ui,sans-serif;font-size:11.5px;letter-spacing:.12em;color:var(--amber);margin-bottom:5px}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#c9c6bf;margin-top:40px;font-family:"Noto Sans SC",system-ui,sans-serif}
footer.site .wrap{max-width:var(--maxw);margin:0 auto;padding:38px 24px 26px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
footer.site h4{color:#fff;font-size:13px;letter-spacing:.2em;margin-bottom:12px;font-weight:600}
footer.site a{color:#c9c6bf;font-size:13.5px}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{padding:5px 0}
footer.site p{font-size:13px;line-height:1.9;color:#9d9a94}
.footbase{border-top:1px solid #2c333b;font-size:12px;color:#8b8882}
.footbase .wrap{display:flex;justify-content:space-between;gap:14px;padding:14px 24px;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .shell{grid-template-columns:1fr;padding:24px 18px 46px;gap:26px}
  .rail{position:static}
  .hero{grid-template-columns:1fr}
  .zig{grid-template-columns:1fr}
  .zig.rev .zig-media{order:0}
  .readgrid{grid-template-columns:1fr}
  .artgrid{grid-template-columns:1fr;gap:28px}
  .entries{grid-template-columns:1fr}
  footer.site .wrap{grid-template-columns:1fr}
}
@media (max-width:600px){
  body{font-size:16px}
  .hero-body h1{font-size:26px}
  .masthead .wrap{padding:14px 18px}
  .mainnav .wrap{padding:0 12px;overflow-x:auto}
  .mainnav a{padding:10px 11px;white-space:nowrap}
  .postlist li{grid-template-columns:1fr}
  .postlist img{width:100%;height:150px}
  .hero-stats{grid-template-columns:1fr}
}