<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  {{ head_verify() }}
  <title>{% block title %}Thermograph{% endblock %}</title>
  <meta name="description" content="{% block description %}{% endblock %}" />
  <meta name="theme-color" content="#f0803c" />
  <!-- iOS/Android home-screen install: run standalone (no browser chrome) when
       added to the Home Screen. On iOS 16.4+ this is what unlocks Web Push. -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="apple-mobile-web-app-title" content="Thermograph" />
  <link rel="canonical" href="{{ base_url }}{% block canonical_path %}/{% endblock %}" />
  <meta property="og:type" content="{% block og_type %}website{% endblock %}" />
  <meta property="og:site_name" content="Thermograph" />
  <meta property="og:title" content="{{ self.title() }}" />
  <meta property="og:description" content="{{ self.description() }}" />
  <meta property="og:url" content="{{ base_url }}{{ self.canonical_path() }}" />
  <meta property="og:image" content="{{ asset_base_url }}/logo.png?v=3" />
  <meta property="og:image:width" content="512" />
  <meta property="og:image:height" content="512" />
  <meta property="og:image:alt" content="Thermograph logo" />
  <meta name="twitter:card" content="summary" />
  <link rel="icon" href="{{ asset_base }}/favicon.svg?v=3" type="image/svg+xml" />
  <link rel="icon" href="{{ asset_base }}/favicon-48.png?v=3" type="image/png" sizes="48x48" />
  <link rel="icon" href="{{ asset_base }}/favicon-32.png?v=3" type="image/png" sizes="32x32" />
  <link rel="icon" href="{{ asset_base }}/favicon-16.png?v=3" type="image/png" sizes="16x16" />
  <link rel="apple-touch-icon" href="{{ asset_base }}/apple-touch-icon.png?v=3" />
  <link rel="manifest" href="{{ asset_base }}/manifest.webmanifest" />
  {% block head_extra %}{% endblock %}
  <link rel="stylesheet" href="{{ asset_base }}/style.css" />
  {% block jsonld %}{% endblock %}
</head>
<body{% if unit_default %} data-unit-default="{{ unit_default }}"{% endif %}>
  <header>
    <div class="brand">
      <div>
        {# The brand is the page's h1 everywhere EXCEPT the homepage, where the
           hero headline owns the sole h1 and the brand degrades to a <p>. The
           .brand h1, .brand .site-name selector pair in style.css keeps the
           lockup looking identical either way. #}
        <{{ brand_tag|default('h1') }} class="site-name"><a href="{{ base }}/"><span class="logo"><svg viewBox="0 0 512 512" width="28" height="28" aria-hidden="true"><rect x="32" y="32" width="448" height="448" rx="96" fill="#10141B" stroke="#FFFFFF" stroke-opacity="0.08" stroke-width="4"/><rect x="115" y="403" width="42" height="42" rx="10" fill="#111924"/><rect x="163" y="403" width="42" height="42" rx="10" fill="#111924"/><rect x="211" y="403" width="42" height="42" rx="10" fill="#111924"/><rect x="259" y="403" width="42" height="42" rx="10" fill="#111924"/><rect x="307" y="403" width="42" height="42" rx="10" fill="#111924"/><rect x="355" y="403" width="42" height="42" rx="10" fill="#111924"/><rect x="403" y="403" width="42" height="42" rx="10" fill="#111924"/><rect x="163" y="355" width="42" height="42" rx="10" fill="#131C25"/><rect x="211" y="355" width="42" height="42" rx="10" fill="#131C25"/><rect x="259" y="355" width="42" height="42" rx="10" fill="#131C25"/><rect x="307" y="355" width="42" height="42" rx="10" fill="#131C25"/><rect x="355" y="355" width="42" height="42" rx="10" fill="#131C25"/><rect x="403" y="355" width="42" height="42" rx="10" fill="#131C25"/><rect x="67" y="307" width="42" height="42" rx="10" fill="#181F27"/><rect x="163" y="307" width="42" height="42" rx="10" fill="#181F27"/><rect x="211" y="307" width="42" height="42" rx="10" fill="#181F27"/><rect x="259" y="307" width="42" height="42" rx="10" fill="#181F27"/><rect x="307" y="307" width="42" height="42" rx="10" fill="#181F27"/><rect x="355" y="307" width="42" height="42" rx="10" fill="#181F27"/><rect x="403" y="307" width="42" height="42" rx="10" fill="#181F27"/><rect x="67" y="259" width="42" height="42" rx="10" fill="#131C1F"/><rect x="211" y="259" width="42" height="42" rx="10" fill="#131C1F"/><rect x="403" y="259" width="42" height="42" rx="10" fill="#131C1F"/><rect x="67" y="211" width="42" height="42" rx="10" fill="#1E1E22"/><rect x="115" y="211" width="42" height="42" rx="10" fill="#1E1E22"/><rect x="211" y="211" width="42" height="42" rx="10" fill="#1E1E22"/><rect x="307" y="211" width="42" height="42" rx="10" fill="#1E1E22"/><rect x="67" y="163" width="42" height="42" rx="10" fill="#1D1C1E"/><rect x="115" y="163" width="42" height="42" rx="10" fill="#1D1C1E"/><rect x="307" y="163" width="42" height="42" rx="10" fill="#1D1C1E"/><rect x="355" y="163" width="42" height="42" rx="10" fill="#1D1C1E"/><rect x="67" y="115" width="42" height="42" rx="10" fill="#1C191E"/><rect x="115" y="115" width="42" height="42" rx="10" fill="#1C191E"/><rect x="163" y="115" width="42" height="42" rx="10" fill="#1C191E"/><rect x="211" y="115" width="42" height="42" rx="10" fill="#1C191E"/><rect x="259" y="115" width="42" height="42" rx="10" fill="#1C191E"/><rect x="307" y="115" width="42" height="42" rx="10" fill="#1C191E"/><rect x="355" y="115" width="42" height="42" rx="10" fill="#1C191E"/><rect x="67" y="67" width="42" height="42" rx="10" fill="#18141B"/><rect x="115" y="67" width="42" height="42" rx="10" fill="#18141B"/><rect x="163" y="67" width="42" height="42" rx="10" fill="#18141B"/><rect x="211" y="67" width="42" height="42" rx="10" fill="#18141B"/><rect x="259" y="67" width="42" height="42" rx="10" fill="#18141B"/><rect x="307" y="67" width="42" height="42" rx="10" fill="#18141B"/><rect x="355" y="67" width="42" height="42" rx="10" fill="#18141B"/><rect x="67" y="403" width="42" height="42" rx="10" fill="#2166ac"/><rect x="67" y="355" width="42" height="42" rx="10" fill="#4393c3"/><rect x="115" y="355" width="42" height="42" rx="10" fill="#4393c3"/><rect x="115" y="307" width="42" height="42" rx="10" fill="#92c5de"/><rect x="115" y="259" width="42" height="42" rx="10" fill="#4a9d5b"/><rect x="163" y="259" width="42" height="42" rx="10" fill="#4a9d5b"/><rect x="163" y="211" width="42" height="42" rx="10" fill="#f6c18a"/><rect x="163" y="163" width="42" height="42" rx="10" fill="#ef9351"/><rect x="211" y="163" width="42" height="42" rx="10" fill="#ef9351"/><rect x="259" y="163" width="42" height="42" rx="10" fill="#ef9351"/><rect x="259" y="211" width="42" height="42" rx="10" fill="#f6c18a"/><rect x="259" y="259" width="42" height="42" rx="10" fill="#4a9d5b"/><rect x="307" y="259" width="42" height="42" rx="10" fill="#4a9d5b"/><rect x="355" y="259" width="42" height="42" rx="10" fill="#4a9d5b"/><rect x="355" y="211" width="42" height="42" rx="10" fill="#f6c18a"/><rect x="403" y="211" width="42" height="42" rx="10" fill="#f6c18a"/><rect x="403" y="163" width="42" height="42" rx="10" fill="#ef9351"/><rect x="403" y="115" width="42" height="42" rx="10" fill="#dd6b52"/><rect x="403" y="67" width="42" height="42" rx="10" fill="#8f0e20"/></svg></span>Thermograph</a></{{ brand_tag|default('h1') }}>
        <p class="tag">How unusual is the weather? Graded against ~45 years of local climate history.</p>
      </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">
        {# data-view marks the links nav.js rewrites to carry the current
           location hash, so moving between views keeps the place you picked.
           Climate and Alerts deliberately opt out (they aren't cell-scoped).
           Inert on the SEO pages, which never load nav.js. #}
        <nav class="view-nav" aria-label="Views">
        <a href="{{ base }}/" data-view="map"{% if section == 'home' %} class="active"{% endif %}>Weekly</a>
        <a href="{{ asset_base }}/calendar" data-view="calendar">Calendar</a>
        <a href="{{ asset_base }}/day" data-view="day">Day Detail</a>
        <a href="{{ asset_base }}/compare" data-view="compare">Compare</a>
        <a href="{{ asset_base }}/score" data-view="score"{% if section == 'score' %} class="active"{% endif %}>Score</a>
        <a href="{{ base }}/climate"{% if section == 'climate' %} class="active"{% endif %}>Climate</a>
        <a href="{{ asset_base }}/alerts">Alerts</a>
      </nav>
        </div>
      </details>
    </div>
  </header>

  <main{% if main_class|default('content') %} class="{{ main_class|default('content') }}"{% endif %}>
    {% block content %}{% endblock %}
  </main>

  <footer class="site-footer">
    {# The compact digest signup is the site-wide footer pattern, not a
       homepage-only surface: every page is a possible entry point.
       Hidden for now; restore by uncommenting the form block below. #}
    {#
    <form class="digest-form digest-compact" method="post" action="{{ asset_base }}/digest"
          data-digest aria-labelledby="footer-digest-label">
      <label id="footer-digest-label" for="footer-digest-email">Your city's weather, graded — monthly</label>
      <div class="digest-row">
        <input id="footer-digest-email" name="email" type="email" required
               autocomplete="email" placeholder="you@example.com" />
        <button type="submit">Get the digest</button>
      </div>
      <p class="digest-note muted">No spam, no sharing your address, unsubscribe anytime.</p>
      <p class="digest-status" role="status" aria-live="polite" hidden></p>
    </form>
    #}
    <nav aria-label="Footer">
      <a href="{{ base }}/climate">City climates</a>
      <a href="{{ base }}/glossary">Weather glossary</a>
      <a href="{{ base }}/about">About &amp; methodology</a>
      <a href="{{ base }}/privacy">Privacy</a>
      <a href="{{ base }}/">Open the tool</a>
    </nav>
    <p class="muted">Free. No ads. No tracking. No account needed. Built by one person in the open.</p>
    <p class="muted">Thermograph grades weather by its percentile against ~45 years of local
       climate history. Data: ERA5 via Open-Meteo &middot; NASA POWER &middot; MET Norway.</p>
    <p class="muted">Made by <a href="https://emigriffith.dev">emigriffith.dev</a>
       <a href="mailto:emerytgriffith@gmail.com" aria-label="Email" title="emerytgriffith@gmail.com">@</a></p>
  </footer>
  {% block body_scripts %}
  <!-- Header parity with the interactive pages: the °F/°C toggle, account + bell,
       and the client-side temperature converter. All self-contained modules. -->
  <script type="module" src="{{ asset_base }}/units.js"></script>
  <script type="module" src="{{ asset_base }}/account.js"></script>
  <script type="module" src="{{ asset_base }}/climate.js"></script>
  {% endblock %}
  <script type="module" src="{{ asset_base }}/digest.js"></script>
  <script type="module" src="{{ asset_base }}/ios-install.js"></script>
</body>
</html>
