/* ---------- Dotted word ----------------------------------------------------
   One word set as a field of dots, sitting across the foot of a section. The
   same treatment as the dark hero's standard name, but standalone and tone-
   agnostic: the colour comes from --dotword-rgb so a white section can carry it.

   Decoration. The canvas is created by CSS-sized box and painted by dotword.js,
   so there is nothing to see — and nothing to read out — without scripts. */
.dotword{
  position:relative;width:100%;pointer-events:none;
  height:clamp(5rem,13vw,13rem);
  --dotword-rgb:0,113,188;
  --dotword-alpha:.34;
}
.dotword__cv{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Below the width where the dots can be dense enough to read, the word is simply
   not drawn — a blurred smear of dots is worse than no ghost at all. */
@media (max-width:64em){ .dotword{display:none} }