@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/fonts/source-serif-4-latin.woff2") format("woff2");
}

:root {
	--font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-serif: "Source Serif 4", Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
	--font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	--content-width: 64ch;
	--title-gap: 1.75rem;
	--home-mark-size: 2.88rem;

	/* Catppuccin Latte */
	--ctp-rosewater: #dc8a78;
	--ctp-flamingo: #dd7878;
	--ctp-pink: #ea76cb;
	--ctp-mauve: #8839ef;
	--ctp-red: #d20f39;
	--ctp-maroon: #e64553;
	--ctp-peach: #fe640b;
	--ctp-yellow: #df8e1d;
	--ctp-green: #40a02b;
	--ctp-teal: #179299;
	--ctp-sky: #04a5e5;
	--ctp-sapphire: #209fb5;
	--ctp-blue: #1e66f5;
	--ctp-lavender: #7287fd;
	--ctp-text: #4c4f69;
	--ctp-subtext1: #5c5f77;
	--ctp-subtext0: #6c6f85;
	--ctp-overlay2: #7c7f93;
	--ctp-overlay1: #8c8fa1;
	--ctp-overlay0: #9ca0b0;
	--ctp-surface2: #acb0be;
	--ctp-surface1: #bcc0cc;
	--ctp-surface0: #ccd0da;
	--ctp-base: #eff1f5;
	--ctp-mantle: #e6e9ef;
	--ctp-crust: #dce0e8;

	--bg: #fbfaf7;
	--text: #22201c;
	--muted: #6f6a60;
	--rule: #d9d5ca;
	--link: #0645ad;
	--hover: #7a3e00;
	--code-bg: color-mix(in srgb, var(--bg) 50%, var(--ctp-base));
	--code-border: var(--ctp-crust);
	--inline-code-bg: var(--code-bg);
	--inline-code: var(--ctp-red);

	--syntax-comment: var(--ctp-overlay2);
	--syntax-keyword: var(--ctp-mauve);
	--syntax-string: var(--ctp-green);
	--syntax-function: var(--ctp-blue);
	--syntax-number: var(--ctp-peach);
	--syntax-operator: var(--ctp-sky);
	--syntax-type: var(--ctp-yellow);
	--syntax-variable: var(--ctp-maroon);
	--syntax-regex: var(--ctp-pink);
	--syntax-deleted: var(--ctp-red);
}

@media (prefers-color-scheme: dark) {
	:root {
		/* Catppuccin Mocha */
		--ctp-rosewater: #f5e0dc;
		--ctp-flamingo: #f2cdcd;
		--ctp-pink: #f5c2e7;
		--ctp-mauve: #cba6f7;
		--ctp-red: #f38ba8;
		--ctp-maroon: #eba0ac;
		--ctp-peach: #fab387;
		--ctp-yellow: #f9e2af;
		--ctp-green: #a6e3a1;
		--ctp-teal: #94e2d5;
		--ctp-sky: #89dceb;
		--ctp-sapphire: #74c7ec;
		--ctp-blue: #89b4fa;
		--ctp-lavender: #b4befe;
		--ctp-text: #cdd6f4;
		--ctp-subtext1: #bac2de;
		--ctp-subtext0: #a6adc8;
		--ctp-overlay2: #9399b2;
		--ctp-overlay1: #7f849c;
		--ctp-overlay0: #6c7086;
		--ctp-surface2: #585b70;
		--ctp-surface1: #45475a;
		--ctp-surface0: #313244;
		--ctp-base: #1e1e2e;
		--ctp-mantle: #181825;
		--ctp-crust: #11111b;

		--bg: #171717;
		--text: #e6e0d7;
		--muted: #aaa39a;
		--rule: #3c3a36;
		--link: #8ab4f8;
		--hover: #f0b35c;
		--code-border: var(--ctp-surface0);
	}
}

* { box-sizing: border-box; }

html {
	font-size: 120%;
	overflow-y: scroll;
}

body {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 1.25rem;
	background: var(--bg);
	color: var(--text);
	font: 1rem/1.6 var(--font-serif);
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--link);
	text-decoration: none;
}

a:hover {
	color: var(--hover) !important;
	text-decoration: underline;
}

:is(h1, h2, h3) {
	margin: 2.25rem 0 0.65rem;
	color: var(--text);
	font-weight: 700;
	line-height: 1.18;
}

h1 { font-size: 1.8rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p, li { margin-bottom: 1.05rem; }

main > h1:first-child:not(.post-title),
.post-title {
	margin-bottom: var(--title-gap);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.site-header {
	margin-bottom: 2.25rem;
	padding: 1.75rem 0 1.25rem;
	border-bottom: 1px solid var(--rule);
	font-family: var(--font-ui);
}

.site-nav,
.nav,
.post-metadata,
.taglist-item {
	display: flex;
	gap: 1rem;
}

.site-nav {
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
}

.home-link,
.home-link:visited {
	display: inline-grid;
	width: var(--home-mark-size);
	height: var(--home-mark-size);
	place-items: center;
	color: var(--text) !important;
	text-decoration: none !important;
	-webkit-text-fill-color: currentColor;
}

.home-link:focus-visible {
	outline: 2px solid var(--link);
	outline-offset: 4px;
}

.home-mark {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	color: currentColor;
}

.home-mark-rule {
	stroke: var(--text);
	stroke-dasharray: 1 5;
	stroke-linecap: round;
	stroke-width: 1.8;
	transition: stroke-dashoffset 240ms ease, stroke 180ms ease;
}

.home-mark-letter {
	fill: var(--text);
	font: 700 30px var(--font-serif);
}

.home-link:is(:hover, :focus-visible) {
	color: var(--hover) !important;
}

.home-link:is(:hover, :focus-visible) .home-mark-rule {
	stroke: var(--hover);
}

.home-link:is(:hover, :focus-visible) .home-mark-letter {
	fill: var(--hover);
}

.home-link:is(:hover, :focus-visible) .home-mark-rule-top { stroke-dashoffset: -6; }
.home-link:is(:hover, :focus-visible) .home-mark-rule-bottom { stroke-dashoffset: 6; }

.nav {
	min-height: var(--home-mark-size);
	margin: 0;
	padding: 0;
	align-items: center;
	flex-wrap: wrap;
	font-size: 1.1rem;
	list-style: none;
}

.nav-item a {
	display: inline-grid;
	min-height: var(--home-mark-size);
	place-items: center;
}

:is(.nav-item a, .post-tag a, .taglist-link, .postlist-link, .post-pagination-link),
:is(.nav-item a, .post-tag a, .taglist-link, .postlist-link, .post-pagination-link):visited,
p a[href*="tags"] {
	color: var(--text) !important;
	text-decoration: none;
}

:is(.post-tag a, .taglist-link, .postlist-link):hover {
	color: var(--hover) !important;
	text-decoration: underline;
}

.nav-item a:hover {
	color: var(--hover) !important;
	text-decoration: none;
}

.nav-item a[aria-current="page"] {
	border-bottom: 1px solid var(--text);
}

:is(.post-tag a, .taglist-link, p a[href*="tags"]) {
	font-weight: 500;
}

.post-metadata,
.taglist-count,
.postlist-date,
.post-pagination-label {
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: 0.78rem;
}

.post-metadata {
	display: flex;
	margin: 0 0 0.75rem;
}

.taglist {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--rule);
	list-style: none;
}

.taglist-item {
	margin: 0;
	padding: 0.55rem 0;
	align-items: baseline;
	justify-content: space-between;
	border-bottom: 1px solid var(--rule);
}

.taglist-link,
.taglist-count {
	line-height: 1.3;
}

.taglist-count {
	flex: 0 0 auto;
	white-space: nowrap;
}

.postlist {
	--postlist-date-width: 13ch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.postlist-item {
	display: grid;
	grid-template-columns: var(--postlist-date-width) minmax(0, 1fr);
	column-gap: 1rem;
	align-items: center;
	margin-bottom: 1rem;
}

.postlist-date {
	grid-column: 1;
	grid-row: 1;
	line-height: 1.2;
	white-space: nowrap;
}

.postlist-link {
	grid-column: 2;
	grid-row: 1;
	font-weight: 400;
	line-height: 1.2;
}

.post-content {
	font-weight: 360;
}

.post-content > :first-child {
	margin-top: 0;
}

.post-content p {
	margin: 0 0 1.35rem;
}

.post-content a,
.post-content :not(pre) > code {
	overflow-wrap: anywhere;
}

.post-content :is(ul, ol) {
	margin: 1.2rem 0 1.55rem;
	padding-left: 1.6rem;
}

.post-content li {
	margin-bottom: 0.75rem;
	padding-left: 0.2rem;
}

.post-content li::marker {
	color: var(--hover);
	font-size: 0.78em;
}

.post-content li > :last-child {
	margin-bottom: 0;
}

.post-pagination {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem 1.25rem;
	margin-top: 3rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rule);
}

.post-pagination-link {
	min-width: 0;
}

.post-pagination-link:is(:hover, :visited:hover) {
	color: var(--hover) !important;
	text-decoration: none;
}

.post-pagination-link:is(:hover, :visited:hover) .post-pagination-title {
	color: var(--hover);
}

.post-pagination-label {
	color: var(--muted);
	font-size: 0.9rem;
	line-height: 1;
}

.post-pagination-title {
	text-decoration: underline transparent 1px;
	text-underline-offset: 0.18em;
	transition: text-decoration-color 160ms ease;
}

.post-pagination-link:is(:hover, :visited:hover) .post-pagination-title {
	text-decoration-color: currentColor;
}

.post-pagination-link[rel="next"] {
	text-align: right;
}

.post-pagination-link[rel="next"]:first-child {
	grid-column: 2;
}

.post-pagination-link[rel="prev"]:last-child {
	grid-column: 1 / -1;
}

:is(pre, code) {
	font-family: var(--font-mono);
	font-size: 0.88rem;
}

code {
	padding: 0.06em 0.22em;
	border-radius: 5px;
	background: var(--inline-code-bg);
}

pre {
	margin: 1.5rem 0;
	padding: 1rem;
	overflow-x: auto;
	border: 0;
	border-radius: 5px;
	background: var(--code-bg);
	tab-size: 4;
}

pre code {
	display: block;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.post-content :not(pre) > code {
	color: var(--inline-code);
	font-size: 0.86em;
	font-weight: 430;
}

@media (max-width: 36rem) {
	.postlist-item,
	.post-pagination {
		grid-template-columns: 1fr;
	}

	.postlist-item {
		row-gap: 0.15rem;
		margin-bottom: 1.35rem;
	}

	:is(.postlist-link, .postlist-date) {
		grid-column: 1;
	}

	.postlist-date { grid-row: 1; }
	.postlist-link { grid-row: 2; }

	.site-nav { gap: 0.75rem; }
	.home-link { flex: 0 0 auto; }

	.nav {
		flex-wrap: nowrap;
		gap: 0.6rem;
		font-size: 1rem;
		white-space: nowrap;
	}

	.post-pagination-link[rel="next"] {
		grid-column: auto;
		text-align: left;
	}
}

@media print {
	:root {
		--bg: #fff;
		--text: #000;
		--link: #000;
	}

	body {
		max-width: none;
		padding: 0;
		font-size: 12pt;
	}

	header,
	.post-pagination {
		display: none;
	}

	a { text-decoration: underline; }
	pre { white-space: pre-wrap; }
}