diff --git a/assets/css/080_site_header.css b/assets/css/080_site_header.css
new file mode 100644
index 0000000..b483b75
--- /dev/null
+++ b/assets/css/080_site_header.css
@@ -0,0 +1,65 @@
+/*************************
+ # COMPONENT: SITE HEADER
+ *************************/
+
+.site-header {
+  --color-nav-separator: var(--gray6);
+
+  font-family: var(--font-family-monospace);
+  margin-block: var(--space-m) var(--space-xl);
+}
+
+@media (prefers-color-scheme: dark) {
+  .site-header {
+    --color-nav-separator: var(--gray4);
+  }
+}
+
+.site-header__content {
+  border-bottom: 2px dashed var(--gray6);
+  gap: var(--space-l);
+  padding-bottom: var(--space-xs);
+
+  .site-header__title {
+    color: var(--gray1);
+    font-size: var(--text-m);
+    font-weight: normal;
+    letter-spacing: 0.05em;
+
+    a {
+      color: inherit;
+    }
+
+    a:hover {
+      text-decoration: none;
+    }
+  }
+
+  .site-header__nav {
+    font-size: var(--text-s);
+    font-weight: normal;
+
+    ul {
+      --spacing: 1ch;
+
+      display: flex;
+      gap: var(--spacing);
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      li {
+        margin: 0;
+        padding: 0;
+      }
+
+      li:not(:first-child)::before {
+        color: var(--color-nav-separator);
+        content: ":";
+        font-weight: bold;
+        justify-content: center;
+        margin-inline-end: var(--spacing);
+      }
+    }
+  }
+}
diff --git a/assets/css/099_site_header.css b/assets/css/099_site_header.css
deleted file mode 100644
index 471f966..0000000
--- a/assets/css/099_site_header.css
+++ /dev/null
@@ -1,46 +0,0 @@
-/*************************
- # COMPONENT: SITE HEADER
- *************************/
-
-.site-header {
-  font-size: var(--text-xxl);
-  margin-block-start: var(--space-xl);
-  padding-block-end: var(--space-xl);
-}
-
-.site-header__content {
-  gap: var(--space-l);
-
-  .site-header__title {
-    font-family: var(--font-family-heading);
-    font-size: var(--text-xxl);
-    font-weight: 600;
-    letter-spacing: 0.05em;
-
-    a:hover {
-      text-decoration: none;
-    }
-  }
-
-  .site-header__nav {
-    font-size: var(--text-s);
-    font-weight: normal;
-
-    ul {
-      display: flex;
-      gap: var(--space-xs);
-      list-style: none;
-      margin: 0;
-      padding: 0;
-
-      li {
-        margin: 0;
-        padding: 0;
-      }
-
-      li:not(:first-child)::before {
-        content: "•";
-      }
-    }
-  }
-}