/* ────────────────────────────────────────────────────────────────────────── v2.css — the one-page layout only. Loaded AFTER style.css, which keeps the white background, the two typefaces, the type scale and the palette exactly as the approved site has them. Nothing here changes a colour or a font. ────────────────────────────────────────────────────────────────────────── */ /* the header links jump inside the page, so every target needs to clear the sticky header when the browser scrolls to it */ section[id]{scroll-margin-top:calc(var(--head-h,95px) + 20px)} /* ---------- hero ---------- */ .v2-hero{padding:clamp(2.4rem,5vw,4.4rem) 0 clamp(2rem,4vw,3.4rem)} .v2-hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(2rem,4.5vw,4rem);align-items:start} /* Round 1 (history; the declaration it describes is superseded by round 2 below). The hero card sat too far from the text. Closing the column gap alone only moves it about 11px, because the reclaimed space is shared between both columns, so the ratio has to move with it: 1.15fr -> 1.1fr plus a gap of clamp(1.4rem,2.8vw,2.6rem) put the card's left edge 24.0px left at 1440px (23.7 at 1600-1920, 22.7 at 1280, 21.9 at 1200) with the headline and lede keeping their exact line counts at every width. */ /* Round 2 (measured in headless Chromium over http, 320-1920 at 4px). The card was still wider than its own content and still reading as detached. Content floor, measured with the live webfonts: the widest inner row is the third value line, 333.0px of text plus 39.4px of row padding and border = 372.4px, so the panel cannot go below 372.4 + its own padding (clamp(1.2rem,2vw,2rem) a side): 413.2px at 901-1020px, 430.0px at 1440, 440.4px at 1920. The cap below is 470px - the floor plus 40px of trailing room after the longest value line, which is about twice that row's own 18.7px inner padding, so no line reads as crammed. It removes 72.7px of the 112.7px of dead space to the right of the longest line at 1440. The gutter: the hero's own rhythm measures 18.7px (lede margin-top, row padding), 22.1px (rulebox padding), 28.8px (the panel's own padding at 1440) and 37.4px (rulebox margin-top). A gutter tighter than the panel's own padding makes the panel read as clipping the copy, so the gutter is set to exactly that padding - clamp(1.2rem,2vw,2rem), the same declaration style.css:238 gives .stack - i.e. 28.8px at 1440, down from 40.3px. The ratio moves 1.1fr -> 1.08fr only to stop the reclaimed gutter flowing back into the copy column: it holds the copy column within 1px of its present width at every width (596.97 -> 597.7 at 1440), so the headline, the lede and the Clinical Rules box keep their exact wrap. Net at 1440: left edge -11.5px, right edge -84.2px, width 542.7 -> 470. The copy column cannot give more - at 592px the Clinical Rules paragraph breaks to four lines with "practices." orphaned. Scoped to the two-column layout, so the stacked layout below 901px is untouched. THE ONE CONSEQUENCE, recorded because it is deliberate and not a bug. Capping the panel makes it lose the grid's default stretch and fall back to start alignment, so the width it gives up lands to its RIGHT: 81-85px from ~1043px up (peak 85.4 at 1224, 83.5 at 1440, 81.0 at 1920+). The hero panel is therefore the only block on the page whose right edge does not reach the page rail. This is arithmetic, not an oversight - a panel cannot be narrower, sit on the right rail, and move closer to the copy at the same time; any two of the three exclude the third. Narrower and closer were the two that were asked for. To put it back on the rail instead, add justify-self:end here - the panel then starts at rail-470 (840px at 1440), i.e. 83px FURTHER from the copy than before this change. Two further measured notes. The cap is in rem, not px, so it grows with text-only zoom; at a fixed 470px every value line wrapped at 150% text zoom. And at exactly 979px the copy column is 0.52px narrower than before, which tips .v2-rulebox p from 4 lines to 5 and moves everything below the hero down 26.17px. 979 is the only width in 901-1920 where any non-hero geometry moves at all; the headline and lede never change at any width. The copy column itself holds to within 1.36px (not 1px: -1.297 at 901, +1.359 at 1576). */ @media (min-width:901px){.v2-hero .wrap{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:clamp(1.2rem,2vw,2rem)} .hero-art{max-width:27.65rem} /* Round 3 (measured in headless Chromium over http, 320-1920 at 4px, live webfonts). The third value line wrapped to two lines in FRENCH and SPANISH at every width from 904 up - 314 of the 401 sampled widths for fr, 303 for es - while English wrapped only at 904-920. The cap above is derived from the ENGLISH line and is 27.65rem for all three locales, so the two longer lines never got the width they need. Same derivation, per locale, from the max-content width of the longest .hero-art .card .v measured with the live webfonts: en 333.00px fr 420.00px es 392.00px plus the card's own chrome (2 x 1.1rem padding + 2 x 1px border = 39.4px) and the panel's own padding at its widest (2 x 2rem = 68px): floor 440.40 / 527.40 / 499.40px. The English cap adds 29.65px of trailing room to its floor (440.40 -> 470.05 = 27.65rem); the two rules below add the same 29.65px to theirs -> 557.05px (32.75rem) for fr, 529.05px (31.10rem) for es. Nothing else moves: both selectors are locale-scoped, so the English panel, the English column ratio and the English gap are untouched at every width. WHAT THIS DOES AND DOES NOT FIX, measured. The cap is only the binding constraint once the 1fr column is wider than the line needs. Column width is (wrap - gap)/2.08, i.e. 402.13px at 901 rising to 555.02px at 1280; the fr line needs 500.20px of column at 901 and 504.08px at 1117, the es line 472.20px / 476.08px. So raising the cap alone carries fr from 1116 up and es from 1052 up (last wrapping width 1112 / 1048), and below those widths the COLUMN, not the cap, is short: 98.07px short for fr at 901, 70.07px for es. The only way to widen it there is to take the difference from the copy column, and the copy column cannot give it: bisecting the copy column at each width for the point where the hero copy re-wraps puts its floor at 398-514px for fr and 401-524px for es, i.e. within 3-25px of the width it already has, against a 12-98px shortfall. Buying the one line in 901-1112 would therefore cost the fr lede or the Clinical Rules paragraph an extra line at almost every width in that band - a taller hero and worse copy to straighten one card row. It is left wrapping there on purpose. (For reference English itself wraps at 904-920 for the same reason and is likewise left alone; it is frozen.) Rem, not px, deliberately, as above: the cap has to grow with text-only zoom. */ html[lang="fr"] .hero-art{max-width:32.75rem} html[lang="es"] .hero-art{max-width:31.1rem}} @media (max-width:900px){.v2-hero .wrap{grid-template-columns:1fr}} .v2-hero h1{max-width:15ch} .v2-hero .lede{max-width:52ch;margin-top:1.1rem} /* the rule box: the one card in the hero, same hairline language as .figure */ .v2-rulebox{margin-top:clamp(1.6rem,3vw,2.2rem);padding:1.15rem 1.3rem; border:1px solid var(--line);border-radius:var(--radius);background:var(--mist)} .v2-rulebox h2{font-size:1.02rem;margin:0 0 .5rem;color:var(--navy)} .v2-rulebox p{margin:0;font-size:.95rem} .v2-rulebox .v2-badge{margin-top:.85rem;padding-top:.75rem;border-top:1px solid var(--line); font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.78rem; letter-spacing:.06em;text-transform:uppercase;color:var(--teal)} /* ---------- the two audience boxes, and the three module boxes ---------- */ .v2-cards{display:grid;gap:clamp(1.2rem,2.4vw,1.8rem); grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))} .v2-card{display:flex;flex-direction:column;padding:clamp(1.3rem,2.4vw,1.8rem); border:1px solid var(--line);border-radius:var(--radius);background:var(--white)} .v2-card h3{margin:0 0 .7rem;font-size:1.16rem;color:var(--navy)} .v2-card p{margin:0 0 .9rem} /* .v2-card .v2-lead-in was dropped with home.module02.leadin / home.module03.leadin: only two of the three module cards carried a bold lead-in, so the first card read as though a line was missing. All three now run num / h3 / p / value, so the selector matched nothing. */ .v2-card .v2-num{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:.76rem; letter-spacing:.1em;color:var(--teal);margin:0 0 .45rem} /* the value line sits at the foot of every card, on its own rule, as the model does */ /* .v2-card p sets margin:0 0 .9rem at (0,1,1); an unqualified .v2-value at (0,1,0) loses the cascade and margin-top:auto never applies, so the line floats mid-card instead of sitting on the floor. Qualify it. */ .v2-card .v2-value{margin-top:auto;padding-top:.85rem;border-top:1px solid var(--line-soft); font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.82rem; color:var(--teal);line-height:1.45} /* ---------- leadership ---------- */ .v2-people{display:grid;gap:clamp(1.2rem,2.4vw,1.8rem); grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));max-width:900px} .v2-person-top{display:flex;align-items:center;gap:.9rem;margin-bottom:.9rem} .v2-person-top img{width:66px;height:66px;border-radius:999px;object-fit:cover; border:1px solid var(--line);background:var(--mist)} .v2-person-top h3{margin:0;font-size:1.05rem} .v2-person-top .v2-role{margin:.15rem 0 0;font-family:'Plus Jakarta Sans',sans-serif; font-weight:700;font-size:.8rem;color:var(--teal)} /* ────────────────────────────────────────────────────────────────────────── Measured rendering fixes, 2026-09-25. Each number below was measured in headless Chromium against this tree over http (self-hosted fonts loaded), never estimated. They live here rather than in style.css so style.css stays byte-identical to the approved site's copy. ────────────────────────────────────────────────────────────────────────── */ /* (7) WCAG 1.4.4 -- the header has to survive TEXT-ONLY zoom. style.css:86/89 keep .head-in and .nav on flex-wrap:nowrap above the wrap breakpoint, and the two breakpoints that make them wrap are in px (style.css:170 = 669px for English, style.css:176 = 712px for FR/ES). A px breakpoint does not move when only the text is scaled, so the row simply grew past the viewport. Measured in headless Chromium over http by overriding html{font-size} to N x the natural root, all six pages of each locale at 768/1024/1280/1440/1920: BEFORE 150% EN 239.23 FR 261.36 ES 226.56 px of document overflow 200% EN 622.38 FR 631.27 ES 597.56 AFTER 150% 0 0 0 200% 0 0 0 The worst case is 1280px at 200%, where the "Write to us" pill and the EN/FR/ES switcher hung 622-631px off the right edge with no way to reach them. At 100% this is very nearly a no-op, and the exception is an improvement, not a regression. A 320-1920 sweep at 4px over all eighteen pages (header, nav, switcher, pill, main, footer, h1 and every section[id] box, to 0.01px) found exactly one band that moves: ENGLISH 691-712px, on all six pages. There the single row did not actually fit -- re-measured at 1px, the CTA pill hung 0.67px (at 712) to 21.67px (at 691) PAST .head-in's content box, i.e. out into the right gutter and, at 691px, to within 0.44px of the viewport edge. This is the same defect v2.css (6) below fixes for 670-690px, where it was bad enough to overflow the document outright; 691-712 was the tail of it that stopped short of the viewport edge and so was not caught. The pill now takes a second row instead. The header's own height does not move: .head-in's min-height of 94px (style.css:86) already exceeds the two stacked rows (36.00 + 8.50 row-gap + 36.28 = 80.78px), so .site-head measures 95.00px before and after at every one of those widths -- the --head-h ladder and every anchor offset are untouched. FR/ES are unchanged at 100% at every width. EN 1440 is 95.00px before and after. min-width:0 is what lets .nav shrink below its own min-content width so it wraps internally instead of pushing the pill out; without it the nav is a rigid flex item and wrapping .head-in alone leaves 200%+ overflowing. Unconditional and first in this section, so the px-banded rules below refine it rather than depend on beating it. */ .head-in{flex-wrap:wrap;row-gap:.5rem} .nav{flex-wrap:wrap;min-width:0} /* (1) The sticky header wraps to two rows at 669px (style.css:170), but the --head-h ladder in style.css:77-78 still declares 105px below 663px, 156px below 465px, and leaves 664-669px on the 95px fallback. Swept 320-670 at 1px on the approved tree: every section anchor came to rest BEHIND the header across 466-669px (204 widths), worst -43.38px at 666px on #clinics, so the target's heading was simply not visible. Below 466px the clearance was positive but thin (8.84px at 465px). Declared below = the measured two-row header height in each band plus ~2px: 153.91px max at 466-669, 163.19px max at 360-465, 154.94px max at 320-359. */ @media (max-width:669px){:root{--head-h:156px}} @media (max-width:465px){:root{--head-h:202px}} @media (max-width:359px){:root{--head-h:192px}} /* (6) The English language switcher, added when the site went trilingual, takes a row of its own below 466px, where style.css:186 hides the header's CTA pill and the in-nav pill appears instead. That pushed the English header from a measured 154.94/163.19px to 189.69px (320-359) and 199.27px (360-465), leaving the ladder above 33-34px short and every section anchor landing behind the header. The two values above are those measurements plus ~2.5px. The 466-669 band is unaffected: there the switcher shares the nav row and the header is still 153.91px. The same addition also broke the single-row header just above the wrap point. At 670-690px the row is logo + six nav links + EN/FR/ES + the CTA pill, and it does not fit: measured overflow 21px at 670, clearing only at 691px, with the CTA pill hanging up to 20.6px past the viewport. style.css:170 stops wrapping at 669px, so the fix is to carry its wrapped layout up to 690 - the same declarations, not a new design. Swept 320-900 at 1px afterwards: no overflow at any width, and the wrapped header in the new band measures at most 133.53px, well inside the 156px the 669 rule declares. */ @media (min-width:670px) and (max-width:690px){ .head-in{flex-wrap:wrap;column-gap:1rem;row-gap:.5rem} .brand{width:100%} .nav{width:100%;flex-wrap:wrap;gap:.5rem 1rem} .langs{order:6}.head-in > .btn{order:7} .nav a{font-size:0.8492rem}.brand img{height:44px} :root{--head-h:140px}} /* (2) "Health Systems and Clinics" is the longest link string in the footer and needs 185.00px on one line. style.css:338 gives each link column minmax(130px,1fr), which resolves to 173.6px at 900px, so the link broke as "Health Systems and / Clinics" from 900px to 948px. 186px clears it. The budget, measured rather than assumed: at a 900px viewport the grid's content box is 856.00px and column-gap (clamp(1.8rem,3vw,3rem) on a 17px root) resolves to 30.60px, so three gaps take 91.80px and the tracks have 764.20px. 200 + 3x186 = 758px fits with 6.2px to spare. The 1.4fr is style.css's own ratio, kept so desktop proportions are unchanged: at 1440px the tracks measure 334.2 / 238.7 / 238.7 / 238.7px, identical to before. */ @media (min-width:900px){.foot-grid{grid-template-columns:minmax(200px,1.4fr) repeat(3,minmax(186px,1fr))}} /* (8) The same footer column, in FRENCH. "Systèmes de santé et cliniques" is the longest link string in any locale and needs 208.00px on one line (measured with max-content and the live webfonts; English "Health Systems and Clinics" is 185.00px and Spanish "Sistemas de salud y clínicas" is 185.00px, so both clear the 186px in (2) above). The French column heading "À qui cela s’adresse" is 186.52px and misses it too. Measured by counting line boxes with a Range over every .site-foot link and .foot-h, all six pages of each locale, 320-1920 at 4px and then at 1px across the band: BEFORE fr "Systèmes de santé et cliniques" 2 lines at 900-1052px fr "À qui cela s’adresse" 2 lines at 900-956px en, es no wrap at any width AFTER no footer link or heading wraps at any width 320-1920 in any locale The budget, measured rather than assumed: below 1020px the column-gap clamp(1.8rem,3vw,3rem) sits on its 1.8rem floor = 30.60px at a 17px root, and the .wrap content box is the viewport minus 44.20px. Four tracks therefore need 200 + 3x209 + 3x30.60 = 918.80px of content box, i.e. a 963.00px viewport. So French keeps the two-column layout up to 963px and takes the four-column one from 964px, where the first track measured 262.17px and the other three 187.28px before -- now 209px is their floor and 1fr still resolves above it from 991px up. 209 rather than 208 because at exactly 208 the sum lands on the available width to the 0.01px and sub-pixel rounding decides it. Desktop proportions are untouched: at 1440px the tracks measure 334.22 / 238.73 / 238.73 / 238.73px, the same four numbers as before, because 1fr resolves to 238.73px there and never reaches the 209px floor. EN and ES are not selected by either rule and are byte-for-byte unchanged. */ @media (min-width:900px) and (max-width:963px){ html[lang="fr"] .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:964px){ html[lang="fr"] .foot-grid{grid-template-columns:minmax(200px,1.4fr) repeat(3,minmax(209px,1fr))}} /* (3) Six nav links instead of five, and "Health Systems" is 31px wider than the "For Clinics" it replaced. Without the gap below, the links no longer fit two rows between 466 and 490px: they take a third, and the sticky header grows from a measured 153.91px to 192.38px there - which in turn puts every section anchor back behind the header, since the ladder above is calibrated to the two-row height. Measured by removing this rule and re-sweeping 320-700 at 1px. Scoped to 440-520 because below 440 the tighter gap squeezes a sixth link onto the row and the gutter clearance collapses (0.5px at 428px). It does not reduce the number of widths where a wrapped row ends flush against the gutter - an independent 1px sweep counted 17 with and without - it relocates them, from 466-479 to 442-449. Worst distance from the last link to the viewport edge is 16.56px, against 16.45px on the approved 5-link site, so no width is visually tighter than approved. The rule is here for the header height, not for the gutter. */ @media (min-width:440px) and (max-width:520px){.nav{column-gap:.7rem}} /* (4) The footer column headings are real headings now (they were

, a WCAG 1.3.1 F2 failure: nothing but weight and tracking said "heading"). h1-h4 in style.css:46-50 carry line-height, word-spacing and text-wrap that .foot-h never needed to override while it was a paragraph. Restate the paragraph's own values so the rendered box is unchanged to the pixel. */ .site-foot .foot-h{line-height:1.62;word-spacing:normal;text-wrap:wrap} /* (5) The --head-h ladder for FRENCH and SPANISH, 2026-09-26. Measured in headless Chromium over http, 320-1920 at 4px across all eighteen pages and then at 1px across 320-780, with the self-hosted fonts loaded. The header is the same markup on all six pages of a locale, and the measurement confirmed the height is identical on all six, so the ladder is per locale, not per page. What was wrong. style.css:79-80 declares 148px below 703px and 182px below 479px for html[lang="fr"] / html[lang="es"]. Those numbers were measured for the v1 nav: five links, shorter labels, and no language switcher. This nav has six links, the FR/ES labels are 12-21% longer, and the switcher takes a row of its own below 480px, where the header CTA is hidden. A target clears the header by scroll-margin-top - header height, and scroll-margin-top is var(--head-h) + 20px for a section[id] (v2.css, top of this file) or + 16px for anything reached as :target (style.css:76), which is how #main and the #ministries / #clinics cards are reached. Measured height against the old declaration, worst case in each band, section[id] first and :target in brackets: FR 320-358 233.63-234.48 declared 182 -32.48 [-36.48] BEHIND 359-479 193.09-196.33 declared 182 +5.67 [ +1.67] thin 480-512 189.86-190.73 declared 148 -22.73 [-26.73] BEHIND 513-703 148.19-150.98 declared 148 +17.02 [+13.02] ok 704-712 150.98 declared 95 -35.98 [-39.98] BEHIND 713+ 95.00 declared 95 +20.00 [+16.00] ok ES 320-345 233.63-233.98 declared 182 -31.98 [-35.98] BEHIND 346-479 192.77-196.33 declared 182 +5.67 [ +1.67] thin 480-499 189.86-190.38 declared 148 -22.38 [-26.38] BEHIND 500-703 147.94-150.98 declared 148 +17.02 [+13.02] ok 704-712 150.98 declared 95 -35.98 [-39.98] BEHIND 713+ 95.00 declared 95 +20.00 [+16.00] ok 704-712 is the worst band and the least obvious: the FR/ES header wraps all the way up to 712px, but style.css stops declaring --head-h at 703px, so those nine widths fell back to the 95px single-row default against a 150.98px header. English is unaffected -- it wraps at 669px and style.css/v2.css declare down from there correctly. With the ladder below every band clears by +23.0 to +23.7px for a section[id] and +19.0 to +19.7px for a :target, and 713px up keeps the +20/+16 it had. Below: the measured maximum of each band plus ~3px, which is the margin style.css's own EN ladder uses. These selectors have the same specificity as style.css's (0,1,1) and v2.css loads second, so they win; the :root ladder in (1) above is (0,1,0) and keeps English exactly as it is. The bands are ordered widest first because the narrower query has to be the one that wins. Two FR widths were deliberately over-cleared: 510 and 511, where the nav happens to fit one row shorter (148.13px) while 512 goes back to 190.73px. That exception is now closed -- see (9) below, which also rewrites this ladder as bounded bands. The declared VALUE of every other band is unchanged. */ /* (9) The FR/ES ladder above, re-measured end to end after (7) let the header wrap under text zoom, and rewritten so that rule order is not load-bearing. Method: headless Chromium over http, all six pages of each locale, 320-1920 at 4px and then at 1px across 320-760 where every band boundary lives, taking the TALLEST rendered .site-head at each width across the six pages. The header measured identical on all six pages of a locale at every width, as it did before. (7) changed no FR or ES geometry at 100% at any width, so the values below are the same ones (5) was calibrated against -- with one exception it missed. FR 320- 358 rendered 233.63-234.48 declared 238 +3.52 .. +4.37 359- 479 rendered 193.09-196.33 declared 200 +3.67 .. +6.91 480- 509 rendered 189.86-190.59 declared 194 +3.41 .. +4.14 510- 511 rendered 148.06-148.13 declared 152 +3.87 .. +3.94 NEW 512 rendered 190.73 declared 194 +3.27 513- 712 rendered 148.19-150.98 declared 154 +3.02 .. +5.81 713+ rendered 95.00 declared 95 +0.00 ES 320- 345 rendered 233.63-233.98 declared 237 +3.02 .. +3.37 346- 479 rendered 192.77-196.33 declared 200 +3.67 .. +7.23 480- 499 rendered 189.86-190.38 declared 194 +3.62 .. +4.14 500- 712 rendered 147.94-150.98 declared 154 +3.02 .. +6.06 713+ rendered 95.00 declared 95 +0.00 What actually changes. Only FR 510-511, and only because the old ladder's 480-512 band carried one figure for two different header heights: those two widths declared 194 against a 148.06/148.13px header, over-declaring by 45.94px, so an anchor landed 45.9px lower than it needed to -- nothing hidden, but a visible jolt, and outside the +-20px the rest of the ladder holds to. Two widths do warrant a media query after all; 152px gives them the same ~4px margin every other band has. Why bounded ranges. The old ladder was a stack of max-width rules of equal specificity that relied on being read in the right order -- narrowest last. Every band below carries both bounds and no two overlap, so each width is matched by exactly one rule per locale and moving a line cannot change the rendering. The declared value of every band except FR 510-511 is unchanged, which was verified width by width against the previous ladder. Re-swept afterwards, 320-1920, per locale, all eighteen pages: declared is >= rendered at EVERY width (smallest margin +0.00px, at 713px and above where both are 95.00), and no band over-declares by more than 7.23px. */ @media (min-width:513px) and (max-width:712px){html[lang="fr"]{--head-h:154px}} @media (min-width:512px) and (max-width:512px){html[lang="fr"]{--head-h:194px}} @media (min-width:510px) and (max-width:511px){html[lang="fr"]{--head-h:152px}} @media (min-width:480px) and (max-width:509px){html[lang="fr"]{--head-h:194px}} @media (min-width:359px) and (max-width:479px){html[lang="fr"]{--head-h:200px}} @media (max-width:358px){html[lang="fr"]{--head-h:238px}} @media (min-width:500px) and (max-width:712px){html[lang="es"]{--head-h:154px}} @media (min-width:480px) and (max-width:499px){html[lang="es"]{--head-h:194px}} @media (min-width:346px) and (max-width:479px){html[lang="es"]{--head-h:200px}} @media (max-width:345px){html[lang="es"]{--head-h:237px}}