/**
 * Base: resets, document defaults, typography and focus.
 */

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

html {
	scroll-behavior: smooth;
}

/* The sticky header resolves against the nearest ancestor that establishes a
   positioning or clipping context. html and body must never become one, or the
   header stops tracking the viewport and paints over the page. This guard is
   deliberate — do not add position, overflow, transform, filter or contain to
   either element. */
html,
body {
	position: static;
	overflow-x: visible;
	transform: none;
	filter: none;
	contain: none;
}

body {
	margin: 0;
	background: var(--nk-paper);
	color: var(--nk-ink);
	font-family: var(--nk-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: var(--nk-charcoal);
	text-decoration: none;
}

a:hover {
	color: var(--nk-red);
}

/* The responsive-image idiom is BOTH halves. Without height: auto an image
   whose width is constrained (e.g. squeezed to 0 inside a flex row) keeps the
   intrinsic height from its width/height attributes — which is how a 1536x1024
   custom logo inflated the header to 1056px tall. */
img,
svg,
video {
	max-width: 100%;
	height: auto;
}

::selection {
	background: var(--nk-red);
	color: #fff;
}

:focus-visible {
	outline: 2px solid var(--nk-red);
	outline-offset: 3px;
	border-radius: 4px;
}

button {
	font-family: inherit;
}

/* Editor + comment form fields inherit the site voice. */
input,
textarea,
select {
	font-family: inherit;
	font-size: 1rem;
}

h1,
h2,
h3,
h4 {
	font-family: var(--nk-font-display);
	letter-spacing: -0.025em;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}