/*
 * Base: page defaults and element typography (docs/DESIGN_SYSTEM.md sections 3, 10).
 * Elements only: no classes here. Prose rules are scoped to .prose so they never leak into components.
 */
@layer base {
	html {
		scroll-padding-bottom: var(--bar-h);
		scroll-behavior: smooth;
	}

	/* The space for the sticky header (scroll-padding-top) is set in overrides.css: the toolbar stylesheet of WordPress
	   sets it on <html> too, outside any layer, so only a rule outside a layer can change it. */

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

	/* Headings: the display font for H1 and H2 (Playfair Display), the body font for the rest. Never
	   faux-bold: H1 and H2 stay at weight 400, so they differ by size. */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		text-wrap: balance;
	}

	h1 {
		font-family: var(--font-display);
		font-size: var(--fs-h1);
		font-weight: 400;
		font-synthesis: none;
		line-height: var(--lh-h1);
	}

	h2 {
		font-family: var(--font-display);
		font-size: var(--fs-h2);
		font-weight: 400;
		font-synthesis: none;
		line-height: var(--lh-h2);
	}

	h3 {
		font-size: var(--fs-h3);
		font-weight: 600;
		line-height: var(--lh-h3);
	}

	h4,
	h5,
	h6 {
		font-size: var(--fs-h4);
		font-weight: 600;
		line-height: var(--lh-h4);
	}

	p {
		text-wrap: pretty;
	}

	small {
		font-size: var(--fs-small);
		line-height: var(--lh-small);
	}

	strong,
	b {
		font-weight: 600;
	}

	/* Inline links are underlined (1 px, 3 px offset); the underline thickens on hover. */
	a {
		color: var(--color-link);
		text-decoration-line: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 3px;
		transition: text-decoration-thickness var(--dur-fast) var(--ease-out);
	}

	@media (hover: hover) {
		a:hover {
			color: var(--color-link-hover);
			text-decoration-thickness: 2px;
		}
	}

	a:active {
		color: var(--color-link-active);
	}

	:focus-visible {
		outline: var(--focus-ring-width) solid var(--color-focus);
		outline-offset: var(--focus-ring-offset);
	}

	::selection {
		background: var(--color-surface-tint-2);
		color: var(--color-text);
	}

	hr {
		height: 0;
		border: 0;
		border-top: var(--border-hairline);
	}

	blockquote {
		padding-block-start: var(--space-4);
		border-top: var(--border-hairline);
		font-family: var(--font-display);
		font-size: var(--fs-h3);
		font-synthesis: none;
		line-height: var(--lh-h3);
	}

	/* Forced colours mode keeps the focus ring and separators visible. */
	@media (forced-colors: active) {
		:focus-visible {
			outline-color: Highlight;
		}

		hr,
		blockquote {
			border-color: CanvasText;
		}
	}

	/* Prose: article and page text. Reading width 68 characters, consistent rhythm. */
	.prose {
		max-width: var(--measure);
	}

	.prose > * + * {
		margin-block-start: var(--space-5);
	}

	.prose > * + :is(h2, h3, h4) {
		margin-block-start: var(--space-7);
	}

	.prose :is(ul, ol) {
		padding-inline-start: var(--space-5);
	}

	.prose li + li {
		margin-block-start: var(--space-2);
	}
}