/*
 * Graph-paper background — applied globally to all pages.
 *
 * Physical-to-pixel mapping:
 *   At the standard 96 DPI screen resolution, 1 mm ≈ 3.78 px.
 *   Therefore 5 mm ≈ 18.9 px, rounded to 19 px.
 *   Adjust --grid-size if you target a different density (e.g. 20 px for
 *   a slightly looser look, or 38 px to emulate 10 mm spacing).
 *
 * To tweak the grid, override these custom properties in your own :root {}
 * or any selector:
 *   --grid-size        Minor grid spacing (default 19px ≈ 5 mm at 96 DPI)
 *   --grid-color       Minor line color    (default: very faint warm brown)
 *   --grid-color-major Major line color    (every 5 minor squares ≈ 25 mm)
 *   --grid-bg          Page background color
 */
:root {
  /* ~5 mm at 96 DPI — change to suit your target device density */
  --grid-size: 19px;

  /* Subtle warm-brown lines that complement the cream palette */
  --grid-color: rgba(58, 42, 31, 0.07);
  --grid-color-major: rgba(58, 42, 31, 0.14);

  /* Falls back to the site's --cream if defined; hard-coded otherwise */
  --grid-bg: var(--cream, #f5edd8);
}

html,
body {
  /*
   * Graph-paper pattern built from four repeating-linear-gradient layers:
   *   1 & 2: major grid lines every 5 × --grid-size  (≈ 25 mm)
   *   3 & 4: minor grid lines every     --grid-size  (≈  5 mm)
   *
   * Each gradient draws a single 1-pixel-wide line at the end of every
   * repeated tile, producing an infinite grid with zero images.
   */
  background-color: var(--grid-bg);
  background-image:
    /* Major horizontal lines */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent calc(5 * var(--grid-size) - 1px),
      var(--grid-color-major) calc(5 * var(--grid-size) - 1px),
      var(--grid-color-major) calc(5 * var(--grid-size))
    ),
    /* Major vertical lines */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent calc(5 * var(--grid-size) - 1px),
      var(--grid-color-major) calc(5 * var(--grid-size) - 1px),
      var(--grid-color-major) calc(5 * var(--grid-size))
    ),
    /* Minor horizontal lines */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent calc(var(--grid-size) - 1px),
      var(--grid-color) calc(var(--grid-size) - 1px),
      var(--grid-color) var(--grid-size)
    ),
    /* Minor vertical lines */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent calc(var(--grid-size) - 1px),
      var(--grid-color) calc(var(--grid-size) - 1px),
      var(--grid-color) var(--grid-size)
    );
}