use css nesting selector to mimic html layout

style.css

@@ -4,65 +4,57 @@ body {
   padding: 1em;
 }
 
-nav {
+header {
+  flex-shrink: 0;
+  & > nav {
     display: flex;
     font-size: xx-large;
-}
+    & a {
-
+      text-decoration: none;
-menu {
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+    & > menu {
       padding: 0;
       margin: 0;
-}
+      /* TODO: go vertical / dropdown on small screens
-
+      & li { display: none }
-menu li {
+      & li.active { display: inherit }
-  marker: none;
+      &:hover li {
-  list-style: none;
-  /* display: none; /* TODO: go vertical / dropdown on small screens */ */
-}
-
-menu:hover li {
         transition: display 1s ease-in-out;
         display: block;
-}
+      }
-
+      */
-menu li.active {
+    }
-  display: inherit;
+  }
-}
-
-header {
-  flex-shrink: 0;
 }
 
 main {
   padding-left: 1.5rem;
 }
 
-nav a {
+/* used mostly by .zs/index */
-  text-decoration: none;
-  color: inherit
-}
-
-nav a:hover {
-  text-decoration: underline
-}
-
 ul li { 
   display: flex;
   align-items: baseline;
-}
 
-ul li span {
+  & span {
     min-width: 5em;
     text-align: right;
     padding-right: 1rem;
     line-height: 1.5rem;
-  vertical-align: baseline;
+    font-size: smaller;
-}
+  }
 
-ul li a {
+  & a {
     font-size: larger;
+  }
 }
 
+a { color: inherit }
+li { list-style: none }
+
 :root {
   --red: #f21332;
   --orange: #f27225;