/* ============================================================================ SafeStay Vista Pacifico — V1 (EN) — GRID ---------------------------------------------------------------------------- DERIVED, not assumed. Every number below comes from real left/right edges measured in ../../figma-truth/*.spec.md. Read the derivation before you use any of it, because the headline result is a negative one. --------------------------------------------------------------------------- DERIVATION 1 — the margin. This one is solid. --------------------------------------------------------------------------- Every section that declares horizontal padding declares 120, and it is 120 at BOTH design widths (EN 1280, ES 1440). It does not scale. 00-hero §1 padding 48 / 120 / 48 / 120 03-unique §4.2 Text frame paddingLeft = paddingRight = 120 05-ecology-b §5.1/5.2 eyebrow left 120 at 1280 AND at 1440 06-ecology-c §8.1 "side margin 120 / 120 — constant" 11-recovery §4 "Derived margin = 120 (the only outer inset that exists)" 21-logos §5.2 "Outer margin = 120px, identical at 1280 and at 1440" => --mk-page-x is a FIXED px margin. content = viewport - 240. 1280 -> 1040. 1440 -> 1200. --------------------------------------------------------------------------- DERIVATION 2 — the 12 columns. Solve 12c + 11g = 1040. --------------------------------------------------------------------------- g = 16 -> c = 72 (integer, but fails at 1440: c = 85.33) g = 24 -> c = 64.667 (non-integer at 1280; integer 78 at 1440) g = 40 -> c = 50 (integer at 1280; fails at 1440: c = 63.33) Only g = 40 lands the page's real recurring edges on whole column counts: eyebrow 120 -> 1160, width 1040 = columns 1-12 exact (05, 06) pull-quote 210 -> 1070, width 860 = columns 2-11 exact (05, 06) 06-ecology-c §7 searched every gutter from 4 to 52 and states that 40 is the ONLY value for which both 1040 and 860 are whole column counts. => If a 12-column reading is wanted at 1280, it is: margin 120 · content 1040 · 12 columns · gutter 40 · column 50 · pitch 90 check: 12x50 + 11x40 = 600 + 440 = 1040 exact --------------------------------------------------------------------------- DERIVATION 3 — and here is the part a builder must not skip. --------------------------------------------------------------------------- THE PAGE IS NOT LAID OUT ON THAT GRID. Twelve of the twenty-two specs test the grid explicitly and twelve of them return a negative verdict. The fit above is a coincidence of the 1280 artboard and it collapses at 1440, because the measures are FIXED PX that do not scale: the 860 pull-quote is still 860 at 1440 (would be ~993 if it were a 10-column span) — 05 §5.3, 06 §7 the 597 copy measure is still 597 at 1440 (would be 690) — 03 §4.3 the 563 text rail and 443 image column never move — 11 §4, 03 §4.3 the footer's 5-track gutter is 30 at 1280 and 24 at 1440 — it SHRINKS as the viewport grows, which no column system does — 21 §5.2 Sections whose specs return "NOT a 12-column grid": 00, 01, 02, 03, 04, 05, 06, 07 (gallery), 09, 11, 17, 21. Only 06's header band and 05's pull-quote coincide with it, and only at 1280. => THE RULE FOR SECTION BUILDERS: Use .mk-container / .mk-bleed / the fixed .mk-measure-* primitives. Use .mk-grid12 ONLY to verify a section against the Figma overlay, or for a section whose own spec says it lands on columns. Never reach for it because "a page should have a grid". Forcing it breaks 1440. ========================================================================== */ /* ========================================================================== 1. FRAME ========================================================================== */ .mk-page { /* Track the viewport up to the 1440 ES artboard (4080:122), then cap. 1280 -> 1280 (strict no-op); 1440 -> 1440, so .mk-container's content box is 1200 = 1440 - 2*120, which is what 01 §4 / 02 §4.3 / 04 §6 / 05 §5.2 / 16 §6.2 / 21 §5.2 all independently read off the ES frame. WAS `1280px`, and that one declaration was the whole 1440 defect: it capped and centred .mk-container, so at 1440 the page margin was 200 and the measure 1040 instead of 120 and 1200. Seven of the eight BROKEN sections at 1440 traced to it; the sections that inset with --mk-page-x directly (02/03/08/09-13) were already right, which is why the page was internally inconsistent at 1440 and only at 1440. NOT plain `100%`: 04-ecology.css and 00-hero.css consume the token inside `calc(var(--mk-frame) - 2*var(--mk-page-x))` where the percentage base is a Flickity cell (1292.8px at 1280, `percentPosition:true`), not the viewport — that would silently regress the 1280 ground truth by 12.8px. review/deepdive/responsive-1440.md §1.2, verified live at both widths. */ --mk-frame: min(100vw, 1440px); width: 100%; margin-inline: auto; overflow-x: clip; } /* Every section is a full-bleed band. Grounds, scrims and photography run edge to edge; only the CONTENT is inset. This is how every spec describes it (e.g. 06-ecology-c §7 rule 5 "media band full-bleed"). */ .mk-section { position: relative; width: 100%; } /* ========================================================================== 2. THE CONTENT BOX — the page's real horizontal system ========================================================================== */ .mk-container { width: 100%; max-width: var(--mk-frame); margin-inline: auto; padding-inline: var(--mk-page-x); /* fixed 120, does not scale */ } /* Content that must reach the viewport edge, inside a section that is otherwise inset. 03-unique's image column and 11/12's image rails deliberately overshoot the right margin by exactly 120. */ .mk-bleed { width: 100%; margin-inline: 0; padding-inline: 0; } .mk-bleed-right { margin-right: calc(var(--mk-page-x) * -1); } .mk-bleed-left { margin-left: calc(var(--mk-page-x) * -1); } /* ========================================================================== 3. FIXED MEASURES — px, not spans. These ARE the layout. Each is identical at 1280 and 1440, which is the proof they are not spans. ========================================================================== */ .mk-measure-860 { width: 860px; max-width: 100%; margin-inline: auto; } /* 05 §5.3, 06 §7 rule 2 */ .mk-measure-597 { width: 597px; max-width: 100%; } /* 03 §4.3 copy; 11 caption */ .mk-measure-563 { width: 563px; max-width: 100%; } /* 11 §4, 12 text rail */ .mk-measure-443 { width: 443px; max-width: 100%; } /* 03 §4.3 image column */ .mk-measure-323 { width: 323px; max-width: 100%; } /* 11 §4 text block */ /* Image rail = 100% minus the text rail, full-bleed right. 11 §4. */ .mk-rail-images { width: calc(100% - 563px); } /* ========================================================================== 4. RECURRING TRACK PATTERNS — each cites the section that authored it ========================================================================== */ /* Footer link row: 5 equal fill tracks. 5 x 184 + 4 x 30 = 1040 exact. 21-logos-footer §1.2.1. NOTE the ES gutter is 24, not 30 — the V2 build overrides --mk-track-gap, it is not a breakpoint rule. */ .mk-tracks-5 { display: flex; gap: var(--mk-space-30); } .mk-tracks-5 > * { flex: 1 1 0; min-width: 0; } /* Card gallery: fixed 410x600 cells on a 4px pitch, starting 4px from the viewport edge and overflowing right. 07-building §5.3. Figma OVERRIDES Salient here: gutter 4 (not 10), radius 4 (not none). */ .mk-gallery { display: flex; gap: var(--mk-space-4); padding: var(--mk-space-4); overflow-x: auto; scrollbar-width: none; } .mk-gallery::-webkit-scrollbar { display: none; } .mk-gallery > * { flex: 0 0 410px; height: 600px; border-radius: var(--mk-radius-card); } /* Image stack rhythm: 4 pad / 4 gap / 4 gap / 4 pad. 09, 11, 12. */ .mk-stack-4 { display: flex; flex-direction: column; gap: var(--mk-space-4); padding: var(--mk-space-4); } /* ========================================================================== 5. THE 12-COLUMN OVERLAY — verification tool, not a layout primitive Read DERIVATION 3 before using this for anything that ships. ========================================================================== */ .mk-grid12 { --mk-cols: 12; --mk-gutter: 40px; /* derived; see DERIVATION 2 */ --mk-column: 50px; /* (1040 - 11 x 40) / 12 */ --mk-pitch: 90px; /* column + gutter */ display: grid; grid-template-columns: repeat(var(--mk-cols), var(--mk-column)); column-gap: var(--mk-gutter); } /* Debug overlay. Add `mk-debug-grid` to to see the columns. */ .mk-debug-grid .mk-container::after { content: ""; position: absolute; inset: 0 var(--mk-page-x); pointer-events: none; z-index: 9999; background: repeating-linear-gradient( to right, rgba(255, 0, 221, 0.14) 0, rgba(255, 0, 221, 0.14) 50px, transparent 50px, transparent 90px); } /* ========================================================================== 6. RESPONSIVE The two captured frames prove ONLY the 1280 and 1440 cases. Everything below 1280 is reasoned from the auto-layout modes and constraints the specs actually read (00-hero §8, 06-ecology-c §8, 09 §"Mobile"), never invented. 1050 is Salient's own data-header-breakpoint on the founder-bound demo, and 00-hero §8 independently identifies the nav as the first thing to break. ========================================================================== */ @media (max-width: 1279px) { .mk-page { --mk-frame: 100%; } } @media (max-width: 1049px) { /* 00-hero §8: EN needs 846px of fixed nav pills, ES 924. ES overflows first just above here. Collapse the four text links into the off-canvas menu, keeping logo · CTA · search · hamburger. */ .mk-page { --mk-page-x: 64px; } } @media (max-width: 1024px) { .mk-page { --mk-page-x: 48px; } .mk-measure-860, .mk-measure-597, .mk-measure-563, .mk-measure-443, .mk-measure-323 { width: 100%; } .mk-rail-images { width: 100%; } .mk-tracks-5 { flex-wrap: wrap; } /* `flex-grow: 1` let the fifth, orphaned column stretch to the full row. `flex-grow: 0` with an explicit half-minus-half-gap basis makes all five columns match: in the 928px box 50% = 464, -15 = 449, and two per row is 449 + 30 + 449 = 928 exactly, with the orphan staying 449 instead of 928. Width-local — this rule is already inside the 1024 block, and the <=640 block below switches to flex-direction: column regardless. review/deepdive/responsive-1024.md §10 P1. */ .mk-tracks-5 > * { flex: 0 1 calc(50% - (var(--mk-space-30) / 2)); } } @media (max-width: 640px) { .mk-page { --mk-page-x: 24px; } .mk-tracks-5 { flex-direction: column; gap: var(--mk-space-24); } .mk-gallery > * { flex: 0 0 78vw; height: auto; aspect-ratio: 410 / 600; } }