/* ---- Go-Bag sling mark and the /go-bag/ area drawings (site v9.2) ----
   figure.mk holds the full drawing (.mk-full) and, for the sling, its reduced small variant (.mk-small): the small one shows only
   when the figure renders 80px wide or less (container query), so either can be swapped without markup changes.
   Default (no JS / reduced motion) = the finished drawing. mark-trace.js adds html.mk-armed and runs the trace (see that file). */
.mk{margin:0;container-type:inline-size;line-height:0}
.mk-svg{display:block;width:100%;height:auto;overflow:visible}
.mk-small{display:none}
@container (max-width:80px){.mk-full{display:none}.mk-small{display:block}}
/* cropped frames (site/sub/build.py CROP): width / height of each concept's drawing, so a lockup can size the mark by height */
.mk-crop-a{--mk-ar:.9333}.mk-crop-b{--mk-ar:1.3}.mk-crop-c{--mk-ar:1.5263}
.mk-glow{filter:drop-shadow(0 0 2px rgba(232,190,110,.45))}
/* armed: strokes wait for the tip; the grid and scales fade in as the trace starts, the dashed details and the glow when it ends */
.mk-armed .mk[data-mk] .mk-p{visibility:hidden}
.mk-armed .mk[data-mk].mk-tracing .mk-p,.mk-armed .mk[data-mk].mk-done .mk-p{visibility:visible}
.mk-armed .mk[data-mk] .mk-dec,.mk-armed .mk[data-mk] .mk-ko,.mk-armed .mk[data-mk] .mk-late,.mk-armed .mk[data-mk] .mk-glow{opacity:0}
.mk-armed .mk[data-mk].mk-tracing .mk-dec,.mk-armed .mk[data-mk].mk-done .mk-dec{opacity:1;transition:opacity .9s var(--ease-out)}
.mk-armed .mk[data-mk].mk-tracing .mk-ko,.mk-armed .mk[data-mk].mk-done .mk-ko{opacity:1}
.mk-armed .mk[data-mk].mk-done .mk-late,.mk-armed .mk[data-mk].mk-done .mk-glow{opacity:1;transition:opacity 1.2s var(--ease-out)}
/* the lead spark (built by mark-trace.js; opacity and position are SVG attributes) */
.mk-spark{display:none;pointer-events:none}
.mk.mk-tracing .mk-spark{display:inline}
.mk-core{fill:#fffaf0}
.mk-bloom{fill:#dea850;fill-opacity:.12}
.mk-bloom2{fill:#f4d89c;fill-opacity:.32}
.mk-tl{fill:#f4d89c}
.mk-tl:nth-child(1){opacity:.55}.mk-tl:nth-child(2){opacity:.42}.mk-tl:nth-child(3){opacity:.31}.mk-tl:nth-child(4){opacity:.21}.mk-tl:nth-child(5){opacity:.13}.mk-tl:nth-child(6){opacity:.07}
.mk-em{fill:#f6dca3}
