/* =====================================================================
   YOUR OWN FONTS
   ---------------------------------------------------------------------
   Out of the box the tracker uses two free Google fonts:
     display -> Mountains of Christmas   (the big Christmassy headings)
     body    -> Fredoka                  (everything else)

   To use your own instead:

   1. Put the font files in  public/fonts/
   2. Uncomment the @font-face block below and fix the file names
   3. Uncomment the :root block at the bottom and put your font's name in

   That is it. Nothing else in the site needs changing - every heading
   and every paragraph reads from those two variables.

   ---------------------------------------------------------------------
   BEFORE YOU DO: three things worth knowing
   ---------------------------------------------------------------------

   1. CONVERT TTF TO WOFF2 FIRST.
      A .ttf is often 200-400 KB. The same font as .woff2 is usually
      under 40 KB. On a cold phone on a dark street, that is the
      difference between the title appearing instantly and appearing
      after the page has already drawn. Free converters: use a search
      for "ttf to woff2 converter" - most run in your browser and never
      upload the file anywhere.
      Keep the .ttf line as a fallback; browsers take the first one
      they understand.

   2. CHECK THE LICENCE.
      A great many free Christmas fonts are "free for personal use" and
      need a paid licence the moment there is a sponsor logo on the page.
      Ours arguably is commercial. Look for OFL, Apache, or a licence
      that explicitly says webfont embedding is allowed. If in doubt, the
      Google Fonts library is entirely safe and has plenty of options.

   3. KEEP THE BODY FONT PLAIN.
      A hand-lettered Christmas font is lovely at 48px and unreadable at
      13px - especially outdoors, at night, on a phone, by someone in
      their fifties without their glasses. Change --display all you
      like. Think twice before changing --body.
   ===================================================================== */


/* ---------------------------------------------------------------------
   STEP 1 - describe your font file to the browser
   Remove the slash-star and star-slash around this block to switch on.
   --------------------------------------------------------------------- */
/*
@font-face {
  font-family: 'My Christmas Font';
  src: url('fonts/my-christmas-font.woff2') format('woff2'),
       url('fonts/my-christmas-font.ttf')   format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
*/


/* ---------------------------------------------------------------------
   STEP 2 - tell the site to use it
   The last name in each list is the fallback if your font fails to load.
   --------------------------------------------------------------------- */
/*
:root {
  --display: 'My Christmas Font', 'Mountains of Christmas', Georgia, serif;
}
*/


/* ---------------------------------------------------------------------
   OPTIONAL - a few taste adjustments
   Some display fonts sit high or low in their line, or come out too
   small. Uncomment and nudge as needed.
   --------------------------------------------------------------------- */
/*
.wordmark h1, .headline, .lights-head h2 {
  letter-spacing: .01em;
  line-height: 1.05;
}
*/