/* Malayalam (left to right) mirrors of the study pages under /ml/, generated by site/build-pages.py.
   Loaded after app.css and pages.css; only the Malayalam pages link it. /web/** is cached as immutable, so bump
   ML_CSS_V in build-pages.py whenever this file changes. */

/* Noto Sans Malayalam for Malayalam; Latin letters and digits stay in Plus Jakarta Sans. Until the web font arrives
   (it loads once the page is idle) the system Malayalam font is used. Malayalam has tall stacked conjuncts and vowel
   signs above and below the letters, so lines need clearly more height than Latin. */
/* The system Malayalam font on macOS and iOS (Malayalam Sangam MN) is about 16% narrower than Noto Sans Malayalam
   (29% in bold), so when the web font arrives the text rewraps and the page jumps (Lighthouse CLS 0.071). These
   faces scale the system font to Noto's widths (measured over the chapter 1 text: 400 x1.1625, 600 x1.242, 700 x1.290),
   so the swap keeps the same line breaks. Where the font is not installed the face is skipped. */
@font-face { font-family: "Noto Sans Malayalam Fallback"; src: local("Malayalam Sangam MN"), local("MalayalamSangamMN"); font-weight: 100 550; size-adjust: 116.25%; }
@font-face { font-family: "Noto Sans Malayalam Fallback"; src: local("Malayalam Sangam MN Bold"), local("MalayalamSangamMN-Bold"); font-weight: 551 650; size-adjust: 124.2%; }
@font-face { font-family: "Noto Sans Malayalam Fallback"; src: local("Malayalam Sangam MN Bold"), local("MalayalamSangamMN-Bold"); font-weight: 651 900; size-adjust: 129%; }
html[lang="ml"] body { font-family: "Plus Jakarta Sans", "Noto Sans Malayalam", "Noto Sans Malayalam Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.75; }
/* any letter-spacing pulls conjuncts and vowel signs apart */
html[lang="ml"] h1, html[lang="ml"] h2, html[lang="ml"] h3, html[lang="ml"] .eyebrow, html[lang="ml"] .logo-text small { letter-spacing: 0; }
html[lang="ml"] h1, html[lang="ml"] h2, html[lang="ml"] h3 { line-height: 1.5; }
html[lang="ml"] .page-hero h1 { line-height: 1.45; }
html[lang="ml"] .eyebrow { font-size: 13px; font-weight: 700; }
html[lang="ml"] .logo-text { line-height: 1.35; }
html[lang="ml"] .logo-text small { font-size: 11.5px; }
html[lang="ml"] .qa h3 { font-size: 17px; line-height: 1.7; }
html[lang="ml"] .sign h3 { line-height: 1.55; }
html[lang="ml"] .btn { line-height: 1.5; }
/* long Malayalam words (agglutinated) must wrap rather than push the page sideways */
html[lang="ml"] main { overflow-wrap: break-word; }

/* English pieces inside a Malayalam page: a fallback question, the Manglish line */
html[lang="ml"] [lang="en"], html[lang="ml"] [lang="ml-Latn"] { line-height: 1.55; }
.page-hero .roman { margin: 10px 0 0; font-size: 14px; color: var(--muted); }

@media (max-width: 600px) {
  html[lang="ml"] .page-hero h1 { font-size: 23px; }
  html[lang="ml"] .lang-switch { font-size: 13px !important; }
}