/* Written by lab/what-we-do/a/tools/build.mjs: edit the mockup's sources there, then run the build again. */
/* What we do, take A: the engineering sheet.
   One scroll pattern: after a full width opening, each section is one row, the words on one
   side and an ink drawing on the other, the sides alternating. Each drawing builds with the
   scroll while its row passes through the screen, and stays built. The exchanger row is
   taller and holds its drawing while its four steps play. Paper, ink, one grey, one blue.
   No CSS transitions on the drawings: every change comes from the scroll position (wwd.js).
   The header keeps the live site's slide (site/css/site.css, .v7-top). */

:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #000;
  --grey: #5c5f63;
  --light: #b5b5b5;
  --rule: #dfe6ef;
  --blue: #1f4fd8;
  --sans: Arial, Helvetica, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --mx: clamp(1.25rem, 4.5svw, 4.5rem);
  --hh: 4.5rem;
  --gap: clamp(2.5rem, 5.5svw, 6.5rem);
  /* How long things take to arrive. The page follows the site's motion law (tools/check.mjs,
     scene-motion-law): every timed change is opacity, transform or stroke-dashoffset and lasts
     at most 400 ms (Ken chose this, B, on 2026-10-27; DECISIONS.md section 31). */
  --wd-rise: 400ms; /* a paragraph, and the close's button, rise in */
  --wd-line: 400ms; /* a heading's line rises from behind its clip */
  --wd-beat: 400ms; /* a talking point fades in, and earlier points soften */
  --wd-fade: 200ms; /* words inside a drawing, and every reveal under reduced motion */
  --wd-cam: 400ms; /* the drawing eases toward the part a point names */
}
* {
  box-sizing: border-box;
}
html {
  background: var(--paper);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: var(--rule);
  color: #080808;
}
a {
  color: inherit;
  text-underline-offset: 0.2em;
}
a:focus-visible,
summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}
p {
  margin: 0;
}
.nb {
  white-space: nowrap;
}

/* ---- Header: it rides at the top, steps away while the reader scrolls down and returns on
   the way up (wwd.js), like the live site's over the film (site/css/site.css, .v7-top). ---- */
.wd-top {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--paper);
}
.js .wd-top {
  transition: transform 0.3s ease;
}
.js
  .wd-top[data-away]:not([data-peek]):not(:has(:focus-visible)):not(:has(.masthead-fold[open])) {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  .js .wd-top {
    transition: none;
  }
}

/* ---- Type ---- */
.wd h1,
.wd h2,
.wd h3,
.wd-sub {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.wd h1 {
  font-size: clamp(2.75rem, 1.6rem + 4.4svw, 5.25rem);
  line-height: 1.04;
}
.wd h2 {
  font-size: clamp(2rem, 1.6rem + 1.5svw, 2.5rem);
  line-height: 1.1;
}
.wd h3 {
  font-size: 1.75rem;
  line-height: 1.15;
  margin: 2.25rem 0 0.875rem;
}
.wd-sub {
  margin-top: 0.875rem;
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.wd p {
  font-size: 1.125rem;
  line-height: 1.45;
  text-wrap: pretty;
}
.wd h2 + p,
.wd .wd-sub + p {
  margin-top: 1.5rem;
}
.wd p + p {
  margin-top: 1.125rem;
}

/* ---- Opening: the heading and the words across the top, the plant beneath ---- */
.wd-open {
  padding: clamp(3.5rem, 9svh, 7rem) var(--mx) 0;
  max-width: 96rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-areas: "h p" "img img";
  column-gap: var(--gap);
  align-items: start;
}
.wd-open h1 {
  grid-area: h;
  max-width: 10.5ch;
}
.wd-open .wd-lead {
  grid-area: p;
  max-width: 34rem;
  padding-top: 0.75rem;
}
/* The opening words (Kirk's) are set as a lede, like the Mission article's: Georgia, larger,
   in short paragraphs broken only between sentences. They arrive with the page, a paragraph
   at a time (wwd.js, reveal), and the heading's lines rise at most 12 px. */
.js .wd-open .rv-h .li {
  transform: translateY(min(0.4em, 12px));
}
.rm .wd-open .rv-h .li {
  transform: none;
}
.wd-lead p {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.wd-lead p + p {
  margin-top: 0.875rem;
}
.wd-hero-frame {
  grid-area: img;
  margin: clamp(2.5rem, 6svh, 4.5rem) calc(var(--mx) * -1) 0;
  overflow: hidden;
  height: min(62.5svw, 88svh);
}
.wd-hero {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
  transform-origin: 46% 56%;
}

/* ---- Rows: words on one side, the drawing on the other, alternating ---- */
.wd-row {
  max-width: 96rem;
  margin: 0 auto;
  padding: clamp(3rem, 7svh, 5.5rem) var(--mx);
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  grid-template-areas: "t v";
  column-gap: var(--gap);
  align-items: center;
}
.wd-row.flip {
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  grid-template-areas: "v t";
}
.wd-text {
  grid-area: t;
  max-width: 32rem;
}
.wd-row.flip .wd-text {
  justify-self: start;
}
.wd-vis {
  grid-area: v;
  min-width: 0;
}
/* A drawing's figure has no margin, also where a held row's drawing box takes one on a phone. */
.wd-row > figure.wd-vis {
  margin: 0;
}
.wd-svg {
  display: block;
  width: 100%;
  max-width: calc((100svh - var(--hh) - 3rem) * var(--ar, 1));
  height: auto;
  margin-inline: auto;
  overflow: visible;
  --k: 1;
  --ks: 1;
}
.wd-svg[data-cam] {
  overflow: hidden;
}
.wd-row:not(.flip) .wd-svg {
  margin-right: 0;
}
.wd-row.flip .wd-svg {
  margin-left: 0;
}
/* The exchanger: a taller row that holds its drawing, and its words, while the steps play. */
.wd-hold {
  align-items: start;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.wd-hold .wd-vis,
.wd-hold .wd-text {
  position: sticky;
  top: calc(var(--hh) + 1rem);
  height: calc(100svh - var(--hh) - 2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wd-hold .wd-svg {
  max-width: min(100%, calc(100svh - var(--hh) - 2.5rem));
}

/* ---- Drawing classes (built by tools/build.mjs). --k keeps line weights in screen pixels. ---- */
.wd-svg path {
  fill: none;
}
.wd-svg .e,
.wd-svg .e2 {
  stroke: var(--ink);
  stroke-width: calc(1.5px * var(--k));
  stroke-linejoin: round;
  stroke-linecap: round;
}
.wd-svg .e2 {
  stroke-width: calc(1.15px * var(--k));
}
.wd-svg .p {
  stroke: var(--ink);
  stroke-width: calc(3px * var(--k));
  stroke-linejoin: round;
}
.wd-svg .ph {
  stroke: var(--paper);
  stroke-width: calc(9px * var(--k));
  stroke-linejoin: round;
}
.wd-svg .t {
  stroke: var(--ink);
  stroke-width: calc(1px * var(--k));
  stroke-linejoin: round;
  stroke-linecap: round;
}
.wd-svg .tg {
  stroke: var(--grey);
  stroke-width: calc(1px * var(--k));
}
.wd-svg .w {
  stroke: var(--paper);
  stroke-width: calc(1px * var(--k));
  stroke-linejoin: round;
}
.wd-svg .h {
  stroke: var(--rule);
  stroke-width: calc(1px * var(--k));
}
.wd-svg .b {
  stroke: var(--blue);
  stroke-width: calc(1.5px * var(--k));
  stroke-linejoin: round;
  stroke-linecap: round;
}
.wd-svg .b1 {
  stroke: var(--blue);
  stroke-width: calc(1px * var(--k));
  stroke-linejoin: round;
}
.wd-svg .bd {
  stroke: var(--blue);
  stroke-width: calc(1.5px * var(--k));
  stroke-dasharray: calc(3px * var(--k)) calc(5px * var(--k));
}
.wd-svg .lim {
  stroke: var(--ink);
  stroke-width: calc(1px * var(--k));
  stroke-dasharray: calc(6px * var(--k)) calc(4px * var(--k));
}
.wd-svg .f {
  fill: var(--paper);
}
.wd-svg .g1 {
  fill: #f2f2f2;
}
.wd-svg .g2 {
  fill: #e4e4e4;
}
.wd-svg .k {
  fill: var(--ink);
}
.wd-svg .kb {
  fill: var(--blue);
}
.wd-svg .fb {
  fill: var(--blue);
  fill-opacity: 0.07;
}
/* A blue tint whose strength the drawing sets (fill-opacity on the path). */
.wd-svg .fbx {
  fill: var(--blue);
}
.wd-svg .hatch {
  fill: url(#hatch);
}
.wd-svg text {
  font-family: var(--sans);
}

/* Fixed size labels: scaled by --ks so they keep their screen size. */
.wd-svg .fs {
  transform: scale(var(--ks));
}
.wd-svg .tb,
.wd-svg .tbs {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1px;
}
.wd-svg .tbs {
  stroke: var(--grey);
}
.wd-svg .tbc {
  stroke: var(--ink);
  stroke-width: 1px;
}
.wd-svg .tl {
  stroke: var(--ink);
  stroke-width: 1px;
}
/* A dashed leader. wwd.js draws a leader and then clears its dash, so only the page without
   script shows the dash. */
html:not(.js) .wd-svg .tl-dash {
  stroke-dasharray: 4 3;
}
.wd-svg .td {
  fill: var(--ink);
}
.wd-svg .tn {
  font-size: 14px;
  fill: var(--grey);
}
.wd-svg .tv {
  font-size: 16px;
  fill: var(--ink);
  font-variant-numeric: tabular-nums;
}
.wd-svg .ts {
  font-size: 13px;
  fill: var(--grey);
}
.wd-svg .ft {
  fill: var(--ink);
  font-variant-numeric: tabular-nums;
}
.wd-svg .ftg {
  fill: var(--grey);
  font-variant-numeric: tabular-nums;
}
.wd-svg .ftb {
  fill: var(--blue);
}
.wd-svg .tbt {
  font-size: 11px;
  fill: var(--ink);
}
.wd-svg .tbv {
  font-size: 15px;
  fill: var(--ink);
  font-variant-numeric: tabular-nums;
}
.wd-svg .tdl,
.wd-svg .tdh {
  stroke: var(--ink);
  stroke-width: 1px;
}
.wd-svg .tag-b .tb,
.wd-svg .tag-b .tbc,
.wd-svg .tag-b .tl,
.wd-svg .tag-b .tdl,
.wd-svg .tag-b .tdh {
  stroke: var(--blue);
}
.wd-svg .tag-b .td {
  fill: var(--blue);
}
.wd-svg .tag-b .tn,
.wd-svg .tag-b .tv,
.wd-svg .tag-b .tbt {
  fill: var(--blue);
}
/* The comparison table and other fixed size line work. */
.wd-svg .fs .q1 {
  stroke: var(--ink);
  stroke-width: 1px;
}
.wd-svg .fs .qh {
  stroke: var(--rule);
  stroke-width: 1px;
}
.wd-svg .fs .qb {
  stroke: var(--blue);
  stroke-width: 1.5px;
}
.wd-svg .fs .qt {
  font-size: 15px;
  fill: var(--ink);
}
.wd-svg .fs .qc {
  font-size: 13px;
  fill: var(--grey);
}

/* Things that leave before the end of a section are absent from the finished drawing. */
.wd-svg .ex {
  visibility: hidden;
}


/* ---- Title block ---- */
.tblock {
  grid-area: v;
  position: relative;
  border: 1.5px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.tblock-h {
  grid-column: 1 / -1;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ink);
  font-size: 0.875rem;
  color: var(--grey);
}
.tblock-c {
  padding: 1.5rem 1.125rem 1.25rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  border-top: 1px solid var(--rule);
  min-height: 6rem;
  display: flex;
  align-items: flex-end;
}
.tblock-c:nth-child(2),
.tblock-c:nth-child(3) {
  border-top: 0;
}
.tblock-c:nth-child(odd) {
  border-left: 1px solid var(--rule);
}
.js .tblock .rule {
  position: absolute;
  background: var(--ink);
}

/* ---- Close ---- */
.wd-close .wd-vis {
  overflow: hidden;
}
.wd-close-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 52%;
  opacity: 0.4;
}
.wd-note {
  margin-top: 1.25rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--grey);
  max-width: 26rem;
}
.wd-close .button {
  margin-top: 2.25rem;
  min-height: 3.5rem;
  padding: 0.75rem 1.75rem;
  font-size: 1.125rem;
}
/* ---- Phone: each row stacks, the drawing above its words ---- */
@media (max-width: 47.99rem) {
  :root {
    --hh: 3.5rem;
  }
  .wd-open {
    padding-top: 2.5rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "h" "img" "p";
  }
  .wd-hero-frame {
    margin: 1.75rem calc(var(--mx) * -1) 0;
    height: 75svw;
  }
  .wd-open .wd-lead {
    padding-top: 1.75rem;
  }
  .wd-lead p {
    font-size: 1.25rem;
    line-height: 1.5;
  }
  .wd-row,
  .wd-row.flip {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "v" "t";
    padding-block: 4.5rem 0;
    row-gap: 2rem;
  }
  .wd-svg {
    max-width: none;
    --k: 2.2;
    --ks: 1.95;
  }
  .wd-hold {
    min-height: 0;
    padding-bottom: 14svh;
  }
  .wd-hold .wd-vis {
    top: var(--hh);
    height: auto;
    z-index: 2;
    background: var(--paper);
    padding: 0.5rem 0 0.75rem;
    margin-inline: calc(var(--mx) * -1);
    padding-inline: var(--mx);
  }
  .wd-hold .wd-text {
    position: static;
    height: auto;
    display: block;
  }
  .wd-hold .wd-text p {
    margin-top: 16svh;
  }
  .wd-hold .wd-text h2 + p {
    margin-top: 1.5rem;
  }
  .wd-hold .wd-svg {
    max-width: min(100%, 48svh);
    margin-inline: auto;
  }
  .wd-hold .wd-vis {
    padding-inline: 0;
  }
  .wd-svg .dsk {
    display: none;
  }
  .tblock-c {
    font-size: 1.0625rem;
    min-height: 4.75rem;
    padding: 1rem 0.75rem 0.875rem;
  }
  .wd-close {
    padding-bottom: 4rem;
  }
}

/* Patterns and the deposit in the exchanger. --foul grows from 0 to 1 with the first step. */
.wd-svg .hp {
  stroke: var(--ink);
  stroke-width: 0.6px;
}
.wd-svg .dp {
  stroke: var(--grey);
  stroke-width: 0.9px;
}
.wd-svg .te {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 0.55px;
}
.wd-svg .tedep {
  stroke: var(--grey);
  stroke-width: calc(var(--foul, 1) * 2.2px);
}
.wd-svg .tubesF {
  fill: url(#tubeEnds);
}
.wd-svg .depo {
  stroke: url(#dep);
  stroke-width: calc(var(--foul, 1) * 13px);
}
.wd-svg .dep2 {
  stroke: var(--grey);
  stroke-width: calc(var(--foul, 1) * 3px);
}
.tb-draw .tblock,
.tb-draw .tblock-h,
.tb-draw .tblock-c {
  border-color: transparent;
}
.tblock .rule {
  pointer-events: none;
}
.wd-svg .fan {
  stroke: var(--blue);
  stroke-width: calc(0.75px * var(--k));
  stroke-opacity: 0.32;
  stroke-linejoin: round;
}
.wd-svg .rob {
  stroke: var(--ink);
  stroke-width: calc(2.5px * var(--k));
  stroke-linejoin: round;
  stroke-linecap: round;
}
.wd-svg .fanR {
  transform-box: fill-box;
  transform-origin: 0 0;
  transform: scaleX(var(--fan, 1));
}
.wd-svg .nb-t {
  font-size: 15px;
  fill: var(--blue);
}
.wd-svg .nb-n {
  font-size: 13px;
  fill: var(--grey);
}
.wd-svg .nb-v {
  font-size: 14px;
  fill: var(--ink);
}
.wd-svg .nb-r {
  stroke: var(--rule);
  stroke-width: 1px;
}

@media (max-width: 21rem) {
  .tblock {
    grid-template-columns: 1fr;
  }
  .tblock-c:nth-child(odd) {
    border-left: 0;
  }
  .tblock-c:nth-child(3) {
    border-top: 1px solid var(--rule);
  }
}

/* ---- Words that arrive (wwd.js). Hidden only under .js, so without script all is visible. ---- */
.js .rv-p {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--wd-rise) cubic-bezier(0.16, 1, 0.3, 1),
    transform var(--wd-rise) cubic-bezier(0.16, 1, 0.3, 1);
}
.js .rv-p.rv-in {
  opacity: 1;
  transform: none;
}
.js .rv-h .ln {
  display: block;
  overflow: hidden;
  padding: 0.08em 0 0.18em;
  margin: -0.08em 0 -0.18em;
}
.js .rv-h .li {
  display: block;
  opacity: 0;
  transform: translateY(0.4em);
  transition:
    opacity var(--wd-line) cubic-bezier(0.16, 1, 0.3, 1),
    transform var(--wd-line) cubic-bezier(0.16, 1, 0.3, 1);
}
/* A heading's lines follow each other by 80 ms. */
.js .rv-h:not(.rv-now) .ln:nth-child(2) .li {
  transition-delay: 80ms;
}
.js .rv-h:not(.rv-now) .ln:nth-child(3) .li {
  transition-delay: 160ms;
}
.js .rv-h:not(.rv-now) .ln:nth-child(4) .li {
  transition-delay: 240ms;
}
.js .rv-h:not(.rv-now) .ln:nth-child(5) .li {
  transition-delay: 320ms;
}
.js .rv-h:not(.rv-now) .ln:nth-child(6) .li {
  transition-delay: 400ms;
}
/* Inside a held row a heading's line rises at most 12 px; with reduced motion, not at all. */
.js .wd-beats .rv-h .li {
  transform: translateY(min(0.4em, 12px));
}
.rm .wd-beats .rv-h .li {
  transform: none;
}
.js .rv-h.rv-in .li {
  opacity: 1;
  transform: none;
}
.js .rv-p.rv-now,
.js .rv-h.rv-now .li {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .rv-p,
  .js .rv-h .li {
    transform: none;
    transition: opacity var(--wd-fade) linear;
  }
}

/* The S3 figures: IRIS outline and fine interior line, the operator's fine line. */
.wd-svg .io {
  stroke: var(--blue);
  stroke-width: calc(1.35px * var(--k));
  stroke-linejoin: round;
  stroke-linecap: round;
}
.wd-svg .id {
  stroke: var(--blue);
  stroke-width: calc(0.75px * var(--k));
  stroke-linejoin: round;
  stroke-linecap: round;
}
.wd-svg .od {
  stroke: var(--ink);
  stroke-width: calc(0.75px * var(--k));
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* The close's button arrives at full colour: it rises from behind a clip, never fades. */
.js .wd-text .button.rv-p {
  transform: translateY(12px);
}
.wd-row.wd-close {
  padding-bottom: max(18svh, 8rem);
}

/* Phone copies of the exchanger, one per step; hidden on wider screens. */
.wd-mvis {
  display: none;
  margin: 0;
}
@media (max-width: 47.99rem) {
  .wd-mvis {
    display: block;
    margin: 1.5rem calc(var(--mx) * -1) 1.75rem;
  }
  .wd-mvis .wd-svg {
    max-width: none;
    width: 100%;
  }

  .wd-hold {
    padding-bottom: 2rem;
  }
  .wd-hold .wd-text p,
  .wd-hold .wd-text h2 + p {
    margin-top: 0;
  }
}
/* Spacing around the hidden phone copies of the exchanger on wider screens. */
.wd-text h2 + .wd-mvis + p {
  margin-top: 1.5rem;
}
.wd-text p + .wd-mvis + p {
  margin-top: 1.125rem;
}
@media (max-width: 47.99rem) {
  .wd-text h2 + .wd-mvis + p,
  .wd-text p + .wd-mvis + p {
    margin-top: 0;
  }
}

/* Words inside a drawing arrive in 200 ms once their line is drawn, never resting half grey. */
.tblock-h,
.tblock-c,
.wd-svg .fx text,
.wd-svg .fx rect,
.wd-svg .fx .tbc,
.wd-svg .fx .q1,
.wd-svg .fx .qh,
.wd-svg .fx .qb,
.wd-svg .fx .nb-r {
  transition: opacity var(--wd-fade) ease-out;
}
.tblock .tb-off,
.wd-svg .fx .tx-off {
  opacity: 0;
}
/* A tag's paper box arrives whole, so lines under it never show through while its words fade in. */
.wd-svg .fx rect.tb {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .tblock .tb-off,
  .wd-svg .fx .tx-off {
    opacity: 1;
  }
}

/* ---- Round 3: one talking point at a time ---- */
/* A row of beats holds on screen while its points play: about 0.7 of a screen each. */
@media (min-width: 48rem) {
  .js:not(.rm) .wd-beats.wd-hold {
    min-height: calc(100svh + var(--beats) * 70svh);
  }
}
.rm .wd-beats.wd-hold {
  min-height: 0;
}
/* Each point rises in on a fixed clock; earlier points soften to grey. */
/* A point sits inside its paragraph's lines (an inline box, which takes no transform), so it
   fades in where it stands; earlier points soften by opacity, not by a colour change. */
.js:not(.rm) .wd-beats .bt {
  opacity: 0;
  transition: opacity var(--wd-beat) cubic-bezier(0.16, 1, 0.3, 1);
}
.js:not(.rm) .wd-beats .bt.on {
  opacity: 1;
}
.js:not(.rm) .wd-beats .bt.on.past {
  opacity: 0.4;
}
/* The key words of the current point carry a thin underline in their part's colour. */
.wd-beats .kw {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: transparent;
}
.wd-beats .kw.kw-on {
  text-decoration-color: var(--ink);
}
.wd-beats .kw-b.kw-on {
  text-decoration-color: var(--blue);
}
/* Focus: the part the point names keeps its ink or blue; the rest goes to a light grey. */
/* The recolour itself is instant: the motion law times opacity, transform and stroke-dashoffset
   only, and a fade by opacity would show hidden lines through the drawing's white fills. */
.wd-beats .wd-svg path,
.wd-beats .wd-svg text,
.wd-beats .wd-svg rect {
  transition: opacity var(--wd-fade) ease-out;
}
.wd-svg .dim path:not(.f):not(.ph):not(.g1):not(.g2):not(.fb):not(.hatch):not(.tubesF) {
  stroke: #d3d8de;
}
.wd-svg .dim .k,
.wd-svg .dim .kb {
  fill: #d3d8de;
}
.wd-svg .dim text {
  fill: #b9bdc2;
}
.wd-svg .dim .tb,
.wd-svg .dim .tbc {
  stroke: #d3d8de;
}
.wd-svg .cam {
  transform-box: view-box;
  transform-origin: 0 0;
  transition: transform var(--wd-cam) cubic-bezier(0.16, 1, 0.3, 1);
}
.wd-svg .gh {
  stroke: var(--ink);
  stroke-width: calc(1.25px * var(--k));
  stroke-dasharray: calc(5px * var(--k)) calc(4px * var(--k));
}
@media (max-width: 47.99rem) {
  .js .wd-beats .bt {
    top: 0;
    opacity: 1;
  }
  /* Words that scroll up to the pinned drawing fade out before they reach it (wwd.js,
     phoneBeat), so no line is ever cut by the drawing's edge. */
  .js .wd-beats.wd-hold .bt,
  .js .wd-beats.wd-hold > .wd-text > * {
    transition: opacity var(--wd-fade) ease-out;
  }
  .js .wd-beats.wd-hold .gone,
  .js:not(.rm) .wd-beats.wd-hold .bt.on.gone {
    opacity: 0;
  }
  /* Each point starts on its own line, so once the points before it have faded the current
     one reads as a whole block, never from the middle of a line. Every point arrives as it comes
     up the screen; one that reaches the line under the drawing holds there (wwd.js) while the
     space after it scrolls by. */
  .js .wd-beats.wd-hold .bt {
    display: block;
  }
  .js .wd-beats.wd-hold .wd-text p {
    display: flow-root;
  }
  .js .wd-beats.wd-hold .wd-text p::after {
    content: "";
    display: block;
    height: var(--hold, 0px);
  }
  /* A drawing too tall to pin (wwd.js, wd-free) scrolls with its words. */
  .js .wd-beats.wd-hold.wd-free > .wd-vis {
    position: static;
  }
  .js .wd-beats.wd-hold.wd-free > .wd-vis {
    margin-bottom: 0;
  }
  .js .wd-beats.wd-hold.wd-free > .wd-text {
    margin-top: 0;
  }
  /* Value Add's measures keep the page's side margin. */
  .wd-hold .wd-vis > .tblock {
    margin-inline: var(--mx);
  }
  .js:not(.rm) .wd-beats .bt {
    opacity: 1;
  }
  /* In a held row each point arrives as it comes up the screen, just after its heading
     (wwd.js, ARRIVE): it fades in over 400 ms where it stands, and fades out in 200 ms when it
     reaches the drawing. */
  .js:not(.rm) .wd-beats.wd-hold:not(.wd-free) .bt:not(.in) {
    opacity: 0;
  }
  .js:not(.rm) .wd-beats.wd-hold:not(.wd-free) .bt.in:not(.gone) {
    transition: opacity var(--wd-beat) cubic-bezier(0.16, 1, 0.3, 1);
  }
  .js:not(.rm) .wd-beats.wd-hold .bt.gone {
    opacity: 0;
  }
  /* The drawing lets go once the last point reaches it (wwd.js, phoneRelease): a margin below
     it ends its pinned stretch early, and the words take the same space back. */
  .wd-beats.wd-hold > .wd-vis {
    margin-bottom: var(--rel, 0px);
  }
  .wd-beats.wd-hold > .wd-text {
    margin-top: calc(-1 * var(--rel, 0px));
  }
}
.wd-svg .dim .fs text,
.wd-svg .dim text.tv,
.wd-svg .dim text.tn {
  fill: #b9bdc2;
}
.wd-svg .dim .fs .tb,
.wd-svg .dim .fs .tbc {
  stroke: #d3d8de;
}
.wd-svg .dim .td {
  fill: #d3d8de;
}
.wd-svg .dim .fb {
  fill: #8a9097;
}
.wd-svg .dim .w {
  stroke: #f4f5f6;
}

.wd-svg .lvd {
  stroke: var(--paper);
  stroke-width: calc(1.75px * var(--k));
  stroke-linejoin: round;
}
.wd-svg .lvl-lim {
  stroke: var(--paper);
  stroke-width: calc(1px * var(--k));
  stroke-dasharray: calc(4px * var(--k)) calc(3px * var(--k));
}

/* The title block: a measure lights in ink as its word arrives; the others wait in grey. */
.tblock-c {
  transition: opacity var(--wd-fade) ease-out;
}
.tblock .dimc {
  color: #c3c7cc;
}
.wd-beats .kw[data-cell].kw-on {
  text-decoration-color: var(--ink);
}

/* S6: the simulated outcomes are drawn on a canvas beneath the chart's axes. */
.fan-c {
  position: absolute;
  pointer-events: none;
}
.fan-c + .wd-svg {
  position: relative;
}
.js .nojs-only {
  display: none;
}

/* The chart's hairlines multiply over the simulated outcomes, so no white lines cut the cloud. */
#s6 .wd-svg .h {
  mix-blend-mode: multiply;
}
/* A label that sits over the simulated outcomes keeps a paper halo, so the cloud never covers it. */
.wd-svg .halo {
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 4px;
  stroke-linejoin: round;
}

/* ---- Edges ---- */
@media (min-width: 48rem) {
  /* The opening's plant keeps the same space below it as above, clear of the next heading. */
  .wd-hero-frame {
    margin-bottom: clamp(2.5rem, 6svh, 4.5rem);
  }
  /* A held row's words never rise above their column: if they are taller, they run on below. */
  .wd-hold .wd-text {
    justify-content: safe center;
  }
}
/* On a short screen a held row's words get a little closer, so the longest (S1) fits. */
@media (min-width: 48rem) and (max-height: 52rem) {
  .wd-hold .wd-vis,
  .wd-hold .wd-text {
    top: calc(var(--hh) + 0.5rem);
    height: calc(100svh - var(--hh) - 1rem);
  }
  .wd-hold .wd-text h3 {
    margin-top: 1.25rem;
  }
  .wd-hold .wd-text p + p {
    margin-top: 0.75rem;
  }
}

/* Written by tools/build.mjs: each drawing's aspect ratio, each row's number of beats, and the
   sizes of the fixed size labels. Edit the drawings, then run the build again. */
.wd-svg.ar-1-0000 {
  --ar: 1.0000;
}
.wd-svg.ar-1-2500 {
  --ar: 1.2500;
}
.wd-svg.ar-1-4815 {
  --ar: 1.4815;
}
.wd-svg.ar-1-8605 {
  --ar: 1.8605;
}
.beats-3 {
  --beats: 3;
}
.beats-4 {
  --beats: 4;
}
.beats-5 {
  --beats: 5;
}
.beats-6 {
  --beats: 6;
}
.wd-svg .fs text.fz13 {
  font-size: 13px;
}