/* ── the three families ─────────────────────────────────────────────────────
   Baloo Bhaijaan 2 is the display face and the only one that carries the brand:
   it is one of the very few heavy geometric faces drawn for Arabic and Latin
   together, so the wordmark, the giant name behind the product and its Arabic
   ghost are all set in the same hand rather than in two faces pretending.

   Avenir Arabic sets the body, where the Arabic has to hold at 15px and the
   display face gets soft. JetBrains Mono is the utility face: weights, prices,
   the small print running up the edge of the page.

   All three are served from the theme. Nothing here calls out to another host.

   ── how the files are cut ───────────────────────────────────────────────────
   Every family here is split by `unicode-range`, and the split is not the usual
   Latin/Arabic one. It is drawn between *letters* and everything else.

   The reason is what an Arabic sentence is actually made of. "عشرون بهاراً.
   غنية بدفء خفيف." is Arabic — except for the full stop, which is U+002E, an
   ASCII character. So is the comma, the bracket around a count, and every digit
   in "اعرض الكل (36)". Cut a font the conventional way and those five or six
   characters pull down the *entire Latin alphabet* in a heavy display weight:
   twenty-one kilobytes of A–Z, on a page that never draws a Latin letter.

   So the punctuation and the digits live with the Arabic, and the Latin cut
   holds letters and nothing else. On this site that file is never requested at
   all — and if a Latin word ever does appear, it still arrives, which is the
   point of doing it this way rather than deleting the file.
                                                                             */
/* ── why some of these are `optional` ────────────────────────────────────────
   `swap` says "draw it in something else, then change it when the real face
   arrives". That change is a relayout, and if the text has moved by the time it
   happens it is a layout shift — which is a quarter of what Google measures.

   Measured on this site: the only shift left on the front page was the footer's
   email address. `hello@haifawi.ps` is the one piece of Latin on the whole page,
   it pulls a nine-kilobyte file to draw it, that file lands after the footer has
   already been painted, and the line then moves four pixels. Four pixels for an
   email address, at the cost of the page's Cumulative Layout Shift.

   So every cut that only ever draws incidental Latin is `optional` instead: the
   browser uses it if it is already there within a hundred milliseconds, and
   otherwise leaves the fallback alone and never swaps. On a second visit it is
   cached and is used. Nothing on a first screen is set in one of these.

   The Arabic cuts, the punctuation cut and the mono keep `swap`. Those *are* the
   first screen — the headline, the full stop in it, and the counter under the
   jar — and a page drawn in the wrong face is worse than a page that settles.
                                                                             */
/* arabic */
@font-face{font-family:'Baloo Bhaijaan 2';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/baloo-bhaijaan-2-400-800-arabic.woff2) format('woff2');
  unicode-range:U+0020, U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
/* punctuation, digits and currency — see the note above. This is the cut an
   Arabic page actually needs alongside the Arabic one, and at 9KB it is less
   than half of what the full Latin file used to cost to draw a full stop. */
/* punctuation */
@font-face{font-family:'Baloo Bhaijaan 2';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/baloo-bhaijaan-2-400-800-punct.woff2) format('woff2');
  unicode-range:U+0021-0040, U+005B-0060, U+007B-007E, U+00A0-00BF, U+00D7, U+2010-2015, U+2018-201D, U+2026, U+2030, U+20AA, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* latin-ext */
@font-face{font-family:'Baloo Bhaijaan 2';font-style:normal;font-weight:400 800;font-display:optional;
  src:url(../fonts/baloo-bhaijaan-2-400-800-latin-ext.woff2) format('woff2');
  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}
/* latin letters */
@font-face{font-family:'Baloo Bhaijaan 2';font-style:normal;font-weight:400 800;font-display:optional;
  src:url(../fonts/baloo-bhaijaan-2-400-800-latin.woff2) format('woff2');
  unicode-range:U+0041-005A, U+0061-007A, U+00C0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+20AC}
/* latin-ext */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:optional;
  src:url(../fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');
  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}
/* latin */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/jetbrains-mono-400-latin.woff2) format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* latin-ext */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:optional;
  src:url(../fonts/jetbrains-mono-500-latin-ext.woff2) format('woff2');
  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}
/* latin */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/jetbrains-mono-500-latin.woff2) format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ── Avenir Arabic ───────────────────────────────────────────────────────────
   The body face. Only the weights that ship as real files are declared: a
   browser asked for a weight it does not have will synthesise one, and
   synthetic bold smears the joins between Arabic letters.

   Cut the same way as the display face above, and for the same reason: three of
   these weights are drawn on the front page's first screen, and at 38KB each
   that was a hundred and fifteen kilobytes of type standing in front of the
   product the page is measured on. Arabic plus punctuation is 25KB a weight,
   and the letters file is never fetched.

   Regenerating these, after replacing a source file:

     python3 -m fontTools.subset AvenirArabic-Book.woff2 \
       --unicodes="<the arabic range below, commas, no spaces>" \
       --layout-features='*' --flavor=woff2 --with-zopfli \
       --output-file=avenir-arabic-book-arabic.woff2

   `--layout-features='*'` is not optional. Arabic shaping *is* those features:
   drop them and every word comes out as unjoined letters.
                                                                             */
/* arabic + punctuation */
@font-face{font-family:"Avenir Arabic";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/avenir-arabic-book-arabic.woff2) format('woff2');
  unicode-range:U+0020-0040, U+005B-0060, U+007B-007E, U+00A0-00BF, U+00D7, U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E, U+2010-2015, U+2018-201D, U+2026, U+2030, U+204F, U+20AA, U+2E41, U+FB50-FDFF, U+FE70-FEFF}
/* latin letters */
@font-face{font-family:"Avenir Arabic";font-style:normal;font-weight:400;font-display:optional;
  src:url(../fonts/avenir-arabic-book-latin.woff2) format('woff2');
  unicode-range:U+0041-005A, U+0061-007A, U+00C0-00D6, U+00D8-00F6, U+00F8-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+20AC, U+2122}
/* arabic + punctuation */
@font-face{font-family:"Avenir Arabic";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/avenir-arabic-medium-arabic.woff2) format('woff2');
  unicode-range:U+0020-0040, U+005B-0060, U+007B-007E, U+00A0-00BF, U+00D7, U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E, U+2010-2015, U+2018-201D, U+2026, U+2030, U+204F, U+20AA, U+2E41, U+FB50-FDFF, U+FE70-FEFF}
/* latin letters */
@font-face{font-family:"Avenir Arabic";font-style:normal;font-weight:500;font-display:optional;
  src:url(../fonts/avenir-arabic-medium-latin.woff2) format('woff2');
  unicode-range:U+0041-005A, U+0061-007A, U+00C0-00D6, U+00D8-00F6, U+00F8-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+20AC, U+2122}
/* arabic + punctuation */
@font-face{font-family:"Avenir Arabic";font-style:normal;font-weight:800;font-display:swap;
  src:url(../fonts/avenir-arabic-heavy-arabic.woff2) format('woff2');
  unicode-range:U+0020-0040, U+005B-0060, U+007B-007E, U+00A0-00BF, U+00D7, U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E, U+2010-2015, U+2018-201D, U+2026, U+2030, U+204F, U+20AA, U+2E41, U+FB50-FDFF, U+FE70-FEFF}
/* latin letters */
@font-face{font-family:"Avenir Arabic";font-style:normal;font-weight:800;font-display:optional;
  src:url(../fonts/avenir-arabic-heavy-latin.woff2) format('woff2');
  unicode-range:U+0041-005A, U+0061-007A, U+00C0-00D6, U+00D8-00F6, U+00F8-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+20AC, U+2122}
/* arabic + punctuation */
@font-face{font-family:"Avenir Arabic";font-style:normal;font-weight:900;font-display:swap;
  src:url(../fonts/avenir-arabic-black-arabic.woff2) format('woff2');
  unicode-range:U+0020-0040, U+005B-0060, U+007B-007E, U+00A0-00BF, U+00D7, U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E, U+2010-2015, U+2018-201D, U+2026, U+2030, U+204F, U+20AA, U+2E41, U+FB50-FDFF, U+FE70-FEFF}
/* latin letters */
@font-face{font-family:"Avenir Arabic";font-style:normal;font-weight:900;font-display:optional;
  src:url(../fonts/avenir-arabic-black-latin.woff2) format('woff2');
  unicode-range:U+0041-005A, U+0061-007A, U+00C0-00D6, U+00D8-00F6, U+00F8-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+20AC, U+2122}