/* =========================================================
   杏运赛场 · victory-xingyun.com.cn
   site.css —— 共享外壳与通用组件（版本 V3.1）
   ========================================================= */

/* ---------- 1. 设计变量 ---------- */
:root{
  --c-orange:#F07A2B;
  --c-orange-deep:#C2571B;
  --c-ink-green:#102F26;
  --c-field:#1D4E3E;
  --c-cream:#F6EFE1;
  --c-paper:#FFFDF6;
  --c-cyan:#2FD8C2;
  --c-cyan-deep:#0B7A6B;
  --c-graphite:#1E2420;
  --c-mist:#6A736C;
  --c-line:#D8CDB8;
  --c-alert:#B8392C;

  --font-display:"Barlow Condensed","Oswald","Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono","JetBrains Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;

  --maxw:1240px;
  --gutter:24px;
  --radius:2px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur-fast:180ms;
  --dur-base:220ms;
  --header-h:72px;
  --header-h-compact:56px;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

body{
  margin:0;
  background-color:var(--c-cream);
  color:var(--c-graphite);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}

h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding-inline-start:1.2em}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,picture,video{display:block;max-width:100%}
svg{overflow:visible}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
table{border-collapse:collapse;width:100%}

/* ---------- 3. 中文排版与标题 ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.01em;
  color:var(--c-graphite);
  text-wrap:balance;
}
h1{font-size:clamp(38px,5.4vw,64px)}
h2{font-size:clamp(26px,3.4vw,36px)}
h3{font-size:clamp(19px,2.2vw,24px);line-height:1.2}
h4{font-size:17px;line-height:1.3}

p{text-wrap:pretty}
strong{font-weight:700}

#main-content{display:block;scroll-margin-top:calc(var(--header-h) + 16px)}
#main-content:focus{outline:none}

/* ---------- 4. 布局工具 ---------- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{padding-block:64px}
.section--tight{padding-block:40px}

.grid{display:grid;gap:20px}
.grid--7-5{grid-template-columns:7fr 5fr}
.grid--8-4{grid-template-columns:8fr 4fr}
.grid--5-4-3{grid-template-columns:5fr 4fr 3fr}

/* ---------- 5. 通用按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 16px;
  border:1px solid transparent;
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.02em;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease);
}
.btn--primary{
  background-color:var(--c-orange);
  border-color:var(--c-orange);
  color:var(--c-ink-green);
}
.btn--primary:hover{
  background-color:var(--c-orange-deep);
  border-color:var(--c-orange-deep);
  color:var(--c-paper);
}
.btn--ghost{
  background-color:transparent;
  border-color:var(--c-line);
  color:var(--c-graphite);
}
.btn--ghost:hover{
  border-color:var(--c-ink-green);
  background-color:rgba(16,47,38,.06);
}

/* ---------- 6. 页头 ---------- */
.skip-link{
  position:absolute;
  left:16px;
  top:-64px;
  z-index:95;
  padding:9px 16px;
  border-radius:var(--radius);
  background-color:var(--c-ink-green);
  color:var(--c-paper);
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{top:12px}

.site-header{
  position:sticky;
  top:0;
  z-index:70;
  background-color:var(--c-cream);
  border-bottom:1px solid var(--c-line);
}

.header-inner{
  display:flex;
  align-items:center;
  gap:22px;
  height:var(--header-h);
  transition:height var(--dur-base) var(--ease);
}
.site-header.is-compact .header-inner{height:var(--header-h-compact)}

/* 品牌 */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  text-decoration:none;
  color:var(--c-graphite);
}
.brand__mark{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 auto;
  border-radius:var(--radius);
  background-color:var(--c-orange);
  color:var(--c-ink-green);
  clip-path:polygon(0 0,100% 0,100% 74%,50% 100%,0 74%);
  transition:background-color var(--dur-fast) var(--ease);
}
.brand:hover .brand__mark{background-color:var(--c-orange-deep);color:var(--c-paper)}
.brand__text{display:flex;flex-direction:column;gap:1px;min-width:0}
.brand__name{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:.02em;
}
.brand__sub{
  font-family:var(--font-mono);
  font-size:9.5px;
  line-height:1.3;
  letter-spacing:.13em;
  color:var(--c-mist);
  white-space:nowrap;
  transition:opacity var(--dur-base) var(--ease);
}
.site-header.is-compact .brand__sub{opacity:.55}

/* 导航 */
.nav{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
.nav__list{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:2px;
  counter-reset:nav-i;
}
.nav__item{counter-increment:nav-i;display:flex}
.nav__link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px 9px;
  border-radius:var(--radius);
  color:var(--c-graphite);
  font-size:14.5px;
  font-weight:500;
  line-height:1.25;
  white-space:nowrap;
  transition:color var(--dur-fast) var(--ease),
             background-color var(--dur-fast) var(--ease);
}
.nav__link::before{
  content:counter(nav-i,decimal-leading-zero);
  font-family:var(--font-mono);
  font-size:10px;
  line-height:1;
  letter-spacing:.1em;
  color:var(--c-mist);
  transition:color var(--dur-fast) var(--ease);
}
.nav__link::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:3px;
  height:2px;
  background-color:var(--c-orange);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform var(--dur-base) var(--ease);
}
.nav__link:hover{background-color:rgba(16,47,38,.05)}
.nav__link:hover::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{
  color:var(--c-ink-green);
  font-weight:700;
}
.nav__link[aria-current="page"]::after{
  background-color:var(--c-cyan-deep);
  transform:scaleX(1);
}
.nav__link[aria-current="page"]::before{color:var(--c-orange-deep)}

/* 右侧操作区 */
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.status-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 11px;
  border:1px solid var(--c-field);
  border-radius:var(--radius);
  background-color:var(--c-ink-green);
  color:var(--c-cream);
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.4;
  letter-spacing:.05em;
  white-space:nowrap;
}
.status-chip__dot{
  width:6px;
  height:6px;
  flex:0 0 auto;
  border-radius:50%;
  background-color:var(--c-cyan);
  box-shadow:0 0 0 3px rgba(47,216,194,.18);
  animation:chip-pulse 2.6s var(--ease) infinite;
}
@keyframes chip-pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(47,216,194,.18)}
  50%{box-shadow:0 0 0 5px rgba(47,216,194,.1)}
}

/* 移动导航按钮 */
.nav-toggle{
  display:none;
  align-items:center;
  gap:9px;
  padding:8px 12px;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  color:var(--c-graphite);
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  transition:border-color var(--dur-fast) var(--ease),
             background-color var(--dur-fast) var(--ease);
}
.nav-toggle:hover{border-color:var(--c-ink-green);background-color:rgba(16,47,38,.05)}
.nav-toggle__bars{display:grid;gap:4px;width:18px}
.nav-toggle__bars span{
  display:block;
  height:2px;
  background-color:currentColor;
  transition:transform var(--dur-base) var(--ease),
             opacity var(--dur-fast) var(--ease);
}
.nav-toggle__label{line-height:1}

.site-header[data-open] .nav-toggle{
  border-color:var(--c-ink-green);
  background-color:var(--c-ink-green);
  color:var(--c-cream);
}
.site-header[data-open] .nav-toggle__bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-header[data-open] .nav-toggle__bars span:nth-child(2){opacity:0}
.site-header[data-open] .nav-toggle__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- 7. 页脚 ---------- */
.site-footer{
  margin-top:80px;
  background-color:var(--c-ink-green);
  color:var(--c-cream);
}

.footer-band{
  background-image:linear-gradient(105deg,rgba(240,122,43,.16) 0%,rgba(240,122,43,0) 54%);
  background-color:var(--c-field);
  border-bottom:1px solid rgba(246,239,225,.14);
}
.footer-band__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:18px 40px;
  padding-block:26px;
}
.footer-band__claim{
  max-width:24ch;
  font-family:var(--font-display);
  font-size:clamp(19px,2.2vw,25px);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.005em;
  color:var(--c-paper);
}
.footer-quick{
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  font-size:14px;
  font-weight:700;
}
.footer-quick a{
  position:relative;
  display:inline-block;
  padding-bottom:3px;
  color:var(--c-paper);
}
.footer-quick a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background-color:var(--c-cyan);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform var(--dur-base) var(--ease);
}
.footer-quick a:hover::after{transform:scaleX(1)}

.footer-main{padding-block:48px 8px}
.footer-grid{
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr 1.15fr;
  gap:36px 32px;
}

.footer-brand__name{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.02em;
  color:var(--c-paper);
}
.footer-brand__sub{
  margin-top:4px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:rgba(246,239,225,.62);
}
.footer-brand__meta{
  margin-top:14px;
  font-size:12.5px;
  color:rgba(246,239,225,.6);
}
.footer-brand__meta .num{color:var(--c-cyan);font-size:12.5px}

.footer-col__title{
  margin-bottom:12px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:.18em;
  color:var(--c-cyan);
}
.footer-list{display:grid;gap:7px;font-size:14.5px;line-height:1.6}
.footer-list a{
  color:rgba(246,239,225,.82);
  transition:color var(--dur-fast) var(--ease);
}
.footer-list a:hover{color:var(--c-cyan);text-decoration:underline;text-underline-offset:3px}
.footer-list--plain{color:rgba(246,239,225,.78)}
.mono-line{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.02em;
  word-break:break-all;
}

.footer-note{
  margin-top:36px;
  padding-top:16px;
  border-top:1px solid rgba(246,239,225,.14);
  font-size:12.5px;
  line-height:1.7;
  color:rgba(246,239,225,.58);
}

.footer-legal{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px 24px;
  padding-block:18px 30px;
  border-top:1px solid rgba(246,239,225,.14);
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.7;
  letter-spacing:.04em;
  color:rgba(246,239,225,.58);
}
.footer-legal__copy{margin:0}
.footer-legal__links{display:flex;flex-wrap:wrap;gap:6px 20px}
.footer-legal__links a{color:rgba(246,239,225,.8)}
.footer-legal__links a:hover{color:var(--c-cyan);text-decoration:underline;text-underline-offset:3px}

/* ---------- 8. 通用组件 ---------- */
.index-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.4;
  letter-spacing:.18em;
  color:var(--c-cyan-deep);
}
.index-label::before{
  content:"";
  width:18px;
  height:2px;
  flex:0 0 auto;
  background-color:currentColor;
}
.index-label--light{color:var(--c-cyan)}

.num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  font-weight:600;
  letter-spacing:-.01em;
}

.panel{
  position:relative;
  padding:22px 24px;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  background-color:var(--c-paper);
}
.panel--stack{box-shadow:7px 7px 0 0 var(--c-line)}
.panel--dark{
  background-color:var(--c-ink-green);
  border-color:var(--c-field);
  color:var(--c-cream);
  box-shadow:7px 7px 0 0 var(--c-field);
}
.panel--dark h2,
.panel--dark h3,
.panel--dark h4{color:var(--c-paper)}

.prose{max-width:68ch}
.prose > * + *{margin-top:1.2em}
.prose h2{margin-top:1.8em;margin-bottom:.55em}
.prose h3{margin-top:1.6em;margin-bottom:.5em}
.prose p{margin:0}
.prose ul,.prose ol{margin-block:1.1em;padding-inline-start:1.3em}
.prose li + li{margin-top:.4em}
.prose a{
  color:var(--c-cyan-deep);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.prose a:hover{color:var(--c-orange-deep)}

.breadcrumb{
  padding-block:18px 4px;
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.6;
  letter-spacing:.05em;
  color:var(--c-mist);
}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.breadcrumb li{display:inline-flex;align-items:center;gap:6px}
.breadcrumb li + li::before{content:"/";color:var(--c-line)}
.breadcrumb a{color:var(--c-cyan-deep)}
.breadcrumb a:hover{text-decoration:underline;text-underline-offset:3px}
.breadcrumb [aria-current="page"]{color:var(--c-graphite);font-weight:500}

/* 图片容器基础规则（页面阶段放置占位图） */
.media-frame{
  position:relative;
  display:block;
  overflow:hidden;
  isolation:isolate;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  background-color:var(--c-field);
}
.media-frame > img,
.media-frame > picture > img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.media-frame--wide{aspect-ratio:16/9}
.media-frame--strip{aspect-ratio:21/9}
.media-frame--square{aspect-ratio:1/1}
.media-frame--tall{aspect-ratio:3/4}
.media-frame--paper{background-color:var(--c-paper)}

.media-frame--court::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-color:var(--c-field);
  background-image:
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(47,216,194,.34) calc(50% - .5px),rgba(47,216,194,.34) calc(50% + .5px),transparent calc(50% + .5px)),
    radial-gradient(circle at 50% 50%,transparent 0 32px,rgba(47,216,194,.34) 32px 33px,transparent 33px);
}
.media-frame > img,
.media-frame > picture{position:relative;z-index:1}

.media-frame__tag{
  position:absolute;
  left:0;
  bottom:0;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  background-color:var(--c-ink-green);
  color:var(--c-cyan);
  font-family:var(--font-mono);
  font-size:10.5px;
  line-height:1.4;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.media-frame__caption{
  padding-top:8px;
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--c-mist);
}

/* 滚动进度（由 site.js 注入） */
.scroll-progress{
  position:fixed;
  inset-block-start:0;
  inset-inline-start:0;
  z-index:85;
  width:100%;
  height:2px;
  pointer-events:none;
  background-image:linear-gradient(90deg,var(--c-orange),var(--c-cyan));
  transform:scaleX(0);
  transform-origin:0 50%;
}

/* ---------- 9. 焦点可见 ---------- */
:focus-visible{
  outline:2px solid var(--c-cyan-deep);
  outline-offset:2px;
  border-radius:var(--radius);
}
.site-footer :focus-visible,
.panel--dark :focus-visible{outline-color:var(--c-cyan)}

/* ---------- 10. 响应式 ---------- */
@media (max-width:1139px){
  .status-chip{display:none}
  .header-cta{display:none}
  .brand__sub{display:none}
  .nav-toggle{display:inline-flex}
  .header-inner{gap:16px}

  .nav{
    position:absolute;
    inset-inline:0;
    top:100%;
    display:none;
    justify-content:stretch;
    padding:8px var(--gutter) 20px;
    background-color:var(--c-ink-green);
    border-bottom:1px solid var(--c-field);
    box-shadow:0 12px 24px rgba(16,47,38,.22);
  }
  .site-header[data-open] .nav{display:block}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__item{display:block;border-bottom:1px solid rgba(246,239,225,.12)}
  .nav__item:last-child{border-bottom:0}
  .nav__link{
    width:100%;
    justify-content:space-between;
    padding:14px 4px;
    border-radius:0;
    color:rgba(246,239,225,.9);
    font-size:16px;
    font-weight:600;
  }
  .nav__link::before{
    order:2;
    font-size:11px;
    letter-spacing:.16em;
    color:rgba(47,216,194,.72);
  }
  .nav__link::after{left:4px;right:4px;bottom:0;height:2px;background-color:var(--c-cyan)}
  .nav__link:hover{background-color:rgba(47,216,194,.08)}
  .nav__link[aria-current="page"]{color:var(--c-paper);background-color:rgba(47,216,194,.1)}
  .nav__link[aria-current="page"]::before{color:var(--c-cyan)}
}

@media (max-width:1000px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px 24px}
  .footer-band__inner{padding-block:22px}
}

@media (max-width:900px){
  .grid--7-5,
  .grid--8-4,
  .grid--5-4-3{grid-template-columns:1fr}
  .section{padding-block:48px}
  .section--tight{padding-block:32px}
  .site-footer{margin-top:56px}
}

@media (max-width:640px){
  :root{--gutter:18px}
  body{font-size:16px}
  .header-inner{height:62px}
  .site-header.is-compact .header-inner{height:54px}
  .brand__mark{width:30px;height:30px}
  .brand__name{font-size:17px}
  .nav-toggle__label{display:none}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-main{padding-block:36px 4px}
  .footer-band__claim{max-width:none}
  .footer-legal{flex-direction:column;align-items:flex-start}
  .panel{padding:18px 18px}
}

/* ---------- 11. 动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .status-chip__dot{animation:none}
}