/* ============================================================================
   JR&CO Font Layer — typeface ONLY (derived from the Brand Guidelines Book,
   5.15.2025, pp. 12–14). This sheet forces the brand typeface on a page
   WITHOUT re-skinning colors or layout — unlike the full jrco-brand.css.

   Use this on pages that already have their own palette/layout but should
   still render in the brand typeface (e.g. the Project Management app pages).
   For a full brand re-skin, use jrco-brand.css instead.

   TWO SYNCED COPIES (repo has two web roots — keep them identical):
     • Style Guide/jrco-font.css            <- CANONICAL source (edit here).
     • Project_Management/css/jrco-font.css <- SERVED MIRROR for the PM app.
       After editing the canonical file, copy it to the PM css/ mirror.

   Link in <head> LAST (after the page's own inline <style> and any Google
   Fonts links) so the !important font rules win the cascade:
     PM app root:   <link rel="stylesheet" href="css/jrco-font.css">
     PM subfolders: <link rel="stylesheet" href="../css/jrco-font.css">
     repo root:     <link rel="stylesheet" href="Style%20Guide/jrco-font.css">
   ============================================================================ */

/* Brand primary typeface is Neue Haas Grotesk (Brand Book p.12), loaded via the
   JR&CO Adobe Fonts (Typekit) kit — provides neue-haas-grotesk-display and
   neue-haas-grotesk-text. Arial / Arial Black remain the documented web-safe
   fallback (Brand Book p.13). A CSS @import must stay above all style rules. */
@import url("https://use.typekit.net/dhj1sez.css");

:root {
  --font:"neue-haas-grotesk-display","neue-haas-grotesk-text",Arial,Helvetica,sans-serif;
  --font-text:"neue-haas-grotesk-text",Arial,Helvetica,sans-serif;
  --font-black:"neue-haas-grotesk-display","Arial Black",Arial,Helvetica,sans-serif;
}

/* Force the brand typeface everywhere. Monospace elements are re-asserted below
   so code/tabular content keeps a fixed-width face. No PM page uses an icon
   font, so this does not affect glyph icons. */
* { font-family:var(--font) !important; }

/* Preserve fixed-width faces for code/tabular content. */
code, pre, kbd, samp, tt {
  font-family:ui-monospace,"DM Mono","SFMono-Regular","Courier New",monospace !important;
}

/* Headlines use the heavier display cut with tight (negative) tracking, per the
   brand book ("spacing is kept tight"). Headings stay bold; we don't override
   weight/size on body elements so each page's hierarchy is preserved. */
h1, h2, h3, h4 {
  font-family:var(--font-black) !important;
  letter-spacing:-0.02em;
}
