/* Palette Boy, type.
 *
 * A characterful editorial serif against a quiet workhorse grotesque, rather
 * than two grotesques. Two sans faces of similar temperature give you size
 * contrast and nothing else, which is what makes an interface read as
 * templated; a serif with real voice next to a neutral text face gives the page
 * an actual hierarchy of tone.
 *
 * PB Display is Fraunces. Variable on four axes: opsz, wght, SOFT and WONK.
 *   opsz is the one that matters, Fraunces is an optical-size family, so
 *   setting opsz to match the rendered size gives headlines proper display
 *   contrast and small text proper sturdiness, from one file.
 *   SOFT rounds the terminals; WONK swaps in the splayed, slightly odd
 *   alternates. A little of both is what keeps it warm rather than austere,
 *   which is the register the dog illustrations are already in.
 *
 * PB Text is Instrument Sans. Variable wdth + wght. Neutral, tight, excellent at
 *   small sizes, and its slightly condensed default keeps dense editorial
 *   furniture legible without shouting.
 *
 * PB Mono is IBM Plex Mono. Hex codes and numerals only.
 *
 * Latin only, by design: the app is English for now.
 */

@font-face {
  font-family: 'PB Display';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fraunces-var.woff2) format('woff2-variations');
  unicode-range: U+0020-007E, U+00A0, U+00B7, U+00D7, U+2013-2014, U+2018-201D, U+2026, U+2192;
}

/* PB Poster: the same Fraunces file, pinned to display optical size.
 *
 * Canvas has no `font-variation-settings`: `ctx.font` is the CSS font
 * SHORTHAND and the shorthand cannot carry variation axes, so text drawn on a
 * canvas gets Fraunces at its default opsz 14, the small-text cut, sturdy and
 * low-contrast, which is exactly wrong at 150px. Declaring a second family with
 * the axes fixed in the @font-face descriptor is the way to reach them from
 * canvas at all. Costs nothing: same woff2, already downloaded.
 */
@font-face {
  font-family: 'PB Poster';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 1;
  src: url(fraunces-var.woff2) format('woff2-variations');
  unicode-range: U+0020-007E, U+00A0, U+00B7, U+00D7, U+2013-2014, U+2018-201D, U+2026, U+2192;
}

@font-face {
  font-family: 'PB Text';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(instrument-var.woff2) format('woff2-variations');
  unicode-range: U+0020-007E, U+00A0, U+00B7, U+00D7, U+2013-2014, U+2018-201D, U+2026, U+2192;
}

@font-face {
  font-family: 'PB Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(plexmono-400-latin.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+2013-2014, U+2018-201D;
}
@font-face {
  font-family: 'PB Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(plexmono-500-latin.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+2013-2014, U+2018-201D;
}
@font-face {
  font-family: 'PB Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(plexmono-600-latin.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+2013-2014, U+2018-201D;
}