/* =========================================================
   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;
  --grey:#5A5F6A; --light:#9AA0AB;
  --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)}

/* ===== 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{margin-left:auto;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}

.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;margin-left:auto}
.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}

/* 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 for free.
   Overrides below handle the cases that do NOT mirror automatically —
   see brief §8. Populated during the W3 Arabic tree. */
[dir="rtl"] .kick{letter-spacing:0}   /* trap 2: Arabic must not letterspace */