/* ============================================================================ SECTION 03-unique — "2.0 Unique" — Figma node 2777:2360 — 1280 x 900 ---------------------------------------------------------------------------- Two blocks, kept apart on purpose: BLOCK A rules LIFTED VERBATIM from the Salient *Architect* demo's own page-inline critical CSS (salient-truth/architect/assets/INLINE-critical.css). They are here because the shell vendored the /salient/resort/ family, whose bundle does NOT carry them — verified by grepping all 20 vendored stylesheets: .nectar-split-heading -> 2 unrelated hits in element-post-grid.css, nothing else row_position_absolute / top_position_desktop_50pct / left_position_desktop_0px / translate_y_-50pct / el_spacing_0px / reverse_columns_column_* / *_padding_tablet_* / divider height_*svh -> 0 hits Without Block A the lifted markup is inert: init.js still splits the H2 into word spans, but nothing masks or moves them, and the floating card does not detach. Copying these declarations IS the lift — it is not a reimplementation. Do not "tidy" them; they are byte-for-byte the demo's. BLOCK B the Figma retarget. Content, colour, type and the four fixed measures, all cited to figma-truth/03-unique.spec.md. Salient rules the vendored bundle DOES already provide, and which are therefore NOT repeated here: .vc_row-flex / .vc_row-o-equal-height / .vc_row-o-content-middle flex plumbing (js_composer.css), .vc_col-sm-6 (grid-system.css), .wpb_column.has-animation + fade-in-from-bottom (style.css), .column-image-bg-wrap + .divider (style.css), the [data-nectar-img-src] opacity/loaded pair (style.css + non-critical). ========================================================================== */ /* ============================================================================ BLOCK A — LIFTED VERBATIM. architect/assets/INLINE-critical.css ========================================================================== */ /* --- A1. split-heading: the per-word mask, the pre-split hold, the reveal --- */ .nectar-split-heading > * > *{text-indent:0;} .nectar-split-heading[data-animation-type="line-reveal-by-space"]:not(.markup-generated){opacity:0;} .nectar-split-heading[data-animation-type="line-reveal-by-space"]:not(.markup-generated).animated-in{opacity:1;} .nectar-split-heading[data-animation-type="line-reveal-by-space"] > * > span{position:relative;display:inline-block;overflow:hidden;} .nectar-split-heading[data-animation-type="line-reveal-by-space"] span{vertical-align:bottom;} @media only screen and (min-width:1000px){ .nectar-split-heading[data-animation-type="line-reveal-by-space"]:not(.markup-generated):not([data-text-effect="none"]) > *{line-height:1.2;} } @media only screen and (max-width:999px){ .nectar-split-heading[data-animation-type="line-reveal-by-space"]:not([data-m-rm-animation="true"]):not(.markup-generated):not([data-text-effect="none"]) > *{line-height:1.2;} } .nectar-split-heading[data-animation-type="line-reveal-by-space"][data-stagger="true"]:not([data-text-effect*="letter-reveal"]) span .inner{transition:transform 1.2s cubic-bezier(0.25,1,0.5,1),opacity 1.2s cubic-bezier(0.25,1,0.5,1),filter 1.2s cubic-bezier(0.25,1,0.5,1);} .nectar-split-heading[data-animation-type="line-reveal-by-space"] span .inner{position:relative;display:inline-block;-webkit-transform:translateY(1.3em);transform:translateY(1.3em);} .nectar-split-heading[data-animation-type="line-reveal-by-space"] span .inner.animated{-webkit-transform:none;transform:none;opacity:1;} @media only screen and ( max-width:999px ){ .nectar-split-heading[data-animation-type="line-reveal-by-space"][data-m-rm-animation="true"] span .inner{-webkit-transform:none;transform:none!important;opacity:1;} } /* the paragraph opts out of the split and is pinned opaque */ .nectar-split-heading[data-text-effect="none"]{opacity:1!important;} /* --- A2. the absolutely-positioned overlapping card --- */ .vc_row.inner_row.row_position_absolute{position:absolute;} .vc_row.inner_row.top_position_desktop_50pct{top:50%;} .vc_row.inner_row.left_position_desktop_0px{left:0px;} @media only screen,print{ .vc_row.inner_row.translate_y_-50pct{-webkit-transform:translateY(-50%);transform:translateY(-50%);} } /* --- A3. element spacing --- */ .wpb_column.el_spacing_0px > .vc_column-inner > .wpb_wrapper > div:not(:last-child),.wpb_column.el_spacing_0px > .n-sticky > .vc_column-inner > .wpb_wrapper > div:not(:last-child){margin-bottom:0px;} .wpb_column.child_column.el_spacing_0px > .vc_column-inner > .wpb_wrapper > div:not(:last-child),.wpb_column.child_column.el_spacing_0px > .n-sticky > .vc_column-inner > .wpb_wrapper > div:not(:last-child){margin-bottom:0px;} /* --- A4. breakpoint behaviour of the reference row (Salient: desktop >=1000, tablet 691-999, phone <=690). spec §6.5 --- */ @media only screen and (max-width:999px){ .wpb_row.reverse_columns_column_tablet .row_col_wrap_12,.wpb_row.inner_row.reverse_columns_column_tablet .row_col_wrap_12_inner{flex-direction:column-reverse;} #ajax-content-wrap .vc_row.right_padding_tablet_8pct > .row_col_wrap_12{padding-right:8%!important;} #ajax-content-wrap .vc_row.left_padding_tablet_8pct > .row_col_wrap_12{padding-left:8%!important;} #ajax-content-wrap .vc_row.inner_row.right_padding_tablet_25pct > .row_col_wrap_12_inner{padding-right:25%!important;} .vc_row.inner_row.top_padding_tablet_8pct{padding-top:8%!important;} .divider-wrap.height_tablet_70svh > .divider{height:70svh!important;} .divider-wrap.height_tablet_40svh > .divider{height:40svh!important;} } @media only screen and (max-width:690px){ .wpb_row.reverse_columns_column_phone .row_col_wrap_12,.wpb_row.inner_row.reverse_columns_column_phone .row_col_wrap_12_inner{flex-direction:column-reverse;} body #ajax-content-wrap .vc_row.inner_row.right_padding_phone_0px > .row_col_wrap_12_inner{padding-right:0px!important;} .divider-wrap.height_phone_60svh > .divider{height:60svh!important;} .divider-wrap.height_phone_35svh > .divider{height:35svh!important;} } /* ============================================================================ BLOCK B — FIGMA RETARGET. All numbers cite figma-truth/03-unique.spec.md. ========================================================================== */ /* --- B1. the band ------------------------------------------------------- */ .mk-unique { /* §1.1 fills: SOLID #f4f9fb, §1.3 section height 900, fixed at 1280 AND 1440 */ min-height: 900px; /* spec §1.3 "Section height 900" */ background: var(--mk-surface-mist); overflow: hidden; /* §1.1: the section frame clips nothing of its own, but image 30 sits at x 687..987 — well inside — so this only guards the tablet stack. */ } /* Salient's own row chrome. The demo row carries padding-top/bottom of calc(100vw*.12)/(.06) inline; ours does not — §1.1 reports padding 0/0/0/0 on 2777:2360, and the image column bleeds to y=0 and y=900. */ .mk-unique .wpb_row, .mk-unique .wpb_content_element { margin-bottom: 0; } /* kills style.css `.wpb_row{margin-bottom:35px}` and skin-material's `1.5em` */ /* style.css gives `.wpb_row.full-width-content{left:50%;margin-left:-50vw; width:calc(100vw + 2px)}` — WPBakery's viewport-breakout hack for a row that would otherwise be trapped inside a .container. Our band is already full-bleed (grid.css `.mk-section{width:100%}`), so the breakout only shifts the row 1px left and makes it 2px too wide. Measured: row rect x = -1, width 1282. Neutralise it; keep the class, which is still true of the row. */ .mk-unique #mk03_intro { padding: 0; left: 0; width: 100%; margin-left: 0; margin-right: 0; } /* grid-system.css gives `.vc_row-fluid > .span_12 {margin-inline:-1%}` and `… .wpb_column {padding-inline:1%}` — a percentage gutter this section does not have (§1.3: the two tracks butt at x=837 with zero gap at 1280). */ .mk-unique > #mk03_intro > .row_col_wrap_12 { margin-inline: 0; } .mk-unique .wpb_column { padding-inline: 0; } /* Salient's `.row_col_wrap_12` carries the same table clearfix as `.row`. Under the `display:flex` set below, `::before/::after {content:""}` become zero-width FLEX ITEMS and take a share of `space-between` — splitting §1.3's single 160px gap into two 80px gaps at 1440 and stopping the images column 80px short of the frame edge (measured 917…1360, want 997…1440; the floating `image 30` likewise 767…1067 instead of 847…1147). Same fix, same reason, as the header's in site.css §"Salient's .row carries a table-based clearfix". Strict no-op at 1280, where free space is 0 (§1.3) so the phantom item takes a 0px share — which is exactly why 1280-only verification could never find this. review/deepdive/responsive-1440.md §3. */ .mk-unique > #mk03_intro > .row_col_wrap_12::before, .mk-unique > #mk03_intro > .row_col_wrap_12::after { content: none; } /* §1.1 layout: HORIZONTAL · SPACE_BETWEEN · counterAxis CENTER. §1.3: free space = 0 at 1280 and 160 at 1440, absorbed entirely by the middle — which is exactly what space-between on two fixed tracks gives. */ .mk-unique > #mk03_intro > .row_col_wrap_12 { justify-content: space-between; min-height: 900px; /* §1.3 */ } /* --- B2. the two fixed tracks ------------------------------------------ */ /* §4.3 THE HONEST VERDICT: "build this section as a fixed measure, not a grid span". 597 is still 597 at 1440 (a 7-of-12 span would have grown to 690), so .mk-grid12 is deliberately not used here — see the note atop css/grid.css. */ .mk-unique .mk-unique__copy { flex: 0 0 837px; /* §1.1 "Text" 2777:2361 = 597 + 120 + 120 */ max-width: 837px; } .mk-unique .mk-unique__images { flex: 0 0 443px; /* §1.3 "Images column … w 443", pinned right */ max-width: 443px; position: relative; /* anchor for the ABSOLUTE card (§1.1 L-3): left:0 then lands on x = 837, the seam. */ } /* --- B3. the copy column ------------------------------------------------ */ .mk-unique .mk-unique__copy > .vc_column-inner { /* §1.1 "Text" padding: top 96 · right 120 · bottom 96 · left 120 */ padding: var(--mk-space-96) var(--mk-page-x); } /* §1.1 "Text group " 2777:2374 — 597 x 708, VERTICAL, CENTER, itemSpacing 24. The width is not asserted here: 837 - 120 - 120 = 597 falls out of B2 + the padding above, which is the same arithmetic the spec uses at §1.1. */ .mk-unique .mk-unique__copy > .vc_column-inner > .wpb_wrapper { display: flex; /* js_composer.css only makes .wpb_wrapper flex when it is a DIRECT child of .vc_column_container; here it sits one level deeper, inside .vc_column-inner, so `gap` would be inert. The architect demo's own left column computes to display:flex. */ flex-direction: column; justify-content: center; /* primaryAxisAlignItems CENTER */ align-items: flex-start; /* counterAxisAlignItems MIN */ gap: var(--mk-space-24); /* itemSpacing 24 */ } .mk-unique .mk-unique__copy .wpb_wrapper > *, .mk-unique .mk-unique__copy .row_col_wrap_12_inner { width: 100%; } /* The three copy blocks are spaced ONLY by the wrapper's 24px gap. Salient gives `.nectar-split-heading` a 24px margin-bottom of its own (measured), which stacked with the gap and made the copy block 318 tall instead of the 294 that §1.1 requires — and 294 is what puts the stack at abs y 303 / 351 / 525 (§1.1). Kill every margin on the wrapper's direct children. */ .mk-unique .mk-unique__copy > .vc_column-inner > .wpb_wrapper > * { margin: 0; } /* the eyebrow and body sit inside inner rows only so each can carry its own has-animation column; those rows must add no space of their own. */ .mk-unique .mk-unique__copy .inner_row, .mk-unique .mk-unique__copy .inner_row .vc_column-inner, .mk-unique .mk-unique__copy .inner_row .wpb_wrapper { padding: 0; gap: 0; } /* --- B4. type ----------------------------------------------------------- */ /* eyebrow · 2777:2362 · Poppins Light 300 · 16 / 24 · tracking 3px · #000 §2. The .mk-eyebrow token class already carries family/weight/size/leading/ tracking/uppercase; only the fill and Salient's h5 chrome are set here. */ .mk-unique .mk-unique__eyebrow { margin: 0; /* style.css gives h5 a margin-bottom */ color: var(--mk-ink-strong); /* §3.1 eyebrow fill #000000 */ } /* §2.1: the single semantic rule that survives translation — the word "safe" / "seguro" is italic, everything else roman. Weight does NOT vary (fontWeight resolves to 300 across the whole node); only the italic axis. FOUNDER BUG (2026-08-31, desktop AND mobile, all widths): vendored style.q-98889c766d.css ships a blanket `body em{font-family:Cormorant; font-size:18px;line-height:18px;font-weight:500;font-style:italic}` meant for testimonial pull-quotes. Our rule beat it on font-style/weight/family (specificity 0,2,1 > vendor's 0,0,2) but never touched font-size or line-height, so "safe" rendered 2px larger than "The" and "stay" either side of it — measured 18/18 vs the eyebrow's own 16/24. Pinning both here closes every property the vendor rule sets. */ .mk-unique .mk-unique__eyebrow em { font-style: normal; /* founder 2026-09-01: the italic 'safe' "just looks weird" — regular, markup kept for ES parity */ font-weight: inherit; font-family: inherit; font-size: inherit; line-height: inherit; } /* h2 · 2777:2363 · Merriweather Light 300 · 60 / 75 · tracking 0 · #000 · §2. line-height is pinned, NOT `normal`: §2.2 warns Merriweather's own AUTO metric computes to ~75.4px in a browser, which drifts 0.4px per line. 60px and 75px are section-local literals — no token carries them. */ .mk-unique .mk-unique__h2 h2 { margin: 0; /* §2 h2 fontSize 60 at the 1280 artboard. Below it the heading scales with the viewport (4.7vw: 60 at 1280, 55 at 1176, 48 at 1024) so the narrower responsive measure does not stack a 60px heading five lines high on an iPad Pro in portrait. Founder 2026-09-02: ratios, not absolutes. */ font-size: clamp(40px, 4.7vw, 60px); line-height: 75px; /* §2 box 150 / 2 lines; §2.2 */ font-weight: var(--mk-w-light); /* §2 fontStyle Light / weight 300 */ color: var(--mk-ink-strong); /* §3.1 */ /* family + `opsz 18` pin come from tokens.css `.mk-page :is(h1,h2,h3,.mk-serif)` */ } /* §6.4(2) build warning (i): Salient's mask sets line-height 1.2 on the word span. Our H2 is 1.25 with descenders (y, q, g) and, in ES, `¿` and `é`. Match the heading or the overflow:hidden mask clips glyphs. */ .mk-unique .mk-unique__h2 > * > span { line-height: 1.25; } /* body · 2777:2364 · Poppins Regular 400 · 20 / 180% · tracking 0 · #1a2328 · §2 */ .mk-unique .mk-unique__body p { margin: 0; padding-bottom: 0; /* style.css: `p{padding-bottom: var(--nectar-paragraph-bottom-spacing,1.5em)}` computes to 30px here and would make the 72px text box 102px. §2 box = 597 x 72. */ font-family: var(--mk-font-sans); font-size: var(--mk-size-body); /* 20px */ line-height: var(--mk-lh-body); /* 180% -> 36px */ font-weight: var(--mk-w-regular); color: var(--mk-ink-body); /* §3.1 #1a2328 — not black */ } /* --- B5. the image column ---------------------------------------------- */ .mk-unique .mk-unique__images > .vc_column-inner { padding: var(--mk-space-4) 0; /* §1.1 "Images" padding 4/0/4/0 */ } /* keep Salient's `body .wpb_row .column-image-bg-wrap{z-index:-1}` layer inside the column it belongs to. Without a stacking context here the -1 layer can escape behind the section ground and the photo never paints. */ .mk-unique .mk-unique__images .vc_column-inner { isolation: isolate; } /* kitchen 1 · 2777:2372 · 443 x 892 · radius 4/0/0/4 · no effects · §1.1, §3.2 892 = 900 - 4 - 4. Height is driven by Salient's .divider, as in the demo. */ .mk-unique .mk-unique__tall .divider { height: 892px; } .mk-unique .mk-unique__tall .column-image-bg-wrap { border-radius: var(--mk-radius-card) 0 0 var(--mk-radius-card); } /* image 30 · 2778:2376 · 300 x 450 · radius 4 · DROP_SHADOW 0/4/24 #00000040 §1.3 (a) horizontally centred ON THE SEAM: its centre-x equals the Images column's left edge, so left:0 + translateX(-50%). §1.3 (b) vertically centred on the section: top:50% + translateY(-50%). Salient supplies left:0 / top:50% / translateY(-50%) in Block A; only the translateX and the fixed width are ours. §5.5 explicitly forbids implementing this node as top-pinned even though Figma reports MIN. */ /* `.vc_row.inner_row.translate_y_-50pct` in Block A is (0,3,0); this selector is (0,4,0) so the translateX survives. CONVENTIONS §8.6 — naming the rule that forced the specificity bump instead of reaching for !important. */ .mk-unique .vc_row.inner_row.mk-unique__card { width: 300px; /* §1.1 image 30 = 300 x 450 */ transform: translate(-50%, -50%); } .mk-unique .mk-unique__card .divider { height: 450px; } .mk-unique .mk-unique__card > .row_col_wrap_12_inner > .wpb_column > .vc_column-inner { border-radius: var(--mk-radius-card); /* §1.1 cornerRadius 4, uniform */ } /* ============================================================================ R8-01 FOUNDER BUG — "the shadow [is] loading before the other images" ---------------------------------------------------------------------------- FT-20260821-jehnean-round8, on this exact 300x450 card (`.divider-wrap height_tablet_40svh height_phone_35svh`, `data-alignment="default"`, sections/03-unique.html:156): the drop shadow painted, THEN the photo. ROOT CAUSE, MEASURED: the shadow lived on `.vc_column-inner` — a box that paints the instant it lays out, with no dependency on the photograph's load/decode state. The photograph itself is a DIFFERENT element, `.column-image-bg-wrap[data-mv]`, held at `opacity:0` by B11/R7-07's gate until the copy column's own `.mv-in` fires (js/myk-pacing.js adopts this wrap as `data-mv="media"`; css/myk-motion.css supplies the `opacity 1s cubic-bezier(.4,0,.2,1) .1s` transition). Two elements, two clocks: the shadow's silhouette sat on screen for the whole gated hold, full opacity, and the photo popped into it late. THE FIX moves Figma's shadow onto the SAME element B11's gate already animates, instead of adding a second clock. `.column-image-bg-wrap` fills `.vc_column-inner` exactly — `position:absolute` inset 0, verified by computed style — so the shadow's shape and the border-radius already set here are unchanged. CSS `opacity` composites an element's entire paint (box-shadow, background, border) as one layer, not the background alone, so 0->1 now dims shadow and photograph together, on B11's one clock. FAIL-OPEN IS INHERITED, NOT REDONE: B11's gate selectors require `html.mv`, which js/myk-motion.js only adds when IntersectionObserver exists and reduced motion is off. No-JS, no-IO and prefers-reduced-motion all skip the gate entirely, landing shadow and photo both fully opaque together from the first paint — the correct fallback, unchanged. ========================================================================== */ .mk-unique .mk-unique__card .column-image-bg-wrap { border-radius: var(--mk-radius-card); /* §1.1 DROP_SHADOW 0/4/24 #00000040 — relocated here from .vc_column-inner, see note above. §6.6's resolution is unchanged: Figma is authoritative for appearance (this shadow), Salient for the mechanic; Salient's own x_large_depth shadow is still not used and data-shadow is still absent from the markup so it still cannot apply. */ box-shadow: 0 4px 24px var(--mk-shadow-25); } /* §3.2: scaleMode FILL + identity imageTransform = centred cover. Every Figma filter channel is 0, so there is no filter(). `scalingFactor: 0.5` is the API's TILE/CROP field and has no CSS counterpart under FILL — do not scale. */ .mk-unique .column-image-bg { background-size: cover; background-position: center center; } /* --- B6. responsive ------------------------------------------------------ Figma contains exactly two artboards, 1280 and 1440 (LOSSINESS L-11), and both are handled above by B2 + space-between. Everything below 1000px is Salient's own breakpoint behaviour, lifted in Block A: column-reverse (image above copy), 8% row inset, 70svh/60svh tall image, 40svh/35svh card. The type ramp below is spec §5.3/§5.4 — reasoned, NOT measured design, and flagged there as "proposals requiring founder sign-off". ---------------------------------------------------------------------- */ @media only screen and (max-width:1279px){ /* §5.2 order of concession: the inset goes first, the measure second, and the 443 image column is held for as long as two columns survive. */ .mk-unique .mk-unique__copy { flex: 1 1 auto; max-width: none; min-width: 0; } .mk-unique .mk-unique__copy > .vc_column-inner { padding: var(--mk-space-96) calc((100vw - 180px) * 0.08); } } @media only screen and (max-width:999px){ /* stacked: the row's own reverse_columns_column_tablet puts the image first */ .mk-unique { min-height: 0; } .mk-unique > #mk03_intro > .row_col_wrap_12 { min-height: 0; } .mk-unique .mk-unique__copy, .mk-unique .mk-unique__images { flex: 1 1 100%; max-width: 100%; } .mk-unique .mk-unique__copy > .vc_column-inner { padding: var(--mk-space-96) 0; } .mk-unique .mk-unique__tall .divider { height: auto; } /* Block A's 70svh takes over */ .mk-unique .mk-unique__tall .column-image-bg-wrap { border-radius: 0; } /* WAS `.mk-unique .mk-unique__card` (0,2,0), which LOSES to the (0,4,0) base rule at the top of this file and therefore NEVER APPLIED — proof: the computed width at 640 was exactly 300px, not the 295.688px that 55% of the 537.6px container gives. Re-stated at (0,4,0) so it lands. The translateX is OURS, not Salient's (see B5: Salient's Block A supplies only left:0 / top:50% / translateY(-50%)), and it is what throws the card a THIRD off the left edge once the layout stacks full-width — the -150px was tasteful against a 443px image column at x=837, but against a full-width parent at x=51.2 it lands the card at -98.8. §5.4 says "shrink it, do not hide it"; a third off-screen is neither. Drop back to Salient's own transform here. review/deepdive/responsive-640.md §4 P3. Verified: 640 left -98.8 -> 51.2, right 201.2 -> 346.9. 1280 UNCHANGED (left 687, width 300, translateX(-150)) — this block is <=999px. */ .mk-unique .vc_row.inner_row.mk-unique__card { width: 40%; /* §5.3: re-anchored, still overlapping into the copy */ transform: translate(0, -50%); } .mk-unique .mk-unique__card .divider { height: auto; } /* Block A's 40svh takes over */ .mk-unique .mk-unique__h2 h2 { font-size: 44px; line-height: 55px; } /* §5.3 ~40-44px */ } @media only screen and (max-width:690px){ /* §5.4 option (a), the faithful one: Salient keeps the card on mobile (data-scroll-animation-mobile="true"), so shrink it, do not hide it. Re-stated at (0,4,0) for the same reason as the 999px block above — as `.mk-unique .mk-unique__card` this override was dead, which is why the computed width at 640 was 300px rather than 55% of 537.6 = 295.688. */ .mk-unique .vc_row.inner_row.mk-unique__card { width: 55%; transform: translate(0, -50%); } .mk-unique .mk-unique__h2 h2 { font-size: 34px; line-height: 42.5px; } /* §5.4 ~32-36px @1.25 */ .mk-unique .mk-unique__body p { font-size: var(--mk-size-base); } /* §5.4 phone body 16px */ } /* --- B7. reduced motion -------------------------------------------------- §6.7: "skip the word split, skip both parallaxes, hold every element at its final state." This also covers the one hard failure mode in the lifted CSS: `…:not(.markup-generated){opacity:0}` leaves the H2 INVISIBLE if init.js never runs, and init.js is a `type="salientlazyscript"` tag. ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .mk-unique .nectar-split-heading[data-animation-type="line-reveal-by-space"]{ opacity: 1; } .mk-unique .nectar-split-heading[data-animation-type="line-reveal-by-space"] span .inner{ transform: none; opacity: 1; filter: none; transition: none; } .mk-unique .wpb_column.has-animation{ opacity: 1; transform: none; } } /* ============================================================================ B8 · FOUNDER DEFECTS D11 + D12 — full-bleed right edge, and real height ---------------------------------------------------------------------------- Founder trace FT-20260817-vista-pacifico-review.md: "D11 Background kitchen image stops at the 12th column; must go FULL BLEED to the right edge, outside all margin/padding." "D12 Section needs far more vertical height — immersive, not sandwiched between neighbours." (+ global predicate G1 IMMERSIVE SECTIONS) WHERE D11 ACTUALLY CAME FROM — measured, not inferred. At 1280 and 1440 the image column already reaches the frame edge (space-between on two fixed tracks, §1.3), which is why nobody caught this at either artboard width. Above 1440 it does not, and the founders review on a 1512-wide laptop: viewport 1512 section padding-inline 36 (= (1512 - 1440) / 2) .mk-container ink box 36 .. 1476 kitchen image 36 .. 1476 <- IDENTICAL. "stops at column 12." The 36px is css/_band-xl.css §1b, which above 1440 puts `padding-inline: var(--mk-xl-inset)` on `[data-mk-slug="03-unique"]` so the copy's ink stays in register with the twenty `.mk-container` sections. That is right for the COPY and wrong for the IMAGE, and the file says so in its own comment — it assumed this section had a `.mk-bleed-right` image column with "an authored one-gutter overshoot". It never had one. Nothing in this file overshot anything; the image simply inherited the cap. THE FIX, and why absolute positioning rather than a negative margin. An absolutely positioned box is laid out against the PADDING BOX of its positioned ancestor (CSS 2.1 §10.1), so `right: 0` on a child of the section resolves to the section's border edge — OUTSIDE the section's own padding. That is the founders' phrase "outside all margin/padding" expressed as the one CSS mechanism that actually means it, and it needs no viewport arithmetic: no `100vw` (which includes the scrollbar and would overshoot by 15px on any platform with classic scrollbars), no duplicated copy of _band-xl's `calc(50% - var(--mk-frame)/2)` (whose `50%` would resolve against the ROW here, not the section, and silently compute 0). IT ALSO SOLVES D12 FOR FREE, which is why the two are one block: `top: 0; bottom: 0` makes the image column exactly as tall as the section is, so the section's height becomes a single number to change instead of a number that has to be kept in sync with a hard-coded 892px divider. THE COST, STATED: the gap between the copy track and the image track is `content - 1040`, i.e. 0 at 1280 and 160 at 1440 (§1.3). Once the image is pinned to the viewport edge and the copy stays gutter-capped at 1440, that gap MUST grow above 1440 — 196 at 1512, 400 at 1920. _band-xl.css §1b exists precisely to stop that, so D11 and _band-xl §1b are in direct conflict for this section and D11 (founder-locked) wins. The two files are now BOTH correct in isolation and disagree about this section; see founder-trace/SHARED-REQUESTS.md (SR-02), which asks the band owner to drop `03-unique` from the §1b list now that this file owns its own inset. ========================================================================== */ /* --- B8.1 · the band gets real height ----------------------------------- */ /* D12 + G1. `max()` and not a bare `100vh`, because a bare 100vh SHRINKS this section on the machine the founders reviewed on: a 1512x982 laptop with Chrome's chrome leaves roughly 830-900px of viewport, i.e. LESS than the authored 900. "Far more vertical height" has to hold at every viewport, so the floor is absolute and the 100vh term only takes over on taller screens. 1200 = 900 x 4/3. AMBIGUITY RECORDED, NOT GUESSED AWAY: the founders said "far more" and gave no number. 1200 is a proposal, chosen because it is a clean ratio of the authored 900 and because it is taller than any laptop viewport, which is what makes G1's "you should not see the section above and below simultaneously" true rather than nearly true. The exact number is a one-line change here and is listed as an open question in the return notes and in founder-trace/helix/D12.md. */ .mk-unique { min-height: max(100vh, 1200px); } /* The row is the flex parent of the copy track; it has to grow with the band or the copy stays vertically centred inside a 900px box in a 1200px section. Restates §B1's 900 rather than overriding it — same declaration, new value. */ .mk-unique > #mk03_intro > .row_col_wrap_12 { min-height: max(100vh, 1200px); } /* --- B8.2 · the image column bleeds to the viewport edge ---------------- */ /* ONE DECLARATION, and it is the exact inverse of the one that caused D11. `_band-xl.css` §1b writes `padding-inline: var(--mk-xl-inset)` on this section above 1440 — correct for the copy, wrong for the image. The LEFT half is kept (it is what holds the copy's ink in register with the twenty `.mk-container` sections, which is the whole point of that band sheet); the RIGHT half is dropped, and the image column — which is already `flex: 0 0 443px` pinned right by `space-between` (§B2) — lands on the viewport edge again. FIRST ATTEMPT, RECORDED BECAUSE IT LOOKS RIGHT AND IS NOT: making the column `position: absolute; right: 0` and relying on "an absolutely positioned box is laid out against the PADDING BOX of its positioned ancestor". The rule is true and the ancestor is wrong — Salient's `.wpb_row` is `position: relative` (its `.row-bg-wrap` is absolutely positioned inside it and would collapse without it), so the nearest positioned ancestor is the ROW, not the section, and the row already sits inside the section's padding. Measured at 1512: the column still ended at 1476, the same pixel as before the fix. Do not reintroduce it; un-positioning the row to make it work would break the background layer the lift depends on. Specificity: `_band-xl.css`'s selector is `[data-mk-slug="03-unique"]`, (0,1,0). This is (0,2,0) and therefore wins wherever the two files are linked relative to each other — which matters, because the band sheets are emitted LAST by _tools/compose.py and a same-specificity rule here would lose. A longhand also beats the shorthand's right half by specificity alone, so the left inset survives untouched. THE COST, STATED: the gap between the two tracks is `content - 1040` — 0 at 1280, 160 at 1440 (§1.3) — and once the image is pinned to the viewport edge while the copy stays gutter-capped at 1440, that gap MUST grow above 1440: 196 at 1512, 400 at 1920. `_band-xl.css` §1b exists precisely to stop that, so D11 and that rule are in direct conflict for this section and D11 (founder-locked) wins. See founder-trace/SHARED-REQUESTS.md SR-02. */ .mk-unique[data-mk-slug="03-unique"] { padding-right: 0; } /* --- B8.3 · the kitchen photograph fills whatever height the band has --- */ /* Salient drives this column's height with a `.divider`, exactly as the architect demo does (§B5). §B5 pinned it to Figma's 892 = 900 - 4 - 4. With a variable band that literal is the thing that would leave a strip of mist under the photo, so the whole chain is handed 100% instead and the 4px top/bottom padding on `.vc_column-inner` (Figma "Images" padding 4/0/4/0) still does the -8 for us through the global `box-sizing: border-box`. EVERY LINK IN THE CHAIN IS REQUIRED, and leaving one out fails silently rather than loudly: `height: 100%` resolves against an AUTO parent as `auto`, so a single missing link collapses the divider to 0 and the photograph renders as a 1px strip. Measured exactly that way on the first pass — the images column's OWN `.wpb_wrapper` was missing from the list and the `.column-image-bg` reported 1px tall. If you add an element to this column, add it here too. */ .mk-unique .mk-unique__images > .vc_column-inner, .mk-unique .mk-unique__images > .vc_column-inner > .wpb_wrapper, .mk-unique .mk-unique__tall, .mk-unique .mk-unique__tall > .row_col_wrap_12_inner, .mk-unique .mk-unique__tall > .row_col_wrap_12_inner > .wpb_column, .mk-unique .mk-unique__tall > .row_col_wrap_12_inner > .wpb_column > .vc_column-inner, .mk-unique .mk-unique__tall .wpb_wrapper, .mk-unique .mk-unique__tall .divider-wrap { height: 100%; } .mk-unique .mk-unique__tall .divider { height: 100%; } /* --- B8.4 · below 1000px the layout stacks, so hand the chain back ------- Block A's `reverse_columns_column_tablet` turns the row into a column-reverse stack at <=999px and Salient's own 70svh/60svh divider heights take over (§B6). A 100%-height chain inside an auto-height stack resolves to `auto` at every link and would flatten the image to nothing, so this is not an optional tidy-up. Restated at the same specificity as B8.3 and placed after it, so source order decides — the mechanism §B6's own overrides already rely on. */ @media only screen and (max-width:999px){ .mk-unique { min-height: 0; } .mk-unique > #mk03_intro > .row_col_wrap_12 { min-height: 0; } .mk-unique .mk-unique__images > .vc_column-inner, .mk-unique .mk-unique__images > .vc_column-inner > .wpb_wrapper, .mk-unique .mk-unique__tall, .mk-unique .mk-unique__tall > .row_col_wrap_12_inner, .mk-unique .mk-unique__tall > .row_col_wrap_12_inner > .wpb_column, .mk-unique .mk-unique__tall > .row_col_wrap_12_inner > .wpb_column > .vc_column-inner, .mk-unique .mk-unique__tall .wpb_wrapper, .mk-unique .mk-unique__tall .divider-wrap { height: auto; } .mk-unique .mk-unique__tall .divider { height: auto; } } /* ============================================================================ B9 · FOUNDER DEFECT D13 — "Paragraph should FADE in (currently only moves up)" ---------------------------------------------------------------------------- Same asymmetric guard as 01-who-why.css §5.1, and this section is where the founders actually SAW it, because `fade-in-from-bottom` is the one entrance family on this page whose start state has BOTH halves: .wpb_column.has-animation { opacity: 0 } .wpb_column.has-animation[data-animation= fade-in-from-bottom] { transform: translateY(75px) } html:not(.js) .wpb_column.has-animation { opacity: 1 } `html` is served as `no-js` and is only ever changed by js_composer_front.min.js, a `type="salientlazyscript"` tag promoted on the visitor's first gesture. In the window before that promotion the opacity is restored and the transform is not, so the copy sits fully opaque 75px below its place and then slides up — a movement with no fade, which is D13 verbatim. Measured in headless Chrome at both ends of that window: html.no-js -> opacity 1 transform matrix(1,0,0,1,0,75) html.js -> opacity 0 transform matrix(1,0,0,1,0,75) Completing the guard means the copy is either at its final state or animating from opacity 0 — the displaced-and-opaque frame stops existing. Self-retiring: it stops matching the moment the shell adds the swap (SHARED-REQUESTS SR-01). ========================================================================== */ html:not(.js) .mk-unique .wpb_column.has-animation { transform: none; } /* ============================================================================ B10 · FOUNDER R6-10 — spacing above AND below the right image, Omai-calibrated ---------------------------------------------------------------------------- Founder trace FT-20260820-jehnean-round6.md R6-10: "keep the right-side span placement, add spacing above AND below, and give it the Omai fade-in — calibrate from their 'experiences made to measure' image (their class: `image w-full block visible`)." MEASURED FROM OMAI FIRST (review/r6/r6-unique-image/omai-experiences-raw.json, live at 1440x900 on the exact she named): fade opacity ONLY · 1000ms · 100ms delay · cubic-bezier(.4,0,.2,1) (their theme.css `[data-animate][data-animate-img]`, verbatim) trigger their own IO options (threshold .2, rootMargin -10% bottom) = elementTop <= 0.90*vh - 0.20*elementHeight; fired at elTop 556 for their 990px-tall image (formula predicts 612; 20px-step scan) space 80px ABOVE the image (h2 ink -> img top; = their md:mt-80, --spacing:1px) = 8.9% of their 900px viewport. An earlier 40px reading was FALSE: the h2 carries data-animate-text and its untriggered translateY(40px) was polluting the rect. 240px BELOW (their .module-my margin to the next section). size their image is 660x990 — TALLER than the 900 viewport, so it fills the full screen height when centred. That is the quality the founder praised on ours ("at the middle of the section it's filling out my whole screen") and it must survive the spacing. WHAT THIS BLOCK DOES AND DOES NOT DO: · The FADE needs NOTHING HERE. js/myk-pacing.js §2 already adopts this section's `.column-image-bg-wrap` as `data-mv="media"` (founder A10, r4-verified), and css/myk-motion.css `[data-mv="media"]` is exactly the Omai grammar above with the same IO trigger. MEASURED on the before build (review/r6/r6-unique-image/ours-before-1280.json): wrap transition `opacity 1s cubic-bezier(0.4,0,0.2,1) 0.1s`, one-shot crossing at elTop 544 vs formula 569 (120px-wheel-notch quantization), sampled ramp op 0 -> 0.91 over ~740ms of the 1000. Duplicating it here would give the image two clocks. DO NOT add a second entrance to this column. · The PARALLAX RISE STAYS. data-n-parallax-bg="very_subtle" (factor 0.12) is untouched; the fade is opacity on the wrap, the parallax is a transform on the layer inside it — different properties, different elements, verified coexisting in r4 and re-verified after this change. · The SPACING is the one thing that was missing. Before: 4px above, 4px below (Figma §1.1 "Images" padding 4/0/4/0). The founder direction supersedes that Figma value on desktop; B5 keeps the citation and the <=999px stacked layout keeps Salient's own svh mechanics. THE NUMBER: 80px at a 900px viewport = 8.888…vh, taken from the ONE gap she pointed at (above their image). Their below-space (240px) is their section margin, not an image treatment — copying it would push our image off the band's centre and, at vh >= 830, shrink it below viewport height, regressing the "filling out my whole screen" praise. Symmetric 8.9vh keeps the image centred (as Figma's symmetric 4/0/4/0 intended) and keeps it taller than the viewport everywhere she reviews. clamp(48px, 8.9vh, 128px): 900vh -> 80.1px (Omai-exact) · 982 -> 87px · floor 48px guards tiny windows · cap 128px stops runaway on huge displays. FILLS-THE-SCREEN ARITHMETIC, so the praise cannot regress silently: image height = section - 2*gap. With B8.1's max(100vh,1200px) alone, a viewport taller than ~1010px would leave the image SHORTER than the screen at mid-scroll. The min-height below adds the 2*gap back on exactly those viewports: max(calc(100vh + 2*gap), 1200px) is never smaller than B8.1's value (D12's floor holds; the founder asked for MORE height, never less) and at the review viewports (900/982 vh) computes to the same 1200px, so the fidelity-table geometry at the standard instruments is unchanged — MEASURED after: section 1215px at 1280x900, identical to before. Scoped to >=1000px: below that the layout stacks (B6/B8.4 hand heights back to Salient's svh dividers and zero the min-heights LATER in the cascade than B8.1 but EARLIER than this block, so an unscoped rule here would silently re-impose a 1200px band on phones). ========================================================================== */ @media only screen and (min-width:1000px){ .mk-unique { --mk-unique-img-gap: clamp(48px, 8.9vh, 128px); min-height: max(calc(100vh + 2*var(--mk-unique-img-gap)), 1200px); } .mk-unique > #mk03_intro > .row_col_wrap_12 { min-height: max(calc(100vh + 2*var(--mk-unique-img-gap)), 1200px); } /* padding-block LONGHAND so B5's `padding: var(--mk-space-4) 0` shorthand (same selector, earlier in this file) keeps owning the inline halves and only the block halves are re-decided. The B8.3 100%-height chain is border-box all the way down, so the image shrinks by exactly 2*gap with no other rule changing. */ .mk-unique .mk-unique__images > .vc_column-inner { padding-block: var(--mk-unique-img-gap); } } /* ============================================================================ B11 · FOUNDER R7-07 — "it does look like you ignored my feedback" ---------------------------------------------------------------------------- Founder trace FT-20260821-jehnean-round7.md R7-07: the kitchen image on the right STILL does not fade in, reviewed at her effective ~1750px viewport. THE ROOT CAUSE IS NOT THE ONE THE BRIEF HYPOTHESISED, AND THE MEASUREMENT SAYS SO. The r6 fix WAS reaching her band. Measured on the unmodified build through review/sweep31/cdp.py (review/r7/r7-unique/rca.json), at 1280x900, 1440x900 AND 1750x980, the SAME node paints and the SAME rule reaches it: node #mk03_kitchen .column-image-bg-wrap data-mv "media" (identical at all three widths) rest opacity 0 (identical) transition opacity 1s cubic-bezier(0.4, 0, 0.2, 1) 0.1s (identical) page census data-pace-media = 9 (identical) fires at elTop 577 / 541 / 612 vs formula 0.90vh-0.20elH = 599/599/652 No band sheet swaps the painter; _band-xl.css names this section only for `padding-inline`. The r6 verifier's numbers were all TRUE. So was her eye. WHAT THE VERIFIER MEASURED WAS THE ELEMENT'S CLOCK. WHAT SHE WATCHES IS THE SCREEN. Measured at a real reading pace (40px per event, ~55ms apart ~= 600px/s; review/r7/r7-unique/pace-before.json), at 1750x980: scrollY section top image top image opacity 3644 480 568 0.00 3804 320 408 0.48 3964 160 248 0.91 4124 0 88 1.00 <- section only NOW lands The whole fade is spent in the last half-viewport of the PREVIOUS section's exit, on the bottom-right corner sliver of a 1149px ground, and it is FINISHED at the exact frame the section reaches the top of the screen. By the time this section is the thing she is looking at, the image has always already been there. That is "it does not fade in", stated precisely. Held-still confirmation (review/r7/r7-unique/hold-before.json): stop at the trigger and the fade completes with only 30.6% (1280) / 32.0% (1750) of the image on screen and ZERO pixels of travel. Contrast was checked and ACQUITTED: image mean rgb(130,105,84), luminance 109, on a rgb(244,249,251) ground — the fade is not hiding in low contrast. HER SECOND OMAI REFERENCE, MEASURED LIVE, EXPLAINS THE DIFFERENCE (review/r7/r7-unique/omai-grey-raw.json, omaivillas.com/villas/omai-grey/, the "architectural sanctuary" module, 1750x980, real wheel): transition opacity 1s cubic-bezier(0.4, 0, 0.2, 1) 0.1s <- IDENTICAL to ours fires at elTop 706 (28% of the image on screen) COMPLETES at elTop 427 (72% on screen) — 280px of TRAVEL during the fade duration 1144ms measured end to end The grammar was never the difference. The difference is that Omai's fade RESOLVES WHILE THE IMAGE IS STILL ARRIVING — Lenis (lerp 0.1) keeps the page coasting 280px after the wheel stops, so the opacity ramp and the arrival are one event. We will not adopt Lenis: it binds `wheel` with `{passive:false}` (PACING.md §8.6) and the founders called wheel-seizing "janky, too rigid, grabs my screen". The transferable part is the CO-TIMING, not the smoother. THE FIX — the same clock, the same curve, a later gate. The image is released when this section's own copy arrives, not a half-viewport earlier. Measured, the copy's lead fires at section top ~+180; the fade then runs from section top +180 to roughly -400 at reading pace, i.e. across the exact moment the founder described in r6 as "at the middle of the section it's filling out my whole screen — but I want that fade-in vibe". Image and copy now arrive as ONE event, which is the grammar she praised in who-and-why ("you kinda nailed that parallax vibe fading in"). WHY A GATE AND NOT A SECOND ENTRANCE. R6-10's forward predicate — never give this column a second opacity clock — still holds and is not being broken. The element keeps its page-wide `data-mv="media"` adoption, so css/myk-motion.css still owns the curve, the start state and the token set, js/myk-pacing.js still counts it (data-pace-media stays 9) and its scroll failsafe still tracks it. This block adds exactly one thing: a condition on when that single reveal is allowed to take effect. One clock, one curve, later gate. FAIL-OPEN, CHECKED IN BOTH DIRECTIONS. `html.mv` is added by js/myk-motion.js and ONLY when IntersectionObserver exists and reduced motion is off (myk-motion.js:59-62). Both suppression and release are behind `html.mv`, so no-JS, no-IO and prefers-reduced-motion all land on a fully opaque image with no rule of ours applying. The release also keys on any `.mv-in` inside the copy column rather than one class name, so a lane retiming the eyebrow retimes the image WITH it — which is the correct coupling, not a hazard. THE PARALLAX SHE PRAISED IS UNTOUCHED. `data-n-parallax-bg="very_subtle"` lives on the layer INSIDE this wrap; the fade is opacity ON the wrap. Different element, different property, verified coexisting in r4, r6 and again here. SCOPED >=1000px ON PURPOSE. Below that the row stacks (B6/B8.4) and the copy sits ABOVE the image, so gating the image on the copy's arrival would fire it EARLIER, not later. On stacked layouts the page-wide adoption is already correct and is left alone. ========================================================================== */ @media only screen and (min-width:1000px){ /* (1) HOLD. The JS trigger for this element is a half-viewport too early; the section refuses the reveal until its own copy has arrived. */ html.mv #s03-unique .mk-unique__images #mk03_kitchen .column-image-bg-wrap[data-mv], html.mv #s03-unique .mk-unique__images #mk03_card .column-image-bg-wrap[data-mv]{ opacity: 0; } /* (2) RELEASE, on the copy's own arrival. `:has()` contributes its argument's specificity, so this is (2,6,1) against (1) at (2,4,1) and wins on specificity as well as source order — no !important anywhere. */ html.mv #s03-unique > #mk03_intro > .row_col_wrap_12:has(.mk-unique__copy .mv-in) .mk-unique__images #mk03_kitchen .column-image-bg-wrap[data-mv], html.mv #s03-unique > #mk03_intro > .row_col_wrap_12:has(.mk-unique__copy .mv-in) .mk-unique__images #mk03_card .column-image-bg-wrap[data-mv]{ opacity: 1; } /* (3) THE FLOATING COASTLINE CARD FOLLOWS THE GROUND, NOT THE OTHER WAY ROUND. Before this block the card fired at section top +355 and the kitchen at +480, i.e. ground first. Moving only the kitchen would have inverted that and floated a small photograph over an empty mist panel. The card is gated on the same line and given Omai's own stagger step (PACING.md §2: 100ms) twice over, so the order is preserved as ground -> card and reads as one layered arrival rather than two events. */ html.mv #s03-unique .mk-unique__images #mk03_card .column-image-bg-wrap[data-mv]{ transition-delay: calc(var(--myk-mv-delay-media, 100ms) + 200ms); } } /* ============================================================================ B12 · FOUNDER R7-08 — more space above AND below the image ---------------------------------------------------------------------------- Founder trace R7-08: "More space above and below (she inspected ~68px; wants more)." WHICH 68px, IDENTIFIED RATHER THAN GUESSED. Nothing in this section computes 68 at any of the five verification viewports. The only value that lands there is B10's own `--mk-unique-img-gap: clamp(48px, 8.9vh, 128px)` evaluated at a ~768px-tall viewport: 8.9vh = 68.4px. That is a 1400-wide window at 100% zoom on her laptop — i.e. she inspected the r6 gap itself and it is the r6 gap she is calling too small. Measured elsewhere for completeness: 80.1px at 900vh, 87.2px at 980vh, and the copy column's 96px block padding (Figma §1.1 "Text" 96/120/96/120), which is INVISIBLE as spacing because the copy is centred in the band — equal padding top and bottom moves the ink nowhere. THE NUMBER, and it is honestly a proposal. She asked for "more" and gave no target. 8.9vh -> 14vh is +57%, which at her inspection height turns 68px into 107px, at 900 turns 80px into 126px, and at 980 turns 87px into 137px. It stays well inside the reference: Omai's own space BELOW the image she named is 240px at 900vh (26.7vh), so 14vh is still the conservative half of their range. Floor and cap move with it (48->72, 128->200) so the ratio holds at both ends. THE FILLS-THE-SCREEN INVARIANT IS RE-CHECKED, NOT ASSUMED. B10 made it arithmetic: image = section - 2*gap, and section = max(100vh + 2*gap, 1200px) keeps image >= 100vh at every viewport. Raising the gap raises the section by exactly 2*delta, so the invariant is preserved by construction; the measured after-values are in review/r7/r7-unique/space-after.json. PROVISIONAL, AND DELIBERATELY ONE LINE. R7-09 is a cross-section zebra audit ("who-is-safe-stay-for has too much space, unique has too little — spacing must be consistent ACROSS sections and breakpoints") and its owner is the single-writer r7:zebra pass, not this lane. The measured numbers and this proposed proportion are recorded in founder-trace/SHARED-REQUESTS.md as SR-R7-08 so that pass can reconcile both sections against one rule. It is expressed as a single custom property so reconciling it costs one line. ========================================================================== */ @media only screen and (min-width:1000px){ .mk-unique { --mk-unique-img-gap: clamp(72px, 14vh, 200px); } } /* ============================================================================ B13 · R7-09 — THE BREATH. THIS SECTION'S HALF OF THE PAGE-WIDE RECONCILIATION ---------------------------------------------------------------------------- FT-20260821-jehnean-round7 R7-09: "who-is-safe-stay-for has too much space, unique has too little — spacing must be consistent ACROSS sections and breakpoints." B12 above is this section's independent answer to the "too little" half and it said so in its own last paragraph: PROVISIONAL, one line, for the single-writer `r7:zebra` pass to reconcile. This is that pass. B12's `clamp(72px, 14vh, 200px)` is superseded here; it is left in place, unedited, because it carries the identification of WHICH 68px the founder inspected and that reasoning is still load-bearing. THE RULE, in the words a designer can hold: ONE BREATH. The empty space between any two neighbouring things on this page is one breath, and a breath is always the same fraction of the screen you are looking at: one fifth of its SHORTER side, never under 96px and never over 208px. A section whose photograph runs to its own edge spends no breath there and its neighbour supplies the whole one. Where two sections both stand back from the boundary, they take half each. --mk-breath: clamp(96px, 20vmin, 208px) 1280x900 -> 180 1440x900 -> 180 1750x980 -> 196 834x1112 -> 166.8 390x844 -> 96 (floor) Full derivation, the five-viewport before/after seam matrix and the screenshots are in review/r7/zebra-spacing-table.md. The rule's other half lives in sections/01-who-why.css §8. WHY THIS SECTION'S TWO GAPS ARE NOT EQUAL, AND WHY THAT IS INVISIBLE. Measured before (review/r7/r7-zebra/seam-before-1750x980.json): the seam ABOVE this section is 137.2 and the seam BELOW it is 234.2. The asymmetry is not in this file — 02-who-why-b's photograph bleeds to its own bottom edge and spends nothing, so this section carries the whole breath at the top; 04-ecology stands back 96px before its overline, so the two sections share the bottom boundary and take half each. top = breath = 196 at her band (02 bleeds -> we carry it all) bottom = breath / 2 = 98 at her band (04 supplies the other half: 96 measured, 2px from 98) seam above = 196 · seam below = 98 + 96 = 194. Both within 2px of a breath. THE ASYMMETRY CANNOT BE SEEN, and that is provable rather than hoped: B10's invariant makes the image at least 100vh tall, so the top gap and the bottom gap are never on screen at the same time. This is re-measured after the change in review/r7/r7-zebra/both-gaps-visible.json — the scan walks the whole section and reports the number of scroll positions at which both gaps are on screen at once. THE FILLS-THE-SCREEN INVARIANT IS PRESERVED BY CONSTRUCTION, not by luck. B10 wrote it as `image = section - 2*gap` with `section = max(100vh + 2*gap, 1200px)`. With two different gaps it becomes `image = section - gapTop - gapBot` with `section = max(100vh + gapTop + gapBot, 1200px)`, which is the same statement and still yields `image >= 100vh` at every viewport. Both min-height declarations are re-stated below for exactly that reason; changing the padding without them is the silent way to regress the founder's "at the middle of the section it's filling out my whole screen" praise. BELOW 1000px THE SEAM WAS 4px AND THAT IS THE BREAKPOINT HALF OF R7-09. Measured 02 -> 03 at 834x1112 and at 390x844: FOUR PIXELS, against 126 on desktop. The stacked layout puts the image first (Block A's `reverse_columns_column_tablet`) and B5's `padding: var(--mk-space-4) 0` is all that separates it from the section above. Only the TOP is set here: the bottom padding at that width sits between the image and the copy, which is an internal gap and not a seam. Heights are `auto` below 1000px (B8.4), so this adds height rather than squeezing the image — the 1200px band B10 warns about is not re-imposed, because no min-height is touched in this block. THE TOKEN IS A FALLBACK ON PURPOSE. `--mk-breath` belongs in css/tokens.css, which this lane does not own; the promotion is filed as REQ-ZEBRA-1 in founder-trace/SHARED-REQUESTS.md. Until it lands the literal below is the value; after it lands every consumer picks it up with no edit here. ========================================================================== */ @media only screen and (min-width:1000px){ .mk-unique { --mk-unique-img-gap: var(--mk-breath, clamp(96px, 20vmin, 208px)); --mk-unique-img-gap-b: calc(var(--mk-breath, clamp(96px, 20vmin, 208px)) / 2); min-height: max(calc(100vh + var(--mk-unique-img-gap) + var(--mk-unique-img-gap-b)), 1200px); } .mk-unique > #mk03_intro > .row_col_wrap_12 { min-height: max(calc(100vh + var(--mk-unique-img-gap) + var(--mk-unique-img-gap-b)), 1200px); } .mk-unique .mk-unique__images > .vc_column-inner { padding-block: var(--mk-unique-img-gap) var(--mk-unique-img-gap-b); } } @media only screen and (max-width:999px){ .mk-unique .mk-unique__images > .vc_column-inner { padding-top: var(--mk-breath, clamp(96px, 20vmin, 208px)); } /* The BOTTOM edge below 1000px is not the image and not the copy column's `padding: var(--mk-space-96) 0` — MEASURED at 834x1112, the last box in the section is a second `.nectar-split-heading > p` row sitting flush at `sectionBottom - 0`, so both of those levers miss it entirely. Padding the section itself is the only lever that cannot be missed by a later row, and the section's own padding-block is 0 at every width (census: review/r7/r7-zebra/before-*.json `padT`/`padB`), so nothing is being fought. Half a breath, because 04-ecology stands back too. */ .mk-unique { padding-bottom: calc(var(--mk-breath, clamp(96px, 20vmin, 208px)) / 2); } } /* ============================================================================ B14 · R8-07 — "the kitchen image height in the background... it's a little tall... having that image particularly stretching out beyond the screen is really uncomfortable... I just want the section itself to be tall enough to be full screen." REGRESSION relative to R8-07's own named-good reference. ---------------------------------------------------------------------------- FT-20260821-jehnean-round8 R8-07 names the fix directly: "find the height on that [08-recovery left] image and then match [it]." She called that image's height "really good." MEASURED, NOT ASSUMED (review/sweep31/cdp.py, live at all three >=1000px verification widths, both sections on the SAME served build): [data-section="08-recovery"] .column-image-bg-wrap height 1280x900 892px 1440x900 892px 1750x980 892px <- CONSTANT .mk-unique .mk-unique__tall .column-image-bg-wrap (kitchen, before B14) 1280x900 945px 1440x900 945px 1750x980 1029px <- GROWS with vh 08-recovery's image does not scale with viewport at all: it is a LITERAL 892px (sections/08-recovery.css §1.2/`--mk-08-band: calc(892px + 2 * breath)` — read there, not edited, per this round's instruction). The band AROUND the photo grows with the breath token; the photo itself never does. That fixed-size-plus-breathing-room shape is what she praised. ROOT CAUSE OF THE REGRESSION, TRACED TO ITS OWN COMMIT HISTORY IN THIS FILE: B8.3 (founder defect D12, "far more vertical height") deliberately REPLACED this section's own Figma-native fixed height — "kitchen 1 · 2777:2372 · 443 x 892" per B5 above, the exact same 892 recovery uses, because both photos are 900px Figma sections with 4px top/bottom padding — with a `height:100%` chain, reasoning at the time that "a variable band [with] that literal [892] is the thing that would leave a strip of mist under the photo." B10/B12/B13 then grew the BAND to `100vh + gaps` (with a 1200px floor) specifically so the 100%-chained image would keep pace with an ever-taller viewport and "fill the whole screen" — the exact behaviour named here as the regression. The image was never supposed to be a fixed 892 AND also stretch; R8-07 is founder direction to stop the stretch and go back to Figma's own fixed measure, using breath (not a blank "strip of mist") to fill the band around it — which is exactly what 08-recovery already proves does not read as a gap, because the gap has a name (breath) and a job (rhythm), not an accident. THE FIX, SAME SHAPE AS 08-RECOVERY'S OWN: state the band as `content + gapTop + gapBot` instead of `viewport + gaps, floored`. B13's asymmetric zebra gaps (top = breath, bottom = breath/2, because 04-ecology supplies the other half of the seam below) are KEPT — R8-07 is silent on spacing and the general direction says respect the breath rule, not reinvent it. Only the base term changes: `892px` literal, replacing `100vh` entirely and dropping the `1200px` floor B10 added for the 100%-chain that no longer exists. 08-recovery carries no such floor either at its own two gaps (`calc(892px + 2 * breath)`, unfloored) — this mirrors it exactly rather than inventing a new safety margin recovery does not have. ARITHMETIC, VERIFIED IMMERSIVE WITHOUT BEING TALLER THAN THE REFERENCE: band = 892 + breath + breath/2 1280x900 892 + 180 + 90 = 1162px (1.29 screens, vs recovery's 1.39) 1440x900 892 + 180 + 90 = 1162px (1.29 screens) 1750x980 892 + 196 + 98 = 1186px (1.21 screens, vs recovery's 1.31) Still comfortably more than one screen at every reviewed width (D12's "immersive, not sandwiched" holds), never MORE than recovery's own ratio (so it cannot re-earn the "stretching out" complaint), and the photograph itself is now the same constant 892px she called out as correct. `.divider`'s height is set EXPLICITLY to the new `--mk-unique-img-h` token here, rather than left to resolve implicitly through B8.3's `height:100%` chain (which, given the new band size, would arrive at the same 892 by construction — band minus its own gaps). B8.3's own comment warns "EVERY LINK IN THE CHAIN IS REQUIRED... If you add an element to this column, add it here too" — the inverse is true of a fixed measure: naming it explicitly means a future change to the gap arithmetic cannot silently re-stretch the photo again. --------------------------------------------------------------------------- THE FIRST VERSION OF THIS BLOCK DID NOT WORK, AND THE MEASUREMENT CAUGHT IT BEFORE SHIP. `.mk-unique{min-height:...}` here is (0,1,0). It is not this file's only writer of that selector: `css/rhythm.css` §2 (linked LAST by _tools/compose.py, after every section sheet) carries .mk-page .mk-unique, .mk-page .mk-unique > #mk03_intro > .row_col_wrap_12 { min-height: var(--mk-band-135) } [ = max(1215px, 135svh), NOT a real comment terminator — written without slash-star here on purpose, see the note below this block ] at (0,2,0) and (1,3,0) respectively — BOTH higher than this block's original (0,1,0) and (1,2,0), and later in the document besides. Re-measured after the first edit: `.divider` correctly read 892px (it has no rhythm.css competitor), but `.column-image-bg-wrap` — the element that is actually PAINTED, sized by its own positioned ancestor's box rather than by the divider — was UNCHANGED at 945px/1029px. rhythm.css's rule was still the one deciding the band; this block's min-height was being entirely overwritten before it ever reached the box the founder is looking at. rhythm.css's own header names precisely this failure mode for a different section it ceded on: "leaving a losing override in place would have been worse than useless: inert today, and a silent fight the first time either specificity moved" — which is exactly what a same-specificity version of this block would have been. THE FIX IS THE SAME ONE `sections/08-recovery.css` ALREADY USES AGAINST THIS SAME FILE, FOR THE SAME REASON (its own comment: "ID-SCOPED, because it has to be... `#s08-recovery` carries an id, so (1,4,0) and (1,2,0) win on weight"). `#s03-unique` (the section's own id, `html:76`) is (1,0,0) — higher than rhythm.css's (0,2,0) regardless of load order — and `#s03-unique > #mk03_intro > .row_col_wrap_12` carries two ids, (2,1,0), against rhythm.css's one, (1,3,0). Both win now, and stay winning even if a future rhythm.css edit adds another class. THIS DOES NOT EDIT `css/rhythm.css`, which this lane does not own. Filed as SR-R8-07 in founder-trace/SHARED-REQUESTS.md (dual-mechanism copy at founder-trace/requests/REQ-R8-07.md) asking its owner to fold the 03-unique lines out of §2 once this round closes — the same fold-back B8.2/SR-02 did for `_band-xl.css`'s conflicting rule. Until then rhythm.css's own `--mk-band-135` line is dead code for this section, named here so the next reader does not have to re-derive that from a diff. Same specificity relationship for the `.divider` rule as before — (0,3,0), later than B8.3's — it has no rhythm.css competitor so no id-scope is needed there. Scoped >=1000px, same reason as B10/B12/B13: below that the row stacks and Block A's svh dividers already own the height (B6/B8.4). ========================================================================== */ @media only screen and (min-width:1000px){ #s03-unique { --mk-unique-img-h: 892px; /* Figma "kitchen 1" 2777:2372 native height, §1.1/§3.2 — identical to 08-recovery's own reference measure */ --mk-unique-img-gap: var(--mk-breath, clamp(96px, 20vmin, 208px)); --mk-unique-img-gap-b: calc(var(--mk-breath, clamp(96px, 20vmin, 208px)) / 2); min-height: calc(var(--mk-unique-img-h) + var(--mk-unique-img-gap) + var(--mk-unique-img-gap-b)); /* (1,0,0) beats rhythm.css's (0,2,0) */ } #s03-unique > #mk03_intro > .row_col_wrap_12 { min-height: calc(var(--mk-unique-img-h) + var(--mk-unique-img-gap) + var(--mk-unique-img-gap-b)); /* (2,1,0) beats rhythm.css's (1,3,0) */ } .mk-unique .mk-unique__tall .divider { height: var(--mk-unique-img-h); /* explicit, not inherited from the height:100% chain — see note above */ } } /* ============================================================================ B15 · MOBILE ROUND (FT-20260830) — text above image · background inset with card overhang. Every rule here is <=999px; >=1000px is untouched. ---------------------------------------------------------------------------- (1) TEXT FIRST. Block A's `reverse_columns_column_tablet/phone` stacks the row image-first on mobile, which also lands this copy against 04-ecology's heading. DOM order is already copy -> images, so the fix is to stop reversing, not to move markup: restated at (2,1,0) against Block A's (0,3,0) tablet AND phone rules, which stay in place verbatim (Block A is lifted, not edited; 690 nests inside 999 so one override covers both). The card's absolute anchor is the images COLUMN (B2 position:relative), not the row, so order does not move it; B11's copy-gates are >=1000px. The zebra rhythm (B13) was measured with the image first and is preserved by swapping which column carries which padding, not by re-deriving it: seam above (02 -> 03) was image padding-top = breath -> now copy padding-top = breath (same value, new first element); internal (copy<->image) was image-bottom 4 + copy-top 96 = 100 -> now copy-bottom 96 + image-top 4 = 100; seam below B13's section padding-bottom breath/2, untouched. (1,2,0) on both padding overrides beats B6's and B13's (0,3,0). The eyebrow row's Block-A `top_padding_tablet_8pct` (!important) is NOT fought: it was inside the old internal gap and is inside the top seam now, both within the breath band. (2) OVERHANG. Salient architect reference at 412 (recon/arch-strip-0.png, lower half): background image x 66..378, floating card x 33..172 — the background is inset 16% of the viewport from the LEFT and the card overhangs that edge by half the inset. Ours aligned both at the column edge (row padding 8%). The row's 8% already supplies half the inset, so only the BACKGROUND row is pushed the other 8vw-equivalent: 8/84 of the wrapper (the wrapper is 84% of the row after its 8%+8% padding), which resolves against laid-out boxes where a bare 8vw would double-count the scrollbar. The card keeps Salient's own left:0 — the column edge IS the reference's card position — so the parallax/scroll mechanics (data-scroll-animation, data-n-parallax-bg) carry no new rule at all. ========================================================================== */ @media only screen and (max-width:999px){ #s03-unique > #mk03_intro > .row_col_wrap_12 { flex-direction: column; } #s03-unique .mk-unique__copy > .vc_column-inner { padding-top: var(--mk-breath, clamp(96px, 20vmin, 208px)); /* FOUNDER BUG (2026-08-31): this rule's own header comment planned "copy-bottom 96 + image-top 4 = 100" for the internal copy<->image gap, but only padding-top ever shipped. At <=690px vendor style.css's `.wpb_column.col.no-extra-padding_phone > .vc_column-inner{padding:0}` (specificity 0,5,1) beats this file's un-ID'd 999px rule (0,3,0) and zeroes padding-bottom outright — measured 0px gap between the placeholder paragraph and the kitchen photo. This selector is already #s03-unique-prefixed (1,2,0), which outranks the vendor rule at any width, so simply adding the bottom half closes it. */ padding-bottom: var(--mk-space-96); } #s03-unique .mk-unique__images > .vc_column-inner { padding-top: var(--mk-space-4); } /* background only — the floating card overhangs by the difference */ #s03-unique .mk-unique__tall { margin-left: calc(8 / 84 * 100%); } } /* ============================================================================ B14 · MOBILE ROUND 2 (2026-08-31, lane reveal) — TEXT VISIBILITY IS NOT ALLOWED TO DEPEND ON LAZILY-PROMOTED JS AT <=999px ---------------------------------------------------------------------------- FOUNDER (real Pixel 7): "The safe stay / What makes a safe stay unique?" reads as missing/white on her phone. Same defect class as 08-recovery M2, and the same three Salient-owned hidden layers exist here: 1 vendor style.css `.wpb_column.has-animation{opacity:0}` + `[data-animation=fade-in-from-bottom]{transform:translateY(75px)}` on the eyebrow row's and body row's columns (#mk03_eyebrow / #mk03_body). 2 BLOCK A A1 (this file, and page-global — unprefixed lift): `.nectar-split-heading[...]:not(.markup-generated){opacity:0}` on the H2 wrapper `.mk-unique__h2` (data-text-effect="default", so the `[data-text-effect="none"]{opacity:1!important}` pin that saves the body paragraph does NOT reach it). 3 A1 again, once init.js HAS split the markup: every generated `span .inner` rests at translateY(1.3em) inside an overflow:hidden word box until `.animated` lands — transform-hidden, so an opacity pin alone is not sufficient. All three release only through Salient's `salientlazyscript`-promoted init.js + Waypoint chain. B9 above already documents half of this exact hazard (the no-js window); this block retires the other half — the window where html.js IS set but the reveal never fires, which is what a real phone produced. At <=999px the text is simply there, statically. The eyebrow h5 keeps its fade: it is adopted by js/myk-motion.js (`[data-mv]`/`.mv-in`, synchronous script, IO trigger, scrolled-past failsafe, fail-open behind html.mv), and no pin below touches a `[data-mv]` element. !important stated: layer 1 becomes per-frame inline anime.js writes once init.js runs (js/myk-pacing.js §1), and layer 3's own release in A1 carries transform:none!important already. >=1000px resolves nothing from this block; desktop choreography is byte-untouched. ========================================================================== */ /* 2026-09-02 — ALL WIDTHS NOW, not <=999px. The founder, testing desktop at :5090: "What makes a safe stay unique? I'm still seeing the title text animated before the overline." MEASURED (reader-speed screencast, desktop-1440, _tools/_scratch/eyes/arrive-dt-s03): Salient's line-reveal on the H2 fires at its own waypoint while the eyebrow waits on the column's `data-animation-offset="70%"` fade — heading first, overline second, paragraph third-and-late. Her rule is one order everywhere (overline -> title -> paragraph, the hero's and 01's pattern), so this section's three Salient-owned hidden layers are pinned open at every width and the trio is handed to js/myk-motion.js (`[data-mv]`, `data-mv-adopt` on the h2 + p): 100 / 220 / 440ms, the site's lanes, the site's order. The desktop line-reveal is gone by that decision, not by accident. */ @media all{ /* layer 1 — both copy rows' entrance columns (eyebrow + body) */ .mk-unique .wpb_column.has-animation{ opacity: 1 !important; transform: none !important; } /* layer 2 — the H2 wrapper's pre-split hold */ .mk-unique .nectar-split-heading.mk-unique__h2{ opacity: 1 !important; } /* layer 3 — the post-split per-word masks, whether or not .animated ever lands. Covers both markup shapes init.js can emit for this element. */ .mk-unique .mk-unique__h2 span .inner{ -webkit-transform: none !important; transform: none !important; opacity: 1 !important; filter: none !important; transition: none !important; } .mk-unique .mk-unique__h2 .heading-line > div{ -webkit-transform: none !important; transform: none !important; } } /* ========================================================================== FOUNDER 2026-09-02 — NO ABSOLUTE TEXT MEASURE. "There's no absolute here … everything we do is percentages and ratios because everything's responsive." The 475px cap (css/rhythm.css, now retired) did two wrong things at once: at 1440+ the copy column stayed 837px while the images column pinned right, leaving 400px of empty ground beside a 4-line Spanish heading; at ~1176 the fixed measure ran INTO the coastline card, which overhangs the seam by 150px (`translateX(-150px)`, B5 above) — "the text is touching the image". The rule she gave: keep a proper gutter from the images — the kitchen AND the parallax coastline card — at every width. So: · the copy column fills whatever the images column leaves (flex 1 1 auto) · its right padding is the card's overhang plus one gutter, so the text group can never reach the card, and the measure grows and shrinks with the viewport instead of being pinned · one readability guard, font-relative not px: the text group never runs past 75ch. At 1440 that is not binding (703px available); at 1600+ it keeps the paragraph inside a readable measure. MEASURED before: h2 right edge 583 vs card left 583 at 1176 (touching); 595 vs 847 at 1440 (252px of air inside the column, 400 to the kitchen). ========================================================================== */ @media (min-width: 1000px) { .mk-page .mk-unique { --mk-unique-card-overhang: 150px; } /* = B5's translateX(-150px) */ .mk-page .mk-unique .mk-unique__copy { flex: 1 1 auto; max-width: none; min-width: 0; } .mk-page .mk-unique .mk-unique__copy > .vc_column-inner { padding-right: calc(var(--mk-unique-card-overhang) + var(--mk-space-24, 24px)); } .mk-page .mk-unique .mk-unique__copy > .vc_column-inner > .wpb_wrapper { max-width: min(100%, 75ch); } }