diff --git a/components/Layout.js b/components/Layout.js
index 818d5a8..7c6c017 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -607,7 +607,7 @@ export default function Layout({ children, user = null, showSearch = false }) {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   return (
-    <div className="flex h-screen" style={{ backgroundColor: 'var(--bg-primary)' }}>
+    <div className="flex h-screen">
       {/* Mobile Navigation - Bottom bar for mobile */}
       <MobileNavigation 
         onMenuOpen={() => setIsMobileMenuOpen(true)} 
diff --git a/styles/globals.css b/styles/globals.css
index 03a604a..fe0f71d 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -202,21 +202,34 @@ body {
 body {
   background-color: var(--bg-primary-light);
   background-image:
+    /* Bright ember pool, bottom-left — the "seat of the fire". */
     radial-gradient(
-      ellipse 80% 60% at 15% 100%,
-      rgba(255, 128, 0, 0.08) 0%,
-      rgba(255, 128, 0, 0.02) 40%,
-      transparent 70%
+      ellipse 70% 50% at 12% 105%,
+      rgba(255, 100, 0, 0.28) 0%,
+      rgba(255, 128, 0, 0.14) 30%,
+      rgba(255, 171, 64, 0.04) 60%,
+      transparent 80%
     ),
+    /* Secondary ember, bottom-right — keeps the warmth from feeling
+       lopsided on wide displays. */
     radial-gradient(
-      ellipse 60% 50% at 85% 0%,
-      rgba(255, 171, 64, 0.06) 0%,
-      transparent 60%
+      ellipse 55% 45% at 95% 100%,
+      rgba(255, 140, 30, 0.18) 0%,
+      rgba(255, 171, 64, 0.05) 50%,
+      transparent 75%
     ),
+    /* Soft gold glow, top-right — the "smoke catching last light". */
+    radial-gradient(
+      ellipse 55% 45% at 90% -5%,
+      rgba(255, 171, 64, 0.16) 0%,
+      transparent 65%
+    ),
+    /* Base wash: cooler at top, warmer at bottom for fireplace ambient. */
     linear-gradient(
       180deg,
       rgba(254, 252, 248, 1) 0%,
-      rgba(252, 246, 235, 1) 100%
+      rgba(252, 244, 230, 1) 60%,
+      rgba(250, 238, 220, 1) 100%
     );
   background-attachment: fixed;
   color: var(--text-primary-light);
@@ -226,20 +239,25 @@ body {
   background-color: var(--bg-primary-dark);
   background-image:
     radial-gradient(
-      ellipse 80% 60% at 15% 100%,
-      rgba(255, 128, 0, 0.16) 0%,
-      rgba(255, 128, 0, 0.04) 40%,
+      ellipse 70% 50% at 12% 105%,
+      rgba(255, 100, 0, 0.32) 0%,
+      rgba(255, 128, 0, 0.16) 30%,
       transparent 70%
     ),
     radial-gradient(
-      ellipse 60% 50% at 85% 0%,
-      rgba(124, 58, 237, 0.08) 0%,
-      transparent 60%
+      ellipse 55% 45% at 95% 100%,
+      rgba(255, 140, 30, 0.18) 0%,
+      transparent 70%
+    ),
+    radial-gradient(
+      ellipse 55% 45% at 90% -5%,
+      rgba(124, 58, 237, 0.14) 0%,
+      transparent 65%
     ),
     linear-gradient(
       180deg,
       rgba(26, 15, 10, 1) 0%,
-      rgba(38, 22, 14, 1) 100%
+      rgba(42, 24, 16, 1) 100%
     );
   background-attachment: fixed;
   color: var(--text-primary-dark);