/* ===========================================================
   宝威看台 BV — /assets/site.css
   共享外壳：重置 / 变量 / 排版 / 页头 / 页脚 / 通用组件
   =========================================================== */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input{font:inherit;color:inherit;background:none;border:0}
img,svg,video{display:block;max-width:100%}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--bv-signal);outline-offset:3px;border-radius:1px}

/* ---------- 2. Tokens ---------- */
:root{
  --bv-deep:#0C2B26;
  --bv-night:#071A17;
  --bv-step:#12433B;
  --bv-signal:#2FF3D6;
  --bv-track:#FF6B35;
  --bv-track-soft:#FFB08A;
  --bv-chalk:#F6F2E8;
  --bv-grid:#D7DCD4;
  --bv-mist:#7E948C;
  --bv-mist-lit:#9FB5AD;
  --bv-ink:#101613;

  --bv-hair:rgba(215,220,212,.16);
  --bv-hair-strong:rgba(215,220,212,.34);
  --bv-signal-soft:rgba(47,243,214,.09);

  --bv-rail:88px;
  --bv-gutter:24px;
  --bv-pad:clamp(20px,5vw,72px);

  --font-display:"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-num:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono","Courier New",monospace;

  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- 3. Base typography ---------- */
body{
  background:var(--bv-deep);
  color:var(--bv-chalk);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.85;
  letter-spacing:.01em;
  min-height:100vh;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.14;
  letter-spacing:.03em;
}
h1{font-size:clamp(30px,4.6vw,58px)}
h2{font-size:clamp(24px,3.2vw,38px)}
h3{font-size:clamp(19px,2.2vw,24px);line-height:1.3}
h4{font-size:18px;line-height:1.4}
p{max-width:64ch}
strong{font-weight:800;color:var(--bv-signal)}
::selection{background:var(--bv-signal);color:var(--bv-ink)}
#main-content{display:block;scroll-margin-top:112px}
@media (min-width:1024px){
  body{padding-left:var(--bv-rail)}
}

/* ---------- 4. Utilities ---------- */
.wrap{width:100%;max-width:1440px;margin:0 auto;padding-left:var(--bv-pad);padding-right:var(--bv-pad)}
.wrap--tight{max-width:980px}
.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}
.rule{height:1px;background:var(--bv-hair);border:0;margin:0}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-num);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bv-signal);
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;flex:0 0 auto}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.8;color:var(--bv-mist-lit);max-width:60ch}
.num{
  display:block;
  font-family:var(--font-num);font-weight:800;line-height:.9;
  letter-spacing:.02em;color:var(--bv-signal);
  font-size:clamp(44px,9vw,104px);
}
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-num);font-size:11px;letter-spacing:.16em;
  padding:4px 9px;border:1px solid rgba(47,243,214,.42);border-radius:2px;
  color:var(--bv-signal);background:var(--bv-signal-soft);white-space:nowrap;
}
.tag--track{color:var(--bv-track);border-color:rgba(255,107,53,.48);background:rgba(255,107,53,.11)}
.tag--soft{color:var(--bv-ink);background:var(--bv-track-soft);border-color:transparent}

/* ---------- 5. Layout primitives ---------- */
.section{padding:clamp(44px,7vw,96px) 0}
.section--chalk{background:var(--bv-chalk);color:var(--bv-ink)}
.section--chalk .lead{color:#3C4D46}
.section--chalk .rule{background:rgba(16,22,19,.14)}
.section--chalk h2,.section--chalk h3{color:var(--bv-ink)}
.section--chalk strong{color:#0B6B5C}
.section--night{background:var(--bv-night)}
.section--step{background:var(--bv-step)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--bv-gutter)}
.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-9{grid-column:span 9}
.span-10{grid-column:span 10}
.span-12{grid-column:span 12}

.card{
  border:1px solid var(--bv-hair);
  border-radius:2px;
  padding:22px;
  background:rgba(18,67,59,.34);
  transition:border-color .22s var(--ease),transform .22s var(--ease),background .22s var(--ease);
}
.card:hover{border-color:var(--bv-signal);transform:translateX(2px);background:rgba(18,67,59,.5)}
.section--chalk .card{background:#fff;border-color:rgba(16,22,19,.12)}
.section--chalk .card:hover{border-color:#0B6B5C}

/* 图片容器：页面阶段只放图，样式在此统一 */
.media{
  position:relative;overflow:hidden;border:1px solid var(--bv-hair);
  aspect-ratio:16/9;
  background:
    linear-gradient(135deg,rgba(47,243,214,.13),rgba(255,107,53,.12)),
    repeating-linear-gradient(45deg,rgba(215,220,212,.07) 0 1px,transparent 1px 14px),
    var(--bv-step);
}
.media--wide{aspect-ratio:21/9}
.media--square{aspect-ratio:1/1}
.media--tall{aspect-ratio:4/5}
.media--sliced{clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}
.media__img{width:100%;height:100%;object-fit:cover}
.media__caption{
  position:absolute;left:12px;bottom:12px;
  font-family:var(--font-num);font-size:11px;letter-spacing:.12em;
  color:var(--bv-chalk);background:rgba(7,26,23,.78);
  padding:4px 8px;border-left:2px solid var(--bv-signal);
}

.crumbs{
  display:flex;flex-wrap:wrap;gap:8px;
  font-family:var(--font-num);font-size:12px;letter-spacing:.1em;
  color:var(--bv-mist);
}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li::after{content:"/";margin-left:8px;color:rgba(126,148,140,.55)}
.crumbs li:last-child::after{content:"";margin:0}
.crumbs a{color:var(--bv-mist-lit);border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease)}
.crumbs a:hover{color:var(--bv-signal);border-bottom-color:var(--bv-signal)}

.reveal{opacity:0;transform:translateY(12px);transition:opacity .26s var(--ease),transform .26s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- 6. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 16px;border-radius:2px;
  font-size:13px;font-weight:700;letter-spacing:.08em;
  border:1px solid transparent;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.btn--signal{background:var(--bv-signal);color:var(--bv-ink)}
.btn--signal:hover{background:var(--bv-track);color:#1A0A04;transform:translateX(2px)}
.btn--ghost{border-color:var(--bv-hair-strong);color:var(--bv-chalk)}
.btn--ghost:hover{border-color:var(--bv-signal);color:var(--bv-signal);transform:translateX(2px)}
.btn--track{background:var(--bv-track);color:#1A0A04}
.btn--track:hover{background:var(--bv-track-soft);transform:translateX(2px)}

/* ---------- 7. Header ---------- */
.site-header{position:sticky;top:0;z-index:80;background:var(--bv-deep)}
.skip-link{
  position:absolute;left:14px;top:-90px;z-index:200;
  padding:10px 16px;border-radius:2px;
  background:var(--bv-signal);color:var(--bv-ink);
  font-size:13px;font-weight:800;letter-spacing:.08em;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:12px}

.status-strip{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:7px var(--bv-pad);
  background:var(--bv-night);
  border-bottom:1px solid var(--bv-hair);
  font-size:12px;line-height:1.5;letter-spacing:.08em;
  color:var(--bv-mist-lit);
}
.status-strip__lede{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-num);letter-spacing:.14em;color:var(--bv-chalk);
}
.status-strip__pulse{
  width:6px;height:6px;border-radius:50%;flex:0 0 auto;
  background:var(--bv-signal);box-shadow:0 0 0 3px rgba(47,243,214,.16);
}
.status-strip__meta{color:var(--bv-mist);letter-spacing:.1em}

.topbar{
  display:flex;align-items:center;gap:16px;
  padding:12px var(--bv-pad);
  background:rgba(12,43,38,.94);
  border-bottom:1px solid var(--bv-hair);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.topbar__lede{
  display:none;
  font-family:var(--font-num);font-size:12px;letter-spacing:.2em;
  color:var(--bv-mist);white-space:nowrap;margin-right:auto;
}
.topbar__tools{display:flex;align-items:center;gap:12px;margin-left:auto}

.brand{display:inline-flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.brand__mark{font-family:var(--font-num);font-weight:800;font-size:19px;letter-spacing:.12em;color:var(--bv-signal)}
.brand__name{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:.08em;color:var(--bv-chalk)}
.brand__sub{font-family:var(--font-num);font-size:10px;letter-spacing:.22em;color:var(--bv-mist)}

.navfilter{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border:1px solid var(--bv-hair-strong);border-radius:2px;
  background:rgba(7,26,23,.55);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.navfilter:focus-within{border-color:var(--bv-signal);box-shadow:0 0 0 1px rgba(47,243,214,.35)}
.navfilter__label{
  font-family:var(--font-num);font-size:10px;letter-spacing:.18em;
  color:var(--bv-mist-lit);white-space:nowrap;
}
.navfilter__input{width:118px;font-size:13px;letter-spacing:.04em;color:var(--bv-chalk)}
.navfilter__input::placeholder{color:rgba(159,181,173,.55)}
.navfilter__input:focus-visible{outline:none}

.navtoggle{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border:1px solid var(--bv-hair-strong);border-radius:2px;
  font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--bv-chalk);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.navtoggle__bars{position:relative;width:16px;height:10px;flex:0 0 auto;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.navtoggle__bars::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:currentColor;transform:translateY(-50%)}
.navtoggle:hover,.navtoggle[aria-expanded="true"]{border-color:var(--bv-signal);color:var(--bv-signal)}

/* ---------- 8. Rail navigation ---------- */
.rail{
  position:fixed;top:0;left:0;bottom:0;z-index:90;
  width:var(--bv-rail);
  display:flex;flex-direction:column;align-items:center;
  gap:4px;padding:16px 0 20px;
  background:var(--bv-night);
  border-right:1px solid var(--bv-hair);
  overflow-y:auto;overflow-x:hidden;
}
.rail__brand{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  width:100%;padding:10px 0 16px;
  border-bottom:1px solid var(--bv-hair);
  color:var(--bv-chalk);
  transition:color .2s var(--ease);
}
.rail__brand:hover{color:var(--bv-signal)}
.rail__brand-cn{writing-mode:vertical-rl;font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:.22em}
.rail__brand-en{writing-mode:vertical-rl;font-family:var(--font-num);font-size:10px;letter-spacing:.3em;color:var(--bv-signal)}

.rail__list{display:flex;flex-direction:column;width:100%;gap:2px;margin-top:6px}
.rail__item{width:100%}
.rail__link{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:11px 4px;width:100%;
  color:var(--bv-mist-lit);
  border-left:3px solid transparent;
  transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.rail__code{font-family:var(--font-num);font-size:10px;letter-spacing:.1em;color:var(--bv-mist);transition:color .2s var(--ease)}
.rail__text{writing-mode:vertical-rl;font-size:13px;font-weight:600;letter-spacing:.18em}
.rail__link:hover{color:var(--bv-chalk);background:var(--bv-signal-soft);transform:translateX(2px)}
.rail__link:hover .rail__code{color:var(--bv-signal)}
.rail__link[aria-current="page"]{
  color:var(--bv-signal);
  background:var(--bv-signal-soft);
  border-left-color:var(--bv-signal);
}
.rail__link[aria-current="page"] .rail__code{color:var(--bv-signal)}
.rail__link.is-filtered{display:none}
.rail__note{
  display:none;
  padding:12px 8px;text-align:center;
  font-size:11px;letter-spacing:.12em;color:var(--bv-track-soft);
}
.rail[data-empty="true"] .rail__note{display:block}
.rail__progress{position:absolute;top:0;right:0;bottom:0;width:2px;background:rgba(215,220,212,.09)}
.rail__progress-fill{
  display:block;width:100%;height:0;
  background:linear-gradient(180deg,var(--bv-signal),var(--bv-track));
}

.scrim{display:none;position:fixed;inset:0;z-index:110;background:rgba(4,15,13,.66)}

/* ---------- 9. Mobile / tablet header ---------- */
@media (min-width:1024px){
  .topbar__lede{display:block}
  .brand{display:none}
  .navtoggle{display:none}
}
@media (max-width:1023px){
  body[data-nav-open="true"]{overflow:hidden}
  .rail{
    top:0;bottom:0;left:0;right:auto;
    width:min(308px,84vw);
    align-items:stretch;gap:0;
    padding:22px 0 28px;
    background:var(--bv-night);
    border-right:1px solid rgba(47,243,214,.24);
    box-shadow:24px 0 60px rgba(0,0,0,.5);
    transform:translateX(-104%);
    transition:transform .28s var(--ease);
    z-index:120;
  }
  .rail[data-open="true"]{transform:translateX(0)}
  .rail__brand{
    flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;
    padding:6px 20px 16px;
  }
  .rail__brand-cn{writing-mode:horizontal-tb;font-size:17px;letter-spacing:.14em}
  .rail__brand-en{writing-mode:horizontal-tb;letter-spacing:.26em}
  .rail__list{margin-top:8px}
  .rail__link{flex-direction:row;align-items:center;gap:14px;padding:14px 20px}
  .rail__text{writing-mode:horizontal-tb;font-size:15px;letter-spacing:.1em}
  .rail__code{font-size:11px}
  .rail__link:hover{transform:none}
  .rail__progress{display:none}
  .rail__note{padding:16px 20px;text-align:left}
  .scrim[data-open="true"]{display:block}
}
@media (max-width:720px){
  .status-strip__meta{display:none}
  .navfilter__label{display:none}
  .navfilter__input{width:92px}
  .navfilter{padding:6px 8px}
  .btn--signal{padding:8px 12px;font-size:12px}
  .navtoggle__text{display:none}
}

/* ---------- 10. Footer ---------- */
.site-footer{
  position:relative;overflow:hidden;
  background:var(--bv-night);
  border-top:1px solid var(--bv-hair-strong);
  padding:clamp(40px,6vw,72px) 0 26px;
  color:var(--bv-chalk);
}
.site-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(215,220,212,.06) 1px,transparent 1px),
    linear-gradient(0deg,rgba(215,220,212,.06) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 72%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 72%);
}
.footer__inner{
  position:relative;z-index:1;
  width:100%;max-width:1440px;margin:0 auto;
  padding:0 var(--bv-pad);
}
.footer__top{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-bottom:22px;border-bottom:1px solid var(--bv-hair);
}
.footer__wordmark{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(26px,4.6vw,44px);line-height:1.05;letter-spacing:.04em;
  color:var(--bv-chalk);
}
.footer__tagline{margin-top:10px;font-size:15px;letter-spacing:.04em;color:var(--bv-mist-lit);max-width:34ch}
.footer__stamp{
  flex:0 0 auto;
  font-family:var(--font-num);font-size:11px;letter-spacing:.24em;
  color:var(--bv-signal);white-space:nowrap;
}
.footer__grid{
  display:grid;grid-template-columns:1fr;gap:30px;
  padding:32px 0;border-bottom:1px solid var(--bv-hair);
}
.footer__heading{
  font-family:var(--font-num);font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--bv-mist);margin-bottom:14px;
}
.footer__list{display:flex;flex-direction:column;gap:9px}
.footer__link{
  display:inline-block;width:fit-content;
  font-size:15px;color:var(--bv-chalk);
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.footer__link:hover{color:var(--bv-signal);border-bottom-color:var(--bv-signal)}
.footer__contact-line{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  margin-bottom:10px;font-size:14px;line-height:1.7;color:var(--bv-chalk);
}
.footer__contact-key{
  flex:0 0 auto;
  font-family:var(--font-num);font-size:10px;letter-spacing:.18em;
  color:var(--bv-signal);background:var(--bv-signal-soft);
  border:1px solid rgba(47,243,214,.28);border-radius:2px;
  padding:2px 6px;
}
.footer__note{
  margin-top:14px;max-width:34ch;
  font-size:12px;letter-spacing:.06em;color:var(--bv-mist);
  padding-left:10px;border-left:2px solid rgba(255,107,53,.5);
}
.footer__legal{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  padding-top:20px;
  font-family:var(--font-num);font-size:12px;letter-spacing:.08em;
  color:var(--bv-mist);
}
.footer__legal-line{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:0}
@media (min-width:760px){
  .footer__grid{grid-template-columns:1.1fr 1fr 1.4fr;gap:40px}
}
@media (max-width:759px){
  .footer__top{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ---------- 11. Responsive grid ---------- */
@media (max-width:900px){
  .span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9,.span-10{grid-column:1/-1}
  .grid{gap:18px}
}

/* ---------- 12. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
  .card:hover,.btn:hover,.rail__link:hover,.rail__brand:hover{transform:none}
  .rail{transition:none}
}