@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	/* The composition is sized to this font: a wider fallback must not flash in. */
	font-display: block;
	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;
}

:root {
	color-scheme: dark;
	--main: #101010;
	--white: #FFFFFF;
}

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

html {
	background: var(--main);
	color: var(--white);
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	min-height: 100vh;
	font-size: 1.125rem;
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1 {
	font: inherit;
}

::selection {
	background: var(--white);
	color: var(--main);
}

/* Stacked layout (UI spec 16.4): the frame's heading block scaled by the "EveryThing" size --e. */
.page {
	--pad: 16px;
	--e: clamp(1rem, calc((100vw - 2 * var(--pad)) / 6.05), 6.8rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 48px var(--pad);
}

.heading > span {
	display: block;
	letter-spacing: 0;
	white-space: nowrap;
}

.we {
	margin-left: calc(var(--e) * 0.588235);
	font-size: max(1rem, calc(var(--e) * 0.362745));
	font-weight: 300;
	line-height: 1.2568;
}

.create {
	margin-top: calc(var(--e) * -0.240196);
	font-size: calc(var(--e) * 0.754902);
	font-weight: 300;
	line-height: 1.2597;
}

.everything {
	margin-top: calc(var(--e) * 0.063725);
	font-size: var(--e);
	font-weight: 800;
	line-height: 1.2598;
}

/* The logotype's underscore, repeated: a sharp white block, centered on the baseline as in the frame. */
.everything::before {
	content: "";
	display: inline-block;
	width: 0.409412em;
	height: 0.085765em;
	margin: 0 0.051176em -0.042882em 0.03451em;
	vertical-align: baseline;
	background: var(--white);
}

.logo {
	display: block;
	width: max(72px, calc(var(--e) * 2.176471));
	height: auto;
	margin-top: 48px;
}

/* The 404 page (UI spec 16.6): always stacked. */
.title {
	font-size: calc(var(--e) * 0.754902);
	font-weight: 300;
	line-height: 1.2597;
}

.home {
	margin-top: 24px;
}

.home a {
	color: inherit;
	text-decoration: underline;
}

.home a:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 4px;
}

@media (min-width: 22.5em) {
	.page {
		--pad: 24px;
	}
}

@media (min-width: 40em) {
	.page {
		--pad: 40px;
	}

	.logo {
		margin-top: 64px;
	}
}

/* Artboard layout (UI spec 16.3): the 16:9 frame, scaled to fit and centered; every value is a fraction of its width. */
@media (min-width: 64em) {
	.cover-page {
		display: flex;
	}

	.cover {
		--a: min(100vw, calc(100vh * 1.777778));
		position: relative;
		display: block;
		width: var(--a);
		height: calc(var(--a) * 0.5625);
		min-height: 0;
		margin: auto;
		padding: 0;
	}

	/* The heading spans the artboard, so its words (positioned in it) give it a real box. */
	.cover .heading {
		position: absolute;
		inset: 0;
	}

	.cover .heading > span,
	.cover .logo {
		position: absolute;
		margin: 0;
	}

	.cover .we {
		left: calc(var(--a) * 0.395833);
		top: calc(var(--a) * 0.213542);
		font-size: calc(var(--a) * 0.038542);
		line-height: calc(var(--a) * 0.048438);
	}

	.cover .create {
		left: calc(var(--a) * 0.333333);
		top: calc(var(--a) * 0.236458);
		font-size: calc(var(--a) * 0.080208);
		line-height: calc(var(--a) * 0.101042);
	}

	.cover .everything {
		left: calc(var(--a) * 0.385937);
		top: calc(var(--a) * 0.344271);
		font-size: calc(var(--a) * 0.10625);
		line-height: calc(var(--a) * 0.133854);
	}

	/* Placed from the frame, relative to the word's box (not its glyphs), so it stays on the logo's underscore row. */
	.cover .everything::before {
		position: absolute;
		left: calc(var(--a) * -0.048937);
		top: calc(var(--a) * 0.106798);
		width: calc(var(--a) * 0.0435);
		height: calc(var(--a) * 0.009113);
		margin: 0;
	}

	.cover .logo {
		left: calc(var(--a) * 0.065104);
		top: calc(var(--a) * 0.389062);
		width: calc(var(--a) * 0.23125);
	}
}