@font-face {
	font-family: Nasin Nanpa;
	font-style: normal;
	font-weight: 400;
	font-stretch: 100%;
	src:
		local(nasin-nanpa),
		url(/static/fonts/nasin-nanpa.woff2) format("woff2");
}
:root {
	--bg-mask-plain: url(static/bg-plain.svg);
	--bg-mask-dash-rule: url(static/bg-dash-rule.svg);
	--bg-mask-dash-grid: url(static/bg-dash-grid.svg);
	--colour-text: var(--lightningcss-light, #2f564a)
		var(--lightningcss-dark, #b8b3a8);
	--colour-background: var(--lightningcss-light, #fbfcf8)
		var(--lightningcss-dark, #1d1b16);
	--colour-grid: var(--lightningcss-light, #d1e0dc)
		var(--lightningcss-dark, #322f29);
	--colour-accent-1: var(--lightningcss-light, #529881)
		var(--lightningcss-dark, #479a69);
	--colour-accent-2: var(--lightningcss-light, #d6be5c)
		var(--lightningcss-dark, #d9c726);
	--colour-accent-3: var(--lightningcss-light, #797986)
		var(--lightningcss-dark, #847862);
	--colour-highlight-1: var(--lightningcss-light, #47857080)
		var(--lightningcss-dark, #5eb58280);
	--colour-highlight-1-soft: var(--lightningcss-light, #4785704d)
		var(--lightningcss-dark, #479a6933);
	--colour-highlight-2: var(--lightningcss-light, #eed76399)
		var(--lightningcss-dark, #f0e375b3);
	--colour-highlight-2-soft: var(--lightningcss-light, #eed76366)
		var(--lightningcss-dark, #f5eda31a);
	--colour-highlight-3: var(--lightningcss-light, #a0a0b14d)
		var(--lightningcss-dark, #7e77674d);
	--colour-border-1: var(--lightningcss-light, #2f564a)
		var(--lightningcss-dark, #6d7875);
	--colour-border-2: var(--lightningcss-light, #79798699)
		var(--lightningcss-dark, #7b746580);
	--colour-border-3: var(--lightningcss-light, #529881cc)
		var(--lightningcss-dark, #2b503ab3);
	--colour-tape-1: var(--lightningcss-light, #59a68c)
		var(--lightningcss-dark, #377751);
	--colour-tape-2: var(--lightningcss-light, #f5e7a3)
		var(--lightningcss-dark, #998b33);
	--colour-tape-3: var(--lightningcss-light, #fbfcf8e6)
		var(--lightningcss-dark, #e7e6e480);
	--step-0: 0.95rem;
	--step-1: 1.05rem;
	--step-2: 1.1rem;
	--step-3: 1.3rem;
	--step-4: 1.5rem;
	--step-5: 1.6rem;
	--fonts-serif: "Fraunces", ui-serif, serif;
	--fonts-sans-serif:
		"Atkinson Hyperlegible", ui-sans-serif, "Noto Sans", "Verdana", sans-serif;
	--fonts-monospace:
		"Iosevka Fixed Extended", "IBM Plex", ui-monospace, Consolas, monospace;
	--border-width: 3px;
	--baseline-offset: 4px;
	--border-baseline-offset: -3px;
	--negative-baseline-offset: calc(-1 * var(--baseline-offset));
	--bg-mask: var(--bg-mask-dash-grid);
	--lightningcss-light: initial;
	--lightningcss-dark: ;
	--lightningcss-light: initial;
	--lightningcss-dark: ;
	color-scheme: light dark;
	font-variation-settings: "opsz" 100;
}
@media (prefers-color-scheme: dark) {
	:root {
		--lightningcss-light: ;
		--lightningcss-dark: initial;
	}
}
html[data-theme="auto"] {
	--lightningcss-light: initial;
	--lightningcss-dark: ;
	color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
	html[data-theme="auto"] {
		--lightningcss-light: ;
		--lightningcss-dark: initial;
	}
}
html[data-theme="light"] {
	--lightningcss-light: initial;
	--lightningcss-dark: ;
	color-scheme: light;
}
html[data-theme="dark"] {
	--lightningcss-light: ;
	--lightningcss-dark: initial;
	color-scheme: dark;
}
html[data-bg="plain"] {
	--bg-mask: var(--bg-mask-plain);
}
html[data-bg="dash-rule"] {
	--bg-mask: var(--bg-mask-dash-rule);
}
html[data-bg="dash-grid"] {
	--bg-mask: var(--bg-mask-dash-grid);
}
html,
body {
	background: var(--colour-background);
	color: var(--colour-text);
	font-size: var(--step-1);
	tab-size: 4;
	width: 100dvw;
	min-height: 100lvh;
	font-family: var(--fonts-sans-serif);
	scrollbar-gutter: stable;
	margin: 0;
	padding: 0;
}
h6,
h5 {
	font-size: var(--step-2);
}
h4,
h3 {
	font-size: var(--step-3);
}
h2 {
	font-size: var(--step-4);
}
h1 {
	font-size: var(--step-5);
}
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--fonts-serif);
	margin-top: 1lh;
}
a {
	color: var(--colour-text);
	text-underline-offset: 2px;
	-webkit-text-decoration-color: var(--colour-highlight-1);
	text-decoration-color: var(--colour-highlight-1);
	-webkit-text-decoration-skip-ink: none;
	text-decoration-skip-ink: none;
	text-decoration-thickness: 2px;
	transition: all 0.2s ease-in-out;
}
a:visited {
	color: var(--colour-text);
}
a:hover {
	background: var(--colour-highlight-3);
}
a:focus {
	background: var(--colour-highlight-3);
}
a:active {
	background: var(--colour-highlight-3);
}
a a:after {
	content: none !important;
}
a[href*="//"]:not([href*=ant\.computer]):after
{
	content: "";
	box-sizing: border-box;
	width: 8px;
	height: 8px;
	box-shadow: inset 0 0 0 2px var(--colour-accent-1);
	border-radius: 50%;
	margin-left: 0.3ex;
	display: inline-block;
	transform: translateY(-0.9ex);
}
a[href*="//"]:not([href*=ant\.computer]):hover:after
{
	background: var(--colour-accent-1);
}
a[href*="//"]:not([href*=ant\.computer]):focus:after
{
	background: var(--colour-accent-1);
}
a[href*="//"]:not([href*=ant\.computer]):active:after
{
	background: var(--colour-accent-1);
}
strong,
em {
	color: var(--colour-accent-1);
	font-family: var(--fonts-serif);
	font-size: var(--step-3);
	line-height: 1;
}
em {
	font-weight: 500;
}
strong {
	font-weight: 700;
}
small {
	font-size: var(--step-0);
	color: var(--colour-accent-3);
}
hr {
	background:
		radial-gradient(
			circle at left 90px top -3px,
			transparent,
			transparent 5px,
			var(--colour-tape-3) 6px,
			var(--colour-tape-3) 10px,
			transparent 11px,
			transparent 15px,
			var(--colour-tape-3) 16px,
			var(--colour-tape-3) 20px,
			transparent 21px,
			transparent 25px,
			var(--colour-tape-3) 26px,
			var(--colour-tape-3) 30px,
			transparent 31px
		),
		radial-gradient(
			circle at left 30px bottom -3px,
			transparent,
			transparent 5px,
			var(--colour-tape-3) 6px,
			var(--colour-tape-3) 10px,
			transparent 11px,
			transparent 15px,
			var(--colour-tape-3) 16px,
			var(--colour-tape-3) 20px,
			transparent 21px,
			transparent 25px,
			var(--colour-tape-3) 26px,
			var(--colour-tape-3) 30px,
			transparent 31px
		),
		linear-gradient(45deg, var(--colour-tape-2), var(--colour-tape-1));
	opacity: 0.95;
	height: 2em;
	box-shadow: 1px 1px 1px 1px var(--colour-grid);
	background-position: 50%;
	background-repeat: repeat-x, repeat-x, no-repeat;
	background-size:
		120px 100%,
		120px 100%,
		auto;
	border: none;
	margin: 2em 0;
}
img[alt=""],
img:not([alt]),
a[href=""] {
	border: 3px dashed red;
}
img.pixel {
	image-rendering: pixelated;
}
p:has(> img:first-child:last-child) {
	border: 3px dashed #00f;
}
ul,
ol {
	flex-direction: column;
	display: flex;
}
:is(ul, ol) li::marker {
	color: var(--colour-accent-1);
}
:is(ul, ol) li p {
	margin: 0;
}
:is(ul, ol) li:has(i.li-icon) {
	list-style-type: none;
	position: relative;
}
:is(ul, ol) li:has(i.li-icon) i.li-icon {
	font-style: normal;
	position: absolute;
	left: -1.5em;
}
pre,
code {
	font-size: 0.95em;
	font-family: var(--fonts-monospace);
	border-radius: 3px;
}
pre {
	background: var(--colour-background);
}
code {
	background: var(--colour-highlight-2-soft);
	padding-left: 0.2em;
	padding-right: 0.2em;
}
pre code {
	background: 0 0;
	padding: 0;
}
blockquote {
	border-left: 5px solid var(--colour-border-3);
	background: color-mix(
		in hsl,
		transparent 66%,
		var(--colour-highlight-1-soft)
	);
	margin-left: 1em;
	padding-left: 0.5em;
}
blockquote blockquote {
	margin-left: 0.25em;
}
.date {
	color: var(--colour-accent-3);
	font-size: var(--step-0);
	font-variant-numeric: tabular-nums;
}
.draft-notice {
	background: var(--colour-highlight-2-soft);
	border-radius: 3px;
	gap: 0.5em;
	padding: 0.5em;
	display: flex;
}
.draft-notice .fa-icon {
	margin: 0 0.3em;
}
.pagination-links,
.posts-nav-links {
	transform: translateY(calc(var(--negative-baseline-offset) - 1px));
	justify-content: space-between;
	gap: 0.5lh;
	display: flex;
}
:is(.pagination-links, .posts-nav-links) a {
	background: var(--colour-highlight-1-soft);
	align-items: center;
	gap: 1ex;
	width: -webkit-fit-content;
	width: fit-content;
	padding: 0 0.5em;
	text-decoration: none;
	display: flex;
}
:is(.pagination-links, .posts-nav-links) a:hover {
	background: var(--colour-highlight-3);
}
:is(.pagination-links, .posts-nav-links) a:focus {
	background: var(--colour-highlight-3);
}
:is(.pagination-links, .posts-nav-links) a:active {
	background: var(--colour-highlight-3);
}
:is(.pagination-links, .posts-nav-links) .older {
	justify-self: start;
}
:is(.pagination-links, .posts-nav-links) .older:before {
	content: "‹";
}
:is(.pagination-links, .posts-nav-links) .prev {
	justify-self: start;
}
:is(.pagination-links, .posts-nav-links) .prev:before {
	content: "‹";
}
:is(.pagination-links, .posts-nav-links) .page-number {
	font-variant-numeric: tabular-nums;
	grid-column: 2;
	justify-self: center;
	font-weight: 700;
}
:is(.pagination-links, .posts-nav-links) .newer {
	text-align: right;
	place-self: end;
}
:is(.pagination-links, .posts-nav-links) .newer:after {
	content: "›";
}
:is(.pagination-links, .posts-nav-links) .next {
	text-align: right;
	place-self: end;
}
:is(.pagination-links, .posts-nav-links) .next:after {
	content: "›";
}
.posts-nav-links {
	flex-direction: column;
	gap: 1lh;
}
@media (min-width: 30rem) {
	.pagination-links,
	.posts-nav-links {
		grid-template-columns: 1fr max-content 1fr;
		gap: 0.5lh;
		display: grid;
		transform: translateY(-1px);
	}
	:is(.pagination-links, .posts-nav-links) .older {
		grid-column: 1;
	}
	:is(.pagination-links, .posts-nav-links) .prev {
		grid-column: 1;
	}
	:is(.pagination-links, .posts-nav-links) .newer {
		grid-column: 3;
	}
	:is(.pagination-links, .posts-nav-links) .next {
		grid-column: 3;
	}
}
.footnote-item {
	font-size: var(--step-0);
}
.footnote-ref a,
.footnote-backref {
	color: var(--colour-accent-1);
	padding-left: 0.1em;
	padding-right: 0.1em;
	font-weight: 800;
	text-decoration: none;
}
:is(.footnote-ref a, .footnote-backref):hover {
	color: var(--colour-accent-1);
}
:is(.footnote-ref a, .footnote-backref):focus {
	color: var(--colour-accent-1);
}
:is(.footnote-ref a, .footnote-backref):active {
	color: var(--colour-accent-1);
}
:is(.footnote-ref a, .footnote-backref):visited {
	color: var(--colour-accent-1);
}
.footnote-ref a {
	font-family: var(--fonts-serif);
	letter-spacing: 1px;
}
.footnote-ref a:target {
	background-color: var(--colour-highlight-2);
}
.tags {
	font-size: var(--step-0);
	color: var(--colour-accent-3);
	flex-flow: wrap;
	column-gap: 0.5lh;
	padding-left: 0;
	list-style-type: none;
	display: flex;
}
.tags li {
	display: inline-block;
}
.tags li:before {
	content: "# ";
	margin-right: -0.4ex;
}
p.bigem {
	text-align: center;
	font-style: italic;
	font-weight: 700;
	font-size: var(--step-4);
	font-family: var(--fonts-serif);
	transform: translateY(var(--negative-baseline-offset));
}
.buttons-88-31 {
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0 0.3lh;
	display: flex;
}
.buttons-88-31 a:after {
	display: none !important;
}
.buttons-88-31 img,
.button-88-31 img,
img.button-88-31 {
	image-rendering: pixelated;
	vertical-align: middle;
	object-fit: contain;
	width: 176px;
	height: 62px;
}
.fa-icon {
	content: "";
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	flex-shrink: 0;
	padding-left: 1em;
	display: inline;
	-webkit-mask-position: 50%;
	mask-position: 50%;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.fa-circle-info {
	-webkit-mask-image: url(static/fa/circle-info.svg);
	mask-image: url(static/fa/circle-info.svg);
}
.fa-home {
	-webkit-mask-image: url(static/fa/house-chimney-solid.svg);
	mask-image: url(static/fa/house-chimney-solid.svg);
}
.fa-post {
	-webkit-mask-image: url(static/fa/leaf-solid.svg);
	mask-image: url(static/fa/leaf-solid.svg);
}
.fa-draft {
	-webkit-mask-image: url(static/fa/battery-half-solid.svg);
	mask-image: url(static/fa/battery-half-solid.svg);
}
.fa-bookmark {
	-webkit-mask-image: url(static/fa/bookmark-solid.svg);
	mask-image: url(static/fa/bookmark-solid.svg);
}
.fa-pin {
	transform: rotate(30deg);
	-webkit-mask-image: url(static/fa/thumbtack-solid.svg);
	mask-image: url(static/fa/thumbtack-solid.svg);
}
.fa-note {
	-webkit-mask-image: url(static/fa/note-sticky-solid.svg);
	mask-image: url(static/fa/note-sticky-solid.svg);
}
.fa-rss {
	-webkit-mask-image: url(static/fa/square-rss-solid.svg);
	mask-image: url(static/fa/square-rss-solid.svg);
}
.fa-circle-chevron {
	-webkit-mask-image: url(static/fa/circle-chevron-right-solid.svg);
	mask-image: url(static/fa/circle-chevron-right-solid.svg);
}
.fa-star {
	-webkit-mask-image: url(static/fa/star-solid.svg);
	mask-image: url(static/fa/star-solid.svg);
}
.fa-palette {
	-webkit-mask-image: url(static/fa/palette-solid.svg);
	mask-image: url(static/fa/palette-solid.svg);
}
#w {
	flex-direction: column;
	gap: 1lh;
	display: flex;
}
nav {
	align-self: center;
}
nav ul {
	flex-flow: wrap;
	justify-content: center;
	align-items: center;
	gap: 1em;
	margin: 0;
	padding: 0;
	display: flex;
}
nav ul li {
	list-style-type: none;
}
nav ul li a {
	border-radius: 3px;
	flex-direction: column;
	gap: 0;
	padding: 0.2em;
	font-weight: 700;
	display: flex;
}
nav ul li .fa-icon {
	margin: 0 0.3em;
	padding-bottom: 0.8em;
	font-size: 1.3em;
}
nav ul li .fa-icon.fa-home {
	padding-left: 0.75em;
}
nav ul li .fa-icon.fa-post {
	padding-left: 0.75em;
}
nav ul li .fa-icon.fa-pin {
	padding-left: 0.625em;
}
nav ul li .fa-icon.fa-bookmark {
	padding-left: 0.55em;
}
body {
	--line-height: 28px;
	line-height: var(--line-height);
	z-index: 2;
	justify-content: center;
	display: flex;
	position: relative;
}
body:before {
	content: "";
	z-index: -1;
	background-color: var(--colour-grid);
	-webkit-mask-image: var(--bg-mask);
	mask-image: var(--bg-mask);
	-webkit-mask-size: var(--line-height);
	mask-size: var(--line-height);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	-webkit-mask-position: 50% 14px;
	mask-position: 50% 14px;
}
body * {
	box-sizing: border-box;
}
#w {
	max-width: calc(round(50rem, 2 * var(--line-height)) - var(--line-height));
	width: calc(round(100%, 2 * var(--line-height)) - var(--line-height));
	flex-basis: auto;
	margin: 0;
	padding: 15px 0;
}
nav {
	align-self: start;
}
nav ul {
	gap: 0 1lh;
}
nav ul li {
	width: 2lh;
	max-width: 2lh;
	height: 2lh;
}
nav ul li a {
	align-items: center;
	margin-top: 0.2lh;
}
nav ul li a .fa-icon {
	color: var(--colour-accent-1);
	opacity: 0.9;
	transition: color 0.2s ease-in-out;
	display: inline;
}
nav ul li a.current i {
	color: var(--colour-accent-2);
}
nav ul li a {
	text-decoration: none;
	position: relative;
}
nav ul li a:before {
	content: "";
	border-bottom: 1.8ex solid var(--colour-highlight-1-soft);
	z-index: -1;
	width: 120%;
	position: absolute;
	bottom: 0.35lh;
	left: -10%;
	right: 0;
}
nav ul li a.current:before {
	border-bottom-color: var(--colour-highlight-2-soft);
}
nav ul li a:hover {
	letter-spacing: 1px;
	background: 0 0;
}
nav ul li a:hover i {
	color: var(--colour-text);
}
nav ul li a:hover.current i {
	color: var(--colour-text);
}
nav ul li a:hover {
	color: var(--colour-text);
}
nav ul li a:hover:before {
	filter: grayscale();
}
nav ul li a:active {
	letter-spacing: 1px;
	background: 0 0;
}
nav ul li a:active i {
	color: var(--colour-text);
}
nav ul li a:active.current i {
	color: var(--colour-text);
}
nav ul li a:active {
	color: var(--colour-text);
}
nav ul li a:active:before {
	filter: grayscale();
}
nav ul li a:focus {
	letter-spacing: 1px;
	background: 0 0;
}
nav ul li a:focus i {
	color: var(--colour-text);
}
nav ul li a:focus.current i {
	color: var(--colour-text);
}
nav ul li a:focus {
	color: var(--colour-text);
}
nav ul li a:focus:before {
	filter: grayscale();
}
nav ul li:nth-child(4n) a:before {
	transform: rotate(-1.2deg);
}
nav ul li:nth-child(4n-1) a:before {
	transform: rotate(-0.8deg);
}
nav ul li:nth-child(4n-2) a:before {
	transform: rotate(-1deg);
}
nav ul li:nth-child(4n-3) a:before {
	transform: rotate(-0.5deg);
}
main {
	min-width: 0;
	max-width: 100%;
	margin-top: var(--baseline-offset);
	flex-direction: column;
	flex: auto;
	gap: 2lh;
	display: flex;
}
article,
footer {
	border-radius: 2px;
	flex-direction: column;
	gap: 1lh;
	margin-left: -1px;
	display: flex;
}
:is(article, footer) * {
	margin-top: 0;
	margin-bottom: 0;
}
@media (min-width: 30rem) {
	#w {
		padding-top: 15px 1lh 2lh;
	}
	main {
		gap: 1lh;
		margin-top: 0;
		padding: 0;
	}
	article {
		box-shadow:
			inset 0 0 0 var(--border-width) var(--colour-border-1),
			5px 5px 0 0 var(--colour-border-3);
	}
	footer {
		box-shadow: inset 0 0 0 var(--border-width) var(--colour-border-2);
		margin-top: 0;
	}
	footer:has(> h1) {
		position: relative;
	}
	footer:has(> h1) > h1:first-child {
		transform: translateY(var(--negative-baseline-offset));
		width: 100%;
		font-size: var(--step-4);
		text-transform: uppercase;
		text-align: center;
		color: var(--colour-accent-3);
		margin-top: -1lh;
		font-style: italic;
		text-decoration: none;
		position: relative;
	}
	footer:has(> h1) > h1:first-child:after {
		content: "";
		height: var(--border-width);
		background: var(--colour-border-2);
		position: absolute;
		bottom: 0;
		left: -1lh;
		right: -1lh;
	}
	article,
	footer {
		transform: translateY(var(--border-baseline-offset));
		padding: 1lh;
		padding-top: calc(
			1lh + var(--baseline-offset) - var(--border-baseline-offset)
		);
		padding-bottom: calc(1lh - var(--baseline-offset));
		margin-bottom: var(--border-baseline-offset);
	}
}
@media (min-width: 38rem) {
	nav {
		padding-bottom: 1lh;
	}
	article:has(> h1) {
		position: relative;
	}
	article:has(> h1) > h1:first-child {
		--heading-padding: 7px;
		--heading-left: 9px;
		top: -2lh;
		left: var(--heading-left);
		width: -webkit-fit-content;
		width: fit-content;
		max-width: calc(100% - 3lh);
		min-height: 2lh;
		font-family: var(--fonts-serif);
		z-index: 4;
		flex-flow: wrap;
		align-items: center;
		margin-bottom: -2lh;
		padding: 0;
		text-decoration: none;
		display: flex;
		position: relative;
	}
	article:has(> h1) > h1:first-child:before {
		content: "";
		height: 1lh;
		top: 0;
		left: calc(-1 * var(--heading-padding));
		right: calc(-1 * var(--heading-padding));
		position: absolute;
	}
	article:has(> h1) > h1:first-child:after {
		content: "";
		height: 1lh;
		top: 0;
		left: calc(-1 * var(--heading-padding));
		right: calc(-1 * var(--heading-padding));
		position: absolute;
	}
	article:has(> h1) > h1:first-child:before {
		z-index: -1;
		background: var(--colour-background);
	}
	article:has(> h1) > h1:first-child:after {
		z-index: -1;
		background-color: var(--colour-grid);
		-webkit-mask-image: var(--bg-mask);
		mask-image: var(--bg-mask);
		-webkit-mask-size: var(--line-height);
		mask-size: var(--line-height);
		-webkit-mask-position: calc(
				1px + var(--heading-padding) - var(--heading-left)
			)
			calc(2px - var(--baseline-offset));
		mask-position: calc(1px + var(--heading-padding) - var(--heading-left))
			calc(2px - var(--baseline-offset));
	}
}
@media (min-width: 42rem) {
	#w {
		width: calc(
			round(calc(100%), 2 * var(--line-height)) - 3 * var(--line-height)
		);
		flex-direction: row;
		justify-content: center;
		padding: calc(2lh + 15px) 1lh 2lh;
	}
	nav ul {
		flex-direction: column;
		gap: 1lh;
	}
}
@media (min-width: 50rem) {
	article:has(> h1) > h1:first-child {
		left: calc(var(--heading-left) + 1lh);
		max-width: calc(100% - 4lh);
	}
}
s,
code,
sup,
small,
time.date {
	line-height: 1;
}
li::marker {
	line-height: 1;
}
summary::marker {
	line-height: 1;
}
h1,
h2 {
	transform: translateY(-3px);
}
p {
	line-height: var(--line-height);
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
	padding: 0 0.2lh;
}
hr {
	height: 1lh;
	transform: translateY(calc(var(--negative-baseline-offset) - 2px));
	width: 100%;
}
ul,
ol {
	padding-left: 1lh;
}
:is(ul, ol) li {
	padding-left: 0.2lh;
}
ol li::marker {
	font-weight: 700;
	font-family: var(--fonts-serif);
	font-variant-numeric: tabular-nums;
}
img {
	object-fit: scale-down;
	max-width: 100%;
	max-height: 10lh;
}
pre {
	transform: translateY(
		calc(var(--border-baseline-offset) - var(--baseline-offset))
	);
	padding: var(--baseline-offset);
	margin-bottom: calc(-2 * var(--baseline-offset));
	box-shadow:
		inset 0 0 0 1px var(--colour-border-1),
		5px 5px 0 var(--colour-highlight-2);
	width: calc(100% - 5px);
	padding-left: 0.3lh;
	padding-right: 0.3lh;
	overflow-x: auto;
}
figure {
	transform: translateY(var(--negative-baseline-offset));
	flex-direction: column;
	align-items: center;
	display: flex;
}
figure figcaption {
	color: var(--colour-accent-3);
	font-style: italic;
	line-height: var(--line-height);
	transform: translateY(var(--baseline-offset));
}
source {
	display: none;
}
picture {
	display: flex;
}
blockquote {
	transform: translateY(calc(2 * var(--negative-baseline-offset)));
	padding-top: calc(2 * var(--baseline-offset));
	margin: 0 1lh;
	margin-bottom: calc(2 * var(--negative-baseline-offset));
	flex-direction: column;
	gap: 1lh;
	display: flex;
}
details {
	padding-left: 1lh;
}
details summary {
	margin-left: -1lh;
}
details > :nth-child(n + 3) {
	margin-top: 1lh;
}
.draft-notice {
	padding: calc(2 * var(--baseline-offset)) 0.5lh 0;
	margin: calc(-2 * var(--baseline-offset)) calc(-1 * var(--border-width)) 0;
}
.now-post {
	display: contents;
}
.now-post time {
	line-height: var(--line-height);
	font-size: var(--step-2);
}
.now-post ul {
	gap: 1lh;
}
.now-post h2 + p {
	margin-top: -1lh;
}
main.archive ul {
	padding: 0;
}
main.archive li {
	list-style-type: none;
}
ul.posts {
	margin: 0;
	gap: 3lh;
	margin-top: 2lh;
	padding: 0;
	list-style-type: none;
}
ul.posts:first-child {
	margin-top: 0;
}
ul.posts li {
	padding: 0;
}
ul.posts .date a {
	text-decoration: none;
}
ul.posts .read-more {
	text-align: center;
}
ul.posts .read-more a {
	transform: translateY(calc(-1px + var(--negative-baseline-offset)));
	text-align: center;
	background: linear-gradient(
		to right,
		var(--colour-highlight-1-soft),
		var(--colour-highlight-1)
	);
	min-width: 4lh;
	text-decoration: none;
	transition: filter 0.3s ease-in-out;
	display: inline-block;
}
ul.posts .read-more a:hover {
	filter: grayscale() opacity(0.8);
}
ul.posts .read-more a:focus {
	filter: grayscale() opacity(0.8);
}
ul.posts .read-more a:active {
	filter: grayscale() opacity(0.8);
}
@media (min-width: 30rem) {
	ul.posts {
		gap: 2lh;
	}
}
ul.drafts {
	grid-template-columns: 1lh 4lh 1fr;
	align-items: baseline;
	gap: 0;
	padding-left: 0;
	display: grid;
}
ul.drafts li {
	padding-left: 0;
	display: contents;
}
ul.drafts li:before {
	content: "";
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 1lh;
	height: 1lh;
	line-height: 1;
	display: inline;
	-webkit-mask-position: 50%;
	mask-position: 50%;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
ul.drafts li:before {
	transform: translate(4px, -2px);
	-webkit-mask-image: url(static/fa/circle-solid.svg);
	mask-image: url(static/fa/circle-solid.svg);
	-webkit-mask-size: 6px;
	mask-size: 6px;
}
ul.drafts li.starred:before {
	color: var(--colour-accent-2);
	-webkit-mask-image: url(static/fa/star-solid.svg);
	mask-image: url(static/fa/star-solid.svg);
	-webkit-mask-size: 0.9em;
	mask-size: 0.9em;
}
ul.drafts li time.date {
	text-align: center;
}
ul.drafts li a {
	justify-self: start;
	margin-left: 0.2lh;
}
nav:has(~ main .h-entry .date) {
	padding-bottom: 1lh;
}
article.h-entry {
	position: relative;
}
article.h-entry h1.p-name a {
	text-decoration: none;
}
article.h-entry h1.p-name.untitled {
	display: none;
}
article.h-entry div.date {
	transform: translateY(var(--baseline-offset));
	position: absolute;
	top: -1lh;
	right: 0;
}
article.h-entry data {
	display: none;
}
article.h-entry .e-content {
	gap: var(--line-height);
	flex-direction: column;
	display: flex;
}
.link-wall {
	column-count: 1;
	column-gap: 1lh;
	padding-right: 1lh;
}
.link-wall ul {
	padding-left: 0.2lh;
}
.link-wall li {
	align-items: baseline;
	list-style-type: none;
	display: flex;
}
.link-wall li a {
	word-break: break-all;
}
.link-wall li:before {
	content: "";
	background-image: linear-gradient(
		0deg,
		var(--colour-accent-1),
		var(--colour-highlight-2)
	);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	flex-shrink: 0;
	width: 1.7ex;
	height: 1.7ex;
	margin-right: 0.4em;
	display: inline;
	-webkit-mask-image: url(static/fa/seedling-solid.svg);
	mask-image: url(static/fa/seedling-solid.svg);
	-webkit-mask-position: 50%;
	mask-position: 50%;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
@media (min-width: 40rem) {
	.link-wall {
		column-count: 2;
	}
}
.theme-buttons {
	transform: translateY(var(--negative-baseline-offset));
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 1lh;
	display: flex;
}
.theme-buttons button {
	line-height: var(--line-height);
	border: 5px solid var(--colour-border-2);
	width: 5lh;
	height: 5lh;
	font-size: var(--step-1);
	font-weight: semibold;
	color: var(--colour-text);
	cursor: pointer;
	border-radius: 5lh;
}
.theme-buttons.theme-buttons__background button {
	background: 0 0;
	position: relative;
}
.theme-buttons.theme-buttons__background button:hover {
	filter: brightness(0.9);
}
.theme-buttons.theme-buttons__background button:focus {
	filter: brightness(0.9);
}
.theme-buttons.theme-buttons__background button:before {
	content: "";
	z-index: -1;
	border-radius: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.theme-buttons.theme-buttons__background button:after {
	content: "";
	z-index: -1;
	border-radius: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.theme-buttons.theme-buttons__background button:before {
	background: var(--colour-background);
}
.theme-buttons.theme-buttons__background button:after {
	background-color: var(--colour-grid);
	-webkit-mask-size: var(--line-height);
	mask-size: var(--line-height);
	-webkit-mask-position: 50% 18px;
	mask-position: 50% 18px;
}
.theme-buttons.theme-buttons__background button.option-bg__plain:after {
	-webkit-mask-image: var(--bg-mask-plain);
	mask-image: var(--bg-mask-plain);
}
.theme-buttons.theme-buttons__background button.option-bg__dash-rule:after {
	-webkit-mask-image: var(--bg-mask-dash-rule);
	mask-image: var(--bg-mask-dash-rule);
}
.theme-buttons.theme-buttons__background button.option-bg__dash-grid:after {
	-webkit-mask-image: var(--bg-mask-dash-grid);
	mask-image: var(--bg-mask-dash-grid);
}
.theme-buttons.theme-buttons__colours button:hover {
	filter: brightness(0.9);
}
.theme-buttons.theme-buttons__colours button:focus {
	filter: brightness(0.9);
}
.theme-buttons.theme-buttons__colours button.option-colours__light {
	color: #2f564a;
	background: #fbfcf8;
}
.theme-buttons.theme-buttons__colours button.option-colours__dark {
	color: #b8b3a8;
	background: #1d1b16;
}
.theme-buttons.theme-buttons__colours button.option-colours__auto {
	background: var(--colour-background);
	color: var(--colour-text);
}
html[data-theme="auto"] button.option-colours__auto,
html[data-theme="light"] button.option-colours__light,
html[data-theme="dark"] button.option-colours__dark,
html[data-bg="plain"] button.option-bg__plain,
html[data-bg="dash-rule"] button.option-bg__dash-rule,
html[data-bg="dash-grid"] button.option-bg__dash-grid {
	border-color: var(--colour-accent-1);
}
button.reset {
	transform: translateY(var(--negative-baseline-offset));
	width: 4lh;
	height: 2lh;
	line-height: var(--line-height);
	box-shadow: 0 0 0 3px var(--colour-border-3);
	background: var(--colour-background);
	color: var(--colour-text);
	font-size: var(--step-2);
	cursor: pointer;
	border: none;
	border-radius: 2px;
	margin: 0 auto;
	padding: 0;
	font-weight: 700;
}
button.reset:hover {
	filter: brightness(0.9);
}
button.reset:focus {
	filter: brightness(0.9);
}