:root{
  --ink:#000;
  --paper:#fff;
  --mute:#6f6f6f;
  --hair:#dcdcdc;
  --wash:#f4f4f4;
  --max:1200px;
  --pad:clamp(1rem,4vw,2.5rem);
  --hed:"Barlow Condensed","Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --txt:"Barlow",system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.62 var(--txt);
  letter-spacing:.01em;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
h1,h2,h3,h4{text-wrap:balance}

.skip{
  position:absolute;
  top:.5rem;
  left:-9999px;
  z-index:99;
  background:var(--ink);
  color:#fff;
  padding:.8rem 1.1rem;
  text-decoration:none;
  font-size:.95rem;
}
.skip:focus{left:.5rem}

/* ---------- 页头：品牌行 + 菜单行 ---------- */
.masthead{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--paper);
  border-bottom:2px solid var(--ink);
}
.masthead-top{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem var(--pad) .75rem;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  min-height:44px;
  text-decoration:none;
}
.brand-mark{
  width:14px;
  height:14px;
  background:var(--ink);
  flex:0 0 auto;
}
.brand-name{
  font-family:var(--hed);
  font-weight:700;
  font-size:1.55rem;
  letter-spacing:.07em;
  line-height:1;
}
.search{
  display:flex;
  align-items:stretch;
  flex:0 1 320px;
  min-width:0;
  border:1px solid var(--ink);
  border-radius:10px;
  overflow:hidden;
  background:var(--paper);
  transition:border-color .2s ease;
}
.search:hover{border-color:var(--ink)}
.search input{
  flex:1 1 auto;
  min-width:0;
  min-height:42px;
  border:0;
  background:transparent;
  color:var(--ink);
  font:400 16px/1.4 var(--txt);
  padding:.5rem .8rem;
}
.search input:focus-visible{outline-offset:-3px}
.search button{
  border:0;
  border-left:1px solid var(--ink);
  background:var(--ink);
  color:#fff;
  font:600 1rem/1 var(--hed);
  letter-spacing:.12em;
  padding:0 1rem;
  min-height:42px;
  cursor:pointer;
  transition:background .2s ease;
}
.search button:hover{background:#2b2b2b}

.nav{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
  border-top:1px solid var(--hair);
}
.nav ol{
  display:flex;
  flex-wrap:wrap;
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:nav;
}
.nav li{counter-increment:nav;display:flex}
.nav a{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  min-height:44px;
  padding:.3rem .85rem .3rem 0;
  color:var(--ink);
  text-decoration:none;
  font-family:var(--hed);
  font-weight:600;
  font-size:1.02rem;
  letter-spacing:.05em;
  transition:background .22s ease,color .22s ease;
}
.nav li+li a{
  padding-left:.85rem;
  border-left:1px solid var(--hair);
}
.nav a::before{
  content:counter(nav,decimal-leading-zero);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--mute);
}
.nav a:hover,.nav a:focus-visible{background:var(--ink);color:#fff}
.nav a:hover::before,.nav a:focus-visible::before{color:#cfcfcf}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;
  overflow:hidden;
  max-width:var(--max);
  margin:0 auto;
  min-height:70vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-end;
  text-align:right;
  padding:clamp(2.5rem,9vw,5rem) var(--pad) 2.3rem;
  border-bottom:2px solid var(--ink);
}
.hero-mark{
  position:absolute;
  top:1%;
  right:-1.5%;
  z-index:0;
  font-family:var(--hed);
  font-weight:700;
  font-size:clamp(5rem,24vw,17rem);
  line-height:.78;
  color:var(--wash);
  -webkit-text-stroke:1px #d3d3d3;
  pointer-events:none;
  user-select:none;
}
.hero h1{
  position:relative;
  z-index:1;
  margin:0;
  max-width:20ch;
  font-family:var(--hed);
  font-weight:700;
  font-size:clamp(2.5rem,8.6vw,6.5rem);
  line-height:.94;
  letter-spacing:-.012em;
}

/* ---------- 主栅格 ---------- */
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
}
.ledger{
  display:grid;
  grid-template-columns:minmax(0,1fr) 264px;
  gap:clamp(1.5rem,4vw,3.5rem);
  padding:2.6rem 0 4rem;
}

.doc-head{
  padding-bottom:1.4rem;
  border-bottom:3px solid var(--ink);
}
.doc-head h2{
  margin:0 0 .5rem;
  font-family:var(--hed);
  font-weight:700;
  font-size:clamp(1.9rem,4.4vw,3.1rem);
  line-height:1;
  letter-spacing:-.01em;
}
.subtitle{
  margin:0;
  max-width:60ch;
  color:var(--mute);
  font-size:1.02rem;
  line-height:1.56;
}

/* ---------- 正文区块 ---------- */
.doc article{
  padding:2.6rem 0;
  border-bottom:1px solid var(--hair);
  scroll-margin-top:9.5rem;
}
.doc article:last-child{border-bottom:0;padding-bottom:.4rem}
.doc h2{
  margin:0 0 .7rem;
  font-family:var(--hed);
  font-weight:700;
  font-size:clamp(1.7rem,3.6vw,2.55rem);
  line-height:1.05;
  letter-spacing:-.01em;
}
.doc h3{
  margin:1.6rem 0 .5rem;
  font-family:var(--hed);
  font-weight:600;
  font-size:1.32rem;
  line-height:1.2;
}
.doc p,.doc li{max-width:70ch}
.doc p{margin:0 0 1.05rem;line-height:1.72}
.doc ul,.doc ol{margin:0 0 1.1rem;padding-left:1.2rem}
.doc li{margin-bottom:.4rem;line-height:1.66}
.doc strong{font-weight:600}
.doc a{text-underline-offset:3px;transition:background .2s ease}
.doc a:hover{background:var(--wash)}
.doc blockquote{
  margin:1.4rem 0;
  padding:.15rem 0 .15rem 1.1rem;
  border-left:3px solid var(--ink);
}
.doc blockquote p:last-child{margin-bottom:0}
.doc article.is-hit{animation:hit 1.4s ease}
@keyframes hit{
  0%{background:var(--ink)}
  100%{background:transparent}
}

/* ---------- 侧栏 ---------- */
.rail{
  align-self:start;
  position:sticky;
  top:8.5rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.rail-card{
  border:1px solid var(--ink);
  border-bottom:3px solid var(--ink);
  border-radius:10px;
  padding:1rem 1.05rem;
  transition:background .22s ease;
}
.rail-card:hover{background:var(--wash)}
.rail-label{
  margin:0 0 .65rem;
  font-family:var(--hed);
  font-weight:600;
  font-size:.86rem;
  letter-spacing:.16em;
  line-height:1.2;
}
.rail-list{
  list-style:none;
  margin:0;
  padding:0;
}
.rail-list a{
  display:flex;
  align-items:center;
  min-height:40px;
  border-bottom:1px solid var(--hair);
  text-decoration:none;
  font-size:.98rem;
  line-height:1.3;
  transition:padding-left .2s ease;
}
.rail-list li:last-child a{border-bottom:0}
.rail-list a:hover{padding-left:.35rem}
.rail-text{
  margin:0;
  color:var(--mute);
  font-size:.95rem;
  line-height:1.5;
  word-break:break-all;
}

/* ---------- 页脚 ---------- */
footer{
  max-width:var(--max);
  margin:0 auto;
  border-top:2px solid var(--ink);
  padding:2rem var(--pad) 2.4rem;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem 1.5rem;
}
footer p{
  margin:0;
  font-size:.98rem;
  line-height:1.6;
  word-break:break-all;
}
footer p:first-child{
  font-family:var(--hed);
  font-weight:700;
  font-size:1.4rem;
  letter-spacing:.06em;
  line-height:1.1;
}
footer small{
  grid-column:1/-1;
  display:block;
  margin-top:.4rem;
  padding-top:1rem;
  border-top:1px solid var(--hair);
  color:var(--mute);
  font-size:.86rem;
  letter-spacing:.04em;
}

/* ---------- 动效 ---------- */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s ease,transform .55s ease;
}
.reveal.in{opacity:1;transform:none}

/* ---------- 断点 ---------- */
@media (max-width:900px){
  .ledger{grid-template-columns:1fr;gap:2.2rem;padding-top:2.1rem}
  .rail{position:static;order:2;flex-direction:row;flex-wrap:wrap}
  .rail-card{flex:1 1 240px}
}
@media (max-width:620px){
  .masthead-top{flex-wrap:wrap;gap:.6rem}
  .search{flex:1 1 100%;order:3}
  .hero{min-height:64vh;padding-bottom:1.8rem}
  .hero-mark{font-size:6rem;top:0;right:-4%}
  .hero h1{font-size:clamp(2.2rem,10.5vw,3.4rem)}
  .nav a{font-size:.98rem;padding-right:.7rem}
  .nav li+li a{padding-left:.7rem}
  .doc article{scroll-margin-top:11rem}
  footer{grid-template-columns:1fr;gap:.6rem}
  footer p:first-child{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

button[aria-expanded]{min-width:44px;min-height:44px}
