/* Homepage hero scrim. Linked after the inlined hero rules so it wins
   on every slide, including Lisbon.

   Legibility-first, colour-neutral: pure black alpha (no green tint,
   so the photography keeps its hue and saturation). A left-to-right
   gradient sits strongest behind the text side (55% easing to 15%),
   a bottom gradient (52% easing to nothing) backs the headline and
   controls, and a short top band keeps the nav readable. Tuned so
   white type passes WCAG AA on every slide.

   Below 1024px the type runs across the frame, so the bottom gradient
   deepens (68% easing to nothing) under the same top band. */

#hero .shade::before,
#hero .shade::after{
  content:none;
  background:none;
  -webkit-mask-image:none;
  mask-image:none;
}

#hero .shade{
  background:
    linear-gradient(180deg, rgba(0,0,0,.32) 0, rgba(0,0,0,0) 150px),
    linear-gradient(0deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.28) 30%, rgba(0,0,0,0) 55%),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.34) 45%, rgba(0,0,0,.15) 100%);
}

@media (max-width:1023px){
  #hero .shade{
    background:
      linear-gradient(180deg, rgba(0,0,0,.30) 0, rgba(0,0,0,0) 150px),
      linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.48) 38%, rgba(0,0,0,.22) 62%, rgba(0,0,0,0) 82%);
  }
}