/* Defaults */
:root {
	--font-family: "Fraunces", serif;
	--font-family-headline: "Fraunces", serif;
	--font-family-ui: "Manrope", sans-serif;
	--font-variation-default: "opsz" 18, "wght" 310, "SOFT" 40, "WONK" 0;
	--font-variation-ui: "wght" 500;
	--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono,
		Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono,
		Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New,
		Courier, monospace;
	--meta-font-family: "Manrope", sans-serif;
	--meta-font-size: var(--step--2);
	--meta-font-style: normal;
	--meta-font-variation-settings: "wght" 500;
	--ui-letter-spacing: calc(var(--space-3xs) * 0.5);
}

/*
 Font Axes, Fraunces:
 --------------------
 opsz: 9-144 		(Optical Size)
 wght: 100-900 	(Weight)
 SOFT: 0-100		(Soften)
 WONK: 0-1			(Wonk)


 Font Axes, Manrope:
 --------------------
 wght: 200-900	(Weight)

*/

/* Design Tokens */
:root {
	/* Colors */
	--color-gray-20: #e0e0e0;
	--color-gray-90: #333333;

	--card-color: rgba(250, 250, 250, 1);
	--contrast-color: #027860;
	--background-color: #faf5f5;
	--rss-orange: rgb(255, 152, 0);
	--text-color: var(--color-gray-90);
	--text-color-link: var(--text-color);
	--text-color-tag: var(--contrast-color);

	/* Font Size Scaling Tokens - https://utopia.fyi/type/calculator?c=320,20,1.2,888,24,1.25,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
	--step--2: clamp(0.8681rem, 0.8163rem + 0.259vw, 0.96rem);
	--step--1: clamp(1.0417rem, 0.9525rem + 0.446vw, 1.2rem);
	--step-0: clamp(1.25rem, 1.1092rem + 0.7042vw, 1.5rem);
	--step-1: clamp(1.5rem, 1.2887rem + 1.0563vw, 1.875rem);
	--step-2: clamp(1.8rem, 1.4937rem + 1.5317vw, 2.3438rem);
	--step-3: clamp(2.16rem, 1.7264rem + 2.1681vw, 2.9297rem);
	--step-4: clamp(2.592rem, 1.9891rem + 3.0144vw, 3.6621rem);
	--step-5: clamp(3.1104rem, 2.2838rem + 4.1331vw, 4.5776rem);
	--step-6: clamp(3.7325rem, 2.6116rem + 5.6044vw, 5.722rem);
	--step-7: clamp(4.479rem, 2.9727rem + 7.5312vw, 7.1526rem);
	--step-8: clamp(5.3748rem, 3.3658rem + 10.0449vw, 8.9407rem);

	/* Space Scaling Tokens - https://utopia.fyi/space/calculator?c=320,20,1.2,888,24,1.25,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|5|6|7|8|9|10|11|12,s-l&g=s,s,l,12 */
	--space-3xs: clamp(0.3125rem, 0.2773rem + 0.1761vw, 0.375rem);
	--space-2xs: clamp(0.625rem, 0.5546rem + 0.3521vw, 0.75rem);
	--space-xs: clamp(0.9375rem, 0.8319rem + 0.5282vw, 1.125rem);
	--space-s: clamp(1.25rem, 1.1092rem + 0.7042vw, 1.5rem);
	--space-m: clamp(1.875rem, 1.6637rem + 1.0563vw, 2.25rem);
	--space-l: clamp(2.5rem, 2.2183rem + 1.4085vw, 3rem);
	--space-xl: clamp(3.75rem, 3.3275rem + 2.1127vw, 4.5rem);
	--space-2xl: clamp(5rem, 4.4366rem + 2.8169vw, 6rem);
	--space-3xl: clamp(6.25rem, 5.5458rem + 3.5211vw, 7.5rem);
	--space-4xl: clamp(7.5rem, 6.6549rem + 4.2254vw, 9rem);
	--space-5xl: clamp(8.75rem, 7.7641rem + 4.9296vw, 10.5rem);
	--space-6xl: clamp(10rem, 8.8732rem + 5.6338vw, 12rem);
	--space-7xl: clamp(11.25rem, 9.9824rem + 6.338vw, 13.5rem);
	--space-8xl: clamp(12.5rem, 11.0915rem + 7.0423vw, 15rem);
	--space-9xl: clamp(13.75rem, 12.2007rem + 7.7465vw, 16.5rem);
	--space-10xl: clamp(15rem, 13.3099rem + 8.4507vw, 18rem);

	/* One-up pairs */
	--space-3xs-2xs: clamp(0.3125rem, 0.066rem + 1.2324vw, 0.75rem);
	--space-2xs-xs: clamp(0.625rem, 0.3433rem + 1.4085vw, 1.125rem);
	--space-xs-s: clamp(0.9375rem, 0.6206rem + 1.5845vw, 1.5rem);
	--space-s-m: clamp(1.25rem, 0.6866rem + 2.8169vw, 2.25rem);
	--space-m-l: clamp(1.875rem, 1.2412rem + 3.169vw, 3rem);
	--space-l-xl: clamp(2.5rem, 1.3732rem + 5.6338vw, 4.5rem);
	--space-xl-2xl: clamp(3.75rem, 2.4824rem + 6.338vw, 6rem);
	--space-2xl-3xl: clamp(5rem, 3.5915rem + 7.0423vw, 7.5rem);
	--space-3xl-4xl: clamp(6.25rem, 4.7007rem + 7.7465vw, 9rem);
	--space-4xl-5xl: clamp(7.5rem, 5.8099rem + 8.4507vw, 10.5rem);
	--space-5xl-6xl: clamp(8.75rem, 6.919rem + 9.1549vw, 12rem);
	--space-6xl-7xl: clamp(10rem, 8.0282rem + 9.8592vw, 13.5rem);
	--space-7xl-8xl: clamp(11.25rem, 9.1373rem + 10.5634vw, 15rem);
	--space-8xl-9xl: clamp(12.5rem, 10.2465rem + 11.2676vw, 16.5rem);
	--space-9xl-10xl: clamp(13.75rem, 11.3556rem + 11.9718vw, 18rem);

	/* Custom pairs */
	--space-s-l: clamp(1.25rem, 0.2641rem + 4.9296vw, 3rem);

	/* Fluid Grid Tokens - https://utopia.fyi/grid/calculator?c=320,20,1.2,888,24,1.25,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,s,l,12 */
	--grid-max-width: 55.5rem;
	--grid-gutter: var(--space-s-s, clamp(1.25rem, 1.1092rem + 0.7042vw, 1.5rem));
	--grid-columns: 12;

	/* Span grid utility */
	--span-grid: 1 / span 12;

	/* Change <img> SVG color with filter */
	--logo-filter: brightness(0) saturate(100%) invert(16%) sepia(0%)
		saturate(1024%) hue-rotate(177deg) brightness(99%) contrast(88%);
	--icon-filter: none;

	/* Corners */
	--border-radius: 0.3rem;

	/* Transitions */
	--transition-normal: all 0.3s;

	/* Links */
	--link-decoration-thickness: 0.06rem;

	/* Borders */
	--border-details: 1px solid var(--color-gray-20);
	--border-hr: 0.5px solid var(--color-gray-20);
	--border-nav: 1px solid var(--text-color);
	--border-nav-currentpage: var(--space-xs-s) solid var(--contrast-color);
	--border-nav-hover: var(--space-xs-s) solid var(--text-color);

	/* Shadow */
	--box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

	/* Web Component Tokens */
	--wc-card-background-color: var(--card-color);
	--wc-card-border-radius: var(--border-radius);
	--wc-card-margin: 0 0 var(--space-s) 0;
	--wc-card-box-shadow: var(--box-shadow);
	--wc-link-color: var(--text-color);
	--wc-link-decoration-color: var(--contrast-color);
	--wc-link-decoration-thickness: var(--link-decoration-thickness);
	--wc-comment-text-margin: var(--space-xs) 0 0 0;
	--wc-profile-pic-size: var(--space-l);
	--wc-profile-pic-border-radius: 10rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-gray-20: #253848;
		--color-gray-90: #dad8d8;
		--card-color: #333333;
		--contrast-color: #04c49e;

		/* --text-color is assigned to --color-gray-_ above */
		--text-color-link: var(--text-color);

		--background-color: #15202b;
		--logo-filter: none;
		--icon-filter: brightness(0) saturate(100%) invert(9%) sepia(76%)
			saturate(340%) hue-rotate(168deg) brightness(95%) contrast(94%);
	}
	.socialLinks a li img {
		filter: auto;
	}
}

/* Global stylesheet */
* {
	box-sizing: border-box;
}

html,
body {
	background-color: var(--background-color);
	color: var(--text-color);
	font-family: var(--font-family);
	font-variation-settings: var(--font-variation-default);
	font-variant-ligatures: normal;
	margin: 0 auto;
	padding: 0;
}
html {
	font-size: 13px;
	overflow-y: scroll;
}
input.answer {
	display: inline;
}
input:not(.answer):not(#weatherToggle),
textarea {
	background-color: var(--background-color);
	border: var(--border-details);
	border-color: var(--contrast-color);
	border-radius: var(--border-radius);
	color: var(--text-color);
	font-family: var(--font-family);
	font-size: var(--step-0);
	font-variation-settings: var(--font-variation-default);
	margin-block: 0 1lh;
	min-height: var(--space-l);
	padding: 0 var(--space-3xs);
	width: 100%;
	&:focus {
		box-shadow: 0 0 0 2px var(--contrast-color);
		outline: none;
	}
}
label {
	display: block;
	margin-bottom: var(--space-3xs);
}
.answerBox > label {
	display: inline;
}
article:not(.postlist-item) h3 {
	margin-bottom: var(--space-s);
	margin-top: var(--space-m);
}
blockquote p {
	font-style: italic;
}
blockquote:before {
	color: var(--contrast-color);
	content: "“";
	font-size: 10rem;
	margin-left: -4rem;
	margin-top: -2rem;
	position: absolute;
	filter: opacity(0.15);
	z-index: 0;
}
.blogroll {
	h2:first-of-type {
		padding-top: 0;
	}
}
body {
	font-size: var(--step-0);
	margin-inline: auto;
	max-width: var(--grid-max-width);
	padding-inline: var(--grid-gutter);
	padding-top: var(--space-m);
	padding-bottom: var(--space-m);
}
button {
	height: var(--space-m-l);
}
.buttonContainer {
	display: flex;
	flex-flow: row wrap;
	column-gap: var(--space-xs);
	margin-bottom: var(--space-m);
	button {
		margin-top: var(--space-s);
	}
	&.galleryButtons {
		margin-top: calc(var(--space-l) * -1);
	}
}
button,
.nav-item {
	font-family: var(--font-family-ui);
}
code {
	background-color: var(--color-gray-20);
	border-radius: 0.3em;
	font-size: var(--step--1);
	padding: 0 var(--space-3xs);
}
@media (prefers-color-scheme: dark) {
	code {
		background-color: var(--card-color);
	}
}
.links-nextprev > .postlist-item-container {
	grid-column: var(--span-grid);
}
header,
footer,
main {
	display: grid;
	gap: var(--grid-gutter);
	grid-template-columns: repeat(var(--grid-columns), 1fr);
}
.indexFeature:not(:last-child) {
	padding-bottom: var(--space-l);
}
nav {
	grid-column: 2 / span 12;
}
.now {
	display: grid;
	grid-column: var(--span-grid);
}
ol {
	padding-left: 0;
}
section {
	grid-column: var(--span-grid);
	p {
		grid-column: var(--span-grid);
	}
	/* Add fleuron to last <p> in section */
	> p:not(blockquote > p):last-child:after {
		content: "\2766";
		display: inline;
		font-size: var(--step-1);
	}
}
::selection {
	background: var(--contrast-color);
	color: var(--background-color);
}
.page-block {
	grid-column: var(--span-grid);
	margin: 0;
}
ul {
	margin: 0;
	grid-column: var(--span-grid);
}

a {
	text-decoration-color: var(--contrast-color);
	text-decoration-thickness: var(--link-decoration-thickness);
	transition: var(--transition-normal);
}
/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
footer {
	padding: var(--space-xl) 0 var(--space-m) 0;
	& p {
		font-size: var(--step-0);
		grid-column: var(--span-grid);
		margin-bottom: 0;
	}
	& .webring {
		display: inline;
		padding-right: var(--space-xs);
	}
}

h1,
h2,
h3 {
	color: var(--text-color);
	grid-column: var(--span-grid);
	margin: 0;
	width: 100%;
}
h1 {
	font-family: var(--font-family-headline);
	font-variation-settings:
		"opsz" 100,
		"wght" 500,
		"SOFT" 10,
		"WONK" 1;
	font-size: var(--step-4);
	font-style: normal;
	line-height: calc(var(--step-4) * 0.25 + var(--step-4));
	padding-bottom: var(--space-l);
	text-wrap: balance;
}
h2 {
	font-size: var(--step-2);
	font-variation-settings:
		"opsz" 50,
		"wght" 350,
		"SOFT" 20,
		"WONK" 1;
	line-height: calc(var(--step-2) * 0.25 + var(--step-2));
	padding-bottom: var(--space-s);
	padding-top: var(--space-s);
	text-wrap: pretty;
}
h3 {
	font-size: var(--step-1);
	line-height: calc(var(--step-1) * 0.25 + var(--step-1));
	text-wrap: pretty;
}
.logo {
	filter: var(--logo-filter);
}
main {
	display: grid;
	grid-column: 1 / 12;
	padding-top: var(--space-3xl);
}
main > p > img,
main > p > a > img {
	width: 100%;
	padding-top: var(--space-l);
}
pre {
	grid-column: var(--span-grid);
}
p:not(.quizQuestion) {
	margin-block: 0 1lh;
}
p,
li {
	font-size: var(--step-0);
	line-height: calc(var(--step-0) * 0.5 + var(--step-0));
	text-wrap: pretty;
}

th {
	font-variation-settings:
		"opsz" 25,
		"wght" 500,
		"SOFT" 40,
		"WONK" 0;
	padding-bottom: var(--space-2xs);
	text-align: left;
}
figure {
	margin: 0;
	margin-block: 1lh 1lh;
	width: 100%;
}
figure > a > img,
figure > div > iframe {
	border-radius: 1em;
	border-top-left-radius: 0;
	padding: 0;
	width: 100%;
	/* box-shadow: var(--space-2xs) var(--space-2xs) 0 0 var(--contrast-color); */
}

html.barebones,
body.barebones {
	background-color: var(--background-color);
	text-align: center;
}

figcaption {
	font-size: var(--step--1);
	font-style: italic;
	padding-top: var(--space-3xs);
	text-align: center;
	strong {
		font-variation-settings: "wght" 600;
	}
}
button {
	background-color: var(--contrast-color);
	border: none;
	border-radius: var(--border-radius);
	color: var(--background-color);
	font-size: var(--step--2);
	font-variation-settings: var(--font-variation-ui);
	letter-spacing: var(--ui-letter-spacing);
	margin: var(--space-xs) 0 0 0;
	padding: 0 var(--space-xs);
	text-transform: uppercase;
	transition: var(--transition-normal);
	white-space: nowrap;
}
button > img {
	max-width: 1em;
	margin-right: 0.5em;
	margin-bottom: -0.1rem;
	filter: var(--icon-filter);
}
a {
	&:has(button) {
		text-decoration: none;
	}
	&:has(button.full-width) {
		display: inline-grid;
		grid-column: var(--span-grid);
	}
}
button:hover {
	background-color: var(--color-gray-90);
	cursor: pointer;
}
a[href]:not(.icon-button) {
	color: var(--text-color-link);
}
a[href]:visited {
	color: var(--text-color-link);
}
a[href]:hover:not(.icon-button),
a[href]:active:not(.icon-button) {
	color: var(--contrast-color);
}
.links-nextprev {
	padding: 0 0 var(--space-m) 0;
	margin-top: var(--space-m);
}

table {
	margin: 1em 0;
}
table td,
table th {
	padding-right: 1em;
}

/* Audio Player */
wc-mplayer {
	width: 100%;
}

wc-mplayer::part(artist) {
	font-size: var(--meta-font-size);
}

wc-mplayer::part(cover),
wc-mplayer::part(coverContainer) {
	width: var(--space-3xl);
	height: var(--space-3xl);
	border-radius: var(--border-radius);
}

wc-mplayer::part(captionAndPlayer) {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	width: 100%;
}

wc-mplayer::part(main) {
	border-radius: var(--border-radius);
	display: flex;
	gap: var(--space-s);
	margin: 0;
	padding: var(--space-m);
}

wc-mplayer::part(player) {
	align-self: flex-end;
	border-radius: var(--border-radius);
	width: 100%;
}

wc-mplayer::part(title) {
	font-size: var(--step-1);
	font-variation-settings:
		"opsz" 50,
		"wght" 350,
		"SOFT" 20,
		"WONK" 1;
}

/* Comments */
#comments {
	grid-column: var(--span-grid);
}
.continue-discussion {
	grid-column: var(--span-grid);
}
.continue-discussion button {
	margin-top: var(--space-xs);
}
wc-comment::part(author-link),
wc-toot::part(author-link) {
	font-size: var(--step-0);
	text-decoration: none;
}
wc-comment::part(main) {
	padding: var(--space-m);
}
wc-comment::part(publish-date),
wc-toot::part(publish-date) {
	font-family: var(--meta-font-family);
	font-size: var(--meta-font-size);
	font-style: var(--meta-font-style);
	font-variation-settings: var(--font-variation-settings);
}
wc-toot::part(main) {
	color: white;
	font-family: var(--meta-font-family);
	font-size: var(--step--1);
}
wc-toot::part(author),
wc-toot::part(author-link) {
	color: white;
	font-style: var(--meta-font-style);
	font-variation-settings: "wght" 600;
}
/* Code Fences */
pre,
code {
	font-family: var(--font-family-monospace);
}
pre:not([class*="language-"]) {
	margin: 0.5em 0;
	-moz-tab-size: var(--syntax-tab-size);
	-o-tab-size: var(--syntax-tab-size);
	tab-size: var(--syntax-tab-size);
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
}

/* Footnotes */
.footnotes-list {
	font-style: italic;
	margin-block: 1lh;
	> li,
	> li > p {
		font-size: var(--step--1);
		line-height: calc(var(--step--1) * 0.25 + var(--step--1));
	}
}
.footnote-item::marker {
	font-style: normal;
}
.footnote-ref {
	> a {
		font-size: var(--step--2);
		text-decoration: none;
	}
	:before {
		content: " ";
	}
}
hr {
	border: var(--border-hr);
	width: 100%;
}

/* Dropcap */
main > section > article > p:not(.nodropcap):first-of-type:first-letter {
	float: left;
	font-size: var(--step-5);
	padding: var(--space-2xs);
	color: var(--contrast-color);
	border: solid 2px var(--contrast-color);
	font-family: var(--font-family-headline);
	font-variation-settings:
		"opsz" 144,
		"wght" 500,
		"SOFT" 10,
		"WONK" 0;
	margin: 0.5rem 0.7rem 0 0;
	border-radius: 0.2em;
	border-top-left-radius: 0;
}

/* Header */
header .home-link {
	display: grid;
	grid-column: 1 / 1;
}
.logo {
	aspect-ratio: 1 / 1;
	width: var(--space-l-xl);
}

/* Microblog */
.microblog-comment {
	p {
		font-style: italic;
		margin: 0;
		padding: var(--space-s) 0 0 0;
	}
}

.microblog-icon {
	filter: var(--logo-filter);
	height: var(--space-4xl);
	padding-right: var(--space-s);
	width: var(--space-2xl);
}
.microblog-list {
	.post-metadata {
		padding: 0;
	}
}
.microblog-post {
	display: flex;
	.microblog-comment {
		p {
			padding-top: 0;
			padding-bottom: var(--space-2xs);
		}
	}
}

/* Info Box */

.info {
	border: var(--border-details);
	border-radius: var(--border-radius);
	margin-block: 0 1lh;
	padding: var(--space-s);
	font-style: italic;
	p {
		margin-bottom: 0;
	}
}

/* Nav */
.nav {
	padding: 0;
	margin: 0;
	list-style: none;
}
nav ul {
	align-items: end;
	display: flex;
	justify-content: flex-end;
	gap: var(--space-xs-s);
	flex-flow: row wrap;
}
.nav-icon {
	fill: var(--color-gray-90);
	height: var(--space-2xs);
	margin-right: 0.25rem;
	transition: var(--transition-normal);
	width: var(--space-2xs);
}
.nav-item {
	align-items: baseline;
	border-top: var(--border-nav);
	display: flex;
	font-size: var(--step--2);
	font-variation-settings: var(--font-variation-ui);
	height: var(--space-l-xl);
	margin-bottom: 0;
	padding-top: var(--space-m);
	text-transform: uppercase;
	transition: var(--transition-normal);
	letter-spacing: var(--ui-letter-spacing);
}
.nav-item a {
	color: var(--text-color);
	margin-top: calc(var(--space-xs-s) * -1); /* Compensate for padding */
	padding-top: var(--space-xs-s); /* Give <a> a larger click area */
}
.nav-item:hover {
	border-top: var(--border-nav-hover); /* Increase border thickness */
}
.nav-item:hover a {
	margin-top: calc(
		var(--space-xs-s) * -2
	); /* Compensate for border thickness */
}
.nav-item a[href]:visited {
	color: var(--text-color);
}
.nav-item:hover a[href] {
	color: var(--text-color);
	text-decoration: none;
}
.nav-item a[href]:not(:hover) {
	text-decoration: none;
}
.nav-item[data-currentpage="true"] {
	border-top: var(--border-nav-currentpage);
}
.nav-item[data-currentpage="true"] a,
.nav-item[data-currentpage="true"] a[href]:visited,
.nav-item[data-currentpage="true"]:hover a {
	color: var(--contrast-color);
	margin-top: calc(
		var(--space-xs-s) * -2
	); /* Compensate for border thickness */
}

/* Navigator */
.navigator {
	display: grid;
	gap: var(--space-2xs) var(--space-2xs);
	grid-template-columns: repeat(auto-fill, minmax(var(--space-6xl), 1fr));
	width: 100%;
	.navigatorItem {
		background-color: var(--background-color);
		border: 1.5px solid var(--color-gray-20);
		border-radius: var(--border-radius);
		color: var(--text-color);
		display: flex;
		flex-flow: column wrap;
		height: var(--space-3xl);
		text-align: center;
		a {
			height: 100%;
			padding: var(--space-s) var(--space-xs);
			text-decoration: none;
			width: 100%;
			img {
				aspect-ratio: 1 / 1;
				filter: var(--logo-filter);
				width: var(--space-m);
			}
		}
		&:hover {
			background-color: var(--text-color);
			border: 1.25px solid var(--text-color);
			transition: var(--transition-normal);
			a {
				color: var(--background-color);
				transition: var(--transition-normal);
				img {
					filter: none;
					transition: var(--transition-normal);
				}
				@media (prefers-color-scheme: dark) {
					img {
						filter: brightness(0) saturate(100%) invert(16%) sepia(0%)
							saturate(1024%) hue-rotate(177deg) brightness(99%) contrast(88%);
					}
				}
			}
		}
	}
}

/* Posts list */
.postlist,
.links-nextprev {
	container: postlist / inline-size;
}
.postlist-item {
	align-items: flex-start;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	width: 100%;
}
.postlist-item-container {
	display: flex;
	flex-flow: column nowrap;
	gap: var(--space-s);
}
.post-image {
	width: var(--space-4xl);
	height: var(--space-4xl);
	object-fit: cover;
	object-position: 50% 50%;
}
.post-image-container {
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	height: var(--space-4xl);
	max-height: var(--space-4xl);
	overflow: hidden;
	width: var(--space-4xl);
}

.postlist-date,
.postlist-item:before {
	color: var(--color-gray-90);
	font-size: var(--meta-font-size);
	/*margin: var(--space-2xs) 0;*/
}
.postlist-date {
	word-spacing: -0.5px;
}
.postlist-link {
	font-size: var(--step-5);
	padding-right: 0.5em;
	text-decoration: none;
}

.postlist-link p {
	background-color: var(--color-gray-90);
	border-radius: 100px;
	color: var(--background-color);
	font-family: var(--font-family-ui);
	font-size: var(--step--2);
	font-variation-settings: var(--font-variation-ui);
	letter-spacing: var(--ui-letter-spacing);
	margin-top: calc(var(--space-3xs) * -1);
	padding-left: var(--space-xs);
	padding-right: var(--space-xs);
	text-transform: uppercase;
	width: max-content;
}
.post-copy {
	display: flex;
	flex-flow: column wrap;
}

sup {
	line-height: 0;
}

/* Tags */
a.post-tag {
	background-color: var(--color-gray-20);
	border-radius: 1rem;
	color: var(--text-color);
	font-family: var(--meta-font-family);
	font-variation-settings: "wght" 300;
	margin-top: var(--space-3xs);
	margin-right: var(--space-3xs);
	padding: 0 var(--space-3xs);
	text-decoration: none;
}
a.post-tag:before {
	content: "#";
}
a.post-tag:visited {
	color: var(--text-color);
}
a.post-tag:hover {
	color: var(--text-color);
}
.tag-feed-icon {
	fill: var(--rss-orange);
	height: var(--space-m);
	transition: var(--transition-normal);
	width: var(--space-m);
	&.small {
		height: var(--space-s);
		width: var(--space-s);
	}
}
.taglist {
	display: flex;
	flex-flow: row wrap;
	list-style-type: none;
	padding-left: 0;
}
.taglist li a {
	display: inline-block;
	font-size: var(--step--1);
	margin: 0 var(--space-2xs) var(--space-2xs) 0;
}

.postlist-item > .post-tag {
	align-self: center;
}

/* Post Metadata */
.post-metadata {
	display: flex;
	flex-flow: row nowrap;
	padding: 0 0 var(--space-l) 0;
}

.post-metadata-copy {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
}

.post-metadata p,
.post-metadata ul,
.post-metadata ul li,
time,
.metadata {
	display: flex;
	flex-flow: row wrap;
	font-family: var(--meta-font-family);
	font-size: var(--meta-font-size);
	font-style: var(--meta-font-style);
	font-variation-settings: var(--meta-font-variation-settings);
	line-height: calc(var(--meta-font-size) * 0.5 + var(--meta-font-size));
	list-style: none;
	margin: 0;
	padding-left: 0em;
}

.post-metadata {
	padding-left: 0.15rem;
}

@container postlist (max-width: 500px) {
	.postlist-item {
		flex-flow: column wrap;
	}
	.post-image-container {
		margin-left: 0;
		min-height: var(--space-10xl);
		width: 100%;
	}
	.post-image-container img.post-image {
		width: 100cqw;
		height: var(--space-10xl);
	}
	.postlist-link {
		padding: 0;
	}
	.postlist-link h3 {
		padding-top: var(--space-m);
	}
	.postlist-link p {
		margin-top: var(--space-xs);
	}
	.post-metadata {
		padding-bottom: 0;
	}
}

.profilePic:not(.links-container > img.profilePic) {
	border-radius: 100%;
	height: var(--space-xl);
	margin-right: var(--space-s);
	width: var(--space-xl);
}

/* Direct Links / Markdown Headers */
a.header-anchor {
	font-style: normal;
	margin-left: 0.1em;
	text-decoration: none;
}
a[href].header-anchor,
a[href].header-anchor:visited {
	color: transparent;
}
a[href].header-anchor:focus,
a[href].header-anchor:hover {
	text-decoration: underline;
}
a[href].header-anchor:focus,
:hover > a[href].header-anchor {
	color: #aaa;
}
h2 + .header-anchor {
	font-size: var(--step-2);
}

/* Components */
article.post {
	grid-column: var(--span-grid);
	container: article / inline-size;
	/* Add fleuron after last <p> in article */
	> p:not(blockquote > p):last-child:after {
		content: "\2766";
		display: inline;
		font-size: var(--step-1);
	}
}
.blogroll {
	display: inline;
}
.blogroll-category-group {
	margin-bottom: var(--space-l);
	margin-left: var(--space-m);
	h3 {
		display: inline;
	}
	p {
		margin: var(--space-2xs) auto;
	}
}
#buttonsAndStuffContainer {
	display: flex;
	grid-column: var(--span-grid);
	width: 100%;
	& a,
	img,
	div {
		display: inline-block;
		height: var(--space-m-l);
		margin-right: var(--space-3xs);
	}
}
.gallery-images {
	display: flex;
	flex-flow: row wrap;
	row-gap: var(--space-xs-s);
	column-gap: var(--space-m-l);
	.gallery-image-container {
		width: var(--space-7xl-8xl);
		height: var(--space-7xl-8xl);
		.gallery-image {
			border-radius: var(--border-radius);
			width: var(--space-7xl-8xl);
			height: var(--space-7xl-8xl);
			object-fit: cover;
		}
	}
}

/* Guestbook */
.guestbook-message blockquote {
	margin-bottom: var(--space-m);
	margin-top: var(--space-3xs);
}
.guestbook-message p {
	margin-block: 0 0;
	position: relative;
	z-index: 1;
}
.guestbook-message p b,
.guestbook-message p small {
	font-family: var(--meta-font-family);
	font-size: var(--meta-font-size);
	font-variation-settings: var(--meta-font-variation-settings);
}
#guestbooks___challenge-answer-container br,
.guestbooks___input-container br {
	display: none;
}

/* Add fleuron after <p> in article when footnotes are present */
p:has(+ hr.footnotes-sep):after {
	content: "\2766";
	display: inline;
	font-size: var(--step-1);
}

/* Quiz */
.answerBox {
	margin-bottom: var(--space-3xs);
}
.answersBox > input {
	display: block;
}
details {
	background-color: var(--card-color);
	border: var(--border-details);
	border-radius: var(--border-radius);
	color: var(--text-color);
	margin-top: var(--space-s);
	padding: var(--space-xs);
	width: 100%;
	font-size: var(--step--2);
	font-variation-settings: var(--font-variation-ui);
	text-transform: uppercase;
	letter-spacing: var(--ui-letter-spacing);
	font-family: var(--font-family-ui);

	::marker {
		content: "+ ";
	}
	&[open] p {
		font-size: var(--step--2);
		line-height: calc(var(--step--2) * 0.25 + var(--step--2));
	}
	&[open] summary::marker {
		content: "- ";
	}
	&[open] summary {
		border-bottom: var(--border-details);
		margin-bottom: var(--space-xs);
		padding-bottom: var(--space-xs);
	}
	summary {
		font-size: var(--step--2);
		font-variation-settings: var(--font-variation-ui);
		text-transform: uppercase;
		letter-spacing: var(--ui-letter-spacing);
		font-family: var(--font-family-ui);
	}
}
dialog {
	background-color: var(--card-color);
	border: none;
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	width: var(--grid-max-width);
	h2 {
		padding-top: 0;
	}
	p {
		color: var(--text-color);
	}
	&::backdrop {
		background-color: var(--contrast-color);
		opacity: 0.5;
	}
	img {
		max-width: 100%;
		padding-top: var(--space-s);
	}
}
.questionBox {
	margin: var(--space-s) 0;
	figure {
		padding-top: 0;
		padding-bottom: 0;
	}
}
.quizQuestion {
	font-size: var(--step-2);
	font-variation-settings:
		"opsz" 50,
		"wght" 350,
		"SOFT" 20,
		"WONK" 1;
	line-height: calc(var(--step-2) * 0.25 + var(--step-2));
}
/* Utilities */
.grid-container {
	max-width: var(--grid-max-width);
	padding-inline: var(--grid-gutter);
	margin-inline: auto;
}
.grid {
	display: grid;
	gap: var(--grid-gutter);
	grid-template-columns: repeat(var(--grid-columns), 1fr);
}
.hidden {
	display: none;
}
