/* 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;
		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;
		hanging-punctuation: none;
	}

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

	button {
		cursor: pointer;
	}

	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;
			text-decoration: underline dotted;
		}
	}

	sup,
	sub {
		line-height: 0;
	}

	summary {
		cursor: pointer;
	}

	:disabled {
		opacity: 0.8;
		cursor: not-allowed;
	}
}
/* end reset */

:root {
	/* Color primitives ---------------------- */
	--color-base-100: #f4f4f1;
	--color-base-150: #ecece9;
	--color-base-200: #e4e4e1;
	--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;

	--gutter: clamp(1.5rem, 2vw, 5rem);

	--bg-color: var(--color-base-100);
	--tx-color: var(--color-base-900);
	--tx-muted: var(--color-base-700);
	font-family: "Times New Roman", Times, serif;
	font-size: 0.95rem;
}

* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	overflow: hidden;
}

body {
	margin: 0;
	background: var(--bg-color);
	color: var(--tx-color);

	display: flex;
	align-items: center;
	height: 100dvh;
	margin: 0;
	padding: 0 var(--gutter);
	gap: var(--gutter);
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

body > * {
	padding: clamp(1rem, 4vh, 3rem) 0;
}

header {
	flex: 0 0 auto;
	height: 100%;
	margin: 0;
	padding: clamp(1rem, 4vh, 3rem) 0;
	display: flex;
}

.info {
	align-self: flex-end;
	margin-right: 5rem;
}

h1 {
	font-weight: normal;
	font-size: 1.5rem;
}

h2 {
	font-weight: normal;
	font-size: 0.9rem;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--tx-muted);
	margin-bottom: 0.25rem;
}

p {
	margin-bottom: 0.4lh;
}

ul {
	padding-left: 3ch;
}
li {
	margin-bottom: 0.3lh;
}

li:last-child {
	margin-bottom: 0;
}

a {
	color: var(--tx-color);
	background-color: var(--color-base-200);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* A single horizontal filmstrip: each plate is sized to the row's
   height, so its width falls out of its own aspect ratio and single
   pages naturally render at half the width of a spread. */
.plates {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	height: 100dvh;
	margin: 0;
	padding-right: var(--gutter);
	gap: var(--gutter);
	-webkit-overflow-scrolling: touch;
}

.plate {
	flex: 0 0 auto;
	height: 100%;
	margin: 0;
	display: block;
	height: 100%;
	color: inherit;
}

.plate img {
	display: block;
	height: 100%;
	width: auto;
	border: solid 1px var(--color-base-200);
}

footer {
	margin-left: calc(2 * var(--gutter));
	margin-right: 20vw;
	display: flex;
	align-items: end;
	gap: var(--gutter);
	flex-shrink: 0;
	height: 100%;
}

footer img {
	display: block;
	height: 100%;
	max-height: 25rem;
	width: auto;
	border: solid 1px var(--color-base-200);
}

.credits {
	max-width: 40ch;
}

.colophon {
	margin-bottom: 2rem;
}
@media (max-width: 640px) {
	.plate {
		padding: 1rem 0;
	}
}

/* Theme switcher */
#theme-switcher {
	--stroke-width: 1.25px;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

#theme-switcher .theme-option {
	position: relative;
	padding: 0;
	border: solid var(--stroke-width) var(--tx-color);
	color: inherit;
	cursor: pointer;
	width: 1.1rem;
	aspect-ratio: 1;
}

#theme-switcher .theme-option[data-theme-value="light"] {
	background: var(--color-base-100);
	color: var(--color-base-900);
}

#theme-switcher .theme-option[data-theme-value="dark"] {
	background: var(--color-base-900);
	color: var(--color-base-100);
}

#theme-switcher .theme-option::before,
#theme-switcher .theme-option::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 65%;
	height: var(--stroke-width);
	background: currentColor;
	opacity: 0;
}

#theme-switcher .theme-option::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

#theme-switcher .theme-option::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

#theme-switcher .theme-option.is-active,
#theme-switcher .theme-option:not(.is-active):hover {
	border: solid var(--stroke-width) var(--tx-color);
}

#theme-switcher .theme-option.is-active::before,
#theme-switcher .theme-option.is-active::after,
#theme-switcher .theme-option:not(.is-active):hover::before,
#theme-switcher .theme-option:not(.is-active):hover::after {
	opacity: 1;
}

/* Themes */
[data-theme="dark"] {
	--bg-color: var(--color-base-900);
	--tx-color: var(--color-base-100);
	--tx-muted: var(--color-base-300);
}
[data-theme="dark"] .plate img {
	border: solid 1px var(--color-base-800);
}