/* ==========================================================================
   KAIYUN赛事 · 共享样式表  /assets/site.css
   纵向叙事长卷 / 赛场记分牌色彩 / 等宽索引 + 窄体标题
   ========================================================================== */

:root{
  --ink:#0A2A22;
  --ink-deep:#071C17;
  --panel:#123A30;
  --fluoro:#C6F04A;
  --blue:#4D8DF6;
  --amber:#F2C14E;
  --red:#E2544A;
  --mist:#F1F5F0;
  --gray:#7F968C;
  --paper:#EAF0E9;
  --paper-ink:#0E1F1A;

  --line:rgba(127,150,140,.26);
  --line-soft:rgba(127,150,140,.14);
  --line-strong:rgba(127,150,140,.55);

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

  --wrap:1240px;
  --gutter:20px;
  --ease:cubic-bezier(.2,.6,.2,1);
}

/* --------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
main{display:block}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* --------------------------------------------------------- base */
body{
  background:var(--ink);
  color:var(--mist);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.75;
  font-weight:400;
  letter-spacing:.01em;
  min-height:100vh;
}
::selection{background:var(--fluoro);color:var(--ink)}
:focus-visible{outline:2px solid var(--fluoro);outline-offset:3px}

p{max-width:38em}

.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.muted{color:var(--gray)}
.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}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* --------------------------------------------------------- skip link */
.skip-link{
  position:absolute;top:-100px;left:12px;z-index:200;
  background:var(--fluoro);color:var(--ink);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  padding:.6rem .9rem;
  transition:top .18s var(--ease);
}
.skip-link:focus{top:10px}

/* --------------------------------------------------------- 页头 */
.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--ink);
  border-bottom:1px solid var(--line);
  transition:background .25s var(--ease),box-shadow .25s var(--ease);
}
.site-header.is-condensed{
  background:var(--ink-deep);
  box-shadow:0 12px 32px rgba(0,0,0,.38);
}
.site-header__progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:transparent;opacity:0;
  transition:opacity .3s var(--ease);
}
.site-header__progress-bar{
  display:block;height:100%;width:100%;
  background:var(--fluoro);
  transform:scaleX(0);transform-origin:0 50%;
}
.site-header__inner{
  display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "topline topline"
    "masthead masthead"
    "navrow navrow";
}

/* 顶部信息带 */
.topline{
  grid-area:topline;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.5rem 1rem;
  padding:.55rem 0;
  border-bottom:1px dashed var(--line);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;
  color:var(--gray);
}
.topline__item{display:inline-flex;align-items:baseline;gap:.5rem;max-width:none}
.topline__label{color:var(--gray)}
.topline__value{color:var(--mist)}
.topline__group{display:inline-flex;align-items:center;gap:.75rem}
.topline__link{
  color:var(--mist);
  padding:.1rem 0;
  border-bottom:1px solid var(--line-strong);
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.topline__link:hover{color:var(--fluoro);border-color:var(--fluoro)}
.topline .btn{padding:.4rem .75rem;font-size:11px}

/* 刊头 */
.masthead{grid-area:masthead;text-align:center;padding:1.5rem 0 1.15rem;transition:padding .25s var(--ease)}
.masthead__kicker{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.26em;color:var(--gray);
}
.masthead__brand{
  display:inline-block;margin:.4rem 0 .35rem;
  font-family:var(--font-title);font-weight:900;
  font-size:clamp(38px,7.4vw,76px);
  line-height:1;letter-spacing:-.02em;color:var(--mist);
  transition:color .2s var(--ease),font-size .25s var(--ease);
}
.masthead__brand:hover{color:var(--fluoro)}
.masthead__sub{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--gray);
}

/* 导航行 */
.navrow{
  grid-area:navrow;
  display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.5rem;
  border-top:1px solid var(--line);
}
.nav-toggle{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.5rem .75rem;
  border:1px solid var(--line-strong);color:var(--mist);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.nav-toggle:hover{border-color:var(--fluoro);color:var(--fluoro)}
.nav-toggle__bars{display:inline-flex;flex-direction:column;justify-content:space-between;width:16px;height:12px}
.nav-toggle__bar{display:block;height:1.5px;width:100%;background:currentColor;transition:transform .22s var(--ease),opacity .22s var(--ease)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(5.25px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-5.25px) rotate(-45deg)}

.site-nav{flex:1 0 100%;display:none}
.site-nav[data-open="true"]{display:block}
.site-nav__list{display:flex;flex-direction:column;padding-bottom:.4rem}
.site-nav__item{display:block}
.site-nav__link{
  position:relative;display:flex;align-items:center;gap:.7rem;
  padding:.85rem .2rem;
  border-bottom:1px solid var(--line-soft);
  font-size:16px;color:var(--mist);
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.site-nav__index{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--gray);transition:color .18s var(--ease)}
.site-nav__label{letter-spacing:.03em}
.site-nav__link:hover{background:var(--fluoro);color:var(--ink)}
.site-nav__link:hover .site-nav__index{color:var(--ink)}
.site-nav__link[aria-current="page"]{color:var(--fluoro);border-bottom-color:var(--fluoro)}
.site-nav__link[aria-current="page"] .site-nav__index{color:var(--fluoro)}

@media (min-width:900px){
  .navrow{flex-wrap:nowrap;justify-content:center}
  .nav-toggle{display:none}
  .site-nav{display:block;flex:0 1 auto}
  .site-nav__list{flex-direction:row;justify-content:center;gap:.2rem;padding-bottom:0}
  .site-nav__link{
    padding:.7rem .85rem;
    border-bottom:0;
    border-top:2px solid transparent;
    font-size:15px;
  }
  .site-nav__link[aria-current="page"]{border-bottom-color:transparent;border-top-color:var(--fluoro)}
}

/* 滚动收拢为比分带 */
@media (min-width:900px){
  .site-header.is-condensed .site-header__inner{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"masthead topline navrow";
  }
  .site-header.is-condensed .masthead{
    display:flex;align-items:baseline;gap:.85rem;text-align:left;padding:.5rem 0;
  }
  .site-header.is-condensed .masthead__brand{font-size:20px;margin:0}
  .site-header.is-condensed .topline{
    border-bottom:0;justify-content:center;padding:.5rem 0;
  }
  .site-header.is-condensed .topline__group{display:none}
  .site-header.is-condensed .navrow{border-top:0}
  .site-header.is-condensed .site-nav__link{padding:.45rem .7rem}
}
@media (max-width:899px){
  .site-header.is-condensed .masthead{padding:.5rem 0 .35rem}
  .site-header.is-condensed .masthead__brand{font-size:22px;margin:0}
  .site-header.is-condensed .topline{padding:.45rem 0}
  .site-header.is-condensed .topline__group{display:none}
}
.site-header.is-condensed .masthead__kicker,
.site-header.is-condensed .masthead__sub{display:none}

/* --------------------------------------------------------- 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.55rem .9rem;
  border:1px solid transparent;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;
  white-space:nowrap;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.btn--primary{
  background:var(--fluoro);color:var(--ink);border-color:var(--fluoro);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
}
.btn--primary:hover{background:transparent;color:var(--fluoro)}
.btn--ghost{border-color:var(--line-strong);color:var(--mist)}
.btn--ghost:hover{border-color:var(--fluoro);color:var(--fluoro)}

/* --------------------------------------------------------- 页脚 */
.site-footer{
  background:var(--ink-deep);
  border-top:1px solid var(--line);
  padding:3.4rem 0 1.8rem;
  color:var(--mist);
}
.site-footer__inner{
  display:grid;gap:2.2rem;
  grid-template-columns:1fr;
}
.site-footer__brand{grid-area:brand}
.footer-cols{grid-area:cols}
.footer-contact{grid-area:contact}

.footer-brand{
  font-family:var(--font-title);font-weight:900;font-size:26px;letter-spacing:-.01em;line-height:1.2;
}
.footer-tag{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.2em;color:var(--gray);margin-top:.45rem;
}
.footer-closing{margin-top:1rem;color:var(--gray);font-size:14px;line-height:1.8;max-width:26em}

.footer-cols{display:grid;gap:1.6rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.footer-col{min-width:0}
.footer-col__title{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.18em;color:var(--gray);
  padding-bottom:.6rem;border-bottom:1px solid var(--line);margin-bottom:.85rem;
}
.footer-col__list{display:flex;flex-direction:column;gap:.4rem}
.footer-link{
  display:inline-block;
  padding:.15rem 0;
  border-left:2px solid transparent;
  color:var(--mist);font-size:14.5px;
  transition:color .18s var(--ease),border-color .18s var(--ease),padding-left .18s var(--ease);
}
.footer-link:hover{color:var(--fluoro);border-left-color:var(--fluoro);padding-left:.6rem}

.footer-contact{
  display:flex;flex-direction:column;gap:.5rem;
  padding-top:1.6rem;border-top:1px solid var(--line);
}
.footer-contact__line{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-size:14.5px;color:var(--gray);max-width:none;
}
.footer-contact__line .mono{color:var(--mist)}
.footer-contact__note{font-size:12.5px;color:var(--gray);max-width:34em}
.copy-btn{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  padding:.25rem .55rem;border:1px solid var(--line-strong);color:var(--mist);
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.copy-btn:hover{border-color:var(--fluoro);color:var(--fluoro)}
.copy-btn[data-copied="true"]{background:var(--fluoro);color:var(--ink);border-color:var(--fluoro)}

.site-footer__legal{
  margin-top:2.4rem;
  padding-top:1.2rem;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;color:var(--gray);
}
.footer-legal__copy,.footer-legal__icp{max-width:none}

@media (min-width:640px){
  .footer-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:900px){
  .site-footer__inner{
    grid-template-columns:1.05fr 1.7fr;
    grid-template-areas:
      "brand cols"
      "contact contact";
    gap:2.8rem 3rem;
  }
}

/* --------------------------------------------------------- 页面骨架组件 */
.section{padding:68px 0;border-top:1px solid var(--line)}
.section--panel{background:var(--panel);border-top-color:transparent}
.section--paper{background:var(--paper);color:var(--paper-ink);border-top-color:transparent}
.section--paper .section__lead{color:#41564E}
.section--paper .muted{color:#5B6F66}
.section__index{
  display:block;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.18em;color:var(--fluoro);
  margin-bottom:.7rem;
}
.section--paper .section__index{color:#3E6B22}
.section__title{
  font-family:var(--font-title);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(28px,4.2vw,44px);line-height:1.14;
}
.section__lead{margin-top:.9rem;color:var(--gray);font-size:16.5px}

.grid{display:grid;gap:var(--gutter)}
.grid--2,.grid--3,.grid--aside{grid-template-columns:1fr}
@media (min-width:768px){
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--aside{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
}

.cut-panel{
  background:var(--panel);
  padding:1.4rem 1.5rem;
  border-left:2px solid var(--fluoro);
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);
}
.section--paper .cut-panel{background:#DDE6DC;color:var(--paper-ink);border-left-color:#3E6B22}

.slash-band{
  height:44px;
  background:
    linear-gradient(to bottom right,transparent 49.3%,var(--fluoro) 49.3%,var(--fluoro) 50.7%,transparent 50.7%);
  opacity:.35;
}

.data-bar{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.data-bar__cell{background:var(--ink);padding:.85rem 1rem}
.section--panel .data-bar__cell{background:var(--panel)}
.data-bar__label{
  display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--gray);
}
.data-bar__value{
  display:block;margin-top:.2rem;
  font-family:var(--font-mono);font-weight:600;font-size:clamp(20px,3vw,30px);
  color:var(--fluoro);line-height:1.15;
}
.data-bar__value--amber{color:var(--amber)}
.data-bar__value--red{color:var(--red)}
.data-bar__value--blue{color:var(--blue)}

.stat__value{
  font-family:var(--font-mono);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(44px,10vw,96px);line-height:1;color:var(--fluoro);
}
.stat__label{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;color:var(--gray);margin-top:.6rem;
}

.tag{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  padding:.25rem .5rem;border:1px solid var(--line-strong);color:var(--mist);
}
.tag--fluoro{background:var(--fluoro);color:var(--ink);border-color:var(--fluoro)}
.tag--amber{border-color:var(--amber);color:var(--amber)}
.tag--red{border-color:var(--red);color:var(--red)}
.tag--blue{border-color:var(--blue);color:var(--blue)}

.breadcrumbs{padding:18px 0 0}
.breadcrumbs__list{display:flex;flex-wrap:wrap;gap:.35rem;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--gray)}
.breadcrumbs__item{display:inline-flex;align-items:center}
.breadcrumbs__item::after{content:"/";margin-left:.35rem;color:var(--line-strong)}
.breadcrumbs__item:last-child::after{content:""}
.breadcrumbs__link{transition:color .18s var(--ease)}
.breadcrumbs__link:hover{color:var(--fluoro)}
.breadcrumbs__current{color:var(--mist)}

/* 图片容器基础规则（页面阶段放置占位图） */
.media-frame{
  position:relative;overflow:hidden;background:var(--panel);
  aspect-ratio:16/9;width:100%;
}
.media-frame img{width:100%;height:100%;object-fit:cover}
.media-frame--cut{clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.media-frame--portrait{aspect-ratio:3/4}
.media-frame--wide{aspect-ratio:21/9}
.media-frame__caption{
  position:absolute;left:0;bottom:0;
  background:rgba(7,28,23,.86);color:var(--mist);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;
  padding:.4rem .7rem;max-width:100%;
}

/* --------------------------------------------------------- 显现动效 */
html.has-js [data-reveal]{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
html.has-js [data-reveal].is-in{opacity:1;transform:none}

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