/* First scroll builds the staircase in place; the remaining page follows.
   Without JavaScript this is an ordinary section with a completed staircase. */
.hero-scroll-scene { position: relative; }
.hero-scroll-scene .hero {
  padding-top: clamp(40px, 7svh, 72px);
  padding-bottom: 20px;
  background: #fff;
  align-content: start;
}
.hero-scroll-scene .hero-stage { justify-self: end; }
.hero-scroll-scene .hero-bottom {
  margin-top: 16px;
  padding-top: 0;
  border: 0;
  justify-content: flex-end;
}
.hero-scroll-scene.is-hero-pinned { height: calc(var(--hero-page-height) + var(--hero-travel)); }
/* Hold the following content with the hero, so the hero can keep its natural
   height without the next section moving during the initial assembly. */
.hero-scroll-scene.is-hero-pinned > .hero-page-frame { position: sticky; top: var(--hero-top); }
.hero-viewport-sizer { position: absolute; width: 0; height: 100vh; height: 100svh; visibility: hidden; pointer-events: none; }

/* Static and reduced-motion layouts use the same six-step composition. */
.hero-scroll-scene:not(.is-hero-ready) .poster,
.hero-scroll-scene.is-hero-static .poster {
  width: 29%; transform: none !important;
}
.hero-scroll-scene:not(.is-hero-ready) .poster-inner,
.hero-scroll-scene.is-hero-static .poster-inner { rotate: 0deg; }
.hero-scroll-scene:not(.is-hero-ready) .poster-a, .hero-scroll-scene.is-hero-static .poster-a { left: 70%; top: 0; }
.hero-scroll-scene:not(.is-hero-ready) .poster-b, .hero-scroll-scene.is-hero-static .poster-b { left: 37%; top: 30.555556%; }
.hero-scroll-scene:not(.is-hero-ready) .poster-c, .hero-scroll-scene.is-hero-static .poster-c { left: 70%; top: 30.555556%; }
.hero-scroll-scene:not(.is-hero-ready) .poster-d, .hero-scroll-scene.is-hero-static .poster-d { left: 4%; top: 61.111111%; }
.hero-scroll-scene:not(.is-hero-ready) .poster-e, .hero-scroll-scene.is-hero-static .poster-e { left: 37%; top: 61.111111%; }
.hero-scroll-scene:not(.is-hero-ready) .poster-f, .hero-scroll-scene.is-hero-static .poster-f { left: 70%; top: 61.111111%; }

/* Removal of the explanatory rows leaves only functional controls. */
.course-toolbar, .catalog-status { justify-content: flex-end; }
.course-section .section-heading { margin-bottom: 24px; }
.course-toolbar { margin-bottom: 18px; }
.catalog-status { padding-block: 16px 24px; }

@media (max-width: 767px) {
  .hero-scroll-scene .hero { padding: 24px 16px 8px; }
  .hero-scroll-scene .hero .eyebrow { margin-bottom: 12px; }
  .hero-scroll-scene .hero h1 { font-size: clamp(42px, 10.8vw, 64px); }
  .hero-scroll-scene .hero-stage { margin-top: 16px; width: 100%; max-width: none; aspect-ratio: 1; }
  .hero-scroll-scene .hero-description { margin-top: 16px; }
  .hero-scroll-scene .hero-description p { margin-bottom: 16px; }
  .hero-scroll-scene .hero-bottom { margin-top: 0; }
  /* The collage and the finished staircase both fill the same square. */
  .hero-stage .poster-a { width: 32%; left: 63%; top: 4%; --angle: 6deg; }
  .hero-stage .poster-b { width: 36%; left: 22%; top: 8%; --angle: -7deg; }
  .hero-stage .poster-c { width: 38%; left: 58%; top: 32%; --angle: 5deg; }
  .hero-stage .poster-d { width: 35%; left: 2%; top: 39%; --angle: -6deg; }
  .hero-stage .poster-e { width: 37%; left: 29%; top: 59%; --angle: 6deg; }
  .hero-stage .poster-f { width: 29%; left: 67%; top: 68%; --angle: -5deg; }
  .hero-scroll-scene:not(.is-hero-ready) .poster,
  .hero-scroll-scene.is-hero-static .poster { width: 31%; }
  .hero-scroll-scene:not(.is-hero-ready) .poster-a, .hero-scroll-scene.is-hero-static .poster-a { left: 69%; top: 0; }
  .hero-scroll-scene:not(.is-hero-ready) .poster-b, .hero-scroll-scene.is-hero-static .poster-b { left: 34.5%; top: 34.5%; }
  .hero-scroll-scene:not(.is-hero-ready) .poster-c, .hero-scroll-scene.is-hero-static .poster-c { left: 69%; top: 34.5%; }
  .hero-scroll-scene:not(.is-hero-ready) .poster-d, .hero-scroll-scene.is-hero-static .poster-d { left: 0; top: 69%; }
  .hero-scroll-scene:not(.is-hero-ready) .poster-e, .hero-scroll-scene.is-hero-static .poster-e { left: 34.5%; top: 69%; }
  .hero-scroll-scene:not(.is-hero-ready) .poster-f, .hero-scroll-scene.is-hero-static .poster-f { left: 69%; top: 69%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-scene.is-hero-pinned { height: auto; }
  .hero-scroll-scene.is-hero-pinned > .hero-page-frame { position: relative; top: auto; }
}