/* ============================================================================
_band-sm.css — the 1000–1279 band. Owned by lane `fluid:sm`.
----------------------------------------------------------------------------
LOADS LAST, after every section sheet, so it can correct an edge a section
authored before the fluid system existed without editing that section's file.
WHAT THIS FILE IS FOR
review/fluid/grid-fluid.css gives the page Salient's real container:
vw >= 1000 : gutter 120, content = min(vw,1440) - 240
vw <= 999 : gutter 6vw, content = 88vw
so the whole band 1000..1440 is ONE regime and its only reflow edge is 999.
V1 was built before that, against a four-step ladder (1279 / 1049 / 1024 /
640), and eleven files still carry a `max-width: 1024px` or `1023px` tier.
Those tiers now fire INSIDE the desktop regime: at 1024 the page runs its
mobile stacking rules while the container is still 120/784. Measured with
review/fluid/sm-edgediff.py, a 1px bisection of that edge:
docHeight 1024 -> 20960 1025 -> 19121 +1839px at ONE width
235 elements move across a single pixel of viewport
THE RULE THIS FILE APPLIES, ONCE, EVERYWHERE
Every reflow belongs on the system's own edge. FLUID-SYSTEM.md §2.4 is
explicit about why: the container's step at 999 is invisible in use only
BECAUSE every other reflow lands on the same pixel — "Salient bundles them
at 1000 in all four demos for exactly this reason". A stack that fires at
1024 unbundles them and puts a mobile layout inside a desktop gutter.
So the shape of every block below is:
@media (min-width: 1000px) and (max-width: 1024px) { ...the >=1025 value... }
which is not a new design decision — it re-states what the page already does
at 1025 across the last 25px of the desktop band. NOTHING here is authored;
every value is either a system token or the section's own desktop literal,
cited at the line that uses it.
THE ONE THING THAT IS NOT THAT SHAPE, SAID UP FRONT
§4 does the opposite: it moves two type edges UP rather than deleting them.
The 1024 type ramps are not all the same defect as the 1024 layout ramps.
05-ecology-b's `64px` step is what keeps "Ecological considerations" on one
line, and removing it at 1024 makes that section WORSE. What is wrong there
is that the step fires 214px too late. §4 extends the section's OWN tablet
declarations to the width where its headline actually stops fitting, found
by 1px bisection. No type value is invented anywhere in this file. Both are
flagged for founder review in review/fluid/BAND-REQUESTS.md.
Deliberately left alone: 00-hero's and 01-who-why's ramps at 1024/1023.
00-hero's is a 5px discontinuity in a headline that fits at every width in
the band; 01-who-why's fires at 1023, below the widths this lane was asked
to fix, and nothing measures broken above it. Both are recorded rather than
changed, because moving an edge that is not breaking anything is a design
decision with no measurement behind it.
PROOF OF NO REGRESSION AT THE ARTBOARDS
Every media query in this file is bounded by `max-width` 1024, 1038, 1099,
1200, 1238, 1279 or 1279.98. None of them matches at 1280 or at 1440. The two Figma
artboards cannot see this file at all — confirmed three ways in
review/fluid/band-sm.md §5, including 17-of-20 bit-identical section PNGs
and an unchanged 2.69 fidelity mean.
========================================================================== */
/* ==========================================================================
0. REQ-md-01 BELT-AND-BRACES, BAND-SCOPED. DELETE WHEN REQ-md-01 LANDS.
--------------------------------------------------------------------------
NOT this lane's finding — `fluid:md` filed it as REQ-md-01 and shipped the
same block in `_band-md.css` for 1280..1440. It is repeated here because
md's copy is `min-width: 1280px` and the defect is just as live below that,
in THIS band, with nothing else covering it.
grid-fluid.css §6 redefines tokens.css's `--mk-lh-body` from `180%` (a RATIO)
to `36px` (a LENGTH). That token is deliberately polymorphic: the section CSS
applies it at 24px (-> 43.2), 20px (-> 36) and 18px (-> 32.4) and says so in
its own comments (07-building.css:350, 10-recovery-41.css:289 and :301,
13-recovery-45.css:459 and :468). Only the 20px case survives the change.
Independently re-measured by this lane at 1152, pristine build/v1-en on :5143
against the grid-fluid sandbox on :5142, counting realized font/line pairs on
text-bearing leaves:
pair pristine with grid-fluid
24 / 43.2 18 6 <- 12 card titles lost 7.2px
24 / 36 0 13
18 / 32.4 13 5 <- 8 excerpts gained 3.6px
18 / 36 0 8
The single-point fix belongs in grid-fluid.css. This restores the four tokens
to the units tokens.css:209-212 already ships, so it cannot introduce
anything — it can only put back what was there. Band-scoped so it cannot
collide with md's copy; the two media queries are disjoint at 1279/1280.
========================================================================== */
@media (min-width: 1000px) and (max-width: 1279.98px) {
:root {
--mk-lh-hero: 121px; /* tokens.css:209 — 00-hero §4, authored 121 exactly */
--mk-lh-display: 60px; /* tokens.css:210 — 20-cta-c §2.2 */
--mk-lh-h2: 64.8px; /* tokens.css:211 — 36px @ 179.99999523162842% */
--mk-lh-body: 180%; /* tokens.css:212 — applied at 24 / 20 / 18. MUST be a ratio. */
}
}
/* ==========================================================================
1. THE HEADER — two defects, one mechanism
==========================================================================
1.1 THE CTA VANISHES BELOW 1051.
index.html:248-249 nests "Begin recovery" as the fifth of
`ul.mk-nav__list` inside `nav.mk-nav`, and grid-fluid.css §8.1 hides
`.mk-nav` at <=1050. Measured on the built page: the CTA is 169x40 at 1051
and 0x0 at 1050. grid.css:199-201 already states the intent the markup does
not deliver — "collapse the four text links into the off-canvas menu,
keeping logo · CTA · search · hamburger" — and FLUID-SYSTEM.md §5.2 records
that Salient never hides a header CTA (architect 187.91 -> 154.23, resort
160.52 -> 160.28: laid out at every width, only the type step shrinks it).
1.2 THE ROW DOES NOT FIT BETWEEN 1051 AND 1193.
The row is logo + nav + search + burger at itemSpacing 12. Its widths are
pinned by Figma (myk-btn.css:487-491 = 127+117+128+107+169 = 648, + 4 gaps
= 696 for the nav) and the wordmark is `white-space: nowrap`, so the row has
a hard minimum:
107.16 wordmark at its intrinsic 16px nowrap width
+ 12 + 696 nav
+ 12 + 54 search
+ 12 + 60 hamburger
= 953.16 -> needs content >= 953.16 -> vw >= 1193.16
Below that the row overflows, and because it centres its overflow the page
gutter collapses on BOTH sides. Measured on the built page:
vw content right edge gutter
1051 811 1002.08 48.92 / 48.92 (want 120)
1100 860 1026.58 73.42 / 73.42
1152 912 1052.58 99.42 / 99.42
1200 960 1080.00 120.00 / 120.00 fits
1280 1040 1160.00 120.00 / 120.00 the artboard
THE FIX IS SALIENT'S OWN MECHANISM, NOT A NEW ONE.
`data-header-breakpoint` is a per-site number whose whole job is "collapse
the menu at the width where this site's menu stops fitting". V1 copied
resort's 1050 verbatim; resort's menu fits at 1051 and ours needs 1193.16.
Applying the mechanism to OUR menu gives 1200 — the smallest round hundred
at or above the requirement, with 6.84px of slack left for the wordmark, and
80px clear of the 1280 artboard.
Both defects are the same edit: keep `.mk-nav` LAID OUT so the CTA survives,
and hide only the four text links, which are already duplicated in the
off-canvas menu (index.html:4626-4632 carries all five items, CTA included),
so nothing becomes unreachable.
Lower-bounded at 1000 on purpose. Below the container breakpoint the row
would need 426px of the 88vw box and the phone tier is not this lane's band;
the structural repair that fixes every width at once — moving the CTA out of
`.mk-nav` into a `.mk-header__actions` sibling, which grid-fluid.css §8.1
already ships the CSS for — is filed in BAND-REQUESTS.md.
-------------------------------------------------------------------------- */
@media (min-width: 1000px) and (max-width: 1200px) {
/* WHERE THE 1050 EDGE ACTUALLY LIVES — and it is not grid-fluid.css.
Salient compiles `data-header-breakpoint` straight into the site's
generated stylesheet, and that is the rule with the authority:
salient-dynamic-styles-multi-id-37.css
@media only screen and (min-width:1000px) and (max-width:1050px) {
#header-outer #top nav, … { display: none !important; }
}
(2,0,1) + !important. grid-fluid.css §8.1's `.mk-nav { display: none }` at
(0,1,0) is a restatement of it, not the source — proved by asking the page
which rules matched, review/fluid/sm-why.py. So the override has to carry
BOTH a higher specificity and !important; anything less silently loses and
the CTA stays at 0x0. Scored (2,1,1): one class more than Salient's, which
is the minimum that wins. This is the one !important in this file and it
exists only to out-rank a vendor !important. */
#header-outer #top nav.mk-nav { display: flex !important; }
/* Hide the four text links; keep the CTA's . `:has()` rather than
`:nth-child(5)` so a menu re-order cannot silently take the CTA with it.
THE SPECIFICITY IS NOT DECORATION. The rule that has to be beaten is
style.css @media (min-width:1000px):
#header-outer:not([data-format="left-header"]) #top > .container > .row
nav > ul > li { display: flex } -> (2,3,3)
so `#header-outer #top nav.mk-nav > .mk-nav__list > li` at (2,2,3) LOSES,
silently, and the menu stays laid out. `.container .row` carries it to
(2,4,3), one class above Salient's, which is the minimum that wins.
No !important is needed — Salient's rule does not carry one. */
#header-outer #top .container .row nav.mk-nav > .mk-nav__list > li {
display: none;
}
#header-outer #top .container .row nav.mk-nav > .mk-nav__list
> li:has(> .myk-btn--nav-cta) { display: flex; }
/* The hamburger is the four links' new home and is already `display: flex`
at every width in this build; restated so the pair cannot drift apart. */
.slide-out-widget-area-toggle { display: flex; }
}
/* ==========================================================================
2. THE 1024 SEAM — shared primitives
==========================================================================
grid.css:205-219 still carries the pre-fluid tier:
@media (max-width: 1024px) { .mk-measure-* { width: 100% }
.mk-rail-images { width: 100% } ... }
grid-fluid.css §4 replaced those with `min(px, 100%)` released at
999, but two sections re-assert `width: 100%` from their OWN sheets at
<=1024 (10-recovery-41.css:389-396, 09-recovery-42.css:291-295), which load
after it. Restating the system values here puts them back for 1000..1024.
-------------------------------------------------------------------------- */
@media (min-width: 1000px) and (max-width: 1024px) {
.mk-measure-860 { width: min(860px, 100%); } /* 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 column */
.mk-measure-323 { width: min(323px, 100%); } /* 11 §4 text block */
/* 563 is measured from the VIEWPORT edge and contains the page gutter, so
the media side is the remainder and bleeds right (grid-fluid.css §4.2).
At 1024 that is 1024 - 563 = 461, which is still above the ~380 floor at
which FLUID-SYSTEM.md §4.2 says the rail stops working (vw 943). */
.mk-rail-images { width: calc(100% - 563px); }
/* ---- 2.1 09-recovery-42 --------------------------------------------
Its <=1024 block turns the row into a column. At 1024 that leaves a
323px text measure alone in a 1024px band — 580px of dead white to the
right of the copy — and adds 548px to the section (1460 vs 912).
Restated to the section's own desktop rules (09-recovery-42.css:72-100,
198-215). */
.mk-recovery-42__row { flex-direction: row; }
.mk-recovery-42__rail { flex: 0 0 auto; width: min(563px, 100%); }
.mk-recovery-42__copy { min-height: 672px; } /* 912 - 120 - 120, spec §1 */
.mk-recovery-42__images { width: calc(100% - 563px); }
.mk-recovery-42 .nectar-fancy-box[data-style="hover_desc"] {
height: 450px; /* spec §1, fixed at both artboards */
padding: var(--mk-space-60); /* the card inset token, 48.0 at 1024 */
}
.mk-recovery-42 .nectar-fancy-box[data-style="hover_desc"] .heading-wrap {
width: auto;
}
/* ---- 2.2 10-recovery-41 --------------------------------------------
Same shape: `flex-wrap: wrap` + two 100% bases stack the rail, and the
section grows from 912 to 1729. Desktop rules are 10-recovery-41.css:19,
68-73, 189-195. */
.mk-recovery-41 { flex-wrap: nowrap; min-height: var(--r41-h); }
.mk-recovery-41__text { flex: 0 0 auto; flex-basis: auto; }
.mk-recovery-41__rail { flex: 1 1 auto; flex-basis: auto; min-width: 0; }
.mk-recovery-41__group { max-width: none; } /* the 563 cap exists only
for the stacked case */
/* ---- 2.3 12-recovery-44 --------------------------------------------
Desktop rules are 12-recovery-44.css:28-38, 52-60, 171-176, 212-218. */
.mk-recovery-44 {
flex-direction: row;
min-height: 1366px; /* spec header — EN and ES */
--mk-r44-card-h: 450px; /* spec §1.1, fixed at both */
}
.mk-recovery-44__rail {
width: calc(323px + 2 * var(--mk-page-x)); /* = 563 at 120, spec §4.1 */
padding-block: var(--mk-page-x); /* T/B 120, spec §1.1 */
}
.mk-recovery-44__band {
border-radius: 0 var(--mk-radius-card) var(--mk-radius-card) 0;
}
.mk-recovery-44 .nectar-fancy-box[data-border-radius="5px"][data-style="hover_desc"] {
border-radius: var(--mk-radius-card) 0 0 var(--mk-radius-card);
padding: var(--mk-space-60); /* spec §6.3 — the token, not 40 */
}
/* ---- 2.4 13-recovery-45 --------------------------------------------
Desktop rules are 13-recovery-45.css:71-77, 142-152, 157-162, 286-293.
`#s13-recovery-45 { height: auto }` comes from that file's <=1279 block
and is CORRECT under the fluid system (the section must be free to grow
below the artboard width) — it is deliberately not restated here. */
#s13-recovery-45 > .wpb_row > .row_col_wrap_12 {
flex-direction: row;
min-height: 1366px; /* the <=1279 block's own value */
}
#s13-recovery-45 .mk-recovery-45__rail {
flex: 0 0 563px; /* spec §5 */
width: 563px;
max-width: 563px;
}
#s13-recovery-45 .mk-recovery-45__rail > .vc_column-inner {
height: 100%;
padding: var(--mk-page-x); /* 120 on all four — spec §1.2 */
}
#s13-recovery-45 .mk-recovery-45__rail > .vc_column-inner > .wpb_wrapper {
justify-content: center; /* primaryAxisAlignItems CENTER */
height: 100%;
}
#s13-recovery-45 .mk-recovery-45__copy > .vc_column-inner > .wpb_wrapper {
width: 323px; /* spec §1.3 — fixed measure */
}
#s13-recovery-45 .mk-recovery-45__stack { height: 100%; }
/* ---- 2.5 02-who-why-b : a gutter written as a literal ---------------
02-who-why-b.css:`@media (max-width:1024px){ .mk-whowhyb__text
{ padding-inline: 48px } }` — 48 was the OLD ladder's page margin at this
width. Under the fluid container the gutter is 120 here, so at 1024 this
section's copy started 72px left of every other section's. Measured:
padL 48 at 1024 vs 120 at 1025.
Consumes the token, so it can never desynchronise from .mk-container. */
.mk-whowhyb__text { padding-inline: var(--mk-page-x); }
}
/* ==========================================================================
2b. 11-recovery-43 — the fifth rail, on a different edge from its four
siblings. Its own floor is 1099, not 1024, so its restoration needs
its own band; everything else about it is §2.
========================================================================== */
@media (min-width: 1000px) and (max-width: 1099px) {
/* ---- 2.4b 11-recovery-43 : the fifth rail, and the odd one out -------
11 is the only section in the 09..13 sequence whose stack floor is NOT
1024. Its own spec §5.2 argues "treat ~1100px as the floor for the two-rail
layout — at 1024 the image rail is only 461 wide against a 450 height", and
11-recovery-43.css:280 implements that at <=1099.
The criterion is sound and it is not applied consistently: 09, 12 and 13
have 450px cards too and their specs chose 1024. Once §2.1-2.4 hold those
four at the rail down to 1000, leaving 11 stacked makes the recovery-plan
sequence break rhythm in the middle — railed, railed, STACKED, railed,
railed — at 1000..1099, which is exactly the band this lane exists to fix.
So this restores 11's rail on the same edge as its four siblings. It is a
consistency change, not a correction: 11's stacked form at 1050 renders
correctly on its own (captured in review/fluid/_sm/shots-base/1050/), which
is why it is called out here and in BAND-REQUESTS.md. If the founder
prefers the stack, the answer is to stack ALL FIVE at ONE edge, never to
keep them split. Desktop rules are 11-recovery-43.css:36-64, 169-179. */
.mk-recovery-43__split { flex-direction: row; }
.mk-recovery-43__rail { flex: 0 0 563px; padding-block: var(--mk-page-x); }
.mk-recovery-43__copy { width: min(323px, 100%); }
.mk-recovery-43__card.nectar-fancy-box[data-style="hover_desc"] {
min-height: 450px !important; /* answers the card's INLINE min-height,
which is why the <=1099 block needed
!important too (11:298-301) */
padding: var(--mk-space-60); /* §1.5 — 60 on all four sides */
}
.mk-recovery-43__card.nectar-fancy-box[data-style="hover_desc"][data-border-radius="5px"] {
border-radius: var(--mk-radius-card) 0 0 var(--mk-radius-card); /* §1.4 */
}
}
/* ==========================================================================
3. 03-unique — the coastline card lands on live text
==========================================================================
Not a 1024 defect: it runs the whole band below the artboard, and the
section's own `<=1279` block is what causes it.
THE GEOMETRY. `image 30` is a 300px card centred on the seam between the
copy and the 443px image column (03-unique.css:284-300 — `left: 0` on the
image column plus `translateX(-50%)`), so it always occupies
card: [vw - 443 - 150, vw - 443 + 150]
and it reaches exactly 150px into the copy column at EVERY width. At 1280
the copy column is a fixed 837 with 120/120 padding, so the text box ends at
717 and the card starts at 687: the card overlaps the BOX by 30px and the
longest rendered line (615) clears it by 72.
THE DEFECT. 03-unique.css:325-331 replaces that padding below 1280 with
`calc((100vw - 180px) * 0.08)` — 87.92 at 1279, 77.76 at 1152, 67.52 at
1024. Two things go wrong at once:
(a) the copy's left inset stops being the page gutter, so 03's eyebrow and
headline start at 77.76 while every other section on the page starts
at 120 — a visible mis-registration of the page's left edge;
(b) the text box GROWS as the viewport shrinks (597 at 1280 -> 660 at
1279) while the card's 150px reach does not, so the box's right edge
crosses the card's left edge and the headline runs under the photo.
Confirmed by eye in review/fluid/_sm/shots-base/1152/03-unique.png
("What makes a safe" is cut by the coastline) and .../1024/ (the
headline and the body copy are both cut).
Algebraically the collision is unconditional below 1280:
text_right = vw - 443 - pad card_left = vw - 443 - 150
text_right > card_left <=> pad < 150,
and pad < 150 for every vw below 2055. The concession has no floor.
THE FIX, IN TWO PARTS, BECAUSE THE FIRST ONE ALONE IS NOT ENOUGH.
(a) LEFT: use the page gutter, which is what 1280 already uses. 03's eyebrow
and headline go back to starting at 120 like every other section.
(b) RIGHT: 120 is NOT sufficient here, and measuring it is what proved that.
Restoring 120/120 reproduces the artboard's 30px box overlap exactly —
and the text STILL runs under the photo, because at 1280 the safety came
from SLACK, not from the box: the measure is 597 and the longest line is
495, so 102px of it is never inked. At 1024 the measure is only 341 and
the copy fills it, so every long line reaches the box edge and is cut.
Captured before and after in review/fluid/_sm/shots-base/1024/ and
review/fluid/shots-sm/1024/.
The invariant that actually has to hold is "no rendered glyph crosses
the card's left edge", and the card's reach into the copy column is a
constant 150px — half of the 300px width that 03-unique.css:296 pins
from Figma's `image 30 = 300 x 450`. So the copy's right inset IS that
reach. Then text_box_right == card_left at every width in the band:
1024: column 581, box 120..431, card left 431 measure 311
1152: column 709, box 120..559, card left 559 measure 439
1279: column 836, box 120..686, card left 686 measure 566
`max()` against the page gutter so the inset can never fall BELOW the
page's own margin if --mk-page-x is ever raised. 150 is derived from a
Figma dimension, not chosen: it is 300/2.
Nothing is authored — `--mk-page-x` is the container's own token, so the
left inset tracks the container through 999 automatically.
§5.2's stated order of concession ("the inset goes first, the measure
second") is not overturned: the measure still shrinks, because the copy
column is `flex: 1 1 auto` and absorbs the whole viewport delta. What is
removed is only the part of the concession that had no floor.
Scoped to 1279 rather than to this lane's 1152 because 1279 is the defect's
own edge and stopping at 1152 would leave 1153..1279 broken with the fix
visible one pixel away. Flagged as a cross-band rule in BAND-REQUESTS.md.
-------------------------------------------------------------------------- */
@media (min-width: 1000px) and (max-width: 1279px) {
.mk-unique .mk-unique__copy > .vc_column-inner {
padding-block: var(--mk-space-96); /* 03-unique.css:180 — unchanged */
padding-left: var(--mk-page-x); /* the page gutter, as at 1280 */
padding-right: max(var(--mk-page-x), 150px); /* the card's reach = 300/2 */
}
}
/* ==========================================================================
4. TWO DISPLAY HEADLINES WHOSE ONE-LINE STEP SITS AT THE WRONG EDGE
==========================================================================
Both of these sections ship a type ramp whose job is to keep a display
headline on ONE LINE inside its band. Both ramps step at 1023/1024 — the old
ladder's edge — and in both cases the headline stops fitting well ABOVE that,
so there is a stretch of the desktop band where the ramp has not fired yet
and the headline is already broken.
THIS IS THE ONE PLACE THIS FILE MOVES A DESIGN EDGE, AND IT MOVES ONLY THE
EDGE. Every declaration below is copied verbatim from the section's own
tablet block — no size, leading or weight is invented — and each new edge was
found by 1px bisection in the browser, not chosen. If the founder prefers a
different value at these widths, the value is the section's to change and
this block should be deleted; the measurement stands either way. Both are
written up in review/fluid/BAND-REQUESTS.md.
-------------------------------------------------------------------------- */
/* ---- 4.1 05-ecology-b — "Ecological considerations" wraps 1025..1238 ----
The desktop size is `var(--mk-size-hero)` = clamp(40px, 7.5vw, 96px), and the
rendered headline is 1026.9px wide at 96px inside a 1040 content box — a 98.7%
fill, so it only just fits at the artboard. Below 1280 the clamp shrinks the
type by 7.5vw while the content box shrinks by a full 1vw, and the type loses:
vw content clamp headline lines
1238 998 92.85 ~1017 2
1239 999 92.925 ~1017 1 <- bisected, both directions
1152 912 86.4 924.2 2
1025 785 76.875 ~822 2
1024 784 64.0 718.7 1 <- the section's own step
So the section's `64px` is correct and its EDGE is 214px too low. Extended to
the bisected edge, the headline is one line at every width from 1000 to 1440.
Cost, stated: the 64 -> 92.925 step at 1239 is larger than the 64 -> 76.875
step it replaces. A 2-line headline across 214px of viewport — which also
grows the section from 900 to 987 at 1152 — is the worse of the two.
Reaches above this lane's 1152 because 1238 is the defect's own edge. */
@media (min-width: 1000px) and (max-width: 1238px) {
.mk-ecology-b__heading { font-size: 64px; line-height: 1.26; } /* 05 §6.2 ramp */
.mk-ecology-b__quote { font-size: 24px; line-height: 180%; } /* its pair, 05:757/768 */
}
/* ---- 4.2 06-ecology-c — the title overruns the right gutter 1024..1038 --
`.mk-ecology-c__title` is `white-space: nowrap` and 72px through the whole
<=1279 band (06-ecology-c.css:346). At 72px it renders 799px wide, so it
needs a content box of 799 -> vw >= 1039. Below that it keeps its nowrap and
simply paints past the page gutter:
vw content scrollW overrun
1024 784 799 15px <- visible in the 1024 capture
1038 798 799 1px
1039 799 799 0 <- bisected
The section already ships the answer one pixel lower — its <=1023 block turns
the title to 56/71 and releases the nowrap — so the edge, not the value,
is what is wrong. Only the title's three declarations are extended; the head
padding, the lede and the overlay height are NOT broken in 1024..1038 and
keep their own 1023 edge. */
@media (min-width: 1000px) and (max-width: 1038px) {
.mk-ecology-c__title {
font-size: 56px; /* 06-ecology-c.css:352, verbatim */
line-height: 71px;
white-space: normal;
}
}