/* =========================================================
   华体会赛场 · Site Kit 共享样式  /assets/site.css
   沉淀：暗色指挥台 + 编辑部网格 + 信号脉冲
   ========================================================= */

:root{
  /* 底色 */
  --c-ink:#05110C;
  --c-charcoal:#0B0F0D;
  --c-pine:#10231C;
  /* 高亮 */
  --c-lime:#C8FF3D;
  --c-orange:#FF6B2C;
  /* 文字 */
  --c-mist:#EDF4EF;
  --c-text:#DCE7E1;
  --c-silver:#9EADA7;
  --c-dim:#6B8177;
  /* 结构 */
  --c-moss:#2C463C;
  --c-mint:#75E6C1;
  --c-ember:#7A2E12;

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

  --fs-100:.75rem;
  --fs-200:.875rem;
  --fs-300:1rem;
  --fs-400:1.0625rem;
  --fs-500:1.25rem;
  --fs-600:clamp(1.375rem,1.1rem + 1.1vw,1.75rem);
  --fs-700:clamp(1.9rem,1.25rem + 2.6vw,2.75rem);
  --fs-800:clamp(2.5rem,1.4rem + 4.6vw,4.5rem);
  --fs-900:clamp(3rem,1.1rem + 8.6vw,7.5rem);

  --header-h:68px;
  --gutter:clamp(18px,4vw,40px);
  --shell:1400px;
  --r-sm:10px;
  --r-md:18px;
  --r-lg:28px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (min-width:900px){
  :root{ --header-h:84px; }
}

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

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

body{
  margin:0;
  padding-block-start:var(--header-h);
  background:var(--c-ink);
  color:var(--c-text);
  font-family:var(--font-body);
  font-size:var(--fs-300);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,picture,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }

/* ---------- 中文排版与基础元素 ---------- */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.02em;
  color:var(--c-mist);
  margin:0 0 .55em;
  text-wrap:balance;
}
h1{ font-size:var(--fs-900); letter-spacing:-.04em; line-height:.92; }
h2{ font-size:var(--fs-700); letter-spacing:-.03em; }
h3{ font-size:var(--fs-600); letter-spacing:-.02em; }
h4{ font-size:var(--fs-500); }

p{ margin:0 0 1.1em; }
p:last-child{ margin-block-end:0; }

strong,b{ color:var(--c-mist); font-weight:700; }

a{
  color:var(--c-mint);
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  transition:color .16s var(--ease);
}
a:hover{ color:var(--c-lime); }

ul,ol{ margin:0 0 1.1em; padding-inline-start:1.3em; }
li{ margin-block-end:.35em; }

hr,.rule{
  height:1px;
  border:0;
  margin:clamp(24px,4vw,40px) 0;
  background:linear-gradient(90deg,var(--c-moss),rgba(44,70,60,0));
}

.num{
  font-family:var(--font-mono);
  font-weight:600;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}

::selection{ background:var(--c-lime); color:#06170E; }

/* ---------- 焦点与无障碍 ---------- */
:where(a,button,[tabindex],summary,input,select,textarea):focus-visible{
  outline:2px solid var(--c-mint);
  outline-offset:3px;
  border-radius:6px;
}
:where(a,button):focus:not(:focus-visible){ outline:none; }

.skip-link{
  position:absolute;
  inset-block-start:10px;
  inset-inline-start:50%;
  transform:translate(-50%,-220%);
  z-index:500;
  display:inline-block;
  padding:.62rem 1.2rem;
  border-radius:999px;
  background:var(--c-lime);
  color:#06170E;
  font-size:var(--fs-200);
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  transition:transform .2s var(--ease);
}
.skip-link:focus{ transform:translate(-50%,0); color:#06170E; }

.visually-hidden{
  position:absolute;
  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;
}

/* 顶部阅读进度（由 JS 注入） */
.read-progress{
  position:fixed;
  inset-block-start:0;
  inset-inline-start:0;
  z-index:600;
  width:100%;
  height:3px;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--c-lime),var(--c-mint) 62%,var(--c-orange));
  pointer-events:none;
  will-change:transform;
}

/* =========================================================
   页头
   ========================================================= */
.site-header{
  position:fixed;
  inset-block-start:0;
  inset-inline:0;
  z-index:200;
  background-color:rgba(5,17,12,.42);
  -webkit-backdrop-filter:blur(10px) saturate(130%);
  backdrop-filter:blur(10px) saturate(130%);
  border-block-end:1px solid transparent;
  transition:background-color .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease);
}
.site-header[data-scrolled]{
  background-color:rgba(11,15,13,.96);
  border-block-end-color:var(--c-moss);
  box-shadow:0 22px 48px -36px #000;
}

.header-inner{
  display:flex;
  align-items:center;
  gap:clamp(12px,2vw,32px);
  width:min(var(--shell),100%);
  margin-inline:auto;
  padding-inline:var(--gutter);
  height:var(--header-h);
}

.header-signal{
  position:absolute;
  inset-block-end:0;
  inset-inline:0;
  height:1px;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(90deg,transparent,var(--c-lime) 18%,var(--c-mint) 50%,var(--c-orange) 82%,transparent);
  transition:opacity .3s var(--ease);
}
.site-header[data-scrolled] .header-signal{ opacity:.85; }

/* 品牌 */
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  color:var(--c-mist);
  text-decoration:none;
}
.brand:hover{ color:var(--c-mist); }

.brand-mark{
  position:relative;
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:var(--r-sm);
  border:1px solid var(--c-moss);
  background:linear-gradient(145deg,var(--c-pine),var(--c-charcoal));
  display:grid;
  place-items:center;
  overflow:hidden;
}
.brand-mark::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:2px;
  background:var(--c-lime);
  transform:rotate(45deg);
  box-shadow:0 0 0 3px rgba(200,255,61,.14),0 0 14px rgba(200,255,61,.5);
}
.brand-mark::after{
  content:"";
  position:absolute;
  inset:auto -30% -55% auto;
  width:65%;
  height:130%;
  background:linear-gradient(120deg,transparent,rgba(200,255,61,.2));
  transform:rotate(18deg);
}

.brand-text{ display:flex; flex-direction:column; gap:1px; }
.brand-name{
  font-family:var(--font-display);
  font-size:1.0625rem;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.15;
  color:var(--c-mist);
}
.brand-tagline{
  font-family:var(--font-mono);
  font-size:.625rem;
  font-weight:500;
  letter-spacing:.2em;
  line-height:1.2;
  color:var(--c-silver);
}

/* 主导航 */
.site-nav{ margin-inline-start:auto; }

.nav-list{
  display:flex;
  align-items:center;
  gap:clamp(4px,1.1vw,18px);
  list-style:none;
  margin:0;
  padding:0;
}
.nav-item{ margin:0; }

.nav-link{
  position:relative;
  display:inline-block;
  padding:8px 2px;
  font-size:.9375rem;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--c-silver);
  text-decoration:none;
  white-space:nowrap;
  transition:color .18s var(--ease);
}
.nav-link::after{
  content:"";
  position:absolute;
  inset-inline:2px;
  inset-block-end:0;
  height:2px;
  border-radius:2px;
  background:var(--c-lime);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .22s var(--ease),background-color .22s var(--ease);
}
.nav-link:hover,
.nav-link:focus-visible{ color:var(--c-mist); }
.nav-link:hover::after,
.nav-link:focus-visible::after{ transform:scaleX(1); }

.nav-link[aria-current="page"]{ color:var(--c-lime); }
.nav-link[aria-current="page"]::after{
  transform:scaleX(1);
  background:var(--c-orange);
}

/* 头部动作区 */
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

/* 移动导航按钮 */
.nav-toggle{
  display:none;
  align-items:center;
  gap:.55rem;
  padding:.52rem .8rem;
  border-radius:12px;
  border:1px solid var(--c-moss);
  background:rgba(237,244,239,.05);
  color:var(--c-mist);
  cursor:pointer;
  transition:border-color .18s var(--ease),background-color .18s var(--ease);
}
.nav-toggle:hover{ border-color:var(--c-mint); background:rgba(237,244,239,.1); }

.nav-toggle__bars{
  position:relative;
  display:block;
  width:16px;
  height:10px;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:"";
  position:absolute;
  inset-inline:0;
  height:1.5px;
  border-radius:2px;
  background:currentColor;
  transition:transform .22s var(--ease);
}
.nav-toggle__bars::before{ inset-block-start:0; }
.nav-toggle__bars::after{ inset-block-end:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{ transform:translateY(4.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{ transform:translateY(-4.25px) rotate(-45deg); }

.nav-toggle__label{
  font-family:var(--font-mono);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.16em;
}

/* =========================================================
   通用按钮
   ========================================================= */
.btn{
  --btn-bg:transparent;
  --btn-fg:var(--c-mist);
  --btn-bd:var(--c-moss);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  padding:.66em 1.15em;
  font-family:var(--font-body);
  font-size:var(--fs-200);
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.2;
  color:var(--btn-fg);
  background-color:var(--btn-bg);
  border:1px solid var(--btn-bd);
  border-radius:999px;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.btn:hover{ transform:translateY(-1px); color:var(--btn-fg); }
.btn:active{ transform:translateY(0); }

.btn--accent{
  --btn-bg:var(--c-lime);
  --btn-fg:#06170E;
  --btn-bd:var(--c-lime);
}
.btn--accent:hover{
  --btn-bg:#DCFF7A;
  box-shadow:0 0 0 4px rgba(200,255,61,.16);
}

.btn--ghost{
  --btn-bg:rgba(237,244,239,.04);
  --btn-bd:var(--c-moss);
}
.btn--ghost:hover{
  --btn-bg:rgba(237,244,239,.1);
  --btn-bd:var(--c-mint);
  --btn-fg:var(--c-mist);
}

.btn--orange{
  --btn-bg:var(--c-orange);
  --btn-fg:#1A0A02;
  --btn-bd:var(--c-orange);
}
.btn--orange:hover{
  --btn-bg:#FF8347;
  box-shadow:0 0 0 4px rgba(255,107,44,.18);
}

.header-cta{ padding-inline:1.05em; white-space:nowrap; }
.nav-cta{ display:none; }

/* =========================================================
   布局工具
   ========================================================= */
.wrap{
  width:min(var(--shell),100%);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{ max-width:880px; }
.wrap--prose{ max-width:720px; }

.grid{
  display:grid;
  gap:clamp(20px,3vw,44px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:960px){
  .grid--editorial{ grid-template-columns:minmax(0,3fr) minmax(0,9fr); }
  .grid--editorial-rev{ grid-template-columns:minmax(0,9fr) minmax(0,3fr); }
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin:0 0 1rem;
  font-family:var(--font-mono);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--c-mint);
}
.eyebrow::before{
  content:"";
  width:18px;
  height:1px;
  background:currentColor;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  padding:.26em .72em;
  border-radius:999px;
  border:1px solid var(--c-moss);
  background:rgba(16,35,28,.62);
  font-family:var(--font-mono);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--c-silver);
  white-space:nowrap;
}
.tag--lime{ background:var(--c-lime); border-color:var(--c-lime); color:#0A1A10; }
.tag--orange{ background:var(--c-orange); border-color:var(--c-orange); color:#1A0A02; }
.tag--mint{ color:var(--c-mint); border-color:rgba(117,230,193,.45); background:rgba(16,35,28,.5); }

/* 面包屑 */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55rem;
  list-style:none;
  margin:0 0 clamp(18px,2.4vw,28px);
  padding:0;
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  letter-spacing:.06em;
  color:var(--c-dim);
}
.breadcrumb li{ display:flex; align-items:center; gap:.55rem; margin:0; }
.breadcrumb li + li::before{ content:"/"; color:var(--c-moss); }
.breadcrumb a{ color:var(--c-silver); text-decoration:none; }
.breadcrumb a:hover{ color:var(--c-lime); }

/* 图片容器基础规则 */
.media{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-md);
  border:1px solid var(--c-moss);
  background:linear-gradient(150deg,var(--c-pine),var(--c-ink) 70%);
  isolation:isolate;
}
.media > img,
.media > picture > img,
.media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(5,17,12,0) 30%,rgba(5,17,12,.72) 100%);
}
.media--wide{ aspect-ratio:16/9; }
.media--tall{ aspect-ratio:3/4; }
.media--square{ aspect-ratio:1/1; }
.media--slant{
  border-radius:0;
  clip-path:polygon(0 2.5%,100% 0,100% 97.5%,0 100%);
}
@media (max-width:600px){
  .media--wide{ aspect-ratio:4/3; }
}

/* 章节观察钩子 */
[data-section]{
  scroll-margin-block-start:calc(var(--header-h) + 24px);
}
[data-section].is-current{
  --section-accent:var(--c-lime);
}

[data-section-readout]{
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  letter-spacing:.16em;
  color:var(--c-mint);
}

/* 可选揭示动画 */
html.has-reveal [data-reveal]{
  opacity:0;
  transform:translateY(14px);
}
html.has-reveal [data-reveal].is-revealed{
  opacity:1;
  transform:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}

/* =========================================================
   页脚
   ========================================================= */
.site-footer{
  position:relative;
  margin-block-start:clamp(64px,9vw,128px);
  background:var(--c-charcoal);
  border-block-start:1px solid var(--c-moss);
  overflow:hidden;
}

.footer-rail{
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  height:2px;
  opacity:.55;
  background:linear-gradient(90deg,transparent,var(--c-lime),var(--c-mint) 42%,var(--c-orange) 78%,transparent);
  background-size:200% 100%;
  animation:railDrift 14s linear infinite;
}
@keyframes railDrift{
  from{ background-position:0 0; }
  to{ background-position:200% 0; }
}

.footer-inner{
  display:grid;
  gap:clamp(32px,4vw,56px);
  width:min(var(--shell),100%);
  margin-inline:auto;
  padding:clamp(40px,6vw,72px) var(--gutter) clamp(32px,4vw,48px);
  grid-template-columns:minmax(0,1fr);
}

.footer-lead{ min-width:0; }
.brand--footer{ margin-block-end:18px; }

.footer-summary{
  max-width:38ch;
  margin:0 0 20px;
  font-size:var(--fs-200);
  line-height:1.85;
  color:var(--c-silver);
}

.footer-version{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin:0;
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  font-weight:500;
  letter-spacing:.14em;
  color:var(--c-mint);
}

.status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  flex:0 0 auto;
  background:var(--c-orange);
  box-shadow:0 0 0 3px rgba(255,107,44,.16),0 0 12px rgba(255,107,44,.6);
  animation:dotPulse 2.8s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{ opacity:.55; transform:scale(.85); }
  50%{ opacity:1; transform:scale(1); }
}

.footer-nav{
  display:grid;
  gap:clamp(24px,3vw,36px);
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  min-width:0;
}

.footer-col{ min-width:0; }

.footer-col__title{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.24em;
  line-height:1.4;
  color:var(--c-mint);
}

.footer-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.footer-list li{ margin:0; }

.footer-link{
  position:relative;
  display:inline-block;
  font-size:var(--fs-200);
  color:var(--c-silver);
  text-decoration:none;
  transition:color .16s var(--ease);
}
.footer-link::after{
  content:"";
  position:absolute;
  inset-inline:0;
  inset-block-end:-3px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .2s var(--ease);
}
.footer-link:hover,
.footer-link:focus-visible{ color:var(--c-lime); }
.footer-link:hover::after,
.footer-link:focus-visible::after{ transform:scaleX(1); }

.footer-contact{ min-width:0; }

.footer-list--contact{ gap:14px; }
.footer-list--contact li{
  display:grid;
  gap:2px;
  padding-block-end:10px;
  border-block-end:1px solid rgba(44,70,60,.5);
}
.footer-list--contact li:last-child{ border-block-end:0; padding-block-end:0; }

.footer-key{
  font-family:var(--font-mono);
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.2em;
  color:rgba(158,173,167,.66);
}
.footer-text{
  font-size:var(--fs-200);
  line-height:1.7;
  color:var(--c-silver);
  word-break:break-word;
}

.footer-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 26px;
  width:min(var(--shell),100%);
  margin-inline:auto;
  padding:16px var(--gutter) 30px;
  border-block-start:1px solid rgba(44,70,60,.7);
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  letter-spacing:.06em;
  color:var(--c-dim);
}
.footer-legal p{ margin:0; }

.footer-legal-links{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  list-style:none;
  margin:0 0 0 auto;
  padding:0;
}
.footer-legal-links li{ margin:0; }
.footer-legal-links a{
  color:var(--c-silver);
  text-decoration:none;
}
.footer-legal-links a:hover,
.footer-legal-links a:focus-visible{ color:var(--c-lime); }

/* ---------- 页脚响应式 ---------- */
@media (min-width:760px){
  .footer-inner{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-nav{ grid-column:1 / -1; }
}
@media (min-width:1080px){
  .footer-inner{
    grid-template-columns:minmax(240px,1.3fr) minmax(0,2.1fr) minmax(230px,1.05fr);
    align-items:start;
  }
  .footer-nav{ grid-column:auto; }
}

/* =========================================================
   移动端页头
   ========================================================= */
@media (max-width:900px){
  .nav-toggle{ display:inline-flex; }

  .site-nav{
    position:fixed;
    inset-block-start:var(--header-h);
    inset-inline:0;
    margin-inline-start:0;
    max-height:calc(100dvh - var(--header-h));
    overflow-y:auto;
    padding:8px var(--gutter) 26px;
    background:rgba(8,18,13,.985);
    border-block-end:1px solid var(--c-moss);
    box-shadow:0 28px 60px -28px #000;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s linear;
  }
  .site-nav[data-open]{
    opacity:1;
    visibility:visible;
    transform:none;
  }

  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .nav-item{ border-block-end:1px solid rgba(44,70,60,.55); }
  .nav-link{
    display:block;
    padding:15px 2px;
    font-size:1.0625rem;
    white-space:normal;
  }
  .nav-link::after{ display:none; }
  .nav-link[aria-current="page"]{
    color:var(--c-lime);
    padding-inline-start:14px;
    border-inline-start:2px solid var(--c-orange);
  }

  .nav-cta{
    display:inline-flex;
    width:100%;
    justify-content:center;
    margin-block-start:20px;
    padding-block:.85em;
  }

  html.nav-open{ overflow:hidden; }
}

@media (max-width:420px){
  .brand-tagline{ display:none; }
  .header-cta{ display:none; }
  .nav-toggle__label{ display:none; }
  .footer-legal-links{ margin-inline-start:0; }
}

/* =========================================================
   动效偏好
   ========================================================= */
@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;
  }

  .footer-rail{ animation:none; background-position:0 0; }
  .status-dot{ animation:none; opacity:1; transform:none; }
  html.has-reveal [data-reveal]{
    opacity:1;
    transform:none;
  }
}