/* ===================================================================
   The Arabic layer — the type, and only the type. Layout and behaviour
   are plate.css, written in logical properties, which dir="rtl" on the
   document is what mirrors.

   This sheet is loaded last, after plate.css, because every rule in it
   is an override of one there.

   Type carries the energy: Cairo at 800 against the open Readex Pro body,
   and that contrast is the whole of the difference — no second accent
   colour, no extra ornament. (Founder pick 2026-08-17, replacing
   Changa / IBM Plex Sans Arabic.)
   =================================================================== */
/* Self-hosted, not imported. An @import is a stylesheet that has to arrive before the font
   request can even start, from a third party, on a phone that may be on one bar — and the
   two faces below are the site's whole voice. The files are the exact Google-served subsets:
   Cairo and Readex Pro, arabic and latin, with Google's own unicode-ranges so a page of
   Arabic never downloads the Latin cut — the one edit is the Arabic Mathematical block,
   written as the single range U+1EE00-1EEF1 instead of its forty fragments. Both files are
   variable: Cairo carries wght 200–1000 and Readex Pro 160–700, so one file per script
   answers every weight the site asks. */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('./fonts/cairo-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF,
    U+200C-200E, U+2010-2011, 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-1EEF1;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('./fonts/cairo-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;
}
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-weight: 160 700;
  font-display: swap;
  src: url('./fonts/readex-pro-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF,
    U+200C-200E, U+2010-2011, 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-1EEF1;
}
/* The Latin cut of the body face, for the scientific names. */
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-weight: 160 700;
  font-display: swap;
  src: url('./fonts/readex-pro-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;
}

/* The ayah is the first thing the site ever paints, and Quranic marks in a fallback face
   are visibly broken — so this one face is self-hosted rather than routed through anyone's
   import chain, preloaded on the door, and block rather than swap: waiting a moment is
   better than flashing the wrong shapes. Arabic subset of Amiri Quran v19. */
@font-face {
  font-family: 'Amiri Quran';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('./fonts/amiri-quran-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74,
    U+FE76-FEFC;
}

:root {
  --font-body: 'Readex Pro', 'Segoe UI', sans-serif;
  /* IBM Plex Mono has no Arabic, so the Arabic words in a mono line fall through to the
     body face rather than to whatever the system would have picked. */
  --font-mono: 'IBM Plex Mono', 'Readex Pro', monospace;
  --font-display: 'Cairo', 'Readex Pro', sans-serif;
}

body { font-size: 16.5px; }

/* Arabic is a joined script: letter-spacing pulls the joins apart and the word stops being
   a word. Every place the shared sheet tracks out a line, it is switched off here. */
h1, .hint, .credit, .credit .fit, .region-tag,
.pop-name, .pop-fact-k, .pop-more, .pop-credit, .pop-src {
  letter-spacing: normal;
}

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 40px);
  line-height: 1.18;
}
/* A Latin binomial inside an Arabic line: isolated, or the bidi algorithm reorders it
   against the words on either side. */
h1 .sci { direction: ltr; unicode-bidi: isolate; font-size: 18px; }

.hint { font-family: var(--font-body); font-size: 13px; }

/* Arabic needs the extra leading — the diacritics and the descenders go looking for it. */
.pop-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.2; }
.pop-line { font-size: 20px; line-height: 1.62; }
.pop-body { font-size: 15.5px; line-height: 1.95; }
.pop-species { font-size: 13.5px; line-height: 1.8; }
.pop-fact-k { font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.pop-fact-t { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.5; }
.pop-fact-b { font-size: 14.5px; line-height: 1.9; }
.pop-fact-w { font-size: 13px; }
.pop-more { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; }
.subfig-name { font-size: 13px; }
.region-tag { font-family: var(--font-body); font-size: 13px; }
.credit .fit { font-family: var(--font-body); font-size: 13px; }

/* Citations stay in the language they were published in, so they are pinned to LTR and
   isolated from the Arabic around them. And a photographer's name is not translated: the
   licence asks for attribution as the author gave it, so Albert Kok stays Albert Kok on
   this page too, isolated the same way. This plate is public domain and owes nothing, but
   the next one will be BY-SA and will be built by copying this file. */
.pop-src a, .pop-fact-s a, .pop-fact-src a, .latin { direction: ltr; unicode-bidi: isolate; }

@media (max-width: 760px) {
  h1 .sci { font-size: 15px; }
  .pop-name { font-size: 29px; }
}