Fold the mobile header into a single hamburger menu (#119)

On phones the header spanned two rows: the title block plus a control bar of
the °F/°C toggle, bell, account and hamburger. Wrap the nav in a .nav-panel
inside the <details> menu and inject the °F/°C toggle and account/bell into that
panel instead of into the header row. On desktop the panel is display:contents,
so the inline top bar renders exactly as before (order restored via flex order);
on phones the panel becomes a right-anchored, viewport-clamped dropdown and the
header collapses to a single row (logo + name + hamburger, tagline hidden).

The viewport clamp also fixes the SEO/city pages, whose menu dropdown previously
ran off-screen.

templates/base.html.j2

@@ -33,12 +33,14 @@
       </div>
       <details class="nav-menu">
         <summary class="nav-toggle" aria-label="Menu"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></summary>
+        <div class="nav-panel">
         <nav class="view-nav" aria-label="Views">
         <a href="{{ base }}/">Weekly</a>
         <a href="{{ base }}/calendar">Calendar</a>
         <a href="{{ base }}/compare">Compare</a>
         <a href="{{ base }}/climate"{% if section == 'climate' %} class="active"{% endif %}>Climate</a>
       </nav>
+        </div>
       </details>
     </div>
   </header>