From 7c5cf2fa68db150a85086842a331358837db3181 Mon Sep 17 00:00:00 2001
From: Will Estes <westes575@gmail.com>
Date: Thu, 27 Aug 2026 07:42:47 -0400
Subject: [PATCH] Add gradient header banner with brand mark

Header background is now a dark-ink-to-accent gradient instead of a
flat color, with the mountain/sun mark inlined next to the wordmark.
Text stays within the ink-dominant zone of the gradient so contrast
holds; dark mode gets its own ink value distinct from --bg so the
band doesn't blend into the page.
---
 assets/css/main.css          | 43 ++++++++++++++++++++++++++++++------
 layouts/partials/header.html | 10 ++++++++-
 2 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index e5ac3a9..bb650ef 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -35,6 +35,15 @@
 
   --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
   --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+
+  /* Header banner: a fixed dark "ink" base regardless of site theme, with
+     the accent only showing up as a glow near the bottom edge — keeps the
+     gradient sunset-y without ever sitting text on top of the accent
+     color (white-on-accent fails contrast, see --cta note above). */
+  --header-ink: #241f19;
+  --header-accent: var(--accent);
+  --header-fg: #fbf8f3;
+  --header-fg-muted: rgba(251, 248, 243, 0.72);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -49,6 +58,10 @@
     --accent-fg: #1a1611;
     --cta: #f0834f;
     --cta-fg: #1a1611;
+
+    /* Distinctly darker than dark-mode --bg (#1a1611), so the band still
+       reads as a separate header instead of blending into the page. */
+    --header-ink: #100d0a;
   }
 }
 
@@ -101,15 +114,21 @@ h1, h2, h3 {
 h1 { font-size: 2.25rem; }
 h2 { font-size: 1.5rem; margin-top: 3rem; }
 
-/* Header: plain wordmark + nav, no color band — the accent is saved for
-   links and buttons rather than spent on chrome. */
+/* Header: a sunset gradient band — dark ink for most of the height (where
+   the wordmark/nav text sits, so contrast stays solid) easing into the
+   accent color only at the very bottom edge, behind the mark's sun. */
 header.site {
-  border-bottom: 1px solid var(--border);
+  background: linear-gradient(
+    to bottom,
+    var(--header-ink) 0%,
+    var(--header-ink) 70%,
+    var(--header-accent) 100%
+  );
 }
 header.site .inner {
   max-width: var(--max-width);
   margin: 0 auto;
-  padding: 1.5rem;
+  padding: 1.5rem 1.5rem 2.5rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -117,24 +136,34 @@ header.site .inner {
   flex-wrap: wrap;
 }
 header.site .brand {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
   font-family: var(--font-heading);
   font-weight: 600;
   font-size: 1.25rem;
-  color: var(--fg);
+  color: var(--header-fg);
   text-decoration: none;
 }
+header.site .brand-mark {
+  width: 1.75rem;
+  height: 1.75rem;
+  flex-shrink: 0;
+}
+header.site .brand-mark-peak { fill: var(--header-fg); }
+header.site .brand-mark-sun { fill: var(--header-accent); }
 header.site nav {
   display: flex;
   gap: 1.5rem;
 }
 header.site nav a {
-  color: var(--fg-muted);
+  color: var(--header-fg-muted);
   text-decoration: none;
   font-size: 0.95rem;
 }
 header.site nav a:hover,
 header.site nav a[aria-current="page"] {
-  color: var(--cta);
+  color: var(--header-fg);
 }
 
 main {
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 81087ab..982e745 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,6 +1,14 @@
 <header class="site">
   <div class="inner">
-    <a class="brand" href="/">{{ .Site.Title }}</a>
+    <a class="brand" href="/">
+      <svg class="brand-mark" viewBox="0 0 32 32" aria-hidden="true" focusable="false">
+        <circle class="brand-mark-sun" cx="17" cy="16" r="5.5"/>
+        <polygon class="brand-mark-peak" points="4,26 14,10 22,26"/>
+        <polygon class="brand-mark-peak" points="12,26 22,13 30,26"/>
+        <rect class="brand-mark-peak" x="0" y="25" width="32" height="2"/>
+      </svg>
+      <span>{{ .Site.Title }}</span>
+    </a>
     <nav aria-label="Primary">
       {{ range .Site.Menus.main }}
       <a href="{{ .URL }}"{{ if $.IsMenuCurrent "main" . }} aria-current="page"{{ end }}>{{ .Name }}</a>