/* Drop menu: a full-screen panel whose bottom edge sweeps down from the top, with the burger scrubbed alongside.
   Markup: <button class="dmenu-btn" aria-controls="menu" aria-expanded="false" aria-label="Menu"></button>
           <div class="dmenu" id="menu"> ...your links... </div>
   The panel's content sits still; only its height grows, so the edge uncovers it like a blind coming down. */
.dmenu {
  --dmenu-bg: #1f4d3a;
  --dmenu-ink: #f4efe2;
  --dmenu-z: 900;
  position: fixed; top: 0; right: 0; left: 0;
  height: 0; overflow: hidden;
  display: none;
  z-index: var(--dmenu-z);
  background: var(--dmenu-bg); color: var(--dmenu-ink);
}
.dmenu.is-shown { display: block; }
.dmenu > * { min-height: 100vh; min-height: 100svh; }   /* lay the content out at full size from the first frame */

.dmenu-btn {
  --dmenu-icon: 2rem;
  --dmenu-bar: 3;                   /* stroke width in the 32-unit icon box */
  display: inline-grid; place-items: center;
  width: calc(var(--dmenu-icon) + 1rem); aspect-ratio: 1;
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dmenu-btn svg.dmenu-burger { width: var(--dmenu-icon); height: var(--dmenu-icon); overflow: visible; }
.dmenu-burger line { stroke: currentColor; stroke-width: var(--dmenu-bar); stroke-linecap: round; }
.dmenu-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 50%; }