/* ============================================================
   Viewport-unit convention (keep consistent across the codebase)
   ------------------------------------------------------------
   Mobile browsers show/hide their URL bar on scroll, which changes
   the viewport height. `100vh` reacts to this and causes layout
   jumps — especially nasty with scroll-snap, which re-aligns its
   targets mid-scroll.
       lvh → scroll-snap zones and their absolute overlays.
              Zone height stays constant at the LARGEST viewport,
              so snap points don't move. Trade-off: when the URL
              bar is visible the bottom sliver of a zone sits
              behind it, which is natural and brief.
       svh → panels that must always fully fit (hero that can't
              crop, full-viewport mobile menu, body min-height).
              Zone height stays constant at the SMALLEST viewport
              so content is never hidden behind the URL bar.
       vh  → fallback only. Always declared on the line ABOVE
              the lvh / svh rule for browsers pre-2022 (iOS < 15.4).
       dvh → do not use. Per-frame reflow is the problem we're
              solving, not an acceptable solution.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

/* Touch devices: disable mandatory snap. iOS Safari's momentum scrolling
   fights the JS escape-hatch in animations.js, causing users to be pulled
   back to the top of the bento section when scrolling past it. */
@media (pointer: coarse) {
  html {
    scroll-snap-type: none;
  }
}

body {
  min-height: 100vh;
  min-height: 100svh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  line-height: 1.1;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}