/* =========================================================
   6688体育主站 · 共享样式 /assets/site.css
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --c-highland:#0B2B3C;
  --c-rock:#123B4F;
  --c-lake:#12857F;
  --c-electric:#2FD3C0;
  --c-red:#C8342B;
  --c-yellow:#E8B62C;
  --c-sand:#F3EDE2;
  --c-paper:#FCFBF7;
  --c-ink:#161C20;
  --c-mist:#6C8494;

  --font-display:"Barlow Condensed","Noto Sans SC",system-ui,sans-serif;
  --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",SFMono-Regular,Consolas,monospace;

  --rail-w:96px;
  --rail-h:56px;
  --gap:24px;
  --radius-md:12px;
  --radius-lg:18px;
  --hairline:rgba(108,132,148,.3);
  --shell-max:1240px;
  --edge:clamp(18px,3.4vw,48px);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body,h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,svg,video{ display:block; max-width:100%; height:auto; }
button{ font:inherit; color:inherit; }
a{ color:var(--c-lake); }
[hidden]{ display:none !important; }

/* ---------- 3. Base typography ---------- */
body{
  min-height:100vh;
  font-family:var(--font-body);
  font-size:clamp(16px,1vw,17px);
  font-weight:400;
  line-height:1.75;
  color:var(--c-ink);
  background:var(--c-sand);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.1;
  letter-spacing:.01em;
  color:var(--c-highland);
}
h1{ font-size:clamp(2rem,3.6vw,3rem); }
h2{ font-size:clamp(1.35rem,2.2vw,1.75rem); }
h3{ font-size:1.15rem; }
strong{ font-weight:700; }
.mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:.01em;
}
:focus-visible{
  outline:2px solid var(--c-electric);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- 4. Skip link ---------- */
.skip-link{
  position:fixed;
  top:10px;
  left:10px;
  z-index:200;
  padding:11px 20px;
  border-radius:8px;
  background:var(--c-electric);
  color:var(--c-highland);
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  transform:translateY(-220%);
  transition:transform .16s ease;
}
.skip-link:focus,
.skip-link:focus-visible{ transform:translateY(0); }

/* ---------- 5. Header shell ---------- */
.site-header{ position:relative; z-index:60; }

/* 5.1 品牌轨道 */
.site-header__rail{
  position:fixed;
  inset-block-start:0;
  inset-inline-start:0;
  width:var(--rail-w);
  height:100vh;
  z-index:80;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:26px 0 24px;
  background:var(--c-highland);
  color:var(--c-paper);
  border-inline-end:1px solid rgba(47,211,192,.22);
}
.rail-mark{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  color:var(--c-paper);
  text-decoration:none;
}
.rail-mark__num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--c-electric);
}
.rail-mark__word{
  font-family:var(--font-display);
  font-weight:800;
  font-size:22px;
  line-height:1;
  letter-spacing:.02em;
}
.rail-mark:hover .rail-mark__word,
.rail-mark:focus-visible .rail-mark__word{ color:var(--c-electric); }
.rail-season{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:11px;
  letter-spacing:.26em;
  color:rgba(252,251,247,.6);
  line-height:1;
}
.rail-season__num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  color:var(--c-yellow);
  letter-spacing:.12em;
}
.rail-quick{
  writing-mode:vertical-rl;
  font-family:var(--font-display);
  font-size:12px;
  font-weight:700;
  letter-spacing:.2em;
  padding:14px 7px;
  border-radius:4px;
  background:var(--c-electric);
  color:var(--c-highland);
  text-decoration:none;
  transition:background-color .16s ease,color .16s ease;
}
.rail-quick:hover,
.rail-quick:focus-visible{ background:var(--c-paper); color:var(--c-highland); }

/* 5.2 阅读进度 */
.rail-progress{
  position:absolute;
  inset-block:0;
  inset-inline-end:0;
  width:3px;
  background:rgba(47,211,192,.14);
  pointer-events:none;
}
.rail-progress__bar{
  display:block;
  width:100%;
  height:calc(var(--progress,0) * 100%);
  background:linear-gradient(180deg,var(--c-electric),var(--c-lake));
}

/* 5.3 双层信息区 */
.site-header__body{
  position:relative;
  background:var(--c-paper);
  border-block-end:1px solid var(--hairline);
}
.header-top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 22px;
  padding:18px var(--edge) 12px;
}
.header-brand{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(15px,1.4vw,18px);
  line-height:1.2;
  letter-spacing:.01em;
  color:var(--c-highland);
}
.header-season{
  font-size:13px;
  line-height:1.4;
  color:var(--c-mist);
}
.header-season .mono{ color:var(--c-rock); font-weight:600; }
.header-search{
  margin-inline-start:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border:1px solid rgba(18,133,127,.38);
  border-radius:999px;
  font-size:13px;
  line-height:1.4;
  color:var(--c-lake);
  text-decoration:none;
  transition:border-color .16s ease,background-color .16s ease;
}
.header-search::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--c-electric);
  flex:none;
}
.header-search:hover,
.header-search:focus-visible{
  border-color:var(--c-lake);
  background:rgba(18,133,127,.07);
}

.header-nav-bar{
  display:flex;
  align-items:center;
  padding:0 var(--edge);
}
.site-nav{ display:block; width:100%; }
.site-nav__list{
  display:flex;
  flex-wrap:wrap;
  gap:2px;
}
.site-nav__item{ margin:0; }
.site-nav__link{
  position:relative;
  display:block;
  padding:14px 15px 16px;
  font-size:15px;
  font-weight:500;
  line-height:1.2;
  white-space:nowrap;
  color:var(--c-ink);
  text-decoration:none;
  transition:color .16s ease;
}
.site-nav__link::after{
  content:"";
  position:absolute;
  left:15px;
  right:15px;
  bottom:8px;
  height:3px;
  border-radius:2px;
  background:var(--c-lake);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .16s ease;
}
.site-nav__link:hover,
.site-nav__link:focus-visible{ color:var(--c-highland); }
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after{ transform:scaleX(1); }
.site-nav__link[aria-current="page"]{
  color:var(--c-highland);
  font-weight:700;
}
.site-nav__link[aria-current="page"]::after{ transform:scaleX(1); }

.nav-toggle{
  display:none;
  align-items:center;
  gap:9px;
  padding:9px 16px;
  margin:10px 0;
  border:1px solid var(--hairline);
  border-radius:999px;
  background:transparent;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  letter-spacing:.08em;
  color:var(--c-highland);
  cursor:pointer;
  transition:border-color .16s ease,color .16s ease;
}
.nav-toggle::before{
  content:"";
  width:16px;
  height:12px;
  background:
    linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;
}
.nav-toggle:hover,
.nav-toggle:focus-visible{ border-color:var(--c-lake); color:var(--c-lake); }

/* 5.4 桌面留出轨道宽度 */
@media (min-width:901px){
  body{ padding-inline-start:var(--rail-w); }
}

/* ---------- 6. Footer ---------- */
.site-footer{
  position:relative;
  margin-block-start:clamp(48px,7vw,96px);
  padding:clamp(48px,6vw,84px) var(--edge) 28px;
  background:var(--c-highland);
  color:var(--c-paper);
  overflow:hidden;
}
.site-footer::before{
  content:"";
  position:absolute;
  inset-inline:0;
  top:0;
  height:14px;
  background:var(--c-sand);
  clip-path:polygon(0 0,100% 0,100% 26%,0 100%);
  pointer-events:none;
}
.footer-inner{
  position:relative;
  max-width:var(--shell-max);
  margin-inline:auto;
  padding-block-start:14px;
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);
}
.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
}
.footer-brand__mark{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(24px,3vw,34px);
  line-height:1;
  letter-spacing:.01em;
  color:var(--c-paper);
  text-decoration:none;
  padding-block-end:10px;
  border-block-end:3px solid var(--c-electric);
  transition:color .16s ease;
}
.footer-brand__mark:hover,
.footer-brand__mark:focus-visible{ color:var(--c-electric); }
.footer-brand__brief{
  font-size:15px;
  line-height:1.75;
  max-width:32em;
  color:rgba(252,251,247,.72);
}
.footer-nav__title{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.24em;
  color:var(--c-mist);
  margin-block-end:14px;
}
.footer-nav__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 20px;
}
.footer-nav__link{
  display:inline-flex;
  align-items:center;
  padding-block:2px;
  font-size:15px;
  line-height:1.5;
  color:rgba(252,251,247,.82);
  text-decoration:none;
  border-block-end:1px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.footer-nav__link::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  flex:none;
  margin-inline-end:9px;
  background:var(--c-electric);
  opacity:.75;
}
.footer-nav__link:hover,
.footer-nav__link:focus-visible{
  color:var(--c-paper);
  border-block-end-color:var(--c-electric);
}
.footer-meta{
  grid-column:1 / -1;
  margin-block-start:clamp(26px,3vw,44px);
  padding-block-start:22px;
  border-block-start:1px solid rgba(252,251,247,.16);
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:12px 32px;
}
.footer-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 20px;
}
.footer-legal__link{
  font-size:13px;
  color:rgba(252,251,247,.75);
  text-decoration:none;
  transition:color .16s ease;
}
.footer-legal__link:hover,
.footer-legal__link:focus-visible{ color:var(--c-electric); }
.footer-legal__text{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:12px;
  color:var(--c-mist);
}
.footer-copy{
  grid-column:2;
  grid-row:1;
  justify-self:end;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:12px;
  color:var(--c-mist);
}
.footer-contact{
  grid-column:1 / -1;
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.8;
  color:rgba(252,251,247,.6);
  word-break:break-word;
}

/* ---------- 7. Shared components ---------- */
.container{
  width:100%;
  max-width:var(--shell-max);
  margin-inline:auto;
  padding-inline:var(--edge);
}
.grid-12{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gap);
}
.prose{ max-width:38em; }
.prose > * + *{ margin-block-start:1.1em; }
.prose h2{ margin-block-start:1.8em; font-size:clamp(1.35rem,2.2vw,1.75rem); }
.prose h3{ margin-block-start:1.5em; font-family:var(--font-body); font-weight:700; font-size:1.1rem; }
.prose ul,.prose ol{ padding-inline-start:1.2em; list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li + li{ margin-block-start:.4em; }
.prose strong{ color:var(--c-highland); }
.prose a{ text-underline-offset:3px; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  line-height:1;
  letter-spacing:.05em;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
.btn--primary{ background:var(--c-lake); color:var(--c-paper); }
.btn--primary:hover,.btn--primary:focus-visible{ background:var(--c-highland); }
.btn--ghost{
  background:transparent;
  color:var(--c-highland);
  border-color:rgba(11,43,60,.28);
}
.btn--ghost:hover,.btn--ghost:focus-visible{ border-color:var(--c-lake); color:var(--c-lake); }
.btn--signal{ background:var(--c-electric); color:var(--c-highland); }
.btn--signal:hover,.btn--signal:focus-visible{ background:var(--c-paper); }
.btn:active{ transform:translateY(1px); }

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:4px;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.06em;
  background:rgba(18,59,79,.08);
  color:var(--c-rock);
}
.tag--red{ background:rgba(200,52,43,.12); color:var(--c-red); }
.tag--yellow{ background:rgba(232,182,44,.22); color:#6f5200; }
.tag--lake{ background:rgba(18,133,127,.12); color:var(--c-lake); }

.breadcrumb{ font-size:13px; }
.breadcrumb__list{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.breadcrumb__item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--c-mist);
}
.breadcrumb__item + .breadcrumb__item::before{
  content:"›";
  color:var(--c-mist);
}
.breadcrumb__link{ color:var(--c-lake); text-decoration:none; }
.breadcrumb__link:hover,
.breadcrumb__link:focus-visible{ text-decoration:underline; text-underline-offset:3px; }
.breadcrumb__current{ color:var(--c-ink); font-weight:500; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--c-lake);
}
.eyebrow::before{
  content:"";
  width:22px;
  height:2px;
  flex:none;
  background:var(--c-electric);
}

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:22px 24px 24px;
  background:var(--c-paper);
  border:1px solid var(--hairline);
  border-radius:var(--radius-md);
}
.card__num{
  position:absolute;
  inset-block-start:14px;
  inset-inline-end:16px;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--c-mist);
}
.card__title{
  padding-inline-end:44px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.15rem;
  line-height:1.2;
  color:var(--c-highland);
}
.card__text{ font-size:14.5px; line-height:1.7; color:rgba(22,28,32,.78); }

.media-frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  border-radius:var(--radius-md);
  background:var(--c-rock);
  clip-path:polygon(0 0,100% 0,100% 94%,0 100%);
}
.media-frame > img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.78) contrast(1.06);
}
.media-frame--wide{ aspect-ratio:16/7; }
.media-frame--square{ aspect-ratio:1/1; }
.media-frame--tall{ aspect-ratio:3/4; }
.media-frame__caption{
  position:absolute;
  inset-inline-start:0;
  inset-block-end:0;
  padding:6px 12px;
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.5;
  background:rgba(11,43,60,.82);
  color:var(--c-paper);
}

/* ---------- 8. Reveal protocol ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .32s ease,transform .32s ease;
  transition-delay:calc(var(--reveal-delay,0) * 60ms);
}
[data-reveal].is-revealed{
  opacity:1;
  transform:none;
}

/* ---------- 9. Responsive ---------- */
@media (max-width:1180px) and (min-width:901px){
  .site-nav__link{ font-size:14px; padding:13px 10px 15px; }
  .site-nav__link::after{ left:10px; right:10px; }
}

@media (max-width:900px){
  html{ scroll-behavior:smooth; }

  .site-header__rail{
    position:sticky;
    inset-block-start:0;
    inset-inline-start:auto;
    width:100%;
    height:var(--rail-h);
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 16px;
    border-inline-end:none;
    border-block-end:1px solid rgba(47,211,192,.22);
  }
  .rail-mark{ flex-direction:row; align-items:baseline; gap:7px; }
  .rail-mark__num{ font-size:11px; }
  .rail-mark__word{ font-size:17px; }
  .rail-season{ display:none; }
  .rail-quick{
    writing-mode:horizontal-tb;
    padding:6px 14px;
    border-radius:999px;
    font-size:12px;
    letter-spacing:.08em;
  }
  .rail-progress{
    inset-block:auto 0;
    inset-inline:0;
    width:auto;
    height:3px;
  }
  .rail-progress__bar{
    width:calc(var(--progress,0) * 100%);
    height:100%;
    background:linear-gradient(90deg,var(--c-lake),var(--c-electric));
  }

  .header-top{ padding:12px 16px 10px; gap:4px 14px; }
  .header-brand{ font-size:15px; }
  .header-season{ font-size:12px; flex-basis:100%; }
  .header-search{ display:none; }

  .header-nav-bar{ flex-wrap:wrap; padding:0 16px; }
  .nav-toggle{ display:inline-flex; }
  .site-nav{ display:none; width:100%; padding-block-end:12px; border-block-start:1px solid var(--hairline); }
  .site-nav[data-open]{ display:block; animation:nav-in .18s ease both; }
  .site-nav__list{ flex-direction:column; gap:0; }
  .site-nav__link{ padding:13px 4px 13px 14px; font-size:16px; }
  .site-nav__link::after{ left:4px; right:auto; width:26px; bottom:9px; }

  .footer-inner{ grid-template-columns:1fr; gap:34px; }
  .footer-meta{ grid-template-columns:1fr; }
  .footer-copy{ grid-column:1; grid-row:auto; justify-self:start; }
  .footer-nav__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  .grid-12{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
}

@media (max-width:600px){
  .header-brand{ font-size:14px; }
  .header-season{ font-size:11.5px; }
  .nav-toggle{ font-size:14px; padding:8px 14px; }
  .footer-nav__list{ grid-template-columns:1fr; }
  .footer-brand__brief{ font-size:14px; }
  .grid-12{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .card{ padding:18px 18px 20px; }
}

@keyframes nav-in{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}

/* ---------- 10. 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;
    transition-delay:0ms !important;
  }
  [data-reveal]{
    opacity:1;
    transform:none;
    transition:none;
  }
  .site-nav[data-open]{ animation:none; }
  .btn:active{ transform:none; }
  .skip-link{ transition:none; }
}