/* Section: process */
/* ---------- process (after the work log, same dark theme). Layout logic of the reference: title + live counter,
   line, cards enter one by one from the right while pinned; the last card is the result (green + hand-drawn ring) ---------- */
.pr{--bg:var(--night);--ink-2:var(--mist);--line:rgba(255,255,255,.24);--card:var(--night-2);--g:calc(20 * var(--u) + 6px);
  height:100vh;display:flex;flex-direction:column;padding:calc(40 * var(--u) + 104px) calc(120 * var(--u)) calc(60 * var(--u) + 16px);background:var(--bg);color:var(--paper);overflow:hidden}
.pr-head{padding-bottom:calc(28 * var(--u) + 12px)}
.pr .kick{font:var(--eb-font);letter-spacing:-.01em;color:var(--paper)}
.pr h2{margin-top:22px;font-family:var(--xh);font-weight:400;font-size:var(--fs-display);line-height:1.02;letter-spacing:-.03em}
.pr-row{flex:1;min-height:0;display:flex;gap:var(--g);margin-top:calc(40 * var(--u) + 12px)}
.pc{position:relative;flex:none;width:calc((100% - 2 * var(--g)) / 3);border-radius:4px;background:var(--card);overflow:hidden}
.pc .v{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--xh);font-weight:400;font-size:var(--fs-display);line-height:1;letter-spacing:-.04em;white-space:nowrap}
.pc .scrawl{position:absolute;left:50%;top:50%;width:calc(var(--fs-display) * 6.2);height:auto;transform:translate(-50%,-48%) rotate(-5deg);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;pointer-events:none}
.pc .lb{position:absolute;left:calc(28 * var(--u) + 12px);top:calc(28 * var(--u) + 12px);display:flex;align-items:center;gap:12px;font-weight:400;font-size:var(--fs-body);line-height:1.2;letter-spacing:-.01em;white-space:nowrap}
.pc .lb svg{flex:none;width:calc(8 * var(--u) + 18px);height:auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pc .ix{position:absolute;right:calc(28 * var(--u) + 12px);top:calc(28 * var(--u) + 12px);font-family:var(--xhmono);font-size:var(--fs-body);line-height:1.2;opacity:.4}
/* fixed 19em: two lines in every card, fits the narrowest (1/3) card, never reflows while a card shrinks */
.pc .ds{position:absolute;left:50%;bottom:calc(28 * var(--u) + 12px);transform:translateX(-50%);text-align:center;width:19em;font-size:var(--fs-body);line-height:1.4;color:var(--ink-2);text-wrap:pretty}
.pc.res{background:var(--green);color:var(--ink)}
.pc.res .ds{color:inherit;opacity:.72}
/* mobile: same idea, vertical. Cards collapse to their top row (icon, title, number) instead of narrowing */
@media (max-width:820px){
  .pr{height:100svh;padding:124px 16px 16px}
  .pr-head{padding-bottom:18px}
  .pr h2{margin-top:14px}
  .pr-row{flex-direction:column;margin-top:16px;--g:8px}
  .pc{width:100%;flex:1 1 0;min-height:0}
  .pc .ds{width:min(19em, calc(100% - 40px))}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){.pr{height:auto}.pc{flex:none;height:max(320px, 80vw)}}