/* Reset + base element styles. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--surface-ground);
	color: var(--magma-ink);
	font: var(--type-body);
	-webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
a { color: var(--magma-ink); text-decoration: none; }
a:hover { color: var(--magma-flame-3); }
button { font: inherit; }

:focus-visible {
	outline: 2px solid var(--magma-flame-3);
	outline-offset: 3px;
}

/* No overflow-x:clip here — the sticky masthead lives inside this element, and any
   overflow value on an ancestor other than visible can break position:sticky. */
.magma-page-shell { position: relative; }
.magma-band {
	width: 100%;
	max-width: var(--layout-band);
	margin: 0 auto;
	padding: 0 var(--layout-rail);
	box-sizing: border-box;
}

.magma-eyebrow {
	display: inline-block;
	font: var(--type-eyebrow);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-caption);
}
.magma-label {
	font: var(--type-nav);
	text-transform: uppercase;
	color: var(--text-secondary);
}
.magma-lead { font: var(--type-lead); letter-spacing: -0.04em; color: var(--magma-ink); margin: 0; }
.magma-lede { font: var(--type-body); color: var(--magma-ink); max-width: var(--measure-lg); margin: clamp(28px, 3.4vw, 44px) 0 0; }
.magma-headline { font: var(--type-headline); letter-spacing: -0.04em; color: var(--magma-ink); }
.magma-title-text { font: var(--type-title); letter-spacing: -0.04em; color: var(--magma-ink); width: var(--measure-xs); max-width: 100%; margin: 0; }
.magma-note { font: var(--type-body); color: var(--text-caption); }
.magma-pair { font: var(--type-pair); letter-spacing: -0.04em; color: var(--magma-ink); }
.magma-pair__sep { color: var(--border-rule); }
.magma-price { font: var(--type-title-flat); letter-spacing: -0.04em; color: var(--text-on-ink); }

.magma-lockup { margin: 14px 0 0; }
.magma-lockup__line1 { display: block; font: var(--type-display); letter-spacing: -0.07em; color: inherit; }
.magma-lockup__line2 { display: block; margin-top: -2px; margin-left: clamp(0px, 7.5vw, 96px); font: var(--type-script-hero); letter-spacing: -0.05em; color: inherit; }
.magma-lockup__line2--tight { margin-left: clamp(0px, 5vw, 64px); }
.magma-lockup--hero .magma-lockup__line2 { margin-left: clamp(0px, 7.5vw, 96px); }

.magma-section { position: relative; padding: var(--rhythm-section) 0 var(--rhythm-section-close); scroll-margin-top: 76px; }
.magma-section[data-surface="dark"], .magma-wash--ink { background: var(--magma-ink); color: var(--text-on-ink); }
.magma-wash--up { background: linear-gradient(180deg, var(--wash-up-start) 0%, var(--wash-up-end) 100%); }
.magma-wash--down { background: linear-gradient(180deg, var(--wash-up-end) 0%, var(--wash-up-start) 100%); }

.magma-split { display: flex; gap: clamp(28px, 4vw, 56px); align-items: flex-start; flex-wrap: wrap; }
.magma-split__col { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: var(--rhythm-tight); }
.magma-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }

/* Marquee loop — never in the page template, only here. */
@keyframes magma-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Entrance runtime hooks — hidden until tokens/motion.js-equivalent (motion.js) adds mg-ready. */
[data-r] { opacity: 1; }
html:not(.mg-ready) [data-r] { opacity: 1; }
/* --print-rotate (set on the hero's decor prints, base.css) keeps its permanent
   rotation stacked with this rise-in translate instead of losing it — a plain
   `transform: translateY(...)` here would otherwise replace the whole property
   and wipe out any rotate() an element declares for itself. */
html.mg-ready [data-r]:not(.mg-in) {
	opacity: 0;
	transform: translateY(26px) rotate(var(--print-rotate, 0deg));
}
html.mg-ready [data-r].mg-in {
	opacity: 1;
	transform: translateY(0) rotate(var(--print-rotate, 0deg));
	transition: opacity 480ms var(--ease-entrance), transform 480ms var(--ease-entrance);
}
@media (prefers-reduced-motion: reduce) {
	html.mg-ready [data-r]:not(.mg-in) { opacity: 1; transform: rotate(var(--print-rotate, 0deg)); }
}