/* ══════════════════════════════════════════════════════════════════════
   The Arabic layer (2026-10-04). Loaded only by ar.html, after styles.css.
   Everything here is scoped to Arabic text (:lang(ar)) or to the
   right-to-left page ([dir="rtl"]), so a section kept in English inside
   ar.html (lang="en" dir="ltr") renders exactly as on the English page.

   Type, chosen in lab/arabic-type.html (direction C, the owner's brother):
   Noto Kufi Arabic for headings, Noto Sans Arabic for text. Latin words
   inside Arabic (BizArch, bizarch.net, iPhone) keep the site's own faces:
   Aeonik Pro / Inter come first in each stack and carry no Arabic, so the
   browser falls through to the Arabic face glyph by glyph. Digits are
   Arabic-Indic (٥٬٠٠٠), prices carry SAMA's riyal sign (drawn, see ar.html).

   The files are Google's, cut down with fonttools: Kufi pinned to 600, Sans
   kept variable 400–600, both to the Arabic block plus basic punctuation
   (290 KB → 53 KB). OFL; see assets/fonts/LICENSES.txt.
   ══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Noto Kufi Arabic";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("assets/fonts/noto-kufi-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+200C-200F, U+2010-2011, U+2026;
  size-adjust: 90%;          /* Kufi's letters run large beside Aeonik (lab: 0.9) */
}
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("assets/fonts/noto-sans-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+200C-200F, U+2010-2011, U+2026;
}

/* the handwritten notes (Caveat in English): Aref Ruqaa, Ruqʿah being the
   everyday Arabic hand (default 2026-10-04, owner to confirm; Marhey was the
   lab's other option). Arabic block only, 37 KB. */
@font-face {
  font-family: "Aref Ruqaa";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/aref-ruqaa-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+200C-200F, U+2026;
}
html[lang="ar"] .hand:lang(ar) { font-family: "Aref Ruqaa", "Caveat", cursive; }

html[lang="ar"] {
  --font-display: "Aeonik Pro", "Noto Kufi Arabic", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Noto Sans Arabic", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  /* no Arabic mono exists, and Geist's wide colon and digits gap inside an
     Arabic label («مناسب لـ :»), so the labels take the text face */
  --font-mono:    var(--font-body);
}
/* a section kept in English inside ar.html keeps its mono labels */
html[lang="ar"] [lang="en"] { --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; }

/* Arabic letters join, so tracking of any kind breaks the words; and there
   are no capitals to transform. Latin inside keeps the page's own rule. */
html[lang="ar"] :lang(ar) { letter-spacing: 0 !important; text-transform: none !important; }

/* taller lines: Arabic has deep descenders and marks above and below */
html[lang="ar"] :is(h1, h2, h3):lang(ar) { line-height: 1.45 !important; }
html[lang="ar"] .hero__display:lang(ar) { line-height: 1.38 !important; --leading: 1.38; }
/* above phones, the hero's two lines take English's height (owner,
   2026-10-05): at 1.38 the headline stood 36px taller and pushed the film
   panel's top, the "there's more below" peek, off the bottom of laptop
   screens. 1.22 at 93% size still clears the shadda over يتذكّره. */
@media (min-width: 40.0625rem) {
  html[lang="ar"] .hero__display:lang(ar) { line-height: 1.22 !important; --leading: 1.22; font-size: calc(var(--text-display) * 0.93); }
}
html[lang="ar"] :is(p, li, summary, label, legend, dd):lang(ar) { line-height: 1.8; }
html[lang="ar"] :is(.eyebrow, .pcard__k, .hero__pill, .tf__pill, .need__opt span, .btn, .hbtn, .nav__link, .more__tab, .pcard__unit, .pcard__num):lang(ar) { line-height: 1.5; }
html[lang="ar"] .pcard__price:lang(ar) { line-height: 1.2; }

/* the mono pills and labels, set in the text face: a touch larger and medium */
html[lang="ar"] .eyebrow:lang(ar),
html[lang="ar"] .pcard__k:lang(ar) { font-size: 0.8125rem; font-weight: 500; }

/* the riyal sign beside the price, sized to the digits it follows */
.riyal { display: inline-block; inline-size: 0.82em; block-size: 0.9em; vertical-align: -0.06em; fill: currentColor; }
/* the price row on one baseline, as English's (owner, 2026-10-04): «يبدأ من»
   and the sign sat under the digits, because the row lines up box bottoms
   and Arabic's taller line boxes put the digits higher in theirs. The sign
   stands on the baseline, as tall as the digits. */
html[lang="ar"] .pcard__price { align-items: baseline; }
html[lang="ar"] .pcard__price .pcard__unit { margin-block-end: 0; }
.pcard__unit .riyal { inline-size: 1.5em; block-size: 1.65em; vertical-align: -0.04em; }

/* fields that hold Latin (an address, an email, a number) stay left to right */
[dir="rtl"] :is(input[type="url"], input[type="email"], input[type="tel"]) { direction: ltr; text-align: end; }

/* ── mirroring ────────────────────────────────────────────────────────── */
/* arrows drawn as forward chevrons point the reading way */
[dir="rtl"] .hbtn svg { transform: scaleX(-1); }

/* the services underline is placed by offsetLeft (app.js), a physical
   measure, so it has to start from the physical left */
[dir="rtl"] .more__ink { inset-inline-start: auto; left: 0; }

/* the theme switch: its marker starts at the inline start (the right) and
   slides by a physical translate, so dark slides it left */
[dir="rtl"][data-theme="dark"] .tseg__dot { translate: -30px 0; }
[dir="rtl"][data-theme="dark"] .tseg--nav .tseg__dot { translate: -34px 0; }

/* How it works' two-way toggle: the pill, its hover lean and its first-view
   peek all slide by physical translates, so they run the other way */
[dir="rtl"] .seg[data-on="1"] .seg__pill { translate: -100% 0; }
[dir="rtl"] .seg:not([data-on="1"]):has(.seg__opt[aria-selected="false"]:hover) .seg__pill { translate: -6% 0; }
[dir="rtl"] .seg[data-on="1"]:has(.seg__opt[aria-selected="false"]:hover) .seg__pill { translate: -94% 0; }
@keyframes seg-peek-rtl { 0%, 100% { translate: 0 0; } 22%, 62% { translate: -14% 0; } 42% { translate: 0 0; } }
[dir="rtl"] .seg.is-hint .seg__pill { animation-name: seg-peek-rtl; }

/* the active dot fills from the right */
[dir="rtl"] .more__dots i::after { transform-origin: right center; }

/* the language switch itself is shared: styles.css "The language switch" */

/* ── services cards: STOPGAP (2026-10-04) ─────────────────────────────
   Each card keeps the English layout (ar.html sets dir="ltr" on .mcard),
   so the text block sits where it does in English, over the calm part of
   its drawing; only the lines inside read right to left, flush to the
   block's right edge. The block itself must stay ltr: its inset-inline-start
   follows its own direction. The real Arabic cards are a job for later. */
.mcard[dir="ltr"] .mcard__text { inline-size: 100%; padding-right: 1rem; box-sizing: border-box; }
/* the full English box (its max-inline-size caps it), so the lines end at one
   edge on every card; 1rem short of it, because right-aligned lines all reach
   that edge, where English's ragged ones seldom did (card 4's phone sits there) */
.mcard[dir="ltr"] .mcard__text > * { direction: rtl; text-align: right; }

/* the quotes' initials: Arabic letters (ي، س، ع) trail down and to the left,
   just where the client badge sits once the avatar mirrors; a touch smaller
   and lifted, they clear it */
html[lang="ar"] .word__mono:lang(ar) { font-size: 1.2rem; padding-block-end: 0.3em; }

/* ── services cards, the Arabic versions (2026-10-04, one card at a time) ─
   A card without dir="ltr" is the real Arabic card: the whole drawing runs
   right to left. Its parts are placed by inset-inline-*, so they mirror by
   themselves; what is drawn with physical coordinates (light, sun patches,
   the card's glow) is mirrored here, card by card. */

/* card 1 · the office: the glow, the window's sun haze and the sun patch
   on the floor come from the other side, with the window */
[dir="rtl"] #more-services:not([dir="ltr"]) { --glow-x: 85%; }
[dir="rtl"] #more-services:not([dir="ltr"]) .scene--office {
  background:
    radial-gradient(ellipse 46cqi 32cqi at 24% 18%, var(--color-office-sun-haze), transparent 70%),
    linear-gradient(180deg, var(--color-office-wall-top) 0%, var(--color-office-wall) var(--floor),
      var(--color-office-floor) var(--floor), var(--color-office-floor-2) 100%);
}
[dir="rtl"] #more-services:not([dir="ltr"]) .off__stripes {
  clip-path: polygon(33% 0, 3% 0, 58% 100%, 100% 100%);
  background:
    repeating-linear-gradient(-62deg, transparent 0 1.3cqi, var(--color-office-floor) 1.3cqi 1.9cqi),
    linear-gradient(180deg, oklch(93% 0.04 85 / 0.40), oklch(93% 0.04 85 / 0.10));
}

/* the mock-ups' small labels are Geist Mono capitals in English, which read
   larger than their size; set in Arabic at the same size they turn faint,
   so they go up by about a third (all Arabic cards) */
html[lang="ar"] .mcard__art :is(.fl__k, .tile em):lang(ar) { font-size: 1.15cqi; }
html[lang="ar"] .mcard__art .fld em:lang(ar) { font-size: 1.05cqi; }
html[lang="ar"] .mcard__art .svc em:lang(ar) { font-size: 1.05cqi; }
html[lang="ar"] .mcard__art .mk__hero-h:lang(ar) { line-height: 1.35 !important; }
@media (max-width: 40rem) {
  html[lang="ar"] .mcard__art :is(.fl__k, .tile em, .fld em):lang(ar) { font-size: 2.1cqi; }
}
/* …and in their tight mock-up rows they keep tight lines (the page's Arabic
   1.8 pushed card 1's tile names 7px past the card's foot) */
html[lang="ar"] .mcard__art :is(.fl__k, .tile em, .fld em, .tile__h, .mk__brand, .mk__pill, .fl__cta):lang(ar) { line-height: 1.3; }

/* card 2 · the café: the lamps' haze, and the light on the jars, bags,
   cup and grinder, come from the other side */
[dir="rtl"] #more-store:not([dir="ltr"]) .scene--cafe {
  background:
    radial-gradient(ellipse 52cqi 26cqi at 32% 14%, var(--color-cafe-lamp-haze), transparent 70%),
    repeating-linear-gradient(90deg, var(--color-cafe-flute) 0 0.25cqi, transparent 0.25cqi 1.7cqi),
    linear-gradient(180deg, var(--color-cafe-wall-top), var(--color-cafe-wall) 72%, var(--color-cafe-wall-top));
}
[dir="rtl"] #more-store:not([dir="ltr"]) .cafe__jar { box-shadow: inset -0.4cqi 0 0.3cqi oklch(100% 0 0 / 0.12); }
[dir="rtl"] #more-store:not([dir="ltr"]) .cafe__bag {
  background:
    linear-gradient(180deg, transparent 42%, var(--color-cafe-oak) 42% 60%, transparent 60%) center / 64% 100% no-repeat,
    linear-gradient(260deg, var(--color-cafe-oak-2), var(--color-cafe-bag) 55%);
}
[dir="rtl"] #more-store:not([dir="ltr"]) .cafe__cup { background: linear-gradient(270deg, var(--color-cafe-cup), oklch(80% 0.012 80)); }
[dir="rtl"] #more-store:not([dir="ltr"]) .cafe__grinder { background: linear-gradient(270deg, var(--color-cafe-bag), oklch(40% 0.02 55) 45%, var(--color-cafe-bag)); }
/* brand marks never mirror (Mastercard's circles swapped places on phones) */
[dir="rtl"] .pay .pm { direction: ltr; }

/* card 3 · the spa: the lamp's haze, the floor's glow, the arch's light on
   the floor and the rolled towel's shading come from the other side */
[dir="rtl"] #more-bookings:not([dir="ltr"]) .scene--spa {
  background:
    radial-gradient(ellipse 40cqi 34cqi at 34% 30%, var(--color-spa-lamp-haze), transparent 70%),
    radial-gradient(ellipse 60cqi 20cqi at 60% var(--floor), oklch(78% 0.11 65 / 0.12), transparent 70%),
    linear-gradient(180deg,
      var(--color-spa-wall-top) 0%, var(--color-spa-wall) calc(var(--floor) - 0.5%),
      var(--color-spa-reveal) calc(var(--floor) - 0.5%), var(--color-spa-reveal) var(--floor),
      var(--color-spa-floor) var(--floor), var(--color-spa-floor-2) 100%);
}
[dir="rtl"] #more-bookings:not([dir="ltr"]) .spa__beam {
  clip-path: polygon(24% 0, 5% 0, 54% 100%, 94% 100%);
  background:
    repeating-linear-gradient(-30deg, transparent 0 1.6cqi, var(--color-spa-floor) 1.6cqi 2.1cqi),
    repeating-linear-gradient(60deg, transparent 0 1.6cqi, var(--color-spa-floor) 1.6cqi 2.1cqi),
    linear-gradient(180deg, oklch(80% 0.11 70 / 0.42), oklch(80% 0.11 70 / 0.14));
}
[dir="rtl"] #more-bookings:not([dir="ltr"]) .spa__roll {
  background: radial-gradient(ellipse 30% 60% at 82% 50%, var(--color-spa-linen-2), transparent 90%), linear-gradient(180deg, var(--color-spa-linen), var(--color-spa-linen-2));
}
[dir="rtl"] #more-bookings:not([dir="ltr"]) .fl--slots { inset-block-end: 3.8cqi; }   /* 1.2cqi lower: it clipped the foot of «روضة سبا» */
@media (max-width: 40rem) {   /* phones: the sample site rides 3cqi higher so the taller Arabic panel clears «روضة سبا» */
  [dir="rtl"] #more-bookings:not([dir="ltr"]) .mk--spa { inset-block-end: -3.5cqi; }
  [dir="rtl"] #more-bookings:not([dir="ltr"]) .fl--slots { inset-block-end: 3cqi; }
}
/* day names and times: Arabic needs them a size up to stay legible */
html[lang="ar"] .mcard__art .fl__days em:lang(ar) { font-size: 1cqi; }
html[lang="ar"] .mcard__art .fl__times em:lang(ar) { font-size: 1.15cqi; }
html[lang="ar"] .mcard__art .fl__days em b:lang(ar) { font-size: 1.7cqi; }
html[lang="ar"] .mcard__art :is(.fl__days em, .fl__days em b, .fl__times em):lang(ar) { line-height: 1.2; }   /* Arabic digits run small: the date stays the biggest thing in its chip */
@media (max-width: 40rem) {
  html[lang="ar"] .mcard__art .fl__days em b:lang(ar) { font-size: 2.9cqi; }
  html[lang="ar"] .mcard__art .fl__days em:lang(ar) { font-size: 1.75cqi; }
  html[lang="ar"] .mcard__art .fl__times em:lang(ar) { font-size: 2.1cqi; }
}

/* from card 4 on, the room is mirrored whole: drawn left to right as in
   English, then flipped. Exact, light and all, with no rule-by-rule work;
   the scenes hold no text, so nothing reads backwards. */
[dir="rtl"] :is(#more-agents, #more-invoicing, #more-apps, #more-platforms):not([dir="ltr"]) .scene { direction: ltr; transform: scaleX(-1); }

/* card 4 · the WhatsApp phone, as WhatsApp draws itself in Arabic: the back
   chevron points right; the time chips run right to left */
[dir="rtl"] #more-agents:not([dir="ltr"]) .wa__head svg { transform: scaleX(-1); }
[dir="rtl"] #more-agents:not([dir="ltr"]) { --glow-x: 20%; }
[dir="rtl"] #more-invoicing:not([dir="ltr"]) { --glow-x: 15%; }   /* card 5 */
[dir="rtl"] #more-apps:not([dir="ltr"]) { --glow-x: 45%; }   /* card 6 */
[dir="rtl"] #more-apps:not([dir="ltr"]) .iph--menu { transform: rotate(-6deg); }   /* the tilted phone leans the mirror way */
/* card 7 · the planning wall: the client's sketch is handwriting, and Arabic
   can't be slanted (a synthetic italic breaks its joins), so it's written in
   the notes' Ruqaa, tilted the mirror way; the chalk arrow points back */
[dir="rtl"] #more-platforms:not([dir="ltr"]) { --glow-x: 15%; }
[dir="rtl"] #more-platforms:not([dir="ltr"]) .fl--sketch { rotate: 3deg; font-style: normal; font-family: "Aref Ruqaa", var(--font-body); }
[dir="rtl"] #more-platforms:not([dir="ltr"]) :is(.sk__list em, .sk__title, .sk__note) { font-style: normal; line-height: 1.35; }
[dir="rtl"] #more-platforms:not([dir="ltr"]) .sk__list em { font-size: 1.6cqi; }
[dir="rtl"] #more-platforms:not([dir="ltr"]) .sk__title { font-size: 2cqi; }
[dir="rtl"] #more-platforms:not([dir="ltr"]) .sk__note { rotate: 2deg; font-size: 1.4cqi; font-weight: 400; }
[dir="rtl"] #more-platforms:not([dir="ltr"]) .plan__arrow { transform: scaleX(-1); }
@media (max-width: 40rem) {
  [dir="rtl"] #more-platforms:not([dir="ltr"]) .sk__list em { font-size: 2.6cqi; }
  [dir="rtl"] #more-platforms:not([dir="ltr"]) .sk__title { font-size: 3.2cqi; }
  [dir="rtl"] #more-platforms:not([dir="ltr"]) .sk__note { font-size: 2.3cqi; }
}

/* the before / after viewer: the "after" side's language (BizArch only,
   owner 2026-10-05), a plain toggle right after its label, «العربية |
   English» (Arabic first, read right to left); it sat at the row's end,
   over the panel's top-left corner, and fought the handwritten «يتحرّكان
   معًا» note's curve there (owner), no border or fill, the
   one on show in ink, the other muted, a hairline between. Its 44px tap
   height is taken back out of the row (a taller row dropped that panel,
   owner). */
.dip__langs { display: inline-flex; align-items: center; margin-inline-start: var(--space-sm); }
/* desktop: centred over the "after" panel, in its label row (owner,
   2026-10-05); the label stays at the row's start. Physical left/translate:
   a positioned box's own rtl would flip a logical inset. */
@media (min-width: 80rem) {   /* narrower, the centre meets the label (seen at 1024) */
  #dip-label-after { position: relative; }
  #dip-label-after .dip__langs {
    position: absolute; left: 50%; translate: -50% 0; margin: 0;
    inset-block: 0 var(--space-sm);
  }
}
.dip__lang {
  appearance: none; background: none; border: 0; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; min-block-size: 0; padding: 12px 10px; margin-block: -12px;
  font: 500 var(--text-sm)/1.5 var(--font-body); letter-spacing: 0; color: var(--color-muted);
  transition: color 200ms var(--ease-out);
}
.dip__lang[lang="en"] { font-family: "Inter", sans-serif; }
.dip__lang:last-child { padding-inline-end: 0; }
.dip__lang + .dip__lang { position: relative; }
.dip__lang + .dip__lang::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 50%; block-size: 1em; translate: 0 -50%; border-inline-start: 1px solid var(--color-rule); }
.dip__lang:hover { color: var(--color-ink); }
.dip__lang[aria-pressed="true"] { color: var(--color-ink); font-weight: 600; cursor: default; }
.dip__lang:focus-visible { outline: var(--rule-bold) solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-xs); }

/* the before / after stage, mirrored (owner, 2026-10-04: before on the right,
   after on the left). The pair, labels, dock and notes are laid out with
   logical properties and follow by themselves; these are the physical bits.
   Scoped to #case: the EuroDecor stage shares the scrubber's classes. */
[dir="rtl"] #case .hand svg { transform: scaleX(-1); }
/* inside each panel, left to right: the framed page (or the touch stills) is
   a 1440px desktop page scaled down from its top-left corner; right to left
   it hung off the panel's right edge and was scaled out of view */
[dir="rtl"] #case .dip__frame { direction: ltr; }
@media (min-width: 70rem) {
  [dir="rtl"] #case .dip__scrub { left: auto; right: calc(100% + 6px); }
}
@media (min-width: 70rem) and (hover: hover) and (pointer: fine) {
  [dir="rtl"] #case .dip__ghost { left: auto; right: calc(100% + 6px + 22px); translate: 50% -50%; }
  [dir="rtl"] #case .dip__hintpill { left: auto; right: calc(100% + 6px + 22px); translate: 50% -6px; }
  [dir="rtl"] #case .dip__hintpill.is-on { translate: 50% 0; }
}

/* EuroDecor, built from scratch (2026-10-04): the Arabic site plays their
   Arabic page in the middle, with their English page («بالإنجليزية») and the
   Arabic page at phone width («شاشة ضيقة») either side, all mirrored. The
   framed page stays left to right inside (scaled from its corner, as in
   #case); the upright scrubber and its hints sit in the gap on the left. */
[dir="rtl"] #build .build__frame { direction: ltr; }
@media (min-width: 70rem) {
  [dir="rtl"] #build .dip__scrub { left: auto; right: calc(100% + 6px); }
}
@media (min-width: 70rem) and (hover: hover) and (pointer: fine) {
  [dir="rtl"] #build .dip__ghost { left: auto; right: calc(100% + 6px + 22px); translate: 50% -50%; }
  [dir="rtl"] #build .dip__hintpill { left: auto; right: calc(100% + 6px + 22px); translate: 50% -6px; }
  [dir="rtl"] #build .dip__hintpill.is-on { translate: 50% 0; }
}
/* each side image shows the part where its text starts: the English one
   its left part, the Arabic one its right (the English page crops the other
   way round, its sides being the other way round) */
[dir="rtl"] #build .triptych__side--a img { object-position: 30% 50%; }
[dir="rtl"] #build .triptych__side--b img { object-position: 70% 50%; }

/* the hero film (2026-10-04): the panel stays a left-to-right browser window
   playing BizArch's page; our own layer over it is Arabic. Each box keeps its
   English place and size (its own dir would move it); inside, it reads from
   the right: the mark before the words, the avatar on the right, the bubble's
   tail on the other corner. */
html[lang="ar"] [lang="en"] [lang="ar"] { --font-mono: var(--font-body); }
.gen__verdict:lang(ar) { flex-direction: row-reverse; padding: 0.7cqi 0.7cqi 0.7cqi 1.5cqi; }
.gen__done:lang(ar) { grid-template-columns: 1fr auto; padding: 1.6cqi 1.6cqi 1.6cqi 2.4cqi; text-align: right; }
.gen__done:lang(ar) b { grid-column: 2; grid-row: 1 / span 2; }
.gen__done:lang(ar) :is(span, em) { grid-column: 1; direction: rtl; }
.rv:lang(ar) { flex-direction: row-reverse; padding: 0.9cqi 0.9cqi 0.9cqi 1.3cqi; border-radius: 1.4cqi 1.4cqi 0.3cqi 1.4cqi; }
.rv:lang(ar) .rv__body { direction: rtl; text-align: right; }
.shot__day:lang(ar), .shot__state:lang(ar) { unicode-bidi: plaintext; }   /* the text reads right to left; the box, centred by its inline start, stays put */
#shot-url [lang="ar"] { font-family: var(--font-body); }

/* the Arabic privacy page's header: "English" beside the way back */
.legal__end { display: flex; align-items: baseline; gap: var(--space-md); }

/* the nav's drawn frame (the raised tab around the links) is centred by
   inset-inline-start: 50% and a -50% translate; right to left that put it
   960px off the left edge. It is symmetric, so it simply stays ltr. */
[dir="rtl"] .nav__frame { direction: ltr; }
/* the wordmark is the brand: it reads Layoutics then its blue square, on
   both pages (owner, 2026-10-04). In RTL the square fell before the word. */
[dir="rtl"] .wordmark { direction: ltr; }

/* ── Who's behind Layoutics (owner's review, 2026-10-04) ──────────────────
   The roles were set at English's mono-caps size (11px), too small for
   Arabic, and the partners' line at 12px; both a step up. Names at the
   paragraph line-height sat far from their role: back near English's. The
   partners' line left «الحاجة.» alone on its last line: balanced. The
   heading's Latin word stood a size above the Arabic beside it (Kufi is
   drawn at 90%): set at the same 90%. */
html[lang="ar"] .person__name:lang(ar) { line-height: 1.5; }
html[lang="ar"] .person__role:lang(ar) { font-size: 0.8125rem; line-height: 1.6; margin-block-start: 0; }
html[lang="ar"] .person__line:lang(ar) { font-size: 0.8125rem; text-wrap: balance; }
html[lang="ar"] .about__title [lang="en"] { font-size: 0.9em; }


/* "اسحب للاستكشاف" down the scrubber's track: in the text face, no caps */
/* Arabic letters join, so they can't be stacked as English's are, and on
   its side it read poorly (owner): here it stays upright, two short lines,
   «اسحب» over «للاستكشاف», centred across the track (nudged 8px outward to
   clear the panel's edge by 4px), the dash above, a step darker than English's. */
@media (min-width: 70rem) and (hover: hover) and (pointer: fine) {
  html[lang="ar"] .dip__hintpill:lang(ar) {
    writing-mode: horizontal-tb; flex-direction: column; gap: 6px; padding: 6px 0;
    white-space: normal; text-align: center; inline-size: 64px;
    font: 500 12px/1.5 var(--font-body); color: var(--color-accent);   /* blue, as English (owner, 2026-10-05) */
    top: calc(var(--scrub-top, 0px) + var(--scrub-h, 0px) / 2); transform: translateY(-50%);   /* centred on the track (2026-10-06, owner): English sits low */
  }
  [dir="rtl"] :is(#case, #build) .dip__hintpill:lang(ar) { translate: calc(50% - 8px) -6px; }
  [dir="rtl"] :is(#case, #build) .dip__hintpill.is-on:lang(ar) { translate: calc(50% - 8px) 0; }
  /* the dash stands on the track, upright, as English's does (it sat
     across, 8px off the line, and read as broken; owner): the block is
     nudged 8px outward, so the dash comes back 8px */
  html[lang="ar"] .dip__hintpill:lang(ar)::before { inline-size: 2px; block-size: 12px; translate: 8px 0; }
}
/* under 85rem the margin can't hold «للاستكشاف» (it ran off the screen at
   1280): there it says «اسحب» alone */
@media (min-width: 70rem) and (max-width: 84.99rem) and (hover: hover) and (pointer: fine) {
  html[lang="ar"] .dip__hintpill:lang(ar) { font-size: 0; inline-size: 40px; }
  html[lang="ar"] .dip__hintpill:lang(ar)::after { content: "اسحب"; font-size: 12px; }
  [dir="rtl"] :is(#case, #build) .dip__hintpill:lang(ar) { translate: 50% -6px; }
  [dir="rtl"] :is(#case, #build) .dip__hintpill.is-on:lang(ar) { translate: 50% 0; }
  html[lang="ar"] .dip__hintpill:lang(ar)::before { translate: none; }   /* centred here, so on the track as it is */
}   /* the dash stays at the top, by the knob (right to left, a vertical line starts at its foot) */
/* EuroDecor's track runs down a 56px gap between the narrow phone picture
   and the main panel, so the 64px two-line label (nudged 8px outward) lay
   12px over the picture (owner, 2026-10-06). There it says «اسحب» alone at
   every width, 40px, on the track, 8px clear each side; Redesigned's track
   is in the open margin and keeps both words. */
@media (min-width: 70rem) and (hover: hover) and (pointer: fine) {
  html[lang="ar"] #build .dip__hintpill:lang(ar) { font-size: 0; inline-size: 40px; }
  html[lang="ar"] #build .dip__hintpill:lang(ar)::after { content: "اسحب"; font-size: 12px; }
  [dir="rtl"] #build .dip__hintpill:lang(ar) { translate: 50% -6px; }
  [dir="rtl"] #build .dip__hintpill.is-on:lang(ar) { translate: 50% 0; }
  html[lang="ar"] #build .dip__hintpill:lang(ar)::before { translate: none; }
}

/* the theme switch's hover label (owner, 2026-10-05: it showed over the
   language switch): it is centred with a 50% inset and a -50% shift, and
   right to left the logical inset measured from the right, so it landed a
   whole label to the left. Measured from the left, as in English. */
[dir="rtl"] .tseg__opt[data-tip]::after { inset-inline-start: auto; left: 50%; right: auto; }

/* the film's address bar while it waits (owner, 2026-10-05: it said
   "loading a real rebuild" in English): in Arabic, the spinner stays on
   the left, where the line ends (owner), the light running right to left. The film is
   lang="en" dir="ltr" inside, so this is keyed on the page's language. */
html[lang="ar"].js .shot:not(.is-seen) .shot__url::after {
  content: "جارٍ تحميل إعادة بناء حقيقية"; font-family: var(--font-body); font-size: 12px; letter-spacing: 0;
}
@media (prefers-reduced-motion: no-preference) {
  html[lang="ar"].js .shot:not(.is-seen) .shot__url::after { animation-direction: reverse; }
}