/* =====================================================================
   LULU'S LAB — WEB FONTS

   DEV PROVISION, not a licensing decision.
   The reference composition is set in a geometric sans (Poppins letter-
   forms) with a transitional serif for the pink tagline. Both faces here
   are SIL Open Font License releases, subset to Latin + the punctuation
   the site actually uses, and self-hosted so the CSP stays at
   default-src 'self'.

   Swap in the licensed production faces by replacing the files in
   src/assets/fonts/ and the src: URLs below — no other code changes.
   ===================================================================== */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins-700.ttf') format('truetype');
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/lora-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/lora-400-italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/lora-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/lora-700-italic.ttf') format('truetype');
}


/* ---------------------------------------------------------------------
   METRIC-MATCHED FALLBACK FOR THE HEADLINE

   LULU'S LAB MUSIC is set to fill the text column on one line, so its
   width has very little slack. Measured at the 1200px composition:
   Poppins Bold sets the string at 885px in an 889px column — 4px spare.
   Every common fallback is wider (Arial/Helvetica/Liberation 941px,
   Montserrat/Futura/Avenir/Century Gothic 952px, DejaVu 1039px), so for
   the moment before the webfont paints — and permanently if it ever
   fails to load — the headline wrapped MUSIC onto a second line.

   size-adjust scales the fallback's advance widths to Poppins', so the
   line holds its width in either state and there is no reflow on swap.
   885 / 941 = 94%.
   ------------------------------------------------------------------- */
@font-face {
  font-family: 'Poppins Metric Fallback';
  src: local('Arial Bold'), local('Helvetica Bold'),
       local('Liberation Sans Bold'), local('Arial'), local('Helvetica');
  font-weight: 700;
  font-style: normal;
  size-adjust: 94%;
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 0%;
}

/* The real display face carries its own weight, so the synthetic-bold
   compensation the fallback stack needs is switched off. */
:root { --fw-display: 700; }