/*
 * Fonts are self-hosted (ADR-0010, ADR-0026): Latin subsets of Anton, IBM Plex Sans and IBM Plex Mono, taken from
 * the official packages. The licences (OFL) sit beside the files. No font CDN, so no third-party request before consent.
 */

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/plex-sans-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/plex-sans-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/plex-sans-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/plex-sans-400-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+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/plex-mono-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/plex-mono-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root {
	/* Colours */
	--bg: #0a0909;
	--bg-deep: #000;
	--bg-darker: #050404;
	--bg-alt: #110f0e;
	--bg-raised: #141211;
	--bg-strip: #0e0c0c;
	--ink: #f2ede6;
	--ink-soft: #d9d2c9;
	--ink-dim: #a39b92;
	--accent: #c8211a;
	--accent-ink: #fff;
	--accent-text: #ff5245;
	--accent-hover: #ff7a6f;
	--rule: #2a2624;
	--rule-strong: #3a3431;
	--rule-stronger: #4a423e;
	--font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", menlo, monospace;
	--font-display: anton, impact, sans-serif;
	--font-serif: "IBM Plex Serif", georgia, serif;
	--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
	--gutter: 20px;
	--max: 1280px;
	--max-narrow: 1180px;
	--section-y: 64px;
}

@media (width >= 601px) {
	:root {
		--gutter: 32px;
		--section-y: 96px;
	}
}

@media (width >= 901px) {
	:root {
		--section-y: 112px;
	}
}

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

html,
body {
	margin: 0;
	padding: 0;
}

body {
	background: var(--bg);
	color: var(--ink);
	font: 17px/1.6 var(--font-sans);
}

img,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--accent);
	text-underline-offset: 3px;
}

.skip-link {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 10000;
	padding: 12px 18px;
	background: var(--accent);
	color: var(--accent-ink);
	text-decoration: none;
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* Reveal on scroll: content is hidden only when scripts run, so pages stay readable without JavaScript. */
@media (scripting: enabled) {
	[data-reveal] {
		opacity: 0;
		transform: translateY(24px);
		transition:
			opacity 700ms var(--ease-out) var(--reveal-delay, 0ms),
			transform 800ms var(--ease-out) var(--reveal-delay, 0ms);
	}

	[data-reveal].is-visible {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		transition: none;
	}
}