/* Love Fine Art, the illustration library, drawing on.

   The thirteen line symbols of lfa-site-renovation/rebuild-final/
   ILLUSTRATIONS.html, lifted element for element, on the site's own paper
   with the site's own navy. Every drawing in the library stands here.

   The module renders finished with no scripting and under reduced motion:
   nothing is hidden by CSS, the strokes carry no dash of their own, and the
   drawing on is gated behind html.m-js, which the shell writes only when a
   script runs and the reader has asked for no less motion. */

.lfal{
  background:#faf8f3;
  padding:clamp(20px,3.2vw,40px);
  /* The height every stage takes, and the height the unit below is worked
     out against, so the two can never disagree. */
  --lfal-h:clamp(96px,11vw,140px);
}
.lfal-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.lfal-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:clamp(16px,2.2vw,28px);
}
.lfal-cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  min-width:0;
  /* One unit for the whole library. Every drawing is rendered at its own
     size times this unit, which is the largest that still fits the widest
     drawing, 160 units across, and the tallest, 150 units down, inside a
     cell. Stretching each drawing to fill the same box instead is what
     broke them: the stroke holds 1.5 px at any scale, so the 32 unit
     bracket blown to four times its size read as a hairline fragment and
     the 160 unit bench was squeezed under its neighbours. The library
     sheet prints every plate at its own intended size for this reason. */
  container-type:inline-size;
  --u:min(calc(var(--lfal-h) / 150), calc(100cqw / 160));
}
.lfal-stage{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:var(--lfal-h);
}
.lfal-art{
  display:block;
  width:calc(var(--vw,120) * var(--u));
  height:calc(var(--vh,120) * var(--u));
  overflow:visible;
}

/* -- The one plate the sheet prints at three sizes. The device is a corner
      and its whole claim is that the stroke holds 1.5 px at every size, so
      the three stand together at the sheet's own 12, 20 and 32 px, in real
      pixels rather than on the library's unit, because a caption reading
      12px has to be true. The sheet sets them in a row on their baselines
      with a 40 px gap; the gap closes here to hold three of them and their
      captions inside one cell. ------------------------------------------- */
.lfal-cell--sizes .lfal-sizes{
  display:flex;
  align-items:flex-end;
  gap:clamp(12px,1.6vw,22px);
}
.lfal-cell--sizes .lfal-size{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.lfal-cell--sizes .lfal-art{
  width:var(--px);
  height:var(--px);
}
.lfal-px{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:10px;
  line-height:1;
  color:rgba(6,16,104,.6);
}
.lfal-name{
  font-family:"Helvetica Neue","Libre Franklin",Helvetica,sans-serif;
  font-size:10px;
  font-weight:500;
  letter-spacing:0.1em;
  text-transform:uppercase;
  line-height:1.5;
  color:rgba(6,16,104,.72);
  text-align:center;
  text-wrap:balance;
}

/* -- the drawing on. One element at a time inside a cell, the cells in the
      order they are read. The dash is written by script off each element's
      own measured length, so a rectangle, a line and an arc all draw at the
      same rate rather than at the same duration. ------------------------- */
.m-js .lfal-art [data-draw]{
  stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 900ms cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0ms);
}
.m-js .lfal-cell.is-draw .lfal-art [data-draw]{ stroke-dashoffset:0; }
.m-js .lfal-art [data-fill]{
  fill-opacity:0;
  transition:fill-opacity 500ms ease;
  transition-delay:var(--d,0ms);
}
.m-js .lfal-cell.is-draw .lfal-art [data-fill]{ fill-opacity:1; }

@media (max-width:420px){
  .lfal-grid{ grid-template-columns:repeat(2,1fr); }
  /* At two columns the three sizes are held apart by their captions rather
     than by the drawings, so the caption sets the width and both it and the
     gap come in to keep the row clear of the cell. */
  .lfal-cell--sizes .lfal-sizes{ gap:8px; }
  .lfal-px{ font-size:9px; letter-spacing:-0.01em; }
}
@media (prefers-reduced-motion:reduce){
  .lfal-art [data-draw]{ stroke-dashoffset:0!important; transition:none!important; }
  .lfal-art [data-fill]{ fill-opacity:1!important; transition:none!important; }
}