/**
 * The caption's typeface, shipped with the page.
 *
 * The caption used to be set in "Segoe UI" then system-ui, so it was whatever the
 * visitor's device had: Segoe on Windows, San Francisco on an iPhone, Roboto on Android.
 * That is fine on screen, but record.js burns the same caption into the shared video with
 * a canvas, and a canvas and a page are not obliged to resolve a system font the same
 * way. They did not - the clip's text looked like a different app's.
 *
 * Handing both the same font FILE removes the question. Inter (SIL Open Font License, see
 * fonts/Inter-LICENSE.txt) is a close cousin of the system faces it replaces, so the
 * caption still looks at home on every phone. It is a variable font: one 48 KB file
 * carries every weight, and the caption's 600 is exact rather than a synthesised bold.
 *
 * Latin only, by unicode-range. Other scripts (Chinese, Japanese, Arabic, ...) are not in
 * the file and fall through to the same system fallbacks the page always used, so
 * languages the app speaks are not turned into boxes.
 */
@font-face {
  font-family: "RoastCam Caption";
  src: url("fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* After styles.css, so it replaces the stack styles.css gives the caption. The rest of
   that stack is kept, behind the new face. */
#caption {
  font-family: "RoastCam Caption", "Segoe UI", system-ui,
    "Yu Gothic UI", "Meiryo",
    "Microsoft YaHei UI", "Microsoft JhengHei UI",
    "Segoe UI Historic", "Segoe UI Emoji",
    "Tahoma",
    sans-serif;
}