/* ============================================================
   FH体育中文站 · 共享样式 /assets/site.css
   夜间数据舱 + 纸质档案，直角、细线、坐标网格
   ============================================================ */

:root{
  --ink-900:#0A1622;
  --ink-700:#12263A;
  --ink-500:#1E3A56;
  --fog:#8A97A6;
  --paper:#F3EDE2;
  --cyan-pulse:#35E5D2;
  --orange-signal:#FF6A2B;
  --ember:#D9452B;
  --meadow:#5FA37A;
  --ink-black:#10100E;
  --mist:#E8EDF2;

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

  --fh-max:1360px;
  --fh-gutter:6vw;
  --fh-slice:-6deg;
  --fh-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  color:var(--mist);
  background-color:var(--ink-900);
  background-image:
    linear-gradient(rgba(30,58,86,.40) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,58,86,.32) 1px,transparent 1px);
  background-size:120px 120px,120px 120px;
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--cyan-pulse);outline-offset:3px}

/* ---------- 工具类 ---------- */
.fh-mono{font-family:var(--font-mono);letter-spacing:.03em}

/* ---------- 跳转链接 ---------- */
.fh-skip{
  position:absolute;
  left:14px;
  top:-64px;
  z-index:90;
  padding:10px 16px;
  background:var(--cyan-pulse);
  color:#06121B;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  transition:top .18s var(--fh-ease);
}
.fh-skip:focus{top:14px}

/* ============================================================
   头部
   ============================================================ */
.fh-header{
  position:sticky;
  top:0;
  z-index:60;
  background:linear-gradient(180deg,#0A1622 0%,#0C1A27 76%,#0A1622 100%);
  border-bottom:1px solid var(--ink-500);
  transition:box-shadow .24s var(--fh-ease);
}
.fh-header.is-condensed{box-shadow:0 14px 34px -22px rgba(0,0,0,.95)}

.fh-progress{
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:rgba(30,58,86,.6);
  pointer-events:none;
  z-index:2;
}
.fh-progress__bar{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--cyan-pulse),var(--orange-signal));
  transition:width .12s linear;
}

.fh-header__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:24px;
  max-width:var(--fh-max);
  margin:0 auto;
  padding:20px var(--fh-gutter);
  transition:padding .22s var(--fh-ease);
}
.fh-header__inner::before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(30,58,86,.95) 16%,rgba(53,229,210,.45) 50%,rgba(30,58,86,.95) 84%,transparent 100%);
}

/* 版本号 */
.fh-ver{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--fog);
  white-space:nowrap;
}
.fh-ver__label{letter-spacing:.16em}
.fh-ver__num{color:var(--cyan-pulse);font-weight:600}

/* 刊头 */
.fh-masthead{
  display:grid;
  justify-items:center;
  gap:5px;
  text-align:center;
}
.fh-wordmark{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(26px,3.4vw,40px);
  line-height:1;
  letter-spacing:-.02em;
  color:#fff;
  display:inline-flex;
  align-items:baseline;
  gap:.45em;
  transition:font-size .22s var(--fh-ease);
}
.fh-wordmark__cn{
  font-family:var(--font-mono);
  font-size:.34em;
  font-weight:600;
  letter-spacing:.34em;
  color:var(--fog);
}
.fh-tagline{
  font-size:12.5px;
  letter-spacing:.22em;
  color:var(--fog);
}

/* 刊头右侧 */
.fh-masthead__meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
}
.fh-update{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--fog);
  white-space:nowrap;
}
.fh-update__stamp{color:var(--orange-signal);font-weight:600}
.fh-pulse{
  display:inline-block;
  width:7px;height:7px;
  background:var(--cyan-pulse);
  box-shadow:0 0 0 3px rgba(53,229,210,.16);
  animation:fh-pulse 3.2s ease-in-out infinite;
  flex:0 0 auto;
}
@keyframes fh-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.42;transform:scale(.68)}
}

/* 移动导航按钮 */
.fh-nav-toggle{
  display:none;
  align-items:center;
  gap:9px;
  padding:9px 12px;
  border:1px solid var(--ink-500);
  color:var(--mist);
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.1em;
  cursor:pointer;
  transition:color .18s var(--fh-ease),border-color .18s var(--fh-ease);
}
.fh-nav-toggle:hover{border-color:var(--cyan-pulse);color:var(--cyan-pulse)}
.fh-nav-toggle__bars{display:grid;gap:4px;width:16px}
.fh-nav-toggle__bars i{
  display:block;height:1.5px;background:currentColor;
  transition:transform .2s var(--fh-ease),opacity .2s var(--fh-ease);
}
.fh-header[data-open] .fh-nav-toggle{color:var(--cyan-pulse);border-color:var(--cyan-pulse)}
.fh-header[data-open] .fh-nav-toggle__bars i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.fh-header[data-open] .fh-nav-toggle__bars i:nth-child(2){opacity:0}
.fh-header[data-open] .fh-nav-toggle__bars i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* 导航 */
.fh-nav{
  border-top:1px solid var(--ink-500);
  background:rgba(18,38,58,.55);
}
.fh-nav__list{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:clamp(10px,3.4vw,52px);
  max-width:var(--fh-max);
  margin:0 auto;
  padding:0 var(--fh-gutter);
}
.fh-nav__item{display:flex}
.fh-nav__link{
  position:relative;
  display:block;
  padding:14px 2px;
  font-size:15px;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--mist);
  border-bottom:2px solid transparent;
  transition:color .16s var(--fh-ease),border-color .16s var(--fh-ease),padding .22s var(--fh-ease);
}
.fh-nav__link:hover{color:#fff}
.fh-nav__link[aria-current="page"]{
  color:var(--cyan-pulse);
  border-bottom-color:var(--orange-signal);
}

/* 压缩态 */
.fh-header.is-condensed .fh-header__inner{padding-top:10px;padding-bottom:10px}
.fh-header.is-condensed .fh-wordmark{font-size:clamp(20px,2.4vw,26px)}
.fh-header.is-condensed .fh-tagline{display:none}
.fh-header.is-condensed .fh-nav__link{padding-top:10px;padding-bottom:10px;font-size:14px}

/* ============================================================
   页脚
   ============================================================ */
.fh-footer{
  position:relative;
  margin-top:clamp(56px,8vw,120px);
  background:#08111B;
  border-top:1px solid var(--ink-500);
}
.fh-footer::before{
  content:"";
  position:absolute;
  top:-1px;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan-pulse),var(--orange-signal),transparent);
  opacity:.55;
}
.fh-footer__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1.25fr 1fr;
  gap:clamp(24px,3vw,48px);
  max-width:var(--fh-max);
  margin:0 auto;
  padding:clamp(40px,5vw,72px) var(--fh-gutter) clamp(28px,3vw,44px);
}
.fh-footer__col{display:grid;align-content:start;gap:12px}
.fh-footer__col--brand{gap:14px}
.fh-footer__logo{
  font-family:var(--font-display);
  font-weight:800;
  font-size:24px;
  line-height:1.1;
  letter-spacing:-.01em;
  color:#fff;
  display:inline-flex;
  align-items:baseline;
  gap:.45em;
}
.fh-footer__slogan{
  font-size:14.5px;
  line-height:1.75;
  color:var(--fog);
  max-width:34ch;
}
.fh-footer__stamp{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--mist);
}
.fh-footer__title{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fog);
}
.fh-footer__list{display:grid;gap:9px}
.fh-footer__link{
  font-size:15px;
  color:var(--mist);
  border-bottom:1px solid transparent;
  transition:color .16s var(--fh-ease),border-color .16s var(--fh-ease);
}
.fh-footer__link:hover{color:var(--cyan-pulse);border-bottom-color:var(--cyan-pulse)}
.fh-footer__text{font-size:14.5px;line-height:1.7;color:var(--mist)}
.fh-footer__bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px 28px;
  max-width:var(--fh-max);
  margin:0 auto;
  padding:16px var(--fh-gutter) 30px;
  border-top:1px solid var(--ink-500);
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--fog);
}
.fh-footer__meta,.fh-footer__legal{line-height:1.9}
.fh-footer__legal{color:var(--fog)}
.fh-footer__legal time{color:var(--cyan-pulse)}

/* 返回顶部 */
.fh-totop{
  position:fixed;
  right:clamp(12px,2vw,28px);
  bottom:clamp(12px,2vw,28px);
  z-index:70;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background:var(--ink-700);
  border:1px solid var(--ink-500);
  color:var(--mist);
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.1em;
  cursor:pointer;
  transition:border-color .18s var(--fh-ease),color .18s var(--fh-ease),background .18s var(--fh-ease);
}
.fh-totop[hidden]{display:none}
.fh-totop:hover{border-color:var(--cyan-pulse);color:var(--cyan-pulse)}
.fh-totop__icon{color:var(--orange-signal);font-size:14px;line-height:1}

/* ============================================================
   通用布局组件
   ============================================================ */
.fh-container{
  width:100%;
  max-width:var(--fh-max);
  margin:0 auto;
  padding:0 var(--fh-gutter);
}
.fh-section{padding:clamp(48px,6vw,96px) 0}
.fh-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(16px,2vw,28px);
}
.fh-grid--split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.fh-grid--split-even{grid-template-columns:repeat(2,minmax(0,1fr))}

/* 标题与文本 */
.fh-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cyan-pulse);
}
.fh-kicker::before{
  content:"";
  width:8px;height:8px;
  background:var(--cyan-pulse);
  flex:0 0 auto;
}
.fh-display{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(40px,7vw,96px);
  line-height:.98;
  letter-spacing:-.02em;
  color:#fff;
}
.fh-display--md{font-size:clamp(30px,4.2vw,58px);line-height:1.02}
.fh-display--sm{font-size:clamp(22px,2.6vw,34px);line-height:1.08;letter-spacing:-.01em}
.fh-lede{
  font-size:clamp(16px,1.4vw,19px);
  line-height:1.8;
  color:var(--mist);
  max-width:62ch;
}
.fh-data{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--fog);
}

/* 正文长文 */
.fh-prose{
  max-width:70ch;
  font-size:17px;
  line-height:1.8;
  color:var(--mist);
}
.fh-prose p{margin:0 0 1.2em}
.fh-prose h2,.fh-prose h3{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.15;
  color:#fff;
  margin:1.8em 0 .6em;
}
.fh-prose h2{font-size:clamp(24px,3vw,36px)}
.fh-prose h3{font-size:clamp(19px,2vw,24px)}
.fh-prose ul,.fh-prose ol{margin:0 0 1.2em;padding-left:1.4em;list-style:disc}
.fh-prose ol{list-style:decimal}
.fh-prose li{margin:.35em 0}
.fh-prose a{color:var(--cyan-pulse);text-decoration:underline;text-underline-offset:3px}
.fh-prose strong{color:#fff}
.fh-prose--paper{
  background:var(--paper);
  color:var(--ink-black);
  padding:clamp(28px,4vw,56px);
  border:1px solid rgba(16,16,14,.16);
}
.fh-prose--paper h2,.fh-prose--paper h3,.fh-prose--paper strong{color:var(--ink-black)}
.fh-prose--paper a{color:var(--ember)}

/* 标签 */
.fh-tag{
  display:inline-block;
  padding:4px 9px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--fog);
  border:1px solid var(--ink-500);
}
.fh-tag--cyan{color:var(--cyan-pulse);border-color:rgba(53,229,210,.45)}
.fh-tag--orange{color:var(--orange-signal);border-color:rgba(255,106,43,.5)}
.fh-tag--ember{color:var(--ember);border-color:rgba(217,69,43,.6)}
.fh-tag--meadow{color:var(--meadow);border-color:rgba(95,163,122,.6)}

/* 按钮 */
.fh-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 20px;
  border:1px solid var(--ink-500);
  background:transparent;
  color:var(--mist);
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  letter-spacing:.06em;
  line-height:1;
  cursor:pointer;
  border-radius:0;
  transition:background .18s var(--fh-ease),color .18s var(--fh-ease),border-color .18s var(--fh-ease);
}
.fh-btn:hover{border-color:var(--cyan-pulse);color:#fff}
.fh-btn--ghost{background:rgba(30,58,86,.35)}
.fh-btn--signal{
  background:var(--orange-signal);
  border-color:var(--orange-signal);
  color:var(--ink-black);
}
.fh-btn--signal:hover{background:#FF824E;border-color:#FF824E;color:var(--ink-black)}
.fh-btn--paper{
  background:var(--paper);
  border-color:var(--paper);
  color:var(--ink-black);
}
.fh-btn--paper:hover{background:#fff;border-color:#fff;color:var(--ink-black)}

/* 面包屑 */
.fh-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--fog);
}
.fh-breadcrumb a{color:var(--fog);border-bottom:1px solid transparent}
.fh-breadcrumb a:hover{color:var(--cyan-pulse);border-bottom-color:var(--cyan-pulse)}
.fh-breadcrumb__sep{color:var(--ink-500)}
.fh-breadcrumb [aria-current="page"]{color:var(--mist)}

/* 章节跟随目录 */
.fh-toc{
  display:grid;
  gap:2px;
  font-family:var(--font-mono);
  font-size:13px;
}
.fh-toc a{
  display:block;
  padding:8px 12px;
  color:var(--fog);
  border-left:2px solid var(--ink-500);
  transition:color .16s var(--fh-ease),border-color .16s var(--fh-ease),background .16s var(--fh-ease);
}
.fh-toc a:hover{color:var(--mist);border-left-color:var(--cyan-pulse)}
.fh-toc a.is-active,
.fh-toc a[aria-current="true"]{
  color:var(--cyan-pulse);
  border-left-color:var(--orange-signal);
  background:rgba(53,229,210,.06);
}

/* 图片容器 */
.fh-figure{
  position:relative;
  margin:0;
  border:1px solid var(--ink-500);
  background:var(--ink-700);
  overflow:hidden;
}
.fh-figure__media{
  display:block;
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  background:var(--ink-700);
}
.fh-figure img{width:100%;height:100%;object-fit:cover}
.fh-figure__ph{
  position:relative;
  width:100%;
  aspect-ratio:16 / 10;
  background-color:var(--ink-700);
  background-image:
    repeating-linear-gradient(-6deg,rgba(30,58,86,.85) 0 1px,transparent 1px 16px),
    linear-gradient(rgba(30,58,86,.5) 1px,transparent 1px);
  background-size:auto,120px 120px;
}
.fh-figure__ph::after{
  content:"";
  position:absolute;
  left:16px;bottom:14px;
  width:28px;height:2px;
  background:var(--cyan-pulse);
  opacity:.75;
}
.fh-figure__cap{
  padding:10px 13px;
  border-top:1px solid var(--ink-500);
  background:rgba(10,22,34,.7);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--fog);
}
.fh-figure--wide .fh-figure__media,
.fh-figure--wide .fh-figure__ph{aspect-ratio:21 / 9}
.fh-figure--tall .fh-figure__media,
.fh-figure--tall .fh-figure__ph{aspect-ratio:4 / 5}
.fh-figure--square .fh-figure__media,
.fh-figure--square .fh-figure__ph{aspect-ratio:1 / 1}

/* 滚动显现 */
.fh-reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s var(--fh-ease),transform .5s var(--fh-ease);
}
.fh-reveal.is-visible{opacity:1;transform:none}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:1024px){
  :root{--fh-gutter:5vw}
  .fh-footer__grid{grid-template-columns:1fr 1fr;gap:32px}
  .fh-grid--split,.fh-grid--split-even{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:860px){
  .fh-header__inner{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "brand meta"
      "ver ver";
    align-items:center;
    gap:8px 12px;
    padding:14px var(--fh-gutter);
  }
  .fh-ver{grid-area:ver;font-size:11.5px}
  .fh-masthead{grid-area:brand;justify-items:start;text-align:left}
  .fh-masthead__meta{grid-area:meta}
  .fh-tagline{display:none}
  .fh-update__label{display:none}
  .fh-masthead__meta .fh-btn{display:none}
  .fh-nav-toggle{display:inline-flex}

  .fh-nav{
    position:absolute;
    top:100%;
    left:0;right:0;
    max-height:0;
    overflow:hidden;
    background:#0E1F31;
    border-top:1px solid var(--ink-500);
    transition:max-height .22s var(--fh-ease);
  }
  .fh-header[data-open] .fh-nav{max-height:min(72vh,440px);overflow-y:auto}
  .fh-nav__list{flex-direction:column;gap:0;padding:6px var(--fh-gutter) 22px}
  .fh-nav__link{
    padding:15px 0;
    font-size:17px;
    border-bottom:1px solid var(--ink-500);
  }
  .fh-nav__link[aria-current="page"]{border-bottom-color:var(--orange-signal)}
  .fh-header.is-condensed .fh-nav__link{padding:15px 0;font-size:17px}

  .fh-footer__grid{grid-template-columns:1fr;gap:28px;padding-top:40px}
  .fh-footer__bottom{flex-direction:column;gap:8px}
  .fh-totop{padding:9px 12px;font-size:12px}
  .fh-totop__text{display:none}
  .fh-display{font-size:clamp(34px,10vw,56px)}
}

@media (max-width:420px){
  .fh-ver__label{display:none}
  .fh-update{font-size:11.5px}
}

/* ============================================================
   动效降级
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .fh-pulse{animation:none;opacity:1;transform:none}
  .fh-reveal{opacity:1;transform:none}
  .fh-progress__bar{transition:none}
}