*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body,h1,h2,h3,h4,h5,p,ul,ol,li,figure,figcaption,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}

:root{
  --ink-green:#0C231E;
  --archive-green:#163A31;
  --gold:#C2A15A;
  --gold-light:#E4CE9B;
  --cinnabar:#B23A2C;
  --paper:#F5F0E6;
  --paper-dim:#E8E0D0;
  --ink:#1C2320;
  --indigo:#2B2A4A;
  --mist:#7D948B;
  --rail-w:220px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-display:"Source Han Serif SC","Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --font-body:"Source Han Sans SC","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --hair:1px solid rgba(194,161,90,.32);
}

body{
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.75;
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(0deg,rgba(28,35,32,.035) 0 1px,transparent 1px 30px),
    repeating-linear-gradient(90deg,rgba(28,35,32,.035) 0 1px,transparent 1px 30px);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

:focus-visible{outline:2px solid var(--cinnabar);outline-offset:3px}

/* ---------- 排版 ---------- */
.h-display{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2rem,1.35rem + 2.6vw,3.5rem);
  line-height:1.16;
  letter-spacing:-.01em;
  color:var(--ink);
}
.h-display--paper{color:var(--paper)}
.h-section{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);
  line-height:1.35;
  letter-spacing:.01em;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.65em;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--mist);
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--gold)}
.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.num-key{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--cinnabar);font-weight:600}
.note{font-size:13.5px;line-height:1.7;color:var(--mist)}
.lead{font-size:17px;line-height:1.8}
p+p{margin-top:.85em}

/* ---------- 布局工具 ---------- */
.container{
  width:100%;
  max-width:1240px;
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,56px);
}
.grid{display:grid;gap:clamp(20px,2.4vw,32px)}
@media (min-width:768px){
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1100px){
  .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.stack>*+*{margin-top:1rem}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:11px 18px;
  border:1px solid var(--gold);
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  letter-spacing:.06em;
  line-height:1.2;
  transition:background-color .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease),transform .24s var(--ease);
}
.btn--gold{background:var(--gold);color:var(--ink-green);border-color:var(--gold)}
.btn--gold:hover{background:var(--gold-light);border-color:var(--gold-light)}
.btn--ghost{background:transparent;color:var(--gold-light);border-color:rgba(194,161,90,.55)}
.btn--ghost:hover{background:rgba(194,161,90,.14);color:var(--gold-light);border-color:var(--gold)}
.btn--ink{background:var(--archive-green);color:var(--paper);border-color:var(--archive-green)}
.btn--ink:hover{background:var(--ink-green);border-color:var(--ink-green)}
.btn--block{width:100%}
.btn:active{transform:translateY(1px)}

/* ---------- 跳转链接 ---------- */
.skip-link{
  position:absolute;
  left:12px;
  top:10px;
  z-index:99;
  padding:10px 16px;
  background:var(--gold);
  color:var(--ink-green);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  transform:translateY(-160%);
  transition:transform .2s var(--ease);
}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0);outline-offset:2px}

/* ---------- 页头：移动顶栏 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--archive-green);
  background-image:linear-gradient(180deg,var(--archive-green) 0%,var(--ink-green) 100%);
  color:var(--paper);
  border-bottom:var(--hair);
}
.masthead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 18px;
}
.masthead__brand{display:flex;flex-direction:column;gap:2px}
.masthead__name{
  font-family:var(--font-display);
  font-weight:800;
  font-size:19px;
  letter-spacing:.02em;
  line-height:1.15;
  color:var(--paper);
}
.masthead__sub{
  font-size:10.5px;
  letter-spacing:.3em;
  color:var(--gold);
  line-height:1.4;
}
.nav-toggle{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:42px;
  height:42px;
  border:1px solid rgba(194,161,90,.5);
  background:rgba(194,161,90,.08);
  transition:background-color .2s var(--ease),border-color .2s var(--ease);
}
.nav-toggle:hover{background:rgba(194,161,90,.18);border-color:var(--gold)}
.nav-toggle__bar{
  display:block;
  width:18px;
  height:1.5px;
  background:var(--gold-light);
  transition:transform .24s var(--ease),opacity .18s var(--ease);
}
.site-header[data-open="true"] .nav-toggle__bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.site-header[data-open="true"] .nav-toggle__bar:nth-child(2){opacity:0}
.site-header[data-open="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.rail-panel{display:none;padding:0 18px 18px;border-top:1px solid rgba(194,161,90,.22)}
.site-header[data-open="true"] .rail-panel{display:block;animation:drawerIn .24s var(--ease) both}
@keyframes drawerIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.rail-version{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  margin:14px 0 12px;
  padding:5px 10px;
  border:1px solid rgba(194,161,90,.4);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--gold-light);
}
.rail-version__dot{width:6px;height:6px;background:var(--cinnabar);flex:0 0 auto}

.rail-nav__list{display:flex;flex-direction:column}
.rail-nav__link{
  display:grid;
  grid-template-columns:26px 1fr;
  align-items:baseline;
  gap:6px;
  padding:11px 8px;
  border-bottom:1px solid rgba(194,161,90,.16);
  color:rgba(245,240,230,.76);
  font-size:15px;
  letter-spacing:.04em;
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.rail-nav__num{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;color:rgba(194,161,90,.6)}
.rail-nav__link:hover{color:var(--paper);background:rgba(245,240,230,.07)}
.rail-nav__link:hover .rail-nav__num{color:var(--gold)}
.rail-nav__link[aria-current="page"]{
  color:var(--gold-light);
  background:rgba(194,161,90,.12);
  box-shadow:inset 3px 0 0 var(--gold);
}
.rail-nav__link[aria-current="page"] .rail-nav__num{color:var(--gold-light)}

.rail-foot{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.rail-foot__hint{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:rgba(228,206,155,.62);
}
.rail-note{display:none}

/* ---------- 页头：桌面固定左轨 ---------- */
@media (min-width:1024px){
  html{scroll-padding-top:24px}
  .site-header{
    position:fixed;
    inset:0 auto 0 0;
    width:var(--rail-w);
    display:flex;
    flex-direction:column;
    padding:30px 0 22px;
    border-bottom:0;
    border-right:var(--hair);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .masthead{display:block;padding:0 22px 20px}
  .masthead__name{font-size:23px}
  .masthead__sub{font-size:11px;margin-top:6px}
  .nav-toggle{display:none}
  .rail-panel{display:flex;flex-direction:column;flex:1;min-height:0;padding:0;border-top:0}
  .rail-version{margin:0 22px 18px;align-self:flex-start}
  .rail-nav{
    padding-block:8px;
    border-top:1px solid rgba(194,161,90,.2);
    border-bottom:1px solid rgba(194,161,90,.2);
  }
  .rail-nav__link{padding:10px 30px 10px 22px;border-bottom:0;grid-template-columns:24px 1fr}
  .rail-nav__link+.rail-nav__link{margin-top:1px}
  .rail-foot{margin-top:auto;padding:20px 22px 0}
  .rail-note{
    display:block;
    position:absolute;
    right:7px;
    top:46%;
    writing-mode:vertical-rl;
    font-family:var(--font-body);
    font-size:11px;
    letter-spacing:.32em;
    color:rgba(228,206,155,.42);
    pointer-events:none;
  }
}

/* ---------- 主内容偏移 ---------- */
#main-content{min-height:60vh}
@media (min-width:1024px){
  #main-content{margin-left:var(--rail-w)}
}

/* ---------- 面包屑 ---------- */
.crumbs{margin-bottom:20px}
.crumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--mist);font-family:var(--font-mono);letter-spacing:.06em}
.crumbs__item+.crumbs__item::before{content:"／";margin-right:6px;color:rgba(194,161,90,.6)}
.crumbs__link{color:var(--archive-green);border-bottom:1px solid rgba(22,58,49,.28)}
.crumbs__link:hover{color:var(--cinnabar);border-bottom-color:var(--cinnabar)}
.crumbs__item[aria-current="page"]{color:var(--ink)}

/* ---------- 色块与卡片 ---------- */
.panel{
  background:var(--archive-green);
  color:var(--paper);
  padding:clamp(24px,3vw,40px);
  border:1px solid rgba(194,161,90,.28);
}
.panel--ink{background:var(--ink-green)}
.panel--indigo{background:var(--indigo);border-color:rgba(194,161,90,.34)}
.panel--paper{background:var(--paper-dim);color:var(--ink);border-color:rgba(28,35,32,.12)}
.panel .note{color:rgba(245,240,230,.66)}
.panel--paper .note{color:var(--mist)}

.tag{
  display:inline-block;
  padding:3px 8px;
  border:1px solid rgba(194,161,90,.5);
  background:rgba(194,161,90,.12);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--archive-green);
}
.tag--cinnabar{border-color:rgba(178,58,44,.45);background:rgba(178,58,44,.1);color:var(--cinnabar)}
.tag--dark{border-color:rgba(194,161,90,.45);background:rgba(194,161,90,.14);color:var(--gold-light)}

/* ---------- 表格 ---------- */
.ledger{font-size:14.5px}
.ledger caption{
  caption-side:top;
  text-align:left;
  padding-bottom:10px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  color:var(--mist);
}
.ledger th,.ledger td{
  padding:11px 14px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid rgba(28,35,32,.12);
}
.ledger th{
  background:var(--paper-dim);
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--archive-green);
  white-space:nowrap;
}
.ledger tbody tr:nth-child(even){background:rgba(232,224,208,.5)}
.ledger tbody tr:hover{background:rgba(194,161,90,.12)}
.ledger td.num{text-align:right;color:var(--archive-green)}

/* ---------- 章节目录跟随 ---------- */
.toc-list{display:flex;flex-direction:column;gap:2px}
.toc-link{
  display:block;
  padding:8px 12px 8px 14px;
  font-size:14px;
  color:rgba(245,240,230,.74);
  border-left:2px solid rgba(194,161,90,.25);
  transition:color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease);
}
.toc-link:hover{color:var(--paper);border-left-color:var(--gold)}
.toc-link[aria-current="true"]{
  color:var(--gold-light);
  background:rgba(194,161,90,.12);
  border-left-color:var(--cinnabar);
}
.toc-link--light{color:var(--archive-green);border-left-color:rgba(28,35,32,.18)}
.toc-link--light:hover{color:var(--ink);border-left-color:var(--gold)}
.toc-link--light[aria-current="true"]{color:var(--cinnabar);background:rgba(194,161,90,.16)}

/* ---------- 图片容器（页面阶段放占位用） ---------- */
.figure-frame{
  position:relative;
  display:block;
  background:var(--archive-green);
  border:1px solid rgba(194,161,90,.32);
  overflow:hidden;
}
.figure-frame img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
}
.figure-frame--wide img{aspect-ratio:21/9}
.figure-frame--tall img{aspect-ratio:3/4}
.figure-frame--square img{aspect-ratio:1/1}
.figure-frame__cap{
  display:block;
  padding:9px 12px;
  background:rgba(12,35,30,.92);
  color:rgba(228,206,155,.85);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
}

/* ---------- 滚动进度与返回顶部 ---------- */
.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:2px;
  z-index:80;
  background:rgba(12,35,30,.2);
  pointer-events:none;
}
.scroll-progress__bar{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--gold) 0%,var(--cinnabar) 100%);
  transform:scaleX(0);
  transform-origin:left center;
  will-change:transform;
}
@media (min-width:1024px){
  .scroll-progress{left:var(--rail-w)}
}
.to-top{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:70;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background:var(--archive-green);
  color:var(--gold-light);
  border:1px solid rgba(194,161,90,.5);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s var(--ease),background-color .2s var(--ease);
}
.to-top.is-on{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--ink-green)}
.to-top__glyph{font-size:14px;line-height:1;color:var(--gold)}
.to-top__text{writing-mode:horizontal-tb}
@media (min-width:768px){
  .to-top{right:24px;bottom:24px;padding:11px 16px}
}

/* ---------- 页脚 ---------- */
.site-footer{
  position:relative;
  background:var(--ink-green);
  background-image:linear-gradient(180deg,var(--ink-green) 0%,#081a16 100%);
  color:rgba(245,240,230,.78);
  border-top:var(--hair);
  padding:clamp(36px,5vw,64px) 0 24px;
  overflow:hidden;
}
@media (min-width:1024px){
  .site-footer{margin-left:var(--rail-w)}
}
.footer-grid{
  display:grid;
  gap:30px;
  width:100%;
  max-width:1240px;
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,56px);
}
@media (min-width:768px){
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
}
.footer-brand__name{
  font-family:var(--font-display);
  font-weight:800;
  font-size:26px;
  letter-spacing:.02em;
  line-height:1.2;
  color:var(--paper);
}
.footer-brand__sub{
  margin-top:6px;
  font-size:11px;
  letter-spacing:.28em;
  color:var(--gold);
}
.footer-brand__note{
  margin-top:14px;
  font-size:13.5px;
  line-height:1.8;
  max-width:34ch;
  color:rgba(245,240,230,.66);
}
.footer-brand .btn{margin-top:16px;font-size:13px;padding:9px 15px}
.footer-col__title{
  padding-bottom:8px;
  margin-bottom:10px;
  border-bottom:1px solid rgba(194,161,90,.25);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--gold);
}
.footer-col__list a{
  display:inline-block;
  padding:5px 0;
  font-size:14.5px;
  color:rgba(245,240,230,.8);
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease);
}
.footer-col__list a:hover{
  color:var(--gold-light);
  border-bottom-color:rgba(194,161,90,.6);
  transform:translateX(2px);
}
.footer-meta{
  display:grid;
  gap:8px 32px;
  width:100%;
  max-width:1240px;
  margin:32px auto 0;
  padding:22px clamp(20px,4vw,56px) 0;
  border-top:1px solid rgba(194,161,90,.18);
}
@media (min-width:900px){
  .footer-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1200px){
  .footer-meta{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.footer-meta__row{
  display:flex;
  gap:12px;
  align-items:baseline;
  font-size:13px;
  line-height:1.6;
}
.footer-meta__key{
  flex:0 0 auto;
  min-width:66px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--mist);
}
.footer-meta__val{color:rgba(245,240,230,.82);word-break:break-word}
.footer-legal{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 24px;
  width:100%;
  max-width:1240px;
  margin:26px auto 0;
  padding:16px clamp(20px,4vw,56px) 0;
  border-top:1px solid rgba(194,161,90,.22);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:rgba(245,240,230,.5);
}
.footer-note{display:none}
@media (min-width:1200px){
  .footer-note{
    display:block;
    position:absolute;
    right:12px;
    top:38px;
    writing-mode:vertical-rl;
    font-size:11px;
    letter-spacing:.32em;
    color:rgba(228,206,155,.28);
    pointer-events:none;
  }
}

/* ---------- 无障碍与减弱动效 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .to-top{transform:none}
  .footer-col__list a:hover{transform:none}
}
