@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/Newsreader-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/Newsreader-Italic-Variable.ttf') format('truetype');
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Italic-Variable.ttf') format('truetype');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik';
  src: url('/fonts/Rubik-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik';
  src: url('/fonts/Rubik-Italic-Variable.ttf') format('truetype');
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Italic-Variable.ttf') format('truetype');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato-Italic.ttf') format('truetype');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato-BoldItalic.ttf') format('truetype');
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Merriweather';
  src: url('/fonts/Merriweather-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: 'Merriweather';
  src: url('/fonts/Merriweather-Italic-Variable.ttf') format('truetype');
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
}

/*
 * GM render-parity fix 2026-04-19:
 * Mirror every @font-face under a namespaced family name ("SSP:Family") so
 * the shared canvas painter (packages/shared-presentation/index.js) can put
 * that name first in the font stack and avoid the static system fonts bundled
 * inside the staging Alpine container (font-merriweather / font-inter /
 * font-montserrat apk packages). The backend registers the same TTFs under
 * the same prefixed name (apps/backend/src/lib/studio-render/render-fonts.ts).
 * The unprefixed families remain available as second fallback and for any
 * existing consumers.
 */

@font-face {
  font-family: 'SSP:Newsreader';
  src: url('/fonts/Newsreader-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: 'SSP:Newsreader';
  src: url('/fonts/Newsreader-Italic-Variable.ttf') format('truetype');
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: 'SSP:Manrope';
  src: url('/fonts/Manrope-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: 'SSP:IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'SSP:Inter';
  src: url('/fonts/Inter-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'SSP:Inter';
  src: url('/fonts/Inter-Italic-Variable.ttf') format('truetype');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'SSP:Rubik';
  src: url('/fonts/Rubik-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: 'SSP:Rubik';
  src: url('/fonts/Rubik-Italic-Variable.ttf') format('truetype');
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: 'SSP:Montserrat';
  src: url('/fonts/Montserrat-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'SSP:Montserrat';
  src: url('/fonts/Montserrat-Italic-Variable.ttf') format('truetype');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'SSP:Lato';
  src: url('/fonts/Lato-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'SSP:Lato';
  src: url('/fonts/Lato-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'SSP:Lato';
  src: url('/fonts/Lato-Italic.ttf') format('truetype');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'SSP:Lato';
  src: url('/fonts/Lato-BoldItalic.ttf') format('truetype');
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'SSP:Merriweather';
  src: url('/fonts/Merriweather-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: 'SSP:Merriweather';
  src: url('/fonts/Merriweather-Italic-Variable.ttf') format('truetype');
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
}