/* RABEXA LTD — despatch bench sheet
   Reset: one rule, four declarations, on :where(html). Nothing below is zeroed by sweep;
   every margin further down is a chosen value from the spacing scale. */

:where(html){-webkit-text-size-adjust:100%;color-scheme:dark;background:#151a22;scroll-padding-block-start:7rem}

:root{
  --bg:#151a22;        --bg-rgb:21 26 34;
  --ink:#dfe6ef;       --ink-rgb:223 230 239;
  --accent:#e07b39;    --accent-rgb:224 123 57;
  --accent2:#4f6d86;   --accent2-rgb:79 109 134;
  --surface:#1d242e;   --surface-rgb:29 36 46;

  --head:'Tomorrow','Segoe UI',system-ui,sans-serif;
  --body:'Urbanist','Segoe UI',system-ui,sans-serif;

  --u:0.25rem;
  --sp-1:calc(var(--u) * 2);
  --sp-2:calc(var(--u) * 3);
  --sp-3:calc(var(--u) * 5);
  --sp-4:calc(var(--u) * 8);
  --sp-5:calc(var(--u) * 13);
  --sp-6:calc(var(--u) * 20);

  --indent:clamp(0px, 1.5vw, 26px);
  --rule:1px solid rgb(var(--accent2-rgb) / .34);
  --rule-soft:1px solid rgb(var(--ink-rgb) / .09);
  --measure:38rem;
  --grid-thin:rgb(var(--accent2-rgb) / .10);
  --grid-thick:rgb(var(--accent2-rgb) / .17);
  --ease:cubic-bezier(.22,.68,.32,1);

  /* One micro-label colour for the whole site. The five palette hexes are untouched:
     this is accent2 carried part of the way to ink, far enough that the smallest
     uppercase label clears AA on the darkest background it ever sits on. Declared
     again inside .stock, so the inverted panel mixes it from ITS OWN tokens. */
  --label:var(--accent2);
}
@supports (color:color-mix(in srgb,red 50%,blue)){
  :root{--label:color-mix(in srgb,var(--accent2) 72%,var(--ink))}
}

/* ---------------------------------------------------------------- page frame */

body.page{
  margin:0;
  padding:0 0 var(--sp-6);
  box-sizing:border-box;
  min-height:100vh;
  font:400 1rem/1.62 var(--body);
  color:var(--ink);
  background-color:var(--bg);
  background-image:
    repeating-linear-gradient(to right, var(--grid-thick) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(to bottom, var(--grid-thick) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(to right, var(--grid-thin) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(to bottom, var(--grid-thin) 0 1px, transparent 1px 8px);
  background-attachment:fixed;
  overflow-x:hidden;
}

.skip{
  position:absolute;left:var(--sp-1);top:calc(var(--sp-1) * -12);
  z-index:40;padding:var(--sp-1) var(--sp-2);
  font:600 .82rem/1.3 var(--head);letter-spacing:.06em;text-transform:uppercase;
  color:var(--bg);background:var(--accent);text-decoration:none;
  transition:top .18s var(--ease);
}
.skip:focus{top:var(--sp-1)}

a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn:focus-visible,.skip:focus-visible{outline-color:var(--ink);outline-offset:2px}
::selection{background:rgb(var(--accent-rgb) / .34);color:var(--ink)}

/* --------------------------------------------------------- masthead + nav
   split-index: three primary links live here, the whole index lives in the footer. */

.masthead{
  position:sticky;top:0;z-index:30;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--u) var(--sp-3);
  padding:var(--sp-1) var(--sp-2) calc(var(--sp-1) + 2px);
  box-sizing:border-box;
  border-bottom:var(--rule);
  background:rgb(var(--bg-rgb) / .94);
  backdrop-filter:blur(7px);
}
.mark{
  display:inline-flex;align-items:baseline;gap:.4em;
  font:600 1.06rem/1 var(--head);letter-spacing:.17em;
  color:var(--ink);text-decoration:none;
  transition:letter-spacing .22s var(--ease), color .16s linear;
}
.mark:hover{letter-spacing:.21em;color:var(--accent)}
.mark__suffix{font-size:.62em;letter-spacing:.3em;color:var(--label)}
.mark__rule{
  display:block;width:1.4rem;height:0;
  border-top:3px solid var(--accent);border-bottom:1px solid var(--accent2);
  transform:translateY(-.22em);
  transition:width .26s var(--ease);
}
.mark:hover .mark__rule{width:2.6rem}

.primary{margin-left:auto}
.primary__list{
  display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);
  margin:0;padding:0;list-style:none;
}
.primary__list a{
  display:inline-block;padding:.18em 0;
  font:600 .76rem/1.3 var(--head);letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  border-bottom:2px solid rgb(var(--accent2-rgb) / .55);
  transition:border-color .18s linear, color .18s linear, padding-left .2s var(--ease);
}
.primary__list a:hover,.primary__list a:focus-visible{border-color:var(--accent);color:var(--accent);padding-left:.4em}
.primary__list a[aria-current=page]{border-color:var(--accent);color:var(--accent)}

/* ------------------------------------------------------------------- sheet */

.sheet{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--sp-4);
  max-width:74rem;margin:0 auto;padding:var(--sp-4) var(--sp-2) 0;
  box-sizing:border-box;
}
.flow{display:grid;gap:var(--sp-5);min-width:0}

@media (min-width:56rem){
  .sheet{grid-template-columns:minmax(0,1fr) 19rem;align-items:start;column-gap:var(--sp-5)}
  .opener{grid-column:1 / -1}
  .flow{grid-column:1;grid-row:2}
  .rail{grid-column:2;grid-row:2;position:sticky;top:5.5rem}
}

/* ------------------------------------------------------------------ opener */

.opener__eyebrow{
  margin:0 0 var(--sp-2);
  font:600 .72rem/1.5 var(--head);letter-spacing:.17em;text-transform:uppercase;
  color:var(--label);
}
.opener__h{
  margin:0 0 var(--sp-2);max-width:30ch;
  font:600 clamp(1.7rem,5.4vw,3rem)/1.08 var(--head);letter-spacing:-.012em;
  color:var(--ink);text-wrap:balance;
}
.opener__lede{
  margin:0 0 var(--sp-3);max-width:var(--measure);
  font-size:1.06rem;color:rgb(var(--ink-rgb) / .82);
}
.opener__ctl{margin:var(--sp-2) 0 0}

@media (min-width:62rem){
  .opener{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,31rem);
    column-gap:var(--sp-5);align-items:start}
  .opener__eyebrow{grid-column:1;grid-row:1}
  .opener__h{grid-column:1;grid-row:2;max-width:none}
  .opener__lede{grid-column:1;grid-row:3}
  .opener__ctl{grid-column:1;grid-row:4;align-self:start}
  .panel{grid-column:2;grid-row:1 / 5;align-self:center}
  .panel__svg{max-width:none}
}

.btn{
  display:inline-block;padding:.62em 1.3em;
  font:600 .76rem/1 var(--head);letter-spacing:.14em;text-transform:uppercase;
  color:var(--bg);background:var(--accent);
  border:0;border-radius:0;cursor:pointer;
  box-shadow:4px 4px 0 0 rgb(var(--accent2-rgb) / .6);
  transition:transform .14s var(--ease), box-shadow .14s var(--ease), background-color .16s linear;
}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 0 rgb(var(--accent2-rgb) / .6)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 0 rgb(var(--accent2-rgb) / .6)}
/* .btn sets display, which out-specifies the UA [hidden] rule: without this the
   control shows with JS off and under reduced motion, doing nothing. */
.btn[hidden]{display:none}

/* ------------------------------------- isometric panel + parcel-label set piece */

.panel{margin:0;padding:0}
.panel__svg{
  display:block;width:100%;height:auto;max-width:34rem;
  border:var(--rule);background:rgb(var(--surface-rgb) / .72);
}
.grid__thin{fill:none;stroke:rgb(var(--accent2-rgb) / .26);stroke-width:.5}
.grid__thick{fill:none;stroke:rgb(var(--accent2-rgb) / .44);stroke-width:.9}

.box__top{fill:rgb(var(--ink-rgb) / .13);stroke:rgb(var(--ink-rgb) / .4);stroke-width:1}
.box__side{fill:rgb(var(--bg-rgb) / .74);stroke:rgb(var(--ink-rgb) / .28);stroke-width:1}
.box__side--right{fill:rgb(var(--bg-rgb) / .88)}
.box__tape{fill:none;stroke:rgb(var(--accent2-rgb) / .7);stroke-width:4;stroke-linecap:square}
.box__edge{fill:none;stroke:rgb(var(--accent-rgb) / .5);stroke-width:1.4}

.pf__shadow{fill:rgb(var(--bg-rgb) / .8)}
.lbl{fill:rgb(var(--ink-rgb) / .94);stroke:rgb(var(--bg-rgb) / .5);stroke-width:.6}
.lbl__field{fill:none;stroke:rgb(var(--bg-rgb) / .22);stroke-width:.5}
.lbl__key{font:600 3.4px var(--head);letter-spacing:.5px;fill:rgb(var(--bg-rgb) / .62)}
.lbl__key--right,.lbl__val--right{text-anchor:end}
.lbl__val{font:400 4.2px var(--body);fill:rgb(var(--bg-rgb) / .92)}
.lbl__bar{fill:var(--accent)}
.lbl__barText{font:600 5px var(--head);letter-spacing:.9px;fill:#151a22}
.lbl__route{font:600 7.6px var(--head);letter-spacing:.6px;fill:#151a22}
.lbl__hair{fill:rgb(var(--bg-rgb) / .55)}
.lbl__hr{font:400 4.1px var(--body);letter-spacing:.2px;fill:rgb(var(--bg-rgb) / .78)}
.bc__bar{fill:#151a22;transform-box:fill-box;transform-origin:center bottom}
.head{fill:rgb(var(--accent-rgb) / .9);opacity:0;transform-box:fill-box;transform-origin:center top}

.lift{transform:translate(-4px,-7px);filter:drop-shadow(3px 5px 3px rgb(var(--bg-rgb) / .75))}

.panel__cap{
  max-width:var(--measure);margin:var(--sp-2) 0 0;padding-left:var(--sp-2);
  border-left:3px solid rgb(var(--accent-rgb) / .55);
  font-size:.88rem;color:rgb(var(--ink-rgb) / .64);
  transition:border-color .2s linear, color .2s linear;
}
.panel:hover .panel__cap{border-color:var(--accent);color:rgb(var(--ink-rgb) / .84)}

/* ----------------------------------------------- pinned rail: the cutoff ring */

.rail{
  padding:var(--sp-3) var(--sp-2);box-sizing:border-box;
  border:var(--rule);border-top:3px solid var(--accent);
  background:rgb(var(--surface-rgb) / .86);
}
.rail__h{
  margin:0 0 var(--sp-1);
  font:600 .9rem/1.3 var(--head);letter-spacing:.005em;
  color:var(--ink);
}
.rail__note{margin:0 0 var(--sp-3);font-size:.8rem;line-height:1.56;color:rgb(var(--ink-rgb) / .6)}
.rail__foot{margin:var(--sp-2) 0 0;font-size:.78rem;line-height:1.52;color:rgb(var(--ink-rgb) / .6)}

.ring{display:block;width:100%;height:auto;max-width:14rem;margin:0 auto var(--sp-3)}
.ring__track{fill:none;stroke:rgb(var(--ink-rgb) / .07);stroke-width:13}
.ring__ticks line{stroke:rgb(var(--accent2-rgb) / .5);stroke-width:1}
.ring__seg{
  fill:none;stroke-width:13;stroke-linecap:butt;
  stroke:rgb(var(--accent2-rgb) / .78);
  transition:stroke .22s linear, stroke-width .22s var(--ease);
}
.ring__seg--5{stroke:rgb(var(--accent-rgb) / .9)}
.ring__seg--3{stroke:rgb(var(--accent2-rgb) / .95)}
.ring__seg--2{stroke:rgb(var(--accent2-rgb) / .62)}
.ring__seg:hover{stroke-width:16}
.ring.is-short .ring__seg--5{stroke:rgb(var(--accent-rgb) / .45)}
.ring__labels text{font:600 7.4px var(--head);letter-spacing:.5px;fill:var(--ink);stroke:rgb(var(--bg-rgb) / .85);stroke-width:1.9;paint-order:stroke;text-anchor:middle}
.ring__cutoff{stroke:var(--accent);stroke-width:3}
.ring__cutLabel{font:600 7.4px var(--head);letter-spacing:.24em;fill:var(--accent);text-anchor:middle}
.ring__big{font:600 25px var(--head);fill:var(--ink);text-anchor:middle}
.ring__unit{font:400 8.6px var(--body);letter-spacing:.09em;fill:rgb(var(--ink-rgb) / .62);text-anchor:middle}
.ring.is-short .ring__big{fill:var(--accent)}

.legend{margin:0;padding:0;list-style:none;border-top:var(--rule-soft)}
.legend__row{
  display:flex;align-items:baseline;gap:var(--sp-1);
  padding:.42em 0;border-bottom:var(--rule-soft);
  transition:padding-left .2s var(--ease), background-color .18s linear;
}
.legend__row:hover{padding-left:.4em;background:rgb(var(--ink-rgb) / .045)}
.legend__row a{display:flex;align-items:baseline;gap:.55em;text-decoration:none;color:var(--ink)}
.legend__row a:hover .legend__name{color:var(--accent)}
.legend__code{font:600 .72rem/1 var(--head);letter-spacing:.1em;color:var(--accent)}
.legend__name{font-size:.84rem;transition:color .16s linear}
.legend__time{
  margin-left:auto;
  font:600 .84rem/1 var(--head);letter-spacing:.04em;
  color:rgb(var(--ink-rgb) / .9);font-variant-numeric:tabular-nums;
}

/* --------------------------------------- steps: stepped indent, oversized numeral */

.step{
  margin-inline-start:calc(var(--lvl) * var(--indent));
  padding-left:var(--sp-2);
  border-left:1px solid rgb(var(--accent2-rgb) / .5);
  min-width:0;
  transition:border-color .24s linear;
}
.step:hover{border-color:var(--accent)}
.step--1{--lvl:0}
.step--2{--lvl:1}
.step--3{--lvl:2}
.step--4{--lvl:3}
.step--5{--lvl:4}

.step__h{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;column-gap:var(--sp-2);
  margin:0 0 var(--sp-1);
  font:600 clamp(1.08rem,3.1vw,1.46rem)/1.22 var(--head);letter-spacing:-.005em;
  color:var(--ink);
}
.step__t{grid-column:1}
.step__folio{
  grid-column:2;display:flex;flex-direction:column;align-items:flex-end;
  line-height:.78;
}
.step__num{
  font-size:clamp(2.1rem,8vw,4.4rem);line-height:.78;
  letter-spacing:-.05em;
  color:rgb(var(--accent2-rgb) / .42);
  transition:color .26s linear;
}
@supports (-webkit-text-stroke:1px currentColor){
  .step__num{color:transparent;-webkit-text-stroke:1.3px rgb(var(--accent2-rgb) / .85)}
  .step:hover .step__num{-webkit-text-stroke-color:var(--accent)}
}
.step:hover .step__num{color:rgb(var(--accent-rgb) / .5)}
.step__den{
  margin-top:.55em;
  font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--label);
}
.step p{max-width:var(--measure);margin:0 0 var(--sp-2)}

.step .latest{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.2em .7em;
  margin:0;padding:.42em .7em;
  background:rgb(var(--bg-rgb) / .62);border-left:3px solid var(--accent);
}
.latest__k{font:600 .64rem/1.5 var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--label)}
.latest__v{font:600 1.04rem/1.2 var(--head);color:var(--accent);font-variant-numeric:tabular-nums}
.latest__s{font-size:.78rem;color:rgb(var(--ink-rgb) / .56);font-variant-numeric:tabular-nums}

/* =================================================================== shapes
   Nine body sections, nine different figures, in the order the plan sets them:

     01 step-chain      the five nodes on one drawn rule, with what passes along it
     02 offset-split    narrow figure column, the walk plan overhanging the gutter
     03 pull-quote      the read-back set large, the body resuming under it
     04 dark-inversion  the page is dark, so the label step prints on light stock
     05 card-grid       four cards, one fact each, on how a run stands at the door
     06 ledger-rows     the checker answers on ruled lines, one working per row
     07 wide-figure     the carton across the whole column, its prose as the caption
     08 stacked-overlap the two sheets lying over one another, as they do on a bench
     09 margin-annotated the registered facts hung beside the sentence they annotate

   The stepped indent, the oversized numeral and the pinned ring are unchanged;
   only where the numeral SITS moves, so that no two steps read as one figure. */

/* ------------------------------------------------------ 01  step-chain */

.chain{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--sp-3);
  margin:0 0 var(--sp-3);padding:0;list-style:none;
}
.chain__node{position:relative;min-width:0;padding-left:1.9rem}
.chain__node::after{                      /* the node itself */
  content:'';position:absolute;left:0;top:.95rem;
  width:.78rem;height:.78rem;box-sizing:border-box;
  border:2px solid var(--accent2);border-radius:50%;background:var(--bg);
  transition:border-color .2s linear, background-color .2s linear;
}
.chain__node::before{                     /* the rule running on to the step after */
  content:'';position:absolute;left:calc(.39rem - 1px);
  top:1.34rem;bottom:calc((var(--sp-3) + 1.34rem) * -1);
  border-left:2px solid rgb(var(--accent2-rgb) / .55);
}
.chain__node:last-child::before{display:none}
.chain__node--here::after{border-color:var(--accent);background:var(--accent)}
.chain__node:hover::after{border-color:var(--accent)}
.chain__pass{
  display:block;margin-bottom:.15em;
  font:400 .66rem/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;
  color:rgb(var(--ink-rgb) / .58);
}
.chain__pass::before{content:'\2192\00a0'}
.chain__code{
  display:block;
  font:600 .7rem/1.5 var(--head);letter-spacing:.16em;color:var(--accent);
}
.chain__name{display:block;font:600 .92rem/1.3 var(--head);color:var(--ink)}
.chain__mark{
  display:inline-block;margin-top:.3em;padding:.1em .45em;
  font:600 .58rem/1.5 var(--head);letter-spacing:.14em;text-transform:uppercase;
  color:var(--bg);background:var(--accent);
}
.chain__mark--out{color:var(--accent);background:none;border:1px solid rgb(var(--accent-rgb) / .6)}

/* the same chain run down the page, each node carrying its own paragraph */
.chain--route{gap:var(--sp-3)}
.chain--route .chain__code{margin-bottom:.1em}
.chain--route .chain__name{
  display:block;margin-bottom:.25em;
  font:600 .98rem/1.35 var(--head);color:var(--ink);
}
.chain--route p{max-width:var(--measure);margin:0;font-size:.94rem;color:rgb(var(--ink-rgb) / .82)}
.chain--route .chain__node{padding-bottom:var(--sp-1)}
.chain--route .chain__node::after{top:.2rem}
.chain--route .chain__node::before{top:.59rem;bottom:calc((var(--sp-3) + .59rem) * -1)}

@media (min-width:44rem){
  .chain{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:0;padding-top:2.4rem;
  }
  .chain::before{                         /* one rail under all five nodes */
    content:'';position:absolute;left:.39rem;right:1rem;top:2.73rem;height:0;
    border-top:2px solid rgb(var(--accent2-rgb) / .55);
  }
  .chain__node{padding:1.9rem var(--sp-2) 0 0}
  .chain__node::before{display:none}
  .chain__node::after{top:-.39rem}
  .chain__pass{
    position:absolute;left:-50%;top:-2.25rem;transform:translateX(-50%);
    margin:0;white-space:nowrap;
  }
  .chain__node:first-child .chain__pass{display:none}
}

@media (min-width:44rem){
  .chain--route{grid-template-columns:minmax(0,1fr);gap:var(--sp-3);padding-top:0}
  .chain--route::before{display:none}
  .chain--route .chain__node{padding:0 0 var(--sp-1) 1.9rem}
  .chain--route .chain__node::after{top:.2rem}
  .chain--route .chain__node::before{
    display:block;left:calc(.39rem - 1px);
    top:.59rem;bottom:calc((var(--sp-3) + .59rem) * -1);height:auto;
  }
  .chain--route .chain__node:last-child::before{display:none}
}

/* ---------------------------------------------------- 02  offset-split */

.split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
.split__body{grid-row:1;min-width:0}
.split__fig{grid-row:2;margin:0;min-width:0}
.walk{
  display:block;width:100%;height:auto;max-width:15rem;
  border:var(--rule);background:rgb(var(--surface-rgb) / .7);
}
.walk__floor{fill:rgb(var(--bg-rgb) / .55);stroke:rgb(var(--accent2-rgb) / .35);stroke-width:1}
.walk__bay rect{fill:rgb(var(--ink-rgb) / .1);stroke:rgb(var(--ink-rgb) / .26);stroke-width:.9}
.walk__route{
  fill:none;stroke:var(--accent);stroke-width:2.4;
  stroke-linejoin:round;stroke-linecap:round;
  transition:stroke-width .22s var(--ease);
}
.walk:hover .walk__route{stroke-width:3.4}
.walk__tick path{fill:none;stroke:rgb(var(--ink-rgb) / .78);stroke-width:1.8;stroke-linecap:round}
.walk__bench{fill:rgb(var(--accent2-rgb) / .55);stroke:rgb(var(--accent2-rgb) / .9);stroke-width:1}
.walk__tag{font:600 7.6px var(--head);letter-spacing:.1em;fill:rgb(var(--ink-rgb) / .8);text-anchor:middle}
.walk__tag--end{text-anchor:end;fill:rgb(var(--ink-rgb) / .5)}
.split__cap{
  margin:var(--sp-1) 0 0;padding-left:var(--sp-2);
  border-left:1px solid rgb(var(--accent2-rgb) / .7);
  font-size:.82rem;line-height:1.55;color:rgb(var(--ink-rgb) / .62);
}
.split__cap b{color:var(--accent);font-family:var(--head);font-variant-numeric:tabular-nums}
.split__cap span{font-variant-numeric:tabular-nums}

/* the numeral leads the heading here instead of trailing it */
.split .step__h{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--sp-2)}
.split .step__folio{flex-direction:row;align-items:baseline;gap:.4em;order:-1}
.split .step__num{font-size:clamp(2.4rem,9vw,3.9rem)}
.split .step__den{margin-top:0}
.split .step__t{flex:1 1 14rem}

@media (min-width:62rem){
  .split{
    grid-template-columns:minmax(0,13.5rem) minmax(0,1fr);
    column-gap:var(--sp-5);align-items:start;
  }
  .split__fig{
    grid-row:1;grid-column:1;
    width:calc(100% + 2.1rem);          /* the figure overhangs into the gutter */
    position:relative;z-index:1;margin-top:1.1rem;
  }
  .split__body{grid-row:1;grid-column:2}
  .walk{max-width:none}
}

/* ------------------------------------------------------ 03  pull-quote */

.quote .step__h{display:block}
.quote .step__folio{
  display:block;float:right;margin:0 0 .2em var(--sp-2);
  line-height:.78;text-align:right;
}
.quote .step__num{display:block;font-size:clamp(3.2rem,13vw,6.6rem)}
.quote .step__den{display:block;margin-top:.2em}
.quote__big{
  margin:var(--sp-3) 0;padding:var(--sp-3) 0;
  border-top:1px solid rgb(var(--accent-rgb) / .55);
  border-bottom:1px solid rgb(var(--accent-rgb) / .55);
}
.quote__big p{
  max-width:none;margin:0;
  font:600 clamp(1.3rem,4.3vw,2.1rem)/1.18 var(--head);
  letter-spacing:-.016em;color:var(--ink);text-wrap:balance;
}
.quote__big p::before{
  content:'\201C';
  margin-right:.1em;color:var(--accent);
}
.quote__foot{
  margin:0;font-size:.82rem;color:rgb(var(--ink-rgb) / .58);
  font-variant-numeric:tabular-nums;
}
.quote__foot b{font-family:var(--head);color:var(--accent)}

/* -------------------------------------------------- 04  dark-inversion
   The whole page is light-on-dark, so the inversion here is a light panel:
   the step where a label is printed is set on the stock it prints onto.
   Every token below is redeclared ON this section, so the inversion travels
   down to the numeral, the rules and the focus ring without a single
   hard-coded colour further in. */

.stock{
  --bg:#efe7da;        --bg-rgb:239 231 218;
  --surface:#e3d9c8;   --surface-rgb:227 217 200;
  --ink:#1b222b;       --ink-rgb:27 34 43;
  --accent:#9e4713;    --accent-rgb:158 71 19;
  --accent2:#45607a;   --accent2-rgb:69 96 122;
  --label:var(--accent2);
  --rule:1px solid rgb(var(--accent2-rgb) / .4);
  --rule-soft:1px solid rgb(var(--ink-rgb) / .18);

  position:relative;
  padding:var(--sp-4) var(--sp-3) var(--sp-3);box-sizing:border-box;
  border:0;border-left:0;
  color:var(--ink);
  background-color:var(--bg);
  background-image:
    repeating-linear-gradient(to right, rgb(var(--ink-rgb) / .07) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(to bottom, rgb(var(--ink-rgb) / .07) 0 1px, transparent 1px 8px);
  box-shadow:0 1px 0 0 rgb(var(--ink-rgb) / .3), 6px 7px 0 0 rgb(21 26 34 / .5);
}
.stock::before{                           /* the tear line across the top of the stock */
  content:'';position:absolute;left:var(--sp-2);right:var(--sp-2);top:1.15rem;height:0;
  border-top:2px dotted rgb(var(--ink-rgb) / .32);
}
.stock--note{margin:var(--sp-4) 0 var(--sp-3)}
.stock--note h2{margin:0 0 var(--sp-2);border-bottom-color:rgb(var(--accent2-rgb) / .45);color:var(--ink)}
.stock--note p{max-width:var(--measure)}
.stock__fields.stock__fields--wide{grid-template-columns:minmax(0,1fr)}
.stock__fields--wide dt{flex:0 0 8.5rem;align-self:baseline}
.stock__fields--wide dd{flex:1 1 16rem}
@media (min-width:38rem){.stock__fields.stock__fields--wide{grid-template-columns:minmax(0,1fr)}}
.stock:hover{border-color:transparent}
.stock .step__h{align-items:start}
.stock .step__t{color:var(--ink)}
.stock p{color:rgb(var(--ink-rgb) / .84)}
.stock :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.stock__fields{
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  margin:var(--sp-2) 0 0;padding:0;
  border-top:var(--rule-soft);
}
.stock__fields > div{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .6em;
  padding:.42em .2em;border-bottom:var(--rule-soft);
  transition:background-color .18s linear;
}
.stock__fields > div:hover{background:rgb(var(--ink-rgb) / .06)}
.stock__fields dt{
  flex:0 0 7rem;
  font:600 .62rem/1.7 var(--head);letter-spacing:.15em;text-transform:uppercase;
  color:var(--label);
}
.stock__fields dd{margin:0;font-size:.92rem;color:rgb(var(--ink-rgb) / .9)}
.stock__fields b{font-family:var(--head);color:var(--accent);font-variant-numeric:tabular-nums}
@media (min-width:38rem){
  .stock__fields{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-3)}
}

/* -------------------------------------------------------- 05  card-grid */

.cards{position:relative;padding-top:var(--sp-3)}
.cards .step__h{display:block}
.cards .step__folio{
  position:absolute;right:0;top:0;
  flex-direction:row;align-items:baseline;gap:.5em;
}
.cards .step__num{font-size:clamp(1.9rem,6vw,3.1rem)}
.cards .step__den{margin-top:0}
.cards .step__t{display:block;max-width:26ch}
.cardrow{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2);
  margin:0 0 var(--sp-2);padding:0;list-style:none;
}
.card{
  padding:var(--sp-2);box-sizing:border-box;min-width:0;
  border:var(--rule-soft);border-top:3px solid rgb(var(--accent-rgb) / .8);
  background:rgb(var(--surface-rgb) / .72);
  transition:transform .18s var(--ease), border-top-color .18s linear, background-color .18s linear;
}
.card:hover{transform:translateY(-3px);border-top-color:var(--accent);background:rgb(var(--surface-rgb) / .95)}
.card__k{
  display:block;margin-bottom:.3em;
  font:600 .78rem/1.3 var(--head);letter-spacing:.06em;color:var(--ink);
}
.card__v{display:block;font-size:.86rem;line-height:1.5;color:rgb(var(--ink-rgb) / .7)}
.card p{margin:.3em 0 0;font-size:.86rem;line-height:1.5;color:rgb(var(--ink-rgb) / .7)}
.cards__foot{
  margin:0;font-size:.82rem;color:rgb(var(--ink-rgb) / .58);
  font-variant-numeric:tabular-nums;
}
.cards__foot b{font-family:var(--head);color:var(--accent)}
@media (min-width:34rem){.cardrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:58rem){.cardrow{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* six artefacts rather than four facts: three to a row, each card numbered */
.cardrow--num{counter-reset:art}
.cardrow--num .card{counter-increment:art;position:relative;padding-top:var(--sp-3)}
.cardrow--num .card::before{
  content:counter(art,decimal-leading-zero);
  position:absolute;right:var(--sp-2);top:.5rem;
  font:600 1.6rem/1 var(--head);letter-spacing:-.04em;
  color:rgb(var(--accent2-rgb) / .45);
  transition:color .2s linear;
}
.cardrow--num .card:hover::before{color:rgb(var(--accent-rgb) / .8)}
.cardrow--num .card__k{padding-right:2.6rem}
@media (min-width:46rem){.cardrow--three{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:58rem){.cardrow--three{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* the label face drawn flat, with its bands named off to the side */
.face{
  display:block;width:100%;height:auto;
  border:var(--rule);background:rgb(var(--surface-rgb) / .72);
}
.face__stock{fill:rgb(var(--ink-rgb) / .93);stroke:rgb(var(--bg-rgb) / .5);stroke-width:1}
.face__field{fill:none;stroke:rgb(var(--bg-rgb) / .24);stroke-width:1}
.face__key{font:600 8px var(--head);letter-spacing:1.1px;fill:rgb(var(--bg-rgb) / .62)}
.face__key--right,.face__val--right{text-anchor:end}
.face__val{font:400 10px var(--body);fill:rgb(var(--bg-rgb) / .92)}
.face__bar{fill:var(--accent)}
.face__barText{font:600 12px var(--head);letter-spacing:2px;fill:#151a22}
.face__route{font:600 19px var(--head);letter-spacing:1.4px;fill:#151a22}
.face__hair{fill:rgb(var(--bg-rgb) / .55)}
.face__code rect{fill:#151a22}
.face__hr{font:400 10px var(--body);letter-spacing:.5px;fill:rgb(var(--bg-rgb) / .78)}
.face__lead polyline{fill:none;stroke:rgb(var(--accent-rgb) / .75);stroke-width:1.2}
.face__name{font:600 11px var(--head);letter-spacing:.09em;fill:var(--accent)}
.face__note{font:400 10.5px var(--body);fill:rgb(var(--ink-rgb) / .62)}

/* ------------------------------------------------------ 06  ledger-rows */

.led__table{width:100%;border-collapse:collapse;margin:0;font-variant-numeric:tabular-nums}
.led__table caption{
  margin-bottom:var(--sp-1);text-align:left;
  font:600 .66rem/1.6 var(--head);letter-spacing:.16em;text-transform:uppercase;
  color:var(--label);
}
.led__table th{
  width:7.5rem;padding:.5em .8em .5em 0;text-align:left;vertical-align:baseline;
  font:600 .66rem/1.7 var(--head);letter-spacing:.14em;text-transform:uppercase;
  color:var(--label);
  border-right:1px solid rgb(var(--accent2-rgb) / .5);
  border-bottom:var(--rule-soft);
}
.led__table td{
  padding:.5em 0 .5em .8em;vertical-align:baseline;
  border-bottom:var(--rule-soft);
  color:rgb(var(--ink-rgb) / .88);
}
.led__table tr{transition:background-color .18s linear}
.led__table tr:hover{background:rgb(var(--accent2-rgb) / .12)}
.led__work th{color:var(--label);font-size:.6rem}
.led__work td{font:400 .84rem/1.5 var(--body);color:rgb(var(--ink-rgb) / .6)}
.led__table tr:last-child th,.led__table tr:last-child td{border-bottom:0}

/* the same ledger with column heads, for a record-by-record table */
.led__table--cols{margin:0 0 var(--sp-3);font-size:.9rem;table-layout:fixed}
.led__table--cols col.led__c1{width:24%}
.led__table--cols col.led__c2{width:40%}
.led__table--cols col.led__c3{width:36%}
.led__table--cols th,.led__table--cols td{
  width:auto;padding:.55em .8em .55em 0;vertical-align:top;border-right:0;
}
.led__table--cols thead th{
  font:600 .66rem/1.6 var(--head);letter-spacing:.13em;text-transform:uppercase;
  color:var(--label);border-bottom:var(--rule);
}
.led__table--cols tbody th{
  font:600 .88rem/1.5 var(--head);letter-spacing:0;text-transform:none;
  color:var(--ink);border-bottom:var(--rule-soft);
  border-left:2px solid rgb(var(--accent-rgb) / .6);padding-left:.7em;
}
.led__table--cols tbody td{color:rgb(var(--ink-rgb) / .82)}
.led__table--cols tr:last-child th,.led__table--cols tr:last-child td{border-bottom:var(--rule-soft)}

/* the pull-quote, used once inside a prose page */
.quote__big--leaf{margin:var(--sp-2) 0 var(--sp-3);padding:0 0 var(--sp-2);border-top:0}
.quote__big--leaf p{font-size:clamp(1.2rem,3.6vw,1.75rem)}

/* ------------------------------------------------------ 07  wide-figure */

.wide__fig{margin:0 0 var(--sp-3)}
.wide .dims__svg{max-width:none}
.wide__cap{
  max-width:46rem;margin:var(--sp-2) 0 0;padding-left:var(--sp-2);
  border-left:3px solid rgb(var(--accent2-rgb) / .8);
  font-size:.92rem;line-height:1.6;color:rgb(var(--ink-rgb) / .76);
  transition:border-color .2s linear, color .2s linear;
}
.wide__fig:hover .wide__cap{border-color:var(--accent);color:rgb(var(--ink-rgb) / .9)}
.dims__plate{opacity:.9}

/* the two figures the sheet compares, drawn as bars under the plate */
.weigh{margin:var(--sp-2) 0 0;padding:var(--sp-2) 0 0;border-top:1px solid rgb(var(--accent-rgb) / .5)}
.weigh__row{
  display:grid;grid-template-columns:7.5rem minmax(0,1fr) 5rem;
  align-items:center;gap:0 var(--sp-2);margin:0 0 .5em;
}
.weigh__k{
  font:600 .66rem/1.7 var(--head);letter-spacing:.14em;text-transform:uppercase;
  color:var(--label);
}
.weigh__track{
  display:block;height:.9rem;min-width:0;
  background:rgb(var(--ink-rgb) / .08);
  border-left:1px solid rgb(var(--accent2-rgb) / .7);
}
.weigh__bar{
  display:block;height:100%;width:0;
  transition:width .28s var(--ease), background-color .2s linear;
}
.weigh__bar--vol{background:rgb(var(--accent-rgb) / .88)}
.weigh__bar--act{background:rgb(var(--accent2-rgb) / .9)}
.weigh:hover .weigh__bar--vol{background:var(--accent)}
.weigh__v{
  font:600 1rem/1.3 var(--head);color:var(--ink);
  font-variant-numeric:tabular-nums;text-align:right;
}
.weigh__verdict{
  display:grid;grid-template-columns:7.5rem minmax(0,1fr);
  align-items:baseline;gap:0 var(--sp-2);
  margin:.7em 0 0;padding-top:.5em;border-top:var(--rule-soft);
}
.weigh__verdict b{font:600 .96rem/1.35 var(--head);color:var(--accent)}
@media (max-width:30rem){
  .weigh__row{grid-template-columns:minmax(0,1fr) 5rem}
  .weigh__track{grid-column:1 / -1;grid-row:2}
  .weigh__verdict{grid-template-columns:minmax(0,1fr)}
}

/* -------------------------------------------------- 08  stacked-overlap */

.pair{min-width:0;padding-left:var(--sp-2);border-left:1px solid rgb(var(--accent2-rgb) / .5)}
.pair__h{
  margin:0 0 var(--sp-3);
  font:600 clamp(1.04rem,2.9vw,1.3rem)/1.24 var(--head);color:var(--ink);
}
.pair__stack{
  display:grid;grid-template-columns:minmax(0,1fr);
  margin:0 0 var(--sp-3);
}
.paper{
  padding:var(--sp-2) var(--sp-2) var(--sp-3);box-sizing:border-box;min-width:0;
  border:var(--rule);
  background-color:rgb(var(--surface-rgb) / .97);
  background-image:repeating-linear-gradient(
    to bottom, transparent 0 1.52rem, rgb(var(--ink-rgb) / .08) 1.52rem calc(1.52rem + 1px));
  background-position:0 1.1rem;
  transition:transform .2s var(--ease), border-color .2s linear;
}
.paper--over{
  margin-top:-1.1rem;margin-left:var(--sp-3);
  box-shadow:-5px -4px 10px rgb(21 26 34 / .55);
  position:relative;z-index:2;
}
.paper:hover{border-color:var(--accent)}
.paper--under:hover{transform:translate(-3px,-3px)}
.paper--over:hover{transform:translate(3px,3px)}
.paper .paper__h{
  margin:0 0 .6rem;padding:0;border:0;
  font:600 .72rem/1.5 var(--head);letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);
}
.paper__line{
  max-width:none;margin:0;padding:.38rem 0 .38rem .9rem;
  font-size:.84rem;line-height:1.52;color:rgb(var(--ink-rgb) / .76);
  position:relative;
}
.paper__line::before{
  content:'';position:absolute;left:0;top:.95em;
  width:.3rem;height:0;border-top:1px solid rgb(var(--accent2-rgb) / .9);
}
.paper__line--key{
  color:var(--accent);font-family:var(--head);font-weight:600;
  font-size:.78rem;letter-spacing:.06em;
}
.pair__body{max-width:var(--measure);margin:0;color:rgb(var(--ink-rgb) / .84)}

@media (min-width:52rem){
  .pair__stack{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:var(--sp-2) var(--sp-3) var(--sp-3) 0;
  }
  .paper--under{transform:rotate(-.5deg)}
  .paper--over{
    margin:1.9rem 0 0 -7%;             /* the sheets overlap, as they do on the bench */
    transform:rotate(.7deg);
  }
  .paper--under:hover{transform:rotate(-.5deg) translate(-3px,-3px)}
  .paper--over:hover{transform:rotate(.7deg) translate(3px,3px)}
}

/* the plan and its key, on a sub-page: one panel lying over the corner of the other */
.pair__stack--plan{grid-template-columns:minmax(0,1fr)}
.paper--plan{padding:var(--sp-2);background-image:none}
.paper--plan .map{margin:0;border:0;background:none}
.paper--key{max-width:28rem;margin:-2.4rem 0 0 auto;padding-bottom:var(--sp-2)}
.paper--key .paper__line{font-size:.82rem}
@media (min-width:52rem){
  .pair__stack--plan{grid-template-columns:minmax(0,1fr);padding:0 var(--sp-3) 0 0}
  .paper--plan{transform:none}
  .paper--plan:hover{transform:translate(-3px,-3px)}
  .paper--key{margin:-3.2rem calc(var(--sp-4) * -1) 0 auto;transform:rotate(.6deg)}
  .paper--key:hover{transform:rotate(.6deg) translate(3px,3px)}
}

/* the frontage in elevation, for the narrow column of the kerb split */
.kerb{
  display:block;width:100%;height:auto;max-width:17rem;
  border:var(--rule);background:rgb(var(--surface-rgb) / .7);
}
.kerb__front{fill:rgb(var(--ink-rgb) / .07);stroke:rgb(var(--ink-rgb) / .3);stroke-width:1}
.kerb__door{fill:rgb(var(--bg-rgb) / .9);stroke:var(--accent);stroke-width:1.6}
.kerb__jamb{stroke:rgb(var(--accent-rgb) / .55);stroke-width:1;stroke-dasharray:2 3}
.kerb__ground{stroke:rgb(var(--ink-rgb) / .5);stroke-width:1.4}
.kerb__edge{stroke:rgb(var(--accent2-rgb) / .9);stroke-width:2.6}
.kerb__parcel rect{fill:rgb(var(--accent2-rgb) / .5);stroke:rgb(var(--ink-rgb) / .55);stroke-width:1;transition:fill .2s linear}
.kerb__parcel .kerb__lbl{fill:rgb(var(--ink-rgb) / .9);stroke:none}
.kerb:hover .kerb__parcel rect{fill:rgb(var(--accent-rgb) / .5)}
.kerb__count{fill:none;stroke:var(--accent);stroke-width:1.2}
.kerb__tag{font:600 7.4px var(--head);letter-spacing:.11em;fill:rgb(var(--ink-rgb) / .72)}
.kerb__tag--mid{text-anchor:middle;fill:var(--accent)}
.kerb__tag--end{text-anchor:end;fill:rgb(var(--ink-rgb) / .5);letter-spacing:.04em}

/* the split, used on a sub-page where the heading is a plain h2 */
.split--leaf{margin:var(--sp-4) 0 var(--sp-3)}
.split--leaf .split__body h2{margin-top:0}
@media (min-width:62rem){
  .split--leaf{grid-template-columns:minmax(0,12.5rem) minmax(0,1fr)}
  .split--leaf .split__fig{margin-top:.4rem;width:calc(100% + 1.6rem)}
  .split--leaf .kerb{max-width:none}
}

/* --------------------------------------------------- 09  margin-annotated */

.office__row{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--sp-1);margin:0 0 var(--sp-2);
}
.office__row p{max-width:34rem;margin:0}
.office__notes{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);min-width:0}
.office__note{
  display:flex;flex-direction:column;gap:.05em;min-width:0;
  padding-left:.6rem;border-left:2px solid rgb(var(--accent-rgb) / .7);
  transition:border-color .18s linear;
}
.office__note:hover{border-left-color:var(--accent)}
.office__k{
  font:600 .58rem/1.6 var(--head);letter-spacing:.17em;text-transform:uppercase;
  color:var(--label);
}
.office__v{
  font:600 .82rem/1.35 var(--head);letter-spacing:.02em;
  color:rgb(var(--ink-rgb) / .92);font-variant-numeric:tabular-nums;
}
@media (min-width:58rem){
  .office__row{grid-template-columns:minmax(0,1fr) minmax(0,12.5rem);column-gap:var(--sp-4)}
  .office__notes{flex-direction:column;gap:var(--sp-2);padding-top:.2em}
}

/* ------------------------------------------------------------------- tools */

.tool{
  padding:var(--sp-3) var(--sp-2);box-sizing:border-box;
  border:var(--rule);background:rgb(var(--surface-rgb) / .62);
  min-width:0;
}
.tool__h{
  margin:0 0 var(--sp-2);
  font:600 clamp(1.04rem,2.9vw,1.3rem)/1.24 var(--head);letter-spacing:-.004em;color:var(--ink);
}
.tool__intro{max-width:var(--measure);margin:0 0 var(--sp-3);font-size:.94rem;color:rgb(var(--ink-rgb) / .78)}

.tool__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2);margin:0 0 var(--sp-3)}
@media (min-width:30rem){
  .tool__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tool__grid--four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:46rem){
  .tool__grid--four{grid-template-columns:repeat(5,minmax(0,1fr))}
}
.field{display:flex;flex-direction:column;gap:.3em;margin:0;min-width:0}
.field label{
  font:600 .64rem/1.4 var(--head);letter-spacing:.13em;text-transform:uppercase;color:var(--label);
}
.field input{
  width:100%;box-sizing:border-box;padding:.5em .6em;
  font:600 1rem/1.3 var(--head);font-variant-numeric:tabular-nums;
  color:var(--ink);background:rgb(var(--bg-rgb) / .78);
  border:1px solid rgb(var(--accent2-rgb) / .6);border-radius:0;
  transition:border-color .16s linear, background-color .16s linear, box-shadow .16s var(--ease);
}
.field input:hover{border-color:rgb(var(--accent-rgb) / .7)}
.field input:focus{border-color:var(--accent);background:rgb(var(--bg-rgb) / .95);box-shadow:inset 0 -3px 0 0 rgb(var(--accent-rgb) / .55)}
.field input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.field input:invalid{border-color:var(--accent);box-shadow:inset 0 -3px 0 0 var(--accent)}

.out{border-top:1px solid rgb(var(--accent-rgb) / .5);padding-top:var(--sp-2);min-width:0}
.out__v{font:600 1.1rem/1.3 var(--head);color:var(--ink);font-variant-numeric:tabular-nums}
.out__v--good{color:var(--accent);font-size:.98rem}
.out__v--bad{color:var(--accent);font-size:.98rem;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.22em}
.out__v--note{font-size:.98rem;color:rgb(var(--ink-rgb) / .9)}
.out__sum{
  margin:.3em 0 0;padding:.28em 0 .28em .7em;
  border-left:1px solid rgb(var(--accent2-rgb) / .6);
  font:400 .84rem/1.5 var(--body);font-variant-numeric:tabular-nums;
  color:rgb(var(--ink-rgb) / .62);
  transition:border-color .2s linear, color .2s linear;
}
.out__sum:hover{border-color:var(--accent);color:rgb(var(--ink-rgb) / .86)}
.out__flag{
  margin:.6em 0 0;padding:.35em .7em;box-sizing:border-box;
  font:600 .78rem/1.45 var(--head);letter-spacing:.01em;
  color:var(--bg);background:rgb(var(--accent-rgb) / .9);
}
.out__flag[hidden]{display:none}

.dims__svg{
  display:block;width:100%;height:auto;
  border:var(--rule-soft);background:rgb(var(--bg-rgb) / .5);
}
.dims__face{stroke:rgb(var(--ink-rgb) / .45);stroke-width:1;transition:fill .2s linear}
.dims__face--top{fill:rgb(var(--ink-rgb) / .16)}
.dims__face--left{fill:rgb(var(--bg-rgb) / .7)}
.dims__face--right{fill:rgb(var(--bg-rgb) / .9)}
.dims__svg:hover .dims__face--top{fill:rgb(var(--accent-rgb) / .22)}
.dims__rule{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round}
.dims__tag{font:600 9px var(--head);letter-spacing:.08em;fill:var(--accent);text-anchor:middle}
.out--dims{border-top-color:rgb(var(--accent2-rgb) / .6)}

/* ------------------------------------------------------------------ office */

.office{padding-left:var(--sp-2);border-left:3px solid rgb(var(--accent2-rgb) / .7);min-width:0}
.office__h{
  margin:0 0 var(--sp-2);
  font:600 clamp(1.04rem,2.9vw,1.3rem)/1.24 var(--head);color:var(--ink);
}
.office p{max-width:var(--measure);margin:0 0 var(--sp-2);color:rgb(var(--ink-rgb) / .84)}

/* ------------------------------------------------------------------- footer */

.foot{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4);
  max-width:74rem;margin:var(--sp-6) auto 0;padding:var(--sp-4) var(--sp-2) 0;
  box-sizing:border-box;
  border-top:3px solid var(--accent);
}
@media (min-width:46rem){.foot{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:var(--sp-5)}}

.index__h{
  margin:0 0 var(--sp-2);
  font:600 .72rem/1.5 var(--head);letter-spacing:.2em;text-transform:uppercase;color:var(--label);
}
.index__list{margin:0 0 var(--sp-2);padding:0;list-style:none;counter-reset:idx}
.index__list li{counter-increment:idx;border-bottom:var(--rule-soft)}
.index__list a{
  display:flex;gap:.7em;padding:.5em 0;
  font-size:.94rem;color:var(--ink);text-decoration:none;
  transition:color .16s linear, padding-left .2s var(--ease);
}
.index__list a::before{
  content:counter(idx,decimal-leading-zero);
  flex:0 0 auto;
  font:600 .72rem/1.9 var(--head);letter-spacing:.1em;color:var(--label);
}
.index__list a:hover,.index__list a:focus-visible{color:var(--accent);padding-left:.4em}
.index__list a[aria-current=page]{color:var(--accent)}
.index__list a[aria-current=page]::before{color:var(--accent)}
.index__list--tools{counter-reset:none;border-top:var(--rule-soft);padding-top:var(--sp-1)}
.index__list--tools li{border-bottom:0}
.index__list--tools a::before{content:'\2192';letter-spacing:0}

.reg{padding:var(--sp-2);box-sizing:border-box;background:rgb(var(--surface-rgb) / .66);border:var(--rule-soft)}
.reg__name{
  margin:0 0 var(--sp-1);
  font:600 .92rem/1.3 var(--head);letter-spacing:.14em;color:var(--ink);
}
.reg__addr{margin:0 0 var(--sp-2);font-style:normal;font-size:.9rem;line-height:1.52;color:rgb(var(--ink-rgb) / .78)}
.reg__line{margin:0 0 .25em;font-size:.82rem;color:rgb(var(--ink-rgb) / .62)}

/* ------------------------------------------------- sub-page prose furniture */

.leaf{
  max-width:52rem;margin:0 auto;padding:var(--sp-4) var(--sp-2) 0;
  box-sizing:border-box;
}
.leaf__eyebrow{
  margin:0 0 var(--sp-1);
  font:600 .7rem/1.5 var(--head);letter-spacing:.18em;text-transform:uppercase;color:var(--label);
}
.leaf__h{
  margin:0 0 var(--sp-3);max-width:28ch;
  font:600 clamp(1.6rem,4.8vw,2.5rem)/1.1 var(--head);letter-spacing:-.012em;color:var(--ink);
  text-wrap:balance;
}
.leaf p{max-width:var(--measure);margin:0 0 var(--sp-2)}
.leaf h2{
  margin:var(--sp-4) 0 var(--sp-2);
  font:600 clamp(1.08rem,3vw,1.36rem)/1.22 var(--head);color:var(--ink);
  padding-bottom:.3em;border-bottom:var(--rule);
}
.leaf h3{
  margin:var(--sp-3) 0 var(--sp-1);
  font:600 .94rem/1.3 var(--head);letter-spacing:.03em;color:var(--accent);
}


.aside-note{
  margin:0 0 var(--sp-3);padding:var(--sp-2);box-sizing:border-box;
  border:var(--rule-soft);border-left:3px solid var(--accent);
  background:rgb(var(--surface-rgb) / .7);
}
.aside-note h2{margin:0 0 var(--sp-1);padding:0;border:0;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
.aside-note p{margin:0 0 .4em;font-size:.88rem;color:rgb(var(--ink-rgb) / .74)}
.aside-note p:last-child{margin-bottom:0}

.map{
  display:block;width:100%;height:auto;margin:0 0 var(--sp-2);
  border:var(--rule);background:rgb(var(--surface-rgb) / .7);
}
.map__plate{fill:rgb(var(--bg-rgb) / .45)}
.map__rail{fill:none;stroke:rgb(var(--ink-rgb) / .5);stroke-width:3}
.map__sleeper{stroke:rgb(var(--ink-rgb) / .34);stroke-width:1.1}
.map__road{fill:none;stroke:rgb(var(--accent2-rgb) / .9);stroke-width:4;stroke-linecap:round}
.map__road--minor{stroke-width:2;stroke:rgb(var(--accent2-rgb) / .62)}
.map__block{fill:rgb(var(--ink-rgb) / .09);stroke:rgb(var(--ink-rgb) / .2);stroke-width:.8}
.map__here{r:5;fill:var(--accent);transition:r .2s var(--ease)}
.map:hover .map__here{r:7}
.map__door{fill:none;stroke:var(--accent);stroke-width:1.6}
.map__tag{font:600 8.5px var(--head);letter-spacing:.07em;fill:rgb(var(--ink-rgb) / .8)}
.map__tag--mid{text-anchor:middle}
.map__tag--end{text-anchor:end}
.map__tag--key{fill:var(--accent)}
.map__north{font:600 8px var(--head);letter-spacing:.14em;fill:var(--accent2)}
.map__scale{stroke:rgb(var(--ink-rgb) / .6);stroke-width:1.2}

.crumb{margin:0 0 var(--sp-3);font-size:.82rem;color:rgb(var(--ink-rgb) / .56)}
.crumb a{text-decoration:none;border-bottom:1px solid rgb(var(--accent-rgb) / .5);transition:border-color .16s linear}
.crumb a:hover{border-color:var(--accent)}

/* ------------------------------------------------------------- the reveal
   One keyframes, chained by animation-delay. The resting state of every
   .rev block is its finished state; printIn only supplies the before. */

.rev{animation:printIn .46s var(--rd,0s) both var(--ease)}
.rev--1{--rd:.02s}
.rev--2{--rd:.1s}
.rev--3{--rd:.18s}
.rev--4{--rd:.26s}
.rev--5{--rd:.34s}
.rev--6{--rd:.42s}
.rev--7{--rd:.5s}
.rev--8{--rd:.58s}
.rev--9{--rd:.66s}
.rev--10{--rd:.74s}
.rev--11{--rd:.82s}

@keyframes printIn{
  from{opacity:0;transform:translateY(9px)}
  to{opacity:1;transform:none}
}

/* the label prints band by band, then the barcode draws, then the label lifts */

.lbl__band{transform-box:fill-box;transform-origin:center top;animation:bandDown .22s both steps(4,end)}
.lbl__band--addr{animation-delay:.5s}
.lbl__band--svc{animation-delay:.74s}
.lbl__band--route{animation-delay:.92s}
.lbl__band--code{animation-delay:1.1s}

@keyframes bandDown{
  from{transform:scaleY(0);opacity:.15}
  to{transform:none;opacity:1}
}

.bc__bar{animation:barUp .1s both var(--ease)}
.bc__bar:nth-child(1){animation-delay:1.14s}
.bc__bar:nth-child(2){animation-delay:1.17s}
.bc__bar:nth-child(3){animation-delay:1.2s}
.bc__bar:nth-child(4){animation-delay:1.23s}
.bc__bar:nth-child(5){animation-delay:1.26s}
.bc__bar:nth-child(6){animation-delay:1.29s}
.bc__bar:nth-child(7){animation-delay:1.32s}
.bc__bar:nth-child(8){animation-delay:1.35s}
.bc__bar:nth-child(9){animation-delay:1.38s}
.bc__bar:nth-child(10){animation-delay:1.41s}
.bc__bar:nth-child(11){animation-delay:1.44s}
.bc__bar:nth-child(12){animation-delay:1.47s}
.bc__bar:nth-child(13){animation-delay:1.5s}
.bc__bar:nth-child(14){animation-delay:1.53s}
.bc__bar:nth-child(15){animation-delay:1.56s}
.bc__bar:nth-child(16){animation-delay:1.59s}
.bc__bar:nth-child(17){animation-delay:1.62s}
.bc__bar:nth-child(18){animation-delay:1.65s}
.bc__bar:nth-child(19){animation-delay:1.68s}
.bc__bar:nth-child(20){animation-delay:1.71s}
.bc__bar:nth-child(21){animation-delay:1.74s}
.bc__bar:nth-child(22){animation-delay:1.77s}
.bc__bar:nth-child(23){animation-delay:1.8s}
.bc__bar:nth-child(24){animation-delay:1.83s}
.bc__bar:nth-child(25){animation-delay:1.86s}
.bc__bar:nth-child(26){animation-delay:1.89s}

@keyframes barUp{
  from{transform:scaleY(.04)}
  to{transform:none}
}

.head{animation:headSweep 1.45s .48s both linear}
@keyframes headSweep{
  0%{opacity:0;transform:translateY(0)}
  6%{opacity:1}
  94%{opacity:1;transform:translateY(76px)}
  100%{opacity:0;transform:translateY(76px)}
}

.lift{animation:peelLift .5s 1.95s both var(--ease)}
@keyframes peelLift{
  0%{transform:translate(0,0);filter:drop-shadow(0 0 0 rgb(var(--bg-rgb) / 0))}
  55%{transform:translate(-1px,-2px)}
  100%{transform:translate(-4px,-7px);filter:drop-shadow(3px 5px 3px rgb(var(--bg-rgb) / .75))}
}

/* while the chain is re-running the control is held shut */
.btn[aria-disabled=true]{
  background:rgb(var(--accent-rgb) / .34);color:rgb(var(--ink-rgb) / .62);
  box-shadow:4px 4px 0 0 rgb(var(--accent2-rgb) / .28);cursor:default;
}
.btn[aria-disabled=true]:hover,.btn[aria-disabled=true]:active{transform:none;box-shadow:4px 4px 0 0 rgb(var(--accent2-rgb) / .28)}
.panel.is-printing .panel__cap{border-color:var(--accent);color:rgb(var(--ink-rgb) / .84)}

/* ---------------------------------------------------------- reduced motion
   Every animated element already rests in its finished state, so switching
   the animations off lands the label applied, barcode drawn and lifted. */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  .rev{opacity:1;transform:none}
  .lbl__band{transform:none;opacity:1}
  .bc__bar{transform:none}
  .lift{transform:translate(-4px,-7px);filter:drop-shadow(3px 5px 3px rgb(var(--bg-rgb) / .75))}
  .head{opacity:0}
  .map__here{r:5}
  .btn:hover,.btn:active{transform:none;box-shadow:4px 4px 0 0 rgb(var(--accent2-rgb) / .6)}
  .mark:hover{letter-spacing:.17em}
  .mark:hover .mark__rule{width:1.4rem}
  .skip:focus{top:var(--sp-1)}
}

/* ------------------------------------------------------------------- print */

@media print{
  body.page{background:none;color:#151a22}
  .masthead,.rail,.btn,.skip{display:none}
  .sheet,.foot{max-width:none;padding:0}
  .step{margin-inline-start:0}
}