/* ------------------------------------------------------------------------- *
 * Sketch Typography — the site typeface, Saans.
 *
 * One self-hosted variable font file covers the whole family:
 *   wght  300 – 900   Light · Regular · Medium · SemiBold · Bold · Heavy
 *   ital  0 – 10      upright → italic
 *   MONO  0 – 100     proportional → semi-mono → mono
 *
 * Because it is one file, every weight/italic/mono combination costs a single
 * ~152 KB download. Do not add per-weight @font-face rules.
 * ------------------------------------------------------------------------- */

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

@font-face {
	font-family: "Saans";
	src: url("../fonts/SaansVF.woff2") format("woff2");
	font-weight: 300 900;
	font-style: italic;
	/* Saans' `ital` axis runs 0–10, not the usual 0–1. Without this line the
	   browser maps `font-style: italic` to `ital: 1` — a 10% slant that reads
	   as upright — and italics silently stop working. */
	font-variation-settings: "ital" 10;
	font-display: swap;
}

:root {
	--sk-font: "Saans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--sk-font-heading: var(--sk-font);
	--sk-font-mono: "Saans", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Site-wide default. Deliberately type selectors only (specificity 0,0,1) so
   icon fonts (.fa, .mfn-icon, WPBakery) and any component that sets its own
   family still win — no !important needed anywhere. */
html,
body,
button,
input,
optgroup,
select,
textarea,
h1, h2, h3, h4, h5, h6 {
	font-family: var(--sk-font);
}

/* The MONO axis, on tap. Same file, no extra download — useful for figures,
   tabular data and code-ish UI. */
.sk-mono {
	font-family: var(--sk-font-mono);
	font-variation-settings: "MONO" 100;
}

.sk-semimono {
	font-family: var(--sk-font-mono);
	font-variation-settings: "MONO" 50;
}