/* 21 · the family that never stops growing (js/family.js): two people meet, have children, the children meet someone and
   have children of their own, and the family keeps rising a row and spreading out. The picture in the img is the fallback. */
.fam canvas{display:none}
.fam.live{position:relative;height:clamp(170px,36vw,460px)}
.fam.live img{display:none}
.fam.live canvas{display:block;position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%);mask-image:linear-gradient(to bottom,transparent,#000 16%)}
.fam-gen{position:absolute;left:10px;top:10px;padding:.4em .6em;background:#fff;color:#0b0b0c;border:2px solid #0b0b0c;box-shadow:3px 3px 0 #0b0b0c;
  font:700 clamp(9px,.85vw,12px)/1 var(--mono);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;font-variant-numeric:tabular-nums}
.chain span::after{display:inline-block}   /* so the lime highlighter below lights the word, not the arrow */
.chain span{text-decoration:underline .42em transparent;text-underline-offset:-.22em;text-decoration-skip-ink:none;transition:text-decoration-color .35s ease}
.chain span.on{text-decoration-color:var(--lime)}
@media (prefers-reduced-motion:reduce){ .chain span{transition:none} }