/* =========================================================
   MENA GAMER — THE stylesheet
   Phase 0 tokenization. One file, no build step.
   Source: Technical Build Brief v1.0 §2.1 — extend, don't fork.
   ========================================================= */

/* ===== DESIGN TOKENS ===== */
:root{
  --ink:#111318; --paper:#FFFFFF; --wash:#F4F5F6; --line:#E7E9ED;
  /* --light was #9AA0AB: 2.63:1 on paper, failing WCAG AA for text (needs 4.5).
     #6F757F is the same hue walked darker until it passes — 4.64:1, with a
     little headroom rather than sitting exactly on the 4.50 boundary. */
  --grey:#5A5F6A; --light:#6F757F;
  --green:#00A048; --green-dark:#007D38; --green-tint:#E4F5EA;
  --community:#0E7AE6; --community-dark:#0B62B8; --community-tint:#E7F1FD;
  --brass:#A87E2F; --brass-tint:#F7F1E3;
  --amber:#D97E00; --red:#C4453A;
  --sans:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,-apple-system,Tahoma,sans-serif;
  --max:1200px; --radius:14px;
}

/* ===== PLACEHOLDER ART (wink + dots) ===== */
:root{
  --ph-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cg opacity='.55'%3E%3Cpath d='M38 6C30 14 26 20 30 26C34 32 44 30 50 24C46 34 36 36 30 32C18 40 14 56 22 68C30 80 50 84 64 78C78 72 84 58 80 44C77 33 68 25 56 24' fill='none' stroke='%23B9C6BF' stroke-width='8' stroke-linecap='round'/%3E%3Ccircle cx='43' cy='52' r='5.5' fill='%23AEB9B3'/%3E%3Cpath d='M58 50Q64 44 70 50' fill='none' stroke='%23B9C6BF' stroke-width='5.5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --ph-dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23DDE3E7'/%3E%3C/svg%3E");
}

/* ===== FONTS — self-hosted, subsetted IBM Plex ===== */
/* Lifted from the 21 preview pages, which carried byte-identical copies
   of these 46 declarations each (966 total). Paths rewritten to
   ../fonts/ after the Phase 0 asset reorganisation. */

/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/b1735f46fb7c.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/1cff733449ba.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/fbf57bb5630c.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/45e95735c053.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/d860669dc62e.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: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/7a4e432a1031.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/9a3103b2da76.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/d60fe850d102.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/b77f87bbc412.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/8b633380e51e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/69ec30990085.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/d8b4e62dbb82.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/9a3103b2da76.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/d60fe850d102.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/b77f87bbc412.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/8b633380e51e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/69ec30990085.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/d8b4e62dbb82.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/9a3103b2da76.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/d60fe850d102.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/b77f87bbc412.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/8b633380e51e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/69ec30990085.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/d8b4e62dbb82.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/9a3103b2da76.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/d60fe850d102.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/b77f87bbc412.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/8b633380e51e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/69ec30990085.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/d8b4e62dbb82.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;
}
/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/a9cefdcae546.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-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ef407fd8f925.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/9e10277355b0.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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/653bfd524aa4.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;
}
/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/31cb9792b1f9.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-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/5029ac7ba410.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/946dca41063b.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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/c55b4b1b5b5d.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;
}
/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/9e5c019d8d6e.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-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/4bbd2f37c7fa.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/9959205d30ed.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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ee160f53bfe8.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;
}
/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/27765dbaf24f.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-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/d867d2f2397a.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/6d13d2570736.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: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/9e002e656ff8.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;
}

/* ===== BASE ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);
  line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2.5px solid var(--green);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ===== MEDIA CONTAINERS — the bug-killer ===== */
.media{position:relative;overflow:hidden;border-radius:var(--radius)}
.media > *{position:absolute;inset:0;width:100%;height:100%}
.media.r169{aspect-ratio:16/9}.media.r1610{aspect-ratio:16/10}
.media.r43{aspect-ratio:4/3}.media.r11{aspect-ratio:1/1}
.media--cover{background-size:cover;background-position:center}
.ph{background-color:#F0F3F5;
  background-image:var(--ph-mark),var(--ph-dots);
  background-repeat:no-repeat,repeat;
  background-position:center,0 0;
  background-size:min(38%,110px) auto,20px 20px}
/* Preview uses opacity .55 / 38%, not the brief's .5 / 34%.
   Brief §15: when the brief and reality disagree, reality wins. */
.ph-fill{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.img-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.img-fill--fade{transition:opacity .15s ease}

/* ===== KICKERS & BADGES (color law) ===== */
.kick{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.kick--ed{color:var(--green)} .kick--co{color:var(--community)}
.kick--brass{color:var(--brass)}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:4px}
.badge::before{content:"";width:6px;height:6px;border-radius:50%}
.badge--ed{background:var(--green-tint);color:var(--green-dark)}
.badge--ed::before{background:var(--green)}
.badge--co{background:var(--community-tint);color:var(--community-dark)}
.badge--co::before{background:var(--community)}
.badge--pick{background:var(--brass-tint);color:var(--brass)}
.badge--pick::before{background:var(--brass)}

/* Language badge: which languages an article exists in (EN / AR / EN - AR,
   and ع on the Arabic side). Neutral grey on purpose - this is metadata, not
   a category, and it must not compete with the green and blue kickers that
   carry the colour law. No dot either: the dot in the other variants encodes
   a status, and there is no status here. */
.badge--lang{background:var(--wash);color:var(--grey);
  border:1px solid var(--line);letter-spacing:.06em;
  /* Its own bidi context. Without this the Latin run in "ع - EN" gets
     reordered by the surrounding Arabic byline and renders scrambled. */
  unicode-bidi:isolate;
  /* It sits at the end of the .meta byline, which can already be long.
     Keep it on the line rather than pushing past the card edge. */
  vertical-align:middle;flex:0 0 auto}
.badge--lang::before{display:none}

/* The byline that carries the badge has to be allowed to wrap, or a long
   author name plus a badge overflows the card on narrow columns. */
.feed-card .meta,.grid-card .meta{display:flex;flex-wrap:wrap;align-items:center;
  gap:6px;min-width:0}

/* ===== DUAL SCORE (the signature) ===== */
.duo{display:inline-flex;border:1.5px solid var(--ink);border-radius:8px;overflow:hidden}
.duo span{padding:5px 10px;text-align:center;line-height:1}
.duo b{display:block;font-size:15px;font-weight:700}
.duo i{display:block;font-style:normal;font-size:8px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
.duo .game{background:var(--ink);color:#fff}
.duo .arb{background:#fff;color:var(--green-dark)}
.duo .arb i{color:var(--grey)}
/* usage: <span class="duo"><span class="game"><b>8.5</b><i>Game</i></span>
          <span class="arb"><b>9.0</b><i data-i18n>Arabic</i></span></span> */

/* ===== TYPOGRAPHY SCALE ===== */
.h-section{font-size:clamp(34px,4vw,46px);font-weight:700;letter-spacing:-.02em}
.h-article{font-size:clamp(26px,4.2vw,44px);line-height:1.1;font-weight:700;letter-spacing:-.02em}
.h-card{font-size:17.5px;line-height:1.32;font-weight:600}
.standfirst{font-size:16.5px;color:var(--grey);line-height:1.55}
.meta{font-size:12.5px;color:var(--light)}
.body-copy{font-size:17px;line-height:1.65;max-width:680px}

/* ===== STATUS CHIPS (Arabic support) ===== */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.chip::before{content:"";width:8px;height:8px;border-radius:50%}
.chip--full{color:var(--green-dark)}.chip--full::before{background:var(--green)}
.chip--subs{color:var(--amber)}.chip--subs::before{background:var(--amber)}
.chip--none{color:var(--red)}.chip--none::before{background:var(--red)}

/* ===== MOTION (the one wink) ===== */
@media(prefers-reduced-motion:no-preference){
  .mark-eye{transform-origin:center;transition:transform .14s ease}
  a:hover .mark-eye{transform:scaleY(.14)}
}

/* =========================================================
   CHROME — masthead, nav, dateline, footer
   Extracted verbatim from the preview pages, where each of these
   appeared once per page (20 copies each). Declarations are
   byte-identical to the inline originals: zero visual change.
   These are the classes TEMPLATES.md chrome is built from.
   ========================================================= */
.mast{max-width:1200px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.mast-logo{display:flex;align-items:center;gap:14px;text-decoration:none;color:#111318}
.mast-mark{position:relative;width:38px;height:46px;flex:0 0 auto;display:block}
.mast-word{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:21px;font-weight:700;line-height:1;color:#111318}
.mast-rule{width:1px;height:20px;background:rgba(17,19,24,0.25);align-self:center}
.lang-btn{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px;font-weight:600;color:#111318;border:1.5px solid #111318;padding:6px 14px;line-height:1;text-decoration:none}

/* Staff sign-in. Deliberately quieter than the language button: it is for the
   handful of people who write the site, not for readers, so it should be
   findable without competing with anything a reader actually wants. */
.signin-btn{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--grey);
  border:1px solid var(--line);padding:6px 12px;line-height:1;text-decoration:none;white-space:nowrap}
.signin-btn:hover{color:var(--paper);background:var(--ink);border-color:var(--ink);text-decoration:none}

.mast-bar{position:sticky;top:0;z-index:60;background:#FFFFFF;border-bottom:2px solid #111318}
.nav-sep{border-top:1px solid rgba(17,19,24,0.14)}
.nav{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;gap:26px;overflow-x:auto;font-size:12.5px;font-weight:600;letter-spacing:0.1em;white-space:nowrap}
.nav-link{color:#111318;padding:11px 0}
.nav-link--active{color:#00A048;border-bottom:2px solid #00A048}
.nav-link--co{color:#0E7AE6}
.nav-link--co-active{border-bottom:2px solid #0E7AE6}
.nav-link--hub{color:#00A048}
.dateline-sep{border-bottom:1px solid rgba(17,19,24,0.14)}
.foot-bg{background:#111318;color:#FFFFFF}

/* Hover states. The preview carried `style-hover="..."` on 365 elements —
   a non-standard attribute no browser reads and no script consumed, so
   hover feedback was dead sitewide. These rules restore the declared intent. */
.nav-link:hover{color:#00A048}
.lang-btn:hover{color:#00A048;border-color:#00A048}
.foot-link:hover{color:#FFFFFF}
a:hover .mg-wink-top{opacity:0}   /* the one wink — was duplicated in 18 page <style> blocks */

.dateline{max-width:1200px;margin:0 auto;padding:9px 24px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:10.5px;font-weight:600;letter-spacing:0.15em;color:rgba(17,19,24,0.6)}

.foot{max-width:1200px;margin:0 auto;padding:46px 24px 26px}
.foot-cols{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.foot-nav{display:flex;gap:56px;flex-wrap:wrap}
.foot-col{display:flex;flex-direction:column;gap:10px;font-size:13px}
.foot-h{font-size:10px;font-weight:700;letter-spacing:0.16em;color:rgba(255,255,255,0.45);margin-bottom:14px}
.foot-link{color:rgba(255,255,255,0.85)}
.foot-word{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:20px;font-weight:700;line-height:1;color:#FFFFFF}
.foot-rule{width:1px;height:18px;background:rgba(255,255,255,0.3);align-self:center}
.foot-bar{border-top:1px solid rgba(255,255,255,0.15);margin-top:40px;padding-top:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:10.5px;letter-spacing:0.1em;color:rgba(255,255,255,0.5)}

/* ===== TOAST / BUTTONS ===== */
.toast{display:none;position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:2000;background:#111318;color:#fff;border-radius:14px;padding:12px 14px 12px 16px;box-shadow:0 8px 30px rgba(17,19,24,0.28);align-items:center;gap:12px;max-width:calc(100vw - 32px)}
.toast-x{background:none;border:none;color:#6E7480;font-size:20px;cursor:pointer;line-height:1;padding:0 2px}
.btn-primary{background:#00A048;color:#fff;border:none;border-radius:9px;font:700 13px 'IBM Plex Sans',system-ui,sans-serif;padding:9px 14px;cursor:pointer;white-space:nowrap}

/* ===== RECURRING TEXT & LAYOUT ===== */
.ar{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0}
.h-lead{font-size:22px;font-weight:700;letter-spacing:-0.01em;line-height:1}
.standfirst-lg{margin:22px 0 0;font-size:19px;font-weight:600;line-height:1.5;letter-spacing:-0.01em;max-width:24em;text-wrap:pretty}
.kick-sm{font-size:9.5px;font-weight:700;letter-spacing:0.14em;color:rgba(17,19,24,0.5)}
.kick-green{font-size:10.5px;font-weight:700;letter-spacing:0.16em;color:#00A048}
.kick-green-lg{margin-top:8px;font-size:10.5px;font-weight:600;letter-spacing:0.18em;color:#00A048}
.label-sm{font:600 13.5px/1.35 'IBM Plex Sans',system-ui,sans-serif}
.meta-sm{font-weight:400;color:#AEB9B3;font-size:12px}
.row-base{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.row-nowrap{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.col-main{flex:1 1 340px;min-width:0}
.u-ink{color:#111318}
.u-green{color:#00A048}
.u-green-600{color:#00A048;font-weight:600}
.u-white{color:#FFFFFF}
.u-b{font-weight:700}
.u-minw0{min-width:0}
.u-r7{border-radius:7px;flex:0 0 auto}

/* =========================================================
   JS-RENDERED COMPONENTS
   site.js emits .feed-card, .studio-row, .job-row and .chip-row.
   The brief's §5 code references these classes but never defines
   them — without this block the rendered output is unstyled.
   Built from the existing tokens so JS output matches hand-built
   markup. Logical properties throughout, so RTL mirrors for free.
   ========================================================= */
.feed-card{display:flex;gap:14px;align-items:flex-start;padding:16px 0;
  border-bottom:1px solid var(--line);color:var(--ink)}
.feed-card:last-child{border-bottom:0}
.feed-card > .media{flex:0 0 84px;width:84px}
.feed-card > span{display:flex;flex-direction:column;gap:5px;min-width:0}
.feed-card .h-card{display:block}
.feed-card:hover .h-card{color:var(--green-dark)}

.studio-row{display:flex;gap:14px;align-items:center;padding:14px 0;
  border-bottom:1px solid var(--line);color:var(--ink)}
.studio-row:last-child{border-bottom:0}
.studio-row__logo{flex:0 0 46px;width:46px}
.studio-row > span:nth-child(2){flex:1 1 auto;min-width:0}
.studio-row .badge{flex:0 0 auto;margin-inline-start:auto}
.studio-row:hover b{color:var(--green-dark)}
.ver{vertical-align:middle}

.job-row{display:flex;gap:14px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.job-row:last-child{border-bottom:0}
.job-row > span:last-child{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.job-row:hover b{color:var(--green-dark)}

.chip-row{display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--line)}
.chip-row:last-child{border-bottom:0}

/* =========================================================
   CONTENT TYPES — article / review / video / studio / community
   The fill-in templates in templates/ are built from these.
   Declarations lifted from the preview pages so output is
   unchanged; logical properties so RTL mirrors for free.
   ========================================================= */
.wrap-main{max-width:var(--max);margin:0 auto;padding:0 24px}
.art{max-width:860px;padding:44px 0 8px}
.art-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.art-kicker{font-size:11.5px;font-weight:700;letter-spacing:.15em;color:var(--green)}
.art-flag{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;
  letter-spacing:.13em;color:var(--ink);border:1px solid rgba(17,19,24,.25);padding:3px 9px;line-height:1}
.art-flag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.art-flag--co::before{background:var(--community)}
.art-title{margin:16px 0;font-size:clamp(30px,3.9vw,44px);font-weight:700;
  letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
.art-standfirst{margin:0 0 24px;font-size:19px;line-height:1.55;color:rgba(17,19,24,.65);
  max-width:42em;text-wrap:pretty}
.art-byline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0;
  border-top:1px solid rgba(17,19,24,.14);border-bottom:1px solid rgba(17,19,24,.14)}
.art-avatar{width:40px;height:40px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--ink);color:#fff;font-size:13px;font-weight:700;letter-spacing:.05em}
.art-byline-txt{font-size:11.5px;letter-spacing:.1em;line-height:1.6}
.art-byline-txt .dim{color:rgba(17,19,24,.55)}
.art-ar-link{margin-inline-start:auto;font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--green)}
.art-body{max-width:680px;margin-top:38px;font-size:17.5px;line-height:1.65}
.art-body p{margin:0 0 26px;text-wrap:pretty}
.art-fig{margin:36px 0}
.art-fig--hero{margin:28px 0 0}
.art-cap{margin-top:8px;font-size:11px;letter-spacing:.02em;color:rgba(17,19,24,.5)}
.art-quote{margin:36px 0;padding:4px 0 4px 24px;border-inline-start:3px solid var(--green)}
.art-quote p{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.35;text-wrap:balance}
.art-quote footer{margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.12em;color:rgba(17,19,24,.55)}
.art-facts{border:1.5px solid var(--ink);padding:20px 22px;margin:0 0 26px}
.art-facts-h{font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--green);margin-bottom:12px}
.art-facts-list{display:flex;flex-direction:column;gap:9px;font-size:14px}
.art-fact{display:flex;gap:12px;align-items:baseline}
.art-fact b{font-size:20px;font-weight:700;letter-spacing:-.02em;min-width:56px}
.art-fact span{color:rgba(17,19,24,.75)}
.art-end{max-width:680px}
.art-tags{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:38px}
.art-tags-h{font-size:10.5px;font-weight:700;letter-spacing:.15em;color:rgba(17,19,24,.55)}
.tag{font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--ink);
  border:1px solid rgba(17,19,24,.3);padding:5px 10px;line-height:1}
.tag:hover{border-color:var(--green);color:var(--green-dark)}
.art-disclosure{margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(17,19,24,.14);
  font-size:13px;line-height:1.6;color:rgba(17,19,24,.6)}
.ratio-169{position:relative;aspect-ratio:16/9;width:100%}
.ratio-32{position:relative;aspect-ratio:3/2;width:100%}
.ratio-43{position:relative;aspect-ratio:4/3;width:100%}

/* ===== VERDICT BOX — the signature. Dual score + Arabic assessment ===== */
.verdict{border:1.5px solid var(--ink);padding:22px 24px;margin:28px 0 0}
.verdict-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.verdict-how{font-size:11.5px;font-weight:600;color:var(--green)}
.verdict-body{display:flex;gap:36px;align-items:flex-start;flex-wrap:wrap;margin-top:16px}
.verdict-scores{display:flex;gap:28px;flex:0 0 auto}
.verdict-score b{display:block;font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1}
.verdict-score i{display:block;margin-top:6px;font-style:normal;font-size:10px;font-weight:700;
  letter-spacing:.16em;color:rgba(17,19,24,.55)}
.verdict-score--ar b,.verdict-score--ar i{color:var(--green)}
.verdict-rule{width:1px;background:rgba(17,19,24,.2);align-self:stretch}
.verdict-sum{flex:1 1 300px;min-width:0}
.verdict-sum p{margin:0;font-size:17px;font-weight:600;line-height:1.5;letter-spacing:-.01em;text-wrap:pretty}
/* Arabic assessment table */
.ar-table{margin-top:16px;border-top:1px solid rgba(17,19,24,.14)}
.ar-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid rgba(17,19,24,.14)}
.ar-row:last-child{border-bottom:0}
.ar-row-k{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:rgba(17,19,24,.55)}
.ar-row-v{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.ar-row-v::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
.ar-row-v--part::before{background:var(--amber)}
.ar-row-v--none::before{background:var(--red)}

/* ===== VIDEO — facade, chapters, transcript ===== */
.vid-facade{position:relative;aspect-ratio:16/9;width:100%;cursor:pointer;overflow:hidden}
.vid-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vid-play::after{content:"";width:66px;height:66px;border-radius:50%;background:var(--green);
  box-shadow:0 6px 24px rgba(17,19,24,.3)}
.vid-sec{max-width:680px;margin-top:34px}
.chapters{margin-top:6px}
.chapter{display:flex;align-items:baseline;gap:18px;border-bottom:1px solid rgba(17,19,24,.14)}
.chapter-t{font-size:13px;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums;min-width:46px}
.chapter-a{color:var(--ink);font-size:15px;font-weight:600;padding:13px 0;flex:1}
.chapter-a:hover{color:var(--green-dark)}
.transcript{border:1.5px solid var(--ink)}
.transcript-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px}
.transcript-langs{display:flex;margin-inline-start:auto}
.btn-lang{font-family:inherit;font-size:10.5px;font-weight:700;letter-spacing:.08em;padding:6px 12px;
  line-height:1;cursor:pointer;border:1px solid var(--ink);background:transparent;color:var(--ink)}
.btn-lang[aria-pressed="true"]{background:var(--ink);color:#fff}
.btn-lang--ar{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:12px;letter-spacing:0;padding:5px 12px}
.transcript-body{padding:0 18px 18px;font-size:15px;line-height:1.7}
.transcript-body p{margin:0 0 16px}
.transcript-body .spk{font-weight:700;color:var(--green-dark)}

/* ===== FEED GRID — section-front card. site.js data-layout="grid" =====
   Matches the preview's hand-built section cards exactly, so a JSON-rendered
   grid is indistinguishable from the static one it replaces. */
.feed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;padding-top:30px}
.grid-card{display:block;color:var(--ink)}
.grid-card .media{aspect-ratio:16/10;width:100%;border-radius:12px}
.grid-card .kick{display:block;margin-top:12px}
.grid-card .h-card{display:block;margin:6px 0}
.grid-card:hover .h-card{color:var(--green-dark)}

/* ===== SECTION FRONT header ===== */
.sec-head{border-bottom:2px solid var(--ink);padding-bottom:12px;display:flex;
  justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px}
.sec-h1{font-size:clamp(34px,4vw,46px);font-weight:700;letter-spacing:-.015em;margin:0}
.sec-sub{font-size:13px;color:var(--grey)}
.pulse{margin-top:14px;font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--green)}
.jobs-list{margin-top:6px}

/* ===== EMPTY STATE =====
   Shown where a JSON feed has no records yet. A blank gap reads as broken;
   this reads as pre-launch and carries a call to action. */
.empty{padding:34px 0;border-top:1px solid var(--line);text-align:center}
.empty p{margin:0 0 16px;font-size:15px;color:var(--grey);max-width:44em;
  margin-inline:auto;line-height:1.55}

/* related strip — proposed in Plan §4.3, rendered by site.js [data-related] */
.related{max-width:680px;margin:38px 0 0;padding-top:22px;border-top:2px solid var(--ink)}
.related-h{font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--green);margin-bottom:6px}

/* ===== RTL =====
   Layout uses logical properties, so [dir="rtl"] mirrors most things for
   free. What follows handles only what does NOT mirror automatically.
   The four traps are from brief §8 and were each hit once already —
   they are numbered here so the reason survives.                          */

/* Arabic typography. Arabic has no capitals and taller ascenders/descenders,
   so text set at a Latin size reads small and cramped. A touch more size and
   line-height, and no letterspacing anywhere. */
/* body carries its own font-family, which beats inheritance from the html
   element — so [dir="rtl"] alone silently loses and Arabic renders in the
   Latin face. Name body explicitly. */
[dir="rtl"],[dir="rtl"] body,[dir="rtl"] input,[dir="rtl"] textarea,
[dir="rtl"] button{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,Tahoma,sans-serif}
[dir="rtl"],[dir="rtl"] body{line-height:1.75}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{line-height:1.35;letter-spacing:0}

/* TRAP 1 — mixed-direction inline text.
   A Latin name inside an Arabic sentence needs <bdi> or the punctuation
   jumps to the wrong end. Its spacing must be PHYSICAL: logical margins
   resolve against the bdi's own resolved direction, not the paragraph's,
   so they flip the wrong way exactly when the text is mixed. */
bdi{unicode-bidi:isolate}
[dir="rtl"] bdi{margin-right:.15em;margin-left:.15em}

/* TRAP 2 — Arabic must never letterspace. The script is cursive; tracking
   breaks the joins. Use weight for emphasis instead. */
[dir="rtl"] .kick,[dir="rtl"] .kick-green,[dir="rtl"] .kick-green-lg,
[dir="rtl"] .foot-h,[dir="rtl"] .nav-link,[dir="rtl"] .badge,
[dir="rtl"] .notfound-links a{letter-spacing:0}

/* TRAP 3 — dual score order.
   The Arabic square leads in RTL. Source order stays game-then-Arabic so the
   markup reads the same in both languages; flex does the reversing. */
[dir="rtl"] .verdict-scores{flex-direction:row-reverse}

/* TRAP 4 — numerals stay Western digits everywhere.
   Scores, dates, team sizes and founding years are data, and Eastern Arabic
   numerals would make them unsearchable and inconsistent with the JSON. */
[dir="rtl"]{font-variant-numeric:lining-nums}
[dir="rtl"] .verdict-score,[dir="rtl"] [data-count-of],
[dir="rtl"] time{direction:ltr;unicode-bidi:embed}

/* The two physical margins in the sheet. Both push an element to the far
   end of a flex row, which is a logical intent written physically. */
.lang-btn,.foot-nav{margin-left:auto}
[dir="rtl"] .lang-btn,[dir="rtl"] .foot-nav{margin-left:0;margin-right:auto}

/* Anything genuinely directional: mirror the glyph, not the layout. */
[dir="rtl"] .arrow-inline{display:inline-block;transform:scaleX(-1)}

/* ---- long-form text pages (privacy) ----------------------------------
   Logical properties throughout, so the Arabic page mirrors with no
   overrides: the square marker sits at the start of the line either way. */
.prose-p{margin:16px 0 0;font-size:15.5px;line-height:1.7;max-width:48em;text-wrap:pretty}
.prose-list{margin:18px 0 0;padding:0;list-style:none;max-width:48em}
.prose-list li{position:relative;margin:0 0 12px;padding-inline-start:20px;font-size:15.5px;line-height:1.7}
.prose-list li::before{content:"";position:absolute;inset-inline-start:0;top:.7em;width:6px;height:6px;background:#00A048}
.prose-muted{margin:22px 0 0;font-size:13.5px;line-height:1.6;color:rgba(17,19,24,.62)}
[dir="rtl"] .prose-p,[dir="rtl"] .prose-list li{line-height:1.9}

/* ---- 404 ------------------------------------------------------------ */
.notfound-links{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0}
.notfound-links a{font-size:13px;font-weight:700;letter-spacing:.06em;padding:11px 16px;
  border:1.5px solid #111318;color:#111318}
.notfound-links a:hover{background:#111318;color:#FFFFFF;text-decoration:none}

/* ---- privacy note under every site form ------------------------------
   Opacity rather than a fixed grey, so it reads on a light or dark panel. */
.form-privacy{margin:0;font-size:12px;line-height:1.5;opacity:.72}
.form-privacy a{color:inherit;text-decoration:underline;text-underline-offset:2px}