Split sass reset dir in to reset file and base dir.

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';

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;
+}

assets/sass/base/_base.scss

@@ -0,0 +1,9 @@
+// Base styles.
+
+// Broken into modular pieces to make it easier to edit.
+@import 'document/document';
+@import 'forms/forms';
+@import 'grouping/grouping';
+@import 'headings/headings';
+@import 'links/links';
+@import 'tables/tables';

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();
+}

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;
+  }
+}

assets/sass/base/grouping/_grouping.scss

@@ -0,0 +1,95 @@
+// Grouping content
+
+// Block quotes
+//
+// The `<blockquote>` element is for quoting blocks of content from another
+// source within your document. Wrap the `<blockquote>` around any <abbr
+// title="HyperText Markup Language">HTML</abbr> as the quote. For straight
+// quotes, we recommend a `<p>`.
+//
+// Optionally, add a `<footer>` to identify the source of the quote, wrapping
+// the name of the source work in `<cite>`.
+
+blockquote {
+  // Add vertical rhythm margins.
+  @include margin-block(1);
+  // Also indent the quote on both sides.
+  margin-inline: var(--indent-amount);
+}
+
+// Lists
+
+dl,
+ol,
+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 {
+  margin: 0 0 0 var(--indent-amount);
+
+  @include rtl {
+    margin: 0 var(--indent-amount) 0 0;
+  }
+}
+
+ol,
+ul,
+menu {
+  padding: 0 0 0 var(--indent-amount);
+
+  @include rtl {
+    padding: 0 var(--indent-amount) 0 0;
+  }
+
+  // Turn off margins on nested lists.
+  ol,
+  ul,
+  menu {
+    margin: 0;
+  }
+}
+
+// Figures
+
+figure {
+  // Add vertical rhythm margins.
+  @include margin-block(1);
+
+  // Remove defult inline margins.
+  @include margin-inline(0);
+}
+
+// Horizontal rule
+
+hr {
+  @extend %divider;
+  height: 0;
+}
+
+// Paragraphs
+
+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);
+}

assets/sass/base/headings/_headings.scss

@@ -0,0 +1,58 @@
+// Headings
+//
+// All HTML headings, `<h1>` through `<h6>`, are available. `%h1` through `%h6`
+// classes are also available, for when you want to match the font styling of a
+// heading but not be a heading.
+h1,
+%h1,
+h2,
+%h2,
+h3,
+%h3,
+h4,
+%h4,
+h5,
+%h5,
+h6,
+%h6 {
+  @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,
+%h1 {
+  font-size: var(--fs-xxl);
+}
+
+h2,
+%h2 {
+  font-size: var(--fs-xl);
+}
+
+h3,
+%h3 {
+  font-size: var(--fs-l);
+}
+
+h4,
+%h4 {
+  font-size: var(--fs-m);
+}
+
+h5,
+%h5 {
+  font-size: var(--fs-s);
+}
+
+h6,
+%h6 {
+  font-size: var(--fs-xs);
+}

assets/sass/base/links/_links.scss

@@ -0,0 +1,66 @@
+// Links
+//
+// Hyperlinks are used to allow the user to navigate to other resources or to
+// download a resource.
+//
+// The order of link states are based on Eric Meyer's article:
+// http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
+//
+// :visited - A link that has already been visited.
+// :hover   - A link that is being hovered over.
+// :focus   - A link that has been given keyboard focus.
+// :active  - A link that is being actively clicked.
+
+a,
+%link {
+  color: var(--color-link);
+}
+
+// Any element can receive focus, but only links can be visited, so we can
+// safely lower this selector's specificity. This also ensures visited links
+// with additional styles won't have their styles overridden.
+:visited {
+  color: var(--color-link-visited);
+}
+
+a:hover,
+a:focus {
+  color: var(--color-link-hover);
+}
+
+a:active {
+  color: var(--color-link-active);
+}
+
+.link-nav,
+%link-nav {
+  a {
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+}
+
+// Inverted links, for dark backgrounds.
+.link-inverted,
+%link-inverted {
+  a {
+    color: var(--color-link-inverted);
+
+    &:visited {
+      color: var(--color-link-visited-inverted);
+    }
+
+    &:hover,
+    &:focus {
+      color: var(--color-link-hover-inverted);
+    }
+
+    &:active {
+      color: var(--color-link-active-inverted);
+    }
+  }
+}

assets/sass/base/tables/_tables.scss

@@ -0,0 +1,19 @@
+// Tables
+//
+// The `<table>` element displays tabular data in rows, columns, and cells.
+
+table {
+  // Add vertical rhythm margins.
+  @include margin-block(1);
+  // Remove most spacing between table cells.
+  border-collapse: collapse;
+  border-spacing: 0;
+  // Prevent cramped-looking tables
+  width: 100%;
+}
+
+td,
+th {
+  // Remove most spacing between table cells.
+  padding: 0;
+}

assets/sass/reset/document/_document.scss

@@ -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;
-}

assets/sass/reset/embedded/_embedded.scss

@@ -1,15 +0,0 @@
-// Embedded content
-
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-width: 100%;
-}
-
-img,
-svg {
-  height: auto;
-}

assets/sass/reset/forms/_forms.scss

@@ -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;
-}

assets/sass/reset/text/_text.scss

@@ -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;
-}