:root { --frame-rule: var(--c-page); --frame-marker: var(--c-page); }
body { background: var(--c-primary); }
.page--full { padding: 0; }

.process-page {
  position: relative;
  padding: 32px 28px 56px;
}
@media (min-width: 700px) { .process-page { padding-top: calc(var(--frame) + var(--bar) + 40px); } }

.process-page::before,
.process-page::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--c-page);
}
.process-page::before { left: var(--edge); }
.process-page::after { right: var(--edge); }

.process-head { text-align: right; }
.process-h1 { font-family: var(--mono); font-weight: 700; font-size: 34px; letter-spacing: 0.055em; line-height: 1.35; color: var(--c-ink); }
.process-kicker { font-family: var(--mono); font-weight: 500; font-size: 17px; letter-spacing: 0.055em; line-height: 1.35; color: var(--c-primary); } .process-intro { margin-top: 16px; font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: 0.045em; line-height: 1.35; color: var(--c-ink); }
@media (max-width: 1199px) { .process-intro { text-align: left; } }

.stages { margin: 48px 0 0; padding: 0; list-style: none; display: grid; gap: 56px; }
.stage {
  display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: start;
}
.stage-num {
  grid-column: 1; grid-row: 1 / span 3;
  font-family: var(--mono); font-weight: 700; font-size: clamp(80px, 14vw, 160px); letter-spacing: 0.055em; line-height: 0.9;
  color: var(--c-ink);
}
.stage-title { grid-column: 2; grid-row: 1; font-family: var(--mono); font-weight: 600; font-size: 22px; letter-spacing: 0.055em; line-height: 1.35; color: var(--c-ink-light); }
@media (max-width: 699px) { .stage-title { font-size: min(20px, (100vw - 130px) / 12.9); } }

.process-kicker > span, .stage-title > span {
  padding: 0 0.245em 0 0.3em; margin: 0 -0.245em 0 -0.3em; border-radius: 7px;
  background: var(--c-ink);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.stage-text { grid-column: 2; grid-row: 2; margin-top: 4px; font-family: var(--mono); font-weight: 700; font-size: 16px; letter-spacing: 0.045em; line-height: 1.35; color: var(--c-ink); }
.stage-text .aside { font-weight: 500; }
.stage-tags {
  grid-column: 2; grid-row: 3;
  display: flex; flex-direction: column; gap: 6px; margin-top: 16px; padding-left: 1em;
  font-family: var(--mono); font-weight: 400; font-size: 14px; letter-spacing: 0.055em; line-height: 1.35; color: var(--c-ink);
}
.stage-tags li { list-style: disc outside; }
.stage-line { grid-column: 1 / -1; grid-row: 4; width: min(441px, 60%); height: 3px; margin-top: 28px; background: var(--c-page); }

.stage:nth-child(even) { grid-template-columns: 1fr auto; text-align: right; }
.stage:nth-child(even) .stage-num { grid-column: 2; }
.stage:nth-child(even) :is(.stage-title, .stage-text, .stage-tags) { grid-column: 1; }
.stage:nth-child(even) .stage-tags { justify-self: end; text-align: left; }
@media (max-width: 1199px) {
  .stage:nth-child(even) .stage-text { justify-self: end; width: calc(100% - 26px); text-align: left; }
  .stage:nth-child(even) .stage-tags { max-width: calc(100% - 26px); } }
.stage:nth-child(even) .stage-line { justify-self: end; }

.process-next { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; margin-top: 64px; }
.big-link {
  display: inline-flex; align-items: center; gap: 28px; padding: 0.28em 0.5em;
  border-radius: 7px; background: var(--c-ink); transition: background-color .2s ease;
  font-family: var(--mono); font-weight: 700; font-size: clamp(28px, 5vw, 40px); line-height: 1.22;
  color: var(--c-ink-light); text-decoration: none; white-space: nowrap;
}
.big-link:hover { background: var(--c-slate); }
.big-link--touch { letter-spacing: 0.025em; }
.big-link--projects { letter-spacing: 0.045em; }
.big-link-arrow { width: auto; height: 1.2em; transition: transform .2s ease; }
.big-link:hover .big-link-arrow { transform: translateX(8px); }
@media (prefers-reduced-motion: reduce) { .big-link, .big-link::before, .big-link-arrow { transition: none; } }

.site-footer--boxed { margin: 0 var(--edge) 20px; border: 1px solid var(--c-page); }


@media (min-width: 1200px) {
  .page--full { --u: calc(100cqw / 1728); }

  .process-page { height: calc(3259 * var(--u)); padding: 0; }
  .process-page::before { left: calc(20 * var(--u)); }
  .process-page::after { right: auto; left: calc(1707 * var(--u)); }

  .stages, .stage, .stage-tags, .process-next { display: block; margin: 0; padding: 0; }

  .at { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); margin: 0; }
  .at--right { left: auto; right: calc((1728 - var(--r)) * var(--u)); text-align: right; }
  .nowrap { white-space: nowrap; }

  .process-h1 { font-size: calc(55 * var(--u)); white-space: nowrap; }
  .process-kicker { font-size: calc(29 * var(--u)); white-space: nowrap; }
  .process-intro { width: calc(var(--w) * var(--u)); font-size: calc(20 * var(--u)); }

  .stage-num { font-size: calc(357.419 * var(--u)); line-height: 1.35; }
  .stage-title { font-size: calc(32 * var(--u)); white-space: nowrap; }
  .process-kicker, .stage-title { z-index: 0; }
  .process-kicker > span, .stage-title > span { padding: 0; margin: 0; background: none; }
  .process-kicker::before, .stage-title::before {
    content: ""; position: absolute; z-index: -1;
    left: calc(var(--bx) * var(--u)); top: calc(var(--by, 0) * var(--u));
    width: calc(var(--bw) * var(--u)); height: calc(var(--bh, 41) * var(--u));
    border-radius: calc(7 * var(--u)); background: var(--c-ink);
  }
  .stage-text { width: calc(var(--w) * var(--u)); font-size: calc(20 * var(--u)); }
  .stage-tags li { margin-left: calc(23 * var(--u)); font-size: calc(18 * var(--u)); white-space: nowrap; }
  .stage-line { width: calc(441 * var(--u)); height: calc(3 * var(--u)); }

  .big-link { display: block; z-index: 0; height: calc(77 * var(--u)); padding: 0; font-size: calc(51 * var(--u)); }
  .big-link, .big-link:hover { background: none; }
  .big-link::before {
    content: ""; position: absolute; z-index: -1; inset: calc(-14 * var(--u)) calc(-26 * var(--u));
    border-radius: calc(7 * var(--u)); background: var(--c-ink); transition: background-color .2s ease;
  }
  .big-link:hover::before { background: var(--c-slate); }
  .big-link:focus-visible { outline: none; }
  .big-link:focus-visible::before { outline: 2px solid var(--c-ink); outline-offset: 3px; }
  .big-link--touch { width: calc(526 * var(--u)); }
  .big-link--projects { width: calc(394 * var(--u)); }
  .big-link-text { position: absolute; left: 0; }
  .big-link--touch .big-link-text { top: calc(9 * var(--u)); }
  .big-link--projects .big-link-text { top: calc(2 * var(--u)); }
  .big-link-arrow { position: absolute; top: 0; right: 0; width: calc(44 * var(--u)); height: calc(77 * var(--u)); }

  .site-footer--boxed {
    height: calc(160 * var(--u));
    margin: 0 calc(20 * var(--u)) calc(33 * var(--u));
    padding: calc(48 * var(--u)) 0 0 calc(64 * var(--u));
  }
}