/* How a job moves (DESIGN 5.7): left copy + picture, right the paper job slip. T5 prints .slip__row one by one. */
.process__grid { align-items: start; row-gap: 48px; }
.process__intro { grid-column: 1 / span 5; }
.process__intro h2 { font-size: clamp(2.5rem, 4.4vw, 4.25rem); }
.process__lede { max-width: 30ch; margin-top: 28px; font-size: var(--step-body); }
.process__photo { margin-top: 56px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface); }
.process__photo img { width: 100%; height: 100%; object-fit: cover; }
.process__slipwrap { grid-column: 7 / span 5; }

.slip {
  width: 100%;
  max-width: 480px;
  margin-inline: auto 0;
  padding: 26px 26px 38px;
  background: var(--paper);
  color: var(--paper-ink);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  line-height: 1.35;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 97.917% 100%, 95.833% calc(100% - 10px), 93.750% 100%, 91.667% calc(100% - 10px), 89.583% 100%, 87.500% calc(100% - 10px), 85.417% 100%, 83.333% calc(100% - 10px), 81.250% 100%, 79.167% calc(100% - 10px), 77.083% 100%, 75.000% calc(100% - 10px), 72.917% 100%, 70.833% calc(100% - 10px), 68.750% 100%, 66.667% calc(100% - 10px), 64.583% 100%, 62.500% calc(100% - 10px), 60.417% 100%, 58.333% calc(100% - 10px), 56.250% 100%, 54.167% calc(100% - 10px), 52.083% 100%, 50.000% calc(100% - 10px), 47.917% 100%, 45.833% calc(100% - 10px), 43.750% 100%, 41.667% calc(100% - 10px), 39.583% 100%, 37.500% calc(100% - 10px), 35.417% 100%, 33.333% calc(100% - 10px), 31.250% 100%, 29.167% calc(100% - 10px), 27.083% 100%, 25.000% calc(100% - 10px), 22.917% 100%, 20.833% calc(100% - 10px), 18.750% 100%, 16.667% calc(100% - 10px), 14.583% 100%, 12.500% calc(100% - 10px), 10.417% 100%, 8.333% calc(100% - 10px), 6.250% 100%, 4.167% calc(100% - 10px), 2.083% 100%, 0.000% calc(100% - 10px));
}
.slip__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(26, 21, 16, 0.22); /* taste-skill-ignore: printed job-card rule on the paper slip */
  font-weight: 500;
  font-size: 0.9375rem;
}
.slip__group { padding-top: 20px; }
.slip__time {
  font-size: 1.0625rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin-bottom: 10px;
}
.slip__rows { display: grid; gap: 8px; }
.slip__row { display: flex; align-items: flex-end; gap: 8px; }
.slip__task { flex: 0 1 auto; max-width: 70%; }
.slip__dots {
  flex: 1 1 14px;
  min-width: 14px;
  height: 4px;
  align-self: flex-end;
  margin-bottom: 5px;
  background: /* taste-skill-ignore: dot leaders of the printed slip */ radial-gradient(circle at 2px 2px, rgba(26, 21, 16, 0.5) 1.1px, transparent 1.6px) 0 0 / 6px 4px repeat-x;
}
.slip__val {
  flex: none;
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.slip__row--total {
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  margin: 26px -26px 0;
  padding: 10px 26px;
  background: var(--paper-ink);
  color: var(--paper);
  font-weight: 700;
}
.slip__row--total .slip__task { max-width: none; flex: 1 1 auto; }
.slip__row--total .slip__val { font-weight: 700; white-space: nowrap; }

@media (max-width: 1100px) {
  .process__intro { grid-column: 1 / span 6; }
  .process__slipwrap { grid-column: 7 / span 6; }
}
@media (max-width: 860px) {
  .process__intro, .process__slipwrap { grid-column: 1 / -1; }
  .process__intro { display: contents; }
  .process__intro > h2 { grid-column: 1 / -1; grid-row: 1; }
  .process__lede { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
  .process__slipwrap { grid-row: 3; }
  .process__photo { grid-column: 1 / -1; grid-row: 4; margin-top: 0; }
  .slip { margin-inline: 0; max-width: none; }
}
@media (max-width: 720px) {
  .process__intro h2 { font-size: clamp(2.25rem, 10vw, 2.75rem); }
  .slip { padding: 22px 18px 36px; }
  .slip__row--total { margin-inline: -18px; padding-inline: 18px; }
}