/**
 * Metalumina Flagship — Base
 * Reset, typography, layout primitives, accessibility, reveal system.
 */

/* ── Reset ──────────────────────────────────────────────────────────── */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--ml-header-h) + 24px);
}

body {
	margin: 0;
	background: var(--ml-bg);
	color: var(--ml-ink);
	font-family: var(--ml-font);
	font-size: var(--ml-t-body);
	line-height: var(--ml-lh-body);
	letter-spacing: var(--ml-track-body);
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

/* ── Smooth-scroll viewport ─────────────────────────────────────────────
   Inert until core.js decides the environment qualifies (desktop, fine
   pointer, motion allowed). Until then these two elements are ordinary
   block containers and the page scrolls natively. */

html.ml-smooth {
	scroll-behavior: auto;
}

.ml-viewport.is-smooth {
	position: fixed;
	inset: 0;
	overflow: hidden;
	/* A new stacking + containing context so the translated child cannot
	   leak paint outside the viewport box. */
	contain: paint;
}

.ml-viewport.is-smooth > .ml-scroll {
	will-change: transform;
	backface-visibility: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
	margin: 0;
}

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

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

img {
	height: auto;
}

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

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

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

hr {
	border: 0;
	border-top: 1px solid var(--ml-line);
	margin: 0;
}

::selection {
	background: rgba(76, 141, 255, 0.28);
	color: var(--ml-ink-display);
}

/* ── Scrollbar ──────────────────────────────────────────────────────── */

@supports selector(::-webkit-scrollbar) {
	::-webkit-scrollbar {
		width: 10px;
		height: 10px;
	}
	::-webkit-scrollbar-track {
		background: var(--ml-bg-sunken);
	}
	::-webkit-scrollbar-thumb {
		background: rgba(139, 168, 214, 0.16);
		border-radius: var(--ml-r-pill);
		border: 3px solid var(--ml-bg-sunken);
	}
	::-webkit-scrollbar-thumb:hover {
		background: rgba(139, 168, 214, 0.28);
	}
}

html {
	scrollbar-color: rgba(139, 168, 214, 0.2) var(--ml-bg-sunken);
	scrollbar-width: thin;
}

/* ── Typography ─────────────────────────────────────────────────────── */

.ml-display,
.ml-h1,
.ml-h2,
.ml-h3,
.ml-h4 {
	color: var(--ml-ink-display);
	font-weight: 600;
	text-wrap: balance;
	margin: 0;
}

.ml-display {
	font-size: var(--ml-t-display);
	line-height: var(--ml-lh-display);
	letter-spacing: var(--ml-track-display);
	font-weight: 600;
}

.ml-h1 {
	font-size: var(--ml-t-h1);
	line-height: var(--ml-lh-display);
	letter-spacing: var(--ml-track-display);
}

.ml-h2 {
	font-size: var(--ml-t-h2);
	line-height: var(--ml-lh-h);
	letter-spacing: var(--ml-track-h);
}

.ml-h3 {
	font-size: var(--ml-t-h3);
	line-height: 1.25;
	letter-spacing: var(--ml-track-h);
}

.ml-h4 {
	font-size: var(--ml-t-h4);
	line-height: 1.35;
	letter-spacing: -0.014em;
	font-weight: 600;
}

.ml-lead {
	font-size: var(--ml-t-lead);
	line-height: 1.6;
	color: var(--ml-ink-muted);
	font-weight: 400;
	text-wrap: pretty;
}

.ml-body {
	color: var(--ml-ink-muted);
	text-wrap: pretty;
}

.ml-body + .ml-body {
	margin-top: var(--ml-s-5);
}

.ml-sm {
	font-size: var(--ml-t-sm);
	color: var(--ml-ink-muted);
	line-height: 1.62;
}

/* Eyebrow — the one label style used site-wide. */
.ml-eyebrow {
	display: block;
	font-size: var(--ml-t-eyebrow);
	font-weight: 500;
	letter-spacing: var(--ml-track-eyebrow);
	text-transform: uppercase;
	color: var(--ml-accent);
	margin: 0;
}

/* Index numerals (01, 02, …) — the one numeric style used site-wide. */
.ml-index {
	font-family: var(--ml-font-mono);
	font-size: var(--ml-t-sm);
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--ml-accent);
	font-variant-numeric: tabular-nums;
}

/* Accent rule — the one divider used site-wide. */
.ml-rule {
	display: block;
	width: 40px;
	height: 1px;
	border: 0;
	background: var(--ml-accent);
	opacity: 0.8;
}

.ml-rule--center {
	margin-inline: auto;
}

/* ── Layout primitives ──────────────────────────────────────────────── */

.ml-shell {
	width: 100%;
	max-width: var(--ml-w-wide);
	margin-inline: auto;
	padding-inline: var(--ml-gutter);
}

.ml-shell--full {
	max-width: var(--ml-w-full);
}

.ml-shell--content {
	max-width: var(--ml-w-content);
}

.ml-shell--text {
	max-width: calc(var(--ml-w-text) + var(--ml-gutter) * 2);
}

.ml-shell--narrow {
	max-width: calc(var(--ml-w-narrow) + var(--ml-gutter) * 2);
}

.ml-section {
	position: relative;
	padding-block: var(--ml-section);
}

.ml-section--tight {
	padding-block: var(--ml-section-tight);
}

.ml-section--sunken {
	background: var(--ml-bg-sunken);
}

.ml-section--raised {
	background: var(--ml-bg-raised);
}

/* A hairline between adjacent sections, drawn once so it never doubles. */
.ml-section + .ml-section::before {
	content: '';
	position: absolute;
	inset-inline: var(--ml-gutter);
	top: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--ml-line) 18%,
		var(--ml-line) 82%,
		transparent
	);
}

.ml-head {
	display: flex;
	flex-direction: column;
	gap: var(--ml-s-5);
	max-width: var(--ml-w-text);
	margin-bottom: var(--ml-s-10);
}

.ml-head--center {
	align-items: center;
	text-align: center;
	margin-inline: auto;
}

.ml-head__title {
	margin: 0;
}

/* Optical grid backdrop. Replaces the removed grain/particle textures with
   a single deterministic 1px lattice — the only "background" on the site. */
.ml-grid-field {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(139, 168, 214, 0.055) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(139, 168, 214, 0.055) 1px, transparent 1px);
	background-size: 88px 88px;
	mask-image: radial-gradient(ellipse 78% 62% at 50% 46%, #000 12%, transparent 74%);
	-webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 46%, #000 12%, transparent 74%);
}

/* ── Accessibility ──────────────────────────────────────────────────── */

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

.ml-skip-link {
	position: fixed;
	top: var(--ml-s-4);
	left: var(--ml-s-4);
	z-index: var(--ml-z-skip);
	padding: 12px 20px;
	border-radius: var(--ml-r-md);
	background: var(--ml-accent);
	color: #04070E;
	font-size: var(--ml-t-sm);
	font-weight: 600;
	transform: translateY(calc(-100% - var(--ml-s-6)));
	transition: transform var(--ml-d-base) var(--ml-ease-out);
}

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

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--ml-accent);
	outline-offset: 3px;
	border-radius: var(--ml-r-sm);
}

/* ── Reveal system ──────────────────────────────────────────────────── */

/* Elements opt in with data-reveal. JS adds .is-in when they cross the
   viewport threshold. Without JS the :not(.ml-js) guard keeps everything
   visible, so the site degrades to a fully readable static page. */
.ml-js [data-reveal] {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition:
		opacity var(--ml-d-reveal) var(--ml-ease-out),
		transform var(--ml-d-reveal) var(--ml-ease-out);
	transition-delay: var(--ml-reveal-delay, 0ms);
	will-change: opacity, transform;
}

.ml-js [data-reveal='fade'] {
	transform: none;
}

.ml-js [data-reveal='left'] {
	transform: translate3d(-26px, 0, 0);
}

.ml-js [data-reveal='right'] {
	transform: translate3d(26px, 0, 0);
}

.ml-js [data-reveal='scale'] {
	transform: scale(0.965);
}

.ml-js [data-reveal].is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* ── Utilities ──────────────────────────────────────────────────────── */

.ml-center {
	text-align: center;
}

.ml-stack {
	display: flex;
	flex-direction: column;
}

.ml-stack--4 { gap: var(--ml-s-4); }
.ml-stack--5 { gap: var(--ml-s-5); }
.ml-stack--6 { gap: var(--ml-s-6); }
.ml-stack--7 { gap: var(--ml-s-7); }

.ml-no-scroll {
	overflow: hidden;
}