/* Technical-drawing grid, after haoqi.design's fixed overlay.

   Theirs: position fixed, inset 0, pointer-events none, z-20,
   mix-blend-mode: difference, with an SVG whose viewBox tracks the viewport 1:1
   so every line lands on a whole pixel. 1px strokes at rgba(255,255,255,0.1),
   a 24px break in each line at every intersection, and a brighter 12px
   crosshair marking the crossing. Redrawn by grid-overlay.js on resize.

   Aligned here to this page's own content column — the Apple-capped, centred
   measure — rather than their fixed 56px margin, so the lines mark where this
   layout actually breaks.

   Two departures from the reference: it sits BEHIND the content (above the film,
   under the type) instead of over everything, and it paints normally in flat
   white rather than blending in `difference`. */

.grid-overlay {
  position: fixed;
  inset: 0;
  /* Same level as .film-stage, later in the DOM — so it paints over the film.
     The content carries z-index 1 and stays above it. */
  z-index: 0;
  pointer-events: none;
}

.grid-overlay svg {
  display: block;
  width: 100%;
  height: 100%;
  shape-rendering: crispEdges;
}

.grid-overlay__line {
  stroke: var(--grid-line);
  stroke-width: 1;
  fill: none;
}

.grid-overlay__mark {
  stroke: var(--grid-mark);
  stroke-width: 1;
  fill: none;
}

/* Continuous camera motion plus a blended overlay is a lot at once. The grid is
   decorative, so reduced motion simply drops it. */
@media (prefers-reduced-motion: reduce) {
  .grid-overlay { display: none; }
}