More website loading speed and code improvements

website/sass/layout/balance-text.scss

@@ -0,0 +1,22 @@
+// CSS component of the JS text balancer script.
+// This must be loaded as an inline stylesheet in the head of the
+// document to avoid the possibility of a visible layout shift.
+
+.balance-text {
+	visibility: hidden;
+}
+
+@media (scripting: none) {
+	.balance-text {
+		visibility: visible !important;
+	}
+}
+
+@supports (text-wrap: balance) {
+	.balance-text,
+	.balanced-text {
+		text-align: left;
+		text-wrap: balance;
+		visibility: visible;
+	}
+}

website/sass/layout/reading-material.scss

@@ -0,0 +1,52 @@
+.reading-material.reading-material {
+	max-width: var(--max-width-reading-material);
+
+	article {
+		width: 100%;
+
+		h2 {
+			margin-top: 80px;
+		}
+
+		h3 {
+			margin-top: 40px;
+		}
+
+		h4 {
+			margin-top: 20px;
+		}
+
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			display: block;
+
+			&:first-child {
+				margin-top: 0;
+			}
+		}
+
+		// Captions below images in blog posts
+		p:has(> img) + center:has(> em) {
+			margin-top: 10px;
+		}
+
+		p ~ img {
+			width: auto;
+			max-width: 100%;
+		}
+
+		hr {
+			margin-top: 40px;
+			margin-bottom: 40px;
+		}
+
+		+ hr {
+			margin-top: calc(80 * var(--variable-px));
+			margin-bottom: calc(40 * var(--variable-px));
+		}
+	}
+}