src/scss/components/_header.scss

@@ -1,39 +0,0 @@
-header {
-  background-color: var(--primary);
-  position: fixed;
-  z-index: 10;
-  inset-block-start: 0;
-  inset-inline: 0;
-
-  nav {
-    ul {
-      display: flex;
-      justify-content: flex-end;
-      padding: 0;
-      list-style: none;
-      flex-wrap: wrap;
-    }
-
-    li {
-      padding: 6px 20px;
-      padding: 6px clamp(10px, 3vw, 20px);
-      margin: 0;
-      text-align: end;
-    }
-
-    a {
-      text-decoration: none;
-      text-underline-offset: 0.4rem;
-
-      &:hover {
-        text-decoration: underline .12rem;
-      }
-
-      &[aria-current="page"] {
-        color: var(--text-2);
-        text-decoration: underline .12rem;
-        font-weight: var(--font-weight-semibold)
-      }
-    }
-  }
-}

src/scss/critical.scss

@@ -7,7 +7,6 @@
 @use './components/button';
 @use './components/skip-link';
 @use './components/icons';
-@use './components/header';
 
 html {
   scroll-padding-top: 2rem;
@@ -24,7 +23,38 @@ body {
     padding: .5rem clamp(.2rem, 3vw, 2rem);  
   }
 }
+header {
+  background-color: var(--primary);
+  /* background: inherit;
+  background-attachment: fixed; */
+  position: fixed;
+  z-index: 10;
+  inset-block-start: 0;
+  inset-inline: 0;
 
+  nav {
+    ul {
+      display: flex;
+      justify-content: flex-end;
+      padding: 0;
+      list-style: none;
+      flex-wrap: wrap;
+    }
+
+    li {
+      padding: 6px 20px;
+      padding: 6px clamp(10px, 3vw, 20px);
+      margin: 0;
+      text-align: end;
+    }
+
+    a[aria-current="page"] {
+      color: var(--text-2);
+      text-decoration: underline;
+      font-weight: var(--font-weight-semibold)
+    }
+  }
+}
 main {
   margin: 0;
   padding: 0;
@@ -249,7 +279,7 @@ i {
     position: absolute;
     inline-size: 6px;
     background-color: var(--light-1);
-    inset: 1.5rem 0 0 1.5rem;
+    inset: 0 0 0 1.5rem;
     margin-inline-start: -3px;
   }