/* ==========================================================================
   background.css
   Site-wide background layer. Sits BELOW every section (z-index: -1) on a
   fixed full-viewport <div id="site-bg">. Sections keep their own
   background-color/gradients on top; this only shows through any
   transparent gaps and gives the whole page a consistent base texture.
   Load this AFTER variables.css and BEFORE base.css/layout.css so later
   section background-colors still paint over it normally wherever a
   section is opaque.
   ========================================================================== */

#site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #ffffff;
  background-image: url("../images/bg-pattern.svg");
  background-repeat: repeat;
  background-size: 480px 480px;
  background-position: center top;
}

/* Slightly larger tile + gentle parallax-less fade on small screens keeps the
   pattern from feeling too busy behind dense mobile text. */
@media (max-width: 600px) {
  #site-bg {
    background-size: 360px 360px;
    opacity: 0.85;
  }
}