/* Change 12 / 18: one type system; all sizes scale with the reader's font size. */
:root {
  --font-en: "Noto Sans", Arial, system-ui, sans-serif;
  --font-ar: "Noto Sans Arabic", "Noto Sans", Tahoma, Arial, sans-serif;
  --font: var(--font-en);
  --type-hero: 3.5rem;
  --leading-hero: 4rem;
  --type-page: 2.5rem;
  --leading-page: 3rem;
  --type-section: 2rem;
  --leading-section: 2.5rem;
  --type-subsection: 1.5rem;
  --leading-subsection: 2rem;
  --type-card: 1.25rem;
  --leading-card: 1.75rem;
  --type-body: 1.125rem;
  --leading-body: 1.75rem;
  --type-support: 1rem;
  --leading-support: 1.5rem;
  --type-label: .875rem;
  --leading-label: 1.25rem;
  --type-control: 1rem;
  --leading-control: 1.5rem;
  --type-essential: 1rem;
  --leading-essential: 1.5rem;
}

html { font-synthesis: none; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); font-size: var(--type-body); line-height: var(--leading-body); font-weight: 400; }
button, input, select, textarea { font-family: inherit; }
strong, b, h1, h2, h3, h4 { font-weight: 700; }
h1, h2, h3, h4, p, li, a, button, span, label { letter-spacing: 0; }

/* Semantic levels stay independent of their visual roles. */
h1, .page-hero h1 { font-size: var(--type-page); line-height: var(--leading-page); }
.hero h1 { font-size: var(--type-hero); line-height: var(--leading-hero); }
h2, .sectionintro h2, .contact-info h2, .evidencefeature h2 {
  font-size: var(--type-section); line-height: var(--leading-section);
}
h3,
.why-header h3,
.library-cta h2 {
  font-size: var(--type-subsection); line-height: var(--leading-subsection);
}
h4,
.card h3,
.serviceoffer h3,
.library-card h3,
.project-card h3,
.blog-card h3,
.why-item h4 {
  font-size: var(--type-card); line-height: var(--leading-card);
}

.hero__lead,
.page-hero__lead,
.section-intro,
.library-intro p,
.serviceoffer > p,
.project-card__summary,
.blog-card > p,
.contact-info > p,
.card > p,
.why-item p {
  font-size: var(--type-body); line-height: var(--leading-body);
}
.project-card__play-note, .footer__tagline, .footer__copy {
  font-size: var(--type-support); line-height: var(--leading-support);
}

/* Scope, instructions, form messages and service information never use small type. */
.service-meta__item p,
.project-card__detail span,
.project-card__poster-caption,
.blog-card__takeaway,
.form-note,
.form-error,
.form-context {
  font-size: var(--type-essential); line-height: var(--leading-essential);
}
.eyebrow,
.section-label,
.page-hero__eyebrow,
.service-meta__label,
.contact-detail__label,
.form-row label,
.project-card__index,
.project-card__type,
.project-card__detail strong,
.blog-card__meta,
.about-badge__title,
.about-badge__label,
.form-context__label {
  font-size: var(--type-label); line-height: var(--leading-label); font-weight: 700;
}
.btn, .nav__cta, .language-switch button {
  font-size: var(--type-control); line-height: var(--leading-control); font-weight: 700;
}
.nav__menu a { font-size: var(--type-label); line-height: var(--leading-label); font-weight: 700; }
.nav__menu .nav__cta { font-size: var(--type-control); line-height: var(--leading-control); }
.form-row input, .form-row select, .form-row textarea {
  font-size: var(--type-control); line-height: var(--leading-control); font-weight: 400;
}
.language-switch button[lang="en"] { font-family: var(--font-en); }
.language-switch button[lang="ar"] { font-family: var(--font-ar); }

/* Reading measure follows the font, rather than imposing text-container heights. */
.sectionintro, .hero__lead, .page-hero__lead, .about-copy, .contact-info > p { max-inline-size: 72ch; }
.hero h1 { max-inline-size: 22ch; }
.library-card p, .blog-card p, .project-card__summary { max-inline-size: 72ch; }

@media (max-width: 48rem) {
  :root {
    --type-hero: 2.25rem; --leading-hero: 2.75rem;
    --type-page: 2rem; --leading-page: 2.5rem;
    --type-section: 1.75rem; --leading-section: 2.25rem;
    --type-body: 1rem; --leading-body: 1.5rem;
    --type-support: .875rem; --leading-support: 1.375rem;
  }
}

/* Arabic keeps natural joining and uses generous leading at every heading level. */
html[lang="ar"] {
  --font: var(--font-ar);
  --type-body: 1.125rem; --leading-body: 2rem;
  --type-essential: 1.125rem; --leading-essential: 2rem;
  --leading-hero: calc(var(--type-hero) * 1.5);
  --leading-page: calc(var(--type-page) * 1.5);
  --leading-section: calc(var(--type-section) * 1.5);
  --leading-subsection: calc(var(--type-subsection) * 1.5);
  --leading-card: calc(var(--type-card) * 1.5);
  --leading-label: 1.5rem;
  --leading-control: 1.75rem;
}
html[lang="ar"] :is(h1,h2,h3,h4,p,span,strong,label,a,button,input,select,textarea,li) {
  letter-spacing: 0;
}
html[lang="ar"] :is(.form-row input,.form-row select,.form-row textarea) {
  font-size: 1.125rem; line-height: 2rem;
}