/* ==========================================================================
   BASE — reset and bare element defaults. No classes in this layer.
   ========================================================================== */

@layer base {

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

	* {
		margin: 0;
	}

	html {
		-webkit-text-size-adjust: 100%;
		background: var(--grain) var(--bg);   /* the paper, with its fibre grain */
		/* No smooth scrolling here (Jarv, 25 Oct 2026): it made Back visibly scroll from the
		   top down to where you were. The hero's arrow scrolls smoothly in home.js. */
		/* Keep room for the scroll bar even on pages too short to scroll
		   (Contact), so the header doesn't shift sideways between pages.
		   Only matters where scroll bars take up space (a mouse, or "always
		   show scroll bars"); trackpad scroll bars float over the page. */
		scrollbar-gutter: stable;
	}

	body {
		background: var(--grain) var(--bg);
		color: var(--fg);
		font-family: var(--font-text);
		font-size: var(--t-body);
		line-height: var(--leading-body);
		min-height: 100svh;
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
		/* Archivo joins some letter pairs (e.g. "rt") into one ligature; Jarv wants them apart */
		font-variant-ligatures: none;
	}

	h1, h2, h3, h4 {
		font-family: var(--font-display);
		font-weight: var(--w-title);   /* 900 everywhere (Jarv, 21 Oct 2026) */
		line-height: var(--leading-tight);
		letter-spacing: -0.025em;
		text-wrap: balance;
	}

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

	p, li {
		text-wrap: pretty;
	}

	p {
		max-width: var(--measure);
	}

	/* No underlines on any link (Jarv, 16 Oct 2026): links show by weight,
	   colour or button shape, and dim or change colour on hover */
	a {
		color: inherit;
		text-decoration: none;
	}

	:focus-visible {
		outline: 2px solid var(--fg);
		outline-offset: 3px;
	}

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

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

	button,
	input,
	select,
	textarea {
		font: inherit;
		color: inherit;
		font-variant-ligatures: none;   /* form fields don't inherit it */
	}

	hr {
		border: 0;
		border-top: 1px solid var(--rule);
	}
}