/*
 * Gutter hatching: a very faint 45° architectural hatch in the left and right gutters, the space
 * between the screen edge and every frame's outer line (--gutter, atn-system.css; wider where the
 * 2300px frame stops growing). Site-wide, linked from src/layouts/BaseLayout.astro.
 *
 * Like the film grain (grain.css), it sits behind the content (z-index -1, above the body's own
 * background), so it shows only on the plain page in the gutters: full-width surfaces (banners,
 * the footer, bars) cover it.
 */
:root {
  --hatch-color: rgba(255, 255, 255, .055);
  --hatch-spacing: 7px;
}

body::after {
  --hatch-width: max(var(--gutter), calc((100% - 2300px) / 2 + var(--gutter)));
  --hatch: repeating-linear-gradient(-45deg, var(--hatch-color) 0 1px, transparent 1px var(--hatch-spacing));
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--hatch), var(--hatch);
  background-size: var(--hatch-width) 100%, var(--hatch-width) 100%;
  background-position: left top, right top;
  background-repeat: no-repeat;
}