Improve the mobile header experience

This is spun off from #220, which raised the broader topic of a less-than-ideal mobile experience. This issue narrows in on **the header (top bar) specifically** and how it behaves on small / phone-sized viewports. As we've started seeing great-docs sites in the wild on mobile (e.g., the PyMC Labs docs referenced in #220), and the header is one of the first things a visitor encounters. On a phone it currently doesn't make great use of the limited vertical and horizontal space, which pushes the actual page content further down and makes the first impression feel a bit cramped. Here are some of the problems to address: - wasted vertical space on load. The header (and the auxiliary navigation that stacks beneath it) occupies a large share of the viewport before any page content is visible. On a phone, the reader should land on content much sooner. - cramped/overflowing header contents. Title, search, theme toggle, version selector, and any social/repo links compete for a single narrow row and wrap or bunches up awkwardly I think a few things are needed here: (1) make the header as compact as reasonable on small viewports so content appears nearer the top of the page, (2) consider collapsing secondary header items (search, version, links) behind a menu/icon on narrow widths instead of laying them all out inline, (3) optionally allow the header to shrink or hide on scroll-down and reappear on scroll-up, so it doesn't permanently consume vertical space while reading, and (4) ensure tap targets in the header meet a comfortable minimum size for touch. So the acceptance criteria boils down to this: - on a phone-width viewport (~375–430px), page content is visible higher up on initial load - header items no longer wrap or overflow awkwardly at narrow widths - sidebar and page navigation remains easily reachable from the header via a clear affordance - behavior degrades gracefully across phone, tablet, and desktop breakpoints