/*
 * Self-hosted fonts.
 *
 * The woff2 files in /assets/fonts/ are the latin subsets Google Fonts serves,
 * saved locally. Self-hosting keeps the site off Google's servers, which is
 * both faster and avoids the consent question entirely. Licences in OFL.txt.
 *
 * Latin only, deliberately: no front-end copy in this theme uses a character
 * outside that range. The one exception in the source, the arrow in "Media
 * Library → the image", is admin help text, which wp-admin sets in its own
 * fonts. Adding latin-ext would be ~40% more bytes to render nothing.
 *
 * Fraunces and Work Sans are variable, so one file covers the whole weight
 * range — Google serves the same file for every weight of Work Sans, so the
 * 400/500/600 this theme uses would otherwise be three identical downloads.
 * IBM Plex Mono really is two static instances.
 *
 * Fraunces also carries an optical-size axis, which browsers apply on their
 * own through font-optical-sizing: auto. That is the point of the typeface,
 * so it is left on rather than pinned.
 */

@font-face {
	font-family: "Fraunces";
	src: url("fonts/Fraunces-variable.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Fraunces";
	src: url("fonts/Fraunces-italic-variable.woff2") format("woff2");
	font-weight: 300 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Work Sans";
	src: url("fonts/WorkSans-variable.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* Visually hidden, used by the skip link. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 12px 20px;
	background: #fff;
}