/* The Expert Insights band background, on the homepage banner (section.usp).
   The same as the Insights page: a still maroon picture with its grain built
   in, laid on the masthead's maroon, its top edge fading in from that
   maroon so the masthead and the banner read as one surface. Background
   only: the banner's content is untouched and stays on top (it sits in
   .usp .wrap, which already has position:relative and z-index:2).
   Link this after css/main.css. */
.usp{position:relative;isolation:isolate;overflow:hidden;background:#4E041E}
.usp::before{content:"";position:absolute;inset:0 0 -6px;z-index:-1;pointer-events:none;
  background:url(/img/band/band-wide.jpg) 50% 0/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 140px);mask-image:linear-gradient(180deg,transparent 0,#000 140px)}
/* phones: the taller frame, and a shorter fade */
@media (max-width:720px){
  .usp::before{background-image:url(/img/band/band-tall.jpg);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 90px);mask-image:linear-gradient(180deg,transparent 0,#000 90px)}
}