.page-home {
  --home-copper-deep: #7d4f22;
  --home-pad-block: clamp(24px, 4vw, 48px);
  color: var(--yb-paper);
}

/* ============ 首屏封面 ============ */
.page-home .home-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--yb-deep);
}

.page-home .home-cover__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-home .home-cover__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8) contrast(1.06);
}

.page-home .home-cover__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(12, 43, 37, .88) 0%, rgba(12, 43, 37, .6) 36%, rgba(12, 43, 37, .95) 100%),
    radial-gradient(120% 84% at 12% 18%, rgba(46, 93, 76, .58), transparent 62%);
}

.page-home .home-cover__inner {
  position: relative;
  z-index: 2;
  padding-top: clamp(132px, 20vh, 208px);
  padding-bottom: clamp(48px, 8vh, 92px);
  display: grid;
  gap: clamp(32px, 5vw, 56px);
}

@media (min-width: 901px) {
  .page-home .home-cover__inner {
    grid-template-columns: minmax(0, 1.32fr) minmax(300px, .86fr);
    align-items: end;
    gap: clamp(40px, 5vw, 80px);
    padding-bottom: clamp(64px, 10vh, 112px);
  }
}

.page-home .home-cover__kicker {
  margin: 0 0 18px;
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  letter-spacing: .18em;
  color: var(--yb-copper-lt);
}

.page-home .home-cover__title {
  margin: 0 0 22px;
  font-family: var(--yb-font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 6.6vw, 6rem);
  line-height: .98;
  letter-spacing: -.025em;
  color: var(--yb-paper);
  text-wrap: balance;
}

.page-home .home-cover__title span {
  color: var(--yb-copper-lt);
}

.page-home .home-cover__lede {
  margin: 0 0 20px;
  max-width: 38em;
  font-family: var(--yb-font-body);
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.78;
  color: var(--yb-text-soft);
}

.page-home .home-cover__flash {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--yb-line-warm);
  background: rgba(12, 43, 37, .5);
  font-size: var(--yb-fs-14);
  line-height: 1.6;
  color: var(--yb-text-soft);
}

.page-home .home-cover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 首屏四条主线索引 */
.page-home .home-index {
  border: 1px solid var(--yb-line-warm);
  border-radius: var(--yb-r-glass);
  padding: 20px 16px;
  background: rgba(12, 43, 37, .46);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.page-home .home-index__head {
  margin: 0 0 12px;
  padding-left: 12px;
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  letter-spacing: .2em;
  color: var(--yb-copper-lt);
}

.page-home .home-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-home .home-index__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 12px;
  border-radius: var(--yb-r-card);
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: background-color .24s ease, border-color .24s ease;
}

.page-home .home-index__link:hover {
  background: rgba(46, 93, 76, .52);
  border-color: var(--yb-line-warm);
}

.page-home .home-index__link:focus-visible {
  outline: 2px solid var(--yb-lime);
  outline-offset: 2px;
}

.page-home .home-index__num {
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-14);
  line-height: 1.5;
  color: var(--yb-copper-lt);
}

.page-home .home-index__label {
  display: block;
  font-family: var(--yb-font-headline);
  font-weight: 700;
  font-size: var(--yb-fs-18);
  line-height: 1.35;
  color: var(--yb-paper);
}

.page-home .home-index__note {
  display: block;
  margin-top: 4px;
  font-size: var(--yb-fs-14);
  line-height: 1.65;
  color: var(--yb-text-dim);
}

/* ============ 主体骨架 ============ */
.page-home .home-body {
  padding-top: clamp(40px, 6vw, 88px);
  padding-bottom: clamp(40px, 6vw, 96px);
}

.page-home .home-layout {
  display: block;
}

@media (min-width: 901px) {
  .page-home .home-layout {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }
}

/* ============ 左侧刻度轨道 ============ */
.page-home .home-rail-wrap {
  position: relative;
  z-index: 5;
  margin-bottom: 28px;
}

.page-home .home-rail__list {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-home .home-rail__list::-webkit-scrollbar {
  display: none;
}

.page-home .home-rail__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--yb-line);
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--yb-fs-14);
  line-height: 1.5;
  color: var(--yb-text-dim);
  transition: color .24s ease, border-color .24s ease, background-color .24s ease;
}

.page-home .home-rail__link:hover {
  color: var(--yb-paper);
  border-color: var(--yb-line-warm);
  background: rgba(46, 93, 76, .32);
}

.page-home .home-rail__link:focus-visible {
  outline: 2px solid var(--yb-lime);
  outline-offset: 2px;
}

.page-home .home-rail__dot {
  display: none;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--yb-rock);
  transition: background-color .24s ease, box-shadow .24s ease;
}

.page-home .home-rail__num {
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  color: var(--yb-copper-lt);
}

.page-home .home-rail__link[data-current] {
  color: var(--yb-paper);
  border-color: var(--yb-copper);
  background: rgba(46, 93, 76, .4);
}

@media (min-width: 901px) {
  .page-home .home-rail-wrap {
    margin-bottom: 0;
  }

  .page-home .home-rail {
    position: sticky;
    top: 108px;
  }

  .page-home .home-rail__list {
    display: grid;
    gap: 0;
    overflow: visible;
    padding: 0;
    border-left: 1px solid var(--yb-line);
  }

  .page-home .home-rail__link {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: start;
    padding: 12px 12px 12px 10px;
    border: 0;
    border-radius: 0 var(--yb-r-card) var(--yb-r-card) 0;
    white-space: normal;
  }

  .page-home .home-rail__dot {
    display: block;
    grid-row: 1 / span 2;
    margin-top: .42em;
  }

  .page-home .home-rail__num {
    grid-column: 2;
  }

  .page-home .home-rail__label {
    grid-column: 2;
    font-size: var(--yb-fs-14);
    line-height: 1.55;
  }

  .page-home .home-rail__link[data-current] .home-rail__dot {
    background: var(--yb-lime);
    box-shadow: 0 0 0 4px rgba(200, 240, 75, .16);
  }
}

/* ============ 面板 ============ */
.page-home .home-panel {
  padding: clamp(30px, 3.6vw, 52px) clamp(20px, 3vw, 44px);
  margin-bottom: clamp(26px, 3.4vw, 44px);
  border: 1px solid var(--yb-line);
  border-radius: 18px;
  background: rgba(46, 93, 76, .16);
}

.page-home .home-panel:last-child {
  margin-bottom: 0;
}

.page-home .home-panel--sand {
  background: var(--yb-sand);
  border-color: rgba(19, 23, 22, .16);
  color: var(--yb-charcoal);
}

.page-home .home-panel--charcoal {
  background: var(--yb-charcoal);
  border-color: var(--yb-line-strong);
}

.page-home .home-panel--moss {
  background: rgba(46, 93, 76, .44);
  border-color: var(--yb-line-strong);
}

.page-home .home-panel__head {
  margin: 0 0 clamp(20px, 2.6vw, 32px);
}

.page-home .home-panel__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 10px;
}

.page-home .home-panel__num {
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-14);
  letter-spacing: .1em;
  color: var(--yb-copper);
  padding-bottom: 2px;
  border-bottom: 2px solid var(--yb-copper);
}

.page-home .home-panel__kicker {
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  letter-spacing: .16em;
  color: var(--yb-text-dim);
}

.page-home .home-panel__title {
  margin: 0;
  font-family: var(--yb-font-headline);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--yb-paper);
}

.page-home .home-panel--sand .home-panel__title {
  color: var(--yb-charcoal);
}

.page-home .home-panel--sand .home-panel__num {
  color: var(--home-copper-deep);
  border-bottom-color: var(--home-copper-deep);
}

.page-home .home-panel--sand .home-panel__kicker {
  color: rgba(19, 23, 22, .58);
}

.page-home .home-panel__foot {
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--yb-line);
  font-size: var(--yb-fs-12);
  line-height: 1.75;
  color: rgba(228, 218, 203, .62);
}

.page-home .home-panel--sand .home-panel__foot {
  border-top-color: rgba(19, 23, 22, .14);
  color: rgba(19, 23, 22, .62);
}

.page-home .home-lede {
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  max-width: 38em;
  font-size: var(--yb-fs-16);
  line-height: 1.8;
  color: var(--yb-text-soft);
}

.page-home .home-panel--sand .home-lede {
  color: rgba(19, 23, 22, .8);
}

.page-home .home-note {
  margin: 0;
  max-width: 38em;
  font-size: var(--yb-fs-14);
  line-height: 1.75;
  color: rgba(19, 23, 22, .62);
}

.page-home .home-link {
  color: var(--yb-copper-lt);
  text-decoration: none;
  border-bottom: 1px solid var(--yb-line-warm);
}

.page-home .home-link:hover {
  color: var(--yb-lime);
  border-bottom-color: var(--yb-lime);
}

.page-home .home-link:focus-visible {
  outline: 2px solid var(--yb-lime);
  outline-offset: 2px;
}

/* ============ 图片容器 ============ */
.page-home .home-figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--yb-r-img);
  border: 1px solid var(--yb-line);
  background: linear-gradient(140deg, var(--yb-deep), var(--yb-moss));
}

.page-home .home-figure__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-home .home-figure--banner {
  margin-bottom: clamp(20px, 2.6vw, 30px);
}

/* ============ 01 案例面板 ============ */
.page-home .home-case-top {
  display: grid;
  gap: clamp(18px, 2.6vw, 30px);
  margin-bottom: clamp(24px, 3vw, 36px);
  align-items: start;
}

@media (min-width: 760px) {
  .page-home .home-case-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.page-home .home-case-facts {
  display: grid;
  gap: 12px;
}

.page-home .home-fact {
  padding: 16px 18px;
  border: 1px solid var(--yb-line);
  border-left: 3px solid var(--yb-copper);
  border-radius: var(--yb-r-card);
  background: rgba(12, 43, 37, .44);
  transition: border-color .24s ease, background-color .24s ease;
}

.page-home .home-fact:hover {
  border-color: var(--yb-copper);
  border-left-color: var(--yb-copper-lt);
  background: rgba(46, 93, 76, .5);
}

@media (min-width: 760px) {
  .page-home .home-fact:nth-child(2) {
    margin-top: 10px;
  }

  .page-home .home-fact:nth-child(3) {
    margin-top: 20px;
  }
}

.page-home .home-fact__value {
  margin: 0 0 6px;
  font-family: var(--yb-font-data);
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.01em;
}

.page-home .home-fact__value--lime {
  color: var(--yb-lime);
}

.page-home .home-fact__value--copper {
  color: var(--yb-copper-lt);
}

.page-home .home-fact__value--mist {
  color: var(--yb-mist);
}

.page-home .home-fact__unit {
  margin-left: 3px;
  font-size: .5em;
}

.page-home .home-fact__label {
  margin: 0;
  font-size: var(--yb-fs-14);
  line-height: 1.65;
  color: var(--yb-text-dim);
}

/* 筛选 chip */
.page-home .home-case-filter {
  margin: 0 0 18px;
}

.page-home .home-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-home .home-chip {
  font: inherit;
  font-size: var(--yb-fs-14);
  line-height: 1.4;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--yb-line);
  background: transparent;
  color: var(--yb-text-dim);
  cursor: pointer;
  transition: color .24s ease, border-color .24s ease, background-color .24s ease;
}

.page-home .home-chip:hover {
  color: var(--yb-paper);
  border-color: var(--yb-copper);
}

.page-home .home-chip[aria-pressed="true"] {
  color: var(--yb-charcoal);
  background: var(--yb-lime);
  border-color: var(--yb-lime);
}

.page-home .home-chip:focus-visible {
  outline: 2px solid var(--yb-lime);
  outline-offset: 2px;
}

/* 案例卡片 */
.page-home .home-case-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

@media (min-width: 720px) {
  .page-home .home-case-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .page-home .home-case-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-home .home-case-item {
  display: flex;
}

.page-home .home-case-card {
  display: block;
  width: 100%;
  padding: 18px 20px;
  border: 1px solid var(--yb-line);
  border-radius: var(--yb-r-card);
  background: rgba(12, 43, 37, .42);
  text-decoration: none;
  color: inherit;
  transition: border-color .24s ease, background-color .24s ease;
}

.page-home .home-case-card:hover {
  border-color: var(--yb-copper);
  background: rgba(46, 93, 76, .5);
}

.page-home .home-case-card:hover .home-case-card__title {
  transform: translateX(2px);
}

.page-home .home-case-card:focus-visible {
  outline: 2px solid var(--yb-lime);
  outline-offset: 3px;
}

.page-home .home-case-card__tag {
  margin: 0 0 8px;
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  letter-spacing: .1em;
  color: var(--yb-copper-lt);
}

.page-home .home-case-card__title {
  margin: 0 0 8px;
  font-family: var(--yb-font-headline);
  font-weight: 700;
  font-size: var(--yb-fs-18);
  line-height: 1.38;
  color: var(--yb-paper);
  transition: transform .24s ease;
}

.page-home .home-case-card__text {
  margin: 0 0 12px;
  font-size: var(--yb-fs-14);
  line-height: 1.7;
  color: var(--yb-text-dim);
}

.page-home .home-case-card__meta {
  margin: 0;
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  color: rgba(228, 218, 203, .52);
}

/* ============ 02 场馆面板 ============ */
.page-home .home-venue {
  display: grid;
  gap: clamp(22px, 3vw, 36px);
  align-items: start;
}

@media (min-width: 900px) {
  .page-home .home-venue {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  }
}

.page-home .home-venue__fields {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border-top: 1px solid rgba(19, 23, 22, .16);
}

.page-home .home-venue__fields li {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid rgba(19, 23, 22, .16);
  font-size: var(--yb-fs-14);
  line-height: 1.7;
  color: rgba(19, 23, 22, .78);
}

.page-home .home-venue__fields span {
  font-family: var(--yb-font-headline);
  font-weight: 700;
  color: var(--yb-charcoal);
}

/* ============ 03 积分榜面板 ============ */
.page-home .home-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--yb-line-strong);
  border-radius: var(--yb-r-card);
  background: rgba(19, 23, 22, .7);
}

.page-home .home-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: var(--yb-fs-14);
}

.page-home .home-table caption {
  padding: 16px 18px 6px;
  text-align: left;
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  letter-spacing: .08em;
  color: rgba(228, 218, 203, .66);
}

.page-home .home-table th,
.page-home .home-table td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--yb-line);
}

.page-home .home-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(19, 23, 22, .97);
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(228, 218, 203, .7);
}

.page-home .home-table tbody th {
  font-weight: 600;
  color: var(--yb-paper);
}

.page-home .home-table tbody td {
  color: rgba(228, 218, 203, .78);
}

.page-home .home-table tbody td.is-num {
  font-family: var(--yb-font-data);
  font-size: 1rem;
  color: var(--yb-lime);
  font-variant-numeric: tabular-nums;
}

.page-home .home-table tbody tr:last-child th,
.page-home .home-table tbody tr:last-child td {
  border-bottom: 0;
}

.page-home .home-table tbody tr:hover th,
.page-home .home-table tbody tr:hover td {
  background: rgba(46, 93, 76, .32);
}

/* ============ 04 专栏面板 ============ */
.page-home .home-columns {
  display: grid;
  gap: 14px;
}

@media (min-width: 760px) {
  .page-home .home-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-home .home-column-card {
  padding: 22px 20px;
  border: 1px solid var(--yb-line);
  border-top: 3px solid var(--yb-copper);
  border-radius: var(--yb-r-card);
  background: rgba(12, 43, 37, .42);
  transition: border-color .24s ease, background-color .24s ease;
}

.page-home .home-column-card:hover {
  border-color: var(--yb-line-warm);
  border-top-color: var(--yb-lime);
  background: rgba(46, 93, 76, .5);
}

.page-home .home-column-card__num {
  margin: 0 0 10px;
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  letter-spacing: .14em;
  color: var(--yb-copper-lt);
}

.page-home .home-column-card h3 {
  margin: 0 0 10px;
  font-family: var(--yb-font-headline);
  font-weight: 700;
  font-size: var(--yb-fs-24);
  line-height: 1.3;
  color: var(--yb-paper);
}

.page-home .home-column-card p {
  margin: 0 0 12px;
  font-size: var(--yb-fs-14);
  line-height: 1.72;
  color: var(--yb-text-dim);
}

.page-home .home-column-card__meta {
  margin: 0;
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  color: rgba(228, 218, 203, .55);
}

/* ============ 05 纠错与联络面板 ============ */
.page-home .home-support {
  display: grid;
  gap: 12px;
  margin: 0 0 clamp(20px, 2.6vw, 28px);
}

@media (min-width: 700px) {
  .page-home .home-support {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-home .home-support__item {
  padding: 18px 20px;
  border: 1px solid var(--yb-line);
  border-radius: var(--yb-r-card);
  background: rgba(12, 43, 37, .42);
}

.page-home .home-support__value {
  margin: 0 0 6px;
  font-family: var(--yb-font-data);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  color: var(--yb-lime);
}

.page-home .home-support__value--time {
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  padding-top: .35em;
  color: var(--yb-copper-lt);
}

.page-home .home-support__value span {
  margin-left: 3px;
  font-size: .55em;
  color: var(--yb-copper-lt);
}

.page-home .home-support__label {
  margin: 0;
  font-size: var(--yb-fs-14);
  line-height: 1.65;
  color: rgba(228, 218, 203, .76);
}

.page-home .home-support__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ============ 动效降级 ============ */
@media (prefers-reduced-motion: reduce) {
  .page-home .home-index__link,
  .page-home .home-rail__link,
  .page-home .home-rail__dot,
  .page-home .home-chip,
  .page-home .home-case-card,
  .page-home .home-case-card__title,
  .page-home .home-fact,
  .page-home .home-column-card {
    transition: none;
  }

  .page-home .home-case-card:hover .home-case-card__title {
    transform: none;
  }
}
</main>


.page-home {
  --home-copper-deep: #7d4f22;
  color: var(--yb-paper);
  overflow-x: clip;
}

/* ============ 首屏封面 ============ */
.page-home .home-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--yb-deep);
}

.page-home .home-cover__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-home .home-cover__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.85) contrast(1.05);
}

.page-home .home-cover__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(12, 43, 37, .88) 0%, rgba(12, 43, 37, .6) 36%, rgba(12, 43, 37, .95) 100%),
    radial-gradient(120% 82% at 12% 18%, rgba(46, 93, 76, .58), transparent 62%);
}

.page-home .home-cover__inner {
  position: relative;
  z-index: 2;
  padding-top: clamp(132px, 20vh, 208px);
  padding-bottom: clamp(48px, 8vh, 92px);
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: end;
}

.page-home .home-cover__kicker {
  margin: 0 0 18px;
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  letter-spacing: .18em;
  color: var(--yb-copper-lt);
}

.page-home .home-cover__title {
  margin: 0 0 22px;
  font-family: var(--yb-font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 6.6vw, 6rem);
  line-height: .98;
  letter-spacing: -.025em;
  color: var(--yb-paper);
  text-wrap: balance;
}

.page-home .home-cover__title span {
  color: var(--yb-copper-lt);
}

.page-home .home-cover__lede {
  margin: 0 0 20px;
  max-width: 38em;
  font-family: var(--yb-font-body);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.8;
  color: var(--yb-text-soft);
}

.page-home .home-cover__flash {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  padding: 8px 14px;
  border: 1px solid var(--yb-line-warm);
  border-radius: 999px;
  background: rgba(12, 43, 37, .5);
  font-size: var(--yb-fs-14);
  line-height: 1.6;
  color: var(--yb-text-soft);
}

.page-home .home-cover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 四条主线索引 */
.page-home .home-index {
  border: 1px solid var(--yb-line-warm);
  border-radius: var(--yb-r-glass);
  padding: 20px 16px;
  background: rgba(12, 43, 37, .46);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.page-home .home-index__head {
  margin: 0 0 12px;
  padding-left: 12px;
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  letter-spacing: .2em;
  color: var(--yb-copper-lt);
}

.page-home .home-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-home .home-index__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: var(--yb-r-card);
  text-decoration: none;
  color: inherit;
  transition: background-color .24s ease, border-color .24s ease;
}

.page-home .home-index__link:hover {
  background: rgba(46, 93, 76, .52);
  border-color: var(--yb-line-warm);
}

.page-home .home-index__link:focus-visible {
  outline: 2px solid var(--yb-lime);
  outline-offset: 2px;
}

.page-home .home-index__num {
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-14);
  line-height: 1.5;
  color: var(--yb-copper-lt);
}

.page-home .home-index__label {
  display: block;
  font-family: var(--yb-font-headline);
  font-weight: 700;
  font-size: var(--yb-fs-18);
  line-height: 1.35;
  color: var(--yb-paper);
}

.page-home .home-index__note {
  display: block;
  margin-top: 4px;
  font-size: var(--yb-fs-14);
  line-height: 1.65;
  color: var(--yb-text-dim);
}

/* ============ 主体骨架 ============ */
.page-home .home-body {
  padding-top: clamp(40px, 6vw, 88px);
  padding-bottom: clamp(40px, 6vw, 96px);
}

.page-home .home-layout {
  display: block;
}

/* ============ 刻度轨道 ============ */
.page-home .home-rail-wrap {
  position: relative;
  z-index: 5;
  margin-bottom: 28px;
}

.page-home .home-rail__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-home .home-rail__list::-webkit-scrollbar {
  display: none;
}

.page-home .home-rail__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--yb-line);
  border-radius: 999px;
  font-size: var(--yb-fs-14);
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  color: var(--yb-text-dim);
  transition: color .24s ease, border-color .24s ease, background-color .24s ease;
}

.page-home .home-rail__link:hover {
  color: var(--yb-paper);
  border-color: var(--yb-line-warm);
  background: rgba(46, 93, 76, .32);
}

.page-home .home-rail__link:focus-visible {
  outline: 2px solid var(--yb-lime);
  outline-offset: 2px;
}

.page-home .home-rail__dot {
  display: none;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--yb-rock);
  transition: background-color .24s ease, box-shadow .24s ease;
}

.page-home .home-rail__num {
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  color: var(--yb-copper-lt);
}

.page-home .home-rail__label {
  font-size: var(--yb-fs-14);
}

.page-home .home-rail__link[data-current] {
  color: var(--yb-paper);
  border-color: var(--yb-copper);
  background: rgba(46, 93, 76, .4);
}

@media (min-width: 901px) {
  .page-home .home-layout {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }

  .page-home .home-rail-wrap {
    margin-bottom: 0;
  }

  .page-home .home-rail {
    position: sticky;
    top: 108px;
  }

  .page-home .home-rail__list {
    display: grid;
    gap: 0;
    padding: 0;
    overflow: visible;
    border-left: 1px solid var(--yb-line);
  }

  .page-home .home-rail__link {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: start;
    padding: 12px 12px 12px 10px;
    border: 0;
    border-radius: 0 var(--yb-r-card) var(--yb-r-card) 0;
    white-space: normal;
  }

  .page-home .home-rail__dot {
    display: block;
    grid-row: 1 / span 2;
    margin-top: .42em;
  }

  .page-home .home-rail__num,
  .page-home .home-rail__label {
    grid-column: 2;
  }

  .page-home .home-rail__label {
    line-height: 1.55;
  }

  .page-home .home-rail__link[data-current] .home-rail__dot {
    background: var(--yb-lime);
    box-shadow: 0 0 0 4px rgba(200, 240, 75, .16);
  }
}

/* ============ 堆叠面板 ============ */
.page-home .home-panel {
  padding: clamp(30px, 3.6vw, 52px) clamp(20px, 3vw, 44px);
  margin-bottom: clamp(26px, 3.4vw, 44px);
  border: 1px solid var(--yb-line);
  border-radius: 18px;
  background: rgba(46, 93, 76, .16);
}

.page-home .home-panel:last-child {
  margin-bottom: 0;
}

.page-home .home-panel--sand {
  background: var(--yb-sand);
  border-color: rgba(19, 23, 22, .16);
  color: var(--yb-charcoal);
}

.page-home .home-panel--charcoal {
  background: var(--yb-charcoal);
  border-color: var(--yb-line-strong);
}

.page-home .home-panel--moss {
  background: rgba(46, 93, 76, .44);
  border-color: var(--yb-line-strong);
}

.page-home .home-panel__head {
  margin: 0 0 clamp(20px, 2.6vw, 32px);
}

.page-home .home-panel__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 10px;
}

.page-home .home-panel__num {
  padding-bottom: 2px;
  border-bottom: 2px solid var(--yb-copper);
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-14);
  letter-spacing: .1em;
  color: var(--yb-copper);
}

.page-home .home-panel__kicker {
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  letter-spacing: .16em;
  color: var(--yb-text-dim);
}

.page-home .home-panel__title {
  margin: 0;
  font-family: var(--yb-font-headline);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--yb-paper);
}

.page-home .home-panel--sand .home-panel__title {
  color: var(--yb-charcoal);
}

.page-home .home-panel--sand .home-panel__num {
  border-bottom-color: var(--home-copper-deep);
  color: var(--home-copper-deep);
}

.page-home .home-panel--sand .home-panel__kicker {
  color: rgba(19, 23, 22, .58);
}

.page-home .home-panel__foot {
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--yb-line);
  font-size: var(--yb-fs-12);
  line-height: 1.75;
  color: rgba(228, 218, 203, .62);
}

.page-home .home-panel--sand .home-panel__foot {
  border-top-color: rgba(19, 23, 22, .14);
  color: rgba(19, 23, 22, .62);
}

.page-home .home-lede {
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  max-width: 38em;
  font-size: var(--yb-fs-16);
  line-height: 1.8;
  color: var(--yb-text-soft);
}

.page-home .home-panel--sand .home-lede {
  color: rgba(19, 23, 22, .8);
}

.page-home .home-note {
  margin: 0;
  max-width: 38em;
  font-size: var(--yb-fs-14);
  line-height: 1.75;
  color: rgba(19, 23, 22, .62);
}

.page-home .home-link {
  color: var(--yb-copper-lt);
  text-decoration: none;
  border-bottom: 1px solid var(--yb-line-warm);
}

.page-home .home-link:hover {
  color: var(--yb-lime);
  border-bottom-color: var(--yb-lime);
}

.page-home .home-link:focus-visible {
  outline: 2px solid var(--yb-lime);
  outline-offset: 2px;
}

/* ============ 图片容器 ============ */
.page-home .home-figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--yb-line);
  border-radius: var(--yb-r-img);
  background: linear-gradient(140deg, var(--yb-deep), var(--yb-moss));
}

.page-home .home-figure__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-home .home-figure--banner {
  margin-bottom: clamp(20px, 2.6vw, 30px);
}

/* ============ 01 案例 ============ */
.page-home .home-case-top {
  display: grid;
  gap: clamp(18px, 2.6vw, 30px);
  margin-bottom: clamp(24px, 3vw, 36px);
  align-items: start;
}

.page-home .home-case-facts {
  display: grid;
  gap: 12px;
}

.page-home .home-fact {
  padding: 16px 18px;
  border: 1px solid var(--yb-line);
  border-left: 3px solid var(--yb-copper);
  border-radius: var(--yb-r-card);
  background: rgba(12, 43, 37, .44);
  transition: border-color .24s ease, background-color .24s ease;
}

.page-home .home-fact:hover {
  border-color: var(--yb-copper);
  border-left-color: var(--yb-copper-lt);
  background: rgba(46, 93, 76, .5);
}

.page-home .home-fact__value {
  margin: 0 0 6px;
  font-family: var(--yb-font-data);
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.01em;
}

.page-home .home-fact__value--lime {
  color: var(--yb-lime);
}

.page-home .home-fact__value--copper {
  color: var(--yb-copper-lt);
}

.page-home .home-fact__value--mist {
  color: var(--yb-mist);
}

.page-home .home-fact__unit {
  margin-left: 3px;
  font-size: .5em;
}

.page-home .home-fact__label {
  margin: 0;
  font-size: var(--yb-fs-14);
  line-height: 1.65;
  color: var(--yb-text-dim);
}

.page-home .home-case-filter {
  margin: 0 0 18px;
}

.page-home .home-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-home .home-chip {
  padding: 8px 16px;
  border: 1px solid var(--yb-line);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: var(--yb-fs-14);
  line-height: 1.4;
  color: var(--yb-text-dim);
  cursor: pointer;
  transition: color .24s ease, border-color .24s ease, background-color .24s ease;
}

.page-home .home-chip:hover {
  color: var(--yb-paper);
  border-color: var(--yb-copper);
}

.page-home .home-chip[aria-pressed="true"] {
  background: var(--yb-lime);
  border-color: var(--yb-lime);
  color: var(--yb-charcoal);
}

.page-home .home-chip:focus-visible {
  outline: 2px solid var(--yb-lime);
  outline-offset: 2px;
}

.page-home .home-case-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-home .home-case-item {
  display: flex;
}

.page-home .home-case-item[hidden] {
  display: none;
}

.page-home .home-case-card {
  display: block;
  width: 100%;
  padding: 18px 20px;
  border: 1px solid var(--yb-line);
  border-radius: var(--yb-r-card);
  background: rgba(12, 43, 37, .42);
  text-decoration: none;
  color: inherit;
  transition: border-color .24s ease, background-color .24s ease;
}

.page-home .home-case-card:hover {
  border-color: var(--yb-copper);
  background: rgba(46, 93, 76, .5);
}

.page-home .home-case-card:hover .home-case-card__value {
  transform: scale(1.06);
}

.page-home .home-case-card:focus-visible {
  outline: 2px solid var(--yb-lime);
  outline-offset: 3px;
}

.page-home .home-case-card__tag {
  margin: 0 0 8px;
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  letter-spacing: .1em;
  color: var(--yb-copper-lt);
}

.page-home .home-case-card__title {
  margin: 0 0 8px;
  font-family: var(--yb-font-headline);
  font-weight: 700;
  font-size: var(--yb-fs-18);
  line-height: 1.38;
  color: var(--yb-paper);
}

.page-home .home-case-card__text {
  margin: 0 0 12px;
  font-size: var(--yb-fs-14);
  line-height: 1.7;
  color: var(--yb-text-dim);
}

.page-home .home-case-card__meta {
  margin: 0;
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  color: rgba(228, 218, 203, .55);
}

/* ============ 02 场馆 ============ */
.page-home .home-venue {
  display: grid;
  gap: clamp(22px, 3vw, 36px);
  align-items: start;
}

.page-home .home-venue__fields {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border-top: 1px solid rgba(19, 23, 22, .16);
}

.page-home .home-venue__fields li {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid rgba(19, 23, 22, .16);
  font-size: var(--yb-fs-14);
  line-height: 1.7;
  color: rgba(19, 23, 22, .78);
}

.page-home .home-venue__fields span {
  font-family: var(--yb-font-headline);
  font-weight: 700;
  color: var(--yb-charcoal);
}

/* ============ 03 积分榜 ============ */
.page-home .home-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--yb-line-strong);
  border-radius: var(--yb-r-card);
  background: rgba(19, 23, 22, .68);
}

.page-home .home-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: var(--yb-fs-14);
}

.page-home .home-table caption {
  padding: 16px 18px 6px;
  text-align: left;
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  letter-spacing: .08em;
  color: rgba(228, 218, 203, .66);
}

.page-home .home-table th,
.page-home .home-table td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--yb-line);
}

.page-home .home-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(19, 23, 22, .97);
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(228, 218, 203, .72);
}

.page-home .home-table tbody th {
  font-weight: 600;
  color: var(--yb-paper);
}

.page-home .home-table tbody td {
  color: rgba(228, 218, 203, .78);
}

.page-home .home-table tbody td.is-num {
  font-family: var(--yb-font-data);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--yb-lime);
}

.page-home .home-table tbody tr:last-child th,
.page-home .home-table tbody tr:last-child td {
  border-bottom: 0;
}

.page-home .home-table tbody tr:hover th,
.page-home .home-table tbody tr:hover td {
  background: rgba(46, 93, 76, .3);
}

/* ============ 04 专栏 ============ */
.page-home .home-columns {
  display: grid;
  gap: 14px;
}

.page-home .home-column-card {
  padding: 22px 20px;
  border: 1px solid var(--yb-line);
  border-top: 3px solid var(--yb-copper);
  border-radius: var(--yb-r-card);
  background: rgba(12, 43, 37, .42);
  transition: border-color .24s ease, background-color .24s ease;
}

.page-home .home-column-card:hover {
  border-color: var(--yb-line-warm);
  border-top-color: var(--yb-lime);
  background: rgba(46, 93, 76, .5);
}

.page-home .home-column-card__num {
  margin: 0 0 10px;
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  letter-spacing: .14em;
  color: var(--yb-copper-lt);
}

.page-home .home-column-card h3 {
  margin: 0 0 10px;
  font-family: var(--yb-font-headline);
  font-weight: 700;
  font-size: var(--yb-fs-24);
  line-height: 1.3;
  color: var(--yb-paper);
}

.page-home .home-column-card p {
  margin: 0 0 12px;
  font-size: var(--yb-fs-14);
  line-height: 1.72;
  color: var(--yb-text-dim);
}

.page-home .home-column-card__meta {
  margin: 0;
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  color: rgba(228, 218, 203, .55);
}

/* ============ 05 纠错与联络 ============ */
.page-home .home-support {
  display: grid;
  gap: 12px;
  margin: 0 0 clamp(20px, 2.6vw, 28px);
}

.page-home .home-support__item {
  padding: 18px 20px;
  border: 1px solid var(--yb-line);
  border-radius: var(--yb-r-card);
  background: rgba(12, 43, 37, .42);
}

.page-home .home-support__value {
  margin: 0 0 6px;
  font-family: var(--yb-font-data);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  color: var(--yb-lime);
}

.page-home .home-support__value--time {
  padding-top: .28em;
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  color: var(--yb-copper-lt);
}

.page-home .home-support__value span {
  margin-left: 3px;
  font-size: .55em;
  color: var(--yb-copper-lt);
}

.page-home .home-support__label {
  margin: 0;
  font-size: var(--yb-fs-14);
  line-height: 1.65;
  color: rgba(228, 218, 203, .76);
}

.page-home .home-support__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ============ 中屏与桌面栅格 ============ */
@media (min-width: 640px) {
  .page-home .home-case-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .page-home .home-fact:nth-child(2) {
    margin-top: 12px;
  }

  .page-home .home-fact:nth-child(3) {
    margin-top: 24px;
  }
}

@media (min-width: 760px) {
  .page-home .home-case-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .home-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .home-support {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-home .home-venue {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  }

  .page-home .home-cover__inner {
    grid-template-columns: minmax(0, 1.32fr) minmax(300px, .86fr);
    gap: clamp(40px, 5vw, 80px);
    padding-bottom: clamp(64px, 10vh, 112px);
  }
}

@media (min-width: 1180px) {
  .page-home .home-case-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============ 动效降级 ============ */
@media (prefers-reduced-motion: reduce) {
  .page-home .home-index__link,
  .page-home .home-rail__link,
  .page-home .home-rail__dot,
  .page-home .home-chip,
  .page-home .home-case-card,
  .page-home .home-case-card__value,
  .page-home .home-fact,
  .page-home .home-column-card {
    transition: none;
  }

  .page-home .home-case-card:hover .home-case-card__value {
    transform: none;
  }
}
<<<END>>>

等一下——我把输出结构搞混了。让我按标记重新整理一下。

另外，我注意到之前把 `class="is-num"` 加到了 `.home-fact__value` 上——这个没问题，它本来就是一个共享类。

我还应该再确认一下“首页”面板的类名里，有一部分 CSS 是不是重复了——确实，我写了两次这块 CSS。得清理一下。

现在按正确的顺序重新输出。
<main id="main-content" class="page-home">

  <section class="home-cover" aria-labelledby="cover-title">
    <div class="home-cover__media">
      <img class="home-cover__img" src="{zhanqunpic:h:1080w:1920}" width="1920" height="1080" alt="夜灯下的球场与看台，观众席轮廓与灯柱在低角度透视中延伸">
    </div>
    <div class="home-cover__veil" aria-hidden="true"></div>

    <div class="yb-shell home-cover__inner">
      <div class="home-cover__lead">
        <p class="home-cover__kicker">易倍体育看台 · 前行有据</p>
        <h1 id="cover-title" class="home-cover__title">站上看台高处<br><span>把比赛读透</span></h1>
        <p class="home-cover__lede">易倍体育看台为想把比赛看明白的人准备：赛前查对手的排名走势，第一次去客场前看清台分区，或者回看某一轮的关键指标，都能从这里直接开始。</p>
        <p class="home-cover__flash"><span class="yb-dot" aria-hidden="true"></span>当季案例合集每 24 小时刷新一次控球率与射门指标</p>
        <div class="home-cover__actions">
          <a class="yb-btn yb-btn--copper" href="/business/">进入积分榜</a>
          <a class="yb-btn yb-btn--ghost" href="/business/">首次访问看场馆信息</a>
        </div>
      </div>

      <nav class="home-index" aria-label="四条主线入口">
        <p class="home-index__head">四条主线</p>
        <ol class="home-index__list">
          <li class="home-index__item">
            <a class="home-index__link" href="/business/">
              <span class="home-index__num">01</span>
              <span class="home-index__body">
                <span class="home-index__label">场馆资料库</span>
                <span class="home-index__note">1260 座场馆，容量、草皮与看台分区都能查到</span>
              </span>
            </a>
          </li>
          <li class="home-index__item">
            <a class="home-index__link" href="/column/">
              <span class="home-index__num">02</span>
              <span class="home-index__body">
                <span class="home-index__label">当季案例合集</span>
                <span class="home-index__note">486 篇复盘，按联赛与主题双维度归好类</span>
              </span>
            </a>
          </li>
          <li class="home-index__item">
            <a class="home-index__link" href="/business/">
              <span class="home-index__num">03</span>
              <span class="home-index__body">
                <span class="home-index__label">客户端积分榜</span>
                <span class="home-index__note">按轮次查询，可回溯最近 12 个赛季的最终排名</span>
              </span>
            </a>
          </li>
          <li class="home-index__item">
            <a class="home-index__link" href="/column/">
              <span class="home-index__num">04</span>
              <span class="home-index__body">
                <span class="home-index__label">看台专栏</span>
                <span class="home-index__note">战术板、场馆志、数据笔记，每周更新 12 篇</span>
              </span>
            </a>
          </li>
        </ol>
      </nav>
    </div>
  </section>

  <div class="yb-shell home-body">
    <div class="home-layout">

      <aside class="home-rail-wrap">
        <nav class="home-rail" data-rail aria-label="看台首页章节刻度">
          <ol class="home-rail__list">
            <li class="home-rail__item">
              <a class="home-rail__link" data-rail-link="cases" href="#cases">
                <span class="home-rail__dot" aria-hidden="true"></span>
                <span class="home-rail__num">01</span>
                <span class="home-rail__label">本季案例快照</span>
              </a>
            </li>
            <li class="home-rail__item">
              <a class="home-rail__link" data-rail-link="venues" href="#venues">
                <span class="home-rail__dot" aria-hidden="true"></span>
                <span class="home-rail__num">02</span>
                <span class="home-rail__label">场馆从哪看起</span>
              </a>
            </li>
            <li class="home-rail__item">
              <a class="home-rail__link" data-rail-link="standings" href="#standings">
                <span class="home-rail__dot" aria-hidden="true"></span>
                <span class="home-rail__num">03</span>
                <span class="home-rail__label">跨联赛比对</span>
              </a>
            </li>
            <li class="home-rail__item">
              <a class="home-rail__link" data-rail-link="column" href="#column">
                <span class="home-rail__dot" aria-hidden="true"></span>
                <span class="home-rail__num">04</span>
                <span class="home-rail__label">专栏在写什么</span>
              </a>
            </li>
            <li class="home-rail__item">
              <a class="home-rail__link" data-rail-link="support" href="#support">
                <span class="home-rail__dot" aria-hidden="true"></span>
                <span class="home-rail__num">05</span>
                <span class="home-rail__label">数据纠错与联络</span>
              </a>
            </li>
          </ol>
        </nav>
      </aside>

      <div class="home-main">

        <section class="home-panel" id="cases" data-panel="cases" data-reveal>
          <header class="home-panel__head">
            <p class="home-panel__meta">
              <span class="home-panel__num">01</span>
              <span class="home-panel__kicker">本季案例快照</span>
            </p>
            <h2 class="home-panel__title">这一季，看台上都在聊什么</h2>
          </header>

          <div class="home-panel__body">
            <p class="home-lede">每场比赛结束后，编辑把技术统计算一遍，再写成一篇能读懂的比赛复盘。你看到的不只是一串数字，而是这一轮为什么这样踢、下一轮该盯住哪个位置。</p>

            <div class="home-case-top">
              <figure class="home-figure home-figure--3x2">
                <img class="home-figure__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="球场地板纹理特写，线条与反光构成几何图案" loading="lazy" decoding="async">
              </figure>
              <div class="home-case-facts">
                <div class="home-fact">
                  <p class="home-fact__value home-fact__value--lime is-num">486</p>
                  <p class="home-fact__label">篇当季案例已归档，按联赛与主题双维度分类</p>
                </div>
                <div class="home-fact">
                  <p class="home-fact__value home-fact__value--copper is-num">42</p>
                  <p class="home-fact__label">个联赛与杯赛的赛程、积分和排名数据持续更新</p>
                </div>
                <div class="home-fact">
                  <p class="home-fact__value home-fact__value--mist is-num">24<span class="home-fact__unit">h</span></p>
                  <p class="home-fact__label">控球率、射门与传球成功率的刷新间隔</p>
                </div>
              </div>
            </div>

            <div class="home-case-filter">
              <div class="home-chips" data-chip-group data-filter-target=".home-case-item">
                <button class="home-chip" type="button" data-chip="all" data-chip-active aria-pressed="true">全部</button>
                <button class="home-chip" type="button" data-chip="europe" aria-pressed="false">欧洲联赛</button>
                <button class="home-chip" type="button" data-chip="cup" aria-pressed="false">杯赛</button>
                <button class="home-chip" type="button" data-chip="domestic" aria-pressed="false">国内联赛</button>
                <button class="home-chip" type="button" data-chip="youth" aria-pressed="false">青年赛事</button>
              </div>
            </div>

            <ul class="home-case-list">
              <li class="home-case-item" data-tags="all europe cup">
                <a class="home-case-card" href="/column/">
                  <p class="home-case-card__tag">战术板</p>
                  <h3 class="home-case-card__title">高位逼抢下的传球成功率</h3>
                  <p class="home-case-card__text">前场三人组的压迫触发点落在哪，一次出球失误要付出多少代价。</p>
                  <p class="home-case-card__meta">欧洲联赛 · 第 18 轮</p>
                </a>
              </li>
              <li class="home-case-item" data-tags="all cup domestic">
                <a class="home-case-card" href="/column/">
                  <p class="home-case-card__tag">战术板</p>
                  <h3 class="home-case-card__title">防守反击的黄金窗口</h3>
                  <p class="home-case-card__text">从断球到射门的平均用时，决定了这支队伍能不能把机会留住。</p>
                  <p class="home-case-card__meta">杯赛 · 小组赛阶段</p>
                </a>
              </li>
              <li class="home-case-item" data-tags="all domestic">
                <a class="home-case-card" href="/column/">
                  <p class="home-case-card__tag">数据笔记</p>
                  <h3 class="home-case-card__title">草皮更替之后的控球率走向</h3>
                  <p class="home-case-card__text">场地条件变了，短传比例和二次落点争抢往往最先跟着变。</p>
                  <p class="home-case-card__meta">国内联赛 · 第 12 轮</p>
                </a>
              </li>
              <li class="home-case-item" data-tags="all youth">
                <a class="home-case-card" href="/column/">
                  <p class="home-case-card__tag">数据笔记</p>
                  <h3 class="home-case-card__title">门将出击范围怎么定</h3>
                  <p class="home-case-card__text">把出击半径和失球位置叠在一张图上，防守站位的问题就看得见了。</p>
                  <p class="home-case-card__meta">青年赛事 · 八强阶段</p>
                </a>
              </li>
              <li class="home-case-item" data-tags="all europe cup">
                <a class="home-case-card" href="/column/">
                  <p class="home-case-card__tag">战术板</p>
                  <h3 class="home-case-card__title">定位球得分结构拆解</h3>
                  <p class="home-case-card__text">前点、后点与第二落点各占多少，训练里该先练哪一套跑位。</p>
                  <p class="home-case-card__meta">欧洲联赛 · 第 15 轮</p>
                </a>
              </li>
              <li class="home-case-item" data-tags="all cup youth">
                <a class="home-case-card" href="/column/">
                  <p class="home-case-card__tag">数据笔记</p>
                  <h3 class="home-case-card__title">加时阶段的体能曲线</h3>
                  <p class="home-case-card__text">最后三十分钟的跑动衰减，往往比比分更早预告结果。</p>
                  <p class="home-case-card__meta">杯赛 · 决赛日</p>
                </a>
              </li>
            </ul>
          </div>

          <p class="home-panel__foot">案例取自官方赛事技术统计与公开转播画面，每场比赛经过两道校验后入库。</p>
        </section>

        <section class="home-panel home-panel--sand" id="venues" data-panel="venues" data-reveal>
          <header class="home-panel__head">
            <p class="home-panel__meta">
              <span class="home-panel__num">02</span>
              <span class="home-panel__kicker">首次访问看场馆信息</span>
            </p>
            <h2 class="home-panel__title">去一座没去过的球场，先看清台</h2>
          </header>

          <div class="home-panel__body">
            <div class="home-venue">
              <div class="home-venue__text">
                <p class="home-lede">第一次打开场馆资料库，直接搜城市名或场馆名就行。出门前十分钟，把容量、草皮和看台分区过一遍，到了现场就不用在入口处来回找。</p>
                <ul class="home-venue__fields">
                  <li><span>容量</span>座位总数与各看台分区的人数分布</li>
                  <li><span>草皮</span>天然草、混合草或人造草，含近期维护记录</li>
                  <li><span>看台分区</span>主场区、客队区与中立区的具体位置</li>
                  <li><span>交通到达</span>最近的地铁、公交站与自驾停车位数量</li>
                  <li><span>观赛视角</span>不同分区的视线遮挡与距球门的远近</li>
                </ul>
                <p class="home-note">资料库收录 1260 座场馆，覆盖国内各级联赛与主要洲际赛事的承办地；场馆改造后字段会随赛事周期补充。</p>
              </div>
              <figure class="home-figure home-figure--4x3">
                <img class="home-figure__img" src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="从看台中部俯瞰整片场地，分区座椅与边线清晰可见" loading="lazy" decoding="async">
              </figure>
            </div>
          </div>

          <p class="home-panel__foot">场馆字段由场馆资料组维护，配套 6 名专职编辑跟进新增与改造信息。</p>
        </section>

        <section class="home-panel home-panel--charcoal" id="standings" data-panel="standings" data-reveal>
          <header class="home-panel__head">
            <p class="home-panel__meta">
              <span class="home-panel__num">03</span>
              <span class="home-panel__kicker">积分榜与跨联赛比对</span>
            </p>
            <h2 class="home-panel__title">换个角度，把四个联赛摆在一起看</h2>
          </header>

          <div class="home-panel__body">
            <p class="home-lede">积分榜支持按轮次查询，想回看第几轮就翻到第几轮。多联赛比对面板最多同时并列四个联赛，把积分曲线、场均进球和主客场胜率放进同一张表，导出成图片就能直接发进讨论群。</p>

            <figure class="home-figure home-figure--16x9 home-figure--banner">
              <img class="home-figure__img" src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="深底上的抽象数据可视化图形，多条对比曲线与环形刻度交叠" loading="lazy" decoding="async">
            </figure>

            <div class="home-table-wrap">
              <table class="home-table">
                <caption>按第 18 轮快照并列四个联赛</caption>
                <thead>
                  <tr>
                    <th scope="col">联赛</th>
                    <th scope="col">已赛轮次</th>
                    <th scope="col">场均进球</th>
                    <th scope="col">主场胜率</th>
                    <th scope="col">平局占比</th>
                    <th scope="col">场均角球</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">欧洲联赛</th>
                    <td class="is-num">18</td>
                    <td class="is-num">2.84</td>
                    <td class="is-num">46%</td>
                    <td class="is-num">24%</td>
                    <td class="is-num">10.6</td>
                  </tr>
                  <tr>
                    <th scope="row">国内联赛</th>
                    <td class="is-num">18</td>
                    <td class="is-num">2.51</td>
                    <td class="is-num">51%</td>
                    <td class="is-num">27%</td>
                    <td class="is-num">9.8</td>
                  </tr>
                  <tr>
                    <th scope="row">洲际杯赛</th>
                    <td class="is-num">6</td>
                    <td class="is-num">2.67</td>
                    <td class="is-num">43%</td>
                    <td class="is-num">21%</td>
                    <td class="is-num">11.2</td>
                  </tr>
                  <tr>
                    <th scope="row">青年联赛</th>
                    <td class="is-num">18</td>
                    <td class="is-num">3.12</td>
                    <td class="is-num">48%</td>
                    <td class="is-num">19%</td>
                    <td class="is-num">9.1</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <p class="home-panel__foot">积分榜回溯最近 12 个赛季的最终排名，桌面与移动端均可横向滚动查看完整字段。</p>
        </section>

        <section class="home-panel" id="column" data-panel="column" data-reveal>
          <header class="home-panel__head">
            <p class="home-panel__meta">
              <span class="home-panel__num">04</span>
              <span class="home-panel__kicker">专栏在写什么</span>
            </p>
            <h2 class="home-panel__title">每周十二篇，三种写法</h2>
          </header>

          <div class="home-panel__body">
            <p class="home-lede">专栏每周更新 12 篇，分成三条线。想搞懂一套打法就看战术板，出发前想了解球场就翻场馆志，需要横向数据就打开数据笔记。</p>

            <div class="home-columns">
              <article class="home-column-card">
                <p class="home-column-card__num">战术板</p>
                <h3>把打法画出来</h3>
                <p>拆解阵型变化、压迫触发点与定位球设计，配手绘战术线条，看完能自己在本子上复一遍。</p>
                <p class="home-column-card__meta">每周约 5 篇</p>
              </article>
              <article class="home-column-card">
                <p class="home-column-card__num">场馆志</p>
                <h3>球场不只是背景</h3>
                <p>写看台怎么建、草皮怎么换、观众怎么进场。客场出发前读一篇，到场时会顺手很多。</p>
                <p class="home-column-card__meta">每周约 3 篇</p>
              </article>
              <article class="home-column-card">
                <p class="home-column-card__num">数据笔记</p>
                <h3>数字背后的意思</h3>
                <p>控球率、射正率、跑动距离怎么读，哪些指标会骗人，哪几个连起来才说明问题。</p>
                <p class="home-column-card__meta">每周约 4 篇</p>
              </article>
            </div>
          </div>

          <p class="home-panel__foot">专栏自 2018 年上线，由 26 名赛事编辑按三条线分工供稿。</p>
        </section>

        <section class="home-panel home-panel--moss" id="support" data-panel="support" data-reveal>
          <header class="home-panel__head">
            <p class="home-panel__meta">
              <span class="home-panel__num">05</span>
              <span class="home-panel__kicker">数据纠错与联络</span>
            </p>
            <h2 class="home-panel__title">数字对不上，告诉我们</h2>
          </header>

          <div class="home-panel__body">
            <p class="home-lede">如果你在某一轮的积分、控球率或场馆字段上看到和转播画面不一致的地方，可以通过站内的看台通道提交，附上轮次与场次即可，不用写长说明。</p>

            <div class="home-support">
              <div class="home-support__item">
                <p class="home-support__value is-num">24<span>h</span></p>
                <p class="home-support__label">收到纠错后的平均响应时间</p>
              </div>
              <div class="home-support__item">
                <p class="home-support__value is-num">48<span>h</span></p>
                <p class="home-support__label">给出复核结论的时间</p>
              </div>
              <div class="home-support__item">
                <p class="home-support__value home-support__value--time is-num">10:00–19:00</p>
                <p class="home-support__label">工作日客服在线时段（北京时间）</p>
              </div>
            </div>

            <div class="home-support__links">
              <a class="yb-btn yb-btn--copper" href="/connect/">联系通道</a>
              <a class="yb-btn yb-btn--ghost" href="/answers/">答疑中心</a>
            </div>
          </div>

          <p class="home-panel__foot">数据由 42 人的团队维护：赛事编辑 26 人、数据校验 10 人、场馆资料 6 人。<a class="home-link" href="/profile/">了解团队分工</a></p>
        </section>

      </div>
    </div>
  </div>
</main>

.page-home {
  --home-copper-deep: #7d4f22;
  color: var(--yb-paper);
  overflow-x: clip;
}

/* ============ 首屏封面 ============ */
.page-home .home-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--yb-deep);
}

.page-home .home-cover__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-home .home-cover__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.85) contrast(1.05);
}

.page-home .home-cover__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(12, 43, 37, .88) 0%, rgba(12, 43, 37, .6) 36%, rgba(12, 43, 37, .95) 100%),
    radial-gradient(120% 82% at 12% 18%, rgba(46, 93, 76, .58), transparent 62%);
}

.page-home .home-cover__inner {
  position: relative;
  z-index: 2;
  padding-top: clamp(132px, 20vh, 208px);
  padding-bottom: clamp(48px, 8vh, 92px);
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: end;
}

.page-home .home-cover__kicker {
  margin: 0 0 18px;
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  letter-spacing: .18em;
  color: var(--yb-copper-lt);
}

.page-home .home-cover__title {
  margin: 0 0 22px;
  font-family: var(--yb-font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 6.6vw, 6rem);
  line-height: .98;
  letter-spacing: -.025em;
  color: var(--yb-paper);
  text-wrap: balance;
}

.page-home .home-cover__title span {
  color: var(--yb-copper-lt);
}

.page-home .home-cover__lede {
  margin: 0 0 20px;
  max-width: 38em;
  font-family: var(--yb-font-body);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.8;
  color: var(--yb-text-soft);
}

.page-home .home-cover__flash {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  padding: 8px 14px;
  border: 1px solid var(--yb-line-warm);
  border-radius: 999px;
  background: rgba(12, 43, 37, .5);
  font-size: var(--yb-fs-14);
  line-height: 1.6;
  color: var(--yb-text-soft);
}

.page-home .home-cover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 首屏四条主线索引 */
.page-home .home-index {
  border: 1px solid var(--yb-line-warm);
  border-radius: var(--yb-r-glass);
  padding: 20px 16px;
  background: rgba(12, 43, 37, .46);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.page-home .home-index__head {
  margin: 0 0 12px;
  padding-left: 12px;
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  letter-spacing: .2em;
  color: var(--yb-copper-lt);
}

.page-home .home-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-home .home-index__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: var(--yb-r-card);
  text-decoration: none;
  color: inherit;
  transition: background-color .24s ease, border-color .24s ease;
}

.page-home .home-index__link:hover {
  background: rgba(46, 93, 76, .52);
  border-color: var(--yb-line-warm);
}

.page-home .home-index__link:focus-visible {
  outline: 2px solid var(--yb-lime);
  outline-offset: 2px;
}

.page-home .home-index__num {
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-14);
  line-height: 1.5;
  color: var(--yb-copper-lt);
}

.page-home .home-index__label {
  display: block;
  font-family: var(--yb-font-headline);
  font-weight: 700;
  font-size: var(--yb-fs-18);
  line-height: 1.35;
  color: var(--yb-paper);
}

.page-home .home-index__note {
  display: block;
  margin-top: 4px;
  font-size: var(--yb-fs-14);
  line-height: 1.65;
  color: var(--yb-text-dim);
}

/* ============ 主体骨架 ============ */
.page-home .home-body {
  padding-top: clamp(40px, 6vw, 88px);
  padding-bottom: clamp(40px, 6vw, 96px);
}

.page-home .home-layout {
  display: block;
}

/* ============ 刻度轨道 ============ */
.page-home .home-rail-wrap {
  position: relative;
  z-index: 5;
  margin-bottom: 28px;
}

.page-home .home-rail__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-home .home-rail__list::-webkit-scrollbar {
  display: none;
}

.page-home .home-rail__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--yb-line);
  border-radius: 999px;
  font-size: var(--yb-fs-14);
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  color: var(--yb-text-dim);
  transition: color .24s ease, border-color .24s ease, background-color .24s ease;
}

.page-home .home-rail__link:hover {
  color: var(--yb-paper);
  border-color: var(--yb-line-warm);
  background: rgba(46, 93, 76, .32);
}

.page-home .home-rail__link:focus-visible {
  outline: 2px solid var(--yb-lime);
  outline-offset: 2px;
}

.page-home .home-rail__dot {
  display: none;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--yb-rock);
  transition: background-color .24s ease, box-shadow .24s ease;
}

.page-home .home-rail__num {
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  color: var(--yb-copper-lt);
}

.page-home .home-rail__link[data-current] {
  color: var(--yb-paper);
  border-color: var(--yb-copper);
  background: rgba(46, 93, 76, .4);
}

/* ============ 堆叠面板 ============ */
.page-home .home-panel {
  padding: clamp(30px, 3.6vw, 52px) clamp(20px, 3vw, 44px);
  margin-bottom: clamp(26px, 3.4vw, 44px);
  border: 1px solid var(--yb-line);
  border-radius: 18px;
  background: rgba(46, 93, 76, .16);
}

.page-home .home-panel:last-child {
  margin-bottom: 0;
}

.page-home .home-panel--sand {
  background: var(--yb-sand);
  border-color: rgba(19, 23, 22, .16);
  color: var(--yb-charcoal);
}

.page-home .home-panel--charcoal {
  background: var(--yb-charcoal);
  border-color: var(--yb-line-strong);
}

.page-home .home-panel--moss {
  background: rgba(46, 93, 76, .44);
  border-color: var(--yb-line-strong);
}

.page-home .home-panel__head {
  margin: 0 0 clamp(20px, 2.6vw, 32px);
}

.page-home .home-panel__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 10px;
}

.page-home .home-panel__num {
  padding-bottom: 2px;
  border-bottom: 2px solid var(--yb-copper);
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-14);
  letter-spacing: .1em;
  color: var(--yb-copper);
}

.page-home .home-panel__kicker {
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  letter-spacing: .16em;
  color: var(--yb-text-dim);
}

.page-home .home-panel__title {
  margin: 0;
  font-family: var(--yb-font-headline);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--yb-paper);
}

.page-home .home-panel--sand .home-panel__title {
  color: var(--yb-charcoal);
}

.page-home .home-panel--sand .home-panel__num {
  border-bottom-color: var(--home-copper-deep);
  color: var(--home-copper-deep);
}

.page-home .home-panel--sand .home-panel__kicker {
  color: rgba(19, 23, 22, .58);
}

.page-home .home-panel__foot {
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--yb-line);
  font-size: var(--yb-fs-12);
  line-height: 1.75;
  color: rgba(228, 218, 203, .62);
}

.page-home .home-panel--sand .home-panel__foot {
  border-top-color: rgba(19, 23, 22, .14);
  color: rgba(19, 23, 22, .62);
}

.page-home .home-lede {
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  max-width: 38em;
  font-size: var(--yb-fs-16);
  line-height: 1.8;
  color: var(--yb-text-soft);
}

.page-home .home-panel--sand .home-lede {
  color: rgba(19, 23, 22, .8);
}

.page-home .home-note {
  margin: 0;
  max-width: 38em;
  font-size: var(--yb-fs-14);
  line-height: 1.75;
  color: rgba(19, 23, 22, .62);
}

.page-home .home-link {
  color: var(--yb-copper-lt);
  text-decoration: none;
  border-bottom: 1px solid var(--yb-line-warm);
}

.page-home .home-link:hover {
  color: var(--yb-lime);
  border-bottom-color: var(--yb-lime);
}

.page-home .home-link:focus-visible {
  outline: 2px solid var(--yb-lime);
  outline-offset: 2px;
}

/* ============ 图片容器 ============ */
.page-home .home-figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--yb-line);
  border-radius: var(--yb-r-img);
  background: linear-gradient(140deg, var(--yb-deep), var(--yb-moss));
}

.page-home .home-figure__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-home .home-figure--banner {
  margin-bottom: clamp(20px, 2.6vw, 30px);
}

/* ============ 01 本季案例快照 ============ */
.page-home .home-case-top {
  display: grid;
  gap: clamp(18px, 2.6vw, 30px);
  margin-bottom: clamp(24px, 3vw, 36px);
  align-items: start;
}

.page-home .home-case-facts {
  display: grid;
  gap: 12px;
}

.page-home .home-fact {
  padding: 16px 18px;
  border: 1px solid var(--yb-line);
  border-left: 3px solid var(--yb-copper);
  border-radius: var(--yb-r-card);
  background: rgba(12, 43, 37, .44);
  transition: border-color .24s ease, background-color .24s ease;
}

.page-home .home-fact:hover {
  border-color: var(--yb-copper);
  border-left-color: var(--yb-copper-lt);
  background: rgba(46, 93, 76, .5);
}

.page-home .home-fact__value {
  margin: 0 0 6px;
  font-family: var(--yb-font-data);
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.01em;
}

.page-home .home-fact__value--lime {
  color: var(--yb-lime);
}

.page-home .home-fact__value--copper {
  color: var(--yb-copper-lt);
}

.page-home .home-fact__value--mist {
  color: var(--yb-mist);
}

.page-home .home-fact__unit {
  margin-left: 3px;
  font-size: .5em;
}

.page-home .home-fact__label {
  margin: 0;
  font-size: var(--yb-fs-14);
  line-height: 1.65;
  color: var(--yb-text-dim);
}

.page-home .home-case-filter {
  margin: 0 0 18px;
}

.page-home .home-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-home .home-chip {
  padding: 8px 16px;
  border: 1px solid var(--yb-line);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: var(--yb-fs-14);
  line-height: 1.4;
  color: var(--yb-text-dim);
  cursor: pointer;
  transition: color .24s ease, border-color .24s ease, background-color .24s ease;
}

.page-home .home-chip:hover {
  color: var(--yb-paper);
  border-color: var(--yb-copper);
}

.page-home .home-chip[aria-pressed="true"] {
  background: var(--yb-lime);
  border-color: var(--yb-lime);
  color: var(--yb-charcoal);
}

.page-home .home-chip:focus-visible {
  outline: 2px solid var(--yb-lime);
  outline-offset: 2px;
}

.page-home .home-case-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-home .home-case-item {
  display: flex;
}

.page-home .home-case-item[hidden] {
  display: none;
}

.page-home .home-case-card {
  display: block;
  width: 100%;
  padding: 18px 20px;
  border: 1px solid var(--yb-line);
  border-radius: var(--yb-r-card);
  background: rgba(12, 43, 37, .42);
  text-decoration: none;
  color: inherit;
  transition: border-color .24s ease, background-color .24s ease;
}

.page-home .home-case-card:hover {
  border-color: var(--yb-copper);
  background: rgba(46, 93, 76, .5);
}

.page-home .home-case-card:focus-visible {
  outline: 2px solid var(--yb-lime);
  outline-offset: 3px;
}

.page-home .home-case-card__tag {
  margin: 0 0 8px;
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  letter-spacing: .1em;
  color: var(--yb-copper-lt);
}

.page-home .home-case-card__title {
  margin: 0 0 8px;
  font-family: var(--yb-font-headline);
  font-weight: 700;
  font-size: var(--yb-fs-18);
  line-height: 1.38;
  color: var(--yb-paper);
}

.page-home .home-case-card__text {
  margin: 0 0 12px;
  font-size: var(--yb-fs-14);
  line-height: 1.7;
  color: var(--yb-text-dim);
}

.page-home .home-case-card__meta {
  margin: 0;
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  color: rgba(228, 218, 203, .55);
}

/* ============ 02 场馆 ============ */
.page-home .home-venue {
  display: grid;
  gap: clamp(22px, 3vw, 36px);
  align-items: start;
}

.page-home .home-venue__fields {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border-top: 1px solid rgba(19, 23, 22, .16);
}

.page-home .home-venue__fields li {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid rgba(19, 23, 22, .16);
  font-size: var(--yb-fs-14);
  line-height: 1.7;
  color: rgba(19, 23, 22, .78);
}

.page-home .home-venue__fields span {
  font-family: var(--yb-font-headline);
  font-weight: 700;
  color: var(--yb-charcoal);
}

/* ============ 03 积分榜 ============ */
.page-home .home-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--yb-line-strong);
  border-radius: var(--yb-r-card);
  background: rgba(19, 23, 22, .68);
}

.page-home .home-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: var(--yb-fs-14);
}

.page-home .home-table caption {
  padding: 16px 18px 6px;
  text-align: left;
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  letter-spacing: .08em;
  color: rgba(228, 218, 203, .66);
}

.page-home .home-table th,
.page-home .home-table td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--yb-line);
}

.page-home .home-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(19, 23, 22, .97);
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(228, 218, 203, .72);
}

.page-home .home-table tbody th {
  font-weight: 600;
  color: var(--yb-paper);
}

.page-home .home-table tbody td {
  color: rgba(228, 218, 203, .78);
}

.page-home .home-table tbody td.is-num {
  font-family: var(--yb-font-data);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--yb-lime);
}

.page-home .home-table tbody tr:last-child th,
.page-home .home-table tbody tr:last-child td {
  border-bottom: 0;
}

.page-home .home-table tbody tr:hover th,
.page-home .home-table tbody tr:hover td {
  background: rgba(46, 93, 76, .3);
}

/* ============ 04 专栏 ============ */
.page-home .home-columns {
  display: grid;
  gap: 14px;
}

.page-home .home-column-card {
  padding: 22px 20px;
  border: 1px solid var(--yb-line);
  border-top: 3px solid var(--yb-copper);
  border-radius: var(--yb-r-card);
  background: rgba(12, 43, 37, .42);
  transition: border-color .24s ease, background-color .24s ease;
}

.page-home .home-column-card:hover {
  border-color: var(--yb-line-warm);
  border-top-color: var(--yb-lime);
  background: rgba(46, 93, 76, .5);
}

.page-home .home-column-card__num {
  margin: 0 0 10px;
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  letter-spacing: .14em;
  color: var(--yb-copper-lt);
}

.page-home .home-column-card h3 {
  margin: 0 0 10px;
  font-family: var(--yb-font-headline);
  font-weight: 700;
  font-size: var(--yb-fs-24);
  line-height: 1.3;
  color: var(--yb-paper);
}

.page-home .home-column-card p {
  margin: 0 0 12px;
  font-size: var(--yb-fs-14);
  line-height: 1.72;
  color: var(--yb-text-dim);
}

.page-home .home-column-card__meta {
  margin: 0;
  font-family: var(--yb-font-data);
  font-size: var(--yb-fs-12);
  color: rgba(228, 218, 203, .55);
}

/* ============ 05 纠错与联络 ============ */
.page-home .home-support {
  display: grid;
  gap: 12px;
  margin: 0 0 clamp(20px, 2.6vw, 28px);
}

.page-home .home-support__item {
  padding: 18px 20px;
  border: 1px solid var(--yb-line);
  border-radius: var(--yb-r-card);
  background: rgba(12, 43, 37, .42);
}

.page-home .home-support__value {
  margin: 0 0 6px;
  font-family: var(--yb-font-data);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  color: var(--yb-lime);
}

.page-home .home-support__value--time {
  padding-top: .28em;
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  color: var(--yb-copper-lt);
}

.page-home .home-support__value span {
  margin-left: 3px;
  font-size: .55em;
  color: var(--yb-copper-lt);
}

.page-home .home-support__label {
  margin: 0;
  font-size: var(--yb-fs-14);
  line-height: 1.65;
  color: rgba(228, 218, 203, .76);
}

.page-home .home-support__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ============ 栅格断点 ============ */
@media (min-width: 640px) {
  .page-home .home-case-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .page-home .home-fact:nth-child(2) {
    margin-top: 12px;
  }

  .page-home .home-fact:nth-child(3) {
    margin-top: 24px;
  }
}

@media (min-width: 760px) {
  .page-home .home-case-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .home-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .home-support {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-home .home-cover__inner {
    grid-template-columns: minmax(0, 1.32fr) minmax(300px, .86fr);
    gap: clamp(40px, 5vw, 80px);
    padding-bottom: clamp(64px, 10vh, 112px);
  }

  .page-home .home-venue {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  }

  .page-home .home-layout {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }

  .page-home .home-rail-wrap {
    margin-bottom: 0;
  }

  .page-home .home-rail {
    position: sticky;
    top: 108px;
  }

  .page-home .home-rail__list {
    display: grid;
    gap: 0;
    padding: 0;
    overflow: visible;
    border-left: 1px solid var(--yb-line);
  }

  .page-home .home-rail__link {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: start;
    padding: 12px 12px 12px 10px;
    border: 0;
    border-radius: 0 var(--yb-r-card) var(--yb-r-card) 0;
    white-space: normal;
  }

  .page-home .home-rail__dot {
    display: block;
    grid-row: 1 / span 2;
    margin-top: .42em;
  }

  .page-home .home-rail__num,
  .page-home .home-rail__label {
    grid-column: 2;
  }

  .page-home .home-rail__label {
    line-height: 1.55;
  }

  .page-home .home-rail__link[data-current] .home-rail__dot {
    background: var(--yb-lime);
    box-shadow: 0 0 0 4px rgba(200, 240, 75, .16);
  }
}

@media (min-width: 1180px) {
  .page-home .home-case-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============ 动效降级 ============ */
@media (prefers-reduced-motion: reduce) {
  .page-home .home-index__link,
  .page-home .home-rail__link,
  .page-home .home-rail__dot,
  .page-home .home-chip,
  .page-home .home-case-card,
  .page-home .home-fact,
  .page-home .home-column-card {
    transition: none;
  }
}
<<<END>>>