404.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>404 — lost in the trench</title>
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml" />
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,900&family=IBM+Plex+Mono:wght@400&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/assets/style.css" />
</head>
<body class="ocean">
<div class="grain" aria-hidden="true"></div>
<div class="caustics" aria-hidden="true"></div>
<main class="hero" style="min-height:70svh">
  <p class="kicker mono">DEPTH: UNKNOWN</p>
  <h1 class="reveal d1" style="font-size:clamp(72px,16vw,180px)"><span class="iri">404</span></h1>
  <p class="lede reveal d2">Nothing lives at this depth. <a href="/" style="color:#4cc9f0">Surface →</a></p>
</main>
</body>
</html>