/* ==========================================================================
   宝威体育 · 全站共享样式 /assets/site.css
   骨架：左侧常驻品牌轨道 + 右侧连续画布
   色彩：夜墨绿画布 / 荧光青锚点 / 琥珀关键数字
   ========================================================================== */

/* ---------- 1. 设计变量 ---------- */
:root{
  /* 色彩 */
  --ink-900:#061713;
  --ink-800:#0B241D;
  --ink-700:#12332A;
  --ink-600:#1B4135;
  --mint:#35E0BE;
  --mint-soft:#8CF2DC;
  --amber:#FFB43A;
  --rose:#FF6E6E;
  --haze:#9DB6AE;
  --paper:#EAF6F1;
  --line:rgba(140,242,220,.14);
  --line-strong:rgba(140,242,220,.30);
  --mint-wash:rgba(53,224,190,.08);
  --on-mint:#04140F;

  /* 字体角色 */
  --font-display:"Arial Narrow","Helvetica Neue Condensed","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono","Courier New",monospace;

  /* 骨架尺寸 */
  --rail-w:clamp(216px,19vw,272px);
  --wrap:1180px;
  --r-xl:30px;
  --r-lg:20px;
  --r-md:14px;
  --pill:999px;

  /* 动效 */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:220ms;
}

/* ---------- 2. 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,li,dl,dd,figure,blockquote,fieldset{
  margin:0;
  padding:0;
}

ul,ol{list-style:none}

a{
  color:inherit;
  text-decoration:none;
}

img,svg,video{
  display:block;
  max-width:100%;
}

button{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
}

address{font-style:normal}

:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:3px;
}

/* ---------- 3. 页面基础与中文排版 ---------- */
body{
  min-height:100vh;
  padding-left:var(--rail-w);
  background:var(--ink-900);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  font-stretch:90%;
  letter-spacing:-.02em;
  line-height:1.12;
  color:var(--paper);
}

p{max-width:74ch}

strong{font-weight:700;color:var(--paper)}

::selection{
  background:var(--mint);
  color:var(--on-mint);
}

/* ---------- 4. 布局容器 ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 clamp(18px,4vw,48px);
}

.section{
  position:relative;
  padding:clamp(44px,6vw,88px) 0;
}

.section--deep{background:var(--ink-800)}

.section--panel{
  background:linear-gradient(180deg,var(--ink-800) 0%,var(--ink-900) 100%);
}

.rule{
  height:1px;
  border:0;
  background:linear-gradient(90deg,var(--line-strong) 0%,rgba(140,242,220,0) 100%);
}

.page-head{
  position:relative;
  padding:clamp(34px,5vw,70px) 0 clamp(20px,3vw,36px);
}

.page-head__inner{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:840px;
}

.section-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:clamp(20px,3vw,36px);
}

/* ---------- 5. 文字角色 ---------- */
.h-display{
  font-family:var(--font-display);
  font-weight:800;
  font-stretch:87.5%;
  font-size:clamp(40px,7.4vw,88px);
  line-height:1.02;
  letter-spacing:-.032em;
}

.h-section{
  font-family:var(--font-display);
  font-weight:700;
  font-stretch:90%;
  font-size:clamp(27px,4vw,40px);
  line-height:1.1;
  letter-spacing:-.024em;
}

.h-sub{
  font-family:var(--font-display);
  font-weight:600;
  font-stretch:92%;
  font-size:clamp(19px,2.3vw,24px);
  line-height:1.28;
  letter-spacing:-.014em;
}

.lead{
  font-size:clamp(17px,1.45vw,19px);
  line-height:1.75;
  color:var(--haze);
  max-width:62ch;
}

.muted{
  font-size:14px;
  line-height:1.75;
  color:var(--haze);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mint);
}

.eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--mint);
  opacity:.7;
}

.num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:-.01em;
}

/* ---------- 6. 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 22px;
  border:1px solid transparent;
  border-radius:var(--pill);
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.btn--accent{
  background:var(--mint);
  color:var(--on-mint);
  box-shadow:0 10px 26px rgba(53,224,190,.20);
}

.btn--accent:hover{
  background:var(--mint-soft);
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(53,224,190,.26);
}

.btn--ghost{
  border-color:var(--line-strong);
  color:var(--paper);
}

.btn--ghost:hover{
  border-color:var(--mint);
  color:var(--mint);
}

.btn--quiet{
  padding:8px 4px;
  color:var(--mint-soft);
}

.btn--quiet:hover{color:var(--mint)}

/* ---------- 7. 标签与筛选 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border:1px solid var(--line-strong);
  border-radius:var(--pill);
  background:var(--mint-wash);
  color:var(--mint-soft);
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.04em;
  line-height:1.5;
  white-space:nowrap;
}

.tag--amber{
  border-color:rgba(255,180,58,.42);
  background:rgba(255,180,58,.09);
  color:var(--amber);
}

.tag--rose{
  border-color:rgba(255,110,110,.42);
  background:rgba(255,110,110,.09);
  color:var(--rose);
}

.tag--plain{
  border-color:var(--line);
  background:transparent;
  color:var(--haze);
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.chip{
  padding:8px 17px;
  border:1px solid var(--line-strong);
  border-radius:var(--pill);
  background:transparent;
  color:var(--haze);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.4;
  cursor:pointer;
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.chip:hover{
  color:var(--paper);
  border-color:var(--mint-soft);
}

.chip[aria-pressed="true"]{
  background:var(--mint);
  border-color:var(--mint);
  color:var(--on-mint);
  font-weight:600;
}

/* ---------- 8. 网格与面板 ---------- */
.grid{
  display:grid;
  gap:clamp(16px,2.4vw,26px);
}

.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--asym{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}

.panel{
  padding:clamp(20px,3vw,32px);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:var(--ink-800);
}

.panel--soft{
  background:var(--ink-700);
  border-color:transparent;
}

/* ---------- 9. 数据块 ---------- */
.stat-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.stat{
  flex:1 1 132px;
  min-width:118px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--ink-700);
}

.stat__k{
  display:block;
  margin-bottom:10px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--haze);
  line-height:1.4;
}

.stat__v{
  display:block;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(24px,3vw,34px);
  font-weight:700;
  line-height:1;
  color:var(--paper);
}

.stat--mint .stat__v{color:var(--mint)}
.stat--amber .stat__v{color:var(--amber)}
.stat--rose .stat__v{color:var(--rose)}

/* ---------- 10. 时间轴轨道 ---------- */
.timeline{
  position:relative;
  padding-left:28px;
}

.timeline::before{
  content:"";
  position:absolute;
  left:5px;
  top:10px;
  bottom:10px;
  width:1px;
  background:var(--line-strong);
}

.timeline__item{
  position:relative;
  padding-bottom:24px;
}

.timeline__item:last-child{padding-bottom:0}

.timeline__item::before{
  content:"";
  position:absolute;
  left:-28px;
  top:7px;
  width:11px;
  height:11px;
  border:2px solid var(--mint);
  border-radius:50%;
  background:var(--ink-900);
}

.timeline__k{
  display:block;
  margin-bottom:4px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mint);
}

.timeline__t{
  font-size:16.5px;
  color:var(--paper);
}

/* ---------- 11. 面包屑 ---------- */
.crumbs{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.05em;
  color:var(--haze);
}

.crumbs ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
}

.crumbs li{
  display:flex;
  align-items:center;
  gap:9px;
}

.crumbs li:not(:last-child)::after{
  content:"/";
  color:rgba(140,242,220,.34);
}

.crumbs a{color:var(--mint-soft)}
.crumbs a:hover{color:var(--mint)}
.crumbs [aria-current="page"]{color:var(--paper)}

/* ---------- 12. 媒体容器（图片占位基础） ---------- */
.media{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  aspect-ratio:16 / 9;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:
    radial-gradient(120% 120% at 18% 0%,rgba(53,224,190,.15),rgba(6,23,19,0) 58%),
    linear-gradient(150deg,var(--ink-700) 0%,var(--ink-800) 100%);
}

.media__img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.82) contrast(1.04) brightness(.94);
}

.media__grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(140,242,220,.10) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(140,242,220,.10) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(125% 95% at 72% 8%,#000 5%,transparent 76%);
  mask-image:radial-gradient(125% 95% at 72% 8%,#000 5%,transparent 76%);
}

.media__cap{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:16px 20px 14px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.04em;
  line-height:1.6;
  color:var(--mint-soft);
  background:linear-gradient(0deg,rgba(6,23,19,.94),rgba(6,23,19,0));
}

.media--wide{aspect-ratio:21 / 9}
.media--tall{aspect-ratio:4 / 5}
.media--square{aspect-ratio:1 / 1}

/* ---------- 13. 返回顶部 ---------- */
.to-top{
  position:fixed;
  right:clamp(16px,3vw,34px);
  bottom:clamp(16px,3vw,34px);
  z-index:70;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border:1px solid var(--line-strong);
  border-radius:50%;
  background:rgba(11,36,29,.92);
  color:var(--mint);
  font-family:var(--font-mono);
  font-size:15px;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.to-top:hover{border-color:var(--mint)}

/* ---------- 14. 跳过链接 ---------- */
.skip-link{
  position:fixed;
  top:12px;
  left:12px;
  z-index:200;
  padding:10px 20px;
  border-radius:var(--pill);
  background:var(--mint);
  color:var(--on-mint);
  font-size:14px;
  font-weight:600;
  transform:translateY(-220%);
  transition:transform var(--dur) var(--ease);
}

.skip-link:focus{
  transform:translateY(0);
}

/* ==========================================================================
   15. 站点头部：左侧常驻品牌轨道
   ========================================================================== */
.site-rail{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  z-index:60;
  width:var(--rail-w);
  display:flex;
  flex-direction:column;
  gap:26px;
  padding:28px 20px 22px;
  overflow-y:auto;
  background:linear-gradient(180deg,var(--ink-800) 0%,var(--ink-900) 100%);
  border-right:1px solid var(--line);
}

.site-rail::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(130% 55% at 100% 0%,rgba(53,224,190,.12),rgba(6,23,19,0) 62%),
    repeating-linear-gradient(180deg,rgba(140,242,220,.045) 0 1px,rgba(6,23,19,0) 1px 46px);
}

.site-rail > *{
  position:relative;
  z-index:1;
}

.rail-top{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
}

.brand-mark{
  flex:0 0 36px;
  width:36px;
  height:36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:3px;
  padding-left:9px;
  border-radius:12px;
  background:linear-gradient(150deg,var(--mint) 0%,#1E9E82 100%);
  box-shadow:0 0 0 1px rgba(53,224,190,.32),0 10px 24px rgba(53,224,190,.16);
}

.brand-mark__bar{
  display:block;
  height:2px;
  border-radius:2px;
  background:var(--ink-900);
}

.brand-mark__bar:nth-child(1){width:14px}
.brand-mark__bar:nth-child(2){width:9px}
.brand-mark__bar:nth-child(3){width:17px}

.brand-text{
  display:flex;
  flex-direction:column;
  gap:1px;
}

.brand-name{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  font-stretch:90%;
  letter-spacing:-.01em;
  line-height:1.2;
  color:var(--paper);
}

.brand-suffix{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--haze);
}

/* 移动导航按钮 */
.nav-toggle{
  display:none;
  align-items:center;
  gap:10px;
  padding:9px 16px;
  border:1px solid var(--line-strong);
  border-radius:var(--pill);
  color:var(--paper);
  font-size:14px;
  line-height:1.3;
  cursor:pointer;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}

.nav-toggle:hover{border-color:var(--mint);color:var(--mint)}

.nav-toggle__lines{
  display:grid;
  gap:5px;
  width:17px;
}

.nav-toggle__lines i{
  display:block;
  height:2px;
  border-radius:2px;
  background:var(--mint);
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
}

[data-nav-toggle][aria-expanded="true"] .nav-toggle__lines i:first-child{
  transform:translateY(3.5px) rotate(45deg);
}

[data-nav-toggle][aria-expanded="true"] .nav-toggle__lines i:last-child{
  transform:translateY(-3.5px) rotate(-45deg);
}

/* 主导航 */
.rail-nav{
  flex:1 1 auto;
  min-height:0;
}

.rail-nav__list{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.rail-nav a{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 14px 11px 17px;
  border-radius:var(--r-lg);
  color:var(--haze);
  font-size:15px;
  line-height:1.4;
  transition:
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.rail-nav a::before{
  content:"";
  position:absolute;
  left:5px;
  top:50%;
  width:3px;
  height:0;
  border-radius:3px;
  background:var(--mint);
  transform:translateY(-50%);
  transition:height var(--dur) var(--ease);
}

.rail-nav a:hover{
  color:var(--paper);
  background:var(--ink-700);
}

.rail-nav a:hover::before{height:16px}

.rail-nav a[aria-current="page"]{
  background:var(--mint);
  color:var(--on-mint);
  font-weight:600;
}

.rail-nav a[aria-current="page"]::before{height:0}

.rail-nav a[aria-current="page"] .rail-nav__idx{opacity:.72}

.rail-nav__idx{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  opacity:.66;
}

.rail-nav__label{
  min-width:0;
  overflow-wrap:anywhere;
}

/* 轨道底部 */
.rail-foot{
  display:flex;
  flex-direction:column;
  gap:13px;
  padding-top:20px;
  border-top:1px solid var(--line);
}

.rail-cta{width:100%}

.rail-note{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.03em;
  line-height:1.65;
  color:var(--haze);
  max-width:none;
}

/* ==========================================================================
   16. 站点页脚
   ========================================================================== */
.site-foot{
  position:relative;
  margin-top:clamp(48px,7vw,96px);
  padding:clamp(36px,5vw,64px) 0 28px;
  background:linear-gradient(180deg,var(--ink-900) 0%,var(--ink-800) 100%);
  border-top:1px solid var(--line);
  font-size:14.5px;
  line-height:1.75;
}

.site-foot::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,rgba(53,224,190,0) 0%,rgba(53,224,190,.55) 32%,rgba(53,224,190,0) 100%);
}

.foot-top{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,2fr);
  gap:clamp(24px,4vw,64px);
}

.foot-ident{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.foot-brand{
  font-family:var(--font-display);
  font-size:clamp(24px,3vw,30px);
  font-weight:800;
  font-stretch:88%;
  letter-spacing:-.028em;
  line-height:1.1;
  color:var(--paper);
}

.foot-ident__line{
  color:var(--mint-soft);
  font-size:14.5px;
  line-height:1.7;
  max-width:32ch;
}

.foot-ident__meta{
  color:var(--haze);
  font-size:13.5px;
  line-height:1.7;
  max-width:32ch;
}

.foot-cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,3vw,36px);
}

.foot-col{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.foot-col__title{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.5;
  color:var(--mint);
}

.foot-col__list{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.foot-col__list a{
  color:var(--haze);
  font-size:14.5px;
  transition:color var(--dur) var(--ease);
}

.foot-col__list a:hover{
  color:var(--mint);
}

.foot-contact{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(14px,2.4vw,32px);
  margin-top:clamp(28px,4vw,44px);
  padding-top:clamp(20px,3vw,28px);
  border-top:1px solid var(--line);
}

.foot-contact__cell{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.foot-contact__k{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--haze);
}

.foot-contact__addr{
  color:var(--paper);
  font-size:14.5px;
  line-height:1.7;
}

.foot-contact__link{
  color:var(--mint-soft);
  font-size:14.5px;
  overflow-wrap:anywhere;
  transition:color var(--dur) var(--ease);
}

.foot-contact__link:hover{
  color:var(--mint);
  text-decoration:underline;
  text-underline-offset:4px;
}

.foot-note{
  margin-top:16px;
  color:var(--haze);
  font-size:13px;
  line-height:1.75;
  max-width:70ch;
}

.foot-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 24px;
  margin-top:clamp(24px,3vw,36px);
  padding-top:20px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.03em;
  color:var(--haze);
}

.foot-legal__line,
.foot-legal__year{
  max-width:none;
}

.foot-legal__links{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-left:auto;
}

.foot-legal__links a{
  color:var(--haze);
  transition:color var(--dur) var(--ease);
}

.foot-legal__links a:hover{
  color:var(--mint);
}

/* ==========================================================================
   17. 进入视口显现
   ========================================================================== */
.has-reveal [data-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity 520ms var(--ease),transform 520ms var(--ease);
}

.has-reveal [data-reveal].is-in{
  opacity:1;
  transform:none;
}

.has-reveal [data-reveal][data-reveal-delay="1"]{transition-delay:80ms}
.has-reveal [data-reveal][data-reveal-delay="2"]{transition-delay:160ms}
.has-reveal [data-reveal][data-reveal-delay="3"]{transition-delay:240ms}

/* ==========================================================================
   18. 响应式
   ========================================================================== */
@media (max-width:1080px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:960px){
  body{padding-left:0}

  .site-rail{
    position:sticky;
    top:0;
    bottom:auto;
    left:0;
    right:0;
    width:100%;
    height:auto;
    gap:0;
    padding:13px 16px;
    overflow:visible;
    background:rgba(6,23,19,.94);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .site-rail::before{display:none}

  .rail-top{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:14px;
  }

  .nav-toggle{display:inline-flex}

  .rail-nav{
    flex:none;
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height 300ms var(--ease),opacity 200ms var(--ease);
  }

  .site-rail[data-open="true"] .rail-nav{
    max-height:66vh;
    opacity:1;
    overflow-y:auto;
    padding:14px 0 6px;
  }

  .rail-nav a{
    padding:13px 14px;
    font-size:16px;
    border-radius:var(--r-md);
  }

  .rail-foot{display:none}

  .site-rail[data-open="true"] .rail-foot{
    display:flex;
    padding-top:16px;
    margin-top:6px;
  }

  .foot-top{grid-template-columns:minmax(0,1fr)}

  .foot-legal__links{
    margin-left:0;
    width:100%;
  }
}

@media (max-width:860px){
  .grid--2,
  .grid--3,
  .grid--asym{grid-template-columns:minmax(0,1fr)}

  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}

  .foot-contact{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:640px){
  body{font-size:16px}

  .grid--4{grid-template-columns:minmax(0,1fr)}

  .stat{flex:1 1 calc(50% - 6px);min-width:0}

  .foot-cols{grid-template-columns:minmax(0,1fr)}

  .media{border-radius:var(--r-lg)}

  .timeline{padding-left:24px}

  .timeline__item::before{left:-24px}
}

/* ==========================================================================
   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;
    scroll-behavior:auto !important;
  }

  .has-reveal [data-reveal]{
    opacity:1;
    transform:none;
  }

  .to-top{
    transform:none;
  }
}