feat: create new grain-pattern utility and use it for body

src/shared/styles/theme.css

@@ -167,30 +167,16 @@
     overflow-x: hidden;
   }
 
-  /* Subtle blue-tinted grain on parchment */
+  /* Page-wide blue dot grain overlay. z-index 100 puts it above the footer
+   * (z-50) so the grain reads as continuous across the entire viewport;
+   * pointer-events: none keeps everything clickable through it. */
   body::before {
+    @apply grain-pattern;
     content: "";
     position: fixed;
     inset: 0;
-    background-image:
-      repeating-linear-gradient(
-        0deg,
-        transparent,
-        transparent 2px,
-        rgba(4, 28, 243, 0.015) 2px,
-        rgba(4, 28, 243, 0.015) 4px
-      ),
-      repeating-linear-gradient(
-        90deg,
-        transparent,
-        transparent 2px,
-        rgba(4, 28, 243, 0.015) 2px,
-        rgba(4, 28, 243, 0.015) 4px
-      );
-    opacity: 0.6;
-    display: block;
     pointer-events: none;
-    z-index: 1;
+    z-index: 100;
   }
 
   h1,
@@ -281,6 +267,12 @@
 @utility brutal-outline {
   outline: var(--border-width) solid var(--blue);
 }
+/* Tiled blue dot pattern — applied to body::before (page-wide) and reusable
+ * on any surface that should share the same paper-grain texture. The SVG
+ * tile is rasterized once and composited cheaply via repeating background. */
+@utility grain-pattern {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23041cf3' opacity='0.10'/%3E%3C/svg%3E");
+}
 /* Apply Fraunces variable axes to non-heading elements using the heading font */
 .font-wonk {
   font-variation-settings: