/* Mizell Software — the typefaces, self-hosted.
 *
 * WHY SELF-HOSTED AND NOT A FONT CDN. A strict CSP (`font-src 'self' data:`) blocks external font
 * hosts outright, and that is the right setting to keep — a font CDN is a third party who learns
 * every visitor's IP on every page load, on a site whose visitors are prospective customers. These
 * files are served from our own origin, cached for a year, and answerable to nobody.
 *
 * WHY THESE FACES, because "a font was chosen" is the entire point and a default would defeat it.
 *
 *   NATIONAL PARK — display. It is drawn after US National Park Service signage: routed wood, cut by
 *   a machine, meant to be read outdoors from a distance. That register is the whole argument. The
 *   buyers here are HVAC, plumbing, roofing and pest-control owners in North Carolina, and the tell
 *   that makes a software site read as not-for-them is the startup geometric sans every SaaS landing
 *   page uses. This is the opposite of that and it is not a costume: it is a real signage face doing
 *   the job it was drawn for.
 *
 *   WORK SANS — body. A workhorse optimised for screen text at small sizes, neutral enough to
 *   disappear under the display face rather than argue with it. Italic ships because real prose
 *   needs it and faking it with `font-style: italic` on a face with no italic produces a sheared
 *   Roman, which looks broken to anyone who notices and subtly cheap to everyone who does not.
 *
 *   GEIST MONO — numbers. Invoice figures, allowance counters, dates. Tabular digits in a column
 *   that does not jitter as values change.
 *
 * All three are SIL Open Font License. The licence files sit beside these woff2s because OFL
 * requires the notice to travel with the fonts — do not tidy them away.
 *
 * SIZE. Six faces, subset to Latin plus the punctuation an English business site actually uses,
 * come to 83 KB total against 770 KB of source TTF — 11%. The two the first screen needs (National
 * Park Bold and Work Sans Regular) are 28 KB of that. Preload exactly those two in the document
 * head and let the rest arrive when they are needed; preloading all six would spend the saving.
 *
 * SUBSETTING CAVEAT: the range covers Latin-1 plus curly quotes, dashes, ellipsis, bullet, arrows,
 * the euro and the trademark. It does NOT cover Cyrillic, Greek, or CJK. If this site is ever
 * localised, re-cut the subsets — a missing glyph renders as a fallback box, not as nothing. */

@font-face {
  font-family: 'National Park';
  src: url('/fonts/NationalPark-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  /* `swap`, not `optional`: the headline IS the first screen, and a hero that silently renders in a
     fallback forever on a slow connection loses the one thing this face was chosen for. A brief
     flash of fallback text is the correct trade here. */
  font-display: swap;
}

@font-face {
  font-family: 'National Park';
  src: url('/fonts/NationalPark-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: 'Work Sans';
  src: url('/fonts/WorkSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* A REAL italic, not a synthesised one. Declaring it means the browser uses this file for
   `font-style: italic` instead of shearing the Roman by 12 degrees. */
@font-face {
  font-family: 'Work Sans';
  src: url('/fonts/WorkSans-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The fallback stacks matter more than they look. Until the woff2 lands, every visitor sees these
     — so they are chosen to be near in width and x-height rather than to be "a safe default", which
     is what keeps the swap from shoving the whole layout sideways when it happens. */
  --font-display: 'National Park', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* A SCALE, not a pile of arbitrary pixel values. Ratios rather than round numbers is what makes
     type read as decided; `clamp` is what keeps the display sizes from breaking a 320px phone.
     Nothing outside this list should appear in a stylesheet. */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.36rem);
  --step-2: clamp(1.44rem, 1.33rem + 0.55vw, 1.7rem);
  --step-3: clamp(1.73rem, 1.55rem + 0.9vw, 2.13rem);
  --step-4: clamp(2.07rem, 1.8rem + 1.37vw, 2.66rem);
  --step-5: clamp(2.49rem, 2.08rem + 2.05vw, 3.32rem);
  --step-6: clamp(2.99rem, 2.39rem + 2.99vw, 4.15rem);

  /* Tracking is set on the large sizes and only there. Display type at 4rem needs to be pulled in;
     body text at 1rem does not, and doing it anyway is a common way to make prose harder to read
     while believing you are designing. */
  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;

  --leading-display: 1.05;
  --leading-heading: 1.2;
  --leading-body: 1.65;

  /* Prose caps at ~68 characters. Past that the eye loses the line return. */
  --measure: 68ch;
}

/* Tabular figures wherever numbers sit in a column — money, allowances, dates. Without this a `1`
   is narrower than a `7` and a table of invoice totals jitters as the values change. */
.tabular,
[data-numeric] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}