/* =====================================================================
   rtl.css: the Arabic version. Doran for Arabic titles and names, Thmanyah Sans for everything else (body text, buttons,
   labels; packaged in fonts-ar.css, which only the Arabic pages load). Both cover Arabic letters only, so Latin keeps
   Jost / Montserrat. No letter-spacing (it breaks joined letters), roomier line-height, the layout mirrored for dir="rtl".
   ===================================================================== */
@font-face{font-family:"Doran";src:url(../fonts/Doran-Regular.ttf) format("truetype");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"Doran";src:url(../fonts/Doran-Medium.ttf) format("truetype");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"Doran";src:url(../fonts/Doran-Bold.ttf) format("truetype");font-weight:600 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"Doran";src:url(../fonts/Doran-ExtraBold.ttf) format("truetype");font-weight:800 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+2010-2011,U+204F,U+2E41}
html.i18n-wait body{opacity:0}
:root[lang="ar"]{--title-font:"Doran","Jost",sans-serif;--display-font:"Thmanyah Sans","Jost",sans-serif;--body-font:"Thmanyah Sans","Montserrat",sans-serif}
:root[lang="ar"] body{font-family:var(--body-font)}
/* titles and names in Doran (the English display face, Jost, carries buttons and labels too; in Arabic those take Thmanyah) */
:root[lang="ar"] :is(h1,h2,h3,.pg-title,.pg-h,.big,.win-title,.co-name,.peek-name,.base-name,.side-name,.row .name,.wc-name,.w-dname){font-family:var(--title-font)}
:root[lang="ar"] *{letter-spacing:0!important}
:root[lang="ar"] h1,:root[lang="ar"] h2,:root[lang="ar"] .pg-title,:root[lang="ar"] .win-title{line-height:1.2}
:root[lang="ar"] .pl-chip,:root[lang="ar"] .pl-hint,:root[lang="ar"] .pl-vcap{font-family:"Thmanyah Sans",ui-monospace,monospace;font-size:12px}
:root[lang="ar"] .pl-ui{font-size:18px}
:root[lang="ar"] .eyebrow,:root[lang="ar"] .tray-h,:root[lang="ar"] .hud-top{font-size:.92rem}

/* ---------- mirrored layout ---------- */
@media (min-width:1100px){
  [dir="rtl"] .side{inset:0 0 0 auto;border-right:0;border-left:1px solid var(--line)}
  [dir="rtl"] .with-side,[dir="rtl"] .page{margin-left:0;margin-right:var(--side)}
  [dir="rtl"] #page,[dir="rtl"] body > footer{margin-left:0;margin-right:var(--side)}
  [dir="rtl"] #page > footer{margin-right:0}
}
[dir="rtl"] .side-nav a::before{left:auto;right:-14px}
[dir="rtl"] .side-nav a[aria-current="page"],[dir="rtl"] .side-nav a.active{transform:translateX(-6px)}
[dir="rtl"] .side-cap{left:auto;right:calc(100% + 12px);translate:6px -50%}
[dir="rtl"] .side-photo:hover .side-cap{translate:0 -50%}
[dir="rtl"] .side-photo{rotate:6deg}
[dir="rtl"] .cta svg,[dir="rtl"] .ghost-btn svg,[dir="rtl"] .r-go svg,[dir="rtl"] .back svg{transform:scaleX(-1)}
[dir="rtl"] .cta:hover svg{transform:scaleX(-1) translateX(3px)}
[dir="rtl"] .glow{right:auto;left:calc(min(70vw,1000px) * -.34);transform:scaleX(-1)}
[dir="rtl"] .pg .glow{left:-12vw}

/* playground: the controls swap sides */
[dir="rtl"] .pl-head{left:auto;right:clamp(16px,2.4vw,30px)}
[dir="rtl"] .pl-about{right:auto;left:clamp(124px,calc(2.4vw + 104px),136px)}
@media (max-width:1099px){[dir="rtl"] .pl-about{left:116px}}
[dir="rtl"] .pl-layout{left:auto;right:clamp(10px,1.8vw,22px)}
[dir="rtl"] .pl-filters{right:auto;left:clamp(16px,2.4vw,30px)}
[dir="rtl"] .pl-arr svg{transform:scaleX(-1)}

/* About / Blog / World */
[dir="rtl"] .ab-photo{rotate:-3deg}
[dir="rtl"] .site .crane{left:auto;right:290px}
[dir="rtl"] .site .crane .jib{left:auto;right:-215px}
[dir="rtl"] .site .crane .cable{left:auto;right:-200px}
[dir="rtl"] .site .crane .hook{left:auto;right:-206px}
[dir="rtl"] .tower{left:auto;right:0}

/* the giant "Hire me": one word in Arabic, so the "me" goes */
:root[lang="ar"] a.big span + span{display:none}

/* the Arabic name sits on one line */
:root[lang="ar"] #h1 span{display:inline;white-space:nowrap}
:root[lang="ar"] #h1 span + span{margin-inline-start:.22em}
/* the selection's named cursor hangs off its end, which is the left in Arabic */
[dir="rtl"] .sel-cursor{left:auto;right:calc(100% - 8px);flex-direction:row-reverse}
[dir="rtl"] .sel-cursor svg{transform:scaleX(-1)}

/* ---------- RTL review, 30 Oct: things placed with physical left/right ---------- */
/* home: the company logos tuck behind the CTA's end and fan out toward the end side */
[dir="rtl"] .cta-group{margin-right:0;margin-left:10px}
[dir="rtl"] .logo-stack{margin-left:0;margin-right:-22px}
[dir="rtl"] .logo-stack img:nth-child(1){rotate:4deg}
[dir="rtl"] .logo-stack img:nth-child(2){rotate:-6deg;translate:-4px 1px}
[dir="rtl"] .logo-stack img:nth-child(3){rotate:-14deg;translate:-8px 2px}
[dir="rtl"] .cta-group:hover .logo-stack img:nth-child(1){translate:-4px -52px;rotate:12deg}
[dir="rtl"] .cta-group:hover .logo-stack img:nth-child(2){translate:-46px -40px;rotate:-6deg}
[dir="rtl"] .cta-group:hover .logo-stack img:nth-child(3){translate:-74px -34px;rotate:-16deg}
/* the header mark's avatar peeks toward the page, not into the sidebar */
[dir="rtl"] .mark-peek{left:auto;right:8px}
[dir="rtl"] .mark:hover .mark-peek{translate:-30px -14px;rotate:-8deg}
/* tables (education): first column on the right, the last one flush with the left edge */
[dir="rtl"] th{text-align:right;padding:0 0 8px 16px}
[dir="rtl"] td{padding:13px 0 13px 16px}
[dir="rtl"] td:last-child,[dir="rtl"] th:last-child{padding-left:0;text-align:left}
/* the stack game's score sits at the far end of the mission bar */
[dir="rtl"] .hud-score{margin-left:0;margin-right:auto}
[dir="rtl"] .xp-pop{right:auto;left:0}
/* hover previews open on the free side of the list (the left) */
[dir="rtl"] .peek,[dir="rtl"] .co-peek{left:auto;right:calc(100% + clamp(28px,4vw,64px))}
[dir="rtl"] .peek-back::before,[dir="rtl"] .f-back::before{left:auto;right:0}
[dir="rtl"] .wc-go{margin:0 0 4px 4px;transform:scaleX(-1)}
[dir="rtl"] .work-card:hover .wc-go{transform:scaleX(-1) translateX(3px)}
[dir="rtl"] .wc-text{padding-left:0;padding-right:4px}
[dir="rtl"] .c-back svg{transform:scaleX(-1)}
/* the case drawer comes in from the end side (the left) */
html[dir="rtl"] .sheet{right:auto;left:0;transform:translateX(-100%);box-shadow:30px 0 70px -30px rgba(0,0,0,.7),-48px 0 0 0 var(--surface)}
html[dir="rtl"].is-open .sheet{transform:translateX(0)}
html[dir="rtl"].is-peek .sheet{transform:translateX(-36px)}
/* testimonials: the fade is on the end side */
[dir="rtl"] .tm-viewport{-webkit-mask-image:linear-gradient(270deg,#000 85%,transparent);mask-image:linear-gradient(270deg,#000 85%,transparent)}
[dir="rtl"] .tm-card:hover{rotate:.6deg}
/* the photo strip is pictures, not text: the whole strip (box and track) stays left-to-right, so the track starts at the
   left edge with its copies running past the right one; in Arabic the drift runs to the right (see index.html) */
[dir="rtl"] .ticker{direction:ltr}
/* dialogs close from the top-left corner */
[dir="rtl"] .lb-close{right:auto;left:clamp(14px,2.4vw,24px)}
[dir="rtl"] .close-reel{right:auto;left:var(--gutter)}
[dir="rtl"] .rp-x{right:auto;left:12px}
[dir="rtl"] .slot-label.reel{left:auto;right:20px}
/* media controls stay left-to-right in Arabic (play on the left, the bar fills to the right) */
[dir="rtl"] .rp-bar{direction:ltr}
[dir="rtl"] .rp-keys{direction:rtl}

/* resume: job rows, bullets, the arrow nudge */
[dir="rtl"] .j-head{text-align:right;padding-right:0;padding-left:48px}
[dir="rtl"] .j-toggle{right:auto;left:0}
[dir="rtl"] .j-list li{padding-left:0;padding-right:16px}
[dir="rtl"] .j-list li::before{left:auto;right:0}
[dir="rtl"] .row-link:hover .r-go{translate:-3px -3px}

/* about: handles and the email read left-to-right, cut at their end */
[dir="rtl"] .find small{direction:ltr;text-align:right}