/* Regional aircraft as field notes (regionals.js): graphite pencil on graph paper, with notes in a warmer ink. */
.fn-sketch{--fn-ink:#2b4052;--fn-paper:#fbfaf6;--fn-note:#8f5f35;--fn-grid:#9fb4c2}
.fn-sketch :is(.fn-line,.fn-echo,.fn-hatch,.fn-shade,.fn-windows,.fn-disc,.fn-leader,.fn-grid){vector-effect:non-scaling-stroke;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fn-grid{stroke:var(--fn-grid);stroke-width:.5;opacity:.22}
.fn-fill{fill:var(--fn-paper);stroke:none}
.fn-line{stroke:var(--fn-ink);stroke-width:1.05}
.fn-body{stroke-width:1.25}
.fn-detail{stroke-width:.7;opacity:.85}
.fn-echo{stroke:var(--fn-ink);stroke-width:.6;opacity:.28}
.fn-hatch{stroke:var(--fn-ink);stroke-width:.45;opacity:.42}
.fn-shade{stroke:var(--fn-ink);stroke-width:.4;opacity:.22}
.fn-windows{stroke:var(--fn-ink);stroke-width:.6;opacity:.75}
.fn-disc{stroke:var(--fn-ink);stroke-width:.6;stroke-dasharray:2 3;opacity:.55}
.fn-note text{fill:var(--fn-note);font-family:"Noteworthy","Marker Felt","Bradley Hand","Segoe Print",cursive;font-weight:700;letter-spacing:.02em}
.fn-leader{stroke:var(--fn-note);stroke-width:.85}
/* The sketch is revealed left to right, as a pencil would put it down, then the notes are written in. Strokes are
   non-scaling, so a dash-based draw-on would be measured in screen pixels; a wipe needs no lengths. */
@media (prefers-reduced-motion:no-preference){
  .fn-sketch .fn-craft{animation:fn-wipe .9s cubic-bezier(.45,.1,.3,1) both}
  .fn-sketch .fn-note{animation:fn-fade .45s .75s ease-out both}
}
@keyframes fn-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fn-fade{from{opacity:0}}