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/002_columns.css

@@ -1,6 +1,10 @@
 :root {
-    --margin-min-width: var(--body-item-spacing);
-    --margin-max-width: 1fr;
+  --body-item-spacing: 4rem;
+  --content-width: 80rem;
+  --list-item-block-gap: var(--body-item-spacing);
+  --margin-min-width: var(--body-item-spacing);
+  --margin-max-width: 1fr;
+  --nav-bulleted-spacing: 0.75rem;
 }
 
 @layer root {
@@ -79,4 +83,148 @@
     main > a.to-photo-post {
         grid-column: wide-content-start / wide-content-end;
     }
+
+    p, ul {
+        grid-column: content-start / content-end;
+    }
+}
+
+@layer layout {
+  blockquote {
+    --line-width: 4px;
+
+    border-inline-start: var(--line-width) solid var(--separator-color);
+    padding-inline-start: calc(3rem - var(--line-width));
+
+    margin: 0;
+  }
+
+  code.nobg {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+  }
+
+  details {
+    width: 100%;
+  }
+
+  details:has(#TableOfContents) {
+    box-sizing: border-box;
+    padding: var(--body-item-spacing);
+  }
+
+  fieldset {
+    box-sizing: border-box;
+    padding: var(--body-item-spacing);
+    padding-top: calc(var(--body-item-spacing) / 10);
+  }
+
+  header>span.series {
+    margin-inline-start: 0.5em;
+  }
+
+  header > span.series::before {
+    margin-inline-end: 0.25em;
+  }
+
+  img {
+    height: auto;
+    max-width: 100%;
+    width: 100%;
+  }
+
+  main {
+    box-sizing: border-box;
+    margin-block-start: var(--body-item-spacing);
+    width: 100%;
+  }
+
+  nav.bulleted>li:first-child::before {
+    margin-inline: 0;
+  }
+
+  nav.bulleted>li::before {
+    margin-inline: var(--nav-bulleted-spacing);
+  }
+
+  ul,
+  ol,
+  dl,
+  :is(ul, ol) > li,
+  dl > dt {
+    margin-inline-start: calc(var(--body-item-spacing) + 2px);
+  }
+
+  :is(ul, ol) > li {
+      margin-block-start: 1rem;
+  }
+
+  :is(ul, ol) > li > :is(ul, ol) {
+    margin-inline-start: 0;
+  }
+
+  table {
+    border-collapse: collapse;
+    margin-inline: auto;
+    width: 50%;
+  }
+
+  td,
+  th {
+    padding-inline: 1rem;
+  }
+
+  .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,
+  .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 > :not(blockquote, figure.code, :has(> img)) {
+    grid-column: content-start / content-end;
+  }
+
+  .page > article > :not(:last-child) {
+    margin-block-end: var(--body-item-spacing);
+  }
+
+  .post {
+    grid-column: gutter-start / gutter-end;
+  }
+
+  .post p,
+  .post .tags,
+  .post .title {
+    grid-column: content-start / content-end;
+  }
 }