redaction component, margin not stacking, other cleanup

app/components/content/MarginNote.vue

@@ -1,8 +1,27 @@
+<script setup lang="ts">
+import { watchMarginNotes } from '~/utils/stackMarginNotes';
+
+onMounted(() => {
+    watchMarginNotes();
+});
+</script>
+
 <template>
-    <span class="margin-note"><slot /></span>
+    <span class="margin-note-root">
+        <span class="margin-note-mark" aria-hidden="true"></span>
+        <span class="margin-note"><slot /></span>
+    </span>
 </template>
 
 <style scoped>
+.margin-note-root {
+    display: inline;
+}
+
+.margin-note-mark {
+    display: inline;
+}
+
 .margin-note {
     display: block;
     margin: 0.4rem 0 1rem;
@@ -15,7 +34,7 @@
 @media (min-width: 1200px) {
     .margin-note {
         position: absolute;
-        left: calc(100% + 2rem);
+        left: calc(100% + var(--note-gap));
         width: var(--note-width);
         margin: 0;
         font-size: 0.8rem;

app/components/content/Redacted.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import {
+    redactionFamily,
+    resolveRedactionStrength,
+} from '~/utils/fonts';
+
+const props = withDefaults(
+    defineProps<{
+        strength?: number | string;
+    }>(),
+    {
+        strength: 35,
+    },
+);
+
+const grade = computed(() => resolveRedactionStrength(props.strength));
+const family = computed(
+    () => `'${redactionFamily(grade.value)}', Georgia, serif`,
+);
+</script>
+
+<template>
+    <span
+        class="redacted"
+        :data-strength="grade"
+        :style="{ fontFamily: family }"
+    ><slot /></span>
+</template>
+
+<style scoped>
+.redacted {
+    font-weight: 400;
+}
+
+:where(strong, b) .redacted {
+    font-weight: 700;
+}
+</style>