/* MathLab site typography (Math Lab Lesson Style Guide, Nov 2026).
   Loaded last on every page by dist/server/typography-entry.mjs.
   Fonts are self-hosted in /fonts. Screen only: printed
   worksheets keep worksheet-print.css. Colors and layout are unchanged. */
/* Self-hosted (SIL Open Font License), latin subset. */
@font-face{font-family:"Bricolage Grotesque";src:url("/mathlab-fonts/bricolage-grotesque-wght.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/mathlab-fonts/ibm-plex-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/mathlab-fonts/ibm-plex-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/mathlab-fonts/ibm-plex-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/mathlab-fonts/ibm-plex-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/mathlab-fonts/ibm-plex-sans-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/mathlab-fonts/ibm-plex-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/mathlab-fonts/ibm-plex-mono-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"STIX Two Text";src:url("/mathlab-fonts/stix-two-text-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"STIX Two Text";src:url("/mathlab-fonts/stix-two-text-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"STIX Two Text";src:url("/mathlab-fonts/stix-two-text-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* V3.09 names Space Grotesk and DM Sans directly in its components; these faces
   map those names to the style guide fonts. Declared after Google Fonts, so they win. */
@font-face{font-family:"Space Grotesk";src:url("/mathlab-fonts/bricolage-grotesque-wght.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/mathlab-fonts/bricolage-grotesque-wght.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/mathlab-fonts/bricolage-grotesque-wght.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/mathlab-fonts/bricolage-grotesque-wght.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/mathlab-fonts/bricolage-grotesque-wght.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/mathlab-fonts/bricolage-grotesque-wght.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/mathlab-fonts/ibm-plex-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/mathlab-fonts/ibm-plex-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/mathlab-fonts/ibm-plex-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/mathlab-fonts/ibm-plex-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/mathlab-fonts/ibm-plex-sans-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

@media screen {
  :root {
    --ml-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --ml-body: "IBM Plex Sans", "Segoe UI", system-ui, Arial, sans-serif;
    --ml-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    --ml-math: "STIX Two Text", "Cambria Math", "Times New Roman", serif;
  }

  body { font-family: var(--ml-body); font-size: 16px; line-height: 1.6; }

  h1, h2, h3, .brand, .big { font-family: var(--ml-display) !important; text-wrap: balance; }
  h1 { font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
  h2 { font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
  h3 { font-weight: 700; line-height: 1.25; }
  main h1 { font-size: clamp(32px, 6vw, 50px); }
  main h2 { font-size: clamp(24px, 4vw, 32px); }
  main h3 { font-size: 20px; }

  .brand { font-weight: 800; }
  .teacher { font-family: var(--ml-body); }

  /* Eyebrows, small labels, chips and section numbers */
  .eyebrow, [class$="-eyebrow"], [class*="-eyebrow "] {
    font-family: var(--ml-mono); font-size: 12px; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
  }

  /* Controls */
  button, .button, [class$="-btn"], [class*="-btn "] { font-family: var(--ml-body); font-weight: 600; }

  /* Numbers that line up */
  table, .score, [class*="score"], [class*="timer"], [class*="-stat"] { font-variant-numeric: tabular-nums; }
}