/* ==========================================================
   ENGLISH LANGUAGE LAYER
   Loaded after tokens.css + components.css, in place of
   lang-hi.css, on every /en/ page (bodyClass "english-home").

   Owns everything script-specific: the Latin font stack, the
   heading metrics, the reading measure, and the footer colour
   fixes that depend on the face. The shared component sheet
   (components.css) stays language-neutral.
   ========================================================== */

/* ---- Latin font stack -------------------------------------
   Spectral: a warm, literary humanist serif that sits next to
   Noto Serif Devanagari without a tonal jump. Inter Tight for
   body + UI (already loaded for the Hindi site's Latin runs). */
:root {
    --font-head:  "Spectral", Georgia, "Times New Roman", serif;
    --font-body:  "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
    /* legacy aliases resolve through the two above */
    --hi-serif:   var(--font-head);
    --hi-sans:    var(--font-body);
}

body.english-home {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
}

/* Latin headings read tighter than Devanagari — no shirorekha to
   clear, so the loose 1.3 the Hindi layer needs would look gappy.
   Zero-specificity net; every real component rule still wins. */
:where(.english-home h1, .english-home h2, .english-home h3) {
    line-height: 1.18;
}
:where(.english-home h4, .english-home h5, .english-home h6) {
    line-height: 1.3;
}

/* Spectral takes a hair of negative tracking well at display sizes;
   the Hindi layer forbids it (it collapses the matras). */
.english-home h1,
.english-home h2 {
    letter-spacing: -0.011em;
    text-wrap: balance;
}
.english-home h3 {
    text-wrap: balance;
}

/* Cap the reading measure on full-width long-form prose. In the
   two-column layouts the column is already narrower than this. */
.english-home .hi-prose > p,
.english-home .hi-prose > ul,
.english-home .hi-prose > ol {
    max-width: 70ch;
}

/* Full-width prose rows are the deliberate exception to the cap above --
   these blocks are designed to span the whole section, not sit in a
   narrow reading column. Add a wrapper class here (rather than a
   one-off max-width override in a page's own stylesheet) whenever a
   new full-width prose block is introduced. */
.english-home :is(.v3-intro-tail, .hi-narrative__full).hi-prose > p {
    max-width: none;
}

/* The page stylesheets set prose leading for Devanagari (1.85–1.95).
   A Latin face at that leading reads unfocused — pull it back across
   the shared prose-column families. Page CSS loads after this sheet,
   so the .english-home prefix carries the specificity to win. Genuinely
   page-specific tuning goes in a small `.english-home` block at the
   foot of that page's own stylesheet. */
.english-home :is(
    .hi-prose,
    [class$="-copy"],
    [class$="__copy"],
    [class$="__intro"],
    [class$="__body"],
    [class$="__text"],
    [class$="-closing"],
    [class$="__note"]
) p {
    line-height: 1.72;
}

/* Tabular numerals for figure-heavy runs (stats, tables, years). */
.english-home .num {
    font-variant-numeric: tabular-nums;
}

/* The footer sits on a dark maroon ground; the shared heading
   colour (var(--hi-ink)) is near-invisible there. Mirrors the
   Hindi layer. */
.english-home .footer .footer-title {
    color: #fffaf1;
}
.english-home .footer h2,
.english-home .footer h3 {
    color: #f3ecdd;
}
.english-home .footer .footer-link-group h3,
.english-home .footer .footer-contact h3 {
    color: #d9b466;
    font-family: var(--font-body);
    letter-spacing: 0.08em;
}