/* Section layout.
   Scrolling is natural at every viewport size — the page never jacks
   the wheel or snaps to section boundaries on its own. The only thing
   that lands exactly on a section is an explicit nav click, via the
   scrollIntoView({ behavior: "smooth" }) calls in navbar.js/about.js;
   scroll-behavior: smooth below is what makes those landings animate
   instead of jumping.
   --navbar-h is measured from the real rendered navbar
   (src/components/navbar.js) and kept in sync on resize; the value here
   is only a first-paint fallback before that JS runs. */

:root {
  --navbar-h: 4.5rem;
}

html {
  scroll-behavior: smooth;
}

.section {
  min-height: calc(100svh - var(--navbar-h));
  scroll-margin-top: var(--navbar-h);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  /* Reference mockups (About, Contact) anchor content near the top of
     the section with a modest bottom margin, not vertically centered. */
  justify-content: flex-start;
}

@media (max-width: 640px) {
  .section {
    padding-block: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}