/* ============================================================ EDITORIAL — the dossier's structure. ============================================================ NEW FILE, 1 Sep 2026. Written against 17-ART-DIRECTION-COUNTER-LIGHT, which names four parts of a dossier and observes that this theme ships two of them: the spine the argument at the 74ch measure EXISTS the exhibit a numbered thing the argument points at EXISTS (the ten .cz-fig treatments) the marginalia the narrow outer column carrying detail MISSING the plate one full-bleed moment per document MISSING Both missing halves are built here, and nothing else is. 17 records the marginalia's absence as measurable rather than aesthetic: `.cz-reading` has declared a third track since the three-column rewrite and NOTHING HAS EVER BEEN PLACED IN IT on any route, so every article on this site carries a blank column up to 380px wide. There is likewise no full-bleed capability anywhere in the codebase; placement.css's widest treatment (`--plate`) stops at the container's own edge. ------------------------------------------------------------ THE CASCADE CONTRACT ------------------------------------------------------------ This file loads last: main -> reading -> article -> devices -> figures -> placement -> EDITORIAL Loading last is a licence to be lazy and this file does not take it. THERE IS NO !important IN THIS FILE and there must never be one. Where a rule here has to beat an earlier file it does so on SPECIFICITY, and the contest is named above the rule that wins it, with the losing selector and its weight written out. Load order is then a second, redundant guarantee rather than the only one — which matters because this project has been bitten six times by a later rule silently taking a fix back, and a fix that only wins on source order is one file reorder away from being gone with no error anywhere. The two selectors this file must repeatedly out-specify: placement.css:132 .cz-reading__body .cz-fig (0,2,0) float:none; margin-left:0; margin-right:0; max-width:var(--cz-fig-measure) figures.css:101 .cz-fig--margin .cz-fig__media (0,2,0) height: clamp(240px, 26vw, 400px) Both are answered at (0,3,0) by naming the element's own two classes — `.cz-reading__body .cz-fig.cz-fig--aside` — never by a bare tie plus load order. ------------------------------------------------------------ WHICH CLASS, AND WHY BOTH ------------------------------------------------------------ The marginalia rules below are written for TWO hooks at once: .cz-fig--aside the name this treatment is being given. .cz-marginalia the hook inc/content-enrich.php:801 already emits, on the figure it already places after each section heading. Its docblock states the contract in full — "Nothing in the theme styles it yet ... The stylesheet that takes the third track needs exactly this, and nothing else, on .cz-reading__body .cz-marginalia" — and then lists the five declarations. This file is that stylesheet. `.cz-fig--margin` is deliberately NOT in the list. That modifier is article.css's in-measure float and placement.css governs its geometry; taking it over from here would be this file having an opinion about a treatment it was not given. The emitter already puts `.cz-marginalia` on the same element, so the union above reaches today's markup without reaching that variant. ------------------------------------------------------------ COUNTER LIGHT, AS GEOMETRY ------------------------------------------------------------ Commitment 3 is the one that has structural consequences: "Where an image must be bright, it is set in a dark field so it reads as a plate on a table rather than a hole in the page." Both components here are built out of that sentence. The photograph is never the whole element — it is a plate laid on a dark mount, and the mount is the element. That is also what makes a 300px-wide frame read as an exhibit rather than as a stray thumbnail: the weight is in the mount, not in the picture's size. R3 is not at risk anywhere in this file. The field is a BACKGROUND behind the photograph and the gold is a BORDER on the mount. No filter, no greyscale, no overlay and not one pixel of any image is altered — an image lifted out of this page is byte-identical to the file on disk. ============================================================ */ /* ------------------------------------------------------------ 1. THE FIELD ------------------------------------------------------------ One token, composed once, consumed by both components, so the marginalia mount and the plate's ground are demonstrably the same surface at two scales rather than two dark rectangles that happen to be near each other. THE COLOUR IS THE MOVEMENT, NOT A CHOICE. 17 fixes the register as "warm source against cool ground — a lamp on a desk at the hour when the office has emptied". So the field is a cool near-black, --cz-ink-2 into --cz-ink, and the only warmth in it is a single wide radial breath of gold at 8% from the top: the lamp, off the top edge, out of frame. It is at .085 alpha, which is under the threshold where it reads as a colour and over the threshold where the surface reads as lit rather than filled. WHY A GRADIENT AND NOT A FLAT FILL. A flat near-black rectangle behind a photograph is a slab — figures.css:210 makes exactly this point about .cz-stat ("A number and a sentence side by side on a plain black rectangle is a slab, not a device"). A field has to have a light source in it or the plate is sitting on nothing. These are declared on .cz-reading__body, the middle track of the reading grid, for the same reason placement.css:626 scopes the blue edge there: the homepage carries .cz-fig elements of its own and ZERO .cz-reading__body, so this scope excludes it exactly and keeps excluding it if the `home` body class is ever renamed. */ .cz-reading__body { --cz-field: radial-gradient(120% 130% at 50% 8%, rgba(199, 163, 107, .085), transparent 58%), linear-gradient(180deg, var(--cz-ink-2, #0a0c10), var(--cz-ink, #050607)); /* The hairline that closes the mount. --cz-line-dk is the site's on-dark rule (main.css:102) and is used here unchanged. */ --cz-field-line: var(--cz-line-dk, rgba(255, 255, 255, .12)); /* The rail track, restated because the plate has to know how far left the container edge is and CSS cannot ask the grid. SOURCE: reading.css:67 `minmax(0, 250px)` and reading.css:100 `minmax(0, 240px)` at <=1400. This is a real cross-file coupling and it is written down rather than inlined so there is one place to change it and one place to find it. If reading.css ever moves those numbers, section 5's plate leads move with them. Reported to that file's owner. */ --cz-rail-col: 250px; } /* ------------------------------------------------------------ 2. THE MARGINALIA — .cz-fig--aside ------------------------------------------------------------ THE PROJECTION, AND WHY IT IS A FLOAT. The exhibit is emitted INSIDE the prose, immediately after the heading of the section it belongs to (content-enrich.php:830), so that the binding between argument and exhibit is a fact in the HTML rather than an inference from a stylesheet. It therefore has to reach the third track from inside the second one, and a float with a negative right margin is the only construction that does that without leaving the flow. THE ARITHMETIC, WHICH IS WHAT MAKES IT SAFE. width = --cz-margin-col margin-left = +--cz-read-gap margin-right = -(--cz-margin-col + --cz-read-gap) margin box = gap + col - col - gap = EXACTLY 0 A zero-width margin box means the float reserves no space, so no line box is shortened and NO TEXT WRAPS IT. That is the point. This is not a wrapped side figure — it is an element in the third column, and the prose beside it is untouched. The 0 is load-bearing for R5's "ZERO text/image overlap" too, and the proof is a subtraction rather than a screenshot: .cz-prose is released to the full track by placement.css:103 (`max-width: none`) and the 74ch measure is carried by the text CHILDREN instead. So the float's containing block is the TRACK. A right float's margin-box right edge sits on the containing block's right content edge, and the negative right margin pushes its border box to track_right + gap <- the mount's left edge while every text child ends at or before track_right. The clearance between the last character on a line and the mount is therefore --cz-read-gap, which is clamp(28px, 3.2vw, 64px), at every viewport in this band. It cannot be negative, because the gap is the only term. MEASURED, harness, shipped cascade: vw track right mount left mount right container right 1600 1161.8 1213.0 1549.0 1549.0 1401 1015.4 1060.3 1354.5 1354.5 mount left minus track right is 51.2 and 44.9 — 3.2vw of 1600 and of 1401, i.e. --cz-read-gap exactly, at both ends of the band. The mount's right edge lands ON the container's right edge to the tenth of a pixel, which is the third column doing its job for the first time. Real text clearance is larger again, 137.8px at 1600, because the 74ch measure stops short of the track. THIS ONLY BECAME TRUE ON 1 SEP. article.css:1880 records the previous attempt failing — "the float reserved nothing, and the paragraphs ran underneath the photograph with words disappearing behind it" — and that is exactly what this construction does when .cz-prose is capped at 74ch while the track is wider: the float then hangs off the MEASURE, not the track, and lands on top of a track that keeps running. placement.css moved the cap onto the text children, so the containing block is the track and the subtraction above closes. Do not reinstate a max-width on .cz-reading__body .cz-prose; this rule depends on its absence. NOT STICKY, ON PURPOSE. 17 wants the exhibit to "hold while the argument scrolls past it", and the third TRACK is sticky (reading.css:86). This element is not in that track — it is a float in the prose, whose sticky containing block would be .cz-prose, i.e. the WHOLE ARTICLE. `position: sticky` here would detach the exhibit from its section and drag it through every later section to the end of the document, which is the opposite of the binding the emitter went to trouble to make. Sticky is available and correct only in the contingency at the end of this section, where the figure really is in the track. */ .cz-reading__body .cz-fig.cz-fig--aside, .cz-reading__body .cz-fig.cz-marginalia { float: right; /* Two exhibits in two short sections would otherwise be placed side by side in a column only wide enough for one, and then overlap. `clear: right` makes the second start below the first — the one place in this file where a gap is preferable, because the alternative is two photographs on top of each other. */ clear: right; width: var(--cz-margin-col); margin-left: var(--cz-read-gap); margin-right: calc(-1 * (var(--cz-margin-col) + var(--cz-read-gap))); /* Beats placement.css:136 `max-width: var(--cz-fig-measure)` at (0,3,0) against its (0,2,0). Without this the mount would be capped at 74ch, which is wider than the column and so invisible today — and a silent trap the first time the column grows. */ max-width: none; /* The block rhythm. Above the exhibit is the heading it belongs to, so the top gutter is small and optical: it sets the mount's top edge just below the cap-height of the first line of prose rather than level with the heading. Below is the next float's business, handled by `clear`. */ margin-top: clamp(6px, .7vw, 12px); margin-bottom: clamp(22px, 2.2vw, 34px); /* THE MOUNT. Section 1's field, at margin scale. The padding is what turns a photograph into a plate laid on something: without it the dark ground is invisible behind the image and the element is a thumbnail again. */ padding: clamp(9px, .8vw, 13px); background: var(--cz-field); /* THE GOLD, USED STRUCTURALLY. A 2px rule down the LEFT edge — the edge that faces the argument — so it reads as the binding of a page inserted into the dossier, not as a decorative border around a picture. It is the same gesture .cz-stat makes with `border-top: 2px solid var(--cz-gold)` (figures.css:226) and the same rule it obeys: R17, gold is emphasis, never a fill. The other three sides are the on-dark hairline, so the mount closes without four gold edges turning structure into trim. */ border: 1px solid var(--cz-field-line); border-left: 2px solid var(--cz-gold, #c7a36b); /* Weight. The mount is a small object in a wide page and needs to sit ON the paper rather than in it. A single long, low-opacity drop — no spread, no colour — reads as contact shadow. */ box-shadow: 0 26px 44px -32px rgba(5, 6, 7, .62); } /* The frame inside the mount. Height is set DIRECTLY and aspect-ratio is explicitly returned to `auto`. R3 forbids pairing aspect-ratio with max-height because the two RESIZE a box rather than cap it, and article.css:1896 still declares `aspect-ratio: 4 / 5` on the marginalia figure it owns — so leaving the ratio in place and adding a height would reproduce this project's documented origin of the "empty spaces" complaint on the one treatment it was hardest to spot. Beats figures.css:101 `.cz-fig--margin .cz-fig__media` (0,2,0) and article.css:1896 (0,2,0) at (0,3,0). THE NUMBERS, measured except the last row, where the harness cannot reach the 1810px at which --cz-margin-col hits its 380px ceiling: vw frame w x h portrait ratio 1401 268.8 x 420.3 1:1.56 1600 307.4 x 460 1:1.50 1810+ 351 x 460 1:1.31 (arithmetic) Portrait at every width in the band, which is 17 commitment 4: "Tall frames and small objects belong in the marginalia, where narrow is CORRECT." A frame that went square here would be the wide-column defect the client photographed, just smaller. */ .cz-reading__body .cz-fig.cz-fig--aside .cz-fig__media, .cz-reading__body .cz-fig.cz-marginalia .cz-fig__media { aspect-ratio: auto; height: clamp(340px, 30vw, 460px); } /* THE OTHER PLACE THIS FIGURE COULD BE EMITTED, AND WHY THERE IS NO RULE FOR IT HERE. .cz-reading__margin is the third track itself (reading.css:84), and it already carries the column width, the sticky and the grid-column — so a figure emitted INTO it would need no projection at all, only the mount. Three speculative declarations were written for that case and then deleted, because they were dead twice over: nothing emits into that track on any route, and the mount block above is scoped on `.cz-reading__body`, so it would not have reached them anyway. A rule that matches nothing, and would not work if it did, is worse than no rule — this project has a documented history of trusting exactly that kind of comment. WHAT AN EMITTER WOULD NEED, stated instead of pre-built: widen the mount block's scope from `.cz-reading__body` to cover `.cz-reading__margin` as well, and drop the float, the width and the two horizontal margins. Four lines, in this file, on the day the markup exists. Reported to the owner of inc/content-enrich.php. */ /* ------------------------------------------------------------ 3. THE PLATE — .cz-fig--fullbleed ------------------------------------------------------------ ONE PER DOCUMENT, and 17 commitment 5 says it is earned: source >= 1920px, never the first figure (R31), never twice. All three are the emitter's decisions. This file only makes the geometry exist. ------------------------------------------------------------ WHY THE TEXTBOOK RECIPE IS WRONG ON THIS PAGE ------------------------------------------------------------ The standard full-bleed is width: 100vw; margin-inline: calc(50% - 50vw); and it is correct only when the containing block is CENTRED in the viewport. Here it is not. The figure sits in column 2 of a three-column grid whose outer columns are different widths — a 250px rail on the left, --cz-margin-col on the right — so the track's centre is offset from the viewport's by (250 - --cz-margin-col) / 2 which is -43px at 1600 (col = 21vw = 336) and -65px at 1810 and above (col = 380). Centring 100vw on the track therefore hangs the plate 43-65px off the LEFT of the viewport, where main.css:1288 `html, body, main { overflow-x: clip }` silently eats it, and leaves an equal white gutter down the RIGHT of a picture that is supposed to be full-bleed. That is precisely the defect the client photographed and described as "images ... are bleeding to the left and not alligning with the text". ------------------------------------------------------------ THE CONSTRUCTION THAT IS CORRECT HERE — TWO STEPS ------------------------------------------------------------ 1. THE FIGURE spans the CONTAINER, using the two offsets the grid actually has. Its left margin is -(rail + gap) and its right margin is -(margin column + gap) — the same right-hand expression reading.css:774 already uses to bleed a table, so the two cannot disagree about where the container edge is. After this the figure's box IS `.cz-reading`'s content box, and `.container` is `width: var(--container); margin-inline: auto` (main.css:875), i.e. centred in the viewport. So is the figure. 2. THE FIELD is a ::before on that now-centred box: `left: 50%; margin-left: -50vw; width: 100vw`. Because step 1 made 50% the viewport's centre, the field lands on the viewport edges exactly, with no assumption about padding and no reliance on the clip. THE SCROLLBAR, WHICH IS HOW THIS NORMALLY BREAKS. 100vw includes the classic scrollbar gutter, so the field overhangs the content box by half a scrollbar on each side. MEASURED at 1600x1000, dpr 1.25, 15px scrollbar: the ::before computes width 1600px, margin-left -800px, left 756.4px inside a figure at 36..1548.8, so it runs -7.6..1592.4 against a clientWidth of 1585 — 7.6px past each edge, symmetric to the tenth of a pixel. With the shipped stylesheet `documentElement.scrollWidth` is 1585 against clientWidth 1585: NO HORIZONTAL SCROLLBAR. That reading alone proves nothing — main.css:1270 says so in as many words, because the root clip makes a zero unfalsifiable — so it was taken again with `html, body, main { overflow-x: visible }` forced: scrollWidth 1593, clientWidth 1585, TRUE OVERRUN 8px, and 8px is the field's own deliberate two-halves-of-a-scrollbar and nothing else. Not a runaway 100vw, not the 43-65px miscentring above. The 8px was left rather than engineered away. It lands on the FIELD, which is a flat dark background, and NO PIXEL OF ANY PHOTOGRAPH IS EVER CLIPPED, because the picture is inset from the field by the padding below — which is the second reason this file insets it. The exact alternative (`inset-inline` of minus half the container gutter) is correct only under the 1720px container cap and wrong above it, which is a worse trade than 8px of clipped background. ------------------------------------------------------------ THE PLATE IS NOT THE FIELD ------------------------------------------------------------ The full-bleed moment is the DARK FIELD running edge to edge; the photograph is a plate laid on it, inset by a real margin. That is 17 commitment 3 read literally — "a plate on a table rather than a hole in the page" — and a photograph run to the glass on both sides is the hole. It also means the gold rule and the picture both begin on the container's left edge, which is the site's one left edge (R5), while only the ground runs past it. */ .cz-reading__body .cz-fig.cz-fig--fullbleed { /* Step 1. Beats placement.css:132's `margin-left: 0` / `margin-right: 0` / `max-width` at (0,3,0) against (0,2,0). */ float: none; max-width: none; width: auto; margin-left: calc(-1 * (var(--cz-rail-col) + var(--cz-read-gap))); margin-right: calc(-1 * (var(--cz-margin-col) + var(--cz-read-gap))); /* A 100vw element cannot share a line with a projected exhibit, and a float that is still open when the plate begins would be drawn straight over it. `clear: both` is not optional here. */ clear: both; position: relative; isolation: isolate; /* The block rhythm of an event. The plate is a break in the document, so it takes more air above than any figure in placement.css (`--strip` takes clamp(38px, 3.8vw, 60px)) and leaves slightly less below, so the prose that follows reads as resuming after it rather than as a new section. */ margin-top: clamp(52px, 5.2vw, 92px); margin-bottom: clamp(44px, 4.4vw, 76px); /* The inset that makes the picture a plate. Inline padding is the rim; block padding is the table showing above and below it. */ padding-block: clamp(30px, 3.2vw, 60px); padding-inline: clamp(20px, 3.2vw, 64px); /* THE GOLD, again structural. A 2px rule across the top of the PLATE — not across the field — so it starts on the container's left edge and marks the register change. Same gesture, same weight and same rule (R17) as .cz-stat's top rule and the mount's left rule in section 2, which is what makes the three read as one system. */ border-top: 2px solid var(--cz-gold, #c7a36b); } /* Step 2. The field. */ .cz-reading__body .cz-fig.cz-fig--fullbleed::before { content: ""; position: absolute; inset-block: 0; left: 50%; width: 100vw; margin-left: -50vw; background: var(--cz-field); /* Behind the plate, in front of nothing. The figure carries `isolation: isolate` so this z-index is local and cannot reach the sticky rail or the header. */ z-index: 0; } /* The plate itself sits above the field. .cz-fig__media is already `position: relative` (article.css:1749), so this is a z-index and nothing else. */ .cz-reading__body .cz-fig.cz-fig--fullbleed .cz-fig__media { position: relative; z-index: 1; aspect-ratio: auto; height: clamp(460px, 40vw, 680px); /* NEVER WIDER THAN ITS SOURCE. Commitment 5 admits a photograph to full bleed only at >= 1920px, and above roughly a 2050px viewport an unbounded plate would be asking that source to stretch. Capped at the source floor and centred in the field, so past that width the field simply shows more table. Below it — every viewport this site is measured at — the cap does not bind and the plate is the container's full width. */ max-width: 1920px; margin-inline: auto; } /* HEIGHT IS AN EVENT, NOT A BAND — the one number on this element the client has already rejected twice. figures.css:76 records `--strip` at 330px inside a 1212px box, which is 3.67:1, and records the client's words for it: "the lame thin strip", three times across three pages. A plate is wider still, so the same height would be worse. MEASURED at 1600 this plate is 1410.4 x 640 = 2.20:1, and at 1200 the arithmetic gives 1070 x 456 = 2.35:1 — anamorphic, which is what R4 means by generosity of space, and a long way from 3.67. The ratio is a RESULT here: the height is set directly and the width is whatever the container gives, exactly as figures.css:70 requires, and there is no aspect-ratio anywhere near it. */ /* ------------------------------------------------------------ 4. COLLISION GUARDS ------------------------------------------------------------ The margin column was empty for the whole life of this project, so nothing in it could collide with anything. It is not empty any more, and three families of element already bleed into it: reading.css:771 .cz-chapter, .cz-tablewrap, .cz-bleed placement.css:139 the six full-width figure treatments A float shortens LINE boxes; it does not move BLOCK boxes. So a bleeding table or a full-width figure inside the vertical range of a projected exhibit would be drawn straight through it — a text/image overlap, which R5 forbids outright. `clear: right` is the whole fix, and it is cheap in the only sense that matters: an element that is not beside the float is unaffected, so the gap is paid ONLY in the case where the alternative is an overlap. Nothing in the theme sets `clear` on any of these, so there is no rule to beat and no tie to break. */ .cz-reading__body .cz-chapter, .cz-reading__body .cz-tablewrap, .cz-reading__body .cz-bleed, .cz-reading__body .cz-fig--pair, .cz-reading__body .cz-fig--offsetpair, .cz-reading__body .cz-fig--triptych, .cz-reading__body .cz-fig--strip, .cz-reading__body .cz-fig--plate, .cz-reading__body .cz-fig--bleedleft { clear: right; } /* THE FOOTER, WHICH CANNOT BE REACHED — and the one gap in that guarantee, closed here. `.cz-reading__body` is a GRID ITEM (reading.css:73), and a grid item establishes an independent formatting context. Its height therefore includes any float inside it, and a float inside it cannot escape it. So no exhibit can reach the postnav wrapper, the consult section or the footer: the containment is structural, not a number that could be tuned wrong. What the grid item does NOT protect is .cz-prose's own siblings — the sources block and the postnav sit next to the prose inside that same item, and an exhibit opened in a very short final section would overflow .cz-prose's bottom and be drawn over them. One `clear` closes it, and costs nothing on the normal path where the float has already ended. */ .cz-reading__body > .cz-prose ~ * { clear: right; } /* THE STICKY RAIL, WHICH THE PLATE WOULD OTHERWISE ERASE. MEASURED, in the harness, at 1600x1000 with the shipped cascade: with the plate moved into the rail's band, `document.elementFromPoint()` at the centre of the rail returned IMG < .cz-fig__media < .cz-fig < .cz-prose < .cz-reading__body i.e. the plate's PHOTOGRAPH, not the table of contents. So a reader scrolling a plate past the pinned rail would watch the contents list vanish behind it. THE CAUSE IS PAINT ORDER, NOT GEOMETRY, so no width or margin here can fix it. The rail is `position: sticky` with `z-index: auto` (reading.css:72) and the plate is `position: relative` with `z-index: auto`; both are positioned, both sit in the ROOT stacking context — .cz-reading is a grid container and .cz-reading__body a grid item, and neither establishes one — so they paint in TREE ORDER, and the body comes after the rail. The whole fix is to give the two sticky tracks a stacking level. `z-index` and nothing else: no position change, no transform, so the sticky behaviour reading.css owns is untouched. 2 rather than 1 leaves a level free between the plate and the rail. Nothing in the theme sets z-index on either element, so there is no rule to beat. The site header is z-index 50 (main.css:757) and stays above both, which is the order it should be. */ .cz-reading > .cz-reading__rail, .cz-reading > .cz-reading__margin { z-index: 2; } /* ------------------------------------------------------------ 5. BREAKPOINTS ------------------------------------------------------------ Four bands, each responsible for exactly its own width, and each bounded at BOTH ends where a later band restates the same property. reading.css:70 records why: written open-ended as `max-width: 1400px`, a rule also matches 375px, and printed after the single-column rule it wins there too — which once left the prose 135px wide on a phone. The two structural boundaries are not chosen here. They are reading.css's: 1400 the grid drops from three columns to two. There is no third track, and .cz-reading__margin folds under the rail (reading.css:100). It is also the width at which reading.css:783 and article.css:1970 unbleed the table and the wide figures, so everything crosses together. 1000 the grid becomes one column (reading.css:569). 620 and 375 are this file's own, and both are about the frame rather than the grid. */ /* ---- 1001-1400: no third column ---- The projection has nowhere to go, so the exhibit folds back into the track and becomes an ordinary right float. WHAT IT ACTUALLY DOES ACROSS THE BAND, measured, because it is not one behaviour. The float is right-aligned to the TRACK while the prose is capped at 74ch, so how far it intrudes depends on the surplus between them: 1400 track 1037.2, text box ends 1054.3, mount starts 1053.5 -> the exhibit sits in the surplus. No line is shortened and nothing wraps. It still reads as marginalia. 1200 track 852.4, longest line ends 824.9, mount starts 857.8 -> 32.9px clear. The float DOES intrude, lines shorten around it, and the text column is 519.5px. Both are correct and neither overlaps, because a float shortens line boxes rather than being drawn over them — the -185.4px figure a naive box-versus-box comparison reports at 1200 is the paragraph's BOX, not its text, and the line-box measurement above is the one that answers R5. It stays a FLOAT rather than becoming a full-width block, because a full-width block is what --inset and --quiet already are, and article.css:1965 records the exact failure of letting the two converge — the margin figure was given 16/9 at this boundary, "which is exactly the inset's ratio, so two of the four treatments rendered identically from 1400px all the way down to 375px". Portrait character is the whole of what this treatment is; it is kept at every width above 620. The width is min(40%, 300px), NOT article.css:1892's min(42%, 340px), and the reason is arithmetic rather than taste: at 1200 the measure is ~867px, so 340px against a 400px frame would be 1.18:1 — square, i.e. the character lost. 300px against 360px is 1:1.2 and still reads as an upright exhibit. The gutter is large because the mount is dark and wrapped text needs air off it. */ @media (min-width: 1001px) and (max-width: 1400px) { .cz-reading__body .cz-fig.cz-fig--aside, .cz-reading__body .cz-fig.cz-marginalia { width: min(40%, 300px); margin-left: clamp(26px, 2.6vw, 40px); margin-right: 0; margin-top: clamp(10px, 1vw, 16px); } .cz-reading__body .cz-fig.cz-fig--aside .cz-fig__media, .cz-reading__body .cz-fig.cz-marginalia .cz-fig__media { height: clamp(330px, 30vw, 400px); } /* The plate loses the right-hand offset with the column, and the left one changes value: the rail is 240px in this band, not 250 (reading.css:100). Step 2 is untouched — the figure still spans the container, so ::before still finds the viewport centre. */ .cz-reading__body .cz-fig.cz-fig--fullbleed { --cz-rail-col: 240px; margin-right: 0; } .cz-reading__body .cz-fig.cz-fig--fullbleed .cz-fig__media { height: clamp(400px, 38vw, 520px); } } /* ---- <=1000: one column ---- Open-ended downwards on purpose, and safe because the two bands below only narrow values this band has already set — never the grid arithmetic, which is zero from here down and must stay zero all the way to 375. A bounded range here would leave the 1401+ negative margins in scope on a phone and drag the plate several hundred pixels off the left of the screen. The exhibit keeps its float down to 620. MEASURED at 1000: the single column is 939.8px, the 300px exhibit starts at 662.3 and the longest line ends at 596.4 — 65.9px clear, with a 573.9px text column beside it. That is a wrap, not a squeeze. */ @media (max-width: 1000px) { .cz-reading__body .cz-fig.cz-fig--aside, .cz-reading__body .cz-fig.cz-marginalia { width: min(38%, 300px); margin-right: 0; } .cz-reading__body .cz-fig.cz-fig--aside .cz-fig__media, .cz-reading__body .cz-fig.cz-marginalia .cz-fig__media { height: clamp(300px, 34vw, 380px); } /* No columns left to reach past. Both offsets go to zero and the figure spans the prose, which at one column IS the container — so step 2 still holds and the field still runs edge to edge. */ .cz-reading__body .cz-fig.cz-fig--fullbleed { margin-left: 0; margin-right: 0; margin-top: clamp(40px, 5vw, 60px); margin-bottom: clamp(32px, 4vw, 50px); padding-block: clamp(22px, 2.8vw, 34px); padding-inline: clamp(18px, 2.6vw, 32px); } .cz-reading__body .cz-fig.cz-fig--fullbleed .cz-fig__media { height: clamp(340px, 40vw, 420px); } } /* ---- <=620: phones and small tablets ---- The float goes, and 620 is where it has to go. MEASURED with the float held open past its boundary: vw float w text column clearance 620 223.4 338.3 26.3 500 177.8 252.6 37.5 At 620 both halves are still just workable. At 500 the exhibit is 177px — below the 240px floor --cz-margin-col itself refuses to go under — beside a 252px line, which is about 28 characters. Neither is an exhibit and neither is a paragraph. So both are given the full column instead, one after the other. The ONE thing that has to survive the fold is DISTINCTNESS. placement.css:590 puts --quiet, --inset and --bleedleft at clamp(200px, 58vw, 270px) in this band; this treatment sits at 74vw. MEASURED at 375: 277.6px against the inset's 217.5px on the identical 326.8px width. Taller than every other frame on the page, on the same width, is what keeps the marginalia identifiable once the margin it is named for no longer exists — and it is the same failure article.css:1965 records from the other direction, where --margin was given the inset's exact ratio and the two treatments became one from 1400px down to 375px. The one width where this treatment is at its widest relative to its height is the top of the band: 569.6 x 330 = 1.73:1 at 620, against 2.18:1 for the inset beside it. Still separated, but that is the closest the two come anywhere, and it is recorded rather than smoothed over. The mount thins with the column — a 13px rim on a 343px screen is a frame around a frame — but it does NOT disappear: the dark ground and the gold edge are the treatment, and dropping them here would leave a phone reader looking at the same bare rectangle as every other figure. */ @media (max-width: 620px) { .cz-reading__body .cz-fig.cz-fig--aside, .cz-reading__body .cz-fig.cz-marginalia { float: none; width: 100%; margin-left: 0; margin-right: 0; margin-top: clamp(26px, 5vw, 32px); margin-bottom: clamp(15px, 3vw, 20px); padding: 8px; } .cz-reading__body .cz-fig.cz-fig--aside .cz-fig__media, .cz-reading__body .cz-fig.cz-marginalia .cz-fig__media { height: clamp(260px, 74vw, 330px); } /* The plate keeps a rim on a phone for the same reason it has one on a desktop: a photograph run to both edges of a 375px screen is a hole in the page, and the field is the only thing telling the reader this is a plate. 14px is the smallest rim that still reads as one at this width. The frame goes near-square rather than wide — MEASURED 319.2 x 300 = 1.06:1 at 375, and 560 x 380 = 1.47:1 at 620 — where anything letterboxed at these widths is the thin strip again. The 300px floor is doing the work at 375: 76vw is 285 there, so the clamp's MINIMUM is what ships, and it is set where it is for exactly that reason. */ .cz-reading__body .cz-fig.cz-fig--fullbleed { margin-top: clamp(32px, 8vw, 40px); margin-bottom: clamp(26px, 6vw, 34px); padding-block: clamp(16px, 4vw, 22px); padding-inline: 14px; } .cz-reading__body .cz-fig.cz-fig--fullbleed .cz-fig__media { height: clamp(300px, 76vw, 380px); } } /* ---- <=400: the mandated 375 ---- R7 fixes 375px as a width that must WORK, and at 375 the container is 343px (main.css:37: 100% minus a clamp(32px …) gutter). Two rims are subtracted from that before any picture is drawn, so both are cut to the smallest value that still reads as a mount rather than as a rendering artefact. plate 343.2 - 24 = 319.2px of picture (measured 319.2) mount 343.2 - 14 - borders = 326.8px (measured 326.8) Nothing in either component is text and nothing is interactive, so R7's 12px floor and 44px tap target do not apply — R3 removed captions from every figure on this site, and there is no control in a mount. The only R7 obligation here is that neither element overflows 343px. Neither is given a width plus a padding: the mount is `width: 100%` and the plate is `width: auto`, both inside a border-box (main.css:112), so the rim is subtracted from the column rather than added to it. MEASURED at 375: both boxes are 343.2px wide, `documentElement.scrollWidth` equals `clientWidth` at 375, and with the root clip lifted the true overrun is 0 — the mobile viewport has no scrollbar gutter for 100vw to include, so the field lands exactly on both edges. */ @media (max-width: 400px) { .cz-reading__body .cz-fig.cz-fig--aside, .cz-reading__body .cz-fig.cz-marginalia { padding: 7px; } .cz-reading__body .cz-fig.cz-fig--fullbleed { padding-inline: 12px; } } /* ------------------------------------------------------------ 6. REDUCED MOTION ------------------------------------------------------------ Neither component adds motion — the mount is a background and a border, the field is a background — so there is nothing here to switch off, and main.css:690 already neutralises the reveal transform for the whole site under this query. The one thing worth stating is what happens if the reveal script never runs: `[data-reveal]` ships at `opacity: 0` (main.css:443), so an unrevealed exhibit is an invisible picture on a visible dark mount. That is a pre-existing site-wide condition and not this file's to fix, but it is the reason the mount is drawn on the FIGURE rather than being faked with a wrapper — the two share /* ============================================================ R69 — THE FORM IN THE MARGIN TRACK ============================================================ His instruction, 20 September 2026: *"on right side of every page we have a empty space, we can have a form there too"* — then, on the first attempt: *"doesnt look good at all. No text, no placeholder is also visible. It's too dark blue… we needed a form that moves while we scrolling… Redesign a good clean, good looking form"*, *"the actual form is inside of inside of box"*, *"whole form should be good"*. WHY IT LOOKED LIKE THAT. `.cz-form` in main.css:3718 is built for the dark consult band: `background: var(--cz-ink-2)`, its own 1px border and 22-40px padding, `color: #fff` on the controls and placeholders at `rgba(255,255,255,.3)`. Correct there, wrong everywhere else — in a light card it is a black panel inside a white one with invisible text in it. Every rule below either turns one of those off or replaces it. No `!important`: `.cz-railform .cz-form` is (0,2,0) against `.cz-form`'s (0,1,0), so it simply wins. The track it sits in — `.cz-reading__margin`, reading.css:91 — has carried `position: sticky; top: 110px` since the layout was built and had no emitter until now, which is both why the space was empty and why "moves while we scrolling" needs no new rule. Bands: >=1401 the real third column, sticky. Below 1401 the card is withheld — R69 is "1401px and up only", because under that width the track folds into the rail (reading.css:104) and a static card lands thousands of pixels down the page, and because the page already ends with the full form: two forms on one phone screen is worse than one. THE ASIDE GOES WITH IT, not just the card — 21 September 2026. *"no need of that side form in mobile view"* is a request for ABSENCE, and hiding only `.cz-railform` did not deliver it. The `