/* English layer — Dorra's own Latin pairing over the shared identity.
   Direction is handled by logical properties in styles.css, so this file
   only has to deal with type and the few places Arabic set a tighter measure. */

:root {
  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Montserrat', system-ui, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
}

body { line-height: 1.65; }

h1, h2, h3, h4 { letter-spacing: -0.005em; }

/* English runs longer than Arabic at the same point size. */
.section-title { font-size: clamp(1.5rem, 2.7vw, 2rem); }
.hero h1 { letter-spacing: 0.06em; text-transform: uppercase; font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.hero-subtitle { font-size: 1rem; }

.feature-list li { font-size: 0.88rem; line-height: 1.65; }
.stat-card .number { font-size: 1.35rem; letter-spacing: -0.02em; }
.stat-card .label { font-size: 0.76rem; }
.module-card h4 { font-size: 0.82rem; }
.gantt-bar { font-size: 0.7rem; }
.gantt-phase-label { font-size: 0.78rem; }
.gantt-header span { font-size: 0.72rem; }
.screenshot-caption { font-size: 0.76rem; }

/* Mermaid diagrams carry Arabic node labels in the Arabic deck; here they are Latin. */
.diagram-container .mermaid { font-family: var(--font-body); }

@media (max-width: 768px) {
  .nav-right { gap: 10px; }
}