.page-shell {
  width: var(--shell);
  margin-left: auto;
  margin-right: auto;
}

.section-padding {
  /* Only top — adjacent sections share one --section-y gap (not double) */
  padding-top: var(--section-y);
  padding-bottom: 0;
}

/* The navbar is fixed, so whatever opens a page has to clear it itself. On
   phones --section-y (60px) is shorter than the navbar, which left the first
   heading tucked underneath with no visible gap. The homepage is unaffected
   because it opens with .hero, which sets its own offset. */
main > .section-padding:first-child {
  padding-top: max(var(--section-y), calc(var(--nav-h) + var(--gap)));
}