/* Reading direction follows the language; engineering coordinates remain LTR. */
.language-btn { font-family:'Inter',sans-serif; font-size:.76rem; font-weight:650; letter-spacing:.02em; }
.language-btn[hidden] { display:none; }
.header-tools { flex-shrink:0; }
.menu-btn { justify-content:center; }
#project-dialog { overflow-anchor:none; scroll-behavior:auto; }
.brand { min-width:0; }
.nav { gap:clamp(12px,1.65vw,26px); }
.vignette-picture,.file-drawing,.dialog-visual { direction:ltr; }
.vignette-picture svg { direction:ltr; }
.vignette-picture svg text { unicode-bidi:plaintext; }
.model-fields output,.model-readings output { direction:ltr; unicode-bidi:isolate; display:inline-block; }
.model-fields input[type="range"] { direction:ltr; }
.contact-list a { direction:ltr; unicode-bidi:isolate; display:inline-block; }
.short-latin { white-space:nowrap; }
.scene-phase { margin-inline-start:auto; margin-inline-end:0; }

html[lang="ar"] {
  --font-display:'Noto Sans Arabic',sans-serif;
  --font-body:'Noto Sans Arabic',sans-serif;
  --font-mono:'Noto Sans Arabic',sans-serif;
}
html[lang="ar"] :is(h1,h2,h3,h4,.mono,.file-paper h3,.brand-name) { letter-spacing:0; text-transform:none; }
html[lang="ar"] :is(p,li,dd) { line-height:1.9; }
html[lang="ar"] :is(.section-title,.dialog-content h2) { line-height:1.5; }
html[lang="ar"] .hero-name { line-height:1.3; }
html[lang="ar"] .hero-role { font-size:.84rem; line-height:1.9; }
html[lang="ar"] .hero-lede { line-height:1.9; }
html[lang="ar"] .hero-facts { gap:18px; }
html[lang="ar"] .hero-facts dt { font-size:.76rem; }
html[lang="ar"] .hero-facts dd { font-size:.78rem; line-height:1.8; }
html[lang="ar"] .section-marker { border-left:0; border-right:1px solid var(--line-2); padding-left:0; padding-right:1rem; }
html[lang="ar"] .section-marker .mono { font-size:.78rem; }
html[lang="ar"] .profile-layout .prose p { text-align-last:start; hyphens:none; line-height:1.95; }
html[lang="ar"] .education :is(dt,dd) { line-height:1.9; }
html[lang="ar"] .education > h3 { font-size:.85rem; }

/* Arabic justified text — desktop only, natural last-line alignment */
@media (min-width: 961px) {
  html[lang="ar"] .profile-layout .prose p,
  html[lang="ar"] .tl-list li,
  html[lang="ar"] .project-postscript > div > p:not(.drawing-title),
  html[lang="ar"] .dialog-content p {
    text-align: justify;
    text-align-last: start;
    hyphens: none;
  }
}

html[lang="ar"] .timeline { padding-left:0; padding-right:2rem; }
html[lang="ar"] .timeline::before { left:auto; right:6px; }
html[lang="ar"] .tl-marker { left:auto; right:-2rem; }
html[lang="ar"] .tl-list li { padding-left:0; padding-right:1.15rem; }
html[lang="ar"] .tl-list li::before { left:auto; right:0; }
html[lang="ar"] .tl-meta { font-size:.8rem; }
html[lang="ar"] .tl-role { line-height:1.7; }
html[lang="ar"] .tl-org { font-size:.85rem; }
html[lang="ar"] .spec-group { font-size:.85rem; }
html[lang="ar"] .spec-row { transition:background var(--dur) ease,padding-right var(--dur) var(--ease); }
html[lang="ar"] .spec-row:hover { padding-left:0; padding-right:1rem; }
html[lang="ar"] .spec-row dd { font-size:.87rem; }
html[lang="ar"] .drawing-title { font-size:.78rem; line-height:1.9; }
html[lang="ar"] .scene-actions button { font-size:.85rem; }
html[lang="ar"] .scene-phase { margin-left:0; font-size:.82rem; }
html[lang="ar"] .scene-model summary { font-size:.85rem; }
html[lang="ar"] .model-fields label { font-size:.88rem; line-height:1.8; }
html[lang="ar"] .model-fields select { line-height:1.7; }
html[lang="ar"] .model-readings dt { font-size:.76rem; }
html[lang="ar"] .model-note { font-size:.86rem; }
html[lang="ar"] .model-feedback { font-size:.82rem; }
html[lang="ar"] .vignette-picture svg text { font-family:'JetBrains Mono','Noto Sans Arabic',sans-serif; }
html[lang="ar"] .vignette-picture svg .scene-callout-text { font-family:'Noto Sans Arabic',sans-serif; font-size:12px; }
html[lang="ar"] .force-key { font-size:.8rem; }
html[lang="ar"] .project-deck { height:535px; }
html[lang="ar"] .project-file { translate:calc(-50% - var(--x)) var(--y); rotate:calc(-1 * var(--r)); height:420px; }
html[lang="ar"] .project-file::before { left:auto; right:-1px; transform:scaleX(-1); }
html[lang="ar"] .file-tab { left:auto; right:11px; font-size:.69rem; }
html[lang="ar"] .file-paper { height:402px; }
html[lang="ar"] .file-paper h3 { line-height:1.7; font-size:1rem; }
html[lang="ar"] .file-meta { font-size:.65rem; flex-wrap:wrap; }
html[lang="ar"] .file-drawing { height:105px; }
html[lang="ar"] .file-paper > p { font-size:.8rem; line-height:1.8; }
html[lang="ar"] .open-project { font-size:.79rem; }
html[lang="ar"] .open-project > span:last-child { transform:scaleX(-1); }
html[lang="ar"] .deck-hint { font-size:.78rem; }
html[lang="ar"] .contact-list dt { font-size:.79rem; }
html[lang="ar"] .contact-note > p:first-child { line-height:1.9; }
html[lang="ar"] .contact-languages { font-size:.81rem; }
html[lang="ar"] .field label { left:auto; right:0; font-size:.78rem; }
html[lang="ar"] .field { padding-top:1.8rem; }
html[lang="ar"] .dialog-content :is(h3,p) { line-height:1.9; }
html[lang="ar"] .dialog-content article > p:first-of-type { font-size:.79rem; }
html[lang="ar"] .dialog-content ul { padding-left:0; padding-right:1.3em; }
html[lang="ar"] .footer-brand { font-size:.79rem; line-height:1.9; }
html[lang="ar"] .scroll-progress { transform-origin:right; }
html[lang="ar"] .skip-link { left:auto; right:20px; }

/* ── AR layout for the new drills gallery ── */
html[lang="ar"] .shoe-vignette .scene-actions,
html[lang="ar"] .jacking-vignette .scene-actions,
html[lang="ar"] .clash-vignette .scene-actions { gap:0 18px; }

html[lang="ar"] .shoe-vignette .scene-phase,
html[lang="ar"] .jacking-vignette .scene-phase,
html[lang="ar"] .clash-vignette .scene-phase { font-size:.78rem; line-height:1.8; }

html[lang="ar"] .shoe-vignette .model-readings dt,
html[lang="ar"] .jacking-vignette .model-readings dt,
html[lang="ar"] .clash-vignette .model-readings dt { font-size:.74rem; }

html[lang="ar"] .shoe-vignette #shoe-expansion,
html[lang="ar"] .shoe-vignette #shoe-anchor-load,
html[lang="ar"] .jacking-vignette #jack-gap,
html[lang="ar"] .jacking-vignette #jack-load,
html[lang="ar"] .clash-vignette #clash-clearance,
html[lang="ar"] .clash-vignette #clash-status { unicode-bidi:plaintext; }

@media (max-width:1100px) and (min-width:961px) {
  .nav { gap:12px; }
  .nav-link { font-size:.76rem; }
  .brand-name { font-size:.85rem; }
}

/* Mobile: reset any forced-height education stack, keep natural RTL flow */
@media (max-width:960px) {
  html[lang="ar"] .education { display:block; }
  html[lang="ar"] .education > dl { display:grid; height:auto; gap:22px; align-content:normal; }
  html[lang="ar"] .section-marker { border-right:0; padding-right:0; }
  html[lang="ar"] .drills-grid { grid-template-columns:1fr; }
}

@media (max-width:720px) {
  html[lang="ar"] .hero-name { font-size:clamp(3.5rem,13vw,5rem); }
  html[lang="ar"] .project-deck { height:auto; }
  html[lang="ar"] .project-file { translate:none; rotate:none; height:auto; }
  html[lang="ar"] .file-paper { height:auto; min-height:402px; }
  html[lang="ar"] .file-paper > p { display:block; -webkit-line-clamp:unset; }
  html[lang="ar"] .scene-phase { margin-inline-start:0; }
  html[lang="ar"] .section-title { font-size:clamp(1.85rem,7vw,2.5rem); }
}