diff --git a/tonalmine/stylesheets/mobile.css b/tonalmine/stylesheets/mobile.css
index dd56f2c..54fafee 100644
--- a/tonalmine/stylesheets/mobile.css
+++ b/tonalmine/stylesheets/mobile.css
@@ -46,13 +46,35 @@
     mask: url(../images/menu.svg) center / 24px no-repeat;
   }
 
-  /* Flyout: navigation drawer */
+  /* Flyout: M3 modal navigation drawer. It slides over the page behind a scrim instead of
+     core's push, which shoves page and header off screen. Tapping the scrim hits #main,
+     which core's responsive.js already binds to close the flyout. */
+  html.flyout-is-active :is(#wrapper, #header) { inset-inline-end: 0; }
   html .flyout-menu {
+    position: fixed;
+    inset-block: 0;
+    z-index: 10001; /* over core's fixed header (9999) and the scrim */
+    block-size: auto;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    visibility: hidden;
+    transition: inset-inline-end 250ms cubic-bezier(0.2, 0, 0, 1), visibility 250ms;
+    border-start-start-radius: var(--md-sys-shape-corner-large);
+    border-end-start-radius: var(--md-sys-shape-corner-large);
+    box-shadow: var(--md-sys-elevation-level1);
     background-color: var(--md-sys-color-surface-container-low);
     color: var(--md-sys-color-on-surface);
     padding-inline: 12px;
     box-sizing: border-box;
   }
+  html.flyout-is-active .flyout-menu { inset-inline-end: 0; visibility: visible; }
+  html.flyout-is-active #main::after {
+    content: '';
+    position: fixed;
+    inset: 0;
+    z-index: 10000;
+    background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
+  }
   html .flyout-menu h3 {
     block-size: auto;
     margin-block: 16px 4px;