Proper footnote styling

sass/_footnotes-list.scss

@@ -0,0 +1,36 @@
+.footnotes-list {
+	p {
+		margin-block-start: 0;
+		margin-block-end: 0;
+	}
+
+	a[href*="#fr-"] {
+		$mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M5 14a1 1 0 0 1-.707-.293l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 1 1 1.414 1.414L3.414 8H12c1.117 0 2-.883 2-2s-.883-2-2-2c-.55 0-1-.45-1-1s.45-1 1-1c2.2 0 4 1.8 4 4s-1.8 4-4 4H3.414l2.293 2.293A1 1 0 0 1 5 14m0 0'/%3E%3C/svg%3E");
+		-webkit-mask-image: $mask;
+		-webkit-user-select: none;
+		-webkit-mask-size: cover;
+		display: inline-block;
+		vertical-align: -0.3125em;
+		mask-image: $mask;
+		mask-size: cover;
+		transition: var(--transition);
+		background-color: var(--fg-muted-4);
+		width: 1rem;
+		height: 1rem;
+		color: transparent;
+		user-select: none;
+
+		&:hover {
+			background-color: var(--primary-color);
+		}
+	}
+
+	a + a[href*="#fr-"] {
+		opacity: 0.6;
+		background-color: var(--primary-color);
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+}

sass/_general.scss

@@ -30,7 +30,7 @@ body {
 	min-height: 100vh;
 	color: var(--fg-color);
 	line-height: 1.6;
-	font-family: var(--font-system-ui);
+	font-family: var(--font-system-ui), var(--font-emoji);
 }
 
 // Style text selection to use primary color

sass/style.scss

@@ -17,6 +17,7 @@
 @use "crt";
 @use "external";
 @use "footer";
+@use "footnotes-list";
 @use "general";
 @use "hidden";
 @use "icon";