/* RightCard brand typography — ONE source of truth for every page.
 *
 * Linked LAST in each <head>, after that page's own <style>, so these rules
 * win ties and the whole site can never drift apart again. Change the font
 * here and it changes everywhere, including the generated answer pages.
 *
 * The system:
 *   BODY / UI / NUMBERS -> the system stack (SF Pro on Apple, Segoe on
 *   Windows, Roboto on Android). Identical to the iOS app, loads instantly,
 *   never flashes, never renders wrong. Site and product read as one thing.
 *
 *   DISPLAY HEADLINES  -> Instrument Serif. One distinctive face, used only
 *   where a page speaks: h1, h2, and anything marked .serif (pull quotes).
 *   That is the brand's voice; everything you actually READ stays system.
 *
 * Why not a webfont for body too: it would be a second face to load on every
 * page for no identity gain, and it would stop matching the app.
 */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

:root{
  --rc-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --rc-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
}

body{ font-family: var(--rc-sans); }

/* The display voice. Weight stays 400 — Instrument Serif is designed to be
 * set light at size; bolding it flattens the contrast that makes it work.
 * Each page keeps its own font-size, so nothing about the existing layouts
 * moves; only the face and its tracking change. */
h1, h2, .serif{
  font-family: var(--rc-serif);
  font-weight: 400;
  letter-spacing: -.02em;
}

/* Small headings stay in the system face: a 400-weight serif below ~20px
 * reads thin and loses its authority next to system body text. */
h3, h4, h5, h6{ font-family: var(--rc-sans); }