:root {
	--color-base-100: #f4f4f1;
	--color-base-150: #ecece9;
	--color-base-200: #ecece9;
	--color-base-250: #dadad7;
	--color-base-300: #cfcfcc;
	--color-base-350: #c5c5c2;
	--color-base-400: #babab7;
	--color-base-500: #a1a19e;
	--color-base-600: #848482;
	--color-base-700: #6a6a68;
	--color-base-800: #3d3d3b;
	--color-base-900: #2e2e2c;

	/* Layout sizing - for padding and margins */
	--size-2-1: 0.125rem;
	--size-2-2: 0.25rem;
	--size-2-3: 0.375rem;
	--size-4-1: 0.25rem;
	--size-4-2: 0.5rem;
	--size-4-3: 0.75rem;
	--size-4-4: 1rem;
	--size-4-5: 1.25rem;
	--size-4-6: 1.5rem;
	--size-4-8: 2rem;
	--size-4-9: 2.25rem;
	--size-4-10: 2.5rem;
	--size-4-12: 3rem;
	--size-4-16: 4rem;
	--size-4-18: 4.5rem;

	/* Color mappings ------------------------ */
	/* Backgrounds */
	--background-primary: #fff;
	--background-primary-alt: var(--color-base-200);
	--background-modifier-border: var(--color-base-300);
	--background-modifier-border-hover: var(--color-base-350);
	--background-modifier-border-focus: var(--color-base-400);

	/* Typography primitives ----------------- */
	/* Font sizes */
	--font-base-serif: 0.95rem;
	--font-base-sans: 0.9rem;
}

/* Vale's CSS Reset https://vale.rocks/posts/css-reset */
@layer {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
		background-repeat: no-repeat;
	}

	* {
		padding: 0;
		margin: 0;
	}

	html {
		-webkit-text-size-adjust: none;
		-moz-text-size-adjust: none;
		     text-size-adjust: none;
		block-size: 100%;
	}

	body {
		min-block-size: 100%;
	}

	img,
	iframe,
	audio,
	video,
	canvas {
		display: block;
		max-inline-size: 100%;
		block-size: auto;
	}

	svg {
		max-inline-size: 100%;
	}

	svg:not([fill]) {
		fill: currentColor;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
	}

	textarea {
		resize: vertical;
	}

	fieldset,
	iframe {
		border: none;
	}

	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}

	p {
		text-wrap: pretty;
		font-variant-numeric: proportional-nums;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-variant-numeric: lining-nums;
	}

	p,
	blockquote,
	q,
	figcaption,
	li {
		hanging-punctuation: first allow-end last;
	}

	input,
	label,
	button,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		line-height: 1.1;
	}

	math,
	time,
	table {
		font-variant-numeric: tabular-nums lining-nums slashed-zero;
	}

	code {
		font-variant-numeric: slashed-zero;
	}

	table {
		border-collapse: collapse;
	}

	abbr {
		font-variant-caps: all-small-caps;
		text-decoration: none;

		&[title] {
			cursor: help;
			-webkit-text-decoration: underline dotted;
			        text-decoration: underline dotted;
		}
	}

	sup,
	sub {
		line-height: 0;
	}

	summary {
		cursor: pointer;
	}

	:disabled {
		opacity: 0.8;
		cursor: not-allowed;
	}

	:focus-visible {
		outline-offset: 0.2rem;
	}
}

/* end reset */
body {
	font-size: 0.95rem;
	background-color: var(--background-primary);
	color: var(--color-base-900);
	line-height: 1.2;
}
.annotations {
	max-width: var(--spread-width);
}
.annotation {
	display: flex;
	align-items: baseline;
	gap: var(--size-4-2);
	font-size: var(--font-base-serif);

	&:last-child {
		padding-bottom: 1px;
	}
}
.annotation-title {
	color: var(--color-base-900);
}
.notebook-viewer {
	--page-width: calc(var(--notebook-width) * var(--in-rem-ratio));
	--page-height: calc(var(--notebook-height) * var(--in-rem-ratio));
	--spread-width: calc(2 * var(--page-width));
	--spread-height: var(--page-height);
	position: relative;
	padding: var(--size-4-3) var(--size-4-3);
	padding-bottom: var(--size-4-2);
}
.notebook-container {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	height: auto;
	max-width: var(--spread-width);
	width: 100%;
	position: relative;
}
.spread-image {
	-o-object-fit: cover;
	   object-fit: cover;
	width: 100%;
}
.cover-image {
	display: none;
}
.page-link {
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	background-color: transparent;
	border: none;

	&.prev {
		cursor: w-resize;
	}
	&.next {
		right: 0;
		cursor: e-resize;
	}
}
.notebook-viewer[data-spread="0"] {
	display: flex;
	height: 100%;
	& .page-link.next {
		width: 100%;
	}
	& .page-link.prev {
		width: 0%;
	}
	& .spread-image {
		display: none;
	}
	& .cover-image {
		display: block;
		height: 100%;
		width: auto;
		max-width: none;
	}
}
.toc {
	position: relative;
	grid-area: toc;
	overflow-y: auto;
	container-type: size;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent,
		black 14px,
		black calc(100% - 14px),
		transparent
	);
	        mask-image: linear-gradient(
		to bottom,
		transparent,
		black 14px,
		black calc(100% - 14px),
		transparent
	);
	padding-top: 12px;
}
.toc ol {
	list-style: none;
	padding-bottom: 50cqh;
}
.toc ol > li {
	position: relative;
	padding-bottom: var(--size-2-2);
	display: flex;
	align-items: stretch;
	gap: var(--size-2-3);

}
.toc .spine {
	box-sizing: content-box;
	margin-top: 0.13124999999999998rem;
	margin-bottom: 0.351953125rem;
	width: 0.3ch;
	border: solid 1px black;
	border-right: none;
	opacity: 0;
}
.toc summary {
	display: inline-block; /* hide default arrow */
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
}
.toc:has(details[open]) > ol > li:not(:has(details[open])) {
	opacity: 0.2;
}
.toc li:has(details[open]) .spine {
	opacity: 1;
}
.toc .content {
	margin-top: var(--size-2-1);
}
header {
	grid-area: header;

	display: grid;
	/* Subgrid is hardcoded here because Safari has an inexplicable bug that will
	 * cause toc to take up the full height of header. Thanks, Tim. */
	grid-template-rows: 1fr var(--layout-row) 1fr;
	grid-template-columns: 1fr;
	grid-template-areas:
		"."
		"toc"
		".";
}
header > * {
	padding: var(--size-4-2);
	padding-left: var(--size-4-4);
}
body {
	height: 100vh;
	padding: var(--size-4-3);

	display: grid;
	grid-template-columns: 1fr var(--layout-col) 1fr;
	grid-template-rows: 1fr var(--layout-row) 1fr;
	grid-template-areas:
		"header . ."
		"header book ."
		"header . .";
	transition: grid-template-columns 500ms cubic-bezier(0.08, 0.9, 0.11, 1);
}
main {
	grid-area: book;
}
main {
	position: absolute;
	top: calc((100% - var(--layout-row)) / 2);
	left: calc((100% - var(--layout-col)) / 2);
	width: var(--layout-col);
	height: var(--layout-row);
}
body:has(> main > .notebook-viewer[data-spread="0"]) {
	grid-template-columns: 1fr calc(var(--layout-col) / 2) 1fr;
	& main {
		left: calc((100% - var(--layout-col) / 2) / 2);
		width: calc(var(--layout-col) / 2);
	}
}
.marks {
	--offset: calc(100% - 0.5rem);
	grid-row: 1 / -1;
	grid-column: 1 / -1;

	display: grid;
	grid-template-rows: subgrid;
	grid-template-columns: subgrid;

	grid-template-areas:
		". top ."
		"left . right"
		". bottom .";
	pointer-events: none;
}
.marks > * {
	width: 100%;
	height: 100%;
	position: relative;
}
.marks .left {
	grid-area: left;
}
.marks .bottom {
	grid-area: bottom;
}
.marks .top {
	grid-area: top;
}
.marks .right {
	grid-area: right;
}
.marks .outer.top {
	grid-row: 1;
	grid-column: 1 / -1;
}
.marks .outer.bottom {
	grid-row: 3;
	grid-column: 1 / -1;
}
.marks .outer.right {
	grid-column: 3;
	grid-row: 1 / -1;
}
.marks .outer.left {
	grid-column: 1;
	grid-row: 1 / -1;
}
.marks *:before, .marks *:after {
	content: "";
	position: absolute;
}
.marks {
	opacity: 0.2;
}
.marks .top:before,
.marks .inner.top:after,
.marks .bottom:before,
.marks .inner.bottom:after {
	border-left: 1px solid;
	border-right: 1px solid;
	height: 1rem;
	width: 100%;
}
.marks .right:before,
.marks .inner.right:after,
.marks .left:before,
.marks .inner.left:after {
	border-top: 1px solid;
	border-bottom: 1px solid;
	width: 1rem;
	height: 100%;
}
.marks .top:before {
	bottom: var(--offset);
}
.marks .inner.top:after {
	top: var(--offset);
}
.marks .inner.bottom:after {
	bottom: var(--offset);
}
.marks .bottom:before {
	top: var(--offset);
}
.marks .inner.right:after {
	right: var(--offset);
}
.marks .right:before {
	left: var(--offset);
}
.marks .inner.left:after {
	left: var(--offset);
}
.marks .left:before {
	right: var(--offset);
}