Layout and typography improvements (#63)

* Adds soft hyphens to homepage

* auto-hyphenates!

* Tighter line-height in logo

* Fixes spacing and typography below xs breakpoint

* Fixes xs-sm spacing and typography

* Fixes border widths

* Link hover uses wavy underline instead of fat underline

* Fixes committee img layout on <xs

* Nice separators between committee members

* Better styling for committee member heading

* Consistent start-end block padding for sections

* Better breadcrumb styling

* Neatens alignment in footer

* Renames scss/variables -> scss/custom-properties

* Pulls out colours SCSS variables

* Merges margins and padding values

* Moves variables/colours -> values/colours

* Starts migrating spacing values to SCSS

* Pulls out typography logic to SCSS variables/functions

* Removes unneeded --er custom property

* Calculates grid-total-width-absolute in SCSS

* Forwards constants with @forward

* Removes TODOs and unnecessary assignment to --width-prose

77 files changed, 612 insertions, 268 deletions

diff --git a/scss/base/typography.scss b/scss/base/typography.scss
index 9f40bcc..4dd0afb 100644
--- a/scss/base/typography.scss
+++ b/scss/base/typography.scss
@@ -5,6 +5,7 @@ body {
   letter-spacing: 0.03rem;
   line-height: 1.5;
   word-wrap: break-word;
+  hyphens: auto;
 }
 
 h1 {
@@ -12,7 +13,7 @@ h1 {
 }
 
 h1:not(:first-child) {
-  margin-block-start: var(--margin-block-lg);
+  margin-block-start: var(--spacing-block-lg);
 }
 
 h2 {
@@ -20,7 +21,7 @@ h2 {
 }
 
 h2:not(:first-child) {
-  margin-block-start: var(--margin-block-lg);
+  margin-block-start: var(--spacing-block-lg);
 }
 
 h3 {
@@ -28,7 +29,7 @@ h3 {
 }
 
 h3:not(:first-child) {
-  margin-block-start: var(--margin-block-md);
+  margin-block-start: var(--spacing-block-md);
 }
 
 h4 {
@@ -36,7 +37,7 @@ h4 {
 }
 
 h4:not(:first-child) {
-  margin-block-start: var(--margin-block-sm);
+  margin-block-start: var(--spacing-block-sm);
 }
 
 h1,
@@ -53,7 +54,7 @@ h4 {
   font-family: var(--font-serif);
   font-size: var(--font-size-6);
   font-weight: 700;
-  margin-block-start: var(--margin-block-sm);
+  margin-block-start: var(--spacing-block-sm);
   text-wrap: balance;
 }
 
@@ -63,7 +64,7 @@ h4 {
 }
 
 :is(p, ol, ul):not(:first-child) {
-  margin-block-start: var(--margin-block-sm);
+  margin-block-start: var(--spacing-block-sm);
 }
 
 :is(p, h1, h2, h3, h4) {
diff --git a/scss/custom-properties/colours.scss b/scss/custom-properties/colours.scss
new file mode 100644
index 0000000..dadb50e
--- /dev/null
+++ b/scss/custom-properties/colours.scss
@@ -0,0 +1,23 @@
+@use '../values/colours' as colours;
+
+:root {
+  --text-color: #{colours.$primary-98};
+  --text-highlight-color: #{colours.$primary-10};
+  --background-color: #{colours.$primary-10};
+  --background-highlight-color: #{colours.$primary-90};
+  --special-text-color: #{colours.$secondary-90};
+  --special-text-highlight-color: #{colours.$secondary-10};
+}
+
+:is(main, article) {
+  --text-color: #{colours.$primary-10};
+  --text-highlight-color: #{colours.$primary-90};
+  --background-color: #{colours.$primary-98};
+  --background-highlight-color: #{colours.$primary-10};
+  --special-text-color: #{colours.$secondary-40};
+  --special-text-highlight-color: #{colours.$secondary-90};
+}
+
+:is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) {
+    --background-color: #{colours.$primary-95};
+}
diff --git a/scss/custom-properties/index.lg.scss b/scss/custom-properties/index.lg.scss
new file mode 100644
index 0000000..2a36586
--- /dev/null
+++ b/scss/custom-properties/index.lg.scss
@@ -0,0 +1,3 @@
+@use 'spacing/lg' as *;
+@use 'typography/lg' as *;
+
diff --git a/scss/custom-properties/index.md.scss b/scss/custom-properties/index.md.scss
new file mode 100644
index 0000000..2367952
--- /dev/null
+++ b/scss/custom-properties/index.md.scss
@@ -0,0 +1,3 @@
+@use 'spacing/md' as *;
+@use 'typography/md' as *;
+
diff --git a/scss/custom-properties/index.scss b/scss/custom-properties/index.scss
new file mode 100644
index 0000000..e7279b6
--- /dev/null
+++ b/scss/custom-properties/index.scss
@@ -0,0 +1,3 @@
+@use 'colours' as *;
+@use 'spacing/initial' as *;
+@use 'typography/initial' as *;
diff --git a/scss/custom-properties/index.sm.scss b/scss/custom-properties/index.sm.scss
new file mode 100644
index 0000000..c1ddffe
--- /dev/null
+++ b/scss/custom-properties/index.sm.scss
@@ -0,0 +1,3 @@
+@use 'spacing/sm' as *;
+@use 'typography/sm' as *;
+
diff --git a/scss/custom-properties/index.xl.scss b/scss/custom-properties/index.xl.scss
new file mode 100644
index 0000000..14c55cf
--- /dev/null
+++ b/scss/custom-properties/index.xl.scss
@@ -0,0 +1,3 @@
+@use 'spacing/xl' as *;
+@use 'typography/xl' as *;
+
diff --git a/scss/custom-properties/index.xs.scss b/scss/custom-properties/index.xs.scss
new file mode 100644
index 0000000..32eb377
--- /dev/null
+++ b/scss/custom-properties/index.xs.scss
@@ -0,0 +1,3 @@
+@use 'spacing/xs' as *;
+@use 'typography/xs' as *;
+
diff --git a/scss/custom-properties/index.xxl.scss b/scss/custom-properties/index.xxl.scss
new file mode 100644
index 0000000..8555eee
--- /dev/null
+++ b/scss/custom-properties/index.xxl.scss
@@ -0,0 +1,3 @@
+@use 'spacing/xxl' as *;
+@use 'typography/xxl' as *;
+
diff --git a/scss/custom-properties/spacing/_mixins.scss b/scss/custom-properties/spacing/_mixins.scss
new file mode 100644
index 0000000..4e35ee7
--- /dev/null
+++ b/scss/custom-properties/spacing/_mixins.scss
@@ -0,0 +1,21 @@
+@use 'sass:map';
+
+@use '../../values/spacing' as spacing-values;
+
+@mixin spacing($breakpoint: initial) {
+  --spacing-inline-lg: #{spacing-values.spacing($direction: inline, $size: lg, $breakpoint: $breakpoint)};
+  --spacing-inline-md: #{spacing-values.spacing($direction: inline, $size: md, $breakpoint: $breakpoint)};
+  --spacing-inline-sm: #{spacing-values.spacing($direction: inline, $size: sm, $breakpoint: $breakpoint)};
+  --spacing-block-lg: #{spacing-values.spacing($direction: block, $size: lg, $breakpoint: $breakpoint)};
+  --spacing-block-md: #{spacing-values.spacing($direction: block, $size: md, $breakpoint: $breakpoint)};
+  --spacing-block-sm: #{spacing-values.spacing($direction: block, $size: sm, $breakpoint: $breakpoint)};
+}
+
+@mixin grid($breakpoint: initial) {
+  --grid-padding: #{spacing-values.grid-padding($breakpoint: $breakpoint)};
+  --grid-column-count: #{map.get(spacing-values.$grid-column-count, $breakpoint)};
+  --grid-column-width: #{spacing-values.grid-column-width($breakpoint: $breakpoint)};
+  --grid-gutter-width: #{spacing-values.grid-gutter-width($breakpoint: $breakpoint)};
+  --grid-prose-column-count: #{map.get(spacing-values.$grid-prose-column-count, $breakpoint)};
+  --grid-total-width: #{spacing-values.grid-total-width-absolute($breakpoint)};
+}
diff --git a/scss/custom-properties/spacing/initial.scss b/scss/custom-properties/spacing/initial.scss
new file mode 100644
index 0000000..a38388f
--- /dev/null
+++ b/scss/custom-properties/spacing/initial.scss
@@ -0,0 +1,14 @@
+@use 'sass:map';
+
+@use '../../values/spacing' as spacing-values;
+@use 'mixins';
+
+:root {
+  @include mixins.spacing();
+  @include mixins.grid();
+
+  --width-prose: calc(
+    var(--grid-column-width) * var(--grid-prose-column-count) +
+    var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1)
+  );
+}
diff --git a/scss/custom-properties/spacing/lg.scss b/scss/custom-properties/spacing/lg.scss
new file mode 100644
index 0000000..1e9b090
--- /dev/null
+++ b/scss/custom-properties/spacing/lg.scss
@@ -0,0 +1,7 @@
+@use 'mixins';
+@use '../../values/spacing' as spacing-values;
+
+:root {
+  // No need for spacing here, since it's the same as sm.
+  @include mixins.grid($breakpoint: lg);
+}
diff --git a/scss/custom-properties/spacing/md.scss b/scss/custom-properties/spacing/md.scss
new file mode 100644
index 0000000..99b9352
--- /dev/null
+++ b/scss/custom-properties/spacing/md.scss
@@ -0,0 +1,7 @@
+@use 'mixins';
+@use '../../values/spacing' as spacing-values;
+
+:root {
+  // No need for spacing here, since it's the same as sm.
+  @include mixins.grid($breakpoint: md);
+}
diff --git a/scss/custom-properties/spacing/sm.scss b/scss/custom-properties/spacing/sm.scss
new file mode 100644
index 0000000..0fdfcfe
--- /dev/null
+++ b/scss/custom-properties/spacing/sm.scss
@@ -0,0 +1,7 @@
+@use 'mixins';
+@use '../../values/spacing' as spacing-values;
+
+:root {
+  @include mixins.spacing($breakpoint: sm);
+  @include mixins.grid($breakpoint: sm);
+}
diff --git a/scss/custom-properties/spacing/xl.scss b/scss/custom-properties/spacing/xl.scss
new file mode 100644
index 0000000..265c6e9
--- /dev/null
+++ b/scss/custom-properties/spacing/xl.scss
@@ -0,0 +1,7 @@
+@use 'mixins';
+@use '../../values/spacing' as spacing-values;
+
+:root {
+  // No need for spacing here, since it's the same as sm.
+  @include mixins.grid($breakpoint: xl);
+}
diff --git a/scss/custom-properties/spacing/xs.scss b/scss/custom-properties/spacing/xs.scss
new file mode 100644
index 0000000..13a14d6
--- /dev/null
+++ b/scss/custom-properties/spacing/xs.scss
@@ -0,0 +1,7 @@
+@use 'mixins';
+@use '../../values/spacing' as spacing-values;
+
+:root {
+  @include mixins.spacing($breakpoint: xs);
+  @include mixins.grid($breakpoint: xs);
+}
diff --git a/scss/custom-properties/spacing/xxl.scss b/scss/custom-properties/spacing/xxl.scss
new file mode 100644
index 0000000..600f74e
--- /dev/null
+++ b/scss/custom-properties/spacing/xxl.scss
@@ -0,0 +1,7 @@
+@use 'mixins';
+@use '../../values/spacing' as spacing-values;
+
+:root {
+  // No need for spacing here, since it's the same as sm.
+  @include mixins.grid($breakpoint: xxl);
+}
diff --git a/scss/custom-properties/typography/_mixins.scss b/scss/custom-properties/typography/_mixins.scss
new file mode 100644
index 0000000..a370356
--- /dev/null
+++ b/scss/custom-properties/typography/_mixins.scss
@@ -0,0 +1,12 @@
+@use '../../values/typography' as typography-values;
+
+@mixin font-sizes($breakpoint: initial) {
+  --font-size-0: #{typography-values.font-size('0', $breakpoint)};
+  --font-size-1: #{typography-values.font-size('1', $breakpoint)};
+  --font-size-2: #{typography-values.font-size('2', $breakpoint)};
+  --font-size-3: #{typography-values.font-size('3', $breakpoint)};
+  --font-size-4: #{typography-values.font-size('4', $breakpoint)};
+  --font-size-5: #{typography-values.font-size('5', $breakpoint)};
+  --font-size-6: #{typography-values.font-size('6', $breakpoint)};
+}
+
diff --git a/scss/variables/typography.scss b/scss/custom-properties/typography/initial.scss
index f8515fd..c9d95da 100644
--- a/scss/variables/typography.scss
+++ b/scss/custom-properties/typography/initial.scss
@@ -1,11 +1,10 @@
+@use 'mixins';
+
+@use '../../values/typography' as typography-values;
+
 :root {
-  --font-size-0: calc(8 * var(--relative-eighth-rem));
-  --font-size-1: calc(8 * var(--relative-eighth-rem));
-  --font-size-2: calc(8 * var(--relative-eighth-rem));
-  --font-size-3: calc(8 * var(--relative-eighth-rem));
-  --font-size-4: calc(8 * var(--relative-eighth-rem));
-  --font-size-5: calc(8 * var(--relative-eighth-rem));
-  --font-size-6: calc(8 * var(--relative-eighth-rem));
+  @include mixins.font-sizes();
+  --border-width: #{typography-values.border-width()};
 
   --font-serif:
     Alegreya,
@@ -38,5 +37,5 @@
     roboto,
     noto,
     arial,
-    sans-serif
-}
\ No newline at end of file
+    sans-serif;
+}
diff --git a/scss/custom-properties/typography/lg.scss b/scss/custom-properties/typography/lg.scss
new file mode 100644
index 0000000..30a3019
--- /dev/null
+++ b/scss/custom-properties/typography/lg.scss
@@ -0,0 +1,9 @@
+@use 'mixins';
+
+@use '../../values/typography' as typography-values;
+
+:root {
+  @include mixins.font-sizes(lg);
+  --border-width: #{typography-values.border-width(lg)};
+}
+
diff --git a/scss/custom-properties/typography/md.scss b/scss/custom-properties/typography/md.scss
new file mode 100644
index 0000000..df49bdd
--- /dev/null
+++ b/scss/custom-properties/typography/md.scss
@@ -0,0 +1,9 @@
+@use 'mixins';
+
+@use '../../values/typography' as typography-values;
+
+:root {
+  @include mixins.font-sizes(md);
+  --border-width: #{typography-values.border-width(md)};
+}
+
diff --git a/scss/custom-properties/typography/sm.scss b/scss/custom-properties/typography/sm.scss
new file mode 100644
index 0000000..e1c3585
--- /dev/null
+++ b/scss/custom-properties/typography/sm.scss
@@ -0,0 +1,9 @@
+@use 'mixins';
+
+@use '../../values/typography' as typography-values;
+
+:root {
+  @include mixins.font-sizes(sm);
+  --border-width: #{typography-values.border-width(sm)};
+}
+
diff --git a/scss/custom-properties/typography/xl.scss b/scss/custom-properties/typography/xl.scss
new file mode 100644
index 0000000..0ddba99
--- /dev/null
+++ b/scss/custom-properties/typography/xl.scss
@@ -0,0 +1,9 @@
+@use 'mixins';
+
+@use '../../values/typography' as typography-values;
+
+:root {
+  @include mixins.font-sizes(xl);
+  --border-width: #{typography-values.border-width(xl)};
+}
+
diff --git a/scss/custom-properties/typography/xs.scss b/scss/custom-properties/typography/xs.scss
new file mode 100644
index 0000000..44d8bbb
--- /dev/null
+++ b/scss/custom-properties/typography/xs.scss
@@ -0,0 +1,9 @@
+@use 'mixins';
+
+@use '../../values/typography' as typography-values;
+
+:root {
+  @include mixins.font-sizes(xs);
+  --border-width: #{typography-values.border-width(xs)};
+}
+
diff --git a/scss/custom-properties/typography/xxl.scss b/scss/custom-properties/typography/xxl.scss
new file mode 100644
index 0000000..1a777dc
--- /dev/null
+++ b/scss/custom-properties/typography/xxl.scss
@@ -0,0 +1,9 @@
+@use 'mixins';
+
+@use '../../values/typography' as typography-values;
+
+:root {
+  @include mixins.font-sizes(xxl);
+  --border-width: #{typography-values.border-width(xxl)};
+}
+
diff --git a/scss/index.lg.scss b/scss/index.lg.scss
index 4060f14..622262f 100644
--- a/scss/index.lg.scss
+++ b/scss/index.lg.scss
@@ -1,3 +1,3 @@
 @use 'modules/index.lg' as *;
-@use 'variables/index.lg' as *;
+@use 'custom-properties/index.lg' as *;
 
diff --git a/scss/index.md.scss b/scss/index.md.scss
index a49e979..e7f1fbd 100644
--- a/scss/index.md.scss
+++ b/scss/index.md.scss
@@ -1,4 +1,4 @@
 @use 'layout/index.md' as *;
 @use 'modules/index.md' as *;
-@use 'variables/index.md' as *;
+@use 'custom-properties/index.md' as *;
 
diff --git a/scss/index.scss b/scss/index.scss
index 485e64c..b8e2334 100644
--- a/scss/index.scss
+++ b/scss/index.scss
@@ -2,6 +2,6 @@
 @use 'base/index' as *;
 @use 'layout/index' as *;
 @use 'modules/index' as *;
-@use 'variables/index' as *;
+@use 'custom-properties/index' as *;
 @use 'utils' as *;
 
diff --git a/scss/index.sm.scss b/scss/index.sm.scss
index 37c6ec7..0ea47c9 100644
--- a/scss/index.sm.scss
+++ b/scss/index.sm.scss
@@ -1,2 +1,3 @@
-@use 'variables/index.sm' as *;
+@use 'modules/index.sm' as *;
+@use 'custom-properties/index.sm' as *;
 
diff --git a/scss/index.xl.scss b/scss/index.xl.scss
index 7848b38..e692c09 100644
--- a/scss/index.xl.scss
+++ b/scss/index.xl.scss
@@ -1,3 +1,3 @@
 @use 'modules/index.xl' as *;
-@use 'variables/index.xl' as *;
+@use 'custom-properties/index.xl' as *;
 
diff --git a/scss/index.xs.scss b/scss/index.xs.scss
index 6aee8e5..78bc9bf 100644
--- a/scss/index.xs.scss
+++ b/scss/index.xs.scss
@@ -1,4 +1,4 @@
 @use 'layout/index.xs' as *;
 @use 'modules/index.xs' as *;
-@use 'variables/index.xs' as *;
+@use 'custom-properties/index.xs' as *;
 
diff --git a/scss/index.xxl.scss b/scss/index.xxl.scss
index 067147c..67ec408 100644
--- a/scss/index.xxl.scss
+++ b/scss/index.xxl.scss
@@ -1,2 +1,2 @@
-@use 'variables/index.xxl' as *;
+@use 'custom-properties/index.xxl' as *;
 
diff --git a/scss/layout/section-margins.scss b/scss/layout/section-margins.scss
index a11073f..8105dcb 100644
--- a/scss/layout/section-margins.scss
+++ b/scss/layout/section-margins.scss
@@ -1,14 +1,13 @@
 :is(main, article) > :is(section, header):not(:is(section, header) :is(section, header)) {
-  padding-block-start: var(--margin-block-lg);
-  padding-block-end: var(--margin-block-md);
+  padding-block: var(--spacing-block-md);
 }
 
 footer {
-  padding-block-start: var(--margin-block-md);
-  padding-block-end: var(--margin-block-lg);
+  padding-block-start: var(--spacing-block-md);
+  padding-block-end: var(--spacing-block-lg);
 }
 
 nav {
-  padding-block-start: var(--margin-block-sm);
-  padding-block-end: var(--margin-block-md);
-}
\ No newline at end of file
+  padding-block-start: var(--spacing-block-sm);
+  padding-block-end: var(--spacing-block-md);
+}
diff --git a/scss/modules/btn.scss b/scss/modules/btn.scss
index e9db392..6b5e543 100644
--- a/scss/modules/btn.scss
+++ b/scss/modules/btn.scss
@@ -1,11 +1,11 @@
 .btn {
   display: block;
-  border: solid var(--relative-eighth-rem) var(--text-color);
+  border: solid var(--border-width) var(--text-color);
   font-weight: 600;
   text-align: center;
-  margin-block-start: var(--margin-block-sm);
-  padding-inline: var(--padding-inline-md);
-  padding-block: var(--padding-block-sm);
+  margin-block-start: var(--spacing-block-sm);
+  padding-inline: var(--spacing-inline-md);
+  padding-block: var(--spacing-block-sm);
   background-color: transparent;
   transition:
     background-color 100ms,
diff --git a/scss/modules/committee.scss b/scss/modules/committee.scss
index 2badf57..f6528a3 100644
--- a/scss/modules/committee.scss
+++ b/scss/modules/committee.scss
@@ -1,10 +1,37 @@
 .committee__member {
   list-style-type: none;
-  margin-block-start: var(--margin-block-sm);
+  margin-block-start: var(--spacing-block-sm);
+}
+
+.committee__member + .committee__member {
+  border-top-width: var(--border-width);
+  border-top-style: solid;
+  border-image: linear-gradient(
+    to right,
+    transparent 0%,
+    transparent 19.1%,
+    var(--text-color) 19.1%,
+    var(--text-color) 80.9%,
+    transparent 80.9%,
+    transparent 100%
+  ) 1;
+  margin-block-start: var(--spacing-block-md);
+  padding-block-start: var(--spacing-block-md);
 }
 
 .committee__member__img {
-  margin-inline: calc(var(--grid-column-width) + var(--grid-gutter-width));
-  width: calc(var(--grid-gutter-width) + 2 * var(--grid-column-width));
+  margin-inline: 25%;
+  width: 50%;
   border-radius: 50%;
 }
+
+.committee__member__text {
+  text-align: center;
+  margin-block-start: var(--spacing-block-sm);
+}
+
+.committee__member__role {
+  display: block;
+  font-weight: lighter;
+}
+
diff --git a/scss/modules/committee.sm.scss b/scss/modules/committee.sm.scss
new file mode 100644
index 0000000..a2b2216
--- /dev/null
+++ b/scss/modules/committee.sm.scss
@@ -0,0 +1,5 @@
+.committee__member__text {
+  text-align: start;
+  margin: 0;
+}
+
diff --git a/scss/modules/committee.xs.scss b/scss/modules/committee.xs.scss
new file mode 100644
index 0000000..5681bc7
--- /dev/null
+++ b/scss/modules/committee.xs.scss
@@ -0,0 +1,5 @@
+.committee__member__img {
+  margin-inline: calc(var(--grid-column-width) + var(--grid-gutter-width));
+  width: calc(var(--grid-gutter-width) + 2 * var(--grid-column-width));
+}
+
diff --git a/scss/modules/footer.scss b/scss/modules/footer.scss
index 0d1a896..9210044 100644
--- a/scss/modules/footer.scss
+++ b/scss/modules/footer.scss
@@ -1,8 +1,8 @@
 footer {
-  display: grid;
-  grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
-  gap: var(--grid-gutter-width);
-  align-items: baseline;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-block-sm);
+  align-items: center;
 }
 
 .footer__rss-button__label {
@@ -19,10 +19,10 @@ footer {
 }
 
 .footer__rss-button__img {
-  min-width: 44px;
-  width: calc(8 * var(--relative-eighth-rem));
+  display: block;
 }
 
 .footer__back-to-top {
   grid-column: calc(var(--grid-column-count) - 2) / calc(var(--grid-column-count) + 1);
-}
\ No newline at end of file
+  margin: 0;
+}
diff --git a/scss/modules/footer.xs.scss b/scss/modules/footer.xs.scss
new file mode 100644
index 0000000..67cab7f
--- /dev/null
+++ b/scss/modules/footer.xs.scss
@@ -0,0 +1,7 @@
+footer {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
+  gap: var(--grid-gutter-width);
+  align-items: end;
+}
+
diff --git a/scss/modules/index.sm.scss b/scss/modules/index.sm.scss
new file mode 100644
index 0000000..a4fb988
--- /dev/null
+++ b/scss/modules/index.sm.scss
@@ -0,0 +1,3 @@
+@use 'committee.sm' as *;
+@use 'nav.sm' as *;
+
diff --git a/scss/modules/index.xs.scss b/scss/modules/index.xs.scss
index 9dd43c5..ef77c6d 100644
--- a/scss/modules/index.xs.scss
+++ b/scss/modules/index.xs.scss
@@ -1,3 +1,5 @@
+@use 'committee.xs' as *;
+@use 'footer.xs' as *;
 @use 'link-gallery.xs' as *;
 @use 'nav.xs' as *;
 
diff --git a/scss/modules/link-gallery.scss b/scss/modules/link-gallery.scss
index 56949e2..d321419 100644
--- a/scss/modules/link-gallery.scss
+++ b/scss/modules/link-gallery.scss
@@ -2,7 +2,7 @@
   display: grid;
   grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
   gap: var(--grid-gutter-width);
-  padding-block: var(--margin-block-md);
+  padding-block: var(--spacing-block-md);
   --gallery-item-column-span: 1;
   --gallery-row-image-height: 12rem;
   --gallery-row-title-height: fit-content;
@@ -25,13 +25,13 @@
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: var(--gallery-row-image-height) var(--gallery-row-title-height);
-  row-gap: var(--margin-block-sm);
+  row-gap: var(--spacing-block-sm);
 }
 
 .link-gallery--furthsettins img {
   box-sizing: border-box;
   border-radius: 50%;
-  border: solid calc(2 * var(--relative-eighth-rem)) var(--text-color);
+  border: solid var(--border-width) var(--text-color);
 }
 
 .link-gallery__title {
diff --git a/scss/modules/link.scss b/scss/modules/link.scss
index 83206d4..2f827c4 100644
--- a/scss/modules/link.scss
+++ b/scss/modules/link.scss
@@ -2,23 +2,19 @@ a, .link {
   color: var(--special-text-color);
   text-decoration-line: underline;
   text-decoration-color: var(--special-text-color);
-  text-decoration-thickness: var(--relative-eighth-rem);
-  text-underline-offset: var(--relative-eighth-rem);
-  border: dotted transparent var(--relative-eighth-rem);
+  border: dotted transparent var(--border-width);
   transition:
     color 100ms,
     text-decoration-color 100ms,
-    text-decoration-thickness 100ms,
     border-color 100ms;
 
   &:is(:hover, :focus, :focus-visible, :focus-within),
   .group-hover:is(:hover, :focus, :focus-visible, :focus-within) & {
     text-decoration-color: currentColor;
-    text-decoration-thickness: calc(3 * var(--relative-eighth-rem));
+    text-decoration-style: wavy;
     transition:
       color 300ms,
       text-decoration-color 300ms,
-      text-decoration-thickness 300ms,
       border-color 300ms;
   }
 
diff --git a/scss/modules/nav.md.scss b/scss/modules/nav.md.scss
index c3f4a18..7f0f784 100644
--- a/scss/modules/nav.md.scss
+++ b/scss/modules/nav.md.scss
@@ -1,11 +1,26 @@
-.nav__nav-links li:nth-child(3) {
-  grid-column: 5 / 8;
+.nav__nav-links li {
+  &:nth-child(1) {
+    grid-column: 1 / 3;
+  }
+
+  &:nth-child(2) {
+    grid-column: 3 / 5;
+  }
+
+  &:nth-child(3) {
+    grid-column: 5 / 8;
+  }
+
+  &:nth-child(4) {
+    grid-column: 1 / 3;
+  }
+
+  &:nth-child(5) {
+    grid-column: 3 / 5;
+  }
 }
 
-.nav__nav-links li:nth-child(4) {
-  grid-column: 1 / 3;
+.nav__switch-language-link {
+  margin-inline-end: calc(var(--grid-column-width) + var(--grid-gutter-width));
 }
 
-.nav__nav-links li:nth-child(5) {
-  grid-column: 3 / 5;
-}
\ No newline at end of file
diff --git a/scss/modules/nav.scss b/scss/modules/nav.scss
index 765c44f..f2f32a9 100644
--- a/scss/modules/nav.scss
+++ b/scss/modules/nav.scss
@@ -28,9 +28,10 @@
   font-family: var(--font-serif);
   font-size: var(--font-size-5);
   font-weight: 700;
+  line-height: 1.15;
 
   /* This gradient is based on                  *
-   * --color-primary-60 -> --color-secondary-60 *
+   * colours.$primary-60 -> colours.$secondary-60 *
    * using Josh W Comeau's gradient generator   */
   width: fit-content;
   background-image: linear-gradient(
@@ -53,7 +54,7 @@
 
   a {
     text-decoration: none;
-    border: var(--relative-eighth-rem) dotted transparent;
+    border: var(--border-width) dotted transparent;
     transition: border-color 100ms;
 
     &:is(:focus, :focus-visible, :focus-within) {
@@ -66,14 +67,9 @@
 }
 
 .nav__breadcrumbs {
-  display: flex;
-  flex-wrap: wrap;
-
   li {
-    min-width: max-content;
-    &::before {
-      content: '/'
-    }
+    list-style: '▸';
+    list-style-position: inside;
   }
 }
 
diff --git a/scss/modules/nav.sm.scss b/scss/modules/nav.sm.scss
new file mode 100644
index 0000000..db540bd
--- /dev/null
+++ b/scss/modules/nav.sm.scss
@@ -0,0 +1,38 @@
+.nav__breadcrumbs {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+
+  li {
+    display: inline;
+    min-width: max-content;
+
+    + li::before {
+      content: '/';
+      margin-inline: var(--margin-inline-md);
+    }
+  }
+}
+
+.nav__nav-links li {
+  &:nth-child(1) {
+    grid-column: 1 / 3;
+  }
+
+  &:nth-child(2) {
+    grid-column: 3 / 6;
+  }
+
+  &:nth-child(3) {
+    grid-column: 6 / 9;
+  }
+
+  &:nth-child(4) {
+    grid-column: 1 / 3;
+  }
+
+  &:nth-child(5) {
+    grid-column: 3 / 5;
+  }
+}
+
diff --git a/scss/modules/news-index.scss b/scss/modules/news-index.scss
index 5d9bab2..b235edd 100644
--- a/scss/modules/news-index.scss
+++ b/scss/modules/news-index.scss
@@ -1,10 +1,10 @@
 .news-index__item {
   display: block;
   box-sizing: border-box;
-  border: var(--relative-eighth-rem) solid var(--text-color);
+  border: var(--border-width) solid var(--text-color);
   transition: background 100ms;
-  padding-block: var(--margin-block-md);
-  padding-inline: var(--padding-inline-sm);
+  padding-block: var(--spacing-block-md);
+  padding-inline: var(--spacing-inline-sm);
   width: var(--width-prose);
 }
 
diff --git a/scss/utils.scss b/scss/utils.scss
index f8336eb..7cd2a58 100644
--- a/scss/utils.scss
+++ b/scss/utils.scss
@@ -2,10 +2,6 @@
   font-style: italic;
 }
 
-.font-weight-lighter {
-  font-weight: lighter;
-}
-
 li.list-style-none, .list-style-none li {
   list-style-type: none;
 }
diff --git a/scss/values/_colours.scss b/scss/values/_colours.scss
new file mode 100644
index 0000000..40db6e8
--- /dev/null
+++ b/scss/values/_colours.scss
@@ -0,0 +1,34 @@
+$primary-0: #000000;
+$primary-10: #190064;
+$primary-20: #2d009d;
+$primary-25: #381aa8;
+$primary-30: #442bb3;
+$primary-35: #503abf;
+$primary-40: #5c48cc;
+$primary-50: #7663e7;
+$primary-60: #907eff;
+$primary-70: #ac9fff;
+$primary-80: #c8bfff;
+$primary-90: #e5deff;
+$primary-95: #f4eeff;
+$primary-98: #fdf8ff;
+$primary-99: #fffbff;
+$primary-100: #ffffff;
+
+$secondary-0: #000000;
+$secondary-10: #00201e;
+$secondary-20: #003733;
+$secondary-25: #00433f;
+$secondary-30: #00504b;
+$secondary-35: #005d57;
+$secondary-40: #006a64;
+$secondary-50: #00867e;
+$secondary-60: #00a299;
+$secondary-70: #26bfb4;
+$secondary-80: #50dbcf;
+$secondary-90: #71f7ec;
+$secondary-95: #b2fff6;
+$secondary-98: #e4fffb;
+$secondary-99: #f2fffc;
+$secondary-100: #ffffff;
+
diff --git a/scss/values/spacing/_constants.scss b/scss/values/spacing/_constants.scss
new file mode 100644
index 0000000..9a990b8
--- /dev/null
+++ b/scss/values/spacing/_constants.scss
@@ -0,0 +1,58 @@
+$grid-column-width-er: 32;
+$grid-gutter-width-er: 4;
+
+$grid-padding-er: (
+  'xxl': 32,
+  'xl': 26,
+  'lg': 20,
+  'md': 16,
+  'sm': 12,
+  'xs': 4,
+  'initial': 1
+);
+
+$grid-column-count: (
+  'xxl': 12,
+  'xl': 12,
+  'lg': 12,
+  'md': 8,
+  'sm': 8,
+  'xs': 4,
+  'initial': 1
+);
+
+$grid-prose-column-count: (
+  'xxl': 8,
+  'xl': 8,
+  'lg': 8,
+  'md': 8,
+  'sm': 8,
+  'xs': 4,
+  'initial': 1
+);
+
+$grid-padding-er: (
+  'xxl': 32,
+  'xl': 26,
+  'lg': 20,
+  'md': 16,
+  'sm': 12,
+  'xs': 4,
+  'initial': 1
+);
+
+$spacing-factor: (
+  'inline': (lg: 4, md: 2, sm: 1),
+  'block': (lg: 16, md: 10, sm: 5)
+);
+
+$grid-min-total-width-absolute: (
+  'xxl': 100rem,
+  'xl': 80rem,
+  'lg': 64rem,
+  'md': 48rem,
+  'sm': 30rem,
+  'xs': 100vw,
+  'initial': 100vw
+);
+
diff --git a/scss/values/spacing/_grid.scss b/scss/values/spacing/_grid.scss
new file mode 100644
index 0000000..50d11c9
--- /dev/null
+++ b/scss/values/spacing/_grid.scss
@@ -0,0 +1,63 @@
+@use 'sass:list';
+@use 'sass:map';
+
+@use 'constants';
+
+@function padding($breakpoint: initial) {
+  @return er-to-absolute(map.get(constants.$grid-padding-er, $breakpoint), $breakpoint);
+}
+
+@function column-width($breakpoint: initial) {
+  @return er-to-absolute(constants.$grid-column-width-er, $breakpoint);
+}
+
+@function gutter-width($breakpoint: initial) {
+  @return er-to-absolute(constants.$grid-gutter-width-er, $breakpoint);
+}
+
+@function column-count($breakpoint: initial) {
+  @return map.get(constants.$grid-column-count, $breakpoint);
+}
+
+@function total-width-er($breakpoint) {
+  $padding-width: calc(2 * map.get(constants.$grid-padding-er, $breakpoint));
+  $column-count: map.get(constants.$grid-column-count, $breakpoint);
+  $columns-width: calc($column-count * constants.$grid-column-width-er);
+  $gutters-width: calc(($column-count - 1) * constants.$grid-gutter-width-er);
+  @return $padding-width + $columns-width + $gutters-width;
+}
+
+@function total-width-absolute($breakpoint: initial) {
+  /**
+    * In theory, the grid total width should be clamped between the min at this
+    * breakpoint and the min at the next breakpoint minus grid padding. In
+    * practice, the only time this makes a difference is at xs, so at every
+    * other breakpoint, we'll just return the min at the current breakpoint.
+    */
+
+  @if $breakpoint == xs {
+    $min-width-xs: map.get(constants.$grid-min-total-width-absolute, xs);
+    $min-width-sm: map.get(constants.$grid-min-total-width-absolute, sm);
+    $padding-sm: calc(2 * padding(sm));
+    @return min($min-width-xs, calc($min-width-sm - $padding-sm));
+  }
+
+  @return map.get(constants.$grid-min-total-width-absolute, $breakpoint);
+}
+
+/**
+  * Converts er units to absolute units.
+  *
+  * This doesn't really belong here, but I think it has to, because it depends
+  * on grid-total-width-absolute which depends on grid-padding which depends on
+  * this. It's fine here, it's just a recursion. But if it lived in a separate
+  * module you'd end up with a circular dependency.
+  */
+@function er-to-absolute($length-er, $breakpoint: initial) {
+  $absolute-per-er: calc(
+    total-width-absolute($breakpoint)
+    / total-width-er($breakpoint)
+  );
+  @return calc($length-er * $absolute-per-er);
+}
+
diff --git a/scss/values/spacing/_index.scss b/scss/values/spacing/_index.scss
new file mode 100644
index 0000000..8f8a454
--- /dev/null
+++ b/scss/values/spacing/_index.scss
@@ -0,0 +1,24 @@
+/**
+  * 'er' (from 'eighth-rem') is a conceptual unit of length. It is determined
+  * by the total width of the grid, the relative eighth rem length of the grid
+  * padding, and the number of columns in the grid. This means you can just
+  * specify those values for each breakpoint, and the rest of the nitty-gritty
+  * griddy details happens by SCSS magic.
+  */
+
+/**
+  * Breakpoints can be:
+  *   - initial
+  *   - xs
+  *   - sm
+  *   - md
+  *   - lg
+  *   - xl
+  *   - xxl
+  */
+
+@forward 'constants' show $grid-column-count, $grid-prose-column-count;
+@forward 'grid' as grid-* hide er-to-absolute;
+@forward 'grid' show er-to-absolute;
+@forward 'spacing';
+
diff --git a/scss/values/spacing/_spacing.scss b/scss/values/spacing/_spacing.scss
new file mode 100644
index 0000000..4fd94e8
--- /dev/null
+++ b/scss/values/spacing/_spacing.scss
@@ -0,0 +1,32 @@
+@use 'sass:list';
+@use 'sass:map';
+
+@use 'constants';
+@use 'grid';
+
+/**
+  * - size: sm, md, lg
+  * - direction: inline, block
+  */
+@function spacing($direction, $size, $breakpoint: initial) {
+  $factor: map.get(
+    map.get(constants.$spacing-factor, $direction),
+    $size
+  );
+
+  @if list.index([xxl xl lg md sm], ($breakpoint)) {
+    @return grid.er-to-absolute($factor, $breakpoint);
+  }
+  @else if $breakpoint == xs {
+    @return clamp(
+      spacing($direction, $size, initial),
+      grid.er-to-absolute($factor, xs),
+      spacing($direction, $size, sm)
+    );
+  }
+  @else if $breakpoint == initial {
+    @return calc($factor * 0.0625rem);
+  }
+  @error "Invalid breakpoint: #{$breakpoint}";
+}
+
diff --git a/scss/values/typography/_constants.scss b/scss/values/typography/_constants.scss
new file mode 100644
index 0000000..4ea0117
--- /dev/null
+++ b/scss/values/typography/_constants.scss
@@ -0,0 +1,20 @@
+$base-font-size: (
+  'xxl': 1.5rem,
+  'xl': 1.2rem,
+  'lg': 1.1rem,
+  'md': 1rem,
+  'sm': 0.9rem,
+  'xs': 0.8rem,
+  'initial': 0.7rem,
+);
+
+$font-size-factor: (
+  '0': 1,
+  '1': 1.25,
+  '2': 1.5,
+  '3': 2,
+  '4': 2.5,
+  '5': 3,
+  '6': 3.5
+);
+
diff --git a/scss/values/typography/_index.scss b/scss/values/typography/_index.scss
new file mode 100644
index 0000000..3aa4384
--- /dev/null
+++ b/scss/values/typography/_index.scss
@@ -0,0 +1,18 @@
+@use 'sass:map';
+
+@use 'constants';
+
+@function font-size($font-size-grade, $breakpoint: initial) {
+  @return calc(
+    map.get(constants.$base-font-size, $breakpoint)
+    * map.get(constants.$font-size-factor, $font-size-grade)
+  );
+}
+
+@function border-width($breakpoint: initial) {
+  @return calc(
+    map.get(constants.$base-font-size, $breakpoint)
+    / 8
+  );
+}
+
diff --git a/scss/variables/colours.scss b/scss/variables/colours.scss
deleted file mode 100644
index 65dd421..0000000
--- a/scss/variables/colours.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-:root {
-  --text-color: var(--color-primary-98);
-  --text-highlight-color: var(--color-primary-10);
-  --background-color: var(--color-primary-10);
-  --background-highlight-color: var(--color-primary-90);
-  --special-text-color: var(--color-secondary-90);
-  --special-text-highlight-color: var(--color-secondary-10);
-}
-
-:is(main, article) {
-  --text-color: var(--color-primary-10);
-  --text-highlight-color: var(--color-primary-90);
-  --background-color: var(--color-primary-98);
-  --background-highlight-color: var(--color-primary-10);
-  --special-text-color: var(--color-secondary-40);
-  --special-text-highlight-color: var(--color-secondary-90);
-}
-
-:is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) {
-    --background-color: var(--color-primary-95);
-}
diff --git a/scss/variables/index.lg.scss b/scss/variables/index.lg.scss
deleted file mode 100644
index 598c04f..0000000
--- a/scss/variables/index.lg.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@use 'spacing.lg' as *;
-
diff --git a/scss/variables/index.md.scss b/scss/variables/index.md.scss
deleted file mode 100644
index b2bf6ac..0000000
--- a/scss/variables/index.md.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@use 'spacing.md' as *;
-@use 'typography.md' as *;
-
diff --git a/scss/variables/index.scss b/scss/variables/index.scss
deleted file mode 100644
index 57403d6..0000000
--- a/scss/variables/index.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use 'colours' as *;
-@use 'palette' as *;
-@use 'spacing' as *;
-@use 'typography' as *;
-
diff --git a/scss/variables/index.sm.scss b/scss/variables/index.sm.scss
deleted file mode 100644
index 1ed077f..0000000
--- a/scss/variables/index.sm.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@use 'spacing.sm' as *;
-
diff --git a/scss/variables/index.xl.scss b/scss/variables/index.xl.scss
deleted file mode 100644
index 6e082d1..0000000
--- a/scss/variables/index.xl.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@use 'spacing.xl' as *;
-
diff --git a/scss/variables/index.xs.scss b/scss/variables/index.xs.scss
deleted file mode 100644
index fd7abc2..0000000
--- a/scss/variables/index.xs.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@use 'spacing.xs' as *;
-@use 'typography.xs' as *;
-
diff --git a/scss/variables/index.xxl.scss b/scss/variables/index.xxl.scss
deleted file mode 100644
index 8d40b0c..0000000
--- a/scss/variables/index.xxl.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@use 'spacing.xxl' as *;
-
diff --git a/scss/variables/palette.scss b/scss/variables/palette.scss
deleted file mode 100644
index f40bb89..0000000
--- a/scss/variables/palette.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-:root {
-  --color-primary-0: #000000;
-  --color-primary-10: #190064;
-  --color-primary-20: #2d009d;
-  --color-primary-25: #381aa8;
-  --color-primary-30: #442bb3;
-  --color-primary-35: #503abf;
-  --color-primary-40: #5c48cc;
-  --color-primary-50: #7663e7;
-  --color-primary-60: #907eff;
-  --color-primary-70: #ac9fff;
-  --color-primary-80: #c8bfff;
-  --color-primary-90: #e5deff;
-  --color-primary-95: #f4eeff;
-  --color-primary-98: #fdf8ff;
-  --color-primary-99: #fffbff;
-  --color-primary-100: #ffffff;
-
-  --color-secondary-0: #000000;
-  --color-secondary-10: #00201e;
-  --color-secondary-20: #003733;
-  --color-secondary-25: #00433f;
-  --color-secondary-30: #00504b;
-  --color-secondary-35: #005d57;
-  --color-secondary-40: #006a64;
-  --color-secondary-50: #00867e;
-  --color-secondary-60: #00a299;
-  --color-secondary-70: #26bfb4;
-  --color-secondary-80: #50dbcf;
-  --color-secondary-90: #71f7ec;
-  --color-secondary-95: #b2fff6;
-  --color-secondary-98: #e4fffb;
-  --color-secondary-99: #f2fffc;
-  --color-secondary-100: #ffffff;
-}
\ No newline at end of file
diff --git a/scss/variables/spacing.lg.scss b/scss/variables/spacing.lg.scss
deleted file mode 100644
index bc18bfd..0000000
--- a/scss/variables/spacing.lg.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-:root {
-  --grid-total-width: 64rem;
-  --grid-padding-relative-eighth-rem: 20;
-  --grid-column-count: 12;
-  --grid-prose-column-count: 8;
-}
\ No newline at end of file
diff --git a/scss/variables/spacing.md.scss b/scss/variables/spacing.md.scss
deleted file mode 100644
index 0028e8a..0000000
--- a/scss/variables/spacing.md.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-:root {
-  --grid-total-width: 48rem;
-  --grid-padding-relative-eighth-rem: 16;
-  --grid-column-count: 8;
-  --grid-prose-column-count: 8;
-}
\ No newline at end of file
diff --git a/scss/variables/spacing.scss b/scss/variables/spacing.scss
deleted file mode 100644
index a4d1d91..0000000
--- a/scss/variables/spacing.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-:root {
-  --margin-inline-md: calc(2 * var(--relative-eighth-rem));
-  --margin-block-lg: calc(16 * var(--relative-eighth-rem));
-  --margin-block-md: calc(10 * var(--relative-eighth-rem));
-  --margin-block-sm: calc(5 * var(--relative-eighth-rem));
-
-  --padding-inline-lg: calc(4 * var(--relative-eighth-rem));
-  --padding-inline-md: calc(2 * var(--relative-eighth-rem));
-  --padding-inline-sm: calc(1 * var(--relative-eighth-rem));
-  --padding-block-lg: calc(12 * var(--relative-eighth-rem));
-  --padding-block-md: calc(8 * var(--relative-eighth-rem));
-  --padding-block-sm: calc(5 * var(--relative-eighth-rem));
-
-  --grid-padding: calc(var(--grid-padding-relative-eighth-rem) * var(--relative-eighth-rem));
-  --grid-column-width: calc(var(--grid-column-width-relative-eighth-rem) * var(--relative-eighth-rem));
-  --grid-gutter-width: calc(var(--grid-gutter-width-relative-eighth-rem) * var(--relative-eighth-rem));
-  
-  --grid-total-relative-eighth-rem-width: calc(
-    var(--grid-padding-relative-eighth-rem) * 2 +
-    var(--grid-column-width-relative-eighth-rem) * var(--grid-column-count) + 
-    var(--grid-gutter-width-relative-eighth-rem) * (var(--grid-column-count) - 1)
-  );
-  --relative-eighth-rem: calc(
-    var(--grid-total-width) / var(--grid-total-relative-eighth-rem-width)
-  );
-  --width-prose: calc(
-    var(--grid-column-width) * var(--grid-prose-column-count) +
-    var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1)
-  );
-
-  --grid-column-width-relative-eighth-rem: 32;
-  --grid-gutter-width-relative-eighth-rem: 4;
-
-  /***********************************************************
-   * Generally, we will use columns to keep things laid out  *
-   * nicely. However, on screens narrower than xs, this gets *
-   * pretty much impossible. So for those screens, we use a  *
-   * single-column layout taking up 100vw. In effect, this   *
-   * is just default CSS layout plus a wee bit padding. From *
-   * xs widewards, we use multiple columns on a fixed width. *
-   ***********************************************************/
-
-  --grid-total-width: 100vw;
-  --grid-padding-relative-eighth-rem: 8;
-  --grid-column-count: 1;
-  --grid-prose-column-count: 1;
-}
diff --git a/scss/variables/spacing.sm.scss b/scss/variables/spacing.sm.scss
deleted file mode 100644
index 7cdf26f..0000000
--- a/scss/variables/spacing.sm.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-:root {
-  --grid-total-width: 30rem;
-  --grid-padding-relative-eighth-rem: 12;
-}
diff --git a/scss/variables/spacing.xl.scss b/scss/variables/spacing.xl.scss
deleted file mode 100644
index fc8b1f3..0000000
--- a/scss/variables/spacing.xl.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-:root {
-  --grid-total-width: 80rem;
-  --grid-padding-relative-eighth-rem: 26;
-  --grid-column-count: 12;
-  --grid-prose-column-count: 8;
-  --width-prose: calc(
-    var(--grid-column-width) * min(8, var(--grid-column-count)) +
-    var(--grid-gutter-width) * min(7, (var(--grid-column-count) - 1))
-  );
-}
\ No newline at end of file
diff --git a/scss/variables/spacing.xs.scss b/scss/variables/spacing.xs.scss
deleted file mode 100644
index fb7c01a..0000000
--- a/scss/variables/spacing.xs.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-:root {
-  --grid-total-width: 15rem;
-  --grid-padding-relative-eighth-rem: 8;
-  --grid-column-count: 4;
-  --grid-prose-column-count: 4;
-}
diff --git a/scss/variables/spacing.xxl.scss b/scss/variables/spacing.xxl.scss
deleted file mode 100644
index 17d2f66..0000000
--- a/scss/variables/spacing.xxl.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-:root {
-  --grid-total-width: 100rem;
-  --grid-padding-relative-eighth-rem: 32;
-  --grid-column-count: 12;
-  --grid-prose-column-count: 8;
-}
\ No newline at end of file
diff --git a/scss/variables/typography.md.scss b/scss/variables/typography.md.scss
deleted file mode 100644
index 2c36d1d..0000000
--- a/scss/variables/typography.md.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-:root {
-  --font-size-0: calc(7 * var(--relative-eighth-rem));
-  --font-size-1: calc(9 * var(--relative-eighth-rem));
-  --font-size-2: calc(12 * var(--relative-eighth-rem));
-  --font-size-3: calc(16 * var(--relative-eighth-rem));
-  --font-size-4: calc(20 * var(--relative-eighth-rem));
-  --font-size-5: calc(26 * var(--relative-eighth-rem));
-  --font-size-6: calc(32 * var(--relative-eighth-rem));
-}
\ No newline at end of file
diff --git a/scss/variables/typography.xs.scss b/scss/variables/typography.xs.scss
deleted file mode 100644
index 6375aad..0000000
--- a/scss/variables/typography.xs.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-:root {
-  --font-size-0: calc(6 * var(--relative-eighth-rem));
-  --font-size-1: calc(8 * var(--relative-eighth-rem));
-  --font-size-2: calc(11 * var(--relative-eighth-rem));
-  --font-size-3: calc(14 * var(--relative-eighth-rem));
-  --font-size-4: calc(18 * var(--relative-eighth-rem));
-  --font-size-5: calc(23 * var(--relative-eighth-rem));
-  --font-size-6: calc(28 * var(--relative-eighth-rem));
-}
\ No newline at end of file
diff --git a/src/components/CommitteeList/CommitteeListItem.astro b/src/components/CommitteeList/CommitteeListItem.astro
index 9a5a55b..542d11f 100644
--- a/src/components/CommitteeList/CommitteeListItem.astro
+++ b/src/components/CommitteeList/CommitteeListItem.astro
@@ -43,8 +43,7 @@ const t = translate(locale);
       {committeeMember.name}
       {
         committeeMember.roles.length > 0 && (
-          <span class="font-weight-lighter">
-            |{' '}
+          <span class="committee__member__role">
             {committeeMember.roles.map((role) => t(tRole, { key: CommitteeRole[role] })).join(', ')}
           </span>
         )
diff --git a/src/i18n/translations/pages/home.ts b/src/i18n/translations/pages/home.ts
index 3a81710..b577a46 100644
--- a/src/i18n/translations/pages/home.ts
+++ b/src/i18n/translations/pages/home.ts
@@ -6,8 +6,8 @@ const tPage = {
     'en-GB': () => 'Home',
   },
   submit: {
-    sco: () => 'Sangschaw apen for submeissions',
-    'en-GB': () => 'Sangschaw open for submissions',
+    sco: () => 'Sang\u00adschaw apen for submeissions',
+    'en-GB': () => 'Sang\u00adschaw open for submissions',
   },
   'submit-para-1': {
     sco: () => `
@@ -97,13 +97,9 @@ const tPage = {
     sco: () => 'Meet the Commattee',
     'en-GB': () => 'Meet the Committee',
   },
-  'mair-commattee-details-soon': {
-    sco: () => 'Mair details comin shuin!',
-    'en-GB': () => 'More details coming soon!',
-  },
   furthsettins: {
-    sco: () => 'Furthsettins',
-    'en-GB': () => 'Publications',
+    sco: () => 'Furth\u00adsettins',
+    'en-GB': () => 'Public\u00adations',
   },
   'furthsettins-para': {
     sco: () => `
diff --git a/src/i18n/translations/site.ts b/src/i18n/translations/site.ts
index 59a8cd4..51e4183 100644
--- a/src/i18n/translations/site.ts
+++ b/src/i18n/translations/site.ts
@@ -5,8 +5,9 @@ import type { TranslationsDictionary } from '$types/TranslationsDictionary';
 
 const tSite = {
   title: {
-    sco: () => 'Scots Leid Associe',
-    'en-GB': () => 'Scots Language Society',
+    // On very narrow screens, use \u00ad to suggest hyphenation points
+    sco: () => 'Scots Leid Assoc\u00adie',
+    'en-GB': () => 'Scots Lang\u00aduage Soc\u00adiety',
   },
   description: {
     sco: () => 'The wabsteid o the Scots Leid Associe',
@@ -21,8 +22,9 @@ const tSite = {
     'en-GB': () => 'Scotsoun',
   },
   'scots-leid-associe': {
-    sco: () => 'Scots Leid Associe',
-    'en-GB': () => 'Scots Language Society',
+    // On very narrow screens, use \u00ad to suggest hyphenation points
+    sco: () => 'Scots Leid Assoc\u00adie',
+    'en-GB': () => 'Scots Lang\u00aduage Soc\u00adiety',
   },
   by: {
     sco: () => 'bi',
diff --git a/src/pages/[locale]/index.astro b/src/pages/[locale]/index.astro
index b08f412..e8b9cf0 100644
--- a/src/pages/[locale]/index.astro
+++ b/src/pages/[locale]/index.astro
@@ -44,7 +44,6 @@ const mostRecentNewsItem = await getMostRecentNewsItem(locale);
     <p set:html={t(tPage, { key: 'about-us-para-2' })} />
     <p set:html={t(tPage, { key: 'about-us-para-3' })} />
     <h3 set:html={t(tPage, { key: 'meet-the-commattee' })} />
-    <p class="italic">{t(tPage, { key: 'mair-commattee-details-soon' })}</p>
     <CommitteeList />
   </section>