/* The header on phones, for every page.
   Each page carries its own copy of the header styles inline, so this file is
   the one place the phone size lives. It is linked after each page's <style>
   block, which is what lets these rules win at equal specificity. Everything
   is about 75% of the desktop header (72px bar, 59px logo, 20px wordmark),
   and --nav-h drives the page padding under the fixed bar, so that follows. */
@media (max-width: 720px) {
  :root { --nav-h: 54px; }
  nav { height: var(--nav-h); }
  .nav-logo { gap: 9px; }
  .nav-logo-img { height: 44px; max-width: 158px; top: 1px; }
  .nav-logo-text { font-size: 15px; top: 1px; }
  /* The menu button is a 44px box; its three lines otherwise sit at the top of it. */
  .hamburger { justify-content: center; align-items: center; }
}