`), so `#everything .bto-ticker` has never matched anything. PASS 6 left it in place as "harmless". It was not harmless — it is the third time on this page that an inert rule has been read as the live one, and it cost this pass a diagnosis. An inert rule that LOOKS like it does the job is the most expensive object in this codebase. Deleted. The live ticker geometry is now § 6 at the bottom of this file, keyed on the selector that actually matches, at a specificity that actually wins. Read that. Nothing up here touches the ticker any more. */ /* --- SURFACE STRUCTURE — a note for whoever lands the background tokens ----- Ash: "the background is going bongoose … fix the colors of the background." He is picking new solid values, so NO colour is chosen here. The structural recommendation (how many surfaces, where the boundaries fall, which panels share) is written up in _notes/15_design-pass.md § PASS 2 › Background structure. Short version, so it is not lost if the note is not read: · THREE surfaces on the whole page, not five. A = page canvas (THE WORK, FAQ, footer) B = light panel (panel 2 AND its ticker — the page's only B) C = dark panel (hero stage AND the Engine Room — currently two different darks for no reason) · A must stay LIGHTER than B. The rail cards are A-coloured sitting on B; that value step is the only thing separating them now that pass 1 correctly removed their drop shadows. · The footer shares A with the FAQ and is separated by a hairline, not by a fourth value. · In dark theme the whole set inverts together. Preserve the RELATIONSHIPS (B one step off A; cards = A on B), not the hexes. Two hooks already exist for this and are inert until something sets them: --bto-rail-surface (mokko-bridge § L2) — fill for panel 2's rail aperture --bto-panel-ink / --bto-panel-ink-mute — panel 2's copy colours, so they can follow the panel surface instead of the two hardcoded hexes they replaced. UPDATE, PASS 5 (2026-07-27). The ink half is now WIRED, not just hooked: --bto-panel-ink / -mute defer to the palette's --fg-heading / --fg-lead, and .bto-banner's own surface defers to --bto-surface-b -> --bg-panel2. Panel 2 therefore follows the MP071 swap by itself; no literal in either of my files can strand it. --bto-rail-surface is still deliberately transparent (there is no aperture any more — PASS 6 below runs the rail across the whole panel — so it has nothing to fill; it is kept as a hook, not a pending job). The one thing still OUTSIDE my files: `--bg-stage: var(--bg-panel-dark)` in palette.css §0, so the hero stage and the Engine Room become ONE dark. Stated in full, with the contract it has to satisfy, in mokko-bridge.css § Q2. -------------------------------------------------------------------------- */ /* --- services hero: kill Mokko's demo still ------------------------------- Mokko sets `background-image: url(../images/bg/girl.jpg) !important` on `.ms-main .ms-page-content .ms-hero.services .jarallax-img` (style.css:10354). services-mokko.css already re-points it at our own still with the identical selector, but the file was still being fetched twice and 404ing — jarallax re-reads the declared background when it initialises. That image is Mokko demo photography of a person; we would not ship it even if it resolved. Raised specificity so nothing can re-introduce it. */ html body .ms-main .ms-page-content .ms-hero.services .jarallax-img, html body .ms-main .ms-page-content .ms-hero.services .jarallax-img[style] { background-image: url(../os/img/hero.jpg) !important; } /* ============================================================================ PANEL 2 — PASS 6 (Creative Director, 2026-07-27) ONE FIELD, NOT TWO STACKED BANDS. Ash: *"still panel 2 is not how I want it to be... there is a big gap from where the strip is coming."* THE BUG, MEASURED. Passes 1–5 ended with the copy and the rail as consecutive FLOW items in a flex column (old §§1/4/6): `.bto-banner-fg` (order 1) then `.bto-rail-area` (order 2). At 1512 that put the top of the rail area 306px below the top of a 696px panel. Two stacked bands with a dead 306px strip between them. That strip is the gap he is pointing at, and no amount of padding tuning removes it — stacking IS the gap. THE FIX, per _notes/PANEL2-REFERENCE-2026-07-27.md (which supersedes every earlier panel-2 note): the card strip spans the WHOLE panel on its diagonal, and the copy and the CTAs are overlaid into the two wedges the diagonal leaves empty. The -8deg tilt is what CREATES both wedges, so the layers are separated by geometry — nothing is drawn behind the text. Passes 1–3 tried a plate, a gradient and an aperture; all three were rejected, and none of them is needed once the wedges are sized properly. ┌──────────────────────────────────────────────────────┐ │ EYEBROW ╱▤╲ │ │ HEADLINE ╱▤╲ ╱▤╲ │ copy in the │ lead ╱▤╲ ╱▤╲ │ TOP-LEFT wedge │ ╱▤╲ │ │ ╱▤╲ ╱▤╲ ( CTA )( CTA ) │ CTAs in the └──────────────────────────────────────────────────────┘ BOTTOM-RIGHT one WHY THE ABSOLUTE RAIL IS SAFE THIS TIME. Old §5 reverted `inset: 0` because it measured "5 cards intersecting the ticker". That reading was wrong twice over: (a) `.bto-ticker` is a SIBLING of `.bto-banner`, not a child, so the panel's own `overflow: hidden` already stops anything reaching it; and (b) `getBoundingClientRect()` on a rotated + clipped element returns the full untruncated rect, which is exactly the phantom-overlap trap. The rail returns to `inset: 0` and the panel clips it. ── THE GEOMETRY, so the next pass can re-derive instead of re-tuning ──────── The rail is rotated -8deg about its own centre. Put the band's centre line at height Yc in the panel, let W be the panel width and Hc the card height. A point of the band's TOP edge at panel-x X sits at Ytop(X) = Yc + (W/2 - X) * tan8 - (Hc/2) / cos8 Ybot(X) = Yc + (W/2 - X) * tan8 + (Hc/2) / cos8 (tan8 = .140541, 1/cos8 = 1.009828). The band climbs left->right, so the copy — pinned top-LEFT — is safe while its BOTTOM edge stays above Ytop at the copy's RIGHT edge, and the CTAs — pinned bottom-RIGHT — are safe while their TOP edge stays below Ybot at the CTAs' LEFT edge. Both are continuous in X, so they hold at EVERY phase of the 65s marquee, not just at rest: the band is modelled as a solid strip, which is the conservative case (the 10px inter-card gaps only ever help). Four levers, and they fight each other. Sensitivities, so the next pass tunes the RIGHT one instead of the biggest one: · panel height H — +1px H buys the copy only +0.13px and the CTA +0.24px. *** PASS 9: TRUE ONLY IF YOU MOVE H ALONE. This line called H "the WEAKEST lever" for three passes and that framing is what kept the pill out. The 0.13 is an artefact of the copy being anchored as a FRACTION of H (bottom: %, § 4e), so it slides down with the panel and hands the gain back. Raise --p2-copy-bottom in step and the same px returns 0.74 to the copy wedge — 4.8x. The CTA's 0.24-0.26 is real either way, since it is pinned to the panel bottom. So: H alone is weak; H + copy re-anchor is the STRONGEST lever in the system. *** · band centre Yc — ±1px trades 1:1 between the two wedges. THE balance knob, and the only one that moves both. · copy right edge — every px the copy narrows buys 0.1405px of copy wedge. · card height Hc — every px of Hc costs BOTH wedges 0.505px (half-height ÷ cos8). This is why a taller card is expensive and a WIDER one is cheap: width costs nothing at all, and width is what buys text measure. PASS 7 re-solved the whole system because the card got taller (see below). Solved at 993 / 1200 / 1366 / 1512 / 1700 with H = clamp(480px, 32vw, 500px) Yc = 74% of H (was 76 — the taller card needs the band lower) copy bottom = 41.5% of H (was 37) headline measure = 9.6em (was 10.2) Smallest COMPUTED clearance is ~16px on both sides at 993 (the previous pass ran ~14 CTA / ~19 copy, so this is not a regression — it is slightly better balanced). All five numbers are computed on paper, NOT measured in a browser; qa-panel2.mjs now measures the real clearance by ray-casting and prints measured-vs-computed, so the next pass tunes on truth. Change any custom property below and you must re-run the arithmetic at all five widths. ── WHAT I COULD NOT HIT, AND WHY ─────────────────────────────────────────── The reference's 4.0 panel aspect (~378px at 1512) is NOT reachable with this copy at this type scale. The copy block — eyebrow + a two-line 68px headline + a three-line 18px lead — is ~254px tall, and a 4.0-aspect panel offers only ~190px of clear wedge at the copy's right edge. The two cannot both be true. Closing it would mean dropping the headline to ~38px, which would break the four-head convergence PASS 5 established and which Ash has already signed off. I chose the type system over the aspect number. PASS 6 landed 3.33; PASS 7 spends 30px of that on the description Ash asked for and lands 3.13 — still a 30% cut from the 696px this started at, with the gap at zero, which is the actual complaint. If he wants 4.0, the lever is the headline, and it moves all four heads. ── THE HEADLINE (reference constraint 3) ─────────────────────────────────── `.bto-banner-title` KEEPS clamp(40px, 4.6vw, 68px) — no font-size is declared anywhere below, so PASS 5's convergence with THE WORK, the ENGINE ROOM and the FAQ is untouched BY CONSTRUCTION, not by agreement. Panel 2 is not re-exempted. PASS 7 changes the MEASURE, not the size. `max-width` is expressed in the headline's OWN em, so the wrap is invariant to the clamp: two lines at 40px, at 55px and at 68px alike, and the copy's right edge tracks the type instead of drifting against it. 10.2em -> 9.6em. Against a computed need of ~8.6-8.9em for "EVERYTHING YOUR" that cuts the headroom from ~14% to ~8%, and buys ~9px of copy clearance — which the taller card needed. The trade is deliberate: a clearance failure is a RULE violation (text on a card), a measure failure is a third line that, because the copy is bottom-anchored, grows UP and clips visibly at the panel edge. One is silent and forbidden; the other is loud and merely ugly. Pick the loud one. qa-panel2.mjs now prints the rendered line-1 width so the 8% is verified rather than trusted. ── PASS 7 · THE DESCRIPTION IS BACK, AND WHAT IT COST ────────────────────── Ash: *"lets make the cards bigger so that we can add sub text and the text strip connect it with panel two as well"* — he has taken the other side of the trade PASS 6 flagged, and pre-approved ~30px of panel growth for it. The arithmetic that makes it work: WIDTH IS FREE AND HEIGHT IS EXPENSIVE. A wider card costs the wedges nothing (the band's thickness is set by card HEIGHT alone) but it buys text measure, and measure is what turns 5 lines of description into 4. So the card goes to the reference's own 0.193 of panel width — the size Ash's reference already uses — and the height follows from the anatomy rather than from the reference's 0.40 ratio. Landed: card 0.193w, h/w 0.445 (reference 0.40). The 11% deviation on the card's own aspect IS the description. Alternatives rejected: · keep 15.5vw and grow height only -> h/w 0.60, a near-square poster, and it costs 20px MORE wedge than this does. Strictly worse on both axes. · go to 0.22w -> h/w drops to 0.37, better than reference, but the pitch puts only ~4.4 cards across 1512. Ash asked not to collapse the count. The pill leaves the flow to pay for it — see § 4h. ── PASS 8 · "a bit bigger" — WIDTH IS SPENT, HEIGHT IS RATIONED ──────────── Ash: *"can we make the cards in panel 2 bit bigger"*. A nudge, not a rebuild. PASS 7's own note above rejected 0.22w for the card count. That rejection was made against an UNMEASURED pitch guess ("~4.4 cards"); PASS 7's measured run has since calibrated the model exactly, so it is re-derived here rather than inherited. THE PITCH MODEL, now calibrated. The rail is laid out horizontally and then rotated, so a pitch P along the rail projects to P*cos8 horizontally: cards across the panel = panelW / ((cardW + 10) * 0.99027) At 1512 with PASS 7's card that is 1512 / 298.9 = 5.06, and PASS 7 MEASURED 5. The model is right to within the phase. A run of L/s cards shows either floor(L/s) or floor(L/s)+1 depending on the marquee phase, so the CONSTRAINT ("never below 4") binds on the FLOOR, not on the average: floor(1512 / ((cardW + 10) * 0.99027)) >= 4 -> cardW <= 371.7px -> f <= 0.246 0.22 is therefore legal with room to spare, and 0.25 is not. Landed 0.22. THE COST IS ONE CARD: 5.06 -> 4.46, so the panel reads 4 cards at most phases and 5 at some, where it used to read 5 at most and 6 at some. That is arithmetic, not taste — holding 5 at every phase caps the card at f <= 0.195, i.e. at PASS 7's size. There is no version of "bigger cards" on a fixed-width panel that keeps the fifth card. Flagged for Ash rather than hidden. WHY THE HEIGHT MOVES ONLY A LITTLE, AND ONLY AT THE WIDE END. Width is free on the wedges and height costs 0.505px on BOTH of them, so the split is deliberate: +14% width (free) and +4.7% height (3.1px a side, spent only where the budget is fat). The height clamp's FLOOR is unchanged at 121px and 9vw does not reach it until 1345px, so 1200 and 993 keep PASS 7's card EXACTLY — which means the tightest width in the composition pays NOTHING for this pass and its clearance is the number Ash has already measured as passing. That property is worth more than the last few px of slack; see the closing note on the 126px floor for the follow-up that trades it away deliberately. Panel height is UNTOUCHED. PASS 7 spent 30px of panel on the description; PASS 8 spends none. Aspect stays 3.10 at 1512. ── THE PILL: NOT RESTORED IN PASS 8, AND THE NUMBER THAT DECIDED IT ──────── *** SUPERSEDED BY PASS 9 BELOW — the pill IS restored. Kept because the REASONING is still correct and is the reason the refusal held twice. *** The brief was: if the size bump covers the ~26px the chip saved, bring the pill back, because Ash's reference carries both the description AND the pill. Under a FIXED panel it did not cover it. Priced honestly: · a pill correctly SCALED to this card is ~26px tall, not marquee-banner's 38px (38 was drawn for the original 470x214 card, where it was 18% of the height; 18% of 136 is 24.5). So 26px is the right pill, not a shrunken one. · it needs ~8px of separation from the description. · total vertical cost in flow: ~34px. · wedge cost: 34 * 0.505 = 17.2px off EACH wedge. Copy clearance at 1512 was a COMPUTED 18.2px (MEASURED 14). Restoring the pill took it NEGATIVE: text on a card, the one rule Ash has restated four times. That refusal was right ON ITS CONSTRAINT SET. The constraint set has now changed, which is the only reason it is being reversed — see PASS 9. ── PASS 9 · "lets make the panel 2 cards bigger" (THIRD ASK) ─────────────── Ash has asked three times. PASSES 7 and 8 both held panel height constant and paid for the card out of the wedge clearance; that budget is spent (copy clearance MEASURED 14px against an 8px floor = ~12px of card height left in a 483.8px panel). A fourth 12px nudge is not an answer to a third ask. The founder has therefore RELEASED panel height, with a ~600px ceiling, on the grounds that his original "panel 2 takes a lot of area" complaint was against a 696px panel that also carried a 306px DEAD GAP — and the gap is now zero. ── THE LEVER THAT CHANGES WHEN PANEL HEIGHT IS RELEASED ──────────────────── The sensitivity table below says panel height returns only 0.155px of copy clearance per px. That number is correct ONLY while the copy is anchored as a FRACTION of a growing panel — the copy slides down with the panel and gives most of the gain straight back. Anchor the copy's TOP near the panel top instead (i.e. raise --p2-copy-bottom in step with H) and the same px of panel returns 0.74 — the band centre descends with H while the copy does not. That is a 4.8x better exchange rate and it is the whole reason PASS 9 can afford what PASS 8 refused. Both are true; they are different anchorings, and the 0.155 figure is what applies if you grow H and change nothing else. ── WHAT WAS SOLVED, AND ON WHAT ──────────────────────────────────────────── The model above was CALIBRATED against PASS 8's measured run rather than re-derived on paper. Back-solving the two measured clearances gives Xc (copy right edge) 701.0 @1512 484.5 @993 Xt (CTA left edge) 1145.9 @1512 626.6 @993 which resolve to a CTA block 326.2px wide at BOTH widths (it is two fixed-size buttons — invariant, as expected) and a copy block exactly 1.013 x the headline's 9.6em max-width at BOTH widths. Two independent constants that fall out identically at two widths is the check that the model is right; it now interpolates to 1366/1200 with confidence. Reproduces both measurements to under 1px. ── THE CARD IS NOW ANATOMY-CAPPED, NOT BUDGET-CAPPED ─────────────────────── This is the finding that shapes the whole pass, so it goes first. WIDTH is capped by the 4-card floor (still f <= 0.246; see PASS 8's calibrated pitch model, which measured exact). Landed 23.7vw = f 0.237, giving a count ratio of 4.12-4.15 across 1200-1512 — deliberately flat, so the count no longer drifts with viewport width. HEIGHT is set by the CONTENT STACK (eyebrow + title + 4-line desc + pill), not by the wedge budget. At 1512 the stack needs 130.5px + one spare line -> a 184.5px card. The budget at H=536.8 would allow ~196px, and the extra 11px would be EMPTY AIR INSIDE THE CARD. So the panel is sized to what the card needs, not the reverse. Consequence, stated plainly: growing the panel past ~537 at 1512 buys nothing Ash can see. I came in 11px UNDER the 540-580 band he suggested for exactly that reason, and against his older "too much area" note that is the safer miss. If he wants the panel taller anyway it is one number (--p2-h). ── THE PILL IS BACK ──────────────────────────────────────────────────────── Re-priced against the new constraint set and it now fits outright: · pill 28px + its auto gap, ~36px of stack. Wedge cost 36 * 0.505 = 18.2px off each wedge — the same 17-18px PASS 8 could not find. · panel 483.8 -> 536.8 at 1512 with the copy re-anchored returns +0.74/px * 53 = +39px of copy clearance. It covers the pill AND the rest of the card growth, and copy clearance goes UP: measured 14 -> computed 19. Ash's reference carries the pill AND the description; he never asked for the chip — the chip was a compensating invention under a constraint that no longer binds. It goes. `font-size: 0` is removed, the label renders, and the accessible name is unchanged either way (the text node never left the DOM, so there is NO markup change and index.html stays byte-identical). ── WHAT ASH SHOULD OVERRULE IF HE DISAGREES ──────────────────────────────── 1. CARD ASPECT. h/w goes 0.409 -> 0.515 at 1512 (0.445 -> 0.570 at 993). The reference is 0.40. The deviation IS the anatomy: our card carries eyebrow + title + four description lines + pill, and its width is capped by the count floor, so the stack has to buy its room vertically. The only way to 0.40 at this height is a 430px card, which puts 3.47 cards across 1512 — i.e. it breaks the 4-floor. That trade is his to take, not mine (see 2). 2. THE 3-CARD OPTION, PRICED SO HE CAN TAKE IT. cardW 430 x 184.5 = h/w 0.43, the reference proportion, min 3 / max 4 at 1512. A visibly bigger jump than what shipped here. I am NOT taking it: he set the 4-floor deliberately, and a 65s rail carrying seven services reads better with four in frame. Flagged rather than decided. 3. THUMBNAILS GO PORTRAIT. The thumb is a 34% grid cell spanning the card height, so a taller card makes it portrait (1512: ~102x105 square -> ~111x154, 0.72). I think that is an improvement — more image, and it is what the reference does — but it is a visible change he did not ask for. ── PASS 10 · "make them BIGGER" (FOURTH ASK) — THE 4-CARD FLOOR IS RELEASED ─ Ash has now asked four times. PASSES 7, 8 and 9 all delivered increments of +14% / +8% / +31% on card AREA while holding the composition identical: four cards across the panel at every one of them. That is why none of them read as a change — the eye reads the COMPOSITION, and the composition never moved. Only the gaps did. The founder has released the constraint that caused it. THE CARD-COUNT FLOOR IS 3, NOT 4. It was his number, not Ash's — Ash has asked for bigger four times and has never once asked for more cards on screen. PASS 9 priced the 3-card alternative in note 2 above and did not take it; this pass takes it. ── WHAT THAT BUYS, AND WHY IT IS A STRUCTURAL CHANGE NOT AN INCREMENT ────── The pitch model (PASS 8, measured exact) caps the card at floor(W / ((cardW + 10) * cos8)) >= N -> f <= ~1/(N*cos8) - 10/W N=4 caps f at 0.246 — PASS 9 shipped 0.237, i.e. it was already within 4% of its own ceiling. There was no "bigger" left inside a 4-floor; that is the whole finding. N=3 caps f at ~0.330. Landed f = 0.310 (31vw), which is a count ratio of 3.19 / 3.18 / 3.17 / 3.16 at 1512 / 1366 / 1200 / 993 — 5-6% of margin above the 3.00 knife-edge, MORE margin than PASS 9 kept above its own 4.00 (it ran 4.12-4.15, i.e. 3-4%). Deliberately: dropping 4->3 costs a quarter of the count, dropping 3->2 costs a third AND two cards on a 65s rail reads as broken rather than as sparse. THE CEILING, STATED SO IT CAN BE TAKEN WITHOUT RE-DERIVING IT. f = 0.330 ratio 3.03 at 993 — knife-edge, one metric change from 2 cards. f = 0.320 ratio 3.06 at 993 — 2% margin. Legal, and I would not ship it. f = 0.310 ratio 3.16 at 993 — 5% margin. SHIPPED. If Ash wants more, 0.32 is the honest last step and it costs count safety at 993 only. Past that the answer is a 2-card floor, which is a different component. ── THE NUMBERS, AND MY OWN READ ON WHETHER THEY LAND ─────────────────────── 1512 358.3 x 184.5 -> 468.7 x 196.6 width +31% area +40% 1366 323.7 x 166.7 -> 423.5 x 178.0 width +31% area +39% 1200 284.4 x 162.0 -> 372.0 x 178.0 width +31% area +44% 993 284.0 x 162.0 -> 307.8 x 178.0 width +8% area +19% card AREA as a share of panel: 8.1% -> 10.9% at 1512 (PASS 9 moved it 2.1pp and did not read; this moves it 2.8pp). BE HONEST ABOUT THAT AREA NUMBER: 8.1 -> 10.9 is a +35% relative move, and PASS 9's 6.2 -> 8.1 was +31% and did NOT read. So area share ALONE does not predict this landing. What is different is not the ratio, it is that three things move together and one of them is structural: · the count goes 4-across to 3-across — the composition itself changes · the card is 31% wider, and width is the axis the eye reads on a rail · the in-card title goes 19.7px -> 29.5px (+50%), which is the loudest single signal that a card is bigger PASSES 7/8/9 moved only the first-order size and held all three of those. My read: this lands. If it does not, the next lever is NOT another size nudge — it is the 2-card floor or a different card anatomy, and that should be said out loud rather than discovered on a fifth ask. ── WHERE IT LANDS WEAKEST, FLAGGED RATHER THAN BURIED ────────────────────── 993 gains only 8% of width and 19% of area, because 993 was ALREADY at a 3-card floor before this pass (PASS 9's own note: its 3-floor breaks at cardW > 324) — so it has no count to spend. Its card is capped at 324 and sits at 308. Anyone reviewing in a ~1000px window will see the least change of any width. That is a real limitation of a fixed-count rail, not something this pass chose. ── THE PANEL BARELY MOVES, AND THAT IS THE POINT ─────────────────────────── 536.8 -> 559.4 at 1512 (+4.2%); 508 -> 532 below (+4.7%). The founder allowed up to ~620 at 1512 and I have taken 559. It is not needed: re-balancing the band (73.5 -> 72.5) and re-anchoring the copy (46 -> 48%) fund most of the card out of a surplus PASS 9 was already carrying on the CTA side (measured 43px against an 8px floor at 1512 — 5x the requirement). Spending panel height I do not need would LOWER the card's area share, which is the exact number Ash is reacting to. Growing the panel to make the card look bigger is self-cancelling; that is worth stating once, permanently. ── THE DESCRIPTION DROPS TO THREE LINES AT >=1200 (a consequence, not a cut) ─ No copy is shortened — that is the Editorial Director's call, not mine, and the strings in build-home.mjs are untouched. The measure grows ~36% (203.7 -> 277.5px at 1512), so the longest description (104 chars) now WRAPS to three. 993 keeps four, because its measure only grows 9%. The card height clamp covers both, so nothing is clipped at any width and no line-clamp is introduced. Run-vs-capacity margin lands 33 / 27 / 18 / 27% at 1512 / 1366 / 1200 / 993 — 1200 is the thin one, and its failure mode is GRACEFUL: it gains a fourth line and still has 3.2px of air, so it does not clip. That is the whole reason the margin is allowed to be thin there. ── THE FIFTH-LINE GUARD HOLDS EVERYWHERE ────────────────────────────────── air-above-pill minus one line = +13.0 / +7.9 / +18.1 / +7.4px at 1512 / 1366 / 1200 / 993. PASS 8 shipped this NEGATIVE at 1512; PASS 9 got it positive; PASS 10 keeps it positive at every width while the card grows 40%. ── WHAT ASH SHOULD OVERRULE IF HE DISAGREES ──────────────────────────────── 1. THE COUNT. Three cards in frame instead of four, at every desktop width. This is the trade that bought the size, and it is the one visible cost. 2. CARD ASPECT MOVES BACK TOWARD THE REFERENCE. h/w 0.515 -> 0.419 at 1512 (reference 0.40) and 0.570 -> 0.578 at 993. So the wide end is now almost exactly the reference proportion — PASS 9's note 1 predicted this would need a ~430px card and it needs 469px. The narrow end is unchanged and still tall, because it still carries four description lines. 3. IN-CARD TYPE JUMPS. Title +50% at 1512, description cap 12 -> 13px, eyebrow 9.5 -> 10.6px, pill 28 -> 30px. Deliberate: a card 40% bigger carrying PASS 9's type reads as the same card with more padding, which is precisely how PASSES 7 and 8 failed to land. ── PASS 11 · THE AXIS WAS WRONG FOR FOUR PASSES ──────────────────────────── Ash: *"also change the aspect ratio i feel we can increase the lenth of the cards. and I'm sorry when I said make the cards bigger. By bigger I meant let's make the cards length higher because right now the zoomed in version of of them doesn't look good."* READ THAT AS A CORRECTION, NOT A NEW ASK. He is apologising for the ambiguity in "bigger". He never meant AREA and he never meant WIDTH. Every pass from 7 onwards optimised area under a fixed-ish height, and PASSES 7-10 all leaned on the same finding — "width is free on the wedges, height costs 0.505px on both, so buy width" — which is arithmetically true and was solving the wrong axis. The expensive axis is the one he wants. This pass spends it. PASS 10 SHIPPED THREE DIFFERENT CARDS, AND THAT IS PART OF THE COMPLAINT. Measured h/w was 0.420 at 1512, 0.478 at 1200, 0.578 at 993 — the card's PROPORTION drifted 38% across the desktop range, because width tracked vw and height sat on a clamp floor at the narrow end. "The zoomed in version doesn't look good" is a proportion complaint, and a proportion that changes with the window cannot be judged, only re-encountered. PASS 11 makes h/w a CONSTANT. ── WHAT LANDS ────────────────────────────────────────────────────────────── h/w 0.420 -> 0.694 at 1512, and 0.694 at 1440 / 1366 / 1200 / 1600 / 1700+ — one proportion everywhere from 1172px up. 0.818 at 993, where the type clamps floor and the content stack stops scaling (see § 1 cardH). card 468.7 x 197 -> 468.7 x 325.1 at 1512. WIDTH IS UNCHANGED. area 92.4k -> 152.4k px2 at 1512 (+65%); share of panel 10.9% -> 15.5%. 993 gains +34% area — PASS 10 gave it only +19%, the least of any width. ── WIDTH IS NOT TRADED DOWN, AND THE ARITHMETIC IS WHY ───────────────────── The founder offered card width as a lever to trade DOWN (narrowing raises h/w for free on both wedges). Priced, and declined — it is not needed: the wedge budget caps CARD HEIGHT, and that cap is INDEPENDENT of width. Width appears nowhere in either clearance equation. So width sets h/w and nothing else, and at Hc = 325 the h/w you get is 0.694 at 469px wide. 0.694 is already inside the 0.65-0.80 target. Narrowing would buy a number we already have, and it would cost two real things: · the eye reads WIDTH on a horizontal rail (PASS 10's own finding), so narrowing partially un-does the change that just landed; · the count ratio at 1512 goes 3.19 -> 3.39 at 440px wide, i.e. the rail spends 39% of its cycle showing 4 cards instead of 19%. PASS 10's structural win was 4-across -> 3-across. Narrowing gives it back. PRICED FOR OVERRULE: h/w 0.75 IS reachable, at 29.1vw (440px at 1512) with Hc 330 — clearances land ~14.5/14.5. That is the trade, if he wants it. ── THE INTERNAL ANATOMY HAD TO CHANGE, AND THIS IS THE REAL WORK ─────────── A tall card cannot keep a wide card's anatomy. PASS 9 already turned the thumbnail portrait as a side effect; at h/w 0.694 the side-by-side layout breaks outright, and the numbers say so rather than my taste: KEEPING `1fr 34%` at 468.7 x 325.1 gives a thumbnail 148.5 x 292.9 — a 2.02:1 VERTICAL sliver, which no photograph reads in — and a text stack of 134.5px in a 292.9px content box, i.e. 165px (56%) of EMPTY AIR inside the card. That is not a taller card, it is the same card with a hole in it. Widening the thumb to make it a sane portrait (50%) drops the text measure to 197px, pushes the description to 4 lines, and still leaves ~88px of air. There is no version of the side-by-side anatomy that works above h/w ~0.5. SO THE CARD BECOMES A COVER CARD. The thumbnail moves to the TOP, bleeds edge-to-edge through the card's padding, and takes the whole width; the text stack (eyebrow / title / description / pill) sits beneath it. Grid goes from `1fr 34%` columns to `1fr auto` ROWS, with the IMAGE on the 1fr. ┌──────────────────────────────┐ │▓▓▓▓▓▓▓ COVER, FULL BLEED ▓▓▓▓│ ~2.8:1, 52% of the card ├──────────────────────────────┤ │ ENGINE LANE │ │ MOTION │ │ two lines of description │ │ ( OPEN SERVICE → ) │ └──────────────────────────────┘ WHY THE IMAGE TAKES THE 1fr AND NOT THE TEXT. It is the same safety property § 4i gave the pill, moved up a level: the row that absorbs slack must be the one that can absorb it WITHOUT FAILING. Text on a fixed track clips (silent); an image on a 1fr track just gets shorter (invisible). So a surprise extra description line now costs the COVER ~16px and clips nothing, at any width. That retires the fifth-line failure mode this file has guarded since PASS 7 — not by measuring it more carefully, but by making it structurally free. The harness's `air` / `fifthLine` metrics measured the pill's auto-space and are meaningless under this structure; they are REPLACED, not left to print a comfortable number about the wrong element. (Same failure family as PASS 9's desc clip test — a true number, wrong question — caught before shipping.) THE DESCRIPTION GOES TO TWO LINES, AND IT IS THE ANATOMY THAT DID IT. The brief asked whether the extra height lets the description go BACK to four. It does the opposite: the text block is now the FULL card width, so the measure goes 277.5 -> 436.5px at 1512 (+57%) and the longest description (104 chars) wraps to two lines at every width. No copy is shortened — the strings in build-home.mjs are untouched and line-clamp is still none. 993 is the one knife-edge (run/measure = 1.99, i.e. 0.6% margin), so it may render 2 or 3; its card is sized for THREE and the 1fr cover absorbs the difference either way. A 3 at 993 is the expected reading, not a regression. ── THE PANEL, AND THE ONE THING TO OVERRULE ──────────────────────────────── 559.4 -> 650 at 1512 (+16%), 532 -> 625 below (+17.5%). The founder raised the ceiling to ~660 for this pass; I take 650. FLAG IT PLAINLY: Ash's original "panel 2 takes a lot of area" complaint was against a 696px panel, and 650 is within 7% of it. The entire justification is that that panel carried a 306px DEAD GAP and this one carries zero — and that the card now fills 15.5% of it against ~5% then. That is an eyeball call, not a number, and it is the first thing he should overrule. I did not take the last 10px because area share has the panel in its denominator (PASS 10's finding: growing the panel to make the card look bigger is self-cancelling). 660 would buy +2px of clearance and cost 0.24pp of share. ── COPY RE-ANCHOR: 48% -> 55.5%, AND WHY THE NUMBER MOVED SO FAR ─────────── § 4e's whole point is that panel height only pays if the copy is re-anchored in step. The panel grew 90px, so the anchor grows 7.5pp — and the check that the pair is balanced is that copyTopFrac lands .054 / .046 / .053 / .065 / .059 at 1512 / 1440 / 1366 / 1200 / 993, i.e. TIGHTER and closer to the reference's .05 than PASS 10's .066-.074, in a panel 90px taller. ── THE BAND: 72.5% -> 71.2%, and 1512 IS NOW THE BINDING WIDTH ───────────── A reversal worth stating: for three passes 993 was the tightest number in the composition. It is not any more. 993's card is on its height FLOOR (252) while 1512's is on the vw term (325.1), so the card-height cost — which is what eats both wedges — is now 40% higher at the wide end. The band moves 1.3pp to rebalance, and 1512 lands 17.1 / 17.0: the most evenly balanced pair in the series. The genuinely tightest point in the whole desktop range is 1440 (13.7px CTA), which is a real laptop width and was never being measured — the harness now tests it. ── NO TYPE CHANGE THIS PASS, DELIBERATELY ────────────────────────────────── PASS 10 scaled the in-card type +50% because the card got 31% WIDER and static type would have read as more padding. This card gets no wider, and every px of the new height goes into the IMAGE, not into padding. So the type is frozen exactly as PASS 10 left it, which also isolates the variable: if this reads as a bigger card, it is the proportion and the cover doing it. ── WHAT ASH SHOULD OVERRULE IF HE DISAGREES ──────────────────────────────── 1. THE PANEL IS 650 AT 1512 — within 7% of the height he once objected to. 2. THE CARD ANATOMY IS NEW. Side-thumbnail -> full-bleed cover on top. This is a departure from the "Production Worlds" reference he locked, and it is the only anatomy the proportion he asked for supports. Two-line revert: restore `grid-template-columns: 1fr 34%` in § 4g and delete § 4g2. 3. THE DESCRIPTION IS TWO LINES at every width (was 3, and 4 at 993). 4. h/w IS 0.694, NOT 0.75+. Priced above; the lever is card width. 5. <=992 STILL RUNS THE OLD SIDE-BY-SIDE CARD. The stacked breakpoint has no wedges and no measured budget, so it was left alone rather than changed blind. It now disagrees with desktop, and that is a knowingly-taken inconsistency, not an oversight. It is the top follow-up. ========================================================================== */ /* 1 · panel shell + the numbers everything else is derived from. PASS 7 re-solved all of them together; PASS 8 moved ONLY the two card clamps; PASS 9 re-solved the whole system again, because panel height was released and that changes the exchange rate on every other lever. They are NOT independently tuneable — see the sensitivity table in the header, and note especially that --p2-h's return on copy clearance depends on --p2-copy-bottom (§ 4e) moving with it: 0.155px/px if you grow the panel alone, 0.74px/px if you re-anchor the copy at the same time. Change any one of these five and you must re-run the arithmetic at all four widths. */ .bto-banner { position: relative; overflow: hidden; /* Panel height. PASS 9 SPENDS IT — the founder released the fixed-height constraint that governed PASSES 7 and 8, with a ~600px ceiling. 1512 483.8 -> 536.8 (+11.0%) aspect 3.13 -> 2.82 <=1431 480 -> 508 (+5.8%) aspect 2.07 -> 1.95 at 993 Still 23% shorter than the 696px panel Ash objected to, and that one also carried a 306px dead gap; this one's gap is zero. WHY 536.8 AND NOT THE 540-580 HE SUGGESTED. The card is anatomy-capped, not budget-capped (see the header). At H=536.8 the wedge budget would already allow a ~196px card; the stack only needs 184.5. Every px past this buys empty air INSIDE the card, not a bigger card. Coming in under his floor is the safer miss against his older "panel 2 takes a lot of area" note. If he wants it taller, this is the one number to move — and moving it alone is safe in the good direction (both wedges gain). 35.5vw floors at 508 (<=1431px) and caps at 556 (>=1566px): two plateaus with a short ramp, keeping PASS 6's property that the wedge arithmetic is stable rather than re-solvable at every width. PASS 10 — 536.8 -> 559.4 at 1512, 508 -> 532 below. ONLY +4.2% / +4.7%, against a ~620 allowance, and that restraint is deliberate rather than shy. Card AREA SHARE is the number Ash is reacting to, and it has the panel in its denominator: every px of panel I spend to make room for the card also makes the card a smaller fraction of what he is looking at. Growing the panel to make a card look bigger is self-cancelling. Most of PASS 10's card is funded instead out of a surplus PASS 9 was already carrying — its CTA wedge measured 43px at 1512 against an 8px floor. Re-balancing --p2-band and re-anchoring the copy (§ 4e) move that surplus to where the card needs it; the panel only covers the remainder. 37vw floors at 532 (<=1438px) and caps at 562 (>=1519px). PASS 11 — 559.4 -> 650 at 1512, 532 -> 625 below (+16% / +17.5%). The founder raised the ceiling from ~620 to ~660 for this pass; I take 650 and the missing 10px is not shyness. Area share has the panel in its DENOMINATOR — PASS 10's note above is still the governing argument — so the last 10px would buy ~2px of clearance and give back 0.24pp of the exact number Ash is reacting to. The clearances are 17.1/17.0 at 1512 without it. THE SHAPE CHANGES, NOT JUST THE VALUE. 37vw spanned 532-562 (a 30px range over a 5.6% ramp); 43.5vw spans 625-650 over 1437-1494px. That is deliberate and it is what makes ONE copy anchor work at every width: the copy block is ~240-255px tall at EVERY width (its height is set by type, not by viewport), while `bottom: %` resolves against H — so the flatter H is, the better a single percentage serves the whole range. § 4e's copyTopFrac lands .046-.065 across 993-1512 because of this, against PASS 10's .066-.074 in a panel 90px shorter. PANEL ASPECT, stated so it is not discovered: 2.33 at 1512 (was 2.70) and 1.59 at 993 (was 1.87). Flagged in the header as overrule #1 — 650 is within 7% of the 696px panel Ash once called "a lot of area", and the only defence is that that one carried a 306px dead gap and this one is full. */ --p2-h: clamp(625px, 43.5vw, 650px); /* Band centre, as a share of panel height. 76% -> 74% on PASS 7: the card was 36px taller, so the band was 36px thicker, so its centre had to drop to keep the CTA wedge open. This is the 1:1 knob — every point you move it, one wedge gains exactly what the other loses. PASS 8 deliberately did not touch it. PASS 9 moves it 0.5pp, and only because the binding constraint MOVED WIDTHS. With the card 41px taller at 993, the tightest number in the whole composition is now 993's CTA wedge (measured 25px at PASS 8's card; it pays 20.7px of the height increase). Copy clearance meanwhile comes out at 19-21px at EVERY width. So there is a genuine surplus on the copy side and a genuine shortage on the CTA side — which is exactly the situation this 1:1 knob exists for. 74 -> 73.5 moves ~2.6px from copy to CTA at 1512 and ~2.5px at 993. It still cannot CREATE clearance. Do not reach for it when both wedges are short — that is --p2-h's job. PASS 10 moves it a full point, 73.5 -> 72.5, and this is where a real part of the bigger card is paid for. PASS 9 shipped a lopsided pair: copy measured 20 and CTA measured 43 at 1512, i.e. the CTA wedge was carrying 5x its 8px floor while the copy carried 2.5x. A 12px card-height increase costs BOTH wedges 6.1px, which the copy side could not absorb alone. Moving the band up a point hands ~5.6px at 1512 (~5.3 at 993) from the copy wedge to the CTA wedge, and the copy side is then topped up by § 4e's re-anchor. Result at 1512: copy 20 -> 23.1, CTA 43 -> 48.5 — BOTH go up while the card grows 40%. That is not a trade; it is a surplus that was sitting unspent. PASS 11 — 72.5% -> 71.2%, and THE BINDING WIDTH HAS MOVED. For three passes 993 carried the tightest number in the composition and this knob was set to protect it. It is not tightest any more: 993's card sits on the height FLOOR (252px) while 1512's rides the vw term (325.1px), so the card-height charge — 0.505px off BOTH wedges per px — is now 40% heavier at the wide end than at the narrow one. Exactly the inversion this 1:1 knob exists for, run in the other direction: 1.3pp moves ~8.5px from copy to CTA at 1512. Lands 1512 at copy 17.1 / CTA 17.0, the most evenly balanced pair in the series. 993 ends LOPSIDED at 41.4 / 14.1 and is left that way on purpose: this is ONE value serving every width, so balancing 993's surplus onto its CTA side would unbalance 1512, and 1512 is the width with the real shortage. 993's copy surplus is not spendable for a different reason too — its constraint is the content stack (type on clamp floors), not the wedges. */ --p2-band: 71.2%; /* Card — PASS 9. The third "make them bigger", and the first one with a real budget behind it. 1512 332.6 x 136.1 -> 358.3 x 184.5 area +46% 1366 300.5 x 122.9 -> 323.7 x 166.7 area +46% 1200 272.0 x 121.0 -> 284.4 x 162.0 area +40% 993 272.0 x 121.0 -> 284.0 x 162.0 area +40% As a share of the panel the card goes 0.220 -> 0.237 of its WIDTH and, more to the point, 6.2% -> 8.3% of its AREA. PASSES 7 and 8 moved the area share by ~1pp each; that is why they did not read as a change. WIDTH — 22vw -> 23.7vw, f = 0.237. The ceiling is the 4-card floor, and PASS 8's pitch model measured EXACT, so it is used as-is: floor(W / ((cardW + 10) * cos8)) >= 4 -> f <= 0.246 23.7vw gives a count ratio of 4.15 / 4.13 / 4.12 at 1512 / 1366 / 1200 — note how FLAT that is. That is not luck: 23.7vw is ~1/4.22 of the viewport, so the ratio is near width-invariant and the count stops drifting between breakpoints. Sitting at ~4.13 rather than PASS 8's 4.46 means the panel now reads 4 cards at most phases and 5 at some. Going wider is possible on paper (up to 0.246 = ratio 4.00) but every desktop width would then sit one rounding error from dropping to 3. Not worth 14px. HEIGHT — 9vw -> 12.2vw, floor 121 -> 162. THIS IS THE NUMBER THAT MAKES IT READ, and it is set by the CONTENT STACK, not by the budget. At 1512: eyebrow 14.5 + title 25.6 + desc 4 x 15.6 + pill 28.0 = 130.5 + one spare description line (15.6) + 3 = 149.1 content + 2 x pad 14.36 + 2 x border = 184.5 card The wedge budget at H=536.8 would allow ~196px. The extra 11px would be empty air inside the card, so it is not taken. See the header. THE FLOORS MOVE THIS TIME, and that is a deliberate reversal of PASS 8's safety property. PASSES 7 and 8 both froze 993/1200 at the clamp floors so the tightest width paid nothing. Doing it a THIRD time would mean 993 never benefits from any of the three asks. It is affordable now because WIDTH is free on the wedges (+12px at 993 costs zero) and the panel growth covers the height. What it costs is that 993/1200's clearance is no longer an already-measured number — both must be re-measured, which is why the harness predictions below were re-derived at all four widths. --p2-card-w floor 284px binds below 1198px (was 272 below 1236px) --p2-card-h floor 162px binds below 1328px (was 121 below 1345px) The width floor is set by 1200's count, not by taste: 1200 needs cardW <= 292.9 to hold min 4, and 284 leaves ratio 4.12 rather than a knife-edge 4.04. 993 stays at min 3 either way — its 3-floor does not break until cardW > 324, so this is not what put it at 3 (see the harness note). ASPECT. h/w 0.409 -> 0.515 at the wide end, 0.445 -> 0.570 at the floors. The reference is 0.40 and this is a real deviation, not a rounding one. It is the anatomy: the width is capped by the count floor, so eyebrow + title + four description lines + pill have to buy their room vertically. Flagged in the header as the first thing Ash should overrule, with the 3-card alternative priced out so he can take it if he wants the proportion back. ── PASS 10 — THE 4-CARD FLOOR IS GONE, SO WIDTH IS UNCAPPED FOR THE FIRST TIME IN THREE PASSES. Everything above described a card that was WIDTH-CAPPED BY THE COUNT and therefore had to buy room vertically. That cap was the founder's 4-floor, and it is now 3. Re-derive, don't inherit: floor(W / ((cardW + 10) * cos8)) >= 3 -> f <= ~0.330 Landed f = 0.310 (31vw), ratio 3.19 / 3.18 / 3.17 / 3.16 across 1512 / 1366 / 1200 / 993. That is 5-6% of margin above the 3.00 knife-edge — MORE than PASS 9 held above its own 4.00 (3-4%), and deliberately so: 4->3 costs a quarter of the count, 3->2 costs a third and looks broken on a 65s rail. 0.32 is the honest next step if Ash wants it (2% margin at 993); 0.33 is the knife-edge and should not ship. 1512 358.3 x 184.5 -> 468.7 x 196.6 w +31% area +40% 1366 323.7 x 166.7 -> 423.5 x 178.0 w +31% area +39% 1200 284.4 x 162.0 -> 372.0 x 178.0 w +31% area +44% 993 284.0 x 162.0 -> 307.8 x 178.0 w +8% area +19% WHY 993 BARELY MOVES, stated here rather than discovered later: it was ALREADY at a 3-card floor before this pass (see the harness note below — its 3-floor breaks at cardW > 324), so it has no count left to spend. 308 is 95% of its ceiling. A ~1000px review window will show the least change of any width, and no lever in this file fixes that. HEIGHT FALLS OUT OF THE STACK AGAIN, AND THE STACK GOT SHORTER. The measure grows ~36% at 1512 (203.7 -> 277.5px), which drops the longest description from four lines to three — so the content stack SHRINKS even as the type scales up. 13vw = 196.6 at 1512 puts h/w at 0.419, i.e. essentially the reference's 0.40, which PASS 9's note 1 said would need a 430px card. It needs 469. The floor is 178 and binds below 1369px, where the description is still four lines and needs the room. h/w at the floors: 0.478 at 1200, 0.578 at 993 — the narrow end stays tall for the same anatomy reason as before, because its measure only grew 9%. THE FLOORS MOVE AGAIN (284 -> 308 wide, 162 -> 178 tall) and 993/1200 must be re-measured rather than inherited, exactly as in PASS 9. ── PASS 11 — HEIGHT IS THE ONLY THING THAT MOVES. WIDTH IS FROZEN. ──────── Everything above this line was written while optimising AREA on the cheap axis. Ash has corrected the axis: he wants the card TALLER and he has asked for the ASPECT RATIO to change. So: --p2-card-w 31vw KEPT. Only the CAP moves, 512 -> 496. --p2-card-h 13vw -> 21.5vw, floor 178 -> 252, cap 208 -> 344. WHY WIDTH IS NOT TRADED DOWN, even though the founder offered it as a lever. Width does not appear in EITHER clearance equation — it is free on the wedges, which is the same fact PASSES 7-10 kept exploiting, read the other way round. The consequence is that the wedge budget caps card HEIGHT and that cap is width-INDEPENDENT: at 1512 the budget allows Hc <= ~327 no matter how wide the card is. Width therefore sets h/w and nothing else, and at 31vw the h/w you get for free is 0.694 — already inside the 0.65-0.80 target. Narrowing would buy a number already in hand and would cost the two things PASS 10 actually won: WIDTH is the axis the eye reads on a horizontal rail, and the count ratio at 1512 goes 3.19 -> 3.39 at 440px, i.e. the rail spends 39% of its cycle at four cards instead of 19%. Priced for overrule in the header: h/w 0.75 needs 29.1vw + Hc 330 and lands ~14.5/14.5. h/w = 21.5/31 = 0.694 WHEREVER BOTH TERMS ARE ON vw — which is now the whole range from 1172px up, because the two CAPS are set to bite at the same viewport: 496/0.31 = 1600 and 344/0.215 = 1600. That is the point of moving the width cap; leaving it at 512 would let h/w drift to 0.67 above 1600 for nothing. PASS 10 shipped 0.420 / 0.478 / 0.578 across 1512 / 1200 / 993 — three different cards — and a proportion that changes with the window cannot be judged, only re-encountered. One proportion is the deliverable here. 1512 468.7 x 197.0 -> 468.7 x 325.1 h/w 0.420 -> 0.694 area +65% 1440 446.4 x 187.2 -> 446.4 x 309.6 h/w 0.419 -> 0.694 area +65% 1366 423.5 x 178.0 -> 423.5 x 293.7 h/w 0.420 -> 0.693 area +65% 1200 372.0 x 178.0 -> 372.0 x 258.0 h/w 0.478 -> 0.694 area +45% 993 307.8 x 178.0 -> 308.0 x 252.0 h/w 0.578 -> 0.818 area +42% THE FLOOR IS 252, NOT ~214, AND IT IS SET BY THE CONTENT STACK — the same anatomy-capped logic PASS 9 established, applied to the new anatomy. 21.5vw at 993 would be 213.5px, which the wedges could easily afford (993 still has 41px of copy clearance at 252). It is refused for what is INSIDE: at 993 the type is on its clamp floors (eyebrow 9.5 / desc 11.5 / pill 26) and does NOT shrink with the card, so the text stack is a near-fixed ~108-123px. At Hc 214 that leaves the cover 83px on a 306px card — 3.7:1, a horizontal sliver, i.e. exactly the failure being fixed, rotated 90 degrees. 252 gives the cover ~106px (2.9:1) and matches the wide end's cover proportion. Consequence, stated rather than discovered: h/w at 993 is 0.818, above the 0.694 the rest of the range holds. That is the type floors talking, and the honest trade is a consistent COVER over a consistent CARD at the one width where they cannot both be true. COUNT IS UNTOUCHED BY CONSTRUCTION. cardW is unchanged, so PASS 10's pitch model returns the same ratios: 3.19 / 3.19 / 3.18 / 3.17 / 3.15 at 1512 / 1440 / 1366 / 1200 / 993, all >= the 3 floor with 5%+ margin. The composition does not move this pass — only the card's proportion does. */ --p2-card-w: clamp(308px, 31vw, 496px); --p2-card-h: clamp(252px, 21.5vw, 344px); /* Padding is NOT scaled with the card. At 1512 it stays 14.36px, which is 4.3% of the new card width against 4.9% of the old — a difference no eye resolves. Scaling it to 1.05vw would cost 3.1px of the description's slack in exchange for nothing visible, and slack is the scarce resource here. PASS 10 REVERSES THAT, and the reason is that the premise changed. The argument above is correct while the card moves 8-14% — padding is then a rounding error and slack is scarce. This card moves 31% in width, and at 14.36px the padding would fall to 3.1% of card width: the content would visibly crowd the corners and the card would read as a text block with a hairline, not as a card. The slack objection also no longer binds — the description drops to three lines at >=1200, so the vertical budget is in surplus (air-above-pill is 23-33px at every width, against a one-line requirement of 15-17). 1vw = 15.12px at 1512, 3.2% of card width, which is the same ratio the card carried at PASS 7's size. Floor 13 so 993/1200 — which are on the width floor and have the least room — still gain some. */ --p2-card-pad: clamp(13px, 1vw, 18px); /* CTA footprint, named because the wedge arithmetic consumes it. The button HEIGHT is deliberately left at mokko-bridge's 45px — dropping it to 40 would have bought 5px of clearance, but shrinking the panel's primary conversion element to win a geometry argument is the wrong trade. The bottom offset pays for it instead: it is a gap, not a control. */ --p2-cta-bottom: clamp(12px, 1.05vw, 18px); } /* 2 · THE COPY HAS NO BACKGROUND OF ANY KIND. Ash, three times now: no plate, no gradient, no fade, no aperture. Both pseudo-elements are removed outright so there is nothing for a later sheet to paint on — palette.css loads after this file and still carries an (inert) rule for ::before. This block is unconditional: it holds at every width, in every theme. */ .bto-banner .bto-banner-copy, .bto-banner .bto-banner-copy::before, .bto-banner .bto-banner-copy::after { background: none !important; background-image: none !important; box-shadow: none !important; } .bto-banner .bto-banner-copy::before, .bto-banner .bto-banner-copy::after { content: none !important; } /* 3 · the rail's overhang never applied — the band looked CUT. `.bto-rail-inner` was a flex item, and flex items default to `flex-shrink: 1`, so the `width: calc(100% + 160px)` that pushes the rail's physical ends out of sight collapsed straight back to 100%. The rail's real end then sat on the container edge and a wedge of empty band showed early in the 65s cycle. Kept for the <=992 stacked layout, where the inner IS still a flex item. */ .bto-banner .bto-rail-inner { flex: 0 0 auto; } /* ============================================================================ 4 · >=993px — the merged field ========================================================================== */ @media (min-width: 993px) { /* 4a · the panel is a fixed-height stage. Nothing is left in flow, so the height is deterministic and the wedge arithmetic above is exact rather than approximate. `display: block` retires the PASS 4 flex column and with it the `order` juggling that created the stack. */ .bto-banner { display: block; padding: 0; height: var(--p2-h); min-height: var(--p2-h); } /* 4b · the rail is a full-panel layer again — `inset: 0`, gap above it ZERO. This is the whole fix. Also unwinds mokko-bridge § L3's aperture: the left inset, the border-left and the 32px radius all belonged to a rail that ran only down the right-hand column, and there is no column any more. */ .bto-banner .bto-rail-area { position: absolute; inset: 0; display: block; width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden; /* the panel's clip — nothing escapes to the ticker */ -webkit-mask-image: none; mask-image: none; background: none; z-index: 1; pointer-events: none; } /* 4c · the band, placed by its CENTRE. `top` in % resolves against the containing block's HEIGHT (padding in % would resolve against its WIDTH — that is why this is absolute, not a padded flex item). translateY(-50%) then puts the band's centre exactly on --p2-band, and the rotation is about that same centre, so Yc is honest. The 160px overhang keeps the rail's two physical ends off-panel at every phase of the loop. */ .bto-banner .bto-rail-inner { position: absolute; top: var(--p2-band); left: -80px; width: calc(100% + 160px); margin: 0; overflow: visible; /* let the unrotated area do all the clipping */ transform: translateY(-50%) rotate(-8deg); pointer-events: auto; } /* 4d · the foreground is a transparent frame over the whole panel, so the copy and the CTAs can be pinned to the two wedges. It must not swallow clicks — the cards underneath are links to services.html#lane — so pointer events pass through it and are re-enabled on the two things that need them. */ .bto-banner .bto-banner-fg { position: absolute; inset: 0; z-index: 2; width: auto; margin: 0; padding: 0; pointer-events: none; } .bto-banner > .bto-banner-fg > .container { height: 100%; } .bto-banner .bto-banner-grid { display: block; height: 100%; min-height: 0; gap: 0; } /* 4e · copy → the TOP-LEFT wedge. Pinned to the panel (the fg frame is the containing block and is inset: 0, so these resolve against the panel box). Same left edge as THE WORK, the Engine Room and the FAQ — one page, one gutter. ANCHORED BY ITS BOTTOM, NOT ITS TOP, AND THAT IS THE SAFETY PROPERTY. The bottom edge is the one the wedge constrains, so pinning it makes the clearance a constant instead of a consequence of how the headline happens to wrap. If a font-metric surprise pushed the headline to a third line, a top-anchored block would grow DOWN into the cards — silently breaking the one rule that must not break. Bottom-anchored it grows UP instead, and the failure mode is a headline clipped at the panel edge: obvious in one look, and not a rule violation. PASS 7: 37% -> 41.5%, re-solved for the 36px-thicker band. PASS 9: 41.5% -> 46%, AND THIS IS WHAT PAYS FOR THE WHOLE PASS. Not a tuning nudge — it changes the exchange rate on panel height. The sensitivity table says H returns 0.155px of copy clearance per px. That holds only if this value is left alone: the copy is anchored as a FRACTION of the panel, so it slides DOWN as the panel grows and hands most of the gain straight back. Raise this in step with H and the copy's top edge stays put while the band centre descends, and the same px of panel returns 0.74. 53px of panel at 1512 therefore buys +39px of copy clearance instead of +8px — which is the entire difference between "the pill does not fit" (PASS 8) and "the pill fits with room" (here). Solved so the copy's TOP lands at ~.066 of H at 1512 and ~.066 at 993 — i.e. HIGHER in the panel than PASS 8 shipped (.060/.083) and closer to the reference's .05, despite the panel being 53px taller. Checked at all four: .067 / .064 / .073 / .066 of H at 1512 / 1366 / 1200 / 993. Bottom-anchoring is untouched, so the safety property above still holds. PASS 10: 46% -> 48%, for BOTH of the reasons this value exists. (a) the panel grew again (+22.6px at 1512, +24 below), so without the re-anchor the copy slides down and copyTopFrac would land ~.106/.112 — inside the harness's 0.12 tolerance, so it would NOT have flagged, but visibly lower in the panel and away from the reference's .05. This is the trap § 4e was written for and it does not announce itself; the harness prints the fraction precisely so it cannot hide. (b) it tops the copy wedge back up after --p2-band moved a point AWAY from it. Band and copy-bottom are the two halves of one move here: the band shifts surplus to the CTA side, this shifts panel growth back to the copy side, and both wedges end up larger than PASS 9's. Solved at .066 / .066 / .074 / .067 of H at 1512 / 1366 / 1200 / 993 — i.e. the copy sits at the SAME height in the panel as PASS 9 despite the panel being taller again. That invariance is the check that the pair is balanced. NOTE the one number here that is not exact: copyTopFrac depends on the copy block's rendered HEIGHT, which is inferred from PASS 9's predictions rather than measured. The CLEARANCES do not depend on it at all (they are H*(band-1+copyBottom) - K), so a surprise there is cosmetic, never a rule violation. Correct risk allocation, and the reason to check it in that order when reading the harness output. PASS 11: 48% -> 55.5%. The panel grew 90px, which is by far the biggest jump this value has had to absorb, and the arithmetic is unchanged — leave it at 48% and copyTopFrac lands ~.105 at 1512 and ~.135 at 993, i.e. the copy slides ~55px down a taller panel and hands most of the clearance gain straight back. 55.5% keeps the copy's TOP where it was: measured as a fraction of H it lands .054 / .046 / .053 / .065 / .059 at 1512 / 1440 / 1366 / 1200 / 993 — TIGHTER and closer to the reference's .05 than PASS 10's .066-.074, in a panel 90px taller. That invariance across five widths is the check that H and this value are moving as a pair. ONE PERCENTAGE NOW SERVES FIVE WIDTHS BECAUSE --p2-h WAS FLATTENED. This is the coupling to understand before touching either: the copy block's height is set by TYPE (~240-255px at every width), while `bottom: %` resolves against H. A wide H range therefore cannot be served by a single % — PASS 10's 532-562 was narrow enough to hide it, and a naive 625-660 spread on this pass would have pushed 993's copy to ~19px off the panel top. § 1's 43.5vw span (625-650) is chosen for this, not for the panel's own sake. THE SAFETY PROPERTY IS UNCHANGED AND STILL LOAD-BEARING. Bottom-anchored, so a surprise third headline line grows UP and clips at the panel edge (loud) instead of DOWN into the cards (silent, and the one forbidden failure). The headroom that line would need: 35px at 1512 and 29px at 1440, against PASS 10's 37px and 27px. Essentially unchanged, so the risk is not new — but 1440 is the tightest and it was never being measured. The harness now tests it. */ .bto-banner .bto-banner-copy { position: absolute; left: var(--bto-gutter, 40px); bottom: 55.5%; top: auto; width: auto; max-width: none; margin: 0; z-index: 3; pointer-events: auto; } /* the measure that sets the copy's right edge, and therefore the wedge. em-based, so two lines is invariant to the 4.6vw clamp — see the header. 10.2em -> 9.6em buys ~9px of clearance at ~8% wrap headroom. */ .bto-banner .bto-banner-title { max-width: 9.6em; margin: 0 0 14px; } /* the lead runs to three lines rather than four. The reference puts it at ~0.25w; 26em is ~0.31w at 1512. That deviation is deliberate and it is not cosmetic — the fourth line costs 29px of copy height, which is more than a third of the clearance budget, and the lead is never the widest element so it costs nothing on the horizontal. */ .bto-banner .bto-banner-lead { max-width: min(26em, 38vw); } /* 4f · CTAs → the BOTTOM-RIGHT wedge. Absolute to the panel frame, so the copy can grow without ever moving them. PASS 7: the offset comes down (clamp(18,1.45vw,24) -> clamp(12,1.05vw,18)) because it is a 1:1 lever on the CTA wedge and it costs nothing but air. The button height is NOT touched — see --p2-cta-bottom in § 1 for why. */ .bto-banner .bto-banner-ctas { position: absolute; right: var(--bto-gutter, 40px); bottom: var(--p2-cta-bottom); left: auto; top: auto; margin: 0; justify-content: flex-end; z-index: 4; /* above the rail — nothing is drawn behind it */ pointer-events: auto; } /* 4g · the card. Explicit height (not min-height) does two jobs: it makes every card the same height — they were ragged, because each `li` sized to its own description and the tallest ran ~333px against a 214px min-height — and it makes Hc a known number, which is what lets the wedge arithmetic be exact. `position: relative` was added in PASS 7 because the pill was absolute to the card and would otherwise have escaped to the nearest positioned ancestor (the rotated rail inner). PASS 9 puts the pill back in flow, so that reason is GONE. It is kept anyway, and deliberately: it costs nothing, it makes the card a containing block for anything a later pass overlays on the thumbnail, and qa-panel2.mjs asserts on it. Do not read it as evidence that something inside the card is still absolutely positioned. */ .bto-banner .bto-pw-card { position: relative; width: var(--p2-card-w); height: var(--p2-card-h); min-height: 0; margin: 0 5px; padding: var(--p2-card-pad); gap: clamp(8px, .7vw, 12px); /* now a ROW gap: cover -> text */ /* PASS 11 — COLUMNS BECOME ROWS. This one declaration is the anatomy change. `1fr 34%` put the thumbnail in a right-hand column spanning the card height, which is a WIDE-card pattern: at h/w 0.42 the thumb was a reasonable 148x197, at h/w 0.694 it is a 148x293 vertical sliver (2.02:1) and the text stack leaves 165px — 56% — of the card empty. The anatomy has to follow the aspect, not fight it. Full derivation in the header. ROW ORDER IS `1fr auto` AND THE IMAGE IS ON THE 1fr, DELIBERATELY. The row that absorbs slack must be the one that can absorb it without failing: text on a fixed track CLIPS (silent, forbidden), an image on a 1fr track just gets shorter (invisible). So a surprise extra description line now costs the cover ~16px and clips nothing, at any width — which retires the fifth-line failure mode this file has guarded since PASS 7 structurally rather than by measuring it more carefully. The thumb is SECOND in build-home.mjs (:135); § 4g2 reorders it with `order: -1` rather than moving the markup, so index.html stays byte-identical to what the builder emits. */ grid-template-columns: 1fr; grid-template-rows: 1fr auto; border-radius: var(--pin-r-md, 16px); overflow: hidden; } /* 4g2 · THE COVER — PASS 11. The thumbnail is now the card's lead element. (Numbered as a sub-part of 4g on purpose: it styles 4g's own grid child and is meaningless without 4g's `grid-template-rows`. Keeps 4g -> 4h -> 4i monotonic, which every cross-reference in this file depends on.) IT BLEEDS THROUGH THE PADDING. A padded image inside a card reads as an illustration the card is holding; an image that runs to the card's own edge reads as the card's cover, and that difference is most of why this now reads as a card rather than a strip. Negative margins on three sides pull it out to the padding box; the card's `overflow: hidden` + `border-radius` (§ 4g) does the corner rounding, so nothing new draws a shape. BORDER-RADIUS: 0 IS REQUIRED, NOT COSMETIC. Two rules give this element a 16px radius — mokko-bridge:905 `.bto-banner .bto-pw-thumb` (0,2,0) and palette.css:469 `.bto-pw-thumb` (0,1,0). Left alone, a bled cover would draw rounded corners INSIDE the card's own rounded corners: a visible double radius at the top and two stray curves at the bottom of the image. This rule is (0,2,0) inside a media query and panel-fixes loads after mokko-bridge, so it wins both — and per the § 4i warning that is exactly the kind of silent token-stranding to be careful about, so it is scoped: DESKTOP ONLY. Below 993 the side-by-side card survives untouched and palette keeps ownership of the radius there. Nothing else about the thumb is declared here — the background (palette:402) and the img's object-fit (marquee-banner:223) are left to their owners. `min-height: 0` because a grid item's automatic minimum size is its content's min-content height; without it the `` could refuse to let the 1fr row shrink, which would silently break the slack-absorption above. WHAT THE COVER MEASURES: ~2.8:1 at every desktop width — 1512 466.7 x 167.7 = 2.78 1440 444.4 x 157.5 = 2.82 1366 421.5 x 148.7 = 2.83 1200 370.0 x 122.6 = 3.02 993 306.0 x 106.3 = 2.88 (3-line desc; 2.52 if it renders two) That is a wide cinematic frame, and for a film brand it is the right shape — but it IS wide, and `object-fit: cover` will crop a 16:9 still to its middle ~57%. If any lane's still loses its subject to that crop the fix is `object-position` per lane, not a shape change. Flagged, not guessed. A true 2.35:1 cover is reachable only at h/w ~0.76+, which needs the card narrower — the trade priced in the header. */ .bto-banner .bto-pw-thumb { order: -1; margin: calc(var(--p2-card-pad) * -1) calc(var(--p2-card-pad) * -1) 0; border-radius: 0; min-height: 0; } /* 4h · THE DESCRIPTION IS RESTORED — PASS 6's judgement call, reversed by Ash. PASS 6 hid it and flagged the alternative. Ash chose the alternative: *"lets make the cards bigger so that we can add sub text."* THE BUDGET, so the next pass can check it instead of re-deriving it. *** RESTATED FOR PASS 11's CARD AND ITS NEW ANATOMY. Every PASS 10 figure that used to sit here (468.7x196.6 / a 34% thumb column / 277.5px measure / 3 desc lines) is wrong on BOTH axes now — the card is 65% taller and the thumbnail is no longer in a column at all — and is REPLACED, not appended to. This file's three most expensive bugs were all the same shape: a stale or inert artefact that LOOKED like the live one. A superseded budget table does not get to stay next to a live one. *** Box-sizing is border-box (Mokko sets `html { box-sizing: border-box }` + `* { inherit }`), so --p2-card-h IS the outer box and the content box is that minus 2*pad minus 2*1px border. THE STACK IS NOW VERTICAL AND THE MEASURE IS THE FULL CARD WIDTH — that is the single biggest change in these numbers. "cover" below is the 1fr row PLUS the padding it bleeds through (§ 4g2), i.e. the image AS RENDERED, and it is what `.bto-pw-thumb`'s offsetWidth/offsetHeight return (grid stretches the MARGIN box to the row, and the margins are negative). "+1 line" is that same rendered cover minus one description line — what is left of the image if a description gains a line. Stated in ONE unit on purpose: the row height and the rendered cover differ by a padding, and mixing them across the CSS and the harness is how a 15px discrepancy survives a pass. at 1512 — card 468.7x325.1, pad 15.12 -> content 436.5 x 292.9 measure 436.5 (full width; was 277.5 in a 1fr/34% split) eyebrow 16.6 + title 37.0 + desc 2 x 16.9 + gap 12.1 + pill 30.2 = 129.7 cover 466.7 x 167.7 = 2.78:1 +1 line -> 150.8 left at 1440 — card 446.4x309.6, pad 14.40 -> content 415.6 x 278.8 eyebrow 16.1 + title 35.5 + desc 2 x 16.85 + gap 11.5 + pill 28.8 = 125.6 cover 444.4 x 157.5 = 2.82:1 +1 line -> 140.7 left at 1366 — card 423.5x293.7, pad 13.66 -> content 394.2 x 264.4 eyebrow 15.6 + title 34.0 + desc 2 x 15.98 + gap 10.9 + pill 27.3 = 119.7 cover 421.5 x 148.7 = 2.83:1 +1 line -> 132.7 left at 1200 — card 372.0x258.0, pad 13 -> content 344.0 x 230.0 eyebrow 15.5 + title 30.6 + desc 2 x 14.95 + gap 10 + pill 26.0 = 112.0 cover 370.0 x 122.6 = 3.02:1 +1 line -> 107.7 left at 993 — card 308.0x252.0, pad 13 -> content 280.0 x 224.0 eyebrow 15.5 + title 26.3 + desc 3 x 14.95 + gap 10 + pill 26.0 = 122.7 cover 306.0 x 106.3 = 2.88:1 +1 line -> 91.4 left (sized for THREE; if it renders two, cover 121.3 = 2.52:1) THE DESCRIPTION IS TWO LINES NOW, AND IT IS THE ANATOMY THAT DID IT — NOT A CUT. The measure went 277.5 -> 436.5px at 1512 (+57%) because the text block is the whole card width instead of a 1fr track beside a 34% thumb. No copy is shortened: build-home.mjs is untouched and line-clamp is still none. Read a 2 where PASS 10 predicted 3 as the expected result. THE HORIZONTAL MARGIN, which is the actual mechanism for gaining a line (the vertical number is the damage, not the risk — PASS 8's finding, still the governing one). Calibrated run ~48.4px per px of font-size, fitted to PASS 10's two measured points and consistent between them to 0.5%: 1512 run 629 vs 2 x 436.5 = 873 margin 38.7% 1440 run 627 vs 2 x 415.6 = 831 margin 32.5% 1366 run 595 vs 2 x 394.2 = 788 margin 32.5% 1200 run 557 vs 2 x 344.0 = 688 margin 23.6% 993 run 557 vs 2 x 280.0 = 560 margin 0.6% <- KNIFE-EDGE 993 sits within a rounding error of the 2/3-line boundary and NO lever fixes that: a 104-character string in a 308px card is marginal by construction, and every fix (wider card, smaller type, less padding) buys 5-10% and stays THIN. So it is not fixed, it is made FREE — see below. WHY THE 993 KNIFE-EDGE IS NOT A FAILURE, AND WHY THE OLD GUARD IS GONE. Through PASS 10 a surprise extra line was a CLIP risk: the card height was explicit, the pill sat at the bottom on `margin-top: auto`, and the guard was "air minus one line height >= 0". § 4g's `grid-template-rows: 1fr auto` removes the risk rather than measuring it: the text row is `auto`, so an extra line simply makes it taller and the COVER's 1fr row gives up the space. Nothing clips, at any width, at any line count. The "+1 line" column above shows the cover still holding 78-136px after absorbing one, and 993's card is sized for THREE lines so it is safe in both directions. CONSEQUENCE, AND IT IS THE HARNESS'S PROBLEM AS MUCH AS THIS FILE'S: `air` and `fifthLine` now measure a constant margin and are permanently negative. Left in place they would print FAIL against a design whose failure mode is strictly safer than the one they were written for — a grader that fails a chosen outcome trains the next pass to ignore the report. They are replaced in qa-panel2.mjs by a cover-row measurement. *** THE THREE PARAGRAPHS THAT SAT HERE ARE DELETED, PASS 11 — NOT MOVED, NOT COMMENTED OUT. They were: "FOUR LINES, NOT THREE, AND NOT CLAMPED" (arithmetic against a 203.7px measure that no longer exists), "A sixth line would still be clipped by the card's overflow: hidden" (no longer true — see below), and "THE SLACK ABOVE IS THE DAMAGE, NOT THE RISK" (correct as a principle, but it pointed at a `slack` number this pass removes). All three read as live guidance and all three would send the next pass at a mechanism that is gone. This file has now lost three passes to exactly that shape of artefact; the rule is delete, not annotate. *** WHAT REPLACES THEM, in one paragraph. TWO LINES AT >=1200, TWO-OR-THREE AT 993, AND STILL NOT CLAMPED. Six of the seven descriptions fit in one line at the new full-width measure; "Content" is 104 characters and takes two (three at 993). Because --p2-card-h is explicit and uniform the TALLEST card still governs the box, so six cards carry a shorter text block and a taller cover — the ragged bottom PASS 7 accepted becomes a ragged cover height, which reads as intent rather than as error. The alternative remains a `-webkit-line-clamp` cutting ONE card mid-sentence: the "truncated fragment" PASS 6 rejected and Ash's brief rules out again. No description is shortened — that is the Editorial Director's call, not mine. AND THE CLIP FAILURE MODE IS GONE, WHICH IS WHY THE OLD PARAGRAPH HAD TO GO RATHER THAN BE EDITED. Under § 4g's `grid-template-rows: 1fr auto` the text row is `auto`: extra lines make it taller and the cover's 1fr row shrinks to pay. The card's `overflow: hidden` is still there (it clips the bled cover's corners, § 4g2) but it no longer has any text to clip. So the correct thing to measure is not "does the text overflow the card" — that can no longer happen — but "is the cover still big enough to read as an image after absorbing a line". qa-panel2.mjs measures the cover row directly and grades it against a 40px minimum; below that an image slot stops reading as an image, which is the real failure now. STILL TRUE, AND WORTH KEEPING BECAUSE IT IS ABOUT LEVERS NOT NUMBERS: a line is gained when the single-line RUN exceeds lines x measure — a HORIZONTAL fact. The vertical figure only ever said how badly it lands. PASS 7 read a vertical number ("6.6px spare") and reached for card HEIGHT, which costs 0.505px of wedge per px, when the fix was WIDTH, which costs nothing. Same discipline applies to this pass in reverse: Ash asked for height, so height is what was bought — but the run-margin table above is still measured on the horizontal, because that is where the mechanism lives. PASS 9 RAISES THE DESC CAP FOR THE FIRST TIME (11.5 -> 12px), which PASS 8 explicitly warned against, so the licence is stated precisely: the prohibition was on raising the cap WITHOUT re-running the margin, and the safe condition is that the cap must grow SLOWER than the measure. It does, at every width (+4.3% cap vs +8.9% measure at 1512; +4.8% vs +5.1% at 993). So run/capacity can only improve or hold — the direction is safe by construction, not by measurement, and the harness confirms rather than discovers it. Note 993 is nearly neutral (+0.3%): that width banks no new margin, it just does not lose any. If a later pass wants bigger card type, check that inequality first; it is the whole guardrail. */ /* PASS 9 — THE TYPE SCALES WITH THE CARD, BUT NOT UNIFORMLY. A card 46% bigger in area with the same 15px title reads as the same card with more padding, which is how PASSES 7 and 8 failed to land. But the three elements carry completely different risk, so they move by different amounts: eyebrow 8.5 -> 9.5px one fixed word ("ENGINE LANE"). Zero risk. title 1.02 -> 1.30vw all seven service names are SINGLE WORDS (Content · Social · Reputation · Growth · Motion · Film · Foundation), so they cannot wrap. Longest is 10 chars: ~122px at 19.7px against a 205px measure. Zero risk. desc +4.3% ONLY this is the one that can bite — see below. THE DESCRIPTION CAP IS THE 5-LINE LEVER AND IT IS RAISED DELIBERATELY LESS THAN THE MEASURE GREW. PASS 8's rule was "do not scale the desc type with the card without re-running the margin", because a fifth line appears when the single-line run exceeds lines x measure. The margin is safe here BY CONSTRUCTION rather than by hope: measure 188.7 -> 205.4px at 1512 (+8.9%) 993: 154.4 -> 162.3 (+5.1%) cap 11.5 -> 12px (+4.3%) 993: 10.5 -> 11 (+4.8%) The run grows strictly slower than the capacity at every width, so the run-vs-capacity margin can only improve (1512) or hold (993). It is never spent. If a later pass wants the type bigger still, re-run the harness first — that inequality is the whole safety argument. ── PASS 10 — THE SAME INEQUALITY, RE-RUN, WITH FAR MORE ROOM ───────────── The guardrail is unchanged and it is still the only thing that licenses a bigger desc cap: THE CAP MUST GROW SLOWER THAN THE MEASURE. measure 203.7 -> 277.5px at 1512 (+36.2%) cap 12 -> 13 (+8.3%) 185.6 -> 250.6px at 1366 (+35.0%) cap 11.2 -> 12.29 (+9.7%) 162.1 -> 218.6px at 1200 (+34.9%) cap 11 -> 11.5 (+4.5%) 162.3 -> 176.7px at 993 (+ 8.9%) cap 11 -> 11.5 (+4.5%) Every width passes with a wide margin — 993 is the tightest and still has the measure growing twice as fast as the cap, where PASS 9 had it at +0.3% (neutral). So this is the first pass in three that BANKS margin at 993 rather than merely not spending it. CONSEQUENCE, and it is a visible one: the longest description (104 chars) drops from FOUR lines to THREE at 1200 / 1366 / 1512. No copy is shortened — the strings in build-home.mjs are untouched, and shortening them is the Editorial Director's call, not mine — the measure simply got wide enough. 993 stays at four. The card-height clamp covers both cases, so nothing clips at any width and no line-clamp is introduced. Run-vs-capacity margins land ~33 / 27 / 18 / 27%. 1200 is the thin one (18%, "THIN" by the harness grading) and that is ACCEPTED rather than tuned, because its failure mode is graceful: gaining a fourth line still leaves ~3px of air, so it does not clip. Read a 4-line reading at 1200 in the harness as expected, not as a regression. ── THE TYPE SCALES WITH THE CARD, AND THIS TIME IT HAS TO ──────────────── PASS 9 already stated the principle — a card that grows with static type reads as the same card with more padding — and then applied it at ~+27% while the card grew 46%. That gap is part of why it did not land. A 31% wider card gets a proportional type step: eyebrow 9.5 -> 10.58px at 1512 one fixed word ("ENGINE LANE"). No risk. title 1.30 -> 1.95vw 19.7 -> 29.5px at 1512, +50%. THE loudest in-card signal of size. All seven service names are SINGLE WORDS (Content · Social · Reputation · Growth · Motion · Film · Foundation) so they cannot wrap; the longest is "Foundation" at ~183px against a 277.5px measure — 34% headroom at 1512, 36% at 993. desc +8.3% only the one that can bite; licensed above. Floors raised in step (title 15 -> 18, eyebrow to a 9.5 floor) so 993 and 1200, which sit on the card-width floor, still get a visible step. ── PASS 11 — NO TYPE CHANGE. EVERY CLAMP BELOW IS PASS 10's, UNTOUCHED. ─── *** READ THE TWO BLOCKS ABOVE AS HISTORY. Their measures (203.7 / 277.5 / 176.7px) and line counts (3 at >=1200, 4 at 993) describe the 1fr/34% anatomy and are all superseded by the table in § 4h. The GUARDRAIL they establish is what still binds and is why they are kept: THE DESC CAP MUST GROW SLOWER THAN THE MEASURE. *** PASS 11 satisfies it trivially: the cap does not move at all while the measure grows 35-57%, so run-vs-capacity can only improve. It does, at every width except 993 — see the run-margin table in § 4h. WHY THE TYPE IS FROZEN, given PASS 9/10 both argued the opposite. Their principle is right and still holds: a card that grows while its type does not reads as the same card with more padding. It does not apply here, because the growth is not going into padding. The card gets NO wider, the type scales on vw (which tracks width), and every px of the new height goes into the COVER. Scaling the type now would shrink the image to pay for it — spending the pass's only real gain on its second-order signal. It also isolates the variable. PASSES 9 and 10 each moved size AND type AND count together, which is why neither could say afterwards what did or did not land. Here exactly two things move — the card's proportion and its anatomy — so if it reads, we know what read. */ .bto-banner .bto-pw-desc { display: block; font-size: clamp(11.5px, .9vw, 13px); line-height: 1.3; margin: 0; } .bto-banner .bto-pw-eyebrow { font-size: clamp(9.5px, .7vw, 11px); letter-spacing: .14em; margin: 0 0 6px; } .bto-banner .bto-pw-title { font-size: clamp(18px, 1.95vw, 30px); line-height: 1.05; margin: 0 0 6px; } /* 4i · THE PILL IS BACK IN THE FLOW — PASS 9 reverses PASSES 7/8. PASS 7 evicted it to a corner chip to pay for the description; PASS 8 re-tested and re-refused it, correctly, on 17.2px of wedge against an 18.2px budget. Both were right on their constraint set. The constraint set changed: the founder released panel height, and re-anchoring the copy (§ 4e) takes panel height's return on copy clearance from 0.155/px to 0.74/px. The pill costs ~36px of stack = 18.2px off each wedge; the panel growth returns +39px. It fits outright, and copy clearance still goes UP (measured 14 -> computed 19 at 1512). Full arithmetic in the header. WHY IT COMES BACK AT ALL, given PASS 7's argument that a label reading "OPEN SERVICE" on all seven cards carries no information: that argument was a JUSTIFICATION for a forced trade, not a design position. Ash's reference carries the pill AND the description, and he has never once asked for the chip — it was my invention under a constraint that no longer binds. When the constraint lifts, the invention goes, not the reference's anatomy. NO MARKUP CHANGE. `font-size: 0` only collapsed the label visually; the text node never left build-home.mjs (`Open service ARROW`, :134). Removing that one declaration renders it again, so index.html still rebuilds byte-identical. GEOMETRY. 28px at 1512 — marquee-banner's base 38px was drawn for the original 470x214 card, where it was 18% of the height; 18% of 184.5 is 33, but 28 keeps the pill subordinate to the now-larger title. It sits at the BOTTOM of the text column via `margin-top: auto` (inherited from marquee-banner), so all seven pills align on one baseline even though six descriptions run three lines and one runs four. The ragged bottom PASS 7 accepted becomes ragged desc-to-pill air instead, which reads as intent. GEOMETRY ONLY BELOW — NO COLOUR, NO RADIUS, AND THAT IS THE POINT. The PASS 7/8 chip had to declare its own fill (`background: var(--bg-card)`, `color: var(--fg-ink)`) because a circle floating over a PHOTOGRAPH needs one. A pill sitting in the text column does not, and declaring it here is actively harmful: this rule is `.bto-banner .bto-pw-btn` (0,2,0), which OUT-SPECIFIES palette.css's `.bto-pw-btn` (0,1,0) no matter that palette loads later. So every colour declaration left here would strand a token the palette owner already wired: palette.css:443 .bto-pw-btn border-color --pin-hairline · color --pin-ink palette.css:444 :hover background/border --pin-primary · color --pin-on-primary palette.css:466 .bto-pw-btn border-radius --pin-r-full mokko-bridge:906 .bto-banner .bto-pw-btn border-radius --pin-r-full PASS 8's chip was silently beating all four. Releasing them restores the palette's own pill treatment — transparent with a hairline, filling with --pin-primary on hover — and it is self-healing across themes BY CONSTRUCTION rather than by my fallbacks being kept in sync. --pin-primary / --pin-on-primary are a designed PAIR, so the contrast is the palette owner's verified number, not mine. FLAG FOR ASH: the hover fill therefore changes from ink to --pin-primary. That is palette.css's declared intent for this component and MP071's work just landed, so deferring is correct — but it is a visible change he did not ask for, and it is a colour decision, which routes through him. The border WIDTH/STYLE (1px solid) still comes from marquee-banner:196, and its light-only literal colour is already overridden by palette:443 at equal specificity + later load order. Nothing here needs to restate it. `white-space: nowrap` is inherited from marquee-banner, so an overlong label would push the text column rather than wrap. "OPEN SERVICE" measures ~128px at 1512 against a 204px column and ~107px at 993 against 162px — 38-52% of margin. The harness measures it rather than trusting this. */ /* PASS 10 — the pill scales with the card, on the SAME terms as PASS 9's restore: geometry only, no colour and no radius, so palette.css:443/466 keeps ownership and the component stays self-healing across themes. Read PASS 9's note above before adding anything here — a colour declaration at this selector (0,2,0) silently out-specifies palette's (0,1,0) regardless of load order, which is exactly how PASS 8's chip stranded four tokens. 28 -> 30.2px tall at 1512, 16.4% of a 184.5 card -> 15.4% of a 196.6 card: it stays subordinate to a title that grew 50%, which is the intent. `white-space: nowrap` is still inherited, so the label can push the text column rather than wrap. "OPEN SERVICE" measures ~142px at 1512 against a 277.5px column and ~117px at 993 against 176.7 — 51% / 34% of margin, both wider than PASS 9's because the measure grew faster than the type. The harness measures this rather than trusting it. PASS 11 — the pill's own geometry is UNCHANGED (still 30.2px at 1512), but the column it sits in is now the full card width, so its nowrap headroom goes to 436.5px at 1512 and 280px at 993: 207% / 139% of margin. That risk is retired. What changed instead is the pill's SHARE of the card — 15.4% of a 196.6px card becomes 9.3% of a 325.1px one. Deliberate: it now sits at the foot of a ~130px text block under a cover image, where 30px is a normal pill, and scaling it with the card would make it compete with the title. */ /* PASS 11 — `margin-top: auto` BECOMES AN EXPLICIT GAP, and it is not a taste change. Under § 4g's new `grid-template-rows: 1fr auto` the TEXT row is `auto`, so it is exactly as tall as its content and there is no free space for `auto` to claim: inherited from marquee-banner:196 it would resolve to ZERO and the pill would sit flush against the description. The slack that used to live in this margin now lives in the cover's 1fr row, which is the whole point of the restructure — so the gap has to be declared. Declared at (0,2,0) so it beats marquee-banner's (0,1,0) `auto` regardless of load order; the base rule is left alone because it is still live and still correct for the <=992 side-by-side card. CONSEQUENCE FOR THE HARNESS: `air` (pillTop - descBottom) is now this constant, and `fifthLine` (air - lineHeight) is permanently negative — a true number answering a question that no longer exists. Both are REPLACED in qa-panel2.mjs by a measurement of the cover row, which is where the surprise-line room actually is. Leaving them would print FAIL on a design whose failure mode is strictly safer than the one they were written for. */ .bto-banner .bto-pw-btn { position: static; margin-top: clamp(10px, .8vw, 14px); width: auto; height: clamp(26px, 2vw, 32px); padding: 0 clamp(12px, 1vw, 16px); gap: clamp(6px, .55vw, 9px); justify-content: flex-start; font-size: clamp(9px, .72vw, 11px); letter-spacing: .1em; } .bto-banner .bto-pw-btn svg { width: clamp(10px, .78vw, 12px); height: clamp(10px, .78vw, 12px); } /* THE HOVER LIFT IS 6px, and it is the reason CLEAR_FLOOR is 8 and not 1. PASS 11's smallest computed clearance across the WHOLE desktop range is 13.7px — 1440's CTA wedge, not 993's. That relocation is the thing to carry forward: for three passes the tightest number lived at 993 and the harness only sampled 1512 / 1366 / 1200 / 993, so the true minimum sat in an untested gap. It is at 1440 because that width rides --p2-h's FLOOR (625) while --p2-card-h is already well up its vw term (309.6) — the panel has stopped growing and the card has not. Every clamp ramp has a width like this; 1440 is now measured. Per-width MINIMUM of the two wedges: 17.0 / 13.7 / 16.9 / 25.0 / 14.1 at 1512 / 1440 / 1366 / 1200 / 993 — every one above the 8px floor and above twice the hover lift. */ } /* ============================================================================ 5 · <=992px — unchanged. The tilt cannot carve a usable wedge at this width, so the layers separate and stack honestly: copy, then CTAs, then the rail below both. Every value here reproduces what shipped before this pass, so the narrow breakpoints do not move. ========================================================================== */ @media (max-width: 992px) { .bto-banner { display: flex; flex-direction: column; min-height: 0; padding: 56px 0 0; } .bto-banner .bto-banner-fg { order: 1; margin-bottom: 0; padding-bottom: 40px; position: static; } .bto-banner .bto-rail-area { order: 2; position: relative; left: 0; right: 0; width: 100%; margin-top: 24px; padding: 26px 0 30px; border: 0; border-radius: 0; overflow: hidden; z-index: 1; } .bto-banner .bto-banner-copy { position: relative; z-index: 3; } .bto-banner .bto-banner-grid { grid-template-columns: 1fr; align-items: start; min-height: 0; } .bto-banner .bto-banner-ctas { position: static; justify-content: flex-start; margin-top: 20px; } } /* ============================================================================ 6 · THE TEXT STRIP — PASS 7. "connect it with panel two as well." Ash, twice, and both still binding: *"the text strip connect it with panel two as well"* *"I don't want any partition, I want this whole panel to merge in one big moving posture"* ── WHAT WAS ACTUALLY WRONG (measured, then traced to source) ─────────────── NOT a colour problem and NOT a gap-between-boxes problem. Both were already correct and stayed correct: · the seam is 0px — `.bto-banner` bottom 1974, `.bto-ticker` top 1974 · both paint the SAME surface — palette.css:319 gives `.bto-banner` `var(--bg-panel2)` and palette.css:1065 gives `.bto-ticker` the same The problem was DEAD SPACE. The strip measured 318px tall to carry 90px of type — two 40px rows plus Mokko's 10px inter-row margin. The other 228px was `padding: 114px 0`. So there was a ~114px empty band between the CTAs and the first moving line, and THAT is what made the strip read as a separate block parked underneath panel 2 rather than as the panel's own closing rail. ── WHY THE PADDING WAS THERE, WHICH IS THE REAL LESSON ───────────────────── Mokko's own `style.css:13332`: .project-area.last { padding: 12vh 0; } Our markup is `

`, so that matches. 12vh at a 950px viewport = 114px. 114 + 114 + 90 = 318 exactly. mokko-bridge.css ALREADY tries to override it, twice — `:223` sets `padding-bottom: 0` and `§ E` sets both sides to `var(--bto-section)`. Both are keyed on `.bto-ticker`, ONE class, specificity 0,1,0. Mokko's is TWO classes, 0,2,0. Specificity beats load order, so both of ours have always lost and the page has been running Mokko's demo spacing the whole time. That is the third inert-rule bug on this page (`.bto-work-head` that was never in the DOM; `#everything .bto-ticker` deleted at the top of this file; now this). palette.css § G2 hit the same wall on the same element for COLOUR and solved it the same way — it had to restate the span rule at three classes to beat `.project-area .ms-text-ticker .ms-tt__text span`. The rule below is keyed at THREE classes for exactly that reason. ── THE FIX, AND WHY IN PLACE RATHER THAN MOVING THE MARKUP ───────────────── Considered moving the ticker inside `

` in build-home.mjs. Rejected, on structure rather than on taste: a) `.bto-banner` at >=993 is `display: block; height: var(--p2-h)` — a FIXED-height stage that is already fully consumed by an `inset: 0` rail and two absolutely-positioned overlays. A ticker dropped inside it is either clipped away by the panel's `overflow: hidden` or forces --p2-h to absorb it, which invalidates every wedge number solved in § 1. b) there is no wrapper between the `

` and `.bto-banner` — they are the same element. "Inside the section but outside .bto-banner" does not exist without adding a div, i.e. restructuring the signed-off panel. c) the visual goal is already met without moving anything: same surface, 0px seam. The ONLY thing making it read as a separate block was 114px of Mokko demo padding, and that is a one-rule fix. So: geometry only, no markup change, index.html stays byte-identical to what build-home.mjs emits. (Note for whoever revisits this: if the ticker IS ever nested, the deleted `#everything .bto-ticker` rule from the top of this file would have switched back on and added `margin-top: 48px` — i.e. it would have re-created a third of the dead band it was written to remove. It is gone now, so that trap is closed either way.) ── THE VALUES ───────────────────────────────────────────────────────────── Ash on the strip's own size: *"make the text strip in the bottom like smaller by 50%. Like I want it to be very thin."* The 40px type is already the halved value; the padding is what was fat. Asymmetric on purpose: TOP clamp(8px, .7vw, 12px) — hugs panel 2. Not zero: at zero the 40px caps sit ~6px off the seam and read as a rendering accident rather than a decision. BOTTOM clamp(16px, 1.4vw, 24px) — THE WORK below already brings its own 72px of padding-top, so the rhythm down the page is preserved without this side having to carry it. Sides stay 0 so the marquee keeps running full bleed — Mokko's `.project-area { padding-left/right: 40px }` is a single class and is beaten by the shorthand below, which is the intended outcome, not a side effect. Computed at 1512: strip 90 + 10.6 + 21.2 = ~122px (was 318). CTA box bottom to the first text row = 15.9 (panel's own CTA offset) + 10.6 = ~26px, plus ~6px of the row's internal leading before the caps start. One field. ========================================================================== */ .project-area.last.bto-ticker { padding: clamp(8px, .7vw, 12px) 0 clamp(16px, 1.4vw, 24px); } /* ============================================================================ HEADER at very narrow widths — fixes a real horizontal page scroll. Measured at 320px: the document scrolled 345px in a 320px viewport. The outermost offender is `.main-header__widgets` (right edge 345) — Mokko's header controls plus the "Book a brand audit" CTA we added to it. Mokko's own header never carried a text button, so it has no rule for this. Everything else that reported as overflowing (the ticker rows, the rail's overhang) sits inside an `overflow: hidden`/`clip` container and is visually contained — those were bounding-box artefacts, not real overflow. The CTA is the widest item and its destination is also in the menu, so it steps down and then out rather than forcing a scrollbar on the whole page. ========================================================================== */ @media (max-width: 420px) { .bto-nav-cta { padding-left: 14px; padding-right: 14px; font-size: 11px; } } @media (max-width: 380px) { /* Contact is still one tap away in the menu */ .bto-nav-cta { display: none !important; } } /* belt-and-braces: nothing on this page should ever scroll the page sideways */ html, body { overflow-x: clip; } /* 320px only: the burger sat 25px off-screen (widgets right edge 345 in a 320 viewport), so part of the tap target was clipped away. Mokko's `.action-menu` is an animated component — shrinking the LOGO instead frees the same room and leaves their burger untouched. 320 is a real device (iPhone SE 1). */ @media (max-width: 360px) { .main-header__logo .bto-logo { width: 88px; } .main-header__logo .bto-logo img, .main-header__logo .bto-logo svg { width: 100%; height: auto; } }