@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 900;
	font-stretch: 100%;
	font-display: swap;
	src: url("../assets/fonts/archivo-latin-ext.woff2") format("woff2");
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 900;
	font-stretch: 100%;
	font-display: swap;
	src: url("../assets/fonts/archivo-latin.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../assets/fonts/source-serif-4-latin-ext.woff2") format("woff2");
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../assets/fonts/source-serif-4-latin.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Source Serif 4";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../assets/fonts/source-serif-4-italic-latin-ext.woff2")
		format("woff2");
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Source Serif 4";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../assets/fonts/source-serif-4-italic-latin.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "ITC Modern No. 216";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src:
		url("../assets/fonts/itc-modern-no-216-light.woff2") format("woff2"),
		local("ITCModernNo.216W01-Lt"),
		local("ITC Modern No. 216 W01 Lg");
}

@font-face {
	font-family: "ITC Modern No. 216";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src:
		url("../assets/fonts/itc-modern-no-216-regular.woff2") format("woff2"),
		local("Modern No. 216 Regular");
}

:root {
	color-scheme: light;

	/* Semantic palette */
	--color-brand: #102a78;
	--color-brand-deep: #071d5c;
	--color-accent: #ef4a47;
	--color-highlight: #f7c843;
	--color-surface: #fbfbf8;
	--color-ink: #111;
	--color-on-dark: #fff;
	--color-disc: #f06a3f;
	--color-grid-line: rgb(16 42 120 / 11%);
	--color-case-shadow: rgb(0 0 0 / 22%);
	--color-paper-grain: rgb(17 17 17 / 2.5%);
	--color-registration: var(--color-accent);
	--color-rule: rgb(16 42 120 / 14%);

	/* Shared dimensions and typography */
	--font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--font-sans: "Archivo", Arial, Helvetica, sans-serif;
	--font-heading: "ITC Modern No. 216", var(--font-serif);
	/*--font-size-label: 0.625rem;*/
	--font-size-label: 0.675rem;
	--font-size-body: 1.125rem;
}

@supports (color: color-mix(in oklch, black, white)) {
	:root {
		--color-grid-line: color-mix(in oklch, var(--color-brand) 11%, transparent);
		--color-case-shadow: color-mix(in oklch, black 22%, transparent);
		--color-rule: color-mix(in oklch, var(--color-brand) 14%, transparent);
	}
}

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

html {
	background: var(--color-surface);
	scrollbar-gutter: stable;
}

body {
	margin: 0;
	color: var(--color-brand);
	font-family: var(--font-serif);
	-webkit-font-smoothing: antialiased;
}

body::before {
	position: fixed;
	inset: 0.75rem;
	z-index: 1000;
	background:
		linear-gradient(var(--color-registration) 0 0) left top / 1.125rem 1px
		no-repeat,
		linear-gradient(var(--color-registration) 0 0) left top / 1px 1.125rem
		no-repeat,
		linear-gradient(var(--color-registration) 0 0) right top / 1.125rem 1px
		no-repeat,
		linear-gradient(var(--color-registration) 0 0) right top / 1px 1.125rem
		no-repeat,
		linear-gradient(var(--color-registration) 0 0) left bottom / 1.125rem 1px
		no-repeat,
		linear-gradient(var(--color-registration) 0 0) left bottom / 1px 1.125rem
		no-repeat,
		linear-gradient(var(--color-registration) 0 0) right bottom / 1.125rem 1px
		no-repeat,
		linear-gradient(var(--color-registration) 0 0) right bottom / 1px 1.125rem
		no-repeat;
	content: "";
	pointer-events: none;
}

::selection {
	background-color: rgb(247 200 67 / 70%);
	color: var(--color-ink);
}

.visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	border: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (width <= 42.5rem), (forced-colors: active) {
	body::before {
		display: none;
	}
}

@media (prefers-contrast: more) {
	:root {
		--color-grid-line: rgb(16 42 120 / 22%);
	}

	@supports (color: color-mix(in oklch, black, white)) {
		:root {
			--color-grid-line: color-mix(in oklch, var(--color-brand) 22%, transparent);
		}
	}
}

/* the controller-symbol divider, shared across pages */

.controller-divider {
	--controller-glyph-size: 1rem;

	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	block-size: 1px;
	border: 0;
	margin-block: 3.75rem 3rem;
	background: transparent;
	color: var(--color-accent);
	font-size: var(--controller-glyph-size);
	overflow: visible;

	&::before,
	&::after {
		flex: 1 1 auto;
		block-size: 1px;
		content: "";
	}

	&::before {
		background: linear-gradient(90deg, transparent, var(--color-brand) 20% 40%);
	}

	&::after {
		background: linear-gradient(90deg, var(--color-brand) 60% 80%, transparent);
	}

	/* A fixed box gives every glyph the same optical centre. The font
	   sizes and offsets compensate for Archivo's differing ink bounds. */
	> span {
		--controller-glyph-offset: 0;

		display: inline-grid;
		block-size: 1.25rem;
		padding-inline: 0.5rem;
		background: transparent;
		color: var(--color-accent);
		font-family: var(--font-sans);
		font-size: 1em;
		font-weight: 800;
		line-height: 1;
		place-items: center;
		translate: 0 var(--controller-glyph-offset);
	}

	> span:nth-child(1) {
		--controller-glyph-offset: -0.8px;

		padding-inline-start: 1.15rem;
		font-size: 1.062em;
	}
	> span:nth-child(2) {
		--controller-glyph-offset: 0;

		position: relative;
		color: transparent;
		font-size: 0.974em;

		/* Font engines position Archivo's × differently. Draw the same
		   mark from two centred strokes so Safari and Chromium agree. */
		&::before,
		&::after {
			position: absolute;
			inset-block-start: 50%;
			inset-inline-start: 50%;
			inline-size: 0.6rem;
			block-size: 0.16rem;
			background: var(--color-accent);
			content: "";
		}

		&::before {
			transform: translate(-50%, -50%) rotate(45deg);
		}
		&::after {
			transform: translate(-50%, -50%) rotate(-45deg);
		}
	}
	> span:nth-child(3) {
		--controller-glyph-offset: -0.6px;

		font-size: 0.69em;
	}
	> span:nth-child(4) {
		--controller-glyph-offset: -1.6px;

		padding-inline-end: 1.15rem;
		font-size: 1em;
	}
}