html {
	/* Layout: 1.5rem | side 13rem | main 30rem | 1.5rem
	   Hard-coded in @container queries later
	   Below, we add 1rem extra to work around what I think are rounding issues */
	font-size: clamp(1rem, calc(100vw / (1.5 + 13 + 30 + 1.5 + 1)), 1.3rem);
	--main: 30rem;
	--side: 13rem;
	--body-padding: 1.5rem;
	--side-color: #667;
	--link-color: #36c;

	font-family: Charter, Bitstream Charter, XCharter, Sitka Text, ui-serif, serif;
	line-height: 1.45;
	scroll-behavior: smooth;
	container-type: inline-size;

	/* SVG because browers don't anti-aliase rotated gradients */
	background: url('data:image/svg+xml,\
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none">\
		<polygon points="0 0 .9 0 0 1" fill="rgb(204,221,170)" />\
	</svg>'),
	url('data:image/svg+xml,\
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none">\
		<polygon points="1 1 1 0 .3 0" fill="rgb(102,102,119)" />\
	</svg>');
	background-repeat: no-repeat;
	background-size: 100vw 1.2em, 100vw 1.3em;
}

body {
	max-width: var(--main);
	padding: 2rem var(--body-padding) 1px;
	margin: 0 auto;
}

[role=note] {
	color: var(--side-color);
	padding: 1rem;
}

@container (width >= calc(1.5rem + 13rem + 30rem + 1.5rem)) {
	body:has([role=note]) {
		margin-left: clamp(
			var(--side),
			calc(var(--side) + (100% - var(--main) - 2 * var(--side)) / 2),
			100%);
	}

	[role=note] {
		border: none;
		padding: 0;
		float: left;
		clear: left;
		margin-left: calc(-1 * var(--side));
		width: calc(var(--side) - 2.5em);
		text-align: right;
		text-wrap: balance;
		hyphens: auto;
	}
}

main > *:where(:not(style, script)) {
	margin-bottom: 0;
	margin-top: 1em;

	/* For the margin notes
	   Until CSS grid lanes are supported */
	display: inline-block;
	box-sizing:border-box;
	width: 100%;
}

h1, h2, h3 {
	font-size: 1.10em;
	margin: 1.4rem 0 0;
	text-wrap: balance;
}
h1 {
	font-size: 2em;
	font-weight: lighter;
	line-height: 1.2;
}
hgroup {
	margin: 0;
	display: flex;
	align-items: last baseline;
	:first-child { flex: 1; }
	small::before { content: "[ "; }
	small::after  { content: " ]"; }
}

a {
	color: inherit;
	&:not(:hover, :focus) {
		text-decoration-color: 667;
		text-decoration-color: gray;
		text-decoration-thickness: .01em;
	}
}

code {
	font-size-adjust: .481;
	font-family: Menlo, IBM Plex Mono, ui-monospace, monospace;
	:not(pre) > & { line-height: 0; }
}

pre code {
	font-size: .8rem;
}

figure {
	margin-left: 0;
	margin-right: 0;
	padding-left: 1em;
	padding-right: 1em;
	text-align: center;
}

ol, ul {
	list-style-position: inside;
	padding-left: 0;
	ol, ul {
		margin-top: .14rem;
		padding-left: 2rem;
	}

	li:not(:first-of-type) {
		margin-top: .5em;
	}

	/* :not() instead of cascade because safari bug */
	li:not(.chrono *, .short *)::before {
		padding-left: 1em;
		content: "";
	}
}

@counter-style year {
	system: extends decimal;
	suffix: "";
}
ol.chrono {
	list-style: year inside;

	ul {
		margin-top: .25em;
		padding-left: 1em;

		/* for safari bug */
		li::before { content: ""; }
	}
}

ol.chrono ul, ul.short {
	list-style: none;
}

table.toc {
	display: table;
	width: 100%;
	border-spacing: 0 .3em;

	td + td {
		text-align: right;
		vertical-align: top;
		padding-left: .5em;
	}

	a {
		color: inherit;
	}
}

body > header {
	text-align: center;
	h1 { margin: 0; }
	nav {
		justify-content: center;
		display: flex;
		gap: 1rem;
	}
}

:target {
	position: relative;
	&::before {
		position: absolute;
		left: -1rem;
		content: ">" / "";
		color: var(--link-color);
	}
}

main header {
	display: flex;
	flex-wrap: wrap;
	justify-content: end;
	gap: 1rem;
	margin: 0 0 .4rem;
	h1, hgroup {
		display: block;
		width: 100%;
		margin: 0;
		p {
			margin: 0 0 0 1.4rem;
			text-wrap: balance;
			font-size: smaller;
		}
	}
}

footer {
	display: grid;
	align-items: center;
	grid-template-columns: 1fr auto 1fr;
	:first-child { text-align: left; }
	:last-child  { text-align: right; }
	padding: calc(1.4rem + 1px) 1.4rem 1.4rem;
	margin-top: calc(3 * 1.4rem);
	background: linear-gradient(var(--side-color)) top center no-repeat;
	background-size: 15rem 1px;
}

.logo {
	&, *, * * {
		display: block;
		width: 3em;
		height: 3em;
	}

	&.rotating {
		div {
			position: relative;
			transform-style: preserve-3d;
			transition: transform .5s ease-out;
		}

		div * {
			position: absolute;
			backface-visibility: hidden;
		}

		&:hover div, div *:last-child{
			transform: rotateY(180deg);
		}
	}
}