/* ============================================================================ APPLIED COPY — build/v1-en/css/grid-fluid.css ---------------------------------------------------------------------------- Source of record: review/fluid/grid-fluid.css (lane `derive-fluid`). This copy carries exactly ONE functional change, made by the single-owner pass `fluid-apply` on 2026-08-17: REQ-md-01's --mk-lh-body deletion (see the long note in §6). Everything else is byte-identical to the source. LINK POSITION IS LOAD-BEARING. This file must be linked IMMEDIATELY AFTER css/grid.css and BEFORE css/site.css and the generated sections/*.css block. * after grid.css, because it supersedes grid.css §1/§2/§6 at equal specificity and only source order decides that; * before the section sheets, because §9's `.mk-hero { min-height: 100vh }` is (0,1,0) and must LOSE to 00-hero.css:115's `max(900px, 100vh)` floor. Linked after the section sheets it would silently delete that floor. The six _band-*.css sheets go LAST, after css/reduced-motion.css. _tools/compose.py emits both positions and is the only place to change them. KNOWN, DELIBERATELY UNCHANGED: * §7.2 `@media (min-width:1440px){ .mk-tracks-5{--mk-track-gap:24px} }` INCLUDES 1440 and therefore steps the footer 5-track gutter 30 -> 24 at the ES artboard. This is `derive-fluid` lossiness item 5 / OPEN-QUESTIONS Q6 and IS A FOUNDER DECISION, recorded in build/FLUID-APPLIED.md. It is kept because verify-fluid.py's hard-constraint set B requires the 24, and because V2 already reaches 24 by a language override, so the two agree. * §4.2's `.mk-rail` cap (REQ-XL-5) and §7.3's `.mk-gallery` are DEAD CODE against V1's markup — neither class appears in index.html. Left in place rather than deleted so this file stays diffable against its source. ============================================================================ */ /* ============================================================================ grid-fluid.css — the Mykrobial fluid layout system ---------------------------------------------------------------------------- Lane: derive-fluid. Supersedes build/v1-en/css/grid.css §1, §2, §6. Keeps every class name and token name grid.css already ships, so this is a drop-in replacement, not a parallel system. WHY THIS FILE EXISTS Founder correction: "It also needs to scale effectively for all devices AS DESIGNED IN THE SALIENT TEMPLATE. Just because it's designed at 1280 or 1440px doesn't mean it should be fixed." THE RECONCILIATION, IN ONE BLOCK Salient's measured container rule (review/fluid/dna-container.md, 64/64 points exact across 4 demos x 16 widths) is: vw >= 1000 : gutter = max(0, (vw - CW)/2) + CP content = min(vw, CW) - 2*CP vw <= 999 : gutter = 0.06 * vw content = 0.88 * vw Feed the two Figma artboards into it and solve for CW and CP: 1280: min(1280,CW) - 2*CP = 1040 and max(0,(1280-CW)/2) + CP = 120 1440: min(1440,CW) - 2*CP = 1200 and max(0,(1440-CW)/2) + CP = 120 CW < 1280 -> content is CW-2CP at BOTH widths, so 1040 = 1200. FALSE. 1280 <= CW < 1440 -> 1280-2CP = 1040 -> CP = 120 -> CW - 240 = 1200 -> CW = 1440, contradicting CW < 1440. FALSE. CW >= 1440 -> 1280-2CP = 1040 -> CP = 120; 1440-240 = 1200 ok; gutters both 0 + 120 = 120 ok. TRUE. The solution is UNIQUE: CP = 120px exactly, CW >= 1440px. Salient's own formula, unmodified, reproduces both artboards to the pixel. The earlier lane's "the gutter is fixed 120 at both widths" was correct AND the system is fluid. Both founder constraints hold at the same time. CW is then the ONLY free parameter, and it only affects widths above 1440. It is set to 1440 here; see FLUID-SYSTEM.md §2.3 for the evidence. THE SECOND RULE, for everything that is not the container Both artboards are 1280 x 20313 and 1440 x 20313 -- the SAME HEIGHT to the pixel (GRID.md §5.1). If type or vertical spacing scaled with viewport, the 1440 frame would be ~12.5% taller in every text block. It is not. So type and spacing are FROZEN across 1280..1440, and Salient's raw-vw layer cannot be used unmodified there. Salient's OTHER shipped mechanism -- a value that holds flat above a threshold (its Layer 1 tier ramp) -- is used instead, with the threshold at 1280: measure(vw) = clamp( floor , (figma/1280) * 100vw , figma ) At 1280 the middle arm equals figma exactly. At 1440 it exceeds figma and the cap returns figma. Both artboards exact; fluid everywhere below. ========================================================================== */ /* ========================================================================== 1. THE FRAME AND ITS TWO PARAMETERS ========================================================================== */ .mk-page { /* CW -- Salient's --container-width. Must be >= 1440 (proof in the header). 1440 makes the ES artboard the exact top of the fluid band, and caps the largest authored gap in the design (the 160px SPACE_BETWEEN remainder in 03-unique / 08-recovery) at exactly the value the artboard shows. Any larger CW invents a gap size the design never displays. Salient's own demos ship 1425 (tether) .. 2000 (architect), so 1440 is inside the shipped range, not an invention. To widen the page, change THIS ONE NUMBER. Nothing else needs to move. */ --mk-container-width: 1440px; /* CP -- Salient's --container-padding. NOT a free choice: pinned to 120px by the two artboards simultaneously (see the uniqueness proof above). Salient's demos ship 40 (tether) / 60 (saas) / 70 (architect) / 100 (resort), so 120 is at the top of the family but the same mechanism. */ --mk-container-pad: 120px; /* Salient's --mobile-container-width, expressed as its gutter. 88% container == 6% gutters. Measured at 32/32 points, identical in all four demos. Two independent corroborations that this is the right number for SafeStay too: 6% of 999 = 59.94, inside GRID.md's independently inferred tablet margin of "48-64"; and 6% of 400 = 24, exactly GRID.md's independently inferred phone margin of 24. One percentage reproduces both numbers the design lane arrived at from the other direction. */ --mk-mobile-gutter: 6vw; /* THE GUTTER FUNCTION. Tier B/A value; the tier C/D value is set below. This token is consumed by .mk-container's padding AND by every negative margin in §3, so the two can never desynchronise and leave a seam. */ --mk-page-x: var(--mk-mobile-gutter); /* Kept for compatibility: 04-ecology.css and 00-hero.css consume --mk-frame inside calc(var(--mk-frame) - 2*var(--mk-page-x)) where the percentage base is a Flickity cell rather than the viewport. Do not replace those with 100%; it silently regresses the 1280 ground truth by 12.8px. (grid.css:78-81, verified live at both widths.) */ --mk-frame: min(100vw, var(--mk-container-width)); width: 100%; margin-inline: auto; /* Salient itself ships a 1-2px horizontal overflow at every desktop width (dna-type-space.md §8 note 8). We do not reproduce that; we clip. */ overflow-x: clip; } /* THE CONTAINER BREAKPOINT. 1px-bisected and reload-verified in all four Salient demos: 999 is the last mobile row, 1000 the first desktop row. Above it the gutter is a flat CP for the whole band up to CW -- this is the measured behaviour, 32/32 exact, and it is why 120 stays 120 from 1280 to 1440 without being "fixed px". */ @media (min-width: 1000px) { .mk-page { --mk-page-x: var(--mk-container-pad); } } /* Every section is a full-bleed band; only the CONTENT is inset. */ .mk-section { position: relative; width: 100%; } /* ========================================================================== 2. THE CONTENT BOX One declaration block. It is Salient's container verbatim: a max-width box with auto margins and fixed padding inside it. ========================================================================== */ .mk-container { box-sizing: border-box; width: 100%; /* NOT min(100vw, CW): 100vw includes the classic scrollbar and would push 1-2px of overflow. width:100% resolves against the client box. */ max-width: var(--mk-container-width); margin-inline: auto; padding-inline: var(--mk-page-x); } /* Content that must reach the viewport edge from inside an inset section. 03-unique's image column and 11/12's image rails overshoot the right margin by exactly one gutter. These consume the same token as the padding above, so they track it through every breakpoint automatically. */ .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); } .mk-bleed-both { margin-inline: calc(var(--mk-page-x) * -1); } /* ========================================================================== 3. THE FLUID SCALAR Everything frozen across 1280..1440 uses this shape. --mk-fig is the Figma px number as a UNITLESS value; the middle arm is (fig/1280)*100vw expressed as fig * 0.078125vw, which is fig/1280 exactly. ========================================================================== */ /* 100vw / 1280 = 0.078125vw per Figma pixel. This constant is the whole system: it is what makes every clamp() reach its cap at exactly 1280. */ :root { --mk-vw-per-fig: 0.078125vw; } /* ========================================================================== 4. HORIZONTAL MEASURES Each is identical at 1280 and 1440 in Figma, which is the proof they are not column spans. They are reproduced as fixed px inside the desktop band and released at the 999 stack point -- NOT clamped, because between 1000 and 1440 the artboards say they do not move and the flexible partner absorbs every pixel of the difference. ========================================================================== */ .mk-measure-860 { width: min(860px, 100%); margin-inline: auto; } /* 05 §5.3, 06 §7 */ .mk-measure-597 { width: min(597px, 100%); } /* 03 §4.3 copy */ .mk-measure-563 { width: min(563px, 100%); } /* 11 §4 text rail */ .mk-measure-443 { width: min(443px, 100%); } /* 03 §4.3 image */ .mk-measure-323 { width: min(323px, 100%); } /* 11 §4 text */ /* ---- 4.1 THE CAPPED-FLEX PAIR ------------------------------------------ The primitive that makes 03-unique and 08-recovery exact at BOTH widths with one rule and no breakpoint. flex-grow = the Figma width as a bare number flex-basis = 0 max-width = the Figma width in px content 1040 : free space 1040 distributed 597:443 -> 597 + 443, gap 0. ok content 1200 : both hit max-width and freeze; the 160px remainder is handed to justify-content -> gap 160. ok content 760 : neither reaches its cap; they shrink in the authored ratio -> 436.3 + 323.7 rather than overflowing. ok Usage:
...
...
------------------------------------------------------------------------ */ .mk-pair { display: flex; justify-content: space-between; align-items: flex-start; gap: 0; } .mk-pair__item { flex: var(--mk-w) 1 0; max-width: calc(var(--mk-w) * 1px); min-width: 0; } /* ---- 4.2 THE EDITORIAL RAIL (sections 09-13) --------------------------- 563 is measured from the VIEWPORT edge and CONTAINS the page gutter, so the text measure inside it is 563 - 2*120 = 323. The media side takes the remainder and bleeds to the right edge (right margin is zero in 09-13). 1280 -> 563 + 717 1440 -> 563 + 877 1000 -> 563 + 437 GRID.md: the rail holds until the fluid side drops below ~380px. That happens at vw 943, which is below the 999 stack point, so a plain flex-basis is sufficient and no shrink rule is needed. THE max-width IS LOAD-BEARING, and it is a flagged judgement, not a measurement. These rows are full-bleed (right margin is zero at both artboards), so without a cap the media side is vw - 563 forever: measured 1357 at 1920, a 29/71 split against 44/56 at 1280. Figma says nothing above 1440. The cap is applied because GRID.md §5.2 already asks for exactly this ("SPACE_BETWEEN grows the gap without bound ... should be capped with a max-width on the page shell") and the unbounded rail is the same class of problem. It is a no-op at and below 1440, so BOTH artboards are unaffected. The BAND still bleeds -- put the background on .mk-section, not .mk-rail. If the founder prefers the rail to keep tracking the viewport, delete the two lines marked CAP below; nothing else changes. ------------------------------------------------------------------------ */ .mk-rail { display: flex; align-items: stretch; max-width: var(--mk-container-width); /* CAP */ margin-inline: auto; } /* CAP */ .mk-rail__text { flex: 0 0 563px; box-sizing: border-box; padding-inline: var(--mk-page-x); } .mk-rail__media { flex: 1 1 auto; min-width: 0; } .mk-rail-images { width: calc(100% - 563px); } /* legacy alias, 11 §4 */ /* ========================================================================== 5. VERTICAL RHYTHM Byte-identical at 1280 and 1440 (GRID.md §1: "120/48/48/120 is byte-identical at both widths"), therefore capped at 1280 and fluid below. Floors are set at ~40% of the Figma value, which is where Salient's own tablet/phone spacing overrides land (dna-type-space.md §2.4: tablet 8%, phone 8% of viewport). Values <= 24 are NOT clamped: Salient's measured small gaps are fixed px at every width ("a 40px gutter at 1920 is still a 40px gutter at 1024", dna-container.md §5), and GRID.md §5.3.4 is explicit that the 4px card seam must never become a percentage. ========================================================================== */ :root { --mk-space-120: clamp(48px, 9.375vw, 120px); /* section pad / page rhythm */ --mk-space-96: clamp(40px, 7.500vw, 96px); /* header top pad; 07 rhythm */ --mk-space-60: clamp(24px, 4.6875vw, 60px); /* CARD INSET -- 60 at both artboards */ --mk-section-y: clamp(24px, 3.750vw, 48px); /* section vertical padding */ --mk-space-48: clamp(24px, 3.750vw, 48px); /* logo-row gap */ --mk-space-30: clamp(20px, 2.3438vw, 30px); /* footer 5-track gutter */ --mk-space-24: 24px; /* THE dominant stack gap -- fixed at every width */ --mk-space-12: 12px; /* nav itemSpacing */ --mk-space-10: 10px; /* btns itemSpacing */ --mk-space-4: 4px; /* card seam -- GRID.md §5.3.4, never a percentage */ } /* ========================================================================== 6. TYPE Salient is a two-layer hybrid (dna-type-space.md §0) and so is this. LAYER 2 -- display roles: fluid vw arm, capped at the 1280 value. line-height is a UNITLESS ratio so it scales exactly with the font-size, which is what Salient's fluid roles measure (architect h1 lh/fs = 1.1500 at all 17 widths, all four tiers). LAYER 1 -- text roles at or below 24px: stepped px, one authored pair per tier, because a vw arm on a 20px role gives 5.9px at 375. Salient does exactly this (architect p: 1.1vw above 1000, then FIXED 18px, then FIXED 16px). Small type steps ONCE at 999 where display type steps every tier -- four demos agree. THE 1300 STEP IS NOT BUILT. Salient ships a tier edge at 1300, and it is real (nonprofit h2 40->34 measured at 1301 vs 1300). But 1280 and 1440 straddle it while showing IDENTICAL type, so for this page tier C and tier D must be equal. Declaring them equal is a shipped Salient pattern: architect measures 0 of 22 realized type entries changing at 1300. THE SUB-1000 VALUES ARE INFERRED. Figma contains no artboard below 1280 (GRID.md §5.1, confirmed by 20 of 22 specs). Ratios below are taken from Salient's measured ramps, not invented, but they need founder sign-off before they are treated as spec. ========================================================================== */ :root { /* -- Layer 2: display. cap = the Figma px; k = cap/1280; floor = the median of Salient's five measured phone-tier values for the same role. ---- */ --mk-size-hero: clamp(40px, 7.5000vw, 96px); /* 96 @1280 and @1440. floor: median of architect 41 / resort 39 / nonprofit 35 / portfolio 36 / tether 44 = 39 -> 40 */ --mk-size-display: clamp(32px, 3.7500vw, 48px); /* 48 @both. floor: median of Salient tier-A h2 {28,39,32} = 32 */ --mk-size-h2: clamp(28px, 2.8125vw, 36px); /* 36 @both. floor = 36 x 0.80, the median Salient h2 tier-A/tier-D ratio */ /* SINGLE-OWNER PASS (`fluid-apply`) — REQ-md-01, PARTIALLY APPLIED, and the partial is deliberate. REQ-md-01 asked for all FOUR --mk-lh-* lines to be deleted so tokens.css keeps owning them. Measured at 1280, only ONE of the four does any damage: --mk-lh-body 36px vs tokens.css's 180% <- THE DAMAGE. DELETED below. 180% is DELIBERATELY POLYMORPHIC: it is applied at 24px, 20px and 18px and the section files say so in their own comments (07-building.css:350, 10-recovery-41.css:289/301, 13-recovery-45.css:459/468). A length flattens 43.2 and 32.4 to a flat 36 on 23 elements and moves four sections' fidelity. --mk-lh-display 1.25 x 48 = 60.0 == tokens.css's 60px exact --mk-lh-h2 1.80 x 36 = 64.8 == tokens.css's 64.8px exact --mk-lh-hero 1.2604 x 96 = 120.998 vs tokens.css's 121px -0.002px The three display ratios are KEPT, because deleting them would be a real regression BELOW 1280: --mk-size-hero/display/h2 are clamps that ramp down under 1280, and a fixed-px line-height cannot follow a font-size that moves. A ratio can. That is the whole argument of FLUID-SYSTEM.md §4.2 ("line-height on these is a unitless ratio ... measured, not assumed") and it is the reason these three exist. REQ-md-01's own justification — "tokens.css's 121px/60px/64.8px are all already exact at the clamped-cap sizes" — is true only AT the cap, i.e. only at and above 1280. --mk-lh-hero's 1.2604 is extended to full precision so the kept ratios are exact at the cap rather than nearly exact: 121/96 = 1.2604166666... */ --mk-lh-hero: 1.2604166667; /* 121/96 exact -- was 1.2604 (120.998 @96) */ --mk-lh-display: 1.25; /* 60/48 exact */ --mk-lh-h2: 1.80; /* 64.8/36 exact -- "THE body ratio" */ /* -- Layer 1: text. Stepped px. Tier C and D are equal, by the artboards. */ --mk-size-title: 24px; --mk-size-lead: 23.5px; --mk-size-body: 20px; /* --mk-lh-body DELETED HERE — REQ-md-01. tokens.css:212 keeps owning it as `180%`, which is the ratio its polymorphic consumers depend on. The tier-B and tier-A blocks below still step it, which is correct: those bands have no artboard and were measured with the px pairs in place. */ --mk-size-body-sm: 18px; --mk-size-base: 16px; --mk-size-micro: 14px; } /* Tier B -- 691..999. One step. Ratios from nonprofit's measured body ramp (19 -> 18 -> 16, i.e. 1.000 / 0.947 / 0.842) and architect's h4/h5 (22 -> 20, 18 -> 17), the only two demos measured across all three tiers. */ @media (max-width: 999px) { :root { --mk-size-title: 22px; --mk-size-lead: 21px; --mk-size-body: 19px; --mk-lh-body: 33px; /* px pair, not a ratio -- Layer 1 drift is authored */ --mk-size-body-sm: 17px; --mk-size-base: 16px; /* h4/h5 hold once, then step: this is their hold */ --mk-size-micro: 14px; } } /* Tier A -- <= 690. The second step. h4/h5-class roles (base, micro) step here for the first time; body steps for the second. */ @media (max-width: 690px) { :root { --mk-size-title: 22px; /* held -- small type steps once */ --mk-size-lead: 21px; /* held */ --mk-size-body: 17px; --mk-lh-body: 30px; --mk-size-body-sm: 16px; --mk-size-base: 15px; --mk-size-micro: 14px; /* held -- 14 is the legibility floor */ } } /* ========================================================================== 7. TRACK PATTERNS ========================================================================== */ /* ---- 7.1 The amenity grid: 3 equal tracks (16-amenities-52) ------------- The only node on the page with layoutMode: GRID. 1040 -> (1040 - 2*72)/3 = 298.667 1200 -> (1200 - 2*72)/3 = 352 Both match Figma exactly. The gaps are frozen at both artboards, so they take the standard clamp. */ .mk-tracks-3 { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(24px, 5.625vw, 72px); row-gap: clamp(24px, 3.750vw, 48px); align-items: start; /* counterAxisAlignItems: MIN */ } @media (max-width: 999px) { .mk-tracks-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 690px) { .mk-tracks-3 { grid-template-columns: 1fr; } } /* ---- 7.2 The footer link row: 5 equal tracks (21-logos-footer) ---------- 5 x 184 + 4 x 30 = 1040 (EN 1280) 5 x 220.8 + 4 x 24 = 1200 (ES 1440) The gutter SHRINKS as the viewport grows. GRID.md §4.2 and OPEN-QUESTIONS Q6 both flag this as an authoring inconsistency; V1 reads it as a LANGUAGE difference rather than a width one. It is reproduced here as a width step because this is a width spec and both artboards must match exactly. RESOLVE WITH THE FOUNDER, then delete one of these two lines. */ .mk-tracks-5 { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: var(--mk-track-gap, 30px); } .mk-tracks-5 > * { min-width: 0; } @media (min-width: 1440px) { .mk-tracks-5 { --mk-track-gap: 24px; } } @media (max-width: 999px) { .mk-tracks-5 { grid-template-columns: repeat(2, 1fr); row-gap: var(--mk-space-24); } } @media (max-width: 690px) { .mk-tracks-5 { grid-template-columns: 1fr; } } /* ---- 7.3 The card gallery (07-building) -------------------------------- Fixed 410 x 600 cells on a 4px pitch, full-bleed, drag-scrolled. Byte- identical in the 1280 EN and 1440 ES frames, so 410 is fixed on desktop. min(410px, 78vw) is a no-op above 526px -- it reproduces 410 at BOTH artboards exactly -- and below that it yields one card plus a peek, which is how Salient's own carousels behave on a phone. One declaration, no breakpoint, and the aspect-ratio carries the 600 automatically (410 x 600/410 = 600 exactly at the top). */ .mk-gallery { display: flex; gap: var(--mk-space-4); padding: var(--mk-space-4); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .mk-gallery::-webkit-scrollbar { display: none; } .mk-gallery > * { flex: 0 0 min(410px, 78vw); height: auto; aspect-ratio: 410 / 600; 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); } /* ========================================================================== 8. THE BREAKPOINT LADDER -- what actually reflows ========================================================================== */ /* ---- 8.1 <= 1050 : NAV COLLAPSE --------------------------------------- Salient's rule is: collapse when width <= 999 OR 1000 <= width <= data-header-breakpoint. resort -- the founder-bound demo -- ships 1050, and V1 reproduced that edge exactly, off-by-one included. KEEP IT. The container does NOT change here. Only the menu does. */ @media (max-width: 1050px) { .mk-nav { display: none; } .mk-header__actions .slide-out-widget-area-toggle { display: block; } } /* THE CTA DEFECT THIS FILE EXISTS TO PREVENT. V1 nests the "Begin recovery" CTA as an
  • inside