/* Hexagon texture: a faint honeycomb of thin blue lines, like a molecule diagram. Always faded out at its edges,
   never a flat fill. Place and size it in the section that uses it (its parent needs position: relative);
   change the fade there with --hex-fade if the default (strongest in the middle) doesn't fit.

   <div class="hex" aria-hidden="true"></div> */

.hex {
  position: absolute;
  pointer-events: none;
  background-color: var(--c-hex);
  /* the lines' shape, cut down by the fade: only where both show is drawn */
  mask-image: var(--hex-tile), var(--hex-fade);
  mask-size: var(--hex-size), 100% 100%;
  mask-repeat: repeat, no-repeat;
  mask-composite: intersect;
}