/* ==========================================================================
   财神棋牌老版本 · 共享样式 /assets/site.css
   骨架：展览画册的纸面留白 × 老牌匾的朱砂金边
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root{
  --red:#B3242B;
  --red-deep:#7A1518;
  --red-pale:#EBD3CE;
  --paper:#F6F1E7;
  --paper-lift:#FCF9F3;
  --ink:#14100E;
  --charcoal:#3E3630;
  --stone:#8C8478;
  --gold:#C9A227;
  --gold-bright:#F0D27C;
  --jade:#2F6B5E;
  --neon:#4FD1B5;

  --line:rgba(20,16,14,.14);
  --line-soft:rgba(20,16,14,.07);
  --line-gold:rgba(201,162,39,.5);
  --tint:rgba(179,36,43,.06);
  --on-ink:rgba(246,241,231,.82);
  --on-ink-soft:rgba(246,241,231,.6);

  --font-display:"Songti SC","Source Han Serif SC","Noto Serif CJK SC","SimSun",Georgia,serif;
  --font-body:"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
  --font-num:"SFMono-Regular",Menlo,Consolas,"Courier New",monospace;

  --shell:1240px;
  --gutter:24px;
  --nav-h:84px;
  --sp-1:8px;
  --sp-2:16px;
  --sp-3:24px;
  --sp-4:32px;
  --sp-5:48px;
  --sp-6:64px;
  --sp-7:96px;
  --sp-8:128px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- 2. 重置 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--paper);
}
body,h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,picture,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;border-spacing:0;width:100%}
hr{border:0}
[hidden]{display:none!important}
[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* ---------- 3. 中文排版基线 ---------- */
body{
  min-height:100vh;
  background-color:var(--paper);
  background-image:
    linear-gradient(to right,rgba(20,16,14,.035) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(20,16,14,.035) 1px,transparent 1px);
  background-size:96px 96px;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.2;
  letter-spacing:.01em;
}
h1{font-size:clamp(28px,4.4vw,48px);font-weight:900}
h2{font-size:clamp(24px,3.2vw,36px)}
h3{font-size:clamp(19px,2.2vw,24px)}
h4{font-size:17px}
p{color:var(--charcoal)}
strong{font-weight:800;color:var(--ink)}
::selection{background:var(--red);color:var(--paper-lift)}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}
#main-content:focus{outline:none}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- 4. 跳转链接 ---------- */
.skip-link{
  position:fixed;
  top:12px;
  left:12px;
  z-index:200;
  transform:translateY(-180%);
  background:var(--ink);
  color:var(--gold-bright);
  padding:12px 20px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  border:1px solid var(--gold);
  transition:transform .18s var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* ---------- 5. 容器与网格 ---------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gutter);
}
.section{padding:var(--sp-7) 0}
.section--tight{padding:var(--sp-5) 0}
.band{padding:var(--sp-7) 0}
.band--tint{background:linear-gradient(180deg,rgba(235,211,206,.6),rgba(235,211,206,.18));border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.band--ink{background:var(--ink);color:var(--paper)}
.band--ink h1,.band--ink h2,.band--ink h3{color:var(--paper-lift)}
.band--ink p{color:var(--on-ink)}
.band--ink .eyebrow{color:var(--gold)}
.band--red{background:var(--red);color:var(--paper-lift)}
.band--red h1,.band--red h2,.band--red h3{color:var(--paper-lift)}
.band--red p{color:rgba(246,241,231,.86)}
.rule{height:1px;background:var(--line)}
.eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:.24em;
  color:var(--stone);
  margin-bottom:var(--sp-2);
}
.prose{max-width:38em}
.prose p + p{margin-top:var(--sp-2)}
.prose h3{margin-top:var(--sp-4);margin-bottom:var(--sp-1)}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sp-3)}
.span-3{grid-column:span 3}
.span-4{grid-column:span 4}
.span-5{grid-column:span 5}
.span-6{grid-column:span 6}
.span-7{grid-column:span 7}
.span-8{grid-column:span 8}
.span-12{grid-column:span 12}
.split{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--sp-5)}

/* ---------- 6. 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:44px;
  padding:12px 24px;
  font-family:var(--font-body);
  font-size:16px;
  font-weight:700;
  letter-spacing:.04em;
  text-align:center;
  border:1px solid transparent;
  border-radius:2px;
  cursor:pointer;
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.btn--primary{background:var(--red);color:var(--paper-lift);border-color:var(--red)}
.btn--primary:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper-lift)}
.btn--gold{background:transparent;color:var(--red-deep);border-color:var(--gold)}
.btn--gold:hover{background:var(--gold);color:var(--ink)}
.band--ink .btn--ghost,.band--red .btn--ghost{color:var(--paper-lift);border-color:rgba(246,241,231,.55)}
.band--ink .btn--ghost:hover,.band--red .btn--ghost:hover{background:var(--paper-lift);color:var(--ink)}

/* ---------- 7. 面包屑 ---------- */
.breadcrumbs{
  padding:var(--sp-2) 0;
  border-bottom:1px solid var(--line-soft);
  font-size:13px;
  color:var(--stone);
}
.breadcrumbs-list{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.breadcrumbs-list > li{display:flex;align-items:center;gap:8px}
.breadcrumbs-list > li + li::before{content:"/";color:var(--stone);opacity:.6}
.breadcrumbs-link{color:var(--charcoal);transition:color .18s var(--ease)}
.breadcrumbs-link:hover{color:var(--red)}
.breadcrumbs-current{color:var(--stone)}

/* ---------- 8. 页头 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.site-header::before{
  content:"";
  display:block;
  height:3px;
  background:linear-gradient(90deg,var(--red) 0 62%,var(--gold) 62% 64%,var(--red-deep) 64% 100%);
}
.site-header.is-stuck{box-shadow:0 10px 28px -22px rgba(20,16,14,.75)}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gutter);
  min-height:var(--nav-h);
}
.brand-block{display:flex;align-items:center;gap:14px;min-width:0}
.brand-mark{display:inline-flex;align-items:baseline;gap:10px;white-space:nowrap}
.brand-name{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:900;
  letter-spacing:.02em;
  color:var(--ink);
  transition:color .18s var(--ease);
}
.brand-mark:hover .brand-name{color:var(--red)}
.brand-code{
  font-family:var(--font-num);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  line-height:1.5;
  color:var(--red);
  border:1px solid rgba(179,36,43,.35);
  padding:1px 6px;
}
.brand-vertical{
  writing-mode:vertical-rl;
  font-size:12px;
  letter-spacing:.2em;
  color:var(--stone);
  border-left:1px solid var(--line);
  padding-left:10px;
  max-height:52px;
  overflow:hidden;
}
.read-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  pointer-events:none;
}
.read-progress-fill{
  display:block;
  height:100%;
  width:0;
  background:var(--gold);
  transition:width .12s linear;
}
.nav-toggle{
  display:none;
  align-items:center;
  gap:10px;
  min-height:44px;
  min-width:44px;
  padding:10px 12px;
  border:1px solid var(--ink);
  border-radius:2px;
  color:var(--ink);
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
}
.nav-toggle-bars{position:relative;display:block;width:18px;height:2px;background:currentColor}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:currentColor;
  transition:transform .22s var(--ease);
}
.nav-toggle-bars::before{top:-6px}
.nav-toggle-bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}

.site-nav{display:flex;align-items:center;gap:26px}
.nav-list{display:flex;align-items:center;gap:22px}
.nav-item{flex:none}
.nav-link{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  padding:8px 0;
  font-size:15px;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--charcoal);
  white-space:nowrap;
  transition:color .18s var(--ease);
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--gold);
  opacity:0;
  transition:opacity .18s var(--ease);
}
.nav-link:hover{color:var(--red)}
.nav-link:hover::after{opacity:.55}
.nav-link[aria-current="page"]{color:var(--ink);font-weight:700}
.nav-link[aria-current="page"]::after{opacity:1}
.nav-idx{
  font-family:var(--font-num);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--stone);
}
.nav-link[aria-current="page"] .nav-idx{color:var(--gold)}
.nav-record{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:8px 16px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--red);
  border:1px solid rgba(179,36,43,.55);
  border-radius:2px;
  background:linear-gradient(180deg,rgba(179,36,43,.05),rgba(179,36,43,0));
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.nav-record::before{content:"";display:block;width:6px;height:6px;background:var(--gold)}
.nav-record:hover{background:var(--red);color:var(--paper-lift);border-color:var(--red)}
.nav-record:hover::before{background:var(--gold-bright)}

/* ---------- 9. 页脚 ---------- */
.site-footer{
  position:relative;
  margin-top:var(--sp-8);
  background:var(--ink);
  color:var(--on-ink);
}
.site-footer::before{
  content:"";
  display:block;
  height:4px;
  background:linear-gradient(90deg,var(--gold) 0 18%,var(--red) 18% 62%,var(--red-deep) 62% 100%);
}
.footer-inner{
  max-width:var(--shell);
  margin:0 auto;
  padding:var(--sp-6) var(--gutter) var(--sp-5);
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--sp-5) var(--sp-3);
}
.footer-brand{grid-column:span 3;position:relative;padding-right:26px}
.footer-col{grid-column:span 2;min-width:0}
.footer-col--contact{grid-column:span 3}
.footer-brand-name{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:900;
  letter-spacing:.02em;
  color:var(--paper-lift);
}
.footer-brand-code{
  font-family:var(--font-num);
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--gold);
  margin-top:var(--sp-1);
}
.footer-vertical{
  position:absolute;
  top:2px;
  right:0;
  writing-mode:vertical-rl;
  font-size:11px;
  letter-spacing:.2em;
  color:rgba(201,162,39,.55);
}
.footer-note{
  margin-top:var(--sp-2);
  max-width:26em;
  font-size:13px;
  line-height:1.9;
  color:rgba(240,210,124,.62);
}
.footer-col-title{
  font-family:var(--font-body);
  font-size:12px;
  font-weight:700;
  letter-spacing:.24em;
  color:var(--gold);
  padding-bottom:12px;
  margin-bottom:14px;
  border-bottom:1px solid rgba(201,162,39,.28);
}
.footer-list{display:flex;flex-direction:column;gap:10px}
.footer-link{
  font-size:14px;
  color:var(--on-ink);
  transition:color .18s var(--ease);
}
.footer-link:hover{color:var(--gold-bright)}
.footer-meta{
  font-size:13px;
  line-height:1.85;
  color:var(--on-ink-soft);
  word-break:break-word;
}
.copy-btn{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:44px;
  padding:6px 0;
  text-align:left;
  font-size:13px;
  line-height:1.5;
  color:var(--on-ink);
  border-bottom:1px dashed rgba(201,162,39,.25);
  transition:color .18s var(--ease);
}
.copy-btn:hover{color:var(--gold-bright)}
.copy-value{min-width:0;word-break:break-all}
.copy-hint{
  flex:none;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--gold);
  border:1px solid rgba(201,162,39,.45);
  border-radius:2px;
  padding:2px 6px;
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.copy-btn[data-copied]{color:var(--gold-bright)}
.copy-btn[data-copied] .copy-hint{background:var(--gold-bright);color:var(--ink);border-color:var(--gold-bright)}
.footer-base{
  max-width:var(--shell);
  margin:0 auto;
  padding:var(--sp-2) var(--gutter) var(--sp-4);
  border-top:1px solid rgba(201,162,39,.22);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  letter-spacing:.06em;
  color:rgba(246,241,231,.55);
}
.footer-copy,.footer-legal{margin:0;color:inherit;font-size:12px}
.footer-legal{font-family:var(--font-num);letter-spacing:.12em}

/* ---------- 10. 移动端常驻底栏 ---------- */
.mobile-dock{display:none}

/* ---------- 11. 编号章节头 ---------- */
.chapter-head{display:flex;align-items:flex-start;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.chapter-num{
  flex:none;
  font-family:var(--font-num);
  font-size:72px;
  font-weight:800;
  line-height:.86;
  letter-spacing:-.02em;
  color:var(--red-pale);
  -webkit-text-stroke:1px var(--red-deep);
  transition:color .3s var(--ease),-webkit-text-stroke-color .3s var(--ease);
}
.chapter-num.is-filled{color:var(--red);-webkit-text-stroke-color:var(--red)}
.chapter-vertical{
  writing-mode:vertical-rl;
  font-size:12px;
  letter-spacing:.2em;
  color:var(--stone);
  height:72px;
  flex:none;
}
.chapter-title{font-size:clamp(26px,3.4vw,42px);font-weight:900;line-height:1.15}
.chapter-lead{margin-top:10px;max-width:36em;font-size:15px;color:var(--charcoal)}

/* ---------- 12. 牌匾模块 ---------- */
.plaque{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:var(--sp-2);
  min-height:132px;
  padding:28px;
  border-radius:2px;
  background:var(--red);
  color:var(--paper-lift);
  box-shadow:inset 0 0 0 1px rgba(240,210,124,.75);
  transition:background-color .18s var(--ease),box-shadow .18s var(--ease);
}
.plaque::after{
  content:"";
  position:absolute;
  inset:6px;
  pointer-events:none;
  background:
    linear-gradient(var(--gold-bright),var(--gold-bright)) 0 0/12px 1px no-repeat,
    linear-gradient(var(--gold-bright),var(--gold-bright)) 0 0/1px 12px no-repeat,
    linear-gradient(var(--gold-bright),var(--gold-bright)) 100% 0/12px 1px no-repeat,
    linear-gradient(var(--gold-bright),var(--gold-bright)) 100% 0/1px 12px no-repeat,
    linear-gradient(var(--gold-bright),var(--gold-bright)) 0 100%/12px 1px no-repeat,
    linear-gradient(var(--gold-bright),var(--gold-bright)) 0 100%/1px 12px no-repeat,
    linear-gradient(var(--gold-bright),var(--gold-bright)) 100% 100%/12px 1px no-repeat,
    linear-gradient(var(--gold-bright),var(--gold-bright)) 100% 100%/1px 12px no-repeat;
}
a.plaque:hover{background:var(--red-deep);box-shadow:inset 0 0 0 2px rgba(240,210,124,.9)}
.plaque--ink{background:var(--ink);box-shadow:inset 0 0 0 1px rgba(201,162,39,.6)}
a.plaque--ink:hover{background:#241d18}
.plaque-label{
  font-family:var(--font-num);
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--gold-bright);
}
.plaque-title{
  font-family:var(--font-display);
  font-size:clamp(21px,2.4vw,26px);
  font-weight:900;
  line-height:1.25;
  color:var(--paper-lift);
}
.plaque-meta{font-size:13px;line-height:1.8;color:rgba(252,249,243,.8);max-width:26em}
.plaque-go{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--gold-bright);
}
.plaque-go::after{content:"→";font-family:var(--font-num)}

/* ---------- 13. 标签页 ---------- */
.tabs{width:100%}
.tab-list{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  border-bottom:1px solid var(--line);
}
.tab-btn{
  position:relative;
  min-height:44px;
  padding:12px 20px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--charcoal);
  border:1px solid transparent;
  border-bottom:0;
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.tab-btn:hover{color:var(--red);background:var(--tint)}
.tab-btn[aria-selected="true"]{
  color:var(--red-deep);
  background:var(--paper-lift);
  border-color:var(--line);
}
.tab-btn[aria-selected="true"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:var(--gold);
}
.tab-panel{padding:var(--sp-3) 0 0}
.tab-panel.is-entering{animation:panelIn .22s var(--ease) both}
@keyframes panelIn{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:none}
}

/* ---------- 14. 步骤折叠 ---------- */
.step-list{border-top:1px solid var(--line)}
.step{border-bottom:1px solid var(--line)}
.step[open]{background:var(--paper-lift)}
.step-title{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  min-height:52px;
  padding:14px 8px;
  font-size:17px;
  font-weight:700;
  color:var(--ink);
  cursor:pointer;
  list-style:none;
}
.step-title::-webkit-details-marker{display:none}
.step-title::after{
  content:"+";
  margin-left:auto;
  font-family:var(--font-num);
  font-size:18px;
  color:var(--red);
}
.step[open] .step-title::after{content:"–"}
.step-idx{
  flex:none;
  font-family:var(--font-num);
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--stone);
}
.step-body{
  padding:0 8px var(--sp-3);
  max-width:38em;
  font-size:15px;
  color:var(--charcoal);
}
.step-body p + p{margin-top:10px}

/* ---------- 15. 标签与状态 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.6;
  color:var(--charcoal);
  background:var(--paper-lift);
  border:1px solid var(--line);
  border-radius:2px;
}
.tag--gold{color:var(--red-deep);border-color:var(--line-gold);background:rgba(201,162,39,.1)}
.tag--jade{color:var(--jade);border-color:rgba(47,107,94,.35);background:rgba(47,107,94,.08)}
.tag--live::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--neon);
  box-shadow:0 0 0 3px rgba(79,209,181,.22);
  animation:breathe 2.4s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{opacity:1}
  50%{opacity:.4}
}

/* ---------- 16. 图片容器 ---------- */
.media-frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--red-pale);
  border:1px solid var(--line);
  border-radius:2px;
}
.media-frame--wide{aspect-ratio:16/9}
.media-frame--tall{aspect-ratio:3/4}
.media-frame > img,
.media-frame > picture > img{width:100%;height:100%;object-fit:cover}
.media-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.35);
}
.media-frame[data-empty]{
  background:
    repeating-linear-gradient(135deg,rgba(179,36,43,.09) 0 8px,transparent 8px 16px),
    var(--paper-lift);
}
.media-caption{
  margin-top:var(--sp-1);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--stone);
}

/* ---------- 17. 表格 ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.data-table{min-width:520px;font-size:15px;border-top:2px solid var(--ink)}
.data-table th{
  padding:12px 16px;
  text-align:left;
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--stone);
  white-space:nowrap;
  border-bottom:1px solid var(--line);
}
.data-table td{
  padding:14px 16px;
  vertical-align:top;
  border-bottom:1px solid var(--line-soft);
}
.data-table tbody tr:hover{background:var(--paper-lift)}
.data-table .num{
  font-family:var(--font-num);
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}

/* ---------- 18. 横向滚动带 ---------- */
.hscroll{
  display:flex;
  gap:var(--sp-3);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:4px 0 var(--sp-3);
  scrollbar-width:thin;
}
.hscroll > *{flex:0 0 clamp(240px,32vw,360px);scroll-snap-align:start}

/* ---------- 19. 面板与提示 ---------- */
.panel{
  padding:var(--sp-3);
  background:var(--paper-lift);
  border:1px solid var(--line);
  border-radius:2px;
}
.panel--tint{background:var(--tint);border-color:rgba(179,36,43,.2)}
.callout{
  padding:20px 24px;
  background:var(--paper-lift);
  border-left:3px solid var(--gold);
  font-size:15px;
  color:var(--charcoal);
}
.callout-title{
  margin-bottom:6px;
  font-weight:800;
  color:var(--ink);
}

/* ---------- 20. 显现 ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(8px);
  transition:opacity .42s var(--ease),transform .42s var(--ease);
}
[data-reveal].is-visible{opacity:1;transform:none}

/* ---------- 21. 平板 ---------- */
@media (max-width:1100px){
  .nav-list{gap:16px}
  .site-nav{gap:18px}
  .nav-link{font-size:14px}
  .brand-vertical{display:none}
}
@media (max-width:1023px){
  .footer-brand{grid-column:span 12}
  .footer-col{grid-column:span 4}
  .footer-col--contact{grid-column:span 12}
  .span-3,.span-4,.span-5{grid-column:span 6}
  .span-6,.span-7,.span-8{grid-column:span 12}
  .split{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
  .section{padding:var(--sp-6) 0}
  .band{padding:var(--sp-6) 0}
}

/* ---------- 22. 移动端 ---------- */
@media (max-width:899px){
  :root{--gutter:20px;--nav-h:64px}
  .nav-toggle{display:inline-flex}
  .brand-name{font-size:18px}
  .header-inner{gap:var(--sp-2)}
  .site-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:var(--sp-1) var(--gutter) var(--sp-3);
    background:var(--paper-lift);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    box-shadow:0 22px 44px -32px rgba(20,16,14,.8);
    max-height:calc(100vh - var(--nav-h));
    overflow-y:auto;
  }
  .site-nav[data-open]{
    display:flex;
    animation:navIn .22s var(--ease) both;
  }
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-item + .nav-item{border-top:1px solid var(--line-soft)}
  .nav-link{
    justify-content:flex-start;
    width:100%;
    padding:16px 4px;
    font-size:17px;
    letter-spacing:.04em;
  }
  .nav-link::after{display:none}
  .nav-link[aria-current="page"]{
    color:var(--red);
    padding-left:14px;
    box-shadow:inset 3px 0 0 0 var(--gold);
  }
  .nav-link[aria-current="page"] .nav-idx{color:var(--red)}
  .nav-record{width:100%;min-height:48px;margin-top:var(--sp-2);font-size:15px}

  .footer-inner{padding:var(--sp-5) var(--gutter) var(--sp-4);gap:var(--sp-4) var(--sp-2)}
  .footer-col,.footer-col--contact{grid-column:span 6}
  .footer-brand{grid-column:span 12;padding-right:0}
  .footer-vertical{position:static;writing-mode:horizontal-tb;letter-spacing:.2em;display:block;margin-top:10px}
  .footer-base{flex-direction:column;align-items:flex-start}

  .mobile-dock{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:80;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));
    background:var(--ink);
    border-top:2px solid var(--gold);
  }
  .dock-link{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    font-size:14px;
    font-weight:700;
    letter-spacing:.08em;
    color:var(--gold-bright);
    border:1px solid rgba(201,162,39,.42);
    border-radius:2px;
  }
  .dock-link--primary{background:var(--red);border-color:var(--red);color:var(--paper-lift)}
  .dock-link--primary:hover{background:var(--red-deep)}
  body{padding-bottom:76px}
  .site-footer{margin-top:var(--sp-6)}
  .chapter-head{gap:var(--sp-2)}
  .chapter-num{font-size:52px}
  .chapter-vertical{display:none}
  .hscroll{
    flex-direction:column;
    overflow:visible;
    scroll-snap-type:none;
  }
  .hscroll > *{flex:1 1 auto}
  .plaque{padding:22px;min-height:120px}
}
@media (max-width:639px){
  .footer-col,.footer-col--contact{grid-column:span 12}
  .band{padding:var(--sp-5) 0}
  .tab-btn{padding:12px 14px;font-size:14px}
  .media-frame--tall{aspect-ratio:4/3}
}
@keyframes navIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}

/* ---------- 23. 减弱动效 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  [data-reveal]{opacity:1;transform:none}
  .tab-panel.is-entering{animation:none}
  .tag--live::before{animation:none;opacity:1}
}