/* ========================================================================== 7 — INTRODUCING THE SUMMIT — the plate Full-bleed VIOLET plate, centred, ~80vh. R9f, by direction — was pink. ✅ TYPE AND STROKE ARE WHITE — R9g, by direction, and this is what makes the violet ground legal. R9f moved the ground and left the type at --color-on-plate-invert #0F0F0F, which measured 6.2:1 on pink and 3.29:1 on violet — three of the four elements failed AA: plate__title 76px / 500 3.29:1 needs 3.0 (large) passed plate__logistics 22px / 400 3.29:1 needs 4.5 FAILED plate__body 20px / 400 3.29:1 needs 4.5 FAILED plate__eyebrow 14px / 600 3.29:1 needs 4.5 FAILED White on violet is 5.82:1 and passes at EVERY size, so all four clear now with the same value. §18's floor is satisfied. ⚠ THE PAGE ALSO LOSES ITS ONE NON-VIOLET EVENT. Pink was the plate and the plate was pink — §17's accent journey put it here as the contrast to a page whose identity colour is violet, which is already the Hero CTA, §3's accent, §4's ✓ side, §6's accent and §10's. The colour PEAK is now the same hue as everything around it. Peak density (colour). NO blend shape — the plate is a flat accent surface, not a gradient, and is one of only two permitted accent surfaces page-wide. This is the page's colour peak and it works because of what surrounds it: 160px of empty black above (§6) and the page base returning below. The plate is not decorated. It is a colour event. ========================================================================== */ /* -------------------------------------------------------------------------- R12c — FULL-BLEED AGAIN, by direction: "instead of bounded box, make this full section." R12b's .plate__box is gone entirely; the violet is back on the section, edge to edge, at ~80vh — 70vh since R12n. THE BLEED AND THE HEIGHT WERE ALWAYS ONE THING. R12b took both away together and this returns both — a plate reads as the page's colour peak because it fills the frame with nothing else in view, which needs the full width AND the height. The only part of R12b that survives is the layout inside it: left-aligned type in the left half, network in the right. THE PADDING IS .section's OWN, and that is now correct where it was wrong at R12b. Bounded, the section's padding sat OUTSIDE the violet and added 120px to §6's deliberate 160px gap. Full-bleed, it sits INSIDE the violet as the plate's internal margin, and the 160px above is untouched. -------------------------------------------------------------------------- */ /* R12n — 80vh -> 70vh, by direction: "slightly reduce the top and bottom padding of this section." ⚠ THE PADDING IS NOT WHAT MAKES THAT SPACE, so reducing it would have done nothing. .section's padding is 120px top and bottom here; the content plus that padding comes to roughly 750px, while 80vh on a 950px viewport is 950. The taller value wins, the flex box centres the content in it, and the surplus shows up as even bands above and below — which read as padding and are not. Cutting padding to 80 would have left 950 untouched. 70vh IS THE ONE VALUE THAT ACTUALLY MOVES IT, and it moves it at every viewport: where 70vh still exceeds the padded content it sets a smaller height directly, and where it does not, .section's padding takes over at a value smaller than the old 80vh. Either way the bands shrink. §5's "do not vary section padding case by case" is therefore intact — nothing here overrides --section-padding-block, and §7 keeps the page's shared padding utility. */ /* R18k — NO background-color. The section sits on the page's own black. 70vh STAYS. It was here so the violet "fills the frame with nothing else in view", and the violet still does exactly that — for one wipe. The height is also what stops the reference's composition, which is wide and airy, from collapsing onto its own copy. */ .plate { position: relative; overflow: hidden; display: flex; align-items: center; min-block-size: 70vh; } /* ⚠⚠ THE WIPE, TURNED AROUND — R18k. §7's signature interaction survives the ground going black, and this is the whole of how. IT USED TO ARRIVE: a violet panel scaled IN from the left and STAYED, and the panel was the section's ground from then on — which is why `.js .plate` had to go transparent underneath it. CLAUDE.md warned in writing that making this ground non-violet would kill the interaction outright: violet wiping onto black, then sitting there, is not what this section is now. IT NOW LEAVES. The panel starts covering and retreats to its RIGHT edge, uncovering the black section and the copy together. Left to right, the same direction as §8's and §9's tiles — the page has one gesture of violet crossing a box and it travels one way. ⚠ z-index AND content BOTH MOVED. As a ground the panel painted UNDER the copy and needed no stacking order; as an overlay it must paint over it. And `content: ""` is now declared INSIDE the query, so without JS or under `reduce` the pseudo-element is not generated at all — declared outside, a reader with motion off would get an opaque violet rectangle parked over the entire section with nothing left to move it. pointer-events: none — the panel crosses the CTA on its way out. ⚠ .reveal's FADE IS CANCELLED HERE, not delayed. It used to wait one reveal-duration so the copy arrived after the violet; with the violet leaving, the copy is what the violet UNCOVERS, so it has to be there already. Leaving the fade in would empty the section for a beat and then fade the words in on black — two arrivals where the wipe is one. This is the same cancellation .reveal--wipe performs, for the same reason. */ /* ⚠ >=992, MATCHING .reveal--wipe — R18z, by direction: "the purple card wipe animation for this section will be the same as the images wipe animation in the sections after this." THEY WERE ALREADY THE SAME IN EVERY OTHER RESPECT, which is worth stating so nobody goes looking for a difference that is not there: same token (--color-accent-identity-deep), same duration (--duration-reveal), same curve (--ease-reveal), same lead-in (--delay-reveal-lead), same direction (transform-origin: right, scaleX(1) -> scaleX(0), so the violet retreats to the right and uncovers left to right), same pointer-events: none, and in both cases `content` is declared INSIDE the query so nothing is generated when the animation does not run. THE ONE DIFFERENCE WAS THE BREAKPOINT. .reveal--wipe was gated to >=992 at R18d — "the wipe animation is not needed for mobile view" — and this was left running at every width. On a phone §8 and §9 did not wipe and §7 did. The gate closes that. ⚠ THE .reveal CANCELLATION MOVES WITH IT, and it has to. Below 992 there is no panel, so the copy must arrive by the page's ordinary .reveal — fade and 24px lift. Gating the panel while leaving `opacity: 1` outside would strip §7's entrance on mobile and give it nothing in return. This is exactly how .reveal--wipe is built: motion.css keeps its cancellation inside the same query for the same reason. */ @media (min-width: 992px) and (prefers-reduced-motion: no-preference) { .js .plate::before { content: ""; position: absolute; inset: 0; /* R18l — ABOVE .plate__inner, NOT LEVEL WITH IT. The copy is already --layer-raised, and a ::before is the FIRST child in tree order, so at an equal z-index the copy would paint over the violet and the wipe would uncover something that was never covered. Derived from the token rather than written as a bare 2, so it moves if the scale does. */ z-index: calc(var(--layer-raised) + 1); background-color: var(--color-accent-identity-deep); transform: scaleX(1); transform-origin: right center; pointer-events: none; transition: transform var(--duration-reveal) var(--ease-reveal); transition-delay: var(--delay-reveal-lead); } .js .plate.is-revealed::before { transform: scaleX(0); } .js .plate .reveal { opacity: 1; transform: none; } } .plate__eyebrow, .plate__title, .plate__logistics, .plate__body { color: var(--color-text-heading); } /* R12b — LEFT-ALIGNED, and in the left half. The reference sets everything to one edge and gives the other half to the network; centred type with a picture beside it would read as two things sharing a box rather than as one composition. */ /* R12e — BACK ON THE CONTAINER, by direction: "the text block will align with the margin of the rest of the page." R12d's margin-inline: 0 and max-inline-size: none are withdrawn one revision after they were added: .plate__inner is an ordinary centred container again, §4's one-container- width rule holds, and §7's left edge lines up with every other section's first column. ⚠ THE MEASURE HAD TO MOVE TO A CHILD. A max-inline-size on the container ITSELF shrinks the box, and margin-inline: auto then re-centres the SHRUNKEN box — pushing the type back off the page margin, which is the exact thing this is undoing. The container carries the alignment, .plate__copy carries the width, and they cannot be one element. */ /* -------------------------------------------------------------------------- THE SECTION BACKGROUND — R18l §6b's construction exactly: an rather than a background-image, because a real element takes width/height attributes (no layout shift), lazy loading, and a measurable crop. ⚠⚠ object-position IS A CONTRAST CONTROL HERE, NOT A COMPOSITION ONE. The file's only bright area is the lit doorway in its right third. Above 992 .plate__copy is capped at min(60%, measure) and sits clear of it; BELOW 992 the copy runs full width and crosses it, and white over the doorway measures 1.19:1 against the brightest pixel. Pinning the crop to the file's left edge below 992 keeps the lit third out of frame, which takes the same worst case to 16.2:1. The numbers for every breakpoint are in index.html. ⚠ THE THREE LAYERS, so the next change to this section does not disturb them: background --layer-base (0) · copy --layer-raised (1) · the wipe panel one above that. Each is doing something the other two cannot. -------------------------------------------------------------------------- */ .plate__bg { position: absolute; inset: 0; z-index: var(--layer-base); inline-size: 100%; block-size: 100%; object-fit: cover; object-position: left center; } @media (min-width: 992px) { /* The doorway comes back into frame here, on the right — where .plate__copy is not, and where R12b's network graphic used to sit. */ .plate__bg { object-position: center; } } .plate__inner { position: relative; z-index: var(--layer-raised); inline-size: 100%; } @media (min-width: 992px) { /* WHY 60% AND NOT 50%. A centred container's midpoint IS the viewport's midpoint, so a 50% cap ends the type at mid-screen less a gutter — 576px of measure at a 1280 container, which sets this headline in five lines. 60% reaches 64px PAST the midpoint, which is why the network gives up ground to meet it (--plate-network-inline below). --measure-prose is the second ceiling: past 720px a display line stops getting more readable and only gets longer. */ .plate__copy { max-inline-size: min(60%, var(--measure-prose)); } } /* -------------------------------------------------------------------------- THE FIELD — REMOVED AT R16h, by direction. Ten placeholder circles at the #CCCCCC step, absolutely positioned by nth-child across the right half of the plate. Gone with them: .plate__network (and its >=992 override, which owned 42% of the VIEWPORT rather than of a box), .plate__node, and ten position rules. THE SECTION LOST ITS SECOND HALF IN TWO STEPS, and the record is worth keeping. R12g removed the connecting curves and noted that they "were the thing that made a scattering of circles read as connected — as a room of people who know each other, which is the section's subject". R16h removed what was left. §7 is now left-aligned type on a full-bleed violet ground. ⚠ R12e's PAIRING NO LONGER HOLDS. It read: "the two numbers are a pair — widen the copy and this has to shrink again, or the circles come back over the type." .plate__copy's measure can now grow freely; there is nothing on the right for it to collide with. ⚠ pointer-events: none WENT WITH IT. The network was absolutely positioned over the CTA at >=992 and that declaration was what kept the button clickable. Nothing overlays the button now — but anything added back to this half must carry it again. -------------------------------------------------------------------------- */ .plate__title { font-family: var(--font-family-heading); /* R9x — DISPLAY -> H1, matching the reference's proportion. At 76px this headline wraps to three lines and fills the plate; at 52 it sets in two. ⚠ IT IS NOT AN

. --font-size-h1 is a SIZE token; the element is still the section's

and the page still has exactly one

, in the Hero (§18: a display style class is not a heading level). */ font-size: var(--font-size-h1); font-weight: var(--font-weight-heading); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-display); text-wrap: balance; } /* -------------------------------------------------------------------------- THE DATE AND PLACE — R18t, to a supplied reference; sizes and colours corrected at R18u. Icon, label, value, and for the date a second line under it. Two of them, parallel. ⚠⚠ R18t's CONTRAST TABLE WAS WRONG AND IS REPLACED. It was sampled over a BAND — the full width of the copy measure by the full height of the block — which sweeps the gap BETWEEN the two columns and the empty space below the last line, and those are where the light spilling across the floor actually falls. No text or rule of this block ever sits there. design-rules §17 is explicit that contrast is sampled PER TEXT BOX against the real file, and R18t did not do that. Measured per box, worst case across 1280 / 1440 / 1920 and both columns: white #FFFFFF 19.4:1 ✓ (band said 8.63) sand #F2D98A 13.9:1 ✓ (band said 6.19) body #B4B4B4 9.35:1 ✓ (band said 4.16 ✗) muted #8A8A8A 5.61:1 ✓ (band said 2.50 ✗) violet #865BFF 4.59:1 ✓ (band said 2.04 ✗) EVERY ONE OF THEM PASSES. R18t withdrew grey from the detail line and the violet from the divider on the strength of that table; both were available the whole time. The detail line is grey again at R18u, by direction. ⚠ THE LESSON IS THE SAMPLING, NOT THE NUMBERS. A band is not a text box. It is the second time this has bitten §7 — and the first time, R18s, the error ran the other way and produced a violet edge that looked fine and measured badly. Sample the box the glyphs occupy. -------------------------------------------------------------------------- */ .plate__logistics { display: grid; gap: var(--space-lg); margin-block-start: var(--gap-heading-to-content); padding-inline: 0; list-style: none; } /* ⚠ THE ICONS ARE GONE — R18w, by direction: "remove the icons." The clock and the map pin went with them, and with the wrapper
they sat beside: with one child left there was nothing for a flex row to lay out, so this is a plain block again and the three

elements are direct children of the

  • . ✅ IT RETIRES THE PAGE'S SIXTH ICON LANGUAGE. design-rules §13 fixes the set as filled PIXEL glyphs on a 15-unit grid — stepped, axis-aligned, no curves — and listed "§7's clock and map pin" among the curved exceptions. They were this section's only icons and appear nowhere else, so that exception is now closed rather than merely tolerated. Update §13 if the list is read again. THE 2px VIOLET LEADING EDGE — R18v, by direction: "let both of the pointers have vertical purple line as in the name cards elsewhere." That is §6's video name plate, members.css since R17f: --border-emphasis solid on the inline-start edge with the content inset from it by --space-sm, the padding that plate uses too. It carries more weight now that it is the only mark on each fact. ⚠ SAME DEVICE, DIFFERENT VIOLET, AND THE GROUND IS WHY. §6's plate sits on --color-surface-panel and takes --color-accent-identity-deep. Measured per box at both edge positions across 1280 / 1440 / 1920, over this photograph: --color-accent-identity #865BFF 4.56-4.67:1 ✓ --color-accent-identity-deep #6146ED 3.32-3.40:1 ✓ but bare Both clear the 3:1 a non-text element needs. The deep violet clears it by about a third of a point, on an asset that has been re-exported three times in this project — and §18 is explicit that an asset swap voids a measurement. The identity violet has a point and a half of headroom and is the one this page already uses for a MARK on a dark ground; play.css draws the same distinction for its glyph. The deep violet is a fill colour. min-inline-size: 0 — as a grid item its automatic minimum is min-content, and the venue must be free to wrap rather than push its track wider than the copy measure. */ .plate__fact { min-inline-size: 0; padding-inline-start: var(--space-sm); border-inline-start: var(--border-emphasis) solid var(--color-accent-identity); } /* .t-eyebrow's values, not the class: same size, weight, case. The tracking is the WIDE step, +0.08em, because these are one and two words rather than a phrase — at 0.06em "VENUE" reads as a word, at 0.08em it reads as a label. SAND, where the reference has grey. R18t chose this because grey appeared to fail; it does not, so the choice now rests on its own merit — sand is .t-eyebrow's own colour, which makes a label on this page sand by default. --color-text-body measures 9.35:1 here and is available if the reference's greyscale is preferred. */ /* ⚠ R19m — THE LABEL SITS IN A BOX NOW, by direction: "the golden texts here will have a small background box like the one for 'X' in the form popup." .modal__close is --color-surface-hover, radius 0, and this takes both. ✅ IT ALSO RETIRES A RUNNING COST, which is the part worth keeping. Until now this label was sand type measured against a PHOTOGRAPH — 13.9:1 per box, but a number tied to this file and this crop, void the moment the asset is re-exported. §18: "a scrim tuned to one photograph is tuned to one photograph… an opaque plate fixes contrast permanently and costs only the area the words occupy." The box is that plate at label scale: sand on #1A1A1A is 12.49:1 and needs no re-measuring ever again. display: inline-block so the box hugs the words. As a block

    it would stretch the full column and read as a filled bar rather than a chip. */ .plate__fact-label { display: inline-block; padding: var(--space-2xs) var(--space-xs); background-color: var(--color-surface-hover); border-radius: var(--radius-control); font-size: var(--font-size-meta); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-caps-wide); text-transform: uppercase; color: var(--color-accent-emphasis); } /* R18u — --font-size-lead (22) -> --font-size-body (18), by direction, to match the line under it. The two lines of a fact are now separated by COLOUR alone, which is what the reference does and what R18t could not do while it believed grey was unavailable. */ .plate__fact-value { margin-block-start: var(--space-2xs); font-size: var(--font-size-body); font-weight: var(--font-weight-regular); line-height: var(--line-height-lead); letter-spacing: var(--letter-spacing-lead); color: var(--color-text-heading); } /* R18u — GREY, by direction, and it measures 9.35:1 per box. R18t set this white and quieted it by size instead, on the wrong table above. */ .plate__fact-detail { font-size: var(--font-size-body); font-weight: var(--font-weight-regular); line-height: var(--line-height-lead); color: var(--color-text-body); } /* R12l's RULE, KEPT FOR ITS ORIGINAL REASON. .t-numeral sets 700 and its own tracking, and §12a reserves that emphasis for numerals that COMPARE QUANTITIES — a clock time and a date are neither. ⚠ ONLY WEIGHT, TRACKING AND COLOUR ARE UNDONE — colour by `inherit`, which matters more now that the two lines are different colours: the figures in the date take white and the figures in the time take grey, each from its own line. The class also supplies TABULAR LINING FIGURES, the half that must survive: dropping it from the markup instead would take those too, and "09:00" and "12:30" would stop lining up with each other. */ .plate__logistics .t-numeral { color: inherit; font-weight: inherit; letter-spacing: inherit; } /* PARALLEL — the part that was directed rather than styled. minmax(0, 1fr), and no justify-items. An `auto` track sizes to the longer fact and leaves the second column short; `justify-items: start` — which two earlier versions of this rule carried — shrinks each item to its content, so under grid-auto-flow: column the venue would try to set on ONE line and run out of the copy measure. ⚠ THE SEPARATOR HAIRLINE IS GONE — R18v, by direction, and the violet edges above replace it. One device now does both jobs: the second fact's own edge IS the line between the two, and because BOTH facts carry it they read as two of a set rather than as one thing and then another. A hairline as well would be a second rule doing the first one's work. ⚠ auto TRACKS, NOT minmax(0, 1fr) — R18v, by direction: "reduce the spacing between the 2 pointers." 1fr tracks split the copy measure in half whatever the facts are, which left roughly 250px of empty ground after "28 October 2026" before the venue began. `auto` sizes each track to its own content, so the two sit as close as the gap allows — and `auto` still SHRINKS toward min-content where the measure is tight, so the venue wraps at 992 instead of overflowing. justify-content: start keeps the pair packed to the left edge rather than spread across the measure. 768, NOT 992. Below 992 .plate__copy runs FULL width, so there is more room for two columns there than above it — gating at 992 would stack them at exactly the widths that have the most space. */ @media (min-width: 768px) { .plate__logistics { grid-auto-flow: column; grid-auto-columns: auto; justify-content: start; gap: var(--space-2xl); } } .plate__body { margin-block-start: var(--space-sm); /* R9x — the reference quiets this line with COLOUR; that route is closed here. On the violet: white 5.82:1 PASS · --color-text-body 2.81:1 FAIL · --color-text-muted 1.69:1 FAIL. Nothing dimmer than white survives, so size is the only instrument left for the quiet the reference gets from grey. */ max-inline-size: var(--measure-prose); font-size: var(--font-size-body); font-weight: var(--font-weight-light); line-height: var(--line-height-body); } /* R12m — THE FORCED BREAK, desktop only. ⚠ A
    IS A TYPESETTING DECISION HARD-CODED INTO CONTENT, which is why it is gated rather than left standing. At ≥992 the measure is fixed — min(60%, --measure-prose) — so the break lands where it is meant to. Below 992 .plate__copy runs full width, the natural wrap is completely different, and forcing this one would leave a short first line above a long second. `display: none` on a
    removes the break; the space after it in the markup keeps the two halves from butting together when it does. */ .plate__break { display: none; } @media (min-width: 992px) { .plate__break { display: inline; } } /* R18x — 32 -> 48, by direction: "increase the space between the CTA button and the pointers. now they are too close." ⚠ IT DROPS --gap-paragraph-to-cta, AND THAT IS NOT A BREACH OF §4's SPACING RULE. The rule reads "paragraph -> CTA 32", and the element above this button has not been a paragraph since R18k reordered the section: it is the date-and-place block, a two-column data row with its own violet edges. 32 is the interval between a sentence and the button that answers it; this is the interval between two different registers. --space-2xl is on §4's scale and needs no new value. It also matches what the logistics block takes ABOVE it at >=992 (--gap-heading-to-content resolves to 48 there), so the block now sits in equal air. */ .plate__cta { margin-block-start: var(--space-2xl); } /* R12h's WHITE FOCUS RING OVERRIDE IS GONE — R18k. It existed because .btn--ink put the ring in #0F0F0F, which on the violet was the same colour as the button itself and read as a fatter black shape rather than a ring. The button is the purple primary now and carries button.css's own ring, so the override has no consumer. Removed rather than left orphaned. */ /* The eyebrow inverts with everything else. */ /* R12b — flex-start, with everything else. */ /* R19p — --space-lg (32) -> --gap-title-group. Same interval as every other eyebrow on the page, now named rather than coincidental. */ .plate__eyebrow { display: flex; margin-block-end: var(--gap-title-group); } /* R12i's WHITE-FILLED EYEBROW IS GONE — R18k. It was built for the violet: a white stepped fill with a #0F0F0F label, the frame deleted outright. On black a solid white block is the brightest element in the section and outranks the heading, which is the wrong order for an eyebrow. §7 takes --emphasis --filled, the variant the other five on the page use. ⚠ --color-surface-invert LOSES ITS ONLY CONSUMER AGAIN. CLAUDE.md §3 has carried that token as unused once before ("no consumer since R8y"); R12i gave it one and this takes it away. Retire the token or find it a use — do not leave it listed as spent. ⚠ §10a's ORIGINAL OBJECTION IS BACK IN FORCE TOO: "a two-layer fill would need to know the ground behind it." R12i showed the objection did not bite on a flat plate. There is no flat plate now. */