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

<BaseLayout title="404 — Page Not Found" description="The page you're looking for doesn't exist.">
  <div class="not-found">
    <span class="nf-code">404</span>
    <h1>Page not found</h1>
    <p>The page you're looking for doesn't exist or has been moved.</p>
    <a href="/" class="btn btn-accent">Back to home</a>
  </div>
</BaseLayout>

<style>
  .not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 50vh;
    gap: var(--space-4);
  }

  .nf-code {
    font-size: clamp(5rem, 15vw, 10rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--border);
  }

  .not-found h1 {
    font-size: var(--text-2xl);
  }

  .not-found p {
    color: var(--text-muted);
    max-width: 40ch;
  }

  .not-found .btn {
    margin-top: var(--space-4);
  }
</style>