/* ==========================================================================
   lineart.css  -  the one-line drawings (father and son, stethoscope heart).

   Markup (the SVG is pasted inline so nothing needs JS to show):
     <figure class="lineart lineart--ink" data-lineart="father-son" role="img"
             aria-label="...">  <svg ...>  </svg>  </figure>

   Ground:   .lineart--ink    navy ink on a light ground
             .lineart--paper  white ink on the navy ground
             (neither: the line takes the surrounding text colour)
   Size:     the figure fills its box up to --lineart-max (460px). Set the
             width on the parent, or set --lineart-max on the figure.
   Weight:   --lineart-w is the stroke width in drawing units (3.0 of a
             736 x 460 box, the weight of the supplied drawing). It is nudged
             up a little on phones so the pen line stays about as fine in real
             pixels as it is on a laptop.

   lineart.js only adds the draw-on-scroll. With no JS, or with
   prefers-reduced-motion, the drawing is simply fully drawn: nothing here
   hides anything.
   ========================================================================== */

.lineart{
  margin:0;
  padding:0;
  width:100%;
  max-width:var(--lineart-max,460px);
  line-height:0;
  color:inherit;
}
.lineart--ink{color:var(--navy-ground,#0C1833);}
.lineart--paper{color:var(--ink-on-dark,#F4F7FB);}

.lineart svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;          /* the ground lines run off the edge: keep their round caps */
}
.lineart path{
  fill:none;
  stroke:currentColor;
  stroke-width:var(--lineart-w,3.0);
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* phones: the box is about 260px wide, so 3.0 units is only ~1.1px. Keep a fine pen, not a hairline. */
@media (max-width:520px){
  .lineart path{stroke-width:var(--lineart-w,3.8);}
}

/* a centred figure helper for single-column layouts */
.lineart--center{margin-inline:auto;}

/* finished state: reduced motion shows the whole drawing, whatever JS did */
@media (prefers-reduced-motion:reduce){
  .lineart path{
    stroke-dasharray:none !important;
    stroke-dashoffset:0 !important;
    visibility:visible !important;
  }
}