/* R62: load after section-headings.css; each section boundary has one owner. */
.home-page {
  --section-gap: 160px;
  --subsection-gap: 64px;
  --section-title-gap: 44px;
}

.home-page :is(#work-title,#career-results-title,#expertise-title,#skills-title,#experience-title,#learning-title) {
  margin-bottom:var(--section-title-gap);
}
.home-page .career-story { margin-top:0; }
.home-page #learning > .section-heading { display:none; }

/* Keep the next heading near the first fold, with no flex slack below the hero. */
.home-page #intro {
  justify-content: flex-end;
  min-height: max(0px, calc(100vh - var(--page-top) - var(--section-gap)));
  min-height: max(0px, calc(100svh - var(--page-top) - var(--section-gap)));
  margin-block: 0;
  padding-block: clamp(40px, 7vh, 88px) 0;
}

.home-page #work {
  margin-top: var(--section-gap);
}

/* These outer sections own the gap before the following top-level section. */
.home-page :is(#work, #expertise, #learning) {
  padding-bottom: var(--section-gap);
}

/* Nested major blocks use the same interval above, without extra top padding. */
.home-page :is(#career-results, #skills-title, .experience) {
  margin-top: var(--section-gap);
  padding-top: 0;
}

/* Learning owns this boundary; the stage keeps its side/bottom padding for docking. */
.home-page > #contact.contact-stage {
  margin-top: 0;
  padding-top: 0;
}

/* Course and book groups are subsections; individual cards retain their own spacing. */
.home-page #learning > .books-intro {
  margin-top: var(--subsection-gap);
  margin-bottom: var(--space-5);
}

@media (min-width: 901px) and (max-height: 700px) {
  .home-page #intro {
    padding-top: var(--space-6);
  }
}

@media (max-width: 900px) {
  .home-page {
    --section-gap: 112px;
    --subsection-gap: 48px;
    --section-title-gap: 32px;
  }

  .home-page #intro {
    min-height: 0;
    padding-top: var(--space-2);
  }
}