/* ========================================================================== R9h — REBUILT TO THE PAGE'S OWN STYLE, by direction: "refer the page style from hero to the section above the plate, redo everything after it." THE SOURCE IS THE BUILT PAGE (§2–§6), NOT THE DOCUMENTS. What §2–§6 actually do, read off the stylesheets rather than the plan: ground #000000, always container --color-surface-panel #171717, SQUARE, no border accent violet #6146ED — filled banners, filled circles, 2px rules gold #BE9D4A for the negative side only headings Loos 500, white, section titles CENTRED body Mundial, weight 300, --color-text-body rules 1px --color-border-strong radius 0 everywhere; 50% only where a circle has no corners gradients NONE. §2–§6 carry no blend shape and no flat fill. Every change below follows from that list. ========================================================================== */ /* ========================================================================== 10 — SPEAKERS Sticky heading column + scroll-stacking entries · medium · violet · ONE blend shape (G4) · SIGNATURE: the sticky stack. NO TIMES. NO RUNNING ORDER. NO NUMBERING. The content document carries an explicit instruction — "IMPORTANT: NO TIMELINES" — and it is honoured by omission: nothing here is ordinal, nothing is sequenced, and the entries carry no index. A "01 / 02 / 03" set would reintroduce a running order through the back door. THE STACK. Six cards, all pinning on the SAME line at 120px, with z-index rising so each covers the previous COMPLETELY (R9z, by direction). It used to stagger by 20px per card and leave the previous top edge showing — that sliver was the stagger, so full coverage and a stagger cannot coexist. R9y had already fixed a worse fault: the offsets cycled every four, which sent card five back under card four. This is the page's only scroll-linked effect and it is gated to ≥992px. Below that it is a static list with standard reveals — the interaction needs a tall viewport and a pointer to be worth anything. ========================================================================== */ /* R19b — .speakers__inner IS GONE, class and rules. It carried the 4fr / 8fr split and the sticky column; the head is centred on top now and the grid runs the full container, so the section's wrapper is a plain .container with nothing to add. The class came off the markup rather than being left with an empty rule. --sticky-offset-title and --measure-sticky-column lose their only consumer here. Neither is deleted — both are general tokens — but they are no longer spent, and CLAUDE.md's unused list says so. */ /* THE HEAD — .section__title--center supplies the centring and the 32px title-group gap; this nests one level in so the heading binds to its subtext at 16 instead. §5 and §6 are built the same way, for the same reason: one flex column gives one interval, and this group needs two. */ .speakers__head { display: grid; gap: var(--gap-heading-to-paragraph); } /* R19c — MATCHED TO §6's SUBTEXT EXACTLY, by direction. .members__sub is one declaration and so is this: `margin-inline: auto`, nothing else. Everything visible comes from .t-lead — 22px, weight 400, --line-height-lead, --letter-spacing-lead, --color-text-body, and a --measure-prose-wide cap. ⚠ THE max-inline-size CAME OFF, AND THAT IS THE CHANGE. R19b set --measure-prose here, which OVERRODE .t-lead's own --measure-prose-wide and made this line narrower than §6's while looking identical in every other respect. Matching a section means not re-deciding the things it left to the utility. */ .speakers__sub { margin-inline: auto; } /* The break is gated — see index.html. */ .speakers__break { display: none; } @media (min-width: 768px) { .speakers__break { display: inline; } } /* ⚠ R19p — THE margin-block-end IS GONE, AND IT WAS A DOUBLE GAP. This eyebrow is a child of .section__title, which is a flex column with gap: --gap-title-group. Flex gaps and margins do not collapse, so the margin ADDED to the gap and §10's eyebrow sat at 64 where every other section's sat at 32 — the difference visible in the supplied screenshot. It was correct at R19a, when the eyebrow was outside .section__title in a sticky aside; R19b moved it in and left the margin behind. The wrapper needs display: flex and nothing else, exactly as .principles__eyebrow, .members__eyebrow and .venue__eyebrow have it. */ .speakers__eyebrow { display: flex; } /* -------------------------------------------------------------------------- THE GRID — R19a auto-fit RATHER THAN A COLUMN COUNT PER BREAKPOINT, and that is deliberate: this list sits in a column that is full width below 992 and 8fr above it, so a viewport-keyed count would be wrong on one side of that line or the other. A 220px floor gives 1 column on a phone, 2 across a tablet, and 3 in the 8fr column at 1280 — roughly the card proportion the reference draws, which fits 4 only because its canvas is far wider and its cards carry two fewer lines of copy. auto-FIT, not auto-fill: with six cards a wide viewport would otherwise keep empty tracks and leave the row visibly short of its own edge. -------------------------------------------------------------------------- */ .speakers__grid { display: grid; grid-template-columns: minmax(0, 1fr); /* R19d — THE TWO AXES SPLIT, by direction: "slightly increase the space between the 2 rows of speakers." Columns keep --gap-grid — it is the page's gutter and every other grid on the page uses it, so changing it here would put §10 out of step horizontally with §5, §6 and §9. Rows take --space-lg (32), one step up the scale from the gutter's 24. A row gap and a column gap are doing different work: the gutter separates cards that are read side by side, the row gap separates one ROW of four from the next, and at an equal value the eight cards read as one field rather than as 4 x 2. Both values are on §4's scale; nothing new. */ column-gap: var(--gap-grid); row-gap: var(--space-lg); list-style: none; margin: 0; /* ⚠⚠ THIS LONGHAND MUST FOLLOW THE `margin: 0` SHORTHAND, AND WITHOUT IT THERE WAS NO GAP AT ALL — which is what "give enough space before the cards show" was reporting. layout.css sets `.section__title + *` to --gap-heading-to-content, and this list IS that adjacent sibling. But `margin: 0` above resets all four sides, speakers.css loads after layout.css, and both selectors are (0,1,0) — so the shorthand won on source order and the interval silently vanished. Nothing errors; the cards simply sit against the subtext. ⚠ IT IS THE SAME FAULT members.css CARRIES A NOTE ABOUT, in the same shape, on .members__videos — where it was masked for months by a style="" attribute until R17i removed it. COUNTED, NOT ESTIMATED: the page has four .section__title groups, and THREE of their adjacent siblings declare `margin: 0` and need this longhand after it — .principles__grid, .members__videos and this. The fourth (.wall__rails) declares no margin shorthand and is unaffected. ⚠ .partners__rail was the fifth until R24u deleted that section. Any future list placed after a section head must be checked the same way; the failure is silent in both directions. The value is --gap-heading-to-content, 32 mobile / 48 desktop: the interval §6 uses between its own head and its first row, which is what "refer the testimonial section" resolves to. */ margin-block-start: var(--gap-heading-to-content); padding: 0; } /* ⚠ EXPLICIT COUNTS, NOT auto-fit — R19b. R19a used repeat(auto-fit, minmax(220px, 1fr)) because the list sat in a column that was full width below 992 and 8fr above it, so no single viewport-keyed count was right on both sides of that line. The grid runs the full container now, so the ambiguity is gone and the direction is explicit: 4 x 2. auto-fit would ALSO NO LONGER GIVE 4. At 1184px of container it computes floor((1184 + 24) / (220 + 24)) = 4 today, but it is derived from a floor rather than stated, so the layout would silently become 5 across on a wider container and 3 on a narrower one. A 4 x 2 grid that is sometimes 5 x 2 is not the thing that was asked for. 480 IS THE PROJECT'S SMALL BREAKPOINT (§4: <=479 small). Two 208px cards fit there; one 342px card is right below it. */ @media (min-width: 480px) { .speakers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ⚠⚠ R23l — 4 COLUMNS -> 3. The section carries SIX cards since Martin Coyne and Lucy Harmer were removed by direction, and six in four columns is 4 + 2: a ragged final row with two empty cells, which reads as cards missing rather than as a deliberate count. Three columns is a clean 3 x 2. ⚠ The row gap above was tuned so "one ROW of four" reads as separate from the next. It is now a row of three and the reasoning is unchanged — the gap is doing the same job at the same value, and both axes are still on §4's scale. ⚠ 480-991 IS UNTOUCHED and needs no change: 2 columns of six is also 3 x 2. (The two-column rule sits at 480, not 768 — 768 in this file is a different query.) Below 480 it is one column and six rows. Only the desktop track count was ever wrong for this count. */ @media (min-width: 992px) { .speakers__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* THE CARD. §16 caps card-based sections at three and the page is already at four — this section was one of them before R19a and still is, so the count is unchanged. What changed is the REASON. R9z's note said the card chrome here "is not decoration: a stacking panel MUST be opaque or the entry beneath shows through". There is no stack now, so opacity is no longer load-bearing and the panel is doing ordinary card work. ⚠ THE HAIRLINE IS NEW, by direction — the reference outlines every card. R9h had explicitly matched §4 and §6, which "use the panel grey as the container and never outline it", so this is a reversal rather than an oversight. --color-border-strong at 0.20 is the page's border value; --color-border-default at 0.10 measures 1.03:1 against this panel and would not be there at all. align-content: start — the cards are content-sized and no longer need to match each other's height, which is what the stack required. */ .speakers__card { display: grid; gap: var(--space-md); align-content: start; padding: var(--gap-card-padding); background-color: var(--color-surface-panel); border: var(--border-hairline) solid var(--color-border-strong); border-radius: var(--radius-control); } /* -------------------------------------------------------------------------- R19l — THE SEPARATORS LINE UP ACROSS A ROW, by direction: "the seperator lines regardless the text line above it will all be aligned across the cards." THE CAUSE, because the obvious fixes do not address it: Dylan Freer's title runs to three lines where the other seven run to two, so his identity block is one line taller and every block below it starts lower. Nothing is misaligned inside the card — the cards simply have different content heights. ⚠ A min-block-size ON .speakers__identity WOULD BE A GUESS. It would have to be tall enough for the longest title anyone might send, it would leave a hole under every shorter one, and it would break silently the first time a real title ran to four lines. The alignment has to be derived from the content, not asserted against it. SO THE CARD BECOMES A SUBGRID. Its three blocks — portrait, identity, talk — stop being rows of their own grid and become rows of .speakers__grid's. Row tracks are shared across the whole row of cards, so each track is as tall as the tallest card's version of it, and the rule above the talk group lands on the same line in all four. It stays true when real titles of different lengths arrive, which is the part a fixed height cannot promise. grid-row: span 3 — three children, three tracks. ADDING A FOURTH BLOCK TO THE CARD MEANS CHANGING THIS NUMBER; a subgrid that spans fewer tracks than it has children puts the overflow into implicit rows that align with nothing. ⚠ row-gap IS RE-DECLARED ON THE SUBGRID DELIBERATELY. A subgrid inherits its parent's gutters by default, so the card's internal spacing would jump from --space-md (24) to the grid's --space-lg (32) row gap, and the deliberate difference between "space inside a card" and "space between rows of cards" would collapse. A subgrid may set its own gutters; this does. @supports, because the fallback is graceful rather than broken: without subgrid the cards keep their own grids and the separators sit where the content puts them — which is exactly what they did before this rule. */ @supports (grid-template-rows: subgrid) { .speakers__card { /* ⚠ 4, NOT 3 — R19n added the "View profile" control as a fourth child. The R19l note warned this number tracks the child count: a subgrid that spans fewer tracks than it has children puts the overflow into implicit rows that align with nothing, so the eight controls would have drifted out of line the moment one card's copy grew. Changed with the markup, not after it. */ grid-row: span 4; grid-template-rows: subgrid; align-content: normal; row-gap: var(--space-md); } } /* -------------------------------------------------------------------------- THE "VIEW PROFILE" CONTROL — R19n, by direction, to the supplied card. ⚠⚠ ONE