/* ==========================================================================
   mo-fonts.css - MissionOaks.dev, LLC
   Self-hosted webfonts. Loaded by the one-page site.
   --------------------------------------------------------------------------

   WHY THESE FONTS ARE SELF-HOSTED - PLEASE READ BEFORE "OPTIMISING" THIS FILE
   --------------------------------------------------------------------------
   Do NOT replace these @font-face rules with a <link> to fonts.googleapis.com.
   It looks like a simplification. It is actually a regression, for two reasons
   that are both enforced by this site's own server config:

   1. COEP. public_html/.htaccess sends:
          Cross-Origin-Embedder-Policy: require-corp
      Under require-corp, every cross-origin subresource must opt in by sending
      Cross-Origin-Resource-Policy (or be fetched with CORS). A plain stylesheet
      <link> to Google Fonts is a no-cors request, so the browser may refuse the
      stylesheet and/or the .woff2 files it points at. The failure is silent -
      the page still renders, just in Times New Roman - which is exactly the
      kind of bug that survives a casual "looks fine to me" check.

   2. CSP. The Content-Security-Policy allows font-src 'self'. Same-origin fonts
      are always allowed and are structurally immune to COEP, because COEP only
      governs *cross*-origin resources. Serving from /webfonts/ sidesteps both
      problems instead of trying to negotiate with them.

   Secondary benefits: one less DNS lookup + TLS handshake on first paint, no
   third-party dependency in the critical render path, and no visitor data
   handed to a font CDN on every page view.

   --------------------------------------------------------------------------
   WHAT IS HERE
   --------------------------------------------------------------------------
   Archivo          variable, wght 100-900 + wdth 62%-125%  - headings and UI
   Instrument Serif 400 roman + 400 italic                  - editorial accent
   IBM Plex Mono    400 and 500                             - eyebrows, labels

   SUBSETS: latin and latin-ext only. The vietnamese and cyrillic subsets that
   Google also publishes were deliberately not downloaded - this is an English-
   language site for Santa Barbara & Ventura County, and they would roughly
   double the font payload for glyphs no visitor will request. Consequence to
   be aware of: a character outside the unicode-range values below (Vietnamese
   tone marks, Cyrillic) falls back to a system font rather than rendering in
   Archivo. If the site ever needs those scripts, re-fetch the missing subsets
   from the Google Fonts CSS2 API rather than deleting the unicode-range lines.

   LEARNING NOTE - why unicode-range matters. It is not decoration. It tells the
   browser which codepoints live in each file, so the browser downloads a file
   ONLY if the page actually uses a character from that range. Drop these lines
   and every visitor downloads every subset on every visit. Keep them accurate:
   a range that claims glyphs the file does not contain produces tofu boxes,
   because the browser stops looking for a fallback once it believes it has a
   match.

   LEARNING NOTE - font-display: swap. Text paints immediately in the fallback
   font and is re-rendered when the webfont arrives. The tradeoff is a brief
   visible reflow (FOUT) instead of invisible text (FOIT). For a marketing page
   whose job is to be read, showing the words early is the right call.

   LEARNING NOTE - variable fonts. Archivo ships as ONE file covering the whole
   100-900 weight range and the 62%-125% width range, rather than one file per
   weight. The two-value "font-weight: 100 900" and "font-stretch: 62% 125%"
   descriptors are what tell the browser this file can satisfy any weight or
   width in those ranges. Omit them and the browser assumes a single static
   weight and synthesises a fake bold, which looks noticeably worse. Reach the
   width axis from normal CSS with font-stretch (e.g. font-stretch: 112%) or
   font-variation-settings: "wdth" 112.

   Source:    Google Fonts CSS2 API. All three families are SIL Open Font
              License 1.1, which permits self-hosting.
   Fetched:   2026-09-17
   Versions:  Archivo v25, Instrument Serif v5, IBM Plex Mono v20
   Re-fetch:  curl with a modern browser User-Agent against, e.g.
              https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&display=swap
              A browser UA is required. Without one the API returns .ttf
              instead of .woff2, which is roughly 3x the bytes.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. ARCHIVO - variable (wght 100-900, wdth 62%-125%)
   Headings and UI. The wdth axis carries the semi-extended headline look.
   -------------------------------------------------------------------------- */

/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../webfonts/archivo-variable-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;
}

/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../webfonts/archivo-variable-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;
}


/* --------------------------------------------------------------------------
   2. INSTRUMENT SERIF - 400 roman + 400 italic
   Editorial display accent. Static faces; this family publishes no variable
   axes, so do not add a two-value font-weight range here.
   -------------------------------------------------------------------------- */

/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../webfonts/instrument-serif-400-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;
}

/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../webfonts/instrument-serif-400-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;
}

/* latin - italic */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../webfonts/instrument-serif-400-italic-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;
}

/* latin-ext - italic */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../webfonts/instrument-serif-400-italic-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;
}


/* --------------------------------------------------------------------------
   3. IBM PLEX MONO - 400 and 500
   Small-caps labels, eyebrows, code-ish details. Static faces.
   Only 400 and 500 are shipped. Asking CSS for 600/700 Plex Mono makes the
   browser synthesise a fake bold from 500; add the real weight file instead.
   -------------------------------------------------------------------------- */

/* latin - 400 */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../webfonts/ibm-plex-mono-400-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;
}

/* latin-ext - 400 */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../webfonts/ibm-plex-mono-400-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;
}

/* latin - 500 */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../webfonts/ibm-plex-mono-500-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;
}

/* latin-ext - 500 */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../webfonts/ibm-plex-mono-500-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;
}