SECTION
Process list
Numbered steps — an index, a title and an explanation, all on one row.
The steps
A week of reading the problem and drawing the two or three shapes it could take.
The riskiest part first, built for real. Not a mock-up — the thing, badly.
Weekly builds you can open. No demo days, no reveal.
<div class="rule-stack" style="width:100%">
<div class="rule-row process-step">
<span class="process-step-n">01</span>
<span class="process-step-title">Frame</span>
<p class="process-step-body">A week of reading the problem and drawing the two or three shapes it could take.</p>
</div>
<div class="rule-row process-step">
<span class="process-step-n">02</span>
<span class="process-step-title">Prototype</span>
<p class="process-step-body">The riskiest part first, built for real. Not a mock-up — the thing, badly.</p>
</div>
<div class="rule-row process-step">
<span class="process-step-n">03</span>
<span class="process-step-title">Build</span>
<p class="process-step-body">Weekly builds you can open. No demo days, no reveal.</p>
</div>
</div>Reference
Read from sections/process-list.css when this page was built, so it cannot fall behind the stylesheet.
.process-step.process-step-n.process-step-title.process-step-body--ds-accent--ds-font-body--ds-font-display--ds-gap--ds-ink--ds-ink-soft--ds-pad-card--ds-process-gap--ds-step-body-basis--ds-step-index-w--ds-step-title-basis--ds-text-label--ds-text-lead-sm--ds-text-small--ds-track-key--ds-track-snugNotes
This row wants three unequal columns that become one when there is no room, which is the classic case for a container query — except CSS will not accept a var() inside a query condition. Using one would mean a hardcoded breakpoint sitting in a system that has none of them.
Flex with a flex-basis collapses from the content's own size instead, so the row wraps at whatever width its actual words need rather than at a number somebody guessed.