/* ============================================================
   /assets/site.css — 开云体育下单 · 共享外壳与基础组件
   高原赛场档案室：深墨绿档案底 + 青稞绿结构线 + 湖蓝数据块
   ============================================================ */

/* ---------- 1. Reset ---------- */
*,
*::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, h6,
p, ul, ol, li, figure, figcaption, blockquote, dl, dd, table, th, td {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

/* ---------- 2. 变量 ---------- */
:root {
  --ink: #0E1F1A;
  --ink-2: #16302A;
  --ink-3: #1B3A32;
  --barley: #7FA83B;
  --barley-soft: #C3D98F;
  --lake: #1E6E8C;
  --lake-soft: #7FB6CC;
  --saffron: #C0342B;
  --saffron-soft: #E4776B;
  --gold: #D9A43B;
  --paper: #F2F0E6;
  --wheat: #A9B3AC;

  --font-display: "Source Han Sans SC", "Noto Sans SC", "HarmonyOS Sans SC",
                  "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-numeric: ui-monospace, "IBM Plex Mono", "JetBrains Mono",
                  Menlo, Consolas, "Courier New", monospace;
  --font-body: "Source Han Serif SC", "Noto Serif SC", "Songti SC",
               "SimSun", "FangSong", Georgia, serif;
  --font-hand: "Kaiti SC", "STKaiti", "KaiTi", "FangSong", cursive;

  --wrap: 1240px;
  --gut: clamp(1rem, 3.4vw, 2.6rem);
  --hair: 1px solid rgba(195, 217, 143, .2);
  --focus-ring: #D9A43B;
  --nav-h: 0px;
}

/* ---------- 3. 中文排版与基础 ---------- */
body {
  min-height: 100vh;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: .012em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4,
.display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.14;
}

.num,
.stat__value,
.section__num,
.breadcrumb__list,
.footer-col__title,
.masthead__tagline {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

p { max-width: 42em; }

a { transition: color .16s ease, border-color .16s ease, background-color .16s ease; }

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

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

/* ---------- 4. 布局工具 ---------- */
.wrap {
  width: min(var(--wrap), 100% - var(--gut) * 2);
  margin-inline: auto;
}

.bg-grid {
  background-image:
    linear-gradient(rgba(195, 217, 143, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(195, 217, 143, .06) 1px, transparent 1px);
  background-size: 28px 28px;
}

.divider-slant {
  height: clamp(26px, 5vw, 54px);
  background: linear-gradient(115deg,
    transparent 49.6%,
    rgba(127, 168, 59, .55) 49.6%,
    rgba(127, 168, 59, .55) 50.4%,
    transparent 50.4%);
}

/* ---------- 5. 跳过链接 ---------- */
.skip-link {
  position: absolute;
  left: var(--gut);
  top: -120px;
  z-index: 200;
  padding: .6rem 1.1rem;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: .88rem;
  letter-spacing: .06em;
  border-radius: 0 0 4px 4px;
  transition: top .18s ease;
}

.skip-link:focus { top: 0; }

/* ---------- 6. 页头：居中刊头 ---------- */
.site-header {
  position: relative;
  z-index: 80;
  background: var(--ink);
  color: var(--paper);
}

.site-header.is-nav-pinned { padding-bottom: var(--nav-h, 0px); }

.masthead {
  position: relative;
  padding: clamp(1.5rem, 3.2vw, 2.4rem) 0 clamp(1rem, 2vw, 1.4rem);
  background:
    radial-gradient(120% 150% at 10% -25%, rgba(30, 110, 140, .32), transparent 62%),
    radial-gradient(110% 130% at 90% -15%, rgba(127, 168, 59, .24), transparent 64%),
    var(--ink);
  border-bottom: 1px solid rgba(127, 168, 59, .3);
  overflow: hidden;
}

.masthead::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 36%, rgba(195, 217, 143, .08) 36%, rgba(195, 217, 143, .08) 36.4%, transparent 36.4%),
    linear-gradient(115deg, transparent 68%, rgba(127, 182, 204, .1) 68%, rgba(127, 182, 204, .1) 68.5%, transparent 68.5%);
}

.masthead__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .3rem;
  text-align: center;
}

.masthead__tagline {
  font-size: clamp(.68rem, 1.1vw, .8rem);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--barley-soft);
  opacity: .88;
  max-width: none;
}

.masthead__brand {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 4.8vw, 3.1rem);
  letter-spacing: -.02em;
  line-height: 1.06;
  color: var(--paper);
  padding-bottom: .16em;
  border-bottom: 4px solid var(--barley);
}

.masthead__brand:hover { color: var(--gold); border-bottom-color: var(--gold); }

.masthead__line {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(.76rem, 1.4vw, .94rem);
  letter-spacing: .24em;
  color: var(--wheat);
  max-width: none;
}

.masthead__utility {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.utility-link,
.utility-btn {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: .08em;
  line-height: 1.4;
  padding: .42rem .72rem;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  white-space: nowrap;
}

.utility-link {
  color: var(--lake-soft);
  box-shadow: inset 0 0 0 1px rgba(127, 182, 204, .45);
}

.utility-link:hover { color: var(--ink); background: var(--lake-soft); }

.utility-btn {
  color: var(--barley-soft);
  box-shadow: inset 0 0 0 1px rgba(195, 217, 143, .38);
}

.utility-btn:hover { color: var(--ink); background: var(--barley-soft); }

.utility-btn[aria-expanded="false"] {
  color: var(--wheat);
  box-shadow: inset 0 0 0 1px rgba(169, 179, 172, .38);
}

/* ---------- 7. 移动端栏目按钮 ---------- */
.nav-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .82rem 1rem;
  background: var(--ink-2);
  color: var(--barley-soft);
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .2em;
  border-bottom: var(--hair);
}

.nav-toggle__bar {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
}

.nav-toggle__bar::before { top: -7px; }
.nav-toggle__bar::after { top: 7px; }

.nav-toggle__text { font-size: .84rem; }

/* ---------- 8. 栏目导航 ---------- */
.site-nav {
  position: relative;
  z-index: 70;
  background: rgba(14, 31, 26, .97);
  border-bottom: 1px solid rgba(127, 168, 59, .32);
}

.site-nav__list {
  width: min(var(--wrap), 100% - var(--gut) * 2);
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(.3rem, 2.2vw, 2.4rem);
  padding: .5rem 0;
}

.site-nav__link {
  position: relative;
  display: block;
  padding: .5rem .3rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(.8rem, 1.3vw, .98rem);
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--paper);
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: .3rem;
  right: .3rem;
  bottom: .08rem;
  height: 3px;
  background: var(--barley);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s ease;
}

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

.site-nav__link[aria-current="page"] { color: var(--barley-soft); }
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--gold); }

.site-nav.is-pinned {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
}

.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
}

.scroll-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--lake), var(--barley) 62%, var(--gold));
}

/* ---------- 9. 页脚 ---------- */
.site-footer {
  margin-top: clamp(3rem, 7vw, 6rem);
  background: var(--ink-2);
  color: var(--wheat);
}

.footer-rule {
  height: 8px;
  background: repeating-linear-gradient(
    114deg,
    var(--paper) 0 14px,
    var(--barley) 14px 21px,
    var(--lake) 21px 28px,
    transparent 28px 40px
  );
  opacity: .9;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  padding: clamp(1.9rem, 4vw, 3rem) 0 clamp(1.2rem, 2.4vw, 1.6rem);
}

.footer-brand__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.32rem;
  letter-spacing: -.01em;
  color: var(--paper);
  max-width: none;
}

.footer-brand__line {
  margin-top: .45rem;
  font-size: .82rem;
  line-height: 1.72;
  color: var(--wheat);
  max-width: 26ch;
}

.footer-col__title {
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--barley-soft);
  padding-bottom: .42rem;
  margin-bottom: .7rem;
  border-bottom: 1px solid rgba(195, 217, 143, .22);
  max-width: none;
}

.footer-col__list { display: grid; gap: .42rem; }

.footer-link {
  font-size: .86rem;
  color: var(--paper);
  border-bottom: 1px solid transparent;
}

.footer-link:hover { color: var(--barley-soft); border-bottom-color: var(--barley); }

.footer-text { font-size: .86rem; line-height: 1.7; color: var(--wheat); max-width: 30ch; }

.footer-legal {
  display: grid;
  gap: .38rem;
  padding: 1.1rem 0 1.7rem;
  border-top: 1px solid rgba(195, 217, 143, .18);
}

.footer-legal__text {
  font-size: .75rem;
  line-height: 1.8;
  color: var(--wheat);
  max-width: 100%;
}

.footer-legal__text--hand {
  font-family: var(--font-hand);
  font-size: .84rem;
  color: var(--saffron-soft);
  transform: rotate(-1.1deg);
  transform-origin: left center;
}

/* ---------- 10. 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .72rem 1.25rem;
  background: var(--barley);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: .9rem;
  letter-spacing: .06em;
  line-height: 1.3;
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
}

.btn:hover { background: var(--gold); }

.btn--ghost {
  background: transparent;
  color: var(--barley-soft);
  box-shadow: inset 0 0 0 1px rgba(195, 217, 143, .42);
}

.btn--ghost:hover { background: rgba(127, 168, 59, .18); color: var(--paper); }

.btn--lake { background: var(--lake); color: var(--paper); }
.btn--lake:hover { background: var(--lake-soft); color: var(--ink); }

/* ---------- 11. 面包屑 ---------- */
.breadcrumb { padding: 1rem 0 .2rem; }

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--wheat);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "／";
  margin-right: .45rem;
  color: var(--barley);
}

.breadcrumb__link { color: var(--lake-soft); }
.breadcrumb__link:hover { color: var(--barley-soft); }
.breadcrumb__item[aria-current="page"] { color: var(--paper); }

/* ---------- 12. 正文容器 ---------- */
.prose {
  max-width: 38em;
  font-size: 1.03rem;
  color: rgba(242, 240, 230, .92);
}

.prose p + p { margin-top: 1em; }
.prose h3 {
  margin-top: 1.6em;
  font-size: 1.16rem;
  color: var(--barley-soft);
}
.prose ul { margin-top: .8em; display: grid; gap: .4em; }
.prose li { position: relative; padding-left: 1.15em; }
.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 8px;
  height: 1px;
  background: var(--barley);
}
.prose strong { color: var(--gold); font-weight: 700; }

/* ---------- 13. 章节 ---------- */
.section { padding: clamp(2.2rem, 6vw, 4.6rem) 0; }

.section__head {
  display: grid;
  gap: .5rem;
  margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
}

.section__num {
  font-size: 1.2rem;
  letter-spacing: .16em;
  color: var(--barley);
}

.section__title {
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  color: var(--paper);
  max-width: 22em;
}

.section__lead {
  max-width: 42ch;
  font-size: 1rem;
  color: var(--wheat);
}

/* ---------- 14. 网格 ---------- */
.grid { display: grid; gap: clamp(1rem, 2.4vw, 1.7rem); }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.grid--index { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* ---------- 15. 切角面板 ---------- */
.panel {
  position: relative;
  padding: clamp(1rem, 2.2vw, 1.5rem);
  background: var(--ink-2);
  color: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(195, 217, 143, .18);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

.panel--paper { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(14, 31, 26, .14); }
.panel--lake { background: var(--lake); color: var(--paper); box-shadow: none; }

.panel__title {
  margin-bottom: .5rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -.01em;
}

.panel--paper .panel__title { color: var(--ink); }

/* ---------- 16. 批注标签 ---------- */
.note {
  display: inline-block;
  padding: .2rem .72rem;
  font-family: var(--font-hand);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--saffron-soft);
  border: 1px solid rgba(192, 52, 43, .55);
  border-radius: 999px;
  transform: rotate(-1.5deg);
}

.note--plain { border-style: dashed; transform: rotate(1.2deg); }

/* ---------- 17. 指标 ---------- */
.stat { display: grid; gap: .22rem; }

.stat__value {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
}

.stat__unit {
  font-family: var(--font-numeric);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--wheat);
  margin-left: .45em;
}

.stat__label { font-size: .82rem; color: var(--wheat); max-width: 24ch; }

/* ---------- 18. 图片容器 ---------- */
.figure { display: grid; gap: .6rem; }

.figure__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    linear-gradient(140deg, var(--ink-3) 0%, var(--lake) 100%);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

.figure__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(242, 240, 230, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 240, 230, .07) 1px, transparent 1px);
  background-size: 24px 24px;
}

.figure__media img { width: 100%; height: 100%; object-fit: cover; }
.figure__media--tall { aspect-ratio: 3 / 4; }
.figure__media--wide { aspect-ratio: 21 / 9; }

.figure__caption {
  font-family: var(--font-numeric);
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--wheat);
  max-width: 100%;
}

/* ---------- 19. 标记 ---------- */
.tag {
  display: inline-block;
  padding: .18rem .58rem;
  font-family: var(--font-numeric);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--lake-soft);
  box-shadow: inset 0 0 0 1px rgba(127, 182, 204, .45);
}

.tag--gold { color: var(--gold); box-shadow: inset 0 0 0 1px rgba(217, 164, 59, .55); }

/* ---------- 20. 主题筛选 ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .75rem 0;
  border-top: 1px solid rgba(195, 217, 143, .18);
  border-bottom: 1px solid rgba(195, 217, 143, .18);
}

.filter-chip {
  padding: .4rem .85rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--barley-soft);
  box-shadow: inset 0 0 0 1px rgba(195, 217, 143, .38);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.filter-chip:hover { background: rgba(127, 168, 59, .18); color: var(--paper); }

.filter-chip[aria-pressed="true"] {
  background: var(--gold);
  color: var(--ink);
  box-shadow: none;
}

.filter-count {
  margin-left: auto;
  font-family: var(--font-numeric);
  font-size: .76rem;
  letter-spacing: .1em;
  color: var(--wheat);
}

.filter-clear {
  font-family: var(--font-numeric);
  font-size: .76rem;
  letter-spacing: .08em;
  color: var(--lake-soft);
  border-bottom: 1px solid currentColor;
}

.filter-clear:hover { color: var(--barley-soft); }

[data-filter-item].is-hidden { display: none; }

/* ---------- 21. 侧边赛季阶段时间轴 ---------- */
.side-timeline {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 55;
  display: none;
  padding: .7rem .6rem .7rem .4rem;
  background: rgba(22, 48, 42, .9);
  border-right: 1px solid rgba(127, 168, 59, .32);
  backdrop-filter: blur(4px);
}

.side-timeline__list { display: grid; gap: .58rem; }

.side-timeline__dot {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-numeric);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--wheat);
}

.side-timeline__dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 1px solid var(--barley);
  transform: rotate(45deg);
  transition: background-color .18s ease, border-color .18s ease;
}

.side-timeline__dot:hover { color: var(--barley-soft); }
.side-timeline__dot[aria-current="true"] { color: var(--gold); }
.side-timeline__dot[aria-current="true"]::before { background: var(--gold); border-color: var(--gold); }

.side-timeline__label { white-space: nowrap; }

/* ---------- 22. 滚动显现 ---------- */
html[data-reveal="on"] .reveal {
  opacity: 0;
  transform: translateY(12px);
}

html[data-reveal="on"] .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s ease;
}

/* ---------- 23. 响应式 ---------- */
@media (max-width: 1080px) {
  .masthead__utility { position: static; transform: none; justify-content: center; margin-top: .7rem; }
  .masthead__inner { padding-inline: 0; }
}

@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .grid--split { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  body { font-size: 16.5px; }

  .nav-toggle { display: flex; }

  .site-nav { display: none; border-bottom: 1px solid rgba(127, 168, 59, .34); }
  .site-header[data-open="true"] .site-nav { display: block; }
  .site-nav.is-pinned { position: static; box-shadow: none; }
  .site-header.is-nav-pinned { padding-bottom: 0; }

  .site-nav__list {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 0 .5rem;
  }

  .site-nav__item { border-bottom: 1px solid rgba(195, 217, 143, .12); }

  .site-nav__link {
    padding: .88rem var(--gut);
    font-size: .95rem;
  }

  .site-nav__link::after {
    left: var(--gut);
    right: auto;
    width: 26px;
    bottom: .55rem;
  }

  .masthead__brand { border-bottom-width: 3px; }
  .side-timeline { display: none !important; }
}

@media (max-width: 620px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .footer-legal__text--hand { transform: none; }
  .filter-count { margin-left: 0; width: 100%; }
}

@media (min-width: 1200px) {
  .side-timeline { display: block; }
}

/* ---------- 24. 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  html[data-reveal="on"] .reveal,
  html[data-reveal="on"] .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .footer-legal__text--hand,
  .note,
  .note--plain { transform: none; }
}