/*
 * Homepage rhythm and decorative type corrections.
 * The who → versus pair remains the spacing reference.
 */
body[data-page="home"] #main > .numbers,
body[data-page="home"] #main > .platform,
body[data-page="home"] #main > .desk,
body[data-page="home"] #main > .res,
body[data-page="home"] #main > .finale {
  padding-block: clamp(60px, 9vw, 120px);
}

/* Keep the sticky chapter sequence intact, but remove its oversized exit tail. */
body[data-page="home"] #main > .how {
  padding-top: clamp(60px, 9vw, 120px);
}

body[data-page="home"] #main > .how .how__steps > .how__step:last-child {
  min-height: 0;
  padding-bottom: clamp(16px, 2.5vw, 32px);
}

/* Desktop spacing should not keep growing with a tall monitor. */
@media (min-width: 1024px) {
  body[data-page="home"] #main {
    --desktop-section-space: clamp(64px, 4vw, 80px);
  }

  body[data-page="home"] #main > .numbers,
  body[data-page="home"] #main > .platform,
  body[data-page="home"] #main > .desk,
  body[data-page="home"] #main > .who,
  body[data-page="home"] #main > .versus,
  body[data-page="home"] #main > .res,
  body[data-page="home"] #main > .finale {
    padding-block: var(--desktop-section-space);
  }

  body[data-page="home"] #main > .how {
    padding-top: var(--desktop-section-space);
  }

  body[data-page="home"] #main > .how .how__step {
    min-height: clamp(220px, 26svh, 280px);
    padding-top: clamp(24px, 4svh, 40px);
  }

  body[data-page="home"] #main > .how .how__step:first-child {
    padding-top: 20px;
  }
}

@media (min-width: 1200px) {
  body[data-page="home"] #main > .hero {
    min-height: min(calc(100svh - var(--bar)), 880px);
    padding-block: 64px 80px;
  }
}

/*
 * Decorative numerals are independent background layers. Keep them inside
 * their scene, and opt these spans out of scroll parallax so the whole glyph
 * remains visible at both scroll extremes.
 */
.bignum {
  inset: 0;
  container-type: size;
  overflow: hidden;
  pointer-events: none;
}

.bignum > span {
  inset: 16px var(--gutter, 24px) !important;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  max-width: none;
  font-size: clamp(4rem, min(22vw, 40vh), 20rem);
  line-height: 1;
  white-space: nowrap;
  transform: none !important;
  pointer-events: none;
}

.how .bignum > span,
.who .bignum > span {
  align-items: flex-end;
  justify-content: flex-start;
}

/* A short scene must also contain its number, not just wide/tall scenes. */
@supports (font-size: 1cqh) {
  .bignum > span {
    font-size: max(0px, min(22vw, calc(100cqh - 32px), calc((100cqw - 2 * var(--gutter, 24px)) / 1.5), 20rem));
  }
}

/* Preserve the subtle pixel-number treatment on smaller screens. */
@media (max-width: 767px) {
  .bignum > span {
    font-size: clamp(4rem, min(24vw, 36vh), 11rem);
  }
}