diff --git a/app/globals.css b/app/globals.css
index f5d1384..38200e4 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1090,6 +1090,14 @@ a.underline-brutal:hover .arrow {
   transform: translate3d(0, 0, 0);
 }
 
+/* Floor matches the phone cap (380px) so the panel never shrinks
+   across the 768px crossover. */
+@media (min-width: 768px) {
+  .mm-panel {
+    width: clamp(380px, 48vw, 520px);
+  }
+}
+
 .mm-head {
   display: flex;
   align-items: center;
@@ -1237,10 +1245,10 @@ a.underline-brutal:hover .arrow {
   }
 }
 
-/* Phones only. Gated in CSS instead of Tailwind's md:hidden because
+/* Phones and tablets. Gated in CSS instead of Tailwind's xl:hidden because
    these custom rules are unlayered and would beat the utilities layer,
    leaking the toggle onto desktop. */
-@media (min-width: 768px) {
+@media (min-width: 1280px) {
   .mm-toggle,
   .mm-overlay,
   .mm-panel {
diff --git a/components/site/Chrome.tsx b/components/site/Chrome.tsx
index 4323ef1..3b14861 100644
--- a/components/site/Chrome.tsx
+++ b/components/site/Chrome.tsx
@@ -166,7 +166,7 @@ export function Chrome() {
           <span className="meta hidden opacity-70 sm:inline">labs</span>
         </Link>
 
-        <ul className="hidden items-center gap-7 md:flex">
+        <ul className="hidden items-center gap-7 xl:flex">
           {NAV.map((item) => {
             const isActive = active === item.id;
             return (
@@ -187,14 +187,14 @@ export function Chrome() {
         <div className="col-start-3 flex items-center gap-5 justify-self-end">
           <a
             href={links.docs}
-            className="meta hidden items-center gap-2 no-underline border-b border-current pb-[2px] md:flex"
+            className="meta hidden items-center gap-2 no-underline border-b border-current pb-[2px] xl:flex"
           >
             <span>Docs</span>
             <span aria-hidden>→</span>
           </a>
           <Link
             href={links.blog}
-            className="meta hidden items-center gap-2 no-underline border-b border-current pb-[2px] md:flex"
+            className="meta hidden items-center gap-2 no-underline border-b border-current pb-[2px] xl:flex"
           >
             <span>Blog</span>
             <span aria-hidden>→</span>
@@ -203,8 +203,7 @@ export function Chrome() {
             href={links.litepaper}
             target="_blank"
             rel="noopener noreferrer"
-            className="meta hidden items-center gap-2 no-underline md:flex"
-            style={{ borderBottom: "1px solid currentColor", paddingBottom: 2 }}
+            className="meta hidden items-center gap-2 no-underline border-b border-current pb-[2px] xl:flex"
           >
             <span>Litepaper</span>
             <span aria-hidden>→</span>
diff --git a/components/site/MobileMenu.tsx b/components/site/MobileMenu.tsx
index 06c28bf..d50dc19 100644
--- a/components/site/MobileMenu.tsx
+++ b/components/site/MobileMenu.tsx
@@ -249,11 +249,11 @@ export function MobileMenu({ activeSection, tone, onOpenChange }: Props) {
     wasOpenRef.current = open;
   }, [open]);
 
-  // Close on resize to desktop. Without this the CSS hides the panel
-  // but `open` stays true, leaving body scroll locked and the nav
-  // stuck in forced-paper tone.
+  // Close on resize to desktop (≥1280px, matches the CSS gate).
+  // Without this the CSS hides the panel but `open` stays true,
+  // leaving body scroll locked and the nav stuck in forced-paper tone.
   useEffect(() => {
-    const mql = window.matchMedia("(min-width: 768px)");
+    const mql = window.matchMedia("(min-width: 1280px)");
     const onChange = (e: MediaQueryListEvent) => {
       if (e.matches) setOpen(false);
     };