.sidenote-container {
	counter-reset: sidenote;
}

.sidenote {
	display: none;

	@media (min-width: 1500px) {
		display: block;
		position: absolute;
		inset-inline-start: 72rem;
		inset-inline-end: 3rem;
		max-inline-size: 60ch;
		font-size: small;
		line-height: 1.5;
		color: light-dark(var(--grey), var(--white));
		transition: background-color 0.25s;
		border-block-start: 1px solid light-dark(var(--white), var(--bright_grey));

		&::before {
			position: absolute;
			inset-block-start: -1.5rem;
			counter-increment: sidenote;
			content: counter(sidenote);
		}

		p {
			padding-block-start: 0.25rem;
		}

		> * + * {
			margin-block-start: 0.5rem;
		}
	}
}

.footnote-button.highlight,
.sidenote.highlight {
	outline: 2px solid var(--blue);
}

.sidenote:hover {
	color: inherit;
}

.footnote-popover {
	position: fixed;
	inline-size: 100%;
	max-inline-size: min(var(--article-width, 60ch), 100vi - 2rem);
	inset-block-start: anchor(bottom);
	inset-inline-start: 13.5rem;
	margin-block-start: 0.5rem;
	padding-block: 0.5rem;
	padding-inline: 1rem;
	color: inherit;
	border: 2px solid light-dark(var(--white), var(--bright_grey));
	background: light-dark(var(--bright_white), var(--black));
	font-size: small;
	box-shadow: 0 0.5rem 2rem rgb(0, 0, 0, 0.5);

	@media (max-width: 45rem) {
		inset-inline-start: 0.8rem;
	}

	> * + * {
		margin-block-start: 0.5rem;
	}
}

[data-footnote-backref] {
	display: none;
}

.footnotes {
	margin-block-start: 4rem;
	margin-inline: 3rem;

	@media (max-width: 45rem) {
		margin-inline: 1rem;
	}

	&::before {
		content: "✷✷✷";
		display: block;
		text-align: center;
		margin-block-end: 3rem;
	}

	li {
		font-size: small;
		line-height: 1.5;

		p {
			border-inline-start: 2px solid light-dark(var(--white), var(--bright_grey));
			padding-inline-start: 1rem;
			margin-inline-start: 0.5rem;
			padding-block: 0.25rem;
			margin-block-start: 0;

			+ p {
				padding-block-start: 0.5rem;
			}
		}

		&:target p {
			background: light-dark(var(--white), var(--dark_grey));
			border-color: var(--blue);
		}

		[data-footnote-backref]::after {
			content: none;
		}
	}
}

[data-footnote-ref]::after {
	display: none;
	padding-inline: 0.25rem;
}

.footnote-button {
	display: initial;
	background: none;
	padding-inline: 0.25rem;
	line-height: 0;

	&:hover,
	&:focus {
		background: none;
		color: inherit;
		text-decoration-thickness: 1rem;
		text-underline-offset: -0.7rem;
	}
}