/*
 * /support/ — Support the Wheeler.
 *
 * Loaded only on this route (functions.php's per-route convention).
 *
 * Everything here belongs to one figure: the usher shift drawn as three
 * arches on a rule, with the expectations that hold the whole time running
 * underneath. The arches are the build's motif at diagram scale, so a process
 * graphic on this page reads as part of the same building rather than as a
 * chart dropped into it.
 *
 * Colour, verified against this section's --paper-raised (#F6E8DE) rather
 * than assumed from a class that behaves elsewhere: --ember (#8A5A12) is
 * 4.93:1, --stone-deep (#B76655) is 3.47:1, --ink (#33201C) is 12.84:1, and
 * --ink-soft (#6B5049) is 6.11:1. The signature amber --accent is 2.48:1 here
 * — under the 3:1 a meaningful graphical object needs — so it does not appear
 * in this drawing at all.
 */

/* ---------------------------------------------------------------- rail -- */

.shift {
  max-width: 30rem;
  margin: 1.25rem 0 1.5rem;
}

.shift__rail {
  display: block;
  width: 100%;
  height: auto;
}

.shift__line {
  stroke: var(--stone-deep);
  stroke-width: 1.5;
}

.shift__arrow { fill: var(--stone-deep); }

.shift__arch { fill: var(--ember); }

.shift__when {
  fill: var(--ink);
  font-family: var(--body);
  font-size: 11px;
  font-weight: 650;
}

.shift__band {
  fill: none;
  stroke: var(--stone-deep);
  stroke-width: 1.25;
  stroke-dasharray: 4 3;
}

.shift__band-label {
  fill: var(--ink-soft);
  font-family: var(--body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.shift figcaption {
  margin-top: 0.6rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* -------------------------------------------------------------- stages -- */

/*
 * The full text of each stage, as a real ordered list. The drawing carries
 * the shape of the shift and these carry what happens in it; neither is a
 * caption for the other, so the sentences are not squeezed into the SVG.
 */
.shift__stages {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
}

.shift__stages li { margin-bottom: 0.5rem; }

.shift__stage-when {
  font-weight: 650;
  color: var(--stone-700);
}

.shift__stage-when::after { content: " — "; }