.page-home {
  --home-pad: 18%;
}

/* ---------- 首屏 ---------- */
.page-home .hero {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  border-bottom: var(--border-thin) solid var(--color-line);
  padding-block: var(--space-8) var(--space-6);
}

.page-home .hero__inner {
  position: relative;
  z-index: 3;
  text-align: center;
}

.page-home .hero__kicker {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  color: var(--color-primary);
  text-transform: uppercase;
}

.page-home .hero__title {
  margin: 0 auto;
  max-width: 14ch;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-display);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-home .hero__lead {
  margin: var(--space-4) auto 0;
  max-width: 48ch;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .hero__lead .mono {
  color: var(--color-accent);
  margin-inline: 0.15em;
}

.page-home .hero__aside {
  position: relative;
  z-index: 2;
  width: min(100% - var(--space-6), 520px);
  margin: var(--space-6) auto 0;
}

.page-home .hero__photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-line);
  aspect-ratio: 4 / 3;
}

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

.page-home .hero__peek {
  position: relative;
  z-index: 2;
  width: calc(100% - var(--space-4));
  margin: calc(-1 * var(--space-4)) 0 0 var(--space-3);
  padding: var(--space-3);
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  border: calc(var(--border-thick) + var(--border-thin)) double var(--color-contrast-accent);
  border-radius: var(--radius-sm);
}

.page-home .hero__peek-no {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--color-contrast-accent);
}

.page-home .hero__peek-name {
  margin: var(--space-1) 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-heading);
}

.page-home .hero__peek-hint {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--color-contrast-ink) 70%, transparent);
}

.page-home .hero__stats {
  position: relative;
  z-index: 3;
  margin-top: var(--space-8);
}

.page-home .stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: var(--space-3) 0 0;
  list-style: none;
  border-top: calc(var(--border-thick) + var(--border-thin)) double var(--color-line);
}

.page-home .stat {
  padding: var(--space-2) var(--space-1);
  text-align: center;
}

.page-home .stat__num {
  font-family: var(--font-mono);
  font-size: var(--text-figure);
  line-height: 1;
  color: var(--color-accent);
}

.page-home .stat__pre,
.page-home .stat__unit {
  font-size: var(--text-base);
  color: var(--color-ink-soft);
  margin-inline-start: 0.15em;
}

.page-home .stat__label {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* ---------- 三条主线 ---------- */
.page-home .lanes {
  background: var(--color-surface);
}

.page-home .lane-rail {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3) var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.page-home .lane-card {
  flex: 0 0 auto;
  width: min(78vw, 300px);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  background: var(--color-surface-alt);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  transition: outline-color 180ms ease, background-color 180ms ease;
}

.page-home .lane-card:hover,
.page-home .lane-card:focus-within {
  outline: calc(var(--border-thick) + var(--border-thin)) double var(--color-primary);
  outline-offset: calc(-1 * var(--border-thin));
  background: var(--color-surface);
}

.page-home .lane-card__index {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: var(--color-primary);
}

.page-home .lane-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-home .lane-card__role {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-accent);
}

.page-home .lane-card__desc {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .lane-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-1) 0 0;
  padding-top: var(--space-2);
  border-top: var(--border-thin) solid var(--color-line);
}

.page-home .lane-card__fact {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.page-home .lane-card__fact dt {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-home .lane-card__fact dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--color-accent);
}

.page-home .lane-card__meta {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.75;
  color: var(--color-ink-muted);
}

.page-home .lane-card__link {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-primary);
  text-decoration: none;
  border-top: var(--border-thin) solid var(--color-line);
  border-bottom: var(--border-thin) solid var(--color-primary);
  align-self: flex-start;
}

.page-home .lane-card__sub {
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: var(--border-thin) dashed var(--color-accent);
  align-self: flex-start;
}

.page-home .lane-card__link:hover,
.page-home .lane-card__sub:hover {
  color: var(--color-focus);
}

/* ---------- 日期轴 ---------- */
.page-home .archive__grid {
  align-items: start;
}

.page-home .archive__title {
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-2xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-home .archive__text {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .text-link {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: var(--border-thin) solid var(--color-accent);
}

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

.page-home .archive__photo {
  margin: var(--space-4) 0 0;
}

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

.page-home .archive__axis {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0 0 0 var(--space-4);
  border-left: calc(var(--border-thick) + var(--border-thin)) double var(--color-line);
}

.page-home .axis-item {
  position: relative;
  padding-bottom: var(--space-6);
}

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

.page-home .axis-item::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: calc(-1 * var(--space-4) - 2px);
  width: 7px;
  height: 7px;
  background: var(--color-primary);
}

.page-home .axis-item__no {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
}

.page-home .axis-item__when {
  margin: var(--space-1) 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  color: var(--color-ink);
}

.page-home .axis-item__what {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

/* ---------- 活动中心 ---------- */
.page-home .hub {
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
}

.page-home .hub .section-head__title {
  color: var(--color-contrast-ink);
}

.page-home .hub .section-head__lead {
  color: color-mix(in srgb, var(--color-contrast-ink) 74%, transparent);
}

.page-home .hub .eyebrow {
  color: var(--color-contrast-accent);
}

.page-home .hub__grid {
  margin-top: var(--space-6);
  align-items: start;
}

.page-home .hub__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--border-thin) solid var(--color-contrast-line);
}

.page-home .hub__entry {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  border-bottom: var(--border-thin) solid var(--color-contrast-line);
}

.page-home .hub__entry--active {
  border: calc(var(--border-thick) + var(--border-thin)) double var(--color-contrast-accent);
  background: color-mix(in srgb, var(--color-contrast-accent) 14%, transparent);
}

.page-home .hub__no {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--color-contrast-ink) 62%, transparent);
}

.page-home .hub__entry--active .hub__no {
  color: var(--color-contrast-accent);
}

.page-home .hub__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-contrast-ink);
  text-decoration: none;
  letter-spacing: var(--tracking-heading);
}

.page-home a.hub__name:hover {
  color: var(--color-contrast-accent);
  border-bottom: var(--border-thin) solid var(--color-contrast-accent);
}

.page-home .hub__tag {
  margin-left: auto;
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--color-contrast-ink) 55%, transparent);
}

.page-home .hub__tag--accent {
  color: var(--color-contrast-accent);
  border: var(--border-thin) solid var(--color-contrast-accent);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
}

.page-home .hub__side {
  margin-top: var(--space-6);
}

.page-home .hub__photo {
  margin: 0 0 var(--space-4);
}

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

.page-home .hub__groups {
  padding: var(--space-3);
  border: var(--border-thin) solid var(--color-contrast-line);
  border-radius: var(--radius-sm);
}

.page-home .hub__groups-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-lg);
  color: var(--color-contrast-ink);
}

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

.page-home .hub__groups-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.8;
  color: color-mix(in srgb, var(--color-contrast-ink) 86%, transparent);
}

.page-home .hub__groups-key {
  font-family: var(--font-mono);
  color: var(--color-contrast-accent);
}

.page-home .hub__groups-note {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-2);
  border-top: var(--border-thin) solid var(--color-contrast-line);
  font-size: var(--text-xs);
  line-height: 1.8;
  color: color-mix(in srgb, var(--color-contrast-ink) 66%, transparent);
}

/* ---------- 帮助区 ---------- */
.page-home .help {
  background: var(--color-surface);
}

.page-home .help__cards {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.page-home .help-card {
  position: relative;
  padding: var(--space-4) var(--space-3);
  background: var(--color-surface-alt);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-sm);
  transition: outline-color 180ms ease;
}

.page-home .help-card--pinned {
  background: var(--color-highlight);
}

.page-home .help-card:hover,
.page-home .help-card:focus-within {
  outline: calc(var(--border-thick) + var(--border-thin)) double var(--color-primary);
  outline-offset: calc(-1 * var(--border-thin));
}

.page-home .marker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  padding: 2px var(--space-1);
  color: var(--color-primary-ink);
  background: var(--color-primary);
  border-radius: var(--radius-sm);
}

.page-home .marker--accent {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.page-home .help-card__title {
  margin: var(--space-3) 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-home .help-card__body {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .help-card__foot {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-2);
  border-top: var(--border-thin) solid var(--color-line);
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-ink-muted);
}

.page-home .help__more {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--color-ink-muted);
  text-align: center;
}

/* ---------- 检索 ---------- */
.page-home .finder__demo {
  position: relative;
  margin-top: var(--space-6);
}

.page-home .band-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.page-home .band-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.page-home .band-chip {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.page-home #band-all:checked ~ .band-chips label[for="band-all"],
.page-home #band-recent:checked ~ .band-chips label[for="band-recent"],
.page-home #band-year:checked ~ .band-chips label[for="band-year"],
.page-home #band-mid:checked ~ .band-chips label[for="band-mid"],
.page-home #band-early:checked ~ .band-chips label[for="band-early"] {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}

.page-home .band-input:focus-visible ~ .band-chips .band-chip {
  outline: var(--border-thin) solid var(--color-focus);
  outline-offset: 2px;
}

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

.page-home .band-group {
  padding: var(--space-3);
  border: var(--border-thin) solid var(--color-line);
  border-left: calc(var(--border-thick) + var(--border-thin)) double var(--color-accent);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  transition: opacity 200ms ease, border-color 200ms ease;
}

.page-home #band-recent:checked ~ .band-groups .band-group:not(.band-group--recent),
.page-home #band-year:checked ~ .band-groups .band-group:not(.band-group--year),
.page-home #band-mid:checked ~ .band-groups .band-group:not(.band-group--mid),
.page-home #band-early:checked ~ .band-groups .band-group:not(.band-group--early) {
  opacity: 0.34;
}

.page-home .band-group__no {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.page-home .band-group__title {
  margin: var(--space-1) 0 var(--space-1);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-lg);
  color: var(--color-ink);
}

.page-home .band-group__desc {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.85;
  color: var(--color-ink-soft);
}

.page-home .finder__photo {
  margin: var(--space-6) 0 0;
}

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

.page-home .finder__boundary {
  margin: var(--space-4) auto 0;
  max-width: var(--measure);
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--color-ink-muted);
  text-align: center;
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-home .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .stat + .stat {
    border-left: calc(var(--border-thick) + var(--border-thin)) double var(--color-line);
  }

  .page-home .axis-item {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    column-gap: var(--space-2);
    align-items: baseline;
  }

  .page-home .axis-item__when {
    margin-top: 0;
  }

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

  .page-home .help__cards {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: stretch;
  }
}

@media (min-width: 760px) {
  .page-home .lane-card--a {
    width: 300px;
  }

  .page-home .lane-card--b {
    width: 400px;
  }

  .page-home .lane-card--c {
    width: 260px;
  }
}

@media (min-width: 1024px) {
  .page-home .hero {
    padding-block: var(--section-y-lg) var(--space-6);
  }

  .page-home .hero__inner {
    padding-inline: 15%;
  }

  .page-home .hero__title {
    max-width: 16ch;
  }

  .page-home .hero__aside {
    position: absolute;
    top: var(--section-y-lg);
    right: 0;
    bottom: 130px;
    width: 20vw;
    max-width: 300px;
    margin: 0;
    z-index: 1;
  }

  .page-home .hero__photo {
    height: 100%;
    aspect-ratio: auto;
  }

  .page-home .hero__peek {
    position: absolute;
    right: calc(-1 * var(--space-8));
    bottom: var(--space-6);
    width: calc(100% + var(--space-8));
    margin: 0;
  }

  .page-home .hero__stats {
    padding-inline: 12%;
  }

  .page-home .lane-rail {
    padding-inline: max(var(--space-3), calc((100vw - var(--container)) / 2));
    padding-bottom: var(--space-8);
  }

  .page-home .hub__side {
    margin-top: 0;
  }

  .page-home .finder__demo {
    padding-inline: var(--space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home *,
  .page-home *::before,
  .page-home *::after {
    transition: none !important;
    animation: none !important;
  }
}