/* =========================================================================
   Dead Pixels / 01 tokens
   Design tokens, reset, base typography.
   Palette is sampled from the organization mark: layered navy, royal blue,
   azure and ice, on a near black canvas.
   ========================================================================= */

:root {
	/* --- canvas ------------------------------------------------------- */
	--ink-000: #04060d;
	--ink-050: #070a15;
	--ink-100: #0a0e1d;
	--ink-200: #101733;
	--ink-300: #182248;
	--ink-400: #223066;

	/* --- light region -------------------------------------------------- */
	--paper: #e9ecf6;
	--paper-dim: #d5dae9;
	--paper-ink: #0a0e1d;
	--paper-ink-soft: #414a68;

	/* --- brand -------------------------------------------------------- */
	--navy: #131c7a;
	--royal: #0b44d6;
	--azure: #3a7fe8;
	--ice: #6fd2f5;
	--ice-dim: #3d94b6;

	/* --- project accents ---------------------------------------------- */
	--axiom: #6a5bf7;
	--neptune: #f79445;

	/* --- semantic ----------------------------------------------------- */
	--bg: var(--ink-000);
	--fg: #dfe6fa;
	--fg-soft: #9dabcd;
	/* Lifted from a dimmer blue so mono labels clear 4.5:1 on the canvas. */
	--fg-faint: #7a8ab0;
	--accent: var(--ice);
	--accent-alt: var(--royal);

	--line: rgba(122, 160, 255, 0.14);
	--line-soft: rgba(122, 160, 255, 0.075);
	--line-strong: rgba(122, 160, 255, 0.3);
	--glow: rgba(58, 127, 232, 0.28);

	--ok: #63d29c;
	--warn: #f7c245;

	/* --- type --------------------------------------------------------- */
	--font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--fs-micro: 0.6875rem;
	--fs-label: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--fs-lead: clamp(1.125rem, 1.03rem + 0.45vw, 1.375rem);
	--fs-h4: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	--fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
	--fs-h2: clamp(1.875rem, 1.35rem + 2.4vw, 3.5rem);
	--fs-h1: clamp(2.5rem, 1.4rem + 5.2vw, 6rem);
	--fs-hero: clamp(2.75rem, 0.8rem + 5.6vw, 6rem);

	--lh-tight: 0.92;
	--lh-head: 1.04;
	--lh-body: 1.62;
	--track-label: 0.16em;
	--track-tight: -0.03em;

	/* --- space -------------------------------------------------------- */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;
	--sp-10: 8rem;
	--sp-section: clamp(4.5rem, 3rem + 7vw, 9.5rem);

	/* --- layout ------------------------------------------------------- */
	--shell: 1400px;
	--measure: 62ch;
	--gutter: clamp(1.125rem, 0.5rem + 3vw, 4.5rem);
	--rail: 5.5rem;
	--header-h: 76px;

	/* --- surface ------------------------------------------------------ */
	--radius: 2px;
	--radius-lg: 4px;
	--border: 1px solid var(--line);
	--grid-cell: 46px;

	/* --- motion ------------------------------------------------------- */
	--t-fast: 140ms;
	--t-mid: 300ms;
	--t-slow: 620ms;
	--ease: cubic-bezier(0.22, 0.61, 0.24, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (max-width: 720px) {
	:root {
		--header-h: 64px;
		--grid-cell: 34px;
	}
}

/* =========================================================================
   reset
   ========================================================================= */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 2rem);
	overflow-x: hidden;
}

body {
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
	min-height: 100vh;
}

img,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

ul[class],
ol[class] {
	list-style: none;
	padding: 0;
}

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

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

/* =========================================================================
   base typography
   ========================================================================= */

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: var(--lh-head);
	letter-spacing: var(--track-tight);
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-h1);
	font-variation-settings: "wdth" 118, "wght" 700;
	line-height: var(--lh-tight);
}

h2 {
	font-size: var(--fs-h2);
	font-variation-settings: "wdth" 114, "wght" 700;
}

h3 {
	font-size: var(--fs-h3);
	font-variation-settings: "wdth" 108, "wght" 650;
}

h4 {
	font-size: var(--fs-h4);
	font-variation-settings: "wdth" 104, "wght" 600;
	letter-spacing: -0.01em;
}

p {
	text-wrap: pretty;
}

strong {
	font-weight: 600;
	color: #eef2ff;
}

code,
kbd,
pre,
samp {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

/* Utility text roles ------------------------------------------------- */

.label {
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--fg-faint);
}

.micro {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fg-faint);
}

.lead {
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--fg-soft);
	max-width: 46ch;
}

.dim {
	color: var(--fg-soft);
}

.wide {
	font-variation-settings: "wdth" 125, "wght" 700;
}

.narrow {
	font-variation-settings: "wdth" 84, "wght" 700;
}

/* =========================================================================
   focus
   ========================================================================= */

:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--ice);
	outline-offset: 3px;
	border-radius: 1px;
}

.on-paper :focus-visible {
	outline-color: var(--royal);
}

.skip-link {
	position: absolute;
	left: var(--sp-4);
	top: var(--sp-4);
	z-index: 999;
	transform: translateY(-200%);
	background: var(--ice);
	color: var(--ink-000);
	padding: 0.6rem 1rem;
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: transform var(--t-mid) var(--ease-out);
}

.skip-link:focus {
	transform: translateY(0);
}

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

/* =========================================================================
   scrollbar
   ========================================================================= */

@supports selector(::-webkit-scrollbar) {
	::-webkit-scrollbar {
		width: 11px;
		height: 11px;
	}

	::-webkit-scrollbar-track {
		background: var(--ink-050);
	}

	::-webkit-scrollbar-thumb {
		background: var(--ink-300);
		border: 3px solid var(--ink-050);
	}

	::-webkit-scrollbar-thumb:hover {
		background: var(--ink-400);
	}
}

html {
	scrollbar-color: var(--ink-300) var(--ink-050);
	scrollbar-width: thin;
}

/* =========================================================================
   reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-delay: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		transition-delay: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}