Extract inline CSS into assets/css/main.css, loaded via Hugo Pipes

Minified and fingerprinted in production (cache-busting via content
hash), plain link in dev. Sets up for actual styling work — much easier
to find and edit than a <style> block buried in baseof.html.

layouts/_default/baseof.html

@@ -5,156 +5,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} · {{ .Site.Title }}{{ end }}</title>
   <meta name="description" content="{{ .Site.Params.description }}">
-  <style>
-    :root {
-      color-scheme: light dark;
-      --bg: #fafafa;
-      --bg-raised: #ffffff;
-      --fg: #1a1a1a;
-      --fg-muted: #5a5a5a;
-      --border: #e2e2e2;
-      --accent: #1a5fb4;
-      --accent-fg: #ffffff;
-      --radius: 0.5rem;
-      --max-width: 42rem;
-    }
-    @media (prefers-color-scheme: dark) {
-      :root {
-        --bg: #14161a;
-        --bg-raised: #1c1f24;
-        --fg: #e8e8e8;
-        --fg-muted: #9a9fa6;
-        --border: #2c3038;
-        --accent: #8ab4f8;
-        --accent-fg: #0f1115;
-      }
-    }
-
-    * { box-sizing: border-box; }
-
-    body {
-      margin: 0;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-      line-height: 1.6;
-      background: var(--bg);
-      color: var(--fg);
-      display: flex;
-      flex-direction: column;
-      min-height: 100vh;
-    }
-
-    a { color: var(--accent); }
-
-    h1, h2, h3 { line-height: 1.25; }
-
-    header.site {
-      border-bottom: 1px solid var(--border);
-    }
-    header.site .inner {
-      max-width: var(--max-width);
-      margin: 0 auto;
-      padding: 1.25rem 1.5rem;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 1rem;
-      flex-wrap: wrap;
-    }
-    header.site .brand {
-      font-weight: 700;
-      font-size: 1.1rem;
-      color: var(--fg);
-      text-decoration: none;
-    }
-    header.site nav {
-      display: flex;
-      gap: 1.5rem;
-    }
-    header.site nav a {
-      color: var(--fg-muted);
-      text-decoration: none;
-      font-size: 0.95rem;
-    }
-    header.site nav a:hover { color: var(--fg); }
-
-    main {
-      flex: 1;
-      max-width: var(--max-width);
-      margin: 0 auto;
-      padding: 4rem 1.5rem;
-      width: 100%;
-    }
-
-    footer.site {
-      border-top: 1px solid var(--border);
-      margin-top: 2rem;
-    }
-    footer.site .inner {
-      max-width: var(--max-width);
-      margin: 0 auto;
-      padding: 1.5rem;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 1rem;
-      flex-wrap: wrap;
-      font-size: 0.85rem;
-      color: var(--fg-muted);
-    }
-    footer.site nav {
-      display: flex;
-      gap: 1.25rem;
-    }
-    footer.site nav a {
-      color: var(--fg-muted);
-      text-decoration: none;
-    }
-    footer.site nav a:hover { color: var(--fg); }
-
-    .btn {
-      display: inline-block;
-      padding: 0.75rem 1.5rem;
-      border-radius: var(--radius);
-      background: var(--accent);
-      color: var(--accent-fg);
-      text-decoration: none;
-      font-weight: 600;
-      border: none;
-      font-size: 1rem;
-      cursor: pointer;
-    }
-    .btn:hover { opacity: 0.9; }
-
-    label {
-      display: block;
-      font-weight: 600;
-      font-size: 0.9rem;
-      margin-bottom: 0.35rem;
-    }
-    input, textarea {
-      width: 100%;
-      padding: 0.65rem 0.75rem;
-      border-radius: var(--radius);
-      border: 1px solid var(--border);
-      background: var(--bg-raised);
-      color: var(--fg);
-      font-family: inherit;
-      font-size: 1rem;
-      margin-bottom: 1.25rem;
-    }
-    input:focus, textarea:focus {
-      outline: 2px solid var(--accent);
-      outline-offset: 1px;
-    }
-
-    .field-honeypot {
-      position: absolute;
-      left: -9999px;
-      width: 1px;
-      height: 1px;
-      overflow: hidden;
-    }
-  </style>
+  {{ $css := resources.Get "css/main.css" }}
+  {{ if hugo.IsProduction }}
+    {{ $css = $css | minify | fingerprint }}
+    <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
+  {{ else }}
+    <link rel="stylesheet" href="{{ $css.RelPermalink }}">
+  {{ end }}
 </head>
 <body>
   <header class="site">