diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css
index e8ec9c8..3b20f5f 100644
--- a/make_post_sell/static/css/common.css
+++ b/make_post_sell/static/css/common.css
@@ -1713,6 +1713,56 @@ textarea.markup-editor-textarea {
     }
 }
 
+/* Cinema mode base — applies at every viewport size. Desktop
+   (>=960px) enhances it to the 2-column layout. Narrow viewports
+   stack everything in a single column so cinema doesn't collapse
+   into natural block flow (which caused the "wasted whitespace"
+   state between 800px and 960px when nothing owned the layout). */
+section.two-column.cinema-mode {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-areas:
+        "images"
+        "description"
+        "comments"
+        "purchase";
+    gap: 16px;
+    max-width: 100%;
+    padding-left: 8px;
+    padding-right: 8px;
+    align-items: start;
+}
+
+section.two-column.cinema-mode .watch-left {
+    display: contents;
+}
+
+section.two-column.cinema-mode .product-images { grid-area: images; }
+section.two-column.cinema-mode .product-description { grid-area: description; }
+section.two-column.cinema-mode .product-comments { grid-area: comments; }
+section.two-column.cinema-mode section.product-right { grid-area: purchase; }
+
+section.two-column.cinema-mode .watch-video-container {
+    max-height: 92vh;
+}
+
+/* Cinema video/cover fills horizontal space. Intentional override
+   of the CLAUDE.md media-sizing rule — cinema wants edge-to-edge
+   even if viewport aspect ratio forces a little letterbox.
+   object-fit:contain keeps aspect ratio safe. */
+section.two-column.cinema-mode .product-main,
+section.two-column.cinema-mode .watch-video-container > video,
+section.two-column.cinema-mode .watch-audio-container > .product-main {
+    width: 100%;
+    height: auto;
+    max-width: 100%;
+    max-height: 92vh;
+    object-fit: contain;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
 /*************************************************************
  *
  * for displays bigger than 800px which are "desktop-ish".
@@ -1792,51 +1842,18 @@ textarea.markup-editor-textarea {
         align-self: start;
     }
 
-    /* Cinema mode: video spans viewport, Up Next + Download row under
-       video, side-by-side with comments. Unwraps .watch-left via
-       display:contents so its children become direct grid items. */
+    /* Desktop cinema enhancement — description + comments beside ring.
+       The base cinema rules live outside any media query so narrow
+       viewports also get a sensible single-column stack. */
     section.two-column.cinema-mode {
-        max-width: 100%;
-        padding-left: 20px;
-        padding-right: 20px;
         grid-template-columns: 2fr 1fr;
         grid-template-areas:
             "images      images"
             "description purchase"
             "comments    purchase";
         gap: 24px;
-        align-items: start;
-    }
-
-    section.two-column.cinema-mode .watch-left {
-        display: contents;
-    }
-
-    section.two-column.cinema-mode .product-images { grid-area: images; }
-    section.two-column.cinema-mode .product-description { grid-area: description; }
-    section.two-column.cinema-mode .product-comments { grid-area: comments; }
-    section.two-column.cinema-mode section.product-right { grid-area: purchase; }
-
-    /* Cinema: video/cover actually fills horizontal space. Intentional
-       override of the CLAUDE.md media-sizing rule (width:auto + max-h) —
-       that rule prevents letterbox whitespace, but cinema explicitly
-       trades a little letterboxing on extra-wide viewports for real
-       edge-to-edge video. object-fit:contain keeps aspect ratio safe. */
-    section.two-column.cinema-mode .watch-video-container {
-        max-height: 92vh;
-    }
-
-    section.two-column.cinema-mode .product-main,
-    section.two-column.cinema-mode .watch-video-container > video,
-    section.two-column.cinema-mode .watch-audio-container > .product-main {
-        width: 100%;
-        height: auto;
-        max-width: 100%;
-        max-height: 92vh;
-        object-fit: contain;
-        display: block;
-        margin-left: auto;
-        margin-right: auto;
+        padding-left: 20px;
+        padding-right: 20px;
     }
 
     /* if we have room, break markup-editor into 2 columns */