/**
 * Reset + base element styling. Minimal, not a full normalize — just
 * enough to get a consistent, quiet starting point.
 */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
	font-family: var(--font-display);
	line-height: var(--lh-heading);
	font-weight: var(--fw-bold);
	color: var(--color-ink);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: var(--fw-black); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { max-width: 68ch; }
p + p { margin-top: var(--space-4); }

a {
	color: inherit;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}
a:not([class]) {
	color: var(--color-ink);
	text-decoration-color: var(--color-accent);
}
a:not([class]):hover { text-decoration-color: currentColor; }

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

button { font: inherit; }

/* ---- Accessibility primitives ---- */

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

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-4);
	z-index: 1000;
	background: var(--color-black);
	color: var(--color-white);
	padding: var(--space-3) var(--space-5);
	font-weight: var(--fw-semibold);
	transition: top var(--transition-fast);
}
.skip-link:focus {
	top: var(--space-4);
}

:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}
/* On black/inverted surfaces the yellow outline alone can look ambiguous
   against a yellow-accented button — give it a dark halo too. */
.site-header :focus-visible,
.mobile-nav :focus-visible,
.site-footer :focus-visible {
	outline-color: var(--color-accent);
	box-shadow: 0 0 0 2px var(--color-black);
}