Partially reorganize styles into functional chunks, rather than by component

Move link, generic page layout, post list, and a bunch of leftover stuff in root.css to functional stylesheets in styles/root/.

assets/styles/root/050_typography.css

@@ -45,6 +45,34 @@
         }
     }
 
+    a {
+        text-decoration: none;
+    }
+
+    a[href]:hover {
+        text-decoration: underline;
+        text-decoration-style: solid;
+    }
+
+    a.hover-only:hover {
+        text-decoration: underline;
+    }
+
+    a.hover-only {
+        color: var(--color);
+        transition: color 0.2s;
+    }
+
+    a.hover-only:hover {
+        color: var(--a-color);
+        transition: color 0.2s;
+    }
+
+    a rt,
+    a:hover rt {
+        color: var(--a-ruby-color);
+    }
+
     body {
         font-size: var(--font-size);
     }
@@ -155,14 +183,30 @@
         letter-spacing: 0;
     }
 
+    header > span.series {
+        font-size: 1.75rem;
+        letter-spacing: 1px;
+    }
+
+    header > span.series::before {
+        color: var(--header-series-arrow-foreground-color);
+    }
+
     html {
         color: var(--color);
         font-family: var(--font-family);
         font-size: clamp(var(--font-size-min), var(--font-size-scale-factor), var(--font-size-max));
     }
 
-    nav.bulleted > li:first-child::before { color: var(--color); }
-    nav.bulleted > li::before { color: var(--heading-color); }
+    nav.bulleted > li:first-child::before {
+        color: var(--color);
+    }
+
+    nav.bulleted > li::before {
+        color: var(--heading-color);
+        font-size: 60%;
+        font-weight: normal;
+    }
 
     p { line-height: var(--line-height); }
 
@@ -171,4 +215,68 @@
     @media (prefers-color-scheme: dark) {
         rt { color: rgba(var(--white), 0.5); }
     }
+
+    .list {
+        gap: var(--list-item-block-gap) 0;
+    }
+
+    .list > h1,
+    .list > header {
+        grid-column: content-start / content-end;
+    }
+
+    .list > .post {
+        grid-column: wide-content-start / wide-content-end;
+    }
+
+    @supports (grid-template-columns: subgrid) {
+        .list > .post {
+            --body-item-spacing: 2rem;
+
+            display: grid;
+            grid-template-columns: subgrid;
+            gap: var(--body-item-spacing) 0;
+        }
+    }
+
+    .list .post header {
+        grid-column: wide-content-start / content-end;
+    }
+
+    @supports (grid-template-columns: subgrid) {
+        .list .post header {
+            display: grid;
+            grid-template-columns: subgrid;
+        }
+    }
+
+    .list .post time {
+        grid-column: wide-content-start;
+        justify-self: end;
+    }
+
+    @media (max-width: 960px) {
+        .list .post time {
+            grid-column: content-start / content-end;
+            justify-self: start;
+        }
+    }
+
+    .list .post time {
+        font-variant-numeric: tabular-nums;
+    }
+
+    @media (max-width: 960px) {
+        .list .post time {
+            line-height: var(--line-height);
+        }
+    }
+
+    .title {
+        font-size: var(--h5-size);
+    }
+
+    .title, .title a {
+        color: var(--color);
+    }
 }