*, *::before, *::after {
	box-sizing: border-box;
}

:root {
	color-scheme: light dark;
	--ref-offset: 2ch;
	--faint: color-mix(in hwb, var(--fg) 75%, var(--bg));
}

@media (prefers-color-scheme: light) {
	:root {
		--fg: black;
		--bg: white;
	}

	a, a:visited {
		color: blue;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--fg: white;
		--bg: black;
	}

	a, a:visited {
		color: #AAF;
	}
}

@keyframes move-out {
	from { transform: translateY(0%);    }
	to   { transform: translateY(-100%); }
}

@keyframes move-in {
	from { transform: translateY(100%); }
	to   { transform: translateY(0%);   }
}

@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: 0.4s ease-in both move-out;
}

::view-transition-new(root) {
	animation: 0.4s ease-in both move-in;
}

@media (max-width: 750px) {
	h1 { font-size: 2.0rem; }
	h2 { font-size: 1.5rem; }

	li.article {
		flex-direction: column;

		time {
			font-size: 0.9rem;
		}

		& + & {
			margin-block-start: 1ch;
		}
	}

	aside {
		width: calc(100% - var(--ref-offset));
		margin-inline-start: var(--ref-offset);
	}

	div.head {
		flex-direction: column;
		align-items: flex-start !important;

		menu {
			margin-block: 0;
		}
	}
}

h1, h2 {
	text-wrap: balance;
}

body {
	text-align: justify;
	width: min(800px, 90%);
	margin-inline: auto;
	font-size: 18px;
	font-family: serif;
}

blockquote {
	p:first-child::before { content: '‘'; }
	p:last-child::after   { content: '’'; }

	&:lang(de) {
		p:first-child::before { content: '„'; }
		p:last-child::after   { content: '“'; }
	}

	& + figcaption::before { content: '— '; }
}

blockquote,
blockquote + figcaption {
	font-style: italic;
}

.quote {
	border-left: 4px solid var(--fg);
	padding: .4rem .8rem;
	margin-inline: 1rem 0;
	margin-block: 2rem;

	blockquote {
		margin-inline-start: 1rem;
		&, p {
			margin-block: .5rem;
		}
	}

	figcaption {
		margin-inline-start: 2rem;
		margin-block: .5rem;
	}
}

header {
	> div {
		menu {
			display: flex;
			gap: 2ch;
		}

		li {
			list-style: none;
		}
	}

	div.head {
		display: flex;
		justify-content: space-between;
		align-items: center;

		menu {
			display: flex;
			gap: 2ch;
		}

		li {
			list-style: none;
		}
	}
}

.article {
	display: flex;
	justify-content: space-between;
}

figure pre.code-sample {
	overflow-x: scroll;
	tab-size: 4;

	> code {
		counter-increment: line;
		&::before {
			position: absolute;

			margin-left: -4ch;
			padding-right: .5ch;
			width: 3ch;

			text-align: right;
			content: counter(line);
			color: var(--fg);
			border-right: 1px solid var(--fg);
		}
	}
}

footer {
	margin-block: 2rem;
	text-align: center;
	font-style: italic;
}

ins, del { text-decoration: none; }
ins      { color: green; }
del      { color: red;   }

.hl-red { color: red; }

aside {
	margin-block: 1rem;
	font-style: italic;
	color: var(--faint);

	&[data-ref]::before {
		font-style: normal;
		position: absolute;
		margin-inline-start: calc(-1 * var(--ref-offset));
		content: attr(data-ref);
	}
}