.page-home {
  --home-gutter: clamp(20px, 4vw, 56px);
  --home-hardline: 2px solid var(--line-strong);
  display: block;
  background: var(--paper);
  overflow-x: clip;
}

/* ============ 首屏 ============ */
.page-home .hero-home {
  position: relative;
  isolation: isolate;
  padding: clamp(30px, 6vw, 72px) 0 clamp(44px, 7vw, 92px);
  background: var(--paper);
  overflow: hidden;
}

.page-home .hero-home::before {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: min(100%, 560px);
  height: min(56%, 360px);
  z-index: 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(23, 216, 206, .22) 0 2px, transparent 2px 10px),
    linear-gradient(135deg, var(--violet), var(--ink-2) 82%);
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}

.page-home .hero-home__scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, rgba(20, 17, 28, .05) 0 1px, transparent 1px 4px);
  opacity: .7;
}

.page-home .hero-home__wrap {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 30px;
  min-width: 0;
}

.page-home .hero-home__text { min-width: 0; }

.page-home .hero-home__title {
  margin: 14px 0 0;
  font-weight: 200;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--ink);
}

.page-home .hero-home__mark {
  display: inline;
  background-image: linear-gradient(to top, var(--cyan) 0 .22em, transparent .22em);
  background-repeat: no-repeat;
}

.page-home .hero-home__lede {
  margin: 20px 0 0;
  max-width: 38ch;
  color: var(--ink);
}

.page-home .hero-home__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.page-home .hero-home__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 28px 0 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: var(--home-hardline);
  font-size: var(--fs-index);
  letter-spacing: var(--track-index);
  color: var(--mist);
}

.page-home .hero-home__stats b {
  display: inline-block;
  margin-right: 5px;
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
}

.page-home .hero-home__media { margin: 0; min-width: 0; }

.page-home .hero-home__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-hard);
  background: var(--paper-2);
}

/* ============ 三条常走的路 ============ */
.page-home .paths { background: var(--paper-2); }

.page-home .paths__head { max-width: 60ch; }

.page-home .paths__head .lede { margin-top: 14px; }

.page-home .paths__grid {
  display: grid;
  gap: 30px;
  margin-top: clamp(26px, 4vw, 44px);
  min-width: 0;
}

.page-home .paths__media { margin: 0; min-width: 0; }

.page-home .paths__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 2px solid var(--ink);
  background: var(--paper);
}

.page-home .paths__media figcaption {
  margin-top: 10px;
  font-size: var(--fs-index);
  letter-spacing: var(--track-index);
  color: var(--mist);
}

.page-home .paths__list {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.page-home .paths__item {
  border-left: var(--home-hardline);
  padding: 6px 0 22px 22px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-home .paths__item + .paths__item { padding-top: 22px; }

.page-home .paths__item:hover {
  border-left-color: var(--orange);
  transform: translateX(4px);
}

.page-home .paths__badge {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  background: var(--orange);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-size: .74rem;
  font-weight: 700;
}

.page-home .paths__name {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

.page-home .paths__desc {
  margin: 10px 0 0;
  max-width: 40ch;
  font-size: .95rem;
  line-height: 1.8;
  color: var(--ink);
}

.page-home .paths__link {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-index);
  letter-spacing: var(--track-index);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.page-home .paths__link:hover { color: var(--violet); }

/* ============ 数字墙 ============ */
.page-home .numbers {
  background: var(--ink);
  color: var(--paper);
}

.page-home .numbers .eyebrow { color: var(--cyan); }
.page-home .numbers h2 { color: var(--paper); }

.page-home .numbers__wrap {
  display: grid;
  gap: 36px;
  min-width: 0;
}

.page-home .numbers__intro { min-width: 0; }

.page-home .numbers__text {
  margin: 16px 0 0;
  max-width: 38ch;
  font-size: .95rem;
  line-height: 1.85;
  color: rgba(245, 239, 226, .78);
}

.page-home .numbers__art {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 26px;
  border: 2px solid var(--line-invert);
  background: var(--ink-2);
}

.page-home .numbers__list {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.page-home .numbers__item {
  display: grid;
  gap: 6px 16px;
  padding: 20px 0;
  border-top: 2px solid var(--line-invert);
}

.page-home .numbers__item:last-child { border-bottom: 2px solid var(--line-invert); }

.page-home .numbers__num {
  font-size: clamp(2.6rem, 9vw, 4.2rem);
  font-weight: 200;
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.page-home .numbers__unit {
  font-size: var(--fs-index);
  letter-spacing: var(--track-index);
  color: var(--cyan);
}

.page-home .numbers__item p {
  margin: 6px 0 0;
  max-width: 34ch;
  font-size: .9rem;
  line-height: 1.75;
  color: rgba(245, 239, 226, .72);
}

/* ============ 攻略卷轴 ============ */
.page-home .band-section { background: var(--paper); }

.page-home .band-section__head {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.page-home .band-section__note {
  margin: 0;
  max-width: 40ch;
  font-size: .95rem;
  line-height: 1.8;
  color: var(--mist);
}

.page-home .band-section__band { margin-top: clamp(24px, 4vw, 40px); }

.page-home .band-section__track {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 4px var(--home-gutter) 18px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.page-home .band-section__item {
  flex: 0 0 86%;
  max-width: 430px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.page-home .band-section__item:hover {
  box-shadow: 6px 6px 0 var(--ink-2);
}

.page-home .band-section__media { margin: 0 0 4px; }

.page-home .band-section__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 2px solid var(--ink);
}

.page-home .band-section__kicker {
  margin: 0;
  font-size: var(--fs-index);
  letter-spacing: var(--track-index);
  color: var(--violet);
}

.page-home .band-section__name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
}

.page-home .band-section__desc {
  margin: 0;
  font-size: .92rem;
  line-height: 1.75;
  color: var(--ink);
}

.page-home .band-section__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 0;
  padding-top: 10px;
}

/* ============ 两步开始 ============ */
.page-home .steps { background: var(--paper-2); }

.page-home .steps__head { max-width: 52ch; }

.page-home .steps__head .lede { margin-top: 14px; }

.page-home .steps__grid {
  display: grid;
  gap: 22px;
  margin-top: clamp(26px, 4vw, 42px);
  min-width: 0;
}

.page-home .steps__card {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 3vw, 32px);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(20, 17, 28, .12);
}

.page-home .steps__card--alt { box-shadow: 8px 8px 0 rgba(122, 59, 255, .22); }

.page-home .steps__kicker {
  margin: 0;
  font-size: var(--fs-index);
  letter-spacing: var(--track-index);
  color: var(--mist);
}

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

.page-home .steps__flow li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}

.page-home .steps__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--orange);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-size: .8rem;
  font-weight: 700;
}

.page-home .steps__card--alt .steps__num { background: var(--cyan); }

.page-home .steps__note {
  margin: 18px 0 22px;
  max-width: 36ch;
  font-size: .92rem;
  line-height: 1.8;
  color: var(--ink);
}

.page-home .steps__card .btn,
.page-home .steps__link { align-self: flex-start; margin-top: auto; }

.page-home .steps__link {
  font-family: var(--font-mono);
  font-size: var(--fs-index);
  letter-spacing: var(--track-index);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.page-home .steps__link:hover { color: var(--violet); }

/* ============ 本期更新 ============ */
.page-home .updates {
  background: var(--violet);
  color: var(--paper);
}

.page-home .updates .eyebrow { color: var(--cyan); }
.page-home .updates h2 { color: var(--paper); }

.page-home .updates__wrap {
  display: grid;
  gap: 28px;
  min-width: 0;
}

.page-home .updates__main { min-width: 0; }

.page-home .updates__text {
  margin: 16px 0 0;
  max-width: 44ch;
  font-size: .98rem;
  line-height: 1.85;
  color: rgba(245, 239, 226, .88);
}

.page-home .updates__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
}

.page-home .updates__textlink {
  font-size: .92rem;
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.page-home .updates__list {
  list-style: none;
  margin: 0;
  padding: clamp(20px, 3vw, 30px);
  display: grid;
  gap: 14px;
  color: var(--ink);
  min-width: 0;
}

.page-home .updates__list li {
  position: relative;
  padding-left: 18px;
  font-size: .93rem;
  line-height: 1.8;
}

.page-home .updates__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 8px;
  height: 8px;
  background: var(--violet);
}

/* ============ 桌面端 ============ */
@media (min-width: 760px) {
  .page-home .band-section__item { flex: 0 0 380px; }
  .page-home .band-section__item:nth-child(even) { margin-top: 26px; }
}

@media (min-width: 900px) {
  .page-home .hero-home::before {
    width: 52%;
    height: 100%;
    clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
  }

  .page-home .hero-home__wrap {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
  }

  .page-home .hero-home__lede { max-width: 36ch; }

  .page-home .paths__grid {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    gap: clamp(34px, 5vw, 72px);
    align-items: start;
  }

  .page-home .paths__media { position: sticky; top: calc(var(--topbar-h) + 24px); }

  .page-home .numbers__wrap {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }

  .page-home .numbers__item {
    grid-template-columns: minmax(0, auto) 1fr;
    align-items: baseline;
    column-gap: 24px;
  }

  .page-home .numbers__num { grid-row: span 2; }
  .page-home .numbers__unit { align-self: end; }
  .page-home .numbers__item p { grid-column: 2; margin-top: 2px; }

  .page-home .band-section__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 38ch);
    align-items: end;
    gap: clamp(24px, 4vw, 56px);
  }

  .page-home .band-section__note { padding-bottom: 6px; }

  .page-home .steps__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 36px);
  }

  .page-home .updates__wrap {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
  }
}

@media (min-width: 1180px) {
  .page-home .band-section__item { flex: 0 0 400px; }
  .page-home .band-section__item:first-child { flex: 0 0 460px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .paths__item,
  .page-home .band-section__item {
    transition: none;
  }
  .page-home .paths__item:hover,
  .page-home .band-section__item:hover {
    transform: none;
  }
}