/* ============================================================
   华体会赛场 · 共享样式表 /assets/site.css
   设计语言：大漠赛场 × 数字控制室 · 模块化 Bento 信息板
   ============================================================ */

/* ---------- 1. 变量与重置 ---------- */
:root{
  --gobi:#1A1420;
  --space:#101B33;
  --violet:#2E2350;
  --teal:#0E3A38;
  --gold:#E3B455;
  --poplar:#E8752A;
  --cyan:#2FD3C4;
  --red:#E23B3B;
  --sand:#F3E9DA;
  --ink:#1D1710;
  --pale:#EFE6D6;
  --line:#6B563B;

  --font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","Sarasa Mono SC","Cascadia Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --rail-w:88px;
  --topbar-h:64px;
  --maxw:1280px;
  --gap:16px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-hard:6px 6px 0 0 rgba(0,0,0,.55);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  padding-top:var(--topbar-h);
  min-height:100vh;
  background:var(--gobi);
  color:var(--pale);
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  letter-spacing:.01em;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
ul,ol{margin:0;padding:0}

/* ---------- 2. 中文排版基线 ---------- */
h1,h2,h3,h4{
  margin:0 0 .6em;
  line-height:1.28;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--gold);
}
h1{font-size:clamp(34px,5vw,64px);letter-spacing:.01em}
h2{font-size:clamp(24px,2.4vw,32px)}
h3{font-size:20px}
p{margin:0 0 1em}
strong{color:var(--gold)}
a{color:var(--cyan);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
code,kbd{font-family:var(--font-mono);font-size:.92em}

:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:0}

/* ---------- 3. 布局工具 ---------- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:clamp(16px,3vw,40px);
}

#main-content{display:block;outline:none}
main{display:block}

:target,#main-content{scroll-margin-top:calc(var(--topbar-h) + 20px)}

.visually-hidden{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}

.mono{font-family:var(--font-mono);letter-spacing:.06em}

.eyebrow{
  display:inline-block;
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cyan);
}

.section-head{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0 0 20px;
  padding-bottom:12px;
  border-bottom:2px solid var(--line);
}
.section-head__idx{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--gold);
}
.section-head__title{margin:0;font-size:clamp(22px,2.4vw,30px);color:var(--pale)}
.section-head--light{border-bottom-color:rgba(29,23,16,.35)}
.section-head--light .section-head__title{color:var(--ink)}
.section-head--light .section-head__idx{color:#7A3D0F}

/* ---------- 4. 跳转链接 / 滚动读数 ---------- */
.skip-link{
  position:fixed;
  top:-64px;
  left:12px;
  z-index:200;
  padding:10px 18px;
  background:var(--gold);
  color:var(--ink);
  font-size:14px;
  font-weight:800;
  letter-spacing:.08em;
  text-decoration:none;
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 0 var(--poplar);
  transition:top .2s var(--ease);
}
.skip-link:focus{top:10px;text-decoration:none}

.scroll-progress{
  position:fixed;
  top:0;left:0;right:0;
  height:3px;
  z-index:130;
  pointer-events:none;
  background:rgba(107,86,59,.35);
}
.scroll-progress__bar{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,var(--gold),var(--poplar) 55%,var(--cyan));
  transition:transform .12s linear;
}

/* ---------- 5. 顶部状态带 ---------- */
.site-header{position:relative;z-index:100}

.topbar{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--topbar-h);
  z-index:95;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 14px;
  background:linear-gradient(90deg,rgba(16,27,51,.97),rgba(14,58,56,.94));
  border-bottom:2px solid var(--line);
  box-shadow:0 10px 24px -18px rgba(0,0,0,.9);
  backdrop-filter:blur(6px);
}

.topbar__brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-width:0;
  color:var(--pale);
  text-decoration:none;
}
.topbar__brand:hover{text-decoration:none}
.topbar__mark{
  width:30px;height:30px;
  flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--gold);
  color:var(--ink);
  font-size:16px;font-weight:800;letter-spacing:0;
  border:2px solid var(--ink);
}
.topbar__name{
  font-size:15px;
  font-weight:800;
  letter-spacing:.06em;
  white-space:nowrap;
}

.topbar__sig{
  display:none;
  margin:0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:rgba(239,230,214,.6);
  white-space:nowrap;
}

.status-strip{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 0 auto;
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.35;
  letter-spacing:.05em;
  color:var(--cyan);
}
.status-strip__item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  white-space:nowrap;
  background:rgba(16,27,51,.6);
  border:1px solid rgba(47,211,196,.35);
}
.status-strip__key{color:rgba(239,230,214,.6)}
.status-strip__val{color:var(--cyan);font-weight:600}
.status-strip__dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 3px rgba(226,59,59,.18);
  animation:wh-pulse 2.4s var(--ease) infinite;
}
@keyframes wh-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- 6. 移动抽屉按钮与遮罩 ---------- */
.nav-toggle{
  display:none;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:6px 10px;
  background:rgba(227,180,85,.1);
  color:var(--gold);
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  border:2px solid var(--gold);
  border-radius:0;
  cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.nav-toggle:hover{background:var(--gold);color:var(--ink)}
.nav-toggle__bars{display:grid;gap:4px;width:18px}
.nav-toggle__bars span{
  display:block;
  height:2px;
  background:currentColor;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-toggle__text{white-space:nowrap}

.nav-scrim{
  position:fixed;
  inset:0;
  z-index:105;
  background:rgba(10,7,14,.74);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease);
}

/* ---------- 7. 侧边轨道导航 ---------- */
.rail{
  position:fixed;
  top:0;bottom:0;left:0;
  width:var(--rail-w);
  z-index:110;
  display:flex;
  flex-direction:column;
  padding:14px 0 16px;
  background:linear-gradient(180deg,#101B33 0%,#0E3A38 55%,#1A1420 100%);
  border-right:2px solid var(--line);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.rail::-webkit-scrollbar{width:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line)}

.rail__brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin:0 10px 14px;
  padding:2px 4px 14px;
  border-bottom:2px solid var(--line);
  text-decoration:none;
}
.rail__brand:hover{text-decoration:none}
.rail__mark{
  width:44px;height:44px;
  display:grid;place-items:center;
  background:var(--gold);
  color:var(--ink);
  font-size:22px;font-weight:800;letter-spacing:0;
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 0 rgba(226,59,59,.75);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease);
}
.rail__brand:hover .rail__mark{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 0 rgba(226,59,59,.85);
}
.rail__name{
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--gold);
}

.rail__nav{flex:1 1 auto;padding:0 8px}

.rail__list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.rail__item{display:block}

.rail__link{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:100%;
  padding:12px 4px 14px;
  color:var(--pale);
  text-decoration:none;
  border:2px solid transparent;
  transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease);
}
.rail__link:hover{text-decoration:none;background:rgba(47,211,196,.1);border-color:rgba(47,211,196,.5);color:#fff}
.rail__link::before{
  content:"";
  position:absolute;
  left:0;top:50%;
  width:4px;height:0;
  transform:translateY(-50%);
  background:var(--gold);
  transition:height .32s var(--ease);
}
.rail__link:hover::before{height:48px}
.rail__link[aria-current="page"]{
  background:rgba(227,180,85,.16);
  border-color:var(--gold);
  color:var(--gold);
}
.rail__link[aria-current="page"]::before{height:48px}

.rail__idx{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--cyan);
  transition:color .28s var(--ease);
}
.rail__link:hover .rail__idx,
.rail__link[aria-current="page"] .rail__idx{color:var(--poplar)}

.rail__label{
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-size:13px;
  font-weight:600;
  letter-spacing:.16em;
}

.rail__foot{
  margin-top:10px;
  padding:14px 10px 0;
  border-top:2px solid var(--line);
}
.rail__cta{
  display:block;
  padding:10px 8px;
  text-align:center;
  background:var(--gold);
  color:var(--ink);
  font-size:13px;
  font-weight:800;
  line-height:1.4;
  letter-spacing:.06em;
  text-decoration:none;
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 0 var(--poplar);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.rail__cta:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--poplar)}
.rail__note{
  margin:12px 0 0;
  text-align:center;
  font-family:var(--font-mono);
  font-size:10px;
  line-height:1.5;
  letter-spacing:.04em;
  color:rgba(239,230,214,.55);
}

/* ---------- 8. 页脚 ---------- */
.site-footer{
  position:relative;
  margin-top:clamp(48px,7vw,96px);
  background:linear-gradient(180deg,#101B33 0%,#1A1420 78%);
  border-top:2px solid var(--gold);
  color:var(--pale);
}

.footer__ticker{
  background:rgba(14,58,56,.55);
  border-bottom:2px solid var(--line);
}
.footer__chip-list{
  display:flex;
  gap:10px;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:12px clamp(16px,3vw,40px);
  list-style:none;
  overflow-x:auto;
  scrollbar-width:thin;
}
.footer__chip{
  flex:0 0 auto;
  padding:5px 10px;
  white-space:nowrap;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--cyan);
  background:rgba(16,27,51,.65);
  border:1px solid rgba(47,211,196,.4);
}

.footer__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(28px,4vw,52px) clamp(16px,3vw,40px);
}

.footer__brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.footer__mark{
  width:52px;height:52px;
  display:grid;place-items:center;
  background:var(--violet);
  color:var(--gold);
  font-size:26px;font-weight:800;letter-spacing:0;
  border:2px solid var(--gold);
  box-shadow:5px 5px 0 0 rgba(0,0,0,.6);
}
.footer__name{
  margin:0;
  font-size:20px;
  font-weight:800;
  letter-spacing:.1em;
  color:var(--gold);
}
.footer__sig{
  margin:0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--cyan);
}
.footer__brand .btn{margin-top:6px}

.footer__nav{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
.footer__col{min-width:0}
.footer__col-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px;
  padding-bottom:8px;
  border-bottom:2px solid var(--line);
  font-size:14px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--pale);
}
.footer__col-idx{
  padding:1px 6px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--ink);
  background:var(--gold);
}
.footer__links{
  display:flex;
  flex-direction:column;
  gap:8px;
  list-style:none;
}
.footer__link{
  display:inline-block;
  font-size:14px;
  color:rgba(239,230,214,.82);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease),padding-left .2s var(--ease);
}
.footer__link:hover{
  color:var(--cyan);
  border-bottom-color:var(--cyan);
  padding-left:6px;
  text-decoration:none;
}

.footer__bottom{
  padding:20px clamp(16px,3vw,40px) 30px;
  background:rgba(10,7,14,.55);
  border-top:2px solid var(--line);
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.7;
  letter-spacing:.03em;
  color:rgba(239,230,214,.62);
}
.footer__bottom p{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto 6px;
}
.footer__contact{color:rgba(239,230,214,.8)}
.footer__hours{color:var(--cyan)}
.footer__legal{color:rgba(239,230,214,.55)}
.footer__signoff{color:var(--gold)}
[data-year]:empty::before{content:"当年"}

.to-top{
  position:fixed;
  right:18px;bottom:18px;
  z-index:80;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:10px 14px;
  background:var(--gold);
  color:var(--ink);
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  border:2px solid var(--ink);
  border-radius:0;
  cursor:pointer;
  box-shadow:4px 4px 0 0 rgba(10,7,14,.6);
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.to-top[data-visible]{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--poplar);color:var(--pale)}
.to-top__text{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em}

/* ---------- 9. 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:11px 20px;
  background:var(--pale);
  color:var(--ink);
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  text-decoration:none;
  border:2px solid var(--ink);
  border-radius:0;
  cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.btn:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:5px 5px 0 0 rgba(10,7,14,.7)}
.btn--gold{background:var(--gold);color:var(--ink);box-shadow:4px 4px 0 0 var(--poplar)}
.btn--gold:hover{box-shadow:6px 6px 0 0 var(--poplar)}
.btn--cyan{background:var(--cyan);color:var(--ink);box-shadow:4px 4px 0 0 var(--teal)}
.btn--ghost{background:transparent;color:var(--gold);border-color:var(--gold);box-shadow:none}
.btn--ghost:hover{background:rgba(227,180,85,.14);box-shadow:5px 5px 0 0 rgba(227,180,85,.35)}
.btn--block{width:100%}

/* ---------- 10. Bento 网格与卡片 ---------- */
.bento{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
}
.bento__cell{grid-column:span 12;min-width:0}
.bento__focus{grid-column:span 12;z-index:2}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
}
.span-3,.span-4,.span-6,.span-8,.span-12{grid-column:span 12}

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:20px 20px 22px;
  background:var(--space);
  border:2px solid var(--line);
  box-shadow:var(--shadow-hard);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease);
}
.card:hover{
  transform:translate(-4px,-4px);
  box-shadow:10px 10px 0 0 rgba(0,0,0,.6);
  border-color:var(--gold);
}
.card--violet{background:var(--violet);border-color:var(--gold)}
.card--teal{background:var(--teal);border-color:var(--gold)}
.card--navy{background:var(--space);border-color:var(--line)}
.card--sand{background:var(--sand);color:var(--ink);border-color:var(--ink)}
.card--gold{background:var(--gold);color:var(--ink);border-color:var(--ink)}

.card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.card__idx{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--cyan);
}
.card__title{margin:0 0 8px;font-size:20px;color:var(--gold)}
.card__text{
  margin:0;
  font-size:15px;
  line-height:1.7;
  color:rgba(239,230,214,.86);
}
.card--sand .card__title,
.card--gold .card__title,
.card--sand h2,.card--sand h3,
.card--gold h2,.card--gold h3{color:var(--ink)}
.card--sand .card__idx,
.card--gold .card__idx{color:#7A3D0F}
.card--sand .card__text,
.card--gold .card__text{color:rgba(29,23,16,.88)}
.card--sand a,.card--gold a{color:#0B5C55}
.card__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:auto;
  padding-top:14px;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--cyan);
  background:rgba(16,27,51,.5);
  border:1px solid currentColor;
}
.tag--live{color:var(--red);background:rgba(226,59,59,.12)}
.tag--warn{color:var(--poplar);background:rgba(232,117,42,.12)}
.tag--ok{color:var(--cyan);background:rgba(47,211,196,.12)}

/* ---------- 11. 面包屑 ---------- */
.crumbs{margin:0 0 18px}
.crumbs__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  list-style:none;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
}
.crumbs__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:rgba(239,230,214,.6);
}
.crumbs__item + .crumbs__item::before{content:"/";color:var(--line)}
.crumbs__link{color:var(--cyan)}
.crumbs__link:hover{text-decoration:underline}
.crumbs__current{color:var(--gold)}

/* ---------- 12. 正文与阅读组件 ---------- */
.prose{
  max-width:38em;
  font-size:16.5px;
  line-height:1.85;
  color:rgba(239,230,214,.9);
}
.prose h2{margin-top:2em;font-size:clamp(22px,2.2vw,28px);color:var(--gold)}
.prose h3{margin-top:1.6em;font-size:19px;color:var(--cyan)}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em}
.prose li{margin-bottom:.5em}
.prose__lead{
  margin-bottom:1.6em;
  padding-left:16px;
  border-left:4px solid var(--gold);
  font-size:18px;
  line-height:1.8;
  color:var(--pale);
}
.prose--light{
  max-width:none;
  padding:clamp(20px,3vw,40px);
  background:var(--sand);
  color:var(--ink);
  border:2px solid var(--ink);
  box-shadow:var(--shadow-hard);
}
.prose--light h2,.prose--light h3,.prose--light strong{color:#7A3D0F}
.prose--light a{color:#0B5C55}
.prose--light .prose__lead{color:var(--ink);border-left-color:var(--poplar)}

.note{
  margin:0 0 1.4em;
  padding-left:14px;
  border-left:3px solid var(--line);
  font-family:var(--font-mono);
  font-size:13px;
  line-height:1.7;
  letter-spacing:.03em;
  color:rgba(239,230,214,.7);
}

.callout{
  position:relative;
  margin:0 0 1.6em;
  padding:16px 18px;
  background:rgba(14,58,56,.55);
  border:2px solid var(--line);
  border-left:6px solid var(--cyan);
  box-shadow:var(--shadow-hard);
  font-size:15px;
  line-height:1.75;
}
.callout--cyan{border-left-color:var(--cyan)}
.callout--warn{
  background:rgba(232,117,42,.14);
  border-left-color:var(--poplar);
}

.toc{
  padding:16px;
  background:rgba(16,27,51,.72);
  border:2px solid var(--line);
  box-shadow:var(--shadow-hard);
}
.toc__title{
  margin:0 0 12px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}
.toc__list{
  display:flex;
  flex-direction:column;
  gap:2px;
  list-style:none;
}
.toc__link{
  display:block;
  padding:8px 10px;
  border-left:3px solid transparent;
  font-size:14px;
  color:rgba(239,230,214,.78);
  text-decoration:none;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.toc__link:hover{color:var(--cyan);background:rgba(47,211,196,.08);text-decoration:none}
.toc__link[aria-current="true"]{
  color:var(--gold);
  border-left-color:var(--gold);
  background:rgba(227,180,85,.12);
}

/* ---------- 13. 图片容器基础规则 ---------- */
.media{
  display:block;
  margin:0;
  overflow:hidden;
  background:var(--space);
  border:2px solid var(--line);
  box-shadow:var(--shadow-hard);
}
.media img,
.media__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:16/10;
}
.media__placeholder{
  display:grid;
  place-items:center;
  aspect-ratio:16/10;
  padding:18px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:rgba(47,211,196,.78);
  background:
    repeating-linear-gradient(135deg,rgba(227,180,85,.14) 0 2px,transparent 2px 14px),
    linear-gradient(180deg,var(--space),var(--violet));
}
.media__caption{
  padding:9px 12px;
  border-top:2px solid var(--line);
  background:rgba(10,7,14,.6);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--cyan);
}
.media--wide img,
.media--wide .media__placeholder{aspect-ratio:21/9}
.media--tall img,
.media--tall .media__placeholder{aspect-ratio:3/4}
.media--square img,
.media--square .media__placeholder{aspect-ratio:1/1}
.media--cut{clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}

/* ---------- 14. 显现动效与减少动效 ---------- */
.js [data-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .32s var(--ease),transform .32s var(--ease);
}
.js [data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ---------- 15. 断点：平板 ---------- */
@media (min-width:640px){
  .bento__cell{grid-column:span 6}
  .bento__cell--wide{grid-column:span 12}
  .span-3,.span-4,.span-6{grid-column:span 6}
  .footer__nav{grid-template-columns:repeat(3,1fr)}
  .status-strip{font-size:12px}
}

/* ---------- 16. 断点：桌面 ---------- */
@media (min-width:1024px){
  :root{--topbar-h:56px}

  body{padding-left:var(--rail-w)}

  .topbar{left:var(--rail-w);padding-inline:24px;gap:20px}
  .topbar__brand{display:none}
  .topbar__sig{display:block}
  .nav-scrim{display:none}
  .nav-toggle{display:none}

  .bento__cell{grid-column:span 4}
  .bento__cell--wide{grid-column:span 8}
  .bento__cell--tall{grid-row:span 2}
  .bento__cell--full{grid-column:span 12}
  .bento__focus{grid-column:span 6;transform:translateY(-14px);box-shadow:8px 8px 0 0 var(--gold)}
  .bento__focus:hover{transform:translate(-4px,-18px);box-shadow:12px 12px 0 0 var(--gold)}

  .span-3{grid-column:span 3}
  .span-4{grid-column:span 4}
  .span-6{grid-column:span 6}
  .span-8{grid-column:span 8}

  .footer__inner{grid-template-columns:minmax(240px,1fr) 2fr}
  .footer__chip-list{padding-block:14px}
}

/* ---------- 17. 断点：移动端抽屉 ---------- */
@media (max-width:1023px){
  .nav-toggle{display:inline-flex}
  .topbar__sig{display:none}

  .status-strip{
    flex-direction:column;
    align-items:flex-end;
    gap:3px;
    font-size:10px;
  }
  .status-strip__item{padding:2px 6px}

  .rail{
    width:min(300px,86vw);
    padding:18px 0 22px;
    transform:translateX(-102%);
    box-shadow:none;
    z-index:120;
    transition:transform .34s var(--ease);
  }
  .site-header[data-open] .rail{
    transform:translateX(0);
    box-shadow:14px 0 0 0 rgba(10,7,14,.55);
  }
  .site-header[data-open] .nav-scrim{
    opacity:1;
    pointer-events:auto;
  }

  .rail__brand{
    flex-direction:row;
    align-items:center;
    gap:12px;
    margin:0 16px 14px;
    padding:0 0 14px;
  }
  .rail__name{
    writing-mode:horizontal-tb;
    font-size:16px;
    letter-spacing:.12em;
  }
  .rail__nav{padding:0 16px}
  .rail__list{gap:6px}
  .rail__link{
    flex-direction:row;
    align-items:center;
    gap:14px;
    padding:12px;
    background:rgba(16,27,51,.5);
    border:2px solid var(--line);
  }
  .rail__link::before{left:0}
  .rail__label{
    writing-mode:horizontal-tb;
    font-size:15px;
    letter-spacing:.1em;
  }
  .rail__idx{font-size:12px}
  .rail__foot{margin-top:auto;padding:16px}
  .rail__cta{font-size:15px;padding:12px}
}