/* ========================================================================== 3 — BREAK DOWN THE SILOS THREE COLUMNS — argument · montage · three-item list. R6n, by direction, from a supplied layout. ✅ THIS FIXES THE §15 VIOLATION R6m CREATED. The Hero is a 7/5 two-column split and this section was a two-column split directly beneath it — the page's first "consecutive sections share a layout pattern" break. Thirds is a different pattern, and one §15 lists by name, so the pair is legal again without moving either section. ⚠ THE PROPORTIONS ARE NOT THE REFERENCE'S. It shows roughly 5/3/4 — a wide argument, a narrow video, a medium list. §15 allows full · halves · thirds · 7-5 asymmetric and nothing else, and 5/3/4 is not in that vocabulary. Equal thirds is the nearest legal reading and is what is built. Matching the reference exactly means adding a fifth layout pattern to §15, which is a bigger change than it looks: the vocabulary is what stops fifteen sections drifting into fifteen bespoke grids. WHAT THE EARLIER REVISIONS COST, still true and still unresolved: · THE OFFSET WAS THE DEVICE. Text indented to column 2 rather than flush marked the shift from announcement to argument. In a column layout the column edge IS the indent, so the signal is gone, not relocated. · THE MEDIA WAS UNFRAMED ON PURPOSE. §12.1: the notch marks a FRAMED image, so edge-to-edge media took neither corners nor notch. It is framed now, with 8px corners and no notch — an OPEN CONTRADICTION, carried because the supplied layouts show plain corners. · IT NO LONGER BREAKS THE CONTAINER, the only place §3 left 1280. Cell motif deliberately ABSENT. It appears in exactly six sections and this is not one of them; the absences are load-bearing. ========================================================================== */ /* R8f — THE SECTION IS BLACK AGAIN, by direction. R7o's light ground, its on-light type colours and its mirrored hairline are all removed; the section inherits the page base and the shared type tokens again. ⚠ THE VIOLET GOES BACK TO 3.61:1. On #F5F5F5 the closing line's #6146ED measured 5.34:1 and cleared normal-text AA outright; on black it is 3.61:1, which is large-text AA and a FAILURE for normal text. THE H3 SIZE PIN IS LOAD-BEARING AGAIN — H3 runs 26/30/34px and never drops below the 24px large-text floor. If that line ever moves below 24px the colour has to go with it. This is exactly the constraint R5y hit when the same colour was tried on the Hero's 20px lead. The violet circles (R7p) survive the change: #6146ED as a SHAPE on black is 3.61:1 against the 3:1 a non-text element needs, and their white glyph is 5.82:1 on the violet either way. R7p, R7r, R7t and the squared corners are unaffected — this reverts the ground and the type colours, nothing else. -------------------------------------------------------------------------- */ .silos__inner { display: grid; gap: var(--space-2xl); } /* R13z — HALVES, down from thirds. Column 3 was removed by direction and the grid follows it; a three-column rule with two children would have left the montage sitting in the middle third with an empty column beside it. `align-items: center` is kept and still earns its place: the argument is shorter than the montage, and a shared midline is what keeps the video reading as the section's centre of gravity rather than as a tall block the text hangs from. ⚠ THE MONTAGE GROWS. At thirds it had a third of the row; at halves it has half, so the 2:3 placeholder is now markedly taller than the argument beside it. If that reads as too dominant, the lever is a max-inline-size on .silos__media — NOT a return to three columns with an empty one. */ @media (min-width: 992px) { .silos__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); align-items: center; } } /* -------------------------------------------------------------------------- COLUMN 1 — THE ARGUMENT -------------------------------------------------------------------------- */ .silos__measure, .silos__argument { max-inline-size: var(--measure-prose); } /* R6z — the divider between the body and the closing line is REMOVED, and its spacing had to be rehoused rather than simply lost. The rule carried 32px of margin above and below, so deleting the element alone would have collapsed a ~65px interval to nothing and pulled the closing line up under the paragraph. .silos__close takes 64px instead — one value on the §4 scale, closest to what the divider's two margins plus its hairline spanned. The pull rule (R6s) now carries the separation on its own: it marks the line as set apart, which is the job the divider was doing horizontally. Two marks for one turn was the redundancy worth removing. .divider itself is untouched — §6 still uses it. */ /* THE CLOSING LINE — R6q, by direction: the H2's weight and style, in #6146ED. Two changes only, because .t-h3 and .t-h2 already agree on family, weight, leading and tracking — the ONLY differences were the 's italic and its colour. Size is untouched; it stays H3, which is what keeps it the conclusion of the argument rather than a second heading competing with the one above it. THE ITALIC WAS DOING WORK AND IS NOW GONE. It marked the line as a different register — the argument's turn, not another statement. Colour carries that alone now, which is thinner than colour plus slope. Recorded rather than argued: the instruction was explicit. ⚠ COLOUR — this is the one place #6146ED is legal on type, and only because of the size. It measures 3.61:1 on black: AA for LARGE TEXT (3:1), and a FAILURE for normal text (4.5:1). H3 runs 26 / 30 / 34px across the breakpoints and never drops below the 24px large-text floor, so it clears at every width. The same colour was tried on the 20px Hero lead at R5y and reverted for exactly this reason. If this line ever moves below 24px, the colour has to go with it. */ /* THE PULL RULE — R6s, from the supplied reference. ONE device, deliberately. A violet rule at the line's leading edge with the text set in from it: the standard pull-quote mark, which is what this line actually is — the argument stepping out of the paragraph to state its conclusion. WHAT I TOOK FROM THE REFERENCE: the violet framing, and the idea that this line is set apart rather than merely coloured. WHAT I REFUSED, and why — the brief said do not overdo it, and each of these is a rule this page holds elsewhere: · THE BORDERED, FILLED PANEL. surface + border + radius is the card recipe, and §16 forbids carding sections 3–7 outright: they run the argument, and carding persuasion turns it into a feature grid. · THE GLOW. §12 prohibits decoration layered over text, and a bloom behind display type is the first step toward the crowding the blend budget exists to prevent. · THE CIRCULAR BADGE overlapping the corner. §12: no floating elements off the grid, no shapes without a compositional role. · THE UNDERLINE SWOOSH. An organic hand-drawn stroke against a strictly rectangular, axis-aligned language. · THE "SOLUTION" / "CHALLENGE" EYEBROWS and the three mini-items. Copy that does not exist in the content document. THE HORIZONTAL DIVIDER IS GONE (R6z). It stayed at R6s on the argument that the two did different jobs — a quiet hairline marking the section's turn, a violet rule marking the line. With the rule in place that turned out to be two marks for one turn, and the rule alone is the stronger of them. 1px was tried first and is not enough — a hairline next to 34px display type reads as an artefact rather than a mark. 2px (--border-emphasis) held while the line was weight 500. R7t — THE RULE IS NOW STEM-MATCHED, by direction: "increase the width of the vertical line to match the width of the text." R7r took the line to weight 700, and a 2px rule beside a 700 Extrawide stem reads as a different object from the type it belongs to. Matching the stem makes it read as one more stroke of the same letterform. ⚠ IT IS SET IN em, NOT px, AND THAT IS THE POINT. The rule has to track the type it is matching, and this line is 26 / 30 / 34px across the three breakpoints. A fixed px value would be stem-matched at exactly one width and wrong at the other two — too heavy on mobile, too light on desktop. 0.14em -> 3.6px @ 26 · 4.2px @ 30 · 4.8px @ 34 ⚠ 0.14em IS A MEASURED ESTIMATE OF THE FACE, NOT A METRIC READ FROM IT. Loos Extrawide's Bold stem sits in the usual 0.12–0.16em band for a wide sans, and 0.14 is the middle of it. If it reads heavy or light against the real face, change this ONE number — the three breakpoints follow it. ⚠ AND IT IS A THIRD BORDER WIDTH on a page that deliberately had one, then two. --border-emphasis (2px) exists solely for this rule and now has NO consumer; it is left defined rather than deleted because 2px is the value this mark would return to if the line ever goes back to weight 500. */ /* WEIGHT 500 → 700 — R7r, by direction: "increase the weight of this text." 700 IS THE ONLY LEGAL STEP UP, and this is not a preference. Loos Extrawide publishes 400 and 700 in this kit and nothing between. --font-weight-heading is set to 500 deliberately (§5): CSS weight matching for 500 checks 500, finds nothing, then DESCENDS to 400 — so it renders a published face with no synthesis. Asking for 600 would ascend to 700 and get a real face too, but §9 forbids any heading weight between 500 and 700 precisely because the intermediate values are where a browser starts smearing an outline. 700 is the published Bold. There is no half-step available and inventing one would be a synthesised face, not a weight. ⚠ IT IS NOW HEAVIER THAN THE SECTION'S OWN H2. "Break Down the Silos" sits at 500; its conclusion sits at 700. Size still separates them — H2 is 48px at desktop against this line's 34 — but weight now runs the other way, so the two signals disagree. Defensible: this line IS the argument's landing, and it is the only violet thing in a column of black type. Recorded because it is the first place on the page where a subordinate heading outweighs the heading above it. */ .silos__close { margin-block-start: var(--space-3xl); /* 64 — see the R6z note above */ max-inline-size: var(--measure-prose); font-weight: var(--font-weight-bold); color: var(--color-accent-identity-deep); border-inline-start: 0.14em solid var(--color-accent-identity-deep); /* stem-matched — R7t */ padding-inline-start: var(--space-md); } /* R14d — THE FORCED BREAK, desktop only. `display: none` removes the break; the space after it in the markup is what keeps "Collective" and "is" from butting together when it does. */ .silos__break { display: none; } @media (min-width: 992px) { .silos__break { display: inline; } } /* stays in the markup — the emphasis is semantic and belongs to the copy — but it no longer slants. Resetting font-style rather than deleting the element keeps the meaning and drops only the appearance. */ .silos__close em { font-style: normal; color: inherit; } /* -------------------------------------------------------------------------- COLUMN 2 — THE MONTAGE Contained, not full-bleed. Ratio comes off the .ph modifier in the markup so the placeholder and the eventual