/**
 * Base reset, in the cascade layer "base" so every unlayered rule in the
 * theme wins over it -- exactly as on the live Astro site.
 *
 * This is the live site's Base.astro reset (its <style is:global> block),
 * which sits under every page there and which the guide's CSS was designed
 * and approved on top of. Most visibly it sets box-sizing: border-box, which
 * is what makes .g-wrap a 1320px column *including* its padding.
 *
 * Copied rule for rule, including its one quirk: elements whose class
 * contains "emdash" or "ec-" are skipped by the box-sizing and link rules
 * (they were meant for EmDash's own widgets), and "g-sec" happens to contain
 * "ec-" -- so sections keep content-box there, and keep it here.
 *
 * Token values are written in (tokens.css / theme.css): headings share the
 * body face, line-height 1.15, weight 600, tracking -0.02em (h1 -0.03em); the
 * guide's own .g-body heading rule then sets weight 400 on h1–h5 as it does
 * live. Two things are deliberately left out: the template's blue link and
 * ::selection colour (never visible under .g-body, and a second accent the
 * guide does not allow), and color-scheme: light dark from tokens.css.
 */
@layer base {
	*:where(:not([class*="emdash"]):not([class*="ec-"])),
	*:where(:not([class*="emdash"]):not([class*="ec-"]))::before,
	*:where(:not([class*="emdash"]):not([class*="ec-"]))::after {
		box-sizing: border-box;
	}

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

	ul, ol {
		padding: 0;
	}

	html {
		scroll-behavior: smooth;
	}

	body {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		min-height: 100vh;
	}

	a:where(:not([class*="emdash"]):not([class*="ec-"])) {
		text-decoration: none;
		transition: color 120ms ease;
	}

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

	h1, h2, h3, h4, h5, h6 {
		font-family: var(--font-body);
		line-height: 1.15;
		font-weight: 600;
		letter-spacing: -0.02em;
	}

	h1 {
		letter-spacing: -0.03em;
	}
}