/* ============================================================
   华体会体育官网 — 共享站点样式 / site.css
   设计语言：极简文字建筑 · 精密网格 · 竞技深蓝
   ============================================================ */

/* ---------- 01 变量与重置 ---------- */

:root{
  color-scheme: dark;

  --ink:        #0A1F44;
  --ink-deep:   #071229;
  --panel:      #12294F;
  --orange:     #FF6B35;
  --cyan:       #00E5FF;
  --silver:     #C7CEDB;
  --frost:      #F2F5FA;
  --grid:       #5A6B85;
  --sand:       #FFB199;
  --ice:        #E8EDF5;

  --rule:       rgba(199,206,219,.16);
  --rule-soft:  rgba(199,206,219,.09);
  --muted:      rgba(199,206,219,.62);
  --dim:        rgba(199,206,219,.38);

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

  --shell:   1320px;
  --gutter:  clamp(20px,4.2vw,56px);
  --measure: 38em;
  --ease:    cubic-bezier(.22,.61,.36,1);

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-19: 19px;
  --fs-24: 24px;
  --fs-38: clamp(28px,3.2vw,38px);
  --fs-60: clamp(36px,5.4vw,60px);
  --fs-96: clamp(46px,8vw,96px);
  --fs-144:clamp(58px,11vw,144px);
}

*,
*::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,ul,ol,li,figure,blockquote,dl,dd,dt{
  margin:0;
  padding:0;
}

ul,ol{list-style:none;}

img,svg,video{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%;}

main{display:block;}

/* ---------- 02 基础排版 ---------- */

body{
  background:var(--ink);
  color:var(--frost);
  font-family:var(--font-sans);
  font-size:17px;
  font-weight:400;
  line-height:1.75;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}

@media (min-width:768px){
  body{font-size:18px;}
}

h1,h2,h3,h4{color:var(--frost);}

h1{
  font-size:var(--fs-96);
  font-weight:200;
  line-height:.98;
  letter-spacing:-.03em;
}

h2{
  font-size:var(--fs-60);
  font-weight:200;
  line-height:1.04;
  letter-spacing:-.028em;
}

h3{
  font-size:var(--fs-38);
  font-weight:300;
  line-height:1.16;
  letter-spacing:-.02em;
}

h4{
  font-size:var(--fs-24);
  font-weight:500;
  line-height:1.32;
  letter-spacing:-.01em;
}

p{max-width:var(--measure);}

strong{font-weight:600;color:var(--frost);}

::selection{
  background:var(--orange);
  color:var(--ink-deep);
}

/* ---------- 03 焦点与无障碍 ---------- */

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

#main-content{display:block;}
#main-content:focus{outline:none;}

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---------- 04 布局容器 ---------- */

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

.shell--narrow{max-width:960px;}

.section{padding-block:clamp(48px,7vw,110px);}

.section__head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:12px 22px;
  padding-bottom:20px;
  border-bottom:1px solid var(--rule);
  margin-bottom:clamp(28px,4vw,52px);
}

.grid{
  display:grid;
  gap:clamp(18px,2.4vw,32px);
}

.grid--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}

/* ---------- 05 通用文字与标签组件 ---------- */

.label,
.eyebrow{
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

.label--num{font-family:var(--font-mono);letter-spacing:.1em;}

.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border:1px solid var(--rule);
  font-size:12px;
  letter-spacing:.16em;
  line-height:1.4;
  color:var(--silver);
}

.tag--accent{
  border-color:rgba(255,107,53,.55);
  color:var(--sand);
}

.tag--info{
  border-color:rgba(0,229,255,.45);
  color:var(--cyan);
}

.panel{
  background:var(--panel);
  border:1px solid var(--rule);
  padding:clamp(20px,2.4vw,32px);
}

.prose{
  max-width:var(--measure);
  color:var(--silver);
  font-size:17px;
  line-height:1.75;
}

.prose > p + p{margin-top:1.05em;}

.prose h2,
.prose h3{
  color:var(--frost);
  margin-top:1.7em;
  margin-bottom:.6em;
}

.prose h3{font-size:var(--fs-24);font-weight:500;letter-spacing:-.01em;}

.prose ul,
.prose ol{
  margin-top:.9em;
  padding-left:1.2em;
}

.prose li{position:relative;margin-bottom:.5em;}
.prose ul li::before{
  content:"";
  position:absolute;
  left:-1.1em;
  top:.78em;
  width:6px;
  height:6px;
  background:var(--orange);
}

.prose a{
  color:var(--cyan);
  border-bottom:1px solid rgba(0,229,255,.4);
}

/* ---------- 06 按钮 ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:11px 20px;
  border:1px solid var(--rule);
  background:transparent;
  color:var(--frost);
  font-size:14px;
  font-weight:500;
  letter-spacing:.05em;
  line-height:1.25;
  white-space:nowrap;
  transition:background-color .2s var(--ease),
             color .2s var(--ease),
             border-color .2s var(--ease);
}

.btn--sm{
  padding:7px 14px;
  font-size:13px;
  letter-spacing:.06em;
}

.btn--primary{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--ink-deep);
  font-weight:600;
}

.btn--primary:hover{
  background:var(--sand);
  border-color:var(--sand);
  color:var(--ink-deep);
}

.btn--ghost{
  color:var(--silver);
  border-color:var(--rule);
}

.btn--ghost:hover{
  color:var(--cyan);
  border-color:var(--cyan);
  background:rgba(0,229,255,.06);
}

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

/* ---------- 07 面包屑 ---------- */

.crumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  font-size:12px;
  letter-spacing:.14em;
  color:var(--muted);
}

.crumb__sep{color:var(--grid);}

.crumb a{
  color:var(--silver);
  transition:color .2s var(--ease);
}

.crumb a:hover{color:var(--cyan);}

.crumb [aria-current="page"]{color:var(--cyan);}

/* ---------- 08 统计与折叠 ---------- */

.stat{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px 0;
  border-top:1px solid var(--rule);
}

.stat__label{
  font-size:12px;
  letter-spacing:.16em;
  color:var(--muted);
}

.stat__value{
  font-family:var(--font-mono);
  font-size:var(--fs-38);
  font-weight:600;
  line-height:1;
  color:var(--frost);
}

.stat__value--accent{color:var(--orange);}

.collapse{border-top:1px solid var(--rule);}

.collapse__head{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 0;
  cursor:pointer;
  list-style:none;
  color:var(--frost);
  font-size:var(--fs-19);
  font-weight:500;
  letter-spacing:-.01em;
}

.collapse__head::-webkit-details-marker{display:none;}

.collapse__head::after{
  content:"";
  flex:none;
  width:9px;
  height:9px;
  margin-left:auto;
  border-right:1px solid var(--cyan);
  border-bottom:1px solid var(--cyan);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .22s var(--ease);
}

.collapse[open] .collapse__head::after{
  transform:rotate(-135deg) translate(-2px,-2px);
}

.collapse__body{
  padding:0 0 26px;
  color:var(--silver);
}

/* ---------- 09 分段切换组件 ---------- */

.switcher__bar{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  border-bottom:1px solid var(--rule);
}

.switcher__tab{
  position:relative;
  padding:13px 20px;
  margin-bottom:-1px;
  border-bottom:2px solid transparent;
  font-size:15px;
  letter-spacing:.03em;
  color:var(--silver);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}

.switcher__tab:hover{color:var(--frost);}

.switcher__tab[aria-selected="true"]{
  color:var(--frost);
  border-bottom-color:var(--orange);
}

.switcher__panel{padding-top:clamp(24px,3vw,40px);}
.switcher__panel[hidden]{display:none;}

/* ---------- 10 媒体容器基础规则 ---------- */

.media{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--rule);
}

.media > img,
.media > picture > img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.94) contrast(1.06);
}

.media--wide{aspect-ratio:16/9;}
.media--band{aspect-ratio:21/9;}
.media--square{aspect-ratio:1/1;}
.media--tall{aspect-ratio:3/4;}

.media[data-placeholder]::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--rule-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule-soft) 1px,transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
}

.media__cap{
  position:absolute;
  left:0;
  bottom:0;
  max-width:100%;
  padding:9px 14px;
  background:rgba(7,18,41,.86);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--silver);
}

/* ---------- 11 头部：实况索引条 ---------- */

.site-header{
  position:sticky;
  top:0;
  z-index:500;
  background:var(--ink-deep);
  border-bottom:1px solid var(--rule);
}

.skip-link{
  position:absolute;
  left:var(--gutter);
  top:-120px;
  z-index:900;
  padding:10px 18px;
  background:var(--cyan);
  color:var(--ink-deep);
  font-size:14px;
  font-weight:600;
  letter-spacing:.06em;
  transition:top .2s var(--ease);
}

.skip-link:focus{top:8px;}

.ticker{
  height:36px;
  overflow:hidden;
  background:var(--ink-deep);
  border-bottom:1px solid var(--rule-soft);
  transition:height .3s var(--ease),opacity .22s var(--ease),border-color .3s var(--ease);
}

.ticker__inner{
  display:flex;
  align-items:center;
  gap:22px;
  height:36px;
}

.ticker__label{
  display:flex;
  align-items:center;
  gap:8px;
  flex:none;
  max-width:none;
  font-size:12px;
  font-weight:500;
  letter-spacing:.18em;
  color:var(--cyan);
}

.pulse{
  display:block;
  flex:none;
  width:6px;
  height:6px;
  background:var(--orange);
  animation:pulse 2s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{opacity:1;}
  50%{opacity:.2;}
}

.ticker__list{
  display:flex;
  align-items:center;
  flex:1;
  min-width:0;
  overflow:hidden;
}

.ticker__item{
  position:relative;
  flex:none;
  padding:0 20px;
  font-size:13px;
  letter-spacing:.02em;
  color:var(--muted);
  white-space:nowrap;
}

.ticker__item + .ticker__item::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:12px;
  background:var(--rule);
  transform:translateY(-50%);
}

/* ---------- 12 头部：品牌命令行 ---------- */

.cmdbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:76px;
  transition:min-height .3s var(--ease);
}

.brand{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
  padding:8px 0;
}

.brand__mark{
  font-size:22px;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.2;
  color:var(--frost);
  white-space:nowrap;
}

.brand__tag{
  padding-left:16px;
  border-left:1px solid var(--rule);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--muted);
  white-space:nowrap;
}

/* ---------- 13 头部：栏目命令带 ---------- */

.nav{
  background:var(--ink-deep);
  border-top:1px solid var(--rule-soft);
}

.nav__inner{
  display:flex;
  align-items:center;
  gap:20px;
  min-height:50px;
  transition:min-height .3s var(--ease);
}

.nav__list{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}

.nav__link{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  padding:15px 14px;
  font-size:15px;
  letter-spacing:.02em;
  color:var(--silver);
  transition:color .2s var(--ease);
}

.nav__idx{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:rgba(0,229,255,.5);
  transition:color .2s var(--ease);
}

.nav__link::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:8px;
  height:2px;
  background:var(--cyan);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .24s var(--ease),background-color .24s var(--ease);
}

.nav__link:hover{color:var(--frost);}
.nav__link:hover::after{transform:scaleX(1);}

.nav__link[aria-current="page"]{color:var(--frost);}
.nav__link[aria-current="page"] .nav__idx{color:var(--orange);}
.nav__link[aria-current="page"]::after{
  transform:scaleX(1);
  background:var(--orange);
}

.nav__actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}

/* ---------- 14 头部：菜单按钮与进度尺 ---------- */

.nav-toggle{
  display:none;
  position:relative;
  z-index:700;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid var(--rule);
  background:var(--ink-deep);
  color:var(--silver);
  font-size:13px;
  letter-spacing:.14em;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}

.nav-toggle:hover{
  border-color:var(--cyan);
  color:var(--cyan);
}

.nav-toggle__bars{
  position:relative;
  display:block;
  flex:none;
  width:18px;
  height:11px;
}

.nav-toggle__bars i{
  position:absolute;
  left:0;
  right:0;
  height:1.5px;
  background:currentColor;
  transition:transform .24s var(--ease);
}

.nav-toggle__bars i:first-child{top:0;}
.nav-toggle__bars i:last-child{bottom:0;}

[data-nav-toggle][aria-expanded="true"] .nav-toggle__bars i:first-child{
  transform:translateY(4.75px) rotate(45deg);
}

[data-nav-toggle][aria-expanded="true"] .nav-toggle__bars i:last-child{
  transform:translateY(-4.75px) rotate(-45deg);
}

.scroll-meter{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:transparent;
  pointer-events:none;
}

.scroll-meter__fill{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,var(--orange) 0%,var(--sand) 40%,var(--cyan) 100%);
  transform:scaleX(0);
  transform-origin:left center;
}

/* ---------- 15 头部：滚动收缩态 ---------- */

.site-header[data-condensed] .ticker{
  height:0;
  opacity:0;
  border-bottom-color:transparent;
}

.site-header[data-condensed] .cmdbar__inner{min-height:58px;}
.site-header[data-condensed] .nav__inner{min-height:44px;}
.site-header[data-condensed] .nav__link{padding-block:12px;}

/* ---------- 16 移动端导航抽屉 ---------- */

@media (max-width:1099px){

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

  .nav{
    position:fixed;
    inset:0;
    z-index:600;
    display:flex;
    flex-direction:column;
    padding:106px var(--gutter) 48px;
    background:var(--ink-deep);
    border-top:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .26s var(--ease),
               transform .26s var(--ease),
               visibility .26s linear;
  }

  .nav[data-open]{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }

  .nav .shell{
    max-width:none;
    width:100%;
    padding-inline:0;
  }

  .nav__inner{
    display:block;
    min-height:0;
  }

  .nav__list{display:block;}

  .nav__li{border-bottom:1px solid var(--rule);}

  .nav__link{
    display:flex;
    width:100%;
    padding:19px 2px;
    gap:14px;
    font-size:24px;
    font-weight:300;
    letter-spacing:-.01em;
    color:var(--silver);
  }

  .nav__idx{font-size:12px;}

  .nav__link::after{display:none;}

  .nav__link[aria-current="page"]{
    color:var(--orange);
  }

  .nav__link[aria-current="page"] .nav__idx{color:var(--orange);}

  .nav__actions{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    margin:32px 0 0;
  }

  .nav__actions .btn{
    justify-content:center;
    padding:14px 18px;
    font-size:15px;
  }
}

body[data-nav-open]{overflow:hidden;}

/* ---------- 17 页脚 ---------- */

.site-footer{
  background:var(--ink-deep);
  border-top:1px solid var(--rule);
  padding:clamp(44px,6vw,80px) 0 26px;
}

.footer__head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:14px 22px;
  padding-bottom:24px;
  border-bottom:1px solid var(--rule);
}

.footer__mark{
  max-width:none;
  font-size:clamp(30px,5vw,54px);
  font-weight:200;
  letter-spacing:-.02em;
  line-height:1.05;
  color:var(--frost);
}

.footer__tag{
  max-width:none;
  font-size:12px;
  letter-spacing:.18em;
  color:var(--muted);
}

.footer__body{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
  padding:clamp(30px,4vw,54px) 0;
  border-bottom:1px solid var(--rule);
}

.footer__cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:28px;
}

.footer__coltitle{
  padding-bottom:12px;
  margin-bottom:12px;
  border-bottom:1px solid var(--rule-soft);
  font-size:12px;
  font-weight:500;
  letter-spacing:.18em;
  line-height:1.5;
  color:var(--cyan);
}

.footer__link{
  position:relative;
  display:inline-block;
  padding:7px 0;
  font-size:15px;
  color:var(--silver);
  transition:color .2s var(--ease);
}

.footer__link::before{
  content:"";
  position:absolute;
  left:-15px;
  top:50%;
  width:8px;
  height:1px;
  background:var(--cyan);
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .2s var(--ease);
}

.footer__link:hover{color:var(--frost);}
.footer__link:hover::before{transform:scaleX(1);}

.contact__row{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:14px;
  padding:10px 0;
  border-bottom:1px solid var(--rule-soft);
}

.contact__row dt{
  font-size:12px;
  letter-spacing:.14em;
  color:var(--muted);
}

.contact__row dd{
  font-family:var(--font-mono);
  font-size:13px;
  line-height:1.65;
  color:var(--frost);
  word-break:break-word;
}

.footer__base{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px 24px;
  padding-top:26px;
  font-size:12px;
  letter-spacing:.14em;
  color:var(--muted);
}

.footer__base p{max-width:none;}

@media (min-width:860px){
  .footer__body{
    grid-template-columns:minmax(0,1.55fr) minmax(0,1.15fr);
    gap:clamp(28px,4vw,64px);
  }
}

/* ---------- 18 滚动显现 ---------- */

html.js [data-reveal]{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .34s var(--ease),transform .34s var(--ease);
}

html.js [data-reveal="in"]{
  opacity:1;
  transform:none;
}

/* ---------- 19 降低动效 ---------- */

@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.js [data-reveal]{
    opacity:1;
    transform:none;
  }
}

/* ---------- 20 窄屏微调 ---------- */

@media (max-width:600px){

  .brand__tag{display:none;}

  .ticker__list{gap:0;}

  .ticker__item{padding:0 14px;font-size:12px;}

  .cmdbar__inner{min-height:64px;}

  .brand__mark{font-size:19px;}

  .footer__mark{letter-spacing:-.01em;}

  .contact__row{grid-template-columns:1fr;gap:4px;}

  .footer__base{letter-spacing:.1em;}
}