:root{
  --paper:#E9E5DB; --paper-hi:#F2EFE7; --ink:#17140F; --ink-2:#4A443A;
  --zhu:#B5121B; --zhu-d:#8C0D14; --proof:#27406B; --rule:#C9C2B2;
  --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --serif:"Noto Serif SC","Songti SC","SimSun",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif);
  background-image:repeating-linear-gradient(0deg,rgba(23,20,15,.022) 0 1px,transparent 1px 3px),radial-gradient(120% 80% at 50% 0,rgba(255,255,255,.5),transparent 60%);
}
::selection{background:rgba(181,18,27,.16)}

/* masthead */
.mast{background:var(--zhu); color:#fff; border-bottom:3px double rgba(255,255,255,.5)}
.mast-in{max-width:1180px; margin:0 auto; padding:16px 24px; display:flex; align-items:baseline; gap:20px; flex-wrap:wrap}
.logo{font-family:var(--sans); font-weight:900; font-size:30px; letter-spacing:.34em; line-height:1}
.mast-sep{flex:1; height:1px; background:rgba(255,255,255,.38); min-width:20px}
.mast-meta{font-family:var(--sans); font-size:13px; letter-spacing:.14em; opacity:.94}
.mast-strip{height:6px; background:repeating-linear-gradient(90deg,var(--zhu-d) 0 26px,var(--zhu) 26px 52px)}

/* shell */
.shell{max-width:1180px; margin:0 auto; padding:0 24px 96px; display:grid; grid-template-columns:236px 1fr; gap:52px; align-items:start}
.rail{position:sticky; top:26px; padding-top:38px}
.rail-h{font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.24em; color:var(--zhu); border-bottom:1px solid var(--rule); padding-bottom:8px; margin-bottom:14px}
.toc{list-style:none; margin:0 0 30px; padding:0}
.toc li{margin:0 0 11px}
.toc a{display:block; text-decoration:none; color:var(--ink-2); font-size:14.5px; line-height:1.5; border-left:2px solid transparent; padding-left:11px; transition:.22s}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--zhu); border-left-color:var(--zhu); font-weight:500}
.prog{height:2px; background:var(--rule); margin-bottom:26px; position:relative; overflow:hidden}
.prog i{position:absolute; inset:0 auto 0 0; width:0; background:var(--zhu)}
.pbtn{font-family:var(--sans); font-size:13px; letter-spacing:.1em; color:var(--proof); background:none; border:1px solid var(--proof); padding:9px 13px; width:100%; cursor:pointer; transition:.2s}
.pbtn:hover{background:var(--proof); color:var(--paper-hi)}
.pbtn b{font-weight:700}

/* tabs */
.tabs{display:flex; gap:0; border-bottom:1px solid var(--rule); margin:38px 0 0}
.tab{font-family:var(--sans); font-size:14px; letter-spacing:.12em; background:none; border:0; border-bottom:2px solid transparent; padding:12px 20px 11px; color:var(--ink-2); cursor:pointer; transition:.2s}
.tab:hover{color:var(--ink)}
.tab[aria-selected=true]{color:var(--zhu); border-bottom-color:var(--zhu); font-weight:700}
.tab span{font-size:11.5px; opacity:.6; margin-left:8px; letter-spacing:.04em}

/* article */
.art{display:none}
.art.live{display:block; animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.kicker{font-family:var(--sans); font-size:12px; letter-spacing:.26em; color:var(--zhu); margin:40px 0 16px}
h1{font-family:var(--sans); font-weight:900; font-size:clamp(27px,4.1vw,46px); line-height:1.28; letter-spacing:.01em; margin:0 0 22px; max-width:22em}
.byline{font-family:var(--sans); font-size:12.5px; color:var(--ink-2); letter-spacing:.1em; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:10px 0; margin:0 0 34px}
.abs{background:rgba(255,255,255,.44); border-left:4px solid var(--zhu); padding:20px 24px; margin:0 0 40px; font-size:16.5px; line-height:1.9; color:#2A251D}
.abs b{font-family:var(--sans); color:var(--zhu); letter-spacing:.08em}
h2{font-family:var(--sans); font-weight:700; font-size:clamp(19px,2.3vw,25px); line-height:1.5; margin:56px 0 20px; padding-bottom:10px; border-bottom:1px solid var(--rule); scroll-margin-top:24px}
h2 i{font-style:normal; color:var(--zhu); margin-right:.5em}
p{font-size:17.5px; line-height:2; margin:0 0 20px; text-indent:2em; text-align:justify}
.art strong{font-weight:700; color:#0F0D0A}
.dot{font-style:normal; text-emphasis:dot var(--zhu); -webkit-text-emphasis:dot var(--zhu); text-emphasis-position:under right; -webkit-text-emphasis-position:under right}
.end{margin:52px 0 0; border-top:3px double var(--rule); padding-top:20px; font-family:var(--sans); font-size:12.5px; letter-spacing:.14em; color:var(--ink-2); text-indent:0}
.end::before{content:""; display:inline-block; width:9px; height:9px; background:var(--zhu); margin-right:11px; vertical-align:middle}

/* proof drawer */
.scrim{position:fixed; inset:0; background:rgba(23,20,15,.42); opacity:0; pointer-events:none; transition:.3s; z-index:40}
.scrim.on{opacity:1; pointer-events:auto}
.proof{position:fixed; top:0; right:0; width:min(520px,100%); height:100%; background:var(--paper-hi); border-left:3px solid var(--proof); transform:translateX(102%); transition:transform .42s cubic-bezier(.2,.7,.2,1); z-index:50; overflow-y:auto; padding:30px 32px 60px}
.proof.on{transform:none}
.proof h3{font-family:var(--sans); font-size:15px; letter-spacing:.2em; color:var(--proof); margin:0 0 6px}
.proof .sub{font-size:13.5px; color:var(--ink-2); margin:0 0 24px; text-indent:0; line-height:1.8}
.pitem{border-top:1px solid rgba(39,64,107,.24); padding:18px 0}
.pitem .no{font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.16em; color:var(--proof)}
.pitem .tt{font-family:var(--sans); font-size:15px; font-weight:700; margin:7px 0 8px; color:var(--ink)}
.pitem p{font-size:14.5px; line-height:1.85; text-indent:0; margin:0 0 7px; color:#332D24}
.pitem .fix{color:var(--proof); border-bottom:1.5px solid rgba(39,64,107,.4); display:inline}
.close{position:absolute; top:22px; right:26px; background:none; border:0; font-family:var(--sans); font-size:22px; line-height:1; color:var(--proof); cursor:pointer}

@media(max-width:900px){
  .shell{grid-template-columns:1fr; gap:0; padding:0 20px 70px}
  .rail{position:static; padding-top:26px; padding-bottom:8px}
  .toc{display:none}
  .prog{display:none}
  .logo{font-size:23px; letter-spacing:.28em}
  p{font-size:16.5px; line-height:1.95}
  .tabs{margin-top:22px}
  .tab{padding:11px 13px; font-size:13px}
  .tab span{display:none}
}
@media print{
  .rail,.tabs,.scrim,.proof,.mast-strip{display:none}
  body{background:#fff}
  .art{display:block!important}
  .shell{display:block; max-width:none}
}