/* ===== 首页 page-home ===== */
.page-home {
  --home-sticky-top: calc(var(--space-8) + var(--space-4));
  display: block;
}

/* ---------- 首屏拼贴 ---------- */
.page-home .hero-collage {
  position: relative;
  padding-block: calc(var(--section-y) * 0.78) var(--space-6);
  border-bottom: var(--border-thin) solid var(--color-line);
}

.page-home .home-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: var(--color-ink-muted);
}

.page-home .crumb-sep {
  color: var(--color-line);
}

.page-home .hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4) var(--gutter);
  align-items: start;
}

.page-home .hero-lead,
.page-home .hero-mark,
.page-home .hero-side,
.page-home .hero-band {
  grid-column: 1 / -1;
  min-width: 0;
}

@media (min-width: 960px) {
  .page-home .hero-lead { grid-column: 1 / span 5; }
  .page-home .hero-mark { grid-column: 6 / span 4; }
  .page-home .hero-side { grid-column: 10 / span 3; }
}

.page-home .hero-lead {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.page-home .hero-vertical {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.26em;
  color: var(--color-ink-muted);
}

@media (min-width: 960px) {
  .page-home .hero-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    height: 132px;
    justify-self: start;
  }
}

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

.page-home .hero-lead-text {
  margin: 0;
  max-width: 40ch;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.62;
  color: var(--color-ink-soft);
}

/* 深底年份块 */
.page-home .hero-mark {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  overflow: hidden;
  isolation: isolate;
}

.page-home .hero-mark-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}

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

.page-home .hero-mark-inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-1);
}

.page-home .hero-mark-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  color: var(--color-contrast-accent);
}

.page-home .hero-mark-num {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-figure);
  font-weight: var(--weight-heading);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-contrast-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.16), 0 3px 0 var(--color-contrast-line);
}

.page-home .hero-mark-rule {
  display: block;
  width: 72px;
  height: 3px;
  margin-block: var(--space-1);
  background: var(--color-contrast-accent);
}

.page-home .hero-mark-note {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-contrast-ink);
  opacity: 0.86;
}

/* 右侧错位小块 */
.page-home .hero-side {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

@media (min-width: 960px) {
  .page-home .hero-side > :last-child {
    margin-top: var(--space-6);
  }
}

.page-home .hero-chip {
  display: grid;
  gap: 2px;
  padding: var(--space-3);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.18s ease-out, border-color 0.18s ease-out;
}

.page-home .hero-chip:hover,
.page-home .hero-chip:focus-visible {
  background: var(--color-surface-alt);
  border-color: var(--color-primary);
}

.page-home .hero-chip-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-primary);
}

.page-home .hero-chip-label {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-heading);
  color: var(--color-ink);
}

.page-home .hero-chip-note {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-ink-muted);
}

/* 底部数字带 */
.page-home .hero-band {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--gutter);
}

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

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

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

.page-home .band-note {
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  color: var(--color-ink-muted);
}

/* ---------- 通用区块节奏 ---------- */
.page-home .section {
  padding-block: var(--section-y);
}

.page-home .section-head {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.page-home .chapter-mark {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  color: var(--color-primary);
}

.page-home .section-title {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-home .rule-line {
  display: block;
  width: 100%;
  height: var(--border-thin);
  background: var(--color-line);
}

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

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

/* ---------- 章 01 年份 ---------- */
.page-home .year-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

@media (min-width: 960px) {
  .page-home .year-layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: var(--space-8);
  }
}

.page-home .year-rail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (min-width: 960px) {
  .page-home .year-rail {
    position: sticky;
    top: var(--home-sticky-top);
    align-self: start;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
}

.page-home .year-anchor {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  padding: 6px var(--space-2);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: background-color 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out;
}

.page-home .year-anchor:hover,
.page-home .year-anchor:focus-visible,
.page-home .year-anchor[aria-current="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-ink);
}

.page-home .year-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  min-width: 0;
}

.page-home .year-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding-block: var(--space-4) var(--space-6);
  border-top: var(--border-thin) solid var(--color-line);
}

.page-home .year-item:last-child {
  border-bottom: var(--border-thin) solid var(--color-line);
}

@media (min-width: 700px) {
  .page-home .year-item {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
  }
}

.page-home .year-num {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}

.page-home .year-body {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.page-home .year-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-ink);
}

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

.page-home .year-text--soft {
  padding-left: var(--space-2);
  border-left: var(--border-thick) solid var(--color-primary-soft);
  color: var(--color-ink-muted);
}

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

/* ---------- 章 02 三档 ---------- */
.page-home .tier-banner {
  margin: 0 0 var(--space-6);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.page-home .tier-banner img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

.page-home .tier-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

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

.page-home .tier-col {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3) var(--space-4);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  min-width: 0;
  transition: background-color 0.18s ease-out, border-color 0.18s ease-out;
}

.page-home .tier-col--key {
  background: var(--color-primary-soft);
}

.page-home .tier-col:hover,
.page-home .tier-col:focus-within {
  background: var(--color-surface-alt);
  border-color: var(--color-primary);
}

.page-home .tier-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-thin) solid var(--color-line);
}

.page-home .tier-name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  color: var(--color-ink);
}

.page-home .tier-chip {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  padding: 3px var(--space-1);
  border-radius: var(--radius-sm);
  border: var(--border-thin) solid var(--color-line);
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.page-home .tier-chip--reverse {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-ink);
}

.page-home .tier-price {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: 1.15;
  color: var(--color-accent);
}

.page-home .tier-price small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-body);
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

.page-home .tier-list {
  margin: var(--space-3) 0 0;
  display: grid;
  gap: var(--space-3);
}

.page-home .tier-list > div {
  display: grid;
  gap: 4px;
}

.page-home .tier-list dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--color-primary);
}

.page-home .tier-list dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.68;
  color: var(--color-ink-soft);
}

.page-home .tier-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-6) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-line);
  font-size: var(--text-base);
}

.page-home .tier-link {
  color: var(--color-primary);
  text-decoration-thickness: var(--border-thin);
  text-underline-offset: 4px;
}

/* ---------- 章 03 工具带 ---------- */
.page-home .tool-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 78%);
  gap: var(--space-3);
  margin: 0;
  padding: 0 0 var(--space-3);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.page-home .tool-track > li {
  scroll-snap-align: start;
  min-width: 0;
}

@media (min-width: 900px) {
  .page-home .tool-track {
    grid-auto-columns: minmax(0, 1fr);
    overflow-x: visible;
    padding-bottom: 0;
  }
}

.page-home .tool-card {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-3);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.18s ease-out, border-color 0.18s ease-out;
}

.page-home .tool-card:hover,
.page-home .tool-card:focus-visible {
  background: var(--color-surface-alt);
  border-color: var(--color-primary);
}

.page-home .tool-media {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-sm);
}

.page-home .tool-index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: var(--color-primary);
}

.page-home .tool-name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-ink);
}

.page-home .tool-row {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.66;
  color: var(--color-ink-soft);
}

.page-home .tool-row b {
  display: inline-block;
  margin-right: 6px;
  font-weight: var(--weight-heading);
  color: var(--color-ink);
}

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

/* ---------- 章 04 承诺 ---------- */
.page-home .promise-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 900px) {
  .page-home .promise-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--space-8);
  }
}

.page-home .promise-copy {
  min-width: 0;
}

.page-home .promise-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

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

.page-home .promise-card {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-thick) solid var(--color-primary);
  min-width: 0;
}

.page-home .promise-card:nth-child(2) {
  border-top-color: var(--color-accent);
}

.page-home .promise-name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  color: var(--color-ink);
}

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

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

.page-home .promise-figure {
  margin: 0;
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.page-home .promise-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* ---------- 章 05 下一步 ---------- */
.page-home .next-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

@media (min-width: 800px) {
  .page-home .next-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .page-home .next-card--a { grid-column: 1 / span 5; }
  .page-home .next-card--b { grid-column: 6 / span 7; }
  .page-home .next-card--c { grid-column: 1 / span 7; }
  .page-home .next-card--d { grid-column: 8 / span 5; }
}

.page-home .next-card {
  display: grid;
  align-content: space-between;
  gap: var(--space-3);
  min-height: 180px;
  padding: var(--space-4);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  min-width: 0;
  transition: background-color 0.18s ease-out, border-color 0.18s ease-out;
}

.page-home .next-card:hover,
.page-home .next-card:focus-visible {
  background: var(--color-surface-alt);
  border-color: var(--color-primary);
}

.page-home .next-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: var(--color-primary);
}

.page-home .next-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  color: var(--color-ink);
}

.page-home .next-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.68;
  color: var(--color-ink-soft);
}

.page-home .next-arrow {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  color: var(--color-ink-muted);
  transition: color 0.18s ease-out;
}

.page-home .next-card:hover .next-arrow,
.page-home .next-card:focus-visible .next-arrow {
  color: var(--color-accent);
}

.page-home .next-card--d {
  background: var(--color-contrast-surface);
  border-color: var(--color-contrast-surface);
}

.page-home .next-card--d:hover,
.page-home .next-card--d:focus-visible {
  background: var(--color-contrast-surface);
  border-color: var(--color-contrast-accent);
}

.page-home .next-card--d .next-kicker { color: var(--color-contrast-accent); }
.page-home .next-card--d .next-title { color: var(--color-contrast-ink); }
.page-home .next-card--d .next-text { color: var(--color-contrast-ink); opacity: 0.84; }
.page-home .next-card--d .next-arrow { color: var(--color-contrast-ink); opacity: 0.72; }

/* ---------- 窄屏收敛 ---------- */
@media (max-width: 640px) {
  .page-home .hero-collage {
    padding-block: calc(var(--section-y) * 0.62) var(--space-6);
  }
  .page-home .section {
    padding-block: calc(var(--section-y) * 0.7);
  }
  .page-home .tool-track {
    grid-auto-columns: minmax(220px, 84%);
  }
  .page-home .section-head {
    margin-bottom: var(--space-4);
  }
  .page-home .tier-col,
  .page-home .next-card {
    padding: var(--space-3);
  }
}

@media (max-width: 400px) {
  .page-home .hero-band {
    grid-template-columns: minmax(0, 1fr);
  }
}