/* Spectra: hero light. Shared by the hero backgrounds drawn by js/hero-light.js.
   The canvas sits behind the headline, inside the hero only, and never takes a pointer event.
   Put class "hl-host" on the hero (or supply position/overflow/isolation yourself). touch-action:pan-y pinch-zoom keeps
   vertical scrolling and pinch free on a phone and switches double-tap zoom off. */
.hl-host{-webkit-tap-highlight-color:transparent;position:relative;touch-action:pan-y pinch-zoom}   /* overflow stays visible and the host is not isolated: the full-bleed canvas is added to the page with mix-blend-mode:screen, so its black adds nothing and nothing below the hero is dimmed */
/* Full-bleed: js/hero-light.js sets left/top/width/height inline (viewport width, from the top of the page to ~one screen,
   behind the header). The mask is the only edge: none at the sides or top, a long fade to black at the bottom. */
.hl-canvas{--hl-fade:linear-gradient(#000 0,#000 36%,rgba(0,0,0,.92) 46%,rgba(0,0,0,.74) 56%,rgba(0,0,0,.5) 66%,rgba(0,0,0,.28) 76%,rgba(0,0,0,.1) 88%,transparent 100%);position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;mix-blend-mode:screen;display:block;pointer-events:none;touch-action:pan-y pinch-zoom;
  -webkit-mask-image:var(--hl-fade);mask-image:var(--hl-fade)}