Apply emerald/cobalt visual identity to the stylesheet

Replaces the inherited oxblood/brass palette (leftover from scaffolding
off michaelferrara-site) with the actual Thistle & Moth scheme: an
emerald banner with ivory text, cobalt for links/accents, parchment/ink
for the reading surface, and gold/thistle as sparing ornamental accents.
Adds a dark-mode variant (prefers-color-scheme) — the same page read by
lamplight rather than daylight. Fonts unchanged (EB Garamond/Source
Serif 4/Inter were already right).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

assets/css/main.css

@@ -1,7 +1,9 @@
 /* ==========================================================================
    Thistle & Moth — site stylesheet
    Fonts: EB Garamond (headings), Source Serif 4 (body), Inter (UI chrome)
-   Palette: parchment / ink / oxblood / brass
+   Palette: emerald banner / cobalt accent / parchment & ink / gold & thistle
+   ornaments — see the "Thistle & Moth — Visual Identity" reference for the
+   full rationale behind these choices.
    ========================================================================== */
 
 /* --------------------------------------------------------------------------
@@ -55,18 +57,31 @@
 
 /* --------------------------------------------------------------------------
    2. Design tokens
+
+   Light mode: an open page in daylight — parchment ground, ink text.
+   Dark mode (below, @media prefers-color-scheme): the same page read by
+   lamplight — a deep emerald-black ground holding the parchment content
+   surface, rather than a naive color inversion.
    -------------------------------------------------------------------------- */
 
 :root {
-  /* Color */
+  /* Color — light (default) */
-  --color-bg: #f7f3ea;
+  --color-bg: #f6f0df;           /* parchment page ground */
-  --color-bg-raised: #efe9db;   /* cards, code blocks, pull-quote background */
+  --color-bg-raised: #fbf7ec;    /* cards, code blocks, pull-quote background */
-  --color-ink: #2a2521;          /* body text */
+  --color-ink: #241c14;          /* body text — warm, not flat black */
-  --color-ink-heading: #1c1712;  /* headings, strongest contrast */
+  --color-ink-heading: #1a140d;  /* headings, strongest contrast */
-  --color-accent: #7a2e2e;       /* links, rules, emphasis — oxblood */
+  --color-ink-soft: #4a3f30;     /* metadata, dividers, quiet secondary text */
-  --color-accent-hover: #5c2222;
+  --color-border: #d8c9a3;
-  --color-brass: #8c7a5b;        /* metadata, dividers, secondary accent */
+
-  --color-border: #ddd3bd;
+  --color-accent: #1d4f91;       /* cobalt — links, rules, emphasis */
+  --color-accent-hover: #163b70;
+  --color-gold: #a9812e;         /* ornament — drop caps, sparingly */
+  --color-thistle: #6e5a87;      /* ornament — tags, quiet secondary accent */
+  --color-thistle-bg: #e7e0ee;
+
+  --color-banner-bg: #0b6e4f;    /* emerald banner ground */
+  --color-banner-bg-deep: #084c37;
+  --color-banner-text: #f2ecdc;  /* warm ivory — not stark white */
 
   /* Type */
   --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
@@ -85,6 +100,27 @@
   --space-5: 5rem;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg: #12201a;
+    --color-bg-raised: #efe6cd;
+    --color-ink: #2a2013;
+    --color-ink-heading: #1c150c;
+    --color-ink-soft: #52432c;
+    --color-border: #cabb92;
+
+    --color-accent: #5b83c9;
+    --color-accent-hover: #7b9dd6;
+    --color-gold: #c9a227;
+    --color-thistle: #9c8ab9;
+    --color-thistle-bg: #2a2436;
+
+    --color-banner-bg: #0a5a41;
+    --color-banner-bg-deep: #073f2d;
+    --color-banner-text: #f5efdd;
+  }
+}
+
 /* --------------------------------------------------------------------------
    3. Base
    -------------------------------------------------------------------------- */
@@ -200,7 +236,7 @@ blockquote p:last-child {
 
 hr {
   border: none;
-  border-top: 1px solid var(--color-brass);
+  border-top: 1px solid var(--color-gold);
   width: 4rem;
   margin: var(--space-4) auto;
 }
@@ -262,40 +298,57 @@ nav,
   font-family: var(--font-ui);
 }
 
+/* The masthead — the "banner" in the visual identity reference: emerald
+   ground, ivory text, in both color modes (it deliberately does not follow
+   the page's light/dark swap the way body content does — see --color-banner-*
+   above, which stay emerald/ivory and only deepen slightly for dark mode). */
 .site-header {
+  background: linear-gradient(180deg, var(--color-banner-bg) 0%, var(--color-banner-bg-deep) 100%);
   padding: var(--space-3) var(--space-2);
-  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-3);
 }
 
 .site-title {
   font-family: var(--font-heading);
-  font-size: 1.6rem;
+  font-size: 1.9rem;
-  color: var(--color-ink-heading);
+  font-weight: 600;
+  color: var(--color-banner-text);
   text-decoration: none;
 }
 
 nav a {
   text-decoration: none;
-  color: var(--color-ink);
+  color: var(--color-banner-text);
+  opacity: 0.88;
   margin-right: var(--space-2);
   font-size: 0.95rem;
   letter-spacing: 0.02em;
 }
 
 nav a:hover {
-  color: var(--color-accent);
+  opacity: 1;
 }
 
 .meta {
-  color: var(--color-brass);
+  color: var(--color-ink-soft);
   font-size: 0.85rem;
   letter-spacing: 0.02em;
 }
 
+.tags {
+  color: var(--color-thistle);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+}
+
 .site-footer {
   border-top: 1px solid var(--color-border);
   padding: var(--space-3) var(--space-2);
-  color: var(--color-brass);
+  color: var(--color-ink-soft);
   font-size: 0.85rem;
   text-align: center;
 }
@@ -311,8 +364,8 @@ nav a:hover {
   left: -9999px;
   top: 0;
   z-index: 100;
-  background-color: var(--color-accent);
+  background-color: var(--color-banner-bg);
-  color: var(--color-bg);
+  color: var(--color-banner-text);
   font-family: var(--font-ui);
   padding: var(--space-1) var(--space-2);
   border-radius: 0 0 4px 0;
@@ -334,7 +387,7 @@ nav a:hover {
   font-size: 0.95rem;
   letter-spacing: 0.02em;
   text-decoration: none;
-  color: var(--color-bg);
+  color: var(--color-banner-text);
   background-color: var(--color-accent);
   border: none;
   border-radius: 4px;
@@ -344,7 +397,7 @@ nav a:hover {
 
 .btn:hover {
   background-color: var(--color-accent-hover);
-  color: var(--color-bg);
+  color: var(--color-banner-text);
 }
 
 label {
@@ -396,14 +449,14 @@ textarea {
 
 .course-subhead {
   font-style: italic;
-  color: var(--color-brass);
+  color: var(--color-ink-soft);
   margin-top: 0;
 }
 
 .course-social-proof {
   font-style: italic;
   font-size: 0.9rem;
-  color: var(--color-brass);
+  color: var(--color-ink-soft);
 }
 
 .enroll-form {
@@ -453,7 +506,7 @@ textarea {
   line-height: 0.8;
   padding-right: 0.08em;
   padding-top: 0.05em;
-  color: var(--color-accent);
+  color: var(--color-gold);
 }
 
 /* --------------------------------------------------------------------------