Note

Quite proud of this sweeping bottom arc on a site hero I'm working on. A.k.a flagrant misuse of the css ::before selector.

I also used a nice ":has" selector so that if the header is followed by a hero it positions it absolutely and shrinks it in so the image bleeds up.

/* style the header when followed by a hero */
header:has(+ .hero) { ... }

/* style the hero when following a header */
header + .hero { ... }