Newsletter Footer Bar

<!--
  A full-bleed strip that sits above the site footer proper. It paints its own
  dark surface at both themes, which is what lets it read as a band across the
  page rather than another card - and, conveniently, means its white text has a
  fixed contrast ratio instead of an inherited one.
-->
<aside class="nl-bar" aria-labelledby="nl-bar-title">
  <div class="nl-bar__inner">
    <div class="nl-bar__copy">
      <h2 class="nl-bar__title" id="nl-bar-title">Get the monthly roundup</h2>
      <p class="nl-bar__text">Product news and field notes. One email a month.</p>
    </div>

    <form class="nl-bar__form" action="/api/subscribe" method="post">
      <label class="nl-bar__label" for="nl-bar-email">Email address</label>
      <input
        class="nl-bar__input"
        id="nl-bar-email"
        name="email"
        type="email"
        autocomplete="email"
        placeholder="you@company.com"
        required
      />
      <button class="nl-bar__submit" type="submit">Sign up</button>
    </form>
  </div>
</aside>