---
import BaseLayout from "../layouts/BaseLayout.astro";
---

<BaseLayout title="Page not found" description="The page could not be found.">
  <div class="mx-auto max-w-2xl px-5 py-32 text-center">
    <div class="font-serif text-7xl font-semibold tracking-tight">404</div>
    <h1 class="mt-4 font-serif text-2xl font-semibold">Lost in the margins</h1>
    <p class="mt-3 text-muted-foreground">
      The page you're looking for has wandered off. It may have been moved, retitled, or never existed at all.
    </p>
    <div class="mt-6 flex justify-center gap-3">
      <a href="/" class="rounded-md bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90">
        Back home
      </a>
      <a href="/blog" class="rounded-md border border-border px-4 py-2 text-sm hover:bg-muted">
        Browse the archive
      </a>
    </div>
  </div>
</BaseLayout>
