diff --git a/assets/styles/root/050_typography.css b/assets/styles/root/050_typography.css
index 0a0a7a2..0f5ccfb 100644
--- a/assets/styles/root/050_typography.css
+++ b/assets/styles/root/050_typography.css
@@ -86,7 +86,7 @@
         line-height: var(--heading-line-height);
     }
 
-    h1.site {
+    h1.gradient {
         --site-title-color1: rgb(103, 128, 229);
         --site-title-color2: rgb(130, 90, 227);
         --site-title-color3: rgb(135, 101, 228);
@@ -102,22 +102,22 @@
         font-family: var(--font-family-site-heading);
     }
 
-    h1.site > a { color: inherit; }
+    h1.gradient > a { color: inherit; }
 
     @supports not ((background-clip: text) or (-webkit-background-clip: text)) {
-        h1.site span:nth-child(10n + 1) { color: var(--site-title-color1); }
-        h1.site span:nth-child(10n + 2) { color: var(--site-title-color2); }
-        h1.site span:nth-child(10n + 3) { color: var(--site-title-color3); }
-        h1.site span:nth-child(10n + 4) { color: var(--site-title-color4); }
-        h1.site span:nth-child(10n + 5) { color: var(--site-title-color5); }
-        h1.site span:nth-child(10n + 6) { color: var(--site-title-color6); }
-        h1.site span:nth-child(10n + 7) { color: var(--site-title-color7); }
-        h1.site span:nth-child(10n + 8) { color: var(--site-title-color8); }
-        h1.site span:nth-child(10n + 9) { color: var(--site-title-color9); }
-        h1.site span:nth-child(10n) { color: var(--site-title-color10); }
+        h1.gradient span:nth-child(10n + 1) { color: var(--site-title-color1); }
+        h1.gradient span:nth-child(10n + 2) { color: var(--site-title-color2); }
+        h1.gradient span:nth-child(10n + 3) { color: var(--site-title-color3); }
+        h1.gradient span:nth-child(10n + 4) { color: var(--site-title-color4); }
+        h1.gradient span:nth-child(10n + 5) { color: var(--site-title-color5); }
+        h1.gradient span:nth-child(10n + 6) { color: var(--site-title-color6); }
+        h1.gradient span:nth-child(10n + 7) { color: var(--site-title-color7); }
+        h1.gradient span:nth-child(10n + 8) { color: var(--site-title-color8); }
+        h1.gradient span:nth-child(10n + 9) { color: var(--site-title-color9); }
+        h1.gradient span:nth-child(10n) { color: var(--site-title-color10); }
     }
     @supports (background-clip: text) or (-webkit-background-clip: text) {
-        h1.site {
+        h1.gradient {
             background:
                 radial-gradient(circle at 20% 70%, rgb(var(--purple)), transparent 40%),
                 radial-gradient(circle at 30% 30%, rgb(var(--lt-blue)), rgb(var(--mid-blue)) 20%, transparent 80%),
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 562229e..090748c 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -2,7 +2,7 @@
 {{- $url := .RelPermalink -}}
 <header class="site">
   <div class="platter grid">
-    <h1 class="site">
+    <h1 class="site gradient">
       <a class="site-name" href="{{ `` | absURL }}">{{ partial "site_name.html" site.Params.shortTitle }}</a>
     </h1>
     {{ partial "site_nav.html" . }}