@import url("fonts.css");
@import url("tokens-1.css");
@import url("tokens-2.css");
@import url("prism.css");
@import url("icons.css");
@import url("utils.css");
@import url("components/figures.css");
@import url("components/callouts.css");
@import url("components/bar-chart.css");
@import url("components/tables.css");

*,
*::before,
*::after {
	box-sizing: inherit;
	-webkit-font-smoothing: antialiased;
	/*
	word-break: break-word;
	word-wrap: break-word;
	*/
}

@property --content-margin-start {
	syntax: "<length-percentage>";
	inherits: true;
	initial-value: 0px;
}

@property --content-margin-end {
	syntax: "<length-percentage>";
	inherits: true;
	initial-value: 0px;
}

:root:not(.has-toc) {
	--sidebar-width: 0px;
}

:nth-child(1) { --index: 1; }
:nth-child(2) { --index: 2; }
:nth-child(3) { --index: 3; }
:nth-child(4) { --index: 4; }
:nth-child(5) { --index: 5; }
:nth-child(6) { --index: 6; }
:nth-child(7) { --index: 7; }
:nth-child(8) { --index: 8; }
:nth-child(9) { --index: 9; }
:nth-child(10) { --index: 10; }
:nth-child(11) { --index: 11; }
:nth-child(12) { --index: 12; }
:nth-child(13) { --index: 13; }
:nth-child(14) { --index: 14; }
:nth-child(15) { --index: 15; }
:nth-child(16) { --index: 16; }
:nth-child(17) { --index: 17; }
:nth-child(18) { --index: 18; }
:nth-child(19) { --index: 19; }
:nth-child(n + 20) { --index: 20; }

::selection {
	background: var(--color-accent, hsl(336 100% 50%));
	color: white;
}

html {
	color: black;
	font: 110%/1.5 var(--font-sans);
	letter-spacing: -0.015em;
	counter-reset: figure;

	&.use-disqus {
		/*
			Disqus fails to parse the accent color from the stylesheet (i.e., it doesn't understand the `oklch()` function),
			so to make it work again (and show the comments), we need to set the accent color in the format Disqus can parse.
		*/
		--color-accent: hsl(336 100% 50%);
	}

	@media (width > 700px) {
		font-size: 130%;
	}
}

body {
	display: flex;
	flex-flow: column;
	background: var(--color-accent2-light3);
	box-sizing: border-box;
	margin: 0;
	min-height: 100vh;
	accent-color: var(--color-accent);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, summary {
	position: relative;
	font-feature-settings: "lnum";
	font-variant-numeric: lining-nums;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	font-family: var(--font-sans);
	text-wrap: balance;

	& a {
		color: inherit;
	}

	& > a:only-child { /* Link wrapping heading’s entire contents */
		text-decoration: none;

		&:hover {
			color: inherit;
		}
	}

	& code {
		font-weight: 900;
	}
}

summary {
	cursor: pointer;

	> :is(h1, h2, h3, h4, h5, h6):only-child {
		display: inline;
		pointer-events: none;
	}
}

h1, h2, h3, .h1, .h2, .h3 {
	code:is(.foo, :not(.foo)) {
		padding: 0;
		font-size: 100%;
		font-size-adjust: .545;
		line-height: 1;
		background: none;

		&:not(:has(*)) {
			/* No point in displaying part of a heading in monospace if it doesn't have any highlighting */
			font: inherit;
		}
	}
}

h1, .h1 {
	margin-block: 3.5rem 2rem;
	margin-inline: -.1em;
	font-size: calc((210% + clamp(0%, 1.5vw, 180%)) * var(--font-size-scale, 1));
}

h2, .h2 {
	font-size: calc((150% + clamp(0%, 1vw, 50%)) * var(--font-size-scale, 1));
}

h3, .h3 {
	font-size: calc(140% * var(--font-size-scale, 1));
}

h4, h5, h6, .h4, .h5, .h6, summary {
	font-size: calc(100% * var(--font-size-scale, 1));
	margin: .5em 0;
}

h5, .h5 {
	color: var(--color-gray-medium);
}

h5, .h5 {
	font-size: 2.1rem;
}

h6, .h6 {
	font-size: 1.6rem;
	letter-spacing: 0.03125em;
	text-transform: uppercase;
}

p {
	line-height: 1.5;
	margin-block: .2em 1em;
}

ul {
	padding-left: .6em;
	margin-block: .2em 1em;
}

dl {
	display: grid;
	grid-template-columns: auto 1fr;
	border-block: 1px solid var(--color-gray-80);
	border-block-width: 2px 1px;


	dt, dd {
		border-block-end: 1px solid var(--color-gray-80);

		&:where(:not(:has(p, ul, ol))) {
			padding-block: .7rem;
		}
	}

	& dt {
		grid-column: 1;
		font-weight: bold;
		min-width: 10rem;

		small {
			display: block;
			font-weight: 450;
			color: var(--color-gray-mediumdark);
			font-size: .8em;
			font-style: italic;
		}
	}

	& dd {
		grid-column: 2;
		margin: 0;
		padding-inline-start: 1em;
	}

	@container main (width < 40rem) {
		grid-template-columns: 1fr;

		dt {
			border-block-end: none;
			padding-block-end: 0;
		}

		dd {
			grid-column: 1;
		}
	}

}

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

	&:hover,
	&:focus {
		color: var(--color-accent3);
		text-decoration: underline;
	}
}

abbr[title] {
	text-decoration-color: color-mix(in oklch, canvas, currentColor);
	cursor: help;
}

hr {
	background: linear-gradient(to left, currentColor calc(50% - 16px), transparent calc(50% - 16px), transparent calc(50% + 16px), currentColor calc(50% + 16px));
	background-color: transparent !important;
	border: none;
	height: 1px;
	overflow: visible;
	position: relative;
	font-size: 80%;
	margin-top: 3em;

	&:not(.has-background) {
		color: var(--color-gray-medium);
	}

	&::before {
		content: "";
		background: url("/logo.svg") center / cover no-repeat;
		height: 1.6em;
		aspect-ratio: 1;
		position: absolute;
		top: -1.2em;
		left: 50%;
		transform: translateX(-50%);
		filter: grayscale();
		opacity: .8;
	}
}

video, img, object {
	max-width: 100%;
	object-fit: cover;
}

blockquote {
	--color: var(--color-accent);
	border-inline-start: .15rem solid var(--color);
	margin-inline-start: 0;
	padding-inline-start: 1.2em;
	padding-block: .8em .01em;
	/* Note: color has to be hardcoded in the quote */
	background:
		url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">\
			<rect width="100%" height="100%" fill="yellow" fill-opacity="0" />\
			<text y=".8em" font-size="90" fill="hsl(336 100% 50%)" fill-opacity=".1">❞</text></svg>')
			no-repeat bottom right 1em / auto min(8em, 80%)
		color-mix(in lab, #fff0, var(--color) 4.5%) ;
	font-style: italic;
}

var {
	font-variant-numeric: lining-nums;
}

input, select, textarea {
	font: inherit;
}

input[type=number] {
	width: 6ch;
}

button,
.button,
.cta {
	padding-block: .42em .35em;
	padding-inline: .7em;
	border: .1em solid transparent;
	font: 700 .8rem/1.2 var(--font-sans);
	background: var(--color-accent);
	color: var(--color-accent-text);
	text-decoration: none !important;
	text-shadow: 0 0 0 white;
	transition: .3s;
	cursor: pointer;
	text-shadow: 0 0 .2em rgb(0 0 0 / .15);

	&:only-child:is(p > *):is(.post *, .post-page *) {
		display: block;
		width: fit-content;
		margin: auto;
	}

	&:hover,
	&:focus,
	&.secondary {
		background: var(--color-accent2);
		color: white;
		text-shadow: 0 0 1em white;
	}

	&:active {
		transform: scale(.9);
	}

	&.secondary {
		border-color: var(--color-accent);
		background: transparent;
		color: var(--color-accent);

		--highlight-gradient-color-1: var(--color-accent-light1);
		--highlight-gradient-color-2: var(--color-accent2-light1);
	}
}

@keyframes cta-hover {
	to {
		background-position: -200% 0;
	}
}

.cta {
	display: inline-block;
	padding-block: .62em .55em;
	padding-inline: 1.3em;
	text-transform: uppercase;
	border-radius: 9999px;
	box-shadow: 0 .15em .5em -.4em rgb(0 0 0 / .2);

	--highlight-gradient-color-1: var(--color-accent);
	--highlight-gradient-color-2: var(--color-accent2);

	&.large {
		font-size: 1rem;
	}

	&.small {
		font-size: .6rem;
	}

	&:hover {
		scale: 1.05;
		background-image: linear-gradient(to right, var(--highlight-gradient-color-1), var(--highlight-gradient-color-2), var(--highlight-gradient-color-1));
		background-size: 200% 100%;
		background-position: 0% 0;
		animation: cta-hover 2s infinite ease-in-out;
		box-shadow: 0 .2em 1em -.5em rgb(0 0 0 / .5);
	}

	&:active {
		scale: .9;
	}

	i {
		margin-inline-end: .2em;
		vertical-align: middle;
	}
}

.cta-container {
	display: flex;
	flex-flow: column;
	gap: .2em;
	align-items: center;
	margin-block: 1em 3em;

	> small {
		color: var(--color-gray-medium);
		font-size: .77rem;
		font-family: var(--font-sans);
		font-weight: 500;
		-webkit-font-smoothing: initial;
	}
}

.sponsor,
.work-with-me {
	&.cta:hover::before {
		font-weight: bold;
	}
}

.sponsor {
	--icon: var(--icon-heart);

	&.cta:hover::before {
		font-weight: bold;
	}
}

.work-with-me {
	--icon: var(--icon-briefcase);
}

@property --number {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}

.icon-before::before,
.cta::before,
.icon-after::after {
	content: var(--icon);
	font: var(--icon-font);
	display: inline-block;
}

.icon-before::before,
.cta::before {
	margin-inline-end: .4em;
}

.icon-after::after {
	margin-inline-start: .4em;
}

@keyframes to1 {
	from { --number: 0; }
	to { --number: 1; }
}

:target {
	--color: color-mix(in lab, transparent, var(--color-accent2) calc((1 - var(--number)) * 20%));
	background: var(--color);
	box-shadow: 0 0 calc(.2em + .8em * var(--number)) calc(.1em + .8em * var(--number)) var(--color);
	animation: to1 2s 1s both;
}

.social {
	display: flex;
	gap: .4em;

	&:is(.site-meta *, body > footer *) {
		flex-flow: column;
		gap: .5rem;

		& a {
			display: flex;
			gap: .5em;
			text-align: center;

			&::after {
				font-weight: bold;
			}

			& i {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 1em;
				line-height: 1;
				padding: .3em;
				box-sizing: content-box;
				border-radius: 50%;
				background: var(--color-accent);
				color: white;
				transition: .2s transform;


				&:is(:hover > *) {
					background: var(--color-accent2);
					transform: scale(1.2);
				}
			}
		}
	}

	&:is(.metabit) {
		> a {
			&:only-child {
				&::after {
					content: attr(title);
					margin-left: .3em;
				}
			}

			&:not(:hover, :focus) {
				& i {
					opacity: .8;
				}
			}

			&:is(:hover, :focus) {
				color: var(--color, inherit);
			}
		}

	}

	a {
		text-decoration: none;
	}
}

body > header,
body > footer {
	@media (prefers-reduced-motion: no-preference) {
		--background-gradient-start: calc(var(--scrolltop, 0) * .1deg);
	}
}

body > header {
	z-index: 1;
	position: relative;
	padding: var(--min-padding-block) var(--min-padding);
	--header-bg-center: calc(var(--min-padding-block) + .75em) calc(2em - var(--scrolltop, 0) * 1px);
	background: repeating-conic-gradient(from var(--background-gradient-start, 0deg) at var(--header-bg-center), var(--color-accent2-light1) 0 4deg, transparent 0 8deg) fixed;
	background-color: var(--color-accent2-light2);

	.site-meta {
		display: flex;
		align-items: center;
		margin-inline-start: calc(-1 * (var(--min-padding) - var(--min-padding-block)));

		.site-logo {
			display: flex;
			gap: .5em;
			align-items: center;
			flex-shrink: 0;
			color: inherit;
			text-decoration: none;

			& img {
				max-height: 2.5rem;
				width: auto;
			}

			.site-title {
				color: var(--color-accent);
				font-size: 150%;
				font-weight: 300;
				text-transform: uppercase;
				line-height: 1;
				white-space: nowrap;

				.phd {
					font-size: 50%;
					font-weight: 500;
					text-transform: none;
				}
			}
		}

		& nav {
			display: flex;
			gap: 1em;
			margin-left: auto;
			font-size: 75%;
			font-weight: 500;

			& a {
				color: var(--color-accent);
				word-break: initial;
				word-wrap: initial;

				&:not(:hover) {
					text-decoration: none;
				}

				&.selected {
					position: relative;
					margin: 0 .5em;

					&::before,
					&::after {
						position: absolute;
						font-weight: 500;
						font-size: 180%;
						top: 50%;
						transform: translateY(-55%);
					}

					&::before {
						content: "{";
						right: 100%;
					}

					&::after {
						content: "}";
						left: 100%;
					}
				}
			}
		}

		.🍔 {
			margin-left: auto;
		}

		& .social {
			position: absolute;
			left: 1.6rem;
			top: 4.25rem;
			font-size: 80%;

			& a {
				--link-index: var(--index);

				&:hover::after {
					content: attr(aria-label);
				}

				& i {
					scale: calc(1.1 - var(--link-index) * .08);
				}
			}
		}
	}

	.page-meta {
		/* The parent has var(--min-padding) padding so we need to offset that */
		padding-block: 0;
		padding-inline: max(0em, var(--content-margin-start) - var(--min-padding)) max(0em, var(--content-margin-end) - var(--min-padding));
	}

	.meta {
		justify-content: center;
	}

	& h1 {
		text-align: center;
	}
}

body > main {
	flex: 1;
	position: relative;
	padding-block: 2rem 1rem;
	padding-inline: var(--content-margin-start) var(--content-margin-end);
	font-family: var(--font-serif);
	container: main / inline-size;
	contain: inline-size;
}

body > footer {
	display: grid;
	gap: 1em;
	padding-block: var(--min-padding-block);
	padding-inline: var(--content-margin-start) var(--content-margin-end);
	margin-top: 2em;
	background: repeating-conic-gradient(from var(--background-gradient-start, 0deg) at calc(100% + 1em) calc(100% + 1em), rgb(0 0 0 / .1) 0 4deg, transparent 0 8deg) fixed;
	background-color: hsl(var(--gray) 23%);
	border: 0 solid hsl(var(--gray) 95% / .2);
	color: white;

	& > :has(> h4) {
		margin-top: -1.5rem;
	}

	& h4 {
		color: hsl(var(--gray) 20%);
	}

	& .social {
		display: block;
		column-count: 2;

		& a {
			margin: .5em 0;

			&::after {
				content: attr(aria-label);
			}
		}
	}

	& nav {
		column-count: 2;

		& a {
			display: block;
			font-weight: bold;
		}
	}

	& small {
		display: flex;
		gap: .6em;
		padding: 1rem 0;
		border-top: 1px solid hsl(var(--gray) 95% / .2);

		& a,
		& a:hover {
			color: var(--color-gray-medium);
		}

		.copyright {
			font-weight: bold;
			color: white;

			&:hover {
				color: var(--color-accent3);
			}
		}

		.credits {
			color: var(--color-gray-medium);
		}

		.to-top {
			margin-left: auto;
		}

		@media (width < 700px) {
			flex-flow: column;
		}
	}

	@media (width > 600px) {
		grid-template-columns: 1fr 1fr;

		& small {
			grid-column-end: span 2;
		}
	}

	@media (width <= 600px) {
		& nav {
			margin-top: 0;
		}
	}
}

.metabit {
	color: var(--color-gray-medium);
	font-size: .77rem;
	font-family: var(--font-sans);
	font-weight: 500;
	-webkit-font-smoothing: initial;

	&:not(.tags) {
		white-space: nowrap;
	}

	&:is(body > header *) {
		justify-content: center;
		mix-blend-mode: multiply;
		font-weight: 500;

		@media (width > 700px) {
			margin-bottom: 1em;
		}
	}

	& a {
		&:not(:hover) {
			color: inherit;
		}
	}

	&::before {
		content: var(--icon);
		font: var(--icon-font);
		display: inline-block;
		margin-right: .5em;
	}

	&:is(time),
	&.date {
		--icon: var(--icon-calendar-day);
	}

	&.dt-updated {
		--icon: var(--icon-pen-to-square);
	}

	&.comment-count {
		--icon: var(--icon-comment);

		&:not(.compact *)::after {
			content: " Comments";
		}

		&:empty {
			display: none;
		}
	}

	&.tags {
		--icon: var(--icon-tags);

		& .orphan {
			opacity: .6;
		}
	}

	&.reading-time {
		--icon: var(--icon-timer);
	}

	&.edit-page {
		--icon: var(--icon-pen-to-square);
	}

	&.broken-page {
		--icon: var(--icon-bug);

		&:hover {
			--icon: var(--icon-github);
		}

		&::before {
			margin-right: .3em;
		}
	}
}

.meta {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1em;

	@media (width > 700px) {
		column-gap: 2em;
	}

	.tags {
		margin-right: auto;
	}
}

.posts.compact {
	@media (width > 800px) {
		padding-inline-start: 0;
	}

	.metabit {
		margin-left: 1em;
		transition: .3s opacity;
	}

	.title:not(:hover, :focus-within) ~ :not(time) {
		opacity: 0;
	}
}

.prev-next {
	display: flex;
	gap: 2em;
	margin-top: 1em;
	padding-block: 1em;
	padding-inline: var(--content-margin-start) var(--content-margin-end);
	margin-block: 1em;
	margin-inline: calc(-1 * var(--content-margin-start)) calc(-1 * var(--content-margin-end));
	background: var(--color-accent-light2);
	font: 600 80% var(--font-sans);

	.prev,
	.next {
		flex-grow: 1;
		position: relative;
	}

	.prev::before,
	.next::after {
		font: var(--icon-font);
	}

	.prev {
		&::before {
			content: var(--icon-arrow-left-circle, "←");
			margin-right: .3em;
		}
	}

	.next {
		text-align: end;

		&::after {
			content: var(--icon-arrow-right-circle, "→");
			margin-left: .3em;
		}
	}

	@media (width > 820px) {
		font-size: 100%;

		.prev::before,
		.next::after {
			position: absolute;
			top: -.15rem;
			font-size: 160%;
		}

		.prev {
			&::before {
				right: 100%;
			}
		}

		.next {
			&::after {
				left: 100%;
			}
		}
	}
}

.nutshell {
	text-wrap: balance;
	font-family: var(--font-sans);
	font-size: 130%;
	hyphens: manual;

	/* Homepage */
	img {
		float: right;
		margin-inline-end: clamp(-1 * var(--content-margin-start) + var(--min-padding) / 2, -0.5 * var(--width), 0em);
		margin-inline-start: .3rem;
		--width: calc(4em + clamp(0px, 5svw + 4svh, 6em));
		width: var(--width);
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		shape-outside: circle(calc(50% + 1rem));
	}

	a:not(:hover, .cta) {
		filter: brightness(90%);
	}

	p {
		margin-bottom: .5em;
	}
}

.skip-to-next {
	position: absolute;
	margin-left: var(--content-width);
	margin-top: 1.5em;
	font-size: 200%;
	transition: .3s .5s opacity;
	opacity: 0;

	&:is(:hover, :focus),
	&:is(:has(+ .post:is(:hover, :focus-within))) {
		opacity: 1;
		transition-delay: 0s;
	}
}

.post {
	& .meta {
		font-size: 80%;
	}

	& header {
		text-align: center;
		margin-bottom: 1.2em;

		& h2 {
			margin-bottom: .4em;
		}

		& .meta {
			justify-content: center;
		}
	}

	.summary :is(h2, h3, h4, h5, h6) {
		--font-size-scale: .8;
	}
}

/* All Code */
pre, code {
	font-weight: 600;

	/* Override Prism’s default styles */
	&:is(*, [class*="language-"], [class*="language-"]) {
		font-family: var(--font-monospace);
		font-variant-ligatures: discretionary-ligatures;
		white-space: pre-wrap;
	}
}


code .token {
	mix-blend-mode: multiply;
}

/* Inline code */
code:is(code, [class*="language-"]):is(:not(pre *)) {
	padding: .2em .3em .2em;
	border-radius: .15rem;
	background: var(--code-background, var(--color-accent2-light1));
	font-size: 89%;

	&:is(strong *) {
		font-weight: 700;
	}
}

/* Blocks of code */
pre:is(pre, [class*="language-"][class*="language-"]) {
	position: relative;
	border: 0;
	padding: .5rem 1rem;
	margin: 0;
	border-radius: .3rem;
	box-sizing: content-box;
	background: var(--color-accent2-light2);
	overflow: visible;
	font-size: 80%;
	font-size: max(.8rem, 80%);
	font-weight: 500;

	&:where(main > *, .summary > *) {
		--skew: .8em;
		padding-inline: .8rem;
		padding-block: .6rem;
		max-width: max-content;
		border: 0 solid transparent;
		border-width: 0 var(--skew);
		margin-inline: calc(-1 * var(--skew));
		margin-block: .5rem 1rem;

		clip-path: polygon(
			var(--skew) 0%, 100% 0%, calc(100% - var(--skew)) 100%, 0% 100%
		)
	}

	&:nth-of-type(odd) {
		clip-path: polygon(0% 0%, calc(100% - var(--skew)) 0%, 100% 100%, var(--skew) 100%);
	}

	& p {
		display: contents;
	}

	& > code {
		display: block;
		background: transparent;
		padding: 0;
		text-shadow: none;
	}

	&:has(> code[data-file]) {
		--clip-top: 0 -1em, 100% -1em;
		padding-top: 0;

		& > code[data-file] {
			&::before {
				content: "File: " attr(data-file);
				position: absolute;
				top: -2.2em;
				right: var(--content-margin-end);
				margin: 0;
				background: var(--color-accent);
			}
		}
	}
}

.edit-only:not([mv-mode="edit"] *),
.edit-only-if-empty.mv-empty:not([mv-mode="edit"] *) {
	display: none !important;
}

.pagination {
	display: flex;
	justify-content: space-between;
	margin-top: 1em;
}

.tags-index {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
	gap: 0 3em;

	.tag {
		font-family: var(--font-sans);
		font-weight: 500;
	}

	.aliases {
		font-size: 80%;
		color: var(--color-gray-medium);

		.tag {
			font-size: 90%;
		}
	}
}

.subtle-markers {
	& li::marker {
		color: var(--color-gray-60);
	}

	&[reversed] li::marker {
		color: hsl(var(--gray) 50% / calc(1 - var(--index) * .05));
	}
}

a.feed {
	text-decoration: none;
	font: var(--icon-font);
	font-size: 60%;
	vertical-align: 1ex;

	&:not(:hover, :focus) {
		color: var(--color-orange);
	}

	&::before {
		content: var(--icon-square-rss);
		font-weight: 900;
	}
}

/* Footnotes */

@counter-style refs {
	system: extends decimal;
	prefix: "[";
	suffix: "] ";
}

.footnotes {
	font-size: 80%;

	ol {
		list-style: refs;
	}

	.footnote-backref {
		display: inline-flex;
		padding: .6em .4em .2em .3em;
		transform: rotate(90deg) scaleY(-1);
		margin-left: .4em;
		border-radius: .2em;
		background: var(--color-gray-95);
		line-height: 1;
		text-decoration: none;
		mix-blend-mode: multiply;

		&:hover,
		&:focus {
			background: var(--color-accent3);
			color: white;
		}
	}
}

a.contact {
	&:not(.no-after)::after {
		content: " at lea@" "verou.me";
	}
}

.post-ctas {
	gap: 1.5rem;
	margin-block: 2rem 3rem;
	align-items: end;

	h2 {
		margin-block: 0 .3em;
		color: var(--color-accent);
	}

	.cta-container {
		margin-block: 0;
	}
}