Unnest header.css (native CSS nesting silently broken in browsers without support)

app/public/assets/css/components/header.css

@@ -15,72 +15,73 @@ header {
     var(--gradient-3) 66%,
     var(--gradient-4) 100%
   );
+}
 
-  .nav-logo {
-    text-decoration: none;
-  }
+/* ── Navigation ────────────────────────────────────────────────────── */
 
-  .nav-left-links,
-  .nav-right-links {
-    display: flex;
-    gap: var(--space-l);
-    align-items: center;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
+header nav {
+  padding: var(--space-s) var(--space-s);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--step-0);
+}
 
-  nav {
-    padding: var(--space-s) var(--space-s);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: var(--step-0);
+header nav ul {
+  display: flex;
+  gap: var(--space-l);
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
 
-    a {
-      font-family: var(--font-display);
-      letter-spacing: 0.12em;
-      text-transform: uppercase;
-      color: var(--accent-foreground);
-      text-decoration: none;
-      padding: var(--space-3xs) var(--space-xs);
-      border-radius: var(--radius);
-      text-shadow:
-        0 0 16px var(--header-shadow-strong),
-        0 0 32px var(--header-shadow-soft);
-    }
+header nav ul a {
+  font-family: var(--font-display);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--accent-foreground);
+  text-decoration: none;
+  padding: var(--space-3xs) var(--space-xs);
+  border-radius: var(--radius);
+  text-shadow:
+    0 0 16px var(--header-shadow-strong),
+    0 0 32px var(--header-shadow-soft);
+  transition: opacity 0.15s;
+}
 
-    ul {
-      display: flex;
-      gap: var(--space-l);
-      align-items: center;
-      list-style: none;
-      margin: 0;
-      padding: 0;
-    }
+header nav ul a:hover {
+  opacity: 1;
+}
 
-    ul a {
-      transition: opacity 0.15s;
-    }
+header nav ul a[aria-current="page"] {
+  opacity: 1;
+  border-bottom: 1px solid var(--header-nav-active-border);
+  padding-bottom: 1px;
+}
 
-    ul a:hover {
-      opacity: 1;
-    }
-  }
+/* ── Logo ───────────────────────────────────────────────────────────── */
 
-  ul a[aria-current="page"] {
-    opacity: 1;
-    border-bottom: 1px solid var(--header-nav-active-border);
-    padding-bottom: 1px;
-  }
+.nav-logo {
+  text-decoration: none;
+}
 
-  .nav-top-row {
-    display: contents;
-  }
+.nav-left-links,
+.nav-right-links {
+  display: flex;
+  gap: var(--space-l);
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
 
-  .nav-mobile-links {
-    display: none;
-  }
+.nav-top-row {
+  display: contents;
+}
+
+.nav-mobile-links {
+  display: none;
 }
 
 /* ── Hamburger menu (pure CSS, checkbox trick) ──────────────────────── */