.page-home {
  --home-hair: var(--border-thin) solid var(--color-line);
  --home-hair-strong: var(--border-thin) solid var(--color-contrast-line);
  --home-radius: var(--radius-lg);
  --home-soft-ink: color-mix(in srgb, var(--color-contrast-ink) 70%, transparent);
  display: block;
}

.page-home .home-h2 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: clamp(var(--text-lg), 3.1vw, var(--text-2xl));
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: -0.012em;
  color: var(--color-ink);
}

.page-home .home-section-head {
  max-width: var(--measure);
  margin-bottom: var(--space-4);
}

.page-home .home-section-head .lead {
  margin: 0;
}

/* ---------- 首屏 ---------- */

.page-home .home-hero {
  position: relative;
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  padding: calc(var(--space-8) + var(--space-4)) 0 calc(var(--space-8) + var(--space-6));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 56px), 0 100%);
  overflow: hidden;
}

.page-home .home-hero-inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.page-home .home-hero-title {
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: var(--weight-heading);
  line-height: 1.04;
  letter-spacing: -0.032em;
  color: var(--color-contrast-ink);
}

.page-home .home-hero-lead {
  margin: 0;
  max-width: var(--measure);
  color: var(--home-soft-ink);
}

.page-home .home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.page-home .home-hero-foot {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--color-contrast-ink) 55%, transparent);
}

.page-home .home-hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 340px;
  border: var(--home-hair-strong);
  border-radius: var(--home-radius);
  overflow: hidden;
  isolation: isolate;
}

.page-home .home-hero-visual img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  filter: saturate(0.72) contrast(1.06);
}

.page-home .home-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--overlay-scrim);
  pointer-events: none;
}

.page-home .home-metrics {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--border-thin);
  margin: 0;
  padding: var(--border-thin);
  list-style: none;
  background: var(--color-contrast-line);
  border-top: var(--home-hair-strong);
}

.page-home .home-metric {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-1) / 2);
  padding: var(--space-2);
  background: var(--color-contrast-surface);
}

.page-home .home-metric--key,
.page-home .home-metric--wide {
  grid-column: 1 / -1;
}

.page-home .home-metric-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: 1;
  color: var(--color-contrast-ink);
}

.page-home .home-metric--key .home-metric-value {
  font-size: var(--text-figure);
  color: var(--color-contrast-accent);
}

.page-home .home-metric-label {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--home-soft-ink);
}

/* ---------- 实时赛况 ---------- */

.page-home .home-live-grid {
  display: grid;
  gap: var(--gutter);
}

.page-home .home-live-score .home-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
}

.page-home .home-score-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: 1;
  color: var(--color-ink);
}

.page-home .home-score-side,
.page-home .home-score-sep {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.page-home .home-score-sep {
  font-size: var(--text-xl);
}

.page-home .home-rows {
  margin: 0;
  padding: 0;
  border-top: var(--home-hair);
}

.page-home .home-rows .stat-row {
  border-bottom: var(--home-hair);
}

.page-home .home-rows .stat-row:last-child {
  border-bottom: 0;
}

.page-home .home-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2) var(--space-1);
  margin: 0;
  padding: var(--space-2) 0 0;
  list-style: none;
  border-top: var(--home-hair);
}

.page-home .home-track-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--space-1) / 2);
  text-align: center;
}

.page-home .home-mark-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

.page-home .home-track-mark--offside .home-mark-dot {
  background: var(--color-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.page-home .home-mark-time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-base);
  font-weight: var(--weight-heading);
  color: var(--color-ink);
}

.page-home .home-mark-kind {
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--color-ink-muted);
}

.page-home .home-heat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .home-heat-cell {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-1) / 2);
  padding: var(--space-2);
  border: var(--home-hair);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.page-home .home-heat-cell:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  background: var(--color-surface);
}

.page-home .home-heat-cell--hot {
  border-color: var(--color-accent);
  background: var(--color-highlight);
}

.page-home .home-heat-name {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.page-home .home-heat-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xl);
  font-weight: var(--weight-heading);
  line-height: 1;
  color: var(--color-ink);
}

.page-home .home-heat-cell--hot .home-heat-count {
  color: var(--color-accent);
}

.page-home .home-heat-kind {
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--color-ink-muted);
}

.page-home .home-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .home-split-item {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-1) / 2);
  padding-top: var(--space-1);
  border-top: var(--home-hair);
}

.page-home .home-split-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: 1;
  color: var(--color-primary);
}

.page-home .home-split-key {
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--color-ink-muted);
}

/* ---------- 判罚档案 ---------- */

.page-home .home-archive-figure {
  margin: 0 0 var(--space-3);
}

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

.page-home .home-archive-table {
  margin-bottom: var(--space-3);
}

.page-home .home-table {
  min-width: 760px;
  width: 100%;
}

.page-home .home-table-caption {
  caption-side: bottom;
  padding-top: var(--space-2);
  text-align: left;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-home .home-archive-foot {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .home-archive-foot a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-home .home-archive-foot a:hover {
  color: var(--color-focus);
}

/* ---------- 赛季进程 ---------- */

.page-home .home-season {
  display: grid;
  gap: var(--space-4);
}

.page-home .home-progress {
  padding: var(--space-3);
  border: var(--home-hair);
  border-radius: var(--home-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
}

.page-home .home-progress-track {
  position: relative;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-deep);
}

.page-home .home-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 65.8%;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    color-mix(in srgb, var(--color-primary) 62%, var(--color-accent)) 100%
  );
}

.page-home .home-progress-node {
  position: absolute;
  top: 50%;
  left: 65.8%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  border: calc(var(--border-thin) * 2) solid var(--color-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 24%, transparent);
}

.page-home .home-progress-labels {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-home .home-progress-current {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-heading);
  color: var(--color-accent);
}

.page-home .home-zones {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.page-home .home-zone {
  display: grid;
  gap: calc(var(--space-1) / 2);
  padding: var(--space-2) var(--space-3);
  border: var(--home-hair);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.page-home .home-zone:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}

.page-home .home-zone--critical {
  border-left-color: var(--color-accent);
}

.page-home .home-zone-title {
  font-size: var(--text-base);
  font-weight: var(--weight-heading);
  color: var(--color-ink);
}

.page-home .home-zone-range {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  color: var(--color-primary);
}

.page-home .home-zone--critical .home-zone-range {
  color: var(--color-accent);
}

.page-home .home-zone-note {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .home-season-side {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.page-home .home-season-side .media-frame {
  margin: 0;
}

.page-home .home-season-side .media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .home-season-note {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .home-season-note a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-home .home-season-note a:hover {
  color: var(--color-focus);
}

/* ---------- 栏目入口 ---------- */

.page-home .home-columns {
  display: grid;
  gap: var(--gutter);
}

.page-home .home-column {
  display: grid;
  gap: var(--space-1);
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.page-home .home-column:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-2);
}

.page-home .home-column-index {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-ink-muted);
}

.page-home .home-column-title {
  margin: 0;
  color: var(--color-ink);
}

.page-home .home-column-note {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .home-column-meta {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: var(--home-hair);
  font-size: var(--text-xs);
  color: var(--color-primary);
}

/* ---------- 数据口径 ---------- */

.page-home .home-meta {
  display: grid;
  gap: var(--space-4);
}

.page-home .home-meta-figure {
  margin: 0;
  border: var(--home-hair);
  border-radius: var(--home-radius);
  overflow: hidden;
}

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

.page-home .home-meta-lead {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .home-meta-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0;
  padding: var(--space-3) 0;
  border-top: var(--home-hair);
  border-bottom: var(--home-hair);
}

.page-home .home-meta-stat {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-1) / 2);
}

.page-home .home-meta-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xl);
  font-weight: var(--weight-heading);
  line-height: 1;
  color: var(--color-ink);
}

.page-home .home-meta-key {
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--color-ink-muted);
}

.page-home .home-meta-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .home-meta-list li {
  display: grid;
  gap: calc(var(--space-1) / 2);
  padding: var(--space-2) var(--space-3);
  border: var(--home-hair);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.page-home .home-meta-tag {
  justify-self: start;
}

.page-home .home-meta-list p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .home-meta-action {
  margin: var(--space-3) 0 0;
  max-width: var(--measure);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .home-meta-action a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-home .home-meta-action a:hover {
  color: var(--color-focus);
}

/* ---------- 响应式 ---------- */

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

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

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

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

  .page-home .home-column--wide {
    grid-column: span 12;
  }

  .page-home .home-column--mid {
    grid-column: span 6;
  }
}

@media (min-width: 960px) {
  .page-home .home-hero-inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--space-8);
  }

  .page-home .home-hero-visual {
    min-height: 440px;
  }

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

  .page-home .home-metric {
    padding: var(--space-3);
  }

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

  .page-home .home-live-score {
    grid-column: span 5;
  }

  .page-home .home-live-timeline {
    grid-column: span 7;
  }

  .page-home .home-live-heat {
    grid-column: span 7;
  }

  .page-home .home-live-side {
    grid-column: span 5;
  }

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

@media (min-width: 1080px) {
  .page-home .home-season {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    align-items: start;
  }

  .page-home .home-meta {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
    gap: var(--space-6);
  }

  .page-home .home-meta-figure {
    position: sticky;
    top: var(--space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-heat-cell,
  .page-home .home-zone,
  .page-home .home-column {
    transition: none;
  }

  .page-home .home-heat-cell:hover,
  .page-home .home-zone:hover,
  .page-home .home-column:hover {
    transform: none;
  }
}