redaction component, margin not stacking, other cleanup

app/assets/css/fonts.css

@@ -92,41 +92,7 @@
     font-display: swap;
 }
 
-/* Alegreya */
-@font-face {
-    font-family: 'Alegreya';
-    src: url('~/assets/fonts/Alegreya HT/Alegreya-Regular.woff2') format('woff2');
-    font-weight: 400;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alegreya';
-    src: url('~/assets/fonts/Alegreya HT/Alegreya-Italic.woff2') format('woff2');
-    font-weight: 400;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alegreya';
-    src: url('~/assets/fonts/Alegreya HT/Alegreya-Bold.woff2') format('woff2');
-    font-weight: 700;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Alegreya';
-    src: url('~/assets/fonts/Alegreya HT/Alegreya-BoldItalic.woff2')
-        format('woff2');
-    font-weight: 700;
-    font-style: italic;
-    font-display: swap;
-}
-
-/* Redaction */
+/* Redaction — 7 grades × Regular / Italic / Bold */
 @font-face {
     font-family: 'Redaction';
     src: url('~/assets/fonts/Redaction/Redaction-Regular.woff2') format('woff2');
@@ -151,6 +117,58 @@
     font-display: swap;
 }
 
+@font-face {
+    font-family: 'Redaction 10';
+    src: url('~/assets/fonts/Redaction/Redaction_10-Regular.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Redaction 10';
+    src: url('~/assets/fonts/Redaction/Redaction_10-Italic.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Redaction 10';
+    src: url('~/assets/fonts/Redaction/Redaction_10-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Redaction 20';
+    src: url('~/assets/fonts/Redaction/Redaction_20-Regular.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Redaction 20';
+    src: url('~/assets/fonts/Redaction/Redaction_20-Italic.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Redaction 20';
+    src: url('~/assets/fonts/Redaction/Redaction_20-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
 @font-face {
     font-family: 'Redaction 35';
     src: url('~/assets/fonts/Redaction/Redaction_35-Regular.woff2')
@@ -177,6 +195,84 @@
     font-display: swap;
 }
 
+@font-face {
+    font-family: 'Redaction 50';
+    src: url('~/assets/fonts/Redaction/Redaction_50-Regular.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Redaction 50';
+    src: url('~/assets/fonts/Redaction/Redaction_50-Italic.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Redaction 50';
+    src: url('~/assets/fonts/Redaction/Redaction_50-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Redaction 70';
+    src: url('~/assets/fonts/Redaction/Redaction_70-Regular.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Redaction 70';
+    src: url('~/assets/fonts/Redaction/Redaction_70-Italic.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Redaction 70';
+    src: url('~/assets/fonts/Redaction/Redaction_70-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Redaction 100';
+    src: url('~/assets/fonts/Redaction/Redaction_100-Regular.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Redaction 100';
+    src: url('~/assets/fonts/Redaction/Redaction_100-Italic.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Redaction 100';
+    src: url('~/assets/fonts/Redaction/Redaction_100-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
 /* Space Mono */
 @font-face {
     font-family: 'Space Mono';

app/assets/css/main.css

@@ -34,21 +34,6 @@ html.font-plantin {
     --body-weight: 300;
 }
 
-html.font-alegreya {
-    --font: 'Alegreya', Georgia, serif;
-    --body-weight: 400;
-}
-
-html.font-redaction {
-    --font: 'Redaction', Georgia, serif;
-    --body-weight: 400;
-}
-
-html.font-redaction-35 {
-    --font: 'Redaction 35', Georgia, serif;
-    --body-weight: 400;
-}
-
 html.font-sohne {
     --font: 'SohneBuch', -apple-system, BlinkMacSystemFont, sans-serif;
     --body-weight: 400;
@@ -69,8 +54,38 @@ html.font-palatino {
     --body-weight: 400;
 }
 
-html.font-iowan {
-    --font: 'Iowan Old Style', 'Palatino Linotype', Palatino, serif;
+html.font-redaction {
+    --font: 'Redaction', Georgia, serif;
+    --body-weight: 400;
+}
+
+html.font-redaction-10 {
+    --font: 'Redaction 10', Georgia, serif;
+    --body-weight: 400;
+}
+
+html.font-redaction-20 {
+    --font: 'Redaction 20', Georgia, serif;
+    --body-weight: 400;
+}
+
+html.font-redaction-35 {
+    --font: 'Redaction 35', Georgia, serif;
+    --body-weight: 400;
+}
+
+html.font-redaction-50 {
+    --font: 'Redaction 50', Georgia, serif;
+    --body-weight: 400;
+}
+
+html.font-redaction-70 {
+    --font: 'Redaction 70', Georgia, serif;
+    --body-weight: 400;
+}
+
+html.font-redaction-100 {
+    --font: 'Redaction 100', Georgia, serif;
     --body-weight: 400;
 }
 
@@ -79,11 +94,6 @@ html.font-system {
     --body-weight: 400;
 }
 
-html.font-courier {
-    --font: 'Courier New', Courier, ui-monospace, monospace;
-    --body-weight: 400;
-}
-
 .dark-mode,
 html.theme-navy,
 html.theme-dusk,
@@ -351,6 +361,7 @@ article .article-body > :first-child {
 code {
     font-family: var(--font-mono);
     font-size: 0.86em;
+    color: var(--text);
     background: var(--code-bg);
     padding: 0.12em 0.35em;
     border-radius: 3px;
@@ -359,6 +370,7 @@ code {
 pre {
     margin: 0 0 1em;
     padding: 0.9rem 1rem;
+    color: var(--text);
     background: var(--bg-secondary);
     border-radius: var(--radius);
     overflow-x: auto;
@@ -367,10 +379,25 @@ pre {
 
 pre code {
     padding: 0;
+    color: inherit;
     background: none;
     font-size: 0.8rem;
 }
 
+pre.shiki {
+    background: var(--bg-secondary);
+}
+
+html.light-mode .shiki span {
+    color: var(--shiki-light-mode, var(--shiki-default));
+    background: transparent;
+}
+
+html.dark-mode .shiki span {
+    color: var(--shiki-dark-mode, var(--text));
+    background: transparent;
+}
+
 @media (max-width: 640px) {
     body {
         font-size: 17px;