@property --ldw-step {
  syntax: "<integer>";
  inherits: true;
  initial-value: 6;
}

@property --ldw-tier {
  syntax: "<integer>";
  inherits: true;
  initial-value: 3;
}

@property --ldw-ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #33231b;
}

@property --ldw-rise {
  syntax: "<length>";
  inherits: true;
  initial-value: 15px;
}

/* 00 · sheet stock */

:root {
  --ldw-bg: #f3e7dd;
  --ldw-ink: #33231b;
  --ldw-accent: #a8431c;
  --ldw-accent2: #5d6b4a;
  --ldw-surface: #fdf6f0;

  --ldw-rule: color-mix(in srgb, var(--ldw-ink) 20%, transparent);
  --ldw-rule-firm: color-mix(in srgb, var(--ldw-ink) 40%, transparent);
  --ldw-rule-faint: color-mix(in srgb, var(--ldw-ink) 9%, transparent);
  --ldw-dim: color-mix(in srgb, var(--ldw-ink) 82%, var(--ldw-bg));

  /* Text tokens, derived — never a sixth hex. The five palette colours are mixing stock; the
     three below are what any of them becomes when it has to be READ rather than drawn with.
     Pure --ldw-accent on the page ground measures 4.96:1 and on the header/footer ground 3.89:1,
     under the 4.5 AA floor for body text, so the accent keeps its job on rules, straps, borders
     and the folded corner, and hands lettering to these. Each is stated as a mix of the two ends
     of the palette, so the dark-scheme overrides below re-derive them with no second definition:
     in dark, --ldw-ink is the pale colour and the same declaration lightens instead of darkening.
     Measured floors across both schemes, worst ground: dim 4.77, accent-ink 4.70, accent2-ink
     4.92, accent-lift (on the ink nav bar and the band) 4.86. */
  --ldw-accent-ink: color-mix(in srgb, var(--ldw-accent) 52%, var(--ldw-ink));
  --ldw-accent2-ink: color-mix(in srgb, var(--ldw-accent2) 52%, var(--ldw-ink));
  --ldw-accent-lift: color-mix(in srgb, var(--ldw-accent) 58%, var(--ldw-bg));
  --ldw-shade: color-mix(in srgb, var(--ldw-ink) 6%, transparent);
  --ldw-under: color-mix(in srgb, var(--ldw-ink) 13%, var(--ldw-bg));
  --ldw-ring: var(--ldw-accent);
  --ldw-rise: 15px;
  --ldw-step: 6;
  --ldw-tier: 3;

  --ldw-notch: clamp(7px, 1.9vw, 23px);
  --ldw-gut: clamp(13px, 4.2vw, 36px);
  --ldw-sheet: 68ch;
  --ldw-fold: clamp(2.3rem, 7vw, 3.4rem);

  --ldw-flute-fine: repeating-linear-gradient(90deg,
      transparent 0 1px,
      color-mix(in srgb, var(--ldw-ink) 4%, transparent) 1px 2px,
      transparent 2px 4px);
  --ldw-flute: repeating-linear-gradient(90deg,
      transparent 0 2px,
      color-mix(in srgb, var(--ldw-ink) 11%, transparent) 2px 3px,
      transparent 3px 4px,
      color-mix(in srgb, var(--ldw-ink) 5%, transparent) 4px 5px,
      transparent 5px 7px);
  --ldw-flute-wide: repeating-linear-gradient(90deg,
      transparent 0 4px,
      color-mix(in srgb, var(--ldw-ink) 9%, transparent) 4px 6px,
      transparent 6px 11px);
  --ldw-leader: radial-gradient(circle at 50% 100%,
      currentColor 0 0.9px, transparent 1.3px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ldw-bg: color-mix(in srgb, #33231b 84%, #000000);
    --ldw-ink: color-mix(in srgb, #f3e7dd 93%, #33231b);
    --ldw-surface: color-mix(in srgb, #33231b 92%, #f3e7dd);
    --ldw-accent: color-mix(in srgb, #a8431c 70%, #f3e7dd);
    --ldw-accent2: color-mix(in srgb, #5d6b4a 62%, #f3e7dd);
    --ldw-under: color-mix(in srgb, #33231b 70%, #000000);
  }
}

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  color-scheme: light dark;
  background: var(--ldw-bg);
}

html *,
html *::before,
html *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0 0 7.6rem;
  padding-bottom: calc(7.6rem + env(safe-area-inset-bottom, 0px));
  font: 400 1.0625rem/1.58 Varta, "Segoe UI", system-ui, sans-serif;
  color: var(--ldw-ink);
  background-color: var(--ldw-bg);
  background-image: var(--ldw-flute-fine);
  background-attachment: fixed;
  overflow-wrap: break-word;
}

/* 01 · the way in */

body > a:first-child {
  position: absolute;
  left: var(--ldw-gut);
  top: 0;
  z-index: 9;
  translate: 0 -140%;
  padding: 0.5rem 0.9rem;
  font: 600 0.9rem/1.2 Varta, system-ui, sans-serif;
  color: var(--ldw-surface);
  background: var(--ldw-ink);
  text-decoration: none;
  transition: translate 180ms ease-out;
}

body > a:first-child:focus-visible {
  translate: 0 0;
  outline: 3px solid var(--ldw-ring);
  outline-offset: 2px;
}

/* 02 · the footer bar — one mechanism, every width */

body > nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 8;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  background-color: var(--ldw-ink);
  background-image: var(--ldw-flute-wide);
  border-top: 3px solid var(--ldw-accent);
}

body > nav > ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 72rem;
  margin-inline: auto;
}

body > nav > ol > li {
  min-width: 0;
  border-right: 1px solid color-mix(in srgb, var(--ldw-bg) 22%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ldw-bg) 22%, transparent);
}

body > nav > ol > li:nth-child(3n) {
  border-right: 0;
}

body > nav > ol > li:nth-child(n + 4) {
  border-bottom: 0;
}

body > nav > ol > li > a {
  display: grid;
  grid-template-columns: 1.35em minmax(0, 1fr);
  align-items: baseline;
  gap: 0.35em;
  padding: 0.62rem 0.5rem 0.68rem;
  min-height: 2.9rem;
  color: color-mix(in srgb, var(--ldw-bg) 86%, var(--ldw-ink));
  font: 400 0.9rem/1.22 Varta, system-ui, sans-serif;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

body > nav > ol > li > a > b {
  font: 700 0.76rem/1.5 "Hepta Slab", Georgia, serif;
  color: var(--ldw-accent-lift);
  letter-spacing: 0.02em;
  transition: color 160ms ease;
}

body > nav > ol > li > a:hover,
body > nav > ol > li > a:focus-visible {
  background: color-mix(in srgb, var(--ldw-bg) 13%, transparent);
  color: var(--ldw-bg);
}

body > nav > ol > li > a:focus-visible {
  outline: 3px solid var(--ldw-accent);
  outline-offset: -3px;
}

body > nav > ol > li > a[aria-current="page"] {
  background: color-mix(in srgb, var(--ldw-accent) 26%, transparent);
  color: var(--ldw-bg);
  box-shadow: inset 0 -0.28rem 0 0 var(--ldw-accent);
}

body > nav > ol > li > a[aria-current="page"] > b {
  color: var(--ldw-bg);
}

/* 03 · the opener — a folded corner */

body > header {
  position: relative;
  margin: 0;
  padding: calc(var(--ldw-gut) + 0.3rem) var(--ldw-gut) 1.5rem;
  background-color: var(--ldw-under);
  background-image: var(--ldw-flute);
  border-bottom: 1px solid var(--ldw-rule);
}

body > header > div {
  position: relative;
  padding: 1.15rem clamp(0.9rem, 3.4vw, 1.8rem) 1.25rem;
  max-width: 72rem;
  margin-inline: auto;
  background: var(--ldw-surface);
  clip-path: polygon(0 0, calc(100% - var(--ldw-fold)) 0, 100% var(--ldw-fold), 100% 100%, 0 100%);
  box-shadow: 0 1px 0 0 var(--ldw-rule-faint);
}

body > header > div::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--ldw-fold);
  height: var(--ldw-fold);
  background: linear-gradient(225deg,
      color-mix(in srgb, var(--ldw-ink) 34%, var(--ldw-surface)) 0%,
      color-mix(in srgb, var(--ldw-ink) 11%, var(--ldw-surface)) 62%,
      color-mix(in srgb, var(--ldw-ink) 20%, var(--ldw-surface)) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transform-origin: 100% 0;
  animation: ldw-fold 760ms cubic-bezier(0.2, 0.86, 0.3, 1.02) both;
}

body > header > div > p:first-child {
  margin: 0 0 0.55rem;
  padding-right: var(--ldw-fold);
  font: 700 clamp(0.82rem, 2.7vw, 0.94rem)/1.3 "Hepta Slab", Georgia, serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ldw-accent-ink);
}

body > header > div > p:first-child > svg {
  vertical-align: -0.28em;
  margin-right: 0.45em;
}

body > header > div > h1 {
  margin: 0 0 0.9rem;
  padding-right: calc(var(--ldw-fold) * 0.4);
  max-width: 34ch;
  font: 700 clamp(1.55rem, 6.1vw, 2.5rem)/1.1 "Hepta Slab", Georgia, serif;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

body > header > div > p + h1 {
  border-top: 1px solid var(--ldw-rule);
  padding-top: 0.85rem;
}

body > header > div > h1 + p {
  margin: 0 0 1.1rem;
  max-width: 56ch;
  color: var(--ldw-dim);
}

body > header > div > dl {
  display: grid;
  gap: 0 1rem;
  margin: 0;
  padding: 0.75rem 0 0;
  border-top: 2px solid var(--ldw-ink);
  font-size: 0.925rem;
}

body > header > div > dl > dt {
  font: 600 0.7rem/1.9 Varta, system-ui, sans-serif;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ldw-accent2-ink);
}

body > header > div > dl > dd {
  margin: 0 0 0.6rem;
  font-variant-numeric: tabular-nums;
}

body > header a {
  color: var(--ldw-accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 150ms ease, background-color 150ms ease;
}

body > header a:hover {
  color: var(--ldw-ink);
  background: color-mix(in srgb, var(--ldw-accent) 17%, transparent);
}

body > header a:focus-visible {
  outline: 3px solid var(--ldw-ring);
  outline-offset: 2px;
}

/* 04 · the staircase */

main {
  display: block;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--ldw-gut);
}

main > section {
  position: relative;
  margin: 0;
  padding: 1.6rem 0 1.75rem;
  border-top: 1px solid var(--ldw-rule-faint);
  opacity: clamp(0, var(--ldw-step) - var(--ldw-i, 0) + 1, 1);
  translate: 0 calc(var(--ldw-rise) * clamp(0, var(--ldw-i, 0) - var(--ldw-step), 1));
  transition: opacity 420ms ease-out, translate 520ms cubic-bezier(0.18, 0.92, 0.26, 1.04);
}

main > section:first-of-type {
  border-top: 0;
}

#ldw-stage-1 {
  --ldw-i: 1;
  margin-left: 0;
}

#ldw-stage-2 {
  --ldw-i: 2;
  margin-left: var(--ldw-notch);
}

#ldw-stage-3 {
  --ldw-i: 3;
  margin-left: calc(var(--ldw-notch) * 2);
}

#ldw-stage-4 {
  --ldw-i: 4;
  margin-left: calc(var(--ldw-notch) * 3);
}

#ldw-stage-5 {
  --ldw-i: 5;
  margin-left: calc(var(--ldw-notch) * 4);
}

#ldw-stage-6 {
  --ldw-i: 6;
  margin-left: calc(var(--ldw-notch) * 5);
}

main > section[id] {
  padding-left: clamp(0.7rem, 2.6vw, 1.25rem);
  border-left: 2px solid var(--ldw-rule);
  background-image: var(--ldw-flute);
  background-repeat: no-repeat;
  background-size: clamp(0.7rem, 2.6vw, 1.25rem) 100%;
  background-position: left top;
}

main > section[id]::before {
  content: "";
  position: absolute;
  left: calc(var(--ldw-notch) * -1 - 2px);
  top: -1px;
  width: var(--ldw-notch);
  height: 2px;
  background: var(--ldw-rule);
}

#ldw-stage-1::before {
  display: none;
}

main > section[id]::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 3.4rem;
  background: var(--ldw-accent);
  transition: height 440ms ease-out;
}

main > section[id]:hover::after {
  height: 100%;
}

main[data-run-in] > section {
  padding-left: clamp(0.6rem, 2.2vw, 1.15rem);
  border-left: 2px solid var(--ldw-rule-faint);
  background-image: var(--ldw-flute);
  background-repeat: no-repeat;
  background-size: clamp(0.6rem, 2.2vw, 1.15rem) 100%;
  background-position: left top;
  transition: border-left-color 240ms ease;
}

main[data-run-in] > #ldw-stage-1 {
  --ldw-i: 0;
  margin-left: 0;
}

main[data-run-in] > section:nth-child(2) {
  margin-left: calc(var(--ldw-notch) * 0.7);
}

main[data-run-in] > section:nth-child(3) {
  margin-left: calc(var(--ldw-notch) * 1.4);
}

main[data-run-in] > section:nth-child(4) {
  margin-left: calc(var(--ldw-notch) * 2.1);
}

main[data-run-in] > section:nth-child(n + 5) {
  margin-left: calc(var(--ldw-notch) * 2.8);
}

main[data-run-in] > section:nth-child(n + 2)::before {
  content: "";
  position: absolute;
  left: calc(var(--ldw-notch) * -0.7 - 2px);
  top: -1px;
  width: calc(var(--ldw-notch) * 0.7);
  height: 2px;
  background: var(--ldw-rule);
}

main[data-run-in] > section:nth-child(n + 5)::before {
  width: 0;
}

main[data-run-in] > section:hover {
  border-left-color: var(--ldw-accent);
}

/* 05 · heads with a dotted leader to the sheet code */

main > section > h2 {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  margin: 0 0 0.85rem;
  font: 700 clamp(1.17rem, 4.1vw, 1.52rem)/1.2 "Hepta Slab", Georgia, serif;
  letter-spacing: -0.008em;
}

main > section > h2::after {
  content: "";
  order: 1;
  flex: 1 1 1.5rem;
  min-width: 1.1rem;
  height: 0.78em;
  color: var(--ldw-rule-firm);
  background-image: var(--ldw-leader);
  background-size: 6px 6px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  clip-path: inset(0 calc(100% * (1 - clamp(0, var(--ldw-step) - var(--ldw-i, 0) + 1, 1))) 0 0);
  transition: clip-path 540ms ease-out 80ms;
}

main > section > h2 > span {
  order: 2;
  flex: 0 0 auto;
  font: 600 0.72rem/1.4 Varta, system-ui, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ldw-accent2-ink);
  white-space: nowrap;
}

main > section > h3 {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin: 1.6rem 0 0.6rem;
  font: 700 1.015rem/1.3 "Hepta Slab", Georgia, serif;
}

main > section > h3::after {
  content: "";
  flex: 1 1 auto;
  height: 0.7em;
  color: var(--ldw-rule);
  background-image: var(--ldw-leader);
  background-size: 7px 7px;
  background-repeat: repeat-x;
  background-position: 0 100%;
}

/* 06 · running text */

main p {
  margin: 0 0 0.95rem;
  max-width: var(--ldw-sheet);
}

main p:last-child {
  margin-bottom: 0;
}

main strong {
  font-weight: 600;
  color: color-mix(in srgb, var(--ldw-ink) 92%, var(--ldw-accent));
}

main em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  padding: 0 0.14em;
  background: color-mix(in srgb, var(--ldw-accent2) 15%, transparent);
  box-shadow: inset 0 -1px 0 0 color-mix(in srgb, var(--ldw-accent2) 50%, transparent);
}

main a {
  color: var(--ldw-accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 150ms ease, background-color 150ms ease;
}

main a:hover {
  color: var(--ldw-ink);
  background: color-mix(in srgb, var(--ldw-accent) 17%, transparent);
}

main a:focus-visible,
body > footer a:focus-visible {
  outline: 3px solid var(--ldw-ring);
  outline-offset: 2px;
  border-radius: 1px;
}

/* 07 · spec sheets */

main [data-sheet] {
  margin: 1.1rem 0 1.25rem;
  padding: 0;
  max-width: var(--ldw-sheet);
  background: var(--ldw-surface);
  border: 1px solid var(--ldw-rule);
  border-left: 3px solid var(--ldw-accent2);
}

main [data-sheet] > p {
  margin: 0;
  max-width: none;
  padding: 0.55rem clamp(0.6rem, 2.4vw, 0.95rem) 0.5rem;
  border-bottom: 2px solid var(--ldw-ink);
  font: 600 0.72rem/1.5 Varta, system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ldw-accent2-ink);
}

main [data-sheet] > p:last-child {
  border-bottom: 0;
  border-top: 2px solid var(--ldw-ink);
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 400;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ldw-dim);
}

main [data-sheet] > dl {
  margin: 0;
  padding: 0;
}

main [data-sheet] > dl > div {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  padding: 0.44rem clamp(0.6rem, 2.4vw, 0.95rem);
  border-top: 1px solid var(--ldw-rule-faint);
  transition: background-color 150ms ease;
}

main [data-sheet] > dl > div:first-child {
  border-top: 0;
}

main [data-sheet] > dl > div:hover {
  background: var(--ldw-shade);
}

main [data-sheet] > dl > div > dt {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  flex: 1 1 auto;
  min-width: 0;
  font: 400 0.925rem/1.45 Varta, system-ui, sans-serif;
  color: var(--ldw-dim);
}

main [data-sheet] > dl > div > dt::after {
  content: "";
  flex: 1 1 0.8rem;
  min-width: 0.7rem;
  height: 0.72em;
  color: var(--ldw-rule-firm);
  background-image: var(--ldw-leader);
  background-size: 6px 6px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  opacity: 0.85;
}

main [data-sheet] > dl > div > dd {
  flex: 0 0 auto;
  max-width: 48%;
  margin: 0;
  font: 600 0.94rem/1.45 Varta, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* 08 · lists that are not bullets */

main ol[data-run] {
  margin: 1.05rem 0 1.2rem;
  padding: 0;
  max-width: var(--ldw-sheet);
  list-style: none;
  counter-reset: ldwrun;
}

main ol[data-run] > li {
  position: relative;
  counter-increment: ldwrun;
  padding: 0.5rem 0 0.55rem 2.5rem;
  border-top: 1px solid var(--ldw-rule-faint);
  transition: padding-left 200ms ease;
}

main ol[data-run] > li:first-child {
  border-top: 0;
}

main ol[data-run] > li:hover {
  padding-left: 2.85rem;
}

main ol[data-run] > li::before {
  content: counter(ldwrun, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.58rem;
  font: 700 0.8rem/1.3 "Hepta Slab", Georgia, serif;
  color: var(--ldw-accent-ink);
  letter-spacing: 0.04em;
}

main ul[data-pack] {
  margin: 1rem 0 1.2rem;
  padding: 0;
  max-width: var(--ldw-sheet);
  list-style: none;
}

main ul[data-pack] > li {
  position: relative;
  padding: 0.3rem 0 0.32rem 1.6rem;
}

main ul[data-pack] > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.62rem;
  height: 0.62rem;
  border: 1px solid var(--ldw-accent2);
  background-image: linear-gradient(90deg, transparent 45%,
      color-mix(in srgb, var(--ldw-accent2) 70%, transparent) 45% 55%, transparent 55%);
}

main ul[data-pack] > li > b {
  font-weight: 600;
}

/* 09 · the van, drawn */

main figure {
  margin: 1.3rem 0 1.4rem;
  padding: 0;
}

main figure > svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 29rem;
  background: var(--ldw-surface);
  border: 1px solid var(--ldw-rule);
}

main figure[data-rig] > svg {
  max-width: 54rem;
}

main figure > figcaption {
  margin: 0.5rem 0 0;
  max-width: var(--ldw-sheet);
  font: 400 0.875rem/1.5 Varta, system-ui, sans-serif;
  color: var(--ldw-dim);
}

svg [data-shell] {
  fill: none;
  stroke: var(--ldw-ink);
  stroke-width: 2.4;
  stroke-linejoin: round;
}

svg [data-floor] {
  fill: none;
  stroke: var(--ldw-ink);
  stroke-width: 3.2;
}

svg [data-rib] {
  stroke: color-mix(in srgb, var(--ldw-ink) 22%, transparent);
  stroke-width: 1.1;
}

svg [data-wheel] {
  fill: color-mix(in srgb, var(--ldw-ink) 80%, var(--ldw-surface));
  stroke: var(--ldw-ink);
  stroke-width: 2;
}

svg [data-hub] {
  fill: var(--ldw-surface);
  stroke: none;
}

svg [data-tier] {
  translate: calc(340px * clamp(0, var(--ldw-t) - var(--ldw-tier), 1)) 0;
  opacity: clamp(0.08, var(--ldw-tier) - var(--ldw-t) + 1, 1);
  transition: translate 660ms cubic-bezier(0.2, 1.32, 0.38, 1), opacity 300ms linear;
}

svg [data-tier="1"] {
  --ldw-t: 1;
}

svg [data-tier="2"] {
  --ldw-t: 2;
}

svg [data-tier="3"] {
  --ldw-t: 3;
}

svg [data-tier="1"] rect {
  fill: color-mix(in srgb, var(--ldw-accent) 26%, var(--ldw-surface));
  stroke: color-mix(in srgb, var(--ldw-accent) 72%, var(--ldw-ink));
  stroke-width: 1.4;
}

svg [data-tier="2"] rect {
  fill: color-mix(in srgb, var(--ldw-accent2) 30%, var(--ldw-surface));
  stroke: color-mix(in srgb, var(--ldw-accent2) 78%, var(--ldw-ink));
  stroke-width: 1.4;
}

svg [data-tier="3"] rect {
  fill: color-mix(in srgb, var(--ldw-ink) 27%, var(--ldw-surface));
  stroke: color-mix(in srgb, var(--ldw-ink) 68%, transparent);
  stroke-width: 1.4;
}

svg [data-seam] {
  stroke: color-mix(in srgb, var(--ldw-ink) 34%, transparent);
  stroke-width: 1;
}

svg [data-strap] {
  fill: none;
  stroke: var(--ldw-accent);
  stroke-width: 3.4;
  stroke-linecap: square;
  stroke-dasharray: 470;
  stroke-dashoffset: 0;
}

html[data-ldw="live"] svg [data-strap] {
  animation: ldw-strap 900ms cubic-bezier(0.3, 0.1, 0.2, 1) 1250ms both;
}

svg [data-ratchet] {
  fill: var(--ldw-accent);
  stroke: none;
}

svg [data-label] {
  fill: var(--ldw-dim);
  font: 600 15px/1 Varta, system-ui, sans-serif;
  letter-spacing: 0.04em;
}

main figure[data-rig] > svg [data-label] {
  display: none;
}

@media (min-width: 40em) {
  main figure[data-rig] > svg [data-label] {
    display: block;
  }
}

svg [data-tag] {
  fill: var(--ldw-accent-ink);
  font: 700 13px/1 "Hepta Slab", Georgia, serif;
}

svg text[data-place] {
  fill: var(--ldw-ink);
  font: 400 13px/1 Varta, system-ui, sans-serif;
}

svg text[data-place][data-here] {
  font-weight: 600;
  fill: var(--ldw-accent-ink);
}

svg [data-diag] {
  fill: none;
  stroke: var(--ldw-accent);
  stroke-width: 2;
  stroke-dasharray: 7 5;
}

svg [data-dim] {
  fill: none;
  stroke: var(--ldw-accent2);
  stroke-width: 1.6;
}

svg [data-pile] {
  fill: color-mix(in srgb, var(--ldw-accent) 22%, var(--ldw-surface));
  stroke: color-mix(in srgb, var(--ldw-accent) 70%, var(--ldw-ink));
  stroke-width: 1.3;
}

svg [data-pile-b] {
  fill: color-mix(in srgb, var(--ldw-accent2) 26%, var(--ldw-surface));
  stroke: color-mix(in srgb, var(--ldw-accent2) 74%, var(--ldw-ink));
  stroke-width: 1.3;
}

/* 10 · the patch, drawn */

svg [data-sea] {
  fill: color-mix(in srgb, var(--ldw-accent2) 17%, var(--ldw-surface));
  stroke: color-mix(in srgb, var(--ldw-accent2) 55%, transparent);
  stroke-width: 1.2;
}

svg [data-motorway] {
  fill: none;
  stroke: var(--ldw-accent2);
  stroke-width: 5;
  stroke-linecap: round;
}

svg [data-motorway-core] {
  fill: none;
  stroke: var(--ldw-surface);
  stroke-width: 1.4;
  stroke-dasharray: 9 7;
}

svg [data-road] {
  fill: none;
  stroke: color-mix(in srgb, var(--ldw-ink) 52%, transparent);
  stroke-width: 2.2;
  stroke-linecap: round;
  transition: stroke 200ms ease, stroke-width 200ms ease;
}

svg [data-road]:hover {
  stroke: var(--ldw-accent);
  stroke-width: 3.4;
}

svg [data-place] {
  fill: var(--ldw-ink);
}

svg [data-base] {
  fill: var(--ldw-accent);
  stroke: var(--ldw-surface);
  stroke-width: 2;
}

svg [data-junction] {
  fill: var(--ldw-surface);
  stroke: var(--ldw-accent2);
  stroke-width: 2;
}

/* 11 · the two calculators */

main form {
  margin: 1.25rem 0 1.35rem;
  max-width: var(--ldw-sheet);
  background: var(--ldw-surface);
  border: 1px solid var(--ldw-rule-firm);
  border-top: 3px solid var(--ldw-accent);
}

main form > h3 {
  display: block;
  margin: 0;
  padding: 0.62rem clamp(0.6rem, 2.4vw, 1rem) 0.55rem;
  font: 700 1rem/1.3 "Hepta Slab", Georgia, serif;
  border-bottom: 1px solid var(--ldw-rule);
}

main form > h3::after {
  display: none;
}

main form > h3 > small {
  display: block;
  font: 400 0.8rem/1.45 Varta, system-ui, sans-serif;
  color: var(--ldw-dim);
  letter-spacing: 0;
  text-transform: none;
}

main form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.1rem 0.9rem;
  padding: 0.5rem clamp(0.6rem, 2.4vw, 1rem) 0.9rem;
}

main form > div > label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.4rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0;
  border-bottom: 1px solid var(--ldw-rule-faint);
  font-size: 0.95rem;
}

main form > div > label:has(> select) {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem;
}

main form > div > label > span {
  min-width: 0;
}

main form > div > label > span > small {
  display: block;
  font-size: 0.8rem;
  color: var(--ldw-dim);
  font-variant-numeric: tabular-nums;
}

main form input[type="number"],
main form select {
  width: 100%;
  padding: 0.34rem 0.42rem;
  font: 600 1rem/1.3 Varta, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--ldw-ink);
  background: var(--ldw-bg);
  border: 1px solid var(--ldw-rule-firm);
  border-radius: 0;
  text-align: right;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

main form select {
  text-align: left;
}

main form input[type="number"]:hover,
main form select:hover {
  border-color: var(--ldw-accent2);
}

main form input[type="number"]:focus-visible,
main form select:focus-visible {
  outline: 3px solid var(--ldw-ring);
  outline-offset: 1px;
  background: var(--ldw-surface);
  box-shadow: inset 0 -2px 0 0 var(--ldw-accent);
}

main form > div > p {
  grid-column: 1 / -1;
  margin: 0.6rem 0 0;
}

main form button {
  margin: 0;
  padding: 0.55rem 1.05rem;
  font: 600 0.95rem/1.3 Varta, system-ui, sans-serif;
  letter-spacing: 0.03em;
  color: var(--ldw-surface);
  background: var(--ldw-ink);
  border: 1px solid var(--ldw-ink);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 170ms ease, color 170ms ease, translate 170ms ease;
}

main form button:hover {
  background: var(--ldw-accent);
  border-color: var(--ldw-accent);
  translate: 0 -1px;
}

main form button:focus-visible {
  outline: 3px solid var(--ldw-ring);
  outline-offset: 2px;
}

main form > output {
  display: block;
  padding: 0.1rem clamp(0.6rem, 2.4vw, 1rem) 0.85rem;
  border-top: 2px solid var(--ldw-ink);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

main form > output table {
  width: 100%;
  border-collapse: collapse;
  font: 400 0.9rem/1.45 Varta, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

main form > output caption {
  padding: 0.55rem 0 0.45rem;
  font: 600 0.72rem/1.5 Varta, system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ldw-accent2-ink);
}

main form > output th {
  padding: 0.24rem 0.3rem 0.24rem 0;
  font-weight: 400;
  text-align: left;
  color: var(--ldw-dim);
  overflow-wrap: break-word;
}

main form > output td {
  padding: 0.24rem 0 0.24rem 0.3rem;
  text-align: right;
  white-space: nowrap;
}

main form > output tr:last-child th,
main form > output tr:last-child td {
  padding-top: 0.42rem;
  border-top: 1px solid var(--ldw-ink);
  font-weight: 600;
  color: var(--ldw-ink);
}

main form > output p {
  margin: 0.7rem 0 0;
  padding: 0.5rem 0.6rem;
  background: color-mix(in srgb, var(--ldw-accent) 12%, transparent);
  border-left: 3px solid var(--ldw-accent);
  font-size: 0.94rem;
}

main form > output p > b {
  font-weight: 600;
}

main form > p:last-child {
  margin: 0;
  padding: 0.45rem clamp(0.6rem, 2.4vw, 1rem) 0.6rem;
  border-top: 1px solid var(--ldw-rule);
  font: 400 0.82rem/1.5 Varta, system-ui, sans-serif;
  color: var(--ldw-dim);
}

@media (max-width: 29.99em) {
  main form > output td {
    white-space: normal;
  }

  main form > output td:last-child {
    white-space: nowrap;
  }
}

main form noscript {
  display: block;
  padding: 0.55rem clamp(0.6rem, 2.4vw, 1rem) 0.7rem;
  border-top: 2px solid var(--ldw-ink);
  font-size: 0.92rem;
}

/* 12 · quoted paperwork */

main blockquote {
  margin: 1.1rem 0;
  padding: 0.7rem 0 0.7rem 1rem;
  max-width: var(--ldw-sheet);
  border-left: 3px solid var(--ldw-accent2);
  background: var(--ldw-shade);
  font-size: 0.97rem;
}

main blockquote > p {
  margin: 0;
}

/* 12b · sheet one, drawn as a chain — numbered steps with the line running between them */

main ol[data-chain] {
  display: grid;
  gap: 1.2rem;
  margin: 1.25rem 0 1.55rem;
  padding: 0;
  list-style: none;
  counter-reset: ldwchain;
}

main ol[data-chain] > li {
  position: relative;
  min-width: 0;
  padding: 0 0 0 3.15rem;
  counter-increment: ldwchain;
}

main ol[data-chain] > li::before {
  content: counter(ldwchain, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  font: 700 0.86rem/1 "Hepta Slab", Georgia, serif;
  letter-spacing: 0.03em;
  color: var(--ldw-accent-ink);
  background: var(--ldw-surface);
  border: 2px solid var(--ldw-accent);
  transition: background-color 180ms ease, color 180ms ease;
}

main ol[data-chain] > li::after {
  content: "";
  position: absolute;
  left: 1.125rem;
  top: 2.25rem;
  bottom: calc(-1.2rem - 1px);
  width: 2px;
  margin-left: -1px;
  background-image: repeating-linear-gradient(180deg,
      var(--ldw-rule-firm) 0 6px, transparent 6px 10px);
}

main ol[data-chain] > li:last-child::after {
  display: none;
}

main ol[data-chain] > li:hover::before {
  color: var(--ldw-surface);
  background: var(--ldw-accent);
}

main ol[data-chain] > li > b {
  display: block;
  margin: 0.2rem 0 0.2rem;
  font: 700 1rem/1.3 "Hepta Slab", Georgia, serif;
}

main ol[data-chain] > li > span {
  display: block;
  max-width: 48ch;
  font-size: 0.96rem;
  color: var(--ldw-dim);
}

@media (min-width: 48em) {
  main ol[data-chain] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.7rem;
  }

  main ol[data-chain] > li {
    padding: 3rem 0 0;
  }

  main ol[data-chain] > li::after {
    left: 2.25rem;
    right: calc(-1.7rem - 1px);
    top: 1.125rem;
    bottom: auto;
    width: auto;
    height: 2px;
    margin: -1px 0 0;
    background-image: repeating-linear-gradient(90deg,
        var(--ldw-rule-firm) 0 6px, transparent 6px 10px);
  }
}

/* 12c · sheet two, one drawing the width of the sheet with the prose set under it as caption */

main figure[data-shot] {
  margin: 1.2rem 0 0.35rem;
}

main figure[data-shot] > img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ldw-surface);
  border: 1px solid var(--ldw-rule);
}

main figure[data-shot] > figcaption {
  margin: 0.9rem 0 0;
  padding-top: 0.85rem;
  max-width: none;
  border-top: 2px solid var(--ldw-ink);
  font-size: 1rem;
  color: var(--ldw-ink);
}

main figure[data-shot] > figcaption > p {
  margin: 0 0 0.85rem;
  max-width: 56ch;
  break-inside: avoid;
}

main figure[data-shot] > figcaption > small {
  display: block;
  font: 600 0.72rem/1.6 Varta, system-ui, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ldw-accent2-ink);
}

@media (min-width: 62em) {
  main figure[data-shot] > figcaption {
    columns: 2;
    column-gap: 2.8rem;
    column-rule: 1px solid var(--ldw-rule-faint);
  }

  main figure[data-shot] > figcaption > p {
    margin-bottom: 0;
  }

  main figure[data-shot] > figcaption > small {
    column-span: all;
    padding-top: 0.9rem;
  }
}

/* 12d · sheet three, split off centre with the body drawing overhanging the gutter */

main div[data-split] {
  display: grid;
  gap: 1rem;
  margin: 0;
}

main div[data-split] > div > p:last-child {
  margin-bottom: 0;
}

main figure[data-rig] {
  margin: 0.25rem 0 1rem;
}

main figure[data-rig] > svg {
  width: 100%;
}

@media (min-width: 52em) {
  main div[data-split] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    gap: 2.5rem;
    align-items: start;
  }

  main div[data-split] > figure[data-rig] {
    margin: 0.3rem calc(var(--ldw-gut) * -1) 0 -1.5rem;
  }
}

/* 12e · sheet four, three cards on one row, one of them a drawing */

main ul[data-cards] {
  display: grid;
  gap: 0.9rem;
  margin: 1.2rem 0 1.3rem;
  padding: 0;
  list-style: none;
}

main ul[data-cards] > li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 0.85rem 0.95rem 1rem;
  background: var(--ldw-surface);
  border: 1px solid var(--ldw-rule);
  border-top: 3px solid var(--ldw-accent2);
  transition: border-top-color 200ms ease, translate 200ms ease;
}

main ul[data-cards] > li:hover {
  border-top-color: var(--ldw-accent);
  translate: 0 -2px;
}

main ul[data-cards] > li[data-shot] {
  justify-content: flex-start;
  padding: 0;
  border-top-color: var(--ldw-accent);
}

main ul[data-cards] > li > b {
  display: block;
  margin: 0 0 0.35rem;
  font: 700 1.02rem/1.25 "Hepta Slab", Georgia, serif;
}

main ul[data-cards] > li > p {
  margin: 0;
  max-width: none;
  font-size: 0.95rem;
  color: var(--ldw-dim);
}

main ul[data-cards] figure {
  margin: 0;
}

main ul[data-cards] img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--ldw-rule);
}

main ul[data-cards] figcaption {
  margin: 0;
  max-width: none;
  padding: 0.75rem 0.95rem 0.85rem;
  font-size: 0.95rem;
  color: var(--ldw-dim);
}

main ul[data-cards] figcaption > small {
  display: block;
  margin-top: 0.45rem;
  font: 600 0.7rem/1.6 Varta, system-ui, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ldw-accent2-ink);
}

@media (min-width: 44em) {
  main ul[data-cards] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Only once there are four tracks does the picture take two of them. Spanning it across a
   two-track row made the drawing the full width of the section, and at that size it stopped
   reading as a card and started reading as sheet two's wide figure a second time. */
@media (min-width: 70em) {
  main ul[data-cards] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  main ul[data-cards] > li[data-shot] {
    grid-column: span 2;
  }
}

/* 12f · sheet five opens on one line, set across the whole measure */

main p[data-pull] {
  margin: 0.55rem 0 1.3rem;
  padding: 0.95rem 0 1.1rem;
  max-width: none;
  border-top: 3px solid var(--ldw-accent);
  border-bottom: 1px solid var(--ldw-rule);
  font: 700 clamp(1.42rem, 5.3vw, 2.3rem)/1.14 "Hepta Slab", Georgia, serif;
  letter-spacing: -0.016em;
  text-wrap: balance;
}

/* 12g · sheet six is a ruled ledger */

main table[data-ledger] {
  width: 100%;
  max-width: 52rem;
  margin: 1.15rem 0 1.25rem;
  border-collapse: collapse;
  text-align: left;
  font: 400 0.95rem/1.45 Varta, system-ui, sans-serif;
}

main table[data-ledger] > caption {
  padding: 0 0 0.5rem;
  text-align: left;
  font: 600 0.72rem/1.5 Varta, system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ldw-accent2-ink);
}

main table[data-ledger] thead th {
  padding: 0.3rem 0.8rem 0.42rem 0;
  border-bottom: 2px solid var(--ldw-ink);
  vertical-align: bottom;
  font: 600 0.71rem/1.5 Varta, system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ldw-dim);
}

main table[data-ledger] tbody tr {
  transition: background-color 160ms ease;
}

main table[data-ledger] tbody tr:hover {
  background: var(--ldw-shade);
}

main table[data-ledger] tbody th,
main table[data-ledger] tbody td {
  padding: 0.52rem 0.8rem 0.52rem 0;
  border-bottom: 1px solid var(--ldw-rule-faint);
  vertical-align: top;
}

main table[data-ledger] tbody th {
  font-weight: 600;
}

main table[data-ledger] tbody td {
  color: var(--ldw-dim);
}

main table[data-ledger] tbody td:last-child {
  padding-right: 0;
}

main table[data-ledger] tbody tr:last-child > * {
  border-bottom: 2px solid var(--ldw-ink);
}

@media (max-width: 33.99em) {
  main table[data-ledger] {
    font-size: 0.86rem;
  }

  main table[data-ledger] tbody th,
  main table[data-ledger] tbody td {
    padding-right: 0.5rem;
  }
}

/* 12h · the allowances, on a band that runs off both edges of the paper */

main > section[data-band] {
  margin: 2.2rem 0 2.3rem;
  padding: 2rem var(--ldw-gut) 2.1rem;
  border-top: 0;
  text-align: center;
  color: color-mix(in srgb, var(--ldw-bg) 88%, var(--ldw-ink));
  background-color: var(--ldw-ink);
  background-image: var(--ldw-flute-wide);
  /* The colour runs to both edges of the window without the BOX doing so: a spread shadow is ink
     overflow and never adds a scrollbar, where width:100vw adds one exactly as wide as the
     scrollbar itself. The inset clip keeps the spread off the sections above and below. */
  box-shadow: 0 0 0 100vmax var(--ldw-ink);
  clip-path: inset(0 -100vmax);
}

main > section[data-band] > h2 {
  display: block;
  margin: 0 auto 0.7rem;
  max-width: 30ch;
  color: var(--ldw-bg);
}

main > section[data-band] > h2::after {
  display: none;
}

main > section[data-band] > h2 > span {
  display: block;
  margin-top: 0.4rem;
  color: var(--ldw-accent-lift);
}

main > section[data-band] > p {
  margin-inline: auto;
  max-width: 50ch;
}

main > section[data-band] > p:last-child {
  margin-bottom: 0;
}

main > section[data-band] > div[data-sheet] {
  margin: 1.35rem auto 1.4rem;
  max-width: 34rem;
  text-align: left;
  /* the sheet is a cream object lying ON the band: it takes the page's ink back, or the pale
     band colour would be inherited straight onto a cream ground by every value in the list */
  color: var(--ldw-ink);
  border-color: color-mix(in srgb, var(--ldw-bg) 30%, transparent);
  border-left: 3px solid var(--ldw-accent);
}

/* 12i · the closing sheet, with the patch set into the text as a plate */

main > section[data-wrap] {
  max-width: 52rem;
}

main > section[data-wrap]::after {
  content: "";
  display: block;
  clear: both;
}

main > section[data-wrap] > p {
  max-width: none;
}

main figure[data-inset] {
  margin: 0.4rem 0 1.1rem;
  padding: 0.55rem 0.55rem 0.4rem;
  background: var(--ldw-under);
  border: 1px solid var(--ldw-rule);
}

main figure[data-inset] > svg {
  width: 100%;
  max-width: none;
}

main figure[data-inset] > figcaption {
  margin: 0.5rem 0 0;
  max-width: none;
  font-size: 0.82rem;
}

@media (min-width: 44em) {
  main figure[data-inset] {
    float: right;
    width: min(38%, 17rem);
    margin: 0.35rem 0 1rem 1.9rem;
    shape-outside: margin-box;
  }
}

/* 13 · the registered facts */

body > footer {
  margin: 2.3rem 0 0;
  padding: 1.6rem var(--ldw-gut) 2rem;
  background-color: var(--ldw-under);
  background-image: var(--ldw-flute);
  border-top: 3px solid var(--ldw-ink);
}

body > footer > div {
  max-width: 72rem;
  margin-inline: auto;
}

body > footer h2 {
  margin: 0 0 0.75rem;
  font: 700 0.76rem/1.5 "Hepta Slab", Georgia, serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ldw-accent-ink);
}

body > footer address {
  margin: 0 0 0.85rem;
  font-style: normal;
  line-height: 1.5;
}

body > footer address > span {
  display: block;
}

body > footer > div > p {
  margin: 0 0 0.3rem;
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
  color: var(--ldw-dim);
}

body > footer > div > p:last-child {
  margin-top: 0.75rem;
  margin-bottom: 0;
}

body > footer a {
  color: var(--ldw-accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color 150ms ease;
}

body > footer a:hover {
  color: var(--ldw-ink);
}

/* 14 · movement */

@keyframes ldw-fold {
  0% {
    translate: -22% 22%;
    rotate: -14deg;
    opacity: 0;
  }

  64% {
    translate: 1% -1%;
    rotate: 1.5deg;
    opacity: 1;
  }

  100% {
    translate: 0 0;
    rotate: 0deg;
    opacity: 1;
  }
}

@keyframes ldw-strap {
  0% {
    stroke-dashoffset: 470;
    stroke-width: 1.6;
  }

  70% {
    stroke-dashoffset: 0;
    stroke-width: 4.6;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-width: 3.4;
  }
}

@keyframes ldw-stamp {
  0% {
    opacity: 0;
    scale: 1.5;
    rotate: -9deg;
  }

  100% {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}

@keyframes ldw-settle {
  0% {
    translate: 0 calc(var(--ldw-rise) * -0.9);
    opacity: 0;
  }

  100% {
    translate: 0 0;
    opacity: 1;
  }
}

html[data-ldw="live"] body > header > div > p:first-child > svg {
  animation: ldw-stamp 520ms cubic-bezier(0.2, 0.9, 0.3, 1.1) 420ms both;
}

html[data-ldw="live"] body > footer > div > h2 {
  animation: ldw-settle 520ms ease-out both;
}

html[data-ldw="live"] main[data-run-in] > section {
  animation: ldw-settle 440ms cubic-bezier(0.2, 0.9, 0.26, 1.02) both;
}

html[data-ldw="live"] main[data-run-in] > section:nth-child(1) {
  animation-delay: 60ms;
}

html[data-ldw="live"] main[data-run-in] > section:nth-child(2) {
  animation-delay: 150ms;
}

html[data-ldw="live"] main[data-run-in] > section:nth-child(3) {
  animation-delay: 240ms;
}

html[data-ldw="live"] main[data-run-in] > section:nth-child(4) {
  animation-delay: 330ms;
}

html[data-ldw="live"] main[data-run-in] > section:nth-child(5) {
  animation-delay: 420ms;
}

html[data-ldw="live"] main[data-run-in] > section:nth-child(n + 6) {
  animation-delay: 510ms;
}

/* 15 · wider stock */

@media (min-width: 40em) {
  body {
    font-size: 1.09rem;
  }

  body > nav > ol {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body > nav > ol > li {
    border-bottom: 0;
    border-right: 1px solid color-mix(in srgb, var(--ldw-bg) 22%, transparent);
  }

  body > nav > ol > li:nth-child(3n) {
    border-right: 1px solid color-mix(in srgb, var(--ldw-bg) 22%, transparent);
  }

  body > nav > ol > li:last-child {
    border-right: 0;
  }

  body {
    padding-bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
  }

  main form > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  main form > div > label {
    grid-template-columns: minmax(0, 1fr) 4.8rem;
  }
}

@media (min-width: 62em) {
  body > header {
    padding-top: calc(var(--ldw-gut) + 1rem);
    padding-bottom: 2.2rem;
  }

  main > section {
    padding: 2rem 0 2.1rem;
  }

  main > section[id] {
    padding-left: 1.6rem;
  }

  main figure > svg {
    max-width: 32rem;
  }

  main figure[data-rig] > svg {
    max-width: 56rem;
  }
}

/* 16 · the sheet, printed */

@media print {
  :root {
    --ldw-step: 6;
    --ldw-tier: 3;
  }

  body {
    padding-bottom: 0;
    background: none;
    font-size: 10.5pt;
  }

  body > nav,
  body > a:first-child {
    display: none;
  }

  body > header,
  body > footer {
    background: none;
    border-color: var(--ldw-ink);
  }

  body > header > div {
    clip-path: none;
    box-shadow: none;
    border: 1px solid var(--ldw-ink);
  }

  body > header > div::after {
    display: none;
  }

  main > section {
    break-inside: avoid;
    opacity: 1;
    translate: none;
  }

  main figure > svg,
  main figure[data-shot] > img,
  main figure[data-inset] {
    border-color: var(--ldw-ink);
  }

  main figure[data-inset] {
    float: none;
    width: auto;
    margin-left: 0;
    background: none;
  }

  main > section[data-band] {
    color: var(--ldw-ink);
    background: none;
    box-shadow: none;
    clip-path: none;
    border-top: 2px solid var(--ldw-ink);
    border-bottom: 2px solid var(--ldw-ink);
  }

  main > section[data-band] > h2,
  main > section[data-band] > h2 > span {
    color: var(--ldw-ink);
  }

  main ul[data-cards],
  main div[data-split] {
    break-inside: avoid;
  }
}

/* 17 · still, if asked */

@media (prefers-reduced-motion: reduce) {
  :root {
    --ldw-step: 6 !important;
    --ldw-tier: 3 !important;
    --ldw-rise: 0px !important;
  }

  html[data-ldw="live"] {
    --ldw-step: 6 !important;
    --ldw-tier: 3 !important;
  }

  body > a:first-child,
  body > nav > ol > li > a,
  body > nav > ol > li > a > b,
  body > footer a,
  main a,
  main > section,
  main > section > h2::after,
  main > section[id]::after,
  main [data-sheet] > dl > div,
  main[data-run-in] > section,
  main ol[data-run] > li,
  main ol[data-chain] > li::before,
  main ul[data-cards] > li,
  main table[data-ledger] tbody tr,
  main form input[type="number"],
  main form select,
  main form button,
  svg [data-tier],
  svg [data-road] {
    transition: none !important;
  }

  body > header > div::after,
  html[data-ldw="live"] svg [data-strap],
  html[data-ldw="live"] body > header > div > p:first-child > svg,
  html[data-ldw="live"] body > footer > div > h2,
  html[data-ldw="live"] main[data-run-in] > section {
    animation: none !important;
  }

  html[data-ldw="live"] main[data-run-in] > section {
    opacity: 1 !important;
    translate: none !important;
  }

  main > section {
    opacity: 1 !important;
    translate: none !important;
  }

  main > section > h2::after {
    clip-path: none !important;
  }

  main > section[id]::after {
    height: 3.4rem;
  }

  svg [data-tier] {
    translate: 0 0 !important;
    opacity: 1 !important;
  }

  svg [data-strap] {
    stroke-dashoffset: 0 !important;
    stroke-width: 3.4;
  }

  main ol[data-run] > li:hover {
    padding-left: 2.5rem;
  }

  main form button:hover {
    translate: 0 0;
  }

  main ul[data-cards] > li:hover {
    translate: 0 0;
  }
}

@media (forced-colors: active) {
  main [data-sheet],
  main form,
  main figure > svg,
  main figure[data-shot] > img,
  main figure[data-inset],
  main ul[data-cards] > li {
    border-color: CanvasText;
  }

  main ol[data-chain] > li::before,
  main table[data-ledger] thead th,
  main table[data-ledger] tbody th,
  main table[data-ledger] tbody td {
    border-color: CanvasText;
  }

  body > nav > ol > li > a[aria-current="page"] {
    box-shadow: none;
    outline: 2px solid LinkText;
    outline-offset: -4px;
  }

  main [data-sheet] > dl > div > dt::after,
  main > section > h2::after,
  main > section > h3::after {
    background-image: none;
    border-bottom: 1px dotted CanvasText;
  }
}