Add an Alerts page to the nav with a "what are alerts" explainer (#153)

Put Alerts in the main navigation (after Climate) across the interactive pages
and the SEO/climate pages, so it's a discoverable entry point rather than only the
header bell. The bell stays; this is an additional way in.

The signed-out /alerts gate now leads with a clear "What are weather alerts?"
explainer — what they do, how the percentile threshold works, and an example —
above the sign-in / create-account button, so visitors understand the feature
before signing in.

The extra nav item pushed the inline header past ~800px into a horizontal
scrollbar; trim the tab padding in the 641–1000px band so the row fits again
(phones already collapse into the hamburger).

static/calendar.html

@@ -42,6 +42,7 @@
         <a href="day" data-view="day">Day Detail</a>
         <a href="compare" data-view="compare">Compare</a>
         <a href="climate">Climate</a>
+        <a href="alerts">Alerts</a>
       </nav>
         </div>
       </details>

static/compare.html

@@ -43,6 +43,7 @@
         <a href="day" data-view="day">Day Detail</a>
         <a href="compare" data-view="compare" class="active">Compare</a>
         <a href="climate">Climate</a>
+        <a href="alerts">Alerts</a>
       </nav>
         </div>
       </details>

static/day.html

@@ -43,6 +43,7 @@
         <a href="day" data-view="day" class="active">Day Detail</a>
         <a href="compare" data-view="compare">Compare</a>
         <a href="climate">Climate</a>
+        <a href="alerts">Alerts</a>
       </nav>
         </div>
       </details>

static/index.html

@@ -46,6 +46,7 @@
         <a href="day" data-view="day">Day Detail</a>
         <a href="compare" data-view="compare">Compare</a>
         <a href="climate">Climate</a>
+        <a href="alerts">Alerts</a>
       </nav>
         </div>
       </details>

static/legend.html

@@ -42,6 +42,7 @@
         <a href="day" data-view="day">Day Detail</a>
         <a href="compare" data-view="compare">Compare</a>
         <a href="climate">Climate</a>
+        <a href="alerts">Alerts</a>
       </nav>
         </div>
       </details>

static/style.css

@@ -376,6 +376,16 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
   display: flex; flex-direction: column; gap: 12px; align-items: center;
 }
 .alerts-gate h2 { margin: 0; }
+.alerts-gate { max-width: 520px; }
+.alerts-lede { margin: 0; }
+/* The "what are alerts" steps read as a left-aligned list inside the centered card. */
+.alerts-explain {
+  text-align: left; align-self: stretch; margin: 2px 0; padding-left: 24px;
+  display: flex; flex-direction: column; gap: 10px; line-height: 1.5;
+}
+.alerts-explain li { padding-left: 4px; }
+.alerts-eg { margin: 0; font-style: italic; }
+.alerts-gate-note { margin: 0; font-size: 13px; }
 .alerts-gate .acct-submit { max-width: 280px; }
 .alerts-toolbar {
   display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
@@ -491,6 +501,13 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
 .view-nav a:hover { color: var(--text); }
 .view-nav a.active { background: var(--accent); color: #fff; }
 
+/* Small laptops / large tablets: the inline header (six tabs + °F/°C + account) is
+   tight, so trim the tab padding to keep the row from spilling past ~800px into a
+   horizontal scrollbar. Phones (≤640px) collapse into the hamburger instead. */
+@media (min-width: 641px) and (max-width: 1000px) {
+  .view-nav a { padding: 8px 11px; }
+}
+
 /* Hamburger wrapper. On desktop the menu and its panel are transparent
    (display:contents), so the nav pills plus the injected °F/°C toggle, bell and
    account render inline in the header row and the hamburger summary is hidden;

static/subscriptions.html

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

static/subscriptions.js

@@ -55,10 +55,20 @@ async function load() {
 function renderGate() {
   body.innerHTML = `
     <div class="alerts-gate panel">
-      <h2>Sign in to manage alerts</h2>
+      <h2>What are weather alerts?</h2>
-      <p class="muted">Create an account to subscribe to cities and get notified when their
+      <p class="alerts-lede">Thermograph can watch any city and tell you when its weather turns
-        weather is unusually extreme — above the percentile you choose.</p>
+        <b>unusually extreme for that place</b> — a heat spell, a cold snap, heavy rain — graded
+        against ~45 years of local climate history.</p>
+      <ol class="alerts-explain">
+        <li><b>Pick a city</b> and the metrics to watch — high, low, feels-like, rain, wind…</li>
+        <li><b>Set a threshold.</b> Alert when a day passes, say, the <b>97th percentile</b> for
+          that location. Higher = rarer, so fewer but more significant alerts.</li>
+        <li><b>Get notified</b> in-app (and via OS push on this device) when a recorded day — or
+          the upcoming forecast — crosses your threshold. At most one notification per week per alert.</li>
+      </ol>
+      <p class="alerts-eg muted">For example: “Tell me when Tokyo's high passes the 97th percentile.”</p>
       <button type="button" class="acct-submit" id="gate-signin">Sign in / Create account</button>
+      <p class="alerts-gate-note muted">You'll need an account to create and manage alerts.</p>
     </div>`;
   body.querySelector("#gate-signin").onclick = () => openAuth("login");
 }