diff --git a/src/styles/index.css b/src/styles/index.css
index 9a0d32f..1f218cb 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,117 +1,124 @@
-/* src/styles/main.css */
-:root {
-	--colour-light: #EFEFEF;
-	--colour-dark: #222222;
-	--colour-link: darkcyan;
-	--colour-link-alt: yellow;
-	--type-size: 100%;
-	--type-stack: 'system', sans-serif;
-	--line-height: 1.9;
-	--character-width: 72ch;
-}
-
-@font-face {
-	font-family: system;
-	font-style: normal;
-	font-weight: 300;
-	src:	local('.SFNSText-Light'),
-			local('.HelveticaNeueDeskInterface-Light'),
-			local('.LucidaGrandeUI'),
-			local('Ubuntu Light'),
-			local('Segoe UI Light'),
-			local('Roboto-Light'),
-			local('DroidSans'),
-			local('Tahoma');
-}
-
-body {
-	box-sizing: border-box;
-	background-color: var(--colour-light);
-	color: var(--colour-dark);
-	font-family: var(--type-stack);
-	font-size: var(--type-size);
-	line-height: var(--line-height);
-	max-width: var(--character-width);
-	margin: auto;
-	padding: 20px;
-	width: 100%;
-}
-
-a {
-	color: var(--colour-link);
-	font-weight: 600;
-}
-
-img {
-	height: auto;
-	width: 100%;
-}
+@layer reset, base;
 
-footer {
-	padding: 2rem 0;
+@layer reset {
+	@import "reset.css";
 }
 
-footer svg {
-	height: 1rem;
-	width: auto;
-}
-
-footer a svg path {
-	fill: var(--colour-link);
-}
-
-footer ul {
-	list-style: none;
-	text-align: right;
-}
-
-footer li {
-	display: inline-block;
-	padding: 0 5px;
-}
+@layer base {
+	:root {
+		--colour-light: #EFEFEF;
+		--colour-dark: #222222;
+		--colour-link: darkcyan;
+		--colour-link-alt: yellow;
+		--type-size: 100%;
+		--type-stack: 'system', sans-serif;
+		--line-height: 1.9;
+		--character-width: 72ch;
+	}
 
-@media (prefers-color-scheme: dark) {
+	@font-face {
+		font-family: system;
+		font-style: normal;
+		font-weight: 300;
+		src:	local('.SFNSText-Light'),
+				local('.HelveticaNeueDeskInterface-Light'),
+				local('.LucidaGrandeUI'),
+				local('Ubuntu Light'),
+				local('Segoe UI Light'),
+				local('Roboto-Light'),
+				local('DroidSans'),
+				local('Tahoma');
+	}
+	
 	body {
-		background-color: var(--colour-dark);
-		color: var(--colour-light);
+		box-sizing: border-box;
+		background-color: var(--colour-light);
+		color: var(--colour-dark);
+		font-family: var(--type-stack);
+		font-size: var(--type-size);
+		line-height: var(--line-height);
+		max-width: var(--character-width);
+		margin: auto;
+		padding: 20px;
+		width: 100%;
 	}
-
+	
 	a {
-		color: var(--colour-link-alt);
+		color: var(--colour-link);
+		font-weight: 600;
 	}
-
+	
+	img {
+		height: auto;
+		width: 100%;
+	}
+	
+	footer {
+		padding: 2rem 0;
+	}
+	
+	footer svg {
+		height: 1rem;
+		width: auto;
+	}
+	
 	footer a svg path {
-		fill: var(--colour-link-alt);
+		fill: var(--colour-link);
+	}
+	
+	footer ul {
+		list-style: none;
+		text-align: right;
+	}
+	
+	footer li {
+		display: inline-block;
+		padding: 0 5px;
+	}
+	
+	@media (prefers-color-scheme: dark) {
+		body {
+			background-color: var(--colour-dark);
+			color: var(--colour-light);
+		}
+	
+		a {
+			color: var(--colour-link-alt);
+		}
+	
+		footer a svg path {
+			fill: var(--colour-link-alt);
+		}
+	}
+	
+	/* Accessible skip-to-content link (classless) */
+	/* Target the page anchor used in templates: href="#main-content" */
+	a[href="#main-content"] {
+		position: absolute;
+		left: -999px;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip: rect(1px, 1px, 1px, 1px); /* legacy */
+		white-space: nowrap;
+		border: 0;
+		padding: 0;
+	}
+	
+	a[href="#main-content"]:focus,
+	a[href="#main-content"]:focus-visible {
+		position: fixed;
+		top: 1rem;
+		left: 1rem;
+		width: auto;
+		height: auto;
+		overflow: visible;
+		clip: auto;
+		background: var(--colour-dark);
+		color: var(--colour-light);
+		padding: 0.25rem 0.5rem;
+		border-radius: 4px;
+		z-index: 1000;
+		text-decoration: none;
 	}
-}
-
-/* Accessible skip-to-content link (classless) */
-/* Target the page anchor used in templates: href="#main-content" */
-a[href="#main-content"] {
-	position: absolute;
-	left: -999px;
-	width: 1px;
-	height: 1px;
-	overflow: hidden;
-	clip: rect(1px, 1px, 1px, 1px); /* legacy */
-	white-space: nowrap;
-	border: 0;
-	padding: 0;
-}
-
-a[href="#main-content"]:focus,
-a[href="#main-content"]:focus-visible {
-	position: fixed;
-	top: 1rem;
-	left: 1rem;
-	width: auto;
-	height: auto;
-	overflow: visible;
-	clip: auto;
-	background: var(--colour-dark);
-	color: var(--colour-light);
-	padding: 0.25rem 0.5rem;
-	border-radius: 4px;
-	z-index: 1000;
-	text-decoration: none;
 }
diff --git a/src/styles/reset.css b/src/styles/reset.css
new file mode 100644
index 0000000..63e5ad0
--- /dev/null
+++ b/src/styles/reset.css
@@ -0,0 +1,283 @@
+/*
+Coyier Starting Stylesheet (CSS)
+Chris Coyier reset — sourced from https://frontendmasters.com/blog/the-coyier-css-starter
+
+Purpose:
+- Provide a minimal, opinionated starting point that normalizes browser defaults.
+- Establish sensible box-sizing, typography, and basic element resets to reduce cross-browser inconsistencies.
+
+Intended usage:
+- Include early in the cascade (before component and utility styles).
+- Use as a foundational layer; extend or override for project-specific design needs.
+- Keep it small and focused to avoid unintended side effects on third-party widgets.
+
+Summary of included concerns:
+- Global box-sizing and inheritance rules for predictable layout.
+- Base typography settings (font-size, line-height, smoothing) and body resets.
+- Margin/padding normalization for headings, lists, paragraphs, and other common flow elements.
+- Form element simplifications (inputs, buttons, selects, textareas) to reduce native UA styling differences.
+- Media handling for responsive images/videos and consistent display behavior.
+- Link, table, code, and accessibility-related adjustments for clearer defaults.
+
+Attribution and naming:
+- This file documents the Chris Coyier reset; original source: https://frontendmasters.com/blog/the-coyier-css-starter
+- Coined name for this stylesheet: "Coyier Starting Stylesheet (CSS)".
+
+Notes for maintainers:
+- Preserve minimalism; prefer project-level overrides to editing this base when possible.
+- When modifying, document changes and reasons to keep the intent clear for future contributors.
+*/
+
+html {
+	color-scheme: light dark;
+	font:
+	clamp(1rem, 1rem + 0.5vw, 2rem) / 1.4 system-ui,
+	sans-serif;
+	tab-size: 4;
+	hanging-punctuation: first allow-end last;
+	word-break: break-word;
+}
+
+body {
+	margin: 0;
+	padding: 2rem;
+
+	@media (width < 500px) {
+		padding: 1rem;
+	}
+}
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+h1,
+h2 {
+	font-weight: 900;
+	letter-spacing: -0.02rem;
+}
+
+h1,
+h2,
+h3 {
+	line-height: 1.1;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 /* FUTURE :heading */ {
+	text-wrap: balance;
+	margin-block-start: 0;
+}
+
+p,
+li,
+dd {
+	text-wrap: pretty;
+	max-inline-size: 88ch;
+}
+
+a {
+	color: oklch(0.68 0.17 228);
+	text-underline-offset: 2px;
+
+	&:not(:is(:hover, :focus)) {
+		text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
+	}
+}
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sub {
+	inset-block-end: -0.25em;
+}
+
+sup {
+	inset-block-start: -0.5em;
+}
+
+ul,
+ol,
+dl {
+	margin: 0;
+	padding: 0;
+	list-style: inside;
+	ul,
+	ol,
+	dl {
+		padding-inline-start: 2ch;
+	}
+}
+
+img,
+video,
+iframe {
+	display: block;
+	max-inline-size: 100%;
+	block-size: auto;
+	border-style: none;
+}
+
+figure {
+	inline-size: fit-content;
+	margin-inline: auto;
+}
+
+figcaption {
+	contain: inline-size;
+	font-size: 90%;
+}
+
+input,
+select,
+textarea,
+button {
+	font: inherit;
+	/* FUTURE: appearance: base; */
+}
+
+label {
+	display: block;
+}
+
+input:not(
+	:where(
+	[type="submit"],
+	[type="checkbox"],
+	[type="radio"],
+	[type="button"],
+	[type="reset"]
+	)
+) {
+	inline-size: 100%;
+}
+
+button,
+input:where(
+	[type="submit"],
+	[type="reset"],
+	[type="button"]
+) {
+	background: CanvasText;
+	color: Canvas;
+	border: 1px solid transparent;
+}
+
+textarea {
+	field-sizing: content;
+	min-block-size: 5lh;
+	inline-size: 100%;
+	max-inline-size: 100%;
+}
+
+pre,
+code,
+kbd,
+samp {
+	font-family: ui-monospace, SFMono-Regular, monospace;
+}
+
+svg {
+	fill: currentColor;
+}
+
+[aria-disabled="true" i],
+[disabled] {
+	cursor: not-allowed;
+}
+
+[hidden] {
+	display: none !important;
+}
+
+[disabled],
+label:has(input[disabled]) {
+	opacity: 0.5;
+
+	[disabled] {
+		opacity: 1;
+	}
+}
+
+pre {
+	white-space: pre-wrap;
+	background: CanvasText;
+	color: Canvas;
+	padding: 1.5rem;
+}
+
+hr {
+	border-style: solid;
+	border-width: 1px 0 0;
+	color: inherit;
+	height: 0;
+	overflow: visible;
+	margin-block: 2.5rem;
+}
+
+:target {
+	scroll-margin: 3rlh;
+}
+
+table {
+	caption-side: bottom;
+	border-collapse: collapse;
+
+	td {
+		font-size: 90%;
+	}
+	
+	td,
+	th {
+		word-break: normal;
+		border: 1px solid gray;
+		padding: 0.5rem;
+	}
+}
+
+[role="region"][aria-labelledby][tabindex] {
+	overflow: auto;
+}
+
+caption {
+	font-size: 90%;
+}
+
+.screenreader-only:not(:focus):not(:active) {
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}
+
+:focus-visible {
+	outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@view-transition {
+		navigation: auto;
+	}
+	
+	html {
+		interpolate-size: allow-keywords;
+		&:focus-within {
+			scroll-behavior: smooth;
+		}
+	}
+}
+