/*
 * A process board: the steps of a piece in a row, left to right, each in a
 * dashed box with its number. Every picture is the same height, so their tops
 * and bottoms line up, and process-board.js sets that height as large as the
 * image box allows. Everything else (padding, type, the arrows between) is
 * scaled with it through --k, so the board keeps its look at any size.
 *
 * It sits straight on the page's paper. Drawings on white are multiplied onto
 * it, which turns their white into the paper exactly; photographs keep their
 * own ground.
 */
@font-face {
  font-family: Inter;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --paper: #f4f4f2;
  --ink: #0e0e0d;
  --h: 300px;
  --k: 1;
  color-scheme: light;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Every box holds the same parts at the same height, so centring the row keeps
   their tops and bottoms flush. */
.board {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--k) * 30px);
  height: 100%;
}
.step {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--k) * 12px) calc(var(--k) * 10px) calc(var(--k) * 14px);
  border: max(1px, calc(var(--k) * 2px)) dashed rgb(14 14 13 / 0.38);
}
/* The arrow into the next step, in the middle of the gap between the boxes. */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  width: calc(var(--k) * 30px);
  height: calc(var(--k) * 16px);
  translate: 0 -50%;
  background: center / calc(var(--k) * 16px) no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h13m0 0-5-5m5 5-5 5' fill='none' stroke='%230e0e0d' stroke-opacity='.55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.step__n {
  align-self: flex-start;
  font-size: calc(var(--k) * 24px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: calc(var(--k) * 10px);
}
.step__media {
  display: block;
  height: var(--h);
  width: calc(var(--h) * var(--r));
  object-fit: contain;
  mix-blend-mode: multiply;
}
.step__media--photo {
  mix-blend-mode: normal;
}
.step figcaption {
  margin-top: calc(var(--k) * 12px);
  font-size: calc(var(--k) * 21px);
  line-height: 1.3;
  text-align: center;
}