website/src/pages/404.astro

---
const title = 'Page not found — Blakeslee Research';
const description = 'The page you requested does not exist.';
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="theme-color" content="#0a100c" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
    <meta name="description" content={description} />
    <meta name="robots" content="noindex" />
    <link rel="icon" href="/blakeslee-icon.svg" type="image/svg+xml" sizes="any" />
    <link
      rel="preload"
      href="/fonts/archivo.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
  </head>
  <body>
    <div class="page-shell">
      <main class="not-found">
        <p class="code">404</p>
        <p class="copy">This page doesn't exist yet.</p>
        <a class="home-link" href="/">Back home <span aria-hidden="true">↗</span></a>
      </main>
    </div>
  </body>
</html>

<style is:global>
  @font-face {
    font-family: 'Archivo';
    src: url('/fonts/archivo.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
  }

  :root {
    color-scheme: dark;
    --ink: #eef3ee;
    --secondary: #aebdae;
    --sage: #c6d8c6;
    --paper: #0a100c;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    min-width: 320px;
    /* Longhand, matching index: background-color is the value Safari reads for its
       chrome and overscroll fills, and the shorthand is how it silently vanishes. */
    background-color: var(--paper);
  }

  body {
    margin: 0;
    min-width: 320px;
    min-height: 100svh;
    color: var(--ink);
    background-color: var(--paper);
    font-family: 'Archivo', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  a {
    color: inherit;
  }

  a:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 5px;
  }

  .page-shell {
    display: grid;
    width: min(100%, 1600px);
    min-height: 100svh;
    margin: 0 auto;
    padding: clamp(1rem, 2.2vw, 2rem);
  }

  .not-found {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 1rem;
    text-align: center;
  }

  .code {
    margin: 0;
    font-size: clamp(4rem, 18vw, 10rem);
    font-weight: 700;
    font-stretch: 115%;
    letter-spacing: -0.02em;
    line-height: 1;
  }

  .copy {
    margin: 0;
    color: var(--secondary);
    font-size: clamp(1rem, 2vw, 1.15rem);
  }

  .home-link {
    margin-top: 0.5rem;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35rem;
  }
</style>