Clean up the header layout and styles

static/styles/root.css

@@ -293,47 +293,48 @@ header.site.animated {
     }
 }
 
-header.site h1 {
+header.site > .grid > h1 {
     font-family: var(--font-family-site-heading);
     font-size: 2em;
     margin: 0;
+    order: 1;
+    white-space: nowrap;
 }
 
-header.site .grid {
+header.site > .grid {
     align-items: baseline;
-    display: grid;
+    display: flex;
+    flex-wrap: wrap;
     gap: 0 0.5em;
-    grid-template-columns: max-content auto max-content;
-    grid-template-areas:
-        "title menu social";
+    margin: 0 auto;
     max-width: var(--content-width);
-    width: var(--content-width);
+    padding: 1.5rem 3rem;
+    width: 100%;
 }
-@media (max-width: 450px) {
-    header.site .grid {
-        grid-template-columns: repeat(2, max-content);
-        grid-template-rows: repeat(2, max-content);
-        grid-template-areas:
-            "title social"
-            "menu menu";
-        max-width: var(--content-width);
-        width: inherit;
+
+header.site > .grid > nav:first-of-type {
+    justify-content: start;
+    order: 2;
+}
+
+header.site > .grid > nav:last-of-type {
+    justify-content: end;
+    order: 3;
+}
+
+@media (max-width: 516px) {
+    header.site > .platter {
+        border-radius: 0;
+    }
+    header.site > .grid {
+        max-width: none;
     }
 }
 
-header.site .platter {
-    margin: 0 auto;
-    padding: 1.5rem 3rem;
-}
-
-header.site .grid nav:first-of-type {
-    grid-area: menu;
-    justify-content: start;
-}
-
-header.site .grid nav:last-of-type {
-    grid-area: social;
-    justify-content: end;
+@media (max-width: 435px) {
+    header.site > .grid > nav:first-of-type {
+        order: 5;
+    }
 }
 
 html {
@@ -369,7 +370,7 @@ main h6 { font-size: var(--body-font-size); }
 
 main h5, main h6 { font-family: var(--font-family-body); }
 
-nav.site {
+header.site > .grid > nav {
     align-items: center;
     display: flex;
     font-size: max(1.5rem, 80%);
@@ -379,20 +380,21 @@ nav.site {
     text-transform: lowercase;
 }
 
-nav.site li {
+header.site > .grid > nav > li {
     color: var(--site-nav-link-color);
     display: block;
     margin-inline-end: 0.5em;
 }
-nav.site .active { font-weight: bold; }
 
-nav.bulleted li:first-child::before {
+header.site > .grid > nav > .active { font-weight: bold; }
+
+nav.bulleted > li:first-child::before {
     color: var(--html-color);
     content: "";
     margin-inline-end: 0;
 }
 
-nav.bulleted li::before {
+nav.bulleted > li::before {
     color: var(--heading-color);
     content: "•";
     font-size: 60%;
@@ -518,17 +520,14 @@ ol ol {
     width: 100%;
 }
 
-.social menu li + li {
-    margin-left: var(--social-menu-padding);
-}
-
 .social {
-    display: flex;
+    display: block;
     letter-spacing: 2px;
     margin-left: auto;
+    order: 2;
 }
 
-.social a {
+.social > li > a {
     background-image: var(--url);
     background-repeat: no-repeat;
     background-size: var(--menu-icon-size);
@@ -537,7 +536,7 @@ ol ol {
     width: var(--menu-icon-size);
 }
 
-.social a span {
+.social > li > a > span {
     display: none;
 }