/**
 * Base layer. Resets, document defaults, typography and focus.
 * Component styles come later, in their own files.
 */

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

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

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	background-color: var(--fi-bg);
	color: var(--fi-text);
	font-family: var(--fi-font-body);
	font-size: var(--fi-size-base);
	font-weight: var(--fi-weight-regular);
	line-height: var(--fi-leading-body);
	min-height: 100vh;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-family: var(--fi-font-display);
	font-weight: var(--fi-weight-display);
	line-height: var(--fi-leading-tight);
	text-wrap: balance;
}

h1 { font-size: var(--fi-size-h1); }
h2 { font-size: var(--fi-size-h2); }
h3 { font-size: var(--fi-size-h3); }

h4 {
	font-family: var(--fi-font-body);
	font-size: var(--fi-size-h4);
	font-weight: var(--fi-weight-bold);
	line-height: var(--fi-leading-tight);
}

p, li { max-width: var(--fi-measure); }

a {
	color: var(--fi-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover { color: var(--fi-accent-hover); }

/**
 * Focus. Visible on every interactive element, at 3:1 against whatever sits
 * behind it. :focus-visible alone would drop the ring for mouse users on
 * elements that genuinely need it, so both are set and the default outline is
 * never simply removed.
 */
:focus {
	outline: var(--fi-focus-width) solid var(--fi-accent);
	outline-offset: var(--fi-focus-offset);
}

:focus:not(:focus-visible) { outline-color: transparent; }

:focus-visible {
	outline: var(--fi-focus-width) solid var(--fi-accent);
	outline-offset: var(--fi-focus-offset);
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

hr {
	border: 0;
	border-top: var(--fi-border-width) solid var(--fi-border-subtle);
	margin: var(--fi-space-6) 0;
}

/* Layout ------------------------------------------------------------ */

.fi-container {
	width: 100%;
	max-width: var(--fi-container);
	margin-inline: auto;
	padding-inline: var(--fi-gutter);
}

.fi-prose > * + * { margin-block-start: var(--fi-space-4); }
.fi-prose > * + h2 { margin-block-start: var(--fi-space-7); }
.fi-prose > * + h3 { margin-block-start: var(--fi-space-6); }

/* Skip link --------------------------------------------------------- */

.fi-skip-link {
	position: absolute;
	inset-inline-start: var(--fi-gutter);
	inset-block-start: var(--fi-space-2);
	z-index: 100;
	padding: var(--fi-space-3) var(--fi-space-5);
	background-color: var(--fi-accent);
	color: var(--fi-on-accent);
	border-radius: var(--fi-radius-pill);
	font-weight: var(--fi-weight-medium);
	text-decoration: none;
	transform: translateY(-200%);
}

.fi-skip-link:focus {
	transform: translateY(0);
	color: var(--fi-on-accent);
}

.fi-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}