Added Kindred article

src/styles/base/content.css

@@ -1,13 +1,13 @@
 .content {
    font-family: var(--font-body);
-   font-size: clamp(1rem, 2.5vw, 1.25rem);
+   font-size: var(--layout-responsive-font);
 }
 
 .prose {
   @mixin py var(--space-8);
   @mixin typo_body;
 
-  font-size: clamp(1rem, 2.5vw, 1.25rem);
+  font-size: var(--layout-responsive-font);
 
   & ::selection {
     color: var(--color-palette-ice-blue);
@@ -31,6 +31,8 @@
     @mixin mb var(--space-6);
     @mixin pl var(--space-4);
     @mixin border-l var(--size-8), solid, var(--color-text-primary);
+
+    hyphens: auto;
   }
 
   & h3 {
@@ -40,6 +42,7 @@
     @mixin py var(--space-2);
     @mixin px var(--space-4);
 
+    hyphens: auto;
     color: var(--color-text-inverse);
     background: var(--color-surface-inverse);
   }
@@ -52,6 +55,7 @@
     @mixin px var(--space-4);
     @mixin border-y var(--size-6), solid, var(--color-text-secondary);
 
+    hyphens: auto;
     color: var(--color-text-secondary);
   }
 
@@ -60,6 +64,7 @@
     @mixin mt var(--space-9);
     @mixin mb var(--space-4);
 
+    hyphens: auto;
     color: var(--color-text-secondary);
 
     &::before {
@@ -74,6 +79,7 @@
     @mixin mt var(--space-8);
     @mixin mb var(--space-2);
 
+    hyphens: auto;
     color: var(--color-text-tertiary);
   }
 
@@ -234,7 +240,7 @@
     list-style: none;
 
     & > li {
-      @mixin ml var(--space-6);
+      @mixin ml var(--space-9);
       @mixin pl var(--space-4);
 
       counter-increment: ol-l1;
@@ -322,6 +328,61 @@
     }
   }
 
+  & .axes {
+    & table {
+      & th,
+      & td {
+        &:first-child {
+          width: 10em;
+        }
+
+        &:nth-child(2) {
+          width: 5em;
+        }
+
+        &:nth-child(3) {
+          text-align: left;
+        }
+      }
+    }
+  }
+
+  .elemental-grid {
+    & table {
+      & td {
+        &:first-child {
+          @mixin typo_table-header;
+          @mixin py var(--space-2);
+          @mixin px var(--space-4);
+
+          border: var(--size-1) solid var(--color-border-strong);
+          color: var(--color-text-inverse);
+          background: var(--color-surface-inverse);
+        }
+      }
+    }
+  }
+
+  .theme {
+    & table {
+      & th,
+      & td {
+        &:first-child {
+          width: 10em;
+        }
+
+        &:nth-child(2) {
+          width: 50%;
+          text-align: left;
+        }
+
+        &:nth-child(3) {
+          width: calc(50% - 10em)
+        }
+      }
+    }
+  }
+
   /* === DEFINTION LISTS === */
   & dl {
     @mixin my var(--space-3);