/* ---------- homepage background ----------
   Gradient runs from --home-gradient-start at y=0 to --home-gradient-end
   at y=--home-gradient-stop (1590px). Below that point the flat end
   color continues for the rest of the page, however tall it grows.

   This only works because background-size is pinned to a fixed height
   (not "auto"/percentage) — otherwise the browser stretches the
   gradient to the full background area and the 1590px stop would
   rescale with page length instead of staying fixed. background-color
   underneath is what actually carries the flat color past the
   gradient's bottom edge, since the gradient image itself doesn't
   repeat or extend below its own box.

   html gets the exact same background as body: on trackpad/touch
   rubber-band overscroll, the bounce area (top OR bottom) briefly
   reveals whatever's behind body. A single flat color can't be right
   at both ends — the top bounce needs the gradient's start color and
   the bottom bounce needs its end color — so html mirrors the whole
   gradient+flat-color combo instead of just one fallback color. */
html,
body.home{
  background-color: var(--home-gradient-end);
  background-image: linear-gradient(to bottom, var(--home-gradient-start) 0%, var(--home-gradient-end) 100%);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% var(--home-gradient-stop);
}

/* the rubber-band/overscroll bounce (trackpad or touch, scrolling past
   either end of the page) exposes space OUTSIDE html's own box — a
   region no background-color/image on html can paint correctly for
   both ends at once (one flat color can't be right at the top AND the
   bottom). Disabling the bounce itself sidesteps the mismatch
   entirely instead of chasing an unwinnable color match. */
html{
  overscroll-behavior-y: none;
}