/* =====================================================================
   AltGent_ HUD grid backdrop — the same fading grid as the page loader,
   so the loader's reveal flows straight into the page.
   Markup (right after .grain):  <div class="pageGrid" aria-hidden="true"></div>
   The grid stays fixed while the content scrolls over it.
   Where the grid is strongest is set per page with:
     --gx / --gy  centre of the visible area (default: the left content column)
     --gw / --gh  size of the visible area before it fades out
   Override in a page with higher specificity, e.g.  body .pageGrid{--gx:50%}
   ===================================================================== */
.pageGrid{--gw:46%;--gh:88%;--gx:20%;--gy:50%;
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line,#dcd8cd) 1px,transparent 1px),linear-gradient(90deg,var(--line,#dcd8cd) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask:radial-gradient(ellipse var(--gw) var(--gh) at var(--gx) var(--gy),#000 0,#000 32%,transparent 100%);
          mask:radial-gradient(ellipse var(--gw) var(--gh) at var(--gx) var(--gy),#000 0,#000 32%,transparent 100%)}
/* stacked / mobile layouts: centred near the top, where the intro block sits */
@media(max-width:1100px){.pageGrid{--gw:90%;--gh:60%;--gx:50%;--gy:32%}}