/* Element defaults. Squared corners everywhere: the brand is circuit traces,
   nothing in the theme uses border-radius. */

@font-face {
	font-family: "Space Grotesk";
	src: url("../static/fonts/space-grotesk-500.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "Space Grotesk";
	src: url("../static/fonts/space-grotesk-700.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
	img { max-width: 100%; height: auto; display: block; }
	button { font: inherit; }
}

@layer base {
	html { scroll-behavior: smooth; }

	body {
		font-family: var(--font-body);
		font-size: 1rem;
		line-height: 1.65;
		color: var(--text);
		background: var(--bg);
		-webkit-font-smoothing: antialiased;
	}

	h1, h2, h3 {
		font-family: var(--font-display);
		font-weight: 700;
		line-height: 1.05;
		letter-spacing: -0.02em;
		color: var(--ink);
		text-wrap: balance;
	}

	h1 { font-size: clamp(2.75rem, 6.5vw, 4.5rem); }
	h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
	h3 { font-size: 1.25rem; line-height: 1.25; }

	a {
		color: inherit;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 3px;
		transition: text-decoration-color 120ms ease;
	}
	a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

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

	::selection { background: var(--accent); color: var(--ink); }

	ul, ol { padding-left: 1.25rem; }
	li { margin-block: 0.35rem; }

	code, pre { font-family: var(--font-mono); }

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

	.sw-skip-link {
		position: absolute;
		left: -9999px;
		top: 0;
		background: var(--ink);
		color: #fff;
		padding: 10px 18px;
		z-index: 100;
	}
	.sw-skip-link:focus { left: 0; }
}