diff --git a/frontend/styles.css b/frontend/styles.css
index a38d9c0..fd9e304 100755
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -2877,7 +2877,6 @@ html[data-layout="liturgical"] body::before {
   background: radial-gradient(900px 600px at 0% 0%, rgba(139, 38, 29, 0.04), transparent 60%);
 }
 html[data-layout="liturgical"] body::after { opacity: 0.008; }
-html[data-layout="liturgical"] .app { grid-template-columns: 300px 1fr; }
 /* Keep video player dark */
 html[data-layout="liturgical"] #video,
 html[data-layout="liturgical"] .video-wrap,
@@ -2929,7 +2928,6 @@ html[data-layout="living-hymnal"] body::before {
     radial-gradient(900px 600px at 18% -10%, rgba(99, 102, 241, 0.08), transparent 60%),
     radial-gradient(700px 500px at 100% 110%, rgba(99, 102, 241, 0.04), transparent 55%);
 }
-html[data-layout="living-hymnal"] .app { grid-template-columns: 220px 1fr; }
 
 /* --- Sunday Broadcaster ----------------------------------------------------
  * Near-black with crimson/rose accent for a live-broadcast feel.
@@ -3026,3 +3024,11 @@ html[data-layout="bento-hub"] .topbar {
   border-bottom-color: var(--line);
 }
 
+/* Grid-column overrides only apply on screens wide enough for an inline sidebar
+   (≥861px). Below that the sidebar is position:fixed (out of grid flow) so
+   a two-column grid would leave .main stranded in the narrow first column. */
+@media (min-width: 861px) {
+  html[data-layout="liturgical"] .app { grid-template-columns: 300px 1fr; }
+  html[data-layout="living-hymnal"] .app { grid-template-columns: 220px 1fr; }
+}
+