ok big chunk o' everything

css/cards.css

@@ -0,0 +1,65 @@
+.card {
+	color: var(--color-accent);
+}
+
+p .card {
+	text-transform: uppercase;
+	font-weight: 700;
+}
+
+ol + p {
+	margin-top: 1.5rem;
+}
+
+.stop {
+	color: var(--color-accent);
+	position: relative;
+	list-style: none;
+	padding-left: 1.5rem;
+}
+
+.stop:not(:last-child) {
+	padding-bottom: 2rem;
+}
+
+.stop:before {
+	background-color: var(--color-accent);
+	width: .1rem;
+	content: '';
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+}
+
+svg {
+	margin-left: -2.2rem;
+	width: 2rem;
+	fill: var(--color-accent);
+	float: left;
+	padding: .4rem .5rem 0 0;
+}
+
+@media (max-width: 650px) {
+	svg {
+		padding-top: .2rem;
+	}
+}
+
+.stop h2 {
+	margin: 0;
+}
+
+.stop img {
+	width: 100%;
+}
+
+.stop p {
+	margin: 0;
+	color: var(--color-text);
+	padding-top: .5rem;
+}
+
+.stop .spacer {
+	height: 1rem;
+}

css/main.css

@@ -1,5 +1,14 @@
 :root {
 	color-scheme: light dark;
+
+	--color-blue-light: #c8e5f5;
+	--color-gold-light: #ecd399;
+	--color-blue-dark: #02293e;
+	--color-gold-dark: #715511;
+
+	--color-bg: light-dark(var(--color-blue-light), var(--color-blue-dark));
+	--color-text: light-dark(var(--color-blue-dark), var(--color-blue-light));
+	--color-accent: light-dark(var(--color-gold-dark), var(--color-gold-light));
 }
 
 /* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */
@@ -9,6 +18,7 @@
 
 *:not(dialog) {
   margin: 0; /* 2. Remove default margin */
+  padding: 0;
 }
 
 @media (prefers-reduced-motion: no-preference) {
@@ -17,9 +27,31 @@
   }
 }
 
+#root, #__next {
+  isolation: isolate; /* 10. Create a root stacking context */
+}
+
 body {
   line-height: 1.5; /* 4. Increase line-height */
   -webkit-font-smoothing: antialiased; /* 5. Improve text rendering */
+ 	color: var(--color-text);
+	background-color: var(--color-bg);
+	font-family: "Atkinson Hyperlegible Next";
+}
+
+main {
+	width: 55%;
+	margin: 0 auto 2rem;
+	scroll-margin-top: 1.5rem;
+	min-height: 50vh;
+	padding-bottom: 2rem;
+	max-width: 1200px;
+}
+
+@media (max-width: 650px) {
+	main {
+		width: 92%;
+	}
 }
 
 img, picture, video, canvas, svg {
@@ -38,12 +70,126 @@ p, h1, h2, h3, h4, h5, h6 {
 
 p {
   text-wrap: pretty; /* 9. Improve line wrapping */
+ 	margin: 0 auto 1.5rem;
+	line-height: 1.5rem;
+}
+
+@media (max-width: 650px) {
+	p {
+		font-size: .9rem;
+		line-height: 1.3rem;
+	}
 }
 
 h1, h2, h3, h4, h5, h6 {
   text-wrap: balance; /* 9. Improve line wrapping */
 }
 
-#root, #__next {
-  isolation: isolate; /* 10. Create a root stacking context */
+h1 {
+	margin: 3rem auto 1rem;
+	text-align: center;
+	font-size: 2.2rem;
+}
+
+h2, h3 {
+	margin: 3rem auto .5rem;
+	color: var(--color-accent);
+	border-bottom: solid;
+}
+
+h2 {
+	font-size: 1.8rem;
+}
+
+h3 {
+	font-size: 1.35rem;
+	text-align: right;
+}
+
+@media (max-width: 650px) {
+	h1 {
+		font-size: 1.8rem;
+	}
+
+	h2 {
+		font-size: 1.5rem;
+	}
+
+	h3 {
+		font-size: 1.2rem;
+	}
+}
+
+a {
+	color: var(--color-text);
+	text-decoration: underline;
+	text-decoration-style: solid;
+	text-decoration-thickness: .2rem;
+	text-decoration-color: var(--color-accent);
+	transition: text-decoration-thickness .5s;
+	padding: 0 .15rem;
+	border-radius: .15rem;
+}
+
+@media (any-hover: hover) {
+	a:hover {
+		text-decoration-thickness: .4rem;
+	}
+}
+
+a:focus-visible {
+	text-decoration: none;
+	outline: var(--color-accent) solid .15rem;
+}
+
+ul {
+	margin: 0 auto 1.5rem 2rem;
+	line-height: 1.5rem;
+}
+
+@media (max-width: 650px) {
+	ul {
+		font-size: .9rem;
+		line-height: 1.3rem;
+	}
+}
+
+time {
+	font-weight: 700;
+}
+
+button {
+	cursor: pointer;
+	background-color: var(--color-bg);
+}
+
+header img {
+	max-height: 25vh;
+	max-width: 100%;
+	width: auto;
+	margin: 0 auto;
+}
+
+@media (max-width: 650px) {
+	header img {
+		max-height: 20vh;
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	#logo-dark {
+		display: none;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	#logo-light {
+		display: none;
+	}
+}
+
+#author {
+	text-align: right;
+	margin-bottom: 3rem;
+	font-style: italic;
 }

css/nav.css

@@ -0,0 +1,119 @@
+nav {
+	display: flex;
+	position: relative;
+	gap: 1rem;
+	justify-content: center;
+	margin: 1rem auto;
+}
+
+nav a,
+nav button {
+	font-size: 1.4rem;
+	border: .1rem solid;
+	border-radius: .15rem;
+	padding: .15rem .3rem;
+	color: var(--color-accent);
+	text-decoration: none;
+	line-height: 2rem;
+	outline-offset: .1rem;
+}
+
+@media (max-width: 650px) {
+	nav a,
+	nav button {
+		font-size: 1.1rem;
+	}
+}
+
+@media (any-hover: hover) {
+	nav a:hover,
+	nav button:hover {
+		color: var(--color-bg);
+		background-color: var(--color-accent);
+		border-color: var(--color-accent);
+	}
+}
+
+nav a:focus-visible,
+nav button:focus-visible {
+	outline: .1rem solid var(--color-accent);
+}
+
+#skip {
+	left: -999px;
+	position: absolute;
+	top: auto;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	z-index: -99;
+	background-color: var(--color-bg);
+}
+
+#skip:focus-visible {
+	left: 1rem;
+	width: auto;
+	height: auto;
+	overflow: auto;
+	z-index: 999;
+}
+
+@media (any-hover: hover) {
+	#skip:hover {
+		color: var(--color-bg);
+		background-color: var(--color-accent);
+	}
+}
+
+a[aria-current="page"] {
+	border-right-width: .5rem;
+	border-left-width: .5rem;
+}
+
+nav ul {
+	list-style: none;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	margin: 0 0 0 1rem;
+	min-width: 10rem;
+}
+
+#dropdown {
+	position: relative;
+	display: inline-block;
+	min-width: 3rem;
+}
+
+nav ul.show {
+	display: block;
+}
+
+nav ul li {
+	margin: .5rem;
+}
+
+nav ul a {
+	display: inline-block;
+	background-color: var(--color-bg);
+}
+
+footer {
+	color: var(--color-bg);
+	background-color: var(--color-text);
+	padding: 1rem;
+}
+
+footer p {
+	text-align: center;
+	margin: 0;
+}
+
+footer a {
+	color: var(--color-bg);
+	text-decoration-color: var(--color-bg);
+}
+
+footer a:focus-visible {
+	outline-color: var(--color-bg);
+}