:root{
  --ink:#1E2A4A;
  --ink-soft:#3B4A6B;
  --ink-mute:#6C7896;
  --paper:#FBF8F1;
  --paper-2:#F1EBDD;
  --line:#DCD4C2;
  --accent:#B4482B;
  --accent-soft:#E9D9D1;
  --shadow:0 1px 0 var(--line);
  --serif:"Songti SC","Source Han Serif SC","Noto Serif SC",Georgia,"Times New Roman",serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.85;
  background-image:linear-gradient(to bottom,rgba(30,42,74,.035) 1px,transparent 1px);
  background-size:100% 32px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.35;margin:0 0 .5em}

/* ---------- masthead ---------- */
.masthead{border-bottom:3px double var(--ink);background:var(--paper)}
.mast-inner{max-width:1180px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:46px;height:46px;border-radius:4px;border:1px solid var(--line)}
.brand-txt{display:flex;flex-direction:column;line-height:1.2}
.brand-name{font-family:var(--serif);font-size:22px;letter-spacing:.12em;font-weight:700}
.brand-sub{font-size:11px;letter-spacing:.28em;color:var(--ink-mute);text-transform:uppercase}
.mast-meta{margin-left:auto;font-size:12px;color:var(--ink-mute);letter-spacing:.08em;text-align:right}
.mast-meta strong{display:block;color:var(--ink);font-family:var(--serif);font-size:15px;letter-spacing:.06em}
.burger{display:none;margin-left:auto;border:1px solid var(--ink);background:transparent;color:var(--ink);
  font-size:13px;letter-spacing:.16em;padding:8px 14px;border-radius:2px;cursor:pointer}

/* ---------- nav ---------- */
.navbar{border-bottom:1px solid var(--line);background:var(--paper-2)}
.nav-inner{max-width:1180px;margin:0 auto;padding:0 22px;display:flex;gap:2px;overflow-x:auto}
.nav-inner a{display:block;padding:12px 14px;font-size:14px;letter-spacing:.1em;white-space:nowrap;
  border-bottom:2px solid transparent;color:var(--ink-soft)}
.nav-inner a:hover{border-bottom-color:var(--accent);color:var(--ink)}
.nav-inner a.is-active{border-bottom-color:var(--accent);color:var(--ink);font-weight:700}

/* ---------- shell: fixed left index + main ---------- */
.shell{max-width:1180px;margin:0 auto;padding:26px 22px 10px;display:grid;grid-template-columns:206px minmax(0,1fr);gap:38px}
.rail{position:sticky;top:18px;align-self:start;border-top:2px solid var(--ink);padding-top:12px}
.rail h2{font-size:13px;letter-spacing:.22em;color:var(--ink-mute);font-family:var(--sans);margin-bottom:14px}
.rail ol{list-style:none;margin:0;padding:0;counter-reset:r}
.rail ol li{counter-increment:r;border-bottom:1px dotted var(--line)}
.rail ol li a{display:flex;gap:10px;padding:8px 0;font-size:14px;color:var(--ink-soft);line-height:1.5}
.rail ol li a::before{content:counter(r,decimal-leading-zero);font-family:var(--serif);font-size:12px;color:var(--accent);padding-top:2px}
.rail ol li a:hover{color:var(--ink)}
.rail .rail-note{margin-top:18px;font-size:12px;color:var(--ink-mute);line-height:1.7;border-left:2px solid var(--accent-soft);padding-left:10px}
main{min-width:0}

/* ---------- generic pieces ---------- */
.kicker{font-size:11px;letter-spacing:.3em;color:var(--accent);text-transform:uppercase;margin:0 0 8px;font-weight:700}
.lede{font-size:17px;color:var(--ink-soft);line-height:1.95}
.rule{height:1px;background:var(--line);margin:30px 0;border:0}
.tag{display:inline-block;font-size:11px;letter-spacing:.16em;border:1px solid var(--line);color:var(--ink-mute);
  padding:3px 9px;border-radius:999px;background:var(--paper-2)}
.btn{display:inline-block;background:var(--ink);color:#fff;padding:11px 22px;border-radius:2px;
  font-size:13px;letter-spacing:.16em}
.btn:hover{background:var(--accent);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}

/* ---------- home: opener ---------- */
.opener{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:end;padding-bottom:8px}
.opener h1{font-size:clamp(28px,4vw,44px);letter-spacing:.02em;margin-bottom:14px}
.opener .lede{max-width:44ch}
.opener-figure{position:relative}
.opener-figure img{border:1px solid var(--line);filter:saturate(.92)}
.opener-figure figcaption{font-size:12px;color:var(--ink-mute);letter-spacing:.08em;padding-top:8px;border-top:1px solid var(--line);margin-top:10px}

/* ---------- home: bento ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.bento article{background:var(--paper-2);border:1px solid var(--line);padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.bento article.b-wide{grid-column:span 3}
.bento article.b-narrow{grid-column:span 3}
.bento article.b-tall{grid-column:span 2;grid-row:span 2}
.bento article.b-half{grid-column:span 3}
.bento article img{border:1px solid var(--line);margin-bottom:2px}
.bento h3{font-size:17px}
.bento p{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.8}
.bento .stamp{font-family:var(--serif);font-size:12px;color:var(--accent);letter-spacing:.18em}

/* ---------- home: ledger list ---------- */
.ledger{border-top:2px solid var(--ink)}
.ledger-row{display:grid;grid-template-columns:86px minmax(0,1fr) 128px;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.ledger-row .num{font-family:var(--serif);font-size:20px;color:var(--accent)}
.ledger-row h3{font-size:18px;margin-bottom:4px}
.ledger-row p{margin:0;font-size:13.5px;color:var(--ink-soft)}
.ledger-row .meta{font-size:12px;color:var(--ink-mute);letter-spacing:.08em;text-align:right}

/* ---------- home: columns duo ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.stack-list{margin:0;padding:0;list-style:none}
.stack-list li{padding:11px 0;border-bottom:1px dotted var(--line);display:flex;gap:12px;align-items:baseline}
.stack-list li span{font-size:12px;color:var(--ink-mute);font-family:var(--serif);white-space:nowrap}

/* ---------- home: faq / q ---------- */
.qgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.qcard{border-left:3px solid var(--accent);padding:2px 0 2px 16px}
.qcard h3{font-size:16px}
.qcard p{margin:0;font-size:13.5px;color:var(--ink-soft)}

/* ---------- category page ---------- */
.cat-head{border-bottom:2px solid var(--ink);padding-bottom:16px;margin-bottom:8px;display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:26px;align-items:end}
.cat-head h1{font-size:clamp(24px,3.2vw,34px)}
.cat-head img{border:1px solid var(--line)}
.entry-list{list-style:none;margin:0;padding:0}
.entry-list li{border-bottom:1px solid var(--line);padding:18px 0;display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:18px;align-items:center}
.entry-list h2{font-size:19px;margin-bottom:6px}
.entry-list p{margin:0;font-size:14px;color:var(--ink-soft)}
.entry-list img{border:1px solid var(--line)}

/* ---------- article ---------- */
.crumb{font-size:12.5px;color:var(--ink-mute);letter-spacing:.08em;margin-bottom:18px}
.crumb a{color:var(--ink-soft)}
.crumb span{margin:0 7px;color:var(--line)}
.art-head h1{font-size:clamp(25px,3.4vw,36px);margin-bottom:12px}
.byline{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-mute);letter-spacing:.06em;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:9px 0;margin-bottom:22px}
.byline b{color:var(--ink);font-weight:600}
.art-figure{margin:0 0 24px}
.art-figure img{border:1px solid var(--line)}
.art-figure figcaption{font-size:12px;color:var(--ink-mute);padding-top:7px;border-top:1px solid var(--line);margin-top:8px}
.prose p{margin:0 0 1.05em}
.prose h2{font-size:22px;margin:1.7em 0 .6em;padding-bottom:.3em;border-bottom:1px solid var(--line)}
.prose h3{font-size:17.5px;margin:1.4em 0 .5em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.05em}
.prose li{margin-bottom:.4em}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.callout{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--ink);
  padding:14px 18px;margin:1.5em 0;font-size:14.5px;color:var(--ink-soft)}
.compare{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:14px}
.compare th,.compare td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.compare th{background:var(--paper-2);font-family:var(--serif);letter-spacing:.06em}
.art-foot{margin-top:34px;border-top:2px solid var(--ink);padding-top:16px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.art-foot .backcat{font-size:13px;letter-spacing:.1em}
.aside{margin-top:34px;background:var(--paper-2);border:1px solid var(--line);padding:20px 22px}
.aside h2{font-size:14px;letter-spacing:.2em;color:var(--ink-mute);font-family:var(--sans);margin-bottom:14px}
.aside ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.aside li a{display:block;font-size:14px;line-height:1.6;border-top:2px solid var(--ink);padding-top:8px;color:var(--ink-soft)}
.aside li a:hover{color:var(--accent)}
.aside li small{display:block;font-size:11px;color:var(--ink-mute);letter-spacing:.14em;margin-top:4px}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#D9DDEA;margin-top:44px;padding:34px 22px 26px}
.foot-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.site-foot h2{font-family:var(--serif);font-size:16px;color:#fff;letter-spacing:.1em;margin-bottom:10px}
.site-foot p,.site-foot li{font-size:13px;line-height:1.9;color:#C3CADB;margin:0 0 4px}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot a{color:#E7EAF3}
.site-foot a:hover{color:#fff;text-decoration:underline}
.foot-bar{max-width:1180px;margin:24px auto 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);
  font-size:12px;color:#A9B2C8;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .shell{grid-template-columns:1fr;gap:22px}
  .rail{position:static;order:2}
  .opener,.duo,.cat-head{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento article.b-wide,.bento article.b-narrow,.bento article.b-tall,.bento article.b-half{grid-column:span 2;grid-row:auto}
  .qgrid{grid-template-columns:1fr}
  .aside ul{grid-template-columns:1fr}
  .foot-inner{grid-template-columns:1fr}
}
@media (max-width:768px){
  body{font-size:15.5px;background-size:100% 30px}
  .mast-inner{padding:12px 16px}
  .mast-meta{display:none}
  .burger{display:block}
  .navbar{display:none}
  .navbar.open{display:block}
  .nav-inner{flex-direction:column;padding:6px 16px 12px}
  .nav-inner a{padding:12px 4px;border-bottom:1px solid var(--line);white-space:normal}
  .shell{padding:20px 16px 6px}
  .ledger-row{grid-template-columns:44px minmax(0,1fr);gap:12px}
  .ledger-row .meta{grid-column:2;text-align:left}
  .entry-list li{grid-template-columns:1fr}
  .entry-list img{max-width:180px}
  .bento{grid-template-columns:1fr}
  .bento article.b-wide,.bento article.b-narrow,.bento article.b-tall,.bento article.b-half{grid-column:span 1}
  .compare{font-size:13px}
  .site-foot{padding:26px 16px 22px}
  .btn{display:block;text-align:center}
}