/* napexy.com. One screen: a rail at the top, the logo in the middle, a rail
 * at the bottom, and a lot of nothing in between. Shared by index.html and
 * 404.html. The logo's own path data is written by scripts/brand.mjs; colours
 * and type follow brand/napexy-brand.css. */

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('/fonts/manrope-latin.woff2') format('woff2');
}

:root {
	/* The tokens this page uses, named and valued as in brand/napexy-brand.css. */
	--obsidian: #0A0F1C;
	--line: #26304A;
	--ink: #F4F1EA;
	--ink-muted: #8A93A6;
	--font-sans: 'Manrope', system-ui, -apple-system, sans-serif;

	--edge: clamp(20px, 4.5vw, 64px);
	--mark: min(72vw, 520px); /* the logo's width */
	color-scheme: dark;
}

html {
	color: var(--ink);
	/* The glow from the logo artwork: warm behind the letters, navy, then
	   obsidian at the edges. Its radius follows the logo's width, as in the
	   artwork, so it sits the same way behind it on a phone and on a wide
	   screen. scripts/brand.mjs uses the same stops for og.png. */
	background:
		radial-gradient(circle calc(var(--mark) * 1.07) at 50% 50%,
			#201F2E 0%, #181B2C 14%, #10182A 28%, #0E1627 42%, #0C1222 71%, var(--obsidian) 100%) fixed,
		var(--obsidian);
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	grid-template-rows: auto 1fr auto;
	padding:
		max(var(--edge), env(safe-area-inset-top))
		max(var(--edge), env(safe-area-inset-right))
		max(var(--edge), env(safe-area-inset-bottom))
		max(var(--edge), env(safe-area-inset-left));
	box-sizing: border-box;
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
}

/* ── rails ─────────────────────────────────────────────────────────────── */

.rail {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 24px);
}

.rail__rule {
	flex: 1;
	height: 1px;
	background: var(--line);
}

/* The brand's eyebrow style, in muted ink: the A is the page's one orange. */
.rail__label {
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ink-muted);
	/* letter-spacing trails the last letter too; pull it back so the label
	   ends flush with the rail it sits on */
	margin-inline-end: -0.16em;
}

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

.rail__label a:hover {
	color: var(--ink);
}

/* ── the logo ──────────────────────────────────────────────────────────── */

.center {
	display: grid;
	place-items: center;
	padding-block: 6vh;
}

.lockup {
	width: var(--mark);
}

h1 {
	margin: 0;
	line-height: 0;
}

h1 a {
	display: block;
	color: inherit;
}

.mark {
	display: block;
	width: 100%;
	height: auto;
}

.sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

::selection {
	background: var(--ink);
	color: var(--obsidian);
}