/* TAN SOLUTIONS LTD - household goods wholesale, Slough.
   One ledger, two columns: goods in on the left, goods out on the right.
   No reset. The layer below writes out the browser's own defaults for the four
   elements this design restyles, so that revert-layer has somewhere honest to
   land. Nothing on the page is blanket zeroed. */

@layer tsu_ua_defaults;

@layer tsu_ua_defaults {
  h2 {
    margin-block: 0.83em;
    font-size: 1.5em;
    font-weight: 700;
  }

  dl {
    margin-block: 1em;
  }

  ul {
    padding-inline-start: 40px;
    list-style: disc outside;
  }

  figure {
    margin-block: 1em;
    margin-inline: 40px;
  }
}

/* A geometry model, not a reset: no margin or padding is removed here. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --tsu-bg: #f4ece2;
  --tsu-ink: #312722;
  --tsu-rust: #9c4a22;
  --tsu-olive: #55604a;
  --tsu-surface: #fdf8f2;

  --tsu-ink-soft: rgb(49 39 34 / 0.81);
  --tsu-ink-mute: rgb(49 39 34 / 0.68);
  --tsu-rule: rgb(49 39 34 / 0.2);
  --tsu-rule-firm: rgb(49 39 34 / 0.42);
  --tsu-rule-faint: rgb(49 39 34 / 0.09);
  --tsu-rust-wash: rgb(156 74 34 / 0.1);
  --tsu-rust-edge: rgb(156 74 34 / 0.38);
  --tsu-olive-wash: rgb(85 96 74 / 0.12);
  --tsu-olive-edge: rgb(85 96 74 / 0.4);
  --tsu-shade: rgb(49 39 34 / 0.07);
  --tsu-speck-ink: rgb(49 39 34 / 0.11);
  --tsu-speck-rust: rgb(156 74 34 / 0.11);
  --tsu-speck-olive: rgb(85 96 74 / 0.12);

  --tsu-head: "Domine", Georgia, "Times New Roman", serif;
  --tsu-body: "Nobile", "Segoe UI", Tahoma, sans-serif;

  --tsu-pad: 1.15rem;
  --tsu-step: 0.55rem;
  --tsu-spine: 20px;
  --tsu-measure: 34rem;
  --tsu-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------- document */

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 1.5rem;
}

body {
  margin: 0;
  background-color: var(--tsu-bg);
  /* speckle: kraft-board fleck, four tiles at coprime sizes so the eye never
     resolves it into a dot grid */
  background-image:
    radial-gradient(circle at 13% 27%, var(--tsu-speck-ink) 0 1.1px, transparent 1.2px),
    radial-gradient(circle at 71% 9%, var(--tsu-speck-rust) 0 0.9px, transparent 1px),
    radial-gradient(circle at 37% 83%, var(--tsu-speck-olive) 0 1.3px, transparent 1.4px),
    radial-gradient(circle at 89% 61%, var(--tsu-speck-ink) 0 0.8px, transparent 0.9px);
  background-size: 97px 73px, 61px 89px, 113px 67px, 53px 101px;
  color: var(--tsu-ink);
  font-family: var(--tsu-body);
  font-size: 1rem;
  line-height: 1.62;
  overflow-wrap: break-word;
}

.tsu-page {
  min-height: 100vh;
  /* clip, never hidden: hidden would make this a scroll container and the
     sticky ledger head would stick to it instead of to the window. This is
     what lets the full-bleed band run to both edges without the scrollbar
     width showing up as a sideways scroll. */
  overflow-x: clip;
}

.tsu-wrapper {
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: var(--tsu-pad);
}

.tsu-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background-color: var(--tsu-ink);
  color: var(--tsu-surface);
  padding: 0.6rem 0.9rem;
  z-index: 90;
}

.tsu-skip:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* ------------------------------------------------------------- typography */

h1,
h2,
h3,
h4 {
  font-family: var(--tsu-head);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1 {
  margin-block: 0.35em 0.4em;
  font-size: clamp(1.65rem, 1.15rem + 2.6vw, 2.9rem);
}

h2 {
  margin-block: 0 0.75em;
  font-size: clamp(1.3rem, 1.1rem + 1.1vw, 1.72rem);
  color: var(--tsu-ink);
}

/* bracketed heads: the brackets are drawn, never typed into the markup */
.tsu-sec > h2::before,
.tsu-sec > h2::after {
  color: var(--tsu-rust);
  font-weight: 600;
}

.tsu-sec > h2::before {
  content: "[";
  margin-inline-end: 0.3em;
}

.tsu-sec > h2::after {
  content: "]";
  margin-inline-start: 0.26em;
}

h3 {
  margin-block: 0 0.5em;
  font-size: 1.06rem;
  letter-spacing: 0;
}

/* half-bracket on sheet titles: two borders, no glyph */
.tsu-sheet-title {
  position: relative;
  padding-inline-start: 0.62rem;
}

.tsu-sheet-title::before {
  content: "";
  position: absolute;
  inset-block: 0.14em 0.2em;
  inset-inline-start: 0;
  width: 0.34rem;
  border-inline-start: 2px solid currentColor;
  border-block-start: 2px solid currentColor;
  opacity: 0.55;
}

p {
  margin-block: 0 0.9em;
  max-width: var(--tsu-measure);
}

.tsu-lede {
  font-size: 1.08rem;
  color: var(--tsu-ink-soft);
}

strong {
  font-weight: 400;
  color: var(--tsu-rust);
  letter-spacing: 0.012em;
}

.tsu-prose ul:not(.tsu-register) {
  padding-inline-start: revert-layer;
  list-style: revert-layer;
  margin-block: 0 1em;
  max-width: var(--tsu-measure);
}

.tsu-prose ul:not(.tsu-register) li {
  margin-block-end: 0.35em;
  padding-inline-start: 0.1rem;
}

.tsu-prose ul:not(.tsu-register) li::marker {
  color: var(--tsu-rust);
}

.tsu-note dl {
  margin-block: revert-layer;
}

.tsu-fig {
  margin-inline: 0;
  margin-block: revert-layer;
}

.tsu-eyebrow {
  margin-block: 0 0.45em;
  font-size: 0.74rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--tsu-ink-mute);
  max-width: none;
}

.tsu-seq {
  margin-block: 0 1em;
  padding-inline-start: 0;
  list-style: none;
  counter-reset: tsu_seq;
  max-width: var(--tsu-measure);
}

.tsu-seq li {
  position: relative;
  counter-increment: tsu_seq;
  padding-inline-start: 2.3rem;
  padding-block: 0.4rem;
  border-block-end: 1px solid var(--tsu-rule-faint);
}

.tsu-seq li::before {
  content: counter(tsu_seq, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 0.45rem;
  font-family: var(--tsu-head);
  font-size: 0.82rem;
  color: var(--tsu-rust);
  letter-spacing: 0.04em;
}

a {
  color: var(--tsu-rust);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--tsu-rust-edge);
}

a:hover,
a:focus-visible {
  text-decoration-color: currentColor;
  color: var(--tsu-ink);
}

:focus-visible {
  outline: 2px solid var(--tsu-rust);
  outline-offset: 2px;
}

/* --------------------------------------------------------- masthead strip */

.tsu-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1rem;
  padding-block: 0.85rem 0.8rem;
  border-block-end: 1px solid var(--tsu-rule);
}

.tsu-brand {
  font-family: var(--tsu-head);
  font-size: 1.02rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tsu-ink);
  text-decoration: none;
  border-block-end: 3px solid var(--tsu-rust);
  padding-block-end: 0.12rem;
}

.tsu-brand span {
  color: var(--tsu-rust);
}

.tsu-top-meta {
  margin: 0;
  max-width: none;
  font-size: 0.73rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tsu-ink-mute);
}

/* ---------------------------------------------------------- side drawer */
/* With no JS the drawer is a plain block of links in the flow, the opener
   button is not rendered and nothing is hidden. The js class turns the same
   nav into the off-canvas panel. */

.tsu-burger,
.tsu-drawer-close {
  display: none;
}

.tsu-drawer {
  margin-block: 0.9rem 0;
  padding: 0.9rem 1rem 1rem;
  background-color: var(--tsu-surface);
  border: 1px solid var(--tsu-rule);
  border-inline-start: 4px solid var(--tsu-olive);
}

.tsu-drawer-head {
  margin-block: 0 0.6rem;
  max-width: none;
  font-family: var(--tsu-head);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tsu-ink-mute);
}

.tsu-drawer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tsu_nav;
}

.tsu-drawer-list li {
  counter-increment: tsu_nav;
  border-block-start: 1px solid var(--tsu-rule-faint);
}

.tsu-drawer-list li:first-child {
  border-block-start: 0;
}

.tsu-drawer-list a {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.52rem 0.4rem 0.52rem 0.2rem;
  text-decoration: none;
  color: var(--tsu-ink);
  font-size: 0.95rem;
}

.tsu-drawer-list a::before {
  content: counter(tsu_nav, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--tsu-head);
  font-size: 0.76rem;
  color: var(--tsu-rust);
  letter-spacing: 0.05em;
}

.tsu-drawer-list a:hover,
.tsu-drawer-list a:focus-visible {
  background-color: var(--tsu-rust-wash);
  padding-inline-start: 0.5rem;
}

.tsu-drawer-list a[aria-current="page"] {
  background-color: var(--tsu-olive-wash);
  box-shadow: inset 3px 0 0 var(--tsu-olive);
  padding-inline-start: 0.5rem;
}

.tsu-drawer-foot {
  margin-block: 0.85rem 0;
  max-width: none;
  font-size: 0.8rem;
  color: var(--tsu-ink-mute);
}

.tsu-scrim {
  display: none;
}

.tsu-js .tsu-burger {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-inline-start: auto;
  padding: 0.44rem 0.8rem;
  background-color: var(--tsu-surface);
  color: var(--tsu-ink);
  border: 1px solid var(--tsu-rule-firm);
  font-family: var(--tsu-body);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.tsu-js .tsu-burger:hover,
.tsu-js .tsu-burger:focus-visible {
  background-color: var(--tsu-ink);
  color: var(--tsu-surface);
  border-color: var(--tsu-ink);
}

.tsu-burger-bars {
  position: relative;
  width: 1.05rem;
  height: 0.62rem;
  flex: 0 0 auto;
}

.tsu-burger-bars::before,
.tsu-burger-bars::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background-color: currentColor;
}

.tsu-burger-bars::before {
  top: 0;
}

.tsu-burger-bars::after {
  bottom: 0;
}

.tsu-burger[aria-expanded="true"] .tsu-burger-bars::before {
  transform: translateY(0.3rem) rotate(28deg);
}

.tsu-burger[aria-expanded="true"] .tsu-burger-bars::after {
  transform: translateY(-0.3rem) rotate(-28deg);
}

.tsu-js .tsu-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 70;
  width: min(21.5rem, 88vw);
  margin: 0;
  padding: 1.1rem 1.1rem 1.4rem;
  overflow-y: auto;
  border: 0;
  border-inline-end: 4px solid var(--tsu-rust);
  box-shadow: 0.5rem 0 1.6rem rgb(49 39 34 / 0.22);
  transform: translateX(-102%);
}

.tsu-js .tsu-drawer[data-state="open"] {
  transform: translateX(0);
}

.tsu-js .tsu-drawer-close {
  display: block;
  width: 100%;
  margin-block-start: 1rem;
  padding: 0.5rem;
  background-color: transparent;
  color: var(--tsu-ink);
  border: 1px dashed var(--tsu-rule-firm);
  font-family: var(--tsu-body);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.tsu-js .tsu-drawer-close:hover,
.tsu-js .tsu-drawer-close:focus-visible {
  background-color: var(--tsu-rust-wash);
  border-style: solid;
}

.tsu-js .tsu-scrim {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 60;
  background-color: rgb(49 39 34 / 0.44);
  opacity: 0;
  pointer-events: none;
}

.tsu-js .tsu-scrim[data-state="open"] {
  opacity: 1;
  pointer-events: auto;
}

/* ------------------------------------------------------- opener: rule pair */

.tsu-open {
  padding-block: 1.6rem 0;
}

.tsu-rule {
  height: 9px;
  background-color: var(--tsu-ink);
  transform-origin: left center;
}

.tsu-rule-bot {
  height: 9px;
  background-color: transparent;
  background-image: linear-gradient(to right, var(--tsu-rust) 0 50%, var(--tsu-olive) 50% 100%);
}

.tsu-open-body {
  padding-block: 1rem 1.3rem;
}

.tsu-open-body h1 {
  max-width: 44rem;
}

.tsu-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  margin-block: 0.9rem 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tsu-ink-mute);
}

.tsu-facts b {
  font-weight: 400;
  color: var(--tsu-ink);
}

/* ------------------------------------------------- the ledger and its spine */

.tsu-ledger-head {
  display: none;
}

.tsu-sec {
  padding-block: 1.9rem 0.3rem;
  border-block-start: 1px solid var(--tsu-rule);
}

.tsu-sec:first-of-type {
  border-block-start: 0;
}

.tsu-sec-ref {
  margin-block: 0 0.3rem;
  max-width: none;
  font-family: var(--tsu-head);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  /* The assigned rust alone lands at 2.36:1 on this ground at 11.5px. Mixed toward the ink it
     keeps the hue and the palette hex literal (the cross-site gate reads literals) while the
     section reference becomes readable. */
  color: color-mix(in srgb, var(--tsu-rust) 62%, var(--tsu-ink));
}

.tsu-split {
  display: grid;
  gap: 1.5rem;
}

.tsu-half {
  min-width: 0;
}

.tsu-tab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin-block: 0 0.85rem;
  padding-block-end: 0.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tsu-ink-mute);
  border-block-end: 2px solid var(--tsu-rule-firm);
  max-width: none;
}

.tsu-in .tsu-tab {
  border-block-end-color: var(--tsu-rust-edge);
  color: var(--tsu-rust);
}

.tsu-out .tsu-tab {
  border-block-end-color: var(--tsu-olive-edge);
  color: var(--tsu-olive);
}

.tsu-tab b {
  font-weight: 400;
  color: var(--tsu-ink-mute);
  letter-spacing: 0.1em;
}

.tsu-spine {
  display: none;
}

@media (min-width: 58rem) {
  .tsu-split {
    grid-template-columns: minmax(0, 1fr) var(--tsu-spine) minmax(0, 1fr);
    gap: 0 1.5rem;
    align-items: start;
  }

  .tsu-spine {
    display: block;
    align-self: stretch;
    min-height: 100%;
    position: relative;
    background-image: repeating-linear-gradient(
      to bottom,
      var(--tsu-rule-firm) 0 5px,
      transparent 5px 12px
    );
    background-size: 1px 12px;
    background-position: 50% 0;
    background-repeat: repeat-y;
  }

  .tsu-spine::before {
    content: "";
    position: absolute;
    top: 0.42rem;
    inset-inline: 50%;
    width: 9px;
    height: 9px;
    margin-inline-start: -4.5px;
    background-color: var(--tsu-bg);
    border: 2px solid var(--tsu-rust);
    transform: rotate(45deg);
  }

  .tsu-ledger-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--tsu-spine) minmax(0, 1fr);
    gap: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 4;
    margin-block: 1.4rem 0;
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    padding-block: 0.4rem 0.35rem;
    padding-inline: max(var(--tsu-pad), calc(50vw - 37rem + var(--tsu-pad)));
    background-color: var(--tsu-bg);
    border-block-end: 1px solid var(--tsu-rule-firm);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }

  .tsu-ledger-head p {
    margin: 0;
    max-width: none;
  }

  .tsu-lh-in {
    color: var(--tsu-rust);
  }

  .tsu-lh-out {
    color: var(--tsu-olive);
  }

  .tsu-lh-spine {
    text-align: center;
    color: var(--tsu-ink-mute);
  }

  .tsu-sec > h2 {
    padding-inline-start: 1.15em;
  }
}

/* ================================================= composition shapes ====
   The split is the constant: goods in reads down the left, goods out down the
   right, all the way to the footer. What changes section to section is the
   FIGURE that split is drawn as. Eight shapes, each used once on the ledger
   page, each sub-page taking four of them in its own order.

     pair     two drawings side by side, there to be compared
     offset   narrow column + wide column, the drawing crossing the gutter
     ledger   one ruled table, the two halves as its two value columns
     band     edge to edge, dark, the measure broken
     quote    one sentence at size, the body resuming under it
     cards    a row of small cards, one fact each
     chain    numbered stations on a drawn line, sheets hung off it
     wide     one drawing at full width, the prose read as its caption          */

/* bracketed heads travel with the shape, so the brackets are not tied to a
   direct child of <section> any more */
h2.tsu-bh::before,
h2.tsu-bh::after {
  color: var(--tsu-rust);
  font-weight: 600;
}

h2.tsu-bh::before {
  content: "[";
  margin-inline-end: 0.3em;
}

h2.tsu-bh::after {
  content: "]";
  margin-inline-start: 0.26em;
}

.tsu-lead {
  margin-block: 0 1.2rem;
  max-width: 46rem;
  font-size: 1.02rem;
  color: var(--tsu-ink-soft);
}

/* ------------------------------------------------------------- 1. pair --- */
/* Two figures, same frame, same height, with one dimension rail drawn under
   both so the eye is told to compare them rather than read them in turn. */

.tsu-pair {
  display: grid;
  gap: 1.1rem;
}

.tsu-pair-fig {
  margin: 0;
  min-width: 0;
}

.tsu-pair-frame {
  padding: 0.55rem 0.6rem 0.2rem;
  background-color: var(--tsu-surface);
  border: 1px solid var(--tsu-rule-firm);
  border-block-start: 5px solid var(--tsu-rust);
}

.tsu-pair-fig.tsu-out .tsu-pair-frame {
  border-block-start-color: var(--tsu-olive);
}

.tsu-pair-stamp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
  margin-block: 0 0.4rem;
  max-width: none;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tsu-rust);
}

.tsu-pair-fig.tsu-out .tsu-pair-stamp {
  color: var(--tsu-olive);
}

.tsu-pair-stamp b {
  font-weight: 400;
  color: var(--tsu-ink-mute);
  letter-spacing: 0.1em;
}

.tsu-pair-fig figcaption {
  margin-block-start: 0.55rem;
  font-size: 0.88rem;
  color: var(--tsu-ink-soft);
}

.tsu-pair-rail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 0.8rem;
  margin-block: 0.4rem 0;
  padding-block: 0.5rem 0;
}

.tsu-pair-rail p {
  grid-column: 2;
  margin: 0;
  max-width: none;
  text-align: center;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tsu-ink-mute);
}

.tsu-pair-rail::before,
.tsu-pair-rail::after {
  content: "";
  width: 1.1rem;
  height: 9px;
  border-block: 1px solid var(--tsu-rule-firm);
  border-inline-start: 1px solid var(--tsu-rule-firm);
}

.tsu-pair-rail::after {
  border-inline: 0 1px solid var(--tsu-rule-firm);
  border-inline-start: 0;
  border-inline-end: 1px solid var(--tsu-rule-firm);
}

/* --------------------------------------------- the record slip -----------
   Not a spec sheet. A spec sheet describes a THING and is read before work; a
   slip is a LINE OUT OF A RECORD and is written during it, so it gets ruled
   rows, a reference at the head and room for a stamp across the foot. */

.tsu-slip {
  background-color: var(--tsu-surface);
  border: 1px solid var(--tsu-rule);
  border-block-start: 3px solid var(--tsu-rust);
  padding: 0.7rem 0.8rem 0.5rem;
}

.tsu-out .tsu-slip,
.tsu-slip-out {
  border-block-start-color: var(--tsu-olive);
}

.tsu-slip-ref {
  margin-block: 0 0.5rem;
  max-width: none;
  font-family: var(--tsu-head);
  font-size: 0.72rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--tsu-ink-mute);
}

.tsu-slip-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tsu-slip-rows li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 0.9rem;
  padding-block: 0.33rem;
  border-block-end: 1px dotted var(--tsu-rule-firm);
}

.tsu-slip-rows li:last-child {
  border-block-end: 0;
}

.tsu-slip-rows b {
  flex: 0 0 auto;
  font-weight: 400;
  font-size: 0.67rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tsu-ink-mute);
}

.tsu-slip-rows span {
  flex: 1 1 8rem;
  text-align: end;
  font-size: 0.89rem;
}

.tsu-slip-stamp {
  margin-block: 0.6rem 0;
  max-width: none;
  padding: 0.3rem 0.5rem;
  border: 2px solid var(--tsu-rust);
  color: var(--tsu-rust);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
}

.tsu-slip-stamp-out {
  border-color: var(--tsu-olive);
  color: var(--tsu-olive);
}

/* --------------------------------------------------------- 2. offset ----- */
/* The narrow column holds the plan of the unit, and the plan does not stop at
   the gutter - its despatch doors belong on the goods-out side, so the drawing
   is let across. The float in the wide column is what the prose wraps around. */

.tsu-offset {
  display: grid;
  gap: 1.4rem;
}

.tsu-offset-gap {
  display: none;
}

.tsu-crossing {
  margin: 0 0 1rem;
  min-width: 0;
}

.tsu-crossing .tsu-draw {
  display: block;
  width: 100%;
  height: auto;
}

.tsu-crossing figcaption {
  margin-block-start: 0.5rem;
  font-size: 0.86rem;
  color: var(--tsu-ink-mute);
}

/* ---------------------------------------------------------- 3. ledger ---- */
/* One ruled table across the whole width. The two halves are its two value
   columns, so a reader still follows one side straight down - down a column of
   cells this time instead of a column of paragraphs. */

.tsu-ledger-wrap {
  margin-block: 0 0.6rem;
}

.tsu-ledger-table {
  width: 100%;
  border-collapse: collapse;
  text-align: start;
}

.tsu-ledger-table caption {
  margin-block-end: 0.7rem;
  text-align: start;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tsu-ink-mute);
}

.tsu-ledger-table th,
.tsu-ledger-table td {
  padding: 0.62rem 0.8rem 0.62rem 0;
  vertical-align: top;
  text-align: start;
}

.tsu-ledger-table thead th {
  padding-block: 0.3rem 0.4rem;
  border-block-end: 2px solid var(--tsu-rule-firm);
  font-family: var(--tsu-head);
  font-size: 0.73rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-weight: 600;
}

.tsu-ledger-table thead th:nth-child(2) {
  color: var(--tsu-rust);
}

.tsu-ledger-table thead th:nth-child(3) {
  color: var(--tsu-olive);
}

.tsu-ledger-table tbody th {
  width: 22%;
  font-family: var(--tsu-head);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--tsu-ink);
}

.tsu-ledger-table tbody th small {
  display: block;
  margin-block-start: 0.15rem;
  font-family: var(--tsu-body);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--tsu-ink-mute);
}

.tsu-ledger-table tbody tr {
  border-block-end: 1px solid var(--tsu-rule-faint);
}

.tsu-ledger-table tbody tr:nth-child(odd) {
  background-color: var(--tsu-shade);
}

.tsu-ledger-table tbody tr:last-child {
  border-block-end: 2px solid var(--tsu-rule-firm);
}

.tsu-ledger-table td {
  font-size: 0.93rem;
  line-height: 1.55;
}

.tsu-ledger-foot {
  margin-block: 0.75rem 0;
  max-width: 44rem;
  font-size: 0.88rem;
  color: var(--tsu-ink-soft);
}

/* ------------------------------------------------------------ 4. band ---- */
/* Edge to edge, and the only dark ground on the site. The two sheets sit on it
   the way two sheets of paper sit on a bench. */

.tsu-band {
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  padding-block: 1.9rem 2.1rem;
  padding-inline: max(var(--tsu-pad), calc(50vw - 37rem + var(--tsu-pad)));
  background-color: var(--tsu-ink);
  background-image:
    radial-gradient(circle at 19% 31%, rgb(253 248 242 / 0.11) 0 1.1px, transparent 1.2px),
    radial-gradient(circle at 67% 77%, rgb(156 74 34 / 0.3) 0 1.2px, transparent 1.3px),
    radial-gradient(circle at 44% 12%, rgb(253 248 242 / 0.08) 0 0.9px, transparent 1px);
  background-size: 89px 71px, 109px 83px, 59px 97px;
  color: var(--tsu-surface);
  border-block: 5px solid var(--tsu-rust);
}

.tsu-band h2 {
  color: var(--tsu-surface);
}

.tsu-band h2.tsu-bh::before,
.tsu-band h2.tsu-bh::after {
  color: var(--tsu-rust);
}

.tsu-band-lead {
  max-width: 42rem;
  color: rgb(253 248 242 / 0.76);
}

.tsu-band-pair {
  display: grid;
  gap: 1.1rem;
  margin-block-start: 1.3rem;
}

.tsu-band .tsu-sheet {
  margin-block: 0;
  color: var(--tsu-ink);
  border-color: rgb(49 39 34 / 0.5);
  box-shadow: 0 10px 0 -4px rgb(49 39 34 / 0.55);
}

.tsu-band-note {
  margin-block: 1.2rem 0;
  max-width: 44rem;
  font-size: 0.86rem;
  color: rgb(253 248 242 / 0.64);
}

.tsu-band-note a {
  color: var(--tsu-bg);
  text-decoration-color: rgb(244 236 226 / 0.5);
}

.tsu-band-note a:hover,
.tsu-band-note a:focus-visible {
  color: #fdf8f2;
  text-decoration-color: currentColor;
}

/* ----------------------------------------------------------- 5. quote ---- */
/* One sentence off the bench, at size. The bracket is drawn and hangs out of
   the measure, which is the only place on the site a bracket is that big. */

.tsu-quote {
  position: relative;
  margin-block: 1rem 1.5rem;
  padding-block: 0.9rem 0.3rem;
}

.tsu-quote::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 5.5rem;
  height: 4px;
  background-color: var(--tsu-rust);
}

.tsu-quote-line {
  margin: 0;
  max-width: 40rem;
  font-family: var(--tsu-head);
  font-weight: 600;
  font-size: clamp(1.32rem, 0.95rem + 2.1vw, 2.22rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.tsu-quote-from {
  margin-block: 0.8rem 0;
  max-width: none;
  font-size: 0.73rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--tsu-ink-mute);
  border-block-start: 1px solid var(--tsu-rule);
  padding-block-start: 0.5rem;
}

.tsu-quote-body {
  display: grid;
  gap: 1.2rem;
}

.tsu-quote-body p:first-child::first-line {
  letter-spacing: 0.02em;
}

.tsu-sidenote {
  margin-block: 0 0.9em;
  font-size: 0.73rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--tsu-rust);
  max-width: none;
}

.tsu-out .tsu-sidenote {
  color: var(--tsu-olive);
}

/* ----------------------------------------------------------- 6. cards ---- */
/* Four decks, four cards, one fact each and nothing else on the card. */

.tsu-cards {
  display: grid;
  gap: 0.75rem;
  margin-block: 0.2rem 1.1rem;
  padding: 0;
  list-style: none;
}

.tsu-cards > li {
  display: flex;
}

.tsu-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.3rem;
  padding: 0.85rem 0.8rem 0.95rem;
  background-color: var(--tsu-surface);
  border: 1px solid var(--tsu-rule);
  border-block-start: 4px solid var(--tsu-rust);
}

.tsu-cards > li:nth-child(even) .tsu-card {
  border-block-start-color: var(--tsu-olive);
}

.tsu-card-ref {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tsu-ink-mute);
  max-width: none;
}

.tsu-card-fig {
  font-family: var(--tsu-head);
  font-size: 1.22rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: none;
}

.tsu-card-fig span {
  display: block;
  font-family: var(--tsu-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tsu-ink-mute);
  margin-block-start: 0.2rem;
}

.tsu-card p:last-child {
  margin-block-end: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--tsu-ink-soft);
  max-width: none;
}

/* ----------------------------------------------------------- 7. chain ---- */
/* Stations on one drawn line, largest to smallest, and the two working sheets
   hung off the part of the line each one computes. */

.tsu-chain {
  position: relative;
  margin-block: 0.4rem 1.4rem;
  padding: 0;
  list-style: none;
  counter-reset: tsu_chain;
}

.tsu-chain > li {
  position: relative;
  counter-increment: tsu_chain;
  padding-inline-start: 2.5rem;
  padding-block: 0.5rem 0.7rem;
}

.tsu-chain > li::before {
  content: counter(tsu_chain, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 0.55rem;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: var(--tsu-bg);
  border: 2px solid var(--tsu-rust);
  font-family: var(--tsu-head);
  font-size: 0.72rem;
  color: var(--tsu-rust);
  z-index: 2;
}

.tsu-chain > li:nth-child(n + 4)::before {
  border-color: var(--tsu-olive);
  color: var(--tsu-olive);
}

/* the line: vertical on a phone, horizontal once the stations sit in a row */
.tsu-chain::before {
  content: "";
  position: absolute;
  inset-block: 1.4rem;
  inset-inline-start: 0.85rem;
  width: 2px;
  background-image: linear-gradient(to bottom, var(--tsu-rust) 0 46%, var(--tsu-olive) 54% 100%);
  z-index: 1;
}

.tsu-chain-name {
  margin-block: 0 0.2rem;
  max-width: none;
  font-family: var(--tsu-head);
  font-size: 0.97rem;
}

.tsu-chain-unit {
  margin-block: 0;
  max-width: none;
  font-size: 0.84rem;
  color: var(--tsu-ink-soft);
}

.tsu-hangers {
  display: grid;
  gap: 1.3rem;
}

.tsu-hanger {
  position: relative;
}

.tsu-hanger-tag {
  margin-block: 0 0.5rem;
  max-width: none;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tsu-rust);
}

.tsu-hanger.tsu-out .tsu-hanger-tag {
  color: var(--tsu-olive);
}

/* ------------------------------------------------------------ 8. wide ---- */
/* One drawing the full width of the measure, and the prose beneath it read as
   its caption rather than as a column of its own. */

.tsu-wide {
  margin: 0 0 1.1rem;
}

.tsu-wide-frame {
  padding: 0.8rem 0.7rem 0.5rem;
  background-color: var(--tsu-surface);
  border: 1px solid var(--tsu-rule);
  border-block-end: 5px solid var(--tsu-ink);
}

.tsu-wide .tsu-draw {
  display: block;
  width: 100%;
  height: auto;
}

.tsu-wide figcaption {
  margin-block-start: 0.9rem;
}

.tsu-wide figcaption p {
  max-width: 38rem;
  font-size: 0.93rem;
}

.tsu-wide figcaption p:last-child {
  margin-block-end: 0;
}

.tsu-wide-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  margin-block: 0 0.8rem;
  padding: 0;
  list-style: none;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tsu-ink-mute);
}

.tsu-wide-key li::before {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-inline-end: 0.45rem;
  vertical-align: -0.05em;
  border: 2px solid var(--tsu-rust);
}

.tsu-wide-key li:nth-child(2)::before {
  border-color: var(--tsu-olive);
}

.tsu-wide-key li:nth-child(3)::before {
  border-color: var(--tsu-ink);
  border-style: dashed;
}

/* static half of the closing drawing - the load that came in, already landed */
.tsu-carton-in {
  fill: var(--tsu-rust-wash);
  stroke: var(--tsu-rust-edge);
  stroke-width: 1.4;
}

.tsu-carton-in-lid {
  stroke: var(--tsu-rust-edge);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.tsu-wrapline-in {
  fill: none;
  stroke: var(--tsu-ink-mute);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.tsu-cut {
  stroke: var(--tsu-ink);
  stroke-width: 1.6;
}

.tsu-travel {
  fill: none;
  stroke: var(--tsu-rule-firm);
  stroke-width: 1.4;
  stroke-dasharray: 7 5;
}

.tsu-draw-label {
  font-family: var(--tsu-body);
  font-size: 9px;
  letter-spacing: 0.16em;
  fill: var(--tsu-ink-mute);
  text-transform: uppercase;
}

/* parts that only ever appear in the compared pair at the head of a page */
.tsu-corner {
  fill: none;
  stroke: var(--tsu-olive);
  stroke-width: 2.4;
  stroke-linejoin: miter;
}

.tsu-strap {
  fill: none;
  stroke: var(--tsu-ink);
  stroke-width: 1.5;
  opacity: 0.62;
}

.tsu-tag-card {
  fill: var(--tsu-surface);
  stroke: var(--tsu-ink-mute);
  stroke-width: 1;
}

.tsu-tag-line {
  stroke: var(--tsu-ink-mute);
  stroke-width: 1.4;
  opacity: 0.8;
}

.tsu-dim {
  stroke: var(--tsu-ink-mute);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.tsu-dim-tick {
  stroke: var(--tsu-ink-mute);
  stroke-width: 1.4;
}

/* ============================================ the shapes at reading width = */

@media (min-width: 58rem) {
  .tsu-pair {
    grid-template-columns: minmax(0, 1fr) var(--tsu-spine) minmax(0, 1fr);
    gap: 0 1.5rem;
    align-items: stretch;
  }

  .tsu-pair > .tsu-pair-fig:first-child {
    grid-column: 1;
  }

  .tsu-pair > .tsu-pair-fig:last-of-type {
    grid-column: 3;
  }

  .tsu-pair-rail {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .tsu-offset {
    grid-template-columns: minmax(0, 0.74fr) var(--tsu-spine) minmax(0, 1.26fr);
    gap: 0 1.5rem;
    align-items: start;
  }

  /* the drawing takes its own column plus the gutter, then another inch of the
     goods-out column; the float below is the hole its corner sits in */
  .tsu-crossing {
    grid-column: 1 / 3;
    width: calc(100% + 4.6rem);
    position: relative;
    z-index: 2;
  }

  .tsu-offset > .tsu-spine {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 2;
    z-index: 1;
  }

  /* The hole the drawing's corner sits in. It is deliberately a little TALLER
     and a little WIDER than the drawing: over-reserving costs a band of white
     space, under-reserving runs the goods-out prose under the plan, which is
     what the first build did to three bullets. */
  .tsu-offset-gap {
    display: block;
    float: inline-start;
    width: 5rem;
    height: 23rem;
    shape-outside: inset(0);
  }

  .tsu-offset > .tsu-crossing {
    grid-row: 1;
  }

  .tsu-offset > .tsu-in {
    grid-column: 1;
    grid-row: 2;
  }

  .tsu-offset > .tsu-out {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .tsu-ledger-table tbody th {
    width: 20%;
  }

  .tsu-ledger-table th + th,
  .tsu-ledger-table th + td {
    padding-inline-start: 1.1rem;
    border-inline-start: 1px solid var(--tsu-rule-faint);
  }

  .tsu-ledger-table td + td {
    padding-inline-start: 1.1rem;
    border-inline-start: 1px solid var(--tsu-rule-faint);
  }

  .tsu-band-pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.6rem;
  }

  .tsu-quote-body {
    grid-template-columns: minmax(0, 1fr) var(--tsu-spine) minmax(0, 1fr);
    gap: 0 1.5rem;
    align-items: start;
  }

  .tsu-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
  }

  /* the stations run across the page and the line runs through them */
  .tsu-chain {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 1.1rem;
  }

  .tsu-chain > li {
    padding-inline-start: 0;
    padding-block: 2.8rem 0.4rem;
  }

  .tsu-chain > li::before {
    inset-inline-start: 0;
    top: 0.35rem;
  }

  .tsu-chain::before {
    inset-block: auto;
    top: 1.18rem;
    inset-inline: 0.85rem calc((100% - 4 * 1.1rem) / 5 - 0.85rem);
    width: auto;
    height: 2px;
    background-image: linear-gradient(to right, var(--tsu-rust) 0 46%, var(--tsu-olive) 54% 100%);
  }

  .tsu-hangers {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 1.1rem;
  }

  /* each sheet hangs under the stations it works between, and the two never
     share a column, so the second can be dropped down the page without any
     chance of running into the first */
  .tsu-hanger-in {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .tsu-hanger-out {
    grid-column: 3 / -1;
    grid-row: 1;
    margin-block-start: 7rem;
  }

  .tsu-hanger::before {
    content: "";
    position: absolute;
    top: -2.1rem;
    inset-inline-start: 0.85rem;
    width: 2px;
    height: 2.1rem;
    background-color: var(--tsu-rust-edge);
  }

  .tsu-hanger-out::before {
    top: -9.1rem;
    height: 9.1rem;
    background-color: var(--tsu-olive-edge);
  }

  .tsu-wide-frame {
    padding: 1.2rem 1.4rem 0.8rem;
  }

  .tsu-wide figcaption {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 2rem;
    margin-block-start: 1.1rem;
  }

  .tsu-wide-key {
    grid-column: 1 / -1;
  }
}

/* The shaped sections carry their own head placement, so the ledger indent
   that pulls a split heading over its left column is taken back off. */
@media (min-width: 58rem) {
  .tsu-sec.tsu-sec-wide > h2,
  .tsu-sec.tsu-sec-wide > .tsu-sec-ref {
    padding-inline-start: 0;
  }

  .tsu-sec-wide > .tsu-lead {
    max-width: 52rem;
  }
}

/* ---------------------------------------------------- the ledger table at
   phone width: the rows restack, so the roles are declared rather than left
   to the display property, and each cell says which side of the floor it is
   describing. */

@media (max-width: 57.99rem) {
  /* caption is in this list on purpose: left as table-caption inside a
     block-display table it shrink-wraps to one word per line */
  .tsu-ledger-table,
  .tsu-ledger-table caption,
  .tsu-ledger-table thead,
  .tsu-ledger-table tbody,
  .tsu-ledger-table tr,
  .tsu-ledger-table th,
  .tsu-ledger-table td {
    display: block;
  }

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

  .tsu-ledger-table tbody tr {
    margin-block-end: 0.8rem;
    padding: 0.6rem 0.7rem 0.7rem;
    background-color: var(--tsu-surface);
    border: 1px solid var(--tsu-rule);
  }

  .tsu-ledger-table tbody tr:nth-child(odd) {
    background-color: var(--tsu-surface);
  }

  .tsu-ledger-table tbody th {
    width: auto;
    padding: 0 0 0.45rem;
    border-block-end: 1px solid var(--tsu-rule-faint);
  }

  .tsu-ledger-table td {
    padding: 0.55rem 0 0;
  }

  .tsu-ledger-table td::before {
    content: attr(data-side);
    display: block;
    margin-block-end: 0.15rem;
    font-size: 0.68rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--tsu-rust);
  }

  .tsu-ledger-table td + td::before {
    color: var(--tsu-olive);
  }
}

/* -------------------------------------------------------- the spec sheets */

.tsu-sheet {
  margin-block: 0 1.2rem;
  background-color: var(--tsu-surface);
  background-image:
    radial-gradient(circle at 23% 41%, var(--tsu-speck-ink) 0 0.7px, transparent 0.8px),
    radial-gradient(circle at 78% 72%, var(--tsu-speck-olive) 0 0.8px, transparent 0.9px);
  background-size: 37px 29px, 43px 31px;
  border: 1px solid var(--tsu-rule);
  box-shadow: 0 1px 0 var(--tsu-shade);
}

.tsu-sheet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.7rem;
  padding: 0.5rem 1.4rem 0.5rem 0.7rem;
  background-color: var(--tsu-rust-wash);
  border-block-end: 1px solid var(--tsu-rule);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
}

.tsu-out .tsu-sheet-head {
  background-color: var(--tsu-olive-wash);
}

.tsu-sheet-ref {
  font-family: var(--tsu-head);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--tsu-ink-mute);
  flex: 0 0 auto;
}

.tsu-sheet-title {
  margin: 0;
  font-size: 0.98rem;
}

.tsu-sheet-body {
  display: grid;
  grid-template-columns: minmax(6.5rem, 10rem) minmax(0, 1fr);
  margin: 0;
  padding: 0;
}

.tsu-sheet-body dt {
  padding: 0.44rem 0.6rem 0.44rem 0.7rem;
  border-block-end: 1px dotted var(--tsu-rule-firm);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tsu-olive);
  align-self: stretch;
}

.tsu-out .tsu-sheet-body dt {
  color: var(--tsu-rust);
}

.tsu-sheet-body dd {
  margin: 0;
  padding: 0.44rem 0.7rem 0.44rem 0;
  border-block-end: 1px dotted var(--tsu-rule-firm);
  font-size: 0.92rem;
  line-height: 1.5;
}

.tsu-sheet-body > dt:last-of-type,
.tsu-sheet-body > dd:last-of-type {
  border-block-end: 0;
}

.tsu-sheet-foot {
  margin: 0;
  padding: 0.5rem 0.7rem 0.6rem;
  max-width: none;
  border-block-start: 1px solid var(--tsu-rule);
  font-size: 0.8rem;
  color: var(--tsu-ink-mute);
}

.tsu-note {
  margin-block: 0 1.1rem;
  padding: 0.75rem 0.85rem;
  border-inline-start: 3px solid var(--tsu-olive);
  background-color: rgb(85 96 74 / 0.06);
  font-size: 0.9rem;
}

.tsu-in .tsu-note {
  border-inline-start-color: var(--tsu-rust);
  background-color: rgb(156 74 34 / 0.05);
}

.tsu-note p:last-child {
  margin-block-end: 0;
}

/* ------------------------------------------------------------- the drawings */

.tsu-fig figcaption {
  margin-block-start: 0.5rem;
  font-size: 0.8rem;
  color: var(--tsu-ink-mute);
  max-width: var(--tsu-measure);
}

.tsu-draw {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--tsu-surface);
  border: 1px solid var(--tsu-rule);
}

.tsu-plan-wall {
  fill: none;
  stroke: var(--tsu-ink);
  stroke-width: 2.4;
}

.tsu-plan-rack {
  fill: var(--tsu-olive-wash);
  stroke: var(--tsu-olive);
  stroke-width: 1;
}

.tsu-plan-zone {
  fill: var(--tsu-rust-wash);
  stroke: var(--tsu-rust);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.tsu-plan-aisle {
  fill: none;
  stroke: var(--tsu-rule-firm);
  stroke-width: 1;
  stroke-dasharray: 7 5;
}

.tsu-plan-door {
  fill: none;
  stroke: var(--tsu-rust);
  stroke-width: 3.4;
  stroke-linecap: square;
}

.tsu-plan-door-out {
  stroke: var(--tsu-olive);
}

.tsu-plan-label {
  font-family: "Nobile", sans-serif;
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: var(--tsu-ink-soft);
  text-transform: uppercase;
}

.tsu-plan-arrow {
  fill: none;
  stroke: var(--tsu-ink);
  stroke-width: 1.4;
}

/* the pallet set-piece */

.tsu-pallet-deck {
  fill: var(--tsu-olive-wash);
  stroke: var(--tsu-olive);
  stroke-width: 1.6;
}

.tsu-pallet-block {
  fill: var(--tsu-olive);
}

.tsu-carton {
  fill: var(--tsu-rust-wash);
  stroke: var(--tsu-rust);
  stroke-width: 1.2;
}

.tsu-carton-lid {
  fill: none;
  stroke: var(--tsu-rust-edge);
  stroke-width: 1;
}

.tsu-tier {
  transform-box: fill-box;
  transform-origin: center bottom;
}

.tsu-wrapline {
  fill: none;
  stroke: var(--tsu-ink);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  opacity: 0.5;
}

.tsu-plate {
  transform-box: fill-box;
  transform-origin: center;
}

.tsu-plate-card {
  fill: var(--tsu-surface);
  stroke: var(--tsu-ink);
  stroke-width: 1.2;
}

.tsu-plate-bar {
  fill: var(--tsu-ink);
}

.tsu-plate-band {
  fill: var(--tsu-rust);
}

.tsu-ground {
  stroke: var(--tsu-rule-firm);
  stroke-width: 1;
  stroke-dasharray: 5 4;
}

/* ------------------------------------------------------------- the widgets */

.tsu-calc {
  margin-block: 0 1.2rem;
  padding: 0;
  border: 1px solid var(--tsu-rule-firm);
  background-color: var(--tsu-surface);
}

.tsu-calc legend {
  margin-inline-start: 0.65rem;
  padding-inline: 0.4rem;
  font-family: var(--tsu-head);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tsu-calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.7rem 0.8rem;
  padding: 0.3rem 0.8rem 0.9rem;
}

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

.tsu-field span {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tsu-ink-mute);
}

.tsu-field input,
.tsu-field select {
  width: 100%;
  padding: 0.42rem 0.5rem;
  background-color: var(--tsu-bg);
  color: var(--tsu-ink);
  border: 1px solid var(--tsu-rule-firm);
  border-radius: 0;
  font-family: var(--tsu-body);
  font-size: 0.95rem;
}

.tsu-field input:focus,
.tsu-field select:focus {
  border-color: var(--tsu-rust);
  background-color: var(--tsu-surface);
  box-shadow: inset 0 -2px 0 var(--tsu-rust);
  outline: 2px solid var(--tsu-rust);
  outline-offset: 1px;
}

.tsu-field-wide {
  grid-column: 1 / -1;
}

.tsu-calc-act {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  padding: 0 0.8rem 0.9rem;
}

.tsu-btn {
  padding: 0.5rem 1rem;
  background-color: var(--tsu-ink);
  color: var(--tsu-surface);
  border: 1px solid var(--tsu-ink);
  font-family: var(--tsu-body);
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
}

.tsu-btn:hover,
.tsu-btn:focus-visible {
  background-color: var(--tsu-rust);
  border-color: var(--tsu-rust);
  transform: translateY(-1px);
}

.tsu-btn-quiet {
  background-color: transparent;
  color: var(--tsu-ink);
  border-style: dashed;
}

.tsu-btn-quiet:hover,
.tsu-btn-quiet:focus-visible {
  background-color: var(--tsu-olive-wash);
  color: var(--tsu-ink);
  border-color: var(--tsu-olive);
}

.tsu-out-block {
  border-block-start: 1px solid var(--tsu-rule);
  padding: 0.75rem 0.8rem 0.9rem;
  background-color: var(--tsu-bg);
}

.tsu-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 0.7rem;
  margin: 0;
  padding: 0;
}

.tsu-result dt {
  padding: 0.3rem 0 0.3rem 0;
  border-block-end: 1px dotted var(--tsu-rule-firm);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tsu-ink-mute);
}

.tsu-result dd {
  margin: 0;
  padding: 0.3rem 0;
  border-block-end: 1px dotted var(--tsu-rule-firm);
  font-family: var(--tsu-head);
  font-size: 1rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tsu-arith {
  margin-block: 0.75rem 0;
  padding: 0.55rem 0.65rem;
  background-color: var(--tsu-surface);
  border-inline-start: 3px solid var(--tsu-olive);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  max-width: none;
}

.tsu-arith ol {
  margin: 0;
  padding-inline-start: 1.15rem;
}

.tsu-arith li {
  margin-block-end: 0.18rem;
}

.tsu-arith li:last-child {
  margin-block-end: 0;
}

.tsu-arith-head {
  margin-block: 0 0.35rem;
  max-width: none;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tsu-ink-mute);
}

.tsu-flag {
  display: inline-block;
  margin-block-start: 0.6rem;
  padding: 0.12rem 0.5rem;
  background-color: var(--tsu-rust-wash);
  border: 1px solid var(--tsu-rust-edge);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tsu-rust);
}

.tsu-flag-fits {
  background-color: var(--tsu-olive-wash);
  border-color: var(--tsu-olive-edge);
  color: var(--tsu-olive);
}

.tsu-guide {
  margin-block: 0.65rem 0;
  max-width: none;
  font-size: 0.76rem;
  color: var(--tsu-ink-mute);
}

.tsu-layerplan {
  display: block;
  width: 100%;
  max-width: 17rem;
  height: auto;
  margin-block-start: 0.7rem;
  background-color: var(--tsu-surface);
  border: 1px dashed var(--tsu-rule-firm);
}

.tsu-layerplan-pallet {
  fill: none;
  stroke: var(--tsu-olive);
  stroke-width: 2;
}

.tsu-layerplan-box {
  fill: var(--tsu-rust-wash);
  stroke: var(--tsu-rust);
  stroke-width: 1;
}

.tsu-nojs-note {
  display: none;
}

html:not(.tsu-js) .tsu-nojs-note {
  display: block;
  margin-block: 0.4rem 0;
  padding: 0.5rem 0.65rem;
  background-color: var(--tsu-rust-wash);
  font-size: 0.82rem;
  max-width: none;
}

html:not(.tsu-js) .tsu-calc-act {
  padding-block-end: 0.3rem;
}

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

.tsu-register {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tsu-register a {
  display: block;
  padding: 0.55rem 0.7rem;
  background-color: var(--tsu-surface);
  border: 1px solid var(--tsu-rule);
  border-inline-start: 3px solid var(--tsu-rule-firm);
  text-decoration: none;
  color: var(--tsu-ink);
}

.tsu-register a:hover,
.tsu-register a:focus-visible {
  border-inline-start-color: var(--tsu-rust);
  transform: translateX(2px);
}

.tsu-register b {
  display: block;
  font-family: var(--tsu-head);
  font-weight: 600;
  font-size: 0.95rem;
}

.tsu-register span {
  display: block;
  font-size: 0.82rem;
  color: var(--tsu-ink-mute);
}

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

.tsu-foot {
  margin-block-start: 2.6rem;
  padding-block: 1.5rem 2.2rem;
  border-block-start: 9px solid var(--tsu-ink);
  background-color: rgb(253 248 242 / 0.7);
}

.tsu-foot-grid {
  display: grid;
  gap: 1.2rem;
}

.tsu-foot-h {
  margin-block: 0 0.5rem;
  max-width: none;
  font-family: var(--tsu-head);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tsu-ink-mute);
}

.tsu-foot address {
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.75;
}

.tsu-foot-reg {
  margin-block: 0.7rem 0;
  font-size: 0.86rem;
  color: var(--tsu-ink-soft);
}

.tsu-foot-reg span {
  display: block;
}

.tsu-foot-mail {
  margin-block: 0.7rem 0;
  font-size: 0.95rem;
}

.tsu-foot-note {
  font-size: 0.82rem;
  color: var(--tsu-ink-mute);
  max-width: 30rem;
}

@media (min-width: 46rem) {
  .tsu-foot-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.6rem 2.4rem;
  }

  /* the register of sheets came out of the body and into the footer, where it
     wants the whole width rather than half of one column */
  .tsu-foot-wide {
    grid-column: 1 / -1;
    padding-block-start: 1.1rem;
    border-block-start: 1px solid var(--tsu-rule);
  }

  .tsu-register {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tsu-foot-wide .tsu-register {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------- motion */
/* Every transition, every animation and every pre-animation start state in
   this file sits inside this one block. A reader who asks for reduced motion
   is never served a start state that needs motion to be undone. */

@media (prefers-reduced-motion: no-preference) {
  a {
    transition: color 160ms var(--tsu-ease), text-decoration-color 160ms var(--tsu-ease);
  }

  .tsu-js .tsu-drawer {
    transition: transform 320ms var(--tsu-ease);
  }

  .tsu-js .tsu-scrim {
    transition: opacity 280ms linear;
  }

  .tsu-js .tsu-burger {
    transition: background-color 170ms var(--tsu-ease), color 170ms var(--tsu-ease),
      border-color 170ms var(--tsu-ease);
  }

  .tsu-burger-bars::before,
  .tsu-burger-bars::after {
    transition: transform 260ms var(--tsu-ease);
  }

  .tsu-drawer-list a {
    transition: background-color 150ms linear, padding-inline-start 150ms var(--tsu-ease);
  }

  .tsu-btn {
    transition: background-color 170ms var(--tsu-ease), border-color 170ms var(--tsu-ease),
      transform 170ms var(--tsu-ease);
  }

  .tsu-field input,
  .tsu-field select {
    transition: border-color 150ms linear, background-color 150ms linear,
      box-shadow 150ms linear;
  }

  .tsu-register a {
    transition: transform 180ms var(--tsu-ease), border-inline-start-color 180ms linear;
  }

  .tsu-sheet-head {
    transition: background-color 200ms linear;
  }

  /* reveal: a class set once on load, no scroll coupling anywhere */
  .tsu-js .tsu-sheet,
  .tsu-js .tsu-calc,
  .tsu-js .tsu-fig {
    transition: opacity 520ms var(--tsu-ease), transform 520ms var(--tsu-ease);
  }

  .tsu-js:not(.tsu-ready) .tsu-sheet,
  .tsu-js:not(.tsu-ready) .tsu-calc,
  .tsu-js:not(.tsu-ready) .tsu-fig {
    opacity: 0;
    transform: translateY(10px);
  }

  .tsu-js .tsu-rule {
    transition: transform 620ms var(--tsu-ease);
  }

  .tsu-js:not(.tsu-ready) .tsu-rule {
    transform: scaleX(0.04);
  }

  .tsu-js .tsu-tab {
    transition: border-block-end-color 420ms var(--tsu-ease);
  }

  .tsu-js:not(.tsu-ready) .tsu-tab {
    border-block-end-color: var(--tsu-rule-faint);
  }

  /* the set-piece: tiers up, wrap on, plate stamped. Driven only by the
     machine's timer, never by the scroll position. */
  .tsu-js .tsu-tier {
    transition: opacity 300ms linear, transform 420ms var(--tsu-ease);
  }

  .tsu-js .tsu-tier:not([data-set="1"]) {
    opacity: 0;
    transform: translateY(16px) scaleY(0.82);
  }

  .tsu-js .tsu-tier[data-set="1"] {
    animation: tsu_tier_settle 440ms var(--tsu-ease) both;
  }

  .tsu-js .tsu-wrapline:not([data-set="1"]) {
    stroke-dashoffset: 100;
  }

  .tsu-js .tsu-wrapline[data-set="1"] {
    animation: tsu_wrap_travel 1700ms linear both;
  }

  .tsu-js .tsu-plate {
    transition: opacity 240ms linear;
  }

  .tsu-js .tsu-plate:not([data-set="1"]) {
    opacity: 0;
  }

  .tsu-js .tsu-plate[data-set="1"] {
    animation: tsu_plate_stamp 420ms var(--tsu-ease) both;
  }

  .tsu-calc[data-landed="1"] .tsu-out-block {
    animation: tsu_result_land 700ms var(--tsu-ease) both;
  }


  /* --- the shapes, on the same one-shot load class as everything else --- */

  .tsu-js .tsu-pair-fig,
  .tsu-js .tsu-crossing,
  .tsu-js .tsu-wide {
    transition: opacity 540ms var(--tsu-ease), transform 540ms var(--tsu-ease);
  }

  .tsu-js:not(.tsu-ready) .tsu-pair-fig,
  .tsu-js:not(.tsu-ready) .tsu-crossing,
  .tsu-js:not(.tsu-ready) .tsu-wide {
    opacity: 0;
    transform: translateY(12px);
  }

  .tsu-card {
    transition: border-block-start-width 180ms var(--tsu-ease),
      box-shadow 180ms var(--tsu-ease), transform 180ms var(--tsu-ease);
  }

  .tsu-card:hover,
  .tsu-card:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 3px 0 var(--tsu-shade);
  }

  .tsu-ledger-table tbody tr {
    transition: background-color 160ms linear;
  }

  .tsu-ledger-table tbody tr:hover {
    background-color: var(--tsu-rust-wash);
  }

  .tsu-chain > li::before {
    transition: background-color 200ms linear, color 200ms linear;
  }

  /* the chain draws itself once, down the page on a phone and across it on a
     wider screen; the hanger lines drop from the chain to their sheets after */
  .tsu-js .tsu-chain::before {
    transform-origin: top center;
    animation: tsu_chain_fall 900ms var(--tsu-ease) 160ms both;
  }

  .tsu-js .tsu-hanger::before {
    transform-origin: top center;
    animation: tsu_chain_fall 420ms var(--tsu-ease) 900ms both;
  }

  @media (min-width: 58rem) {
    .tsu-js .tsu-chain::before {
      transform-origin: left center;
      animation-name: tsu_chain_run;
    }
  }

  @keyframes tsu_chain_fall {
    from {
      transform: scaleY(0);
    }

    to {
      transform: scaleY(1);
    }
  }

  @keyframes tsu_chain_run {
    from {
      transform: scaleX(0);
    }

    to {
      transform: scaleX(1);
    }
  }

  @keyframes tsu_tier_settle {
    0% {
      opacity: 0;
      transform: translateY(16px) scaleY(0.82);
    }

    68% {
      opacity: 1;
      transform: translateY(-2px) scaleY(1.04);
    }

    100% {
      opacity: 1;
      transform: translateY(0) scaleY(1);
    }
  }

  @keyframes tsu_wrap_travel {
    0% {
      stroke-dashoffset: 100;
    }

    100% {
      stroke-dashoffset: 0;
    }
  }

  @keyframes tsu_plate_stamp {
    0% {
      opacity: 0;
      transform: scale(1.34) rotate(-3deg);
    }

    70% {
      opacity: 1;
      transform: scale(0.97) rotate(0.4deg);
    }

    100% {
      opacity: 1;
      transform: scale(1) rotate(0);
    }
  }

  @keyframes tsu_result_land {
    0% {
      box-shadow: inset 0 0 0 0 var(--tsu-olive);
      background-color: var(--tsu-olive-wash);
    }

    100% {
      box-shadow: inset 0 -2px 0 0 var(--tsu-olive);
      background-color: var(--tsu-bg);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  /* The finished state, landed rather than shortened: every tier placed, the
     wrap fully drawn, the plate on the front face, the chain drawn end to end
     and both hanger lines down. */
  .tsu-tier,
  .tsu-plate,
  .tsu-sheet,
  .tsu-calc,
  .tsu-fig,
  .tsu-pair-fig,
  .tsu-crossing,
  .tsu-wide {
    opacity: 1;
    transform: none;
  }

  .tsu-chain::before,
  .tsu-hanger::before {
    transform: none;
    animation: none;
  }

  .tsu-wrapline {
    stroke-dashoffset: 0;
  }

  .tsu-rule {
    transform: none;
  }
}

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

@media print {
  body {
    background-image: none;
    color: #312722;
    font-size: 11pt;
  }

  .tsu-burger,
  .tsu-drawer,
  .tsu-scrim,
  .tsu-drawer-close,
  .tsu-skip {
    display: none;
  }

  .tsu-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 1.2rem;
  }

  .tsu-spine {
    display: none;
  }

  /* on paper the browser's own heading scale beats a viewport clamp, so the
     written-out default is reached for rather than guessed at */
  .tsu-sec > h2 {
    font-size: revert-layer;
  }

  .tsu-sheet,
  .tsu-calc {
    break-inside: avoid;
    box-shadow: none;
  }

  .tsu-foot {
    border-block-start-width: 3px;
  }
}