/* ============================================================
   赛事通体育 · 简体中文站  /assets/site.css
   框架式导航 + 纵向叙事长卷 + 印刷目录语汇
   ============================================================ */

/* ---------- 01 reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0}
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--accent-600);outline-offset:2px}

/* ---------- 02 tokens ---------- */
:root{
  --ink-900:#101215;
  --paper-0:#FBF9F4;
  --paper-200:#E9E5DC;
  --ink-500:#5A5F66;
  --accent-600:#C7261C;
  --accent-100:#F6DBD7;
  --teal-700:#16605A;
  --index-400:#D9A21B;
  --rule-700:#2C4A7C;
  --warn-600:#8A4B1F;

  --rail-w:212px;
  --maxw:1180px;
  --col-main:680px;
  --col-note:220px;
  --gutter:28px;
  --chapter-gap:96px;

  --font-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-serif:"Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --t-fast:140ms ease;
  --t-mid:180ms ease;
}

/* ---------- 03 base typography ---------- */
body{
  background:var(--paper-0);
  color:var(--ink-900);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.85;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent-600);color:var(--paper-0)}
#main-content{display:block;min-width:0}
#main-content:focus{outline:none}

.chapter{padding-top:72px;margin-top:var(--chapter-gap);border-top:1px solid var(--ink-900);scroll-margin-top:24px}
.chapter__head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;margin-bottom:22px}
.chapter__num{font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;color:var(--accent-600);padding-top:12px;font-variant-numeric:tabular-nums}
.chapter__title{font-family:var(--font-serif);font-weight:600;font-size:30px;line-height:1.35;letter-spacing:.01em}
.chapter__rule{
  height:8px;border-bottom:1px solid var(--ink-900);
  background-image:repeating-linear-gradient(90deg,var(--ink-900) 0 1px,transparent 1px 20px);
  background-repeat:repeat-x;background-size:20px 5px;background-position:left bottom;
  margin-bottom:30px;
}
.lede{font-size:18px;line-height:1.9}
.subhead{font-family:var(--font-serif);font-weight:600;font-size:20px;line-height:1.5}
.meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--ink-500);font-variant-numeric:tabular-nums}

/* ---------- 04 layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.stack{display:grid;gap:16px}
.grid{display:grid;gap:24px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}

.prose-grid{display:grid;grid-template-columns:minmax(0,var(--col-main)) var(--col-note);gap:52px;align-items:start}
.prose-grid__main{min-width:0;max-width:var(--col-main)}
.prose-grid__aside{min-width:0}
.prose{max-width:var(--col-main);font-size:16.5px;line-height:1.85}
.prose > * + *{margin-top:16px}
.prose h3{font-family:var(--font-serif);font-weight:600;font-size:20px;line-height:1.5;margin-top:30px}
.prose ul{display:grid;gap:8px}
.prose ul li{position:relative;padding-left:22px}
.prose ul li::before{content:"—";position:absolute;left:0;font-family:var(--font-mono);font-size:12px;color:var(--accent-600)}

.index-line{
  display:flex;flex-wrap:wrap;gap:8px 24px;
  border-top:1px solid var(--ink-900);border-bottom:1px solid var(--ink-900);
  background:var(--paper-200);padding:10px 14px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;color:var(--ink-500);
}
.index-line strong{font-weight:400;color:var(--ink-900)}
.index-line a{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:transparent;text-underline-offset:3px;transition:color var(--t-fast),text-decoration-color var(--t-fast)}
.index-line a:hover{color:var(--accent-600);text-decoration-color:var(--accent-600);text-decoration-thickness:2px}

/* ---------- 05 skip link ---------- */
.skip-link{
  position:fixed;top:8px;left:8px;z-index:99;
  transform:translateY(-220%);
  background:var(--ink-900);color:var(--paper-0);
  padding:9px 14px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  transition:transform var(--t-fast);
}
.skip-link:focus{transform:translateY(0)}

/* ---------- 06 frame header ---------- */
.site-frame{
  position:fixed;top:0;left:0;bottom:0;z-index:60;
  width:var(--rail-w);
  display:flex;flex-direction:column;gap:18px;
  padding:20px 18px 24px;
  background:var(--paper-0);
  border-right:1px solid var(--ink-900);
  overflow-y:auto;overscroll-behavior:contain;
}
.frame-rule{position:fixed;background:var(--ink-900);pointer-events:none;z-index:61}
.frame-rule--top{top:0;left:0;right:0;height:1px}
.frame-rule--left{top:0;left:0;bottom:0;width:1px}

.frame-head{display:flex;flex-direction:column;gap:14px}
.brand{
  position:relative;display:block;
  border:1px solid var(--ink-900);background:var(--paper-0);
  padding:14px 14px 12px;
  transition:border-color var(--t-fast),background-color var(--t-fast);
}
.brand::after{
  content:"";position:absolute;top:-1px;right:-1px;width:14px;height:14px;
  background:var(--accent-600);
}
.brand__mark{display:block;font-family:var(--font-serif);font-weight:600;font-size:21px;line-height:1.2;letter-spacing:.08em}
.brand__line{display:block;margin-top:7px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-500)}
.brand:hover{border-color:var(--accent-600)}
.brand:hover .brand__mark{color:var(--accent-600)}

.frame-utility{display:grid;gap:6px;border:1px solid var(--ink-900);padding:10px 12px 12px;background:var(--paper-0)}
.frame-utility__label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-500)}
.frame-utility__value{font-family:var(--font-mono);font-size:18px;letter-spacing:.06em;color:var(--accent-600);font-variant-numeric:tabular-nums}
.frame-utility__scale{position:relative;display:block;height:7px;background:var(--paper-200);border:1px solid var(--ink-900)}
.frame-utility__fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent-600)}

.nav-toggle{display:none}
.nav-toggle__bars{display:block;width:16px;height:9px;position:relative;border-top:1px solid var(--ink-900);border-bottom:1px solid var(--ink-900)}
.nav-toggle__bars::after{content:"";position:absolute;left:0;right:0;top:3px;height:1px;background:var(--ink-900)}
.nav-toggle__text{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em}

.site-nav{display:flex;flex-direction:column;flex:1 1 auto}
.site-nav__list{display:flex;flex-direction:column;border-top:1px solid var(--ink-900)}
.site-nav__item{border-bottom:1px solid var(--paper-200)}
.site-nav__link{
  display:grid;grid-template-columns:34px minmax(0,1fr);align-items:baseline;gap:8px;
  padding:10px 8px 10px 6px;border-left:2px solid transparent;
  font-size:15px;line-height:1.5;
  transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.site-nav__num{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--ink-500);font-variant-numeric:tabular-nums;transition:color var(--t-fast)}
.site-nav__label{min-width:0}
.site-nav__link:hover{border-left-color:var(--accent-600);background:var(--accent-100)}
.site-nav__link:hover .site-nav__num{color:var(--accent-600)}
.site-nav__link[aria-current="page"]{background:var(--accent-600);border-left-color:var(--accent-600);color:var(--paper-0)}
.site-nav__link[aria-current="page"] .site-nav__num{color:var(--accent-100)}
.site-nav__link:focus-visible{outline-offset:-2px}
.site-nav__foot{margin-top:auto;padding-top:18px;display:grid;gap:8px}

/* ---------- 07 buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:9px 16px;border:1px solid var(--ink-900);
  background:var(--paper-0);color:var(--ink-900);
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;line-height:1.4;text-align:center;
  transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.btn--solid{background:var(--ink-900);color:var(--paper-0)}
.btn--solid:hover{background:var(--accent-600);border-color:var(--accent-600);color:var(--paper-0)}
.btn--ghost{background:transparent}
.btn--ghost:hover{background:var(--accent-100);border-color:var(--accent-600);color:var(--accent-600)}
.btn--accent{background:var(--accent-600);border-color:var(--accent-600);color:var(--paper-0)}
.btn--accent:hover{background:var(--ink-900);border-color:var(--ink-900)}
.btn--block{width:100%}

/* ---------- 08 content blocks ---------- */
.note{border-left:2px solid var(--accent-600);padding:2px 0 2px 16px;font-size:14px;line-height:1.8;color:var(--ink-500)}
.note__key{display:block;margin-bottom:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--accent-600)}

.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid var(--ink-900);background:var(--accent-100);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;line-height:1.7;color:var(--ink-900)}
.tag--teal{background:transparent;border-color:var(--teal-700);color:var(--teal-700)}
.tag--index{background:transparent;border-color:var(--index-400);color:var(--warn-600)}

.slab{border:1px solid var(--ink-900);background:var(--paper-0);padding:20px 22px}
.slab--paper{background:var(--paper-200)}
.slab__label{display:block;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--ink-900);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--accent-600)}

.callout{border:1px solid var(--warn-600);border-left-width:3px;background:var(--paper-0);padding:14px 16px;font-size:14.5px;line-height:1.8}
.callout__label{display:block;margin-bottom:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--warn-600)}

.data-table{width:100%;font-size:14.5px;border-top:2px solid var(--ink-900)}
.data-table caption{text-align:left;padding-bottom:8px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;color:var(--ink-500)}
.data-table th,.data-table td{padding:10px 12px;border-bottom:1px solid var(--paper-200);text-align:left;vertical-align:top}
.data-table thead th{border-bottom:1px solid var(--ink-900);font-family:var(--font-mono);font-weight:400;font-size:11.5px;letter-spacing:.1em;color:var(--ink-500)}
.data-table tbody tr:nth-child(even){background:var(--paper-200)}
.data-table td:first-child{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;color:var(--accent-600);white-space:nowrap}

.anchor-toc{border:1px solid var(--ink-900);background:var(--paper-0);padding:16px 18px}
.anchor-toc__list{display:grid;gap:2px;margin-top:10px}
.anchor-toc__link{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--paper-200);font-size:15px;transition:color var(--t-fast)}
.anchor-toc__link::before{content:"§";font-family:var(--font-mono);font-size:11px;color:var(--ink-500)}
.anchor-toc__link:hover{color:var(--accent-600)}

.crumbs{display:flex;flex-wrap:wrap;gap:8px;padding:16px 0;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;color:var(--ink-500)}
.crumbs a{transition:color var(--t-fast)}
.crumbs a:hover{color:var(--accent-600)}
.crumbs__sep{color:var(--ink-500)}

.link-ext{color:var(--rule-700);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--t-fast),text-decoration-thickness var(--t-fast)}
.link-ext:hover{color:var(--accent-600);text-decoration-thickness:2px}

/* ---------- 09 media containers ---------- */
.figure{margin:0}
.media{position:relative;border:1px solid var(--ink-900);background:var(--paper-200);aspect-ratio:16/9;overflow:hidden;border-radius:0}
.media--wide{aspect-ratio:21/9}
.media--square{aspect-ratio:1/1}
.media--tall{aspect-ratio:3/4}
.media img,.media svg,.media video{width:100%;height:100%;object-fit:cover}
.media__stamp{position:absolute;left:0;bottom:0;padding:4px 8px;background:var(--ink-900);color:var(--paper-0);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em}
.media__caption{margin-top:10px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-500);line-height:1.7}

/* ---------- 10 footer ---------- */
.site-foot{margin-top:var(--chapter-gap);border-top:1px solid var(--ink-900);background:var(--paper-200)}
.foot-grid{display:grid;grid-template-columns:1.1fr .9fr 1.4fr;gap:36px;padding-top:40px;padding-bottom:34px}
.foot-col{min-width:0}
.foot-brand{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--ink-900);font-family:var(--font-serif);font-weight:600;font-size:18px;letter-spacing:.04em}
.foot-label{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--ink-900);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--ink-500)}
.foot-index__list{display:grid;gap:2px}
.foot-index__list a{display:block;padding:4px 0;font-size:15px;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:transparent;text-underline-offset:3px;transition:color var(--t-fast),text-decoration-color var(--t-fast)}
.foot-index__list a:hover{color:var(--accent-600);text-decoration-color:var(--accent-600);text-decoration-thickness:2px}
.foot-contact{font-size:14px;line-height:1.9}
.foot-note{margin-top:8px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-500)}
.foot-legal{margin-top:12px;padding-top:10px;border-top:1px solid var(--ink-500);font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--ink-500)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-top:14px;padding-bottom:26px;border-top:1px solid var(--ink-900);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-500)}
.foot-stamp__num{color:var(--accent-600)}

/* ---------- 11 desktop offsets ---------- */
@media (min-width:901px){
  body{padding-left:var(--rail-w)}
}
@media (min-width:901px) and (max-width:1080px){
  :root{--rail-w:178px;--gutter:20px}
  .site-nav__link{font-size:14px;grid-template-columns:30px minmax(0,1fr)}
  .brand__mark{font-size:18px}
}

/* ---------- 12 tablet & mobile ---------- */
@media (max-width:900px){
  :root{--rail-w:0px;--gutter:18px;--chapter-gap:64px}
  body{padding-bottom:46px}
  .site-frame{
    position:sticky;top:0;left:auto;right:auto;bottom:auto;
    width:auto;height:auto;flex-direction:column;gap:0;
    padding:10px 14px 12px;
    border-right:0;border-top:2px solid var(--ink-900);border-bottom:1px solid var(--ink-900);
    background:var(--paper-0);overflow:visible;
  }
  .frame-rule{display:none}
  .frame-head{flex-direction:row;align-items:center;gap:12px}
  .brand{flex:1 1 auto;min-width:0;border:0;padding:0}
  .brand::after{display:none}
  .brand__mark{font-size:17px;letter-spacing:.06em}
  .brand__line{margin-top:2px;font-size:9.5px}
  .frame-utility{
    position:fixed;left:0;right:0;bottom:0;z-index:62;
    display:flex;align-items:center;gap:10px;
    height:38px;padding:0 14px;border:0;border-top:1px solid var(--ink-900);
    background:var(--ink-900);color:var(--paper-0);
  }
  .frame-utility__label{color:var(--paper-200);font-size:10px}
  .frame-utility__value{font-size:13px;color:var(--paper-0)}
  .frame-utility__scale{position:absolute;left:0;top:0;width:100%;height:2px;border:0;background:var(--accent-100)}
  .frame-utility__fill{top:0;bottom:auto;height:2px}
  .nav-toggle{
    display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
    min-height:38px;padding:8px 11px;border:1px solid var(--ink-900);
    transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast);
  }
  .nav-toggle[aria-expanded="true"]{background:var(--accent-600);border-color:var(--accent-600);color:var(--paper-0)}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars{border-color:var(--paper-0)}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{background:var(--paper-0)}
  .site-nav{
    position:fixed;left:0;right:0;bottom:38px;top:auto;z-index:61;
    max-height:calc(100vh - 130px);overflow-y:auto;
    padding:6px 14px 16px;
    background:var(--paper-0);border-top:1px solid var(--ink-900);
    transform:translateY(112%);visibility:hidden;
    transition:transform var(--t-mid),visibility var(--t-mid);
  }
  .site-nav[data-open]{transform:translateY(0);visibility:visible}
  .site-nav__list{border-top:0}
  .site-nav__link{grid-template-columns:38px minmax(0,1fr);padding:12px 8px;font-size:16px}
  .site-nav__foot{grid-template-columns:1fr 1fr;padding-top:14px}
  .foot-grid{grid-template-columns:1fr;gap:26px;padding-top:30px;padding-bottom:26px}
  .chapter{padding-top:48px}
  .chapter__head{grid-template-columns:1fr;gap:6px}
  .chapter__num{padding-top:0}
  .chapter__title{font-size:25px}
}
@media (max-width:720px){
  .grid--2,.grid--3,.split,.prose-grid{grid-template-columns:1fr;gap:22px}
  .prose-grid{gap:26px}
  .data-table{font-size:13.5px}
  .data-table th,.data-table td{padding:9px 8px}
}

/* ---------- 13 a11y / motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:1ms !important;
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}