/* ============================================================================
   Typography: off by heart
   ----------------------------------------------------------------------------
   Space Grotesk for anything that speaks in the brand's voice: the wordmark,
   headings, scores, numbers. Inter for anything a pupil has to read a lot of:
   body copy, questions, answers, feedback.

   Both are self-hosted variable fonts, latin subset only, 70KB for the pair.
   Nothing is fetched from a CDN, because the content security policy allows
   nothing off this origin and a revision app should not phone Google every
   time a child opens it.

   The scale below is the only place font sizes are defined. Components use the
   --text-* tokens, never a raw rem value.
   ============================================================================ */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk-latin.woff2') format('woff2');
  font-weight: 300 700;              /* variable: one file covers the range */
  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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin.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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Fallbacks are the system stack, so the app is readable before the fonts
     land and unbroken if they never do. */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* -- scale -------------------------------------------------------------- */
  --text-2xs: 0.6875rem;   /* 11px  overline labels */
  --text-xs: 0.75rem;      /* 12px  captions, meta */
  --text-sm: 0.8125rem;    /* 13px  hints */
  --text-md: 0.9375rem;    /* 15px  dense UI, table cells */
  --text-base: 1.0625rem;  /* 17px  body. The reading size. */
  --text-lg: 1.1875rem;    /* 19px  lead paragraphs, questions */
  --text-xl: 1.375rem;     /* 22px  section headings */
  --text-2xl: 1.75rem;     /* 28px  screen titles */
  --text-3xl: 2.25rem;     /* 36px  scores */
  --text-4xl: 3rem;        /* 48px  the big number on a result */

  /* -- weight ------------------------------------------------------------- */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 700;

  /* -- rhythm ------------------------------------------------------------- */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.6;     /* long prose on a phone wants room */
  --leading-loose: 1.75;

  --tracking-tight: -0.022em;   /* Space Grotesk at display sizes */
  --tracking-normal: 0;
  --tracking-wide: 0.08em;      /* uppercase overlines only */
}

/* -- element defaults ------------------------------------------------------ */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-weight: var(--weight-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv05' 1;   /* Inter's single-storey l, easier to read */
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

p { margin: 0 0 0.85em; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--weight-semi); }

/* Numbers that should line up in a column: scores, marks, tallies. */
.tabular { font-variant-numeric: tabular-nums; }

/* -- reusable type roles --------------------------------------------------- */

/* Small uppercase label above a group of things. */
.overline {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.lede {
  font-size: var(--text-base);
  color: var(--ink-soft);
  margin-top: var(--space-2);
}

.hint {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--ink-faint);
}

/* Long-form reading: the episode summary, mostly. */
.prose {
  max-width: var(--width-read);
  line-height: var(--leading-loose);
}
.prose p { margin-bottom: 1.1em; }

/* ============================================================================
   The wordmark
   ----------------------------------------------------------------------------
   The supplied artwork, placed rather than recreated. Sized by width, because
   the aspect ratio comes from the file and the height should follow it.
   ============================================================================ */

.wordmark {
  display: block;
  width: 100%;
  height: auto;
}