/* =========================================================
   经典主站 · 品牌档案馆   /assets/site.css
   共享外壳：reset · 变量 · 中文排版 · 头部 · 页脚 · 通用组件
   ========================================================= */

:root{
  --ink:#12263A;
  --ink-deep:#0B1826;
  --ink-mid:#1E3A56;
  --seal:#C8402F;
  --seal-light:#E06A58;
  --paper:#F4EFE6;
  --paper-light:#FBFAF7;
  --bronze:#4A6B5D;
  --bronze-light:#7C9A8C;
  --gray-ink:#5C6672;
  --rule:#D8D2C6;

  --font-display:"Source Han Sans SC","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-read:"Source Han Serif SC","Noto Serif SC","Songti SC","SimSun",Georgia,serif;
  --font-mono:"IBM Plex Mono","JetBrains Mono","SFMono-Regular",Menlo,Consolas,"Courier New",monospace;

  --maxw:1240px;
  --gutter:24px;
  --pad-x:20px;
}

@media (min-width:900px){ :root{ --pad-x:32px; } }

*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:130px;
}

body,h1,h2,h3,h4,h5,p,ul,ol,li,figure,blockquote,dl,dd{margin:0;}
ul,ol{padding:0;list-style:none;}
img,svg,video{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:0;}
a{color:inherit;}
table{border-collapse:collapse;border-spacing:0;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-read);
  font-size:17px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

:focus-visible{
  outline:2px solid var(--seal);
  outline-offset:2px;
}
.masthead :focus-visible,
.site-footer :focus-visible{ outline-color:var(--seal-light); }

/* ---------- 中文排版基线 ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.25;
}
h1{font-size:clamp(34px,5vw,64px);font-weight:900;}
h2{font-size:clamp(24px,3vw,34px);}
h3{font-size:clamp(19px,2.2vw,24px);}
h4{font-size:16px;}

p{text-wrap:pretty;}

.mono,.num,code,kbd,samp,time,.archive-code{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:0.02em;
}

/* ---------- 容器与网格 ---------- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

.grid{display:grid;gap:var(--gutter);}

@media (min-width:900px){
  .grid--8-4{grid-template-columns:minmax(0,8fr) minmax(0,4fr);}
  .grid--7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
  .grid--5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}
  .grid--9-3{grid-template-columns:minmax(0,9fr) minmax(0,3fr);}
}

.prose{max-width:68ch;}
.prose > * + *{margin-top:1em;}
.prose h2{margin-top:1.6em;}
.prose h3{margin-top:1.4em;}

.lede{
  font-family:var(--font-read);
  font-size:19px;
  line-height:1.85;
  color:var(--ink-mid);
  max-width:62ch;
}

/* ---------- 通用文字件 ---------- */
.archive-code{
  display:inline-block;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gray-ink);
}
.archive-code--inverse{color:rgba(244,239,230,0.5);}

.section{padding:64px 0;}
.section--tight{padding:40px 0;}
@media (min-width:900px){
  .section{padding:88px 0;}
  .section--tight{padding:48px 0;}
}
.section--dark{
  background:var(--ink);
  color:var(--paper-light);
}
.section--dark h1,
.section--dark h2,
.section--dark h3{color:var(--paper-light);}

.section-head{
  display:flex;
  align-items:baseline;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:28px;
  padding-bottom:14px;
  border-bottom:2px solid var(--ink);
}
.section--dark .section-head{border-bottom-color:rgba(244,239,230,0.3);}

/* ---------- 标签印章 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.06em;
  border:1px solid var(--rule);
  background:var(--paper-light);
  color:var(--ink-mid);
  white-space:nowrap;
  text-decoration:none;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
a.tag:hover,
a.tag:focus-visible{
  background:var(--seal);
  border-color:var(--seal);
  color:var(--paper-light);
}
.tag--ink{background:var(--ink);border-color:var(--ink);color:var(--paper-light);}
.tag--bronze{background:var(--bronze);border-color:var(--bronze);color:var(--paper-light);}
.tag--ghost{background:transparent;}

.seal{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1.5px solid var(--seal);
  border-radius:50%;
  color:var(--seal);
  font-family:var(--font-display);
  font-weight:900;
  font-size:16px;
  letter-spacing:0;
}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:11px 22px;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  letter-spacing:0.02em;
  text-decoration:none;
  border:1px solid var(--ink);
  background:var(--paper-light);
  color:var(--ink);
  cursor:pointer;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.btn:hover,
.btn:focus-visible{background:var(--ink);color:var(--paper-light);}
.btn--primary{background:var(--ink);color:var(--paper-light);}
.btn--primary:hover,
.btn--primary:focus-visible{background:var(--ink-mid);border-color:var(--ink-mid);}
.btn--ghost{background:transparent;border-color:var(--rule);}
.btn--ghost:hover,
.btn--ghost:focus-visible{background:var(--ink);border-color:var(--ink);}

.link-arrow{
  display:inline-block;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:2px solid var(--rule);
  transition:border-color .16s ease,color .16s ease;
}
.link-arrow:hover,
.link-arrow:focus-visible{border-bottom-color:var(--ink-mid);color:var(--ink-mid);}

/* ---------- 跳过链接 ---------- */
.skip-link{
  position:absolute;
  left:16px;
  top:-80px;
  z-index:200;
  padding:10px 16px;
  font-family:var(--font-display);
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  background:var(--paper-light);
  color:var(--ink);
  border:1px solid var(--ink);
  transition:top .16s ease;
}
.skip-link:focus{top:12px;}

/* =========================================================
   头部 —— 档案脊标
   ========================================================= */
.masthead{
  position:sticky;
  top:0;
  z-index:120;
  background:var(--ink);
  color:var(--paper-light);
  border-bottom:1px solid var(--ink-deep);
}
.masthead__inner{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}
.masthead__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
  transition:padding .16s ease;
}
.masthead[data-condensed] .masthead__top{padding:7px 0;}

.masthead__brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.masthead__mark{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  text-decoration:none;
}
.masthead__seal{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:42px;
  height:42px;
  border:1.5px solid rgba(251,250,247,0.7);
  border-radius:50%;
  color:var(--paper-light);
  font-family:var(--font-display);
  font-weight:900;
  font-size:15px;
  letter-spacing:0;
  transition:border-color .16s ease,color .16s ease;
}
.masthead__mark:hover .masthead__seal,
.masthead__mark:focus-visible .masthead__seal{
  border-color:var(--seal-light);
  color:var(--seal-light);
}
.masthead__title{
  display:flex;
  flex-direction:column;
  min-width:0;
  line-height:1.25;
}
.masthead__name{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:900;
  letter-spacing:-0.01em;
  color:var(--paper-light);
}
.masthead__sub{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  color:rgba(251,250,247,0.6);
}
.masthead__tagline{
  padding-left:14px;
  border-left:1px solid rgba(251,250,247,0.2);
  font-family:var(--font-read);
  font-size:13px;
  line-height:1.5;
  color:rgba(251,250,247,0.55);
  transition:opacity .16s ease;
}
.masthead[data-condensed] .masthead__tagline{opacity:0;}

@media (max-width:1023px){
  .masthead__tagline{display:none;}
}

.masthead__tools{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.quarter-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 12px;
  border:1px solid rgba(251,250,247,0.24);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  color:rgba(251,250,247,0.72);
  white-space:nowrap;
}
.quarter-tag__dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--seal-light);
}
.quarter-tag__value{color:var(--paper-light);}

@media (max-width:767px){
  .quarter-tag__label{display:none;}
}

.masthead__search{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:8px 12px;
  border:1px solid rgba(251,250,247,0.24);
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.04em;
  color:rgba(251,250,247,0.8);
  text-decoration:none;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.masthead__search:hover,
.masthead__search:focus-visible{
  background:var(--paper-light);
  border-color:var(--paper-light);
  color:var(--ink);
}

@media (max-width:640px){
  .masthead__search{display:none;}
}

/* ---------- 移动导航按钮 ---------- */
.nav-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 12px;
  border:1px solid rgba(251,250,247,0.24);
  color:var(--paper-light);
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.06em;
  cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease;
}
.nav-toggle:hover{border-color:var(--paper-light);}
.nav-toggle__bars{
  display:grid;
  gap:4px;
  width:16px;
}
.nav-toggle__bars span{
  display:block;
  height:1.5px;
  background:currentColor;
  transition:transform .16s ease,opacity .16s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child{
  transform:translateY(2.75px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child{
  transform:translateY(-2.75px) rotate(-45deg);
}

/* ---------- 导航 ---------- */
.nav{
  display:none;
  border-top:1px solid rgba(251,250,247,0.14);
}
.nav[data-open]{display:block;}

.nav__list{
  display:flex;
  align-items:stretch;
  gap:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.nav__list::-webkit-scrollbar{display:none;}
.nav__item{flex:0 0 auto;}

.nav__link{
  display:flex;
  align-items:center;
  min-height:46px;
  padding:0 16px;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  letter-spacing:0.01em;
  color:rgba(251,250,247,0.72);
  text-decoration:none;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .16s ease,border-color .16s ease,background-color .16s ease;
}
.nav__link:hover{color:var(--paper-light);background:rgba(251,250,247,0.06);}
.nav__link[aria-current="page"]{
  color:var(--paper-light);
  border-bottom-color:var(--seal);
}

@media (min-width:900px){
  .nav{display:block;}
  .nav-toggle{display:none;}
  .nav__list{justify-content:flex-end;overflow:visible;}
  .nav__link{min-height:50px;padding:0 14px;}
}

/* ---------- 阅读进度 ---------- */
.masthead__progress{
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:2px;
  background:var(--seal);
  transform:scaleX(0);
  transform-origin:0 50%;
  pointer-events:none;
}

/* =========================================================
   页脚 —— 档案封底
   ========================================================= */
.site-footer{
  margin-top:96px;
  background:var(--ink-deep);
  color:rgba(244,239,230,0.82);
  font-family:var(--font-read);
  font-size:15px;
  line-height:1.8;
}
.footer__inner{
  display:grid;
  gap:44px;
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:56px var(--pad-x) 0;
}
@media (min-width:1024px){
  .footer__inner{
    grid-template-columns:240px minmax(0,1fr);
    gap:56px;
    padding-top:64px;
  }
}

.footer__seal{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1.5px solid rgba(244,239,230,0.45);
  border-radius:50%;
  color:var(--paper-light);
  font-family:var(--font-display);
  font-weight:900;
  font-size:15px;
}
.footer__brand-name{
  margin-top:16px;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--paper-light);
}
.footer__brand-line{
  margin-top:4px;
  font-size:13px;
  color:rgba(244,239,230,0.55);
}
.footer__brand .archive-code{margin-top:14px;}

.footer__cols{
  display:grid;
  gap:32px;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:600px){
  .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1024px){
  .footer__cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;}
}

.footer__col-title{
  margin-bottom:14px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(244,239,230,0.18);
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.1em;
  color:var(--paper-light);
}
.footer__list li{margin-bottom:10px;}
.footer__list li:last-child{margin-bottom:0;}
.footer__list a{
  color:rgba(244,239,230,0.82);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.footer__list a:hover,
.footer__list a:focus-visible{
  color:var(--paper-light);
  border-bottom-color:var(--seal);
}
.footer__list--note{font-size:13.5px;color:rgba(244,239,230,0.62);}
.footer__label{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.1em;
  color:rgba(244,239,230,0.42);
  margin-bottom:2px;
}

.footer__note-wrap{
  width:100%;
  max-width:var(--maxw);
  margin:48px auto 0;
  padding-inline:var(--pad-x);
}
.footer__note{
  padding-left:16px;
  border-left:2px solid var(--seal);
  font-size:13px;
  line-height:1.85;
  color:rgba(244,239,230,0.6);
  max-width:80ch;
}

.footer__legal{
  margin-top:40px;
  border-top:1px solid rgba(244,239,230,0.16);
}
.footer__legal-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:10px 28px;
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:20px var(--pad-x) 40px;
  font-size:13px;
  color:rgba(244,239,230,0.58);
}
.footer__bottom-line{max-width:64ch;}
.footer__icp,
.footer__copy{font-size:12px;letter-spacing:0.06em;color:rgba(244,239,230,0.5);}

/* =========================================================
   通用内容组件
   ========================================================= */

/* ---------- 面包屑 ---------- */
.breadcrumb{
  background:var(--paper-light);
  border-bottom:1px solid var(--rule);
}
.breadcrumb__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:12px var(--pad-x);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.04em;
  color:var(--gray-ink);
}
.breadcrumb a{
  color:var(--gray-ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible{
  color:var(--ink);
  border-bottom-color:var(--ink);
}
.breadcrumb__sep{color:var(--rule);}
.breadcrumb [aria-current="page"]{color:var(--ink);}

/* ---------- 数据长表 ---------- */
.table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--rule);
}
.data-table{
  width:100%;
  min-width:640px;
  font-family:var(--font-read);
  font-size:15px;
  line-height:1.7;
}
.data-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  padding:10px 14px;
  background:var(--ink-mid);
  color:var(--paper-light);
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.04em;
  text-align:left;
  white-space:nowrap;
}
.data-table td{
  padding:12px 14px;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.data-table tbody tr{transition:background-color .16s ease;}
.data-table tbody tr:hover{background:var(--paper-light);}
.data-table td.mono,
.data-table th.mono{
  font-family:var(--font-mono);
  letter-spacing:0.02em;
}
.data-table caption{
  caption-side:top;
  padding:0 0 10px;
  text-align:left;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.08em;
  color:var(--gray-ink);
}

/* ---------- 折叠口径说明 ---------- */
.disclosure{
  border-top:1px solid var(--rule);
  padding-top:12px;
}
.disclosure__trigger{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.04em;
  color:var(--ink-mid);
  cursor:pointer;
  transition:color .16s ease;
}
.disclosure__trigger:hover{color:var(--ink);}
.disclosure__trigger::after{
  content:"+";
  font-family:var(--font-mono);
  font-size:15px;
  color:var(--seal);
}
.disclosure[data-open] .disclosure__trigger::after{content:"−";}
.disclosure__panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .16s ease;
}
.disclosure[data-open] .disclosure__panel{max-height:24rem;}
.disclosure__panel p{
  padding-bottom:12px;
  font-size:13px;
  line-height:1.85;
  color:var(--gray-ink);
  max-width:66ch;
}

/* ---------- 图片容器 ---------- */
.figure{margin:0;}
.figure__media{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:var(--paper-light);
  border:1px solid var(--rule);
  border-top:2px solid var(--ink);
}
.figure__media--wide{aspect-ratio:21 / 9;}
.figure__media--square{aspect-ratio:1 / 1;}
.figure__media--portrait{aspect-ratio:3 / 4;}
.figure__media > img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.figure__caption{
  margin-top:10px;
  padding-left:10px;
  border-left:2px solid var(--rule);
  font-size:13px;
  line-height:1.75;
  color:var(--gray-ink);
}

/* ---------- 竖排批注 ---------- */
.annotation-v{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:var(--font-read);
  font-size:13px;
  letter-spacing:0.12em;
  color:var(--gray-ink);
}
@media (max-width:899px){
  .annotation-v{
    writing-mode:horizontal-tb;
    letter-spacing:0.04em;
  }
}

/* ---------- 降级动效 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .disclosure__panel{transition:none;}
  .masthead__top{transition:none;}
}
