/* The data gap graphic. Colours come from --gv-fg and --gv-hot set by each design. */
[data-gap]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.2vw,32px)}
.gv{min-width:0}
.gv svg{width:100%;height:auto;display:block}
.gv-dot{fill:var(--gv-fg)}
.gv-frame{fill:none;stroke:var(--gv-fg);stroke-width:1.2;opacity:.4}
.gv-run{fill:none;stroke:var(--gv-fg);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0}
.gv-thick{stroke-width:2.2}
.gv-pen{fill:none;stroke:var(--gv-hot);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.gv figcaption{margin-top:12px}
.gv figcaption b,.gv figcaption span{display:block}

/* Before it scrolls into view. Only opacity and dash offsets, so it can never block layout. */
.gv-js [data-gap]:not(.go) .gv-dot{opacity:0}
.gv-js [data-gap]:not(.go) .gv-run,.gv-js [data-gap]:not(.go) .gv-pen{stroke-dashoffset:1}
.gv-js [data-gap].go .gv-dot{transition:opacity .12s linear;transition-delay:calc(var(--i) * 3.2ms)}
.gv-js [data-gap].go .gv-run{transition:stroke-dashoffset .9s ease-out;transition-delay:calc(var(--i) * 26ms)}
.gv-js [data-gap].go .gv-pen{transition:stroke-dashoffset .5s ease-out 1.5s}

@media (max-width:820px){
  [data-gap]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .gv-js [data-gap]:not(.go) .gv-dot{opacity:1}
  .gv-js [data-gap]:not(.go) .gv-run,.gv-js [data-gap]:not(.go) .gv-pen{stroke-dashoffset:0}
  .gv-js [data-gap].go .gv-dot,.gv-js [data-gap].go .gv-run,.gv-js [data-gap].go .gv-pen{transition:none}
}