src/styles/layout.css

@@ -31,6 +31,23 @@
   min-height: 0;
 }
 
+/* 761px to 1000px: the feed spans the full height on the left; the account and
+   search panels stack over the featured and trending panels on the right. */
+@container app (max-width: 1000px) and (min-width: 761px) {
+  .bento {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 300px;
+    grid-template-rows: auto minmax(0, 1fr);
+    overflow: hidden;
+  }
+  .bento-center { grid-column: 1; grid-row: 1 / 3; height: 100%; }
+  .bento-left { grid-column: 2; grid-row: 1; }
+  .bento-right { grid-column: 2; grid-row: 2; overflow-y: auto; overscroll-behavior: contain; }
+  .bento-left .expert-search { flex: 0 1 auto; max-height: 250px; }
+  .bento-right .rail-trending { flex: 1 0 200px; }
+  .bento .account-live { display: none; }
+}
+
 /* 1001px to 1180px: three columns, narrower sides. */
 @container app (min-width: 1001px) {
   .bento {
@@ -103,8 +120,8 @@
 .feed .composer { margin: 0 14px 4px; }
 .feed .feed-list { display: flex; flex-direction: column; gap: 16px; padding: 16px 14px 32px; }
 
-/* Single-column fallback (below 1001px): lists get a usable height. */
-@container app (max-width: 1000px) {
+/* Single-column fallback (760px and below, until the Mobile milestone): lists get a usable height. */
+@container app (max-width: 760px) {
   .bento-col .panel { flex: 0 0 auto; }
   .bento-col .panel-scroll { flex: 0 0 auto; max-height: 70vh; }
 }