/* ===========================================================
   新宝体育主站 — 共享样式表 /assets/site.css
   夜场墨底 · 复古出版对比 · 霓虹竞技强调
   =========================================================== */

/* ---------- 1. 令牌 ---------- */
:root{
  --night:#0D0A18;
  --board:#16112A;
  --paper:#F4EDDE;
  --ash:#C6BAA6;
  --violet:#7B5CFF;
  --violet-deep:#3A2A7A;
  --turf:#2FC77A;
  --odds:#FF5A2B;
  --amber:#FFB020;
  --line:#2C2440;

  --ink-on-paper:#180F2E;
  --paper-line:#DDD2BB;

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

  --maxw:1240px;
  --gutter:clamp(1rem,4vw,2.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. 重置 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--night);
}
body,h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;margin:0;padding:0}
img,svg,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
a{color:inherit}
table{border-collapse:collapse;width:100%}
hr{border:0;height:1px;background:var(--line);margin:0}

/* ---------- 3. 页面基底 ---------- */
body{
  font-family:var(--font-sans);
  font-size:clamp(1rem,.96rem + .2vw,1.125rem);
  font-weight:400;
  line-height:1.75;
  color:var(--paper);
  background-color:var(--night);
  background-image:
    radial-gradient(760px 540px at 8% -4%,rgba(123,92,255,.20),transparent 68%),
    radial-gradient(900px 640px at 96% 4%,rgba(58,42,122,.44),transparent 72%),
    radial-gradient(680px 540px at 74% 104%,rgba(47,199,122,.12),transparent 74%),
    linear-gradient(to right,rgba(44,36,64,.40) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(44,36,64,.40) 1px,transparent 1px);
  background-size:auto,auto,auto,72px 72px,72px 72px;
  min-height:100vh;
  overflow-x:hidden;
}
::selection{background:var(--violet);color:#fff}
#main-content{display:block}

/* ---------- 4. 排版 ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-sans);
  font-weight:800;
  line-height:.94;
  letter-spacing:-.03em;
  color:var(--paper);
}
h1{font-size:clamp(2.6rem,8.5vw,7.2rem);line-height:.9}
h2{font-size:clamp(1.6rem,3.6vw,3rem);line-height:1}
h3{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.2;letter-spacing:-.015em}
h4{font-size:1.05rem;line-height:1.35;letter-spacing:0}
p{line-height:1.75}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);
  font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--violet);
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--odds);flex:none}

.lede{font-size:clamp(1.02rem,1.3vw,1.28rem);line-height:1.65;color:var(--ash);max-width:32em}

.prose{max-width:40em}
.prose p{margin-bottom:1.1em}
.prose p:last-child{margin-bottom:0}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 1.1em}
.prose li{margin-bottom:.4em}

.num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  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;
}

/* ---------- 5. 布局 ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:820px}
.section{padding-block:clamp(2.5rem,6vw,5rem)}
.rule{height:1px;background:var(--line);border:0;margin-block:clamp(1.5rem,4vw,2.5rem)}

.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2.2vw,2rem)}
.split{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(1.25rem,3vw,3rem);
  align-items:start;
}
.rail{position:sticky;top:148px;align-self:start}

/* ---------- 6. 面板与卡片 ---------- */
.panel{
  background:var(--board);
  border:1px solid var(--line);
  padding:clamp(1rem,2vw,1.5rem);
}
.panel--paper{
  background:var(--paper);
  color:var(--ink-on-paper);
  border-color:var(--paper-line);
}
.panel--paper h2,.panel--paper h3,.panel--paper h4{color:var(--ink-on-paper)}
.panel--paper a{color:var(--violet-deep)}
.panel--paper .lede,.panel--paper p{color:rgba(24,15,46,.78)}

.data-card{
  position:relative;
  border:1px solid var(--line);
  background:var(--board);
  padding:1rem 1.1rem;
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.data-card:hover,.data-card:focus-within{
  border-color:var(--violet);
  transform:translateY(-2px);
}
.data-card__note{
  max-height:0;opacity:0;overflow:hidden;
  font-size:.82rem;line-height:1.6;color:var(--ash);
  transition:max-height .35s var(--ease),opacity .3s var(--ease),margin-top .35s var(--ease);
}
.data-card:hover .data-card__note,
.data-card:focus-within .data-card__note{
  max-height:8rem;opacity:1;margin-top:.7rem;
}

/* ---------- 7. 数据组 ---------- */
.stat{display:flex;flex-direction:column;gap:.4rem;border-top:1px solid var(--line);padding-top:.9rem}
.stat__value{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  font-size:clamp(2rem,5vw,3.6rem);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.05em;
  color:var(--odds);
}
.stat__value--hero{font-size:clamp(2.4rem,10vw,8rem);color:var(--paper)}
.stat__value--turf{color:var(--turf)}
.stat__value--amber{color:var(--amber)}
.stat__label{
  font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);
}

/* ---------- 8. 标签与筛选 ---------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.38rem .8rem;
  font-family:var(--font-mono);
  font-size:.74rem;letter-spacing:.12em;
  color:var(--ash);
  background:rgba(22,17,42,.8);
  border:1px solid var(--line);
  cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.chip:hover{color:var(--paper);border-color:var(--violet)}
.chip[aria-pressed="true"],.chip.is-active{
  color:var(--paper);
  border-color:var(--violet);
  background:rgba(123,92,255,.22);
  box-shadow:inset 0 -2px 0 var(--odds);
}

/* ---------- 9. 时间轴 ---------- */
.timeline{
  display:flex;
  gap:clamp(.9rem,2vw,1.5rem);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:.9rem;
  scrollbar-color:var(--violet-deep) transparent;
}
.timeline__item{
  flex:0 0 min(78vw,320px);
  scroll-snap-align:start;
  border-left:1px solid var(--line);
  padding-left:1rem;
  transition:border-color .3s var(--ease);
}
.timeline__item:hover{border-color:var(--amber)}

/* ---------- 10. 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.78rem 1.4rem;
  font-size:.9rem;font-weight:700;letter-spacing:.06em;
  text-decoration:none;
  border:1px solid var(--violet);
  color:var(--paper);
  background:transparent;
  cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{background:rgba(123,92,255,.18);transform:translateY(-1px)}
.btn--primary{background:var(--odds);border-color:var(--odds);color:#1B0A05}
.btn--primary:hover{background:var(--amber);border-color:var(--amber);color:#1B0A05}
.btn--ghost{border-color:var(--line);color:var(--ash)}
.btn--ghost:hover{border-color:var(--violet);color:var(--paper);background:rgba(123,92,255,.12)}

/* ---------- 11. 面包屑 ---------- */
.breadcrumb{padding-block:1rem;border-bottom:1px solid var(--line)}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;list-style:none;margin:0;padding:0}
.breadcrumb li{
  font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
  display:flex;align-items:center;gap:.55rem;
}
.breadcrumb li+li::before{content:"/";color:var(--violet)}
.breadcrumb a{text-decoration:none;color:var(--ash);transition:color .25s var(--ease)}
.breadcrumb a:hover{color:var(--paper)}
.breadcrumb [aria-current="page"]{color:var(--amber)}

/* ---------- 12. 媒体容器 ---------- */
.media{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  background:var(--board);
  border:1px solid var(--line);
}
.media--tilt{transform:rotate(-1.2deg)}
.media--tilt:hover{transform:rotate(-.4deg)}
.media__img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) contrast(1.06) brightness(.92);
  transition:transform .6s var(--ease);
}
.media:hover .media__img{transform:scale(1.03)}
.media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,10,24,.06) 0%,rgba(13,10,24,.28) 55%,rgba(13,10,24,.72) 100%);
}
.media__watermark{
  position:absolute;right:.7rem;bottom:.4rem;z-index:2;
  font-family:var(--font-mono);
  font-size:clamp(1.6rem,4vw,3rem);
  font-weight:700;letter-spacing:-.06em;
  color:rgba(244,237,222,.44);
  pointer-events:none;
}

/* ---------- 13. 页头 ---------- */
.skip-link{
  position:absolute;left:var(--gutter);top:-120px;z-index:120;
  padding:.7rem 1.1rem;
  background:var(--odds);color:#1B0A05;
  font-weight:700;font-size:.88rem;text-decoration:none;
  transition:top .22s var(--ease);
}
.skip-link:focus{top:.6rem}

.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(13,10,24,.92);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease);
}
.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
.scroll-progress i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--violet),var(--turf) 55%,var(--odds));
  transition:width .12s linear;
}

.masthead{padding-top:clamp(.85rem,2vw,1.5rem)}
.masthead__inner{
  position:relative;
  width:100%;max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(.75rem,2vw,1.5rem);
}
.masthead__utility{display:flex;align-items:center}
.masthead__utility--end{justify-content:flex-end}
.utility-link{
  font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash);text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.utility-link:hover{color:var(--paper);border-color:var(--odds)}

.brand{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  text-align:center;text-decoration:none;color:var(--paper);
}
.brand__name{
  font-size:clamp(1.5rem,3.4vw,2.6rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
  text-shadow:0 0 26px rgba(123,92,255,.35);
  transition:font-size .28s var(--ease),text-shadow .28s var(--ease);
}
.brand__tagline{
  font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ash);
  transition:opacity .25s var(--ease);
}
.brand:hover .brand__name{text-shadow:0 0 30px rgba(255,90,43,.45)}

.nav-toggle{
  display:none;
  align-items:center;gap:.55rem;
  padding:.6rem .8rem;
  border:1px solid var(--line);
  color:var(--paper);
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.nav-toggle:hover{border-color:var(--violet)}
.nav-toggle__bars{display:inline-flex;flex-direction:column;justify-content:center;gap:3px;width:16px}
.nav-toggle__bars i{display:block;height:1.5px;background:currentColor;transition:transform .25s var(--ease),opacity .2s var(--ease)}
.nav-toggle__label{font-family:var(--font-mono)}

.site-nav{
  margin-top:clamp(.7rem,1.8vw,1.1rem);
  border-top:1px solid var(--line);
}
.site-nav__list{
  display:flex;flex-wrap:wrap;justify-content:center;
  width:100%;max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.site-nav__list li{display:flex;align-items:center}
.site-nav__list li+li::before{content:"";width:1px;height:11px;background:var(--line);flex:none}
.site-nav a{
  position:relative;
  display:block;
  padding:.82rem clamp(.65rem,1.6vw,1.15rem);
  font-size:.86rem;font-weight:500;letter-spacing:.06em;
  color:var(--ash);text-decoration:none;
  transition:color .25s var(--ease),background .25s var(--ease);
}
.site-nav a:hover{color:var(--paper);background:rgba(123,92,255,.12)}
.site-nav a[aria-current="page"]{color:var(--paper);font-weight:700}
.site-nav a[aria-current="page"]::after{
  content:"";position:absolute;
  left:clamp(.65rem,1.6vw,1.15rem);
  right:clamp(.65rem,1.6vw,1.15rem);
  bottom:.32rem;height:2px;
  background:linear-gradient(90deg,var(--odds),var(--amber));
}

.site-header[data-scrolled="true"]{background:rgba(13,10,24,.97)}
.site-header[data-scrolled="true"] .masthead{padding-top:clamp(.5rem,1vw,.75rem)}
.site-header[data-scrolled="true"] .brand__name{font-size:clamp(1.05rem,1.9vw,1.5rem)}
.site-header[data-scrolled="true"] .brand__tagline{opacity:0;height:0;overflow:hidden}
.site-header[data-scrolled="true"] .site-nav{margin-top:.4rem}
.site-header[data-scrolled="true"] .site-nav a{padding-block:.55rem}

/* ---------- 14. 页脚 ---------- */
.site-footer{
  margin-top:clamp(3rem,8vw,7rem);
  border-top:1px solid var(--line);
  background:var(--board);
}
.site-footer__inner{
  width:100%;max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(2rem,5vw,3.5rem) var(--gutter) clamp(1.6rem,3vw,2.4rem);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);
  gap:clamp(1.5rem,4vw,3.5rem);
}
.site-footer__brand{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.brand--footer{align-items:flex-start;text-align:left}
.brand--footer .brand__name{font-size:clamp(1.2rem,2.4vw,1.7rem);text-shadow:0 0 20px rgba(123,92,255,.3)}
.brand--footer .brand__tagline{letter-spacing:.24em}
.site-footer__line{
  max-width:26em;
  font-size:.88rem;line-height:1.7;color:var(--ash);
}

.footer-nav{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,3vw,2rem);
}
.footer-col__title{
  font-family:var(--font-mono);
  font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--violet);
  margin-bottom:.9rem;
  padding-bottom:.55rem;
  border-bottom:1px solid var(--line);
}
.footer-col__list{display:grid;gap:.55rem}
.footer-col__list a{
  font-size:.92rem;color:var(--ash);text-decoration:none;
  transition:color .25s var(--ease),padding-left .25s var(--ease);
}
.footer-col__list a:hover{color:var(--paper);padding-left:.3rem}

.site-footer__bottom{
  width:100%;max-width:var(--maxw);
  margin-inline:auto;
  padding:1rem var(--gutter) clamp(1.6rem,3vw,2.4rem);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.5rem 1.8rem;
  justify-content:space-between;align-items:baseline;
  font-family:var(--font-mono);
  font-size:.76rem;letter-spacing:.06em;color:var(--ash);
}
.footer-contact{max-width:none}
.footer-legal{max-width:none;color:rgba(198,186,166,.75)}

/* ---------- 15. 显现 ---------- */
html.js [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .42s var(--ease) var(--reveal-delay,0ms),transform .42s var(--ease) var(--reveal-delay,0ms);
}
html.js [data-reveal].is-in{opacity:1;transform:none}

/* ---------- 16. 焦点 ---------- */
:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:3px;
  border-radius:1px;
}

/* ---------- 17. 响应式 ---------- */
@media (max-width:1024px){
  .rail{top:132px}
}
@media (max-width:900px){
  .split{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;top:auto}
  .grid-12{grid-template-columns:repeat(6,minmax(0,1fr))}
  .site-footer__inner{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:960px){
  .masthead__utility{display:none}
  .masthead__inner{grid-template-columns:minmax(0,1fr) auto;gap:.75rem}
  .brand{align-items:flex-start;text-align:left}
  .nav-toggle{display:inline-flex;justify-self:end}

  .site-nav{display:none}
  .site-header[data-open="true"] .site-nav{display:block}
  .site-header[data-open="true"] .nav-toggle__bars i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
  .site-header[data-open="true"] .nav-toggle__bars i:nth-child(2){opacity:0}
  .site-header[data-open="true"] .nav-toggle__bars i:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

  .site-nav__list{flex-direction:column;padding-inline:0;max-width:none}
  .site-nav__list li{width:100%}
  .site-nav__list li+li{border-top:1px solid var(--line)}
  .site-nav__list li+li::before{display:none}
  .site-nav a{padding:1rem var(--gutter);width:100%}
  .site-nav a[aria-current="page"]{background:rgba(123,92,255,.14)}
  .site-nav a[aria-current="page"]::after{left:var(--gutter);right:auto;width:24px;bottom:.55rem}

  .site-header[data-scrolled="true"] .site-nav a{padding-block:1rem}
}
@media (max-width:640px){
  .grid-12{grid-template-columns:minmax(0,1fr)}
  .footer-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .timeline__item{flex-basis:84vw}
  .site-footer__bottom{flex-direction:column;gap:.45rem}
}

/* ---------- 18. 降低动效 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html.js [data-reveal]{opacity:1 !important;transform:none !important}
  .scroll-progress i{transition:none}
  .media__img,.media--tilt{transform:none !important}
}