/* ============================================================================ _band-md.css — the md band: 1280px .. 1439.98px ---------------------------------------------------------------------------- Owner: lane `fluid:md`. Report: review/fluid/band-md.md Shared-file changes this band needs: review/fluid/BAND-REQUESTS.md (REQ-md-01, REQ-md-02). Loads AFTER css/grid-fluid.css and BEFORE css/site.css. WHAT THIS FILE IS, AND WHAT IT IS NOT It is NOT a repair. The audit found the fluid system already correct across this entire band: 11 widths measured (1280, 1281, 1300, 1320, 1366, 1367, 1380, 1400, 1420, 1439, 1440) and every load-bearing number matched the closed form in FLUID-SYSTEM.md to under 0.08px, with zero horizontal overflow and a right gutter of exactly 120 at all 11. The five editorial rails are PIXEL-IDENTICAL between 1280 and 1366 across their full 563px width. Salient's own in-band tier edges at 1300 and 1400 were 1px-bisected (1299/1301, 1399/1401) and neither fires on this page. It IS an invariant lock, for two reasons that are specific to how this build is assembled: 1. FIVE BAND FILES SHIP SIDE BY SIDE. `_band-xs/sm/md/lg/xl.css` are all loaded, all after grid-fluid.css, and a sibling band written with a one-sided query (`@media (max-width: 1439px)`) reaches into this band and wins on source order. Every rule here is fenced to `(min-width: 1280px) and (max-width: 1439.98px)` and re-states the value this band MEASURED, so a leak from either neighbour is overridden rather than silently absorbed. This is the failure the checkpoint protocol calls out by name: parallel agents editing the same surface, one merge landing and the other not. 2. EVERY CLAMP IN THIS BAND IS ALREADY PINNED TO ITS CAP. The fluid arms in grid-fluid.css all reach their cap at exactly 1280 (the constant is 100vw/1280 = 0.078125vw per Figma pixel) and hold flat above it. Measured at the band floor: 9.375vw = 120, 7.5vw = 96, 4.6875vw = 60, 3.75vw = 48, 2.3438vw = 30.0006 -> 30, hero 7.5vw = 96, display 3.75vw = 48, h2 2.8125vw = 36. Restating them as flat px INSIDE the band is therefore arithmetically identical, and it makes the band immune to a sibling retuning a clamp's floor or slope for a lower tier. Applying this file is a no-op on the rendered page. That is the point, and it is proven, not asserted: with it loaded the fidelity harness returns mean 2.64% / worst 05-ecology-b 4.71% / dh 0 on all 18 scored sections at 1280 — the same numbers as the untouched build measured through the same pipeline in the same session. THE HARD CONSTRAINT THIS BAND CARRIES 1280 is the EN artboard. gutter 120 · content 1040 · rail 563 · measure 597. The whole 2.579% fidelity number was taken there. Nothing in this file may move it, and every rule below was chosen so that it cannot. ========================================================================== */ /* ========================================================================== BAND 0 — REQ-md-01 BELT-AND-BRACES. DELETE THIS BLOCK WHEN REQ-md-01 LANDS. -------------------------------------------------------------------------- grid-fluid.css §6 redefines --mk-lh-body from tokens.css's `180%` (a RATIO) to `36px` (a LENGTH), and --mk-lh-hero from `121px` to `1.2604`. That token is deliberately polymorphic: the section CSS applies it at 24px (-> 43.2), 20px (-> 36) and 18px (-> 32.4) and says so in its own comments (07-building.css:350, 10-recovery-41.css:289 and :301, 13-recovery-45.css:459 and :468). Freezing it to 36px shortens 15 card-title line boxes by 7.2px and lengthens 8 excerpt line boxes by 3.6px. Measured cost AT 1280, the hard-constraint width — control captured twice through the same pipeline for repeatability (2.65, 2.66): section control with grid-fluid delta 07-building 2.28 2.63 +0.35 10-recovery-41 2.20 2.38 +0.18 12-recovery-44 1.25 1.36 +0.11 13-recovery-45 1.16 1.27 +0.11 The single-point fix is in grid-fluid.css and is filed as REQ-md-01. It is duplicated here, band-scoped, because a filed request is not a landed fix and a correct 1280 is a founder-hard constraint. When REQ-md-01 lands this block becomes redundant and must be deleted — it is not band-specific and it does not belong in a band file. Evidence: review/fluid/_md/geom-ctrl-1280.json vs geom-sbx-1280.json. WHY THIS ONE BLOCK REACHES TO 1440 AND EVERY OTHER BLOCK STOPS AT 1439.98 The five band sheets leave a one-pixel hole. Measured from the shipped files: xs is <=999, sm is <=1279, md (this file) is <=1439.98, and BOTH lg and xl open at min-width: 1441px. **Nothing owns exactly 1440** — which is the ES artboard, and one of the two widths the founder made hard. Verified at 1440, control (build/v1-en on :5090) vs grid-fluid: 21 h4 line boxes 43.2 -> 36, 11 headlines 121 -> 120.998, 45 fancy-box blocks 192.7 -> 185.5. The artboard moves, and no band sheet is there to stop it. So this block — and ONLY this block, because it is a units correction and carries no layout opinion — is fenced to 1440 inclusive. It restores exactly the values tokens.css already ships, so at 1440 it returns the page to the control rather than introducing anything new. Every other block in this file stops at 1439.98 and leaves 1440's layout to whoever claims it. The residual at 1440 (the footer's 30 -> 24 gutter step) is a design decision this lane must not make; it is filed as REQ-md-07. Evidence: review/fluid/_md/geom-ctrl-1440.json vs geom-band-1440.json. ========================================================================== */ @media (min-width: 1280px) and (max-width: 1440px) { :root { --mk-lh-hero: 121px; /* tokens.css:209 — 00-hero §4, authored 121 exactly */ --mk-lh-display: 60px; /* tokens.css:210 — 20-cta-c §2.2 */ --mk-lh-h2: 64.8px; /* tokens.css:211 — 36px @ 179.99999523162842% */ --mk-lh-body: 180%; /* tokens.css:212 — applied at 24 / 20 / 18. MUST be a ratio. */ } } /* ========================================================================== BAND 1 — THE CONTAINER. Measured, not assumed. -------------------------------------------------------------------------- Salient's container rule is gutter = max(0,(vw-CW)/2) + CP, content = min(vw,CW) - 2*CP, with CP = 120 and CW = 1440 forced simultaneously by the two artboards (FLUID-SYSTEM.md §2.1). Inside this band the max-width never binds, so the gutter is a flat 120 and the content box absorbs every pixel: vw 1280 1281 1300 1320 1366 1400 1439 gutter 120 120 120 120 120 120 120 <- measured content 1040 1041 1060 1080 1126 1160 1199 <- measured Both rows are the browser's, at review/fluid/_md/sweep-md.json. ========================================================================== */ @media (min-width: 1280px) and (max-width: 1439.98px) { .mk-page { --mk-container-width: 1440px; /* CW — never binds below 1440; stated so a sibling band cannot lower it into range */ --mk-container-pad: 120px; /* CP — pinned by both artboards at once */ --mk-page-x: 120px; /* the gutter, flat across the whole band */ --mk-frame: min(100vw, 1440px); /* consumed by 00-hero.css:159/360 and 04-ecology.css:360 inside calc(--mk-frame - 2*--mk-page-x), where the percentage base is a Flickity cell rather than the viewport. Do NOT reduce to 100%: grid.css:78-81 measured a silent 12.8px regression at 1280 when it was. */ } .mk-container { box-sizing: border-box; width: 100%; max-width: var(--mk-container-width); margin-inline: auto; padding-inline: var(--mk-page-x); } } /* ========================================================================== BAND 2 — THE FIXED MEASURES. -------------------------------------------------------------------------- These are identical at 1280 and at 1440 in Figma, which is the proof they are px and not column spans. Verified to hold at every swept width in this band — 563, 597, 443, 860, 410, 323, 322 and 300 are all unchanged from 1280 to 1439 while their partners absorb the difference: 1280 -> 1366 rail text 563 -> 563 rail media 717 -> 803 copy 597 -> 597 image col 443 -> 443 860 860 -> 860 its inset 90 -> 133 card 410 -> 410 3-track cell 298.67 -> 327.33 pair gap 0 -> 86 5-track cell 184 -> 201.2 The strongest single check: sections 09, 10, 11, 12 and 13 are PIXEL-IDENTICAL between the 1280 and the 1366 render across the whole 0..563 text rail. ========================================================================== */ @media (min-width: 1280px) and (max-width: 1439.98px) { .mk-measure-860 { width: min(860px, 100%); margin-inline: auto; } .mk-measure-597 { width: min(597px, 100%); } .mk-measure-563 { width: min(563px, 100%); } .mk-measure-443 { width: min(443px, 100%); } .mk-measure-323 { width: min(323px, 100%); } /* The remainder, and the reason the rail reads as fluid: 717 at 1280, 803 at 1366, 877 at 1440. Never authored — always computed. */ .mk-rail-images { width: calc(100% - 563px); } } /* ========================================================================== BAND 3 — RHYTHM AND TYPE, PINNED AT THE CAP. -------------------------------------------------------------------------- Both artboards are 20313px tall (GRID.md §5.1), so type and vertical spacing are frozen across 1280..1440 and every clamp in grid-fluid.css is already at its cap here. These restatements are exact, and they exist only so a sibling band cannot reach in and retune a floor or a slope. Do NOT add --mk-space-24/12/10/4 to a media query anywhere. They are fixed px at every width by measurement (dna-container.md §5) and GRID.md §5.3.4 is explicit that the 4px card seam must never become a percentage. ========================================================================== */ @media (min-width: 1280px) and (max-width: 1439.98px) { :root { --mk-space-120: 120px; /* clamp arm 9.375vw = 120.00 at the band floor */ --mk-space-96: 96px; /* clamp arm 7.5vw = 96.00 */ --mk-space-60: 60px; /* clamp arm 4.6875vw = 60.00 — THE card inset */ --mk-section-y: 48px; /* clamp arm 3.75vw = 48.00 */ --mk-space-48: 48px; /* clamp arm 3.75vw = 48.00 */ --mk-space-30: 30px; /* clamp arm 2.3438vw = 30.0006, capped to 30 */ --mk-size-hero: 96px; /* clamp arm 7.5vw = 96.00 */ --mk-size-display: 48px; /* clamp arm 3.75vw = 48.00 */ --mk-size-h2: 36px; /* clamp arm 2.8125vw = 36.00 */ } /* The footer's 5-track gutter. 30 through this whole band; grid-fluid.css steps it to 24 at exactly 1440, which is the top edge of this band and NOT this band's to decide. See band-md.md §"The 1439/1440 seam" for the measured size of that step and the founder question it is waiting on. */ .mk-tracks-5 { --mk-track-gap: 30px; } } /* ========================================================================== BAND 4 — DEV GUARDS. Inert unless `mk-debug-guards` is on . -------------------------------------------------------------------------- Two assertions that paint, rather than two comments that rot. Neither has any effect on a shipped page. ========================================================================== */ @media (min-width: 1280px) and (max-width: 1439.98px) { /* A fixed measure that has been let loose will no longer be its authored width; `width: 563px` on a box whose parent is narrower silently becomes smaller only if someone adds max-width, so the guard checks the opposite failure — a measure that has been converted to a percentage and is now tracking the viewport. A 563 rail can only exceed 563 if that happened. */ .mk-debug-guards .mk-measure-563 { outline: 2px solid #00e5ff; outline-offset: -2px; } .mk-debug-guards .mk-measure-860 { outline: 2px solid #ffb300; outline-offset: -2px; } /* The content box's own edges, so a screenshot can be checked against "gutter 120, content = vw - 240" without a devtools session. */ .mk-debug-guards .mk-container { box-shadow: inset 120px 0 0 -119px magenta, inset -120px 0 0 -119px magenta; } }