/* Fonts - self-hosted, Latin subset only */
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/archivo-variable.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Libre Caslon Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/libre-caslon-display-400.woff2') format('woff2');
}

:root {
	/* Colour */
	--paper: #F2EFE9;
	--paper-canvas: #E8E4DB;
	--ink: #1A1815;
	--ink-soft: #4A463D;
	--ink-mute: #6E6A5F;
	--ink-faint: #57534A;
	--olive: #3E4B33;
	--line: #DAD5CA;
	--line-strong: #C9C3B6;
	--line-dark: #34322C;
	--ink-dim: #7C786D;
	--ink-dim-2: #A9A498;
	--placeholder: #E4E0D7;
	--placeholder-2: #DFDBD1;
	--alert: #8C4A3A;

	/* Swatch colours */
	--swatch-bone: #E7E2D6;
	--swatch-olive: #3E4B33;
	--swatch-ink: #1A1815;
	--swatch-tan: #B9A88F;
	--swatch-navy: #2B3A55;
	--swatch-rust: #8C4A3A;

	/* Typography */
	--font-display: 'Libre Caslon Display', Georgia, 'Times New Roman', serif;
	--font-body: 'Archivo', -apple-system, 'Segoe UI', sans-serif;
	--font-mono: 'IBM Plex Mono', 'Courier New', monospace;

	/* Spacing (base unit 4px) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 26px;
	--space-7: 28px;
	--space-8: 34px;
	--space-9: 44px;
	--space-10: 48px;
	--space-11: 56px;
	--space-12: 72px;

	--gutter-desktop: 48px;
	--gutter-mobile: 20px;

	--transition-fast: 180ms ease-out;

	/* Proportional scale.

	   One length that drives the whole above-the-fold composition, so the
	   landing view is the same picture at 720p, 1080p, 1440p, 4K and beyond
	   rather than a fixed-size block stranded in the middle of a big screen.

	   It resolves to exactly 1px at the design's 1440x900 anchor, so every
	   figure from the handoff can be written literally:
	   calc(92 * var(--mw-scale)) IS the 92px hero headline.

	     1280x720  -> 0.80     1440x900  -> 1.00     1920x1080 -> 1.20
	     2560x1440 -> 1.60     3840x2160 -> 2.40     7680x4320 -> 4.80

	   min() takes the limiting axis. Scaling on width alone would overflow
	   a short screen vertically; on height alone it would overflow a narrow
	   one horizontally.

	   Deliberately uncapped at the top: a 4K panel driven at 100% really
	   should render this 2.4x larger, which is what "identical at every
	   resolution" means. Most high-DPI screens report a 1920-2560 CSS
	   viewport after OS scaling, so the everyday range is about 1.2-1.6.

	   Pinned to 1px below 901px, where the layout switches to the compact
	   strategy and this model no longer applies. */
	--mw-scale: 1px;

	/* The same scale, floored for the page chrome.

	   The header and announcement are small fixed UI text (11-12px at the
	   anchor). Scaled by pure proportion they hit 6.9px on a 901px window,
	   which is past legibility, so the chrome stops shrinking at 0.85 while
	   the hero's display type carries on down.

	   Splitting the two is what keeps the headline at three lines on a
	   1024px window: a single floored scale forced the type larger than
	   proportional in a column too narrow for it, and bought a fourth line. */
	--mw-chrome-scale: max(0.85px, var(--mw-scale));

	/* Height of the fixed page chrome above the fold: announcement bar (40)
	   + header (78). Anything that wants to fit the first screen sizes
	   itself against calc(100dvh - var(--mw-chrome-h)). */
	--mw-chrome-h: calc(118 * var(--mw-chrome-scale));

	/* Reserved for the sticky mobile tab bar; 0 on desktop, where it is hidden. */
	--mw-tabbar-h: 0px;
}

@media (min-width: 901px) {
	:root {
		--mw-scale: min(100vw / 1440, 100dvh / 900);
	}
}

/* Announcement bar is toggleable from the Customizer - when it is off the
   chrome is the header alone, and the hero should claim the height back. */
.mw-page:not(:has(.mw-announcement)) {
	--mw-chrome-h: calc(78 * var(--mw-scale));
}

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

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

body {
	margin: 0;
	background: var(--paper-canvas);
	color: var(--ink-soft);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font-family: inherit;
	cursor: pointer;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1,
h2,
h3,
h4,
p {
	margin: 0;
}

input,
select,
button,
textarea {
	font-family: inherit;
	border-radius: 0;
}

/* Load-bearing: this aesthetic has zero rounded corners, zero shadows, zero gradients */
*,
input,
button,
select,
textarea,
img {
	border-radius: 0 !important;
	box-shadow: none;
}

.mw-mono {
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.mw-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mw-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ink);
	color: var(--paper);
	padding: var(--space-3) var(--space-5);
	z-index: 200;
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 12px;
}

.mw-skip-link:focus {
	left: var(--space-4);
	top: var(--space-4);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}