/*
 * busywork: workflows, AI and admin (bone field). Thread lives in busywork.js.
 *
 * Compact (under 1024): the thread runs down the left margin and each job card is
 * hung off it by a node and a short horizontal lead line.
 * Desktop: the heading reads in normal flow, then a pinned 100svh stage holds the key
 * line and the thread. The thread is drawn in a wide, shallow box so there is room for
 * a card above it and a card below it inside one screen.
 *
 * Why the cards sit where they do. Each card's near vertical edge is parked on its
 * node's x, so the 1px lead line is a true vertical from the node to the card's corner
 * and the card visibly hangs off the thread. Cards alternate below and above, so
 * neighbours never share a band; only cards two apart do, and those are set far enough
 * apart in x to clear. --lift pushes a card further from its node where the thread
 * would otherwise pass under it (step 5 only).
 *
 * While the stage is pinned a card that hangs past its bottom edge cannot be scrolled
 * to at any point in the scene, so in that state only (see the height budget block at
 * the end of the desktop stage) the picture's height and the top of .busywork__map-wrap
 * are derived from the room one screen actually leaves. The picture is the part of the
 * card that gives, because it is the only part that can be smaller and still be the
 * same thing: it takes its width from its height at 4:5, so the ratio holds, while the
 * card's own width stays where the chip needs it and the chip is never cut.
 *
 * No hidden states here: JS sets the starting states itself, so without JS or with
 * reduced motion the thread, the tail, the stop, every card and every chip are shown.
 */

.busywork {
  position: relative;
  overflow-x: clip;
  /* vertical gap from a node to its card, and the drawn width of the thread */
  --bw-gap: 20px;
  --bw-stroke: 2.4;
}

/* ---------- intro ---------- */

.busywork__intro { padding-top: var(--section-y); }
.busywork__eyebrow { margin-bottom: 20px; }
.busywork__title { max-width: 13ch; }
.busywork__line { margin-top: 20px; }

.busywork__key { margin-top: clamp(40px, 6vw, 72px); }
.busywork__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

/* The head marker, also used as the legend dot beside the key line. */
.bw-legend { margin-left: calc(24px - var(--gx) - 7px); }
.bw-head,
.bw-legend {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--lime);
  border: 3px solid var(--ink);
  flex: none;
}
/*
 * A ring of field around the head, so it sits on the thread rather than in it. The
 * head only exists while the thread is being drawn: at rest the thread's end is the
 * ink stop on the closing line, so no marker is ever stranded in mid air.
 */
.bw-head {
  display: none;
  box-shadow: 0 0 0 3px var(--bone);
}
.busywork.is-live .bw-head { display: block; }

/* ---------- compact thread (phones and tablets) ---------- */

.busywork__map-wrap { margin-top: 26px; }
.busywork__map {
  position: relative;
  padding-block: 38px 34px;
}
.bw-wave { display: none; }
.bw-rail {
  position: absolute;
  left: calc(24px - var(--gx) - 2px);
  top: 0;
  width: 4px;
  height: 100%;
  overflow: visible;
}
.bw-rail__path,
.bw-wave__path {
  fill: none;
  stroke: var(--ink);
  stroke-width: var(--bw-stroke);
  stroke-linecap: round;
}
.bw-head {
  position: absolute;
  z-index: 4;
  left: calc(24px - var(--gx));
  top: 100%;
  transform: translate(-50%, -50%);
}
.busywork.is-live .bw-head { top: 0; transform: none; }

/* The two times cap the ends of the thread, so the overnight story reads in one
   glance and no caption has to carry a clock. */
.bw-time {
  position: absolute;
  left: calc(24px - var(--gx) + 18px);
  color: var(--ink);
}
.bw-time--start { top: 0; }
.bw-time--end { bottom: 2px; }

.bw-steps {
  display: grid;
  gap: clamp(40px, 9vw, 64px);
  padding: 0;
  margin: 0;
  list-style: none;
}
.bw-step { position: relative; }
.bw-step__node {
  position: absolute;
  z-index: 2;
  left: calc(24px - var(--gx));
  top: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--bone);
  border: 2px solid var(--ink);
}
/* The lead line: the node is on the thread, the line runs to the card's near corner. */
.bw-step__lead {
  position: absolute;
  z-index: 1;
  left: calc(24px - var(--gx) + 4px);
  top: 0;
  width: calc(28% - 24px + var(--gx) - 4px);
  height: 1px;
  background: var(--ink);
}
.bw-step__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 72%;
  margin-left: auto;
}
.bw-step__caption {
  margin: 0;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: .95rem;
  line-height: 1.38;
  max-width: 24ch;
  text-wrap: pretty;
}

/* ---------- the job card ---------- */

.bw-step__tile {
  position: relative;
  background: var(--paper-hi);
  border: 1px solid var(--rule-c);
  border-radius: 3px;
  box-shadow: var(--shadow-print);
  transform: rotate(var(--rot, 0deg));
  transform-origin: 0% 0%;
  overflow: hidden;
}
.bw-step__num {
  display: block;
  padding: 9px 12px 8px;
  border-bottom: 1px solid var(--rule-c);
  font-weight: 800;
  font-size: clamp(1rem, calc(var(--bw-tw, 200px) * .135), 1.5rem);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--ink-soft);
}
.bw-step__window {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sand);
}
.bw-step__window.is-diagram,
.bw-step__window.is-screenshot { background: var(--paper-hi); }
.bw-step__window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.bw-step__window.is-screenshot img { object-fit: contain; }
.bw-step__bar {
  display: flex;
  align-items: center;
  padding: 7px 8px;
  border-top: 1px solid var(--rule-c);
}
/* The chip is a stamped docket line on its own hairline row, not a sticker on a
   photo: always legible, and it does not change when the owner swaps an image. */
.bw-step__chip {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--ink);
  font-size: clamp(.625rem, calc(var(--bw-tw, 200px) * .072), .8125rem);
  transform-origin: 0% 50%;
}
.bw-step__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--cobalt);
}
.bw-step__chip-t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- the drawings (machine steps) ---------- */
/* Shape only. No names, no addresses, no numbers, no redaction bars. */

.bw-step__draw {
  position: absolute;
  inset: 0;
  display: grid;
  padding: 10% 11%;
}
.bw-dg { display: grid; gap: 9%; min-height: 0; }
.bw-dg__row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px 7px 9px;
  border: 1px solid var(--rule-c);
  border-radius: 2px;
  background: var(--paper);
}
.bw-dg__row.is-new {
  border-left: 3px solid var(--lime);
  padding-left: 7px;
}
.bw-dg__ring {
  width: 10px;
  height: 10px;
  flex: none;
  border: 1px solid var(--ink);
  border-radius: 50%;
}
.bw-dg__bars {
  display: grid;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.bw-dg__bars i {
  display: block;
  width: var(--w, 60%);
  height: 1px;
  background: var(--ink-soft);
}
.bw-dg__tick {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--ink);
}

.bw-dg--contact { grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 7%; }
.bw-dg--calendar { grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
/* minmax(0, 1fr), not 1fr: the day letters are the only text in any drawing, so this
   is the only row whose min-content width can push a drawing wider than the window it
   is drawn in. At 1fr a narrow window lost the Friday column off the clipped edge and
   took the cell grid with it, because both grids are laid out to the same width. */
.bw-dg__week {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
}
.bw-dg__day {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 75%;
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: .06em;
  text-align: center;
  padding-bottom: 5px;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
}
.bw-dg__day.is-on {
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 4px;
}
.bw-dg__cells {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 3px;
}
.bw-dg__cell {
  border: 1px solid var(--rule-c);
  border-radius: 1px;
}
.bw-dg__cell.is-booked {
  border-color: var(--ink);
  background:
    repeating-linear-gradient(45deg, rgba(17, 17, 16, .55) 0 1px, transparent 1px 5px),
    var(--lime);
}

.bw-dg--form { align-content: center; gap: 8px; }
.bw-dg__field {
  display: block;
  height: 14px;
  border: 1px solid var(--rule-c);
  border-radius: 2px;
  background: var(--paper);
}
.bw-dg__field.is-tall { height: 30px; }
.bw-dg__button {
  display: block;
  height: 16px;
  width: 52%;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--lime);
}

.bw-dg--reply { align-content: center; gap: 8px; justify-items: start; }
.bw-dg__bubble {
  display: block;
  height: 24px;
  width: 72%;
  border: 1px solid var(--rule-c);
  border-radius: 10px 10px 10px 2px;
  background: var(--paper);
}
.bw-dg__bubble.is-out {
  justify-self: end;
  width: 62%;
  border-color: var(--ink);
  border-radius: 10px 10px 2px 10px;
  background: var(--lime);
}
.bw-dg__bubble.is-short { width: 44%; }

.bw-dg--note { place-content: center; }
.bw-dg__note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid var(--rule-c);
  border-radius: 2px;
  background: var(--paper);
}
.bw-dg__badge {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--lime);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .bw-step__card { width: 58%; }
  .bw-step__lead { width: calc(42% - 24px + var(--gx) - 4px); }
}

/* ---------- desktop stage ---------- */

@media (min-width: 1024px) {
  .busywork {
    --bw-gap: 22px;
    /*
     * One card size for the whole run; only the resting tilt varies. The size tracks
     * the viewport because a card above the thread and a card below it have to share
     * one screen with the thread's own rise: 39svh pays for the two cards, 2.7vw pays
     * for the rise (the thread box is 17.5% of the page width tall), and 152px pays
     * for the gaps, the key line and the header.
     *
     * The 124px floor is the chip's, not taste. The chip row spends 32px of the card
     * on its own chrome (the tile's two borders, 16px of padding, the 7px dot and its
     * 7px gap), .bw-step__chip's font-size is already pinned at its 10px floor for any
     * card under 139px and .bw-step__chip-t is nowrap with an ellipsis, so the text can
     * neither shrink nor reflow and only the ellipsis gives. The widest chip the
     * shipped content carries, "Booked: Thu 10am", measures 89px at 10px, so it needs
     * a 121px card; 124 is that plus slack. At the old 112px floor that chip showed
     * 0.90 of its text and "Auto-reply sent" 0.98, at every viewport the floor won.
     */
    --bw-tw: clamp(124px, calc(39svh - 152px - 2.7vw), 200px);
    /* The thread box's height: the map is the wrap's content width and keeps the
       1600 x 280 box, so its height is 17.5% of that width. */
    --bw-mh: calc(.175 * (min(100vw, var(--maxw)) - 2 * var(--gx)));
    /* The composed card's full height: 138px of card that is not the picture (the
       number row, the chip row, the tile's borders, the 12px gap and three caption
       lines) plus the picture at the card's full width and 4:5. */
    --bw-cfull: calc(138px + 1.25 * (var(--bw-tw) - 2px));
    /* How tall the stage has to be when it is not pinned: see the block after the
       small-desktop one below. clamp(56px, 7.5vw, 104px) is .busywork__close's own
       padding-top, which is the room the deepest card is allowed to hang into. */
    --bw-flow-h: calc(143px + 22.7svh + .7349 * var(--bw-mh) + var(--bw-gap)
      + var(--bw-cfull) + 8px - clamp(56px, 7.5vw, 104px));
  }
  .busywork__intro { padding-bottom: clamp(26px, 3.4svh, 46px); }
  .busywork__title { max-width: 18ch; font-size: min(var(--fs-h2), 10svh); }
  .busywork__line { margin-top: clamp(14px, 2.2svh, 24px); max-width: 44ch; }

  .busywork__stage {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 620px;
  }
  .busywork__key {
    position: absolute;
    left: 0;
    right: 0;
    top: clamp(72px, 9svh, 96px);
    margin: 0 auto;
  }
  .bw-legend { margin-left: 0; }
  .bw-legend::before {
    content: '';
    position: absolute;
    right: calc(100% + 6px);
    top: 50%;
    width: 26px;
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: var(--ink);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 70%);
    mask-image: linear-gradient(90deg, transparent 0, #000 70%);
  }
  .busywork__label { margin-left: 32px; }

  /* The thread's box. Its top is set so the deepest card clears the bottom of the
     stage and the highest card clears the key line, at both 900 and 768 tall. While
     the stage is pinned the budget block at the end of this file may raise it. */
  .busywork__map-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(143px + 22.7svh);
    margin: 0 auto;
  }
  .busywork__map {
    position: relative;
    width: 100%;
    aspect-ratio: var(--bw-box, 1600 / 280);
    padding: 0;
  }
  .bw-wave {
    display: block;
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .bw-rail { display: none; }

  .bw-time {
    left: auto;
    color: var(--ink-soft);
  }
  .bw-time--start { left: 0; top: 78%; transform: translateY(-26px); }
  .bw-time--end { right: 0; bottom: auto; top: 25%; transform: translateY(-26px); }

  .bw-steps { position: absolute; inset: 0; display: block; padding: 0; }
  .bw-step {
    --lift: 0px;
    position: absolute;
    left: var(--ax);
    top: var(--ay);
    width: 0;
    height: 0;
  }
  .bw-step__node { left: 0; top: 0; }
  .bw-step__lead {
    left: 0;
    width: 1px;
    height: calc(var(--bw-gap) + var(--lift));
    background: var(--ink);
  }
  .bw-step.is-below .bw-step__lead { top: 0; }
  .bw-step.is-above .bw-step__lead { top: auto; bottom: 0; }

  .bw-step__card {
    position: absolute;
    z-index: 2;
    width: var(--bw-tw);
    margin: 0;
    gap: 12px;
  }
  .bw-step.is-lead-r .bw-step__card { left: 0; }
  .bw-step.is-lead-l .bw-step__card { right: 0; }
  .bw-step.is-below .bw-step__card { top: calc(var(--bw-gap) + var(--lift)); flex-direction: column; }
  .bw-step.is-above .bw-step__card { bottom: calc(var(--bw-gap) + var(--lift)); flex-direction: column-reverse; }
  /* The card pivots about the corner the lead line lands on, so the tilt never
     pulls the card off its own thread. */
  .bw-step.is-below.is-lead-r .bw-step__tile { transform-origin: 0% 0%; }
  .bw-step.is-below.is-lead-l .bw-step__tile { transform-origin: 100% 0%; }
  .bw-step.is-above.is-lead-r .bw-step__tile { transform-origin: 0% 100%; }
  .bw-step.is-above.is-lead-l .bw-step__tile { transform-origin: 100% 100%; }

  .bw-step__window { aspect-ratio: 4 / 5; }
  .bw-step__tile { align-self: stretch; }
  /* A caption narrower than about 168px runs to three lines and costs the card its
     height, so it is allowed to run past the card, outward from the thread. Three
     lines is the worst the schema can produce: its 60-character limit still sets in
     three lines at 168px, measured. */
  .bw-step__caption {
    width: max(100%, 168px);
    font-size: 1rem;
    line-height: 1.34;
    max-width: none;
  }
  .bw-step.is-lead-r .bw-step__card { align-items: flex-start; }
  .bw-step.is-lead-l .bw-step__card { align-items: flex-end; }
  .bw-step.is-lead-l .bw-step__caption { text-align: right; }

  /* Step 5 only: the thread passes under the left of its card, so it hangs lower. */
  .bw-step--5 { --lift: 11px; }
}

/* Small desktops: the heading sets tighter so the stage keeps its full height. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .busywork__title { font-size: min(var(--fs-h2), 7.4svh, calc(5.3vw - 4px)); }
  .busywork__line { max-width: 36ch; }
}

/*
 * Unpinned desktop (reduced motion, no JS, or GSAP missing). Here a card below the
 * stage's bottom edge is fine, because the page scrolls: what it may not do is reach
 * into the closing block. The only room it has is that block's own top padding, so the
 * stage has to be at least as tall as the deepest card less that padding. Composed, the
 * deepest card's node sits 73.49% down the thread box, a lead gap below the box's top
 * at 143px + 22.7svh, and the card hangs from there; the 8px is the same head-room as
 * the pinned budget, for the same reason (--bw-cfull is a constant at the card's floor
 * width and the number and chip rows grow past it on a wide card).
 *
 * This is new in round three and it is the cost of the 124px floor: at the old 112px
 * floor the deepest card cleared the closing rule by 2.5px at 1366x600, measured, which
 * was luck rather than design, and a card 12px wider is a picture 15px taller. Where
 * one screen was already enough the max() leaves the stage where it was: measured, the
 * stage and the closing rule do not move at 1440x900 or 1024x768, and the clearance
 * where it does bind reads 29.4px at 1366x600, 1280x560, 1024x600 and 1920x560.
 */
@media (min-width: 1024px) {
  html:not(.motion-ready) .busywork__stage { min-height: max(620px, var(--bw-flow-h)); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .busywork__stage { min-height: max(620px, var(--bw-flow-h)); }
}

/* ---------- the height budget, pinned desktop only ---------- */

/*
 * Only while the stage is pinned is the room finite. ScrollTrigger pins the stage at
 * the top of the viewport, so the visitor gets exactly one screen of it for the whole
 * scrubbed scene and a card hanging past the bottom edge is unreachable at every
 * scroll position. busywork.js creates that pin in
 * mm.add('(min-width: 1024px) and (prefers-reduced-motion: no-preference)'), and only
 * once GSAP has loaded, so this block carries the same condition plus html.motion-ready
 * (core.js drops that class if a vendor script fails). With reduced motion, with JS
 * off, or with GSAP missing the stage sits in normal flow, a card below its bottom
 * edge scrolls into view like anything else, and the composed layout above stands.
 *
 * The room, in one screen, between the fixed site header and the bottom of the stage:
 *
 *   --bw-sh    one screen. The stage's own 620px floor only adds height below the
 *              bottom of the screen, which is no use to a card.
 *   --bw-mh    the thread box's height: the map is the wrap's content width and keeps
 *              the 1600 x 280 box, so its height is 17.5% of that width.
 *   --bw-rise  the thread's climb from the deepest card's node (73.49% down the box)
 *              to the highest card's node (34.85%). The two cards share what is left.
 *   --bw-head  what the highest card has to clear: the 56px fixed header, plus air.
 *              Not the key line, deliberately. The composed layout already lets the
 *              highest card sit alongside the key line (at 1440x900 the card's top is
 *              87.6 and the key line's bottom 95.0) and it reads, because the key line
 *              is at the left margin and that card is at about 70% of the width. Taking
 *              the key line as the floor instead is what made the budget bite at window
 *              sizes that had room to spare.
 *   --bw-ch    half the rest, less 2px so a rounded value cannot land outside the
 *              stage. This is the most a card can be, whatever the box does: raising
 *              the box pulls the deepest card up and pushes the highest card up by the
 *              same amount, so it buys height for one only by spending it on the other.
 *
 * WHICH PART OF THE CARD PAYS. The card holds three things and they do not have equal
 * claims, so the budget does not take the squeeze out of one number and let the others
 * land where they fall:
 *
 *   the chip     fixes the card's WIDTH, so the width is not available to spend. The
 *                chip row spends 32px of the card on its own chrome (the tile's two
 *                borders, 16px of padding, the 7px dot and its 7px gap) and
 *                .bw-step__chip's font-size is already pinned at its 10px floor for any
 *                card under 139px, while .bw-step__chip-t is nowrap with an ellipsis.
 *                So the text can neither reflow nor shrink and only the ellipsis gives.
 *                The widest chip the shipped content carries, "Booked: Thu 10am",
 *                measures 89px at 10px, which needs a 121px card; hence the 124px floor
 *                on --bw-tw in the desktop block above. That floor is what the chip
 *                needs plus 3px of slack, not a taste number.
 *   the caption  fixes its own height and nothing else. It is the one part of the card
 *                whose height CSS cannot be told, so the budget assumes the worst the
 *                60-character schema limit can set and the block at the end of this
 *                file buys a line back where there is room to run the caption wider.
 *   the window   is the elastic one, and it is the picture: the only thing in the card
 *                that can be smaller and still be the same thing. It gets the height
 *                that is left and takes its WIDTH from that height at 4:5, centred on
 *                the docket with the card's own paper beside it where the two no longer
 *                match. So the 4:5 that docs/design-spec.md 6.6 and the admin help text
 *                both state holds by construction at every pinned size, and there is
 *                nothing left for the max-height below to squeeze. The two line
 *                drawings keep their proportions with it, because they are laid out in
 *                the window: the contact record's three rows and the calendar's five
 *                columns shrink on both axes together instead of being flattened on
 *                one. Their own rules and letters are still set in px, so at the
 *                shortest windows they are small and the day letters crowd; measured,
 *                the week still prints all five days down to 1280x560.
 *
 *   --bw-cfix   the card less the picture, measured at the card's floor width: the 35px
 *               number row, the 25px chip row, the tile's two borders, the 12px card
 *               gap and three 21.4px caption lines.
 *   --bw-wh     the picture's height: the budget's leftover, or the full inner width of
 *               the card at 4:5, whichever is smaller. The second term is what keeps a
 *               window that has room to spare at exactly its composed size, so no
 *               height is invented. The 56px floor only keeps the value positive under
 *               about 500px of viewport, where the leftover runs out; there the card
 *               goes over --bw-ch and the max-height below takes over. Measured at
 *               1280x480 and 1024x480, well under the sizes this is built for, the
 *               window still rendered 23x29 and 30x37, so the ratio survives that
 *               hand-over and the picture simply ends up very small.
 *   --bw-cmax   the tallest a card can render, used to place the box. It stays on the
 *               three-line 138px even where the block at the end hands the third line's
 *               height to the window, because a box placed for a card shorter than the
 *               one that renders drops the deepest card off the bottom of the stage:
 *               measured at 1024x720 under round two's arithmetic, that read 3.9px
 *               outside the viewport.
 *   --bw-slack  head-room, because --bw-cfix is a measured constant and not an
 *               identity. The number row and the chip row both scale with --bw-tw, so a
 *               card wider than the floor costs more than the constant says: those two
 *               rows and the tile's borders measure 62px at the floor, 64px at
 *               1536x864, 67px at 1600x900 and 72px at 1920x1080. 8px covers that at
 *               every size where the budget actually binds; it cannot bind where the
 *               card is widest, because a card is only wide on a tall screen. It sits
 *               in the box's position rather than in --bw-ch because that is where it
 *               buys containment: at 1536x864 and 1600x900 it is the composed position,
 *               not the card, that overruns.
 */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html.motion-ready .busywork {
    --bw-sh: 100svh;
    --bw-rise: calc(.3864 * var(--bw-mh));
    --bw-head: 62px;
    --bw-slack: 8px;
    --bw-ch: calc((var(--bw-sh) - var(--bw-head) - var(--bw-rise) - 2 * var(--bw-gap) - 2px) / 2);
    --bw-cfix: 138px;
    --bw-wh: max(56px, min(calc(1.25 * (var(--bw-tw) - 2px)), calc(var(--bw-ch) - var(--bw-cfix))));
    --bw-cmax: min(var(--bw-ch), calc(138px + var(--bw-wh)));
  }
  /* The composed position, or the lowest the box may sit before the deepest card runs
     past the bottom of the stage, whichever is higher up the screen. On a short screen
     the box comes up rather than the card hanging off the edge. */
  html.motion-ready .busywork__map-wrap {
    top: min(calc(143px + 22.7svh),
      calc(var(--bw-sh) - .7349 * var(--bw-mh) - var(--bw-gap) - var(--bw-cmax) - var(--bw-slack)));
  }
  /* The picture takes the height the budget left and its width from that height, so the
     ratio is kept by the sizing rather than by a rule that something else has to make
     room for. The tile is a flex column only so the max-height can actually bite: it is
     the net under a caption or a chip that sets taller than the arithmetic above
     assumed. Measured, the window shrinks under that net with its width following, so
     the picture gets smaller rather than letterboxed; it is the one thing in the card
     that can get smaller without losing meaning. */
  html.motion-ready .bw-step__card { max-height: var(--bw-ch); }
  html.motion-ready .bw-step__tile {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  html.motion-ready .bw-step__window {
    height: var(--bw-wh);
    width: auto;
    align-self: center;
    min-height: 0;
  }
  html.motion-ready .bw-step__num,
  html.motion-ready .bw-step__bar,
  html.motion-ready .bw-step__caption { flex: none; }
}

/*
 * Below 740px of viewport the leftover is what sets the picture's height, so the
 * cheapest room left to find is in the caption rather than in the picture. The caption
 * runs outward from the thread into open field, so letting it run further costs
 * nothing: at 240px even the schema's 60-character maximum sets in two lines instead of
 * three, which is 21px of height the window keeps. --bw-cmax is deliberately not
 * recomputed: see the note on it above.
 *
 * The cap on that width is a collision, not taste. Stations 2 and 4 are the pair whose
 * captions run towards each other (2 is lead-r at 29.5% of the content width, 4 is
 * lead-l at 70.5%), as are 3 and 5, so two captions may not share more than the 41%
 * between them: 20% each, with the rest as margin. 240px is exactly that bound at
 * 1280 wide, which is why this block starts there: at 1024 wide the bound is about
 * 189px, a long caption still sets in three lines, and widening it would only move the
 * composed layout for nothing.
 *
 * 740px is below 768, so every size that was already right keeps the composed 168px
 * caption.
 */
@media (min-width: 1280px) and (max-height: 740px) and (prefers-reduced-motion: no-preference) {
  html.motion-ready .busywork { --bw-cfix: 117px; }
  html.motion-ready .bw-step__caption {
    width: max(100%, min(240px, calc(.2 * (min(100vw, var(--maxw)) - 2 * var(--gx)))));
  }
}

/* ---------- the closing block ---------- */

.busywork__close {
  padding-top: clamp(56px, 7.5vw, 104px);
  padding-bottom: clamp(72px, 9vw, 128px);
}
.busywork__rule { margin-bottom: clamp(30px, 3.6vw, 48px); }
.busywork__close-grid { row-gap: 0; align-items: start; }

.busywork__ai {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 92%;
  font-size: var(--bw-fs-close, clamp(2rem, 1rem + 3.4vw, 4rem));
  line-height: .92;
  letter-spacing: -.035em;
  max-width: 20ch;
  text-wrap: balance;
}

/* The thread does not stop at the last card. It runs on into this line and parks as
   the full stop after "send", so the section draws the brand mark as its last move:
   a lime swipe ending in an ink dot. The real full stop stays in the text for screen
   readers; only its ink is handed to the dot. */
.bw-stop {
  position: relative;
  display: inline-block;
  color: transparent;
}
.bw-stop__dot {
  position: absolute;
  left: 0;
  bottom: .035em;
  display: block;
  width: .2em;
  height: .2em;
  border-radius: 50%;
  background: var(--ink);
}
.bw-tail {
  position: absolute;
  max-width: none;
  overflow: visible;
  pointer-events: none;
}
.bw-tail--d { display: none; }
.bw-tail--c {
  left: calc(.1em - 228px);
  bottom: calc(.135em - 38px);
  width: 230px;
  height: 40px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 15%);
  mask-image: linear-gradient(90deg, transparent 0, #000 15%);
}
.bw-tail__path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.busywork__ai-col { display: contents; }
.busywork__ai { order: 1; }
.busywork__also { order: 2; }
.busywork__close-cta { order: 3; }

.busywork__also {
  grid-column: 1 / -1;
  margin-top: 58px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.busywork__also-intro { margin-bottom: 10px; }
.busywork__tally {
  margin: 0;
  padding: 0;
  list-style: none;
}
.busywork__tally-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}
.busywork__tally-num { color: var(--ink-soft); }
.busywork__tally-name {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.3;
}

.busywork__close-cta {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

@media (min-width: 768px) {
  .busywork__ai-col {
    display: block;
    grid-column: 1 / span 7;
    grid-row: 1;
  }
  .busywork__ai { grid-column: auto; }
  .busywork__close-cta {
    grid-column: auto;
    margin-top: clamp(28px, 4vw, 52px);
    padding-top: 0;
    border-top: 0;
  }
  .busywork__also {
    grid-column: 9 / span 4;
    grid-row: 1;
    margin-top: 0;
    padding-top: .25em;
    border-top: 0;
  }
}

@media (min-width: 1024px) {
  .bw-tail--c { display: none; }
  .bw-tail--d {
    display: block;
    left: .1em;
    bottom: .135em;
    width: 290px;
    height: 92px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 54%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 54%, transparent 100%);
  }
}