All the root styles so far

assets/styles/root/050_figures.css

@@ -1,6 +1,5 @@
 @layer root {
     figcaption {
-        margin-block-start: 0.2em;
         text-align: center;
     }
 
@@ -9,17 +8,25 @@
     }
 
     figure {
+        grid-column: content-start / content-end;
         margin: 0;
         margin-inline: 0;
+        min-width: fit-content;
         overflow: hidden;
-        max-width: var(--content-width);
+    }
+
+    @media (max-width: 415px) {
+      figure {
+        grid-column: wide-content-start / wide-content-end;
+      }
     }
 
     figure > .container {
         align-items: center;
         display: flex;
-        justify-content: center;
         gap: var(--body-item-spacing);
+        justify-content: center;
+        min-width: fit-content;
     }
 
     figure.bordered {
@@ -38,6 +45,12 @@
         max-width: var(--content-width);
     }
 
+    @media (max-width: 414px) {
+        figure img {
+            max-width: 100%;
+        }
+    }
+
     figure svg {
         width: 100%;
         height: auto;

assets/styles/root/050_generic_page.css

@@ -0,0 +1,47 @@
+@layer root {
+    .page {
+        gap: var(--body-item-spacing) 0;
+    }
+
+    .page > header {
+        align-items: first baseline;
+        column-gap: 4rem;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+
+    @media (max-width: 539px) {
+        .page > header {
+            grid-template-columns: auto;
+        }
+    }
+
+    .page > header > time {
+    }
+
+    .page > header,
+    .page > footer {
+        grid-column: content-start / content-end;
+    }
+
+    .page > header > :is(h1, h2, h3, h4, h5, h6) {
+        grid-column: 1;
+    }
+
+    .page > header > time {
+        grid-column: 2;
+    }
+
+    .page > article > * {
+        grid-column: gutter-start / gutter-end;
+    }
+
+    .page > article > :not(blockquote, figure.code) {
+        margin-inline: var(--gutter-width);
+    }
+
+    .page > article > :not(:last-child) {
+        margin-block-end: var(--body-item-spacing);
+    }
+}

assets/styles/root/050_main_element_margins.css

@@ -1,8 +0,0 @@
-@layer root {
-    main > :first-child,
-    main > article > :first-child { margin-block-start: 0; }
-    main > :not(:last-child),
-    main > article > :not(:last-child) { margin-block-end: var(--body-item-spacing); }
-    main > :last-child,
-    main > article > :last-child { margin-block-end: 0; }
-}

assets/styles/root/050_table_of_contents.css

@@ -0,0 +1,5 @@
+aside#table-of-contents {
+    grid-column: wide-content-right / margin-right;
+    grid-row: 1 / -1;
+
+}

assets/styles/root/050_typography.css

@@ -33,6 +33,7 @@
 
         --color: rgba(var(--black), 0.8);
         --a-color: rgb(var(--mid-blue));
+        --a-underline-color: rgb(var(--sub-lt-gray));
         --a-ruby-color: var(--color);
         --heading-color: rgb(var(--black));
         --site-nav-link-color: var(--a-color);

assets/styles/root/099_utility.css

@@ -1,6 +1,9 @@
 @layer utility {
     .centered { text-align: center; }
-    .float-right { float: right; }
+    .float-right {
+        float: right;
+        justify-self: end;
+    }
 
     .nobreak { white-space: nowrap; }
     .noselect {