/* A faint kitchen-notebook grid pinned to the screen, shared by every page.
   A noise mask sets its strength, so it shows clearly in some places and
   fades out in others; the noise drifts slowly so the grid comes and goes.
   /assets/grid.js sets --grid-noise to a freshly seeded noise on each visit,
   redraws the grid on a canvas (.grid-bg) that bends away from the mouse,
   and sets html.grid-live to drop this CSS copy. --grid-wave (the tomato
   accent, as a hex colour) tints the ring that spreads from a click. */

:root { --grid-line: #c4a982; --grid-wave: #c8553d; }

:root[data-theme="dark"] { --grid-line: #45372d; --grid-wave: #eb624c; }

body:before, .grid-bg {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 28px 28px;
  opacity: .5;
  -webkit-mask: var(--grid-noise, url(/assets/img/grid-noise-v5.svg)) 0 0 / 160vmax 160vmax;
  mask: var(--grid-noise, url(/assets/img/grid-noise-v5.svg)) 0 0 / 160vmax 160vmax;
  animation: grid-drift 90s ease-in-out infinite alternate;
}
.grid-live body:before { content: none; }
.grid-bg { background: none; }
@keyframes grid-drift {
  to {
    -webkit-mask-position: 100% 100%;
    mask-position: 100% 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  body:before, .grid-bg { animation: none; }
}