/* ==========================================================================
   dns-fonts.css
   Self hosted faces for design 07.

   WHY SELF HOSTED
   The privacy page makes a specific, checkable claim: no third party fonts.
   audit_dns_live.py asserts zero requests to any host but this one on every
   deploy, so a link to fonts.googleapis.com would fail the build rather than
   quietly making the privacy page a lie.

   THE THREE FAMILIES
   Familjen Grotesk   display. Variable 400 to 700. Already self hosted before
                      this redesign, and nothing like the serif on site 1.
   Public Sans        body. Variable 400 to 700, drawn for civic use, so it
                      holds up at 16px without competing with the headings.
   Noto Sans Arabic   the Arabic route, variable 100 to 900. Chosen over Amiri,
                      a serif that would fight a grotesque, and over Reem Kufi,
                      a display face that tires at body size.

   THE FALLBACK OVERRIDES ARE MEASURED, NOT COPIED
   Each fallback below carries a size-adjust computed from the real advance
   widths of a representative sample string, glyph by glyph, against the
   system face named in its src. Measured by 05-Scripts, output recorded here.

   A first attempt derived these from OS/2.xAvgCharWidth and produced 122% for
   a face that is within 5% of Arial. Arial ships a legacy xAvgCharWidth of 903
   against a 2048 em, an old average-of-the-lowercase figure that is not
   comparable across fonts. Anything built on it is noise. The numbers here
   come from summed advance widths instead:

     Familjen Grotesk  0.4341 em per glyph, Arial 0.4571   ->  95.0%
     Public Sans       0.4663 em per glyph, Arial 0.4571   -> 102.0%
     Noto Sans Arabic  0.5765 em per glyph, Tahoma 0.5578  -> 103.4%

   ========================================================================== */

/* --- Familjen Grotesk, display ------------------------------------------ */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("../fonts/familjen-grotesk-latin-400-700.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Familjen Grotesk";
  src: url("../fonts/familjen-grotesk-latin-ext-400-700.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* --- Public Sans, body --------------------------------------------------- */

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-latin-400-700.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-latin-ext-400-700.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* --- Noto Sans Arabic, the Arabic route ---------------------------------- */

@font-face {
  font-family: "Noto Sans Arabic";
  src: url("../fonts/noto-sans-arabic-arabic-100-900.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "Noto Sans Arabic";
  src: url("../fonts/noto-sans-arabic-latin-100-900.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- metric matched fallbacks -------------------------------------------- */

@font-face {
  font-family: "Familjen Fallback";
  src: local("Arial");
  size-adjust: 95.0%;
  ascent-override: 102.5%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Public Fallback";
  src: local("Arial");
  size-adjust: 102.0%;
  ascent-override: 95.0%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Noto Arabic Fallback";
  src: local("Tahoma");
  size-adjust: 103.4%;
  ascent-override: 137.4%;
  descent-override: 73.8%;
  line-gap-override: 0%;
}

/* --- no synthesis --------------------------------------------------------
   If a face fails to load, the browser must not fake its bold or italic by
   smearing and slanting the fallback. On Arabic a synthesised bold is
   visibly wrong, and on Latin it hides the failure instead of showing it.
   Breaking loudly is the point.                                            */

html {
  font-synthesis: none;
  -webkit-font-synthesis: none;
}