/* ==========================================================================
   乐思体育 · 共享样式表  /assets/site.css
   墨绿夜色 × 沙金 × 信号橙 —— 框架式导航 + 纵向叙事长卷
   ========================================================================== */

/* ---------- 1. 变量 ---------- */
:root{
  --night:#0B1F1A;
  --night-2:#14332B;
  --gobi:#1F4D3F;
  --sand:#C9A227;
  --sand-soft:#E8D9A8;
  --signal:#FF5A1F;
  --signal-deep:#C23E0C;
  --slate:#2B3A45;
  --slate-soft:#6B7C88;
  --paper:#F4F1E8;
  --paper-2:#E6E1D3;
  --ink:#0E1412;

  --paper-80:rgba(244,241,232,.80);
  --paper-62:rgba(244,241,232,.62);
  --paper-48:rgba(244,241,232,.48);
  --sand-44:rgba(201,162,39,.44);
  --sand-24:rgba(201,162,39,.24);
  --ink-18:rgba(14,20,18,.18);
  --ink-10:rgba(14,20,18,.10);

  --font-title:"Noto Sans SC Condensed","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,"Roboto Mono","IBM Plex Mono",SFMono-Regular,Menlo,Consolas,"Courier New",monospace;

  --frame-w:272px;
  --gutter:20px;
  --maxw:1180px;
  --r:2px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  word-break:break-word;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video,canvas{display:block;max-width:100%}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
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;border-spacing:0;width:100%}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
::selection{background:var(--sand);color:var(--night)}
body.is-nav-open{overflow:hidden}

/* ---------- 3. 跳转链接 ---------- */
.skip-link{
  position:absolute;
  left:12px;
  top:-72px;
  z-index:200;
  background:var(--signal);
  color:#fff;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.06em;
  padding:10px 18px;
  border-radius:var(--r);
  transition:top .15s linear;
}
.skip-link:focus{top:12px}

/* ---------- 4. 页头 · 框架式导航 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background:var(--night);
  color:var(--paper);
  border-bottom:1px solid var(--night-2);
}

.ticker{
  display:flex;
  align-items:center;
  gap:12px;
  padding:7px var(--gutter);
  background:var(--night-2);
  border-bottom:1px solid var(--sand-24);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  line-height:1.6;
}
.ticker__label{color:var(--sand);white-space:nowrap;flex:0 0 auto}
.ticker__text{
  color:var(--paper-62);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  flex:0 1 auto;
}
.ticker__rule{flex:1 1 auto;height:1px;min-width:16px;background:var(--sand-44)}

.frame{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px var(--gutter) 12px;
}
.frame__brand{display:flex;align-items:baseline;gap:12px;min-width:0}

.brand{display:flex;flex-direction:column;gap:1px;min-width:0}
.brand__mark{
  font-family:var(--font-title);
  font-weight:800;
  font-size:21px;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--paper);
  transition:color .15s linear;
}
.brand__note{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--paper-48);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand:hover .brand__mark{color:var(--sand)}
.season-badge{display:none}

.nav-toggle{
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex:0 0 auto;
  padding:9px 13px;
  border:1px solid var(--sand-44);
  border-radius:var(--r);
  color:var(--sand-soft);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  transition:border-color .15s linear,color .15s linear,background .15s linear;
}
.nav-toggle:hover{border-color:var(--sand);color:var(--sand)}
.nav-toggle__bars{position:relative;display:inline-block;width:16px;height:10px}
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:"";
  position:absolute;
  left:0;right:0;
  height:1.5px;
  background:currentColor;
  transition:transform .18s linear;
}
.nav-toggle__bars::before{top:0}
.nav-toggle__bars::after{bottom:0}
.site-header[data-open] .nav-toggle{border-color:var(--sand);color:var(--sand)}
.site-header[data-open] .nav-toggle__bars::before{transform:translateY(4px) rotate(45deg)}
.site-header[data-open] .nav-toggle__bars::after{transform:translateY(-4px) rotate(-45deg)}

.site-nav{
  display:none;
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  z-index:70;
  background:var(--night);
  padding:104px 0 40px;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.site-header[data-open] .site-nav{display:block}

.site-nav__list{display:grid;gap:0;padding:0 var(--gutter)}
.site-nav__item{border-bottom:1px solid rgba(244,241,232,.08)}
.site-nav__link{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:14px 4px 14px 12px;
  border-left:2px solid transparent;
  color:var(--paper-80);
  transition:color .18s linear,border-color .18s linear,padding-left .18s linear;
}
.site-nav__num{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--slate-soft);
  flex:0 0 auto;
  transition:color .18s linear;
}
.site-nav__label{font-size:16px;line-height:1.4}
.site-nav__link:hover{
  color:var(--paper);
  border-left-color:var(--sand-44);
  padding-left:16px;
}
.site-nav__link:hover .site-nav__num{color:var(--sand-soft)}
.site-nav__link[aria-current="page"]{
  color:var(--sand);
  border-left-color:var(--sand);
  padding-left:16px;
}
.site-nav__link[aria-current="page"] .site-nav__num{color:var(--sand)}

.nav-utility{
  display:grid;
  gap:8px;
  margin-top:22px;
  padding:20px var(--gutter) 0;
  border-top:1px solid var(--night-2);
}
.nav-utility__link{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-align:center;
  padding:9px 10px;
  border:1px solid var(--sand-44);
  border-radius:var(--r);
  color:var(--sand-soft);
  transition:background .15s linear,color .15s linear,border-color .15s linear;
}
.nav-utility__link:hover{background:var(--sand);border-color:var(--sand);color:var(--night)}

.progress{
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:var(--sand-24);
  z-index:5;
}
.progress__bar{display:block;height:100%;width:0;background:var(--sand)}

/* ---------- 5. 页脚 ---------- */
.site-footer{
  position:relative;
  margin-top:72px;
  background:var(--night);
  color:var(--paper);
}
.footer__band{position:relative;height:3px;background:var(--sand)}
.footer__band::after{
  content:"";
  position:absolute;
  left:0;top:0;
  width:88px;height:100%;
  background:var(--signal);
}

.footer__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:48px var(--gutter) 34px;
  display:grid;
  gap:36px;
  grid-template-columns:minmax(0,1fr);
}
.footer__brand{min-width:0}
.footer__mark{
  display:inline-block;
  font-family:var(--font-title);
  font-weight:800;
  font-size:28px;
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--paper);
  transition:color .15s linear;
}
.footer__mark:hover{color:var(--sand)}
.footer__note{
  margin-top:6px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--paper-48);
}
.footer__season{
  display:inline-block;
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--sand);
  border:1px solid var(--sand-44);
  padding:3px 8px;
  border-radius:var(--r);
}

.footer__cols{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.footer__title{
  font-family:var(--font-mono);
  font-weight:400;
  font-size:12px;
  letter-spacing:.12em;
  color:var(--sand);
  padding-bottom:8px;
  margin-bottom:12px;
  border-bottom:1px solid var(--sand-24);
}
.footer__list{display:grid;gap:9px}
.footer__link{
  display:inline-block;
  font-size:14px;
  line-height:1.6;
  color:var(--paper-80);
  border-bottom:1px solid transparent;
  transition:color .15s linear,border-color .15s linear;
}
.footer__link:hover{color:var(--sand);border-bottom-color:var(--sand)}

.footer__meta{
  max-width:var(--maxw);
  margin:0 auto;
  padding:24px var(--gutter) 30px;
  border-top:1px solid rgba(244,241,232,.12);
  display:grid;
  gap:9px;
}
.footer__fact,
.footer__contact,
.footer__service,
.footer__rhythm{font-size:13px;line-height:1.75;color:var(--paper-62)}
.footer__fact{color:var(--sand-soft)}

.footer__base{
  max-width:var(--maxw);
  margin:0 auto;
  padding:16px var(--gutter) 36px;
  border-top:1px solid rgba(244,241,232,.12);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 24px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--slate-soft);
}

/* ---------- 6. 正文容器与通用组件 ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:760px}

.breadcrumb{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em}
.breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.breadcrumb__item{display:flex;align-items:center;gap:8px;color:var(--slate-soft)}
.breadcrumb__item + .breadcrumb__item::before{content:"/";color:var(--sand);opacity:.7}
.breadcrumb__link{color:var(--slate-soft);transition:color .15s linear}
.breadcrumb__link:hover{color:var(--signal-deep)}
.breadcrumb__current{color:var(--ink)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 20px;
  border:1px solid transparent;
  border-radius:var(--r);
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.08em;
  line-height:1.2;
  cursor:pointer;
  transition:background .15s linear,color .15s linear,border-color .15s linear;
}
.btn--primary{background:var(--signal);border-color:var(--signal);color:#fff}
.btn--primary:hover{background:var(--signal-deep);border-color:var(--signal-deep)}
.btn--sand{background:var(--sand);border-color:var(--sand);color:var(--night)}
.btn--sand:hover{background:var(--sand-soft);border-color:var(--sand-soft)}
.btn--ghost{border-color:currentColor;color:inherit;background:transparent}
.btn--ghost:hover{border-color:var(--sand);color:var(--sand)}

.section-head{
  display:flex;
  flex-direction:column;
  gap:8px;
  border-top:2px solid var(--sand);
  padding-top:14px;
  margin-bottom:28px;
}
.section-head__num{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--sand);
}
.section-head__title{
  font-family:var(--font-title);
  font-weight:800;
  font-size:clamp(26px,3.4vw,40px);
  line-height:1.14;
  letter-spacing:-.01em;
  color:var(--ink);
}
.section-head__note{font-size:16px;line-height:1.75;color:var(--slate);max-width:34em}

.card{
  background:#fff;
  border:1px solid var(--ink-18);
  border-radius:var(--r);
  transition:border-color .18s linear;
}
.card:hover{border-color:var(--sand)}
.card__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--ink-10);
}
.card__title{
  font-family:var(--font-title);
  font-weight:700;
  font-size:18px;
  line-height:1.3;
  letter-spacing:-.01em;
}
.card__body{padding:16px}
.card__foot{
  padding:12px 16px;
  border-top:1px solid var(--ink-10);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--slate-soft);
}

.grid{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
.grid--2,.grid--3,.grid--12{grid-template-columns:minmax(0,1fr)}

.data-table{font-family:var(--font-mono);font-size:13px;letter-spacing:.02em}
.data-table thead th{
  background:var(--slate);
  color:var(--paper);
  font-weight:400;
  font-size:12px;
  letter-spacing:.08em;
  text-align:left;
  padding:10px 12px;
  white-space:nowrap;
}
.data-table tbody td{
  padding:11px 12px;
  border-bottom:1px solid var(--ink-10);
  vertical-align:top;
}
.data-table tbody tr:nth-child(even){background:var(--paper-2)}
.data-table tbody tr:hover{background:rgba(201,162,39,.16)}
.data-table .num{text-align:right;color:var(--signal-deep);font-weight:700;white-space:nowrap}

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 8px;
  border:1px solid var(--ink-18);
  border-radius:var(--r);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  line-height:1.5;
  color:var(--slate);
  white-space:nowrap;
}
.tag--sand{background:var(--sand-soft);border-color:var(--sand);color:#4A3905}
.tag--signal{border-color:var(--signal);color:var(--signal-deep)}
.tag--dark{background:var(--gobi);border-color:var(--gobi);color:var(--paper)}
.tag--night{background:var(--night);border-color:var(--night);color:var(--sand)}

.stat{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:56px;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--signal);
}

.media{--media-ratio:4/3;display:block;margin:0}
.media__frame{
  position:relative;
  aspect-ratio:var(--media-ratio);
  overflow:hidden;
  background:var(--gobi);
  border:1px solid var(--night-2);
  border-radius:var(--r);
}
.media__frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(
    135deg,
    rgba(201,162,39,.16) 0 1px,
    transparent 1px 14px
  );
  opacity:.65;
}
.media__img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s linear;
}
.media:hover .media__img{transform:scale(1.02)}
.media__caption{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  line-height:1.6;
  color:var(--slate-soft);
}
.media--wide{--media-ratio:16/9}
.media--banner{--media-ratio:21/9}
.media--square{--media-ratio:1/1}
.media--tall{--media-ratio:3/4}

.prose{max-width:34em;font-size:17px;line-height:1.8;color:var(--ink)}
.prose p + p{margin-top:1.1em}
.prose h2{
  font-family:var(--font-title);
  font-weight:700;
  font-size:24px;
  line-height:1.3;
  letter-spacing:-.01em;
  margin:1.8em 0 .6em;
}
.prose h3{
  font-family:var(--font-title);
  font-weight:700;
  font-size:19px;
  line-height:1.35;
  margin:1.5em 0 .5em;
}
.prose ul{margin:1em 0;padding-left:1.1em}
.prose ul li{position:relative;padding-left:1em;margin-bottom:.45em}
.prose ul li::before{content:"—";position:absolute;left:0;color:var(--sand)}
.prose ol{margin:1em 0;padding-left:1.6em;list-style:decimal}
.prose ol li{margin-bottom:.45em}
.prose blockquote{
  margin:1.2em 0;
  padding-left:1em;
  border-left:2px solid var(--sand);
  color:var(--slate);
}
.prose code{
  font-family:var(--font-mono);
  font-size:.9em;
  background:var(--paper-2);
  padding:.1em .35em;
  border-radius:var(--r);
}
.prose a{
  color:var(--signal-deep);
  text-decoration:underline;
  text-underline-offset:.3em;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(194,62,12,.45);
  transition:color .15s linear,text-decoration-color .15s linear,text-underline-offset .15s linear;
}
.prose a:hover{color:var(--ink);text-decoration-color:var(--ink);text-underline-offset:.45em}

.note{
  max-width:44em;
  padding:14px 18px;
  border-left:3px solid var(--sand);
  background:var(--paper-2);
  font-size:15px;
  line-height:1.75;
  color:var(--slate);
}
.divider{height:1px;border:0;margin:40px 0;background:var(--ink-10)}
.mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--slate-soft)}

/* ---------- 7. 平板 ---------- */
@media (min-width:768px){
  :root{--gutter:28px}
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .footer__cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer__inner{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:48px}
  .stat{font-size:76px}
}

/* ---------- 8. 桌面 · 固定框架栏 ---------- */
@media (min-width:1024px){
  :root{--gutter:36px}
  body{padding-left:var(--frame-w)}

  .site-header{
    position:fixed;
    top:0;left:0;bottom:0;
    width:var(--frame-w);
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    border-bottom:0;
    border-right:1px solid var(--night-2);
  }

  .ticker{
    flex-wrap:wrap;
    gap:6px 12px;
    padding:12px 20px;
  }
  .ticker__text{white-space:normal;flex:1 1 100%}
  .ticker__rule{flex:1 1 100%;min-width:0}

  .frame{
    display:block;
    padding:26px 20px 22px;
    border-bottom:1px solid var(--night-2);
  }
  .frame__brand{display:block}
  .brand__mark{font-size:26px}
  .brand__note{margin-top:5px;font-size:12px}
  .season-badge{
    display:inline-block;
    margin-top:16px;
    padding:3px 8px;
    border:1px solid var(--sand-44);
    border-radius:var(--r);
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.1em;
    color:var(--sand);
  }
  .nav-toggle{display:none}

  .site-nav,
  .site-header[data-open] .site-nav{
    position:static;
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    padding:20px 0 28px;
    background:transparent;
    overflow:visible;
  }
  .site-nav__list{padding:0 12px}
  .site-nav__item{border-bottom:1px solid rgba(244,241,232,.07)}
  .site-nav__link{padding:13px 4px 13px 12px}
  .site-nav__label{font-size:15px}

  .nav-utility{
    margin-top:auto;
    padding:22px 16px 0;
  }

  .progress{
    left:auto;top:0;bottom:0;right:0;
    width:2px;height:auto;
  }
  .progress__bar{width:100%;height:0}

  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer__inner{padding:64px var(--gutter) 40px}
  .stat{font-size:96px}
  .prose{font-size:18px}
}

/* ---------- 9. 无障碍 · 减少动效 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .media:hover .media__img{transform:none}
}