/* =========================================================
   伟德赛场 · weide-sprint.com.cn
   共享样式表 /assets/site.css
   ========================================================= */

/* ---------- 1. 变量 ---------- */
:root{
  --ink-blue:#0A1B33;
  --night:#12294A;
  --pulse:#B6FF3F;
  --pulse-soft:#DDFFA6;
  --orange:#FF6B2C;
  --stone:#565C63;
  --moss:#6E8F58;
  --clay:#C06B45;
  --paper:#F4F1E8;
  --ink:#101418;
  --line:#28405F;
  --steel:#8B98A8;

  --shell-width:1240px;
  --gutter:clamp(20px,4vw,48px);
  --radius:4px;
  --ease:cubic-bezier(.2,.7,.3,1);

  --font-sans:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","Roboto Mono","SFMono-Regular",Menlo,Consolas,"Courier New",monospace;
}

/* ---------- 2. reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:110px;
}
body{
  margin:0;
  background:var(--ink-blue);
  color:var(--paper);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5,p,figure{margin:0;}
table{border-collapse:collapse;width:100%;}
:focus-visible{outline:2px solid var(--pulse);outline-offset:3px;border-radius:2px;}

/* ---------- 3. 排版基座 ---------- */
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.01em;}
h1{font-size:clamp(30px,5vw,56px);font-weight:900;}
h2{font-size:clamp(20px,2.4vw,30px);font-weight:800;}
h3{font-size:clamp(17px,1.8vw,21px);font-weight:700;}
h4{font-size:16px;font-weight:700;}
strong{font-weight:700;color:var(--pulse-soft);}
::selection{background:var(--pulse);color:var(--ink-blue);}

/* ---------- 4. 布局壳 ---------- */
.shell{
  width:100%;
  max-width:var(--shell-width);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.shell--narrow{max-width:880px;}

/* ---------- 5. 无障碍跳转 ---------- */
.skip-link{
  position:absolute;
  left:var(--gutter);
  top:-120px;
  z-index:120;
  display:inline-block;
  padding:10px 18px;
  background:var(--pulse);
  color:var(--ink-blue);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  border-radius:0 0 var(--radius) var(--radius);
  transition:top .2s var(--ease);
}
.skip-link:focus{top:0;}

/* ---------- 6. 页头 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--ink-blue);
}

.scroll-meter{
  position:fixed;
  left:0;top:0;
  width:100%;
  height:2px;
  z-index:90;
  pointer-events:none;
  background:rgba(40,64,95,.5);
}
.scroll-meter__bar{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,var(--pulse),var(--orange));
  transition:width .12s linear;
}

/* 上层品牌说明行 */
.header-top{
  max-height:90px;
  overflow:hidden;
  background:var(--night);
  border-bottom:1px solid var(--line);
  transition:max-height .3s var(--ease),opacity .3s var(--ease);
}
.site-header[data-condensed] .header-top{
  max-height:0;
  opacity:0;
}
.header-top__inner{
  display:flex;
  align-items:center;
  gap:clamp(14px,2.4vw,32px);
  min-height:44px;
  padding-block:6px;
}
.brand-line{
  font-size:12px;
  letter-spacing:.14em;
  color:var(--pulse-soft);
  font-weight:500;
  margin-right:auto;
}
.utility-line{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--steel);
}
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.header-actions .btn{padding:7px 14px;font-size:12px;}

/* 下层品牌 + 导航行 */
.header-main{
  position:relative;
  background:var(--ink-blue);
  border-bottom:1px solid var(--line);
}
.header-main__inner{
  display:flex;
  align-items:center;
  gap:clamp(14px,3vw,40px);
  min-height:72px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}
.brand__mark{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  background:var(--pulse);
  color:var(--ink-blue);
  font-size:18px;
  font-weight:900;
  border-radius:2px 2px 12px 2px;
  box-shadow:0 0 0 1px rgba(182,255,63,.35);
}
.brand__text{display:flex;flex-direction:column;line-height:1.15;}
.brand__name{
  font-size:17px;
  font-weight:900;
  letter-spacing:.08em;
  color:var(--paper);
}
.brand__sub{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.26em;
  color:var(--pulse);
}

/* 导航 */
.site-nav{margin-left:auto;}
.site-nav__list{
  display:flex;
  align-items:center;
  gap:clamp(2px,1.2vw,12px);
}
.site-nav__link{
  position:relative;
  display:inline-block;
  padding:9px 12px;
  border-radius:var(--radius);
  font-size:13.5px;
  letter-spacing:.08em;
  color:rgba(244,241,232,.72);
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.site-nav__link::after{
  content:"";
  position:absolute;
  left:12px;right:12px;bottom:4px;
  height:2px;
  background:var(--pulse);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .22s var(--ease);
}
.site-nav__link:hover{
  color:var(--paper);
  background:rgba(182,255,63,.08);
}
.site-nav__link:hover::after{transform:scaleX(1);}
.site-nav__link[aria-current="page"]{
  color:var(--pulse);
  background:rgba(182,255,63,.12);
  box-shadow:inset 3px 0 0 var(--pulse);
}
.site-nav__link[aria-current="page"]::after{transform:scaleX(1);}

/* 移动端开关 */
.nav-toggle{display:none;}
.nav-toggle__bars{
  position:relative;
  display:block;
  width:16px;
  height:2px;
  background:currentColor;
  border-radius:2px;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:"";
  position:absolute;
  left:0;
  width:16px;
  height:2px;
  background:currentColor;
  border-radius:2px;
  transition:transform .22s var(--ease);
}
.nav-toggle__bars::before{top:-5px;}
.nav-toggle__bars::after{top:5px;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-5px) rotate(-45deg);}

/* 返回顶部 */
.to-top{
  position:fixed;
  right:clamp(16px,3vw,32px);
  bottom:clamp(18px,3vw,32px);
  z-index:70;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:var(--night);
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--pulse);
  font-size:16px;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s,background-color .2s var(--ease),border-color .2s var(--ease);
}
.to-top[data-visible]{opacity:1;visibility:visible;transform:none;}
.to-top:hover{background:rgba(182,255,63,.14);border-color:var(--pulse);}

/* ---------- 7. 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 20px;
  border:1px solid transparent;
  border-radius:var(--radius);
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.1em;
  cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .18s var(--ease),box-shadow .2s var(--ease);
}
.btn:active{transform:translateY(1px);}
.btn--primary{
  background:var(--pulse);
  color:var(--ink-blue);
  box-shadow:0 10px 26px -14px rgba(182,255,63,.95);
}
.btn--primary:hover{background:var(--pulse-soft);}
.btn--ghost{
  background:transparent;
  color:var(--pulse-soft);
  border-color:var(--line);
}
.btn--ghost:hover{
  color:var(--pulse);
  border-color:var(--pulse);
  background:rgba(182,255,63,.08);
}
.btn--paper{
  background:var(--paper);
  color:var(--ink);
}
.btn--paper:hover{background:#fff;}
.btn:disabled,
.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;box-shadow:none;}

/* ---------- 8. 标签 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:2px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  line-height:1.5;
  white-space:nowrap;
}
.tag--pulse{background:rgba(182,255,63,.14);color:var(--pulse);border:1px solid rgba(182,255,63,.4);}
.tag--orange{background:rgba(255,107,44,.16);color:#FFB489;border:1px solid rgba(255,107,44,.45);}
.tag--moss{background:var(--moss);color:#0A1B33;border:1px solid var(--moss);}
.tag--clay{background:var(--clay);color:var(--paper);border:1px solid var(--clay);}
.tag--stone{background:rgba(86,92,99,.3);color:#C6CBD1;border:1px solid var(--stone);}

/* ---------- 9. 面板 ---------- */
.panel{
  position:relative;
  background:var(--night);
  border:1px solid var(--line);
  border-radius:var(--radius);
  clip-path:polygon(0 18px,18px 0,100% 0,100% 100%,0 100%);
}
.panel__head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px 0;
}
.panel__title{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--pulse);
}
.panel__body{padding:14px 20px 20px;}

/* ---------- 10. 数字 ---------- */
.data-num{
  display:block;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(28px,4vw,48px);
  letter-spacing:.02em;
  line-height:1.05;
  color:var(--pulse);
}
.data-label{
  display:block;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--steel);
}
.sec-num{
  display:block;
  font-family:var(--font-mono);
  font-weight:200;
  font-size:clamp(72px,12vw,160px);
  line-height:.85;
  letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(182,255,63,.5);
}

/* ---------- 11. 纸面与正文 ---------- */
.paper-block{
  background:var(--paper);
  color:var(--ink);
  border-radius:var(--radius);
  border:2px solid rgba(16,20,24,.08);
  box-shadow:0 18px 40px -30px rgba(10,27,51,.9);
}
.paper-block .data-label{color:var(--stone);}
.paper-block a:hover{color:var(--clay);}
.prose{
  max-width:68ch;
  font-size:16.5px;
  line-height:1.8;
  color:inherit;
}
.prose p + p{margin-top:1em;}
.prose h2,.prose h3{margin-top:1.6em;margin-bottom:.5em;}
.prose ul,.prose ol{margin:1em 0;padding-left:1.2em;list-style:disc;}
.prose li + li{margin-top:.4em;}
.prose a{
  color:var(--pulse);
  text-decoration:underline;
  text-underline-offset:3px;
}
.paper-block .prose a{color:var(--clay);}
.prose code{
  font-family:var(--font-mono);
  font-size:.92em;
  padding:2px 6px;
  border-radius:2px;
  background:rgba(86,92,99,.14);
}

/* ---------- 12. 网格 ---------- */
.grid{display:grid;gap:clamp(16px,2vw,24px);}
.grid--split{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);}
.grid--even{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--thirds{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--quarters{grid-template-columns:repeat(4,minmax(0,1fr));}

/* ---------- 13. 图片容器 ---------- */
.media{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(140deg,#1B3A61 0%,#12294A 48%,#0A1B33 100%);
}
.media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(10,27,51,.22) 0 1px,transparent 1px 4px);
  opacity:.55;
}
.media__frame{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
}
.media--tall .media__frame{aspect-ratio:3/4;}
.media--square .media__frame{aspect-ratio:1/1;}
.media__img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.92) contrast(1.06);
}
.media__cap{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:12px 14px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.12em;
  color:var(--pulse-soft);
  background:linear-gradient(0deg,rgba(10,27,51,.9),rgba(10,27,51,0));
}

/* ---------- 14. 面包屑 ---------- */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--steel);
}
.breadcrumb__item{color:var(--stone);}
.breadcrumb__item a:hover{color:var(--pulse);}
.breadcrumb__sep{color:var(--line);}
.breadcrumb__item[aria-current="page"]{color:var(--pulse);}

/* ---------- 15. 章节索引轨道 ---------- */
.index-rail{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.14em;
}
.index-rail__link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-left:2px solid var(--line);
  color:var(--steel);
  transition:color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease);
}
.index-rail__link:hover{
  color:var(--paper);
  border-left-color:var(--pulse);
  background:rgba(182,255,63,.07);
}
.index-rail__link[aria-current="true"]{
  color:var(--pulse);
  border-left-color:var(--pulse);
  background:rgba(182,255,63,.12);
}

/* ---------- 16. 显形动效 ---------- */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .42s var(--ease),transform .42s var(--ease);
}
.reveal.is-visible{opacity:1;transform:none;}

/* ---------- 17. 页脚 ---------- */
.site-footer{
  position:relative;
  margin-top:clamp(48px,7vw,96px);
  background:var(--ink-blue);
  border-top:1px solid var(--line);
  overflow:hidden;
}
.footer-rule{
  height:6px;
  background:repeating-linear-gradient(90deg,var(--pulse) 0 18px,transparent 18px 34px,var(--orange) 34px 42px,transparent 42px 78px);
  opacity:.72;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,48px);
  padding:clamp(38px,5.5vw,72px) 0 clamp(28px,4vw,48px);
}
.footer-brand{display:flex;flex-direction:column;gap:14px;}
.footer-tagline{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  color:var(--pulse);
}
.footer-note{
  max-width:34ch;
  font-size:13.5px;
  line-height:1.75;
  color:var(--steel);
}
.footer-contact{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:6px;
  border-top:1px dashed var(--line);
}
.footer-contact__row{
  display:flex;
  gap:10px;
  font-size:12.5px;
  line-height:1.65;
}
.footer-contact__k{
  flex:0 0 4.8em;
  color:var(--stone);
  letter-spacing:.08em;
}
.footer-contact__v{
  color:rgba(244,241,232,.88);
  word-break:break-word;
}
.footer-contact__v--mono{font-family:var(--font-mono);letter-spacing:.02em;}
.footer-contact__note{
  font-size:12px;
  color:var(--stone);
  letter-spacing:.06em;
}
.footer-col{display:flex;flex-direction:column;}
.footer-col__title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--paper);
}
.footer-col__title::before{
  content:"";
  width:14px;
  height:2px;
  background:var(--pulse);
  flex:0 0 auto;
}
.footer-col__list li + li{margin-top:10px;}
.footer-link{
  display:inline-block;
  font-size:13.5px;
  color:var(--steel);
  transition:color .2s var(--ease),transform .2s var(--ease);
}
.footer-link:hover{color:var(--pulse);transform:translateX(4px);}
.footer-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 24px;
  padding:22px 0 34px;
  border-top:1px solid var(--line);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--stone);
}
.footer-legal__seo{margin-left:auto;color:var(--stone);}
.footer-legal__year{font-family:var(--font-mono);color:var(--steel);}

/* ---------- 18. 响应式 ---------- */
@media (max-width:1200px){
  .header-actions .btn--ghost{display:none;}
}
@media (max-width:1100px){
  .utility-line{display:none;}
  .grid--split,
  .grid--thirds,
  .grid--quarters{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-brand{grid-column:1 / -1;}
  .footer-legal__seo{margin-left:0;}
}
@media (max-width:960px){
  .header-top{display:none;}
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-left:auto;
    padding:10px 14px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    font-size:12px;
    font-weight:700;
    letter-spacing:.16em;
    color:var(--pulse);
    background:rgba(182,255,63,.06);
    transition:background-color .2s var(--ease),border-color .2s var(--ease);
  }
  .nav-toggle:hover{background:rgba(182,255,63,.14);border-color:var(--pulse);}
  .header-main__inner{min-height:64px;}
  .site-nav{
    position:absolute;
    left:0;right:0;top:100%;
    margin-left:0;
    max-height:0;
    overflow:hidden;
    visibility:hidden;
    background:var(--night);
    border-bottom:2px solid var(--pulse);
    transition:max-height .34s var(--ease),visibility .34s var(--ease);
  }
  .site-nav[data-open]{
    max-height:min(72vh,560px);
    overflow-y:auto;
    visibility:visible;
  }
  .site-nav__list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px var(--gutter) 22px;
  }
  .site-nav__link{
    display:block;
    padding:15px 12px;
    border-bottom:1px solid var(--line);
    font-size:15px;
    letter-spacing:.1em;
    border-radius:0;
  }
  .site-nav__link::after{display:none;}
  .site-nav__link[aria-current="page"]{
    box-shadow:inset 3px 0 0 var(--pulse);
    background:rgba(182,255,63,.14);
  }
  html{scroll-padding-top:80px;}
}
@media (max-width:720px){
  .grid--even,
  .grid--thirds,
  .grid--quarters,
  .grid--split{grid-template-columns:minmax(0,1fr);}
  .footer-grid{grid-template-columns:minmax(0,1fr);}
  .brand__mark{width:34px;height:34px;font-size:16px;}
  .brand__name{font-size:15.5px;}
  .footer-contact__row{flex-direction:column;gap:2px;}
  .footer-contact__k{flex:none;}
  .to-top{bottom:16px;right:16px;}
}

/* ---------- 19. 降低动态效果 ---------- */
@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;}
  .scroll-meter__bar{transition:none;}
}