/* Persian (RTL) layer for the portfolio. Loaded after site.css / the home page styles. */
@counter-style fa-pad{system:numeric;symbols:"۰" "۱" "۲" "۳" "۴" "۵" "۶" "۷" "۸" "۹";pad:2 "۰"}

:root{--fa-body:'Inter Tight','Vazirmatn',system-ui,sans-serif;--fa-display:'Vazirmatn','Inter Tight',system-ui,sans-serif}
html[lang=fa] body{font-family:var(--fa-body);font-size:18px;line-height:1.9}
/* Persian letters must stay joined: no tracking, no uppercase, no italics */
html[lang=fa] *{letter-spacing:0!important;text-transform:none!important}
html[lang=fa] .it,html[lang=fa] em{font-style:normal}

/* display type */
html[lang=fa] .serif,html[lang=fa] .sec > h2,html[lang=fa] .dec h3,html[lang=fa] .body > p.big,html[lang=fa] .learn blockquote,html[lang=fa] .next .t{font-family:var(--fa-display);font-weight:800}
html[lang=fa] .hero h1{font-size:clamp(34px,5.1vw,76px);line-height:1.5;font-weight:800;max-width:1180px;text-wrap:pretty}
html[lang=fa] .head h2{font-size:clamp(34px,3.8vw,54px);line-height:1.35}
html[lang=fa] .head h2 sup{margin:0 8px 0 0;font-family:var(--fa-body);font-weight:500}
html[lang=fa] .head p,html[lang=fa] .hero-foot p{line-height:1.9}
html[lang=fa] .hero-foot p{font-size:19px}
html[lang=fa] .names .serif{font-size:26px;line-height:1.3;font-weight:700}
html[lang=fa] .names span:first-child{margin:0 0 0 8px}
html[lang=fa] .list .t{font-size:26px;line-height:1.5;font-weight:700}
html[lang=fa] .list .k{text-align:left}
html[lang=fa] .approach h3{font-size:19px;line-height:1.6}
html[lang=fa] .approach p{line-height:1.85}
html[lang=fa] .about .big{font-size:clamp(26px,2.8vw,40px);line-height:1.6;font-weight:800}
html[lang=fa] .about .body{line-height:1.95}
html[lang=fa] .cs-head h1{font-size:clamp(46px,7vw,104px);line-height:1.3}
html[lang=fa] .lede{font-size:clamp(18px,1.8vw,23px);line-height:1.9}
html[lang=fa] .eyebrow{font-size:15px}
html[lang=fa] .body > p{line-height:1.95}
html[lang=fa] .body > p.big{font-size:clamp(24px,2.6vw,34px);line-height:1.65}
html[lang=fa] .dec h3{font-size:23px;line-height:1.6;font-weight:700}
html[lang=fa] .dec p,html[lang=fa] .card p{line-height:1.9}
html[lang=fa] .card h3{line-height:1.6}
html[lang=fa] .learn blockquote{font-size:21px;line-height:1.8;font-weight:600}
html[lang=fa] .next .t{font-size:clamp(34px,5.2vw,78px);line-height:1.4}
html[lang=fa] .next .t em{font-family:var(--fa-body);font-weight:500}
html[lang=fa] .end h2{font-size:clamp(38px,5.2vw,78px);line-height:1.45}
html[lang=fa] .end .pitch{line-height:1.95}
html[lang=fa] .sec > h2{font-size:16px;font-weight:700}
html[lang=fa] .viz .lab{font-size:13px}
html[lang=fa] .tag,html[lang=fa] .st,html[lang=fa] .groups li{line-height:1.7}
html[lang=fa] .cv .s{line-height:1.85}
html[lang=fa] .cap{line-height:1.8}
html[lang=fa] .dl{line-height:1.8}

/* physical properties that must mirror */
html[lang=fa] .nav nav a:not(.btn):after{transform-origin:right}
html[lang=fa] .steps > div{padding:16px 0 16px 16px}
html[lang=fa] .steps > div:before{content:counter(s,fa-pad)}
html[lang=fa] .badge{right:auto;left:-28px}
html[lang=fa] .go{right:auto;left:8%}
html[lang=fa] .bottom div:last-child{text-align:left}

/* device mockups and URL bars are drawings, not text flow: keep them left-to-right */
html[lang=fa] .cover,html[lang=fa] .cs-cover,html[lang=fa] .stage,html[lang=fa] .win,html[lang=fa] .frame,html[lang=fa] .phone,html[lang=fa] .mob{direction:ltr}
html[lang=fa] .win .url,html[lang=fa] .frame .bar span{margin:0 0 0 12px}
html[lang=fa] .chip.toggle{direction:ltr}

@media (max-width:620px){
  html[lang=fa] body{font-size:17px}
  html[lang=fa] .hero h1{font-size:clamp(30px,8.4vw,40px);line-height:1.55}
  html[lang=fa] .badge{right:auto;left:-8px}
  html[lang=fa] .go{right:auto;left:4%}
  html[lang=fa] .bottom div:last-child{text-align:right}
  html[lang=fa] .names .serif{font-size:22px}
  html[lang=fa] .cs-head h1{font-size:clamp(42px,13vw,64px)}
  html[lang=fa] .next .t{font-size:clamp(34px,10vw,52px)}
  html[lang=fa] .end h2{font-size:clamp(34px,10vw,52px)}
}

/* CV rows: wider date column so Persian date ranges stay on one line */
html[lang=fa] .cv li{grid-template-columns:190px 1fr}
html[lang=fa] .cv .y{line-height:1.7}
@media (max-width:620px){html[lang=fa] .cv li{grid-template-columns:1fr;gap:4px}}