:root {
	--flexoki-black: #100f0f;
	--flexoki-paper: #fffcf0;

	--flexoki-50: #f2f0e5;
	--flexoki-100: #e6e4d9;
	--flexoki-150: #dad8ce;
	--flexoki-200: #cecdc3;
	--flexoki-300: #b7b5ac;
	--flexoki-400: #9f9d96;
	--flexoki-500: #878580;
	--flexoki-600: #6f6e69;
	--flexoki-700: #575653;
	--flexoki-800: #403e3c;
	--flexoki-850: #343331;
	--flexoki-900: #282726;
	--flexoki-950: #1c1b1a;

	--flexoki-red-50: #ffe1d5;
	--flexoki-red-100: #ffcabb;
	--flexoki-red-150: #fdb2a2;
	--flexoki-red-200: #f89a8a;
	--flexoki-red-300: #e8705f;
	--flexoki-red-400: #d14d41;
	--flexoki-red-500: #c03e35;
	--flexoki-red-600: #af3029;
	--flexoki-red-700: #942822;
	--flexoki-red-800: #6c201c;
	--flexoki-red-850: #551b18;
	--flexoki-red-900: #3e1715;
	--flexoki-red-950: #261312;

	--flexoki-orange-50: #ffe7ce;
	--flexoki-orange-100: #fed3af;
	--flexoki-orange-150: #fcc192;
	--flexoki-orange-200: #f9ae77;
	--flexoki-orange-300: #ec8b49;
	--flexoki-orange-400: #da702c;
	--flexoki-orange-500: #cb6120;
	--flexoki-orange-600: #bc5215;
	--flexoki-orange-700: #9d4310;
	--flexoki-orange-800: #71320d;
	--flexoki-orange-850: #59290d;
	--flexoki-orange-900: #40200d;
	--flexoki-orange-950: #27180e;

	--flexoki-yellow-50: #faeec6;
	--flexoki-yellow-100: #f6e2a0;
	--flexoki-yellow-150: #f1d67e;
	--flexoki-yellow-200: #eccb60;
	--flexoki-yellow-300: #dfb431;
	--flexoki-yellow-400: #d0a215;
	--flexoki-yellow-500: #be9207;
	--flexoki-yellow-600: #ad8301;
	--flexoki-yellow-700: #8e6b01;
	--flexoki-yellow-800: #664d01;
	--flexoki-yellow-850: #503d02;
	--flexoki-yellow-900: #3a2d04;
	--flexoki-yellow-950: #241e08;

	--flexoki-green-50: #edeecf;
	--flexoki-green-100: #dde2b2;
	--flexoki-green-150: #cdd597;
	--flexoki-green-200: #bec97e;
	--flexoki-green-300: #a0af54;
	--flexoki-green-400: #879a39;
	--flexoki-green-500: #768d21;
	--flexoki-green-600: #66800b;
	--flexoki-green-700: #536907;
	--flexoki-green-800: #3d4c07;
	--flexoki-green-850: #313d07;
	--flexoki-green-900: #252d09;
	--flexoki-green-950: #1a1e0c;

	--flexoki-cyan-50: #ddf1e4;
	--flexoki-cyan-100: #bfe8d9;
	--flexoki-cyan-150: #a2dece;
	--flexoki-cyan-200: #87d3c3;
	--flexoki-cyan-300: #5abdac;
	--flexoki-cyan-400: #3aa99f;
	--flexoki-cyan-500: #2f968d;
	--flexoki-cyan-600: #24837b;
	--flexoki-cyan-700: #1c6c66;
	--flexoki-cyan-800: #164f4a;
	--flexoki-cyan-850: #143f3c;
	--flexoki-cyan-900: #122f2c;
	--flexoki-cyan-950: #101f1d;

	--flexoki-blue-50: #e1eceb;
	--flexoki-blue-100: #c6dde8;
	--flexoki-blue-150: #abcfe2;
	--flexoki-blue-200: #92bfdb;
	--flexoki-blue-300: #66a0c8;
	--flexoki-blue-400: #4385be;
	--flexoki-blue-500: #3171b2;
	--flexoki-blue-600: #205ea6;
	--flexoki-blue-700: #1a4f8c;
	--flexoki-blue-800: #163b66;
	--flexoki-blue-850: #133051;
	--flexoki-blue-900: #12253b;
	--flexoki-blue-950: #101a24;

	--flexoki-purple-50: #f0eaec;
	--flexoki-purple-100: #e2d9e9;
	--flexoki-purple-150: #d3cae6;
	--flexoki-purple-200: #c4b9e0;
	--flexoki-purple-300: #a699d0;
	--flexoki-purple-400: #8b7ec8;
	--flexoki-purple-500: #735eb5;
	--flexoki-purple-600: #5e409d;
	--flexoki-purple-700: #4f3685;
	--flexoki-purple-800: #3c2a62;
	--flexoki-purple-850: #31234e;
	--flexoki-purple-900: #261c39;
	--flexoki-purple-950: #1a1623;

	--flexoki-magenta-50: #fee4e5;
	--flexoki-magenta-100: #fccfda;
	--flexoki-magenta-150: #f9b9cf;
	--flexoki-magenta-200: #f4a4c2;
	--flexoki-magenta-300: #e47da8;
	--flexoki-magenta-400: #ce5d97;
	--flexoki-magenta-500: #b74583;
	--flexoki-magenta-600: #a02f6f;
	--flexoki-magenta-700: #87285e;
	--flexoki-magenta-800: #641f46;
	--flexoki-magenta-850: #4f1b39;
	--flexoki-magenta-900: #39172b;
	--flexoki-magenta-950: #24131d;
}

:root {
	--bg-color: light-dark(var(--flexoki-paper), var(--flexoki-black));
	--bg-inverse: light-dark(var(--flexoki-black), var(--flexoki-paper));
	--text-color: light-dark(var(--flexoki-black), var(--flexoki-paper));
	--secondary-text-color: light-dark(var(--flexoki-800), var(--flexoki-200));
	--main-accent: light-dark(
		var(--flexoki-orange-50),
		var(--flexoki-purple-950)
	);
	--secondary-accent: light-dark(
		var(--flexoki-orange-300),
		var(--flexoki-purple-600)
	);
	--center-column-max-width: 40dvw;

	color-scheme: light dark;
	color: var(--text-color);
	height: 100dvh;
	width: 100dvw;

	* {
		font-family: "Rubik", sans-serif;
		font-optical-sizing: auto;
		font-weight: 400;
		font-style: normal;
	}

	.heading {
		font-family: "Gilda Display", serif;
		font-weight: 400;
		font-style: normal;
	}
}

body {
	background-color: var(--bg-color);
	margin: 0;
	height: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;

	header {
		width: calc(100% - 2rem);
		padding: 1rem;
		border-bottom: solid 4px var(--secondary-accent);

		background-color: var(--main-accent);

		nav {
			background-color: var(--main-accent);
		}
	}

	nav {
		display: flex;
		flex-direction: row;
		column-gap: 2rem;
		padding: 0 1rem;

		a {
			font-weight: bold;
			text-decoration: none;
			color: var(--bg-inverse);
		}

		a:visited {
			color: var(--bg-inverse);
		}

		a:hover,
		a:focus {
			color: var(--secondary-accent);
		}
	}

	hr {
		margin-top: 2.5rem;
		border: solid 2px var(--secondary-accent);
		border-radius: 1rem;
		width: 100%;
		margin-block-end: 0;
	}

	footer {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: calc(100% - 2rem);
		column-gap: 1rem;
		padding: 0.5rem 1rem;

		p {
			margin-block: 0;
		}
	}

	main {
		flex-grow: 1;
	}
}

@media (max-width: 719px) {
	:root {
		--center-column-max-width: 90dvw;
	}
}

.hero {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	position: relative;
	column-gap: 1rem;

	background-image: url("/_assets/backdrops/wrightsville_overlay_mini.svg");

	background-size: cover;
	background-color: var(--bg-color);

	height: 100%;

	img {
		width: 10rem;
		height: 10rem;
		border-radius: 1rem;
		border: solid 5px var(--secondary-accent);
	}

	.elevator-pitch {
		max-width: 35%;

		.overview {
			position: relative;
		}

		p a {
			color: var(--text-color);
			text-decoration: underline;
			text-decoration-color: var(--secondary-accent);
			text-underline-offset: 0.25rem;
		}

		p a:hover,
		p a:focus {
			color: var(--secondary-accent);
		}
	}

	svg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		fill: var(--main-accent);
	}
}

@media (prefers-color-scheme: dark) {
	.hero {
		background-image: url("/_assets/backdrops/wrightsville_overlay_mini_dark.svg");
	}
}

@media (max-width: 719px) {
	.hero {
		flex-direction: column;

		.elevator-pitch {
			max-width: 90%;

			h1 {
				text-align: center;
			}
		}
	}
}

article {
	max-width: var(--center-column-max-width);
	display: flex;
	flex-direction: column;
}

article.blog-post {
	row-gap: 1.5rem;
	padding-top: 2rem;

	img {
		border-radius: 1rem;
		max-height: 20rem;
		object-fit: cover;
		width: 100%;
	}

	h1 {
		font-family: "Gilda Display", serif;
		font-weight: 400;
		font-style: normal;
		font-size: 2rem;
		word-wrap: break-word;
		margin-block: 0;
	}

	p {
		font-family: "PT Sans", sans-serif;
		font-weight: 400;
		font-style: normal;

		line-height: 1.8rem;
		font-size: 1.3em;
		max-width: 40rem;
		margin-block: 0;
	}

	a {
		color: var(--secondary-accent);
	}
}

article.index {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	max-width: calc(var(--center-column-max-width) - 2rem);
	padding-top: 2rem;

	.snippet {
		display: flex;
		flex-direction: column;
		row-gap: 0.5rem;
		padding: 0.25rem 0.5rem;

		h2,
		p {
			margin-block: 0;
		}
	}

	.heading {
		font-size: 2rem;
	}

	.post-date {
		font-size: 0.75rem;
		font-weight: bold;
		text-transform: uppercase;
		color: var(--secondary-text-color);
	}

	.description {
		line-height: 1.4rem;
		font-size: 100%;
	}

	a.fancy-link {
		color: var(--text-color);

		text-decoration: none;
		position: relative;
		cursor: pointer;
		width: max-content;
	}

	a.fancy-link:visited {
		color: var(--text-color);
	}

	.fancy-link::before {
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 2px;
		bottom: -3px;
		left: 0;
		background-color: var(--secondary-accent);
		transform: scaleX(0);
		transform-origin: top left;
		transition: transform 0.3s ease;
	}

	.fancy-link:hover::before,
	.fancy-link:focus::before {
		transform: scaleX(1);
	}
}

@media (max-width: 900px) {
	article.index {
		.heading {
			font-size: 1.5rem;
		}
		.fancy-link {
			max-width: 80dvw;
		}
		.fancy-link::before {
			display: none;
		}
	}
}

.coffee-table {
	max-width: var(--center-column-max-width);
	display: flex;
	flex-direction: column;
	margin-top: 3rem;
	row-gap: 1rem;

	p {
		font-family: "PT Sans", sans-serif;
		font-weight: 400;
		font-style: normal;

		line-height: 1.8rem;
		font-size: 1.3em;
		max-width: 40rem;
		margin-block: 0;
	}

	a {
		color: var(--secondary-accent);
	}

	h1 {
		font-family: "Gilda Display", serif;
		font-weight: 400;
		font-style: normal;
		font-size: 2rem;
		word-wrap: break-word;
		margin-block: 0;
	}

	.media-grid {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 1rem;

		img {
			width: 100%;
		}
	}

	.podcasts,
	.tv,
	.books {
		display: flex;
		flex-direction: column;
		row-gap: 0.5rem;

		h2 {
			font-family: "PT Sans", sans-serif;
			font-weight: 800;
			font-style: normal;

			line-height: 2.2rem;
			font-size: 1.6em;
			max-width: 40rem;
			margin-block: 0;
		}
	}
}

@media (max-width: 719px) {
	.hero {
		flex-direction: column;

		.elevator-pitch {
			max-width: 90%;
		}
	}
}

.hero-2 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(8, 1fr);
	width: 50dvw;
	position: relative;
}

.svg-span {
	grid-column: 1 / 5;
	grid-row: 1 / 3;
	background-image: url("/_assets/backdrops/wrightsville_overlay_mini.svg");
	background-color: var(--bg-color);
	background-size: cover;
	border-bottom: solid 4px var(--secondary-accent);
	z-index: 1;
}

.mask-cell {
	background-color: var(--bg-color);
	z-index: 2;
}

.mask-cell.one {
	grid-column: 2;
	grid-row: 2;
}

.mask-cell.two {
	grid-column: 3;
	grid-row: 2;
}

.center-image {
	grid-column: 2 / 4;
	grid-row: 2 / 4;
	width: 100%;
	height: auto;
	justify-self: center;
	align-self: center;
	z-index: 3;
	border-top: solid 4px var(--secondary-accent);
	border-left: solid 4px var(--secondary-accent);
	border-right: solid 4px var(--secondary-accent);
}