/*
 * Bricolage Grotesque and Space Grotesk, served from this domain.
 *
 * Self-hosted on purpose. A guest opening an invitation should not have their
 * browser announce it to a third party - the privacy page says there is no
 * third-party anything on these pages, and a font request is a request. It also
 * means the content security policy needs no exception for a font host, so
 * style-src and font-src stay at 'self'.
 *
 * Both families are variable fonts, so one file covers every weight we use.
 * Latin and Latin Extended only, which is enough for English and Portuguese.
 *
 * Two things stop a visitor watching the type change under them.
 *
 * The first is a preload in the page head. A font declared only here is not
 * discovered until this stylesheet has been fetched and parsed, which is one
 * round trip after the HTML - long enough that the page paints in the fallback
 * and then visibly redraws. The preload starts both files alongside the
 * stylesheet instead, so they are usually there before the first paint.
 *
 * The second is the pair of adjusted fallbacks below. When the swap does
 * happen - a cold cache on a slow connection - matched metrics mean the
 * letterforms change and nothing else: no reflow, no line breaking in a
 * different place, no heading jumping down the page.
 */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-latin.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * The fallbacks, adjusted to the metrics of the real fonts.
 *
 * Measured rather than guessed: at 100px, a long sample of English and
 * Portuguese sets at 4889px in Bricolage and 5435px in Arial, so Arial has to
 * be scaled to 90% to take up the same room. Space Grotesk is slightly wider
 * than Arial and goes the other way. The ascent and descent are that same
 * measurement divided by the scale, because size-adjust scales those too.
 *
 * local() only, so neither of these ever costs a request: if none of the named
 * fonts is installed the face is simply not used and the stack moves on.
 */

/*
 * Two faces per family, split at bold.
 *
 * Arial stops at 700. Ask it for the 800 the headings are set in and the
 * browser draws Arial Regular with a stroke round it, which came out 25% wider
 * than Bricolage - the exact reflow this is meant to prevent. Naming Arial
 * Bold explicitly for the bold range means a real weight is used and nothing
 * is synthesised, and the two ranges can then be scaled separately.
 */

@font-face {
  font-family: 'Bricolage Fallback';
  font-weight: 400 600;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 90%;
  ascent-override: 103.3%;
  descent-override: 30%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Bricolage Fallback';
  font-weight: 700 800;
  src: local('Arial Bold'), local('Helvetica Bold'), local('Liberation Sans Bold');
  size-adjust: 91%;
  ascent-override: 102.4%;
  descent-override: 29.7%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Space Fallback';
  font-weight: 400 600;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 102%;
  ascent-override: 96.1%;
  descent-override: 28.4%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Space Fallback';
  font-weight: 700;
  src: local('Arial Bold'), local('Helvetica Bold'), local('Liberation Sans Bold');
  size-adjust: 98%;
  ascent-override: 99.8%;
  descent-override: 29.5%;
  line-gap-override: 0%;
}