diff --git a/404.html b/404.html
new file mode 100644
index 0000000..69ceaa4
--- /dev/null
+++ b/404.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>404 — Page Not Found · Arsam Sabbagh</title>
+  <meta name="robots" content="noindex, nofollow" />
+  <link rel="stylesheet" href="fonts.css" />
+  <style>
+    :root {
+      --bg: #F4F0E8;
+      --bg-elev: #EEE8DC;
+      --ink: #1A1815;
+      --ink-soft: #595448;
+      --ink-mute: #8a8473;
+      --rule: #d8d1be;
+      --accent: #0F6B73;
+      --terra: #B7593C;
+      --serif: 'Instrument Serif', 'Times New Roman', serif;
+      --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
+      --mono: 'JetBrains Mono', ui-monospace, monospace;
+    }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --bg: #0D0D0D;
+        --bg-elev: #161614;
+        --ink: #F2EEE7;
+        --ink-soft: #b3ad9f;
+        --ink-mute: #6b675c;
+        --rule: #2a2925;
+        --accent: #4FB8C0;
+        --terra: #D67B5C;
+      }
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      background: var(--bg);
+      color: var(--ink);
+      font-family: var(--sans);
+      -webkit-font-smoothing: antialiased;
+      text-rendering: optimizeLegibility;
+      min-height: 100dvh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    body::after {
+      content: '';
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      z-index: 9999;
+      opacity: 0.045;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
+      background-size: 300px 300px;
+    }
+    .e404 {
+      text-align: center;
+      padding: clamp(32px, 6vw, 80px);
+      max-width: 540px;
+    }
+    .e404-code {
+      font-family: var(--mono);
+      font-size: clamp(120px, 25vw, 200px);
+      line-height: 1;
+      font-weight: 400;
+      color: var(--ink);
+      letter-spacing: -0.04em;
+      display: block;
+    }
+    .e404-title {
+      font-family: var(--serif);
+      font-size: clamp(28px, 4vw, 44px);
+      font-weight: 400;
+      font-style: italic;
+      margin: 20px 0 16px;
+      color: var(--ink);
+    }
+    .e404-desc {
+      font-size: 16px;
+      line-height: 1.6;
+      color: var(--ink-soft);
+      margin-bottom: 36px;
+    }
+    .e404-link {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      font-family: var(--mono);
+      font-size: 13px;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      text-decoration: none;
+      color: var(--bg);
+      background: var(--ink);
+      padding: 14px 28px;
+      border: 1px solid var(--ink);
+      transition: background 0.3s cubic-bezier(0.2,0.7,0.2,1), color 0.3s cubic-bezier(0.2,0.7,0.2,1), border-color 0.3s cubic-bezier(0.2,0.7,0.2,1);
+    }
+    .e404-link:hover {
+      background: var(--bg);
+      color: var(--ink);
+      border-color: var(--ink);
+    }
+    .e404-link:active {
+      transform: scale(0.96);
+    }
+    ::selection { background: var(--accent); color: var(--bg); }
+  </style>
+</head>
+<body>
+  <div class="e404">
+    <span class="e404-code">404</span>
+    <h1 class="e404-title">Page not found</h1>
+    <p class="e404-desc">This page doesn't exist or has moved. If you think this is a mistake, let me know.</p>
+    <a href="/" class="e404-link">&larr; Back to homepage</a>
+  </div>
+</body>
+</html>