/* =========================================================
   6688体育赛事 · 共享样式表  /assets/site.css
   夜场草坪绿 + 看台深蓝 + 记分牌琥珀 · 粗野框架式导航
   ========================================================= */

/* ---------- 01 设计变量 ---------- */
:root{
  --stand-blue:#0B1B2B;
  --night-ink:#05101A;
  --paper:#F4EEE2;
  --paper-dim:#E3D9C7;
  --pitch:#1E7A45;
  --pitch-deep:#12512F;
  --amber:#F0B429;
  --whistle:#D2412C;
  --scale:#8A93A0;
  --ink:#14202B;
  --ink-soft:#4A5560;

  --font-display:'Oswald','Barlow Condensed','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,'Courier New',monospace;

  --edge:clamp(1rem,4vw,3rem);
  --pad-section:clamp(2.75rem,6.5vw,5.5rem);
  --shadow-hard:6px 6px 0 rgba(11,27,43,.18);
  --shadow-ink:6px 6px 0 rgba(5,16,26,.5);
  --header-h:118px;
}

/* ---------- 02 基础重置 ---------- */
*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--night-ink);
}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(15px,0.45vw + 13.4px,17px);
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 视口框架：一圈看台深蓝硬边框，是版式的一部分 */
body::after{
  content:"";
  position:fixed;
  inset:0;
  border:3px solid var(--stand-blue);
  pointer-events:none;
  z-index:200;
}

img,svg,video,canvas{display:block;max-width:100%;}
button{font:inherit;color:inherit;}
a{color:var(--pitch);text-decoration:none;}
a:hover{color:var(--pitch-deep);}

/* ---------- 03 中文排版 ---------- */
h1,h2,h3,h4,h5{
  margin:0 0 .55em;
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.14;
  letter-spacing:.01em;
  color:inherit;
  text-wrap:balance;
}
h1{font-size:clamp(1.9rem,5.2vw,3.4rem);font-weight:800;}
h2{font-size:clamp(1.4rem,3.2vw,2.1rem);}
h3{font-size:clamp(1.1rem,2vw,1.4rem);}
h4{font-size:1.05rem;}

p{margin:0 0 1.1em;max-width:68ch;}
p:last-child{margin-bottom:0;}

strong,b{font-weight:600;}
small{font-size:.82em;}

ul,ol{margin:0 0 1.1em;padding-left:1.25em;}
li{margin-bottom:.35em;}

/* ---------- 04 可达性与焦点 ---------- */
:focus{outline:none;}
:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
}
.section--dark :focus-visible,
.section--ink :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible{
  outline-color:var(--amber);
}

.skip-link{
  position:absolute;
  left:var(--edge);
  top:-120px;
  z-index:300;
  padding:.6rem 1.1rem;
  background:var(--amber);
  color:var(--night-ink);
  font-family:var(--font-display);
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.1em;
  border:3px solid var(--night-ink);
  transition:top .15s ease;
}
.skip-link:focus{
  top:.75rem;
  color:var(--night-ink);
}

[id]{scroll-margin-top:calc(var(--header-h) + 16px);}
#main-content{scroll-margin-top:calc(var(--header-h) + 8px);}

/* ---------- 05 布局容器与网格 ---------- */
.wrap{
  width:100%;
  max-width:1360px;
  margin-inline:auto;
  padding-inline:var(--edge);
}
.wrap--narrow{max-width:940px;}
.wrap--wide{max-width:1560px;}

.section{padding-block:var(--pad-section);}
.section--tight{padding-block:clamp(1.5rem,3.5vw,2.75rem);}
.section--paper{background:var(--paper);}
.section--dim{background:var(--paper-dim);}
.section--dark{
  background:var(--stand-blue);
  color:var(--paper);
  border-top:3px solid var(--night-ink);
  border-bottom:3px solid var(--night-ink);
}
.section--ink{
  background:var(--night-ink);
  color:var(--paper);
}
.section--dark a,.section--ink a{color:var(--paper);}
.section--dark a:hover,.section--ink a:hover{color:var(--amber);}

.grid-12{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,2rem);
}
.col-3{grid-column:span 3;}
.col-4{grid-column:span 4;}
.col-5{grid-column:span 5;}
.col-6{grid-column:span 6;}
.col-7{grid-column:span 7;}
.col-8{grid-column:span 8;}
.col-9{grid-column:span 9;}
.col-12{grid-column:span 12;}

/* ---------- 06 按钮与标签 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.7rem 1.15rem;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.2;
  border:3px solid var(--stand-blue);
  border-radius:0;
  box-shadow:5px 5px 0 rgba(11,27,43,.4);
  cursor:pointer;
  text-decoration:none;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease,border-color .16s ease;
}
.btn:hover{
  transform:translate(3px,3px);
  box-shadow:2px 2px 0 rgba(11,27,43,.4);
  color:var(--ink);
}
.btn--sm{padding:.5rem .85rem;font-size:.78rem;box-shadow:4px 4px 0 rgba(5,16,26,.5);}
.btn--sm:hover{box-shadow:1px 1px 0 rgba(5,16,26,.5);}

.btn-amber{
  background:var(--amber);
  color:var(--night-ink);
  border-color:var(--night-ink);
  box-shadow:5px 5px 0 rgba(5,16,26,.55);
}
.btn-amber:hover{background:#d99f16;color:var(--night-ink);box-shadow:2px 2px 0 rgba(5,16,26,.55);}

.btn-pitch{
  background:var(--pitch);
  color:#fff;
  border-color:var(--pitch-deep);
  box-shadow:5px 5px 0 rgba(18,81,47,.4);
}
.btn-pitch:hover{background:var(--pitch-deep);color:#fff;box-shadow:2px 2px 0 rgba(18,81,47,.4);}

.btn-quiet{
  background:transparent;
  color:var(--paper);
  border-color:rgba(244,238,226,.45);
  box-shadow:none;
}
.btn-quiet:hover{
  background:rgba(244,238,226,.1);
  color:var(--paper);
  border-color:var(--amber);
  box-shadow:none;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.22rem .62rem;
  border:2px solid var(--pitch);
  background:transparent;
  color:var(--pitch-deep);
  font-family:var(--font-display);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.4;
  text-decoration:none;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.tag:hover{background:var(--pitch);color:#fff;border-color:var(--pitch-deep);}
.tag[aria-pressed="true"],
.tag--active{background:var(--pitch);color:#fff;border-color:var(--pitch-deep);}

/* ---------- 07 基础组件 ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin:0 0 .7rem;
  font-family:var(--font-display);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--pitch-deep);
  text-transform:uppercase;
}
.eyebrow::before{
  content:"";
  width:24px;
  height:3px;
  background:currentColor;
  flex:none;
}
.eyebrow--light{color:var(--amber);}

.lead{
  font-size:clamp(1rem,1.1vw + .72rem,1.16rem);
  color:var(--ink-soft);
  max-width:62ch;
}
.section--dark .lead,.section--ink .lead{color:rgba(244,238,226,.78);}

.rule{
  height:1px;
  border:0;
  margin:clamp(1.4rem,3vw,2.4rem) 0;
  background:rgba(20,32,43,.2);
}
.section--dark .rule,.section--ink .rule{background:rgba(244,238,226,.2);}

.num{
  font-family:var(--font-display);
  font-variant-numeric:tabular-nums;
  font-weight:700;
  letter-spacing:.01em;
}
.data-text{font-variant-numeric:tabular-nums;}

.stat{display:flex;flex-direction:column;gap:.15rem;}
.stat-value{
  font-family:var(--font-display);
  font-variant-numeric:tabular-nums;
  font-weight:800;
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  line-height:1;
  letter-spacing:.01em;
}
.stat-label{
  font-size:.78rem;
  letter-spacing:.12em;
  color:var(--ink-soft);
}
.section--dark .stat-label,.section--ink .stat-label{color:rgba(244,238,226,.68);}

.panel{
  position:relative;
  padding:clamp(1.15rem,2.4vw,1.9rem);
  background:var(--paper);
  border:3px solid var(--stand-blue);
  box-shadow:var(--shadow-hard);
}
.panel--dim{background:var(--paper-dim);}
.panel--dark{
  background:var(--stand-blue);
  color:var(--paper);
  border-color:var(--night-ink);
  box-shadow:var(--shadow-ink);
}

.breadcrumb{
  font-family:var(--font-display);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--scale);
}
.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin:0;
  padding:0;
  list-style:none;
}
.breadcrumb li{margin:0;}
.breadcrumb li + li::before{content:"/";margin-right:.4rem;color:var(--scale);}
.breadcrumb a{
  color:var(--stand-blue);
  border-bottom:1px solid rgba(11,27,43,.3);
}
.breadcrumb a:hover{color:var(--pitch-deep);border-bottom-color:var(--pitch);}
.section--dark .breadcrumb a,.section--ink .breadcrumb a{color:var(--paper);border-bottom-color:rgba(244,238,226,.4);}

/* ---------- 08 媒体容器（供页面阶段放置图片） ---------- */
.media{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--night-ink);
  border:3px solid var(--stand-blue);
  box-shadow:var(--shadow-hard);
}
.media > img,
.media > picture > img,
.media > video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(5,16,26,0) 46%,rgba(5,16,26,.6) 100%);
}
.media--pitch::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(244,238,226,.07) 0 2px,transparent 2px 28px);
}
.media--16x9{aspect-ratio:16/9;}
.media--4x3{aspect-ratio:4/3;}
.media--1x1{aspect-ratio:1/1;}
.media--21x9{aspect-ratio:21/9;}
.media--tall{aspect-ratio:3/4;}

.figure{margin:0;}
.figure-caption{
  margin-top:.6rem;
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--ink-soft);
}
.section--dark .figure-caption,.section--ink .figure-caption{color:rgba(244,238,226,.66);}

/* ---------- 09 页头：框架式吸顶导航 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:90;
  flex:none;
  background:var(--stand-blue);
  color:var(--paper);
  border-bottom:3px solid var(--night-ink);
}
.site-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-3px;
  height:3px;
  background:var(--pitch);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .2s ease;
}
.site-header[data-scrolled]::after{transform:scaleX(1);}

.header-inner{
  width:100%;
  max-width:1400px;
  margin-inline:auto;
  padding-inline:var(--edge);
  position:relative;
}

.header-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-block:.8rem;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  color:inherit;
  text-decoration:none;
}
.brand:hover{color:inherit;}

.brand-mark{
  position:relative;
  flex:none;
  width:42px;
  height:42px;
  background:var(--pitch);
  border:3px solid var(--amber);
  box-shadow:3px 3px 0 rgba(5,16,26,.6);
}
.brand-mark::before{
  content:"";
  position:absolute;
  inset:7px;
  border:2px solid rgba(244,238,226,.85);
  border-radius:50%;
}
.brand-mark::after{
  content:"";
  position:absolute;
  left:50%;
  top:-3px;
  bottom:-3px;
  width:2px;
  background:var(--amber);
  transform:translateX(-50%);
}

.brand-copy{display:flex;flex-direction:column;}
.brand-name{
  font-family:var(--font-display);
  font-size:clamp(1.02rem,1.4vw,1.28rem);
  font-weight:700;
  letter-spacing:.06em;
  line-height:1.15;
}
.brand-tag{
  font-size:.7rem;
  letter-spacing:.14em;
  color:rgba(244,238,226,.62);
  margin-top:2px;
}

.header-status{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  margin:0;
  font-family:var(--font-display);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.16em;
  color:rgba(244,238,226,.7);
}
.status-dot{
  flex:none;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--amber);
}

.nav-toggle{
  display:none;
  align-items:center;
  gap:.5rem;
  padding:.5rem .7rem;
  background:transparent;
  color:var(--paper);
  border:3px solid rgba(244,238,226,.45);
  cursor:pointer;
  font-family:var(--font-display);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.12em;
  transition:border-color .16s ease,background-color .16s ease;
}
.nav-toggle:hover{border-color:var(--amber);background:rgba(244,238,226,.08);}
.nav-toggle-icon{display:inline-flex;flex-direction:column;gap:3px;width:18px;}
.nav-toggle-icon span{display:block;height:2px;background:currentColor;transition:transform .16s ease,opacity .16s ease;}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

.site-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-block:.35rem;
  border-top:1px solid rgba(244,238,226,.16);
}

.nav-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.1rem;
  margin:0;
  padding:0;
  list-style:none;
}
.nav-list li{margin:0;}
.nav-list a{
  position:relative;
  display:block;
  padding:.62rem .85rem .62rem 1.5rem;
  color:rgba(244,238,226,.82);
  font-family:var(--font-display);
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.12em;
  text-decoration:none;
  border:2px solid transparent;
  transition:color .16s ease,background-color .16s ease,border-color .16s ease;
}
.nav-list a::before{
  content:"";
  position:absolute;
  left:.58rem;
  top:50%;
  width:7px;
  height:7px;
  background:var(--amber);
  transform:translateY(-50%) scale(0);
  transition:transform .16s ease;
}
.nav-list a:hover{color:var(--paper);background:rgba(244,238,226,.08);}
.nav-list a[aria-current="page"]{color:var(--paper);}
.nav-list a[aria-current="page"]::before{transform:translateY(-50%) scale(1);}
.nav-list a[href="/business/"]{
  color:var(--amber);
  border-color:var(--amber);
}
.nav-list a[href="/business/"]::before{background:var(--night-ink);}
.nav-list a[href="/business/"]:hover{background:var(--amber);color:var(--night-ink);}

.nav-actions{display:flex;align-items:center;gap:.6rem;}

/* ---------- 10 页脚 ---------- */
.site-footer{
  flex:none;
  margin-top:auto;
  background:var(--stand-blue);
  color:var(--paper);
  border-top:3px solid var(--night-ink);
}
.site-footer::before{
  content:"";
  display:block;
  height:8px;
  background:repeating-linear-gradient(90deg,var(--pitch) 0 4px,transparent 4px 78px);
}
.footer-inner{display:block;}

.footer-top{
  display:grid;
  grid-template-columns:minmax(220px,1fr) 2.4fr;
  gap:clamp(1.5rem,4vw,3.5rem);
  padding-block:clamp(2.4rem,6vw,4rem) clamp(1.5rem,3vw,2.5rem);
}

.footer-mark{
  display:block;
  width:52px;
  height:6px;
  margin-bottom:.9rem;
  background:linear-gradient(90deg,var(--pitch) 0 62%,var(--amber) 62% 100%);
}
.footer-brand-name{
  margin:0 0 .3rem;
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1.2;
}
.footer-brand-line{
  margin:0;
  max-width:26ch;
  font-size:.86rem;
  letter-spacing:.06em;
  color:rgba(244,238,226,.6);
}

.footer-cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,3vw,2rem);
}
.footer-col ul{margin:0;padding:0;list-style:none;}
.footer-col li{margin:0;}
.footer-col-title{
  margin:0 0 .8rem;
  font-family:var(--font-display);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--amber);
}
.footer-col a{
  display:inline-block;
  padding:.3rem 0;
  color:rgba(244,238,226,.78);
  font-size:.92rem;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.footer-col a:hover{color:var(--paper);border-bottom-color:var(--amber);}

.footer-contact{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem 2rem;
  padding-block:clamp(1.25rem,3vw,1.75rem);
  border-top:1px solid rgba(244,238,226,.16);
  border-bottom:1px solid rgba(244,238,226,.16);
}
.footer-contact-item{margin:0;display:flex;flex-direction:column;gap:.2rem;}
.footer-key{
  font-family:var(--font-display);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.18em;
  color:rgba(244,238,226,.55);
}
.footer-value{font-size:.94rem;color:var(--paper);}
.footer-value--mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  word-break:break-word;
}

.footer-base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.6rem 1.5rem;
  padding-block:1.25rem 1.75rem;
  font-size:.8rem;
  color:rgba(244,238,226,.6);
}
.footer-base p{margin:0;max-width:none;}
.footer-icp{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.footer-year{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

/* ---------- 11 动效 ---------- */
@keyframes rise-in{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:none;}
}
[data-reveal].is-visible{animation:rise-in .16s ease-out both;}

/* ---------- 12 响应式 ---------- */
@media (max-width:1024px){
  :root{--header-h:112px;}
  .col-3,.col-4{grid-column:span 6;}
  .col-5,.col-6,.col-7,.col-8,.col-9{grid-column:span 12;}
  .footer-top{grid-template-columns:1fr;}
  .footer-cols{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (max-width:900px){
  :root{--header-h:76px;}

  .header-bar{padding-block:.6rem;flex-wrap:wrap;}
  .header-status{display:none;}
  .nav-toggle{display:inline-flex;margin-left:auto;}

  .site-nav{
    display:none;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding-block:.5rem 1.1rem;
    max-height:calc(100vh - 100px);
    overflow-y:auto;
  }
  .site-nav[data-open]{display:block;}
  html[data-nav-open]{overflow:hidden;}

  .nav-list{flex-direction:column;align-items:stretch;gap:0;}
  .nav-list a{
    padding:.85rem .6rem .85rem 1.6rem;
    font-size:.95rem;
    border-bottom:1px solid rgba(244,238,226,.12);
    border-left:0;
    border-right:0;
    border-top:0;
  }
  .nav-list a[href="/business/"]{border-bottom-color:rgba(240,180,41,.5);}
  .nav-actions{flex-direction:column;align-items:stretch;gap:.6rem;margin-top:1rem;}
  .nav-actions .btn{width:100%;}
}

@media (max-width:640px){
  :root{--edge:1rem;}
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{grid-column:span 12;}
  .footer-cols{grid-template-columns:1fr 1fr;}
  .footer-base{flex-direction:column;align-items:flex-start;}
  h1{font-size:clamp(1.7rem,8vw,2.4rem);}
}

/* ---------- 13 降级 ---------- */
@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;
  }
  [data-reveal].is-visible{animation:none;}
  .btn:hover{transform:none;}
  .site-header::after{transition:none;}
}