/* Arabic overrides. Loaded AFTER site.css, only on the /ar/ pages. 121 of the 144 rules are shared with English and live in site.css; these are the differences: the Arabic faces, and the rules that swap a Latin display font for an Arabic one. No letter-spacing and no text-transform:uppercase - neither applies to Arabic script. Directional flips are handled by dir="rtl" plus the rules below. 🔴 That sentence was a description of intent, not of behaviour, until 2026-09-15. site.css's English typography sets letter-spacing on .kicker, .eyebrow, .btag, .brand b, .mgroup h2 and the marquee band, and nothing here undid any of it: the Arabic home page rendered 19 elements with up to 1.82px of tracking. Arabic is cursive - letter-spacing detaches the joins, so a word reads as a row of isolated letters, which to an Arabic reader is not "loose", it is broken. text-transform:uppercase does nothing at all in a script with no case. Undone wholesale below rather than class by class. A list of classes is a list that goes stale the first time somebody adds a heading. !important, deliberately. The first attempt used html[dir="rtl"] * (specificity 0,1,1) and it fixed 17 of 19 - .brand .btag and .hero .kicker are 0,2,0 and won. The alternative is a specificity trick like html[dir="rtl"][lang] *, which works today and is invisible to the next person to add a two-class selector. This is a correctness rule for an entire script, not a preference, so it says so. */ html[dir="rtl"], html[dir="rtl"] *{letter-spacing:normal!important;text-transform:none!important} @font-face{font-family:'Cairo';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/cairo-600-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-FE9F,U+FE80-FEFC;} @font-face{font-family:'Cairo';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/cairo-700-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-FE9F,U+FE80-FEFC;} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/ibmplexsansarabic-400-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-FE9F,U+FE80-FEFC;} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/ibmplexsansarabic-500-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-FE9F,U+FE80-FEFC;} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/ibmplexsansarabic-700-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-FE9F,U+FE80-FEFC;} h1,h2,h3{font-family:'Cairo','Convergence','DM Sans',system-ui,sans-serif;font-weight:600;line-height:1.25;margin:0;text-wrap:balance} .brand b{font-family:'Cairo','Convergence',sans-serif;font-weight:600;font-size:19px;display:block} .brand .btag{display:block;font-size:12px;color:#C9BFB4;} @media (min-width:900px){ .hero{background:linear-gradient(270deg,rgba(27,21,18,.97) 0%,rgba(27,21,18,.93) 42%,rgba(27,21,18,.62) 100%), url('../img/hero-1600.webp') center/cover no-repeat; background-color:var(--char)} } .hero .kicker{color:var(--terra);font-size:13px;font-weight:700;margin-bottom:14px} .marquee-track span{font-family:'Cairo',sans-serif;font-size:clamp(32px,5vw,54px);font-weight:700; color:rgba(255,255,255,.10);padding-inline:16px;flex-shrink:0; -webkit-text-stroke:1px rgba(255,255,255,.14);paint-order:stroke fill} @keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(50%)}} .cattile .tile-over{font-family:'Cairo',sans-serif;font-weight:700;font-size:22px;color:#fff;margin-bottom:8px;display:block} .cattile .tile-name{font-family:'Cairo',sans-serif;font-weight:700;font-size:18px;color:#fff;display:block} .eyebrow{font-size:12.5px;font-weight:700;color:var(--cta);margin-bottom:10px} .feast{color:#fff;padding-block:clamp(48px,8vw,80px); background:linear-gradient(270deg,rgba(27,21,18,.92) 0%,rgba(27,21,18,.80) 50%,rgba(27,21,18,.50) 100%), url('../img/band-feast.webp') center/cover no-repeat; background-color:var(--char)} .mgroup h2{font-size:18px;padding-bottom:8px; border-bottom:2px solid var(--terra);margin-bottom:12px} table.hrs th,table.hrs td{text-align:right;padding:9px 0;border-bottom:1px solid var(--line)} .fcol h2,.fvisit-block h2,.fcall-block h2{font-family:'Cairo','Convergence',sans-serif;font-weight:600;font-size:16px;color:#fff;margin:0 0 12px;padding:0} .nav-sheet-title{font-family:'Cairo',sans-serif;font-weight:700} /* The menu jump row scrolls horizontally, and its fade tells you there is more off-screen. site.css fades the RIGHT edge, which is where the row overflows in English. In Arabic the row overflows to the LEFT, so the unfixed rule put the hint on the closed end and left a hard cut on the open one - the exact opposite of what it is for. Measured at 360px: 12 links, 1499px of content in a 320px box, so this is not a hypothetical overflow. html[dir="rtl"] .menujump-track is (0,2,1) against site.css's (0,1,0), so it wins without !important; the wholesale rule at the top of this file needs one, this does not. */ html[dir="rtl"] .menujump-track{ -webkit-mask-image:linear-gradient(to left,#000 0%,#000 calc(100% - 32px),transparent 100%); mask-image:linear-gradient(to left,#000 0%,#000 calc(100% - 32px),transparent 100%)} .pill#status{min-width:182px} @media (min-width:1280px){.pill#status{min-width:202px}} @media (max-width:380px){.bar .pill#status{min-width:178px}}