diff --git a/src/style.css b/src/style.css
index 36e5ccf..b6c5d6a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -27,6 +27,10 @@
   --ring: hsl(43 64% 50%);
   /* Near-black green of the content panel that floats on the tiled bg. */
   --panel: hsl(151 55% 4%);
+  /* Flat wash layered over the tiled page background to mute it. Dark green
+     rather than pure black so the gutters keep the site's tone. Raise the
+     alpha toward 1 for a quieter background, lower it to let the knot show. */
+  --bg-overlay: hsl(151 60% 3% / 0.62);
   --radius: 0.5rem;
 }
 
@@ -51,6 +55,7 @@
   --input: hsl(151 50% 15%);
   --ring: hsl(43 64% 52%);
   --panel: hsl(151 55% 3%);
+  --bg-overlay: hsl(151 60% 2% / 0.66);
 }
 
 @theme inline {
@@ -90,11 +95,15 @@
   body {
     @apply bg-background text-foreground;
     /* Celtic-knot tile is the page background; it shows in the gutters
-       around the floating content panel (see PageShell). The home page's
-       fixed landscape image sits above this layer, so home is unaffected. */
-    background-image: url('./assets/section-tile.webp');
-    background-repeat: repeat;
-    background-position: center top;
+       around the floating content panel (see PageShell). A flat dark wash
+       (--bg-overlay) is layered on top to mute it. The home page's fixed
+       landscape image sits above this layer, so home is unaffected. */
+    background-image:
+      linear-gradient(var(--bg-overlay), var(--bg-overlay)),
+      url('./assets/section-tile.webp');
+    background-repeat: no-repeat, repeat;
+    background-position: center top, center top;
+    background-size: cover, auto;
     font-family: var(--font-sans);
     font-weight: 300;
   }