use css nesting selector to mimic html layout

style.css

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