/* ════════════════════════════════════════════════════════════
BY MAHMOUD — ARABIC BASELINE v3.0 (Arabic addendum)
May 2026
Load AFTER system.css. Requires fonts.css (PP Neue Montreal Arabic
+ Doran). Activates on html[lang="ar"] or body.ar. Does not touch
Latin pages.
─────────────────────────────────────────────────────────────
THE INVERSION — translated into Arabic
─────────────────────────────────────────────────────────────
Latin system : PP Neue Montreal caps = DARE · Editorial Old italic = WHISPER
Arabic system: PP Neue Montreal Arabic = DARE · Doran 400 = WHISPER
Same foundry both sides — the Latin and Arabic faces are designed-
to-coexist siblings, not a Latin face + neutral Arabic fallback.
No uppercase in Arabic. The "dare" gesture is delivered by:
- the Regular weight at very large size + open tracking
- PP Neue Montreal Arabic — contemporary, geometric, the
Arabic peer of the Latin display sans
No italic in Arabic. The "whisper" gesture — the jewel — is
delivered by a SCRIPT-CHANGE: dropping from PP Neue Montreal Arabic
(geometric sans) to Doran (editorial Naskh-rooted serif). Same
role, different mechanism. Wherever the Latin uses italic,
the Arabic uses .ar-em which swaps to Doran at the same scale.
─────────────────────────────────────────────────────────────
THE GESTURES — what survives, what changes
─────────────────────────────────────────────────────────────
✓ The em-dash signature —محمود (logical order preserved; RTL
renders dash visually adjacent)
✓ The underscore محمود_ (visually sits LEFT of word in RTL —
which is exactly where the typing
cursor rests after right-to-left
input. The "typing action" reads
MORE truthfully in Arabic than Latin.)
✓ Bracket numbering [٠١] (Eastern Arabic numerals. Brackets
flip automatically via Unicode bidi.)
✓ The "على X_" lockup على العودة_ ("on" preposition pattern)
─────────────────────────────────────────────────────────────
NUMERALS
─────────────────────────────────────────────────────────────
Default: Eastern Arabic (٠١٢٣٤٥٦٧٨٩) — editorial, traditional.
Override per-element with .num-western for technical/utility
contexts (timestamps, prices, version numbers) if needed.
════════════════════════════════════════════════════════════ */
/* ──────────────────────────────────────────────────────────── */
/* ACTIVATE */
/* ──────────────────────────────────────────────────────────── */
html[lang="ar"], body.ar {
direction: rtl;
}
html[lang="ar"] {
/* Override the type fonts — keep all other tokens identical.
PP Neue Montreal Arabic is the Arabic peer of the Latin face,
drawn by the same foundry (Pangram Pangram). Doran (Naskh-
rooted serif) carries the whisper register via script-change. */
--serif: 'Doran', 'Doran Static', 'EditorialOld', Georgia, serif;
--sans: 'PPNeueMontrealArabic', 'PPNeueMontreal', -apple-system, 'Helvetica Neue', sans-serif;
--sans-text: 'PPNeueMontrealArabic', 'PPNeueMontrealText', 'PPNeueMontreal', sans-serif;
/* Arabic tracking — Arabic doesn't tolerate the tight tracking
Latin display uses. The negative letter-spacing on Latin
headlines would crash Arabic letterforms together. */
--track-display: 0;
--track-section: 0;
--track-fn: 0.01em; /* very minimal */
--track-block: 0.02em;
--track-eyebrow: 0.08em; /* loosened from 0.18em — Arabic */
--track-nav: 0.06em;
--track-body: 0;
--track-meta: 0.02em;
--track-btn: 0.08em;
/* Line heights — Arabic wants more leading than Latin, but not so much
that body text reads airy. Pulled tighter than v0.1 across the board. */
--lh-display: 1.04; /* was 0.86 — Arabic ascenders/descenders */
--lh-headline: 1.08;
--lh-italic: 1.32; /* the .ar-em whisper line height */
--lh-sub: 1.36;
--lh-body: 1.72; /* was 1.86 — editorial weight, not airy */
--lh-quote: 1.5;
--lh-meta: 1.6;
/* Type scale — Arabic reads larger at the same point-size due
to x-height differences. Drop hero/display by ~12–18% so the
visual mass matches the Latin version side-by-side. */
--t-display: clamp(52px, 7.6vw, 132px); /* was 144 */
--t-section: clamp(40px, 6.2vw, 100px);
--t-headline: clamp(34px, 5vw, 72px);
--t-italic-sub: clamp(22px, 2.6vw, 38px); /* whisper register */
--t-sub: clamp(20px, 2.4vw, 30px);
--t-quote: clamp(22px, 2.2vw, 30px);
--t-body: clamp(16px, 1.5vw, 18px); /* min bumped: 16px Arabic */
--t-meta: 14px;
--t-eyebrow: 12px; /* small Arabic needs 1px more */
--t-btn: 12px;
--t-nav: 12px;
}
/* Arabic numerals — apply font-feature-settings to force Eastern
Arabic numerals where Latin digits would otherwise appear via
bidi (e.g. years, counts in mixed strings). */
html[lang="ar"] {
font-feature-settings: "tnum" 0;
}
html[lang="ar"] .num-eastern {
font-feature-settings: "ss01"; /* some faces expose Eastern digits via ss01 */
}
html[lang="ar"] .num-western {
unicode-bidi: isolate;
direction: ltr;
}
/* ──────────────────────────────────────────────────────────── */
/* REGISTERS — Arabic */
/* ──────────────────────────────────────────────────────────── */
/* R1 — THE WHISPER (Doran). Used wherever the Latin uses or .r1
(italic Editorial Old). Same role: the jewel. The face-change carries
the emphasis the way italic does in Latin. Weight 500 — needs to feel
like the jewel, not blend in with body Sans. */
html[lang="ar"] .r1,
html[lang="ar"] em,
html[lang="ar"] .ar-em {
font-family: var(--serif);
font-style: normal;
font-weight: 500;
letter-spacing: 0;
line-height: var(--lh-italic);
}
/* R2 — THE VERDICT. The one manifesto line per page. Amiri 700. */
html[lang="ar"] .r2 {
font-family: var(--serif);
font-style: normal;
font-weight: 700;
letter-spacing: -0.005em;
}
/* R3 — THE DARE. PP Neue Montreal Arabic Regular, generously tracked.
Wordmarks, page heroes, section openers. Replaces uppercase-Latin role.
Mapped via @font-face range to weight 300 — substantial Arabic display
stroke without crossing into Bold. */
html[lang="ar"] .r3 {
font-family: var(--sans);
font-style: normal;
font-weight: 300;
letter-spacing: var(--track-fn);
text-transform: none; /* there is no uppercase in Arabic */
}
/* Strip text-transform wherever the Latin system applies it.
Arabic doesn't have letter-case; uppercase rules silently no-op
in most cases but can disturb spacing in some browsers. */
html[lang="ar"] .lockup-word,
html[lang="ar"] .s-bio-headline,
html[lang="ar"] .s-break-line,
html[lang="ar"] .brand-name,
html[lang="ar"] .stance-role,
html[lang="ar"] .ep-title-fn,
html[lang="ar"] .s-season-word,
html[lang="ar"] .s-season-guests,
html[lang="ar"] .s-episodes-guests,
html[lang="ar"] .eyebrow,
html[lang="ar"] .nav-logo,
html[lang="ar"] .nav-links a,
html[lang="ar"] .btn,
html[lang="ar"] .ft-col-label,
html[lang="ar"] .meta,
html[lang="ar"] .article-eyebrow,
html[lang="ar"] .case-eyebrow,
html[lang="ar"] .s-red-eyebrow,
html[lang="ar"] .ep-num-label,
html[lang="ar"] .ep-tag,
html[lang="ar"] .ep-guest-eyebrow,
html[lang="ar"] .ep-guest-name,
html[lang="ar"] .ep-guest-role,
html[lang="ar"] .voice-name,
html[lang="ar"] .voice-role,
html[lang="ar"] .brand-year,
html[lang="ar"] .brand-link,
html[lang="ar"] .s-episodes-meta-eyebrow,
html[lang="ar"] .s-bio-image-label,
html[lang="ar"] .bio-stat-label,
html[lang="ar"] .ft-season,
html[lang="ar"] .ft-wordmark,
html[lang="ar"] .ft-legal,
html[lang="ar"] .show-mark-logo,
html[lang="ar"] .stance-num,
html[lang="ar"] .brand-num,
html[lang="ar"] .article-num,
html[lang="ar"] .voice-num,
html[lang="ar"] .block-num {
text-transform: none;
}
/* ──────────────────────────────────────────────────────────── */
/* LOCKUP — Arabic lockup adjustments */
/* ──────────────────────────────────────────────────────────── */
/* The wordmark uses PP Neue Montreal Arabic Regular, no uppercase,
lightly tracked. Override all the places the Latin sets font-weight:
200 on display lockups — Arabic needs the Regular cut for the
designed bone structure. */
html[lang="ar"] .lockup .lockup-word,
html[lang="ar"] .lockup-on .lockup-word,
html[lang="ar"] .s-bio-headline,
html[lang="ar"] .s-break-line,
html[lang="ar"] .brand-name,
html[lang="ar"] .stance-role,
html[lang="ar"] .ep-title-fn,
html[lang="ar"] .s-season-word,
html[lang="ar"] .s-season-guests,
html[lang="ar"] .s-episodes-guests,
html[lang="ar"] .ft-wordmark {
font-family: var(--sans);
font-weight: 300;
letter-spacing: 0;
text-transform: none;
}
/* Marquee lockup — the hero-scale wordmark. Arabic glyphs fill more
visual space than Latin at the same point-size, so cap the marquee
max ~16% smaller than Latin to keep visual mass balanced. */
html[lang="ar"] .lockup.is-marquee .lockup-word,
html[lang="ar"] .lockup-on.is-marquee .lockup-word {
font-size: clamp(60px, 10vw, 168px); /* was clamp(72px, 12vw, 200px) */
}
/* Prefix ("على") — Naskh italic equivalent = Amiri 400 */
html[lang="ar"] .lockup-prefix {
font-family: var(--serif);
font-style: normal;
font-weight: 400;
letter-spacing: 0;
}
/* The "on X_" pattern in Arabic uses "على" as the preposition.
The gap between prefix and word feels different in RTL —
trim slightly. */
html[lang="ar"] .lockup-on {
column-gap: clamp(14px, 3vw, 56px);
}
/* The underscore caret — Arabic re-rendering.
─────────────────────────────────────────────────────────────
Problem: the Latin "_" character sits BELOW the baseline as a
detached mark. In Arabic, letters connect THROUGH the baseline
via the kashida (the horizontal connector that runs through
the body of Arabic words). A descender-mark reads as orphaned
— like a forgotten typing cursor, not a brand gesture.
Fix: hide the literal "_" character and draw a CSS hairline at
baseline level, anchored just past the last letter. Reads as
a baseline EXTENSION — same idea as a kashida flourish — that
merges visually with the word's stroke regardless of whether
the preceding letter happens to be a joining shape (ل، ت، س)
or a non-joining shape (ر، د، و، ة).
The .is-mark / .is-typing / .is-block modifiers all carry
through: red colour, blinking animation, solid block variant. */
html[lang="ar"] .lockup-caret {
position: relative;
display: inline-block;
width: 0.5em;
margin: 0 0.04em 0 0; /* sit close to last letter */
/* Hide the underscore glyph itself without collapsing the
inline box — text-indent moves it offscreen while keeping
the element's metrics intact. We deliberately DON'T set
color: transparent on the host because the ::after below
relies on currentColor to inherit the heading's colour
(white over video, ink on light grounds, etc.). */
text-indent: -9999px;
overflow: hidden;
vertical-align: baseline;
}
html[lang="ar"] .lockup-caret::after {
content: '';
position: absolute;
inset-inline-end: -0.02em; /* nudge under the last letter's end */
/* An empty inline-block's box bottom sits at (or just below) the
surrounding text's baseline — so bottom: 0 anchors the hairline
right where an underscore belongs: at baseline / descender level.
Using negative bottom would clip it via overflow:hidden above. */
bottom: 0;
width: 0.5em;
height: 0.06em; /* hairline — matches Latin underscore stroke weight */
background: currentColor;
text-indent: 0;
/* Subtle taper at the trailing edge so it reads as an extension,
not a hard stop. Optional — comment out for a flat connector. */
mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0.6) 100%);
-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0.6) 100%);
}
/* Red signature caret — page-hero masthead. */
html[lang="ar"] .lockup-caret.is-mark::after,
html[lang="ar"] .lockup-caret.is-typing::after {
background: var(--red);
}
/* Typing animation — blink the connector. Override the Latin rule
that animates the host span (which here is invisible). */
html[lang="ar"] .lockup-caret.is-typing {
animation: none;
}
html[lang="ar"] .lockup-caret.is-typing::after {
animation: lockup-blink 1.05s steps(2) infinite;
}
/* Block variant — solid bar instead of hairline. Same baseline
anchoring, thicker stroke. */
html[lang="ar"] .lockup-caret.is-block::before {
content: none;
}
html[lang="ar"] .lockup-caret.is-block::after {
bottom: 0.14em;
width: 0.55em;
height: 0.7em; /* tall block */
mask-image: none;
-webkit-mask-image: none;
}
/* The "typing cursor" in the nav CTA (تواصُل_) inherits this
treatment automatically because the host span uses .lockup-caret.
For places where the underscore is hard-coded into text (e.g.
button labels like "تواصُل_"), the literal "_" character still
renders the old way — only spans get the fix. We accept this:
button-text underscores are part of brand voice copy, not the
typography signature, and they read as the typing artefact even
in Latin form. */
/* ──────────────────────────────────────────────────────────── */
/* NAV — Arabic */
/* ──────────────────────────────────────────────────────────── */
/* The em-dash signature: in Arabic the dash goes after the name
in logical order (—محمود), which in RTL visual order means the
dash sits to the LEFT of محمود — same author-credit position
as the Latin —MAHMOUD. */
html[lang="ar"] .nav-logo-dash {
margin-right: 0;
margin-left: 0;
}
/* Arabic at small scale needs a step up to read as a logo against the
nav links. PP Neue Montreal Arabic only ships in Thin / Regular /
Bold — so where Latin can use Medium (500) for hierarchy against
Light (300) nav links, Arabic has to jump to Bold (600+) to break
away from Regular. Surgical override: nav-logo + footer ghost only,
the small-scale wordmark instances. Hero/masthead stays at Regular
because display size carries the presence. */
html[lang="ar"] .nav-logo {
font-weight: 600;
}
/* Nav link sizes — Arabic at the same px reads larger; loosen gap. */
html[lang="ar"] .nav-links {
gap: clamp(20px, 2.6vw, 36px);
}
/* Nav CTA button (red pill) — Arabic text in this tiny pill has more
complexity than Latin: tashkeel marks above (e.g. تواصُل), descender-
like curves below (ل), and the brand underscore beneath the baseline.
The Latin 8px vertical padding doesn't give enough room — letterforms
clip at the bottom edge of the pill. Generous vertical padding +
slightly relaxed line-height fixes it without growing the pill
horizontally enough to disturb nav layout. */
html[lang="ar"] .nav-cta {
padding: 11px 20px !important;
line-height: 1.2 !important;
}
/* ──────────────────────────────────────────────────────────── */
/* BRACKETS — Eastern Arabic numerals inside square brackets */
/* ──────────────────────────────────────────────────────────── */
/* Brackets work via ::before/::after in the Latin system; in
RTL they auto-flip (the "before" bracket renders on the right).
No override needed for the brackets themselves.
Force tabular numbers off — Arabic numerals don't need them
and tabular-nums in some fonts breaks Eastern digit shaping. */
html[lang="ar"] .stance-num,
html[lang="ar"] .brand-num,
html[lang="ar"] .article-num,
html[lang="ar"] .voice-num,
html[lang="ar"] .block-num,
html[lang="ar"] .ep-num-label,
html[lang="ar"] .s-episodes-foot .eyebrow {
font-variant-numeric: normal;
}
/* ──────────────────────────────────────────────────────────── */
/* DIRECTIONAL ELEMENTS — arrows, lines, vertical stamps */
/* ──────────────────────────────────────────────────────────── */
/* Arrows: → becomes ← in RTL. Author writes "→" in source; we
flip it visually with .ar-arrow. Or use a CSS pseudo to swap. */
html[lang="ar"] .ep-arrow,
html[lang="ar"] .brand-link,
html[lang="ar"] .case-cta {
/* No transform needed — the Unicode arrow character ← is
used directly in the HTML for Arabic versions. */
}
html[lang="ar"] .ep:hover .ep-arrow {
transform: translateX(-8px); /* hover moves the arrow LEFT in RTL */
}
/* Eyebrow trailing line in articles — flip from left-to-right
to right-to-left visual flow (already handled by flex + RTL). */
/* Vertical stamps (hero photo) — in RTL, vertical text should
read top-to-bottom on the RIGHT side, not the left. */
html[lang="ar"] .hero-photo-stamp {
left: auto;
right: 18px;
writing-mode: vertical-rl;
transform: rotate(0deg); /* default direction reads correctly */
letter-spacing: 0.12em;
}
@media (max-width: 900px) {
html[lang="ar"] .hero-photo-stamp {
left: auto;
right: 14px;
}
}
/* ──────────────────────────────────────────────────────────── */
/* HERO — photo column moves to the RIGHT in RTL */
/* ──────────────────────────────────────────────────────────── */
/* In Latin: 35% photo column on the LEFT, content streams on the right.
In RTL: same logical order — but visually photo is now on the RIGHT.
The browser handles this automatically via direction: rtl on the grid.
We only need to flip the right-edge dissolve gradient. */
html[lang="ar"] .hero-photo::after {
/* Pull the dissolve deeper into the photo (was 82% → 65%) so the
image fades into ink well before reaching the content column.
Stops the subject's nose/face crashing into the intro quote. */
background: linear-gradient(to left, rgba(14,14,16,0) 50%, rgba(14,14,16,0.85) 88%, var(--ink) 100%);
}
/* Mirror the portrait so the subject's gaze faces INTO the content
column (now on the left in RTL). After scaleX(-1), the face that
sat at the photo's right edge in Latin moves to the LEFT edge
visually — directly adjacent to the content. Push object-position
toward 0 so the face anchors at the OUTER (right) edge of the
photo column, with the empty side of the frame adjacent to text. */
html[lang="ar"] .hero-photo img {
transform: scaleX(-1);
object-position: 0% center;
}
/* Bio split portrait — same logic. Bio image moves from LEFT (Latin)
to RIGHT (Arabic) via direction:rtl on the grid. Mirror so the
subject faces back toward the text. */
html[lang="ar"] .s-bio-image img {
transform: scaleX(-1);
}
/* Pull the hero content column LEFT, away from the portrait. The Latin
layout uses padding: 96px clamp(32-64px) 96px clamp(40-80px) — with
the photo on the left, content gets a generous LEFT padding. In RTL
the photo flips to the right, so the inner edge (RIGHT in physical
terms) needs even more generous padding to clear the subject's face
after the photo's own positioning trick. */
html[lang="ar"] .hero-screen {
padding-left: clamp(40px, 4.5vw, 80px);
padding-right: clamp(96px, 10vw, 180px);
}
html[lang="ar"] .hero-screen-mark {
right: auto;
left: clamp(32px, 3.5vw, 64px);
}
/* ──────────────────────────────────────────────────────────── */
/* RED STATEMENT — flip the background OOMPH ghost mark */
/* ──────────────────────────────────────────────────────────── */
html[lang="ar"] .s-red-statement::before {
content: 'OOMPH'; /* keep Latin — brand mark */
right: auto;
left: -0.02em;
font-family: 'EditorialOld', Georgia, serif;
font-style: italic;
}
/* ──────────────────────────────────────────────────────────── */
/* INTRO QUOTE — flip the giant ghost quote mark */
/* ──────────────────────────────────────────────────────────── */
html[lang="ar"] .intro-quote::before {
content: '\201D'; /* right double quote — closing in RTL */
left: auto;
right: -0.4em;
font-family: 'Amiri', serif;
font-style: normal;
}
/* ──────────────────────────────────────────────────────────── */
/* STANCE / BRAND / ARTICLE — directional hover */
/* ──────────────────────────────────────────────────────────── */
/* "padding-left on hover" in Latin = leftward indent.
In RTL, the equivalent indent is on the right edge. */
html[lang="ar"] .stance-row:hover,
html[lang="ar"] .brand-row:hover {
padding-left: 0;
padding-right: 8px;
}
html[lang="ar"] .brand-row:hover { padding-right: 10px; }
html[lang="ar"] .stance-desc {
text-align: left; /* desc reads opposite of the role */
}
/* Brand row photo: was right-aligned with mask fading to the left;
in RTL we want it left-aligned with mask fading to the right. */
html[lang="ar"] .brand-row-photo {
right: auto;
left: 0;
mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0) 100%);
-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0) 100%);
}
html[lang="ar"] .brand-meta {
text-align: left;
}
/* ──────────────────────────────────────────────────────────── */
/* ARTICLE COVER NUM — flip to top-right */
/* ──────────────────────────────────────────────────────────── */
html[lang="ar"] .article-num {
left: auto;
right: 18px;
}
/* ──────────────────────────────────────────────────────────── */
/* EYEBROW DASH — pseudo-line direction */
/* ──────────────────────────────────────────────────────────── */
html[lang="ar"] .article-eyebrow::after,
html[lang="ar"] .case-eyebrow::before {
/* flex auto-handles direction; no override needed */
}
/* ──────────────────────────────────────────────────────────── */
/* BIO SPLIT — image moves to the RIGHT, content to the LEFT */
/* ──────────────────────────────────────────────────────────── */
/* Same logical grid; visual flip happens via direction: rtl. */
html[lang="ar"] .s-bio-image::after {
background:
linear-gradient(to left, rgba(14,14,16,0) 70%, var(--ink) 100%),
linear-gradient(to bottom, rgba(14,14,16,0) 75%, rgba(14,14,16,0.55) 100%);
}
html[lang="ar"] .s-bio-image-label {
left: auto;
right: 32px;
}
/* The em (Amiri whisper) sub-heading inside .s-bio-headline */
html[lang="ar"] .s-bio-headline em {
font-family: var(--serif);
font-style: normal;
font-weight: 400;
}
/* ──────────────────────────────────────────────────────────── */
/* EPISODE POSTER — hover arrow + bottom layout */
/* ──────────────────────────────────────────────────────────── */
/* Title em (Amiri whisper) in episode cards */
html[lang="ar"] .ep-title-em {
font-family: var(--serif);
font-style: normal;
font-weight: 400;
letter-spacing: 0;
line-height: 1.04;
}
/* Episode bottom row: arrow on the LEFT in RTL */
html[lang="ar"] .ep:hover .ep-arrow {
transform: translateX(-8px);
}
/* ──────────────────────────────────────────────────────────── */
/* FOOTER — wordmark + legal alignment */
/* ──────────────────────────────────────────────────────────── */
html[lang="ar"] .ft-legal {
text-align: left;
}
/* The ghost wordmark in the footer — Arabic bumped to Bold so the
wordmark holds its own at the 12vw scale; Regular looked flat
against the dark ground. Hero/masthead lockups stay at Regular. */
html[lang="ar"] .ft-wordmark {
font-family: var(--sans);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
/* ──────────────────────────────────────────────────────────── */
/* BREAK LINE — italic em inside .s-break-line */
/* ──────────────────────────────────────────────────────────── */
html[lang="ar"] .s-break-line em {
font-family: var(--serif);
font-style: normal;
font-weight: 400;
letter-spacing: 0;
}
/* ──────────────────────────────────────────────────────────── */
/* VOICES — italic emphasis inside quotes */
/* ──────────────────────────────────────────────────────────── */
html[lang="ar"] .voice-text em,
html[lang="ar"] .intro-quote em,
html[lang="ar"] .s-episodes-line em {
font-family: var(--serif);
font-style: normal;
font-weight: 400;
}
/* ──────────────────────────────────────────────────────────── */
/* CASE STUDIES — flip the .case.alt RTL trick */
/* ──────────────────────────────────────────────────────────── */
/* The Latin uses .case.alt { direction: rtl } to flip alternating
cases. In Arabic, the page direction is already RTL, so we need
.case.alt { direction: ltr } to flip the SECOND case to LTR layout. */
html[lang="ar"] .case.alt { direction: ltr; }
html[lang="ar"] .case.alt > * { direction: rtl; }
/* ──────────────────────────────────────────────────────────── */
/* SEASON CHIP — directional dot */
/* ──────────────────────────────────────────────────────────── */
/* The animated dot sits before the text. RTL handles this. */
/* ──────────────────────────────────────────────────────────── */
/* RED STATEMENT — headline is R2 (Amiri bold) */
/* ──────────────────────────────────────────────────────────── */
html[lang="ar"] .s-red-headline {
font-family: var(--serif);
font-style: normal;
font-weight: 700;
letter-spacing: -0.005em;
line-height: 1.18;
}
/* ──────────────────────────────────────────────────────────── */
/* CASE TITLE — was italic Editorial Old; Arabic = Amiri 400 */
/* ──────────────────────────────────────────────────────────── */
html[lang="ar"] .case-title {
font-family: var(--serif);
font-style: normal;
font-weight: 400;
letter-spacing: 0;
line-height: 1.22;
}
/* ──────────────────────────────────────────────────────────── */
/* CARET BLINK — keep the typing animation as-is */
/* ──────────────────────────────────────────────────────────── */
/* The underscore appears LEFT of the word in RTL, which is the
cursor's natural resting position after right-to-left typing.
The animation reads MORE truthfully in Arabic. No change needed. */
/* ════════════════════════════════════════════════════════════
SHOW PAGE — page-specific Arabic overrides
════════════════════════════════════════════════════════════
The Show page hardcodes font-weight: 200 + text-transform:
uppercase on its own page-specific classes that bypass the
generic .lockup selectors. Override here so PP Neue Montreal
Arabic doesn't render faux-200 and so the uppercase rule no-ops
cleanly. */
/* Show hero marquee — cap smaller for Arabic (was 220px max).
Pin display weight to 300 to avoid synthesis. */
html[lang="ar"] .show-marquee .lockup-word {
font-family: var(--sans);
font-weight: 300;
font-size: clamp(64px, 11vw, 168px);
line-height: 1.04;
letter-spacing: 0;
text-transform: none;
}
/* Six-word vertical attribute stack on the hero right column */
html[lang="ar"] .word {
font-family: var(--sans);
font-weight: 300;
letter-spacing: 0.02em;
text-transform: none;
font-size: clamp(26px, 4.4vw, 64px);
line-height: 1.18;
}
/* OOMPH credit stamp — Latin brand, keep upright sans, no Arabic
weight override needed; just ensure tracking reads. */
html[lang="ar"] .show-mark-aq-logo {
letter-spacing: 0.24em;
}
/* Manifesto quote in the hero — Arabic whisper register (Doran).
Was italic Editorial Old; Arabic = Doran 400 at the same scale. */
html[lang="ar"] .show-manifesto {
font-family: var(--serif);
font-style: normal;
font-weight: 400;
letter-spacing: 0;
line-height: 1.32;
}
/* Duets intro masthead — "OOMPH / Duets_" stack. The label uses
font-weight: 200 + uppercase in the Latin page-specific CSS. */
html[lang="ar"] .duets-intro-label {
font-family: var(--sans);
font-weight: 300;
font-size: clamp(48px, 7.5vw, 108px);
line-height: 1.04;
letter-spacing: 0;
text-transform: none;
}
html[lang="ar"] .duets-intro-label em {
font-family: var(--serif);
font-style: normal;
font-weight: 500;
}
/* Duets intro line — italic Editorial Old → Doran 400 */
html[lang="ar"] .duets-intro-line {
font-family: var(--serif);
font-style: normal;
font-weight: 400;
letter-spacing: 0;
line-height: 1.5;
}
/* Episodes section line — same treatment */
html[lang="ar"] .show-episodes-line {
font-family: var(--serif);
font-style: normal;
font-weight: 400;
letter-spacing: 0;
line-height: 1.32;
}
/* Duet titles — italic Editorial Old → Doran 500 (jewel weight) */
html[lang="ar"] .duet-title {
font-family: var(--serif);
font-style: normal;
font-weight: 500;
letter-spacing: 0;
line-height: 1.18;
}
/* Solo reel titles — italic Editorial Old → Doran 500 */
html[lang="ar"] .solo-title {
font-family: var(--serif);
font-style: normal;
font-weight: 500;
letter-spacing: 0;
line-height: 1.3;
}
/* Hover translate direction — arrows point ← in RTL, so hover
should move them LEFT (translateX negative) instead of right. */
html[lang="ar"] .duet:hover .duet-arrow,
html[lang="ar"] .ep:hover .ep-arrow {
transform: translateX(-8px);
}
html[lang="ar"] .subscribe-btn:hover .subscribe-btn-arrow {
transform: translateX(-4px);
}
/* Subscribe poster — huge stacked words "اشترِك / الآن_". The Latin
classes set weight 200 + uppercase; Arabic needs 300 + no-transform
to render as a clean signature wordmark. */
html[lang="ar"] .subscribe-poster-text-sub,
html[lang="ar"] .subscribe-poster-text-now {
font-family: var(--sans);
font-weight: 300;
font-size: clamp(48px, 7vw, 112px);
line-height: 1.04;
letter-spacing: 0;
text-transform: none;
}
/* Subscribe H — italic Editorial Old → Doran 400 reading scale */
html[lang="ar"] .subscribe-h {
font-family: var(--serif);
font-style: normal;
font-weight: 400;
letter-spacing: 0;
line-height: 1.5;
}
/* Subscribe form input — Arabic needs slightly more breath */
html[lang="ar"] .subscribe-input {
font-family: var(--sans);
font-size: 16px;
text-align: right;
}
html[lang="ar"] .subscribe-input::placeholder {
text-align: right;
}
/* ──────────────────────────────────────────────────────────── */
/* UTILITY — language switcher */
/* ──────────────────────────────────────────────────────────── */
.lang-switch {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'PPNeueMontreal', sans-serif;
font-weight: 500;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: inherit;
opacity: 0.55;
transition: opacity .2s;
}
.lang-switch:hover { opacity: 1; }
.lang-switch-divider {
display: inline-block;
width: 0.5px;
height: 12px;
background: currentColor;
opacity: 0.4;
}
html[lang="ar"] .lang-switch {
font-family: 'Readex Pro', sans-serif;
font-weight: 400;
letter-spacing: 0.04em;
}