/* Drawing pens. Every stroke is non-scaling, so line weights stay
   consistent whatever size a drawing is shown at. */
.dw { display: block; width: 100%; height: auto; overflow: hidden; }
.dw * { vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.dw line, .dw polyline, .dw path { fill: none; }

.dw .k0 { stroke-width: 0.5px; }
.dw .k1 { stroke-width: 0.75px; }
.dw .k2 { stroke-width: 1.05px; }
.dw .k3 { stroke-width: 1.55px; }
.dw .k4 { stroke-width: 2.2px; }

.dw .cN { stroke: var(--cobalt); }
.dw .cE { stroke: var(--graphite); }
.dw .cL { stroke: var(--graphite-light); }
.dw .cP { stroke: var(--paper); }

.dw .fN { fill: var(--cobalt-wash); }
.dw .fS { fill: var(--cobalt); }
.dw .fE { fill: var(--graphite-wash); }
.dw .fP { fill: var(--paper); }
.dw .fG { fill: var(--graphite); }
.dw .f0 { fill: none; }

.dw .dash { stroke-dasharray: 4 3; }
.dw .dash-s { stroke-dasharray: 2 2.5; }
.dw .centre { stroke-dasharray: 10 3 1.5 3; }
.dw .dots { stroke-width: 1.25px; stroke-linecap: round; }

.dw text {
  font-family: "Archivo", "Arial Narrow", sans-serif;
  font-stretch: 84%;
  font-weight: 420;
  letter-spacing: 0.01em;
  font-feature-settings: "tnum" 1;
  /* paper halo so lettering stays legible over linework */
  stroke: var(--paper);
  stroke-width: 3.5px;
  paint-order: stroke fill;
}
.dw .tE { fill: var(--graphite); }
.dw .tN { fill: var(--cobalt); }

/* Small screens: fewer, lighter lines, as a drawing would carry at a smaller scale */
@media (max-width: 760px) {
  .dw .k3 { stroke-width: 1.2px; }
  .dw .k4 { stroke-width: 1.7px; }
  .dw .k2 { stroke-width: 0.9px; }
  .dw .lod { display: none; }
  .dw .dots { stroke-width: 1px; }
}