---
// BaseLayout normally pulls this in. This page bypasses BaseLayout (the
// component is a full-screen takeover and would fight the sticky header),
// so the stylesheet has to be imported explicitly — without it none of the
// component's Tailwind classes exist on the page at all.
import "../styles.css";
import NotFoundPage from "@/components/ui/page-not-found";
import { SITE } from "../lib/blog-data.js";

// Deliberately NOT wrapped in BaseLayout: the component is a full-screen
// takeover and would collide with the sticky header. Everything a visitor
// needs in order to get out is inside the component itself.
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Page not found — {SITE.name}</title>
    <meta name="description" content="The page could not be found." />
    <meta name="robots" content="noindex" />
    <link
      rel="preload"
      href="/fonts/inter-latin.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
  </head>
  <body>
    <NotFoundPage client:load />
  </body>
</html>

<style is:global>
  /* The brand stylesheet sets body to washi paper; this page is a black
     takeover, so override it here. Declared after the import so it wins. */
  html,
  body {
    margin: 0;
    padding: 0;
    background: #000 !important;
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  }

  /* The animation IS the page — the copy is black on black until the white
     circles wash over it. With reduced motion there are no circles, so flip
     the ground to white and skip the figures rather than leaving a visitor
     staring at an unreadable black screen. */
  @media (prefers-reduced-motion: reduce) {
    canvas,
    .characters {
      display: none !important;
    }

    html,
    body {
      background: #fff;
    }
  }
</style>
