/* Scenes: one full-width composed picture on the Rooftop, WriteUp, Shotgun, Construction, Mailroom and Lori pages.
   Added by scenes_finish.py. Every figure is an invented sample; nothing here is a real screen.

   One family, four pictures:
     lines     1 px warm hairline for structure, 1 px ink for a rule or a joint that completes, 3 px ink for work done
     labels    Manrope 600, 12 px, capitals, .12em
     figures   Manrope 500, tabular numerals
     corners   8 px on the one sheet of paper, 2 px on controls, square on everything else
     anchor    the chosen thing is one crisp carbon block with chalk type; each picture has exactly one at rest,
               and no block ever crosses the column edges (116 and 1324 px at 1440 wide, 20 and 370 px on a phone)
   Ember is for actions only and is not used here (the focus ring is the site's own).

   The finished picture is the plain HTML. html.sc-on (set before first paint by the gate in <head>) holds
   a picture in its starting position until scenes.js plays it once. html.sc-js marks that the controls work.
   Only transform, opacity and stroke-dashoffset ever animate. */

.sc-band {
  --sc-ink: #0B0D0E; --sc-mid: #535956; --sc-ground: #F5F2EC; --sc-panel: #FFFDF8;
  --sc-chalk: #F5F2EC; --sc-soft: #CBD0CC;            /* type on the carbon block: figures, then labels */
  --sc-hair: rgb(199 203 195 / .9); --sc-hair-dark: rgb(245 242 236 / .3);
  --sc-ease: cubic-bezier(.16, 1, .3, 1);
  --sc-m: 1;                        /* how far out of register things start; smaller on a phone */
  position: relative; display: block; box-sizing: border-box; margin: 0; padding: 0;
  background: #F5F2EC; color: #0B0D0E; color-scheme: light;
  overflow: hidden; overflow: clip;
}
.sc-band *, .sc-band *::before, .sc-band *::after { box-sizing: border-box; }

/* The same centred column as the rest of the page: 1208 px on a desktop, 20 px margins on a phone. */
body .sc-band .sc {
  display: block; position: relative; margin: 0 auto; padding: 0 0 96px;
  width: min(1208px, calc(100% - 2 * clamp(20px, 4vw, 56px)));
  font: 500 16px/24px Manrope, system-ui, sans-serif; color: var(--sc-ink);
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0;
}
/* A scene that leads its page sits straight under the opening, with the page's next pale section below it. */
body .sc-band.sc-first .sc { padding: 64px 0 32px; }
body .sc-band :is(p, h2, dl, dt, dd, ul, ol, li, table, th, td) { margin: 0; padding: 0; max-width: none; opacity: 1; text-wrap: wrap; list-style: none; }
body .sc-band :is(p, dt, dd, li, th, td, span, b, strong) { font: inherit; letter-spacing: inherit; color: inherit; }

/* The plate line: what this picture is called, and that it is a sample. */
body .sc-band .sc-plate {
  display: flex; justify-content: space-between; gap: 24px;
  border-top: 1px solid var(--sc-hair); padding-top: 16px;
}
body .sc-band :is(.sc-kicker, .sc-sample, .sc-k, .sc-colhead, .sc-unit, .sc-sheet-top) {
  font: 600 12px/16px Manrope, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-mid);
}
body .sc-band .sc-kicker { color: var(--sc-ink); }
body .sc-band .sc-sample { text-align: right; }

body .sc-band .sc-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 404px; column-gap: 104px; align-items: end;
  margin: 48px 0 56px;
}
body .sc-band .sc-title {
  font: 400 56px/60px Newsreader, Georgia, "Times New Roman", serif !important; font-optical-sizing: auto;
  letter-spacing: -.015em !important; color: var(--sc-ink); text-wrap: balance; max-width: 14em; font-style: normal;
}
body .sc-band .sc-lead { font: 500 18px/28px Manrope, system-ui, sans-serif; color: var(--sc-mid); text-wrap: pretty; }
body .sc-band .sc-hint { font: 600 14px/20px Manrope, system-ui, sans-serif; color: var(--sc-ink); margin-top: 16px; display: none; }
html.sc-js body .sc-band .sc-hint { display: block; }

/* ------------------------------------------------------------------ shared drawing parts */
.sc-band .sc-draw { position: relative; }

/* Anything the visitor can choose. The chosen one is the picture's carbon block. Nothing fades or softens:
   the block is there or it is not. */
.sc-band .sc-pick {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; border-radius: 0; background: none;
  font: inherit; letter-spacing: inherit; color: var(--sc-ink); text-align: left; text-transform: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  min-height: 0; box-shadow: none;
}
.sc-band .sc-pick:disabled { cursor: default; opacity: 1; color: var(--sc-ink); }
/* The site's light-ground focus colour, stated outright: the ring sits on chalk even round a carbon block. */
body .sc-band .sc-pick:focus-visible { outline: 3px solid #A73C12 !important; outline-offset: 4px !important; z-index: 3; }
.sc-band .sc-block[aria-pressed="true"] { background: var(--sc-ink); color: var(--sc-chalk); }
body .sc-band .sc-block[aria-pressed="true"] :is(.sc-name, .sc-num, .sc-v, .sc-say) { color: var(--sc-chalk); }
body .sc-band .sc-block[aria-pressed="true"] :is(.sc-k, .sc-no, .sc-unit, .sc-meter-cap > span, .sc-sub) { color: var(--sc-soft); }

/* Things that swap with the control. With no script, every one of them is simply shown. */
html.sc-js .sc-band .sc-swap:not(.sc-shown) { visibility: hidden; opacity: 0; }
html.sc-js .sc-band .sc-swap.sc-shown { transition: opacity .28s var(--sc-ease); }

/* The foot: one rule across the whole picture, and one plain line under it. */
.sc-band .sc-foot { position: relative; }
.sc-band .sc-rule { display: block; height: 1px; background: var(--sc-hair); transform-origin: 0 50%; }
.sc-band .sc-foot-ink .sc-rule { background: var(--sc-ink); }
.sc-band .sc-status { display: grid; padding-top: 16px; }
body .sc-band .sc-status > p {
  grid-area: 1 / 1; display: grid; grid-template-columns: 232px minmax(0, 1fr); column-gap: 32px; align-items: baseline;
  font: 500 16px/24px Manrope, system-ui, sans-serif; color: var(--sc-mid);
  visibility: hidden; opacity: 0;
}
body .sc-band .sc-status > p > b { font: 600 12px/24px Manrope, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink); }
body .sc-band .sc-status > p.sc-shown { visibility: visible; opacity: 1; transition: opacity .28s var(--sc-ease); }
.sc-band .sc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Drawn connectors, 1 to 1 in CSS pixels. */
.sc-band .sc-wires { position: relative; z-index: 1; display: block; overflow: visible; }
.sc-band .sc-wires path { fill: none; stroke: var(--sc-ink); stroke-width: 1px; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sc-band .sc-wires .sc-dot { fill: var(--sc-ink); }
.sc-band .sc-wires .sc-ring { fill: var(--sc-panel); stroke: var(--sc-ink); stroke-width: 1px; }

/* ------------------------------------------------------------------ Rooftop: the morning register */
.sc-band .sc-strip {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 232px minmax(0, 1fr) 280px; column-gap: 32px; align-items: center;
  width: 100%; height: 120px; padding: 0 24px; border-top: 1px solid var(--sc-hair);
}
/* The block on a chosen strip stops at the column edges; every strip's type is inset 24 px inside them. */
.sc-band .sc-strip::before { content: ""; position: absolute; inset: -1px 0 0; z-index: -1; background: var(--sc-ink); display: none; pointer-events: none; }
.sc-band .sc-strip[aria-pressed="true"] { background: none; }
.sc-band .sc-strip[aria-pressed="true"]::before { display: block; }
.sc-band .sc-id { display: flex; align-items: baseline; gap: 20px; }
body .sc-band .sc-no { font: 600 12px/16px Manrope, system-ui, sans-serif; letter-spacing: .12em; color: var(--sc-mid); }
body .sc-band .sc-name { display: block; font: 600 24px/32px Manrope, system-ui, sans-serif; letter-spacing: -.01em; color: var(--sc-ink); }
.sc-band .sc-meter { display: grid; grid-template-rows: 56px 3px 56px; align-self: center; }
.sc-band .sc-meter-cap { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 12px; }
body .sc-band .sc-meter-cap > span { font: 600 12px/16px Manrope, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-mid); }
.sc-band .sc-track { position: relative; display: block; height: 3px; background: linear-gradient(var(--sc-hair), var(--sc-hair)) 0 1px / 100% 1px no-repeat; }
.sc-band .sc-prog { position: absolute; left: 0; top: 0; bottom: 0; width: var(--sc-p); background: var(--sc-ink); }
.sc-band .sc-strip[aria-pressed="true"] .sc-track { background-image: linear-gradient(var(--sc-hair-dark), var(--sc-hair-dark)); }
.sc-band .sc-strip[aria-pressed="true"] .sc-prog { background: var(--sc-chalk); }
/* What the figure is made of: three parts, each as long as its share of the line above it. */
.sc-band .sc-parts { display: flex; width: var(--sc-p); padding-top: 12px; }
.sc-band .sc-part { position: relative; flex: 1 1 0; min-width: 0; padding-left: 8px; display: flex; flex-direction: column; white-space: nowrap; }
.sc-band .sc-part::before { content: ""; position: absolute; left: 0; top: -15px; width: 1px; height: 31px; background: currentColor; }
body .sc-band .sc-part .sc-v { font: 600 18px/24px Manrope, system-ui, sans-serif; color: var(--sc-ink); }
html.sc-js .sc-band .sc-strip[aria-pressed="false"] .sc-parts { visibility: hidden; }
/* The figure is centred on its line; its unit hangs under it. */
.sc-band .sc-fig { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; margin-top: 22px; }
body .sc-band .sc-fig .sc-num { font: 500 56px/56px Manrope, system-ui, sans-serif; letter-spacing: -.03em; color: var(--sc-ink); }

/* ------------------------------------------------------------------ WriteUp: a quote becomes a document */
.sc-band .sc-quote {
  display: grid; grid-template-columns: minmax(0, 1fr) 208px clamp(380px, calc(100% - 660px), 548px); grid-template-rows: 48px minmax(456px, auto); row-gap: 24px;
  margin-bottom: 56px;
}
.sc-band :is(.sc-entry, .sc-doc) { display: contents; }
body .sc-band .sc-quote > .sc-entry > .sc-colhead { grid-area: 1 / 1; align-self: end; padding-bottom: 16px; }
.sc-band .sc-lines { grid-area: 2 / 1; align-self: start; display: grid; grid-template-rows: repeat(3, 152px); border-bottom: 1px solid var(--sc-hair); }
.sc-band .sc-line { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; border-top: 1px solid var(--sc-hair); }
.sc-band .sc-line dt { display: flex; flex-direction: column; gap: 6px; }
body .sc-band .sc-line .sc-name { font: 600 22px/28px Manrope, system-ui, sans-serif; }
body .sc-band .sc-amt { font: 500 32px/40px Manrope, system-ui, sans-serif; letter-spacing: -.02em; color: var(--sc-ink); text-align: right; white-space: nowrap; }
.sc-band .sc-quote > .sc-wires { grid-area: 2 / 2; width: 208px; height: 456px; }
.sc-band .sc-spine { display: none; }

.sc-band .sc-view { grid-area: 1 / 3; justify-self: end; display: none; }
html.sc-js .sc-band .sc-view { display: flex; }
.sc-band .sc-seg {
  height: 48px; padding: 0 20px; border: 1px solid var(--sc-ink); border-radius: 0; background: transparent;
  font: 600 14px/46px Manrope, system-ui, sans-serif; color: var(--sc-ink); white-space: nowrap;
}
.sc-band .sc-seg:first-child { border-radius: 2px 0 0 2px; }
.sc-band .sc-seg:last-child { border-radius: 0 2px 2px 0; margin-left: -1px; }
.sc-band .sc-seg[aria-pressed="true"] { background: var(--sc-ink); color: var(--sc-chalk); }

.sc-band .sc-sheet {
  grid-area: 2 / 3; position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 32px 36px 0; border: 1px solid var(--sc-hair); border-radius: 8px; background: var(--sc-panel);
  box-shadow: 0 24px 48px -32px rgb(11 13 14 / .5); --sc-pad: 36px;
}
body .sc-band .sc-sheet-top { display: flex; justify-content: space-between; min-height: 20px; margin-bottom: 12px; }
.sc-band .sc-tag { display: grid; justify-items: end; color: var(--sc-ink); }
html.sc-js .sc-band .sc-tag > span { grid-area: 1 / 1; }
/* The quote itself: item, what it cost the dealership (manager only), what the customer pays. */
.sc-band .sc-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sc-band .sc-table :is(th, td) { height: 56px; border-top: 1px solid var(--sc-hair); text-align: right; vertical-align: middle; white-space: nowrap; }
.sc-band .sc-table thead th { height: 28px; border-top: 0; vertical-align: top; }
body .sc-band .sc-table thead th { font: 600 12px/16px Manrope, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-mid); }
.sc-band .sc-table :is(th, td):first-child { text-align: left; width: 38%; }
body .sc-band .sc-table tbody th { font: 500 16px/24px Manrope, system-ui, sans-serif; color: var(--sc-ink); }
body .sc-band .sc-table tbody td { font: 600 18px/24px Manrope, system-ui, sans-serif; color: var(--sc-ink); }
body .sc-band .sc-table tbody td.sc-cost { font-weight: 500; color: var(--sc-mid); }
.sc-band .sc-table tbody tr:last-child :is(th, td) { border-bottom: 1px solid var(--sc-hair); }
/* Under the lines: the customer's terms, or the manager's margin and approval. */
.sc-band .sc-slot { display: grid; align-content: center; flex: 1 1 auto; padding: 12px 0; }
html.sc-js .sc-band .sc-slot > dl { grid-area: 1 / 1; align-self: center; }
.sc-band .sc-slot > dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; min-height: 36px; padding: 6px 0; }
body .sc-band .sc-slot dt { font: 600 12px/24px Manrope, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-mid); white-space: nowrap; }
body .sc-band .sc-slot dd { font: 500 14px/24px Manrope, system-ui, sans-serif; color: var(--sc-ink); text-align: right; }
body .sc-band .sc-slot dd b { font: 600 18px/24px Manrope, system-ui, sans-serif; margin-right: 10px; }
.sc-band .sc-ok::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--sc-ink); }
html.sc-js .sc-band .sc-nojs { display: none; }
/* With no script the sheet shows both views at once, and says so in place of the two swapping names. */
html:not(.sc-js) .sc-band .sc-tag > .sc-swap { display: none; }
/* The total is the sheet's carbon block, edge to edge. */
.sc-band .sc-sum {
  position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  margin: 0 calc(-1 * var(--sc-pad)); padding: 20px var(--sc-pad) 22px; isolation: isolate;
}
.sc-band .sc-sum-fill { position: absolute; inset: 0; z-index: -1; background: var(--sc-ink); transform-origin: 0 50%; }
body .sc-band .sc-sum .sc-k { padding-bottom: 8px; color: var(--sc-soft); }
body .sc-band .sc-sum .sc-num { font: 500 56px/56px Manrope, system-ui, sans-serif; letter-spacing: -.03em; color: var(--sc-chalk); }

/* ------------------------------------------------------------------ Shotgun: the returned key */
/* From the top: the free slot's own label, the day line with its hours and the key, then each car's block
   hanging under its own stretch of the line. */
.sc-band .sc-day { --sc-y: 56px; --sc-drop: 100px; --sc-block: 204px; height: calc(var(--sc-y) + var(--sc-drop) + var(--sc-block)); margin-bottom: 40px; }
.sc-band .sc-axis { position: absolute; left: 0; right: 0; top: var(--sc-y); height: 1px; background: var(--sc-hair); pointer-events: none; }
.sc-band .sc-hours { position: absolute; left: 0; right: 0; top: var(--sc-y); height: 32px; pointer-events: none; }
body .sc-band .sc-hours > span {
  position: absolute; left: calc(var(--sc-a) * 100%); top: 14px; width: 32px; margin-left: -16px; text-align: center;
  font: 600 12px/16px Manrope, system-ui, sans-serif; letter-spacing: .04em; color: var(--sc-ink);
}
.sc-band .sc-hours > span::after { content: ""; position: absolute; left: 50%; top: -13px; width: 1px; height: 7px; background: var(--sc-mid); }
.sc-band .sc-hours > span:first-child { margin-left: 0; text-align: left; }
.sc-band .sc-hours > span:first-child::after { left: 0; }
.sc-band .sc-hours > span:last-child { margin-left: -32px; text-align: right; }
.sc-band .sc-hours > span:last-child::after { left: auto; right: 0; }

.sc-band .sc-free { position: absolute; top: 0; height: var(--sc-y); left: calc(var(--sc-a) * 100%); width: calc((var(--sc-b) - var(--sc-a)) * 100%); pointer-events: none; }
.sc-band .sc-free-id { position: absolute; left: 0; top: 0; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
body .sc-band .sc-free-id .sc-k { color: var(--sc-ink); }
body .sc-band .sc-free-id .sc-v { font: 600 18px/24px Manrope, system-ui, sans-serif; color: var(--sc-ink); }
.sc-band .sc-free-bar { position: absolute; left: 0; right: 0; top: calc(var(--sc-y) - 4px); height: 9px; border: 1px solid var(--sc-ink); border-radius: 2px; background: var(--sc-panel); }

.sc-band .sc-car {
  position: absolute; top: calc(var(--sc-y) + var(--sc-drop)); left: calc(var(--sc-a) * 100%); height: var(--sc-block);
  width: calc((var(--sc-b) - var(--sc-a)) * 100%); padding: 16px 16px 14px;
  display: flex; flex-direction: column; justify-content: space-between; border-top: 1px solid var(--sc-hair);
}
.sc-band .sc-car[aria-pressed="true"] { border-top-color: var(--sc-ink); }
/* Its stretch of the day line, and a hairline dropping from where it starts to the block. */
.sc-band .sc-run { position: absolute; left: 0; top: calc(-1 * var(--sc-drop) - 2px); height: 3px; width: 100%; background: var(--sc-ink); }
.sc-band .sc-car::after { content: ""; position: absolute; left: 0; top: calc(-1 * var(--sc-drop) + 2px); width: 1px; height: calc(var(--sc-drop) - 3px); background: var(--sc-hair); }
.sc-band .sc-car-id { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
body .sc-band .sc-car-id .sc-name { font: 600 22px/28px Manrope, system-ui, sans-serif; }
.sc-band .sc-car-foot { display: flex; flex-direction: column; gap: 8px; }
.sc-band .sc-times { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.sc-band .sc-t { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.sc-band .sc-t-end { align-items: flex-end; text-align: right; }
body .sc-band .sc-t .sc-v { font: 500 24px/32px Manrope, system-ui, sans-serif; letter-spacing: -.01em; color: var(--sc-ink); }
/* The returned time is the picture's one large figure. */
body .sc-band .sc-t-hero .sc-v { font: 500 44px/44px Manrope, system-ui, sans-serif; letter-spacing: -.03em; }
body .sc-band .sc-say { display: block; min-height: 40px; font: 500 14px/20px Manrope, system-ui, sans-serif; color: var(--sc-mid); }
html.sc-js .sc-band .sc-car[aria-pressed="false"] .sc-say { visibility: hidden; }

/* The key rides a box as wide as the day line, so moving the box by a share of itself moves the key along the day. */
.sc-band .sc-keyrun { position: absolute; left: 0; right: 0; top: var(--sc-y); height: 0; pointer-events: none; transform: translate3d(calc(var(--sc-key) * 100%), 0, 0); }
.sc-band .sc-key { position: absolute; left: -18px; top: -15px; width: 36px; height: 92px; overflow: visible; }
.sc-band .sc-key :is(circle, path) { fill: none; stroke: var(--sc-ink); stroke-width: 1.5px; stroke-linecap: square; }
.sc-band .sc-key .sc-bow { fill: var(--sc-panel); }
.sc-band .sc-ckey { display: none; pointer-events: none; }
.sc-band .sc-ckey :is(circle, path) { stroke-width: 1.7px; }
.sc-band .sc-ckey .sc-key { left: 0; top: 0; }

/* ------------------------------------------------------------------ Construction: the joint */
/* Three planes (the job, its people, its documents) stand on one baseline. One line joins the chosen
   document to the person who holds it and the stage it belongs to, running along the rule under each. */
.sc-band .sc-joint { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr) 120px minmax(0, 1fr); align-items: end; }
.sc-band .sc-plane { display: flex; flex-direction: column; min-width: 0; }
body .sc-band .sc-plane > .sc-colhead { padding-bottom: 12px; border-bottom: 1px solid var(--sc-hair); }
.sc-band .sc-node { position: relative; display: flex; align-items: center; gap: 20px; height: 72px; border-bottom: 1px solid var(--sc-hair); }
body .sc-band .sc-node .sc-name { font: 600 22px/28px Manrope, system-ui, sans-serif; color: var(--sc-mid); }
/* The people's names stand clear of the column edge, where the line comes in through the row. */
@media (min-width: 1101px) { .sc-band .sc-joint .sc-plane:nth-of-type(2) .sc-node { padding-left: 24px; } }
body .sc-band .sc-node.sc-shown .sc-name { color: var(--sc-ink); }
.sc-band .sc-paper {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 100%; height: 96px; padding: 0 16px;
  border-bottom: 1px solid var(--sc-hair); white-space: nowrap;
}
body .sc-band .sc-paper .sc-name { font: 600 22px/28px Manrope, system-ui, sans-serif; }
body .sc-band .sc-sub { display: block; font: 500 14px/20px Manrope, system-ui, sans-serif; color: var(--sc-mid); }
.sc-band .sc-paper[aria-pressed="true"] { border-bottom-color: var(--sc-ink); }
.sc-band .sc-joint > .sc-wires { width: 120px; height: 288px; }
/* A traced line is drawn only for the choice it belongs to. */
.sc-band .sc-wires .sc-trace:not(.sc-shown) { opacity: 0; }
/* Every link in the Lori transcript is shown faintly; the chosen one is traced in ink over it. */
.sc-band .sc-wires path.sc-base { stroke: var(--sc-hair); stroke-dasharray: none; }
.sc-band .sc-jspine { display: none; }

/* ------------------------------------------------------------------ Mailroom: one inbox's morning */
/* Left, the morning's email in three ruled groups; right, the chosen group's sheet: a draft reply for the
   person to check and send, or a note that nothing needed one. Every line of the list is one 56 px row. */
.sc-band .sc-mail {
  display: grid; grid-template-columns: minmax(0, 1fr) 208px clamp(380px, calc(100% - 660px), 548px); grid-auto-rows: 56px;
  margin-bottom: 56px;
}
.sc-band .sc-group { display: contents; }
.sc-band .sc-mail > .sc-wires { grid-column: 2; grid-row: 1 / span 9; width: 208px; height: 504px; }
.sc-band .sc-ghead {
  grid-column: 1; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 56px; padding: 0 16px;
  border-top: 1px solid var(--sc-ink);
}
body .sc-band .sc-ghead .sc-name { font: 600 18px/24px Manrope, system-ui, sans-serif; }
.sc-band .sc-mlist { display: contents; }
.sc-band .sc-mrow {
  grid-column: 1; display: flex; justify-content: space-between; align-items: center; gap: 16px; height: 56px; padding: 0 16px;
  border-top: 1px solid var(--sc-hair); background: var(--sc-ground);
}
.sc-band .sc-mfrom { display: flex; flex-direction: column; min-width: 0; }
body .sc-band .sc-mfrom b { font: 600 14px/18px Manrope, system-ui, sans-serif; color: var(--sc-ink); }
body .sc-band .sc-mfrom span { font: 500 16px/22px Manrope, system-ui, sans-serif; color: var(--sc-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .sc-band .sc-mtime { font: 500 14px/20px Manrope, system-ui, sans-serif; color: var(--sc-mid); white-space: nowrap; }
.sc-band .sc-msheet {
  grid-column: 3; grid-row: 1 / span 9; align-self: start; position: relative; display: flex; flex-direction: column;
  padding: 32px 36px 0; border: 1px solid var(--sc-hair); border-radius: 8px; background: var(--sc-panel);
  box-shadow: 0 24px 48px -32px rgb(11 13 14 / .5);
}
.sc-band .sc-mhead > div { display: flex; gap: 16px; align-items: center; height: 48px; border-top: 1px solid var(--sc-hair); }
.sc-band .sc-mhead > div:last-child { border-bottom: 1px solid var(--sc-hair); }
body .sc-band .sc-mhead dt { width: 72px; font: 600 12px/16px Manrope, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-mid); }
body .sc-band .sc-mhead dd { font: 500 16px/24px Manrope, system-ui, sans-serif; color: var(--sc-ink); }
body .sc-band .sc-mbody { margin: 24px 0; font: 500 18px/28px Manrope, system-ui, sans-serif; color: var(--sc-ink); text-wrap: pretty; }
body .sc-band .sc-mfoot { margin-top: auto; display: flex; gap: 16px; align-items: baseline; padding: 18px 0 20px; border-top: 1px solid var(--sc-hair); font: 500 14px/20px Manrope, system-ui, sans-serif; color: var(--sc-mid); }
body .sc-band .sc-mfoot .sc-k { color: var(--sc-ink); }
/* With no script each group is its own row: its emails on the left and its own sheet beside them. */
html:not(.sc-js) .sc-band .sc-mail { grid-auto-rows: auto; row-gap: 32px; }
html:not(.sc-js) .sc-band .sc-mail > .sc-wires { display: none; }
html:not(.sc-js) .sc-band .sc-group { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-rows: 56px auto 1fr; align-items: start; }
html:not(.sc-js) .sc-band .sc-mlist { display: block; grid-column: 1; grid-row: 2; }
html:not(.sc-js) .sc-band .sc-ghead { grid-row: 1; }
html:not(.sc-js) .sc-band .sc-msheet { grid-row: 1 / span 3; }

/* ------------------------------------------------------------------ Lori: traced to the moment */
/* Left, five lines of a sample transcript; right, the three next steps Lori kept from it. Every link is
   drawn faintly; the chosen next step is traced in ink back to the moment it was said. */
.sc-band .sc-said { display: grid; grid-template-columns: minmax(0, 1fr) 208px clamp(380px, calc(100% - 660px), 548px); align-items: start; margin-bottom: 56px; }
.sc-band .sc-said > .sc-wires { width: 208px; height: 469px; margin-top: 0; }
.sc-band .sc-said-row { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; height: 88px; border-bottom: 1px solid var(--sc-hair); }
body .sc-band .sc-said-t { font: 600 12px/16px Manrope, system-ui, sans-serif; letter-spacing: .06em; color: var(--sc-mid); }
.sc-band .sc-said-w { display: flex; flex-direction: column; gap: 4px; }
body .sc-band .sc-said-q { font: 500 18px/26px Manrope, system-ui, sans-serif; color: var(--sc-mid); text-wrap: pretty; }
body .sc-band .sc-said-row.sc-shown :is(.sc-said-q, .sc-said-t, .sc-k) { color: var(--sc-ink); }
.sc-band .sc-kept { margin-top: var(--sc-top); }
.sc-band .sc-kept-in { display: block; }

/* ------------------------------------------------------------------ the entrance, once */
/* Starting positions. Held only while html.sc-on is set and the scene has not played. The parts
   settling into register is the whole entrance. */
html.sc-on .sc-band .sc:not([data-sc-state]) .sc-strip { transform: translate3d(calc(var(--sc-off, 0px) * var(--sc-m)), 0, 0); }
html.sc-on .sc-band .sc:not([data-sc-state]) .sc-foot-ink .sc-rule,
html.sc-on .sc-band .sc:not([data-sc-state]) .sc-sum-fill { transform: scaleX(0); }
html.sc-on .sc-band .sc:not([data-sc-state]) .sc-sum > :not(.sc-sum-fill) { opacity: 0; }
html.sc-on .sc-band .sc:not([data-sc-state]) .sc-wires path { stroke-dashoffset: 1; }
html.sc-on .sc-band .sc:not([data-sc-state]) .sc-wires :is(.sc-ring, .sc-dot.sc-trace) { opacity: 0; }
html.sc-on .sc-band .sc:not([data-sc-state]) :is(.sc-spine, .sc-jspine > .sc-shown) { transform: scaleY(0); }
html.sc-on .sc-band .sc:not([data-sc-state]) .sc-keyrun { transform: translate3d(calc(var(--sc-key-from) * 100%), 0, 0); }
html.sc-on .sc-band .sc:not([data-sc-state]) .sc-free { opacity: 0; }
html.sc-on .sc-band .sc:not([data-sc-state]) .sc-plane { transform: translate3d(0, calc(var(--sc-off, 0px) * var(--sc-m)), 0); }
html.sc-on .sc-band .sc:not([data-sc-state]) .sc-mrow { transform: translate3d(0, var(--sc-dy, 0px), 0); }
/* Round 12 (colour theory): the chosen group's carbon header is there at rest too, before the scene plays. */
html.sc-on .sc-band .sc:not([data-sc-state]) .sc-ghead:not([aria-pressed="true"]) { opacity: 0; }
html.sc-on .sc-band .sc:not([data-sc-state]) .sc-kept-in { transform: translate3d(calc(var(--sc-off, 0px) * var(--sc-m)), 0, 0); }

.sc-band .sc[data-sc-state="play"] .sc-mrow { transition: transform 820ms var(--sc-ease); }
.sc-band .sc[data-sc-state="play"] .sc-ghead { transition: opacity 360ms linear 420ms; }
.sc-band .sc[data-sc-state="play"] :is(.sc-strip, .sc-plane, .sc-kept-in) { transition: transform 880ms var(--sc-ease); transition-delay: calc(var(--sc-i, 0) * 70ms); }
.sc-band .sc[data-sc-state="play"] .sc-foot-ink .sc-rule { transition: transform 520ms var(--sc-ease) 580ms; }
.sc-band .sc[data-sc-state="play"] .sc-quote .sc-wires path { transition: stroke-dashoffset 720ms cubic-bezier(.5, 0, .2, 1); transition-delay: calc(60ms + var(--sc-i, 0) * 110ms); }
.sc-band .sc[data-sc-state="play"] .sc-wires :is(.sc-ring, .sc-dot.sc-trace) { transition: opacity 200ms linear; transition-delay: calc(680ms + var(--sc-i, 0) * 110ms); }
.sc-band .sc[data-sc-state="play"] .sc-spine { transition: transform 900ms cubic-bezier(.5, 0, .2, 1) 60ms; }
.sc-band .sc[data-sc-state="play"] .sc-sum-fill { transition: transform 420ms var(--sc-ease) 680ms; }
.sc-band .sc[data-sc-state="play"] .sc-sum > :not(.sc-sum-fill) { transition: opacity 220ms linear 940ms; }
.sc-band .sc[data-sc-state="play"] .sc-keyrun { transition: transform 900ms var(--sc-ease) 80ms; }
.sc-band .sc[data-sc-state="play"] .sc-free { transition: opacity 320ms linear 780ms; }
.sc-band .sc[data-sc-state="play"] :is(.sc-joint, .sc-mail, .sc-said) .sc-wires path.sc-trace { transition: stroke-dashoffset 560ms cubic-bezier(.5, 0, .2, 1); transition-delay: calc(480ms + var(--sc-i, 0) * 120ms); }
.sc-band .sc[data-sc-state="play"] .sc-jspine > .sc-shown { transition: transform 700ms cubic-bezier(.5, 0, .2, 1) 420ms; }

/* ------------------------------------------------------------------ phone and tablet: recomposed, not shrunk */
/* Under 1100 px the pictures no longer have room to run across, so each is set again for a column. */
@media (max-width: 1100px) {
  .sc-band { --sc-m: .35; }
  body .sc-band .sc { padding-bottom: 64px; }
  body .sc-band.sc-first .sc { padding: 40px 0 16px; }
  body .sc-band .sc-plate { display: block; }
  body .sc-band .sc-sample { text-align: left; margin-top: 4px; }
  body .sc-band .sc-head { display: block; margin: 32px 0 36px; }
  body .sc-band .sc-title { font-size: 36px !important; line-height: 40px !important; }
  body .sc-band .sc-lead { font-size: 16px; line-height: 26px; margin-top: 16px; max-width: 34em; }
  body .sc-band .sc-status > p { display: block; }
  body .sc-band .sc-status > p > b { display: block; line-height: 16px; margin-bottom: 6px; }

  /* Rooftop: each strip becomes two rows; name and figure, then its line. */
  .sc-band .sc-strip { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id fig" "meter meter"; row-gap: 14px; height: auto; padding: 20px 14px 12px; align-items: end; }
  .sc-band .sc-fig { margin-top: 0; }
  .sc-band .sc-id { grid-area: id; gap: 12px; }
  .sc-band .sc-fig { grid-area: fig; flex-direction: row; align-items: baseline; gap: 10px; }
  .sc-band .sc-fig .sc-unit { order: -1; }
  .sc-band .sc-meter { grid-area: meter; grid-template-rows: 3px 28px 52px; }
  .sc-band .sc-meter-cap { grid-row: 2; align-items: flex-end; padding: 0; }
  .sc-band .sc-track { grid-row: 1; }
  .sc-band .sc-parts { grid-row: 3; }
  /* With the control working, the caption and the parts share the one row under the line. */
  html.sc-js .sc-band .sc-meter { grid-template-rows: 3px 52px; }
  html.sc-js .sc-band .sc-meter-cap { grid-column: 1; align-items: flex-start; padding-top: 12px; }
  html.sc-js .sc-band .sc-parts { grid-row: 2; grid-column: 1; }
  html.sc-js .sc-band .sc-strip[aria-pressed="true"] .sc-meter-cap { visibility: hidden; }
  body .sc-band .sc-name { font-size: 22px; line-height: 28px; }
  body .sc-band .sc-fig .sc-num { font-size: 36px; line-height: 36px; }
  body .sc-band .sc-part .sc-v { font-size: 16px; line-height: 22px; }

  /* WriteUp: one column. A spine down the left carries the three lines into the sheet. */
  .sc-band .sc-quote { display: block; position: relative; padding-left: 28px; margin-bottom: 40px; }
  .sc-band :is(.sc-entry, .sc-doc) { display: block; }
  body .sc-band .sc-quote > .sc-entry > .sc-colhead { padding-bottom: 12px; }
  .sc-band .sc-lines { grid-template-rows: repeat(3, 88px); }
  body .sc-band .sc-line .sc-name { font-size: 16px; line-height: 22px; }
  .sc-band .sc-line dt { gap: 4px; }
  body .sc-band .sc-amt { font-size: 22px; line-height: 28px; }
  .sc-band .sc-quote > .sc-wires { display: none; }
  .sc-band .sc-spine { display: block; position: absolute; left: 3px; top: 72px; width: 1px; height: 470px; background: var(--sc-ink); transform-origin: 50% 0; }
  html.sc-js .sc-band .sc-spine { height: 534px; }
  .sc-band .sc-line::before { content: ""; position: absolute; left: -28px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--sc-ink); }
  .sc-band .sc-sheet { overflow: visible; padding: 20px 20px 0; margin-top: 28px; --sc-pad: 20px; }
  .sc-band .sc-sum { border-radius: 0 0 7px 7px; overflow: hidden; }
  .sc-band .sc-table tbody th { position: relative; }
  .sc-band .sc-table tbody th::before { content: ""; position: absolute; left: -49px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; border: 1px solid var(--sc-ink); background: var(--sc-ground); z-index: 1; }
  .sc-band .sc-table tbody th::after { content: ""; position: absolute; left: -42px; top: 50%; width: 21px; height: 1px; background: var(--sc-ink); }
  .sc-band .sc-view { margin: 28px 0 16px; }
  html.sc-js .sc-band .sc-view { display: grid; grid-template-columns: 1fr 1fr; }
  html.sc-js .sc-band .sc-sheet { margin-top: 0; }
  .sc-band .sc-seg { padding: 0 8px; text-align: center; }
  body .sc-band .sc-table tbody td { font-size: 16px; }
  .sc-band .sc-slot > dl > div { align-items: flex-start; }
  body .sc-band .sc-sum .sc-num { font-size: 36px; line-height: 36px; }
  body .sc-band .sc-sum .sc-k { padding-bottom: 4px; }
  body .sc-band .sc-slot dd b { font-size: 16px; }

  /* Shotgun: the day runs down the page, 08 at the top and 18 at the foot. Hours on the left, each car's
     block beside its own stretch, with its one line of status inside the block. */
  .sc-band .sc-day { --sc-tl: 560px;   /* judges 15 Oct: the day line took a whole screen for three cars (was 740px) */ height: calc(var(--sc-tl) + 8px); margin-bottom: 28px; }
  .sc-band .sc-axis { left: 44px; right: auto; top: 0; width: 1px; height: var(--sc-tl); }
  .sc-band .sc-hours { left: 0; right: auto; top: 0; width: 44px; height: var(--sc-tl); }
  body .sc-band .sc-hours > span,
  body .sc-band .sc-hours > span:first-child,
  body .sc-band .sc-hours > span:last-child { left: 0; top: calc(var(--sc-a) * 100%); width: 28px; margin: -8px 0 0; text-align: left; }
  .sc-band .sc-hours > span::after,
  .sc-band .sc-hours > span:first-child::after,
  .sc-band .sc-hours > span:last-child::after { left: 36px; right: auto; top: 8px; width: 8px; height: 1px; }
  .sc-band .sc-car { left: 68px; right: 0; width: auto; top: calc(var(--sc-a) * var(--sc-tl)); height: calc((var(--sc-b) - var(--sc-a)) * var(--sc-tl) - 16px); padding: 10px 14px 10px; border-top: 0; justify-content: flex-start; gap: 8px; }
  .sc-band .sc-car::after { display: none; }
  .sc-band .sc-run { left: -25px; top: 0; width: 3px; height: calc(100% + 16px); }
  body .sc-band .sc-car-id .sc-name { font-size: 18px; line-height: 24px; }
  .sc-band .sc-car-id { gap: 2px; }
  .sc-band .sc-car-foot { gap: 6px; }
  .sc-band .sc-times { justify-content: flex-start; gap: 24px; }
  .sc-band .sc-t-end { align-items: flex-start; text-align: left; }
  body .sc-band .sc-t .sc-v { font-size: 18px; line-height: 24px; }
  body .sc-band .sc-t-hero .sc-v { font-size: 28px; line-height: 28px; }
  body .sc-band .sc-say { min-height: 20px; }
  .sc-band .sc-free { left: 68px; right: 0; width: auto; top: calc(var(--sc-a) * var(--sc-tl)); height: calc((var(--sc-b) - var(--sc-a)) * var(--sc-tl)); }
  .sc-band .sc-free-id { left: 14px; top: 50%; margin-top: -12px; }
  .sc-band .sc-free-bar { left: -28px; right: auto; top: 0; width: 9px; height: 100%; }
  .sc-band .sc-keyrun { left: 44px; right: auto; top: 0; width: 0; height: var(--sc-tl); transform: translate3d(0, calc(var(--sc-key) * 100%), 0); }
  html.sc-on .sc-band .sc:not([data-sc-state]) .sc-keyrun { transform: translate3d(0, calc(var(--sc-key-from) * 100%), 0); }
  /* The travelling key is a desktop picture. Here each car carries its own key, drawn on its own stretch
     at the point it comes back, bow on the line and lying in the gap under the block; the chosen car shows it. */
  .sc-band .sc-keyrun { display: none; }
  .sc-band .sc-car[aria-pressed="true"] .sc-ckey { display: block; position: absolute; left: -41.5px; top: calc(100% + 1px); width: 36px; height: 92px; transform-origin: 18px 15px; transform: rotate(-90deg) scale(-.9, .9); }

  /* Mailroom: one column. Each group carries its own sheet straight under its emails, so choosing a group
     shows its draft where the tap was. */
  .sc-band .sc-mail { display: block; margin-bottom: 40px; }
  .sc-band .sc-mail > .sc-wires { display: none; }
  .sc-band .sc-group { display: block; }
  .sc-band .sc-mlist { display: block; }
  .sc-band .sc-ghead, .sc-band .sc-mrow { padding: 0 14px; }
  body .sc-band .sc-mfrom span { font-size: 14px; line-height: 20px; }
  .sc-band .sc-msheet { margin: 12px 0 24px; padding: 20px 20px 0; }
  html.sc-js .sc-band .sc-msheet:not(.sc-shown) { display: none; }
  body .sc-band .sc-mbody { font-size: 16px; line-height: 26px; margin: 16px 0; }
  body .sc-band .sc-mhead dt { width: 64px; }
  body .sc-band .sc-mfoot { display: block; }
  body .sc-band .sc-mfoot .sc-k { display: block; margin-bottom: 4px; }
  html.sc-on .sc-band .sc:not([data-sc-state]) .sc-mrow { transform: translate3d(calc(var(--sc-dx, 0px) * var(--sc-m)), 0, 0); }

  /* Lori: the transcript, then the next steps; the traced line runs down the right-hand side. */
  .sc-band .sc-said > .sc-wires { display: none; }
  .sc-band .sc-said-row { grid-template-columns: 72px minmax(0, 1fr); height: 96px; }
  body .sc-band .sc-said-q { font-size: 16px; line-height: 24px; }
  .sc-band .sc-kept { margin-top: 28px; }
  .sc-band .sc-said .sc-paper { height: 96px; }

  /* Construction: the planes stack, and the joint runs down the right-hand side. */
  .sc-band :is(.sc-joint, .sc-said) { display: block; position: relative; margin-bottom: 40px; }
  .sc-band :is(.sc-node, .sc-said-row) { padding-right: 32px; }
  .sc-band .sc-plane + .sc-wires + .sc-plane { margin-top: 28px; }
  html.sc-on .sc-band .sc:not([data-sc-state]) .sc-plane { transform: translate3d(calc(var(--sc-off, 0px) * var(--sc-m)), 0, 0); }
  .sc-band .sc-joint > .sc-wires { display: none; }
  .sc-band .sc-node { height: 56px; gap: 12px; }
  body .sc-band .sc-node .sc-name { font-size: 18px; line-height: 24px; }
  .sc-band .sc-paper { height: 88px; padding: 0 32px 0 14px; }
  body .sc-band .sc-paper .sc-name { font-size: 18px; line-height: 24px; }
  .sc-band :is(.sc-node, .sc-said-row).sc-shown::before { content: ""; position: absolute; right: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--sc-ink); }
  .sc-band .sc-paper[aria-pressed="true"]::before { content: ""; position: absolute; right: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; border: 1px solid var(--sc-chalk); background: var(--sc-ink); z-index: 1; }
  .sc-band .sc-jspine { display: block; position: absolute; right: 14px; top: 0; width: 1px; height: 0; }
  .sc-band .sc-jspine > span { position: absolute; left: 0; top: var(--sc-from); width: 1px; height: var(--sc-len); background: var(--sc-ink); transform-origin: 50% 0; }
  .sc-band .sc-jspine > span:not(.sc-shown) { display: none; }
}

/* Under 560 px the three parts of a Rooftop figure no longer fit side by side: they stack as rows, and the
   chosen strip is the only one open (one is always open, so the picture keeps its height). */
@media (max-width: 559px) {
  .sc-band .sc-meter, html.sc-js .sc-band .sc-meter { grid-template-rows: 3px 28px auto; }
  html.sc-js .sc-band .sc-meter-cap { align-items: flex-end; padding-top: 0; }
  html.sc-js .sc-band .sc-strip[aria-pressed="true"] .sc-meter-cap { visibility: visible; }
  .sc-band .sc-parts, html.sc-js .sc-band .sc-parts { display: block; width: auto; grid-row: 3; padding-top: 10px; }
  html.sc-js .sc-band .sc-strip[aria-pressed="false"] .sc-parts { display: none; }
  .sc-band .sc-part { flex-direction: row; justify-content: space-between; align-items: center; height: 32px; padding: 0; border-top: 1px solid var(--sc-hair); }
  .sc-band .sc-strip[aria-pressed="true"] .sc-part { border-top-color: var(--sc-hair-dark); }
  .sc-band .sc-part::before { display: none; }
}

/* The narrowest phones (under 360 px): a Rooftop figure's unit goes under it, and the names on the
   document and next-step blocks drop one size so they keep to one line. */
@media (max-width: 359px) {
  .sc-band .sc-fig { flex-direction: column; align-items: flex-end; gap: 2px; }
  .sc-band .sc-fig .sc-unit { order: 1; }
  body .sc-band .sc-paper .sc-name { font-size: 16px; line-height: 24px; }
}

/* ------------------------------------------------------------------ stillness */
/* Reduced motion, or the site's own pause switch: everything is where it ends up, and choosing still works. */
@media (prefers-reduced-motion: reduce) {
  .sc-band *, .sc-band *::before, .sc-band *::after { transition: none !important; animation: none !important; }
}
html[data-solva-motion="paused"] .sc-band *,
html[data-solva-motion="paused"] .sc-band *::before,
html[data-solva-motion="paused"] .sc-band *::after { transition: none !important; animation: none !important; }