/* One vertical rhythm for every chapter on every page.
   --chapter-y is the breathing room above and below a chapter's content:
   80px on phones, 144px at 1440 wide (same as the Philosophy chapters). */
:root { --chapter-y: clamp(5rem, 11vw, 9rem); }
.where-intro, .moves, .team, .contact, .svc-pool, .svc-model { padding-block: var(--chapter-y); }
.where-intro, .contact { min-height: 0; }
.svc-pool { padding-bottom: calc(var(--chapter-y) + 1.8rem); }
.team .experience { padding-block: clamp(3rem, 5vw, 4.5rem) 0; }

/* Homepage hero: same top and bottom breathing room as Philosophy (desktop; phones keep image-first spacing) */
@media (min-width: 721px) { main .hero.shell { padding-top: clamp(5rem, 11vw, 10rem); padding-bottom: clamp(2rem, 5vw, 4rem); } }

/* Phones: homepage hero gets Philosophy's breathing room above the first element */
@media (max-width: 720px) { main .hero.shell { padding-top: 3rem; padding-bottom: 2rem; } }

/* Phones (.gov feel): 24px side gutters and 120px between chapters, a bit roomier than Philosophy's 80 so every page breathes */
@media (max-width: 720px) {
  :root { --shell: calc(100vw - 3rem); --chapter-y: 7.5rem; }
  .where-intro { min-height: 60svh; }
  .moves-head { margin-bottom: 3.5rem; }
  .journal-list { padding-bottom: var(--chapter-y); }
}