Sticky ribbon + logo/nav on desktop scroll

Wraps ribbon and nav-grid in .sticky-header div inside section.main.
Desktop only (min-width: 800px) — sticks to top on scroll, eliminates
whitespace gap above sticky video. No change on mobile/tablet.

make_post_sell/static/css/common.css

@@ -1593,6 +1593,14 @@ textarea.markup-editor-textarea {
         display: block;
     }
 
+    /* Sticky header: ribbon + nav stick together on desktop */
+    .sticky-header {
+        position: sticky;
+        top: 0;
+        z-index: 40;
+        background: var(--bg-primary, #ffffff);
+    }
+
     section.log-in {
         text-align: right;
     }

make_post_sell/templates/base.j2

@@ -85,9 +85,10 @@
 <noscript>
   <style>.js-only {display: none;}</style>
 </noscript>
-{% include 'snippets/ribbon.j2' %}
 <section class="main">
 
+  <div class="sticky-header">
+  {% include 'snippets/ribbon.j2' %}
   <section class="nav-grid">
 
     <section class="nav">
@@ -143,6 +144,7 @@
 
   <!-- nav-grid -->
   </section>
+  </div>
 
 {% include 'snippets/flash-alerts.j2' %}