diff --git a/assets-src/styles/advanced.scss b/assets-src/styles/advanced.scss
index 0f1b42a0..a1e2e27a 100755
--- a/assets-src/styles/advanced.scss
+++ b/assets-src/styles/advanced.scss
@@ -23,7 +23,6 @@
 /*------------------------------------*\
     #Mixins
 \*------------------------------------*/
-@import "sass/20-mixins/font-sizes";
 @import "sass/20-mixins/media-query";
 @import "sass/20-mixins/stack";
 
diff --git a/assets-src/styles/core.scss b/assets-src/styles/core.scss
index b83fa6d1..47c9e363 100755
--- a/assets-src/styles/core.scss
+++ b/assets-src/styles/core.scss
@@ -9,6 +9,7 @@
 @import "sass/00-settings/colors";
 //@import "sass/00-settings/debug";
 @import "sass/00-settings/fonts";
+@import "sass/00-settings/font-sizes";
 @import "sass/00-settings/typesetting";
 
 
@@ -24,7 +25,6 @@
 /*------------------------------------*\
     #Mixins
 \*------------------------------------*/
-@import "sass/20-mixins/font-sizes";
 @import "sass/20-mixins/media-query";
 @import "sass/20-mixins/stack";
 
@@ -32,21 +32,17 @@
 
 /*------------------------------------*\
     #Base
-
-    Normalize comes first for the cascade
 \*------------------------------------*/
-@import "../../node_modules/normalize.css/normalize";
+@import "sass/30-base/global-reset";
 @import "sass/30-base/animation";
 @import "sass/30-base/quotes";
 @import "sass/30-base/body";
-@import "sass/30-base/box-sizing";
 @import "sass/30-base/buttons";
 @import "sass/30-base/focus";
 @import "sass/30-base/forms";
 @import "sass/30-base/hide-and-show";
 @import "sass/30-base/html-elements";
 @import "sass/30-base/icons";
-@import "sass/30-base/images";
 @import "sass/30-base/links";
 @import "sass/30-base/lists";
 @import "sass/30-base/skip-link";
@@ -73,6 +69,8 @@
 /*------------------------------------*\
     #Core components
 \*------------------------------------*/
+@import "sass/50-core-components/component";
+@import "sass/50-core-components/avatars";
 @import "sass/50-core-components/header";
 @import "sass/50-core-components/archive-banner";
 @import "sass/50-core-components/logo";
diff --git a/assets-src/styles/sass/00-settings/_font-sizes.scss b/assets-src/styles/sass/00-settings/_font-sizes.scss
new file mode 100644
index 00000000..86eaec89
--- /dev/null
+++ b/assets-src/styles/sass/00-settings/_font-sizes.scss
@@ -0,0 +1,20 @@
+/*------------------------------------*\
+    #Font sizes
+
+    Fluid type calculations generated using Utopia:
+    https://utopia.fyi/type/calculator/?c=320,16,1.125,1120,18,1.125,7,1,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12
+
+    CSS custom property names have been adapted from Utopia, add namespacing, give explicit usage context and use kebab case.
+\*------------------------------------*/
+
+:root {
+    --w3c-text-01: clamp(0.8889rem, 0.8444rem + 0.2222vw, 1rem);
+    --w3c-text-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
+    --w3c-text-1: clamp(1.125rem, 1.0688rem + 0.2813vw, 1.2656rem);
+    --w3c-text-2: clamp(1.2656rem, 1.2023rem + 0.3164vw, 1.4238rem);
+    --w3c-text-3: clamp(1.4238rem, 1.3526rem + 0.356vw, 1.6018rem);
+    --w3c-text-4: clamp(1.6018rem, 1.5217rem + 0.4005vw, 1.802rem);
+    --w3c-text-5: clamp(1.802rem, 1.7119rem + 0.4505vw, 2.0273rem);
+    --w3c-text-6: clamp(2.0273rem, 1.9259rem + 0.5068vw, 2.2807rem);
+    --w3c-text-7: clamp(2.2807rem, 2.1667rem + 0.5702vw, 2.5658rem);
+}
\ No newline at end of file
diff --git a/assets-src/styles/sass/30-base/_body.scss b/assets-src/styles/sass/30-base/_body.scss
index ad7def8f..57750f1d 100644
--- a/assets-src/styles/sass/30-base/_body.scss
+++ b/assets-src/styles/sass/30-base/_body.scss
@@ -2,21 +2,13 @@
     #Body
 \*------------------------------------*/
 
-
-html {
-	height: 100%;
-}
-
 /**
- Typographical styles for fonts are in 40-base/_typography.scss
+ Typographical styles for fonts are in 30-base/_typography.scss
  */
 body {
 	background-color: $white;
 	color: $off-black;
-	min-height: 100%;
 	overflow-x: hidden;
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-font-smoothing: antialiased;
 }
 
 /**
@@ -26,5 +18,5 @@ Styles needed for a sticky footer
 	display: grid;
 	grid-template-columns: 100%;
 	grid-template-rows: 1fr auto;
-	min-height: 100vh;
+	min-block-size: 100vh;
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/30-base/_box-sizing.scss b/assets-src/styles/sass/30-base/_box-sizing.scss
deleted file mode 100644
index 4665397c..00000000
--- a/assets-src/styles/sass/30-base/_box-sizing.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-/*------------------------------------*\
-    #Box sizing
-\*------------------------------------*/
-
-*,
-*::before,
-*::after {
-	box-sizing: border-box;
-	font-family: inherit;
-	margin: 0;
-	overflow-wrap: break-word;
-	padding: 0;
-}
\ No newline at end of file
diff --git a/assets-src/styles/sass/30-base/_buttons.scss b/assets-src/styles/sass/30-base/_buttons.scss
index 356b1938..4faa72c9 100755
--- a/assets-src/styles/sass/30-base/_buttons.scss
+++ b/assets-src/styles/sass/30-base/_buttons.scss
@@ -1,7 +1,9 @@
 /*------------------------------------*\
     #Buttons
 
-    1. High contrast themes tend to eliminate background-color.
+    1. Prevent `.button` going full-width if a child of a flex column.
+
+    2. High contrast themes tend to eliminate background-color.
     With no border set, we need to apply a transparent outline to
     maintain the button shape. The negative outline-offset moves
     the outline inside the perimeter so it behaves like a border.
@@ -9,16 +11,18 @@
 
 button,
 .button {
+    align-items: center;
+    align-self: start; /* 1 */
 	background-color: $link-color;
 	border: solid 2px $link-color;
 	border-radius: rem(24);
 	color: $white;
-	display: inline-block;
-	font-size: rem(14);
+	display: inline-flex;
+	font-size: var(--w3c-text-01);
 	font-weight: $emphasis;
-	line-height: 1.5;
-	outline: 2px solid transparent; /* 1 */
-	outline-offset: -2px; /* 1 */
+    justify-content: center;
+	outline: 2px solid transparent; /* 2 */
+	outline-offset: -2px; /* 2 */
 	padding: rem(11) rem(24);
 
 	&:hover {
@@ -34,10 +38,6 @@ button,
 	}
 }
 
-button:not([type="submit"]) {
-	text-align: start;
-}
-
 
 /**
 Remove link styling from links styled as buttons.
@@ -47,19 +47,9 @@ Remove link styling from links styled as buttons.
 }
 
 
-/**
-Remove link styling from actual buttons styled as buttons.
- */
-button.button,
-input[type="submit"].button {
-	text-decoration: none;
-}
-
-
 // Full-width buttons
-.button--wide {
-	text-align: center;
-	width: 100%;
+.button--wide.button--wide {
+	inline-size: 100%;
 }
 
 
@@ -102,6 +92,7 @@ input[type="submit"].button {
 
 // Disabled buttons
 .button[disabled],
+.button[disabled],
 .button.js-disabled {
 	background-color: $twiki-gray;
 	border-color: $twiki-gray;
diff --git a/assets-src/styles/sass/30-base/_details-and-summary.scss b/assets-src/styles/sass/30-base/_details-and-summary.scss
index a586a6c9..d6d5cf94 100644
--- a/assets-src/styles/sass/30-base/_details-and-summary.scss
+++ b/assets-src/styles/sass/30-base/_details-and-summary.scss
@@ -6,24 +6,23 @@ summary {
 	color: $link-color;
 	cursor: pointer;
 	display: inline-block;
-	padding-left: rem(25);
+    padding-block: rem(10);
+    padding-inline-start: rem(25);
 	position: relative;
 
 	&::before {
-		border-color: transparent;
-		border-left-color: inherit;
-		border-style: solid;
-		border-width: 7px 0 7px 12.124px;
-		bottom: 0;
-		clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
-		content: '';
-		display: block;
-		height: 0;
-		left: 0;
-		margin: auto;
-		position: absolute;
-		top: rem(-1);
-		width: 0;
+        block-size: 0;
+        border-color: transparent;
+        border-inline-start-color: inherit;
+        border-style: solid;
+        border-width: 7px 0 7px 12.124px;
+        content: '';
+        display: block;
+        inline-size: 0;
+        inset-block: rem(-1) 0;
+        inset-inline-start: 0;
+        margin: auto;
+        position: absolute;
 	}
 
 	&::-webkit-details-marker {
@@ -36,11 +35,7 @@ summary {
 
 	span {
 		display: inline-block;
-		padding-bottom: rem(10);
-		padding-top: rem(10);
-		text-decoration: underline; /* 1 */
-		text-decoration-skip-ink: auto; // Not supported by Safari
-		text-underline-offset: 0.25em; // Supported by Safari
+		text-decoration: underline;
 	}
 
 	&:focus {
@@ -55,28 +50,24 @@ summary {
 
 }
 
-details {
-	margin-bottom: 1rem;
-	margin-top: 1rem;
-}
+// details {
+// 	margin-bottom: 1rem;
+// 	margin-top: 1rem;
+// }
+
+// details[open] > summary {
+// 	margin-bottom: 1rem;
+// }
 
-details[open] > summary {
-	margin-bottom: 1rem;
+[dir="rtl"] summary::before {
+    border-width: 7px 12.124px 7px 0;
 }
 
+
 details[open] > summary::before {
-	transform: rotate(90deg);
+    transform: rotate(90deg);
 }
 
-[dir="rtl"] {
-	summary {
-		padding-left: 0;
-		padding-right: rem(25);
-
-		&::before {
-			left: auto;
-			right: 0;
-			transform: rotate(180deg);
-		}
-	}
+[dir="rtl"] details[open] > summary::before {
+    transform: rotate(-90deg);
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/30-base/_focus.scss b/assets-src/styles/sass/30-base/_focus.scss
index 5b61b38e..8b677133 100644
--- a/assets-src/styles/sass/30-base/_focus.scss
+++ b/assets-src/styles/sass/30-base/_focus.scss
@@ -13,8 +13,8 @@
 }
 
 /**
-Where focus is moved to the target via JavaScript, it is
-acceptable not to show a focus outline.
+Where focus is programmatically moved to a target element that is not interactive, we
+suppress the focus styles. See https://github.com/twbs/bootstrap/issues/29875#issuecomment-582648069
  */
 main:focus,
 #main:focus,
diff --git a/assets-src/styles/sass/30-base/_forms.scss b/assets-src/styles/sass/30-base/_forms.scss
index c102ab8a..51cd96a4 100755
--- a/assets-src/styles/sass/30-base/_forms.scss
+++ b/assets-src/styles/sass/30-base/_forms.scss
@@ -11,7 +11,7 @@ fieldset {
 	// If you want a border etc., apply this to a wrapping container for the fieldset
 	border: 0;
 	margin: 0;
-	min-width: 0;
+	min-inline-size: 0;
 	padding: 0.01em 0 0 0;
 }
 
@@ -23,17 +23,14 @@ End of resets for the fieldset element
  */
 
 
-//.field-group__heading {}
+// .field-group + .field-group {
+// 	margin-block-start: 2.5rem;
+// }
 
-
-.field-group + .field-group {
-	margin-top: 2.5rem;
-}
-
-form > * + *,
-.field-group > * + * {
-	margin-top: 1.75rem;
-}
+// form > * + *,
+// .field-group > * + * {
+// 	margin-block-start: 1.75rem;
+// }
 
 /**
 Group inputs to line up side-by-side
@@ -44,25 +41,17 @@ Group inputs to line up side-by-side
 }
 
 .input-group > * + * {
-	margin-left: rem(30);
-}
-
-[dir="rtl"] {
-	.input-group > * + * {
-
-		margin-left: 0;
-		margin-right: rem(30);
-
-	}
+	margin-inline-start: rem(30);
 }
 
 .field-legend {
-	@include txt-saturn;
+	//@include txt-saturn;
+	font-size: var(--w3c-text-1);
 	font-weight: bold;
 }
 
 .field {
-	max-width: rem($text-measure);
+	max-inline-size: rem($text-measure);
 }
 
 label,
@@ -73,25 +62,26 @@ label,
 	display: block;
 }
 
-.field-label,
-.faux-label {
-	margin-bottom: 0.25rem;
-}
+// .field-label,
+// .faux-label {
+// 	margin-block-end: 0.25rem;
+// }
 
 .field-label,
 .group-legend {
 	font-weight: bold;
 
-	+ .field-hint {
-		margin-top: 0.25rem;
-	}
+	// + .field-hint {
+	// 	margin-block-start: 0.25rem;
+	// }
 }
 
 .field-hint {
-	@include txt-pluto;
+	//@include txt-pluto;
+	font-size: var(--w3c-text-01);
 	color: $storm-gray;
-	margin-bottom: 0.25rem;
-	max-width: rem($text-measure);
+	// margin-block-end: 0.25rem;
+	max-inline-size: rem($text-measure);
 }
 
 .required {
@@ -114,9 +104,9 @@ textarea,
 	-webkit-appearance: none;
 	border: 2px solid;
 	border-radius: 0;
-	line-height: 1.25;
+    inline-size: 100%;
+	//line-height: 1.25;
 	padding: rem(5);
-	width: 100%;
 
 	&:focus {
 		box-shadow: inset 0 0 0 2px;
@@ -144,11 +134,9 @@ select,
 	&:focus {
 		border-color: currentColor;
 		box-shadow: inset 0 0 0 4px;
-		margin-left: rem(-5);
-		margin-right: rem(-5);
+		margin-inline: rem(-5);
 		outline: 3px solid $focus-color;
-		padding-left: rem(5);
-		padding-right: rem(5);
+		padding-inline: rem(5);
 	}
 }
 
@@ -169,9 +157,9 @@ select {
 	background-color: transparent;
 	border: 2px solid;
 	border-radius: 0;
-	line-height: 1.25;
+    inline-size: 100%;
+	//line-height: 1.25;
 	padding: rem(5);
-	width: 100%;
 
 	&:focus {
 		box-shadow: inset 0 0 0 2px;
@@ -213,18 +201,11 @@ Memorable dates (e.g. date of birth)
  */
 .memorable-date {
 	display: inline-block;
-	margin-top: 0;
+	margin-block-start: 0;
 }
 
 .memorable-date + .memorable-date {
-	margin-left: 1rem;
-}
-
-[dir="rtl"] {
-	.memorable-date + .memorable-date {
-		margin-left: auto;
-		margin-right: 1rem;
-	}
+	margin-inline-start: 1rem;
 }
 
 
@@ -235,8 +216,8 @@ Radio/checkbox inputs
 .checkbox-item {
 	clear: left;
 	float: left;
-	margin-top: 0.25rem;
-	padding-left: rem(34);
+	margin-block-start: 0.25rem;
+	padding-inline-start: rem(34);
 	position: relative;
 
 	&::after {
@@ -251,38 +232,27 @@ Radio/checkbox inputs
 	.checkbox-item {
 		clear: right;
 		float: right;
-		padding-left: 0;
-		padding-right: rem(34);
 	}
 }
 
 .radio-item input,
 .checkbox-item input {
+    block-size: rem(44);
 	cursor: pointer;
-	height: rem(44);
-	left: rem(-10);
+    inline-size: rem(44);
+    inset-block-start: rem(-2);
+	inset-inline-start: rem(-10);
 	margin: 0;
 	opacity: 0;
 	position: absolute;
-	top: rem(-2);
-	width: rem(44);
 	z-index: 1;
 }
 
-[dir="rtl"] {
-	.radio-item input,
-	.checkbox-item input {
-		left: auto;
-		right: rem(-10);
-	}
-}
-
 .radio-item label,
 .checkbox-item label {
 	cursor: pointer;
 	display: inline-block;
-	margin-bottom: 0;
-	margin-top: rem(-2);
+	margin-block: rem(-2) 0;
 	padding: rem(11) rem(15) rem(10) rem(1);
 	touch-action: manipulation;
 
@@ -294,11 +264,11 @@ Radio/checkbox inputs
 
 	&::before {
 		background: transparent;
+        block-size: rem(24);
 		border: 2px solid;
-		height: rem(24);
-		left: 0;
-		top: rem(8);
-		width: rem(24);
+        inline-size: rem(24);
+        inset-block-start: rem(8);
+		inset-inline-start: 0;
 	}
 }
 
@@ -306,11 +276,6 @@ Radio/checkbox inputs
 	.radio-item label,
 	.checkbox-item label {
 		padding: rem(11) rem(1) rem(10) rem(15);
-
-		&::before {
-			left: auto;
-			right: 0;
-		}
 	}
 }
 
@@ -322,47 +287,33 @@ Radio/checkbox inputs
 
 	&::after {
 		background: currentColor;
+        block-size: 0;
 		border: 5px solid;
-		height: 0;
-		left: rem(7);
+        inline-size: 0;
+        inset-block-start: rem(15);
+		inset-inline-start: rem(7);
 		opacity: 0;
-		top: rem(15);
-		width: 0;
-	}
-}
-
-[dir="rtl"] {
-	.radio-item label::after {
-		left: auto;
-		right: rem(7);
 	}
 }
 
 .checkbox-item label {
 	&::after {
 		background: transparent;
+        block-size: rem(6.5);
 		border: solid;
-		border-top-color: transparent;
+		border-block-start-color: transparent;
 		border-width: 0 0 3px 3px;
-		height: rem(6.5);
-		left: rem(6);
+        inline-size: rem(12);
+        inset-block-start: rem(15);
+		inset-inline-start: rem(6);
 		opacity: 0;
-		top: rem(15);
 		transform: rotate(-45deg);
-		width: rem(12);
-	}
-}
-
-[dir="rtl"] {
-	.checkbox-item label::after {
-		left: auto;
-		right: rem(6);
 	}
 }
 
 .checkbox-group--cluster .checkbox-item {
 	clear: none;
-	margin-right: rem(12);
+	margin-block-end: rem(12);
 }
 
 // Radio/checkbox input with hover
@@ -417,15 +368,15 @@ Segmented options. Can use either radio or checkbox inputs. The purpose is to
 show all available options outright, rather than hide them behind a <select>
  */
 .segmented-group-wrapper {
-	max-width: none;
+	max-inline-size: none;
 }
 
 .segmented-group.l-switcher {
-	margin-top: 0;
+	margin-block-start: 0;
 
 	> * > * {
-		max-width: 100%;
-		min-width: 33.333%; // Modify the percentage according to the number of choices and what looks best
+		max-inline-size: 100%;
+		min-inline-size: 33.333%; // Modify the percentage according to the number of choices and what looks best
 		position: relative; // Required for the absolutely positioned input indicator
 	}
 
@@ -443,43 +394,43 @@ show all available options outright, rather than hide them behind a <select>
 
 		&::before {
 			background: transparent;
-			height: rem(24);
-			left: rem(10);
-			top: rem(10);
-			width: rem(24);
+			block-size: rem(24);
+            inline-size: rem(24);
+            inset-block-start: rem(10);
+			inset-inline-start: rem(10);
 		}
 
 		&::after {
 			background: transparent;
+            block-size: rem(6.5);
 			border: solid;
-			border-top-color: transparent;
+			border-block-start-color: transparent;
 			border-width: 0 0 3px 3px;
-			height: rem(6.5);
-			left: rem(16);
+            inline-size: rem(12);
+            inset-block-start: rem(17);
+			inset-inline-start: rem(16);
 			opacity: 0;
-			top: rem(17);
 			transform: rotate(-45deg);
-			width: rem(12);
 		}
 	}
 
 	input {
 		cursor: pointer;
-		height: rem(44);
+		block-size: rem(44);
+        inline-size: rem(44);
+        inset-block-start: 0;
+        inset-inline-end: 0;
 		margin: 0;
 		opacity: 0;
 		position: absolute;
-		right: 0;
-		top: 0;
-		width: rem(44);
 		z-index: 1;
 	}
 
 	.segmented-label {
-		@include stack(.5em);
+		//@include stack(.5em);
 		display: block;
 		padding: rem(10);
-		padding-left: rem(44);
+		padding-inline-start: rem(44);
 
 		span {
 			display: block;
@@ -510,60 +461,36 @@ show all available options outright, rather than hide them behind a <select>
 	}
 }
 
-[dir="rtl"] {
-	.segmented-group {
-		label::before {
-			right: rem(10);
-			left: auto;
-		}
-
-		label::after {
-			right: rem(16);
-			left: auto;
-		}
-
-		input {
-			left: 0;
-			right: auto;
-		}
-
-		.segmented-label {
-			padding: rem(10);
-			padding-right: rem(44);
-		}
-	}
-}
-
 
 /**
 Fixed input widths
  */
 .input-width-30 {
-	max-width: 59ex;
+	max-inline-size: 59ex;
 }
 
 .input-width-20 {
-	max-width: 41ex;
+    max-inline-size: 41ex;
 }
 
 .input-width-10 {
-	max-width: 23ex;
+    max-inline-size: 23ex;
 }
 
 .input-width-5 {
-	max-width: 10.8ex;
+    max-inline-size: 10.8ex;
 }
 
 .input-width-4 {
-	max-width: 9ex;
+    max-inline-size: 9ex;
 }
 
 .input-width-3 {
-	max-width: 7.2ex;
+    max-inline-size: 7.2ex;
 }
 
 .input-width-2 {
-	max-width: 5.4ex;
+    max-inline-size: 5.4ex;
 }
 
 /**
@@ -573,8 +500,7 @@ Error styles
 	color: $error-color;
 	display: inline-block;
 	font-weight: bold;
-	padding-bottom: rem(10);
-	padding-top: rem(10);
+	padding-block: rem(10);
 
 	&:hover,
 	&:visited {
@@ -587,8 +513,8 @@ Error styles
 }
 
 .field--error {
-	border-left: solid rem(5) $error-color;
-	padding-left: rem(15);
+	border-inline-start: solid rem(5) $error-color;
+	padding-inline-start: rem(15);
 
 	input:not([type="file"]),
 	textarea:not(:focus) {
@@ -601,26 +527,17 @@ Error styles
 	}
 }
 
-[dir="rtl"] {
-	.field--error {
-		border-left: none;
-		border-right: solid rem(5) $error-color;
-		padding-left: 0;
-		padding-right: rem(15);
-	}
-}
-
 .field-error-msg {
 	color: $error-color;
 	font-weight: bold;
-	margin-top: rem(15);
+	margin-block-start: rem(15);
 }
 
 /**
 Progress bar
  */
 .progress-list {
-	margin-bottom: rem(30);
+	margin-block-end: rem(30);
 
 	@include mq($bp-tab-small) {
 		display: flex;
@@ -633,41 +550,28 @@ Progress bar
 
 	&::after {
 		background-color: $storm-gray;
-		bottom: rem(-16);
+        block-size: rem(13);
 		content:'';
-		height: rem(13);
-		left: rem(19);
+        inline-size: rem(3);
+        inset-block-end: rem(-16);
+		inset-inline-start: rem(19);
 		position: absolute;
-		width: rem(3);
 
 		@include mq($bp-tab-small) {
-			bottom: auto;
-			height: rem(3);
-			left: 50%;
-			top: rem(32);
-			width: 100%;
+            block-size: rem(3);
+            inline-size: 100%;
+            inset-block-end: auto;
+            inset-block-start: rem(32);
+            inset-inline-start: 50%;
 			z-index: -1;
 		}
 	}
 
 	+ li {
-		margin-top: rem(20);
-
-		@include mq($bp-tab-small) {
-			margin-top: 0;
-		}
-	}
-}
-
-[dir="rtl"] {
-	.progress-list li::after {
-
-		left: auto;
-		right: rem(19);
+		margin-block-start: rem(20);
 
 		@include mq($bp-tab-small) {
-			left: auto;
-			right: 50%;
+            margin-block-start: 0;
 		}
 	}
 }
@@ -690,16 +594,17 @@ Progress bar
 
 	@include mq($bp-tab-small) {
 		flex-direction: column;
-		padding-top: rem(10);
+		padding-block-start: rem(10);
 		text-align: center;
 	}
 
 	> span {
-		@include txt-pluto;
+		//@include txt-pluto;
+		font-size: var(--w3c-text-01);
 		padding: rem(10);
 
 		@include mq($bp-tab-small) {
-			width: rem(150);
+			inline-size: rem(150);
 		}
 	}
 }
@@ -707,12 +612,12 @@ Progress bar
 .progress-step__marker {
 	align-items: center;
 	background-color: $white;
+    block-size: rem(44);
 	border: solid 3px $storm-gray;
 	border-radius: 50%;
 	display: flex;
-	height: rem(44);
+    inline-size: rem(44);
 	justify-content: center;
-	width: rem(44);
 
 	@include mq($bp-tab-small) {
 		box-shadow: 0 0 0 rem(10) $white;
@@ -733,29 +638,27 @@ Progress bar
 	}
 
 	&::before {
+        block-size: rem(38);
 		border-radius: 50%;
-		height: rem(38);
-		left: 0;
-		top: 0;
-		width: rem(38);
+        inline-size: rem(38);
+        inset-block-start: 0;
+		inset-inline-start: 0;
 	}
 
 	&::after {
+        block-size: rem(9);
 		border: solid;
-		border-top-color: transparent;
+		border-block-start-color: transparent;
 		border-width: 0 0 3px 3px;
-		height: rem(9);
-		left: rem(10);
-		top: rem(13);
+        inline-size: rem(18);
+        inset-block-start: rem(13);
+		inset-inline-start: rem(10);
 		transform: rotate(-45deg);
-		width: rem(18);
 	}
 }
 
 .progress-list a {
 	color: $storm-gray;
-	text-decoration-skip-ink: auto; // Not supported by Safari
-	text-underline-offset: 0.25em; // Supported by Safari
 
 	&:visited {
 		color: $link-color--visited;
diff --git a/assets-src/styles/sass/30-base/_global-reset.scss b/assets-src/styles/sass/30-base/_global-reset.scss
new file mode 100644
index 00000000..ed87fc9a
--- /dev/null
+++ b/assets-src/styles/sass/30-base/_global-reset.scss
@@ -0,0 +1,205 @@
+/*------------------------------------*\
+    #Global CSS reset
+
+    Inspiration:
+    - https://piccalil.li/blog/a-more-modern-css-reset/
+    - https://www.joshwcomeau.com/css/custom-css-reset/
+    - https://github.com/jensimmons/cssremedy/blob/master/css/remedy.css
+\*------------------------------------*/
+
+/**
+Wildcard selector means these styles apply everywhere.
+1: Use a more intuitive box-sizing model
+2: Control hyphenation when used - see https://clagnut.com/blog/2395/
+3: Avoid text overflow
+ */
+*,
+*::before,
+*::after {
+    box-sizing: border-box; /* 1 */
+    hyphenate-limit-chars: 6 3 2; /* 2 */
+    overflow-wrap: break-word; /* 3 */
+}
+
+
+
+
+
+/**
+HTML or :root element.
+1: Prevent layout shift if a classic scrollbar is invoked
+2: Prevent font size inflation with change of orientation
+3: Enable keyword animations
+ */
+html {
+    scrollbar-gutter: stable; /* 1 */
+    text-size-adjust: none; /* 2 */
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    html {
+        interpolate-size: allow-keywords; /* 3 */
+    }
+}
+
+
+
+
+
+/**
+Set core body defaults.
+1: Improve text rendering
+2: A minimum line-height of 1.5 is needed for accessibility.
+3: Supported by Safari - anything using `text-decoration: underline` will inherit this
+4: Not supported by Safari - anything using `text-decoration: underline` will inherit this
+ */
+body {
+    -moz-osx-font-smoothing: grayscale; /* 1 */
+    -webkit-font-smoothing: antialiased; /* 1 */
+    line-height: 1.5; /* 2 */
+    margin: 0;
+    min-block-size: 100vh;
+    text-decoration-skip: auto; /* 3 */
+    text-decoration-skip-ink: auto; /* 4 */
+    text-underline-offset: 0.25em;
+}
+
+
+
+
+
+/* Inherit our preferred font settings */
+button,
+input,
+select,
+textarea {
+    font: inherit;
+    letter-spacing: inherit;
+    word-spacing: inherit;
+}
+
+
+
+
+
+/* Reduce the line-height for specific elements (headings are managed in 30-base/_typography.scss) */
+input,
+label,
+optgroup,
+select,
+textarea {
+    line-height: 1.25;
+}
+
+button {
+    line-height: 1.15;
+}
+
+
+
+
+
+figure {
+    margin: 1rem 0;
+
+    figcaption {
+        font-size: var(--w3c-text-01);
+
+        > * {
+            max-inline-size: rem(540);
+        }
+    }
+}
+
+
+
+
+
+/* Improve default styles for horizontal rule */
+hr {
+    block-size: 0;
+    border: 0;
+    border-block-start: 1px solid $twiki-gray;
+    overflow: visible;
+}
+
+
+
+
+
+/**
+ Improve media defaults.
+ 1: Block display is usually what we want
+ 2: Responsive by default
+ 3: Removes strange space-below in case authors overwrite the display value
+ */
+audio,
+canvas,
+embed,
+iframe,
+img,
+object,
+svg,
+video {
+    display: block; /* 1 */
+    max-inline-size: 100%; /* 2 */
+    vertical-align: middle; /* 3 */
+}
+
+
+/* There's no good reason the audio element defaults to 300px */
+audio {
+    inline-size: 100%;
+}
+
+/* Audio without `[controls]` remains hidden by default */
+audio:not([controls]) {
+    display: none;
+}
+
+
+/* Remove iframe border */
+iframe {
+    border: 0;
+}
+
+
+/* Maintain intrinsic aspect ratios when `max-inline-size` is applied */
+canvas,
+img,
+svg,
+video {
+    block-size: auto;
+}
+
+
+/* Remove the unnecessary wrapping `picture`, while maintaining contents */
+picture {
+    display: contents;
+}
+
+
+/* Source elements have nothing to display, so hide them entirely */
+source {
+    display: none;
+}
+
+
+/* Don't allow SVGs in flex contexts to shrink */
+svg {
+    flex-shrink: 0;
+}
+
+
+video {
+    aspect-ratio: 16/9;
+}
+
+
+
+
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+    scroll-margin-block: 5ex;
+}
\ No newline at end of file
diff --git a/assets-src/styles/sass/30-base/_hide-and-show.scss b/assets-src/styles/sass/30-base/_hide-and-show.scss
index ce1357c7..00e21673 100644
--- a/assets-src/styles/sass/30-base/_hide-and-show.scss
+++ b/assets-src/styles/sass/30-base/_hide-and-show.scss
@@ -46,15 +46,14 @@
  * Sass to avoid it appearing repeatedly in your markup).
  */
 %visuallyhidden {
-	border: 0;
-	clip: rect(0 0 0 0);
-	clip-path: inset(100%);
-	height: 1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	white-space: nowrap;
-	width: 1px;
+    block-size: 1px;
+    border: 0;
+    clip-path: inset(50%);
+    inline-size: 1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
 }
 
 /*
@@ -85,14 +84,13 @@ br {
  * repeatedly in your markup).
  */
 %visible {
-	border: initial;
-	clip: auto;
-	clip-path: none;
-	height: auto;
-	margin: initial;
-	overflow: initial;
-	padding: initial;
-	position: static;
-	white-space: initial;
-	width: auto;
+    block-size: auto;
+    border: initial;
+    clip-path: none;
+    inline-size: auto;
+    margin: initial;
+    overflow: initial;
+    padding: initial;
+    position: static;
+    white-space: initial;
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/30-base/_html-elements.scss b/assets-src/styles/sass/30-base/_html-elements.scss
index e249b585..db21c2f9 100755
--- a/assets-src/styles/sass/30-base/_html-elements.scss
+++ b/assets-src/styles/sass/30-base/_html-elements.scss
@@ -2,12 +2,6 @@
     #HTML elements
 \*------------------------------------*/
 
-abbr {
-	text-decoration-skip-ink: auto; // Not supported by Safari
-	text-underline-offset: 0.25em; // Supported by Safari
-}
-
-
 dfn {
 	font-style: normal;
 	font-weight: $emphasis;
@@ -30,7 +24,8 @@ i {
 small,
 .small,
 .small-caps {
-	@include txt-eris;
+	//@include txt-eris;
+	font-size: var(--w3c-text-01);
 }
 
 
diff --git a/assets-src/styles/sass/30-base/_icons.scss b/assets-src/styles/sass/30-base/_icons.scss
index 57444bad..675fa4a7 100644
--- a/assets-src/styles/sass/30-base/_icons.scss
+++ b/assets-src/styles/sass/30-base/_icons.scss
@@ -4,25 +4,24 @@
 
 svg {
 	fill: currentColor;
-	height: auto;
 }
 
 svg:not([class]) {
-	width: 100%;
+	inline-size: 100%;
 }
 
 /**
 SVG icons are sized relative to font size, thanks to the em unit.
  */
 .icon {
-	height: 1em;
-	vertical-align: baseline;
-	width: 1em;
+	block-size: 1em;
+    inline-size: 1em;
+    vertical-align: baseline;
 }
 
 .icon--larger {
-	height: rem(30);
-	width: rem(30);
+    block-size: rem(30);
+    inline-size: rem(30);
 }
 
 
@@ -30,8 +29,6 @@ SVG icons are sized relative to font size, thanks to the em unit.
 Use the `with-icon` class on the SVG's parent, if there
 is a need to specify the spacing between text and icon.
 Pay attention to whether the icon is before the text or after.
-
-2. Logical property creates appropriate spacing irrespective of text direction
  */
 .with-icon--before,
 .with-icon--after,
@@ -50,48 +47,12 @@ Pay attention to whether the icon is before the text or after.
 
 .with-icon--before {
 	.icon {
-		margin-right: rem(8); // IE fallback for next rule - only works for ltr languages
-
-		@supports (margin-inline-end: 1em) {
-			margin-right: 0;
-			margin-inline-end: rem(8); /* 2 */
-		}
+        margin-inline-end: rem(8);
 	}
 }
 
 .with-icon--after {
 	.icon {
-		margin-left: rem(8); // IE fallback for next rule - only works for ltr languages
-
-		@supports (margin-inline-start: 1em) {
-			margin-left: 0;
-			margin-inline-start: rem(8); /* 2 */
-		}
-	}
-}
-
-[dir="rtl"] {
-	.with-icon--before {
-		.icon {
-			margin-left: rem(8); // IE fallback for next rule - only works for ltr languages
-			margin-right: 0;
-
-			@supports (margin-inline-start: 1em) {
-				margin-left: 0;
-				margin-inline-end: rem(8); /* 2 */
-			}
-		}
-	}
-
-	.with-icon--after {
-		.icon {
-			margin-left: 0;
-			margin-right: rem(8); // IE fallback for next rule - only works for ltr languages
-
-			@supports (margin-inline-start: 1em) {
-				margin-right: 0;
-				margin-inline-start: rem(8); /* 2 */
-			}
-		}
+        margin-inline-start: rem(8);
 	}
 }
diff --git a/assets-src/styles/sass/30-base/_images.scss b/assets-src/styles/sass/30-base/_images.scss
deleted file mode 100644
index d8b52049..00000000
--- a/assets-src/styles/sass/30-base/_images.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-/*------------------------------------*\
-    #Images
-\*------------------------------------*/
-
-img {
-	height: auto;
-	max-width: 100%;
-}
-
-.avatar {
-	background-color: $white;
-	border: solid 1px $w3c-blue;
-	border-radius: 50%;
-	height: rem(100);
-	overflow: hidden;
-	width: rem(100);
-
-	img {
-		height: 100%;
-		object-fit: cover;
-		width: 100%;
-	}
-}
-
-.avatar--med {
-	height: rem(50);
-	width: rem(50);
-
-	img {
-		margin-top: 0;
-	}
-}
-
-.avatar--small {
-	height: rem(32);
-	width: rem(32);
-
-	img {
-		margin-top: 0;
-	}
-}
\ No newline at end of file
diff --git a/assets-src/styles/sass/30-base/_links.scss b/assets-src/styles/sass/30-base/_links.scss
index dc9414d4..6c95e5e7 100755
--- a/assets-src/styles/sass/30-base/_links.scss
+++ b/assets-src/styles/sass/30-base/_links.scss
@@ -1,16 +1,8 @@
 /*------------------------------------*\
     #Links
-\*------------------------------------*/
-
-/**
-Default global link styles that do not interfere with component link styles
-- see https://alexcarpenter.me/screencasts/2019/02/global-link-styles/
 
-1. Don't rely on colour alone for styling links - see
-https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F73
-
-2. Remove the outline on focused links when they are also active/hovered.
- */
+    1. Remove the outline on focused links when they are also active/hovered.
+\*------------------------------------*/
 
 a:not([class]),
 a.with-icon--before,
@@ -19,9 +11,6 @@ a.with-icon--after {
 	color: $link-color;
 	cursor: pointer;
 	padding-inline: rem(2);
-	text-decoration: underline; /* 1 */
-	text-decoration-skip-ink: auto; // Not supported by Safari
-	text-underline-offset: 0.25em; // Supported by Safari
 
 	svg {
 		fill: currentColor;
@@ -33,7 +22,7 @@ a.with-icon--after {
 
 	&:hover {
 		color: $link-color--hover;
-		outline-width: 0; /* 2 */
+		outline-width: 0; /* 1 */
 	}
 
 	&:focus {
@@ -45,7 +34,7 @@ a.with-icon--after {
 
 	&:active {
 		color: $black;
-		outline-width: 0; /* 2 */
+		outline-width: 0; /* 1 */
 	}
 }
 
diff --git a/assets-src/styles/sass/30-base/_lists.scss b/assets-src/styles/sass/30-base/_lists.scss
index 8ebc029a..fda62796 100755
--- a/assets-src/styles/sass/30-base/_lists.scss
+++ b/assets-src/styles/sass/30-base/_lists.scss
@@ -4,33 +4,32 @@
 
 ul,
 ol {
-	margin-block-end: 1em;
-	margin-block-start: 1em;
-	padding-inline-start: 2.4em;
-
-	> * + *,
-	li ul,
-	li ol {
-		margin-block-start: 0.75em;
-	}
+    margin-block: 1rem;
+    padding-inline-start: 2.4em;
+
+    li {
+        max-inline-size: rem($text-measure);
+    }
+
+    li + li {
+        margin-block-start: 0.75rem;
+    }
 }
 
 ol.counter {
-	::marker {
-		content: counters(list-item, ".") ". ";
-	}
+    ::marker {
+        content: counters(list-item, ".") ". ";
+    }
 }
 
 
 /**
-Remove bullets, margin and padding from lists inside a <nav> element, and lists with the
-'.clean-list' class/. Note that that this may remove list semantics in some circumstances in
-some WebKit browsers. See https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
+Remove bullets, margin and padding from lists inside a <nav> element.
+Note that that this may remove list semantics in some circumstances in some
+WebKit browsers. See https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
 If it's important that the number of items in a list is announced, add role="list" to the <ul> / <ol>
  */
-nav ul,
-nav ol,
-.clean-list {
+nav :is(ul, ol) {
     list-style: none;
     margin: 0;
     padding: 0;
@@ -43,78 +42,88 @@ nav ol,
     }
 }
 
+/**
+Remove bullets from lists with the `.clean-list, class.
+Note that that this may remove list semantics in some circumstances in some
+WebKit browsers. See https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
+If it's important that the number of items in a list is announced, add role="list" to the <ul> / <ol>
+ */
+.clean-list {
+    list-style: none;
+}
+
 
 /**
 Description lists / Definition lists
  */
 dl {
-	margin-block-end: 1em;
-	margin-block-start: 1em;
+    margin-block: 1rem;
+    max-inline-size: rem($text-measure);
 
-	dt {
-		font-weight: bold;
-	}
+    dt {
+        font-weight: bold;
+    }
 
     dd {
         margin-inline-start: rem(40);
     }
 
-	dd + dt {
-		margin-block-start: 0.5em;
-	}
+    dd + dt {
+        margin-block-start: 0.5em;
+    }
 
-	dt + dd,
-	dd + dd {
-		margin-block-start: 0.25em;
-	}
+    dt + dd,
+    dd + dd {
+        margin-block-start: 0.25em;
+    }
 }
 
 // display items on the same line (comma-separated)
 dl.inline {
-	div {
-		align-items: baseline;
-		display: flex;
-		flex-wrap: wrap;
-
- 		dt, dd {
-			margin-inline-start: 0;
-		}
-
-		dt::after {
-			content: ":\00a0 ";
-		}
-
-		dd:not(:last-child):after {
-			content: ',\00a0 ';
-		}
-	}
+    div {
+        align-items: baseline;
+        display: flex;
+        flex-wrap: wrap;
+
+        dt, dd {
+            margin-inline-start: 0;
+        }
+
+        dt::after {
+            content: ":\00a0 ";
+        }
+
+        dd:not(:last-child):after {
+            content: ',\00a0 ';
+        }
+    }
 }
 
 // With a grid layout for a more tabulated feel
 
 dl.grid {
-	@supports (grid-row-start: auto) {
-		column-gap: 1rem;
-		display: grid;
-		grid-template-columns: max-content;
-		grid-template-rows: 1fr;
-		row-gap: 1rem;
-
-		dd + dt,
-		dt + dd,
-		dd + dd {
-			margin-block-start: 0;
-		}
-
-		dt {
-			grid-column-start: 1;
-			grid-column-end: 2;
-		}
-
-		dd {
-			grid-column-start: 2;
-			grid-column-end: 3;
+    @supports (grid-row-start: auto) {
+        column-gap: 1rem;
+        display: grid;
+        grid-template-columns: max-content;
+        grid-template-rows: 1fr;
+        row-gap: 1rem;
+
+        dd + dt,
+        dt + dd,
+        dd + dd {
+            margin-block-start: 0;
+        }
+
+        dt {
+            grid-column-start: 1;
+            grid-column-end: 2;
+        }
+
+        dd {
+            grid-column-start: 2;
+            grid-column-end: 3;
             margin-inline-start: 0;
-		}
-	}
+        }
+    }
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/30-base/_normalize.scss b/assets-src/styles/sass/30-base/_normalize.scss
deleted file mode 100644
index 192eb9ce..00000000
--- a/assets-src/styles/sass/30-base/_normalize.scss
+++ /dev/null
@@ -1,349 +0,0 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
-   ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
-html {
-  line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
-   ========================================================================== */
-
-/**
- * Remove the margin in all browsers.
- */
-
-body {
-  margin: 0;
-}
-
-/**
- * Render the `main` element consistently in IE.
- */
-
-main {
-  display: block;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * Remove the gray background on active links in IE 10.
- */
-
-a {
-  background-color: transparent;
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Remove the border on images inside links in IE 10.
- */
-
-img {
-  border-style: none;
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select { /* 1 */
-  text-transform: none;
-}
-
-/**
- * Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  vertical-align: baseline;
-}
-
-/**
- * Remove the default vertical scrollbar in IE 10+.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/* Interactive
-   ========================================================================== */
-
-/*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-
-details {
-  display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
-  display: list-item;
-}
-
-/* Misc
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 10+.
- */
-
-template {
-  display: none;
-}
-
-/**
- * Add the correct display in IE 10.
- */
-
-[hidden] {
-  display: none;
-}
diff --git a/assets-src/styles/sass/30-base/_quotes.scss b/assets-src/styles/sass/30-base/_quotes.scss
index 357b5c72..27cf63b0 100644
--- a/assets-src/styles/sass/30-base/_quotes.scss
+++ b/assets-src/styles/sass/30-base/_quotes.scss
@@ -3,40 +3,37 @@
 \*------------------------------------*/
 
 blockquote {
-	margin-inline-end: rem(25);
-	margin-inline-start: rem(25);
+	// margin-inline-end: rem(25);
+	// margin-inline-start: rem(25);
 	padding: rem(10);
 	position: relative;
 
 	&::before {
 		background-color: $twiki-gray;
+        block-size: 100%;
 		content: '';
-		height: 100%;
-		left: rem(-3);
+        inline-size: rem(3);
+        inset-block-start: 0;
+		inset-inline-start: rem(-3);
 		position: absolute;
-		top: 0;
-		width: rem(3);
 	}
 
-	> * + * {
-		margin-top: 1rem;
-	}
+	// > * + * {
+	// 	margin-top: 1rem;
+	// }
 
     > *:first-child {
-        margin-top: 0;
+        margin-block-start: 0;
+    }
+
+    > *:last-child {
+        margin-block-end: 0;
     }
 
 	cite {
 		color: $off-black;
-		font-size: 1rem;
+		font-size: var(--w3c-text-0);
 		font-style: normal;
 		font-weight: bold;
 	}
-}
-
-[dir="rtl"] {
-	blockquote::before {
-		left: auto;
-		right: rem(-3);
-	}
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/30-base/_skip-link.scss b/assets-src/styles/sass/30-base/_skip-link.scss
index c4f09f80..36c4c345 100644
--- a/assets-src/styles/sass/30-base/_skip-link.scss
+++ b/assets-src/styles/sass/30-base/_skip-link.scss
@@ -8,25 +8,17 @@
 	border: solid 3px $black;
 	color: $black;
 	padding: em(10) em(15);
+    position: absolute;
 	text-decoration: none;
 
 	&:active,
 	&:focus {
-		left: 0;
-		position: absolute;
-		top: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
 		z-index: 999;
 
 		span {
 			box-shadow: 0 -1px 0 0 inset;
 		}
 	}
-}
-
-[dir="rtl"] {
-	.skip-link &:active,
-	.skip-link &:focus {
-		left: auto;
-		right: 0;
-	}
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/30-base/_social.scss b/assets-src/styles/sass/30-base/_social.scss
index 1d4e94c7..989051c8 100644
--- a/assets-src/styles/sass/30-base/_social.scss
+++ b/assets-src/styles/sass/30-base/_social.scss
@@ -2,13 +2,10 @@
     #Social links
 \*------------------------------------*/
 
-//ul.social-links {}
-
-
 .social-links__item {
-	height: rem(48);
+	block-size: rem(48);
 	padding: rem(14);
-	width: rem(48);
+	inline-size: rem(48);
 
 	.icon {
 		height: rem(20);
@@ -18,20 +15,4 @@
 	&:hover .icon {
 		color: $link-color--hover;
 	}
-}
-
-//.social-links__item.with-icon {
-//	align-items: center;
-//	color: $link-color;
-//
-//	.icon {
-//		background-color: transparent;
-//		height: 1em;
-//		padding: 0;
-//		width: 1em;
-//	}
-//
-//	&:hover {
-//		text-decoration: none;
-//	}
-//}
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/assets-src/styles/sass/30-base/_tables.scss b/assets-src/styles/sass/30-base/_tables.scss
index fa3d37e4..f4d6f208 100755
--- a/assets-src/styles/sass/30-base/_tables.scss
+++ b/assets-src/styles/sass/30-base/_tables.scss
@@ -1,14 +1,11 @@
 /*------------------------------------*\
     #Tables
-
-    1. Logical property allows text-direction to change with 'dir'
 \*------------------------------------*/
 
 table {
     border: 1px solid $border-color;
     border-collapse: collapse;
-    margin-bottom: 1rem;
-    margin-top: 1rem;
+    margin-block: 1rem;
     width: 100%;
 }
 
@@ -20,17 +17,7 @@ th,
 td,
 table caption {
     padding: 0.75rem;
-    text-align: left; // Fallback for next rule for ltr languages
-    text-align: start; /* 1 */
-}
-
-[dir="rtl"] {
-    th,
-    td,
-    table caption {
-        text-align: right; // Fallback for next rule
-        text-align: start; /* 1 */
-    }
+    text-align: start;
 }
 
 td, th {
@@ -52,9 +39,8 @@ https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html
 @media screen {
     .table-wrap {
         border: 1px solid $border-color;
-        margin-bottom: 1rem;
-        margin-top: 1rem;
-        max-width: 100% !important;
+        margin-block: 1rem;
+        max-inline-size: 100% !important;
 
         &[role][aria-labelledby][tabindex] {
             overflow: auto;
@@ -62,8 +48,7 @@ https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html
 
         table {
             border: 0;
-            margin-bottom: 0;
-            margin-top: 0;
+            margin-block: 0;
         }
 
         &:focus {
diff --git a/assets-src/styles/sass/30-base/_typography.scss b/assets-src/styles/sass/30-base/_typography.scss
index bf944ee0..5b86e7ce 100644
--- a/assets-src/styles/sass/30-base/_typography.scss
+++ b/assets-src/styles/sass/30-base/_typography.scss
@@ -4,67 +4,73 @@
 
 body {
 	font-family: $font-family;
-	font-size: 1rem; // Equivalent to 16px browser default
+	font-size: var(--w3c-text-0);
 	font-style: $font-style;
 	font-weight: $font-weight;
-	line-height: 1.5;
 }
 
 
 p {
-	margin: 1rem 0;
+	margin-block: 1rem;
+	max-inline-size: rem($text-measure);
 }
 
 
 h1, h2, h3, h4, h5, h6 {
 	font-weight: $emphasis;
-	margin: 0 0 1rem;
+	max-inline-size: rem($text-measure);
 }
 
-h1 {
-	margin-bottom: 1em;
-}
+ h1 {
+ 	margin-block-start: 0;
+ }
+
+ :where(h2, h3, h4, h5, h6) {
+	 margin-block-end: 1rem;
+	 margin-block-start: 2em;
+ }
 
-h1,
-.txt-venus {
-	@include txt-venus;
+ :where(h2, h3, h4, h5, h6) + :where(h3, h4, h5, h6) {
+	 margin-block-start: 1em;
 }
 
-h2,
-.txt-earth {
-	@include txt-earth;
+:where(h1, .h1 .venus) {
+	font-size: var(--w3c-text-5);
+	line-height: 1.2;
 }
 
-h3,
-.txt-mars {
-	@include txt-mars;
+:where(h2, .h2, .txt-earth) {
+	font-size: var(--w3c-text-4);
+	line-height: 1.2;
 }
 
-h4,
-.txt-jupiter {
-	@include txt-jupiter;
+:where(h3, .h3, .txt-mars) {
+	font-size: var(--w3c-text-3);
+	line-height: 1.2;
 }
 
-h5,
-.txt-saturn {
-	@include txt-saturn;
+:where(h4, .h4, .txt-jupiter) {
+	font-size: var(--w3c-text-2);
+	line-height: 1.2;
 }
 
-h6 {
-	font-size: 1rem;
+:where(h5, .h5, .txt-saturn) {
+	font-size: var(--w3c-text-1);
+	line-height: 1.2;
 }
 
-.lead {
-	font-size: rem(23);
-	line-height: calc(33.6 / 24);
+:where(h6, .h6) {
+	font-size: var(--w3c-text-0);
 }
 
-.txt-pluto {
-	@include txt-pluto;
+.lead {
+	font-size: var(--w3c-text-2);
+	line-height: 1.4;
+	max-inline-size: rem($text-measure);
 }
 
-.txt-eris {
-	@include txt-eris;
+:where(.txt-pluto, .txt-eris, .text-sm) {
+	font-size: var(--w3c-text-01);
 }
 
 
diff --git a/assets-src/styles/sass/40-layouts/_center.scss b/assets-src/styles/sass/40-layouts/_center.scss
index 7017e4d0..efa6f0fe 100644
--- a/assets-src/styles/sass/40-layouts/_center.scss
+++ b/assets-src/styles/sass/40-layouts/_center.scss
@@ -14,9 +14,7 @@ to our global box-sizing rule.
  */
 .l-center.l-center {
 	box-sizing: content-box /* 1 */;
-	margin-left: auto;
-	margin-right: auto;
-	max-width: rem($max-width);
-	padding-left: 5vw;
-	padding-right: 5vw;
+	margin-inline: auto;
+	max-inline-size: rem($max-width);
+	padding-inline: 5vw;
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/40-layouts/_cover.scss b/assets-src/styles/sass/40-layouts/_cover.scss
index b7561a20..2833a944 100644
--- a/assets-src/styles/sass/40-layouts/_cover.scss
+++ b/assets-src/styles/sass/40-layouts/_cover.scss
@@ -15,20 +15,18 @@
 .l-cover {
 	display: flex;
 	flex-direction: column;
-	min-height: 30vh;
+	min-block-size: 30vh;
 	padding: 1rem;
 }
 
 
 .l-cover > * {
-	margin-top: 1rem;
-	margin-bottom: 1rem;
+	margin-block: 1rem;
 }
 
 
 .l-cover > .principal {
-	margin-top: auto;
-	margin-bottom: auto;
+	margin-block: auto;
 }
 
 
@@ -37,9 +35,9 @@ These styles space out an optional header/footer area without
 disturbing the vertically centered element.
  */
 .l-cover > :first-child:not(.principal) {
-	margin-top: 0;
+	margin-block-start: 0;
 }
 
 .l-cover > :last-child:not(.principal) {
-	margin-bottom: 0;
+	margin-block-end: 0;
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/40-layouts/_frame.scss b/assets-src/styles/sass/40-layouts/_frame.scss
index 57d6e7f0..ca4328e6 100644
--- a/assets-src/styles/sass/40-layouts/_frame.scss
+++ b/assets-src/styles/sass/40-layouts/_frame.scss
@@ -20,21 +20,19 @@
 
 .l-frame > * {
 	align-items: center;
-	bottom: 0;
+	inset-block: 0;
+    inset-inline: 0;
 	display: flex;
 	justify-content: center;
-	left: 0;
 	position: absolute;
-	right: 0;
-	top: 0;
 }
 
 
 .l-frame > iframe,
 .l-frame > img,
 .l-frame > video {
-	height: 100%;
-	width: 100%;
+	block-size: 100%;
+	inline-size: 100%;
 }
 
 .l-frame > img,
@@ -45,17 +43,17 @@
 
 /* Common aspect ratios */
 .l-frame--16-9 {
-	padding-bottom: 56.25%;
+	padding-block-end: 56.25%;
 }
 
 .l-frame--3-2 {
-	padding-bottom: 66.67%;
+	padding-block-end: 66.67%;
 }
 
 .l-frame--4-3 {
-	padding-bottom: 75%;
+	padding-block-end: 75%;
 }
 
 .l-frame--square {
-	padding-bottom: 100%;
+	padding-block-end: 100%;
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/40-layouts/_sidebar.scss b/assets-src/styles/sass/40-layouts/_sidebar.scss
index d330e81d..4eb6d0ec 100644
--- a/assets-src/styles/sass/40-layouts/_sidebar.scss
+++ b/assets-src/styles/sass/40-layouts/_sidebar.scss
@@ -65,12 +65,12 @@ a viewport media query.
 .l-sidebar .not-sidebar {
 	flex-basis: 0;
 	flex-grow: 999;
-	min-width: calc(55% - 1.5rem);
+	min-inline-size: calc(55% - 1.5rem);
 }
 
 
 .l-sidebar--expanded {
-	width: 100%;
+	inline-size: 100%;
 }
 
 .l-sidebar .sidebar--compact {
diff --git a/assets-src/styles/sass/40-layouts/_switcher.scss b/assets-src/styles/sass/40-layouts/_switcher.scss
index 32e3a791..560bafb9 100644
--- a/assets-src/styles/sass/40-layouts/_switcher.scss
+++ b/assets-src/styles/sass/40-layouts/_switcher.scss
@@ -38,7 +38,7 @@ value that's either bigger than the max-width or smaller than the min-width,
 so that either of these properties is applied instead.
  */
 .l-switcher > * > * {
-	max-width: 100%; /* 1 */
-	min-width: 50%; /* 2 */
-	width: calc(690px * 690 - 100% * 690); /* 3 */
+    inline-size: calc(690px * 690 - 100% * 690); /* 3 */
+	max-inline-size: 100%; /* 1 */
+	min-inline-size: 50%; /* 2 */
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/50-core-components/_activity.scss b/assets-src/styles/sass/50-core-components/_activity.scss
index 26b65cbb..f6bbe66b 100644
--- a/assets-src/styles/sass/50-core-components/_activity.scss
+++ b/assets-src/styles/sass/50-core-components/_activity.scss
@@ -4,8 +4,7 @@
 
 .component--activity {
 	background-color: $mist-gray;
-	padding-bottom: rem(50);
-	padding-top: rem(50);
+	padding-block: rem(50);
 }
 
 .component--activity .component--columns--images {
diff --git a/assets-src/styles/sass/50-core-components/_archive-banner.scss b/assets-src/styles/sass/50-core-components/_archive-banner.scss
index 0e2ff9eb..af1ec876 100644
--- a/assets-src/styles/sass/50-core-components/_archive-banner.scss
+++ b/assets-src/styles/sass/50-core-components/_archive-banner.scss
@@ -5,18 +5,15 @@
 @media screen {
 	#archive-banner {
 		background-color: #f9dc4a;
-		padding-bottom: 1.25rem;
-		padding-top: 1.25rem;
+		padding-block: 1.25rem;
 	}
 
 	#archive-banner .centered {
 		box-sizing: content-box;
-		margin-left: auto;
-		margin-right: auto;
-		max-width: 70rem;
+		margin-inline: auto;
+		max-winline-size: 70rem;
 		overflow: hidden;
-		padding-left: 5vw;
-		padding-right: 5vw;
+		padding-inline: 5vw;
 	}
 
 	#archive-banner .centered > * {
@@ -33,30 +30,29 @@
 	#archive-banner .archive-banner__message {
 		flex-basis: 0;
 		flex-grow: 999;
-		min-width: calc(80% - 1.5rem);
+		min-inline-size: calc(80% - 1.5rem);
 	}
 
 	#archive-banner .archive-banner__message > * + * {
-		margin-top: 1rem;
+		margin-block-start: 1rem;
 	}
 
 	#archive-banner .archive-banner__message > * {
-		max-width: 41.25rem;
+		max-inline-size: 41.25rem;
 	}
 
 	#archive-banner .archive-banner__message h2 {
 		display: block;
-		font-size: rem(19);
-		line-height: calc(32 / 19);
+		font-size: var(--w3c-text-1);
+		//line-height: calc(32 / 19);
 	}
 
 	#archive-banner .archive-banner__message h3 {
-		font-size: 1rem;
-		line-height: calc(32 / 24);
+		font-size: var(--w3c-text-0);
 	}
 
 	#archive-banner .archive-banner__message h3 + * {
-		margin-top: 0;
+		margin-block-start: 0;
 	}
 
 	#archive-banner a {
@@ -83,16 +79,16 @@
 
 	#archive-banner .archive-banner__logo > span {
 		display: block;
-		height: 2.75rem;
+		block-size: 2.75rem;
 		position: relative;
-		width: 4.125rem;
+		inline-size: 4.125rem;
 	}
 }
 
 @media screen and (min-width: 64em) {
 	#archive-banner .archive-banner__logo > span {
-		height: 3.25rem;
-		width: 4.875rem;
+        block-size: 3.25rem;
+        inline-size: 4.875rem;
 	}
 }
 
@@ -116,27 +112,17 @@
 	}
 
 	.archive-banner__message {
-		min-height: 40pt;
-		padding-left: 62pt;
+		min-block-size: 40pt;
+		padding-inline-start: 62pt;
 	}
 
 	.archive-banner__message > * + * {
-		margin-top: 8pt;
-	}
-
-	[dir="rtl"] .archive-banner__message {
-		padding-left: 0;
-		padding-right: 60pt;
+		margin-block-start: 8pt;
 	}
 
 	.archive-banner__logo {
-		left: 8pt;
+        inset-block-start: 8pt;
+		inset-inline-start: 8pt;
 		position: absolute;
-		top: 8pt;
-	}
-
-	[dir="rtl"] .archive-banner__logo {
-		left: auto;
-		right: 8pt;
 	}
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/50-core-components/_avatars.scss b/assets-src/styles/sass/50-core-components/_avatars.scss
new file mode 100644
index 00000000..fc870954
--- /dev/null
+++ b/assets-src/styles/sass/50-core-components/_avatars.scss
@@ -0,0 +1,36 @@
+/*------------------------------------*\
+    #Avatars
+\*------------------------------------*/
+
+.avatar {
+    background-color: $white;
+    block-size: rem(100);
+    border: solid 1px $w3c-blue;
+    border-radius: 50%;
+    inline-size: rem(100);
+    overflow: hidden;
+
+    img {
+        block-size: 100%;
+        inline-size: 100%;
+        object-fit: cover;
+    }
+}
+
+.avatar--med {
+    block-size: rem(50);
+    inline-size: rem(50);
+
+    img {
+        margin-block-start: 0;
+    }
+}
+
+.avatar--small {
+    block-size: rem(32);
+    inline-size: rem(32);
+
+    img {
+        margin-block-start: 0;
+    }
+}
\ No newline at end of file
diff --git a/assets-src/styles/sass/50-core-components/_breadcrumbs.scss b/assets-src/styles/sass/50-core-components/_breadcrumbs.scss
index 2c2c3e41..d13d3961 100644
--- a/assets-src/styles/sass/50-core-components/_breadcrumbs.scss
+++ b/assets-src/styles/sass/50-core-components/_breadcrumbs.scss
@@ -4,8 +4,7 @@
 \*------------------------------------*/
 
 #breadcrumb {
-	padding-bottom: rem(15);
-	padding-top: rem(10);
+    padding-block: rem(10) rem(15);
 
 	.l-cluster > * {
 		margin: 0 rem(-11);
@@ -13,25 +12,18 @@
 
 	.l-cluster.l-cluster > * > * {
 		margin: 0 0 0 rem(11);
-		padding-right: 1em;
+		padding-inline-end: 1em;
 		position: relative;
 	}
 }
 
-[dir="rtl"] {
-	#breadcrumb .l-cluster.l-cluster > * > * {
-		margin: 0 rem(11) 0 0;
-		padding-left: 1em;
-		padding-right: 0;
-	}
-}
 
 .breadcrumbs a {
-	@include txt-pluto;
+	//@include txt-pluto;
 	color: $off-black;
 	display: block;
-	padding-bottom: rem(11);
-	padding-top: rem(11);
+	font-size: var(--w3c-text-01);
+	padding-block: rem(11);
 
 	&:visited,
 	&:hover,
@@ -69,9 +61,6 @@ Separator chevron - see https://codepen.io/jonneal/pen/kptBs
 	}
 }
 
-// .breadcrumbs li:not(:last-child) {
-// 	&::after {}
-// }
 
 [dir="rtl"] {
 	.breadcrumbs li:not(:last-child) {
diff --git a/assets-src/styles/sass/50-core-components/_cards.scss b/assets-src/styles/sass/50-core-components/_cards.scss
index 3a957789..9a1aff46 100644
--- a/assets-src/styles/sass/50-core-components/_cards.scss
+++ b/assets-src/styles/sass/50-core-components/_cards.scss
@@ -4,22 +4,15 @@
 
 .card {
 	background-color: $white;
+    block-size: 100%;
 	border-radius: rem(4);
 	display: flex;
 	flex-direction: column;
-	height: 100%;
 	overflow: hidden;
 }
 
 .card--event {
-	border-left: solid rem(6);
-}
-
-[dir="rtl"] {
-	.card--event {
-		border-left: 0;
-		border-right: solid rem(6);
-	}
+	border-inline-start: solid rem(6);
 }
 
 .card--event,
@@ -50,22 +43,22 @@
 .card__text {
 	flex-grow: 1;
 	order: 1;
-	padding-top: 1rem;
+	// padding-block-start: 1rem;
 }
 
 .card--group .card__text {
-	max-width: rem($text-measure);
+	max-inline-size: rem($text-measure);
 }
 
 .card__text > a:not([class]) {
 	align-self: flex-start;
-	margin-top: rem(6);
-	padding-bottom: rem(10);
-	padding-top: rem(10);
+	// margin-block-start: rem(6);
+	padding-block: rem(10);
 }
 
 .card__heading {
-	@include txt-saturn;
+	//@include txt-saturn;
+	font-size: var(--w3c-text-1);
 }
 
 .card__image img {
@@ -78,9 +71,7 @@
 	text-decoration: none;
 
 	&:hover {
-		text-decoration: underline; /* 1 */
-		text-decoration-skip-ink: auto; // Not supported by Safari
-		text-underline-offset: 0.25em; // Supported by Safari
+		text-decoration: underline;
 	}
 
 	&:focus {
@@ -92,42 +83,41 @@
 }
 
 .card--user.l-sidebar {
-	padding-bottom: rem(30);
-	padding-top: rem(40);
+    padding-block: rem(40) rem(30);
 
 	.sidebar {
 		flex-basis: auto;
 		order: -1;
 
 		img {
-			width: rem(100);
+			inline-size: rem(100);
 		}
 	}
 
 	.not-sidebar {
-		min-width: calc(70% - 1.5rem);
+		min-inline-size: calc(70% - 1.5rem);
 	}
 
 	.not-sidebar > div {
-		max-width: rem($text-measure);
+		max-inline-size: rem($text-measure);
 
-		> * + * {
-			margin-top: rem(20);
-		}
+		// > * + * {
+		// 	margin-block-start: rem(20);
+		// }
 	}
 
 	.l-cluster > * {
 		align-items: center;
 	}
 
-	.l-cluster > *,
-	.l-cluster.l-cluster > * > * {
-		margin-bottom: 0;
-		margin-top: 0;
-	}
+	// .l-cluster > *,
+	// .l-cluster.l-cluster > * > * {
+	// 	margin-block: 0;
+	// }
 
 	.l-cluster a {
 		display: inline-block;
-		padding: rem(12) 0;
+		padding-block: rem(12);
+        padding-inline: 0;
 	}
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/50-core-components/_collapsibles.scss b/assets-src/styles/sass/50-core-components/_collapsibles.scss
index 6ce45d6c..f80f9a28 100644
--- a/assets-src/styles/sass/50-core-components/_collapsibles.scss
+++ b/assets-src/styles/sass/50-core-components/_collapsibles.scss
@@ -10,30 +10,32 @@
 		padding: rem(25);
 	}
 
-	> div + div {
-		margin-top: 1rem;
-	}
+	// > div + div {
+	// 	margin-top: 1rem;
+	// }
 
 }
 
-[data-heading="collapsibles"] span {
-	@include stack(1rem);
-}
+// [data-heading="collapsibles"] span {
+// 	@include stack(1rem);
+// }
 
 [data-heading="collapsibles"] h3 {
-	@include txt-saturn;
+	//@include txt-saturn;
+	font-size: var(--w3c-text-1);
 }
 
 [data-heading="collapsibles"] > * {
-	@include txt-pluto;
+	//@include txt-pluto;
 	display: block;
+	font-size: var(--w3c-text-01);
 	font-weight: normal;
-	margin-top: 1rem;
+	// margin-block-start: 1rem;
 }
 
 [data-heading="collapsibles"] + * {
 	// Restrict line-length for readability
 	> * {
-		max-width: rem($text-measure);
+		max-inline-size: rem($text-measure);
 	}
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/50-core-components/_columns.scss b/assets-src/styles/sass/50-core-components/_columns.scss
index aae918df..7ba0acab 100644
--- a/assets-src/styles/sass/50-core-components/_columns.scss
+++ b/assets-src/styles/sass/50-core-components/_columns.scss
@@ -13,20 +13,20 @@
 		margin: -1.5%;
 	}
 
-	li + li {
-		margin-top: rem(20);
-
-		@include mq($bp-tab-small) {
-			margin-top: 0;
-		}
-	}
+	// li + li {
+	// 	margin-block-start: rem(20);
+    //
+	// 	@include mq($bp-tab-small) {
+    //         margin-block-start: 0;
+	// 	}
+	// }
 }
 
 .component--columns--images {
 	> ul > li {
 		@include mq($bp-tab-small) {
 			flex: 1 0 33%;
-			max-width: 50%;
+			max-inline-size: 50%;
 			padding: 1.5%;
 		}
 	}
@@ -44,7 +44,7 @@
 	> ul > li {
 		@include mq($bp-tab-small) {
 			flex: 1 0 50%;
-			max-width: 50%;
+			max-inline-size: 50%;
 			padding: 1.5%;
 		}
 
diff --git a/assets-src/styles/sass/50-core-components/_comments.scss b/assets-src/styles/sass/50-core-components/_comments.scss
index 1b2b7519..265de8b0 100644
--- a/assets-src/styles/sass/50-core-components/_comments.scss
+++ b/assets-src/styles/sass/50-core-components/_comments.scss
@@ -4,26 +4,26 @@
 
 .comments {
 	background-color: $mist-gray;
-	padding-bottom: rem(50);
-	padding-top: rem(50);
+	padding-block: rem(50);
 
 	h2 {
-		@include txt-mars;
+		//@include txt-mars;
+		font-size: var(--w3c-text-3);
 	}
 
 }
 
 .comment-list {
-	margin-top: rem(30);
+	// margin-block-start: rem(30);
 
 	> li {
-		border-bottom: solid 1px $border-color;
-		padding-bottom: rem(50);
+		border-block-end: solid 1px $border-color;
+		padding-block-end: rem(50);
 	}
 
-	> li + li {
-		margin-top: rem(20);
-	}
+	// > li + li {
+	// 	margin-block-start: rem(20);
+	// }
 
 }
 
@@ -40,78 +40,64 @@
 		order: -1;
 
 		img {
-			width: rem(50);
+			inline-size: rem(50);
 		}
 	}
 
 	.not-sidebar {
-		min-width: calc(80% - 1.5rem);
+		min-inline-size: calc(80% - 1.5rem);
 	}
 }
 
 .reply-list.reply-list {
-	margin-left: rem(70);
-	margin-top: rem(30);
-	padding-left: rem(30);
+    // margin-block-start: rem(30);
+	margin-inline-start: rem(70);
+	padding-inline-start: rem(30);
 	position: relative;
 
 	&::before {
 		background-color: $w3c-blue;
+        block-size: 100%;
 		border-radius: rem(3);
 		content: '';
-		height: 100%;
-		left: 0;
+        inline-size: rem(3);
+        inset-block-start: 0;
+		inset-inline-start: 0;
 		position: absolute;
-		top: 0;
-		width: rem(3);
 	}
 
 	> li {
-		border-top: solid 1px $border-color;
-	}
-
-	> li + li {
-		margin-top: rem(20);
+		border-block-start: solid 1px $border-color;
 	}
-}
 
-[dir="rtl"] {
-	.reply-list.reply-list {
-		margin-left: 0;
-		margin-right: rem(70);
-		padding-left: 0;
-		padding-right: rem(30);
-
-		&::before {
-			left: auto;
-			right: 0;
-		}
-	}
+	// > li + li {
+	// 	margin-block-start: rem(20);
+	// }
 }
 
 .reply-list .comment {
-	padding-top: rem(20);
+	padding-block-start: rem(20);
 }
 
 .comment__author {
-	font-size: 1rem;
+	font-size: var(--w3c-text-0);
 	font-weight: bold;
-	line-height: calc(32 / 24);
+	//line-height: calc(32 / 24);
 }
 
 .comment__body {
-	max-width: rem($text-measure);
+	max-inline-size: rem($text-measure);
 }
 
 [data-replylink] {
-	@include txt-pluto;
+	//@include txt-pluto;
 	align-self: flex-start;
-	padding-bottom: rem(11);
-	padding-top: rem(11);
+	font-size: var(--w3c-text-01);
+	padding-block: rem(11);
 }
 
 #respond {
-	margin-top: 1rem;
+	// margin-block-start: 1rem;
 
 	> div:first-of-type {
 		align-items: center;
@@ -121,11 +107,11 @@
 }
 
 .comment-form-wrap {
-	margin-top: rem(30);
+	// margin-block-start: rem(30);
 }
 
 #comment-form {
-	max-width: rem($text-measure);
+	max-inline-size: rem($text-measure);
 
 	.l-switcher {
 		overflow: visible;
@@ -137,7 +123,7 @@
 	}
 
 	.l-switcher > * > * {
+        inline-size: calc(660px * 660 - 100% * 660);
 		padding: rem(10);
-		width: calc(660px * 660 - 100% * 660);
 	}
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/50-core-components/_component.scss b/assets-src/styles/sass/50-core-components/_component.scss
new file mode 100644
index 00000000..3180518a
--- /dev/null
+++ b/assets-src/styles/sass/50-core-components/_component.scss
@@ -0,0 +1,18 @@
+/*------------------------------------*\
+    #Component
+
+    Extra vertical margin on anything with a class of `.component`
+\*------------------------------------*/
+
+.component {
+    margin-block: rem(80);
+
+    @include mq($bp-tab-small) {
+        margin-block: rem(100);
+    }
+}
+
+/* Full width components tend to have a background colour, where we don't want white space in between */
+.component.u-full-width + .component.u-full-width {
+    margin-block: 0;
+}
\ No newline at end of file
diff --git a/assets-src/styles/sass/50-core-components/_evangelists.scss b/assets-src/styles/sass/50-core-components/_evangelists.scss
index dc6c5019..2eeac445 100644
--- a/assets-src/styles/sass/50-core-components/_evangelists.scss
+++ b/assets-src/styles/sass/50-core-components/_evangelists.scss
@@ -9,14 +9,14 @@
 		justify-content: space-between;
 	}
 
-	> * + * {
-		margin-top: 1rem;
-
-		@include mq($bp-tab-large) {
-			margin-top: 0;
-		}
-
-	}
+	// > * + * {
+	// 	margin-block-start: 1rem;
+    //
+	// 	@include mq($bp-tab-large) {
+    //         margin-block-start: 0;
+	// 	}
+    //
+	// }
 }
 
 .component--evangelists__text {
@@ -25,7 +25,7 @@
 	}
 
 	h2 ~ * {
-		max-width: rem($text-measure);
+		max-inline-size: rem($text-measure);
 	}
 }
 
@@ -34,15 +34,14 @@
 	border-radius: rem(6);
 	color: $white;
 	overflow: hidden;
-	padding-top: rem(24);
+	padding-block-start: rem(24);
 
 	@include mq($bp-tab-large) {
 		flex-basis: 45%;
 	}
 
 	h3 {
-		padding-left: rem(24);
-		padding-right: rem(24);
+		padding-inline: rem(24);
 	}
 
     .l-box {
@@ -50,12 +49,11 @@
     }
 
 	li + li {
-		border-top: solid 1px #649bc5;
+		border-block-start: solid 1px #649bc5;
 	}
 
 	p {
-		margin-bottom: 0;
-		margin-top: 0;
+		margin-block: 0;
 	}
 
 	.sidebar {
@@ -63,8 +61,8 @@
 	}
 
 	.not-sidebar {
-		@include stack(0.75em);
-		min-width: calc(65% - 1.5rem);
+		// @include stack(0.75em);
+		min-inline-size: calc(65% - 1.5rem);
 	}
 
 	a {
diff --git a/assets-src/styles/sass/50-core-components/_family-series-list.scss b/assets-src/styles/sass/50-core-components/_family-series-list.scss
index ff587433..b4858d92 100644
--- a/assets-src/styles/sass/50-core-components/_family-series-list.scss
+++ b/assets-src/styles/sass/50-core-components/_family-series-list.scss
@@ -6,6 +6,6 @@
     padding-block-start: rem(28);
 }
 
-.family-grouping h2 + * {
-    margin-block-start: 1rem;
-}
\ No newline at end of file
+// .family-grouping h2 + * {
+//     margin-block-start: 1rem;
+// }
\ No newline at end of file
diff --git a/assets-src/styles/sass/50-core-components/_fifty-fifty.scss b/assets-src/styles/sass/50-core-components/_fifty-fifty.scss
index 5c5bdd02..5f7a410d 100644
--- a/assets-src/styles/sass/50-core-components/_fifty-fifty.scss
+++ b/assets-src/styles/sass/50-core-components/_fifty-fifty.scss
@@ -10,13 +10,13 @@
 		justify-content: space-between;
 	}
 
-	> * + * {
-		margin-top: 1rem;
-
-		@include mq($bp-tab-small) {
-			margin-top: 0;
-		}
-	}
+	// > * + * {
+	// 	margin-block-start: 1rem;
+    //
+	// 	@include mq($bp-tab-small) {
+    //         margin-block-start: 0;
+	// 	}
+	// }
 }
 
 .component--fifty-fifty__text {
@@ -30,8 +30,8 @@
 }
 
 .component--fifty-fifty__text .l-box {
-	@include stack(1rem);
-	margin-top: rem(30);
+	// @include stack(1rem);
+	margin-block-start: rem(30);
 
 	a {
 		align-self: flex-start;
@@ -52,15 +52,15 @@
 }
 
 .component--fifty-fifty .image .l-frame {
-	padding-bottom: 66.67%;
+	padding-block-end: 66.67%;
 
 	@include mq($bp-tab-small) {
-		padding-bottom: 100%;
+		padding-block-end: 100%;
 	}
 }
 
 .component--fifty-fifty .illustration .l-frame {
-	padding-bottom: 75%;
+	padding-block-end: 75%;
 }
 
 .component--fifty-fifty.reversed {
diff --git a/assets-src/styles/sass/50-core-components/_footer.scss b/assets-src/styles/sass/50-core-components/_footer.scss
index 8eb2ea23..1fcd7011 100644
--- a/assets-src/styles/sass/50-core-components/_footer.scss
+++ b/assets-src/styles/sass/50-core-components/_footer.scss
@@ -3,23 +3,24 @@
 \*------------------------------------*/
 
 .global-footer {
-	border-top: solid 1px $border-color;
+	border-block-start: solid 1px $border-color;
 	grid-row-start: 2; // Needed for sticky footer
 	grid-row-end: 3; // Needed for sticky footer
-	padding: rem(20) 0 rem(25);
+    padding-block: rem(20) rem(25);
 
 	.l-center {
-		@include stack(1rem);
+		//@include stack(1rem);
 	}
 
 	a,
 	.copyright {
-		@include txt-eris;
+		//@include txt-eris;
+		font-size: var(--w3c-text-01);
 	}
 
-	.copyright {
-		margin-bottom: 0;
-	}
+	// .copyright {
+	// 	margin-block-end: 0;
+	// }
 
 	a {
 		color: $off-black;
@@ -55,16 +56,15 @@
 
 	a:not([class]) {
 		display: block;
-		padding-bottom: rem(12);
-		padding-top: rem(12);
+		padding-block: rem(12);
 	}
 
 	.with-icon--larger {
 		padding: rem(12);
 
 		img {
-			height: rem(20);
-			width: rem(20);
+			block-size: rem(20);
+			inline-size: rem(20);
 		}
 
 		&:focus {
diff --git a/assets-src/styles/sass/50-core-components/_group-list.scss b/assets-src/styles/sass/50-core-components/_group-list.scss
index ef832661..be2015e3 100644
--- a/assets-src/styles/sass/50-core-components/_group-list.scss
+++ b/assets-src/styles/sass/50-core-components/_group-list.scss
@@ -4,10 +4,9 @@
 
 .component--group-list {
 	background-color: $mist-gray;
-	padding-bottom: rem(50);
-	padding-top: rem(50);
+	padding-block: rem(50);
 }
 
 .component--group-list__intro {
-	max-width: rem($text-measure);
+	max-inline-size: rem($text-measure);
 }
diff --git a/assets-src/styles/sass/50-core-components/_header.scss b/assets-src/styles/sass/50-core-components/_header.scss
index 8e652bbb..ba30e4cd 100644
--- a/assets-src/styles/sass/50-core-components/_header.scss
+++ b/assets-src/styles/sass/50-core-components/_header.scss
@@ -15,8 +15,7 @@
 
 .global-header .banner {
 	background-color: $light-blue;
-	padding-bottom: rem(10);
-	padding-top: rem(10);
+	padding-block: rem(10);
 }
 
 .global-header .banner__inner {
@@ -24,9 +23,9 @@
 	display: flex;
 
 	p {
-		@include txt-eris;
-		margin-bottom: 0;
-		margin-top: 0;
+		//@include txt-eris;
+		font-size: var(--w3c-text-01);
+		// margin-block: 0;
 	}
 
 	a {
@@ -51,11 +50,11 @@
 	}
 
 	a {
-		@include txt-eris;
+		//@include txt-eris;
 		color: $off-black;
 		display: block;
-		padding-bottom: rem(12);
-		padding-top: rem(12);
+		font-size: var(--w3c-text-01);
+		padding-block: rem(12);
 	}
 }
 
diff --git a/assets-src/styles/sass/50-core-components/_hero.scss b/assets-src/styles/sass/50-core-components/_hero.scss
index 21dd9a24..8a13b4a0 100644
--- a/assets-src/styles/sass/50-core-components/_hero.scss
+++ b/assets-src/styles/sass/50-core-components/_hero.scss
@@ -19,40 +19,38 @@
 	}
 
 	.l-sidebar .not-sidebar {
-		min-width: 50%;
-		padding-bottom: rem(30);
+		min-inline-size: 50%;
+		padding-block-end: rem(30);
 	}
 
 	.l-sidebar .not-sidebar > * {
 		@include mq($max-width) {
-			max-width: rem(504);
+			max-inline-size: rem(504);
 		}
 	}
 
-	.lead {
-		margin-bottom: rem(18);
-		margin-top: 0;
-	}
+	// .lead {
+	// 	margin-block-end: rem(18);
+	// 	margin-block-start: 0;
+	// }
 
 	img {
-		margin-left: auto;
-		margin-right: auto;
-		//max-width: rem(500);
+		margin-inline: auto;
 
 		@include mq($bp-tab-small) {
-			max-width: rem(500);
+			max-inline-size: rem(500);
 		}
 	}
 
 }
 
-.hero h1 {
-	margin-bottom: 1rem;
-}
+// .hero h1 {
+// 	margin-block-end: 1rem;
+// }
 
-.hero + * {
-	margin-top: rem(50);
-}
+// .hero + * {
+// 	margin-block-start: rem(50);
+// }
 
 .hero .button {
 	align-self: flex-start;
@@ -60,12 +58,12 @@
 
 .hero--listing {
 	background-color: $white;
-	margin-bottom: rem(20);
-	padding-bottom: rem(40);
+	// margin-block-end: rem(20);
+	padding-block-end: rem(40);
 
-	+ * {
-		margin-top: 0;
-	}
+	// + * {
+	// 	margin-block-start: 0;
+	// }
 }
 
 .hero--listing .filters.l-switcher {
@@ -73,9 +71,9 @@
 	overflow: visible;
 
 	> * > * {
-		min-width: 33.333%;
+        inline-size: calc(920px * 920 - 100% * 920);
+		min-inline-size: 33.333%;
 		padding: rem(10);
-		width: calc(920px * 920 - 100% * 920);
 	}
 }
 
@@ -89,16 +87,13 @@
 		}
 	}
 
-	.field {
-		margin-top: 0;
-	}
+	// .field {
+	// 	margin-block-start: 0;
+	// }
 
 	.button--ghost {
-		padding-left: rem(3);
-		padding-right: rem(3);
-		text-decoration: underline; /* 1 */
-		text-decoration-skip-ink: auto; // Not supported by Safari
-		text-underline-offset: 0.25em; // Supported by Safari
+		padding-inline: rem(3);
+		text-decoration: underline;
 
 		&:hover {
 			box-shadow: 0 0 4px 2px rgba(84,84,84,0.25);
@@ -127,7 +122,7 @@
 	}
 
 	h2 {
-		font-size: 1rem;
+		font-size: var(--w3c-text-0);
 		font-weight: normal;
 	}
 }
diff --git a/assets-src/styles/sass/50-core-components/_images.scss b/assets-src/styles/sass/50-core-components/_images.scss
index a6a70436..7da91821 100644
--- a/assets-src/styles/sass/50-core-components/_images.scss
+++ b/assets-src/styles/sass/50-core-components/_images.scss
@@ -2,21 +2,13 @@
     #Image component
 \*------------------------------------*/
 
-.component--image {
-	figcaption {
-		@include txt-pluto;
-		margin-block-start: 1em;
-
-		> * {
-			max-width: rem(540);
-		}
-
-		> a {
-			align-self: flex-start;
-			display: inline-block;
-			margin: 0;
-			padding-bottom: rem(10);
-			padding-top: rem(10);
-		}
-	}
-}
\ No newline at end of file
+//.component--image {
+//	figcaption {
+//
+//		> a {
+//			display: inline-block;
+//			margin: 0;
+//			padding-block: rem(10);
+//		}
+//	}
+//}
\ No newline at end of file
diff --git a/assets-src/styles/sass/50-core-components/_logo.scss b/assets-src/styles/sass/50-core-components/_logo.scss
index 0808cbcd..3b8f00ec 100755
--- a/assets-src/styles/sass/50-core-components/_logo.scss
+++ b/assets-src/styles/sass/50-core-components/_logo.scss
@@ -4,33 +4,32 @@
 
 .logo {
 	display: block;
-	height: rem(44);
+	block-size: rem(44);
+    inline-size: rem(66);
 	position: relative;
-	width: rem(66);
 
 	@include mq($bp-tab-large) {
-		height: rem(52);
-		width: rem(78);
+        block-size: rem(52);
+        inline-size: rem(78);
 	}
 }
 
 .logo--member {
 	height: rem(84);
-	padding-left: rem(20);
-	padding-right: rem(20);
+    inline-size: rem(150);
+	padding-inline: rem(20);
 	position: relative;
-	width: rem(150);
 
 	> img {
-		bottom: 0;
-		height: auto;
-		left: 0;
+		inset-block-end: 0;
+        iinset-block-start: 0;
+		block-size: auto;
+        inline-size: auto;
+        inset-inline-end: 0;
+		inset-inline-start: 0;
 		margin: auto 0;
-		max-height: 100%;
-		max-width: calc(100% - 40px);
+		max-block-size: 100%;
+		max-inline-size: calc(100% - 40px);
 		position: absolute;
-		right: 0;
-		top: 0;
-		width: auto;
 	}
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/50-core-components/_main.scss b/assets-src/styles/sass/50-core-components/_main.scss
index 8cbfd5ab..683dc1bc 100644
--- a/assets-src/styles/sass/50-core-components/_main.scss
+++ b/assets-src/styles/sass/50-core-components/_main.scss
@@ -11,20 +11,8 @@ to our global box-sizing rule.
 main,
 #main {
 	box-sizing: content-box /* 1 */;
-	margin-left: auto;
-	margin-right: auto;
-	max-width: rem($max-width);
-	padding: rem(24) 5vw rem(100);
-}
-
-#main .component + .component {
-	margin-top: rem(80);
-
-	@include mq($bp-tab-small) {
-		margin-top: rem(100);
-	}
-}
-
-#main .component.u-full-width + .component.u-full-width {
-	margin-top: 0;
+	margin-inline: auto;
+	max-inline-size: rem($max-width);
+	padding-block: rem(24) rem(100);
+    padding-inline: 5vw;
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/50-core-components/_maturity-levels.scss b/assets-src/styles/sass/50-core-components/_maturity-levels.scss
index e474d559..0909228f 100644
--- a/assets-src/styles/sass/50-core-components/_maturity-levels.scss
+++ b/assets-src/styles/sass/50-core-components/_maturity-levels.scss
@@ -6,7 +6,7 @@
     background-color: rgba(#cecdcd, 0.5);
     border-radius: rem(4);
     display: inline-block;
-    margin-bottom: rem(5);
+    // margin-block-end: rem(5);
     padding: rem(2.5) rem(5);
 }
 
diff --git a/assets-src/styles/sass/50-core-components/_members-grid.scss b/assets-src/styles/sass/50-core-components/_members-grid.scss
index 3801609f..acee3b0d 100644
--- a/assets-src/styles/sass/50-core-components/_members-grid.scss
+++ b/assets-src/styles/sass/50-core-components/_members-grid.scss
@@ -4,21 +4,20 @@
 
 .component--members {
 	background-color: $mist-gray;
-	padding-bottom: rem(25);
-	padding-top: rem(25);
+	padding-block: rem(25);
 }
 
 .component--members .l-center {
 	> h2,
 	> p {
-		max-width: rem($text-measure);
+		max-inline-size: rem($text-measure);
 	}
 }
 
 .component--members__grid {
 	display: flex;
 	flex-wrap: wrap;
-	margin-bottom: 1rem;
+	// margin-block-end: 1rem;
 
 	@supports (display: grid) {
 		display: grid;
@@ -33,9 +32,8 @@
 	background-color: $white;
 	display: flex;
 	justify-content: center;
-	margin-bottom: rem(20);
-	margin-left: rem(10);
-	margin-right: rem(10);
+	margin-block-end: rem(20);
+	margin-inline: rem(10);
 	flex: 1 1 rem(170);
 	position: relative;
 
@@ -45,14 +43,15 @@
 }
 
 .component--members__grid figcaption {
-	@include txt-pluto;
+	//@include txt-pluto;
+	font-size: var(--w3c-text-01);
 	font-weight: bold;
 	margin: rem(10);
 	text-align: center;
 }
 
 .component--members__grid .l-box {
-	max-width: rem(170);
+	max-inline-size: rem(170);
 }
 
 .component--members__grid + a {
@@ -61,7 +60,7 @@
 
 .component--members__cta > * {
 	align-items: center;
-	margin-top: 1em;
+	margin-block-start: 1em;
 }
 
 .component--members__cta > * > *:not(a) {
diff --git a/assets-src/styles/sass/50-core-components/_meta-info.scss b/assets-src/styles/sass/50-core-components/_meta-info.scss
index d7095f91..79290667 100644
--- a/assets-src/styles/sass/50-core-components/_meta-info.scss
+++ b/assets-src/styles/sass/50-core-components/_meta-info.scss
@@ -3,17 +3,15 @@
 \*------------------------------------*/
 
 .meta {
-	border-bottom: solid 1px $border-color;
-	border-top: solid 1px $border-color;
-	margin-bottom: rem(50);
+	border-block: solid 1px $border-color;
+	// margin-block-end: rem(50);
 	padding: rem(24) 0;
 
-	dl {
-		margin-bottom: 0;
-	}
+	// dl {
+	// 	margin-block-end: 0;
+	// }
 }
 
 .meta .with-link {
-	padding-bottom: rem(10);
-	padding-top: rem(10);
+	padding-block: rem(10);
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/50-core-components/_navigation.scss b/assets-src/styles/sass/50-core-components/_navigation.scss
index d138a9f8..e8e464ef 100644
--- a/assets-src/styles/sass/50-core-components/_navigation.scss
+++ b/assets-src/styles/sass/50-core-components/_navigation.scss
@@ -7,14 +7,13 @@
 }
 
 #global-nav {
-	border-bottom: solid 1px $border-color;
+	border-block-end: solid 1px $border-color;
 	display: block;
-	padding-bottom: rem(18);
-	padding-top: rem(18);
+	padding-block: rem(18);
 
 	@include mq($max-width) {
-		padding-bottom: 0;
-		padding-top: rem(20);
+		padding-block-end: 0;
+		padding-block-start: rem(20);
 	}
 }
 
@@ -35,13 +34,13 @@
 	display: flex;
 	flex-basis: 100%;
 	flex-wrap: wrap;
-	padding-bottom: rem(45);
-	width: 100%;
+    inline-size: 100%;
+	padding-block-end: rem(45);
 
 	@include mq($max-width) {
 		flex-basis: auto;
 		flex-wrap: nowrap;
-		padding-bottom: 0;
+        padding-block-end: 0;
 	}
 }
 
@@ -62,7 +61,7 @@ li.top-nav-item + li.top-nav-item {
 	flex-basis: 100%;
 
 	@include mq($max-width) {
-		border-bottom: none;
+		border-block-end: none;
 		flex-basis: auto;
 	}
 }
@@ -109,18 +108,18 @@ li.top-nav-item + li.top-nav-item {
 
 	@include mq($max-width) {
 		margin-inline-end: rem(25);
-		padding-bottom: rem(5);
+		padding-block-end: rem(5);
 		position: relative;
 
 		&::before {
 			background-color: $w3c-blue;
-			bottom: 0;
-			content:'';
-			display: none;
-			height: rem(3);
-			left: 0;
+            block-size: rem(3);
+            content:'';
+            display: none;
+            inline-size: 100%;
+			inset-block-end: 0;
+            inset-inline-start: 0;
 			position: absolute;
-			width: 100%;
 		}
 
 		&:hover::before {
@@ -133,18 +132,18 @@ li.top-nav-item + li.top-nav-item {
 	align-items: center;
 	color: $off-black;
 	display: flex;
-	min-height: rem(44);
+	min-block-size: rem(44);
 	text-decoration: none !important;
 
 	@include mq($max-width) {
+        block-size: 100%;
 		display: inline-flex;
 		justify-content: center;
-		height: 100%;
-		min-width: rem(44);
+		min-inline-sizeh: rem(44);
 	}
 
 	&::before {
-		bottom: 0 !important;
+		inset-block-end: 0 !important;
 	}
 
 	&:visited,
@@ -162,49 +161,48 @@ li.top-nav-item + li.top-nav-item {
 		margin-inline-start: rem(10);
 
 		@include mq($max-width) {
+            block-size: 1px;
 			border: 0;
 			clip: rect(0 0 0 0);
 			clip-path: inset(100%);
-			height: 1px;
+            inline-size: 1px;
 			margin-inline-start: 0;
 			overflow: hidden;
 			padding: 0;
 			position: absolute;
 			white-space: nowrap;
-			width: 1px;
 		}
 	}
 }
 
 .account-login {
 	flex-basis: 100%;
-	font-size: rem(14) !important;
+	font-size: var(--w3c-text-01) !important;
 
 	@include mq($max-width) {
 		flex-basis: auto;
-		padding-bottom: rem(10);
-		padding-top: rem(10);
+		padding-block: rem(10);
 	}
 }
 
 .global-nav__inner .top-nav-item > *:first-child {
 	@include mq($max-width) {
-		font-size: 1rem;
-		height: 100%;
-		line-height: rem(27);
+        block-size: 100%;
+		font-size: var(--w3c-text-0);
+		//line-height: rem(27);
 		padding: rem(10) rem(5) rem(7) !important;
 		position: relative;
 		white-space: nowrap;
 
 		&::before {
 			background-color: $w3c-blue;
-			bottom: rem(-2);
+            block-size: rem(3);
 			content:'';
 			display: none;
-			height: rem(3);
-			left: 0;
+            inline-size: 100%;
+            inset-block-end: rem(-2);
+			inset-inline-start: 0;
 			position: absolute;
-			width: 100%;
 		}
 
 		&:hover::before {
@@ -230,8 +228,8 @@ li.top-nav-item + li.top-nav-item {
 #archive-nav ul,
 #category-nav ul {
 	background-color: $white;
+    block-size: rem(180);
 	border: solid 1px $border-color;
-	height: rem(180);
 	overflow: auto;
 
 	a {
diff --git a/assets-src/styles/sass/50-core-components/_notes.scss b/assets-src/styles/sass/50-core-components/_notes.scss
index 7aa842f5..bbfc1657 100644
--- a/assets-src/styles/sass/50-core-components/_notes.scss
+++ b/assets-src/styles/sass/50-core-components/_notes.scss
@@ -4,8 +4,8 @@
 
 .note {
 	border-width: 5px;
-	margin-bottom: rem(30);
-	max-width: rem(752); // Matches max width of main content region on two-column templates
+	// margin-block-end: rem(30);
+	max-inline-size: rem(752); // Matches max width of main content region on two-column templates
 }
 
 .note--error {
diff --git a/assets-src/styles/sass/50-core-components/_pagination.scss b/assets-src/styles/sass/50-core-components/_pagination.scss
index f0640e14..0d4a8649 100644
--- a/assets-src/styles/sass/50-core-components/_pagination.scss
+++ b/assets-src/styles/sass/50-core-components/_pagination.scss
@@ -2,23 +2,21 @@
     #Pagination
 \*------------------------------------*/
 
-.pagination {
-	margin-top: rem(40);
-}
+// .pagination {
+// 	margin-block-start: rem(40);
+// }
 
-.l-cluster.pagination > * {
-	margin-bottom: 0;
-	margin-top: 0;
-}
+// .l-cluster.pagination > * {
+// 	margin-block: 0;
+// }
 
-.l-cluster.pagination > * > * {
-	margin-bottom: 0;
-	margin-top: 0;
-}
+// .l-cluster.pagination > * > * {
+// 	margin-block: 0;
+// }
 
 .pagination + * {
-	border-top: solid 1px $border-color;
-	margin-top: rem(33);
+	border-block-start: solid 1px $border-color;
+	// margin-block-start: rem(33);
 }
 
 .pagination__list {
@@ -27,9 +25,10 @@
 	}
 
 	a {
-		@include txt-pluto;
+		//@include txt-pluto;
 		color: $black;
 		display: block;
+		font-size: var(--w3c-text-01);
 		text-decoration: none;
 		padding: rem(11) rem(18);
 
@@ -47,8 +46,6 @@
 
 	a[href]:hover {
 		text-decoration: underline;
-		text-decoration-skip-ink: auto; // Not supported by Safari
-		text-underline-offset: 0.25em; // Supported by Safari
 	}
 
 	a[href][aria-current] {
diff --git a/assets-src/styles/sass/50-core-components/_pre-footer.scss b/assets-src/styles/sass/50-core-components/_pre-footer.scss
index f9b183c0..b1d79863 100644
--- a/assets-src/styles/sass/50-core-components/_pre-footer.scss
+++ b/assets-src/styles/sass/50-core-components/_pre-footer.scss
@@ -7,15 +7,15 @@
 }
 
 .pre-footer.l-switcher > * > * {
-	margin-top: rem(40);
-	min-width: 33.333%;
+    inline-size: calc(920px * 920 - 100% * 920);
+	margin-block-start: rem(40);
+	min-inline-size: 33.333%;
 	padding: rem(20);
-	width: calc(920px * 920 - 100% * 920);
 }
 
-.pre-footer h2 + * {
-	margin-top: 1em;
-}
+// .pre-footer h2 + * {
+// 	margin-block-start: 1em;
+// }
 
 .pre-footer a {
 	display: block;
diff --git a/assets-src/styles/sass/50-core-components/_quotes.scss b/assets-src/styles/sass/50-core-components/_quotes.scss
index 295a5a37..940450a8 100644
--- a/assets-src/styles/sass/50-core-components/_quotes.scss
+++ b/assets-src/styles/sass/50-core-components/_quotes.scss
@@ -3,8 +3,9 @@
 \*------------------------------------*/
 
 .component--quote {
-	@include txt-saturn;
+	//@include txt-saturn;
 	color: $w3c-blue;
+	font-size: var(--w3c-text-1);
 	font-weight: bold;
 	margin-inline-end: 0;
 	margin-inline-start: rem(10);
@@ -14,18 +15,11 @@
 	&::before {
 		background-color: $w3c-blue;
 		border-radius: rem(5);
-		left: rem(-10);
-		width: rem(10);
+        inline-size: rem(10);
+		inset-inline-start: rem(-10);
 	}
 
 	> * {
-		max-width: rem(630);
-	}
-}
-
-[dir="rtl"] {
-	.component--quote::before {
-		left: auto;
-		right: rem(-10);
+		max-inline-size: rem(630);
 	}
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/50-core-components/_rss.scss b/assets-src/styles/sass/50-core-components/_rss.scss
index c4ab1110..8e200f64 100644
--- a/assets-src/styles/sass/50-core-components/_rss.scss
+++ b/assets-src/styles/sass/50-core-components/_rss.scss
@@ -3,10 +3,9 @@
 \*------------------------------------*/
 
 .rss {
-	margin-top: rem(40);
+	// margin-block-start: rem(40);
 
 	a {
-		padding-bottom: rem(10);
-		padding-top: rem(10);
+		padding-block: rem(10);
 	}
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/50-core-components/_search.scss b/assets-src/styles/sass/50-core-components/_search.scss
index 6335a5b1..7c4afba7 100644
--- a/assets-src/styles/sass/50-core-components/_search.scss
+++ b/assets-src/styles/sass/50-core-components/_search.scss
@@ -3,7 +3,7 @@
 \*------------------------------------*/
 
 input[type=search] {
-	max-width: none;
+	max-inline-size: none;
 	position: relative;
 	z-index: 1;
 }
@@ -25,11 +25,11 @@ input[type=search] {
 }
 
 .l-sidebar.search form .not-sidebar {
-	min-width: 70%;
+	min-inline-size: 70%;
 }
 
 .l-sidebar.search input[type="search"] {
-	max-width: none;
+	max-inline-size: none;
 }
 
 @supports (padding-inline-start: 1em) {
diff --git a/assets-src/styles/sass/50-core-components/_slide.scss b/assets-src/styles/sass/50-core-components/_slide.scss
index a83e7f7c..b16147ed 100644
--- a/assets-src/styles/sass/50-core-components/_slide.scss
+++ b/assets-src/styles/sass/50-core-components/_slide.scss
@@ -9,13 +9,13 @@
 		justify-content: space-between;
 	}
 
-	> * + * {
-		margin-top: 1rem;
-
-		@include mq($bp-tab-large) {
-			margin-top: 0;
-		}
-	}
+	// > * + * {
+	// 	margin-block-start: 1rem;
+    //
+	// 	@include mq($bp-tab-large) {
+    //         margin-block-start: 0;
+	// 	}
+	// }
 }
 
 .slide__quote,
@@ -27,31 +27,25 @@
 
 .slide__quote {
 	background: url('../images/quote-bg.png') no-repeat 0 0;
-	font-size: rem(20);
+	font-size: var(--w3c-text-2);
 	font-weight: bold;
-	line-height: calc(32 / 20);
 	margin-inline-start: rem(35);
-	padding-top: rem(15);
+	padding-block-start: rem(15);
 	position: relative;
 
-	@include mq($bp-tab-small) {
-		font-size: rem(24);
-		line-height: calc(33.6 / 24);
-	}
-
 	&::before {
 		background-color: $w3c-blue;
+        block-size: 100%;
 		border-radius: rem(5);
 		content: '';
-		height: 100%;
-		left: rem(-33);
+        inline-size: rem(4);
+        inset-block-start: 0;
+		inset-inline-start: rem(-33);
 		position: absolute;
-		top: 0;
-		width: rem(4);
 	}
 
 	> * {
-		max-width: rem($text-measure);
+		max-inline-size: rem($text-measure);
 	}
 
 }
@@ -59,17 +53,13 @@
 [dir="rtl"] {
 	.slide__quote {
 		background-position-x: 100%;
-
-		&::before {
-			left: auto;
-			right: rem(-33);
-		}
 	}
 }
 
 
 .slide__cite {
-	@include txt-pluto;
+	//@include txt-pluto;
+	font-size: var(--w3c-text-01);
 	padding-inline-start: rem(5);
 
 	&.l-sidebar .sidebar {
@@ -78,38 +68,38 @@
 
 	&.l-sidebar .not-sidebar {
 		align-items: flex-start;
-		min-width: calc(70% - 1.5rem);
+		min-inline-size: calc(70% - 1.5rem);
 
 		p:first-child {
 			font-weight: bold;
 		}
 
-		p:first-child + p {
-			margin-top: 0;
-		}
+		// p:first-child + p {
+		// 	margin-block-start: 0;
+		// }
 	}
 }
 
 
 .slide__logo {
 	background-color: $white;
-	height: rem(120);
+	block-size: rem(120);
+    inline-size: rem(180);
 	padding: rem(24);
 	position: relative;
-	width: rem(180);
 
 	> img {
-		bottom: 0;
-		left: 0;
+		inset-block-end: 0;
+        inset-block-start: 0;
+		inset-inline-end: 0;
+        inset-inline-start: 0;
 		margin: auto;
-		max-width: 100%;
+		max-inline-size: 100%;
 		position: absolute;
-		right: 0;
-		top: 0;
 
 		@supports (object-fit: contain) {
-			height: 100%;
-			max-width: none;
+			block-size: 100%;
+			max-inline-size: none;
 			object-fit: contain;
 			position: static;
 		}
diff --git a/assets-src/styles/sass/50-core-components/_slider.scss b/assets-src/styles/sass/50-core-components/_slider.scss
index 380fd0c2..4ab089e3 100644
--- a/assets-src/styles/sass/50-core-components/_slider.scss
+++ b/assets-src/styles/sass/50-core-components/_slider.scss
@@ -4,16 +4,15 @@
 
 .component--slider {
 	background-color: $mist-gray;
-	padding-bottom: rem(50);
-	padding-top: rem(50);
+	padding-block: rem(50);
 
 	h2 {
-		font-size: 1rem;
+		font-size: var(--w3c-text-0);
 		font-weight: normal;
-		margin-bottom: rem(24);
+		// margin-block-end: rem(24);
 	}
 
-	ul > li + li {
-		margin-top: 2rem;
-	}
+	// ul > li + li {
+	// 	margin-block-start: 2rem;
+	// }
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/50-core-components/_tag-list.scss b/assets-src/styles/sass/50-core-components/_tag-list.scss
index 5a8bb0c4..bdda290b 100644
--- a/assets-src/styles/sass/50-core-components/_tag-list.scss
+++ b/assets-src/styles/sass/50-core-components/_tag-list.scss
@@ -11,12 +11,13 @@
 }
 
 .tag {
-	@include txt-eris;
+	//@include txt-eris;
 	background-color: rgba(#cecdcd, 0.5);
 	background-clip: padding-box;
 	border: solid 2px rgba(#cecdcd, 0.5);
 	border-radius: rem(4);
 	display: inline-block;
+	font-size: var(--w3c-text-01);
 	padding: rem(2.5) rem(5) rem(2.5) rem(5);
 }
 
@@ -29,6 +30,4 @@ a.tag {
 	position: relative;
 	text-decoration: underline;
 	z-index: 10;
-	text-decoration-skip-ink: auto; // Not supported by Safari
-	text-underline-offset: 0.25em; // Supported by Safari
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/50-core-components/_text.scss b/assets-src/styles/sass/50-core-components/_text.scss
index 8817190f..ee999ed2 100644
--- a/assets-src/styles/sass/50-core-components/_text.scss
+++ b/assets-src/styles/sass/50-core-components/_text.scss
@@ -2,14 +2,6 @@
     #Text component
 \*------------------------------------*/
 
-.component--text > * {
-	max-width: rem($text-measure);
-
-	+ h2,
-	+ h3,
-	+ h4,
-	+ h5,
-	+ h6 {
-		margin-top: 2em;
-	}
+.component--text {
+	margin-block: 0
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/50-core-components/_toc.scss b/assets-src/styles/sass/50-core-components/_toc.scss
index 9be5eb22..02f13493 100644
--- a/assets-src/styles/sass/50-core-components/_toc.scss
+++ b/assets-src/styles/sass/50-core-components/_toc.scss
@@ -2,16 +2,16 @@
     #Table of contents (TOC)
 \*------------------------------------*/
 
-.toc + * {
-	margin-block-start: rem(30);
-
-	@include mq($max-width) {
-        margin-block-start: rem(80);
-	}
-}
+// .toc + * {
+// 	margin-block-start: rem(30);
+//
+// 	@include mq($max-width) {
+//         margin-block-start: rem(80);
+// 	}
+// }
 
 .toc h2 {
-	font-size: 1rem;
+	font-size: var(--w3c-text-0);
 	font-weight: normal;
 }
 
@@ -21,7 +21,7 @@
 }
 
 .toc ul {
-    line-height: 1em;
+    //line-height: 1em;
     padding-inline-start: rem(15);
 
     ul {
diff --git a/assets-src/styles/sass/50-core-components/_translations.scss b/assets-src/styles/sass/50-core-components/_translations.scss
index f1381993..a07c57cf 100644
--- a/assets-src/styles/sass/50-core-components/_translations.scss
+++ b/assets-src/styles/sass/50-core-components/_translations.scss
@@ -9,13 +9,11 @@
 
 .translations .l-sidebar > * {
 	align-items: center;
-	margin-bottom: 0;
-	margin-top: 0;
+	// margin-block: 0;
 }
 
 .translations .l-sidebar > * > * {
-	margin-bottom: 0;
-	margin-top: 0;
+	// margin-block: 0;
 }
 
 .translations .l-sidebar .sidebar {
@@ -23,7 +21,7 @@
 }
 
 .translations .l-sidebar .not-sidebar {
-	min-width: 70%;
+	min-inline-size: 70%;
 }
 
 .translations.l-cluster {
@@ -36,9 +34,9 @@
 	}
 }
 
-.translations + * {
-	margin-top: rem(30);
-}
+// .translations + * {
+// 	margin-block-start: rem(30);
+// }
 
 /*
  * For the TR card, the language subheading is h5 for Family view and h3 for Search results view
@@ -47,33 +45,31 @@
 .translations h3,
 .translations h5,
 .translations .sidebar span {
-	font-size: 1rem;
+	font-size: var(--w3c-text-0);
 	font-weight: normal;
-	padding-bottom: rem(10);
-	padding-top: rem(10);
+	padding-block: rem(10);
 }
 
 .translations a {
 	display: block;
-	padding-bottom: rem(10);
-	padding-top: rem(10);
+	padding-block: rem(10);
 }
 
 .landing .translations,
 .ecosystem .translations {
 	padding: 0;
-	margin-top: 0;
+	// margin-block-start: 0;
 
 	.sidebar span {
 		padding-inline-end: 1em;
 	}
 
 	.l-sidebar .not-sidebar {
-		min-width: 70%;
-		padding-bottom: 0;
+		min-inline-size: 70%;
+		padding-block-end: 0;
 	}
 
-	+ * {
-		margin-top: 2em;
-	}
+	// + * {
+	// 	margin-block-start: 2em;
+	// }
 }
diff --git a/assets-src/styles/sass/50-core-components/_video.scss b/assets-src/styles/sass/50-core-components/_video.scss
index 77538ac0..6710fdc4 100644
--- a/assets-src/styles/sass/50-core-components/_video.scss
+++ b/assets-src/styles/sass/50-core-components/_video.scss
@@ -2,23 +2,13 @@
     #Video component
 \*------------------------------------*/
 
-.component--video {
-	iframe {
-		border: 0;
-	}
-
-	figcaption {
-		@include txt-pluto;
-
-		> * {
-			max-width: rem(540);
-		}
-
-		> a {
-			display: inline-block;
-			margin: 0;
-			padding-bottom: rem(10);
-			padding-top: rem(10);
-		}
-	}
-}
\ No newline at end of file
+//.component--video {
+//	figcaption {
+//
+//		> a {
+//			display: inline-block;
+//			margin: 0;
+//			padding-block: rem(10);
+//		}
+//	}
+//}
\ No newline at end of file
diff --git a/assets-src/styles/sass/50-core-components/_you-may-also-like.scss b/assets-src/styles/sass/50-core-components/_you-may-also-like.scss
index 5fe27cf2..00b4a4e3 100644
--- a/assets-src/styles/sass/50-core-components/_you-may-also-like.scss
+++ b/assets-src/styles/sass/50-core-components/_you-may-also-like.scss
@@ -5,12 +5,12 @@
 .crosslinks {
 	background-color: $w3c-blue;
 	color: $white;
-	padding-bottom: rem(50);
-	padding-top: rem(50);
+	padding-block: rem(50);
 }
 
 .crosslinks .component--columns__intro h2 {
-	@include txt-mars;
+	//@include txt-mars;
+	font-size: var(--w3c-text-3);
 }
 
 .crosslinks .component--columns__intro {
@@ -36,16 +36,16 @@
 	> li {
 		@include mq(700) {
 			flex: 1 0 50%;
-			max-width: 50%;
+			max-inline-size: 50%;
 			padding: 1.5%;
 		}
 	}
 
-	li + li {
-		@include mq(700) {
-			margin-top: 0;
-		}
-	}
+	// li + li {
+	// 	@include mq(700) {
+	// 		margin-block-start: 0;
+	// 	}
+	// }
 }
 
 .crosslinks .component--columns--images {
diff --git a/assets-src/styles/sass/60-advanced-components/_cards.scss b/assets-src/styles/sass/60-advanced-components/_cards.scss
index f55f7b30..46af72c6 100644
--- a/assets-src/styles/sass/60-advanced-components/_cards.scss
+++ b/assets-src/styles/sass/60-advanced-components/_cards.scss
@@ -6,9 +6,7 @@
 	cursor: pointer;
 
 	&:hover .card__link {
-		text-decoration: underline; /* 1 */
-		text-decoration-skip-ink: auto; // Not supported by Safari
-		text-underline-offset: 0.25em; // Supported by Safari
+		text-decoration: underline;
 	}
 }
 
@@ -17,12 +15,12 @@
 	Minimum spacing between the penultimate and last child elements.
 	Matches the measure used for the stack mixin on `.card__text`
 	 */
-	> :nth-last-child(2) {
-		margin-bottom: 1rem;
-	}
+	// > :nth-last-child(2) {
+	// 	margin-block-end: 1rem;
+	// }
 
 	> :last-child {
-		margin-bottom: 0;
-		margin-top: auto;
+		margin-block-end: 0;
+		margin-block-start: auto;
 	}
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/60-advanced-components/_collapsibles.scss b/assets-src/styles/sass/60-advanced-components/_collapsibles.scss
index f61fce13..6318f67e 100644
--- a/assets-src/styles/sass/60-advanced-components/_collapsibles.scss
+++ b/assets-src/styles/sass/60-advanced-components/_collapsibles.scss
@@ -10,21 +10,21 @@
 		border-radius: 0;
 		display: flex;
 		flex-wrap: wrap;
-		font-size: rem(18);
+		font-size: var(--w3c-text-0);
 		font-weight: bold;
-		line-height: calc(27 / 18);
+        inline-size: 100%;
+		//line-height: calc(27 / 18);
 		justify-content: space-between;
-		margin-top: 0;
+		// margin-block-start: 0;
 		padding: rem(3);
-		width: 100%;
 
 		> span {
-			font-size: rem(15);
+			font-size: var(--w3c-text-01);
 			font-weight: normal;
-			line-height: calc(22.5 / 15);
+            inline-size: 100%;
+			//line-height: calc(22.5 / 15);
 			color: #333;
 			order: 2;
-			width: 100%;
 		}
 
        // Decorative chevron
@@ -41,9 +41,7 @@
         }
 
 		&:hover {
-			text-decoration: underline; /* 1 */
-			text-decoration-skip-ink: auto; // Not supported by Safari
-			text-underline-offset: 0.25em; // Supported by Safari
+			text-decoration: underline;
 		}
 
 		&:focus {
diff --git a/assets-src/styles/sass/60-advanced-components/_comments.scss b/assets-src/styles/sass/60-advanced-components/_comments.scss
index 325c188e..c16786a9 100644
--- a/assets-src/styles/sass/60-advanced-components/_comments.scss
+++ b/assets-src/styles/sass/60-advanced-components/_comments.scss
@@ -4,10 +4,9 @@
 
 .button[data-replylink],
 #js-cancel-reply {
-	@include txt-pluto;
-	text-decoration: underline; /* 1 */
-	text-decoration-skip-ink: auto; // Not supported by Safari
-	text-underline-offset: 0.25em; // Supported by Safari
+	//@include txt-pluto;
+	font-size: var(--w3c-text-01);
+	text-decoration: underline;
 
 	&:hover {
 		box-shadow: 0 0 4px 2px rgba(84,84,84,0.25);
diff --git a/assets-src/styles/sass/60-advanced-components/_disclosure-widget.scss b/assets-src/styles/sass/60-advanced-components/_disclosure-widget.scss
index 7707ad72..5eeb1b26 100644
--- a/assets-src/styles/sass/60-advanced-components/_disclosure-widget.scss
+++ b/assets-src/styles/sass/60-advanced-components/_disclosure-widget.scss
@@ -13,9 +13,10 @@
 }
 
 [data-toggle="true"] {
-	@include txt-pluto;
+	//@include txt-pluto;
 	align-items: center;
     display: inline-flex;
+	font-size: var(--w3c-text-01);
 	font-weight: bold;
 
     // Decorative chevron
diff --git a/assets-src/styles/sass/60-advanced-components/_header.scss b/assets-src/styles/sass/60-advanced-components/_header.scss
index c546e8e7..cbdb76ae 100755
--- a/assets-src/styles/sass/60-advanced-components/_header.scss
+++ b/assets-src/styles/sass/60-advanced-components/_header.scss
@@ -4,31 +4,31 @@
 
 [data-trigger="account-menu"] {
 	border-radius: 0;
-	margin-left: auto;
+	margin-inline-start: auto;
 	padding: rem(7);
 	position: relative;
 
 	&::before {
 		background-color: $w3c-blue;
+        block-size: rem(3);
 		bottom: rem(-2);
 		content:'';
 		display: none;
-		height: rem(3);
-		left: 0;
+        inline-size: 100%;
+		inset-inline-start: 0;
 		position: absolute;
-		width: 100%;
 	}
 
 	&.js-has-msg::after {
 		background-color: $red;
+        block-size: 15px;
 		border: solid 3px $white;
 		border-radius: 50%;
 		content: '';
-		height: 15px;
+        inline-size: 15px;
+        inset-block-start: 3px;
+        inset-inline-end: 3px;
 		position: absolute;
-		right: 3px;
-		top: 3px;
-		width: 15px;
 	}
 
 	@include mq($max-width) {
@@ -59,7 +59,7 @@
 
 	.sr-only {
 		@extend %visuallyhidden;
-		font-size: rem(14);
+		font-size: var(--w3c-text-01);
 
 		@include mq($max-width) {
 			border: initial;
@@ -82,40 +82,27 @@
 	}
 }
 
-[dir="rtl"] {
-	[data-trigger="account-menu"] {
-		margin-left: 0;
-		margin-right: auto;
-
-		&.js-has-msg::after {
-			left: 3px;
-			right: auto;
-		}
-	}
-}
-
 .account-menu {
 	background-color: $white;
 	border: solid 1px $border-color;
 	box-shadow: 0 8px 16px 0 rgba(55,70,95,0.07);
+    inline-size: rem(250);
+    inset-block-start: 100%;
+    max-inline-size: calc(100% - 10vw);
 	position: absolute;
-	right: 5vw;
-	top: 100%;
-	max-width: calc(100% - 10vw);
-	min-width: rem(250);
+    right: 5vw;
 	z-index: 10;
 }
 
 [dir="rtl"] {
 	.account-menu {
 		left: 5vw;
-		right: auto;
+        right: auto;
 	}
 }
 
 .account-menu ul {
-	padding-bottom: rem(10);
-	padding-top: rem(10);
+	padding-block: rem(10);
 
 	li {
 		padding: rem(10) rem(20);
@@ -127,15 +114,14 @@
 }
 
 .account-menu li:nth-child(3) {
-	padding-top: 0;
+	padding-block-start: 0;
 }
 
 .account-menu li:last-of-type {
-	padding-bottom: 0;
+	padding-block-end: 0;
 }
 
 .account-menu a {
 	display: block;
-	padding-bottom: rem(10);
-	padding-top: rem(10);
+	padding-block: rem(10);
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/60-advanced-components/_multiselect.scss b/assets-src/styles/sass/60-advanced-components/_multiselect.scss
index 9fcb014e..e7b43fb3 100644
--- a/assets-src/styles/sass/60-advanced-components/_multiselect.scss
+++ b/assets-src/styles/sass/60-advanced-components/_multiselect.scss
@@ -10,12 +10,12 @@
 .combo-menu {
 	background-color: #f5f5f5;
 	display: none;
-	left: 0;
-	max-height: rem(300);
+    inline-size: 100%;
+    inset-block-start: 100%;
+	inset-inline-start: 0;
+	max-block-size: rem(300);
 	overflow-y: scroll;
 	position: absolute;
-	top: 100%;
-	width: 100%;
 	z-index: 100;
 }
 
@@ -38,33 +38,33 @@
 }
 
 .combo-option.option-selected {
-	padding-right: rem(30);
+	padding-inline-end: rem(30);
 	position: relative;
 }
 
 .combo-option.option-selected::after {
-	border-bottom: 2px solid $black;
-	border-right: 2px solid $black;
+    block-size: rem(16);
+	border-block-end: 2px solid $black;
+	border-inline-end: 2px solid $black;
 	content: '';
-	height: rem(16);
+    inline-size: rem(8);
+    inset-block-start: 50%;
+    inset-inline-end: rem(15);
 	position: absolute;
-	right: rem(15);
-	top: 50%;
 	transform: translate(0, -50%) rotate(45deg);
-	width: rem(8);
 }
 
 .selected-options {
 	list-style-type: none;
 	margin: 0;
-	max-width: rem(400);
+	max-inloine-size: rem(400);
 	padding: 0;
 }
 
 .selected-options {
 	li {
 		display: inline-block;
-		margin-bottom: rem(5);
+		margin-block-end: rem(5);
 	}
 }
 
@@ -75,8 +75,8 @@
 	color: #fff;
 	font-size: 0.75em;
 	font-weight: bold;
-	margin-bottom: rem(6);
-	margin-right: rem(6);
+	margin-block-end: rem(6);
+	margin-inline-end: rem(6);
 	padding: 0.25em 1.75em 0.25em 0.25em;
 	position: relative;
 }
@@ -89,13 +89,13 @@
 
 .remove-option::before,
 .remove-option::after {
-	border-right: 2px solid #fff;
+	border-inline-end: 2px solid #fff;
 	content: "";
-	height: 1em;
-	right: 0.75em;
+	block-size: 1em;
+    inline-size: 0;
+    inset-block-start: 50%;
+	inset-inline-end: 0.75em;
 	position: absolute;
-	top: 50%;
-	width: 0;
 }
 
 .remove-option::before {
diff --git a/assets-src/styles/sass/60-advanced-components/_navigation.scss b/assets-src/styles/sass/60-advanced-components/_navigation.scss
index d00d66d0..a368f682 100644
--- a/assets-src/styles/sass/60-advanced-components/_navigation.scss
+++ b/assets-src/styles/sass/60-advanced-components/_navigation.scss
@@ -11,17 +11,16 @@
 	}
 
 	.global-nav__inner > ul {
-		border-bottom: none;
+		border-block-end: none;
 		box-shadow: none;
-		padding-left: 0;
-		padding-right: 0;
+		padding-inline: 0;
 		position: static;
 	}
 }
 
 [data-trigger='mobile-nav'] {
 	display: inline-flex;
-	font-size: rem(14);
+	font-size: var(--w3c-text-01);
 	padding: rem(7) 0;
 
 	&:focus {
@@ -55,25 +54,11 @@
 }
 
 [data-trigger='mobile-nav'] {
-	margin-left: auto;
-}
-
-[dir='rtl'] {
-	[data-trigger='mobile-nav'] {
-		margin-left: 0;
-		margin-right: auto;
-	}
+	margin-inline-start: auto;
 }
 
 [data-trigger='account-menu'] ~ [data-trigger='mobile-nav'] {
-	margin-left: rem(10);
-}
-
-[dir='rtl'] {
-	[data-trigger='account-menu'] ~ [data-trigger='mobile-nav'] {
-		margin-left: 0;
-		margin-right: rem(10);
-	}
+	margin-inline-start: rem(10);
 }
 
 #global-nav {
@@ -82,27 +67,25 @@
 }
 
 .global-nav__inner > ul {
-	border-bottom: solid 1px $border-color;
+	border-block-end: solid 1px $border-color;
 	box-shadow: 0 8px 16px -5px rgba(55,70,95,0.07);
 	display: flex;
 	flex-basis: 100%;
 	flex-wrap: wrap;
-	left: 0;
-	padding-bottom: rem(45);
-	padding-left: 5vw;
-	padding-right: 5vw;
+    inline-size: 100%;
+    inset-block-start: 100%;
+	inset-inline-start: 0;
+	padding-block-end: rem(45);
+	padding-inline: 5vw;
 	position: absolute;
-	top: 100%;
-	width: 100%;
 
 	@include mq($max-width) {
 		border: none;
 		box-shadow: none;
 		flex-basis: auto;
 		flex-wrap: nowrap;
-		padding-bottom: 0;
-		padding-left: 0;
-		padding-right: 0;
+		padding-block-end: 0;
+		padding-inline: 0;
 		position: static;
 	}
 }
@@ -123,12 +106,12 @@
 	border-radius: 0;
 	color: $off-black;
 	display: flex;
-	font-size: 1rem;
-	line-height: inherit;
+	font-size: var(--w3c-text-0);
+    inline-size: 100%;
+	//line-height: inherit;
 	outline: solid 1px transparent;
 	outline-offset: -1px;
 	padding: rem(12) 0;
-	width: 100%;
 
 	@include mq($max-width) {
 		display: inline-flex;
@@ -178,24 +161,24 @@
 
 .global-nav__inner .nav__submenu {
 	background-color: $white;
-	border-bottom: solid 1px $border-color;
+	border-block-end: solid 1px $border-color;
 	box-shadow: 0 8px 16px -5px rgba(55,70,95,0.07);
 	display: block;
-	left: 0;
-	min-height: calc(100% + 1px);
-	padding-bottom: rem(45);
+    inline-size: 100vw;
+    inset-block-start: 0;
+	inset-inline-start: 0;
+	min-block-size: calc(100% + 1px);
+	padding-block-end: rem(45);
 	position: absolute;
-	top: 0;
-	width: 100vw;
 	z-index: 5;
 
 	@include mq($max-width) {
-		border-bottom: solid 1px $border-color;
-		border-top: solid 1px $border-color;
-		left: 50%;
-		min-height: auto;
+		border-block-end: solid 1px $border-color;
+		border-block-start: solid 1px $border-color;
+        inset-block-start: 100%;
+		inset-inline-start: 50%;
+		min-block-size: auto;
 		padding: rem(50) rem(20);
-		top: 100%;
 		transform: translateX(-50%);
 	}
 }
@@ -209,28 +192,29 @@
 
 .global-nav__inner .nav__submenu__intro {
 	@include mq($max-width) {
-		width: 30%;
+		inline-size: 30%;
 	}
 
 	> h2 {
-		@include txt-jupiter;
+		//@include txt-jupiter;
 		color: $off-black;
+		font-size: var(--w3c-text-4);
 		font-weight: $emphasis;
-		margin-top: rem(25);
-		padding-bottom: rem(6);
-		padding-top: rem(6);
+		margin-block-start: rem(25);
+		padding-block: rem(6);
 
 		@include mq($max-width) {
-			font-size: rem(34);
-			line-height: calc(43 / 34);
-			margin-bottom: rem(25);
-			margin-top: 0;
+			//font-size: rem(34);
+			//line-height: calc(43 / 34);
+			margin-block-end: rem(25);
+            margin-block-start: 0;
 		}
 	}
 }
 
 .global-nav__inner .nav__submenu__intro__text {
-	@include txt-saturn;
+	//@include txt-saturn;
+	font-size: var(--w3c-text-1);
 
 	*:not(a) {
 		display: none;
@@ -243,15 +227,15 @@
 	> a {
 		color: $link-color;
 		display: inline-block;
-		margin-bottom: 1rem;
-		margin-top: 0;
-		padding-bottom: rem(9);
-		padding-top: 0;
+		margin-block-end: 1rem;
+		margin-block-start: 0;
+		padding-block-end: rem(9);
+		padding-block-start: 0;
 
 		@include mq($max-width) {
-			margin-bottom: 0;
-			margin-top: 1rem;
-			padding-top: rem(9);
+            margin-block-end: 0;
+            margin-block-start: 1rem;
+            padding-block-start: rem(9);
 		}
 
 		&:hover {
@@ -265,11 +249,12 @@
 }
 
 .global-nav__inner [data-button='mobile-back'] {
-	@include txt-jupiter;
+	//@include txt-jupiter;
 	align-items: center;
-    border-bottom: solid 1px $border-color;
+    border-block-start: solid 1px $border-color;
 	border-radius: 0;
     display: flex;
+	font-size: var(--w3c-text-2);
 	padding: rem(12) 5vw;
 
 	@include mq($max-width) {
@@ -306,32 +291,27 @@
 }
 
 .global-nav__inner .nav__submenu li {
-	border-bottom: solid 1px $border-color;
-	padding-bottom: rem(3);
-	padding-top: rem(3);
+	border-block-end: solid 1px $border-color;
+	padding-block: rem(3);
 
 	@include mq($max-width) {
-		border-bottom: 0;
-		padding-bottom: 0;
-		padding-top: 0;
-
+        border-block-end: 0;
+        padding-block: 0;
 	}
 }
 
 .global-nav__inner .nav__submenu li a {
 	color: $off-black;
     display: block;
-	font-size: rem(19);
-	line-height: calc(27 / 18);
-	padding-bottom: rem(8);
-	padding-top: rem(8);
+	font-size: var(--w3c-text-1);
+	padding-block: rem(8);
 	text-decoration: none;
 
 	@include mq($max-width) {
         align-items: flex-start;
         display: inline-flex;
+        inline-size: auto;
         padding-inline: rem(2);
-		width: auto;
 
         // Decorative chevron
         &::before {
diff --git a/assets-src/styles/sass/60-advanced-components/_slider.scss b/assets-src/styles/sass/60-advanced-components/_slider.scss
index cfb49559..1dd0c8d5 100644
--- a/assets-src/styles/sass/60-advanced-components/_slider.scss
+++ b/assets-src/styles/sass/60-advanced-components/_slider.scss
@@ -17,8 +17,7 @@
 
 	.js-slider > ul {
 		display: flex;
-		padding-bottom: rem(10);
-		padding-top: rem(10);
+		padding-block: rem(10);
 		position: relative;
 
 		> li {
@@ -33,9 +32,9 @@
 			visibility: hidden;
 		}
 
-		> li + li {
-			margin-top: 0;
-		}
+		// > li + li {
+		// 	margin-block-start: 0;
+		// }
 	}
 }
 
diff --git a/assets-src/styles/sass/60-advanced-components/_tr-meta.scss b/assets-src/styles/sass/60-advanced-components/_tr-meta.scss
index a7e02075..abb5b262 100644
--- a/assets-src/styles/sass/60-advanced-components/_tr-meta.scss
+++ b/assets-src/styles/sass/60-advanced-components/_tr-meta.scss
@@ -3,12 +3,12 @@
 \*------------------------------------*/
 
 .tr-list {
-    padding-top: 0;
+    padding-block-start: 0;
 }
 
 // if you put links in this list, you'll need to use .tag-list (links needs more space around them for a11y)
 .tr-meta.tr-meta {
-    margin-top: 0.5rem;
+    margin-block-start: 0.5rem;
 }
 
 .tr-meta li {
diff --git a/assets-src/styles/sass/70-third-party-plugins/_accessible-autocomplete.scss b/assets-src/styles/sass/70-third-party-plugins/_accessible-autocomplete.scss
index 5f5f4528..31bc0984 100644
--- a/assets-src/styles/sass/70-third-party-plugins/_accessible-autocomplete.scss
+++ b/assets-src/styles/sass/70-third-party-plugins/_accessible-autocomplete.scss
@@ -13,7 +13,7 @@
 	appearance: none;
 	border: 2px solid;
 	border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */
-	margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */
+	margin-block-end: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */
 	width: 100%;
 }
 
@@ -39,46 +39,32 @@
 }
 
 .autocomplete__input--show-all-values {
-	padding: 5px 34px 5px 5px; /* Space for arrow. Other padding should match .autocomplete__input--default. */
+	padding: 5px;
+    padding-inline-end: 34px; /* Space for arrow. Other padding should match .autocomplete__input--default. */
 	cursor: pointer;
 }
 
-[dir="rtl"] {
-	.autocomplete__input--show-all-values {
-		padding-left: 34px;
-		padding-right: 5px;
-	}
-}
-
 .autocomplete__dropdown-arrow-down {
+    block-size: 24px;
 	display: inline-block;
+    inline-size: 24px;
 	position: absolute;
-	right: 8px;
-	width: 24px;
-	height: 24px;
-	top: 12px;
+    inset-block-start: 12px;
+	inset-inline-end: 8px;
 	pointer-events: none; // To account for removal of negative z-index
-	//z-index: -1;
-}
-
-[dir="rtl"] {
-	.autocomplete__dropdown-arrow-down {
-		right: auto;
-		left: 8px;
-	}
 }
 
 .autocomplete__menu {
 	background-color: #fff;
 	border: 2px solid;
-	border-top: 0;
+	border-block-start: 0;
 	color: $off-black;
+    inline-size: 100%;
+    inline-size: calc(100% - 4px);
 	margin: 0;
-	max-height: 342px;
+	max-block-size: 342px;
 	overflow-x: hidden;
 	padding: 0;
-	width: 100%;
-	width: calc(100% - 4px);
 }
 
 .autocomplete__menu--visible {
@@ -90,10 +76,10 @@
 }
 
 .autocomplete__menu--overlay {
-	box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px;
-	left: 0;
+	box-shadow: rgba(0, 0, 0, 0.256863) 0 2px 6px;
+    inset-block-start: 100%;
+	inset-inline-start: 0;
 	position: absolute;
-	top: 100%;
 	z-index: 100;
 }
 
@@ -102,7 +88,7 @@
 }
 
 .autocomplete__option {
-	border-bottom: solid $twiki-gray;
+	border-block-end: solid $twiki-gray;
 	border-width: 1px 0;
 	cursor: pointer;
 	display: block;
@@ -114,11 +100,11 @@
 }
 
 .autocomplete__option:first-of-type {
-	border-top-width: 0;
+	border-block-start-width: 0;
 }
 
 .autocomplete__option:last-of-type {
-	border-bottom-width: 0;
+	border-block-end-width: 0;
 }
 
 .autocomplete__option--odd {
@@ -142,7 +128,7 @@
 .autocomplete__hint,
 .autocomplete__input,
 .autocomplete__option {
-	line-height: 1.25;
+	//line-height: 1.25;
 }
 
 .autocomplete__hint,
diff --git a/assets-src/styles/sass/80-templates/_default.scss b/assets-src/styles/sass/80-templates/_default.scss
index e920cf8f..e9b7f455 100644
--- a/assets-src/styles/sass/80-templates/_default.scss
+++ b/assets-src/styles/sass/80-templates/_default.scss
@@ -3,12 +3,12 @@
 \*------------------------------------*/
 
 .default .content {
-	max-width: rem(752);
+	max-inline-size: rem(752);
 }
 
 @supports(grid-column-gap: 8%) {
 	.default .content {
-		max-width: none;
+		max-inline-size: none;
 
 		@include mq($bp-tab-large) {
 			display: grid;
@@ -32,9 +32,9 @@
 }
 
 .default .related {
-	border-top: solid 10px $w3c-blue;
-	margin-top: rem(40);
-	padding-top: rem(20);
+	border-block-start: solid 10px $w3c-blue;
+	// margin-block-start: rem(40);
+	padding-block-start: rem(20);
 }
 
 .related [aria-current] {
@@ -44,22 +44,20 @@
 
 @supports(grid-column-gap: 8%) {
 	.default .related {
-		@include mq($bp-tab-large) {
-			margin-top: 0;
-		}
+		// @include mq($bp-tab-large) {
+		// 	margin-block-start: 0;
+		// }
 	}
 }
 
 .default .related__inner {
 	@include mq($bp-tab-large) {
 		border-inline-start: solid 1px $border-color;
-		padding-left: rem(20);
-		padding-right: rem(20);
+		padding-inline: rem(20);
 	}
 }
 
 .default .related__inner ul a {
 	display: inline-block;
-	padding-bottom: rem(10);
-	padding-top: rem(10);
+	padding-block: rem(10);
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/80-templates/_event.scss b/assets-src/styles/sass/80-templates/_event.scss
index 4cc112cb..437dee32 100644
--- a/assets-src/styles/sass/80-templates/_event.scss
+++ b/assets-src/styles/sass/80-templates/_event.scss
@@ -3,24 +3,24 @@
 \*------------------------------------*/
 
 .event .content {
-	max-width: rem(752);
+	max-inline-size: rem(752);
 }
 
 .event .intro {
 	display: flex;
 	flex-direction: column;
-	margin-bottom: rem(20);
+	margin-block-end: rem(20);
 	margin-inline-start: rem(30);
 	position: relative;
 
 	&::before {
+        block-size: 100%;
 		border-radius: rem(5);
 		content: '';
-		height: 100%;
-		left: rem(-28);
+        inline-size: rem(5);
+        inset-block-start: 0;
+		inset-inline-start: rem(-28);
 		position: absolute;
-		top: 0;
-		width: rem(5);
 	}
 
 	&.conference::before {
@@ -39,25 +39,19 @@
 		background-color: $red;
 	}
 
-	h1 {
-		margin-bottom: 0;
-	}
+	// h1 {
+	// 	margin-block-end: 0;
+	// }
 
 	h1 + * {
-		@include txt-mars;
-		margin-bottom: rem(10);
+		//@include txt-mars;
+		font-size: var(--w3c-text-3);
+		// margin-block-end: rem(10);
 		order: -1;
 	}
 }
 
-[dir="rtl"] {
-	.event .intro::before {
-		left: auto;
-		right: rem(-28);
-	}
-}
-
-.event .lead,
-.event .calendar-link {
-	margin-bottom: rem(20);
-}
\ No newline at end of file
+// .event .lead,
+// .event .calendar-link {
+// 	margin-block-end: rem(20);
+// }
\ No newline at end of file
diff --git a/assets-src/styles/sass/80-templates/_home.scss b/assets-src/styles/sass/80-templates/_home.scss
index e56d6c11..236ced28 100644
--- a/assets-src/styles/sass/80-templates/_home.scss
+++ b/assets-src/styles/sass/80-templates/_home.scss
@@ -8,11 +8,10 @@
 	}
 
 	.component--members {
-		padding-bottom: rem(40);
-		padding-top: rem(40);
+		padding-block: rem(40);
 	}
 
-	.component--members__grid {
-		margin-top: rem(40);
-	}
+	// .component--members__grid {
+	// 	margin-block-start: rem(40);
+	// }
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/80-templates/_landing.scss b/assets-src/styles/sass/80-templates/_landing.scss
index 4844ee14..6bef57a3 100644
--- a/assets-src/styles/sass/80-templates/_landing.scss
+++ b/assets-src/styles/sass/80-templates/_landing.scss
@@ -10,19 +10,18 @@
 
 	main,
 	#main {
-		padding-top: 0;
+		padding-block-start: 0;
 	}
 
 	.component--text,
 	.component--image,
 	.component--video,
 	.component--quote {
-		margin-left: auto;
-		margin-right: auto;
-		max-width: rem(711);
+		margin-inline: auto;
+		max-inline-size: rem(711);
 	}
 
 	.component--quote {
-		max-width: rem(691);
+		max-inline-size: rem(691);
 	}
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/80-templates/_listing.scss b/assets-src/styles/sass/80-templates/_listing.scss
index 0054b6a7..8c900d30 100644
--- a/assets-src/styles/sass/80-templates/_listing.scss
+++ b/assets-src/styles/sass/80-templates/_listing.scss
@@ -13,14 +13,14 @@
 
 	main,
 	#main {
-		padding-top: 0;
+		padding-block-start: 0;
 	}
 }
 
 .people-list,
 .post-list {
 	> * + * {
-		border-top: solid 1px $border-color;
+		border-block-start: solid 1px $border-color;
 	}
 }
 
@@ -30,20 +30,20 @@
 	}
 
 	.groups .sidebar h3 {
-		font-size: 1rem;
+		font-size: var(--w3c-text-0);
 		font-weight: normal;
-		line-height: rem(44);
+		//line-height: rem(44);
 	}
 }
 
 .post-list {
 	> * {
-		padding-bottom: rem(30);
-		padding-top: rem(40);
+		padding-block-end: rem(30);
+		padding-block-start: rem(40);
 	}
 
 	> li:last-child {
-		border-bottom: solid 1px $border-color;
+		border-block-end: solid 1px $border-color;
 	}
 
 	.l-sidebar .sidebar {
@@ -51,24 +51,24 @@
 	}
 
 	.l-sidebar .not-sidebar {
-		min-width: calc(70% - 1.5rem);
+		min-inline-size: calc(70% - 1.5rem);
 	}
 
 	.l-sidebar .not-sidebar > div {
-		max-width: rem($text-measure);
+		max-inline-size: rem($text-measure);
 
-		@include mq($bp-tab-large) {
-			margin-bottom: rem(40);
-		}
+		// @include mq($bp-tab-large) {
+		// 	margin-block-end: rem(40);
+		// }
 
-		> * + * {
-			margin-top: rem(20);
-		}
+		// > * + * {
+		// 	margin-block-start: rem(20);
+		// }
 	}
 
 	.l-sidebar .sidebar .l-frame {
-		height: rem(146);
-		width: rem(200);
+		block-size: rem(146);
+		inline-size: rem(200);
 
 		img {
 			border-radius: rem(4);
@@ -88,8 +88,8 @@
 		color: $black;
 
 		.icon {
-			height: 0.8em;
-			width: 0.8em;
+			block-size: 0.8em;
+			inline-size: 0.8em;
 		}
 	}
 }
@@ -98,11 +98,11 @@
 .member-list,
 .group-list,
 .tr-stats-list {
-	margin-top: rem(40);
+	// margin-block-start: rem(40);
 
-	> * + * {
-		margin-top: 1rem;
-	}
+	// > * + * {
+    //     margin-block-start: 1rem;
+	// }
 
 	.card {
 		padding: 1rem;
@@ -113,22 +113,23 @@
 	}
 
 	.card.l-sidebar .not-sidebar {
-		min-width: calc(70% - 1.5rem);
+		min-inline-size: calc(70% - 1.5rem);
 	}
 
-	.card__text {
-		padding-top: 0;
-	}
+	// .card__text {
+	// 	padding-block-start: 0;
+	// }
 }
 
 .event-list {
 	.card .l-cluster {
-		margin-top: 1rem;
+		// margin-block-start: 1rem;
 	}
 
 	.card .l-cluster > * {
-		@include txt-pluto;
+		//@include txt-pluto;
 		align-items: center;
+		font-size: var(--w3c-text-01);
 	}
 
 	.card.l-sidebar .l-sidebar .sidebar {
@@ -136,17 +137,17 @@
 	}
 
 	.card.l-sidebar .l-sidebar .not-sidebar {
-		min-width: calc(55% - 1.5rem);
+		min-inline-size: calc(55% - 1.5rem);
 	}
 
 	.card__image {
 		align-self: flex-start;
-		height: rem(100);
-		width: rem(100);
+		block-size: rem(100);
+		inline-size: rem(100);
 
 		@include mq($bp-tab-large) {
-			height: rem(200);
-			width: rem(200);
+            block-size: rem(200);
+            inline-size: rem(200);
 		}
 	}
 
@@ -155,20 +156,21 @@
 	}
 
 	.date-location {
-		@include txt-pluto;
+		//@include txt-pluto;
 		display: flex;
 		flex-wrap: nowrap;
-		max-width: rem(300);
+		font-size: var(--w3c-text-01);
+		max-inline-size: rem(300);
 	}
 
 	.date-location img {
+        inline-size: rem(18);
 		margin-inline-end: rem(12);
-		width: rem(18);
 	}
 
 	.date-location .date-orig {
 		display: inline-block;
-		padding-bottom: rem(10);
+		padding-block-end: rem(10);
 	}
 
 	.date-location > div:last-child {
@@ -179,26 +181,25 @@
 
 .member-list {
 	.card__text > * {
-		max-width: rem($text-measure);
+		max-inline-size: rem($text-measure);
 	}
 
 	.logo--member {
-		margin-left: auto;
-		margin-right: auto;
+		margin-inline: auto;
 	}
 }
 
 .js .member-list {
 	[data-component="card"] .card__text > :last-child {
-		margin-bottom: rem(40);
-		margin-top: 0;
+		margin-block-end: rem(40);
+		margin-block-start: 0;
 	}
 }
 
-.group-list {
-	margin-top: 0;
-}
+// .group-list {
+//     margin-block-start: 0;
+// }
 
-.archive-links h2 + * {
-	margin-top: 0.8em;
-}
\ No newline at end of file
+// .archive-links h2 + * {
+//     margin-block-start: 0.8em;
+// }
\ No newline at end of file
diff --git a/assets-src/styles/sass/80-templates/_post.scss b/assets-src/styles/sass/80-templates/_post.scss
index 6f56c2b7..0136aa48 100644
--- a/assets-src/styles/sass/80-templates/_post.scss
+++ b/assets-src/styles/sass/80-templates/_post.scss
@@ -4,12 +4,12 @@
 
 .post .content,
 .post .rss {
-	max-width: rem(752);
+	max-inline-size: rem(752);
 }
 
 @supports(grid-column-gap: 8%) {
 	.post .content {
-		max-width: none;
+        max-inline-size: none;
 
 		@include mq($bp-tab-large) {
 			display: grid;
@@ -32,30 +32,28 @@
 	}
 }
 
-.post .related {
-	margin-top: rem(40);
-}
+// .post .related {
+// 	margin-block-start: rem(40);
+// }
 
-@supports(grid-column-gap: 8%) {
-	.post .content .related {
-		@include mq($bp-tab-large) {
-			margin-top: 0;
-		}
-	}
-}
+// @supports(grid-column-gap: 8%) {
+// 	.post .content .related {
+// 		@include mq($bp-tab-large) {
+// 			margin-block-start: 0;
+// 		}
+// 	}
+// }
 
 .post .related__inner {
 	background-color: $mist-gray;
 	padding: rem(28) rem(20);
 
 	h2 {
-		font-size: rem(19);
-		line-height: calc(33 / 17);
+		font-size: var(--w3c-text-1);
 	}
 
 	h3 {
-		font-size: 1rem;
-		line-height: calc(32 / 24);
+		font-size: var(--w3c-text-0);
 	}
 
 	a {
@@ -67,30 +65,32 @@
 	}
 }
 
-.post .related__inner > div,
-.post .related__inner h3 + * {
-	margin-top: rem(18);
-}
+// .post .related__inner > div,
+// .post .related__inner h3 + * {
+// 	margin-block-start: rem(18);
+// }
 
 .post .related__inner > div + div {
-	border-top: solid 1px $border-color;
-	margin-top: rem(24);
-	padding-top: rem(15);
+	border-block-start: solid 1px $border-color;
+	// margin-block-start: rem(24);
+	padding-block-start: rem(15);
 }
 
 .post .related__inner li {
-	@include txt-pluto;
+	//@include txt-pluto;
+	font-size: var(--w3c-text-01);
 
-	+ li {
-		margin-top: rem(22);
-	}
+	// + li {
+	// 	margin-block-start: rem(22);
+	// }
 }
 
 .post {
 	.sub-head {
-		@include txt-pluto;
-		margin-bottom: rem(30);
-		margin-top: rem(-20);
+		//@include txt-pluto;
+		font-size: var(--w3c-text-01);
+		margin-block-end: rem(30);
+		margin-block-start: rem(-20);
 	}
 
 	.meta {
@@ -100,25 +100,25 @@
 	.meta dl {
 		dd:first-of-type {
 			@include mq($bp-tab-small) {
-				padding-right: rem(150);
+				padding-inline-end: rem(150);
 			}
 		}
 
-		dd, dt {
-			margin: 0;
-			padding-bottom: rem(8);
-			padding-top: rem(5);
-		}
+		// dd, dt {
+		// 	margin: 0;
+		// 	padding-block-end: rem(8);
+		// 	padding-block-start: rem(5);
+		// }
 
-		dt:first-of-type,
-		dd:first-of-type {
-			padding-top: rem(8);
-		}
+		// dt:first-of-type,
+		// dd:first-of-type {
+		// 	padding-block-start: rem(8);
+		// }
 
 		dt {
 			float: left;
 			font-weight: normal;
-			margin-right: 1em;
+			margin-inline-end: 1em;
 		}
 	}
 
@@ -126,11 +126,8 @@
 	.skip-to-comment-form {
 		color: $storm-gray;
 		display: inline-block;
-		padding-bottom: rem(11);
-		padding-top: rem(11);
-		text-decoration: underline; /* 1 */
-		text-decoration-skip-ink: auto; // Not supported by Safari
-		text-underline-offset: 0.25em; // Supported by Safari
+		padding-block: rem(11);
+		text-decoration: underline;
 
 		&:visited {
 			color: $storm-gray;
@@ -147,45 +144,29 @@
 	.skip-to-comments {
 		@include mq($bp-tab-small) {
 			position: absolute;
-			right: 0;
-			top: rem(19);
+            inset-block-start: rem(19);
+			inset-inline-end: 0;
 		}
 	}
 
 	.rss {
-		border-top: solid 1px $border-color;
-		padding-top:rem(40);
+		border-block-start: solid 1px $border-color;
+		padding-block-start: rem(40);
 	}
 }
 
 [dir="rtl"] {
 	.post .meta dl {
-		dd:first-of-type {
-			@include mq($bp-tab-small) {
-				padding-left: rem(150);
-				padding-right: 0;
-			}
-		}
-
 		dt {
 			float: right;
-			margin-left: 1em;
-			margin-right: 0;
-		}
-	}
-
-	.post .skip-to-comments {
-		@include mq($bp-tab-small) {
-			left: 0;
-			right: auto;
 		}
 	}
 }
 
 .post__notes {
-	border-top: solid 1px $border-color;
-	margin-top: rem(60);
-	padding-top: rem(20);
+	border-block-start: solid 1px $border-color;
+	margin-block-start: rem(60);
+	padding-block-start: rem(20);
 
 	h3 {
 		@extend .txt-saturn;
diff --git a/assets-src/styles/sass/80-templates/_profile.scss b/assets-src/styles/sass/80-templates/_profile.scss
index 9a6d3196..caca8b90 100644
--- a/assets-src/styles/sass/80-templates/_profile.scss
+++ b/assets-src/styles/sass/80-templates/_profile.scss
@@ -3,12 +3,12 @@
 \*------------------------------------*/
 
 .profile .content {
-	max-width: rem(752);
+	max-inline-size: rem(752);
 }
 
 @supports(grid-column-gap: 8%) {
 	.profile .content {
-		max-width: none;
+		max-inline-size: none;
 
 		@include mq($bp-tab-large) {
 			display: grid;
@@ -41,13 +41,12 @@
 }
 
 .profile .profile-nav__inner {
-	margin-bottom: rem(33);
+	margin-block-end: rem(33);
 
 	@include mq($bp-tab-large) {
 		border-inline-start: solid 1px $border-color;
-		margin-bottom: 0;
-		padding-left: rem(20);
-		padding-right: rem(20);
+        margin-block-end: 0;
+		padding-inline: rem(20);
 	}
 
 	[aria-current] {
@@ -61,14 +60,13 @@
 	}
 
 	&[aria-expanded="false"] {
-		margin-bottom: rem(33);
+		margin-block-end: rem(33);
 	}
 }
 
 #profile-nav a {
 	display: inline-block;
-	padding-bottom: rem(10);
-	padding-top: rem(10);
+	padding-block: rem(10);
 
 	&[aria-current] {
 		color: $off-black;
diff --git a/assets-src/styles/sass/80-templates/_technical-reports.scss b/assets-src/styles/sass/80-templates/_technical-reports.scss
index 16916a0c..208a5fb2 100644
--- a/assets-src/styles/sass/80-templates/_technical-reports.scss
+++ b/assets-src/styles/sass/80-templates/_technical-reports.scss
@@ -18,7 +18,7 @@
 		}
 
 		.field {
-			max-width: none;
+			max-inline-size: none;
 		}
 
 		.field-hint {
@@ -40,23 +40,25 @@
 
 .tr-list {
 	.tr-list__item {
-		@include stack(0.5em);
-		@include txt-pluto;
+		//@include stack(0.5em);
+		//@include txt-pluto;
 		border-block-end: 1px solid $twiki-gray;
+		font-size: var(--w3c-text-01);
 		padding-block-end: rem(8);
 		padding-block-start: rem(20);
 
 		> * {
-			max-width: rem(820);
+			max-inline-size: rem(820);
 		}
 	}
 
 	.tr-list__item h3 {
-		@include txt-mars;
+		//@include txt-mars;
+		font-size: var(--w3c-text-3);
 	}
 
 	.tr-list__item__header {
-		@include stack;
+		//@include stack;
 		align-items: flex-start;
 
 		h3 {
diff --git a/assets-src/styles/sass/90-utilities/_alignments.scss b/assets-src/styles/sass/90-utilities/_alignments.scss
index 91342cff..2e504b49 100755
--- a/assets-src/styles/sass/90-utilities/_alignments.scss
+++ b/assets-src/styles/sass/90-utilities/_alignments.scss
@@ -1,17 +1,13 @@
 /*------------------------------------*\
     #Alignment utilities
-
-    1. Logical property allows text-direction to change with `ltr`
 \*------------------------------------*/
 
 .u-float-left {
-	float: left; // IE fallback for next rule - only works for ltr languages
-	float: inline-start; /* 1 */
+	float: left;
 }
 
 .u-float-right {
-	float: right; // IE fallback for next rule - only works for ltr languages
-	float: inline-end; /* 1 */
+	float: right;
 }
 
 .u-text-center {
@@ -19,13 +15,11 @@
 }
 
 .u-text-left {
-	text-align: left; // IE fallback for next rule - only works for ltr languages
-	text-align: start; /* 1 */
+	text-align: start;
 }
 
 .u-text-right {
-	text-align: right; // IE fallback for next rule - only works for ltr languages
-	text-align: end; /* 1 */
+	text-align: end;
 }
 
 .u-text-vertical-lr {
@@ -38,13 +32,13 @@
 
 .u-block-left {
 	float: left;
-	margin-bottom: 1em;
+	margin-block-end: 1em;
 	margin-right: 1em;
 }
 
 .u-block-right {
 	float: right;
-	margin-bottom: 1em;
+    margin-block-end: 1em;
 	margin-left: 1em;
 }
 
@@ -56,8 +50,7 @@ as defined in /10-settings/breakpoints
  */
 .u-text-left-from-lap {
 	@include mq($bp-lap) {
-		text-align: left; // IE fallback for next rule - only works for ltr languages
-		text-align: start; /* 1 */
+		text-align: start;
 	}
 }
 
@@ -71,7 +64,6 @@ as defined in /10-settings/breakpoints
 
 .u-text-right-from-lap {
 	@include mq($bp-lap) {
-		text-align: right; // IE fallback for next rule - only works for ltr languages
-		text-align: end; /* 1 */
+		text-align: end;
 	}
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/90-utilities/_layout.scss b/assets-src/styles/sass/90-utilities/_layout.scss
index 1b599006..389696c0 100644
--- a/assets-src/styles/sass/90-utilities/_layout.scss
+++ b/assets-src/styles/sass/90-utilities/_layout.scss
@@ -7,12 +7,10 @@ The parent must be exactly centered in the browser in order for this
 to work - see https://css-tricks.com/full-width-containers-limited-width-parents/
  */
 .u-full-width {
-	left: 50%;
-	margin-left: -50vw;
-	margin-right: -50vw;
-	position: relative;
-	right: 50%;
-	width: 100vw;
+    inline-size: 100vw;
+    inset-inline: 50%;
+    margin-inline: -50vw;
+    position: relative;
 }
 
 
@@ -21,7 +19,6 @@ to work - see https://css-tricks.com/full-width-containers-limited-width-parents
 To horizontally center a block-level item
  */
 .u-center {
-	margin-left: auto;
-	margin-right: auto;
+	margin-inline: auto;
 	position: relative;
 }
\ No newline at end of file
diff --git a/assets-src/styles/sass/90-utilities/_margins.scss b/assets-src/styles/sass/90-utilities/_margins.scss
index 0e036b89..a92e2f67 100644
--- a/assets-src/styles/sass/90-utilities/_margins.scss
+++ b/assets-src/styles/sass/90-utilities/_margins.scss
@@ -9,5 +9,5 @@
 }
 
 .u-no-margin-top.u-no-margin-top {
-	margin-top: 0;
+	margin-block-start: 0;
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 3fd401a6..ee20f394 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,6 @@
         "imagemin-cli": "^6.0.0",
         "js-yaml": "^3.13.1",
         "lodash.template": "^4.5.0",
-        "normalize.css": "^8.0.1",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.1",
         "postcss-cli": "^9.1.0",
@@ -6135,11 +6134,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/normalize.css": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
-      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
-    },
     "node_modules/npm-conf": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz",
@@ -13245,11 +13239,6 @@
         }
       }
     },
-    "normalize.css": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
-      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
-    },
     "npm-conf": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz",
diff --git a/package.json b/package.json
index 9d695a4b..ea4098ee 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,6 @@
     "imagemin-cli": "^6.0.0",
     "js-yaml": "^3.13.1",
     "lodash.template": "^4.5.0",
-    "normalize.css": "^8.0.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.1",
     "postcss-cli": "^9.1.0",