/**
 * Base: resets, typography, and bare HTML element styling.
 * No layout or component classes here — see layout.css and components/.
 */

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-serif);
	font-size: var(--font-size-base);
	line-height: var(--line-height-body);
	/*
	 * The mobile nav drawer (nav.css) sits off-screen in its closed
	 * state via transform: translateX(100%), not display: none — a
	 * transform doesn't stop an element from contributing to the
	 * page's scrollable-overflow area even while invisible, so
	 * without this the always-present (just usually off-screen)
	 * drawer could add horizontal scroll/overflow depending on what
	 * else is on the page.
	 */
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-sans);
	line-height: var(--line-height-heading);
	font-weight: 700;
	margin: var(--space-5) 0 var(--space-3);
	/* Balances line lengths across the whole block (best for short
	   text — browsers cap it around 6 lines), avoiding a lonely
	   last-line widow on headings. */
	text-wrap: balance;
}

h1 {
	/*
	 * Fluid between ~2rem (20rem/320px viewport) and the full 3xl token
	 * (72rem/1152px, this design system's --wide-width) instead of
	 * jumping straight to desktop size on narrow screens — e.g. a long
	 * search query wrapping to two lines at full 3xl size felt heavy
	 * on mobile. Literal rem bounds, not var(--font-size-3xl) — a
	 * var() reference nested inside clamp() silently fell back to
	 * just that var's value (ignoring the clamp entirely) when parsed
	 * from a stylesheet, even though the identical expression worked
	 * fine set programmatically via element.style. Keep in sync with
	 * --font-size-3xl (3.25rem) in variables.css if that token changes.
	 */
	font-size: clamp(2rem, 1.52rem + 2.4vw, 3.25rem);
	margin-top: 0;
}

h2 {
	/* See h1 above re: literal bounds instead of var(--font-size-xl)
	   inside clamp(). Keep in sync with --font-size-xl (1.875rem). */
	font-size: clamp(1.5rem, 1.36rem + 0.72vw, 1.875rem);
	text-transform: uppercase;
}

h3 {
	font-size: var(--font-size-lg);
}

p {
	margin: 0 0 var(--space-3);
	/* Avoids a lonely last-line widow in longer body copy; unlike
	   balance, this only adjusts the final line, so it stays cheap on
	   long paragraphs. */
	text-wrap: pretty;
}

a {
	color: var(--color-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color var(--transition-base), text-decoration-thickness var(--transition-base);
}

a:hover,
a:focus-visible {
	color: var(--color-link-hover);
	/* A color shift alone read as too subtle — thickening the
	   underline too makes hover state clearly noticeable without
	   introducing a background/box treatment on inline text links. */
	text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

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

hr {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: var(--space-5) 0;
}

ul,
ol {
	padding-left: var(--space-4);
}

strong {
	font-weight: 700;
}

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

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}