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

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

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

		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
	}

	body {
		margin: 0;
		background: var(--bg);
		color: var(--ink);
		font-family: var(--font-ui);
		font-size: var(--step-0);
		line-height: 1.6;
		font-synthesis-weight: none;
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		overflow-x: hidden;
	}

	h1, h2, h3, h4 {
		font-family: var(--font-display);
		font-weight: 400;
		line-height: 1.05;
		letter-spacing: -0.015em;
		text-wrap: balance;
		margin: 0;
	}

	h1 { font-size: var(--step-6); }
	h2 { font-size: var(--step-4); }
	h3 { font-size: var(--step-2); }
	h4 { font-size: var(--step-1); }

	p, li {
		text-wrap: pretty;
	}

	p {
		margin: 0 0 1em;
	}

	a {
		color: inherit;
		text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
		text-underline-offset: 0.22em;
		text-decoration-thickness: 1px;
		transition: text-decoration-color var(--dur-fast) var(--ease-out),
			color var(--dur-fast) var(--ease-out);
	}

	a:hover {
		text-decoration-color: currentColor;
	}

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

	img, picture, svg, video {
		display: block;
		max-width: 100%;
		height: auto;
	}

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

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

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

	/* Skip link — visible only when focused */
	.skip-link {
		position: absolute;
		left: var(--space-s);
		top: var(--space-s);
		z-index: 999;
		padding: var(--space-2xs) var(--space-s);
		background: var(--surface);
		color: var(--ink);
		border: 1px solid var(--line-strong);
		border-radius: var(--radius);
		transform: translateY(-200%);
		transition: transform var(--dur-fast) var(--ease-out);
	}

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

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