Move index styles into style.css; restyle 403/404 to match

403.html

@@ -1,16 +1,17 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>403 &mdash; Forbidden</title>
+<title>Forbidden · druid520</title>
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <main class="error">
-    <h1>403</h1>
+  <h2>Error 403</h2>
-    <p>You do not have permission to access this resource.</p>
+  <h1>Forbidden</h1>
-    <p><a href="/">Return home</a></p>
+  <p>You don't have access to this page.</p>
+  <a href="/">Back to druid520</a>
 </main>
 </body>
 </html>

404.html

@@ -1,16 +1,17 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>404 &mdash; Not Found</title>
+<title>Not found · druid520</title>
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <main class="error">
-    <h1>404</h1>
+  <h2>Error 404</h2>
-    <p>The page you are looking for does not exist.</p>
+  <h1>Not found</h1>
-    <p><a href="/">Return home</a></p>
+  <p>There's nothing at this address.</p>
+  <a href="/">Back to druid520</a>
 </main>
 </body>
 </html>

index.html

@@ -5,37 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>druid520</title>
 <meta name="description" content="Contact details and public keys for druid520.">
-<style>
+<link rel="stylesheet" href="/style.css">
-  :root {
-    --bg: #fafafa; --fg: #1a1a1a; --muted: #666; --line: #ddd;
-    --code-bg: #f0f0f0; --link: #0b5cad;
-    color-scheme: light dark;
-  }
-  @media (prefers-color-scheme: dark) {
-    :root { --bg: #111; --fg: #e6e6e6; --muted: #999; --line: #333; --code-bg: #1c1c1c; --link: #7ab7ff; }
-  }
-  * { box-sizing: border-box; }
-  body {
-    margin: 0; background: var(--bg); color: var(--fg);
-    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  }
-  main { max-width: 42rem; margin: 0 auto; padding: 3rem 1.25rem; }
-  h1 { font-size: 1.75rem; margin: 0 0 2rem; }
-  h2 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 2.5rem 0 .75rem; }
-  a { color: var(--link); text-decoration: none; }
-  a:hover { text-decoration: underline; }
-  dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; margin: 0; }
-  dt { color: var(--muted); }
-  dd { margin: 0; overflow-wrap: anywhere; }
-  .key { margin: 0 0 1.25rem; }
-  .key p { margin: 0 0 .35rem; color: var(--muted); font-size: .9rem; }
-  pre {
-    margin: 0; padding: .75rem 1rem; background: var(--code-bg); border: 1px solid var(--line);
-    border-radius: 6px; overflow-x: auto;
-    font: .85rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  }
-  @media (max-width: 30rem) { dl { grid-template-columns: 1fr; gap: 0 0; } dd { margin-bottom: .75rem; } }
-</style>
 </head>
 <body>
 <main>

style.css

@@ -1,48 +1,82 @@
 :root {
-  --bg: #0b1020;
+  --bg: #fafafa;
-  --fg: #e6e8ef;
+  --fg: #1a1a1a;
-  --accent: #6ea8fe;
+  --muted: #666;
-  --muted: #9aa4bf;
+  --line: #ddd;
+  --code-bg: #f0f0f0;
+  --link: #0b5cad;
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #111;
+    --fg: #e6e6e6;
+    --muted: #999;
+    --line: #333;
+    --code-bg: #1c1c1c;
+    --link: #7ab7ff;
+  }
 }
 
 * { box-sizing: border-box; }
 
-html, body {
-  margin: 0;
-  padding: 0;
-  min-height: 100%;
-}
-
 body {
-  display: flex;
+  margin: 0;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
   background: var(--bg);
   color: var(--fg);
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  line-height: 1.6;
 }
 
 main {
   max-width: 42rem;
-  padding: 2rem;
+  margin: 0 auto;
-  text-align: center;
+  padding: 3rem 1.25rem;
 }
 
-h1 {
+h1 { font-size: 1.75rem; margin: 0 0 2rem; }
-  font-size: clamp(2rem, 6vw, 3.5rem);
+
-  margin: 0 0 0.5rem;
+h2 {
-  letter-spacing: -0.02em;
+  font-size: .8rem;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin: 2.5rem 0 .75rem;
 }
 
-main.error h1 {
+a { color: var(--link); text-decoration: none; }
-  color: var(--accent);
+a:hover { text-decoration: underline; }
-  font-size: clamp(4rem, 18vw, 9rem);
+
+/* Contact list */
+dl {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: .5rem 1.5rem;
   margin: 0;
 }
+dt { color: var(--muted); }
+dd { margin: 0; overflow-wrap: anywhere; }
 
-p { color: var(--muted); margin: 0.5rem 0; }
+/* Key blocks */
+.key { margin: 0 0 1.25rem; }
+.key p { margin: 0 0 .35rem; color: var(--muted); font-size: .9rem; }
 
-a { color: var(--accent); text-decoration: none; }
+pre {
-a:hover { text-decoration: underline; }
+  margin: 0;
+  padding: .75rem 1rem;
+  background: var(--code-bg);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  overflow-x: auto;
+  font: .85rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+/* Error pages (403/404) */
+main.error h2 { margin-top: 0; }
+main.error h1 { margin-bottom: .75rem; }
+main.error p { color: var(--muted); margin: 0 0 2rem; }
+
+@media (max-width: 30rem) {
+  dl { grid-template-columns: 1fr; gap: 0; }
+  dd { margin-bottom: .75rem; }
+}