thematic break styling

css/looks.css

@@ -185,12 +185,6 @@ table tr:last-child td:last-child {
   border-bottom-right-radius: 3px;
 }
 
-hr {
-  height: 2px;
-  border: none;
-  background-color: var(--narrow-gray);
-}
-
 math[display="block"] {
   position: relative;
   left: 0;
@@ -201,3 +195,25 @@ math[display="block"] {
 footer {
   margin-top: 2rem;
 }
+
+/* This is the style for the traditional horizontal rule. */
+hr:not(.thematic) {
+  height: 2px;
+  border: none;
+  background-color: var(--narrow-gray);
+}
+
+hr.thematic {
+  border: none; /* remove default line */
+  text-align: center;
+  margin: 0;
+}
+
+hr.thematic::before {
+  content: '◇—◇—◇';
+  color: var(--darker-color);
+  letter-spacing: -0.05em;
+  margin: 0;
+  transform: translateY(-0.05em);
+  display: inline-block;
+}