@import url("fonts.css");
@import url("tokens.css");
@import url("prism.css");
@import url("bootstrap-icons.css");
@import url("components/callouts.css");
@import url("components/bar-chart.css");

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

:root {
	--color-gray-medium: var(--color-gray-50);
	--color-gray-light: var(--color-gray-90);

	--color-accent: var(--color-magenta);
	--color-accent2: var(--color-orange);
	--color-accent3: var(--color-turquoise);
	--color-accent4: var(--color-green);

	--color-accent-light1: color-mix(in lab, white, var(--color-accent) 20%);
	--color-accent-light2: color-mix(in lab, white, var(--color-accent) 10%);
	--color-accent-light3: color-mix(in lab, white, var(--color-accent) 5%);
	--color-accent2-light1: hsl(35 100% 90%);
	--color-accent2-light2: hsl(35 100% 95%);
	--color-accent2-light3: hsl(35 100% 99%);

	--width-med: 50rem;
	--width-thin: 35rem;

	--content-width: var(--width-med);
	--min-padding: 1rem;
	--content-margin: clamp(var(--min-padding), 50vw - var(--content-width) / 2, 100vw);

	--scrolltop: 0;
}

@media (width <= 1280px) {

:root {
		--content-width: var(--width-thin);
}
	}

@media (width <= 700px) {

:root {
		--content-width: min(var(--width-med), 100vw - 2 * var(--min-padding));
}
	}

@media (width > 2500px) {

:root {
		--content-width: 50vw;
}
	}

/* Fallback. Actual value updated via JS */

: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;
}

@media (width > 700px) {

html {
		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, 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;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, summary a {
		color: inherit;
	}

h1 > a:only-child, h2 > a:only-child, h3 > a:only-child, h4 > a:only-child, h5 > a:only-child, h6 > a:only-child, summary > a:only-child { /* Link wrapping heading’s entire contents */
		text-decoration: none;
	}

h1 > a:only-child:hover, h2 > a:only-child:hover, h3 > a:only-child:hover, h4 > a:only-child:hover, h5 > a:only-child:hover, h6 > a:only-child:hover, summary > a:only-child:hover {
			color: inherit;
		}

h1[data-count]::before,
	h2[data-count]::before,
	h3[data-count]::before,
	h4[data-count]::before,
	h5[data-count]::before,
	h6[data-count]::before,
	summary[data-count]::before,
	h1 .count,
	h2 .count,
	h3 .count,
	h4 .count,
	h5 .count,
	h6 .count,
	summary .count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		right: 100%;
		margin-right: .4em;
		margin-top: -.25em;
		background: var(--color-accent);
		color: white;
		width: 2em;
		line-height: 2;
		box-sizing: content-box;
		border-radius: 50%;
		font-size: 75%;
		font-weight: 300;
	}

@media (width > 960px) {

h1[data-count]::before,
	h2[data-count]::before,
	h3[data-count]::before,
	h4[data-count]::before,
	h5[data-count]::before,
	h6[data-count]::before,
	summary[data-count]::before,
	h1 .count,
	h2 .count,
	h3 .count,
	h4 .count,
	h5 .count,
	h6 .count,
	summary .count {
			position: absolute;
	}
		}

h1[data-count]::before, h2[data-count]::before, h3[data-count]::before, h4[data-count]::before, h5[data-count]::before, h6[data-count]::before, summary[data-count]::before {
		content: attr(data-count) " ";
	}

h1 code, h2 code, h3 code, h4 code, h5 code, h6 code, summary code {
		font-weight: 900;
	}

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

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

h1 code:is(.foo, :not(.foo)):not(:has(*)), h2 code:is(.foo, :not(.foo)):not(:has(*)), h3 code:is(.foo, :not(.foo)):not(:has(*)) {
			/* No point in displaying part of a heading in monospace if it doesn't have any highlighting */
			font: inherit;
		}

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

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

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

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

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

h5 {
	font-size: 2.1rem;
}

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;
}

dl dt, dl dd {
		border-block-end: 1px solid var(--color-gray-80);
		padding: .2em 2.5em;
	}

dl dt:not(:has(p, ul, ol)), dl dd:not(:has(p, ul, ol)) {
			padding-block: 1em;
		}

dl dt {
		grid-column: 1;
		padding-inline-start: 0;
	}

dl dd {
		grid-column: 2;
		margin: 0;
		padding-inline-end: 0;
	}

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

a:hover,
	a: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;
}

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

hr::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 {
	max-width: 100%;
	object-fit: cover;
}

figure {
	margin: 1em 0;
}

figure:has(figcaption) {
		padding: .5rem;
		margin-inline: -.5em;
		border: 1px solid var(--color-gray-80);
		box-shadow: 0 .1em .2em var(--color-gray-95);
		text-align: center;
		background: white;
	}

/* Annoying Markdown artifacts */

figure > p,
	figure figcaption > p:only-child {
		display: contents;
	}

figure > img,
	figure > p > img {
		max-height: 75svh;
	}

figure figcaption {
		font: 500 75% var(--font-sans);
		color: var(--color-gray-medium);
		background: var(--color-gray-95);
		padding: .5rem;
		margin: -.5rem;
		margin-top: .5rem;
		counter-increment: figure;
		text-align: left;
	}

figure figcaption::before {
			content: "Figure " counter(figure) ": ";
			font-weight: bold;
		}

figure figcaption a:not(:hover, :focus, :active) {
			color: inherit;
			text-decoration: underline;
			text-decoration-color: color-mix(in lab, currentColor, transparent 70%);
		}

/* Variations */

figure.center {
		width: fit-content;
		margin-inline: auto;
	}

figure.left,
	figure.right {
		--small-figure-max-width: 200px;
		--small-figure-min-width: 100px;
		--small-figure-width: calc(50vw - var(--content-width) / 2 - 2em);
		--small-figure-clamped-width: clamp(var(--small-figure-min-width), var(--small-figure-width), var(--small-figure-max-width));
		--small-figure-outset: calc(-1em - var(--small-figure-clamped-width));
		max-width: var(--small-figure-clamped-width);
		margin: 0;
	}

figure.left:where(.left), figure.right:where(.left) {
			float: left;
			margin-right: 1em;
			margin-left: var(--small-figure-outset);
		}

figure.left:where(.right), figure.right:where(.right) {
			float: right;
			margin-left: 1em;
			margin-right: var(--small-figure-outset);
		}

@media (width < 1200px) {

figure.left,
	figure.right {
			/* Simple floats */
			--small-figure-width: calc(25vw - 2em);
			--small-figure-outset: 0;
			margin-bottom: 1em;
	}
		}

@media (width < 600px) {

figure.left,
	figure.right {
			float: none;
			margin: 1em 0;
			display: grid;
			gap: 1em;
			max-width: calc(3 * var(--small-figure-max-width));
			grid-template-columns: var(--small-figure-max-width) 1fr;
	}
		}

figure > a > img {
		display: block;
	}

/* Has multiple images? */

/* Pointless <p> created from Markdown */

:is(figure:has(> :nth-last-child(3), img:nth-of-type(2)),figure.multiple) > p:has(> img):not(:has(> :not(img))) { /* Only contains img children */
			display: contents;
		}

:is(figure:has(> :nth-last-child(3), img:nth-of-type(2)),figure.multiple):has(> .main) { /* Has main image? */
			display: grid;
			grid-template-columns: 3fr 1fr;
			grid-auto-flow: dense;
			gap: .3rem;
		}

:is(figure:has(> :nth-last-child(3), img:nth-of-type(2)),figure.multiple):has(> .main) > .main {
				grid-row-end: span 2;
				height: 100%;
			}

:is(figure:has(> :nth-last-child(3), img:nth-of-type(2)),figure.multiple):has(> .main) > :not(.main, figcaption) {
				grid-column: 2;

				xmax-width: 250px;
			}

:is(figure:has(> :nth-last-child(3), img:nth-of-type(2)),figure.multiple):has(> .main) figcaption {
				grid-column-end: span 2;
			}

:is(figure:has(> :nth-last-child(3), img:nth-of-type(2)),figure.multiple):not(:has(> .main)) { /* No main image, display all side by side */
			display: flex;
			align-items: start;
			flex-wrap: wrap;
			gap: .5rem;
		}

:is(figure:has(> :nth-last-child(3), img:nth-of-type(2)),figure.multiple):not(:has(> .main)) > :not(figcaption),
			:is(figure:has(> :nth-last-child(3), img:nth-of-type(2)),figure.multiple):not(:has(> .main)) > p > img {
				width: calc(50% - .25rem);
				object-fit: contain;
			}

:is(figure:has(> :nth-last-child(3), img:nth-of-type(2)),figure.multiple):not(:has(> .main)) > figcaption {
				flex-basis: 100%;
				box-sizing: content-box;
			}

blockquote {
	--color: var(--color-accent);
	border-inline-start: .15rem solid var(--color);
	margin-inline-start: 0;
	padding-inline-start: 1.2em;
	padding-block: .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;
}

table {
	border-spacing: 0;
	border-collapse: collapse;
	margin-bottom: 1em;
	background: white;
}

table th, table td {
		border: 1px solid var(--color-gray-40a);
		padding: .2rem .4rem;
	}

table th {
		text-align: left;
		font-size: 80%;
		font-family: var(--font-sans);
		background: var(--color-accent3);
		color: white;
	}

table td {
		font-variant-numeric: tabular-nums;
	}

: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;
}

input, select, textarea {
	font: inherit;
}

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

button,
.button,
.call-to-action {
	font: 800 .8rem/1.2 var(--font-sans);
	background: #f06;
	color: white;
	padding: .52em .8em .45em;
	text-decoration: none !important;
	text-shadow: 0 0 0 white;
	transition: .3s;
	border: none;
	cursor: pointer;
}

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

:is(button,.button,.call-to-action):hover,
	:is(button,.button,.call-to-action):focus {
		background: var(--color-accent2);
		color: white;
		text-shadow: 0 0 1em white;
	}

:is(button,.button,.call-to-action):active {
		transform: scale(.9);
	}

.call-to-action:is(button,.button,.call-to-action) {
		padding-inline: 1em;
		text-transform: uppercase;
		border-radius: 9999px;
	}

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

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

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

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

.social:is(.site-meta *, body > footer *) a {
			display: flex;
			gap: .5em;
		}

.social:is(.site-meta *, body > footer *) a::after {
				font-weight: bold;
			}

.social:is(.site-meta *, body > footer *) a i {
				display: inline-flex;
				width: 1em;
				line-height: 1;
				padding: .3em;
				box-sizing: content-box;
				border-radius: 50%;
				background: var(--color-accent);
				color: white;
				transition: .2s transform;
			}

.social:is(.site-meta *, body > footer *) a i:is(:hover > *) {
					background: var(--color-accent2);
					transform: scale(1.2);
				}

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

.social:is(.metabit) > a:not(:hover, :focus) i {
					opacity: .8;
				}

.social:is(.metabit) > a:is(:hover, :focus) {
				color: var(--color, inherit);
			}

.social a {
		text-decoration: none;
	}

@media (prefers-reduced-motion: no-preference) {

body > header,
body > footer {
		--background-gradient-start: calc(var(--scrolltop, 0) * .1deg);
}
	}

body > header {
	z-index: 1;
	position: relative;
	padding: var(--min-padding);
	--header-bg-center: calc(var(--min-padding) + .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);
}

body > header .site-meta {
		display: flex;
		align-items: center;
	}

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

body > header .site-meta .site-logo img {
				max-height: 2.5rem;
				width: auto;
			}

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

body > header .site-meta nav {
			display: flex;
			gap: 1em;
			margin-left: auto;
			font-size: 75%;
			font-weight: 500;
		}

body > header .site-meta nav a {
				color: var(--color-accent);
				word-break: initial;
				word-wrap: initial;
			}

body > header .site-meta nav a:not(:hover) {
					text-decoration: none;
				}

body > header .site-meta nav a.selected {
					position: relative;
					margin: 0 .5em;
				}

body > header .site-meta nav a.selected::before,
					body > header .site-meta nav a.selected::after {
						position: absolute;
						font-weight: 500;
						font-size: 180%;
						top: 50%;
						transform: translateY(-55%);
					}

body > header .site-meta nav a.selected::before {
						content: "{";
						right: 100%;
					}

body > header .site-meta nav a.selected::after {
						content: "}";
						left: 100%;
					}

body > header .site-meta .🍔 {
			margin-left: auto;
		}

body > header .site-meta .social {
			position: absolute;
			left: 1.6rem;
			top: 4.25rem;
			font-size: 80%;
		}

body > header .site-meta .social a {
				--link-index: var(--index);
			}

body > header .site-meta .social a:hover::after {
					content: attr(aria-label);
				}

body > header .site-meta .social a i {
					scale: calc(1.1 - var(--link-index) * .08);
				}

body > header .page-meta {
		padding: 0 var(--content-margin);
	}

body > header .meta {
		justify-content: center;
	}

body > header h1 {
		text-align: center;
	}

body > main {
	flex: 1;
	position: relative;
	padding: 2rem var(--content-margin) 1rem;
	font-family: var(--font-serif);
}

body > footer {
	display: grid;
	gap: 1em;
	padding: var(--min-padding) var(--content-margin);
	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;
}

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

body > footer h4 {
		color: hsl(var(--gray) 20%);
	}

body > footer .social {
		display: block;
		column-count: 2;
	}

body > footer .social a {
			margin: .5em 0;
		}

body > footer .social a::after {
				content: attr(aria-label);
			}

body > footer nav {
		column-count: 2;
	}

body > footer nav a {
			display: block;
			font-weight: bold;
		}

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

body > footer small a,
		body > footer small a:hover {
			color: var(--color-gray-medium);
		}

body > footer small .copyright {
			font-weight: bold;
			color: white;
		}

body > footer small .copyright:hover {
				color: var(--color-accent3);
			}

body > footer small .credits {
			color: var(--color-gray-medium);
		}

body > footer small .to-top {
			margin-left: auto;
		}

@media (width < 700px) {

body > footer small {
			flex-flow: column;
	}
		}

@media (width > 600px) {

body > footer {
		grid-template-columns: 1fr 1fr;
}

		body > footer small {
			grid-column-end: span 2;
		}
	}

@media (width <= 600px) {
		body > footer 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;
}

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

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

@media (width > 700px) {

.metabit:is(body > header *) {
			margin-bottom: 1em;
	}
		}

.metabit a:not(:hover) {
			color: inherit;
		}

.metabit::before {
		content: var(--icon);
		font-family: bootstrap-icons;
		display: inline-block;
		vertical-align: -.1em;
		margin-right: .5em;
	}

.metabit:is(time),
	.metabit.date {
		--icon: var(--icon-date);
	}

.metabit.dt-updated {
		--icon: var(--icon-edit);
	}

.metabit.comment-count {
		--icon: var(--icon-comments);
	}

.metabit.comment-count:not(.compact *)::after {
			content: " Comments";
		}

.metabit.comment-count:empty {
			display: none;
		}

.metabit.tags {
		--icon: var(--icon-tags);
	}

.metabit.tags .orphan {
			opacity: .6;
		}

.metabit.reading-time {
		--icon: var(--icon-stopwatch);
	}

.metabit.edit-page {
		--icon: var(--icon-edit);
	}

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

.metabit.broken-page:hover {
			--icon: var(--icon-github);
		}

.metabit.broken-page::before {
			margin-right: .3em;
		}

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

@media (width > 700px) {

.meta {
		column-gap: 2em;
}
	}

.meta .tags {
		margin-right: auto;
	}

@media (width > 800px) {

.posts.compact {
		padding-inline-start: 0;
}
	}

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

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

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

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

.prev-next .prev::before,
	.prev-next .next::after {
		font-family: bootstrap-icons;
		font-weight: normal;
	}

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

.prev-next .next {
		text-align: end;
	}

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

@media (width > 820px) {

.prev-next {
		font-size: 100%;
}

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

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

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

.nutshell a:not(:hover, .call-to-action) {
		filter: brightness(90%);
	}

.nutshell 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;
}

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

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

.post header {
		text-align: center;
		margin-bottom: 1.2em;
	}

.post header h2 {
			margin-bottom: .4em;
		}

.post header .meta {
			justify-content: center;
		}

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

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

	/* Override Prism’s default styles */
}
pre:is(*, [class*="language-"], [class*="language-"]), code: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-"]):where(:not(pre *)) {
	padding: .2em .3em .2em;
	border-radius: .15rem;
	background: var(--code-background, var(--color-accent2-light1));
	font-size: 89%;
}

/* 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-weight: 500;
}
pre:is(pre, [class*="language-"][class*="language-"]):where(main>*, .summary>*) {
		padding-inline: var(--content-margin);
		padding-block-start: 1rem;
		margin-inline: calc(-1 * var(--content-margin));
		border: 0 solid transparent;
		border-width: 1.5em 0;
		clip-path: polygon(var(--clip-top), var(--clip-bottom));
		--clip-top: 0 0, 100% 2em;
		--clip-bottom: 100% calc(100% - 1.5em), 0 100%;
	}
pre:is(pre, [class*="language-"][class*="language-"]):nth-of-type(odd) {
		--clip-top: 0 2em, 100% 0;
	}
pre:is(pre, [class*="language-"][class*="language-"]):nth-of-type(3n + 1),
	pre:is(pre, [class*="language-"][class*="language-"]):nth-of-type(5n + 1) {
		--clip-bottom: 100% 100%, 0 calc(100% - 1.5em);
	}
pre:is(pre, [class*="language-"][class*="language-"]) p {
		display: contents;
	}
pre:is(pre, [class*="language-"][class*="language-"]) > code {
		display: block;
		background: transparent;
		padding: 0;
		text-shadow: none;
	}
pre:is(pre, [class*="language-"][class*="language-"]):has(> code[data-file]) {
		--clip-top: 0 -1em, 100% -1em;
		padding-top: 0;
	}
pre:is(pre, [class*="language-"][class*="language-"]):has(> code[data-file]) > code[data-file]::before {
				content: "File: " attr(data-file);
				position: absolute;
				top: -2.2em;
				right: var(--content-margin);
				margin: 0;
				background: var(--color-accent);
			}

/* Utility classes */

@media not (width > 700px) {
	.long-text, .gt-sm {
		display: none !important;
	}
}
@media (width > 700px) {
	.short-text, .lt-sm {
		display: none !important;
	}
}

@media not (width > 960px) {
	.gt-md {
		display: none !important;
	}
}
@media (width > 960px) {
	.lt-md {
		display: none !important;
	}
}

.publications > article {
		padding: .5em .1em;
		border-bottom: 1px solid var(--color-gray-light);
	}

.publications > article .type {
			color: var(--color-gray-medium);
		}

.publications > article .title {
			display: block;
		}

.publications > article .authors {
			margin: 0;
		}

.publications > article .authors > .author.me {
					font-weight: bold;
				}

.publications > article .authors > .author:not(:last-of-type)::after {
					content: ", ";
				}

.publications > article > footer {
			font-size: 80%;
			color: var(--color-gray-medium);
		}

.publications > article > footer > :not(:first-child)::before {
				content: " • ";
				opacity: .7;
			}

.publications > article .venue {
			color: inherit;
		}

[data-area="press"] :is(.publications > article .venue) {
				color: black;
			}

.publications > article > .comment {
			font-size: 75%;
			color: var(--color-gray-40);
		}

.publications > article > .comment > * {
				mix-blend-mode: multiply;
			}

.publications > article > .comment a {
				color: inherit;
				text-decoration: underline;
				text-decoration-thickness: 1px;
			}

.newsletter > h3 {
		margin: 0;
	}

.newsletter .issues {
		margin: 0;
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		gap: .4em;
	}

.newsletter .issue > a {
		background: var(--color-gray-medium);
		padding: .3em .5em;
		border-radius: .2em;
		color: white;
		text-decoration: none;
		font-family: var(--font-sans);
		font-size: 80%;
	}

.newsletter .issue > a:hover {
			background: var(--color-accent);
		}

.newsletter .issue > a .issue-number {
			font-weight: bold;
		}

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

.event {
	display: grid;
	grid-template-columns: minmax(5em, auto) 1fr;
	gap: .5em;
	padding: .8em 0;
	border-bottom: 1px solid silver;
	text-indent: 0;
	list-style: none;
}

.event:last-child {
		border-bottom: 5px solid #eee;
	}

.event:before {
		content:none;
	}

.event .talk,
	.event .venue,
	.event address,
	.event .comment {
		line-height: inherit;
	}

.event .talk,
	.event .venue {
		font-size: 100%;
	}

.event .talk,
	.event .venue,
	.event p {
		margin-top: 0;
		margin-bottom: 0;
	}

.event .talk .type {
			color: var(--color-gray-medium);
			font-weight: normal;
			font-style: italic;
		}

.event .talk span.type:before {
			content: ' (';
		}

.event .talk span.type:after {
			content: ')';
		}

.event .talk a {
			display: inline-block;
			vertical-align: .1em;
			padding: .4em .4em .25em;
			margin-left: .5em;
			color: white;
			text-shadow: 0;
			font-size: 75%;
			line-height: 1;
			text-transform: uppercase;
			border-radius: .3em;
		}

.event .talk a.slides {
			background: var(--color-orange);
		}

.event .talk a.details {
			background: var(--color-accent3);
		}

.event .talk a.video {
			background: var(--color-accent4);
		}

.event .talk a:hover {
			background: var(--color-accent);
			color: white;
		}

.event .venue {
		margin-bottom:.6em;
	}

.event .date {
		color: var(--color-gray-medium);
		font-variant:small-caps;
	}

.event address,
	.event .comment,
	.event .comment[property="comment"] {
		font-size:75%;
		font-style:normal;
	}

.event address:before {
			display:inline-block;
			margin-right:.4em;
			vertical-align:-1px;
		}

.event address:not([class*="flag-"]):before {
			content: url(flags/online.png);
			vertical-align:-3px;
		}

.event address.flag-nl:before { content: url(flags/nl.png); }

.event address.flag-nz:before { content: url(flags/nz.png); }

.event address.flag-gb:before { content: url(flags/gb.png); }

.event address.flag-se:before { content: url(flags/se.png); }

.event address.flag-fi:before { content: url(flags/fi.png); }

.event address.flag-ru:before { content: url(flags/ru.png); }

.event address.flag-no:before { content: url(flags/no.png); }

.event address.flag-pl:before { content: url(flags/pl.png); }

.event address.flag-gr:before { content: url(flags/gr.png); }

.event address.flag-ch:before { content: url(flags/ch.png); }

.event address.flag-de:before { content: url(flags/de.png); }

.event address.flag-it:before { content: url(flags/it.png); }

.event address.flag-us:before { content: url(flags/us.png); }

.event address.flag-au:before { content: url(flags/au.png); }

.event address.flag-cz:before { content: url(flags/cz.png); }

.event address.flag-ca:before { content: url(flags/ca.png); }

.event address.flag-cl:before { content: url(flags/cl.png); }

.event address.flag-br:before { content: url(flags/br.png); }

.event address.flag-be:before { content: url(flags/be.png); }

.event address.flag-fr:before { content: url(flags/fr.png); }

.event address.flag-ph:before { content: url(flags/ph.png); }

.event address.flag-at:before { content: url(flags/at.png); }

.event address.flag-es:before { content: url(flags/es.png); }

.event address.flag-hu:before { content: url(flags/hu.png); }

.event address.flag-mx:before { content: url(flags/mx.png); }

.event address.flag-in:before { content: url(flags/in.png); }

.event address.flag-uy:before { content: url(flags/uy.png); }

.event address.flag-il:before { content: url(flags/il.png); }

.event address.flag-sg:before { content: url(flags/sg.png); }

.event address.flag-cn:before { content: url(flags/cn.png); }

.event address.flag-jp:before { content: url(flags/jp.png); }

.event address.flag-at:before { content: url(flags/at.png); }

.event address.flag-pt:before { content: url(flags/pt.png); }

.event address.flag-ua:before { content: url(flags/ua.png); }

.event .comment {
		color: hsl(var(--gray) 30%);
		font-size: 75%;
	}

.event .comment a {
			color: inherit;
			text-decoration: underline;
		}

.event .comment a:before {
				content:none;
			}

.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;
}

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

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

.tags-index .aliases .tag {
			font-size: 90%;
		}

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

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

a.feed {
	text-decoration: none;
	font: 60% bootstrap-icons;
	vertical-align: 1ex;
}

a.feed:not(:hover, :focus) {
		color: var(--color-orange);
	}

a.feed::before {
		content: var(--icon-rss-fill);
	}

/* Footnotes */

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

.footnotes {
	font-size: 80%;
}

.footnotes ol {
		list-style: refs;
	}

.footnotes .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;
	}

.footnotes .footnote-backref:hover,
		.footnotes .footnote-backref:focus {
			background: var(--color-accent3);
			color: white;
		}