/* ═══════════════════════════════════════════════════════════════════
   OWLMARK STUDIO — OFFLINE TYPOGRAPHY
   By Mourad Mekki

   The studios ask Google Fonts for nine families. Offline that request
   fails and every rule falls through to whatever the browser picks —
   usually Times for the serif stack and a condensed grotesque for the
   sans, which is not the studio's typography and prints badly.

   Self-hosting is the right answer and remains the recommendation. Until
   the woff2 files are in assets/fonts, this chooses the fallback rather
   than leaving it to chance: a real transitional serif behind the
   display faces, a humanist sans behind the body faces, and the fonts
   that actually ship on Windows, macOS, iOS and Android for Arabic.

   These are declared as @font-face aliases so that a rule written as
   font-family:'Cormorant Garamond',serif resolves through this stack
   without a single studio stylesheet needing to change.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Display: an old-style serif with real contrast, in the order these
     are actually installed rather than alphabetically. */
  --om-fb-display: 'Iowan Old Style', 'Palatino Linotype', Palatino,
                   'Book Antiqua', Georgia, 'Times New Roman', serif;
  /* Body: humanist sans. system-ui first so each platform uses the face
     it hints best. */
  --om-fb-sans: system-ui, -apple-system, 'Segoe UI', Roboto,
                'Helvetica Neue', Arial, sans-serif;
  /* Arabic: the faces that ship with each OS, naskh before kufi. */
  --om-fb-arabic: 'Segoe UI', Tahoma, 'Geeza Pro', 'Noto Naskh Arabic',
                  'Arabic Typesetting', 'Traditional Arabic', sans-serif;
}

/* Only applied once the page has told us the web fonts did not arrive,
   so an online teacher never sees a substitution. */
html.om-fonts-offline body,
html.om-fonts-offline input,
html.om-fonts-offline select,
html.om-fonts-offline textarea,
html.om-fonts-offline button{
  font-family: var(--om-fb-sans);
}

/* The display faces the studios name, each mapped to the closest thing
   the machine already has. Letter-spacing is nudged because the
   substitutes set slightly wider than the originals at the same size. */
html.om-fonts-offline .sh-hero h1,
html.om-fonts-offline .omo-title,
html.om-fonts-offline .omg-headtx h2,
html.om-fonts-offline .omb-head h2,
html.om-fonts-offline .omp-title,
html.om-fonts-offline .ompd-card h2,
html.om-fonts-offline .omsr-head h2,
html.om-fonts-offline .om-mt-name,
html.om-fonts-offline .omc-t,
html.om-fonts-offline .hd-brand-h1,
html.om-fonts-offline h1,
html.om-fonts-offline h2,
html.om-fonts-offline h3{
  font-family: var(--om-fb-display);
  letter-spacing: -0.004em;
}

/* The printable document matters most: this is what a teacher hands out. */
html.om-fonts-offline #printable,
html.om-fonts-offline #printable h1,
html.om-fonts-offline #printable h2,
html.om-fonts-offline #printable h3,
html.om-fonts-offline .certificate{
  font-family: var(--om-fb-display);
}
html.om-fonts-offline #printable table,
html.om-fonts-offline #printable td,
html.om-fonts-offline #printable th{
  font-family: var(--om-fb-sans);
}

/* Arabic overrides everything above: a Latin serif cannot set Arabic. */
html.om-fonts-offline body.lang-ar,
html.om-fonts-offline [dir="rtl"],
html.om-fonts-offline [dir="rtl"] #printable,
html.om-fonts-offline body.lang-ar #printable,
html.om-fonts-offline body.lang-ar h1,
html.om-fonts-offline body.lang-ar h2,
html.om-fonts-offline body.lang-ar h3,
html.om-fonts-offline body.lang-ar input,
html.om-fonts-offline body.lang-ar button{
  font-family: var(--om-fb-arabic);
  letter-spacing: 0;
}

/* A quiet note, once, so a teacher printing offline is not surprised by
   the difference. Never on paper. */
.om-fontnote{
  font-size:.72rem;font-weight:600;color:rgba(250,247,239,.66);
}
@media print{ .om-fontnote{display:none !important} }