/* styles/02-base.css — reset and shared primitives. Tokens only. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
html, body { min-height: 100%; }
body {
	background: var(--background);
	color: var(--foreground);
	font: 400 var(--body)/var(--body-lh) var(--font-sans);
	font-feature-settings: "cv11", "ss01", "liga", "calt", "kern";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4, p { font-weight: inherit; font-size: inherit; }
::selection { background: var(--selection); }

/* Visually hidden, still reachable by screen readers */
.ow-sr {
	position: absolute;
	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;
}

/* Skip link */
.ow-skip {
	position: fixed;
	top: var(--spacing-2);
	left: var(--spacing-2);
	z-index: 100;
	padding: var(--spacing-2) var(--spacing-3);
	background: var(--surface-float);
	color: var(--foreground);
	border-radius: var(--r-6);
	box-shadow: 0 0 0 1px var(--border);
	font-size: var(--ui);
	clip-path: inset(50%);
}
.ow-skip:focus-visible { clip-path: none; }

/* Column */
.ow-col {
	width: min(var(--col), 100% - 2 * var(--gutter));
	margin-inline: auto;
}

/* Section titles (built from Raycast .SectionTitle__) */
.ow-title h2 {
	font-size: var(--h2);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.035em;
	color: var(--foreground);
	text-wrap: balance;
}
.ow-title p {
	font-size: var(--lede);
	font-weight: 400;
	line-height: 1.55;
	color: var(--foreground-subtle);
	max-width: 620px;
	margin-top: var(--spacing-3);
}
.ow-title--center { text-align: center; }
.ow-title--center p { margin-inline: auto; }
.ow-title--light h2 {
	font-size: var(--h2-light);
	font-weight: 300;
	line-height: 1.06;
}

/* Eyebrow + micro labels (JetBrains Mono) */
.ow-eyebrow {
	display: block;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--accent);
	margin-bottom: var(--spacing-3);
}
.ow-micro {
	font-family: var(--font-mono);
	font-size: var(--micro);
	line-height: 16px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--foreground-subtle);
}

/* Focus */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: var(--r-4);
}

/* Reveal on scroll (added .is-in by scripts/main.js once 20% visible) */
html.js [data-reveal] {
	opacity: 0;
	transform: translateY(12px);
	filter: blur(6px);
}
html.js [data-reveal].is-in {
	opacity: 1;
	transform: none;
	filter: none;
	transition:
		opacity var(--t-enter) var(--ease-out),
		transform var(--t-enter) var(--ease-out),
		filter var(--t-enter) var(--ease-out);
	transition-delay: calc(var(--i, 0) * 90ms);
}
html:not(.js) [data-reveal] { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}
	html.js [data-reveal] { opacity: 1; transform: none; filter: none; }
}