Hero cover rail

It is a per-side border on the right core/column: style.border.left = currentColor, solid, 1px, with a padding-left of clamp(1.5rem, 2.6vw, 3rem) holding the labels off it.

Not a core/separator, for two reasons. A separator is horizontal and there is no core attribute that turns it, and Twenty Twenty-Four narrows any separator that is not is-style-wide to var(--wp--preset--spacing--60), so it would render as a 100px stub in the theme that is in both matrix entries.

core/column supports __experimentalBorder with no skipped serialization, so the declarations land on the column's own <div> and nothing else in the block moves. The column carries no width: .wp-block-columns > .wp-block-column is flex-basis:0; flex-grow:1 and [style*=flex-basis] is flex-grow:0, so fixing the left column at 58% and leaving the right one to grow keeps the column's only inline style the border and the padding.

Core pins .wp-block-columns { align-items: normal !important }, which is already stretch, and verticalAlignment: "stretch" is written on the columns block and on each child column, because a columns-level alignment does nothing on the front end (measured on cover-trio) and the editor writes it onto the children anyway. The right column therefore stretches to the height of the left column's type, and the rule is the height of the inner container rather than the height of the four pairs it sits beside.

It is the full height of the CONTENT, not of the 40rem picture. A cover is display:flex; align-items:center and its inner container is sized by what is in it, so a rule that ran the whole 40rem would need CSS a pattern cannot ship. The cover's vertical padding is clamp(3.5rem, 7vw, 6rem), which is what sets how much picture is left above and below the rule.

Below 782px core stacks the columns and the rule does not turn. It stays a left border on a now full-width block, so it reads as a rail down the side of the facts rather than as a divider between two columns. That is a deliberate outcome and not a fallback: the padding-left is unchanged, so the stacked facts are indented off the same hairline. Nothing here needs a media query, which is the only reason it is honest to say so.

A photograph's luminance is unknowable, so the rule is that type never sits on one. A cover's veil is the exception that can be measured: its colour is a chain and its opacity is a number, so it is measured composited over a white photograph and over a black one, at the worse pair. dimRatio is 80 for that reason and must not be lowered; at 40 the first draft of cover-veil measured 2.48:1 and was rejected.

The cover states its own style.color.text as a chain so core's :where(.wp-block-cover:not(.has-text-color)) { color:#fff } never applies, and every heading and paragraph restates its colour, because a theme's heading element style beats an inherited group colour.

The photograph: the cover ships EMPTY and is valid at 6.6 and 7.0, so pick one in the media library. Then the four pairs on the right, which are the part of the design that is actually about their business. Keep the values to two or three words; they are set at up to 21px and a long one wraps into the pair below it.

• Paper rail: the veil is base at 80% and the type contrast, and the button inverts with them. The rule's markup is identical to the base's, which is the point of currentColor.
• In motion: backgroundType: "video" and nothing else; a clip instead of a still, same veil, same type, same rule. Core writes autoplay muted loop playsinline and data-object-fit="cover" at render.

A full-bleed hero on its own fills the preview on this page edge to edge, and on a buyer's page it is never alone either. So the pattern ships with what comes next: a short row on your theme's paper under the cover, a tracked label at a 12rem flex size and one paragraph at a 34rem measure. It is ordinary page copy, it shows where the hero ENDS, and it is the first thing a buyer rewrites or deletes. It carries the same chains as everything else. In paper-rail the cover and the hand-off row are both light, and the boundary between them is the photograph rather than a change of ground.