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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	min-width: 320px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.6;
}

a { color: inherit; }

/*
 * A11Y-01 / CSS-01 — shared keyboard-focus baseline.
 * Keep a visible focus indicator even when a component does not provide one.
 * Component-specific focus styles may override this when they need a tighter
 * outline or different placement.
 */
:where(a, button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/* Ensure keyboard users can always reveal the skip link. */
.sfc-skip-link:focus-visible {
	transform: translateY(0);
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/* Keep anchored content clear of the optional sticky header. */
:where(main, section, article, h1, h2, h3, h4, h5, h6, [id]) {
	scroll-margin-top: 1rem;
}

img { max-width: 100%; height: auto; }

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

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

/* Multi-page content navigation. */
.sfc-page-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2rem;
}

.sfc-page-links__label {
	font-weight: 700;
}

.sfc-page-links__item {
	display: inline-flex;
	min-width: 2.75rem;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
	padding: 0.35rem 0.65rem;
	border: 1px solid currentColor;
}

/* High-contrast/forced-colors mode: preserve a clearly visible focus state. */
@media (forced-colors: active) {
	:where(a, button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
		outline: 2px solid Highlight;
		outline-offset: 3px;
	}
}

/* A11Y-01: the reduced-motion preference is a global safety net.
 * Component styles can still provide their own reduced-motion refinements. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}