Plate lap

A lap built from a negative margin on a FIRST child collapses into its parent's margin. Block margins touch through a parent that has no padding and no border, so a first child pulling itself up by -9rem simply moves the parent instead and nothing overhangs anything. That shipped once in this catalogue (cover-lap): the markup read as correct while the render showed no lap at all.

This pattern uses both halves of the fix:

1. The pair sits in a vertical flex group ({"type":"flex","orientation":"vertical","justifyContent":"stretch"}). A flex child's margins never collapse, with its container or with its siblings, so the negative margin arrives at full value and is exactly the overlap you can read off the file.
2. The lapping frame is the second child. The portrait is authored first, the landscape second, which is also what makes the landscape paint on top: flex items are painted in document order, so the later one wins. No z-index anywhere, which matters because a core block cannot express one.

justifyContent: "stretch" is on the flex group on purpose: a vertical flex group defaults to align-items: flex-start, which would shrink both frames to their content width and lose every proportion in the design.

The horizontal side of the lap needs no negative margin at all. The pair is held in a 44rem constrained wrapper; inside it the portrait is a constrained group of 32rem justified left and the landscape a constrained group of 25rem justified right, so their boxes overlap by 13rem and the landscape hangs 12rem past the portrait's right edge as a consequence of two widths rather than an offset. That is why the mirrored variation is two words changed and not a re-authoring.

The overlap is clamp(-10rem, 5.5rem - 18vw, 1.5rem), and the middle term is the design. At 1400px it resolves past the floor and clamps to -10rem, which is about 60% of the landscape frame's height: a full lap. At 782px, the width where core stacks columns, it is about -53px: a kiss. At 390px the expression turns positive and the ceiling takes over at 1.5rem, so the overlap is released entirely and the two frames stack as a plain pair with a small gap.

That is deliberate and not a fallback. Both constrained groups are wider than a phone, so on a phone both frames are full-bleed within the gutters; a frame overhanging another frame of the same width has nothing to overhang, and a lap holding at -10rem there would cover 40% of the screen with one photograph sitting on another. Reduced or released is the only honest answer, and the plate below is unchanged, so the section still ends on the same square edge it does at 1400.

The plate is a fixed box: it is the full width of the 44rem wrapper at every width above a phone, because the wrapper is the measure that sets the overlap. The label and the line sit in it as one flex row, side by side and bottom aligned, and that row fills nearly the whole plate at 1280.

Both caption sizes used to be fluid (0.9vw and 1.05vw between the same floors and a 14px/17px ceiling). Fluid type inside a fixed box only ever ends one way: above about 1430px the two grew past the row and the row wrapped. In the base that reads as a slightly awkward second line. In Mirrored lap it was a real defect, measured at 1920: the row is justified to the right, so once it wrapped the short label was flushed right on its own line and started 233px inside the line below it, leaving the caption's own column with nothing to explain it.

So both sizes are now the plain values the clamps already resolved to at 1280 and at the 1400 the pattern previews at. Nothing about the pattern moves at or below that width; above it the caption holds the proportion it was authored with, which is the same thing every other measurement in this pattern does.

The buyer swaps both images, so a photograph's luminance is as unknowable as an accent slug's and any caption set on one can land white on white with nothing to warn you. So the only words in this section are on the plate, below the pair, on a guaranteed base/contrast pairing. Nothing is set over an image, and the images carry no text of their own.

1. The photographs. Both image blocks ship EMPTY, which is what WordPress's own editor writes before a file is chosen and is valid at 6.6 and 7.0. Click each frame, choose from your media library, and the crop and the overlap hold whatever proportions your files are. Nothing is hotlinked and no photograph is part of the pattern.
2. The caption. The label reads best in caps under 20 characters; the line is one sentence and should not wrap more than twice on the plate.
3. The depth of the lap. It is one value, the landscape group's margin-top. Make the first number less negative for a shallower lap; keep the third number at or above zero so the phone still releases.
4. The band's ground. Swapping the band's contrast chain and the plate's base chain gives the whole section on paper with an inked plate. Swap both halves of a pair, never one.

• Mirrored lap. The composition axis, and only that axis. The portrait moves right, the landscape laps its lower-LEFT corner, and the plate's label and line move to the right edge to match. Same two frames, same proportions, same colours, same clamp: three justifyContent values and the paragraphs' text alignment are the entire difference, because the lap is made of widths rather than of offsets.

The base and the variation both take every colour and typeface from the theme. Both were checked in the editor, rendered and looked at.