/* ============================================================
   贝博体育赛事 · 共享样式表 /assets/site.css
   基线：12 栏栅格 · 居中刊头 · 记录板色块分区 · 等宽数据字
   ============================================================ */

:root{
  /* 色板 */
  --ink:#0E1B2A;          /* 午夜蓝基底 */
  --turf:#123A2E;         /* 深绿赛场 */
  --turf-deep:#0A241C;    /* 墨绿深处 */
  --yellow:#F2C200;       /* 裁判黄 */
  --red:#D6402F;          /* 信号红 */
  --cyan:#35E0C8;         /* 电光青 */
  --chalk:#F4F7F5;        /* 冷白数据 */
  --slate:#6B7C8A;        /* 石板灰 */
  --paper:#E8E4D8;        /* 记录板米 */
  --amber:#B8860B;        /* 琥珀标记 */

  --line:rgba(107,124,138,.32);
  --line-strong:rgba(107,124,138,.5);

  /* 栅格 */
  --max:1440px;
  --pad:40px;
  --gap:24px;

  /* 字体 */
  --font-sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono","SFMono-Regular",Menlo,Consolas,"Courier New",monospace;

  --dur:150ms;
}

/* ---------------- reset ---------------- */
*,
*::before,
*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:150px;
}

body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,figure,blockquote{ margin:0; }

ul,ol{ padding:0; list-style:none; }

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

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

button,input,select,textarea{ font:inherit; color:inherit; }

button{ background:none; border:0; padding:0; cursor:pointer; }

table{ border-collapse:collapse; width:100%; }

hr{ border:0; }

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

/* ---------------- 基础排版 ---------------- */
body{
  min-height:100vh;
  background-color:var(--ink);
  background-image:repeating-linear-gradient(
    180deg,
    rgba(107,124,138,.055) 0 1px,
    transparent 1px 64px
  );
  color:var(--chalk);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
  font-weight:900;
  line-height:1.15;
  letter-spacing:-.02em;
}

.num,
[data-num]{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ---------------- 布局 ---------------- */
.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.section{ padding:56px 0; }

.section__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px 24px;
  padding-bottom:16px;
  margin-bottom:28px;
  border-bottom:1px solid var(--line);
}

.section__title{
  font-size:clamp(22px,2.6vw,32px);
  font-weight:900;
  letter-spacing:-.02em;
}

.kicker{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--yellow);
}

.grid{ display:grid; gap:var(--gap); }
.grid--3{ grid-template-columns:3fr 6fr 3fr; }
.grid--asym{ grid-template-columns:2fr 7fr 3fr; }
.grid--auto{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }

.rule{
  height:1px;
  background:var(--line);
}

/* ---------------- 跳转链接 ---------------- */
.skip-link{
  position:fixed;
  top:-72px;
  left:16px;
  z-index:200;
  padding:11px 20px;
  background:var(--yellow);
  color:var(--turf-deep);
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
  transition:top var(--dur) ease;
}
.skip-link:focus{ top:12px; }

/* ---------------- 刊头 ---------------- */
.masthead{
  position:sticky;
  top:0;
  z-index:80;
  background:var(--turf-deep);
  border-bottom:1px solid var(--line-strong);
}

.masthead__inner{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding:22px var(--pad) 0;
}

.masthead__bar{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.masthead__brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  text-align:center;
}

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

.masthead__logo-mark{
  display:inline-block;
  padding:3px 8px 2px;
  background:var(--yellow);
  color:var(--turf-deep);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.3;
}

.masthead__logo-text{
  font-size:28px;
  font-weight:900;
  letter-spacing:-.03em;
  color:var(--chalk);
  transition:color var(--dur) ease;
}
.masthead__logo:hover .masthead__logo-text{ color:var(--cyan); }

.masthead__tagline{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--slate);
}

/* 移动端栏目按钮 */
.nav-toggle{
  display:none;
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  align-items:center;
  gap:9px;
  padding:9px 13px;
  border:1px solid var(--line-strong);
  background:var(--turf);
  color:var(--chalk);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  transition:border-color var(--dur) ease,color var(--dur) ease;
}
.nav-toggle:hover{ border-color:var(--cyan); color:var(--cyan); }

.nav-toggle__bars{
  display:grid;
  gap:3px;
  width:16px;
}
.nav-toggle__bars i{
  display:block;
  height:2px;
  background:currentColor;
  transition:transform var(--dur) ease,opacity var(--dur) ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

.nav-toggle__label{ white-space:nowrap; }

/* ---------------- 导航 ---------------- */
.nav{
  margin-top:16px;
  border-top:1px solid var(--line);
}

.nav__list{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:0;
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--slate) transparent;
  -webkit-overflow-scrolling:touch;
}

.nav__item{ flex:0 0 auto; }

.nav__link{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  padding:15px 22px 12px;
  border-bottom:3px solid transparent;
  color:var(--slate);
  font-size:15px;
  font-weight:700;
  letter-spacing:.03em;
  white-space:nowrap;
  transition:color var(--dur) ease,border-color var(--dur) ease,background-color var(--dur) ease;
}

.nav__index{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  opacity:.75;
}

.nav__link:hover{
  color:var(--chalk);
  border-bottom-color:var(--cyan);
}

.nav__link[aria-current="page"]{
  color:var(--chalk);
  border-bottom-color:var(--yellow);
  background-color:rgba(242,194,0,.07);
}
.nav__link[aria-current="page"] .nav__index{
  color:var(--yellow);
  opacity:1;
}

/* 阅读进度条 */
.masthead__progress{
  height:3px;
  background:rgba(53,224,200,.14);
}
.masthead__progress-fill{
  display:block;
  width:0;
  height:100%;
  background:var(--yellow);
}

/* ---------------- 页脚 ---------------- */
.colophon{
  margin-top:96px;
  background:var(--turf-deep);
  border-top:1px solid var(--line-strong);
}

.colophon__inner{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding:56px var(--pad) 26px;
}

.colophon__grid{
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr 1.15fr;
  gap:36px 40px;
}

.colophon__title{
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--yellow);
  padding-bottom:9px;
  margin-bottom:14px;
  border-bottom:1px solid var(--line);
}

.colophon__list li + li{ margin-top:1px; }

.colophon__list a{
  display:inline-block;
  padding:5px 0;
  font-size:15px;
  color:rgba(244,247,245,.76);
  border-bottom:1px solid transparent;
  transition:color var(--dur) ease,border-color var(--dur) ease;
}
.colophon__list a:hover{
  color:var(--cyan);
  border-bottom-color:var(--cyan);
}

.colophon__brand{
  font-size:22px;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--chalk);
}

.colophon__note{
  margin-top:12px;
  max-width:36ch;
  font-size:14px;
  line-height:1.7;
  color:var(--slate);
}

.colophon__stamp{
  display:inline-block;
  margin-top:16px;
  padding:5px 10px 4px;
  background:var(--turf);
  color:var(--chalk);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  border-left:3px solid var(--yellow);
}

.colophon__mono{
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:14px;
  letter-spacing:.02em;
  color:var(--chalk);
  word-break:break-all;
}

.colophon__legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 20px;
  margin-top:44px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--slate);
}

.colophon__legal-item{ color:var(--slate); }

.colophon__legal-link{
  color:var(--slate);
  border-bottom:1px solid transparent;
  transition:color var(--dur) ease,border-color var(--dur) ease;
}
.colophon__legal-link:hover{
  color:var(--cyan);
  border-bottom-color:var(--cyan);
}

/* ---------------- 按钮 ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:12px 22px;
  border:1px solid var(--cyan);
  background:transparent;
  color:var(--cyan);
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  transition:background-color var(--dur) ease,color var(--dur) ease,border-color var(--dur) ease;
}
.btn:hover{
  background:var(--cyan);
  color:var(--turf-deep);
}

.btn--solid{
  background:var(--yellow);
  border-color:var(--yellow);
  color:var(--turf-deep);
}
.btn--solid:hover{
  background:var(--chalk);
  border-color:var(--chalk);
  color:var(--ink);
}

.btn--ghost{
  border-color:var(--line-strong);
  color:var(--chalk);
}
.btn--ghost:hover{
  background:transparent;
  border-color:var(--yellow);
  color:var(--yellow);
}

/* ---------------- 面包屑 ---------------- */
.crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--slate);
}

.crumbs__item{ color:var(--slate); }
a.crumbs__item{
  border-bottom:1px solid transparent;
  transition:color var(--dur) ease,border-color var(--dur) ease;
}
a.crumbs__item:hover{
  color:var(--cyan);
  border-bottom-color:var(--cyan);
}
.crumbs__item[aria-current="page"]{ color:var(--chalk); }

.crumbs__sep{
  color:rgba(107,124,138,.6);
}

/* ---------------- 面板 ---------------- */
.panel{
  padding:28px 26px;
  background:var(--turf);
  border-left:3px solid transparent;
}

.panel--ruling{ border-left-color:var(--yellow); }
.panel--alert{ border-left-color:var(--red); }

.panel--paper{
  background:var(--paper);
  color:#2F3A33;
  border-left-color:var(--amber);
}
.panel--paper h2,
.panel--paper h3,
.panel--paper h4{ color:#14231C; }
.panel--paper p,
.panel--paper li{ color:#2F3A33; }
.panel--paper a{
  color:var(--amber);
  border-bottom:1px solid rgba(184,134,11,.45);
  transition:border-color var(--dur) ease;
}
.panel--paper a:hover{ border-bottom-color:var(--amber); }
.panel--paper :focus-visible{ outline-color:var(--amber); }
.panel--paper .src,
.panel--paper .stat__label{ color:#6A5B2E; }

/* ---------------- 标签 ---------------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px 3px;
  border:1px solid var(--chalk);
  background:var(--chalk);
  color:var(--turf-deep);
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
}

.tag--ruling{ background:var(--yellow); border-color:var(--yellow); color:var(--turf-deep); }
.tag--alert{ background:var(--red); border-color:var(--red); color:#FFF6F4; }
.tag--live{ background:transparent; border-color:var(--cyan); color:var(--cyan); }
.tag--muted{ background:transparent; border-color:var(--line-strong); color:var(--slate); }

/* ---------------- 海报数字 ---------------- */
.stat{ display:block; }

.stat__value{
  display:block;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(56px,9vw,120px);
  line-height:.92;
  letter-spacing:-.04em;
  color:var(--chalk);
  font-variant-numeric:tabular-nums;
  transition:color var(--dur) ease;
}
.stat:hover .stat__value{ color:var(--cyan); }

.stat__label{
  display:block;
  margin-top:10px;
  font-size:13px;
  letter-spacing:.12em;
  color:var(--slate);
}

/* ---------------- 来源标注 ---------------- */
.src{
  display:inline-flex;
  flex-wrap:wrap;
  gap:6px 14px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.02em;
  color:var(--slate);
}
.src--lag{ color:var(--red); }

/* ---------------- 正文 ---------------- */
.prose{
  max-width:68ch;
  font-size:17px;
  line-height:1.75;
}
.prose > * + *{ margin-top:1em; }
.prose h2{
  font-size:24px;
  font-weight:900;
  margin-top:2em;
}
.prose h3{
  font-size:19px;
  font-weight:900;
  margin-top:1.6em;
}
.prose a{
  color:var(--cyan);
  border-bottom:1px solid rgba(53,224,200,.4);
  transition:border-color var(--dur) ease;
}
.prose a:hover{ border-bottom-color:var(--cyan); }
.prose ul{ list-style:disc; padding-left:1.35em; }
.prose ol{ list-style:decimal; padding-left:1.35em; }
.prose li{ margin-top:.4em; }
.prose code{
  font-family:var(--font-mono);
  font-size:.92em;
  padding:2px 6px;
  background:var(--turf-deep);
}
.prose blockquote{
  padding-left:18px;
  border-left:3px solid var(--yellow);
  color:rgba(244,247,245,.82);
}

/* ---------------- 图片容器 ---------------- */
.media{
  display:block;
  position:relative;
  border:1px solid var(--line);
  background:var(--turf-deep);
  overflow:hidden;
}

.media__frame{
  position:relative;
  aspect-ratio:16 / 9;
  background-color:var(--turf-deep);
  background-image:
    repeating-linear-gradient(90deg,rgba(107,124,138,.16) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(0deg,rgba(107,124,138,.16) 0 1px,transparent 1px 64px);
}
.media__frame img{
  width:100%;
  height:100%;
  object-fit:cover;
}

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

.media__badge{
  position:absolute;
  left:0;
  top:0;
  padding:5px 10px 4px;
  background:var(--yellow);
  color:var(--turf-deep);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
}

.media__caption{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  padding:10px 12px;
  background:var(--turf-deep);
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--slate);
}

/* ---------------- 锚点高亮 ---------------- */
[data-anchor]{
  scroll-margin-top:150px;
}
[data-anchor]:target{
  border-left:3px solid var(--yellow);
  padding-left:16px;
  background-color:rgba(242,194,0,.06);
}

/* ---------------- 响应式 ---------------- */
@media (max-width:1200px){
  .nav__link{ padding:14px 14px 12px; font-size:14px; }
}

@media (max-width:1100px){
  .colophon__grid{ grid-template-columns:1fr 1fr; gap:34px 28px; }
}

@media (max-width:900px){
  :root{ --pad:20px; --gap:18px; }

  .masthead__inner{ padding-top:16px; }
  .masthead__brand{ padding-inline:46px; gap:7px; }
  .masthead__logo-text{ font-size:21px; }
  .masthead__tagline{ font-size:11px; letter-spacing:.08em; }

  .nav-toggle{ display:inline-flex; }

  .nav{
    display:none;
    margin-top:12px;
    border-top:1px solid var(--line);
  }
  .nav[data-open="true"]{ display:block; }

  .nav__list{
    flex-direction:column;
    overflow:visible;
  }
  .nav__item{ border-bottom:1px solid rgba(107,124,138,.18); }
  .nav__item:last-child{ border-bottom:0; }

  .nav__link{
    width:100%;
    justify-content:flex-start;
    padding:15px 14px 13px;
    border-bottom:0;
    border-left:3px solid transparent;
    font-size:15px;
  }
  .nav__link:hover{
    border-left-color:var(--cyan);
    border-bottom-color:transparent;
  }
  .nav__link[aria-current="page"]{
    border-left-color:var(--yellow);
    border-bottom-color:transparent;
  }

  .grid--3,
  .grid--asym{ grid-template-columns:1fr; }

  .section{ padding:40px 0; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .colophon__grid{ grid-template-columns:1fr; }
  .colophon__inner{ padding-top:42px; }
  .colophon__note{ max-width:100%; }
  .colophon__legal{ gap:6px 16px; }
  .panel{ padding:22px 18px; }
}

/* ---------------- 动效降级 ---------------- */
@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;
  }
}