/*!
 * Archivo del Desierto — reset and base typography
 */

@layer reset {

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

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		scroll-behavior: smooth;
		/* Anchor links must not land under the fixed header. */
		scroll-padding-top: calc(var(--header-height) + 1.5rem);
	}

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

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

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

	img {
		height: auto;
	}

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

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

	table {
		border-collapse: collapse;
		width: 100%;
	}

	[hidden] {
		display: none !important;
	}

	@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;
		}
	}
}

@layer base {

	body {
		font-family: var(--font-sans);
		font-size: var(--text-base);
		line-height: var(--leading-relaxed);
		font-weight: 400;
		color: var(--on-surface);
		background-color: var(--surface);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
		overflow-x: clip;
	}

	/* ── Headings ───────────────────────────────────────────────────────── */

	h1, h2, h3, h4 {
		font-family: var(--font-display);
		font-weight: 700;
		line-height: var(--leading-tight);
		letter-spacing: var(--tracking-tight);
		color: var(--color-ink);
		text-wrap: balance;
	}

	h1 { font-size: var(--text-4xl); }
	h2 { font-size: var(--text-3xl); }
	h3 { font-size: var(--text-xl); line-height: var(--leading-snug); }
	h4 { font-size: var(--text-lg); line-height: var(--leading-snug); }

	h5, h6 {
		font-family: var(--font-sans);
		font-size: var(--text-sm);
		font-weight: 600;
		letter-spacing: var(--tracking-wider);
		text-transform: uppercase;
		color: var(--accent-text);
	}

	/* ── Prose ──────────────────────────────────────────────────────────── */

	p {
		text-wrap: pretty;
	}

	p + p {
		margin-top: 1.1em;
	}

	strong, b {
		font-weight: 600;
		color: var(--color-ink);
	}

	em, i {
		font-style: italic;
	}

	small {
		font-size: var(--text-sm);
	}

	/* ── Links ──────────────────────────────────────────────────────────── */

	a {
		color: inherit;
		text-decoration-color: color-mix(in oklab, var(--accent) 55%, transparent);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
		transition: color var(--motion-fast) var(--ease-standard),
			text-decoration-color var(--motion-fast) var(--ease-standard);
	}

	a:hover {
		color: var(--accent-deep);
		text-decoration-color: currentColor;
	}

	/* ── Focus ──────────────────────────────────────────────────────────── */
	/* Visible, generous and never removed: a large share of this audience navigates by
	   keyboard or with a magnifier. */

	:focus-visible {
		outline: var(--focus-ring);
		outline-offset: var(--focus-offset);
		border-radius: var(--radius-xs);
	}

	:focus:not(:focus-visible) {
		outline: none;
	}

	::selection {
		background-color: color-mix(in oklab, var(--accent) 30%, transparent);
		color: var(--color-ink);
	}

	/* ── Forms ──────────────────────────────────────────────────────────── */

	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="search"],
	input[type="number"],
	textarea,
	select {
		width: 100%;
		padding: 0.8em 1em;
		font-family: var(--font-sans);
		font-size: var(--text-base);
		color: var(--color-ink);
		background-color: #fff;
		border: 1px solid var(--color-border-strong);
		border-radius: var(--radius-s);
		transition: border-color var(--motion-fast) var(--ease-standard),
			box-shadow var(--motion-fast) var(--ease-standard);
	}

	input:focus,
	textarea:focus,
	select:focus {
		border-color: var(--accent);
		box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
	}

	textarea {
		min-height: 9rem;
		resize: vertical;
	}

	label {
		display: block;
		font-size: var(--text-sm);
		font-weight: 500;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--color-charcoal);
		margin-bottom: var(--space-2xs);
	}

	/* ── Assistive ──────────────────────────────────────────────────────── */

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

	.skip-link {
		position: fixed;
		top: var(--space-s);
		left: var(--space-s);
		z-index: 1000;
		padding: 0.85rem 1.4rem;
		font-size: var(--text-sm);
		font-weight: 600;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--color-paper);
		background-color: var(--color-ink);
		border-radius: var(--radius-s);
		text-decoration: none;
		transform: translateY(calc(-100% - var(--space-l)));
		transition: transform var(--motion-normal) var(--ease-standard);
	}

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