Add custom 404 page and Apache .htaccess

404.html reuses the site's hero/ledger patterns: a descending candle
series that breaks its stop line, and a list linking to each front-page
section. .htaccess wires ErrorDocument to it, plus compression, caching,
and security headers for Apache hosts.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

style.css

@@ -696,6 +696,80 @@ html.js .never-list.in li:nth-child(5) { transition-delay: 0.45s; }
   html.js .anat-fig .anat-line { transform: none; transition: none; }
 }
 
+/* ── 404 ─────────────────────────────────────────────────── */
+
+a.topbar-brand { text-decoration: none; }
+
+.hero-404 { padding-bottom: clamp(9rem, 20vw, 13rem); }
+
+/* the broken stop-loss: red is the risk colour, so the 404 wears it */
+.hero-404 h1 .risk-line {
+  display: block;
+  background: linear-gradient(100deg, #A83E2E 0%, var(--risk-soft) 45%, var(--risk) 80%);
+  -webkit-background-clip: text;
+          background-clip: text;
+  color: transparent;
+}
+
+.hero-404 .stop-line {
+  transform-box: fill-box;
+  transform-origin: 0 50%;
+  transform: scaleX(0);
+  animation: sweep-stop 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) 0.7s forwards;
+}
+@keyframes sweep-stop { to { transform: scaleX(1); } }
+
+.hero-fineness.err {
+  color: var(--risk-soft);
+  border-color: rgba(212, 96, 76, 0.25);
+  text-transform: none;
+  letter-spacing: 0.04em;
+}
+.hero-fineness.err .mono { color: var(--dim); }
+
+.hero-404 .cta-fine a { color: var(--gold); }
+
+/* Where-to-go list: same ledger rhythm, but each row is a link */
+.lost-list {
+  list-style: none;
+  border-top: 1px solid var(--rule);
+  max-width: 42em;
+}
+
+.lost-list a {
+  display: grid;
+  grid-template-columns: 230px 1fr;
+  gap: 1.5rem;
+  align-items: baseline;
+  padding: 1.1rem 0.5rem 1.1rem 0;
+  border-bottom: 1px solid var(--rule);
+  text-decoration: none;
+  transition: background 0.15s, padding-left 0.15s;
+}
+.lost-list a:hover {
+  background: rgba(217, 174, 82, 0.05);
+  padding-left: 0.6rem;
+}
+
+.lost-key {
+  font-family: "Archivo", sans-serif;
+  font-weight: 700;
+  font-stretch: 85%;
+  font-size: 0.95rem;
+  letter-spacing: 0.03em;
+  color: var(--gold-bright);
+}
+
+.lost-note {
+  font-family: "Source Serif 4", Georgia, serif;
+  color: var(--dim);
+  font-size: 0.95rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hero-404 .stop-line { transform: none; animation: none; }
+}
+
 /* ── Responsive ──────────────────────────────────────────── */
 
 @media (max-width: 760px) {
@@ -710,4 +784,8 @@ html.js .never-list.in li:nth-child(5) { transition-delay: 0.45s; }
   .topbar-note { display: none; }
   .hero-fineness { flex-direction: column; gap: 0.3rem; }
   .hero { padding-bottom: 9rem; }
+  /* the 404 chart is tallest at its left edge, which is on-screen at this
+     width — needs more clearance than the rising hero chart */
+  .hero-404 { padding-bottom: 13rem; }
+  .lost-list a { grid-template-columns: 1fr; gap: 0.2rem; }
 }