/* ============================================================
   k1体育3915 — /assets/site.css
   共享外壳：reset / 变量 / 中文排版 / 头部 / 页脚 / 通用组件
   ============================================================ */

/* ---- 1. Reset --------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
[hidden]{display:none!important}

/* ---- 2. 变量 ---------------------------------------------- */
:root{
  --c-ink-green:#0E2A24;
  --c-ink-deep:#081915;
  --c-charcoal:#141414;
  --c-paper:#F4EAD8;
  --c-brown:#2A1F1A;
  --c-cyan:#5BF0D0;
  --c-orange:#FF7A1A;
  --c-red:#E2492F;
  --c-mist:#8AA39B;
  --c-cream:#FFF8EC;
  --c-gray:#6F7B78;

  --font-display:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong",Georgia,serif;
  --font-body:"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",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fs-body:clamp(15.5px,.42vw + 14px,17px);
  --wrap:1220px;
  --gutter:clamp(16px,3.6vw,42px);
  --sp-section:clamp(44px,6.4vw,92px);
  --line:2px solid var(--c-brown);
  --shadow:6px 6px 0 var(--c-brown);
  --shadow-sm:3px 3px 0 var(--c-brown);
}

/* ---- 3. 基础排版 ------------------------------------------ */
body{
  min-height:100vh;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.75;
  letter-spacing:.012em;
  color:var(--c-paper);
  background-color:var(--c-ink-green);
  background-image:
    repeating-linear-gradient(90deg,rgba(91,240,208,.055) 0 1px,transparent 1px 104px),
    repeating-linear-gradient(0deg,rgba(244,234,216,.032) 0 1px,transparent 1px 104px);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.2;letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.6vw,3rem)}
h2{font-size:clamp(1.55rem,3vw,2.25rem)}
h3{font-size:clamp(1.2rem,2vw,1.7rem)}
h4{font-size:1.1rem;font-weight:600;letter-spacing:0}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}
:focus-visible{outline:3px solid var(--c-cyan);outline-offset:3px}

/* ---- 4. 布局骨架 ------------------------------------------ */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:var(--sp-section)}
.section--ink{background:var(--c-ink-green);color:var(--c-paper)}
.section--paper{background:var(--c-paper);color:var(--c-brown)}
.section--charcoal{background:var(--c-charcoal);color:var(--c-paper)}

.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-cyan)}
.eyebrow::before{content:"";display:inline-block;width:26px;height:2px;background:var(--c-orange)}
.section--paper .eyebrow{color:var(--c-ink-green)}
.section-title{margin-bottom:14px}
.lede{max-width:64ch;margin-top:10px;font-size:clamp(1rem,.4vw + .95rem,1.1rem);color:var(--c-mist)}
.section--paper .lede{color:var(--c-brown);opacity:.78}
.section--charcoal .lede{color:var(--c-mist)}
.prose{max-width:68ch;font-size:var(--fs-body);line-height:1.8}
.prose p+p{margin-top:1em}
.prose h3{margin-top:1.6em;margin-bottom:.5em}
.prose ul{margin-top:.8em;display:grid;gap:.5em}
.prose li{padding-left:18px;position:relative}
.prose li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:2px;background:var(--c-orange)}
.keyline{height:0;border:0;border-top:2px solid var(--c-brown);margin-block:clamp(22px,3vw,36px)}
.keyline--mist{border-top-color:var(--c-gray)}

.grid{display:grid;gap:clamp(16px,2.4vw,28px)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.grid--aside{grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){
  .grid--aside{grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,3vw,40px);align-items:start}
}

/* ---- 5. 头部 ---------------------------------------------- */
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:80;
  padding:10px 16px;background:var(--c-cyan);color:#04231C;
  border:2px solid var(--c-brown);box-shadow:var(--shadow-sm);
  font-family:var(--font-mono);font-size:13px;transition:top .18s ease;
}
.skip-link:focus{top:12px}

.site-header{position:relative;z-index:30;background:var(--c-ink-green)}
.scroll-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:70;pointer-events:none}
.scroll-progress__fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c-cyan),var(--c-orange))}

.brand-band{background:var(--c-charcoal);border-bottom:2px solid var(--c-brown)}
.brand-band__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:6px 22px;min-height:44px;padding-block:9px;
  font-size:13px;color:var(--c-mist);
}
.brand-band__id{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.brand-band__mark{font-family:var(--font-display);font-size:16px;color:var(--c-cream);letter-spacing:-.01em}
.brand-band__cert{color:var(--c-cream);opacity:.86}
.brand-band__sep{color:var(--c-gray)}
.brand-band__pulse{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12.5px}
.pulse-dot{
  width:8px;height:8px;border-radius:50%;background:var(--c-cyan);
  animation:pulse-dot 2.4s ease-out infinite;
}
@keyframes pulse-dot{
  0%{box-shadow:0 0 0 0 rgba(91,240,208,.6)}
  70%{box-shadow:0 0 0 7px rgba(91,240,208,0)}
  100%{box-shadow:0 0 0 0 rgba(91,240,208,0)}
}

.nav-band{background:var(--c-ink-green);border-bottom:2px solid var(--c-brown)}
.nav-band__inner{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:68px;padding-block:10px}

.main-nav{
  order:4;flex-basis:100%;
  max-height:0;overflow:hidden;opacity:0;visibility:hidden;
  border-top:2px solid transparent;
  transition:max-height .32s ease,opacity .24s ease,visibility .32s ease;
}
.site-header[data-open] .main-nav{
  max-height:32rem;opacity:1;visibility:visible;border-top-color:var(--c-brown);
}
.main-nav__list{display:flex;flex-direction:column;gap:2px;padding:10px 0 14px}
.main-nav__link{
  display:flex;align-items:center;gap:8px;
  padding:11px 12px;font-size:15.5px;color:var(--c-paper);
  border:2px solid transparent;border-bottom:1px dashed rgba(244,234,216,.22);
  transition:color .2s ease,background .2s ease,border-color .2s ease;
}
.main-nav__link:hover{color:var(--c-cyan);background:rgba(91,240,208,.07);border-color:var(--c-gray)}
.main-nav__link[aria-current="page"]{
  color:#04231C;background:var(--c-cyan);border-color:var(--c-brown);
  border-bottom-style:solid;box-shadow:var(--shadow-sm);font-weight:600;
}

.nav-band__aside{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-chip{
  display:none;align-items:center;gap:8px;
  padding:7px 12px;border:2px solid var(--c-gray);
  font-family:var(--font-mono);font-size:12.5px;color:var(--c-mist);
  transition:color .2s ease,border-color .2s ease;
}
.nav-chip:hover{color:var(--c-cyan);border-color:var(--c-cyan)}
.nav-chip__dot{width:7px;height:7px;background:var(--c-cyan);display:inline-block}
.nav-band__cta{white-space:nowrap}

.nav-toggle{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 14px;margin-left:8px;
  border:2px solid var(--c-brown);background:var(--c-cream);color:var(--c-brown);
  font-size:13px;box-shadow:var(--shadow-sm);
}
.nav-toggle:hover{background:var(--c-cyan)}
.nav-toggle__bars{position:relative;display:block;width:18px;height:2px;background:currentColor}
.nav-toggle__bars::before,.nav-toggle__bars::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;
  transition:transform .24s ease,top .24s ease,background .24s ease;
}
.nav-toggle__bars::before{top:-6px}
.nav-toggle__bars::after{top:6px}
.site-header[data-open] .nav-toggle__bars{background:transparent}
.site-header[data-open] .nav-toggle__bars::before{top:0;transform:rotate(45deg)}
.site-header[data-open] .nav-toggle__bars::after{top:0;transform:rotate(-45deg)}

@media (min-width:900px){
  .nav-band__inner{flex-wrap:nowrap;gap:clamp(14px,2vw,30px)}
  .main-nav{
    order:0;flex:1 1 auto;max-height:none;overflow:visible;opacity:1;visibility:visible;border-top:0;
  }
  .main-nav__list{flex-direction:row;flex-wrap:wrap;gap:2px;padding:0}
  .main-nav__link{border:2px solid transparent;border-bottom-style:solid;padding:10px 14px}
  .nav-toggle{display:none}
  .nav-chip{display:inline-flex}
}

/* ---- 6. 页脚 ---------------------------------------------- */
.site-footer{background:var(--c-brown);border-top:3px solid var(--c-ink-deep);color:var(--c-paper)}
.site-footer .wrap{padding-top:clamp(38px,5vw,68px)}
.footer-grid{display:grid;gap:clamp(22px,3vw,38px);grid-template-columns:1fr}
@media (min-width:720px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.footer-grid{grid-template-columns:1.7fr 1fr 1fr 1.5fr}}
.footer-col{border-top:2px solid rgba(244,234,216,.2);padding-top:16px}
.footer-brand{display:inline-block;font-family:var(--font-display);font-size:26px;color:var(--c-cream);letter-spacing:-.01em}
.footer-brand:hover{color:var(--c-cyan)}
.footer-note{margin-top:12px;max-width:44ch;font-size:14.5px;color:var(--c-mist)}
.footer-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.footer-heading{
  margin-bottom:14px;font-family:var(--font-mono);font-weight:500;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-cyan);
}
.footer-list{display:grid;gap:9px}
.footer-link{font-size:15px;color:var(--c-paper);border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.footer-link:hover{color:var(--c-orange);border-bottom-color:var(--c-orange)}
.footer-link[aria-current="page"]{color:var(--c-cyan)}

.contact-list{display:grid;gap:2px}
.contact-item{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  padding:10px 0;border-bottom:1px dashed rgba(244,234,216,.22);
}
.contact-label{font-size:11.5px;letter-spacing:.1em;color:var(--c-gray);min-width:30px}
.contact-value{font-size:13.5px;color:var(--c-cream);word-break:break-all;flex:1 1 auto}
.copy-btn{
  padding:3px 10px;border:1px solid var(--c-gray);color:var(--c-mist);
  font-family:var(--font-mono);font-size:11.5px;
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.copy-btn:hover{border-color:var(--c-cyan);color:var(--c-cyan)}
.copy-btn[data-copied="true"]{background:var(--c-cyan);color:#04231C;border-color:var(--c-cyan)}
.copy-btn[data-copied="false"]{background:var(--c-red);color:var(--c-cream);border-color:var(--c-red)}
.footer-hint{margin-top:14px;font-size:12.5px;line-height:1.7;color:var(--c-mist)}

.footer-bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 22px;margin-top:clamp(28px,4vw,48px);
  border-top:2px solid rgba(244,234,216,.2);padding-block:18px 30px;
  font-size:12.5px;color:var(--c-mist);
}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 18px}
.footer-legal a:hover{color:var(--c-cyan)}
.footer-icp{color:var(--c-mist)}

/* ---- 7. 通用组件 ------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 20px;border:2px solid var(--c-brown);
  background:var(--c-orange);color:#1B1005;font-weight:600;font-size:15px;
  box-shadow:5px 5px 0 var(--c-brown);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--c-brown)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--c-brown)}
.btn--sm{padding:8px 14px;font-size:13.5px;box-shadow:var(--shadow-sm)}
.btn--cyan{background:var(--c-cyan);color:#04231C}
.btn--ghost{background:transparent;color:var(--c-paper);border-color:var(--c-gray);box-shadow:none}
.btn--ghost:hover{border-color:var(--c-cyan);color:var(--c-cyan);transform:none;box-shadow:none}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 9px;font-size:12px;line-height:1.6;
  border:1px solid var(--c-brown);background:var(--c-cream);color:var(--c-brown);
}
.tag--cyan{background:var(--c-cyan);color:#04231C}
.tag--orange{background:var(--c-orange);color:#1B1005}
.tag--alert{background:var(--c-red);color:var(--c-cream);border-color:var(--c-brown)}
.tag--ghost{background:transparent;color:var(--c-mist);border-color:var(--c-gray)}

.breadcrumb{margin-bottom:clamp(18px,2.4vw,30px)}
.breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12.5px;color:var(--c-mist)}
.breadcrumb__item{display:flex;align-items:center;gap:10px}
.breadcrumb__item+.breadcrumb__item::before{content:"/";color:var(--c-gray)}
.breadcrumb__link:hover{color:var(--c-cyan)}

.card{
  background:var(--c-cream);color:var(--c-brown);
  border:2px solid var(--c-brown);box-shadow:var(--shadow);
  padding:clamp(18px,2.6vw,28px);
}
.card--dark{background:var(--c-charcoal);color:var(--c-paper);border-color:var(--c-brown)}
.card__kicker{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-red)}
.card--dark .card__kicker{color:var(--c-orange)}
.card__title{margin-top:10px;font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.35}
.card__text{margin-top:10px;font-size:15px;line-height:1.75;color:inherit;opacity:.86}
.card__meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:14px;font-family:var(--font-mono);font-size:11.5px;color:var(--c-gray)}
.card--dark .card__meta{color:var(--c-mist)}
.card__foot{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;padding-top:14px;border-top:1px dashed rgba(42,31,26,.35)}
.card--dark .card__foot{border-top-color:rgba(244,234,216,.25)}

.stat{display:grid;gap:4px;padding:12px 14px;border-left:3px solid var(--c-cyan);background:rgba(20,20,20,.35)}
.stat__value{font-family:var(--font-mono);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.1;color:var(--c-cyan)}
.stat__label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;color:var(--c-mist)}

.data-rail{display:grid;gap:12px;margin-top:clamp(20px,3vw,32px)}
@media (min-width:1000px){.data-rail{position:sticky;top:24px;margin-top:0}}
.data-rail__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:10px 12px;border:1px solid var(--c-gray);background:rgba(20,20,20,.5);
  font-family:var(--font-mono);font-size:12.5px;color:var(--c-mist);
}
.data-rail__row--hot{border-color:var(--c-orange);color:var(--c-orange)}

.media{
  position:relative;overflow:hidden;border:2px solid var(--c-brown);
  background:
    repeating-linear-gradient(90deg,rgba(91,240,208,.08) 0 1px,transparent 1px 40px),
    linear-gradient(135deg,var(--c-ink-deep),var(--c-charcoal));
  box-shadow:var(--shadow);aspect-ratio:16/9;
}
.media--wide{aspect-ratio:21/9}
.media--tall{aspect-ratio:4/5}
.media--square{aspect-ratio:1/1}
.media__img{width:100%;height:100%;object-fit:cover}
.media__caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:7px 12px;background:rgba(20,20,20,.86);color:var(--c-cream);
  border-top:2px solid var(--c-brown);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em;
}
.media__label{
  position:absolute;top:10px;left:10px;
  padding:3px 9px;background:var(--c-cyan);color:#04231C;
  border:1px solid var(--c-brown);
  font-family:var(--font-mono);font-size:11.5px;
}

.filter-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:10px 12px;border:2px solid var(--c-brown);
  background:var(--c-cream);box-shadow:var(--shadow-sm);
}
.filter-bar__label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-gray);margin-right:4px}
.filter-btn{
  padding:5px 12px;border:2px solid var(--c-brown);
  background:var(--c-paper);color:var(--c-brown);
  font-family:var(--font-mono);font-size:12.5px;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.filter-btn:hover{transform:translateY(-1px);background:var(--c-cream)}
.filter-btn[aria-pressed="true"]{background:var(--c-ink-green);color:var(--c-cyan);box-shadow:var(--shadow-sm)}
.filter-empty{font-family:var(--font-mono);font-size:12.5px;color:var(--c-red)}
.is-filtering{opacity:.32;transition:opacity .16s ease}

/* ---- 8. 显现与动效 ---------------------------------------- */
html.js-on [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
html.js-on [data-reveal].is-visible{opacity:1;transform:none}

/* ---- 9. 可达性 -------------------------------------------- */
@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-on [data-reveal]{opacity:1!important;transform:none!important}
  .scroll-progress__fill{transition:none!important}
}