src/shared/styles/theme.css

@@ -151,7 +151,12 @@
     outline-offset: 2px;
   }
 
+  /* Background lives on html (not body) so the grain overlay can sit behind
+   * body's content at a negative z-index and still paint against the cream
+   * canvas — with the background on body, a z-index:-1 body::before would hide
+   * behind body's own background instead of showing through the page gaps. */
   html {
+    @apply bg-background;
     font-size: var(--font-size);
     scroll-behavior: smooth;
     /* Reserve scrollbar gutter so locking body scroll (e.g. when a modal
@@ -160,23 +165,24 @@
   }
 
   body {
-    @apply bg-background text-foreground;
+    @apply text-foreground;
     font-family: var(--font-body);
     font-weight: var(--font-weight-body);
     line-height: var(--line-height-tight);
     overflow-x: hidden;
   }
 
-  /* 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. */
+  /* Page-wide blue dot grain. z-index -1 drops it behind body's content so
+   * opaque surfaces (cards, badges, footer) cover it and the grain only shows
+   * through the transparent page gaps; pointer-events: none keeps everything
+   * clickable through it. */
   body::before {
     @apply grain-pattern;
     content: "";
     position: fixed;
     inset: 0;
     pointer-events: none;
-    z-index: 100;
+    z-index: -1;
   }
 
   h1,