/* ============================================
   English-specific overrides
   Load this AFTER style-universal.css
   ============================================ */

:root{
  --font-body: 'Cairo', sans-serif;
}

body{
  line-height: 1.6;
}

.site-nav a{
  font-weight: 700; /* Cairo's Latin glyphs read lighter than its Arabic
                        glyphs at the same weight, so English nav needs a
                        heavier weight to look visually equivalent */
}

.hero::before{
  background: linear-gradient(
    to right,
    rgba(7,30,55,0.95) 0%,
    rgba(7,30,55,0.85) 35%,
    rgba(7,30,55,0.35) 65%,
    rgba(7,30,55,0) 100%
  );
}

/* Below 900px the layout is a single narrow column, so a left-to-right
   fade no longer means anything — swap to a top-down scrim instead.
   This MUST live here (after the rule above, in this same file) rather
   than in style-universal.css: both rules target .hero::before with
   equal specificity, and since this file loads after universal.css,
   an unconditional rule in universal would never win the tie at any
   width — only a later rule in this same cascade can override it. */
@media (max-width: 900px){
  .hero::before{
    background: linear-gradient(180deg, rgba(7,30,55,0.92) 0%, rgba(7,30,55,0.78) 55%, rgba(7,30,55,0.6) 100%);
  }
}

.page-intro::before{
  background: linear-gradient(
    to right,
    rgba(7,30,55,0.95) 0%,
    rgba(7,30,55,0.85) 35%,
    rgba(7,30,55,0.35) 65%,
    rgba(7,30,55,0) 100%
  );
}
@media (max-width: 900px){
  .page-intro::before{
    background: linear-gradient(180deg, rgba(7,30,55,0.92) 0%, rgba(7,30,55,0.78) 55%, rgba(7,30,55,0.6) 100%);
  }
}