/* Light: the canvas heroes_light.js adds inside an opening's photograph layer. It sits on the picture and under the
   photograph's own fades (.bleed::after, z-index 2) and the scrims, and holds only a grey gain map that its blend
   mode (set by the script) applies to the photo under it. Decorative: no pointer events, nothing laid out round it. */
main > header.hero[data-hl] .bleed > canvas.hl-light {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  main > header.hero[data-hl] .bleed > canvas.hl-light { display: none; }
}
html[data-solva-motion="paused"] main > header.hero[data-hl] .bleed > canvas.hl-light,
body[data-solva-quiet="true"] main > header.hero[data-hl] .bleed > canvas.hl-light { display: none; }

/* Website design: the photograph's own sun, half behind the Colosseum's upper ring (photo px 1220, 240).
   On desktop the opening's crop (object-position 50% 45%) put the sun under the menu's fade, where it could not be
   seen; 50% 14% brings it down clear of it, still behind the ring, and keeps it well right of the headline. On a
   phone the crop already shows it. Its core is held to chalk (#F5F2EC), never pure white: a disc blended with
   multiply, chalk at the middle easing to white (no change) at its edge, scales the core's white down to chalk and
   keeps every step of the sun's own gradient (darken would clip it flat into a grey coin). It reaches 60 photo px
   out, so the stone beside the sun is touched by at most a few percent. Placed in photo px from the crop itself
   (container units), so it needs no script. */
main > header.hero[data-hl="website-design"] { --hl-px: .5; --hl-py: .45; }
@media (min-width: 701px) {
  main > header.hero[data-hl="website-design"] { --hl-py: .14; }
  main > header.hero[data-hl="website-design"] .bleed img { object-position: 50% 14% !important; }
}
main > header.hero[data-hl="website-design"] .bleed { container-type: size; }
main > header.hero[data-hl="website-design"] .bleed > .hl-chalk {
  --k: max(100cqw / 1920, 100cqh / 1200);
  position: absolute;
  z-index: 1;
  left: calc((100cqw - 1920 * var(--k)) * var(--hl-px) + (1220 - 60) * var(--k));
  top: calc((100cqh - 1200 * var(--k)) * var(--hl-py) + (240 - 60) * var(--k));
  width: calc(120 * var(--k));
  height: calc(120 * var(--k));
  border-radius: 50%;
  background: radial-gradient(closest-side, #F5F2EC 0, #F5F2EC 20%, #F8F6F2 45%, #FCFBF9 70%, #FFF 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Website design, 15 Oct (owner: the sun's movement must be seen): the left scrim is about 60 percent dark where the
   sun sits, which capped the sun at about 105 grey on screen. Round the sun only, the scrim thins on a soft radial
   falloff (to 35 percent of its strength at the sun, full again 190 px out), as the sun cutting through haze. The
   centre comes from heroes_light.js (--hl-sun-x/y, the crop's own sun position); without it the mask sits off
   screen and the scrim is as it was. The headline stays AA (measured at the brightest frame). */
main > header.hero[data-hl="website-design"] > .scrim.l {
  -webkit-mask-image: radial-gradient(circle 190px at var(--hl-sun-x, -999px) var(--hl-sun-y, -999px), rgb(0 0 0 / .35) 0, rgb(0 0 0 / .45) 25%, rgb(0 0 0 / .68) 55%, rgb(0 0 0 / .9) 80%, #000 100%);
  mask-image: radial-gradient(circle 190px at var(--hl-sun-x, -999px) var(--hl-sun-y, -999px), rgb(0 0 0 / .35) 0, rgb(0 0 0 / .45) 25%, rgb(0 0 0 / .68) 55%, rgb(0 0 0 / .9) 80%, #000 100%);
}