Steps cover stair

A full-bleed core/cover that carries a three-step process: a heavy veil of your theme's contrast colour over the photograph, a display headline at the top left, and three numbered steps set on a descending diagonal across the rest of the cover.

Each step is a huge numeral, a short title and one line, hung from a hairline rule. The three columns share a row but not a top: the second starts about a step lower than the first, the third lower again, so the rules and numerals read as a stair going down and to the right beneath the headline. The process moves forward and the eye moves down with it. It is composition alone, so it holds in greyscale. On a phone the columns stack in order and the stair flattens into a ruled list.

• Paper veil: the veil is base at 80% and every word and rule contrast, the photograph a pale ghost behind ink.

Inherits: every colour (veil contrast, type and rules base), the typeface, the spacing scale. Decides: the veil's opacity, the type ramp, the headline measure and the depth of each step. The cover states its own text colour chain so core's :where() rule that paints cover text #fff never applies.

Type sits on the image only because the veil makes the ground a known quantity: contrast at dimRatio 80 under base type. The one-line descriptions are body size, so they need the full 4.5:1, not the 3:1 allowed to large display type; the checker composites the veil over a white and a black photograph and the worse ground has to pass. Lower the veil below 80 and that stops being true.

• The headline is display: a bare clamp(2.75rem, 6.5vw, 8.5rem), off the theme's ladder, because its size is the composition; at 1920 it is 136px, held to a measure of clamp(18rem, 52vw, 56rem).
• The numerals are paragraphs at a bare clamp(4.5rem, 10vw, 11rem), line height 0.9: display marks, not headings.
• Step titles are h3 at a bare clamp(1.5rem, 2.2vw, 2.5rem), off the ladder, so they hold their own against the numerals and never read as captions; the lines under them are body copy on medium, held to a 26rem measure, one line wherever the column allows it; "How it works" is a label with its own clamp() floored at 15px.
• Hierarchy comes from size and the rules alone: nothing is set in capitals.
• Every heading states its size and colour chain and nothing else.

• The cover keeps its default layout and position; its height comes from its content, never vh.
• The steps are a core/columns row aligned to the top on the row and on every column. The stair is each column's padding-top: min(clamp(3rem, 8vw, 10rem), max(0rem, calc((100vw - 782px) * 100))) on the second and twice that on the third. Below 782px, where core stacks columns, the second term is zero and the offsets vanish.
• Every gap is a spacing preset. Rules are currentColor, so they are always the colour of the type.

The photograph: choose Replace on the cover. Then the headline and the three steps, each title about three words and each line under ten.

A short row on your theme's paper under the cover, a label and one paragraph at a 34rem measure, so the cover reads as a section and shows where it ends.

The copied markup includes a WordPress Photo Directory example photograph. The public image URL keeps the example visible after pasting. Select the cover and choose Replace to use your own Media Library file. See image credits for the source and license. Pasting an image URL does not import a Media Library attachment.