diff --git a/assets/sass/_init.scss b/assets/sass/_init.scss
index 5bf4baa..ca3f33d 100644
--- a/assets/sass/_init.scss
+++ b/assets/sass/_init.scss
@@ -13,6 +13,7 @@
 // Mixins and functions.
 @import 'mixins/breakpoint/respond-to';
 @import 'mixins/clearfix/clearfix';
+@import 'mixins/debug/debug';
 @import 'mixins/flex-calc/flex-calc';
 @import 'mixins/image-url/image-url';
 @import 'mixins/rtl/rtl';
diff --git a/assets/sass/_reset.scss b/assets/sass/_reset.scss
new file mode 100644
index 0000000..020bffb
--- /dev/null
+++ b/assets/sass/_reset.scss
@@ -0,0 +1,111 @@
+// stylelint-disable property-no-vendor-prefix
+// Reset browsers to some sane defaults.
+
+// Document
+
+html {
+  // Prevent adjustments of font size.
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+  // On short pages, we want any background gradients to fill the entire height
+  // of the browser.
+  min-height: 100%;
+  // Use the saner border-box model.
+  box-sizing: border-box;
+  // Use smooth scrolling.
+  scroll-behavior: smooth;
+  // Improve text rendering.
+  -webkit-font-smoothing: antialiased;
+}
+
+// Use the saner border-box model for all elements.
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+// Sections
+
+body {
+  // Remove the margin in all browsers.
+  margin: 0;
+  padding: 0;
+}
+
+// Embedded content
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+img,
+svg {
+  height: auto;
+}
+
+// Form defaults.
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  max-width: 100%;
+}
+
+label {
+  display: block;
+  font-weight: var(--fw-bold);
+}
+
+[type='search'] {
+  // Correct the odd appearance in Chrome and Safari.
+  -webkit-appearance: textfield;
+  // Correct the outline style in Safari.
+  outline-offset: -2px;
+}
+
+// Text-level semantics
+//
+// The elements in this section give semantics to inline text.
+
+// Code
+
+code,
+kbd,
+samp {
+  color: var(--color-code);
+  font-family: var(--ff-monospace);
+}
+
+// Mark text
+
+mark {
+  @extend %highlight-mark;
+}
+
+// Superscript / Subscript
+
+sub,
+sup {
+  // Prevent `sub` and `sup` elements from affecting the line height in
+  // all browsers.
+  font-size: var(--fs-xs);
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  top: -.5em;
+}
diff --git a/assets/sass/reset/_reset.scss b/assets/sass/base/_base.scss
similarity index 60%
rename from assets/sass/reset/_reset.scss
rename to assets/sass/base/_base.scss
index 2b69ccf..e5b9f29 100644
--- a/assets/sass/reset/_reset.scss
+++ b/assets/sass/base/_base.scss
@@ -1,11 +1,9 @@
-// Reset browsers to some sane defaults.
+// Base styles.
 
 // Broken into modular pieces to make it easier to edit.
 @import 'document/document';
-@import 'embedded/embedded';
 @import 'forms/forms';
 @import 'grouping/grouping';
+@import 'headings/headings';
 @import 'links/links';
-@import 'sections/sections';
 @import 'tables/tables';
-@import 'text/text';
diff --git a/assets/sass/base/document/_document.scss b/assets/sass/base/document/_document.scss
new file mode 100644
index 0000000..5a25cc5
--- /dev/null
+++ b/assets/sass/base/document/_document.scss
@@ -0,0 +1,18 @@
+// Document
+
+html {
+  // Change the default font family in all browsers.
+  font-family: var(--ff-body);
+  // Set base font size in percent.
+  font-size: calc(#{$base-font-size} / 16 * 100%);
+  // Correct the line height in all browsers.
+  line-height: $base-line-height;
+  // Set text colour.
+  color: var(--color-text);
+}
+
+body {
+  // Output a horizontal grid to help with debugging typography. The
+  // $debug variable will toggle its output.
+  @include debug-grid();
+}
diff --git a/assets/sass/base/forms/_forms.scss b/assets/sass/base/forms/_forms.scss
new file mode 100644
index 0000000..5a52a70
--- /dev/null
+++ b/assets/sass/base/forms/_forms.scss
@@ -0,0 +1,53 @@
+// stylelint-disable property-no-vendor-prefix
+
+// Form defaults.
+
+form {
+  // Add vertical rhythm margins.
+  @include margin-block(1);
+
+  // Set max text line width in main for readability.
+  .main & {
+    max-width: var(--max-line-width);
+  }
+}
+
+input,
+button,
+textarea,
+select {
+  @include margin-bottom(.75);
+}
+
+label {
+  &:has(+ :required) {
+    &::after {
+      content: '*';
+      color: var(--color-mark-highlight);
+    }
+  }
+}
+
+fieldset {
+  border: 1px solid var(--color-border);
+}
+
+input {
+  // Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
+  // stylelint-disable-next-line function-name-case
+  width: Min(20em, 100%);
+}
+
+[type='text'],
+textarea {
+  // Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
+  // stylelint-disable-next-line function-name-case
+  width: Min(30em, 100%);
+}
+
+input:not(:only-of-type),
+textarea {
+  & + [type='submit'] {
+    display: block;
+  }
+}
diff --git a/assets/sass/reset/grouping/_grouping.scss b/assets/sass/base/grouping/_grouping.scss
similarity index 82%
rename from assets/sass/reset/grouping/_grouping.scss
rename to assets/sass/base/grouping/_grouping.scss
index b525312..14e9e10 100644
--- a/assets/sass/reset/grouping/_grouping.scss
+++ b/assets/sass/base/grouping/_grouping.scss
@@ -25,6 +25,11 @@ ul,
 menu {
   // Add vertical rhythm margins.
   @include margin-block(1);
+
+  // Set max text line width in main for readability.
+  .main & {
+    max-width: var(--max-line-width);
+  }
 }
 
 dd {
@@ -71,14 +76,20 @@ hr {
 
 // Paragraphs
 
-p,
-pre {
+p {
   // Add vertical rhythm margins.
   @include margin-block(.75);
+
+  // Set max text line width in main for readability.
+  .main & {
+    max-width: var(--max-line-width);
+  }
 }
 
 // Preformatted text
 
 pre {
+  // Add vertical rhythm margins.
+  @include margin-block(.75);
   font-family: var(--ff-monospace);
 }
diff --git a/assets/sass/reset/sections/_sections.scss b/assets/sass/base/headings/_headings.scss
similarity index 75%
rename from assets/sass/reset/sections/_sections.scss
rename to assets/sass/base/headings/_headings.scss
index e1672ed..67f4bcf 100644
--- a/assets/sass/reset/sections/_sections.scss
+++ b/assets/sass/base/headings/_headings.scss
@@ -1,11 +1,3 @@
-// Sections
-
-body {
-  // Remove the margin in all browsers.
-  margin: 0;
-  padding: 0;
-}
-
 // Headings
 //
 // All HTML headings, `<h1>` through `<h6>`, are available. `%h1` through `%h6`
@@ -23,11 +15,16 @@ h5,
 %h5,
 h6,
 %h6 {
-  @include margin-block(1);
+  @include margin-block(1 .5);
   color: var(--color-headings);
   font-family: var(--ff-headings);
   font-weight: var(--fw-headings);
   line-height: var(--heading-line-height);
+
+  // Set max text line width in main for readability.
+  .main & {
+    max-width: var(--max-line-width);
+  }
 }
 
 h1,
@@ -59,18 +56,3 @@ h6,
 %h6 {
   font-size: var(--fs-xs);
 }
-
-// Set max text line width for readability.
-.main {
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  ul,
-  ol,
-  dl,
-  p {
-    max-width: var(--max-line-width);
-  }
-}
diff --git a/assets/sass/reset/links/_links.scss b/assets/sass/base/links/_links.scss
similarity index 100%
rename from assets/sass/reset/links/_links.scss
rename to assets/sass/base/links/_links.scss
diff --git a/assets/sass/reset/tables/_tables.scss b/assets/sass/base/tables/_tables.scss
similarity index 100%
rename from assets/sass/reset/tables/_tables.scss
rename to assets/sass/base/tables/_tables.scss
diff --git a/assets/sass/reset/document/_document.scss b/assets/sass/reset/document/_document.scss
deleted file mode 100644
index 69d89f9..0000000
--- a/assets/sass/reset/document/_document.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-// stylelint-disable property-no-vendor-prefix
-
-// Document
-
-html {
-  // Change the default font family in all browsers.
-  font-family: var(--ff-body);
-  // Set base font size in percent.
-  font-size: calc(#{$base-font-size} / 16 * 100%);
-  // Correct the line height in all browsers.
-  line-height: $base-line-height;
-  // Set text colour.
-  color: var(--color-text);
-  // Prevent adjustments of font size.
-  -webkit-text-size-adjust: none;
-  text-size-adjust: none;
-  // On short pages, we want any background gradients to fill the entire height
-  // of the browser.
-  min-height: 100%;
-  // Use the saner border-box model.
-  box-sizing: border-box;
-  // Use smooth scrolling.
-  scroll-behavior: smooth;
-  // Improve text rendering.
-  -webkit-font-smoothing: antialiased;
-}
-
-// Use the saner border-box model for all elements.
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
diff --git a/assets/sass/reset/embedded/_embedded.scss b/assets/sass/reset/embedded/_embedded.scss
deleted file mode 100644
index 4e096fb..0000000
--- a/assets/sass/reset/embedded/_embedded.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// Embedded content
-
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-width: 100%;
-}
-
-img,
-svg {
-  height: auto;
-}
diff --git a/assets/sass/reset/forms/_forms.scss b/assets/sass/reset/forms/_forms.scss
deleted file mode 100644
index 268846f..0000000
--- a/assets/sass/reset/forms/_forms.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-// stylelint-disable property-no-vendor-prefix
-
-// Form defaults.
-
-form {
-  // Add vertical rhythm margins.
-  @include margin-block(1);
-}
-
-input,
-button,
-textarea,
-select {
-  font: inherit;
-  max-width: 100%;
-}
-
-label {
-  display: block;
-  font-weight: var(--fw-bold);
-}
-
-fieldset {
-  border: 1px solid var(--color-border);
-}
-
-[type='search'] {
-  // Correct the odd appearance in Chrome and Safari.
-  -webkit-appearance: textfield;
-  // Correct the outline style in Safari.
-  outline-offset: -2px;
-}
diff --git a/assets/sass/reset/text/_text.scss b/assets/sass/reset/text/_text.scss
deleted file mode 100644
index f430194..0000000
--- a/assets/sass/reset/text/_text.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-// Text-level semantics
-//
-// The elements in this section give semantics to inline text.
-
-// Code
-
-code,
-kbd,
-samp {
-  color: var(--color-code);
-  font-family: var(--ff-monospace);
-}
-
-// Mark text
-
-mark {
-  @extend %highlight-mark;
-}
-
-// Superscript / Subscript
-
-sub,
-sup {
-  // Prevent `sub` and `sup` elements from affecting the line height in
-  // all browsers.
-  font-size: var(--fs-xs);
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -.25em;
-}
-
-sup {
-  top: -.5em;
-}