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

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

:root {
	--ground: #09090d;
	--ink: #f4f4f6;
	--faint: rgba(244, 244, 246, 0.55);
	--edge: clamp(20px, 4.5vw, 64px);
	color-scheme: dark;
}

html {
	color: var(--ink);
	/* Three soft lights, never more saturated than this. They are the only
	   colour on the page apart from the scale under the mark. */
	background:
		radial-gradient(55vmax 42vmax at 0% 0%, rgba(74, 66, 178, 0.42), transparent 70%),
		radial-gradient(30vmax 26vmax at 100% 64%, rgba(128, 74, 186, 0.26), transparent 70%),
		radial-gradient(70vmax 34vmax at 8% 100%, rgba(96, 132, 136, 0.3), transparent 72%),
		var(--ground);
	background-attachment: fixed;
}

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: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
}

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

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

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

.rail__label {
	font-size: clamp(10px, 0.8vw + 6px, 12px);
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	white-space: nowrap;
	/* 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.24em;
}

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

/* ── the mark ──────────────────────────────────────────────────────────── */

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

.lockup {
	position: relative;
	width: min(74vw, 580px);
}

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

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

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

/* A registration mark, off the y's shoulder. */
.plus {
	position: absolute;
	top: 6%;
	right: -4%;
	width: clamp(8px, 1.2vw, 11px);
	aspect-ratio: 1;
	background:
		linear-gradient(var(--ink), var(--ink)) center / 100% 1.5px no-repeat,
		linear-gradient(var(--ink), var(--ink)) center / 1.5px 100% no-repeat;
}

/* The scale: one iridescent line, then ticks. It is the mark's underline,
   so it is exactly as wide as the mark. */
.scale {
	margin-top: clamp(14px, 2.4vw, 26px);
}

.scale__bar {
	height: 3px;
	background: linear-gradient(90deg, #eef0ff 0%, #9fe7df 30%, #8f86ff 62%, #e2a2f5 100%);
}

/* Thirteen real elements rather than a repeating gradient: a 1px stop at a
   fractional position rounds away, and ticks go missing at some widths. */
.scale__ticks {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 5px;
}

.scale__ticks i {
	width: 1px;
	height: 6px;
	background: var(--faint);
}

.scale__ticks i:first-child,
.scale__ticks i:last-child {
	height: 9px;
	background: var(--ink);
}

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

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