/* language switch — "EN / ع", current language in black with a line under it */
.lang{grid-column:3;justify-self:end;display:inline-flex;align-items:center;direction:ltr;font-family:'Unbounded',sans-serif;font-size:12px;font-weight:500;line-height:1;letter-spacing:.04em;user-select:none}
.lang span{height:32px;display:grid;place-items:center;padding:0 6px;color:#6d6d68;background:linear-gradient(currentColor,currentColor) no-repeat 50% 100%/0 1.5px;transition:color .3s,background-size .4s cubic-bezier(.2,.8,.2,1)}
.lang .lg-ar{font-family:var(--ar-display,'IBM Plex Sans Arabic'),sans-serif;font-size:15px;font-weight:600;letter-spacing:0;padding-bottom:7px}
.lang::before{content:"/";order:1;color:#c4c4bf;padding:0 4px}
.lang .lg-ar{order:2}
html:not([lang=ar]) .lang .lg-en,html[lang=ar] .lang .lg-ar,.lang:hover span{color:var(--ink,#0a0a0a)}
html:not([lang=ar]) .lang .lg-en,html[lang=ar] .lang .lg-ar{background-size:calc(100% - 12px) 1.5px}
.lang:focus-visible{outline:2px solid var(--ink,#0a0a0a);outline-offset:3px;border-radius:6px}

/* project pages: switch sits next to the back button */
.nav-r{display:flex;align-items:center;gap:14px}
@media (max-width:700px){.nav-r .back-btn{padding:9px 13px}}