From 0b69b95a2f06a08d46a8e200ebb4e36a70dc6fc7 Mon Sep 17 00:00:00 2001
From: Tom Roth <info@tomroth.consulting>
Date: Fri, 31 Jul 2026 09:40:45 +0200
Subject: [PATCH] Nav brand: add tagline next to HER; Georgia italic ampersand

---
 src/_includes/components/nav.njk |  5 ++++-
 src/css/main.css                 | 30 ++++++++++++++++++++++++++++--
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/_includes/components/nav.njk b/src/_includes/components/nav.njk
index d5fe1d7..25811b1 100644
--- a/src/_includes/components/nav.njk
+++ b/src/_includes/components/nav.njk
@@ -3,7 +3,10 @@
 <header class="nav" role="banner">
   <div class="nav__inner container">
 
-    <a href="{{ rootPath }}index.html" class="nav__brand" aria-label="HER Home Enhancement and Renovation — Home">HER</a>
+    <a href="{{ rootPath }}index.html" class="nav__brand" aria-label="HER Home Enhancement &amp; Restoration — Home">
+      <span class="nav__brand-her">HER</span>
+      <span class="nav__brand-tagline" aria-hidden="true">Home Enhancement<br><span class="nav__brand-amp">&amp;</span> Restoration</span>
+    </a>
 
     <nav aria-label="Main navigation">
       <ul class="nav__links" role="list">
diff --git a/src/css/main.css b/src/css/main.css
index d251ddf..31b2b3c 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -303,17 +303,43 @@ a {
 
 /* Brand / wordmark */
 .nav__brand {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.nav__brand-her {
   font-family: var(--font-display);
   font-style: italic;
   font-size: var(--text-2xl);
   color: var(--col-copper);
-  text-decoration: none;
   letter-spacing: -0.01em;
+  line-height: 1;
   flex-shrink: 0;
   transition: color 0.2s ease;
 }
 
-.nav__brand:hover {
+.nav__brand-tagline {
+  font-family: var(--font-body);
+  font-size: 0.65rem;
+  font-weight: 500;
+  color: var(--col-copper);
+  line-height: 1.38;
+  border-left: 1px solid rgba(181, 98, 42, 0.35);
+  padding-left: 0.6rem;
+  transition: color 0.2s ease;
+}
+
+/* Georgia italic has a far more elegant ampersand than Fraunces at small sizes */
+.nav__brand-amp {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-style: italic;
+}
+
+.nav__brand:hover .nav__brand-her,
+.nav__brand:hover .nav__brand-tagline {
   color: var(--col-copper-hover);
 }