Fix crushed mobile header; add Climate to nav (#118)

- Mobile header: the title column was collapsing to a sliver behind the F/C +
  bell + account + hamburger cluster, forcing one-word-per-line text and floating
  the logo at the tall column's center. Give the title (logo + name + tagline) the
  whole first row (flex-basis 0 floored by a min-width so it sits beside the logo,
  not below it) and let the controls wrap to a control bar below; top-align the
  logo with the name. The small lone hamburger on SEO pages still fits the title row.
- Add a Climate link to the interactive view nav so the hamburger reaches the
  city/records section. Account + subscription (bell) icons live in the control bar.

static/calendar.html

@@ -40,6 +40,7 @@
         <a href="calendar" data-view="calendar" class="active">Calendar</a>
         <a href="day" data-view="day">Day</a>
         <a href="compare" data-view="compare">Compare</a>
+        <a href="climate">Climate</a>
       </nav>
       </details>
     </div>

static/compare.html

@@ -41,6 +41,7 @@
         <a href="calendar" data-view="calendar">Calendar</a>
         <a href="day" data-view="day">Day</a>
         <a href="compare" data-view="compare" class="active">Compare</a>
+        <a href="climate">Climate</a>
       </nav>
       </details>
     </div>

static/day.html

@@ -41,6 +41,7 @@
         <a href="calendar" data-view="calendar">Calendar</a>
         <a href="day" data-view="day" class="active">Day</a>
         <a href="compare" data-view="compare">Compare</a>
+        <a href="climate">Climate</a>
       </nav>
       </details>
     </div>

static/index.html

@@ -44,6 +44,7 @@
         <a href="calendar" data-view="calendar">Calendar</a>
         <a href="day" data-view="day">Day</a>
         <a href="compare" data-view="compare">Compare</a>
+        <a href="climate">Climate</a>
       </nav>
       </details>
     </div>

static/legend.html

@@ -40,6 +40,7 @@
         <a href="calendar" data-view="calendar">Calendar</a>
         <a href="day" data-view="day">Day</a>
         <a href="compare" data-view="compare">Compare</a>
+        <a href="climate">Climate</a>
       </nav>
       </details>
     </div>

static/style.css

@@ -1310,10 +1310,15 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
   h1 { font-size: 19px; }
   .tag { font-size: 12px; }
 
-  /* Let the header wrap if the control cluster runs out of room. */
-  .brand { flex-wrap: wrap; }
+  /* The title (logo + name + tagline) claims the whole first row so its text never
+     collapses to a one-word-per-line sliver; the F/C toggle, bell, account and
+     hamburger wrap to a control bar on the row below. (A lone hamburger — the SEO
+     pages, which have no toggle/account — is small enough to stay on the title row.) */
+  .brand { flex-wrap: wrap; align-items: flex-start; row-gap: 12px; }
+  .brand > div:not(.unit-toggle):not(.acct) { flex: 1 1 0; min-width: calc(100% - 92px); }
+  .logo { align-self: flex-start; margin-top: 3px; }
   /* The view navigation collapses into a hamburger dropdown; the F/C toggle, bell
-     and account stay in the header bar beside it. */
+     and account sit in the control bar beside it. */
   /* A real box again (not display:contents) so it's the positioning context for
      the absolute dropdown and holds the hamburger. */
   .nav-menu { display: inline-flex; position: relative; align-self: center; }

static/subscriptions.html

@@ -38,6 +38,7 @@
         <a href="calendar" data-view="calendar">Calendar</a>
         <a href="day" data-view="day">Day</a>
         <a href="compare" data-view="compare">Compare</a>
+        <a href="climate">Climate</a>
       </nav>
       </details>
     </div>