/* The story kit (includes/story.php, csn-story.js): scrollytelling, the pencil, the reveals.
   Without script every graphic shows its final state (the server's), the story's graphic above its
   steps. With script (.is-live) the graphic stays on screen beside the steps on a wide screen and
   above them on a phone, and shows the state of the step being read. Motion is reduced to nothing
   when the reader asks for that (site.css): the states still change, at once. */

/* ---- The pencil and the highlighter ---- */
.pencil { fill: none; stroke: var(--pencil); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pencil.hl { stroke: var(--hl); stroke-width: 24; stroke-linecap: butt; }
.pencil--tick { stroke-width: 2.6; }
/* An undrawn mark is hidden as well: a dash of no length still shows its round caps as dots. */
.pencil-ready .pencil { stroke-dashoffset: 1; opacity: 0; }
.pencil-ready.is-drawn .pencil { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 1s cubic-bezier(.45, .05, .3, 1), opacity .1s linear; }
.pencil-ready.is-drawn .pencil + .pencil { transition-delay: .35s; }

/* ---- Reveals ---- */
.reveal-ready [data-bar] { transform: scaleX(0); transform-origin: 0 50%; }
.reveal-ready.is-revealed [data-bar] { transform: none; transition: transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 45ms); }
.reveal-ready .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.reveal-ready.is-revealed .draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s ease; }

/* ---- Scrollytelling ---- */
.scrolly { position: relative; margin: 1.6em 0 2em; }
.scrolly__graphic { margin: 0 0 1.2em; }
.scrolly__step > p { margin: 0 0 1em; }
.scrolly__src { font: 500 13.5px/1.45 var(--sans); color: var(--ink-3); margin: .6em 0 0; }
.scrolly__src .src { margin: 0; font-size: inherit; }
.scrolly__src a { color: var(--ink-2); text-decoration-color: var(--line-2); }

.scrolly.is-live .scrolly__graphic { position: sticky; top: 0; z-index: 3; margin: 0; background: var(--paper); }
.scrolly.is-live .scrolly__steps { position: relative; z-index: 1; }
.scrolly.is-live .scrolly__step { padding: 0 0 44vh; }
.scrolly.is-live .scrolly__step:last-child { padding-bottom: 22vh; }
.scrolly.is-live .scrolly__step > p { margin: 0; color: var(--ink-2); transition: color .3s ease; }
.scrolly.is-live .scrolly__step.is-active > p { color: var(--ink); }
.scrolly.is-live .scrolly__step > p + * { margin-top: .8em; }
/* A link reached with the keyboard is scrolled clear of the graphic that stays over the steps on a phone (csn-story.js sets --gh). */
.scrolly.is-live .scrolly__step a { scroll-margin-top: calc(var(--gh, 0px) + 16px); scroll-margin-bottom: 24px; }
/* Phones: the graphic over the steps, the step being read just under it. */
@media (max-width: 899px) {
	.scrolly.is-live { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
	.scrolly.is-live .scrolly__graphic { padding: 6px var(--gutter) 8px; border-bottom: 1px solid var(--line); box-shadow: 0 10px 14px -14px rgba(0, 0, 0, .35); }
	.scrolly.is-live .scrolly__steps { padding: 18px var(--gutter) 0; }
	.scrolly.is-live .scrolly__step > p { position: relative; padding-left: 14px; border-left: 2px solid var(--line); }
	.scrolly.is-live .scrolly__step.is-active > p { border-left-color: var(--acc); }
	.scrolly.is-live .scrolly__src { padding: 0 var(--gutter); }
}
/* Wide screens: the steps on the left, the graphic held on the right; wider than the text column. */
@media (min-width: 900px) {
	.scrolly.is-live { --sw: min(1020px, calc(100vw - 2 * var(--gutter))); width: var(--sw); margin-left: calc((100% - var(--sw)) / 2); }
	.scrolly.is-live .scrolly__body { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 40px; align-items: start; }
	.scrolly.is-live .scrolly__graphic { grid-column: 2; grid-row: 1; top: max(12px, calc(50vh - 250px)); }
	.scrolly.is-live .scrolly__steps { grid-column: 1; grid-row: 1; padding-top: 30vh; }
	.scrolly.is-live .scrolly__step > p { font-size: 19px; line-height: 1.55; padding: 2px 0 2px 18px; border-left: 2px solid var(--line); }
	.scrolly.is-live .scrolly__step.is-active > p { border-left-color: var(--acc); }
}
@media (min-width: 1100px) { .scrolly.is-live .scrolly__body { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); column-gap: 52px; } }
@media (min-width: 1100px) {
	.with-map .scrolly.is-live { --sw: calc(100% + 340px); margin-left: 0; }
}

/* ---- A story's graphic ---- */
.story { container: story / inline-size; margin: 0; }
.story__panel + .story__panel { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.scrolly.is-live .story__stage { display: grid; }
/* Hidden by opacity only, so a screen reader still finds both panels' descriptions wherever the reader is. */
.scrolly.is-live .story__panel { grid-area: 1 / 1; margin: 0; padding: 0; border: 0; transition: opacity .5s ease; }
.scrolly.is-live .story__panel.is-before, .scrolly.is-live .story__panel.is-after { opacity: 0; }

svg [hidden] { display: none; }   /* the hidden attribute means nothing inside a drawing by itself */
.st { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.st--l { display: none; }
@container story (min-width: 520px) { .st--s { display: none; } .st--l { display: block; } }
.st text { font-family: var(--sans); font-variant-numeric: lining-nums tabular-nums; }
.st .st-dim { font-weight: 650; font-size: 14.5px; fill: var(--ink-2); letter-spacing: .02em; }
.st .st-paper { fill: var(--paper); }
.st-dimline line { stroke: var(--ink-3); stroke-width: 1; }
.st-piece { transform-box: fill-box; transform-origin: 0 0; }
.st-piece--net .st-fill { fill: var(--acc); }
.st-piece--cas .st-fill { fill: var(--cas); }
.st-piece--cass .st-fill { fill: var(--cass); }
.st-piece--tax .st-fill { fill: var(--tax); }
.st-note-line { stroke: var(--paper); stroke-opacity: .3; stroke-width: 1; }
.st-notes { pointer-events: none; }
.pencil--soft { stroke-width: 1.5; stroke-opacity: .85; }
.st-ded { fill: var(--acc-pale); stroke: var(--acc); stroke-width: 1.5; }
.st .st-in { font: 500 24px var(--mono); fill: var(--on-acc); paint-order: stroke; stroke: var(--acc); stroke-width: 7px; stroke-linejoin: round; }
.st .st-in__s { font: 650 14px var(--sans); letter-spacing: .04em; }
.st .st-k { font-weight: 700; font-size: 15.5px; fill: var(--ink); }
.st .st-v { font: 500 17px var(--mono); fill: var(--ink); }
.st-lead { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 1 3; }
/* Until the handwriting face arrives (or where it does not), the notes fall back to Archivo, condensed so they keep their room. */
.st .st-note { font: 600 22px/1 var(--hand); font-stretch: 72%; fill: var(--pencil); }
.st .st-ghost { font-weight: 600; font-size: 15px; fill: var(--ink-3); }
.st .st-big { font: 640 42px var(--serif); fill: var(--ink); letter-spacing: -.012em; }
.st .st-small { font-weight: 500; font-size: 15px; fill: var(--ink-2); }
.st .st-title { font-weight: 700; font-size: 14px; fill: var(--ink); letter-spacing: .01em; }
.st-grid { stroke: var(--line); stroke-width: 1; }
.st-axis { stroke: var(--ink-3); stroke-width: 1; }
.st .st-tick { font-weight: 500; font-size: 14px; fill: var(--ink-2); }
.st .st-axt { font-weight: 600; font-size: 13px; fill: var(--ink-3); }
.st-line { fill: none; stroke: var(--acc); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.st-mark circle { fill: var(--acc); stroke: var(--paper); stroke-width: 2; }
.st--s .st-in { font-size: 17px; }
.st--s .st-in__s { font-size: 12px; }
.st--s .st-k { font-size: 13.5px; }
.st--s .st-v { font-size: 14px; }
.st--s .st-note { font-size: 18px; }
.st--s .st-ghost, .st--s .st-dim, .st--s .st-small { font-size: 13px; }
.st--s .st-tick { font-size: 13px; }
.st--s .st-axt, .st--s .st-title { font-size: 13px; }
.st--s .st-big { font-size: 29px; }
.st--s .pencil { stroke-width: 1.8; }
.st--s .pencil.hl { stroke-width: 18; }

/* The states: what has left is gone; what is to come waits (a piece in the strip, a mark undrawn). */
.story .is-after { opacity: 0; }
.story .pencil.is-after { opacity: 0; }
.scrolly.is-live .story [data-from], .scrolly.is-live .story [data-until] { transition: opacity .45s ease, transform .75s cubic-bezier(.2, .75, .25, 1), fill .5s ease, stroke-dashoffset .9s cubic-bezier(.45, .05, .3, 1); }
.scrolly.is-live .story .is-before { opacity: 0; }
.scrolly.is-live .story .st-piece.is-before { opacity: 1; transform: translateY(var(--dy)) scaleY(var(--k)); }
.scrolly.is-live .story .st-piece .st-fill { transition: fill .5s ease; }
.scrolly.is-live .story .st-piece.is-before .st-fill { fill: var(--acc); }
.scrolly.is-live .story .pencil.is-before { opacity: 0; stroke-dashoffset: 1; transition: opacity .1s linear, stroke-dashoffset .9s cubic-bezier(.45, .05, .3, 1); }
.scrolly.is-live .story .story__panel--curve.is-before .draw { stroke-dashoffset: 1; }
.scrolly.is-live .story .story__panel--curve .draw { transition: stroke-dashoffset 1.6s ease .2s; }