/* How it works: the run-again stage (data-scene="run-again", its reveal's
   root), led by its headline "Run. Edit. Run again." as an RER display
   line, then the title at the left and the owner's paragraph at the right,
   then "Two lines", a full-width hairline diagram: the software's thin
   line above, your version's brighter line below, and six of the
   software's improvements each carried down an S-curve through a ticked
   checkpoint into yours. Three of your own changes sit on your line, and
   both lines trail off in dashes past the page's edge.

   Each carry is one column: its dot on the software's line at 20%, its
   checkpoint at the middle, and where it joins your line at 72%.
   Layout: a 12-column grid at 901px and up, one column below. The band's
   own top and bottom space (not the shared --section-space, so the job and
   the closing call keep their own room) give the headline generous air
   above and below: both scale with the viewport's height (svh, so a short
   or a tall window gets a share of it, not a fixed count of pixels), each
   with its own clamp per width tier below. The bottom share keeps the
   makers stage's headline clear of the diagram, with room to spare.
   Lengths that place the band are whole pixels, so the stages below land
   on whole pixels (a band on a fraction of a pixel re-rasters differently
   after a partial capture). */

.how {
  padding-top: round(clamp(380px, 44svh, 480px), 1px);
  padding-bottom: round(clamp(260px, 30svh, 340px), 1px);
  height: calc-size(auto, round(up, size, 1px));
}

.how-step {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
}
.how-step > .display { margin-bottom: clamp(32px, 3vw, 56px); }

.how-lead {
  grid-column: 1 / span 7;
  max-width: 16em;
  margin: 0;
  font-size: clamp(28px, 3.3vw, 62px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--paper);
  text-wrap: balance;
}

.how-body { grid-column: 8 / span 5; padding-top: 0.3em; }

.lines {
  --names: clamp(64px, 11vw, 168px);
  --above: 64px;
  --flow: clamp(150px, 16vw, 250px);
  --below: 64px;
  --tail: var(--gutter);
  position: relative;
  grid-column: 1 / -1;
  margin: clamp(64px, 6.5vw, 112px) 0 0;
  padding: var(--above) 0 var(--below) var(--names);
}

.lines-name {
  position: absolute;
  left: 0;
  margin: 0;
  font: 400 clamp(12px, 1.2vw, 18px)/1.2 var(--mono);
  color: var(--text-soft);
  translate: 0 -50%;
}
.lines-name.is-software { top: var(--above); }
.lines-name.is-yours { top: calc(var(--above) + var(--flow)); color: var(--paper); }

.lines-track { position: relative; height: var(--flow); }

.lines-rail {
  --c: rgba(236, 235, 231, 0.62);
  position: absolute;
  left: 0;
  right: calc(var(--tail) * -1);
  height: 1px;
  translate: 0 -50%;
  background:
    linear-gradient(var(--c), var(--c)) left / calc(100% - var(--tail)) 100% no-repeat,
    repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 12px) right / calc(var(--tail) - 8px) 100% no-repeat;
  transform-origin: left center;
}
.lines-rail.is-software { top: 0; }
.lines-rail.is-yours {
  --c: var(--paper);
  top: 100%;
  height: 3px;
  box-shadow: 0 0 12px rgba(243, 241, 236, 0.28);
}

.lines-carries {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.carry { position: relative; }

.carry-dot, .carry-join {
  position: absolute;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--paper);
}
.carry-dot { left: 20%; top: 0; }

.carry-curve { position: absolute; left: 20%; top: 0; width: 52%; height: 100%; overflow: visible; }
.carry-curve path { fill: none; stroke: rgba(236, 235, 231, 0.7); stroke-width: 1.2; }

.carry-check {
  position: absolute;
  left: 46%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 1.2px solid var(--paper);
  background: var(--ink);
}
.carry-check svg { width: 14px; height: 14px; fill: none; stroke: var(--paper); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* The first carry's marks: "improves" over its dot, and what the check
   means beside its checkpoint. */
.carry-flag {
  position: absolute;
  left: 20%;
  bottom: calc(100% + 8px);
  padding-bottom: 14px;
  translate: -50% 0;
  font: 400 clamp(11px, 0.95vw, 14px)/1 var(--mono);
  color: var(--text);
}
.carry-flag::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 1px; height: 10px; background: var(--hairline); }
.carry-say {
  position: absolute;
  left: calc(46% + 24px);
  top: 50%;
  width: 11em;
  margin: 0;
  translate: 0 -50%;
  font: 400 clamp(11px, 0.85vw, 13px)/1.35 var(--mono);
  color: var(--text-soft);
}

/* A change of your own where it joins your line: a lit dot, a tick and its
   name below. */
.carry-kept { position: absolute; left: 72%; top: 100%; }
.carry-join { left: 0; top: 0; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; box-shadow: 0 0 12px rgba(243, 241, 236, 0.6); }
.carry-kept-name {
  position: absolute;
  left: 0;
  top: 8px;
  width: max-content;
  max-width: 14em;
  margin: 0;
  padding-top: 14px;
  translate: -50% 0;
  font: 400 clamp(11px, 1vw, 15px)/1.3 var(--mono);
  text-align: center;
  color: var(--text);
}
.carry-kept-name::before { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 10px; background: var(--hairline); }

@media (max-width: 900px) {
  .how {
    padding-top: round(clamp(280px, 34svh, 360px), 1px);
    padding-bottom: round(clamp(220px, 28svh, 300px), 1px);
  }
  .how-step { display: block; }
  .how-step > .display { margin-bottom: clamp(28px, 4.5vw, 40px); }
  .how-lead { max-width: 15em; font-size: clamp(26px, 4.8vw, 40px); }
  .how-body { margin-top: 20px; padding-top: 0; }
  .lines { --names: 0px; --above: 72px; --below: 88px; }
  .lines-name { translate: 0 -100%; padding-bottom: 8px; }
  .lines-name.is-software { left: auto; right: 0; top: var(--above); }
  .lines-name.is-yours { left: auto; right: 0; top: auto; bottom: 12px; translate: none; padding: 0; }
  .carry-say { display: none; }
  /* "improves" starts at the gutter, its tick still over the first dot. */
  .carry-flag { left: 0; right: 0; translate: none; }
  .carry-flag::after { left: 20%; }
}

@media (max-width: 640px) {
  .how {
    padding-top: round(clamp(220px, 34svh, 300px), 1px);
    padding-bottom: round(clamp(200px, 30svh, 280px), 1px);
  }
  .lines { --flow: 150px; margin-top: 48px; }
  .carry-check { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
  .carry-check svg { width: 11px; height: 11px; }
  .carry-kept-name { max-width: 7.5em; }
  .carry-join { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
}