/* =========================================================
   艾尚电子 /assets/site.css
   共享外壳：tokens · reset · 头部 · 页脚 · 基础组件
   ========================================================= */

/* ---------- 1. tokens ---------- */
:root{
  --ink-900:#0A0F2C;
  --ink-700:#1A2350;
  --ink-600:#232E63;
  --paper-000:#FFFFFF;
  --paper-050:#F3F5F9;
  --line-200:#D7DCE6;
  --line-400:#96A0B2;
  --text-900:#0F1319;
  --text-700:#3A4358;
  --signal-500:#FF6A2B;
  --signal-700:#B23C0C;
  --cyan-400:#22D8CB;
  --cyan-700:#0F7A72;
  --violet-500:#7A5CFF;
  --violet-700:#4936B8;
  --font-display:"Sora","Source Han Sans SC","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Source Han Sans SC","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Noto Sans Mono CJK SC",monospace;
  --radius:4px;
  --shell-w:1320px;
  --gutter:24px;
  --rail-w:28px;
  --shadow-1:4px 4px 0 var(--line-200);
  --shadow-2:6px 6px 0 rgba(10,15,44,.08);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- 2. reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper-050);
  color:var(--text-900);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  font-weight:400;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
[id]{scroll-margin-top:132px}
::selection{background:var(--signal-500);color:#fff}
:focus-visible{outline:2px solid var(--signal-500);outline-offset:2px}

/* ---------- 3. 基础排版 ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.16;letter-spacing:-.02em;color:var(--ink-900)}
.display-xl{font-family:var(--font-display);font-weight:900;font-size:clamp(2.25rem,6vw,4.5rem);line-height:1.02;letter-spacing:-.03em;color:var(--ink-900)}
.display-lg{font-family:var(--font-display);font-weight:800;font-size:clamp(1.75rem,4vw,3rem);line-height:1.08;letter-spacing:-.025em;color:var(--ink-900)}
.display-md{font-family:var(--font-display);font-weight:800;font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.2;color:var(--ink-900)}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--line-400)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.prose{max-width:72ch;font-size:17px;line-height:1.75;color:var(--text-900)}
.prose p + p{margin-top:1em}
.prose h2{font-size:clamp(1.4rem,2.4vw,2rem);margin-top:1.9em;margin-bottom:.6em}
.prose h3{font-size:1.15rem;margin-top:1.5em;margin-bottom:.5em}
.prose ul,.prose ol{margin-top:.8em}
.prose li{position:relative;padding-left:1.5em}
.prose li + li{margin-top:.4em}
.prose ul > li::before{content:"—";position:absolute;left:0;font-family:var(--font-mono);color:var(--signal-500)}
.prose ol{counter-reset:prose}
.prose ol > li{counter-increment:prose}
.prose ol > li::before{content:counter(prose,decimal-leading-zero);position:absolute;left:0;font-family:var(--font-mono);font-size:12px;color:var(--signal-500);top:.35em}
.prose a{border-bottom:1px solid var(--signal-500)}

/* ---------- 4. 布局骨架 ---------- */
.container{width:100%;max-width:var(--shell-w);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:clamp(48px,7vw,96px)}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 32px;margin-bottom:clamp(24px,3vw,40px)}
.section-head__title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.1;letter-spacing:-.025em}
.section-head__desc{flex:1 1 320px;font-size:15px;line-height:1.7;color:var(--text-700)}
.panel{position:relative;background:var(--paper-000);border:1px solid var(--line-200);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:clamp(24px,3.4vw,48px)}
.panel--dark{background:var(--ink-900);border-color:var(--ink-700);color:var(--paper-050);box-shadow:6px 6px 0 rgba(10,15,44,.18)}
.panel--dark h1,.panel--dark h2,.panel--dark h3,.panel--dark .display-lg,.panel--dark .display-md{color:var(--paper-000)}
.panel--inset{background:var(--paper-050);box-shadow:none}
.stack-1{margin-left:0}
.stack-2{margin-left:24px}
.stack-3{margin-left:48px}
.grid{display:grid;gap:24px}
.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(4,minmax(0,1fr))}
.grid--split{grid-template-columns:repeat(12,minmax(0,1fr))}
.col-3{grid-column:span 3}
.col-5{grid-column:span 5}
.col-6{grid-column:span 6}
.col-7{grid-column:span 7}
.col-9{grid-column:span 9}
.col-12{grid-column:span 12}

/* ---------- 5. 头部 ---------- */
.site-header{position:sticky;top:0;z-index:60}
.skip-link{
  position:absolute;left:16px;top:-80px;z-index:99;
  background:var(--ink-900);color:var(--paper-000);
  font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;
  padding:10px 16px;border-radius:2px;transition:top .18s var(--ease);
}
.skip-link:focus{top:12px}

.frame-rail{
  display:none;position:fixed;left:0;top:0;bottom:0;width:var(--rail-w);z-index:50;
  flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:var(--ink-900);border-right:1px solid var(--ink-700);
  pointer-events:none;
}
.frame-rail__rule{width:1px;height:64px;background:linear-gradient(var(--ink-600),transparent)}
.frame-rail__rule:last-child{background:linear-gradient(transparent,var(--ink-600))}
.frame-rail__text{writing-mode:vertical-rl;font-family:var(--font-mono);font-size:10px;letter-spacing:.3em;color:var(--line-400)}

.header-bar{background:var(--paper-000);border-bottom:1px solid var(--line-200)}
.header-bar__inner{display:flex;align-items:stretch;min-height:74px;gap:0}

.brand{display:flex;align-items:center;gap:12px;padding:12px 20px 12px 0;border-right:1px solid var(--line-200);flex:0 0 auto}
.brand__mark{
  display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;
  background:var(--ink-900);color:var(--cyan-400);
  font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;border-radius:2px;
}
.brand__meta{display:flex;flex-direction:column;line-height:1.1}
.brand__name{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:.02em;color:var(--ink-900)}
.brand__note{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--line-400)}

.site-nav{flex:1 1 auto;display:flex;align-items:stretch;min-width:0}
.site-nav__list{display:flex;align-items:stretch;width:100%}
.site-nav__item{display:flex}
.site-nav__link{
  position:relative;display:flex;align-items:center;padding:0 20px;
  font-size:15px;font-weight:500;color:var(--ink-700);
  border-right:1px solid var(--line-200);
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.site-nav__item:first-child .site-nav__link{border-left:1px solid var(--line-200)}
.site-nav__link:hover{background:var(--paper-050);color:var(--ink-900)}
.site-nav__link[aria-current="page"]{font-weight:800;color:var(--ink-900)}
.site-nav__link[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--signal-500)}
.site-nav__link[aria-current="page"]::before{content:"";position:absolute;top:0;left:0;width:10px;height:10px;background:var(--signal-500);clip-path:polygon(0 0,100% 0,0 100%)}
.site-nav__foot{display:none;padding:20px 24px 28px}

.header-tools{display:flex;align-items:center;gap:14px;padding-left:16px;flex:0 0 auto}
.header-stat{display:flex;flex-direction:column;line-height:1.05;padding-right:14px;border-right:1px solid var(--line-200)}
.header-stat__value{font-family:var(--font-mono);font-size:20px;font-weight:700;letter-spacing:.04em;color:var(--ink-900)}
.header-stat__unit{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--line-400)}
.header-stat--alt .header-stat__value{color:var(--signal-500)}

.nav-toggle{
  display:none;align-items:center;gap:8px;position:relative;z-index:80;
  padding:9px 12px;border:1px solid var(--line-200);border-radius:2px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--ink-900);
  background:var(--paper-000);transition:background-color .18s var(--ease),color .18s var(--ease);
}
.nav-toggle__bars{width:16px;height:10px;flex:0 0 auto;background:linear-gradient(var(--ink-900) 0 2px,transparent 2px 4px,var(--ink-900) 4px 6px,transparent 6px 8px,var(--ink-900) 8px 10px)}
.nav-toggle[aria-expanded="true"]{background:var(--ink-900);border-color:var(--ink-900);color:var(--paper-000)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:linear-gradient(var(--paper-000) 0 2px,transparent 2px 4px,var(--paper-000) 4px 6px,transparent 6px 8px,var(--paper-000) 8px 10px)}

.header-status{background:var(--ink-900);color:var(--paper-050);max-height:32px;overflow:hidden;transition:max-height .24s var(--ease),opacity .2s linear}
.header-status__inner{display:flex;align-items:center;gap:12px;height:32px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em}
.status-dot{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--cyan-400);box-shadow:0 0 0 3px rgba(34,216,203,.18)}
.status-text{color:var(--line-200)}
.status-progress{margin-left:auto;display:flex;align-items:center;gap:10px}
.status-progress__track{position:relative;display:block;width:180px;height:3px;background:rgba(215,220,230,.22)}
.status-progress__fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--signal-500)}
.status-progress__num{color:var(--cyan-400)}
.site-header[data-shrunk] .header-status{max-height:0;opacity:0}

/* ---------- 6. 页脚 ---------- */
.site-footer{background:var(--ink-900);color:var(--paper-050);border-top:4px solid var(--signal-500);margin-top:clamp(48px,8vw,120px)}
.footer-top{padding:clamp(48px,6vw,72px) 0 clamp(32px,4vw,48px);border-bottom:1px solid var(--ink-700);background-image:radial-gradient(rgba(215,220,230,.12) 1px,transparent 1px);background-size:22px 22px}
.footer-top__inner{display:grid;grid-template-columns:minmax(260px,1.1fr) 2fr;gap:clamp(32px,5vw,64px)}
.footer-brand__mark{display:inline-block;margin-bottom:16px;padding:5px 9px;border:1px solid var(--ink-600);font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;color:var(--cyan-400)}
.footer-brand__name{font-family:var(--font-display);font-weight:900;font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.08;letter-spacing:.02em;color:var(--paper-000)}
.footer-brand__note{margin-top:10px;font-size:14px;color:var(--line-400)}
.footer-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;padding:5px 10px;border:1px solid var(--ink-600);background:rgba(255,255,255,.03);color:var(--line-200)}
.footer-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.footer-col__title{margin-bottom:14px;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-400)}
.footer-col__list li + li{margin-top:10px}
.footer-col__link{font-size:15px;color:var(--line-200);border-bottom:1px solid transparent;transition:color .18s var(--ease),border-color .18s var(--ease)}
.footer-col__link:hover{color:var(--paper-000);border-bottom-color:var(--signal-500)}
.footer-contact{padding:clamp(20px,3vw,28px) 0;background:var(--ink-700);border-bottom:1px solid var(--ink-700)}
.footer-contact__inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px 24px}
.footer-contact__item{display:flex;flex-direction:column;gap:4px}
.footer-contact__key{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--line-400)}
.footer-contact__val{font-family:var(--font-mono);font-size:14px;letter-spacing:.02em;color:var(--paper-000)}
.footer-contact__note{grid-column:1/-1;font-size:13px;color:var(--line-200)}
.footer-legal{padding:18px 0 28px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--line-400)}
.footer-legal__inner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px}
.footer-legal__links{display:flex;flex-wrap:wrap;gap:18px;margin-left:auto}
.footer-legal__links a:hover{color:var(--cyan-400)}

/* ---------- 7. 通用组件 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px;border:1px solid var(--ink-900);border-radius:2px;
  background:var(--paper-000);color:var(--ink-900);
  font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease);
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--line-200)}
.btn--primary{background:var(--signal-500);border-color:var(--signal-500);color:#fff}
.btn--primary:hover{box-shadow:4px 4px 0 var(--ink-900)}
.btn--dark{background:var(--ink-900);border-color:var(--ink-900);color:var(--paper-000)}
.btn--dark:hover{box-shadow:4px 4px 0 var(--line-400)}
.btn--ghost{background:transparent;border-color:var(--line-200)}
.btn--ghost-light{background:transparent;border-color:var(--ink-600);color:var(--paper-050)}
.btn--ghost-light:hover{box-shadow:4px 4px 0 var(--ink-600)}
.btn--sm{padding:9px 15px;font-size:12px}
.btn--block{width:100%}
.btn-group{display:flex;flex-wrap:wrap;gap:12px}

.badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid var(--line-200);border-radius:2px;
  background:var(--paper-000);color:var(--ink-700);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
}
.badge--cyan{border-color:rgba(34,216,203,.5);background:rgba(34,216,203,.08);color:var(--cyan-700)}
.badge--signal{border-color:rgba(255,106,43,.5);background:rgba(255,106,43,.08);color:var(--signal-700)}
.badge--violet{border-color:rgba(122,92,255,.5);background:rgba(122,92,255,.08);color:var(--violet-700)}
.badge--dark{background:var(--ink-700);border-color:var(--ink-700);color:var(--line-200)}

.chip-group{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid var(--line-200);border-radius:999px;
  background:var(--paper-000);color:var(--text-700);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.chip:hover{border-color:var(--ink-700);color:var(--ink-900)}
.chip[aria-pressed="true"]{background:var(--ink-900);border-color:var(--ink-900);color:var(--paper-000)}

.label-tag{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  padding:5px 11px;border:1px solid var(--line-200);border-radius:2px 2px 2px 0;
  background:var(--paper-000);color:var(--ink-900);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.label-tag::before{content:"";width:6px;height:6px;background:var(--signal-500)}
.label-tag--cyan::before{background:var(--cyan-400)}
.label-tag--violet::before{background:var(--violet-500)}
.label-tag--dark{background:var(--ink-700);border-color:var(--ink-600);color:var(--line-200)}
.label-tag--dark::before{background:var(--cyan-400)}

.data-band{background:var(--ink-900);color:var(--paper-050);padding:clamp(28px,4vw,48px) 0;border-block:1px solid var(--ink-700)}
.data-band__inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px 28px}
.stat{display:flex;flex-direction:column;gap:6px;padding-left:18px;border-left:2px solid var(--ink-700)}
.stat__value{font-family:var(--font-mono);font-size:clamp(1.75rem,4vw,2.75rem);font-weight:700;line-height:1.05;letter-spacing:-.01em;color:var(--paper-000);font-variant-numeric:tabular-nums}
.stat__value--signal{color:var(--signal-500)}
.stat__value--cyan{color:var(--cyan-400)}
.stat__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--line-400)}

.card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  padding:24px;background:var(--paper-000);border:1px solid var(--line-200);border-radius:var(--radius);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-1)}
.card__index{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--signal-500)}
.card__title{font-family:var(--font-display);font-weight:800;font-size:1.25rem;line-height:1.25;color:var(--ink-900)}
.card__body{font-size:15px;line-height:1.7;color:var(--text-700)}
.card__foot{margin-top:auto;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--line-400)}
.card--dark{background:var(--ink-900);border-color:var(--ink-700)}
.card--dark .card__title{color:var(--paper-000)}
.card--dark .card__body{color:var(--line-200)}

.tabs{position:relative}
.tabs__list{position:relative;display:flex;border-bottom:1px solid var(--line-200);overflow-x:auto;scrollbar-width:thin}
.tabs__tab{
  position:relative;z-index:1;flex:0 0 auto;padding:14px 20px;white-space:nowrap;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--line-400);
  transition:color .18s var(--ease);
}
.tabs__tab:hover{color:var(--ink-900)}
.tabs__tab[aria-selected="true"]{color:var(--ink-900);font-weight:700}
.tabs__ink{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--signal-500);pointer-events:none;transition:transform .22s var(--ease),width .22s var(--ease)}
.tabs__panel{padding-top:24px}
.tabs__panel[hidden]{display:none}

.breadcrumbs{padding:18px 0;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--line-400)}
.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:not(:last-child)::after{content:"/";color:var(--line-200)}
.breadcrumbs a:hover{color:var(--signal-500)}

.media{position:relative;display:block;overflow:hidden;border:1px solid var(--line-200);border-radius:var(--radius);background:var(--ink-700)}
.media::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(34,216,203,.06) 1px,transparent 1px);background-size:100% 4px}
.media__img{width:100%;height:100%;object-fit:cover}
.media--16x9{aspect-ratio:16/9}
.media--4x3{aspect-ratio:4/3}
.media--1x1{aspect-ratio:1/1}
.media--21x9{aspect-ratio:21/9}
.media__cap{position:absolute;left:0;bottom:0;z-index:1;padding:6px 10px;background:var(--ink-900);color:var(--paper-050);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em}
.media-strip{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

.index-rail{position:sticky;top:132px;display:flex;flex-direction:column;gap:2px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em}
.index-rail__link{padding:8px 0 8px 14px;border-left:2px solid var(--line-200);color:var(--line-400);transition:color .18s var(--ease),border-color .18s var(--ease)}
.index-rail__link:hover{color:var(--ink-900)}
.index-rail__link[aria-current="true"]{border-left-color:var(--signal-500);color:var(--ink-900);font-weight:700}

.accordion{border-top:1px solid var(--line-200)}
.accordion__item{border-bottom:1px solid var(--line-200)}
.accordion__trigger{display:flex;align-items:baseline;gap:16px;width:100%;padding:18px 0;text-align:left;font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink-900)}
.accordion__trigger::after{content:"+";margin-left:auto;font-family:var(--font-mono);color:var(--signal-500)}
.accordion__trigger[aria-expanded="true"]::after{content:"–"}
.accordion__panel{padding:0 0 20px;font-size:15px;line-height:1.7;color:var(--text-700)}
.accordion__panel[hidden]{display:none}

/* ---------- 8. 动效 ---------- */
.js-reveal [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .5s var(--ease)}
.js-reveal [data-reveal].is-visible{opacity:1;transform:none}

/* ---------- 9. 响应式 ---------- */
@media (min-width:1440px){
  .frame-rail{display:flex}
}
@media (max-width:1279px){
  .site-nav__link{padding:0 14px;font-size:14px}
}
@media (max-width:1199px){
  .header-stat{display:none}
}
@media (max-width:1023px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .col-3,.col-5,.col-6,.col-7,.col-9{grid-column:span 12}
  .footer-top__inner{grid-template-columns:1fr}
  .nav-toggle{display:inline-flex}
  .header-tools .btn--primary{display:none}
  .site-nav{
    position:fixed;top:0;right:0;bottom:0;width:min(340px,86vw);z-index:70;
    display:flex;flex-direction:column;align-items:stretch;
    padding:88px 0 24px;background:var(--ink-900);border-left:1px solid var(--ink-700);
    overflow-y:auto;visibility:hidden;transform:translateX(100%);
    transition:transform .28s var(--ease),visibility .28s linear;
  }
  .site-nav[data-open]{visibility:visible;transform:translateX(0)}
  .site-nav__list{flex-direction:column;align-items:stretch}
  .site-nav__item{display:block}
  .site-nav__link{padding:15px 24px;border-right:0;border-bottom:1px solid var(--ink-700);color:var(--line-200);font-size:16px;font-weight:600}
  .site-nav__item:first-child .site-nav__link{border-left:0}
  .site-nav__link:hover{background:var(--ink-700);color:var(--paper-000)}
  .site-nav__link[aria-current="page"]{color:var(--paper-000);background:var(--ink-700)}
  .site-nav__link[aria-current="page"]::after{left:0;right:auto;top:0;bottom:0;width:3px;height:auto}
  .site-nav__link[aria-current="page"]::before{display:none}
  .site-nav__foot{display:block}
  .status-progress__track{width:120px}
}
@media (max-width:767px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .grid--split{grid-template-columns:1fr}
  .stack-2,.stack-3{margin-left:0}
  .header-bar__inner{min-height:64px}
  .brand__note{display:none}
  .footer-nav{grid-template-columns:1fr 1fr}
  .footer-legal__links{margin-left:0}
  .status-text{display:none}
}
@media (max-width:479px){
  :root{--gutter:16px}
  .btn{padding:11px 16px;font-size:12px}
  .footer-nav{grid-template-columns:1fr}
}

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