/* RCB WAKEFIELD LTD — forecourt inspection bands.
   Reset: one property, one universal selector. Nothing else is reset.
   Every rule that decides what a band is and where it sits lives in @layer bands.
   Re-ordering the inspection on the front page is a change to that one block. */
@layer bands;

* { box-sizing: border-box; }

:root {
  /* the five assigned tones. every other value on this sheet is mixed from them */
  --bg: #eeeff2;
  --ink: #23272e;
  --accent: #bd5b22;
  --accent2: #3c5a66;
  --surface: #fcfdfe;

  --ink-88: rgba(35, 39, 46, .88);
  --ink-72: rgba(35, 39, 46, .72);
  --ink-52: rgba(35, 39, 46, .52);
  --ink-30: rgba(35, 39, 46, .30);
  --ink-16: rgba(35, 39, 46, .16);
  --ink-09: rgba(35, 39, 46, .09);
  --ink-04: rgba(35, 39, 46, .04);

  --sun: rgba(189, 91, 34, 1);
  --sun-72: rgba(189, 91, 34, .72);
  --sun-34: rgba(189, 91, 34, .34);
  --sun-16: rgba(189, 91, 34, .16);
  --sun-06: rgba(189, 91, 34, .06);

  --slate-88: rgba(60, 90, 102, .88);
  --slate-60: rgba(60, 90, 102, .60);
  --slate-28: rgba(60, 90, 102, .28);
  --slate-12: rgba(60, 90, 102, .12);

  --paper: rgba(252, 253, 254, 1);
  --paper-70: rgba(252, 253, 254, .70);
  --paper-24: rgba(252, 253, 254, .24);

  --display: "Mohave", "Arial Narrow", "Haettenschweiler", sans-serif;
  --text: "Noticia Text", Georgia, "Times New Roman", serif;
  --figures: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", monospace;

  /* the ribbed comb. each band overrides --pitch so the gauge reads differently */
  --pitch: 10px;
  --comb-h: 15px;

  --gutter: clamp(1.05rem, 4.4vw, 3.6rem);
  --inner: 73rem;
  --measure: 36rem;
  --rule: 1px;
  --step: clamp(2.6rem, 6vw, 4.6rem);
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.66;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: .98;
  letter-spacing: .004em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 8.6vw, 4.5rem); }
h2 { font-size: clamp(1.72rem, 5.6vw, 2.75rem); }
h3 { font-size: clamp(1.18rem, 3.4vw, 1.5rem); letter-spacing: .012em; }
h4 {
  font-size: .82rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  line-height: 1.3;
}

p { margin: 0 0 .92em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

/* Paragraphs that are structure rather than prose: the reading measure above would
   stop these short of the box they are supposed to fill. */
.dateline-strip,
.stage-readout,
.tool-head,
.band-head,
.crumb,
.top-sic,
.foot-name { max-width: none; }

/* body links: flat apricot on paper measures 4.4:1, a hair under the floor at
   body size, so the link colour carries a little ink */
a {
  color: color-mix(in srgb, var(--accent) 86%, var(--ink));
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
a:hover { color: var(--ink); }

strong { font-weight: 700; }

em.term {
  font-style: normal;
  font-family: var(--display);
  font-size: 1.06em;
  letter-spacing: .03em;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.away {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: .6rem;
  top: -4rem;
  z-index: 40;
  background: var(--ink);
  color: var(--bg);
  padding: .6rem .9rem;
  font-family: var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 180ms ease-out;
}
.skip:focus { top: .6rem; color: var(--bg); }

/* ───────── bands ───────── */
/* main is a column, so the visual order of the inspection is the order of these
   rules. DOM order matches, deliberately: a re-order here must be mirrored in the
   markup rather than left to flexbox. */

@layer bands {
  .bands {
    display: flex;
    flex-direction: column;
  }

  .band {
    position: relative;
    width: 100%;
    padding: var(--step) 0;
    border-top: var(--rule) solid var(--ink-16);
  }

  /* ribbed-vertical: a gauge comb standing on the top edge of every band */
  .band::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--comb-h);
    pointer-events: none;
    background-image:
      repeating-linear-gradient(90deg, var(--ink-30) 0 1px, transparent 1px var(--pitch)),
      repeating-linear-gradient(90deg, var(--sun-72) 0 1px, transparent 1px calc(var(--pitch) * 5));
    background-size: 100% 7px, 100% var(--comb-h);
    background-repeat: no-repeat;
    transform-origin: 0 0;
  }

  .band-inner {
    width: min(100% - (var(--gutter) * 2), var(--inner));
    margin-inline: auto;
  }

  .band--dateline { --pitch: 7px; background: var(--bg); border-top: 0; padding-top: 0; }
  .band--identity { --pitch: 8px; background: var(--surface); }
  .band--history { --pitch: 10px; background: var(--bg); }
  .band--mechanical {
    --pitch: 12px;
    color: var(--bg);
    background-color: var(--ink);
    /* shutter slats: the only band where the ribbing runs the full height */
    background-image: repeating-linear-gradient(90deg,
      rgba(252, 253, 254, .055) 0 1px, transparent 1px 34px);
  }
  .band--paperwork { --pitch: 14px; background: var(--surface); }
  .band--tools { --pitch: 9px; background: var(--bg); }
  .band--onward { --pitch: 11px; background: var(--surface); }

  /* Front-page bands. Each one is a different SHAPE, so each one is also a
     different tone and a different comb pitch — the tone is how you tell at a
     glance that the shape changed, and the pitch is how you tell which band of
     the inspection you are standing in. */
  .band--plate { --pitch: 7px; padding-top: 0; }
  .band--bench {
    --pitch: 16px;
    background: color-mix(in srgb, var(--accent2) 7%, var(--surface));
  }
  .band--quote {
    --pitch: 18px;
    background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  }
  .band--cards { --pitch: 9px; background: var(--bg); }
  .band--close {
    --pitch: 12px;
    color: var(--bg);
    /* a slate dark, deliberately NOT the near-black of the footer below it:
       two identical darks in a row read as one long tail. */
    background-color: color-mix(in srgb, var(--accent2) 76%, var(--ink));
    background-image: repeating-linear-gradient(90deg,
      rgba(252, 253, 254, .05) 0 1px, transparent 1px 52px);
    border-top: 3px solid var(--accent);
  }

  /* The order of the inspection on the front page lives here and nowhere else.
     Scoped to .bands--front so the sub-pages can borrow a band's tone without
     inheriting the front page's running order. DOM order matches these numbers;
     a change here has to be mirrored in the markup, not left to flexbox. */
  .bands--front > #opener { order: 1; }
  .bands--front > #bench { order: 2; }
  .bands--front > #band-identity { order: 3; }
  .bands--front > #band-history { order: 4; }
  .bands--front > #band-mechanical { order: 5; }
  .bands--front > #band-paperwork { order: 6; }
  .bands--front > #tool-mileage { order: 7; }
  .bands--front > #tool-service { order: 8; }

  .band--mechanical::before,
  .band--close::before {
    background-image:
      repeating-linear-gradient(90deg, rgba(252, 253, 254, .34) 0 1px, transparent 1px var(--pitch)),
      repeating-linear-gradient(90deg, var(--sun-72) 0 1px, transparent 1px calc(var(--pitch) * 5));
  }
  .band--mechanical a,
  .band--close a { color: color-mix(in srgb, var(--accent) 62%, var(--surface)); }
  .band--mechanical a:hover,
  .band--close a:hover { color: var(--surface); }

  /* the apricot hairline that draws itself under each band head */
  .band-rule {
    display: block;
    height: 2px;
    width: 100%;
    max-width: 22rem;
    margin: 1.05rem 0 1.4rem;
    background: var(--accent);
    transform-origin: 0 50%;
    transition: transform 760ms cubic-bezier(.16, .9, .2, 1);
  }
  .band--identity .band-rule { transition-delay: 90ms; }
  .band--history .band-rule { transition-delay: 180ms; }
  .band--mechanical .band-rule { transition-delay: 270ms; }
  .band--paperwork .band-rule { transition-delay: 360ms; }
  .band--tools .band-rule { transition-delay: 440ms; }
  .band--onward .band-rule { transition-delay: 520ms; }
  .band--close .band-rule { transition-delay: 520ms; background: var(--accent); }
}

/* ───────── masthead ───────── */

.top {
  background: var(--ink);
  color: var(--bg);
  border-bottom: 3px solid var(--accent);
}

.top-inner {
  width: min(100% - (var(--gutter) * 2), var(--inner));
  margin-inline: auto;
  padding: 1.05rem 0 .9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem 1rem;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: .62rem;
  text-decoration: none;
  color: inherit;
}

.mark-glyph {
  display: block;
  width: 46px;
  height: 26px;
  flex: 0 0 auto;
}
.mark-glyph .bonnet {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 96;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1100ms ease-out;
}
.mark-glyph .road { stroke: var(--paper-24); stroke-width: 2; }
.mark-glyph .screen { fill: none; stroke: var(--paper-70); stroke-width: 1.6; }

.mark-name {
  font-family: var(--display);
  font-size: 1.22rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1;
}
.mark:hover .mark-name { color: var(--accent); }
.mark-name { transition: color 200ms ease; }

.top-sic {
  font-size: .73rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin: 0;
  max-width: none;
  padding-left: 0;
}
@media (min-width: 54rem) {
  .top-sic {
    margin-left: auto;
    padding-left: 1rem;
    border-left: var(--rule) solid var(--paper-24);
    text-align: right;
  }
}

/* ───────── two-level bar ───────── */
/* One mechanism at every width: a visible row of primary entries, each a
   disclosure that opens its own sub-list in flow beneath the row. */

.bar {
  background: var(--accent2);
  border-bottom: var(--rule) solid var(--ink-30);
}

.bar-row {
  width: min(100% - (var(--gutter) * 2), var(--inner));
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

/* One primary per row until there is width for a true row of them. The mechanism
   does not change — it is the same bar of disclosures — but a sub-list crushed
   into a 9rem column wraps every link onto two lines. */
.bar-item { flex: 1 1 100%; min-width: 0; }

.disc { border-top: var(--rule) solid var(--paper-24); }
.bar-item:first-child .disc { border-top: 0; }
@media (min-width: 60rem) {
  .disc { border-top: 0; border-left: var(--rule) solid var(--paper-24); }
  .bar-item:first-child .disc { border-left: 0; }
}

.disc > summary {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  cursor: pointer;
  list-style: none;
  padding: .82rem .9rem;
  color: var(--surface);
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: background-color 190ms ease, color 190ms ease;
}
.disc > summary::-webkit-details-marker { display: none; }
.disc > summary:hover { background: var(--ink-30); }
.disc[open] > summary { background: var(--ink); color: var(--surface); }

.disc-key {
  font-family: var(--figures);
  font-size: .68rem;
  letter-spacing: .06em;
  /* apricot straight onto the slate bar reads at 1.65:1 — lifted towards paper
     so the index numerals survive both the slate bar and the open ink panel */
  color: color-mix(in srgb, var(--accent) 32%, var(--surface));
  flex: 0 0 auto;
}
.disc-name { flex: 1 1 auto; }

.disc-mark {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 220ms cubic-bezier(.3, .8, .3, 1);
}
.disc[open] > summary .disc-mark { transform: rotate(225deg) translateY(-2px); }

.disc-panel {
  background: var(--ink);
  color: var(--bg);
  padding: 1rem .9rem 1.15rem;
  border-top: var(--rule) solid var(--paper-24);
}

.disc-lead {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--paper-70);
  margin: 0 0 .7rem;
  max-width: 30rem;
}

.disc-list { list-style: none; margin: 0; padding: 0; }
.disc-list li { padding: .26rem 0; border-top: var(--rule) solid var(--paper-24); }
.disc-list li:first-child { border-top: 0; }

.disc-list a {
  font-family: var(--display);
  font-size: 1.04rem;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--surface);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 170ms ease, color 170ms ease;
}
.disc-list a:hover,
.disc-list a:focus-visible { border-color: var(--accent); color: var(--accent); }
/* the current-page marker sits on the ink panel, where flat apricot reads at
   3.3:1 — lifted towards paper so the mark stays a mark and stays legible */
.disc-list a[aria-current="page"] {
  color: color-mix(in srgb, var(--accent) 56%, var(--surface));
  border-color: var(--accent);
}

.disc-note {
  display: block;
  font-size: .78rem;
  color: var(--paper-70);
  letter-spacing: .01em;
}

@media (min-width: 60rem) {
  .bar-item { flex: 0 0 auto; }
  /* the open entry takes the rest of the row, so the second level fills the bar
     instead of stopping under its own label */
  .bar-item:has(.disc[open]) { flex: 1 1 auto; }
  .disc-panel { padding: 1.15rem 1.2rem 1.3rem; }
  .disc-list { display: flex; flex-wrap: wrap; gap: 0 2.4rem; }
  .disc-list li { border-top: 0; border-left: var(--rule) solid var(--paper-24); padding: .1rem 0 .1rem .9rem; }
  .disc-list li:first-child { border-left: 0; padding-left: 0; }
}

/* ───────── boxed dateline opener ───────── */

.dateline {
  border: 2px solid var(--ink);
  background: var(--surface);
  margin-top: var(--step);
  padding: 0 0 1.5rem;
}

.dateline-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1.1rem;
  padding: .55rem .95rem;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--figures);
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
/* the registered figures are the point of the strip: flat apricot on ink reads
   at 3.3:1 at 11px, so they are mixed towards paper and keep the apricot cue */
.dateline-strip b {
  color: color-mix(in srgb, var(--accent) 56%, var(--surface));
  font-weight: 400;
}

.dateline-body { padding: 1.4rem .95rem 0; }

.dateline-kicker {
  font-family: var(--display);
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent2);
  margin: 0 0 .7rem;
}

.dateline h1 { max-width: 26ch; }

.dateline-lede {
  font-size: 1.1rem;
  line-height: 1.58;
  margin-top: 1.25rem;
  padding-left: .95rem;
  border-left: 3px solid var(--accent);
  max-width: 40rem;
}

.dateline-fine {
  margin-top: 1.1rem;
  font-size: .9rem;
  color: var(--ink-72);
  max-width: 40rem;
}

/* Wide enough for two columns: the lede and the registered fine print sit side by
   side so the dateline box is filled rather than trailing off into white. */
@media (min-width: 64rem) {
  .dateline-body {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
    column-gap: 2.8rem;
    align-items: start;
  }
  .dateline-kicker,
  .dateline h1 { grid-column: 1 / -1; }
  .dateline-lede,
  .dateline-fine { margin-top: 1.4rem; max-width: none; }
  .dateline-fine {
    border-left: var(--rule) solid var(--ink-16);
    padding-left: 1.1rem;
  }
}

/* ───────── boxed labels ───────── */

.label {
  display: inline-flex;
  align-items: stretch;
  border: 2px solid var(--accent2);
  background: var(--surface);
  margin-bottom: 1.1rem;
  max-width: 100%;
  transition: border-color 320ms ease, background-color 320ms ease;
}

.label-rib {
  flex: 0 0 11px;
  background-image: repeating-linear-gradient(90deg,
    var(--slate-60) 0 1px, transparent 1px 3px);
  border-right: var(--rule) solid var(--slate-28);
  transition: background-image 320ms ease;
}

.label-key {
  font-family: var(--figures);
  font-size: .72rem;
  letter-spacing: .08em;
  padding: .36rem .55rem;
  color: var(--surface);
  background: var(--accent2);
  align-self: stretch;
  display: flex;
  align-items: center;
  transition: background-color 320ms ease;
}

.label-text {
  font-family: var(--display);
  font-size: .78rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  padding: .36rem .7rem;
  color: var(--ink);
  display: flex;
  align-items: center;
}

.band--mechanical .label { border-color: var(--surface); background: transparent; }
.band--mechanical .label-text { color: var(--bg); }
.band--mechanical .label-key { background: var(--surface); color: var(--ink); }
.band--mechanical .label-rib {
  background-image: repeating-linear-gradient(90deg, var(--paper-70) 0 1px, transparent 1px 3px);
  border-right-color: var(--paper-24);
}

/* ───────── callout blocks ───────── */

.call {
  border-left: 6px solid var(--accent);
  background: var(--sun-06);
  padding: .95rem 1.05rem;
  margin: 1.5rem 0 0;
  max-width: 44rem;
  transition: border-left-width 240ms ease, background-color 240ms ease;
}
.call:hover { border-left-width: 11px; background: var(--sun-16); }

/* the callout heading is the loudest warning on the page; flat apricot on its
   own pale wash reads at 3.6:1, so it is mixed with ink and stays apricot */
.call h4 { color: color-mix(in srgb, var(--accent) 66%, var(--ink)); margin-bottom: .45rem; }
.call p { max-width: none; font-size: .96rem; }

.call--sheet { border-left-color: var(--accent2); background: var(--slate-12); }
.call--sheet h4 { color: var(--accent2); }
.call--sheet:hover { background: color-mix(in srgb, var(--accent2) 18%, var(--surface)); }

.call--plain { border-left-color: var(--ink-30); background: var(--ink-04); }
.call--plain h4 { color: var(--ink-72); }
.call--plain:hover { background: var(--ink-09); }

/* on the two dark bands the callout heading takes the other mix: the ink-side
   apricot the light bands need reads at 1.8:1 here */
.band--mechanical .call h4,
.band--close .call h4 { color: color-mix(in srgb, var(--accent) 52%, var(--surface)); }
.band--mechanical .tool-note { color: var(--paper-70); }
.band--mechanical .call { background: rgba(252, 253, 254, .06); }
.band--mechanical .call:hover { background: rgba(252, 253, 254, .11); }
.band--mechanical .call--sheet { border-left-color: var(--surface); }
.band--mechanical .call--sheet h4 { color: var(--surface); }

.calls {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.6rem;
}
.calls .call { margin-top: 0; max-width: none; }
@media (min-width: 56rem) {
  .calls--two { grid-template-columns: 1fr 1fr; }
}

/* ───────── band body ───────── */

.band-head {
  display: block;
  margin-bottom: .2rem;
}

.band-grid { display: grid; gap: 1.6rem; }
@media (min-width: 62rem) {
  .band-grid--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2.6rem; }
}

.seq {
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 0;
  counter-reset: seq;
  max-width: 44rem;
}
.seq > li {
  counter-increment: seq;
  position: relative;
  padding: .72rem 0 .72rem 3.1rem;
  border-top: var(--rule) solid var(--ink-16);
}
.seq > li::before {
  content: counter(seq, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .78rem;
  font-family: var(--figures);
  font-size: .76rem;
  letter-spacing: .05em;
  color: var(--accent);
  border: var(--rule) solid var(--ink-16);
  padding: .1rem .34rem;
  transition: border-color 200ms ease, color 200ms ease;
}
.seq > li:hover::before { border-color: var(--accent); color: var(--ink); }
.seq b {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .035em;
  display: block;
  font-size: 1.04rem;
}
.band--mechanical .seq > li { border-top-color: var(--paper-24); }
.band--mechanical .seq > li::before { border-color: var(--paper-24); }

.ledger { margin: 1.35rem 0 0; max-width: 44rem; }
.ledger dt {
  font-family: var(--display);
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-top: .62rem;
  border-top: var(--rule) solid var(--ink-16);
}
.ledger dd { margin: .22rem 0 .62rem; font-size: .96rem; }
.band--mechanical .ledger dt { border-top-color: var(--paper-24); }

/* ───────── set-piece: the forecourt sun-line ───────── */

.stage {
  margin: 1.9rem 0 0;
  border: var(--rule) solid var(--ink-16);
  background: var(--surface);
  padding: .4rem .4rem 0;
}

.stage-svg { display: block; width: 100%; height: auto; }

.stage .ground { stroke: var(--ink-30); stroke-width: 2; }
.stage .shadow { fill: var(--ink-09); }
.stage .shell { fill: var(--bg); stroke: var(--ink); stroke-width: 2.4; }
.stage .glass { fill: var(--slate-12); stroke: var(--accent2); stroke-width: 1.6; }
.stage .arch { stroke: var(--ink); stroke-width: 2.2; opacity: .55; }
.stage .tyre { fill: var(--ink); }
.stage .hub { fill: var(--bg); stroke: var(--ink-52); stroke-width: 1.6; }

.stage .panel {
  fill: var(--slate-12);
  opacity: 1;
  transition: fill 420ms ease, opacity 420ms ease;
}
.stage .panel.panel-lit { fill: var(--sun-34); }

.stage .shut {
  stroke: var(--ink-52);
  stroke-width: 2;
  fill: none;
  transition: stroke 320ms ease, stroke-width 320ms ease;
}
.stage .shut.shut-held {
  stroke: var(--accent);
  stroke-width: 4;
  animation: shutFlare 900ms ease-out 1;
}

.stage .sunband { fill: url(#sunFade); opacity: 0; }
.stage.sweeping .sunband { opacity: 1; animation: sunTravel 3200ms linear 1 forwards; }
.stage.swept .sunband { opacity: 0; }

.stage .sundisc { fill: var(--sun-34); }
.stage .tick { stroke: var(--ink-30); stroke-width: 1.4; }
.stage .tick-live { stroke: var(--accent); stroke-width: 2.6; }
.stage .gaugelabel {
  font-family: var(--figures);
  font-size: 15px;
  fill: var(--ink-52);
  letter-spacing: .04em;
}

.stage-readout {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .8rem;
  align-items: baseline;
  border-top: var(--rule) solid var(--ink-16);
  margin-top: .4rem;
  padding: .5rem .55rem;
  font-family: var(--figures);
  font-size: .76rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-72);
  min-height: 2.3rem;
}
.stage-readout b { color: var(--accent); font-weight: 400; }

.replay {
  font-family: var(--display);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: transparent;
  color: var(--accent2);
  border: var(--rule) solid var(--ink-30);
  padding: .32rem .66rem;
  cursor: pointer;
  margin-left: auto;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.replay:hover { background: var(--accent2); color: var(--surface); border-color: var(--accent2); }

figure { margin: 1.7rem 0 0; }
figcaption {
  font-size: .88rem;
  color: var(--ink-72);
  border-top: var(--rule) solid var(--ink-16);
  padding-top: .6rem;
  margin-top: .55rem;
  max-width: 44rem;
}
.band--mechanical figcaption { color: var(--paper-70); border-top-color: var(--paper-24); }

.diagram {
  display: block;
  width: 100%;
  height: auto;
  border: var(--rule) solid var(--ink-16);
  background: var(--surface);
}
.diagram .edge { fill: var(--ink-16); stroke: var(--ink); stroke-width: 2; }
.diagram .gauge { fill: var(--sun-34); stroke: var(--accent); stroke-width: 2; }
.diagram .dim { stroke: var(--accent2); stroke-width: 1.6; fill: none; }
.diagram .note {
  font-family: var(--figures);
  font-size: 15px;
  fill: var(--ink-72);
}
.diagram .big {
  font-family: var(--figures);
  font-size: 19px;
  fill: var(--accent2);
  letter-spacing: .06em;
}

/* ───────── the two tools ───────── */

.fields {
  border: 0;
  margin: 0 0 1.15rem;
  padding: 0;
  display: grid;
  gap: .85rem;
}
@media (min-width: 40rem) { .fields { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .fields { grid-template-columns: repeat(4, 1fr); } }

.fields legend {
  padding: 0;
  font-size: .86rem;
  color: var(--ink-72);
  margin-bottom: .75rem;
  max-width: 44rem;
}

.field { display: flex; flex-direction: column; gap: .28rem; min-width: 0; }

.field label {
  font-family: var(--display);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent2);
}

.field input {
  font-family: var(--figures);
  font-size: 1.02rem;
  width: 100%;
  padding: .52rem .55rem;
  color: var(--ink);
  background: var(--bg);
  border: var(--rule) solid var(--ink-30);
  border-bottom: 2px solid var(--accent2);
  transition: background-color 180ms ease, border-color 180ms ease;
}
.field input:hover { background: var(--surface); }
.field input:focus { background: var(--surface); border-bottom-color: var(--accent); }
.field .hint { font-size: .74rem; color: var(--ink-72); }

.verdict {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--display);
  font-size: .86rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .42rem .8rem;
  border: 2px solid var(--ink-30);
  color: var(--ink-72);
  background: var(--bg);
  transition: border-color 260ms ease, color 260ms ease, background-color 260ms ease;
}
.verdict[data-state="inside"] { border-color: var(--accent2); color: var(--accent2); background: var(--slate-12); }
/* apricot straight onto the pale wash reads at 3.2:1 at this size; the verdict
   is the one line a reader comes to this tool for, so it takes a darker mix */
.verdict[data-state="outside"] {
  border-color: var(--accent);
  color: color-mix(in srgb, var(--accent) 62%, var(--ink));
  background: var(--sun-16);
}
.verdict[data-state="void"] { border-style: dashed; }

.tool-note {
  margin-top: 1rem;
  font-size: .88rem;
  color: var(--ink-72);
  max-width: 44rem;
}
.tool-note code {
  font-family: var(--figures);
  font-size: .86em;
  background: var(--ink-04);
  padding: 0 .22em;
}

/* ───────── onward routing ───────── */

.routes {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 52rem;
}
@media (min-width: 50rem) {
  .routes { grid-template-columns: 1fr 1fr; column-gap: 2.4rem; max-width: none; }
}

.routes > li {
  border-top: 2px solid var(--ink);
  padding: .62rem 0 .66rem;
  font-size: .94rem;
  color: var(--ink-72);
  transition: border-top-color 220ms ease, padding-left 220ms ease;
}
.routes > li:hover { border-top-color: var(--accent); padding-left: .4rem; }

.routes > li a {
  display: block;
  font-family: var(--display);
  font-size: 1.22rem;
  letter-spacing: .035em;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid transparent;
  width: fit-content;
  transition: color 180ms ease, border-color 180ms ease;
}
.routes > li a:hover,
.routes > li a:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }

/* ───────── footer ───────── */

.foot {
  background: var(--ink);
  color: var(--bg);
  border-top: 3px solid var(--accent);
  padding: var(--step) 0 2.4rem;
  --pitch: 13px;
}

.foot-inner { display: grid; gap: 1.8rem; }
@media (min-width: 52rem) { .foot-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2.8rem; } }

.foot-name {
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: .1em;
  margin: 0 0 .7rem;
}
.foot-addr { line-height: 1.5; margin: 0 0 .85rem; font-size: .96rem; color: var(--paper-70); }
.foot-line { margin: 0 0 .2rem; font-size: .86rem; letter-spacing: .03em; color: var(--paper-70); }
.foot-mail { margin: .7rem 0 0; }
.foot-mail a {
  font-family: var(--figures);
  font-size: .92rem;
  color: var(--surface);
  border-bottom: 2px solid var(--accent);
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease;
}
.foot-mail a:hover { color: var(--accent); border-color: var(--surface); }

.foot-facts { margin: 0; font-size: .9rem; }
.foot-facts dt {
  font-family: var(--display);
  font-size: .74rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 56%, var(--surface));
  border-top: var(--rule) solid var(--paper-24);
  padding-top: .5rem;
  margin-top: .5rem;
}
.foot-facts dd { margin: .18rem 0 0; color: var(--paper-70); }

/* ───────── sub-page shell ───────── */

.page-head { padding-top: var(--step); }
.page-kicker {
  font-family: var(--figures);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent2);
  margin: 0 0 .7rem;
}
.page-head h1 { font-size: clamp(2rem, 7vw, 3.5rem); max-width: 30ch; }
.page-lede {
  font-size: 1.06rem;
  margin-top: 1.1rem;
  padding-left: .9rem;
  border-left: 3px solid var(--accent);
  max-width: 42rem;
}

.crumb {
  font-family: var(--figures);
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .6rem 0;
  margin: 0;
  color: var(--ink-72);
  max-width: none;
}
.crumb a { color: var(--accent2); }
.crumb span { color: var(--ink-30); padding: 0 .4rem; }

/* ───────── 1 · the full-bleed plate under the opener ───────── */
/* The photograph is the band. It runs edge to edge, the boxed dateline drops
   over its lower edge, and the measure only starts again below that. */

.plate { position: relative; margin: 0; }

.plate-img {
  display: block;
  width: 100%;
  height: clamp(13rem, 31vw, 22rem);
  object-fit: cover;
  object-position: 50% 63%;
  background: var(--ink);
}

.plate::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(to bottom, rgba(35, 39, 46, 0), rgba(35, 39, 46, .55));
  pointer-events: none;
}

/* Top right, clear of the dateline box that drops over the foot of the plate:
   an editorial credit belongs on the picture, not under something else. */
.plate-note {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  max-width: 26rem;
  margin: 0;
  border-top: 0;
  padding: .5rem .8rem .55rem .85rem;
  background: rgba(35, 39, 46, .96);
  border-left: 3px solid var(--accent);
  color: var(--surface);
  font-family: var(--figures);
  font-size: .7rem;
  line-height: 1.55;
  letter-spacing: .035em;
  text-transform: uppercase;
}

/* the credit has to stay a credit: on a narrow plate it is set smaller so it
   takes a corner of the sky rather than a third of the picture */
@media (max-width: 44rem) {
  .plate-note {
    font-size: .64rem;
    line-height: 1.45;
    max-width: 18rem;
    padding: .42rem .6rem .45rem .62rem;
  }
}

.band--plate .dateline {
  position: relative;
  z-index: 2;
  margin-top: -2.2rem;
}
@media (min-width: 46rem) { .band--plate .dateline { margin-top: -3.6rem; } }

.set-piece { margin-top: var(--step); }

/* ───────── 2 · the wide figure ───────── */
/* One picture at the full content width with the prose written under it as the
   caption — the only place on the page where the words sit below the image. */

.wide { margin: 0; }

.wide-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 31rem;
  object-fit: cover;
  border: var(--rule) solid var(--ink-16);
  border-bottom: 3px solid var(--accent2);
}

.wide-note {
  max-width: none;
  margin-top: 0;
  border-top: 0;
  padding-top: 1.4rem;
  color: var(--ink);
  font-size: 1rem;
}
/* the credit belongs to the picture, so it is set apart from the caption prose
   and kept in the figures face: it is a note about the image, not the trade */
.wide-credit {
  margin: 0 0 1rem;
  max-width: 34rem;
  padding-left: .75rem;
  border-left: 3px solid var(--accent);
  font-family: var(--figures);
  font-size: .7rem;
  line-height: 1.55;
  letter-spacing: .035em;
  text-transform: uppercase;
  color: var(--ink-72);
}
.wide-note .band-head { margin-bottom: .7rem; }
.wide-note h2 { font-size: clamp(1.5rem, 4.2vw, 2.1rem); max-width: 18ch; }
.wide-prose { margin-top: 1.1rem; }
.wide-prose p { font-size: .99rem; }

@media (min-width: 56rem) {
  .wide-note {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    column-gap: 3.4rem;
    align-items: start;
  }
  .wide-note > .wide-credit { grid-column: 1 / -1; grid-row: 1; margin-bottom: 1.5rem; }
  .wide-note > .band-head { grid-column: 1; grid-row: 2; }
  .wide-note > h2 { grid-column: 1; grid-row: 3; }
  .wide-prose { grid-column: 2; grid-row: 2 / span 2; margin-top: 0; }
  .wide-prose p { max-width: 38rem; }
}

/* ───────── 3 · the step chain ───────── */
/* A rule runs down the whole band and every step hangs a rung off it, so the
   four kerbside checks read as one chain rather than four paragraphs. */

.chain-lead { font-size: 1.04rem; margin-bottom: 1.5rem; }

.chain {
  list-style: none;
  counter-reset: step;
  position: relative;
  margin: 0;
  padding: 0;
}

.chain::before {
  content: "";
  position: absolute;
  left: 1.04rem;
  top: 1rem;
  bottom: 2.6rem;
  width: 2px;
  background: var(--accent);
  transform-origin: 50% 0;
  transition: transform 980ms cubic-bezier(.16, .9, .2, 1) 160ms;
}

.chain-step {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.55rem 3.5rem;
}
.chain-step:last-child { padding-bottom: 0; }

.chain-step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -.1rem;
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--surface);
  font-family: var(--figures);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--accent2);
  transition: background-color 240ms ease, color 240ms ease, transform 240ms ease;
}
.chain-step:hover::before { background: var(--accent); color: var(--surface); transform: scale(1.08); }

.chain-step::after {
  content: "";
  position: absolute;
  left: 2.2rem;
  top: .95rem;
  width: 1rem;
  height: 1px;
  background: var(--ink-30);
}

.chain-step h3 { margin-bottom: .4rem; color: var(--ink); }
.chain-step p { font-size: .97rem; }

@media (min-width: 60rem) {
  .chain-step {
    display: grid;
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    column-gap: 2.6rem;
    align-items: start;
  }
  .chain-step h3 { margin-bottom: 0; }
  .chain-step p { max-width: 38rem; }
}

.call--chain { margin-top: 1.9rem; max-width: 46rem; }

/* ───────── 4 · the figure pair ───────── */
/* Two plots of the same five tests, side by side, because the finding is the
   difference between them and nothing else. */

.pair-head { display: grid; gap: .9rem; }
@media (min-width: 60rem) {
  .pair-head {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    column-gap: 2.8rem;
    align-items: start;
  }
  .pair-head .band-head { margin: .3rem 0 0; }
}

.label--margin .label-text { display: block; }

.pair { display: grid; gap: 1.7rem; margin-top: 1.9rem; }
@media (min-width: 46rem) { .pair { grid-template-columns: 1fr 1fr; column-gap: 2.1rem; } }

.pair-cell { margin: 0; }
.pair-cell figcaption { max-width: none; font-size: .9rem; }

.plot {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface);
  border: var(--rule) solid var(--ink-16);
}
.plot .axis { stroke: var(--ink-52); stroke-width: 2; }
.plot .grid { stroke: var(--ink-16); stroke-width: 1; }
.plot .trace {
  stroke: var(--accent2);
  stroke-width: 2.8;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 460;
  transition: stroke-dashoffset 1300ms cubic-bezier(.3, .8, .3, 1) 260ms;
}
.plot .dot { fill: var(--accent2); transition: fill 240ms ease; }
.plot .dot--flag { fill: var(--accent); stroke: var(--surface); stroke-width: 2.4; }
.plot .drop { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; }
.plot .plotlabel {
  font-family: var(--figures);
  font-size: 13px;
  fill: var(--ink-52);
  letter-spacing: .05em;
}
.plotlabel--end { text-anchor: end; }
.plotlabel--up { text-anchor: middle; }

.pair-cell--flag .plot { border-color: var(--sun-34); background: var(--sun-06); }
.pair-cell:hover .dot { fill: var(--accent); }
.pair-cell--flag:hover .dot--flag { fill: var(--accent); }

.pair-foot {
  margin-top: 1.6rem;
  max-width: 46rem;
  font-size: 1rem;
}

/* ───────── 5 · the pull quote ───────── */
/* The band opens on one sentence at display size; the heading comes after it,
   smaller, and the body resumes in two columns underneath. */

.band-head--quiet { margin-bottom: 1.1rem; }

.pull {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.05rem, 7vw, 3.9rem);
  line-height: .97;
  letter-spacing: .004em;
  text-wrap: balance;
  color: var(--ink);
  max-width: none;
  margin: 0 0 1.25rem;
  padding-top: 1.15rem;
  border-top: 3px solid var(--accent);
}

.band--quote h2 {
  font-size: clamp(1.18rem, 3vw, 1.6rem);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent2);
  max-width: 34ch;
}

.quote-body { margin-top: 1.5rem; }
.quote-body p { break-inside: avoid; }
@media (min-width: 58rem) {
  .quote-body { columns: 2; column-gap: 3.2rem; }
  .quote-body p { max-width: none; }
}

/* ───────── 6 · the sheet, as ruled rows ───────── */

.sheet-lead { margin-top: 1rem; font-size: 1.04rem; max-width: 44rem; }

.sheet {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.8rem;
  font-size: .95rem;
}
.sheet caption { text-align: left; padding-bottom: .85rem; }

.sheet th,
.sheet td {
  text-align: left;
  vertical-align: top;
  padding: .64rem .85rem .64rem 0;
  border-bottom: var(--rule) solid var(--ink-16);
}
.sheet td:last-child { padding-right: 0; }

.sheet thead th {
  font-family: var(--display);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-72);
  border-bottom: 2px solid var(--ink);
  padding-bottom: .42rem;
}

.sheet tbody th {
  width: 30%;
  font-family: var(--figures);
  font-weight: 400;
  font-size: .72rem;
  line-height: 1.5;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--accent2);
}
.sheet tbody tr { transition: background-color 200ms ease; }
.sheet tbody tr:hover { background: var(--sun-06); }

.sheet-close th { color: var(--accent); }
.sheet-close td {
  font-family: var(--display);
  font-size: 1.06rem;
  line-height: 1.26;
  letter-spacing: .012em;
}
.sheet-close th,
.sheet-close td { border-bottom: 2px solid var(--ink); }

.sheet-plate td { padding: 1.15rem 0; }
.sheet-plate:hover { background: transparent; }

.gaugefig { margin: 0; display: grid; gap: .85rem; }
@media (min-width: 44rem) {
  .gaugefig {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    column-gap: 1.7rem;
    align-items: center;
  }
}
.gauge-svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg);
  border: var(--rule) solid var(--ink-16);
}
.gauge-svg .edge { fill: var(--ink-16); stroke: var(--ink); stroke-width: 2; }
.gauge-svg .gauge { fill: var(--sun-34); stroke: var(--accent); stroke-width: 2; }
.gauge-svg .dim { stroke: var(--accent2); stroke-width: 1.6; }
.gauge-svg .note {
  font-family: var(--figures);
  font-size: 15px;
  fill: var(--ink-72);
}
.gauge-svg .note--end { text-anchor: end; }
.gaugefig figcaption {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
  max-width: 26rem;
}

/* ───────── 7 · the card grid ───────── */
/* Four cards, one fact each, every one carrying the sum that produced it. */

.tool-bar { display: grid; gap: .75rem; }
@media (min-width: 54rem) {
  .tool-bar {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.7rem;
    align-items: center;
  }
  .tool-bar .band-head { margin: 0; }
}

.cards-lead { margin-top: 1.15rem; max-width: 46rem; }

.strip { margin-top: 1.6rem; }
.fields--row { margin-bottom: 0; }

.cards { display: grid; gap: .85rem; margin-top: 1.5rem; }
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .cards { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--surface);
  border: var(--rule) solid var(--ink-16);
  border-top: 3px solid var(--accent2);
  padding: .85rem .9rem 1rem;
  transition: border-top-color 220ms ease, transform 220ms ease;
}
.card:hover { border-top-color: var(--accent); transform: translateY(-3px); }
.card:last-child { border-top-color: var(--accent); }

.card-key,
.card-val,
.card-work { max-width: none; }

.card-key {
  font-family: var(--figures);
  font-size: .67rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-72);
  margin: 0 0 .45rem;
}
.card-val {
  font-family: var(--display);
  font-size: clamp(1.26rem, 3vw, 1.6rem);
  line-height: 1.04;
  color: var(--ink);
  margin: 0 0 .55rem;
}
.card-work {
  font-family: var(--figures);
  font-size: .76rem;
  color: var(--accent2);
  margin: 0;
  border-top: var(--rule) solid var(--ink-16);
  padding-top: .5rem;
  font-variant-numeric: tabular-nums;
}

/* ───────── 8 · the inverted close ───────── */
/* The page is dark on light everywhere above this. Here it turns over: the
   planner, the two tracks racing each other, and the way out to the rest. */

.band--close .label { border-color: var(--surface); background: transparent; }
.band--close .label-text { color: var(--bg); }
.band--close .label-key { background: var(--surface); color: var(--ink); }
.band--close .label-rib {
  background-image: repeating-linear-gradient(90deg,
    var(--paper-70) 0 1px, transparent 1px 4px);
}
.band--close .fields legend { color: var(--paper-70); }
.band--close .field label { color: color-mix(in srgb, var(--accent) 40%, var(--surface)); }
.band--close .field input {
  background: rgba(252, 253, 254, .09);
  border-color: var(--paper-24);
  border-bottom-color: var(--accent);
  color: var(--surface);
}
.band--close .field input:hover,
.band--close .field input:focus { background: rgba(252, 253, 254, .18); }
.band--close .field .hint { color: var(--paper-70); }

.close-lead { margin-top: .2rem; max-width: 46rem; }
.close-lead span { font-family: var(--figures); color: color-mix(in srgb, var(--accent) 45%, var(--surface)); }

.strip--invert { margin-top: 1.7rem; }

.tracks { display: grid; gap: 1.1rem; margin-top: 1.7rem; }
@media (min-width: 46rem) { .tracks { grid-template-columns: 1fr 1fr; column-gap: 2.2rem; } }

.track-head {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .9rem;
  justify-content: space-between;
  margin: 0 0 .42rem;
  max-width: none;
  font-family: var(--figures);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.track-state { color: var(--surface); font-variant-numeric: tabular-nums; }

.track-bar {
  display: block;
  height: 10px;
  margin: 0;
  max-width: none;
  background: rgba(252, 253, 254, .16);
}
.track-fill {
  display: block;
  height: 100%;
  width: 75%;
  background: var(--accent);
  transition: width 620ms cubic-bezier(.3, .9, .3, 1);
}
.track-fill--alt { width: 60%; background: color-mix(in srgb, var(--surface) 68%, var(--accent2)); }

.tape {
  margin: 1.8rem 0 0;
  border-top: 2px solid var(--paper-24);
  font-variant-numeric: tabular-nums;
}
.tape div {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .9rem;
  justify-content: space-between;
  padding: .44rem 0;
  border-bottom: var(--rule) dotted rgba(252, 253, 254, .26);
}
.tape dt {
  font-family: var(--figures);
  font-size: .71rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--paper-70);
  flex: 1 1 11rem;
}
.tape dd {
  margin: 0;
  font-family: var(--figures);
  font-size: .9rem;
  color: var(--surface);
  text-align: right;
  flex: 1 1 auto;
}
.tape dd.sum { color: color-mix(in srgb, var(--accent) 42%, var(--surface)); }

.verdict--invert {
  border-color: var(--paper-24);
  color: var(--surface);
  background: rgba(252, 253, 254, .09);
}
.verdict--invert[data-state="inside"] {
  border-color: color-mix(in srgb, var(--surface) 55%, var(--accent2));
  color: var(--surface);
  background: rgba(252, 253, 254, .12);
}
.verdict--invert[data-state="outside"] {
  border-color: var(--accent);
  color: color-mix(in srgb, var(--accent) 34%, var(--surface));
  background: rgba(189, 91, 34, .3);
}

.tool-note--invert { color: var(--paper-70); }

.routes-head {
  margin-top: var(--step);
  padding-top: 1.3rem;
  border-top: var(--rule) solid var(--paper-24);
  font-size: 1.1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper-70);
}

.routes--invert { margin-top: 1.2rem; }
.routes--invert > li { border-top-color: var(--paper-24); color: var(--paper-70); }
.routes--invert > li:hover { border-top-color: var(--accent); }
.routes--invert > li a { color: var(--surface); }
.routes--invert > li a:hover,
.routes--invert > li a:focus-visible {
  color: color-mix(in srgb, var(--accent) 45%, var(--surface));
  border-bottom-color: var(--accent);
}

/* ───────── motion ───────── */

@keyframes sunTravel {
  from { transform: translateX(0) skewX(-13deg); }
  to { transform: translateX(1280px) skewX(-13deg); }
}

@keyframes shutFlare {
  0% { stroke-width: 2; }
  38% { stroke-width: 9; }
  100% { stroke-width: 4; }
}

@keyframes combGrow {
  from { transform: scaleY(.18); opacity: .25; }
  to { transform: scaleY(1); opacity: 1; }
}

@keyframes glyphDraw {
  from { stroke-dashoffset: 96; }
  to { stroke-dashoffset: 0; }
}

/* the plate settles a few per cent back to true, the way a low sun stops
   climbing: it runs once, on load, and never again */
@keyframes plateSettle {
  from { transform: scale(1.045); filter: saturate(.72) brightness(.9); }
  to { transform: scale(1); filter: saturate(1) brightness(1); }
}

/* Start states only exist where a script can finish them. With scripting off the
   .lit class never arrives, so these rules must never apply. */
@media (scripting: enabled) {
  html:not(.lit) .band-rule { transform: scaleX(0); }
  html:not(.lit) .label { border-color: var(--ink-30); }
  html:not(.lit) .label-key { background: var(--ink-30); }
  html:not(.lit) .chain::before { transform: scaleY(0); }
  html:not(.lit) .plot .trace { stroke-dashoffset: 460; }
  html:not(.lit) .track-fill { width: 0; }
  html.lit .label { border-color: var(--accent2); }
  html.lit .band--close .label { border-color: var(--surface); }
  html.lit .band--close .label-key { background: var(--surface); }
  html.lit .band::before { animation: combGrow 820ms ease-out 1 both; }
  html.lit .mark-glyph .bonnet { animation: glyphDraw 1100ms ease-out 1 both; }
  html.lit .plate-img { animation: plateSettle 1500ms cubic-bezier(.2, .8, .25, 1) 1 both; }
}

/* Reduced motion lands the set-piece finished: every panel lit, every shut line
   held, the sun band already gone past. Placed last and marked important so no
   later specificity accident can win it back. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .band-rule { transform: scaleX(1) !important; }
  .label { border-color: var(--accent2) !important; }
  .label-key { background: var(--accent2) !important; }
  /* the two inverted bands carry their own finished state: landing the light
     band's label on a dark band leaves ink on slate at 2:1 */
  .band--mechanical .label,
  .band--close .label { border-color: var(--surface) !important; }
  .band--mechanical .label-key,
  .band--close .label-key { background: var(--surface) !important; }
  .band::before { animation: none !important; transform: none !important; opacity: 1 !important; }
  .mark-glyph .bonnet { animation: none !important; stroke-dashoffset: 0 !important; }
  .stage .panel { fill: var(--sun-34) !important; }
  .stage .shut { stroke: var(--accent) !important; stroke-width: 4 !important; animation: none !important; }
  .stage .sunband { opacity: 0 !important; animation: none !important; }
  .stage .tick { stroke: var(--accent) !important; }
  .disc-mark { transition: none !important; }
  /* the shapes added with the composition: each one lands finished, not faster */
  .chain::before { transform: scaleY(1) !important; }
  .chain-step::before { transform: none !important; }
  .plot .trace { stroke-dashoffset: 0 !important; transition: none !important; }
  .track-fill { transition: none !important; }
  .plate-img { animation: none !important; transform: none !important; filter: none !important; }
  .card:hover { transform: none !important; }
}