.page-home {
  --home-edge: 1px solid rgba(201, 162, 92, 0.22);
  --home-card: rgba(14, 42, 66, 0.78);
  background: var(--ink-900);
  color: var(--paper);
  font-family: var(--font-body);
  overflow-x: clip;
}

.page-home p {
  line-height: 1.75;
}

.page-home .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--sand);
  margin: 0;
}

.page-home .section-title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(27px, 4.4vw, 50px);
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 14px 0 0;
  color: var(--paper-white);
}

.page-home .lead {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
  color: rgba(242, 233, 216, 0.78);
  margin: 16px 0 0;
  max-width: 62ch;
}

.page-home .note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--mist);
}

.page-home .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.page-home .btn:hover {
  transform: translateY(-2px);
}

.page-home .section--band {
  background: var(--ink-800);
  border-block: var(--home-edge);
}

.page-home .section--paper {
  background: var(--paper);
  color: var(--ink-black);
}

.page-home .section--paper .section-title {
  color: var(--ink-black);
}

.page-home .section--paper .lead {
  color: #3E4A54;
}

.page-home .section--paper .eyebrow {
  color: #96702F;
}

.page-home .block-head {
  max-width: 720px;
  margin-bottom: clamp(26px, 4vw, 44px);
}

/* ---------- 封面 ---------- */

.page-home .cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(96px, 14vw, 168px) 0 clamp(52px, 7vw, 88px);
  border-bottom: var(--home-edge);
}

.page-home .cover-media {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.page-home .cover-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.36;
}

.page-home .cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, rgba(79, 227, 193, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79, 227, 193, 0.10) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, #000 15%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 15%, transparent 82%);
}

.page-home .cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 26, 43, 0.74) 0%, rgba(7, 26, 43, 0.56) 45%, rgba(7, 26, 43, 0.97) 100%),
    linear-gradient(105deg, rgba(255, 107, 74, 0.18), transparent 58%);
}

.page-home .cover-shell {
  position: relative;
  z-index: 1;
}

.page-home .cover-coord {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--teal);
  margin: 0 0 18px;
}

.page-home .cover-title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(38px, 8.4vw, 92px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 16px 0 0;
  color: var(--paper-white);
  text-wrap: balance;
}

.page-home .cover-lead {
  max-width: 54ch;
  font-size: clamp(15px, 1.7vw, 18px);
}

.page-home .season-bar {
  margin-top: clamp(26px, 4vw, 38px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 14px 18px;
  border: var(--home-edge);
  border-radius: 999px;
  background: rgba(14, 42, 66, 0.66);
  max-width: 100%;
}

.page-home .season-bar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--sand);
}

.page-home .season-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(143, 166, 184, 0.34);
  color: rgba(242, 233, 216, 0.72);
  white-space: nowrap;
}

.page-home .season-chip.is-active {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--ink-900);
  font-weight: 600;
}

.page-home .season-bar-link {
  font-size: 12.5px;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(79, 227, 193, 0.45);
  padding-bottom: 1px;
}

.page-home .season-bar-link:hover {
  border-bottom-color: var(--teal);
}

.page-home .cover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3.5vw, 34px);
}

.page-home .cover-index {
  margin-top: clamp(34px, 5vw, 56px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid rgba(201, 162, 92, 0.26);
}

.page-home .cover-index ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-home .cover-index a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: rgba(242, 233, 216, 0.86);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(201, 162, 92, 0.2);
}

.page-home .cover-index a:hover {
  color: var(--teal);
  border-bottom-color: rgba(79, 227, 193, 0.5);
}

.page-home .index-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--sand);
}

/* ---------- 战绩矩阵 ---------- */

.page-home .query-split {
  display: grid;
  gap: clamp(26px, 4vw, 46px);
}

.page-home .axis-scale {
  display: none;
}

.page-home .lane {
  margin-bottom: 20px;
}

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

.page-home .lane-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 10px;
}

.page-home .lane-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--teal);
  margin: 0;
}

.page-home .lane-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--mist);
  margin: 0;
}

.page-home .lane-cards {
  display: grid;
  gap: 12px;
}

.page-home .match {
  position: relative;
  padding: 15px 15px 13px;
  background: var(--home-card);
  border: 1px solid rgba(201, 162, 92, 0.18);
  border-radius: 14px;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.page-home .match:hover {
  transform: translateY(-3px);
  border-color: rgba(79, 227, 193, 0.45);
  background: rgba(22, 61, 90, 0.9);
}

.page-home .match--upcoming {
  background: rgba(14, 42, 66, 0.46);
  border-style: dashed;
}

.page-home .match-round {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--sand);
  margin: 0 0 10px;
}

.page-home .match-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 4px;
}

.page-home .match-team {
  font-size: 14px;
  color: rgba(242, 233, 216, 0.9);
  letter-spacing: 0.02em;
}

.page-home .score {
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  line-height: 1;
  color: var(--paper-white);
}

.page-home .score--vs {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--mist);
}

.page-home .match-state {
  display: inline-block;
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.page-home .match-state--final {
  color: var(--mist);
}

.page-home .match-state--ot {
  color: var(--coral);
}

.page-home .match-state--next {
  color: var(--teal);
}

.page-home .match-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(143, 166, 184, 0.95);
}

.page-home .query-side {
  display: grid;
  gap: 20px;
  align-content: start;
}

.page-home .side-figure {
  margin: 0;
}

.page-home .side-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  border: var(--home-edge);
}

.page-home .side-figure figcaption {
  margin-top: 12px;
}

.page-home .side-note {
  padding: 20px;
  border-radius: 14px;
  border: 1px solid rgba(201, 162, 92, 0.2);
  background: rgba(7, 26, 43, 0.55);
}

.page-home .side-note-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--sand);
  margin: 0 0 10px;
}

.page-home .side-note-text {
  margin: 0;
  font-size: 13.5px;
  color: rgba(242, 233, 216, 0.76);
}

.page-home .side-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(79, 227, 193, 0.4);
  padding-bottom: 2px;
}

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

/* ---------- 小屏观赛 ---------- */

.page-home .screen-split {
  display: grid;
  gap: clamp(26px, 4vw, 46px);
}

.page-home .device-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-home .device-item {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(201, 162, 92, 0.2);
  background: rgba(14, 42, 66, 0.62);
}

.page-home .device-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 10px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--paper-white);
}

.page-home .device-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--sand);
}

.page-home .device-desc {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(143, 166, 184, 0.95);
}

.page-home .screen-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.page-home .screen-figure {
  margin: 0;
  align-self: start;
}

.page-home .screen-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: var(--home-edge);
  object-fit: cover;
}

.page-home .screen-figure figcaption {
  margin-top: 12px;
}

/* ---------- 时间轴 ---------- */

.page-home .timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.page-home .timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--sand), rgba(79, 227, 193, 0.35));
}

.page-home .tl-item {
  position: relative;
  padding: 0 0 28px 32px;
}

.page-home .tl-item:last-child {
  padding-bottom: 0;
}

.page-home .tl-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ink-800);
  border: 2px solid var(--sand);
}

.page-home .tl-item:nth-child(2)::before {
  border-color: var(--coral);
}

.page-home .tl-item:nth-child(3)::before {
  border-color: var(--teal);
}

.page-home .tl-item:nth-child(4)::before {
  border-color: var(--mist);
}

.page-home .tl-time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--sand);
  margin: 0 0 8px;
}

.page-home .tl-body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--paper-white);
}

.page-home .tl-body p {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: rgba(242, 233, 216, 0.72);
  max-width: 58ch;
}

.page-home .tl-body .side-link {
  margin-top: 10px;
}

/* ---------- 归档 ---------- */

.page-home .archive-split {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

.page-home .archive-hint {
  margin: 18px 0 22px;
  font-size: 14px;
  line-height: 1.75;
  color: #4B5761;
  padding-left: 14px;
  border-left: 3px solid var(--coral);
  max-width: 56ch;
}

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

.page-home .stack-sheet {
  padding: 14px 16px;
  background: var(--paper-white);
  border: 1px solid rgba(17, 22, 28, 0.14);
  border-left: 4px solid var(--coral);
  border-radius: 4px;
  box-shadow: 0 10px 22px rgba(7, 26, 43, 0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.page-home .stack-sheet:nth-child(1) {
  transform: rotate(-1.1deg);
}

.page-home .stack-sheet:nth-child(2) {
  transform: rotate(0.7deg);
}

.page-home .stack-sheet:nth-child(3) {
  transform: rotate(-0.5deg);
}

.page-home .stack-sheet:nth-child(4) {
  transform: rotate(0.9deg);
}

.page-home .stack-sheet:hover {
  transform: rotate(0deg);
  box-shadow: 0 14px 28px rgba(7, 26, 43, 0.16);
}

.page-home .sheet-id {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--coral-deep);
}

.page-home .sheet-title {
  margin: 6px 0 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-black);
}

.page-home .sheet-meta {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: #6B767F;
}

/* ---------- 品牌叙事 ---------- */

.page-home .story {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(64px, 9vw, 116px);
  border-top: var(--home-edge);
  border-bottom: var(--home-edge);
}

.page-home .story-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.page-home .story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
}

.page-home .story::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(7, 26, 43, 0.96) 0%, rgba(7, 26, 43, 0.78) 52%, rgba(7, 26, 43, 0.9) 100%),
    linear-gradient(0deg, rgba(201, 162, 92, 0.14), transparent 55%);
}

.page-home .story-shell {
  position: relative;
  z-index: 1;
}

.page-home .story-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 14px;
  margin: 30px 0 26px;
  padding: 22px 0 0;
  border-top: 1px solid rgba(201, 162, 92, 0.26);
}

.page-home .story-stats > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
}

.page-home .stat-num {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1;
  color: var(--teal);
}

.page-home .story-stats dt {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--mist);
}

.page-home .story-foot {
  max-width: 62ch;
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(242, 233, 216, 0.72);
}

/* ---------- 行动带 ---------- */

.page-home .start-band {
  position: relative;
}

.page-home .ticket {
  position: relative;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid rgba(201, 162, 92, 0.32);
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 107, 74, 0.18), transparent 62%),
    rgba(14, 42, 66, 0.72);
}

.page-home .ticket::before,
.page-home .ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink-900);
  border: 1px solid rgba(201, 162, 92, 0.32);
  transform: translateY(-50%);
}

.page-home .ticket::before {
  left: -11px;
}

.page-home .ticket::after {
  right: -11px;
}

.page-home .ticket-grid {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.page-home .ticket-item {
  display: block;
  text-decoration: none;
  padding: 16px 18px;
  border: 1px dashed rgba(201, 162, 92, 0.35);
  border-radius: 12px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.page-home .ticket-item:hover {
  border-color: var(--coral);
  background: rgba(255, 107, 74, 0.09);
  transform: translateY(-2px);
}

.page-home .ticket-item strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--paper-white);
}

.page-home .ticket-item span {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(143, 166, 184, 0.95);
}

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

@media (min-width: 620px) {
  .page-home .cover-index ol {
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
  }

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

  .page-home .device-list {
    grid-template-columns: 1fr 1fr;
  }

  .page-home .ticket-grid {
    grid-template-columns: 1fr 1fr;
  }

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

@media (min-width: 860px) {
  .page-home .cover-index ol {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .query-split {
    grid-template-columns: 7fr 5fr;
    align-items: start;
  }

  .page-home .axis-scale {
    display: grid;
    grid-template-columns: 104px repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--sand);
  }

  .page-home .lane {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  .page-home .lane-head {
    padding-top: 14px;
    padding-bottom: 0;
  }

  .page-home .screen-split {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }

  .page-home .timeline::before {
    left: 148px;
  }

  .page-home .tl-item {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    column-gap: 32px;
    padding-left: 0;
  }

  .page-home .tl-item::before {
    left: 141px;
  }

  .page-home .tl-time {
    text-align: right;
    padding-top: 5px;
    margin: 0;
  }

  .page-home .archive-split {
    grid-template-columns: 7fr 5fr;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .page-home .btn,
  .page-home .match,
  .page-home .stack-sheet,
  .page-home .ticket-item {
    transition: none;
  }

  .page-home .btn:hover,
  .page-home .match:hover,
  .page-home .ticket-item:hover {
    transform: none;
  }

  .page-home .stack-sheet,
  .page-home .stack-sheet:hover {
    transform: none;
  }
}


<main id="main-content" class="page-home">

  <section class="cover" id="cover" aria-labelledby="cover-title">
    <div class="cover-media">
      <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="城市夜场篮球场的灯光、看台与球场边线的广角画面">
    </div>
    <div class="shell cover-shell">
      <p class="cover-coord">乌鲁木齐 · 天山区 / 当前赛季 · 常规赛第 14 轮</p>
      <p class="eyebrow">卷首 · 城市坐标</p>
      <h1 class="cover-title" id="cover-title">城市的夜场，<br>从这里开始计分</h1>
      <p class="lead cover-lead">乐鱼体育把 14 个城市赛区的业余篮球夜场收进一张可以翻阅的成绩单。当前轮次的比分、现场战报和手机小屏的适配方式都在同一处，换一座城市或换一个赛季，视线不用重新找方向。</p>

      <div class="season-bar">
        <span class="season-bar-label">赛季区间</span>
        <span class="season-chip is-active" aria-current="true">本赛季 · 第 1–14 轮</span>
        <span class="season-chip">上赛季 · 18 轮</span>
        <span class="season-chip">前赛季 · 18 轮</span>
        <a class="season-bar-link" href="/reports/">赛季归档</a>
      </div>

      <div class="cover-actions">
        <a class="btn btn--primary" href="#quick-scores">进入近期战绩速查</a>
        <a class="btn btn--ghost" href="/apps/">小屏看球怎么调</a>
      </div>

      <nav class="cover-index" aria-label="本页速览">
        <ol>
          <li><a href="#quick-scores"><span class="index-num">01</span>坐标轴上的近期战绩</a></li>
          <li><a href="#small-screen"><span class="index-num">02</span>小屏观赛适配</a></li>
          <li><a href="#timeline"><span class="index-num">03</span>轮次战报与指南更新</a></li>
          <li><a href="#archive"><span class="index-num">04</span>旧版球员数据归档</a></li>
        </ol>
      </nav>
    </div>
  </section>

  <section class="section section--band" id="quick-scores" aria-labelledby="scores-title">
    <div class="shell">
      <header class="block-head" data-reveal="1">
        <p class="eyebrow">01 — 坐标轴上的近期战绩</p>
        <h2 class="section-title" id="scores-title">横看轮次，竖看赛区</h2>
        <p class="lead block-lead">常规赛走到第 14 轮，三块常设场地最近三轮的比分按现场记录排在这里。主队在前，加时单独标出，还没开球的对阵先把轮次占上，赛后补回比分和一句话摘要。</p>
      </header>

      <div class="query-split">
        <div class="query-main">
          <div class="axis">
            <div class="axis-scale" aria-hidden="true">
              <span></span>
              <span class="scale-cell">第 12 轮</span>
              <span class="scale-cell">第 13 轮</span>
              <span class="scale-cell">第 14 轮 · 当前</span>
            </div>

            <div class="lane">
              <div class="lane-head">
                <h3 class="lane-name">天山区夜场</h3>
                <p class="lane-meta">更新至第 14 轮</p>
              </div>
              <div class="lane-cards">
                <article class="match">
                  <p class="match-round">第 12 轮</p>
                  <p class="match-line"><span class="match-team">河滩联队</span><span class="score">82</span></p>
                  <p class="match-line"><span class="match-team">南湖队</span><span class="score">76</span></p>
                  <p class="match-state match-state--final">终场</p>
                  <p class="match-note">第三节一波 12:2 反超，末节守住 6 分优势。</p>
                </article>
                <article class="match">
                  <p class="match-round">第 13 轮</p>
                  <p class="match-line"><span class="match-team">河滩联队</span><span class="score">68</span></p>
                  <p class="match-line"><span class="match-team">城北队</span><span class="score">71</span></p>
                  <p class="match-state match-state--final">终场</p>
                  <p class="match-note">终场前 40 秒两罚全中，客队带走分差。</p>
                </article>
                <article class="match match--upcoming">
                  <p class="match-round">第 14 轮</p>
                  <p class="match-line"><span class="match-team">河滩联队</span><span class="score score--vs">VS</span></p>
                  <p class="match-line"><span class="match-team">西山队</span></p>
                  <p class="match-state match-state--next">未开赛</p>
                  <p class="match-note">本轮第二个比赛日首场，赛果与摘要赛后补录。</p>
                </article>
              </div>
            </div>

            <div class="lane">
              <div class="lane-head">
                <h3 class="lane-name">城北球馆</h3>
                <p class="lane-meta">更新至第 14 轮</p>
              </div>
              <div class="lane-cards">
                <article class="match">
                  <p class="match-round">第 12 轮</p>
                  <p class="match-line"><span class="match-team">城北队</span><span class="score">89</span></p>
                  <p class="match-line"><span class="match-team">西山队</span><span class="score">85</span></p>
                  <p class="match-state match-state--ot">加时</p>
                  <p class="match-note">加时段连拿 7 分，主队把比分翻了回来。</p>
                </article>
                <article class="match">
                  <p class="match-round">第 13 轮</p>
                  <p class="match-line"><span class="match-team">城北队</span><span class="score">74</span></p>
                  <p class="match-line"><span class="match-team">南湖队</span><span class="score">66</span></p>
                  <p class="match-state match-state--final">终场</p>
                  <p class="match-note">第二节打出 21:9，之后一直握着双位数领先。</p>
                </article>
                <article class="match match--upcoming">
                  <p class="match-round">第 14 轮</p>
                  <p class="match-line"><span class="match-team">城北队</span><span class="score score--vs">VS</span></p>
                  <p class="match-line"><span class="match-team">南湖队</span></p>
                  <p class="match-state match-state--next">未开赛</p>
                  <p class="match-note">上一回合只差 8 分，本轮两队再碰一次。</p>
                </article>
              </div>
            </div>

            <div class="lane">
              <div class="lane-head">
                <h3 class="lane-name">西山夜场</h3>
                <p class="lane-meta">更新至第 14 轮</p>
              </div>
              <div class="lane-cards">
                <article class="match">
                  <p class="match-round">第 12 轮</p>
                  <p class="match-line"><span class="match-team">西山队</span><span class="score">70</span></p>
                  <p class="match-line"><span class="match-team">南湖队</span><span class="score">73</span></p>
                  <p class="match-state match-state--final">终场</p>
                  <p class="match-note">最后两分钟互交三分，客队压哨补篮定胜负。</p>
                </article>
                <article class="match">
                  <p class="match-round">第 13 轮</p>
                  <p class="match-line"><span class="match-team">西山队</span><span class="score">62</span></p>
                  <p class="match-line"><span class="match-team">南湖队</span><span class="score">58</span></p>
                  <p class="match-state match-state--final">终场</p>
                  <p class="match-note">全场低比分拉锯，主队靠篮板优势咬到最后。</p>
                </article>
                <article class="match match--upcoming">
                  <p class="match-round">第 14 轮</p>
                  <p class="match-line"><span class="match-team">西山队</span><span class="score score--vs">VS</span></p>
                  <p class="match-line"><span class="match-team">城北队</span></p>
                  <p class="match-state match-state--next">未开赛</p>
                  <p class="match-note">两个赛区的队伍首次在常规赛碰面。</p>
                </article>
              </div>
            </div>
          </div>
        </div>

        <aside class="query-side">
          <figure class="side-figure">
            <img src="{zhanqunpic:h:900w:900}" width="900" height="900" alt="业余篮球球员起跳投篮的动作特写，夜场灯光颗粒明显" loading="lazy" decoding="async">
            <figcaption class="note">第 13 轮 · 天山区夜场：终场前那两次罚球，把比分从 68 平拉到 71。</figcaption>
          </figure>
          <div class="side-note">
            <p class="side-note-label">怎么读这张表</p>
            <p class="side-note-text">比分按终场结果排列，主队写在上面一行。加时场次在状态标签里单独标出；还没开球的对阵先占住轮次位置，等你下次回来再看结果。</p>
            <a class="side-link" href="/reports/">看完整轮次战报</a>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <section class="section small-screen" id="small-screen" aria-labelledby="screen-title">
    <div class="shell">
      <div class="screen-split">
        <div class="screen-copy" data-reveal="1">
          <p class="eyebrow">02 — 小屏观赛入口</p>
          <h2 class="section-title" id="screen-title">手机上看得清，才追得动</h2>
          <p class="lead block-lead">站点七成以上的访问来自手机和平板。适配清单把四类设备拆成 6 到 9 项检查点，字号、比分区、筛选条、目录吸附和导出按钮各自对位，照着改一遍就能顺畅翻比分。</p>

          <ul class="device-list">
            <li class="device-item">
              <p class="device-name">直板手机<span class="device-count">8 项检查点</span></p>
              <p class="device-desc">单手滑比分时，比分区固定在上滑不动的位置，轮次编号始终露在屏内。</p>
            </li>
            <li class="device-item">
              <p class="device-name">平板<span class="device-count">9 项检查点</span></p>
              <p class="device-desc">横屏自动分成两栏，左边目录右边战报，比之前少翻三次屏。</p>
            </li>
            <li class="device-item">
              <p class="device-name">折叠屏<span class="device-count">7 项检查点</span></p>
              <p class="device-desc">展开后补出赛区侧栏，合起来回到单列，比分数字跟着字号一起缩放。</p>
            </li>
            <li class="device-item">
              <p class="device-name">小屏电视与投屏<span class="device-count">6 项检查点</span></p>
              <p class="device-desc">隔两米看也认得出比分和轮次，颜色对比在暗光客厅里不糊。</p>
            </li>
          </ul>

          <div class="screen-actions">
            <a class="btn btn--primary" href="/apps/">对照适配清单</a>
            <a class="btn btn--ghost" href="/knowledge/">设备不适配怎么办</a>
          </div>
        </div>

        <figure class="screen-figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="室内光线下用手机和平板同时观看篮球比赛的场景" loading="lazy" decoding="async">
          <figcaption class="note">当前清单版本 v3.4 · 收藏夹可存 60 个页面或条目，赛程与战报能导出成 CSV、长图或打印版</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section section--band" id="timeline" aria-labelledby="timeline-title">
    <div class="shell">
      <header class="block-head" data-reveal="1">
        <p class="eyebrow">03 — 轮次与更新</p>
        <h2 class="section-title" id="timeline-title">这一轮之后，下一轮之前</h2>
        <p class="lead block-lead">常规赛每周更新两次战报，季后赛每轮赛后 24 小时内出当轮摘要。顺着这条时间线往下看，最近发生了什么、接下来补什么，一目了然。</p>
      </header>

      <ol class="timeline">
        <li class="tl-item">
          <p class="tl-time">上周末 · 第 13 轮</p>
          <div class="tl-body">
            <h3>三块场地的当轮摘要已上线</h3>
            <p>六场常规赛的比分、关键回合和一句话复盘都整理成条目，可按赛区或轮次单独打开。</p>
            <a class="side-link" href="/reports/">进赛事报告看第 13 轮</a>
          </div>
        </li>
        <li class="tl-item">
          <p class="tl-time">本周 · 第 14 轮</p>
          <div class="tl-body">
            <h3>观赛指南补进第 14 轮条目</h3>
            <p>一个赛季按 18 轮常规赛加淘汰赛组织，每条说清这一轮看什么、比分怎么读、统计表里哪几列最值得留意。</p>
            <a class="side-link" href="/knowledge/">翻观赛知识库</a>
          </div>
        </li>
        <li class="tl-item">
          <p class="tl-time">适配清单 v3.4</p>
          <div class="tl-body">
            <h3>折叠屏与平板的检查点重新对位</h3>
            <p>四类设备的字号、比分区和目录吸附位置按新系统版本调过一轮，导出按钮也挪到了拇指更顺手的地方。</p>
            <a class="side-link" href="/apps/">看这次改了什么</a>
          </div>
        </li>
        <li class="tl-item">
          <p class="tl-time">每个赛季末</p>
          <div class="tl-body">
            <h3>赛季包封存，进归档区可查</h3>
            <p>赛季结束后的球员数据整理成 12 项字段的赛季包，按球队和球员逐层检索。</p>
            <a class="side-link" href="/reports/">去归档区</a>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="section section--paper" id="archive" aria-labelledby="archive-title">
    <div class="shell">
      <div class="archive-split">
        <div class="archive-copy" data-reveal="1">
          <p class="eyebrow">04 — 旧版球员数据</p>
          <h2 class="section-title" id="archive-title">四个赛季的老档案，在赛事报告里等你</h2>
          <p class="lead block-lead">2023 年栏目调整之后，旧版球员数据从首页移到了赛事报告的归档区，四个赛季包完整保留。每个包都是同样的 12 项字段——出场、得分、篮板、助攻、抢断、盖帽、失误、犯规、投篮命中率、三分、罚球、上场时间。</p>
          <p class="archive-hint">按赛季包、球队、球员字段三层往下筛，想找三年前某个人的场均篮板，点两次就能落到那一行。</p>
          <a class="btn btn--primary" href="/reports/">进入归档检索</a>
        </div>

        <div class="stack" aria-label="四个赛季包">
          <div class="stack-sheet">
            <p class="sheet-id">S-01</p>
            <p class="sheet-title">旧版球员数据 · 赛季包 01</p>
            <p class="sheet-meta">12 项字段 · 含出场、得分、篮板与命中率</p>
          </div>
          <div class="stack-sheet">
            <p class="sheet-id">S-02</p>
            <p class="sheet-title">旧版球员数据 · 赛季包 02</p>
            <p class="sheet-meta">12 项字段 · 含助攻、抢断、失误与上场时间</p>
          </div>
          <div class="stack-sheet">
            <p class="sheet-id">S-03</p>
            <p class="sheet-title">旧版球员数据 · 赛季包 03</p>
            <p class="sheet-meta">12 项字段 · 含盖帽、犯规、三分与罚球</p>
          </div>
          <div class="stack-sheet">
            <p class="sheet-id">S-04</p>
            <p class="sheet-title">旧版球员数据 · 赛季包 04</p>
            <p class="sheet-meta">12 项字段 · 最近完成封存的一包</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="story" id="story" aria-labelledby="story-title">
    <div class="story-media">
      <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="深海墨蓝底色上叠加的坐标网格与比分刻度数据可视化图形" loading="lazy" decoding="async">
    </div>
    <div class="shell story-shell">
      <p class="eyebrow">05 — 城市坐标</p>
      <h2 class="section-title" id="story-title">从球场边的手写战报，写到 14 个赛区</h2>
      <p class="lead block-lead">2016 年，几个编辑带着本子坐在天山区夜场的边线上记比分。今天这份记录长成了 2,300 余场业余联赛战报、38 座合作球馆和 26 个长期协作的联赛组委会，其中 8 个赛区落在新疆与西北城市，另外 6 个跨区域。天山区夜场、河滩联队、城北球馆这些名字，已经从场地变成了常设的内容坐标。</p>

      <dl class="story-stats">
        <div>
          <dt>合作球馆</dt>
          <dd class="stat-num">38</dd>
        </div>
        <div>
          <dt>联赛组委会</dt>
          <dd class="stat-num">26</dd>
        </div>
        <div>
          <dt>收录战报</dt>
          <dd class="stat-num">2300+</dd>
        </div>
        <div>
          <dt>编辑与运营团队</dt>
          <dd class="stat-num">17</dd>
        </div>
      </dl>

      <p class="story-foot">连续三年参与城市业余篮球内容共建案例征集，累计拿到 5 项行业内容策划类荣誉。夜间场次的比分由现场记录员写下、编辑复核后发出，这也是这些数字敢摆在场边的底气。</p>
      <a class="btn btn--ghost" href="/history/">看品牌完整历程</a>
    </div>
  </section>

  <section class="section start-band" id="start" aria-labelledby="start-title">
    <div class="shell">
      <div class="ticket">
        <p class="eyebrow">06 — 下一步</p>
        <h2 class="section-title" id="start-title">把这几页收进收藏夹</h2>
        <div class="ticket-grid">
          <a class="ticket-item" href="/apps/">
            <strong>对照设备清单</strong>
            <span>四类设备逐项检查，收藏后随时回来比对当前版本。</span>
          </a>
          <a class="ticket-item" href="/reports/">
            <strong>翻赛季归档</strong>
            <span>换赛季看完整轮次，四个赛季包的老球员数据也在这里。</span>
          </a>
          <a class="ticket-item" href="/knowledge/">
            <strong>先读观赛指南</strong>
            <span>120 条问答按观赛前、观赛中、观赛后和账号与收藏四组排好。</span>
          </a>
          <a class="ticket-item" href="/contact-us/">
            <strong>找客服聊两句</strong>
            <span>工作日 10:00–19:00（北京时间）受理，附上页面链接处理更快。</span>
          </a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-home {
  --home-edge: 1px solid rgba(201, 162, 92, 0.22);
  --home-card: rgba(14, 42, 66, 0.78);
  background: var(--ink-900);
  color: var(--paper);
  font-family: var(--font-body);
  overflow-x: clip;
}

.page-home p {
  line-height: 1.75;
}

.page-home .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--sand);
  margin: 0;
}

.page-home .section-title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(27px, 4.4vw, 50px);
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 14px 0 0;
  color: var(--paper-white);
}

.page-home .lead {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
  color: rgba(242, 233, 216, 0.78);
  margin: 16px 0 0;
  max-width: 62ch;
}

.page-home .note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--mist);
}

.page-home .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.page-home .btn:hover {
  transform: translateY(-2px);
}

.page-home .section--band {
  background: var(--ink-800);
  border-block: var(--home-edge);
}

.page-home .section--paper {
  background: var(--paper);
  color: var(--ink-black);
}

.page-home .section--paper .section-title {
  color: var(--ink-black);
}

.page-home .section--paper .lead {
  color: #3E4A54;
}

.page-home .section--paper .eyebrow {
  color: #96702F;
}

.page-home .block-head {
  max-width: 720px;
  margin-bottom: clamp(26px, 4vw, 44px);
}

/* ---------- 封面 ---------- */

.page-home .cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(96px, 14vw, 168px) 0 clamp(52px, 7vw, 88px);
  border-bottom: var(--home-edge);
}

.page-home .cover-media {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.page-home .cover-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.36;
}

.page-home .cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, rgba(79, 227, 193, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79, 227, 193, 0.10) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, #000 15%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 15%, transparent 82%);
}

.page-home .cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 26, 43, 0.74) 0%, rgba(7, 26, 43, 0.56) 45%, rgba(7, 26, 43, 0.97) 100%),
    linear-gradient(105deg, rgba(255, 107, 74, 0.18), transparent 58%);
}

.page-home .cover-shell {
  position: relative;
  z-index: 1;
}

.page-home .cover-coord {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--teal);
  margin: 0 0 18px;
}

.page-home .cover-title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(38px, 8.4vw, 92px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 16px 0 0;
  color: var(--paper-white);
  text-wrap: balance;
}

.page-home .cover-lead {
  max-width: 54ch;
  font-size: clamp(15px, 1.7vw, 18px);
}

.page-home .season-bar {
  margin-top: clamp(26px, 4vw, 38px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 14px 18px;
  border: var(--home-edge);
  border-radius: 999px;
  background: rgba(14, 42, 66, 0.66);
  max-width: 100%;
}

.page-home .season-bar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--sand);
}

.page-home .season-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(143, 166, 184, 0.34);
  color: rgba(242, 233, 216, 0.72);
  white-space: nowrap;
}

.page-home .season-chip.is-active {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--ink-900);
  font-weight: 600;
}

.page-home .season-bar-link {
  font-size: 12.5px;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(79, 227, 193, 0.45);
  padding-bottom: 1px;
}

.page-home .season-bar-link:hover {
  border-bottom-color: var(--teal);
}

.page-home .cover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3.5vw, 34px);
}

.page-home .cover-index {
  margin-top: clamp(34px, 5vw, 56px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid rgba(201, 162, 92, 0.26);
}

.page-home .cover-index ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-home .cover-index a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: rgba(242, 233, 216, 0.86);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(201, 162, 92, 0.2);
}

.page-home .cover-index a:hover {
  color: var(--teal);
  border-bottom-color: rgba(79, 227, 193, 0.5);
}

.page-home .index-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--sand);
}

/* ---------- 战绩矩阵 ---------- */

.page-home .query-split {
  display: grid;
  gap: clamp(26px, 4vw, 46px);
}

.page-home .axis-scale {
  display: none;
}

.page-home .lane {
  margin-bottom: 20px;
}

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

.page-home .lane-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 10px;
}

.page-home .lane-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--teal);
  margin: 0;
}

.page-home .lane-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--mist);
  margin: 0;
}

.page-home .lane-cards {
  display: grid;
  gap: 12px;
}

.page-home .match {
  position: relative;
  padding: 15px 15px 13px;
  background: var(--home-card);
  border: 1px solid rgba(201, 162, 92, 0.18);
  border-radius: 14px;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.page-home .match:hover {
  transform: translateY(-3px);
  border-color: rgba(79, 227, 193, 0.45);
  background: rgba(22, 61, 90, 0.9);
}

.page-home .match--upcoming {
  background: rgba(14, 42, 66, 0.46);
  border-style: dashed;
}

.page-home .match-round {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--sand);
  margin: 0 0 10px;
}

.page-home .match-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 4px;
}

.page-home .match-team {
  font-size: 14px;
  color: rgba(242, 233, 216, 0.9);
  letter-spacing: 0.02em;
}

.page-home .score {
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  line-height: 1;
  color: var(--paper-white);
}

.page-home .score--vs {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--mist);
}

.page-home .match-state {
  display: inline-block;
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.page-home .match-state--final {
  color: var(--mist);
}

.page-home .match-state--ot {
  color: var(--coral);
}

.page-home .match-state--next {
  color: var(--teal);
}

.page-home .match-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(143, 166, 184, 0.95);
}

.page-home .query-side {
  display: grid;
  gap: 20px;
  align-content: start;
}

.page-home .side-figure {
  margin: 0;
}

.page-home .side-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  border: var(--home-edge);
}

.page-home .side-figure figcaption {
  margin-top: 12px;
}

.page-home .side-note {
  padding: 20px;
  border-radius: 14px;
  border: 1px solid rgba(201, 162, 92, 0.2);
  background: rgba(7, 26, 43, 0.55);
}

.page-home .side-note-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--sand);
  margin: 0 0 10px;
}

.page-home .side-note-text {
  margin: 0;
  font-size: 13.5px;
  color: rgba(242, 233, 216, 0.76);
}

.page-home .side-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(79, 227, 193, 0.4);
  padding-bottom: 2px;
}

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

/* ---------- 小屏观赛 ---------- */

.page-home .screen-split {
  display: grid;
  gap: clamp(26px, 4vw, 46px);
}

.page-home .device-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-home .device-item {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(201, 162, 92, 0.2);
  background: rgba(14, 42, 66, 0.62);
}

.page-home .device-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 10px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--paper-white);
}

.page-home .device-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--sand);
}

.page-home .device-desc {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(143, 166, 184, 0.95);
}

.page-home .screen-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.page-home .screen-figure {
  margin: 0;
  align-self: start;
}

.page-home .screen-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: var(--home-edge);
  object-fit: cover;
}

.page-home .screen-figure figcaption {
  margin-top: 12px;
}

/* ---------- 时间轴 ---------- */

.page-home .timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.page-home .timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--sand), rgba(79, 227, 193, 0.35));
}

.page-home .tl-item {
  position: relative;
  padding: 0 0 28px 32px;
}

.page-home .tl-item:last-child {
  padding-bottom: 0;
}

.page-home .tl-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ink-800);
  border: 2px solid var(--sand);
}

.page-home .tl-item:nth-child(2)::before {
  border-color: var(--coral);
}

.page-home .tl-item:nth-child(3)::before {
  border-color: var(--teal);
}

.page-home .tl-item:nth-child(4)::before {
  border-color: var(--mist);
}

.page-home .tl-time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--sand);
  margin: 0 0 8px;
}

.page-home .tl-body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--paper-white);
}

.page-home .tl-body p {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: rgba(242, 233, 216, 0.72);
  max-width: 58ch;
}

.page-home .tl-body .side-link {
  margin-top: 10px;
}

/* ---------- 归档 ---------- */

.page-home .archive-split {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

.page-home .archive-hint {
  margin: 18px 0 22px;
  font-size: 14px;
  line-height: 1.75;
  color: #4B5761;
  padding-left: 14px;
  border-left: 3px solid var(--coral);
  max-width: 56ch;
}

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

.page-home .stack-sheet {
  padding: 14px 16px;
  background: var(--paper-white);
  border: 1px solid rgba(17, 22, 28, 0.14);
  border-left: 4px solid var(--coral);
  border-radius: 4px;
  box-shadow: 0 10px 22px rgba(7, 26, 43, 0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.page-home .stack-sheet:nth-child(1) {
  transform: rotate(-1.1deg);
}

.page-home .stack-sheet:nth-child(2) {
  transform: rotate(0.7deg);
}

.page-home .stack-sheet:nth-child(3) {
  transform: rotate(-0.5deg);
}

.page-home .stack-sheet:nth-child(4) {
  transform: rotate(0.9deg);
}

.page-home .stack-sheet:hover {
  transform: rotate(0deg);
  box-shadow: 0 14px 28px rgba(7, 26, 43, 0.16);
}

.page-home .sheet-id {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--coral-deep);
}

.page-home .sheet-title {
  margin: 6px 0 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-black);
}

.page-home .sheet-meta {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: #6B767F;
}

/* ---------- 品牌叙事 ---------- */

.page-home .story {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(64px, 9vw, 116px);
  border-top: var(--home-edge);
  border-bottom: var(--home-edge);
}

.page-home .story-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.page-home .story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
}

.page-home .story::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(7, 26, 43, 0.96) 0%, rgba(7, 26, 43, 0.78) 52%, rgba(7, 26, 43, 0.9) 100%),
    linear-gradient(0deg, rgba(201, 162, 92, 0.14), transparent 55%);
}

.page-home .story-shell {
  position: relative;
  z-index: 1;
}

.page-home .story-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 14px;
  margin: 30px 0 26px;
  padding: 22px 0 0;
  border-top: 1px solid rgba(201, 162, 92, 0.26);
}

.page-home .story-stats > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
}

.page-home .stat-num {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1;
  color: var(--teal);
}

.page-home .story-stats dt {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--mist);
}

.page-home .story-foot {
  max-width: 62ch;
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(242, 233, 216, 0.72);
}

/* ---------- 行动带 ---------- */

.page-home .start-band {
  position: relative;
}

.page-home .ticket {
  position: relative;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid rgba(201, 162, 92, 0.32);
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 107, 74, 0.18), transparent 62%),
    rgba(14, 42, 66, 0.72);
}

.page-home .ticket::before,
.page-home .ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink-900);
  border: 1px solid rgba(201, 162, 92, 0.32);
  transform: translateY(-50%);
}

.page-home .ticket::before {
  left: -11px;
}

.page-home .ticket::after {
  right: -11px;
}

.page-home .ticket-grid {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.page-home .ticket-item {
  display: block;
  text-decoration: none;
  padding: 16px 18px;
  border: 1px dashed rgba(201, 162, 92, 0.35);
  border-radius: 12px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.page-home .ticket-item:hover {
  border-color: var(--coral);
  background: rgba(255, 107, 74, 0.09);
  transform: translateY(-2px);
}

.page-home .ticket-item strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--paper-white);
}

.page-home .ticket-item span {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(143, 166, 184, 0.95);
}

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

@media (min-width: 620px) {
  .page-home .cover-index ol {
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
  }

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

  .page-home .device-list {
    grid-template-columns: 1fr 1fr;
  }

  .page-home .ticket-grid {
    grid-template-columns: 1fr 1fr;
  }

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

@media (min-width: 860px) {
  .page-home .cover-index ol {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .query-split {
    grid-template-columns: 7fr 5fr;
    align-items: start;
  }

  .page-home .axis-scale {
    display: grid;
    grid-template-columns: 104px repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--sand);
  }

  .page-home .lane {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  .page-home .lane-head {
    padding-top: 14px;
    padding-bottom: 0;
  }

  .page-home .screen-split {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }

  .page-home .timeline::before {
    left: 148px;
  }

  .page-home .tl-item {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    column-gap: 32px;
    padding-left: 0;
  }

  .page-home .tl-item::before {
    left: 141px;
  }

  .page-home .tl-time {
    text-align: right;
    padding-top: 5px;
    margin: 0;
  }

  .page-home .archive-split {
    grid-template-columns: 7fr 5fr;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .page-home .btn,
  .page-home .match,
  .page-home .stack-sheet,
  .page-home .ticket-item {
    transition: none;
  }

  .page-home .btn:hover,
  .page-home .match:hover,
  .page-home .ticket-item:hover {
    transform: none;
  }

  .page-home .stack-sheet,
  .page-home .stack-sheet:hover {
    transform: none;
  }
}