/* =============================================================================
   GLOBAL TYPOGRAPHY SYSTEM — Dua's & Dua's (one file for every page)

   Two font families only:
     --font-heading  Playfair Display — every H1–H6, on every page
     --font-body     Poppins — paragraphs, navigation, buttons, forms, labels,
                     footer and all other text

   One responsive scale. The sizes are fluid between 360 px and 1280 px wide
   (clamp), so a heading has the same size on every page at the same screen
   width. Do not set font-family, or font-size on h1–h6 or p, anywhere else.
   Component CSS may only use the tokens below.

   Load this file BEFORE main.css on every page:
     <link rel="stylesheet" href="assets/css/typography.css">
   ============================================================================= */

@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/playfair-display-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 900;font-display:swap;src:url(../fonts/playfair-display-latin-wght-italic.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/poppins-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-latin-600-normal.woff2) format("woff2")}

:root{
  /* families */
  --font-heading:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-body:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* headings (29 Oct 2026 scale). H1 is unchanged: fluid 40 → 64 px.
     H2–H6 are fixed from 768 px up: 48 / 40 / 28 / 24 / 20 px.
     On phones (below 768 px) H2–H6 step down in the same proportion so that
     no heading is ever larger than the page's H1 (40 px there). */
  --fs-h1:clamp(2.5rem, 1.913rem + 2.609vw, 4rem);       /* 40 → 64 px (unchanged) */
  --fs-h2:3rem;                                           /* 48 px */
  --fs-h3:2.5rem;                                         /* 40 px */
  --fs-h4:1.75rem;                                        /* 28 px */
  --fs-h5:1.5rem;                                         /* 24 px */
  --fs-h6:1.25rem;                                        /* 20 px */
  --lh-h1:1.12; --lh-h2:1.18; --lh-h3:1.22; --lh-h4:1.3; --lh-h5:1.35; --lh-h6:1.4;
  --fw-heading:400;

  /* body text */
  --fs-body:1rem;          /* 16 px — every paragraph, list, link and form field */
  --lh-body:1.75;
  --fw-body:400;
  --fs-small:.875rem;      /* 14 px — fine print only (legal notes, meta, sub-menus) */

  /* interface text (Poppins) */
  --fs-ui:.8125rem;        /* 13 px — navigation, buttons */
  --fs-ui-xs:.75rem;       /* 12 px — eyebrows, labels, captions */
  --fs-micro:.6875rem;     /* 11 px — badges and seals only */
  --ls-ui:.08em;           /* letter-spacing for upper-case interface text */

  /* decorative text (outlined words and numbers, aria-hidden): always below H1 */
  --fs-display:clamp(1.75rem, 1.315rem + 1.932vw, 2.5rem);  /* 28 → 40 px */
  --fs-marquee:clamp(1.5rem, 1.174rem + 1.449vw, 2.25rem);  /* 24 → 36 px */
  --fs-stat:clamp(1.75rem, 1.533rem + .966vw, 2.25rem);     /* 28 → 36 px */

  /* default colours; dark sections redefine these two variables */
  --color-heading:#1b1b1b;
  --color-body:#5f5f5f;
}

html{font-size:100%;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-body);line-height:var(--lh-body);color:var(--color-body)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--fw-heading);color:var(--color-heading);margin:0 0 .5em;overflow-wrap:break-word}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3)}
h4{font-size:var(--fs-h4);line-height:var(--lh-h4)}
h5{font-size:var(--fs-h5);line-height:var(--lh-h5)}
h6{font-size:var(--fs-h6);line-height:var(--lh-h6)}
p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--color-body);margin:0 0 1em}
button,input,select,textarea{font-family:var(--font-body);font-size:var(--fs-body);line-height:1.5}
small,.text-small{font-size:var(--fs-small)}

@media (max-width:767.98px){
  :root{--fs-h2:2.125rem;--fs-h3:1.875rem;--fs-h4:1.5rem;--fs-h5:1.3125rem;--fs-h6:1.125rem}  /* 34 / 30 / 24 / 21 / 18 px */
}
/* dark backgrounds: same sizes and families, inverted colours */
.on-dark{--color-heading:#fff;--color-body:rgba(255,255,255,.74)}