/* bozhengfang.com — ledger-rail layout: left guide rail + right content flow */
:root{
  --ink:#0f2b33;
  --ink-soft:#254851;
  --copper:#a8763e;
  --copper-soft:#d9b48a;
  --paper:#f7f4ee;
  --paper-2:#eee8de;
  --line:#d8d0c2;
  --muted:#5c6a6d;
  --white:#fffdf9;
  --rail-w:264px;
  --radius:2px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Serif SC","Songti SC","Source Han Serif SC",Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1.85;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink-soft);text-decoration:none}
a:hover{color:var(--copper)}
h1,h2,h3,h4{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;line-height:1.35;margin:0}
p{margin:0 0 1.1em}

/* ---------- top bar ---------- */
.topbar{
  background:var(--ink);
  color:var(--paper);
  border-bottom:3px solid var(--copper);
}
.topbar-inner{
  max-width:1180px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:12px;color:var(--paper)}
.brand img{width:46px;height:46px;border-radius:var(--radius);background:var(--paper)}
.brand-name{font-family:system-ui,sans-serif;font-weight:700;font-size:19px;letter-spacing:.02em;display:block}
.brand-sub{display:block;font-family:system-ui,sans-serif;font-size:12px;color:var(--copper-soft);letter-spacing:.06em}
.menu-toggle{
  margin-left:auto;display:none;
  background:transparent;border:1px solid var(--copper-soft);color:var(--paper);
  font-family:system-ui,sans-serif;font-size:14px;padding:8px 14px;border-radius:var(--radius);cursor:pointer;
}
.navrail{width:100%;display:flex;gap:4px;flex-wrap:wrap;padding-top:10px;border-top:1px solid rgba(217,180,138,.25)}
.navrail a{
  color:var(--paper);font-family:system-ui,sans-serif;font-size:14px;
  padding:6px 12px;border-radius:var(--radius);
}
.navrail a:hover{background:rgba(217,180,138,.18);color:var(--white)}
.navrail a.is-active{background:var(--copper);color:#fff}

/* ---------- shell ---------- */
.shell{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- home ---------- */
.home-head{padding:34px 0 10px;border-bottom:1px solid var(--line)}
.home-head .kicker{font-family:system-ui,sans-serif;font-size:12px;letter-spacing:.16em;color:var(--copper);text-transform:uppercase}
.home-head h1{font-size:clamp(26px,4vw,42px);margin:10px 0 12px;letter-spacing:-.01em}
.home-head p{max-width:800px;color:var(--muted);font-size:16px}

.section{padding:38px 0;border-bottom:1px solid var(--line)}
.section:last-child{border-bottom:0}
.sec-label{font-family:system-ui,sans-serif;font-size:12px;letter-spacing:.14em;color:var(--copper);text-transform:uppercase;margin-bottom:8px}
.sec-title{font-size:clamp(21px,2.4vw,27px);margin-bottom:18px}

/* s1 digest strip */
.digest{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;align-items:stretch}
.digest-figure{border:1px solid var(--line);background:var(--white);padding:10px}
.digest-figure figcaption{font-size:12.5px;color:var(--muted);padding:8px 2px 0;font-family:system-ui,sans-serif}
.digest-notes{display:flex;flex-direction:column;gap:14px}
.note{
  border-left:3px solid var(--copper);padding:2px 0 2px 14px;
  font-size:15.5px;color:var(--ink-soft);
}
.note b{font-family:system-ui,sans-serif;font-size:13px;letter-spacing:.04em;color:var(--copper);display:block;margin-bottom:2px;font-weight:600}

/* s2 ledger table */
.ledger{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.ledger-row{
  display:grid;grid-template-columns:56px 1.1fr 1fr 120px;gap:16px;
  padding:16px 4px;border-bottom:1px solid var(--line);align-items:center;
}
.ledger-row:last-child{border-bottom:0}
.ledger-row .num{font-family:system-ui,sans-serif;font-size:13px;color:var(--copper);letter-spacing:.06em}
.ledger-row h3{font-size:17px;margin:0}
.ledger-row p{margin:0;font-size:14.5px;color:var(--muted)}
.ledger-row .tag{font-family:system-ui,sans-serif;font-size:12.5px;color:var(--ink-soft);border:1px solid var(--line);text-align:center;padding:5px 2px;background:var(--white)}

/* s3 vertical reasons */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-left:1px solid var(--line)}
.reason{
  padding:20px 22px;border-right:1px solid var(--line);
  background:var(--white);
}
.reason .rnum{font-family:system-ui,sans-serif;font-size:30px;color:var(--copper-soft);line-height:1;margin-bottom:10px}
.reason h3{font-size:17px;margin-bottom:8px}
.reason p{font-size:14.5px;color:var(--muted);margin:0}

/* s4 slanted editorial */
.slant{
  display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--ink);color:var(--paper);
  overflow:hidden;
}
.slant figure{margin:0}
.slant figure img{height:100%;object-fit:cover}
.slant-copy{padding:30px 28px}
.slant-copy .sec-label{color:var(--copper-soft)}
.slant-copy h2{color:var(--paper);font-size:clamp(20px,2.3vw,26px);margin-bottom:12px}
.slant-copy p{color:#d6e0de;font-size:15.5px}
.slant-copy .rail-link{color:var(--copper-soft);font-family:system-ui,sans-serif;font-size:14px;border-bottom:1px solid var(--copper-soft)}

/* s5 figure band */
.figure-band{display:grid;grid-template-columns:1fr 1.2fr;gap:26px;align-items:center}
.figure-band figure{margin:0;border:1px solid var(--line);background:var(--white);padding:10px}
.fb-stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stat{border-top:2px solid var(--copper);padding-top:10px}
.stat .v{font-family:system-ui,sans-serif;font-size:30px;color:var(--ink);line-height:1.1}
.stat .l{font-family:system-ui,sans-serif;font-size:13px;color:var(--muted);margin-top:4px}

/* s6 two-column Q&A */
.qa{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);background:var(--white)}
.qa-item{padding:18px 22px;border-bottom:1px solid var(--line)}
.qa-item:nth-child(odd){border-right:1px solid var(--line)}
.qa-item h3{font-size:16px;margin-bottom:6px;color:var(--ink)}
.qa-item p{font-size:14.5px;color:var(--muted);margin:0}

/* s7 latest rail list */
.latest{display:grid;grid-template-columns:repeat(2,1fr);gap:0 34px}
.latest-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px dashed var(--line)}
.latest-item .cat{font-family:system-ui,sans-serif;font-size:12px;color:var(--copper);min-width:64px;letter-spacing:.04em}
.latest-item a{font-size:15.5px;color:var(--ink)}
.latest-item:hover a{color:var(--copper)}

/* s8 closing */
.closing{
  background:var(--paper-2);border:1px solid var(--line);
  padding:30px 28px;display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center;
}
.closing h2{font-size:clamp(20px,2.3vw,25px);margin-bottom:10px}
.closing p{font-size:15px;color:var(--ink-soft);margin:0}
.closing figure{margin:0}
.closing figure img{border:1px solid var(--line)}

/* ---------- category page ---------- */
.cat-head{padding:30px 0 18px;border-bottom:1px solid var(--ink)}
.breadcrumb{font-family:system-ui,sans-serif;font-size:13px;color:var(--muted);padding:14px 0 0}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--copper)}
.cat-head h1{font-size:clamp(24px,3vw,34px);margin:12px 0 10px}
.cat-head p{color:var(--muted);font-size:15.5px;max-width:760px}
.cat-feature{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line)}
.cat-feature figure{margin:0;border:1px solid var(--line);background:var(--white);padding:8px}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-bottom:1px solid var(--line);padding:18px 0;display:grid;grid-template-columns:1fr 220px;gap:18px;align-items:start}
.cat-list li h2{font-size:18px;margin-bottom:6px}
.cat-list li h2 a{color:var(--ink)}
.cat-list li p{margin:0;font-size:14.5px;color:var(--muted)}
.cat-meta{font-family:system-ui,sans-serif;font-size:12.5px;color:var(--muted);text-align:right;line-height:1.7}

/* ---------- article page ---------- */
.article-layout{
  display:grid;grid-template-columns:var(--rail-w) 1fr;gap:0;
  max-width:1180px;margin:0 auto;padding:0 20px 40px;
  border-left:1px solid var(--line);border-right:1px solid var(--line);
}
.article-rail{
  border-right:1px solid var(--line);padding:24px 18px 30px;
  font-family:system-ui,sans-serif;font-size:13px;
}
.rail-title{font-size:12px;letter-spacing:.12em;color:var(--copper);text-transform:uppercase;margin-bottom:12px}
.rail-list{list-style:none;margin:0 0 22px;padding:0}
.rail-list li{padding:8px 0;border-bottom:1px dashed var(--line)}
.rail-list a{color:var(--ink-soft);font-size:13.5px;line-height:1.6;display:block}
.rail-list a:hover{color:var(--copper)}
.rail-author{border:1px solid var(--line);background:var(--white);padding:12px;margin-bottom:18px}
.rail-author .an{font-family:system-ui,sans-serif;font-size:14px;color:var(--ink);font-weight:600}
.rail-author .ar{font-size:12px;color:var(--muted);margin-top:2px}
.rail-facts{font-size:12px;color:var(--muted);line-height:1.7}

.article-body{padding:24px 30px 10px}
.article-body h1{font-size:clamp(24px,3.1vw,34px);margin:0 0 12px}
.article-dek{font-size:16px;color:var(--muted);margin-bottom:14px}
.article-byline{font-family:system-ui,sans-serif;font-size:13px;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin-bottom:22px;display:flex;gap:16px;flex-wrap:wrap}
.article-body h2{font-size:20px;margin:30px 0 12px;padding-left:12px;border-left:3px solid var(--copper)}
.article-body h3{font-size:17px;margin:22px 0 8px}
.article-body figure{margin:22px 0;border:1px solid var(--line);background:var(--white);padding:8px}
.article-body figcaption{font-family:system-ui,sans-serif;font-size:12.5px;color:var(--muted);padding:8px 2px 0}
.article-body ul,.article-body ol{padding-left:22px;margin:0 0 1.1em;color:var(--ink-soft)}
.article-body li{margin-bottom:6px}
.article-body .inline-check{border:1px solid var(--line);background:var(--paper-2);padding:14px 18px;margin:22px 0}
.article-body .inline-check .tt{font-family:system-ui,sans-serif;font-size:13px;letter-spacing:.08em;color:var(--copper);margin-bottom:6px}
.article-end{border-top:1px solid var(--ink);margin-top:30px;padding-top:14px;font-family:system-ui,sans-serif;font-size:14px}
.article-end a{color:var(--copper)}

/* article teaser variant for alternating layouts */
.article-body.teaser-first .teaser{
  display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);margin:0 0 24px;background:var(--white);
}
.article-body.teaser-first .teaser figure{margin:0;border:0;padding:0}
.article-body.teaser-first .teaser .tp{padding:18px 20px;font-size:14.5px;color:var(--ink-soft)}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#d6e0de;margin-top:0;border-top:3px solid var(--copper)}
.footer-inner{max-width:1180px;margin:0 auto;padding:32px 20px 18px;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:26px}
.footer-inner h4{font-family:system-ui,sans-serif;font-size:13px;letter-spacing:.1em;color:var(--copper-soft);margin-bottom:10px;text-transform:uppercase}
.footer-inner p,.footer-inner li{font-size:13.5px;line-height:1.8;margin:0}
.footer-inner a{color:#d6e0de}
.footer-inner a:hover{color:var(--copper-soft)}
.footer-links{list-style:none;margin:0;padding:0}
.footer-bottom{
  max-width:1180px;margin:0 auto;padding:12px 20px 26px;border-top:1px solid rgba(217,180,138,.25);
  font-family:system-ui,sans-serif;font-size:12.5px;color:#a9b8b8;line-height:1.9;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .article-layout{grid-template-columns:1fr;border-left:0;border-right:0}
  .article-rail{border-right:0;border-bottom:1px solid var(--line);padding:18px 4px}
  .article-body{padding:20px 4px 10px}
  .digest,.figure-band,.slant,.closing,.cat-feature,.qa,.latest{grid-template-columns:1fr}
  .qa-item:nth-child(odd){border-right:0}
  .ledger-row{grid-template-columns:1fr;gap:6px}
  .reasons{grid-template-columns:1fr;border-left:0}
  .reason{border-right:0;border-bottom:1px solid var(--line)}
  .latest-item{flex-direction:column;gap:4px}
  .cat-list li{grid-template-columns:1fr}
  .cat-meta{text-align:left}
  .footer-inner{grid-template-columns:1fr}
  .article-body.teaser-first .teaser{grid-template-columns:1fr}
}
@media (max-width:768px){
  body{font-size:16px}
  .menu-toggle{display:inline-block}
  .navrail{display:none;flex-direction:column;gap:0}
  .navrail.is-open{display:flex}
  .navrail a{padding:12px;border-bottom:1px solid rgba(217,180,138,.18)}
  .home-head{padding:22px 0 8px}
  .section{padding:26px 0}
  .fb-stats{grid-template-columns:1fr 1fr}
}