/* THE DRAINIST LTD — site stylesheet.
   Theme: midnight copper. Spine: a full-width grading schedule.
   Reset is three declarations only; the schedule keeps native table semantics. */

*, *::before, *::after { box-sizing: border-box; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- tokens */

:root {
  --bg: #16181f;
  --ink: #e6e2d8;
  --copper: #c9743a;
  --slate: #5a6b7a;
  --surface: #1f2230;

  --ink-dim: rgba(230, 226, 216, 0.62);
  --ink-faint: rgba(230, 226, 216, 0.34);
  --hair: rgba(230, 226, 216, 0.14);
  --hair-hard: rgba(230, 226, 216, 0.26);
  --copper-wash: rgba(201, 116, 58, 0.14);
  --copper-edge: rgba(201, 116, 58, 0.55);
  --slate-wash: rgba(90, 107, 122, 0.22);
  --cast: rgba(0, 0, 0, 0.34);

  --rail-w: 42px;
  --rail-open: 15.5rem;
  --gutter: 13px;
  --measure: 62rem;

  --head: "Sarpanch", "Arial Narrow", Impact, sans-serif;
  --body: "Metrophobic", "Trebuchet MS", "DejaVu Sans", sans-serif;

  --step: 0.35rem;
  --ease: cubic-bezier(0.32, 0.72, 0.26, 1);
}

/* ---------------------------------------------------------------- shell */

html { background: var(--bg); }

body {
  margin: 0;
  padding-left: var(--rail-w);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;
}

/* speckle: three offset dot grids, read as grit on a wet casting */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(230, 226, 216, 0.055) 0.5px, transparent 0.6px),
    radial-gradient(rgba(201, 116, 58, 0.05) 0.5px, transparent 0.6px),
    radial-gradient(rgba(90, 107, 122, 0.07) 0.5px, transparent 0.6px);
  background-size: 7px 11px, 13px 9px, 19px 17px;
  background-position: 0 0, 3px 5px, 8px 2px;
}

.page {
  position: relative;
  z-index: 1;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter) 3.5rem;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 40;
  padding: 0.5rem 0.8rem;
  background: var(--copper);
  color: var(--bg);
  font-family: var(--head);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { left: calc(var(--rail-w) + 6px); }

::selection { background: var(--copper); color: var(--bg); }

a { color: var(--ink); text-decoration-color: var(--copper-edge); text-underline-offset: 3px; }
a:hover { color: var(--copper); }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- rail */

.rail {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--rail-w);
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--hair);
  box-shadow: 1px 0 0 var(--cast);
  transition: width 240ms var(--ease), box-shadow 240ms linear;
}
.rail:hover,
.rail:focus-within,
.rail[data-open="yes"] {
  width: var(--rail-open);
  box-shadow: 8px 0 26px rgba(0, 0, 0, 0.5);
}

.rail__mark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 52px;
  padding-left: 9px;
  border-bottom: 1px solid var(--hair);
  color: var(--copper);
}
.rail__mark svg { width: 24px; height: 24px; flex: 0 0 24px; }
.rail__markword {
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  white-space: nowrap;
  color: var(--ink);
}

.rail ul { list-style: none; margin: 0; padding: 0; }

.rail__link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 46px;
  padding: 0 0.6rem 0 9px;
  color: var(--ink-dim);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background-color 160ms linear, color 160ms linear, border-left-color 160ms linear;
}
.rail__link:hover,
.rail__link:focus-visible {
  background: var(--copper-wash);
  color: var(--ink);
  border-left-color: var(--copper);
}
.rail__link[aria-current="page"] {
  color: var(--ink);
  border-left-color: var(--copper);
  background: rgba(201, 116, 58, 0.07);
}
.rail__glyph {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: currentColor;
}
.rail__glyph svg { width: 24px; height: 24px; }
.rail__glyph svg * { vector-effect: non-scaling-stroke; }
.rail__label {
  white-space: nowrap;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 190ms linear 40ms, transform 190ms var(--ease) 40ms;
}
.rail:hover .rail__label,
.rail:focus-within .rail__label,
.rail[data-open="yes"] .rail__label { opacity: 1; transform: none; }

/* clipped like the labels — a half-word sticking out of a 42px rail reads as a bug */
.rail__chain {
  margin: 0;
  padding: 0.7rem 0.6rem 1.2rem 9px;
  border-top: 1px solid var(--hair);
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--ink-faint);
  white-space: nowrap;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 190ms linear 40ms;
}
.rail__chain span { display: block; }
.rail:hover .rail__chain,
.rail:focus-within .rail__chain,
.rail[data-open="yes"] .rail__chain { opacity: 1; }

/* ---------------------------------------------------------------- plate */

.plate-shell { padding: 1.4rem 0 1rem; }

.plate {
  position: relative;
  padding: 1.5rem 1rem 1.3rem 1.9rem;
  background: var(--surface);
  background-image:
    radial-gradient(rgba(0, 0, 0, 0.3) 0.6px, transparent 0.7px),
    radial-gradient(rgba(230, 226, 216, 0.05) 0.5px, transparent 0.6px);
  background-size: 5px 5px, 9px 7px;
  clip-path: polygon(0 11px, 11px 0, calc(100% - 11px) 0, 100% 11px,
                     100% calc(100% - 11px), calc(100% - 11px) 100%,
                     11px 100%, 0 calc(100% - 11px));
  box-shadow: inset 0 0 0 1px var(--hair-hard), inset 0 2px 0 rgba(230, 226, 216, 0.08);
}

/* cast bolt heads down the fixing edge, drawn as a repeating gradient strip */
.plate__bolts {
  position: absolute;
  top: 1.1rem;
  left: 0.36rem;
  bottom: 1.1rem;
  width: 14px;
  border-left: 1px solid var(--copper-edge);
  background-image:
    radial-gradient(circle at 8px 8px, var(--ink-faint) 2.3px, transparent 2.5px),
    radial-gradient(circle at 8px 8px, rgba(0, 0, 0, 0.5) 3.4px, transparent 3.6px);
  background-size: 14px 26px;
  background-repeat: repeat-y;
}

.plate__eyebrow,
.plate__sic {
  margin: 0;
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
}
.plate__sic { margin-top: 0.9rem; color: var(--ink-faint); letter-spacing: 0.12em; }

.plate__name {
  margin: 0.6rem 0 0;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(1.5rem, 8.4vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Stencil bridges: bars in the plate colour cut across the glyph band. The pattern
   repeats on the line-height so a brand that wraps to two lines is cut on BOTH —
   two absolutely-placed bars only ever stencil the first line. */
.stencil { position: relative; display: inline-block; color: var(--ink); }
.stencil::before {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  top: 0;
  bottom: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 0.33em,
    var(--surface) 0.33em,
    var(--surface) 0.40em,
    transparent 0.40em,
    transparent 0.62em,
    var(--surface) 0.62em,
    var(--surface) 0.69em,
    transparent 0.69em,
    transparent 1.02em);
}

.plate__strap {
  margin: 1rem 0 0;
  max-width: 44ch;
  color: var(--ink-dim);
  font-size: 0.98rem;
}

/* sub-page variant: the plate stays, the stencil does not — only the brand is stencilled */
.plate--page { padding-top: 1.1rem; padding-bottom: 1.1rem; }
.plate--page .plate__name {
  font-size: clamp(1.22rem, 6.1vw, 2.25rem);
  letter-spacing: 0.02em;
}
.plate--page .plate__strap { margin-top: 0.75rem; max-width: 56ch; }
.plate__crumb {
  margin: 0.9rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--hair);
  font-size: 0.72rem;
  color: var(--ink-faint);
}
.plate__crumb a { color: var(--copper); }

.figwrap {
  margin: 1.3rem 0;
  background: var(--surface);
  border: 1px solid var(--hair);
  padding: 0.6rem;
}
.figwrap figure { margin: 0; }
.figwrap svg { width: 100%; height: auto; max-width: 34rem; margin-inline: auto; }
.figwrap--wide svg { max-width: 47rem; }
.figwrap .dim { fill: none; stroke: var(--slate); stroke-width: 1; }
.figwrap .solid { fill: var(--slate-wash); stroke: var(--slate); stroke-width: 1.2; }
.figwrap .pipe { fill: none; stroke: var(--copper); stroke-width: 2.4; }
.figwrap .pipe-thin { fill: none; stroke: var(--copper-edge); stroke-width: 1.6; }
.figwrap .node { fill: var(--bg); stroke: var(--ink); stroke-width: 1.4; }
.figwrap .hatch { fill: rgba(230, 226, 216, 0.07); stroke: var(--hair-hard); stroke-width: 1; }
.figwrap text { fill: var(--ink-dim); font-size: 9px; letter-spacing: 0.06em; }
.figwrap text.accent { fill: var(--copper); }

.plate__marks {
  margin: 1.2rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  border-top: 1px solid var(--hair);
  padding-top: 0.9rem;
}
.plate__marks > div { display: flex; gap: 0.55rem; align-items: baseline; flex-wrap: wrap; }
.plate__marks dt {
  flex: 0 0 auto;
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
}
.plate__marks dd {
  margin: 0;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------------- heads */

h1, h2, h3, h4 { font-family: var(--head); font-weight: 700; }

.lead {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 2.6rem 0 0.9rem;
  font-size: clamp(1.08rem, 4.4vw, 1.5rem);
  line-height: 1.16;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}
.lead__text { flex: 0 1 auto; }
.lead__dots {
  position: relative;
  flex: 1 1 2.5rem;
  min-width: 2rem;
  height: 9px;
  align-self: center;
  color: var(--slate);
  background-image: radial-gradient(currentColor 1.1px, transparent 1.3px);
  background-size: 7px 9px;
  background-position: 0 center;
  background-repeat: repeat-x;
}
.lead__dots::before,
.lead__dots::after {
  content: "";
  position: absolute;
  top: 0;
  height: 9px;
  width: 1px;
  background: var(--slate);
}
.lead__dots::before { left: 0; }
.lead__dots::after { right: 0; }
/* the reference token keeps its own case: "0-24 m" is metres, "0-24 M" is not */
.lead__ref {
  flex: 0 0 auto;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: var(--copper);
  white-space: nowrap;
  text-transform: none;
}

.sub {
  margin: 1.9rem 0 0.7rem;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper);
}

p, li { overflow-wrap: break-word; }
.page p { max-width: 68ch; }
.page section > p:first-of-type { margin-top: 0; }

.runlist { max-width: 68ch; padding-left: 1.1rem; }
.runlist li { margin-bottom: 0.45rem; }
.runlist li::marker { color: var(--copper); }

.bare { list-style: none; padding: 0; max-width: 68ch; }
.bare > li {
  padding: 0.45rem 0 0.45rem 1.4rem;
  border-bottom: 1px solid var(--hair);
  position: relative;
}
.bare > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 9px;
  height: 1px;
  background: var(--copper);
}

/* ---------------------------------------------------------------- notes (callout blocks) */

.note {
  position: relative;
  margin: 1.3rem 0;
  padding: 0.95rem 0.95rem 0.95rem 1.5rem;
  background: var(--surface);
  background-image: radial-gradient(rgba(230, 226, 216, 0.045) 0.5px, transparent 0.6px);
  background-size: 11px 11px;
  border: 1px solid var(--hair);
  border-left: 0;
  transition: border-color 180ms linear, background-color 180ms linear;
}
.note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--slate);
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(22, 24, 31, 0.85) 0 2px,
    transparent 2px 9px);
}
.note:hover { border-color: var(--hair-hard); }
.note > :first-child { margin-top: 0; }
.note > :last-child { margin-bottom: 0; }
.note p { max-width: 64ch; }

.note__tag {
  display: inline-block;
  margin: 0 0 0.45rem;
  padding-bottom: 2px;
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  border-bottom: 1px solid currentColor;
}

.note--caution::before { background-color: var(--copper); }
.note--caution .note__tag { color: var(--copper); }
.note--method::before { background-color: var(--ink-faint); }
.note--method .note__tag { color: var(--ink-dim); }

/* ---------------------------------------------------------------- full-width tables */

.bleed {
  margin-inline: calc(var(--gutter) * -1);
  border-top: 1px solid var(--hair-hard);
  border-bottom: 1px solid var(--hair-hard);
}

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.74rem;
  line-height: 1.45;
}
caption {
  padding: 0.5rem var(--gutter);
  text-align: left;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* Only the edge cells carry the page gutter, so the table lines up with the prose
   column without spending 2x44px of padding inside a 96px column — which is what
   stacked the word OPEN one letter per line at desktop width. */
thead th {
  padding: 0.5rem 10px;
  background: var(--slate-wash);
  border-bottom: 1px solid var(--hair-hard);
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.57rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink);
  vertical-align: bottom;
}
tbody th, tbody td {
  padding: 0.6rem 10px;
  border-bottom: 1px solid var(--hair);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
tr > *:first-child { padding-left: var(--gutter); }
tr > *:last-child { padding-right: var(--gutter); }
tbody th { font-family: var(--head); font-weight: 700; }
tbody tr:nth-child(4n + 1) td,
tbody tr:nth-child(4n + 1) th { background: rgba(230, 226, 216, 0.022); }

/* the grading schedule */

/* term-column widths for the sub-page tables, as classes rather than style attributes */
col.w28 { width: 28%; }
col.w30 { width: 30%; }
col.w32 { width: 32%; }
col.w34 { width: 34%; }

.sched col.c-grade { width: 48px; }
.sched col.c-sign { width: 76px; }

.sched__gradecell { padding-right: 0; }
.sched__num {
  display: block;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--copper);
}
.sched__bar {
  display: block;
  margin-top: 4px;
  height: 3px;
  background: var(--copper);
  transition: width 200ms var(--ease);
}
.sched__bar[data-fill="1"] { width: 20%; }
.sched__bar[data-fill="2"] { width: 40%; }
.sched__bar[data-fill="3"] { width: 60%; }
.sched__bar[data-fill="4"] { width: 80%; }
.sched__bar[data-fill="5"] { width: 100%; }

.sched__cond { font-size: 0.78rem; }
.sched__code {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}

.sched__toggle {
  display: inline-block;
  white-space: nowrap;
  padding: 0.3rem 0.45rem;
  background: transparent;
  border: 1px solid var(--hair-hard);
  color: var(--ink-dim);
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms linear, color 150ms linear, border-color 150ms linear;
}
.sched__toggle:hover { background: var(--copper); border-color: var(--copper); color: var(--bg); }
.sched__toggle[aria-expanded="true"] { background: var(--copper-wash); border-color: var(--copper); color: var(--ink); }

.sched__detail > td,
.sched__detail > td:first-child,
.sched__detail > td:last-child { padding: 0; border-bottom: 1px solid var(--hair); }
.sched__body {
  padding: 0.9rem var(--gutter) 1.1rem;
  background: var(--surface);
  border-left: 5px solid var(--copper);
  font-size: 0.82rem;
}
.sched__body dl { margin: 0; display: grid; gap: 0.7rem; }
.sched__body dt {
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
}
.sched__body dd { margin: 0.2rem 0 0; max-width: 62ch; }

/* Row expansion. With JS off the grade link targets the row and CSS opens the sheet
   below it. With JS on the anchors become buttons and the class is authoritative;
   the :not(.is-open) keeps the two rules disjoint so neither can shadow the other. */
.sched__detail { display: none; }
tr[id]:target + .sched__detail { display: table-row; }
.js-on tr[id]:target + .sched__detail:not(.is-open) { display: none; }
.js-on .sched__detail.is-open { display: table-row; }

.sched__close { margin: 0.8rem 0 0; }
.sched__close a,
.sched__close button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-faint);
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--copper-edge);
  transition: color 150ms linear;
}
.sched__close a:hover,
.sched__close button:hover { color: var(--copper); }

/* ---------------------------------------------------------------- the crawl */

.crawl { margin: 1.2rem 0 0; }
.crawl figure { margin: 0; }
.crawl__frame {
  background: var(--surface);
  border: 1px solid var(--hair);
  padding: 0.5rem;
  overflow: hidden;
}
.crawl svg { width: 100%; height: auto; max-width: none; }

.crawl__barrel { fill: none; stroke: var(--hair-hard); stroke-width: 1.5; }
.crawl__bore { fill: rgba(0, 0, 0, 0.3); }
.crawl__unsurveyed { fill: none; stroke: var(--ink-faint); stroke-width: 1.2; stroke-dasharray: 5 5; }
.crawl__tick { stroke: var(--hair); stroke-width: 1; }
.crawl__ticklabel,
.crawl__mhlabel { fill: var(--ink-faint); font-size: 9px; letter-spacing: 0.08em; }
.crawl__mh { fill: var(--slate-wash); stroke: var(--slate); stroke-width: 1.4; }

.crawl__lead { fill: none; stroke: var(--copper-edge); stroke-width: 1.6; }
.crawl__cable {
  fill: none;
  stroke: var(--copper);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drn-pay-cable 3600ms 250ms linear both;
}
.crawl__cursor {
  transform: translateX(0px);
  animation: drn-crawl-cursor 3600ms 250ms linear both;
}
.crawl__head { fill: var(--copper); }
.crawl__skid { stroke: var(--ink-faint); stroke-width: 1.2; }
.crawl__lens { fill: var(--bg); }
.crawl__beam { fill: rgba(201, 116, 58, 0.16); }
.crawl__block { fill: var(--slate); stroke: var(--slate); stroke-width: 1; }
.crawl__water { fill: rgba(201, 116, 58, 0.2); }
.crawl__stop { fill: var(--copper); font-size: 9px; letter-spacing: 0.08em; }
.crawl__spool {
  transform-box: fill-box;
  transform-origin: center;
  animation: drn-spin-spool 3600ms 250ms linear both;
}
.crawl__spool circle { fill: none; stroke: var(--copper-edge); stroke-width: 1.4; }
.crawl__spool line { stroke: var(--copper-edge); stroke-width: 1.2; }

.crawl__flag { opacity: 0; animation: drn-raise-flag 380ms linear both; }
.crawl__flag line { stroke: var(--copper-edge); stroke-width: 1; }
.crawl__flag .box { fill: var(--bg); stroke: var(--copper); stroke-width: 1; }
.crawl__flag .gbox { fill: var(--copper); stroke: var(--copper); stroke-width: 1; }
.crawl__flag .g { fill: var(--bg); font-size: 11px; font-weight: 700; }
.crawl__flag .t { fill: var(--ink); font-size: 9px; letter-spacing: 0.05em; }

.crawl__flag--1 { animation-delay: 1070ms; }
.crawl__flag--2 { animation-delay: 2130ms; }
.crawl__flag--3 { animation-delay: 3010ms; }
.crawl__flag--halt { animation-delay: 3850ms; }
.crawl__flag--halt .box { fill: var(--copper); }
.crawl__flag--halt .gbox { fill: var(--bg); stroke: var(--bg); }
.crawl__flag--halt .g { fill: var(--copper); }
.crawl__flag--halt .t { fill: var(--bg); }

/* The one scroll-driven animation on the site: the pipe run.
   The timeline is NAMED on the wrapping div and referenced by the SVG children.
   An anonymous view() put on an SVG child is degenerate in Chrome — the timeline
   attaches, currentTime resolves to NaN, the animation reports "finished" and the
   crawl sits frozen at its last keyframe at every scroll position. The subject has
   to be a real CSS box, so .crawl__frame carries it and the children look it up. */
@supports (view-timeline-name: --drn-run) {
  .crawl__frame {
    view-timeline-name: --drn-run;
    view-timeline-axis: block;
  }
  .crawl__cable,
  .crawl__cursor,
  .crawl__spool {
    animation-duration: auto;
    animation-delay: 0s;
    animation-timeline: --drn-run;
    animation-range: cover 10% cover 70%;
  }
  .crawl__flag {
    animation-duration: auto;
    animation-delay: 0s;
    animation-timeline: --drn-run;
  }
  .crawl__flag--1 { animation-range: cover 22% cover 27%; }
  .crawl__flag--2 { animation-range: cover 40% cover 45%; }
  .crawl__flag--3 { animation-range: cover 55% cover 60%; }
  .crawl__flag--halt { animation-range: cover 69% cover 75%; }
}

/* Replay drops the pipe run back onto the document timeline for one pass, so the
   button does something real in a browser that is otherwise driving it by scroll. */
.crawl__frame.is-replaying .crawl__cable,
.crawl__frame.is-replaying .crawl__cursor,
.crawl__frame.is-replaying .crawl__spool {
  animation-timeline: auto;
  animation-duration: 3600ms;
  animation-delay: 250ms;
}
.crawl__frame.is-replaying .crawl__flag {
  animation-timeline: auto;
  animation-duration: 380ms;
}
.crawl__frame.is-replaying .crawl__flag--1 { animation-delay: 1070ms; }
.crawl__frame.is-replaying .crawl__flag--2 { animation-delay: 2130ms; }
.crawl__frame.is-replaying .crawl__flag--3 { animation-delay: 3010ms; }
.crawl__frame.is-replaying .crawl__flag--halt { animation-delay: 3850ms; }

@keyframes drn-pay-cable {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 237; }
}
@keyframes drn-crawl-cursor {
  from { transform: translateX(0px); }
  to { transform: translateX(415px); }
}
@keyframes drn-spin-spool {
  from { transform: rotate(0deg); }
  to { transform: rotate(-310deg); }
}
@keyframes drn-raise-flag {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.crawl__replay {
  margin-top: 0.6rem;
  padding: 0.4rem 0.7rem;
  background: transparent;
  border: 1px solid var(--hair-hard);
  color: var(--ink-dim);
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 150ms linear, color 150ms linear;
}
.crawl__replay:hover { border-color: var(--copper); color: var(--copper); }

figcaption {
  margin-top: 0.55rem;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 70ch;
}
figcaption b { color: var(--ink); font-weight: 400; }

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

.sheet {
  margin: 1.3rem 0;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-top: 3px solid var(--slate);
}
.sheet__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--hair);
}
.sheet__title {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sheet__guide {
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.54rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
}
.sheet__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  padding: 0.85rem;
  border: 0;
  margin: 0;
}
.sheet__grid legend {
  padding: 0;
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
}
.field { display: grid; gap: 0.25rem; }
.field > span {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.field input,
.field select {
  width: 100%;
  padding: 0.45rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--hair-hard);
  color: var(--ink);
  font-size: 0.9rem;
  transition: border-color 150ms linear, background-color 150ms linear;
}
.field input:hover,
.field select:hover { border-color: var(--slate); }
.field input:focus,
.field select:focus { border-color: var(--copper); background: rgba(201, 116, 58, 0.06); }
.field__hint { font-size: 0.66rem; color: var(--ink-faint); letter-spacing: 0; text-transform: none; }

.sheet__out {
  padding: 0.85rem;
  border-top: 1px solid var(--hair);
  background: rgba(0, 0, 0, 0.2);
}
.sheet__verdict {
  margin: 0 0 0.7rem;
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--copper);
  transition: color 180ms linear;
}
.sheet__verdict[data-state="short"] { color: var(--ink); }
.sheet__steps { margin: 0; display: grid; gap: 0.4rem; font-size: 0.78rem; }
.sheet__steps > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px dotted var(--hair-hard);
}
.sheet__steps dt { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.sheet__steps dd { margin: 0; letter-spacing: 0.02em; }
.sheet__steps dd b { color: var(--copper); font-weight: 400; }
.sheet__fallback { margin: 0.6rem 0 0; font-size: 0.74rem; color: var(--ink-faint); }

.sheet__fig { padding: 0 0.85rem 0.85rem; }
.sheet__fig svg { width: 100%; height: auto; max-width: 34rem; margin-inline: auto; }
.sheet__fig .dim { fill: none; stroke: var(--slate); stroke-width: 1; }
.sheet__fig .solid { fill: var(--slate-wash); stroke: var(--slate); stroke-width: 1.2; }
.sheet__fig .water { fill: rgba(201, 116, 58, 0.22); }
.sheet__fig text { fill: var(--ink-faint); font-size: 9px; letter-spacing: 0.06em; }

/* ---------------------------------------------------------------- map */

/* schematic map pieces, drawn not embedded */
.figwrap .water { fill: var(--slate-wash); stroke: var(--slate); stroke-width: 1; }
.figwrap .creek { fill: none; stroke: var(--slate-wash); stroke-width: 10; stroke-linecap: round; }
.figwrap .resin { fill: var(--copper); stroke: none; }
.figwrap .road { fill: none; stroke: var(--ink-faint); stroke-width: 2; }
.figwrap .rail-line { fill: none; stroke: var(--hair-hard); stroke-width: 1.4; stroke-dasharray: 7 4; }
.figwrap .pin { fill: var(--copper); stroke: none; }
.figwrap .rows { fill: none; stroke: var(--hair); stroke-width: 1; stroke-dasharray: 2 6; }
.figwrap .wordwater { fill: var(--slate); }

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

.foot {
  margin-top: 3rem;
  padding: 1.4rem var(--gutter) 2.4rem;
  border-top: 1px solid var(--hair-hard);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.22), transparent 60%);
  font-size: 0.78rem;
  line-height: 1.5;
}
.foot__name {
  margin: 0 0 0.5rem;
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
}
.foot address { font-style: normal; color: var(--ink-dim); }
.foot address span { display: block; }
.foot__reg { margin: 0.7rem 0 0; color: var(--ink-dim); }
.foot__reg span { display: block; letter-spacing: 0.04em; }
.foot a { color: var(--copper); }
.foot a:hover { color: var(--ink); }

/* ================================================================ composition shapes

   Eight body sections on the index, eight different figures, each used once and in the
   order the sections run — so scrolling the page never puts the same shape twice in
   front of a reader. Sub-pages take two or three of these each and no two sub-pages
   take the same set. Colours are all drawn from the five tokens or from rgba() of
   them; no shape introduces a hex of its own. */

/* -- 1 · step-chain ------------------------------------------------------------
   Numbered stages with the rule running down between the numbers, the way a survey
   sequence is written out on the back of a job sheet. */

.chain {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
}
.chain > li {
  position: relative;
  padding: 0 0 1.45rem 3.05rem;
}
.chain > li:last-child { padding-bottom: 0; }
.chain > li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 2.3rem;
  bottom: 0.1rem;
  width: 2px;
  background-image: linear-gradient(to bottom, var(--copper-edge) 0 7px, transparent 7px 14px);
  background-size: 2px 14px;
}
.chain > li:last-child::before { content: none; }
.chain__n {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.05rem;
  height: 2.05rem;
  border: 1px solid var(--copper-edge);
  border-radius: 50%;
  background: var(--bg);
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--copper);
  transition: border-color 170ms linear, background-color 170ms linear;
}
.chain > li:hover .chain__n { border-color: var(--copper); background: var(--copper-wash); }
.chain__t {
  display: block;
  margin: 0.25rem 0 0.3rem;
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.chain p { margin: 0; max-width: 62ch; }
.chain__m {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* -- 3 · dark-inversion --------------------------------------------------------
   The page is light-on-dark; this band is dark-on-light. It is the only place on the
   site where the paper is the ink colour, so it reads as a sheet laid on the page. */

.invert {
  margin-inline: calc(var(--gutter) * -1);
  margin-top: 2.9rem;
  padding: 1.5rem var(--gutter) 1.8rem;
  background-color: var(--ink);
  background-image:
    radial-gradient(rgba(22, 24, 31, 0.16) 0.6px, transparent 0.7px),
    radial-gradient(rgba(201, 116, 58, 0.22) 0.6px, transparent 0.7px);
  background-size: 9px 13px, 17px 11px;
  background-position: 0 0, 4px 3px;
  color: var(--bg);
  border-top: 3px solid var(--copper);
  border-bottom: 3px solid var(--copper);
}
.invert .lead { margin-top: 0; color: var(--bg); }
.invert .lead__dots { color: rgba(22, 24, 31, 0.45); }
.invert .lead__dots::before,
.invert .lead__dots::after { background: rgba(22, 24, 31, 0.45); }
.invert .lead__ref { color: rgba(22, 24, 31, 0.74); }
.invert p { color: var(--bg); }
.invert .note {
  background-color: rgba(22, 24, 31, 0.055);
  background-image: radial-gradient(rgba(22, 24, 31, 0.07) 0.5px, transparent 0.6px);
  border-color: rgba(22, 24, 31, 0.2);
}
.invert .note:hover { border-color: rgba(22, 24, 31, 0.38); }
.invert .note::before {
  background-color: var(--copper);
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(230, 226, 216, 0.9) 0 2px,
    transparent 2px 9px);
}
.invert .note__tag { color: rgba(22, 24, 31, 0.72); }
.invert .invert__pair {
  margin: 1.1rem 0 0;
  display: grid;
  gap: 0.8rem;
}
.invert .invert__pair > div {
  padding-top: 0.5rem;
  border-top: 2px solid rgba(22, 24, 31, 0.3);
}
.invert .invert__k {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(22, 24, 31, 0.72);
}
.invert a { color: var(--bg); text-decoration-color: rgba(201, 116, 58, 0.9); }
.invert a:hover { color: rgba(22, 24, 31, 0.6); }
.invert ::selection { background: var(--bg); color: var(--ink); }

/* -- 4 · pull-quote ------------------------------------------------------------
   One sentence at display size across the whole measure; the body picks up under it. */

.pq {
  margin: 0.3rem 0 1.25rem;
  max-width: none;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(1.45rem, 5.4vw, 2.85rem);
  line-height: 1.07;
  letter-spacing: -0.004em;
  color: var(--ink);
  text-wrap: balance;
}
.pq::before {
  content: "";
  display: block;
  width: 4.4rem;
  height: 3px;
  margin-bottom: 0.8rem;
  background: var(--copper);
}
.pq b { color: var(--copper); font-weight: 700; }

/* -- 5 · margin-annotated ------------------------------------------------------
   A narrow body with the working notes hung in the outer margin, each level with the
   paragraph it annotates. Below 58rem the note simply follows its paragraph. */

.annot { margin: 1rem 0 1.2rem; }
.annot p:not(.annot__note) { max-width: 54ch; }
.annot__note {
  margin: 0.4rem 0 1.15rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--slate);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 58ch;
}
.annot__note b {
  display: block;
  margin-bottom: 0.15rem;
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

/* -- 6 · card-grid -------------------------------------------------------------
   Small cards in a row, one fact each, cut like the index cards a job file is
   sorted with: a code at the top edge, a term, a line. */

.cards {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: var(--gutter);
}
.cards > li {
  position: relative;
  padding: 0.85rem 0.85rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-top: 3px solid var(--copper);
  transition: transform 190ms var(--ease), border-color 190ms linear;
}
.cards > li:hover { transform: translateY(-3px); border-color: var(--hair-hard); }
.cards__code {
  display: block;
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.cards__k {
  display: block;
  margin: 0.3rem 0 0.4rem;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.08;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.cards p {
  margin: 0;
  max-width: none;
  font-size: 0.79rem;
  line-height: 1.5;
  color: var(--ink-dim);
}
.cards a { color: var(--copper); }
.cards a:hover { color: var(--ink); }

/* -- 7 · offset-split ----------------------------------------------------------
   Narrow side carries the figure, and the figure runs past its own column into the
   gutter rule; the body is set clear of it on the wide side. */

.split { position: relative; margin: 1.1rem 0 0; display: grid; gap: 1.1rem; }
.split__fig { margin: 0; }
.split__body > :first-child { margin-top: 0; }

/* the reinstatement stack: a figure built out of boxes, not a drawing */
.stack {
  border: 1px solid var(--hair-hard);
  background: rgba(0, 0, 0, 0.26);
}
.stack__layer {
  padding: 0.42rem 0.6rem;
  border-bottom: 1px solid var(--hair);
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.stack__layer:last-child { border-bottom: 0; }
.stack__layer span {
  display: block;
  margin-top: 1px;
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-dim);
}
.stack__layer--wear {
  background-image: repeating-linear-gradient(
    132deg, rgba(230, 226, 216, 0.13) 0 3px, transparent 3px 8px);
}
.stack__layer--binder {
  background-image: repeating-linear-gradient(
    132deg, rgba(230, 226, 216, 0.06) 0 2px, transparent 2px 7px);
}
.stack__layer--subbase {
  background-image: radial-gradient(rgba(230, 226, 216, 0.14) 1.1px, transparent 1.4px);
  background-size: 8px 8px;
}
.stack__layer--fill {
  background-image: radial-gradient(rgba(90, 107, 122, 0.4) 1.7px, transparent 2px);
  background-size: 12px 10px;
}
.stack__layer--bed {
  background-image: radial-gradient(rgba(201, 116, 58, 0.26) 1.3px, transparent 1.6px);
  background-size: 7px 7px;
}
.stack__bore {
  display: block;
  width: 4.2rem;
  height: 1.7rem;
  margin: 0.45rem auto 0.1rem;
  border: 2px solid var(--copper);
  border-radius: 50% / 46%;
  background: rgba(22, 24, 31, 0.5);
}

/* -- 8 · wide-figure -----------------------------------------------------------
   The drawing takes the whole content width and the prose becomes its caption. */

.wide { margin-top: 2.9rem; }
.wide figure { margin: 0; }
.wide .crawl__frame { margin-inline: calc(var(--gutter) * -1); border-left: 0; border-right: 0; }
.wide figcaption { max-width: 76ch; font-size: 0.82rem; }
.wide__after { margin-top: 1rem; }

/* -- the same shapes on the sub-pages ------------------------------------------
   A drawing that is the subject of its section loses its box and takes the page
   width; a drawing that sits in the narrow half of a split keeps the box but not
   the 34rem cap it was given for a prose column. */

.figwrap--bleed {
  margin-inline: calc(var(--gutter) * -1);
  padding: 0.5rem;
  border-left: 0;
  border-right: 0;
}
.figwrap--bleed svg { max-width: none; }
.split__fig .figwrap { margin: 0; }
.split__fig .figwrap svg { max-width: none; }

/* -- sheet variants ------------------------------------------------------------
   The two widgets are the same instrument but not the same object: the fall sheet is
   a long section with the figure laid across the top, the soakaway sheet is a trench
   section with the calculation standing in a column beside it. */

.sheet--long .sheet__fig { padding: 0.85rem 0.85rem 0.4rem; }
.sheet--long .sheet__fig svg { max-width: 46rem; }
.sheet--trench .sheet__fig svg { max-width: 26rem; }

/* ================================================================ breadth, shapes */

@media (min-width: 34rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 52rem) {
  .chain > li {
    display: grid;
    grid-template-columns: 11.5rem minmax(0, 1fr);
    column-gap: 2rem;
    align-items: start;
  }
  .chain__t { margin: 0.3rem 0 0; }
  .chain__m { margin-top: 0.35rem; }
  .chain p { grid-column: 2; grid-row: 1 / span 3; }
  .invert .invert__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
}

@media (min-width: 54rem) {
  .split { grid-template-columns: 18rem minmax(0, 1fr); gap: 0; align-items: start; }
  /* a drawn section needs more column than the CSS-built stack does */
  .split--wide { grid-template-columns: 24rem minmax(0, 1fr); }
  .split--wide::before { left: 24rem; }
  .split--wide .split__body { padding-left: 4.4rem; }
  .split__fig {
    grid-column: 1;
    position: relative;
    z-index: 2;
    margin-top: 1.4rem;
    margin-right: -3.6rem;
  }
  .split::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 18rem;
    width: 1px;
    background: var(--hair-hard);
  }
  .split__body { grid-column: 2; padding-left: 5.4rem; }
  .split__body p { max-width: 58ch; }
}

@media (min-width: 56rem) {
  .sheet--long .sheet__out {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    column-gap: 2rem;
    align-items: start;
  }
  .sheet--long .sheet__verdict { grid-column: 1 / -1; }
  .sheet--long .sheet__steps { grid-column: 1; }
  .sheet--long .sheet__fallback { grid-column: 2; margin: 0; }
}

@media (min-width: 58rem) {
  .annot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 19rem);
    column-gap: 2.6rem;
  }
  .annot__pair { display: contents; }
  .annot p:not(.annot__note) { grid-column: 1; max-width: 56ch; margin: 0 0 1.25rem; }
  .annot__note {
    grid-column: 2;
    margin: 0.2rem 0 1.2rem;
    padding: 0.4rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--copper-edge);
    max-width: none;
  }
}

@media (min-width: 60rem) {
  .sheet--trench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  }
  .sheet--trench .sheet__head { grid-column: 1 / -1; }
  .sheet--trench .sheet__grid { grid-column: 1; align-content: start; }
  .sheet--trench .sheet__fig { grid-column: 1; }
  .sheet--trench .sheet__out {
    grid-column: 2;
    grid-row: 2 / span 2;
    border-top: 0;
    border-left: 1px solid var(--hair);
  }
  .sheet--trench .sheet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet--trench .sheet__fig { align-self: start; }
  .sheet--trench .sheet__fig svg { max-width: 32rem; }
  .sheet--trench .sheet__steps > div { grid-template-columns: 1fr; }
}

@media (min-width: 62rem) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The measure opens up on a wide screen so the schedule, the run drawing and the
   tables get the width they were drawn for. Prose is capped in characters, so it
   does not stretch with it. */
@media (min-width: 86rem) {
  :root { --measure: 74rem; }
}

/* ---------------------------------------------------------------- breadth */

@media (min-width: 30rem) {
  :root { --gutter: 20px; --rail-w: 48px; }
  .sheet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet__grid legend { grid-column: 1 / -1; }
  .sheet__steps > div { grid-template-columns: 11rem 1fr; gap: 0.6rem; align-items: baseline; }
  table { font-size: 0.8rem; }
  .sched col.c-grade { width: 74px; }
  .sched col.c-sign { width: 98px; }
}

@media (min-width: 46rem) {
  :root { --gutter: 30px; --rail-w: 54px; }
  .plate { padding: 2.2rem 2rem 1.8rem 2.6rem; }
  .plate__marks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.6rem; }
  .plate__marks > div { display: block; }
  .plate__marks dt { display: block; margin-bottom: 1px; }
  .sheet__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sched__body dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
  .foot { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 3rem; align-items: start; }
  .foot__reg { margin-top: 0; }
  .crawl__frame { padding: 1rem; }
}

@media (min-width: 64rem) {
  :root { --gutter: 44px; }
  body { font-size: 1.03rem; }
  .plate__marks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- reduced motion
   Neutralise every transition and animation, then state the finished frame of
   the crawl explicitly: cable paid out to the halt, cursor at the far end of
   its travel, every flag raised. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .crawl__cable {
    animation: none !important;
    stroke-dashoffset: 237 !important;
  }
  .crawl__cursor {
    animation: none !important;
    transform: translateX(415px) !important;
  }
  .crawl__spool {
    animation: none !important;
    transform: rotate(-310deg) !important;
  }
  .crawl__flag {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .crawl__replay { display: none; }
}

@media print {
  .rail, .crawl__replay, .skip { display: none; }
  body { padding-left: 0; background: #fff; color: #000; }
  body::before { display: none; }
  .sched__detail { display: table-row; }
}