/* Process: four words, one per beat, hairlines between them, then the pencil macro */
.process .stack { max-width: 980px; margin: 0 auto; font-family: var(--font-display); font-weight: 200; text-transform: uppercase; font-size: clamp(40px, 7vw, 108px); line-height: 1.05; letter-spacing: .2em; color: var(--ink); }
.process .beat { min-height: 36vh; display: flex; flex-direction: column; justify-content: center; }
.process .beat > span:not(.hair) { display: block; padding: 4vh 0 4vh .2em; }
.process .beat .hair { width: 100%; transform-origin: center; }
.process .beat:first-child::before { content: ''; display: block; height: 1px; background: var(--line); }
.process .after { margin-top: var(--s6); }
.process .after .lead { font-size: 19px; color: var(--ink); }
.process .macro { position: relative; width: min(980px, 100%); margin: var(--s7) auto 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); }
.process .macro > div { position: absolute; inset: 0; overflow: hidden; }
.process .macro img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 40%; transform-origin: 30% 45%; filter: saturate(.9); }
@media (max-width: 760px) {
  .process .stack { font-size: clamp(30px, 9.2vw, 40px); letter-spacing: .12em; }
  .process .beat { min-height: 30vh; }
  .process .beat > span { padding-left: .12em; }
  .process .macro { aspect-ratio: 4 / 5; }
  .process .macro img { object-position: 30% 50%; }
}
.process .beat > span:not(.hair) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }