Cookie Consent

<!--
  Cookie consent. It is a labelled region, not a live alert - it is present on
  load, so role="alert" would have nothing to announce, and it must NOT trap
  focus like a modal dialog or the site becomes unusable for keyboard users who
  want to read first. "Reject" is a real, equally-prominent button (not a buried
  link): consent that only offers "Accept" isn't consent. Buttons stack under the
  text at 320px and sit inline from sm: up.
-->
<section aria-label="Cookie consent" class="rounded-xl border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-800 dark:bg-gray-900">
  <div class="flex flex-col gap-4 sm:flex-row sm:items-center">
    <p class="min-w-0 flex-1 text-sm leading-normal text-gray-700 dark:text-gray-300">
      We use cookies to keep you signed in and to measure traffic.
      <a href="#" class="font-medium text-gray-900 underline underline-offset-2 hover:no-underline dark:text-gray-100">See our policy</a>.
    </p>
    <div class="flex flex-col gap-2 sm:flex-row sm:flex-none">
      <button type="button" class="order-2 rounded-lg border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 transition hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800 dark:focus-visible:ring-offset-gray-900 sm:order-1">Reject non-essential</button>
      <button type="button" class="order-1 rounded-lg bg-gray-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200 dark:focus-visible:ring-offset-gray-900 sm:order-2">Accept all</button>
    </div>
  </div>
</section>