/* "Mersul pe ani" (includes/stories/mersul-pe-ani.php): two rails of months and a thread for each
   month of birth, fine as a loom; the reader's thread in the page's colour; the mothers' steps back
   and early retirement in pencil. */

.st .mp-rail-name { font: 700 11.5px var(--sans); letter-spacing: .1em; fill: var(--ink-3); }
.mp-rail { stroke: var(--ink); stroke-width: 1.3; }
.mp-tick { stroke: var(--ink-3); stroke-width: .8; }
.mp-tick--y { stroke: var(--ink-2); stroke-width: 1; }
.mp-t { stroke: var(--ink); stroke-width: .9; stroke-opacity: var(--a, .5); }
.mp-skip { stroke: var(--pencil); stroke-width: 1.6; stroke-linecap: round; }
.mp-land { fill: var(--ink); }
.mp-guide { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 4; }
.st--s .mp-t { stroke-width: .75; }
.st--s .mp-skip { stroke-width: 1.1; }
.st--s .mp-rail-name { font-size: 11.5px; }

/* The reader's thread: drawn down from her month of birth to her month. */
.mp-sel__t { stroke: var(--acc); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .55s cubic-bezier(.4, 0, .2, 1); }
.mp-sel__a, .mp-sel__b { fill: var(--acc); stroke: var(--paper); stroke-width: 2; }
.mp-sel__b { transition: opacity .25s ease .35s; }
.story--mers.is-walking .mp-sel__t { stroke-dashoffset: 1; transition: none; }
.story--mers.is-walking .mp-sel__b { opacity: .35; transition: none; }
.st--s .mp-sel__t { stroke-width: 2.1; }

/* The mothers' steps back: her thread leaning back six months a child. */
.mp-ghost { stroke: var(--pencil); stroke-width: 1.1; stroke-dasharray: 3 3; stroke-opacity: .85; }
.mp-ghost-end { fill: var(--paper); stroke: var(--pencil); stroke-width: 1.4; }
.st--s .mp-ghost { stroke-width: .9; stroke-dasharray: 2 2; }

/* The example notes of a step leave while the reader picks another month. */
.story--mers.is-scrubbed .mp-ex { opacity: 0; }

/* The month picker under the drawing (only with script: without it, the drawing shows March 1970). */
.mp__ctl { display: none; margin: 4px 0 0; font-family: var(--sans); }
.js .mp__ctl { display: block; }
.mp__l { display: block; font: 650 14px/1.3 var(--sans); color: var(--ink); }
.mp__range { display: block; width: 100%; min-height: 30px; margin: 0; accent-color: var(--acc); }
.mp__o { margin: 0; font: 500 14px/1.45 var(--sans); color: var(--ink-2); min-height: 1.45em; }
.mp__o b { font-weight: 600; color: var(--ink); }
.mp__more { display: none; }
@container story (min-width: 520px) { .mp__o { font-size: 15px; } .mp__more { display: inline; } }