/* Arabic (RTL) layer — loaded only by the /ar/ pages, on top of the English styles.
   Latin fonts stay first in every stack, so brand names render exactly as in English;
   Arabic letters fall through to the Arabic fonts below. */
html[lang=ar]{--ar-display:'Readex Pro';--ar-body:'Readex Pro';--ar-accent:'Aref Ruqaa'}

/* Arabic letters join — tracking breaks them */
html[lang=ar] *{letter-spacing:0!important}
html[lang=ar] body{font-family:'Bricolage Grotesque',var(--ar-body),system-ui,sans-serif}
html[lang=ar] :is(.logo,.links,.lbl,.soon,.nav-logo,.back-btn){font-family:'Unbounded',var(--ar-display),sans-serif}
html[lang=ar] :is(h1,h2,h3,h4,.tagline,.t-loc b,.f-brand b,.bname,.mmeta h4,.btn,.socials a,.proj-name,.proj-section-title,.feature-title,.visit-btn,.home-btn){font-family:'Bricolage Grotesque',var(--ar-display),sans-serif}
html[lang=ar] :is(.serif,.proj-tagline){font-family:'Instrument Serif',var(--ar-accent),serif;font-style:normal}
html[lang=ar] :is(.kicker,.f-role,.proj-kicker,.proj-section-label){font-family:'JetBrains Mono',var(--ar-body),monospace}
/* the tagline's second half gets its own line, so no word is left alone */
html[lang=ar] .tagline .serif{display:block}
html[lang=ar] .small{font-family:var(--ar-body),sans-serif;font-weight:400;font-size:13px;line-height:1.85}
html[lang=ar] .wordmark{font-family:var(--ar-display),sans-serif;font-weight:800;font-size:30vw;bottom:-3vw}

/* Arabic needs more room above and below the letters */
/* hero words in Arabic: Readex Pro, with Aref Ruqaa for "برمجة." */
html[lang=ar] .hero-words{font-family:var(--ar-display),sans-serif;font-weight:700;line-height:1.3}
html[lang=ar] .hero-words .hw2{font-family:var(--ar-accent),serif;font-style:normal;font-weight:700;font-size:1.05em;line-height:1.1;left:-.9em}
html[lang=ar] :is(.tcap,.hero-count,.mkind,.f-stack,.mtags){font-family:'JetBrains Mono',var(--ar-body),monospace}
html[lang=ar] :is(.about-head h2,.work-head h2,.contact h2){line-height:1.2}
html[lang=ar] :is(.tagline,.t-bio h3,.feature h3,.more-head h3,.proj-name,.proj-section-title){line-height:1.3}
html[lang=ar] :is(.t-bio p,.svc p,.feature p,.work-head p,.proj-desc-text,.feature-desc){line-height:1.85}
html[lang=ar] .svc h4{line-height:1.35}
html[lang=ar] .contact .mail{margin-top:52px}

/* hero: the copy block moves to the right side; the frame label sits on the right */
[dir=rtl] .hero-bl{left:auto;right:clamp(18px,2.6vw,40px);width:min(34vw,450px)}
[dir=rtl] .hero-count{right:auto;left:clamp(18px,2.6vw,40px);text-align:left}

/* arrows point the reading direction */
[dir=rtl] .btn:hover .arr{transform:rotate(45deg)}
[dir=rtl] .socials a{padding:11px 14px 11px 18px}

/* PartBill feature: screenshot on the left, tilted toward the copy */
[dir=rtl] .f-browser{transform:rotateY(12deg) rotateX(6deg)}
[dir=rtl] .f-chip.k1{left:auto;right:-7%}
[dir=rtl] .f-chip.k2{right:auto;left:-4%}
[dir=rtl] .feature.flip .f-browser{transform:rotateY(-12deg) rotateX(6deg)}
[dir=rtl] .feature.flip .f-chip.k1{right:auto;left:-6%}
[dir=rtl] .feature.flip .f-chip.k2{left:auto;right:-4%}
/* screenshots of English sites keep macOS window chrome as-is */
[dir=rtl] .wbar{direction:ltr}

/* project pages */
[dir=rtl] .tech-pill{padding:10px 12px 10px 18px}

@media (max-width:900px){
  [dir=rtl] .hero-bl{left:10px;right:10px;width:auto}
  html[lang=ar] .contact .mail{margin-top:40px}
  [dir=rtl] .f-chip.k1{left:auto;right:-2%}
  [dir=rtl] .f-chip.k2{right:auto;left:-2%}
  [dir=rtl] .more-head{padding-right:0;padding-left:120px}
}
[dir=rtl] .mkind{left:auto;right:12px}
[dir=rtl] .f-stack b{margin-right:0;margin-left:8px}
html[lang=ar] .loc-map .tag{font-family:var(--ar-body),sans-serif;font-size:4.6px}
html[lang=ar] .t-loc span{font-family:'JetBrains Mono',var(--ar-body),monospace}
[dir=rtl] .loc-map{right:auto;left:30px;direction:ltr}
@media (max-width:900px){[dir=rtl] .loc-map{left:12px}}