diff --git a/MIGRATION.md b/MIGRATION.md
new file mode 100644
index 0000000..346432a
--- /dev/null
+++ b/MIGRATION.md
@@ -0,0 +1,28 @@
+# Migration guide
+
+
+The migration guide is a work in progress.
+
+
+## Removed classes
+- `.-dark-theme`: Set `html { color-sheme: dark; }` instead.
+- `.-no-light-theme`: Set `html { color-sheme: light; }` instead.
+- `.all:initial`
+- `.grid`: Use new helper, **TODO**
+- `.nested-list`: This utility class is now the default (nested `<ul>` and `<ol>` do not get extra spacing). To get the old behavior, add `.margin-block` to the nested `<ul>` or `<ol>`.
+
+## Renamed classes
+- `.f-row` -> `.flex-row`
+- `.f-col` -> `.flex-col`
+- `.f-switch` -> `.flex-switch`
+- `.primary-font` -> `.main-font`
+- `.big` -> `.<big>`
+
+## Removed variables
+- `--rhythm`: Set a value for the `line-height`{.token .attr-name} property on the `html` element instead.
+- `--grid-row-width`:
+- `--grid-col-width`:
+
+
+## Rename variables
+- `--f-switch-threshold` -> `--flex-switch-threshold`
diff --git a/src/aria.css b/src/aria.css
index b75532a..151835b 100644
--- a/src/aria.css
+++ b/src/aria.css
@@ -18,7 +18,7 @@
   &:is(button) {
     /* button-specific resets */
     font-size: 1em;
-    line-height: var(--rhythm, 1.4rem);
+    line-height: 1rlh;
     box-shadow: none;
     &:is(:hover, :focus-visible, :active, :disabled) {
       filter: none;
@@ -220,7 +220,7 @@ input[type=checkbox][role=switch] {
     margin-block-end: auto;
   }
   &:not(label > *) {
-    padding-block: calc(var(--gap) / 4 + (var(--rhythm, 1rlh) - 1em) / 2);
+    padding-block: calc(var(--gap) / 4 + (1rlh - 1em) / 2);
   }
 
   label:has(> &) {
diff --git a/src/colorways.css b/src/colorways.css
index 4ecdfe3..8687e73 100644
--- a/src/colorways.css
+++ b/src/colorways.css
@@ -46,30 +46,37 @@
   border-block-end: var(--border-block-end-width) var(--border-block-end-style) var(--graphical-fg);
   border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) var(--graphical-fg);
   border-inline-end: var(--border-inline-end-width) var(--border-inline-end-style) var(--graphical-fg);
+  border-radius: var(--border-radius);
 }
 .border-block\:none { border-block: none }
 .border-block {
   border-block-start: var(--border-block-start-width) var(--border-block-start-style) var(--graphical-fg);
   border-block-end: var(--border-block-end-width) var(--border-block-end-style) var(--graphical-fg);
+  border-radius: var(--border-radius);
 }
 .border-block-start\:none { border-block-start: none }
 .border-block-start {
   border-block-start: var(--border-block-start-width) var(--border-block-start-style) var(--graphical-fg);
+  border-radius: var(--border-radius);
 }
 .border-block-end\:none { border-block-end: none }
 .border-block-end {
   border-block-end: var(--border-block-end-width) var(--border-block-end-style) var(--graphical-fg);
+  border-radius: var(--border-radius);
 }
 .border-inline\:none { border-inline: none }
 .border-inline {
   border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) var(--graphical-fg);
   border-inline-end: var(--border-inline-end-width) var(--border-inline-end-style) var(--graphical-fg);
+  border-radius: var(--border-radius);
 }
 .border-inline-start\:none { border-inline-start: none }
 .border-inline-start {
   border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) var(--graphical-fg);
+  border-radius: var(--border-radius);
 }
 .border-inline-end\:none { border-inline-end: none }
 .border-inline-end {
   border-inline-end: var(--border-inline-end-width) var(--border-inline-end-style) var(--graphical-fg);
+  border-radius: var(--border-radius);
 }
diff --git a/src/components.css b/src/components.css
index b5827b2..194cb77 100644
--- a/src/components.css
+++ b/src/components.css
@@ -107,7 +107,7 @@ details,
       --full-width: calc(100vi - var(--sidebar-width));
       --eff-line-length:
         min(
-          calc(var(--full-width) - (2 * var(--rhythm, 1rlh))),
+          calc(var(--full-width) - 2rlh),
           var(--line-length)
         );
       padding-block-start: var(--gap);
@@ -131,7 +131,7 @@ details,
       --full-width: calc(100vi - var(--sidebar-width));
       --eff-line-length:
         min(
-          calc(var(--full-width) - (2 * var(--rhythm, 1rlh))),
+          calc(var(--full-width) - 2rlh),
           var(--line-length)
         );
       padding-block-start: var(--gap);
@@ -174,12 +174,12 @@ details,
   font-family: var(--secondary-font);
   border: var(--chip-border-width) var(--chip-border-style) var(--accent);
   background: var(--box-bg);
-  border-radius: calc(var(--rhythm, 1rlh) / 2);
-  padding-inline: calc(var(--rhythm, 1rlh) / 2);
+  border-radius: 0.5rlh;
+  padding-inline: 0.5rlh;
 }
 
 .navbar {
-  padding: var(--rhythm, 1rlh);
+  padding: 1rlh;
 
   font-family: var(--secondary-font);
 
@@ -223,7 +223,7 @@ details,
   & nav ul[role=list] {
     display: flex;
     flex-flow: row;
-    gap: var(--rhythm, 1rlh);
+    gap: 1rlh;
     padding-inline-start: 0;
 
     & * { flex-shrink: 0 }
@@ -277,7 +277,7 @@ details,
   color: currentcolor;
   padding: 0;
   box-shadow: none;
-  line-height: var(--rhythm, 1rlh);
+  line-height: 1rlh;
   font-size: var(--wcag-target-size-aa);
   inline-size: var(--wcag-target-size-aa);
   block-size: var(--wcag-target-size-aa);
@@ -306,7 +306,7 @@ details,
     color: var(--accent);
   }
 
-  &:is(.big, .\<big\>) {
+  &.\<big\> {
     font-size: var(--wcag-target-size-aaa);
     inline-size: var(--wcag-target-size-aaa);
     block-size: var(--wcag-target-size-aaa);
@@ -325,9 +325,9 @@ aside[role=note] {
     0px,
     calc(
       0px - min(
-        var(--gutter-width) - var(--rhythm, 1rlh),
-        var(--sidenote-width) + var(--rhythm, 1rlh)
-      ) + var(--rhythm, 1rlh) - 1ch
+        var(--gutter-width) - 1rlh,
+        var(--sidenote-width) + 1rlh
+      ) + 1rlh - 1ch
     )
   );
   --density: 0.5;
diff --git a/src/flex.css b/src/flex.css
index 1386763..514ff58 100644
--- a/src/flex.css
+++ b/src/flex.css
@@ -1,24 +1,23 @@
 
-.flex-row, .f-row {
+.flex-row {
   display: flex;
   flex-direction: row;
   gap: var(--gap);
   & > * { margin: 0 }
 }
 
-.flex-column, .f-col {
+.flex-column {
   display: flex;
   flex-direction: column;
   gap: var(--gap);
   & > * { margin: 0 }
 }
 
-.flex-switch, .f-switch {
+.flex-switch {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap);
-  --f-switch-threshold: 55ch;  /* Deprecated name */
-  --flex-switch-threshold: var(--f-switch-threshold);
+  --flex-switch-threshold: 55ch;
 
   & > * {
     margin: 0;
diff --git a/src/grid.css b/src/grid.css
index 6cd9abf..7b9e9ac 100644
--- a/src/grid.css
+++ b/src/grid.css
@@ -1,122 +1,40 @@
-
-.grid {
+.layout-grid {
   display: grid;
-  grid-auto-columns: var(--grid-col-width, 1fr);
-  grid-auto-rows:    var(--grid-row-width, auto);
   gap: var(--gap);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  margin-block: var(--gap);
 
-  & > * { margin: 0 }
-}
-
-.grid-even-rows { --grid-row-width: 1fr; }
-.grid-variable-cols { --grid-col-width: auto; }
-
-[data-cols^="1 " ] { grid-column-start: 1  }    [data-cols$=" 1" ] { grid-column-end: 2  }   [data-cols="1" ] { grid-column: 1  }
-[data-cols^="2 " ] { grid-column-start: 2  }    [data-cols$=" 2" ] { grid-column-end: 3  }   [data-cols="2" ] { grid-column: 2  }
-[data-cols^="3 " ] { grid-column-start: 3  }    [data-cols$=" 3" ] { grid-column-end: 4  }   [data-cols="3" ] { grid-column: 3  }
-[data-cols^="4 " ] { grid-column-start: 4  }    [data-cols$=" 4" ] { grid-column-end: 5  }   [data-cols="4" ] { grid-column: 4  }
-[data-cols^="5 " ] { grid-column-start: 5  }    [data-cols$=" 5" ] { grid-column-end: 6  }   [data-cols="5" ] { grid-column: 5  }
-[data-cols^="6 " ] { grid-column-start: 6  }    [data-cols$=" 6" ] { grid-column-end: 7  }   [data-cols="6" ] { grid-column: 6  }
-[data-cols^="7 " ] { grid-column-start: 7  }    [data-cols$=" 7" ] { grid-column-end: 8  }   [data-cols="7" ] { grid-column: 7  }
-[data-cols^="8 " ] { grid-column-start: 8  }    [data-cols$=" 8" ] { grid-column-end: 9  }   [data-cols="8" ] { grid-column: 8  }
-[data-cols^="9 " ] { grid-column-start: 9  }    [data-cols$=" 9" ] { grid-column-end: 10 }   [data-cols="9" ] { grid-column: 9  }
-[data-cols^="10 "] { grid-column-start: 10 }    [data-cols$=" 10"] { grid-column-end: 11 }   [data-cols="10"] { grid-column: 10 }
-[data-cols^="11 "] { grid-column-start: 11 }    [data-cols$=" 11"] { grid-column-end: 12 }   [data-cols="11"] { grid-column: 11 }
-[data-cols^="12 "] { grid-column-start: 12 }    [data-cols$=" 12"] { grid-column-end: 13 }   [data-cols="12"] { grid-column: 12 }
-
-[data-rows^="1 " ]  { grid-row-start:   1  }    [data-rows$=" 1" ] { grid-row-end:    2  }   [data-rows="1" ] { grid-row:    1  }
-[data-rows^="2 " ]  { grid-row-start:   2  }    [data-rows$=" 2" ] { grid-row-end:    3  }   [data-rows="2" ] { grid-row:    2  }
-[data-rows^="3 " ]  { grid-row-start:   3  }    [data-rows$=" 3" ] { grid-row-end:    4  }   [data-rows="3" ] { grid-row:    3  }
-[data-rows^="4 " ]  { grid-row-start:   4  }    [data-rows$=" 4" ] { grid-row-end:    5  }   [data-rows="4" ] { grid-row:    4  }
-[data-rows^="5 " ]  { grid-row-start:   5  }    [data-rows$=" 5" ] { grid-row-end:    6  }   [data-rows="5" ] { grid-row:    5  }
-[data-rows^="6 " ]  { grid-row-start:   6  }    [data-rows$=" 6" ] { grid-row-end:    7  }   [data-rows="6" ] { grid-row:    6  }
-[data-rows^="7 " ]  { grid-row-start:   7  }    [data-rows$=" 7" ] { grid-row-end:    8  }   [data-rows="7" ] { grid-row:    7  }
-[data-rows^="8 " ]  { grid-row-start:   8  }    [data-rows$=" 8" ] { grid-row-end:    9  }   [data-rows="8" ] { grid-row:    8  }
-[data-rows^="9 " ]  { grid-row-start:   9  }    [data-rows$=" 9" ] { grid-row-end:    10 }   [data-rows="9" ] { grid-row:    9  }
-[data-rows^="10 "]  { grid-row-start:   10 }    [data-rows$=" 10"] { grid-row-end:    11 }   [data-rows="10"] { grid-row:    10 }
-[data-rows^="11 "]  { grid-row-start:   11 }    [data-rows$=" 11"] { grid-row-end:    12 }   [data-rows="11"] { grid-row:    11 }
-[data-rows^="12 "]  { grid-row-start:   12 }    [data-rows$=" 12"] { grid-row-end:    13 }   [data-rows="12"] { grid-row:    12 }
+  @media (max-width: 768px) {
+    display: flex;
+    flex-flow: column nowrap;
+  }
 
-@media (max-width: 768px) {
-  [data-cols\@s^="1 " ] { grid-column-start: 1  }    [data-cols\@s$=" 1" ] { grid-column-end: 2  }   [data-cols\@s="1" ] { grid-column: 1  }
-  [data-cols\@s^="2 " ] { grid-column-start: 2  }    [data-cols\@s$=" 2" ] { grid-column-end: 3  }   [data-cols\@s="2" ] { grid-column: 2  }
-  [data-cols\@s^="3 " ] { grid-column-start: 3  }    [data-cols\@s$=" 3" ] { grid-column-end: 4  }   [data-cols\@s="3" ] { grid-column: 3  }
-  [data-cols\@s^="4 " ] { grid-column-start: 4  }    [data-cols\@s$=" 4" ] { grid-column-end: 5  }   [data-cols\@s="4" ] { grid-column: 4  }
-  [data-cols\@s^="5 " ] { grid-column-start: 5  }    [data-cols\@s$=" 5" ] { grid-column-end: 6  }   [data-cols\@s="5" ] { grid-column: 5  }
-  [data-cols\@s^="6 " ] { grid-column-start: 6  }    [data-cols\@s$=" 6" ] { grid-column-end: 7  }   [data-cols\@s="6" ] { grid-column: 6  }
-  [data-cols\@s^="7 " ] { grid-column-start: 7  }    [data-cols\@s$=" 7" ] { grid-column-end: 8  }   [data-cols\@s="7" ] { grid-column: 7  }
-  [data-cols\@s^="8 " ] { grid-column-start: 8  }    [data-cols\@s$=" 8" ] { grid-column-end: 9  }   [data-cols\@s="8" ] { grid-column: 8  }
-  [data-cols\@s^="9 " ] { grid-column-start: 9  }    [data-cols\@s$=" 9" ] { grid-column-end: 10 }   [data-cols\@s="9" ] { grid-column: 9  }
-  [data-cols\@s^="10 "] { grid-column-start: 10 }    [data-cols\@s$=" 10"] { grid-column-end: 11 }   [data-cols\@s="10"] { grid-column: 10 }
-  [data-cols\@s^="11 "] { grid-column-start: 11 }    [data-cols\@s$=" 11"] { grid-column-end: 12 }   [data-cols\@s="11"] { grid-column: 11 }
-  [data-cols\@s^="12 "] { grid-column-start: 12 }    [data-cols\@s$=" 12"] { grid-column-end: 13 }   [data-cols\@s="12"] { grid-column: 12 }
+  @supports (grid-area: attr(id type(<custom-ident>))) {
+    & [id] { grid-area: attr(id type(<custom-ident>)) }
+  }
 
-  [data-rows\@s^="1 " ]  { grid-row-start:   1  }    [data-rows\@s$=" 1" ] { grid-row-end:    2  }   [data-rows\@s="1" ] { grid-row:    1  }
-  [data-rows\@s^="2 " ]  { grid-row-start:   2  }    [data-rows\@s$=" 2" ] { grid-row-end:    3  }   [data-rows\@s="2" ] { grid-row:    2  }
-  [data-rows\@s^="3 " ]  { grid-row-start:   3  }    [data-rows\@s$=" 3" ] { grid-row-end:    4  }   [data-rows\@s="3" ] { grid-row:    3  }
-  [data-rows\@s^="4 " ]  { grid-row-start:   4  }    [data-rows\@s$=" 4" ] { grid-row-end:    5  }   [data-rows\@s="4" ] { grid-row:    4  }
-  [data-rows\@s^="5 " ]  { grid-row-start:   5  }    [data-rows\@s$=" 5" ] { grid-row-end:    6  }   [data-rows\@s="5" ] { grid-row:    5  }
-  [data-rows\@s^="6 " ]  { grid-row-start:   6  }    [data-rows\@s$=" 6" ] { grid-row-end:    7  }   [data-rows\@s="6" ] { grid-row:    6  }
-  [data-rows\@s^="7 " ]  { grid-row-start:   7  }    [data-rows\@s$=" 7" ] { grid-row-end:    8  }   [data-rows\@s="7" ] { grid-row:    7  }
-  [data-rows\@s^="8 " ]  { grid-row-start:   8  }    [data-rows\@s$=" 8" ] { grid-row-end:    9  }   [data-rows\@s="8" ] { grid-row:    8  }
-  [data-rows\@s^="9 " ]  { grid-row-start:   9  }    [data-rows\@s$=" 9" ] { grid-row-end:    10 }   [data-rows\@s="9" ] { grid-row:    9  }
-  [data-rows\@s^="10 "]  { grid-row-start:   10 }    [data-rows\@s$=" 10"] { grid-row-end:    11 }   [data-rows\@s="10"] { grid-row:    10 }
-  [data-rows\@s^="11 "]  { grid-row-start:   11 }    [data-rows\@s$=" 11"] { grid-row-end:    12 }   [data-rows\@s="11"] { grid-row:    11 }
-  [data-rows\@s^="12 "]  { grid-row-start:   12 }    [data-rows\@s$=" 12"] { grid-row-end:    13 }   [data-rows\@s="12"] { grid-row:    12 }
+  & > * { margin: 0; }
 }
 
-@media (min-width: 1024px) {
-  [data-cols\@l^="1 " ] { grid-column-start: 1  }    [data-cols\@l$=" 1" ] { grid-column-end: 2  }   [data-cols\@l="1" ] { grid-column: 1  }
-  [data-cols\@l^="2 " ] { grid-column-start: 2  }    [data-cols\@l$=" 2" ] { grid-column-end: 3  }   [data-cols\@l="2" ] { grid-column: 2  }
-  [data-cols\@l^="3 " ] { grid-column-start: 3  }    [data-cols\@l$=" 3" ] { grid-column-end: 4  }   [data-cols\@l="3" ] { grid-column: 3  }
-  [data-cols\@l^="4 " ] { grid-column-start: 4  }    [data-cols\@l$=" 4" ] { grid-column-end: 5  }   [data-cols\@l="4" ] { grid-column: 4  }
-  [data-cols\@l^="5 " ] { grid-column-start: 5  }    [data-cols\@l$=" 5" ] { grid-column-end: 6  }   [data-cols\@l="5" ] { grid-column: 5  }
-  [data-cols\@l^="6 " ] { grid-column-start: 6  }    [data-cols\@l$=" 6" ] { grid-column-end: 7  }   [data-cols\@l="6" ] { grid-column: 6  }
-  [data-cols\@l^="7 " ] { grid-column-start: 7  }    [data-cols\@l$=" 7" ] { grid-column-end: 8  }   [data-cols\@l="7" ] { grid-column: 7  }
-  [data-cols\@l^="8 " ] { grid-column-start: 8  }    [data-cols\@l$=" 8" ] { grid-column-end: 9  }   [data-cols\@l="8" ] { grid-column: 8  }
-  [data-cols\@l^="9 " ] { grid-column-start: 9  }    [data-cols\@l$=" 9" ] { grid-column-end: 10 }   [data-cols\@l="9" ] { grid-column: 9  }
-  [data-cols\@l^="10 "] { grid-column-start: 10 }    [data-cols\@l$=" 10"] { grid-column-end: 11 }   [data-cols\@l="10"] { grid-column: 10 }
-  [data-cols\@l^="11 "] { grid-column-start: 11 }    [data-cols\@l$=" 11"] { grid-column-end: 12 }   [data-cols\@l="11"] { grid-column: 11 }
-  [data-cols\@l^="12 "] { grid-column-start: 12 }    [data-cols\@l$=" 12"] { grid-column-end: 13 }   [data-cols\@l="12"] { grid-column: 12 }
+.flow-grid {
+  display: grid;
+  --cell-length: var(--card-length);
+  grid-template-columns: repeat(
+    auto-fill, minmax(min(100%, var(--cell-length)), 1fr)
+  );
+  gap: var(--gap);
 
-  [data-rows\@l^="1 " ]  { grid-row-start:   1  }    [data-rows\@l$=" 1" ] { grid-row-end:    2  }   [data-rows\@l="1" ] { grid-row:    1  }
-  [data-rows\@l^="2 " ]  { grid-row-start:   2  }    [data-rows\@l$=" 2" ] { grid-row-end:    3  }   [data-rows\@l="2" ] { grid-row:    2  }
-  [data-rows\@l^="3 " ]  { grid-row-start:   3  }    [data-rows\@l$=" 3" ] { grid-row-end:    4  }   [data-rows\@l="3" ] { grid-row:    3  }
-  [data-rows\@l^="4 " ]  { grid-row-start:   4  }    [data-rows\@l$=" 4" ] { grid-row-end:    5  }   [data-rows\@l="4" ] { grid-row:    4  }
-  [data-rows\@l^="5 " ]  { grid-row-start:   5  }    [data-rows\@l$=" 5" ] { grid-row-end:    6  }   [data-rows\@l="5" ] { grid-row:    5  }
-  [data-rows\@l^="6 " ]  { grid-row-start:   6  }    [data-rows\@l$=" 6" ] { grid-row-end:    7  }   [data-rows\@l="6" ] { grid-row:    6  }
-  [data-rows\@l^="7 " ]  { grid-row-start:   7  }    [data-rows\@l$=" 7" ] { grid-row-end:    8  }   [data-rows\@l="7" ] { grid-row:    7  }
-  [data-rows\@l^="8 " ]  { grid-row-start:   8  }    [data-rows\@l$=" 8" ] { grid-row-end:    9  }   [data-rows\@l="8" ] { grid-row:    8  }
-  [data-rows\@l^="9 " ]  { grid-row-start:   9  }    [data-rows\@l$=" 9" ] { grid-row-end:    10 }   [data-rows\@l="9" ] { grid-row:    9  }
-  [data-rows\@l^="10 "]  { grid-row-start:   10 }    [data-rows\@l$=" 10"] { grid-row-end:    11 }   [data-rows\@l="10"] { grid-row:    10 }
-  [data-rows\@l^="11 "]  { grid-row-start:   11 }    [data-rows\@l$=" 11"] { grid-row-end:    12 }   [data-rows\@l="11"] { grid-row:    11 }
-  [data-rows\@l^="12 "]  { grid-row-start:   12 }    [data-rows\@l$=" 12"] { grid-row-end:    13 }   [data-rows\@l="12"] { grid-row:    12 }
+  & > * { margin: 0 }
 }
 
-@media print {
-  [data-cols\@p^="1 " ] { grid-column-start: 1  }    [data-cols\@p$=" 1" ] { grid-column-end: 2  }   [data-cols\@p="1" ] { grid-column: 1  }
-  [data-cols\@p^="2 " ] { grid-column-start: 2  }    [data-cols\@p$=" 2" ] { grid-column-end: 3  }   [data-cols\@p="2" ] { grid-column: 2  }
-  [data-cols\@p^="3 " ] { grid-column-start: 3  }    [data-cols\@p$=" 3" ] { grid-column-end: 4  }   [data-cols\@p="3" ] { grid-column: 3  }
-  [data-cols\@p^="4 " ] { grid-column-start: 4  }    [data-cols\@p$=" 4" ] { grid-column-end: 5  }   [data-cols\@p="4" ] { grid-column: 4  }
-  [data-cols\@p^="5 " ] { grid-column-start: 5  }    [data-cols\@p$=" 5" ] { grid-column-end: 6  }   [data-cols\@p="5" ] { grid-column: 5  }
-  [data-cols\@p^="6 " ] { grid-column-start: 6  }    [data-cols\@p$=" 6" ] { grid-column-end: 7  }   [data-cols\@p="6" ] { grid-column: 6  }
-  [data-cols\@p^="7 " ] { grid-column-start: 7  }    [data-cols\@p$=" 7" ] { grid-column-end: 8  }   [data-cols\@p="7" ] { grid-column: 7  }
-  [data-cols\@p^="8 " ] { grid-column-start: 8  }    [data-cols\@p$=" 8" ] { grid-column-end: 9  }   [data-cols\@p="8" ] { grid-column: 8  }
-  [data-cols\@p^="9 " ] { grid-column-start: 9  }    [data-cols\@p$=" 9" ] { grid-column-end: 10 }   [data-cols\@p="9" ] { grid-column: 9  }
-  [data-cols\@p^="10 "] { grid-column-start: 10 }    [data-cols\@p$=" 10"] { grid-column-end: 11 }   [data-cols\@p="10"] { grid-column: 10 }
-  [data-cols\@p^="11 "] { grid-column-start: 11 }    [data-cols\@p$=" 11"] { grid-column-end: 12 }   [data-cols\@p="11"] { grid-column: 11 }
-  [data-cols\@p^="12 "] { grid-column-start: 12 }    [data-cols\@p$=" 12"] { grid-column-end: 13 }   [data-cols\@p="12"] { grid-column: 12 }
+.row-grid {
+  display: grid;
+  inline-size: max-content;
+  max-inline-size: 100%;
+  gap: var(--gap);
 
-  [data-rows\@p^="1 " ]  { grid-row-start:   1  }    [data-rows\@p$=" 1" ] { grid-row-end:    2  }   [data-rows\@p="1" ] { grid-row:    1  }
-  [data-rows\@p^="2 " ]  { grid-row-start:   2  }    [data-rows\@p$=" 2" ] { grid-row-end:    3  }   [data-rows\@p="2" ] { grid-row:    2  }
-  [data-rows\@p^="3 " ]  { grid-row-start:   3  }    [data-rows\@p$=" 3" ] { grid-row-end:    4  }   [data-rows\@p="3" ] { grid-row:    3  }
-  [data-rows\@p^="4 " ]  { grid-row-start:   4  }    [data-rows\@p$=" 4" ] { grid-row-end:    5  }   [data-rows\@p="4" ] { grid-row:    4  }
-  [data-rows\@p^="5 " ]  { grid-row-start:   5  }    [data-rows\@p$=" 5" ] { grid-row-end:    6  }   [data-rows\@p="5" ] { grid-row:    5  }
-  [data-rows\@p^="6 " ]  { grid-row-start:   6  }    [data-rows\@p$=" 6" ] { grid-row-end:    7  }   [data-rows\@p="6" ] { grid-row:    6  }
-  [data-rows\@p^="7 " ]  { grid-row-start:   7  }    [data-rows\@p$=" 7" ] { grid-row-end:    8  }   [data-rows\@p="7" ] { grid-row:    7  }
-  [data-rows\@p^="8 " ]  { grid-row-start:   8  }    [data-rows\@p$=" 8" ] { grid-row-end:    9  }   [data-rows\@p="8" ] { grid-row:    8  }
-  [data-rows\@p^="9 " ]  { grid-row-start:   9  }    [data-rows\@p$=" 9" ] { grid-row-end:    10 }   [data-rows\@p="9" ] { grid-row:    9  }
-  [data-rows\@p^="10 "]  { grid-row-start:   10 }    [data-rows\@p$=" 10"] { grid-row-end:    11 }   [data-rows\@p="10"] { grid-row:    10 }
-  [data-rows\@p^="11 "]  { grid-row-start:   11 }    [data-rows\@p$=" 11"] { grid-row-end:    12 }   [data-rows\@p="11"] { grid-row:    11 }
-  [data-rows\@p^="12 "]  { grid-row-start:   12 }    [data-rows\@p$=" 12"] { grid-row-end:    13 }   [data-rows\@p="12"] { grid-row:    12 }
+  @media not (max-width: 768px) {
+    grid: 1fr / auto-flow 1fr;
+  }
 }
diff --git a/src/layout.css b/src/layout.css
index edf3f00..ba571f8 100644
--- a/src/layout.css
+++ b/src/layout.css
@@ -45,9 +45,9 @@
 .align-content\:center { align-content: center }
 .align-content\:end    { align-content: end    }
 
-.big, .\<big\> {
+.\<big\> {
   font-size: 1.4em;
-  line-height: calc(1.5 * var(--rhythm, 1rlh));
+  line-height: 1.5rlh;
 }
 
 /***
@@ -57,7 +57,7 @@
 .container {
   --eff-line-length:
     min(
-      calc(var(--full-width) - (2 * var(--rhythm, 1rlh))),
+      calc(var(--full-width) - 2rlh),
       var(--line-length)
     );
 
@@ -201,8 +201,6 @@
   }
 }
 
-.nested-list :where(ul, ol, dl) { margin-block: 0 }
-
 .inline { display: inline }
 .block { display: block }
 .contents { display: contents }
diff --git a/src/main.css b/src/main.css
index ae9227e..5babd91 100644
--- a/src/main.css
+++ b/src/main.css
@@ -6,8 +6,9 @@
 
 html {
   font-family: var(--main-font);
-  line-height: var(--rhythm, 1.4rem);
+  line-height: 1.4rem;
 
+  color-scheme: light dark;
   background: var(--bg);
   color: var(--fg);
 
@@ -45,10 +46,10 @@ nav {
 
 aside {
   font-size: .8em;
-  line-height: calc(var(--rhythm, 1rlh) * 2 / 3);
-  --gap: calc(var(--rhythm, 1rlh) * var(--density) * 2 / 3);
+  line-height: 0.66rlh;
+  --gap: calc(0.66rlh * var(--density))
 
-  border-block-start: var(--border-block-start-width) var(--border-block-start-style) var(--graphical-fg);
+    border-block-start: var(--border-block-start-width) var(--border-block-start-style) var(--graphical-fg);
   border-block-end: var(--border-block-end-width) var(--border-block-end-style) var(--graphical-fg);
   padding-block: var(--gap);
   margin-block: calc(var(--gap) * 3 / 2);
@@ -68,14 +69,14 @@ aside {
     letter-spacing: normal;
   }
 
-  &:is(.big, .\<big\>) {
+  &.\<big\> {
     /* Pull quote */
     background: none;
     border: none;
     border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) var(--muted-fg);
     border-radius: 0;
     padding: 0;
-    padding-inline-start: var(--rhythm, 1rlh);
+    padding-inline-start: 1rlh;
     font-style: italic;
     color: var(--accent);
   }
@@ -92,26 +93,26 @@ h1, h2, h3, h4, h5, h6,
 h1, .\<h1\> {
   font-size: 2em;
   text-transform: none;
-  line-height: calc(2 * var(--rhythm, 1rlh));
+  line-height: 2rlh;
   letter-spacing: 0;
 }
 
 h2, .\<h2\> {
   font-size: 1.6em;
   text-transform: none;
-  line-height: calc(1.5 * var(--rhythm, 1rlh));
+  line-height: 1.5rlh;
   letter-spacing: 0;
 }
 
 h3, .\<h3\> {
   font-size: 1.17em;
-  line-height: calc(1 * var(--rhythm, 1rlh));
+  line-height: 1rlh;
 }
 
 h4, .\<h4\>, h5, .\<h5\>, h6, .\<h6\> {
   font-size: 1em;
   text-transform: none;
-  line-height: calc(1 * var(--rhythm, 1rlh));
+  line-height: 1rlh;
   letter-spacing: 0;
   margin-block-start: var(--gap);
 }
@@ -156,7 +157,7 @@ header {
 footer {
   font-family: var(--secondary-font);
   font-size: .8em;
-  line-height: calc(var(--rhythm, 1rlh) * 2 / 3);
+  line-height: 0.66rlh;
   border-block-start: var(--border-block-start-width) var(--border-block-start-style) var(--graphical-fg);
 }
 
@@ -165,10 +166,10 @@ body > footer,
 main + footer {
   --eff-line-length:
     min(
-      calc(var(--full-width) - (2 * var(--rhythm, 1rlh))),
+      calc(var(--full-width) - 2rlh),
       var(--line-length)
     );
-  padding-block: var(--rhythm, 1rlh);
+  padding-block: 1rlh;
   padding-inline: calc((var(--full-width) - var(--eff-line-length)) / 2);
 }
 
@@ -201,7 +202,7 @@ hr {
 pre {
   font-family: var(--mono-font);
   font-size: .9em;
-  line-height: var(--rhythm, 1rlh);
+  line-height: 1rlh;
   tab-size: 2;
 
   margin-block: var(--gap);
@@ -216,7 +217,7 @@ blockquote {
   margin-block: var(--gap);
 
   font-size: 1.1em;
-  line-height: var(--rhythm, 1rlh);
+  line-height: 1rlh;
   font-style: italic;
 
   border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) var(--graphical-fg);
@@ -232,11 +233,12 @@ blockquote {
 }
 
 ul, ol {
-  padding-inline-start: var(--rhythm, 1rlh);
+  padding-inline-start: 1rlh;
   margin-block: var(--gap);
 
   & & {
     padding-inline-start: var(--gap);
+    margin-block: 0;
   }
 
   &[role=list], &[role=listbox] {
@@ -254,13 +256,14 @@ ol {
 dl {
   margin-block: var(--gap);
 }
+
 dt {
   font-weight: bold;
   font-family: var(--secondary-font);
 }
 
 dd {
-  margin-inline-start: var(--rhythm, 1rlh);
+  margin-inline-start: 1rlh;
 }
 
 @supports selector(li::marker) {
@@ -285,7 +288,7 @@ figcaption {
 main {
   --eff-line-length:
     min(
-      calc(var(--full-width) - (2 * var(--rhythm, 1rlh))),
+      calc(var(--full-width) - 2rlh),
       var(--line-length)
     );
   max-inline-size: var(--eff-line-length);
@@ -328,7 +331,7 @@ a, .\<a\> {
 
 small, .\<small\> {
   font-size: .8em;
-  line-height: calc(var(--rhythm, 1rlh) * 2 / 3);
+  line-height: 0.66rlh;
 }
 
 s {
@@ -462,7 +465,7 @@ td, th {
   vertical-align: top;
 
   &:not(:last-child) {
-    padding-inline-end: var(--rhythm, 1rlh);
+    padding-inline-end: 1rlh;
   }
 }
 
@@ -495,14 +498,14 @@ label :is(input, select):not([specificity-hack]) {
   display: inline-flex;
   align-items: center;
   padding-block: 0;
-  padding-inline: calc(var(--rhythm, 1rlh) / 4);
+  padding-inline: 0.25rlh;
   vertical-align: middle;
   box-sizing: border-box;
 
   font-size: .8rem;
   line-height: 1.125em;
   font-family: var(--secondary-font);
-  min-block-size: var(--rhythm, 1rlh);
+  min-block-size: 1rlh;
 
   background: var(--interactive-bg);
   color: var(--fg);
@@ -560,11 +563,11 @@ label :is(input, select):not([specificity-hack]) {
     box-shadow: var(--shadow-disabled);
   }
 
-  &:is(.big, .\<big\>) {
-    min-block-size: calc(1.5 * var(--rhythm, 1rlh));
+  &.\<big\> {
+    min-block-size: 1.5rlh;
     font-size: 1rem;
-    padding-inline: calc(.5 * var(--rhythm, 1rlh));
-    line-height: var(--rhythm, 1rlh);
+    padding-inline: 0.5rlh;
+    line-height: 1rlh;
   }
 }
 a.\<button\>:not([specificity-hack]) {
@@ -628,14 +631,14 @@ input::file-selector-button {
   display: inline-flex;
   align-items: center;
   padding-block: 0;
-  padding-inline: calc(var(--rhythm, 1rlh) / 4);
+  padding-inline: 0.25rlh;
   vertical-align: middle;
   box-sizing: border-box;
 
   font-size: .8rem;
   line-height: 1.125em;
   font-family: var(--secondary-font);
-  min-block-size: var(--rhythm, 1rlh);
+  min-block-size: 1rlh;
 
   background: var(--interactive-bg);
   color: var(--fg);
@@ -660,11 +663,11 @@ input:disabled::file-selector-button {
   --fg: var(--muted-fg);
   box-shadow: var(--shadow-disabled);
 }
-input:is(.big, .\<big\>)::file-selector-button {
-  min-block-size: calc(1.5 * var(--rhythm, 1rlh));
+input.\<big\>::file-selector-button {
+  min-block-size: 1.5rlh;
   font-size: 1rem;
-  padding-inline: calc(.5 * var(--rhythm, 1rlh));
-  line-height: var(--rhythm, 1rlh);
+  padding-inline: 0.5rlh;
+  line-height: 1rlh;
 }
 strong > input::file-selector-button {
   background: var(--accent);
@@ -698,7 +701,7 @@ input[type=datetime-local],
 input[type=number],
 select,
 textarea {
-  padding: calc(var(--rhythm, 1rlh) / 4);
+  padding: 0.25rlh;
   vertical-align: top;
 
   font-size: 1rem;
@@ -733,7 +736,7 @@ input[type=range] {
 input[type=color] {
   padding: 0;
   margin: 0;
-  block-size: calc(1.5 * var(--rhythm, 1rlh));
+  block-size: 1.5rlh;
 
   border: none;
   background: none;
@@ -743,7 +746,7 @@ input[type=file] {
   padding-block: calc(var(--gap) / 4);
   padding-inline: 0;
   font: inherit;
-  line-height: calc(var(--rhythm, 1rlh) / 2);
+  line-height: 0.5rlh;
   &::file-selector-button {
     margin-block: .1em 0;
     margin-inline-end: 1ch;
@@ -781,7 +784,7 @@ select {
   --hover-color: color-mix(currentColor 10%, transparent);
   --checked-color: color-mix(var(--graphical-fg) 50%, var(--box-bg));
   --active-color: color-mix(var(--graphical-fg) 75%, var(--box-bg));
-  --padding: calc(var(--rhythm, 1rlh) / 4);
+  --padding: 0.25rlh;
   --indented: 1em;
 
   &[multiple],
diff --git a/src/utils.css b/src/utils.css
index 8b3c580..9033401 100644
--- a/src/utils.css
+++ b/src/utils.css
@@ -28,10 +28,6 @@
   white-space: nowrap;
 }
 
-.all\:initial {
-  all: initial;
-}
-
 .bold { font-weight: bold }
 .italic {
   font-style: italic;
@@ -46,7 +42,7 @@
 }
 
 
-.main-font, .primary-font { font-family: var(--main-font) }
+.main-font { font-family: var(--main-font) }
 .secondary-font { font-family: var(--secondary-font) }
 .display-font { font-family: var(--display-font) }
 .mono-font, .monospace { font-family: var(--mono-font) }
@@ -54,7 +50,7 @@
 .massivetext {
   --eff-line-length:
     min(
-      calc(var(--full-width) - (2 * var(--rhythm, 1rlh))),
+      calc(var(--full-width) - 2rlh),
       var(--line-length)
     );
   font-size: calc(.13 * var(--eff-line-length));
@@ -106,10 +102,11 @@
   .block\@print {
     display: block;
 
+    /* TODO: Do we need to add the new grid util here? */
     & :is(
-      .f-row, .flex-row, .f-col,
-      .flex-column, .f-switch, .flex-switch,
-      .grid
+      .flex-row,
+      .flex-column,
+      .flex-switch
     ) > * { margin: revert; }
   }
 
diff --git a/src/variables.css b/src/variables.css
index caf72e8..1b988d7 100644
--- a/src/variables.css
+++ b/src/variables.css
@@ -34,9 +34,15 @@
   --muted-accent: light-dark(var(--blue-7), var(--blue-5)); /* Muted accent color. Will not be used for text. */
 
   /* Lengths */
-  --rhythm: 1.4rem; /* Deprecated, but must provide in case people use it in calc() */
   --line-length: 40rem; /* Maximum line length for prose. */
   --input-inline-size: 20ch; /* Default size for text inputs and selects. */
+  --card-length: 18rem; /* Default length for cards. */
+
+  /* Widths */
+  --full-width: 100vi;
+  --sidebar-width: 25ch;
+  --wcag-target-size-aa: 24px;
+  --wcag-target-size-aaa: 44px;
 
   /* Borders */
   --border-width: 1px; /* Single value; set for uniform border widths */
@@ -82,12 +88,6 @@
   /* Density */
   --density: 1;
 
-  /* Width */
-  --full-width: 100vi;
-  --sidebar-width: 25ch;
-  --wcag-target-size-aa: 24px;
-  --wcag-target-size-aaa: 44px;
-
   /* Icons: https://lucide.dev/ */
   --chevron-down-icon: url(
     'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>'
@@ -103,13 +103,6 @@
   );
 }
 
-:root:not(:has(meta[name=color-scheme])) {
-  /* Deprecated classes */
-  &.-dark-theme    { color-scheme: dark  }
-  &.-no-dark-theme { color-scheme: light }
-  &:not(.-dark-theme, .-no-dark-theme) { color-scheme: light dark }
-}
-
 * {
-  --gap: calc(var(--rhythm, 1rlh) * var(--density));
+  --gap: calc(1rlh * var(--density));
 }
diff --git a/www/_includes/layout.vto b/www/_includes/layout.vto
index cb3c6cb..384cce0 100644
--- a/www/_includes/layout.vto
+++ b/www/_includes/layout.vto
@@ -3,6 +3,7 @@
 <head>
 	<meta charset=utf-8>
 	<meta name=viewport content="width=device-width">
+	<meta name=color-scheme content="light dark">
 
 	<title>missing.css</title>
 
diff --git a/www/demos/grid.html b/www/demos/grid.html
deleted file mode 100644
index 6c82dc1..0000000
--- a/www/demos/grid.html
+++ /dev/null
@@ -1,10 +0,0 @@
----
-draft: true
-title: Grid
----
-
-<div class="box grid grid-even-rows">
-	<div class="info box" data-cols="1"   data-rows="1 2">Sidebar  </div>
-	<div class="info box" data-cols="2 4" data-rows="1 3">Main     </div>
-	<div class="info box" data-cols="5 6" data-rows="2" data-cols@s="2 4" data-rows@s="4">Auxiliary</div>
-</div>
diff --git a/www/docs/60-variables.md b/www/docs/60-variables.md
index 766103c..21a90fd 100644
--- a/www/docs/60-variables.md
+++ b/www/docs/60-variables.md
@@ -109,10 +109,6 @@ these are grouped together at the bottom, in addition to being mentioned in the
 
 ## Lengths
 
-<dfn>~~`--rhythm`~~</dfn> {#var-rhythm}
-:   ~~Vertical rhythm, line height.~~ **Deprecated:**{.bad .color} Will be removed in version 2.0.
-    Set a value for the `line-height`{.token .attr-name} property on the `html` element instead.
-
 <dfn>`--line-length`</dfn> {#var-line-length}
 :   Maximum line length for prose.
 
@@ -121,6 +117,10 @@ these are grouped together at the bottom, in addition to being mentioned in the
     Defaults to `20ch`{.token .attr-value}.
     Can be overridden by using `<input size=n>`{.language-html}, `<textarea cols=n>`{.language-html}, or `.wide-inputs`{.language-css}.
 
+<dfn>`--card-length`</dfn> {#var-input-inline-size}
+:   The `inline-size`{.token .attr-name} for `.layout-grid` children.
+    Defaults to `18rem`{.token .attr-value}.
+
 
 ## Borders
 
@@ -265,20 +265,12 @@ these are grouped together at the bottom, in addition to being mentioned in the
 :   Sets the width of the sidebar for the `.sidebar-layout` component.
     Default is `25ch`{.token .attr-value}.
 
-<dfn>`--grid-row-width`</dfn> {#var-grid-row-width}
-:   Sets the width of a row in a `.grid`.
-    Default is `1fr`{.token .attr-value}.
-
-<dfn>`--grid-col-width`</dfn> {#var-grid-col-width}
-:   Sets the width of a column in a `.grid`.
-    Default is `1fr`{.token .attr-value}.
-
-<dfn>`--sidebar-width`</dfn> {#var-sidebar-width}
-:   Sets the width of the sidebar for the `.sidebar-layout` component.
-    Default is `25ch`{.token .attr-value}.
-
 <dfn>`--sidenote-width`</dfn> {#var-sidenote-width}
 :   Sets the width of a `<small role=note>`{.language-html} sidenote.
     Default is `20ch`{.token .attr-value}.
 
+<dfn>`--cell-length`</dfn> {#var-cell-length}
+:   Sets the width of a cell inside the `.layout-grid` container.
+    Default is `--card-length`{.token .attr-value}.
+
 [colorway]: /docs/colorways
diff --git a/www/docs/70-layout.md b/www/docs/70-layout.md
index 3e29246..32090f8 100644
--- a/www/docs/70-layout.md
+++ b/www/docs/70-layout.md
@@ -205,69 +205,6 @@ Borders can be removed by using <dfn>`.border:none`</dfn> or one of the followin
 {.textcolumns}
 
 
-***
-
-~~The <dfn>`.nested-list`</dfn> class removes extraneous margins in nested lists.~~
-**Deprecated:**{.bad .color} Will be removed in version 2.0.
-In the future, nested lists will not have margins by default.
-You can add them back in using `<li><p>`{.language-html} as needed.
-
-<figure>
-<figcaption><sub-title class="allcaps">Example<v-h>: </v-h></sub-title>Nested list markup</figcaption>
-
-  ~~~html
-  <div class="flex-switch">
-    <div>
-      <strong>Regular list</strong>
-      <ul><li>Items
-          <ul><li>Item 1
-              <li>Item 2</ul>
-          <li>Widgets
-          <ul><li>Widget 1
-              <li>Widget 2</ul>
-      </ul>
-    </div>
-    <div>
-      <strong>Nested list</strong>
-      <ul class="nested-list">
-        <li>Items
-          <ul><li>Item 1
-              <li>Item 2</ul>
-        <li>Widgets
-          <ul><li>Widget 1
-              <li>Widget 2</ul>
-      </ul>
-    </div>
-  </div>
-  ~~~
-
-  <div class="flex-switch">
-    <div>
-      <strong>Regular list</strong>
-      <ul><li>Items
-          <ul><li>Item 1
-              <li>Item 2</ul>
-          <li>Widgets
-          <ul><li>Widget 1
-              <li>Widget 2</ul>
-      </ul>
-    </div>
-    <div>
-      <strong>Nested list</strong>
-      <ul class="nested-list">
-        <li>Items
-          <ul><li>Item 1
-              <li>Item 2</ul>
-        <li>Widgets
-          <ul><li>Widget 1
-              <li>Widget 2</ul>
-      </ul>
-    </div>
-  </div>
-
-</figure>
-
-
 ## Aspect Ratio
 
 To set the aspect ratio of an element, use the `aspect-ratio`{.token .attr-name} CSS property:
diff --git a/www/docs/80-utils.md b/www/docs/80-utils.md
index 46543e7..7a58b4c 100644
--- a/www/docs/80-utils.md
+++ b/www/docs/80-utils.md
@@ -114,10 +114,6 @@ You can set `--density` yourself in inline styles or your own CSS:
 <dfn>`.main-font`</dfn>
 :   Renders the text in the main font (`--main-font`).
 
-<dfn>~~`.primary-font`~~</dfn>
-:   **Deprecated:**{.bad .color} Will be removed in version 2.0.
-    Use `.main-font` instead.
-
 <dfn>`.secondary-font`</dfn>
 :   Renders the text in the secondary font (`--secondary-font`).
 
@@ -223,8 +219,6 @@ The following classes can be used to make one element look like another:
 To get a smaller font size, use the `.<small>` masquerade.
 
 The <dfn>`.<big>`</dfn> class makes things bigger, with special treatment for some elements.
-**Deprecated:**{.bad .color} We have converted our `.big` class to a masquerade in honor of W3C deprecating the `<big>`{.language-html} HTML tag.
-The <dfn>`.big`</dfn> class will be removed in version 2.0.
 
 <figure>
 <figcaption><sub-title class="allcaps">Example<v-h>: </v-h></sub-title>Masquerade markups</figcaption>
@@ -265,26 +259,25 @@ The <dfn>`.big`</dfn> class will be removed in version 2.0.
 ## Theme selection
 
 By default, missing.css applies a light or dark theme based on the visitor's OS settings.
-To force the theme independently of `@prefers-color-scheme`{.language-css} you can use the following:
-
-~~Add the <dfn>`.-dark-theme`</dfn> class to your root element to use the dark theme.~~
-**Deprecated:**{.bad .color} Will be removed in version 2.0.
-Use `<meta name=color-scheme content=dark>`{.language-html} instead.
+To force the theme, you can set `color-scheme: light`{.language-css} or `color-scheme: dark`{.language-css} on the `html` element.
 
-~~Add the <dfn>`.-no-dark-theme`</dfn> class to your root element to use the light theme.~~
-**Deprecated:**{.bad .color} Will be removed in version 2.0.
-Use `<meta name=color-scheme content=light>`{.language-html} instead.
+It is recommended that you include a `<meta name=color-scheme content="light dark">`{.language-html} tag in the `<head>`{.language-html} of your document.
+This allows the browser to render form controls and other native elements in the appropriate colors before the CSS is loaded.
 
 <figure>
 <figcaption><sub-title class="allcaps">Example<v-h>: </v-h></sub-title>Theme toggle markup</figcaption>
 
-  ~~~ html
-  <style>
-    :root:has([name=theme][value=light]:checked) { color-scheme: light      }
-    :root:has([name=theme][value=dark]:checked)  { color-scheme: dark       }
-    :root:has([name=theme][value=auto]:checked)  { color-scheme: light dark }
-  </style>
+  ~~~ css
+  /* style.css */
+  html {
+    &:has([name=theme][value=light]:checked) { color-scheme: light      }
+    &:has([name=theme][value=dark]:checked)  { color-scheme: dark       }
+    &:has([name=theme][value=auto]:checked)  { color-scheme: light dark }
+  }
+  ~~~
 
+  ~~~ html
+  <!-- page.html -->
   <fieldset>
     <legend>Select theme</legend>
     <div>
@@ -298,9 +291,11 @@ Use `<meta name=color-scheme content=light>`{.language-html} instead.
   <hr>
 
   <style>
-    :root:has([name=theme][value=light]:checked) { color-scheme: light      }
-    :root:has([name=theme][value=dark]:checked)  { color-scheme: dark       }
-    :root:has([name=theme][value=auto]:checked)  { color-scheme: light dark }
+    html {
+      &:has([name=theme][value=light]:checked) { color-scheme: light      }
+      &:has([name=theme][value=dark]:checked)  { color-scheme: dark       }
+      &:has([name=theme][value=auto]:checked)  { color-scheme: light dark }
+    }
   </style>
   <fieldset>
     <legend>Select theme</legend>
@@ -324,13 +319,6 @@ Until browser support for detecting vertical writing modes has improved,
 [progress bars]: /docs/forms/#progress-bars
 
 
-## Reset
-    
-~~Use the <dfn>`.all:initial`</dfn> class to reset all CSS properties on an
-element and return it to its browser-default styles.~~
-**Deprecated:**{.bad .color} Will be removed in version 2.0.
-
-
 ## Print
 
 The following utilities can be used to fine-tune the display of your webpage when it is being printed.
diff --git a/www/docs/90-flex.md b/www/docs/90-flex.md
index c7583ef..c1083a5 100644
--- a/www/docs/90-flex.md
+++ b/www/docs/90-flex.md
@@ -22,9 +22,6 @@ Pair this with `.flex-wrap:wrap-reverse` to reverse the order when displayed as
 
 All of `.flex-row`, `.flex-column` and `.flex-switch` will remove margins from their children, and have a [gap] set to `--gap`.
 
-**Deprecated:**{.bad .color} The original names for these classes, `.f-row`, `.f-col`, and `.f-switch` (as well as `--f-switch-threshold`), have been deprecated in favor of the more intuitive names given above.
-The original names will be removed in version 2.0.
-
 [gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
 
 
diff --git a/www/docs/A0-grid.md b/www/docs/A0-grid.md
index c82ae43..3754cde 100644
--- a/www/docs/A0-grid.md
+++ b/www/docs/A0-grid.md
@@ -5,53 +5,176 @@ url: ./grid/
 
 # Grid
 
-To create a CSS Grid-based layout in missing.css, use the <dfn>`.grid`</dfn> class.
+To create CSS Grid-based layouts in missing.css, we offer a small but powerful collection of utility classes.
 
-By default, the grid will have equal-width columns but uneven rows.
-To override these, you have the <dfn>`.grid-even-rows`</dfn> and <dfn>`.grid-variable-cols`</dfn> classes.
+<details>
+  <summary>Contents:</summary>
 
-To specify the row and column an element should occupy, use the `data-cols`{.token .attr-name} and `data-rows`{.token .attr-name} attributes:
+  [[toc]]
 
-`data-cols="1"`
-:   Element will take up first column, next available row
+</details>
 
-`data-cols="1 3"`
-:   Element will take up columns 1 to 3 (both 1 and 3 included), next available row
+## Layout grid
 
-`data-cols="1 3" data-rows="2 3"`
-:   Element will take up a 3&times;2 space, with a 1 column gap above
+<dfn>`.layout-grid`</dfn> is a responsive grid container that can be used for custom layouts.
+Authors are responsible for defining `grid-template`{.token .attr-name} for the `.layout-grid` element,
+as well as `grid-area`{.token .attr-name} on the grid cells.
+On smaller screens, the container will stack its children vertically.
 
-**Warning**:&emsp;Our column specifications are based on _rows_, not _lines_.
-This means `<div data-cols="1 2">`{.language-html} spans two columns, as opposed to `grid-column: 1 / 2;`{.language-css} which spans only one.
-{.box .warn}
+**Tip**:&emsp;In browsers that [support the new expanded `attr()` function][attr],
+missing.css will set `grid-area`{.token .attr-name} values for you based on their `id`{.token .attr-name} attribute.
+Until support is more widespread, we recommend setting `<el style="grid-area: foo">`{.language-html} on the grid cells.
+{.info .box}
 
-We support columns up to 12.
+[attr]: https://caniuse.com/css3-attr
 
-To change the layout based on viewport size,
-add `@s` (small, &le;768px) or `@l` (large, &ge;1024px) to the end of the attributes:
+<figure>
+<figcaption><sub-title class="allcaps">Example<v-h>: </v-h></sub-title>Layout grid markup</figcaption>
+
+  ~~~ html
+  <article class="crowded info box layout-grid" style="
+    grid-template:
+      'image title' auto
+      'image desc'  1fr
+      /auto  1fr;
+  ">
+      <img style="grid-area: image" src="https://placebear.com/100/100" alt="Placeholder image">
+      <h2  style="grid-area: title">Title</h2>
+      <p   style="grid-area: desc">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Donec a diam lectus.
+      Sed sit amet ipsum mauris.
+      Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
+      Donec et mollis dolor.
+  </article>
+  ~~~
+
+  <hr>
+
+  <article class="crowded info box layout-grid" style="
+    grid-template:
+      'image title' auto
+      'image desc'  1fr
+      /auto  1fr;
+  ">
+      <img style="grid-area: image" src="https://placebear.com/100/100" alt="Placeholder image">
+      <h2  style="grid-area: title">Title</h2>
+      <p   style="grid-area: desc">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Donec a diam lectus.
+      Sed sit amet ipsum mauris.
+      Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
+      Donec et mollis dolor.
+  </article>
+
+</figure>
+
+## Flow grid
+
+The <dfn>`.flow-grid`</dfn> is an auto-wrapping grid container that can be used for cards.
+Column size is determined by the `--cell-length` variable, which defaults to `--card-length`.
+On smaller screens, the grid will collapse into a single column.
 
-`data-cols@s="1" data-cols="1 2" data-cols@l="1 3"`
-:   Element will take 1 column in small screens, 2 columns on medium screens and 3 on large screens.
+<figure>
+<figcaption><sub-title class="allcaps">Example<v-h>: </v-h></sub-title>Flow grid markup</figcaption>
+
+  ~~~ html
+  <style>
+    .flow-grid > img { --border-radius: 50%; }
+  </style>
+  <div class="flow-grid" style="--cell-length: 20ch;">
+    <article class="crowded info box flex-column align-items:center">
+      <img src="https://placebear.com/100/100" alt="Profile picture" class="border">
+      <h2>Bear Name</h2>
+      <p class="<small>">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Donec a diam lectus.
+      Sed sit amet ipsum mauris.
+    </article>
+    <!-- ... -->
+  </div>
+  ~~~
+
+  <hr>
+
+  <style>
+    .flow-grid > img { --border-radius: 50%; }
+  </style>
+  <div class="flow-grid" style="--cell-length: 20ch;">
+    <article class="crowded info box flex-column align-items:center">
+      <img src="https://placebear.com/100/100" alt="Profile picture" class="border" style="--border-radius: 50%">
+      <h2>Bear Name</h2>
+      <p class="<small>">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Donec a diam lectus.
+      Sed sit amet ipsum mauris.
+    </article>
+    <article class="crowded info box flex-column align-items:center">
+      <img src="https://placebear.com/101/101" alt="Profile picture" class="border" style="--border-radius: 50%">
+      <h2>Bear Name</h2>
+      <p class="<small>">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Donec a diam lectus.
+      Sed sit amet ipsum mauris.
+    </article>
+    <article class="crowded info box flex-column align-items:center">
+      <img src="https://placebear.com/102/102" alt="Profile picture" class="border" style="--border-radius: 50%">
+      <h2>Bear Name</h2>
+      <p class="<small>">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Donec a diam lectus.
+      Sed sit amet ipsum mauris.
+    </article>
+    <article class="crowded info box flex-column align-items:center">
+      <img src="https://placebear.com/103/103" alt="Profile picture" class="border" style="--border-radius: 50%">
+      <h2>Bear Name</h2>
+      <p class="<small>">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Donec a diam lectus.
+      Sed sit amet ipsum mauris.
+    </article>
+  </div>
+</figure>
 
-To change the layout for printing, add `@p` to the end of the attributes.
+## Row grid
+<dfn>`.row-grid`</dfn> can be used to create a compact row of equal-width cells.
+On smaller screens, the items are stacked.
+Can be combined with `.margin-block:auto` to center the items in the block direction.
 
 <figure>
-<figcaption><sub-title class="allcaps">Example<v-h>: </v-h></sub-title>Grid markup for even rows</figcaption>
+<figcaption><sub-title class="allcaps">Example<v-h>: </v-h></sub-title>Row grid markup</figcaption>
 
   ~~~ html
-  <div class="grid grid-even-rows">
-    <div class="box info" data-cols="1 2" data-rows="1 2">Sidebar  </div>
-    <div class="box info" data-cols="3 5" data-rows="1 3">Main     </div>
-    <div class="box info" data-cols="6" data-rows="2" data-cols@s="3 5" data-rows@s="4">Aux</div>
+  <div class="flex-column">
+    <h1>Welcome to my call to action blurb!</h1>
+    <p>
+    This is the actual blurb of the call to action blurb.
+    <!-- ... -->
+    <div class="row-grid">
+      <a href=# class="<big> ok <button>">Click me!</a>
+      <a href=# class="<big> info <button>">No wait, click me</a>
+    </div>
   </div>
   ~~~
 
   <hr>
 
-  <div class="grid grid-even-rows">
-    <div class="box info" data-cols="1 2" data-rows="1 2">Sidebar  </div>
-    <div class="box info" data-cols="3 5" data-rows="1 3">Main     </div>
-    <div class="box info" data-cols="6" data-rows="2" data-cols@s="3 5" data-rows@s="4">Aux</div>
+  <div class="flex-column">
+    <h1>Welcome to my call to action blurb!</h1>
+    <p>
+    This is the actual blurb of the call to action blurb.
+    You can tell because it's blurb-y and you feel called to take action.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Donec a diam lectus.
+    Sed sit amet ipsum mauris.
+    Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
+    Donec et mollis dolor.
+    <p>
+    So take action and click one of the action buttons below.
+    <div class="row-grid">
+      <a href=# class="<big> ok <button>">Click me!</a>
+      <a href=# class="<big> info <button>">No wait, click me</a>
+    </div>
   </div>
 
 </figure>