Gallery spread

The trap first, because it is the obvious approach and this catalogue has already paid for it. padding-right: max(...) on a direct child of a constrained band does not hold a measure. The block is content-box, so the padding sits outside the layout's max-width; the block grows to the band's full width and the layout then centres it, which put content-columns's left edge 144px out of line with its neighbours at 1400. Nothing in the section would have looked bled; it would have looked misaligned.

What this pattern uses is the shape frieze-band proved, with one padding instead of none:

1. The outer align: full group carries no horizontal padding at all (left: "0", right: "0") and a constrained inner at 1240px. So the band itself reaches both viewport edges and the measure is applied per child.
2. The eyebrow and the closing hairline row are each wrapped in their own nested constrained group that carries the clamp gutters clamp(1.25rem, 4vw, 4rem). They are the "normal" content.
3. The spread itself is a child with align: full and {"layout":{"type":"default"}}, so it spans the whole viewport, and it is not the constrained inner: its children are flow children that fill its content box and nothing centres them. That is the difference that makes asymmetric padding sound here and unsound in the trap above. Its padding-left is zero and its padding-right is max(clamp(1.25rem, 4vw, 4rem), calc((100% - 1240px) / 2)).

That right-hand expression is the whole alignment. Above 1240px + gutters the calc half wins and reproduces exactly what a constrained layout does to centre a 1240px measure; below it the clamp half wins and reproduces the gutter. Both regimes were measured rather than reasoned about: at 1400 the type column ends at 1320px and the measure's right edge is (1400 + 1240) / 2 = 1320px; at 1280, where the measure is gutter-limited rather than capped, the column ends at 1228.81px and the measure ends at 1228.81px.

A negative left margin on the row would have been the other sound answer (and the brief allows it on a non-first child, which this row is). It was not used because a negative margin has to name a length that matches the gutter, so the gutter would then live in two places and drift apart on the day one of them is changed. Here the gutter is stated once and the bleed is the absence of it.

Core stacks core/columns at 781px and below. Stacked, a one-sided bleed is wrong twice over: the tall frame would touch one edge and stop short of the other, which reads as a mistake rather than a device, and the type under it would sit hard against the same edge with nothing holding it off the glass.

So the bleed is released at exactly the width the columns stack, by the row's padding-left:

max(0rem, min(clamp(1.25rem, 4vw, 4rem), (782px - 100%) * 1000))

Above 782px the second term is hugely negative, min takes it and max floors it at zero, so the frame bleeds. At 781px and below the second term is hugely positive, min takes the clamp, and the frame is inset by the same gutter as everything else. Measured at nine widths: padding-left is 0 at 782 and 31.23px at 781, and 20px at 390, where the row's right padding is also 20px. So the phone gets a symmetrical, ordinary column of two frames and a column of type, and the signature is simply absent rather than half-present. This is deliberate: a device that only works in one regime should stop rather than degrade into something that looks unfinished.

The section still reads as designed on a phone, because what is left is the proportional pair (a tall portrait, then a headline, a lede and a wide small frame) and the closing hairline. It is quieter, and it is not broken.

1. The two photographs. Click each frame and pick from the media library. The crops hold whatever is uploaded, so a landscape file in the tall frame still reads as a portrait.
2. The headline and the lede. The lede is set in a 34rem measure on purpose; about 55 to 70 characters a line is what the design is tuned for, and a much longer lede will out-run the tall frame's height.
3. The 42/58 split. Both column widths are percentages on the core/column blocks. Widening the frame past about 50% makes the portrait taller than the whole type column, and the spread stops being a spread.
4. The eyebrow and the two closing lines, which are tracked caps and should stay short; they are the only places in the section where a bare font-size would be defensible, and even they state a clamp().

Mirrored spread (spread-mirror). The bleed moves to the right edge and the type column to the left. Same two frames, same proportions, same colours, same copy: one axis, composition. The two padding expressions on the spread row swap sides and the two core/column blocks swap order, which is the whole of the change, and it is worth knowing that it is: the bleed is stated as a padding rather than as an offset, so mirroring it is a swap and not a re-authoring. The type column then starts on the measure's left edge, so it starts on the same line the eyebrow above it starts on, exactly as the base's column ends on the line the measure ends on. At 781px and below the two variations are identical, because both release the bleed.