/* locale-ms.css — Bahasa Malaysia overrides for the /ms/ tree. Loaded only by ms pages, AFTER home.css. Everything here exists because the Malay string is longer than its English source; nothing here is a restyle. */ /* LOCALE-SCOPED WRAP GUARD — ms only, and only where it was measured to be needed. base.css already gives overflow-wrap to `.hero h1/.sub/.hero-stamp` (the 2026-08-22 "Pengoptimuman" pass) and home.css gives `anywhere` to `.chain .pos h3`. The sibling `.chain .pos p` was never covered, and it is the one that carries the longest word on this page. Measured 2026-08-23 in headless Chrome against the shipped files: 320px .chain .pos p cell 99px, "penyelenggaraan," inks 116px -> -17px, OVERFLOWS the cell and crosses the 1px hairline into the next column 360px same element cell 119px -> -2px 390px+ -> fits English never trips it: its longest word in that cell, "maintenance,", inks 87px against the same 99px cell (+12px of slack). This is the classic longer-target-language overflow, so the rule is scoped to this tree rather than pushed into shared CSS where it would change nothing for en and still have to be re-argued. `break-word` not `anywhere`, matching the `.creds dd` and base.css precedent: it breaks a word only when it would otherwise overflow the line, and leaves min-content width alone. Re-measured after the change: 0 overflowing elements at every width 320-1920, js on and off. */ .chain .pos p{overflow-wrap:break-word} /* LOCALE-SCOPED STRIP GUARD — ms only, same cause as the rule above. shell.css gives `.tele span{white-space:nowrap}` with `overflow-x:visible` on the wrap, plus a safety valve that switches to `normal` below ~300px. Its comment records that the valve "changes nothing at 320px and every width above it (verified: identical strip)" — verified on ENGLISH. The Malay strip is 207 characters against English's 176, and its widest cell is the one that breaks: 399px "Rekod asal usul / Peringkat plot, dengan koordinat" inks 248.6px, right=412.2 -> 13.2px PAST the viewport 400px same -> 12.2px 320px (flex-wrap already puts it on its own line) -> fits English never trips it: "Origin record / Plot-level, with coordinates" is 42 characters against Malay's 48 and fits the same line. Classic longer-target-language overflow, so the rule is scoped to this tree rather than pushed into shell.css where it would change nothing for en and still have to be re-argued. Re-measured after: 0 offending runs at 320/399/400. */ @media (max-width:430px){.tele span{white-space:normal}} /* LOCALE-SCOPED HERO FOLD — ms only, same cause as the two rules above, measured not guessed. The Malay home hero's call to action was CLIPPED by the fold at 1440x900: its top painted at 895 and its box ends at 948. English is identical markup and clears it at 828/881. Measured 2026-08-27 in headless Chrome against the shipped files, element by element: .hero-copy top 286 (en) -> 323 (ms) +37 the five masthead cells are 207 chars in Malay against 176 in English, so the strip wraps to two rows and pushes the hero down .sub h 120 (en) -> 150 (ms) +30 one extra line of the same sentence .hero-ctas 828/881 (en) -> 895/948 (ms) 48px past a 900px fold Nothing above is a styling opinion; both deltas are the target language being longer, which is what this file is for. shell.css deliberately WRAPS the strip rather than hiding cells ("if a future cell pushes it over again it wraps rather than hides, and the page is merely taller"), so the strip is left exactly as it is and the 48px is taken back from the hero's own spacing: 14 from the h1's top, 14 from the gap above the buttons, 10 from the gap above the deck, and 12 of padding from the eyebrow and HUD. The HUD's own 20px bottom margin is zeroed too but buys NOTHING on its own -- it COLLAPSES with the h1's top margin, so only the larger of the two was ever painting. Measured before believing it. Scoped to the two-column band (>=941px) because below it the Malay hero already clears the fold and needs no help. Re-measured after: see the number in the round-2 note below. */ @media (min-width:941px){ .hero .hero-copy > .eyebrow{padding-bottom:4px} .hero .hero-copy > .fxh-hud{padding-bottom:4px;margin-bottom:0} .hero .hero-copy h1{margin-top:8px} .hero .hero-copy .sub{margin-top:16px} .hero .hero-copy .hero-ctas{margin-top:30px} } /* ROUND-2 NOTE, and the measurement the block above promised. After the five declarations above: ms home .hero-ctas 845/898 against a 900px fold — inside, with the copy unchanged. English is untouched: locale-ms.css is loaded by /ms/ pages only. ONE MS page still lost its call to action to the same 37px, and it is NOT a home-hero page so nothing above reaches it. ms/produk.html at 1440x900: the buttons painted at 860 and their box ends at 913 -- thirteen pixels past the fold, purely because that page's five Malay masthead cells measure 1236px against a 1112px content box and wrap to a second row. English measures 1076 on the same page and does not wrap. WHY THE STRIP IS NOT THE THING BEING FIXED: shell.css chooses wrapping deliberately, so that an over-long cell fails LOUDLY (taller) instead of hiding a fact off-screen, and it is right. Its >=1101px density tune was calibrated against index.html (1076 against 1112, 36px of slack) and that calibration does not generalise -- measured 2026-08-27, traceability.html is 9px OVER in ENGLISH and two Malay pages are 124px over. Closing a 124px gap needs the tracking halved, which is a typographic decision about a shared component, not a locale patch. So the strip keeps its two rows and this page takes the 37px back from its own top padding instead: 100.8px -> 76px, which also restores the hero's vertical rhythm to what English gets. Re-measured after: 835/888. The class is explicit markup rather than `section.hero:has(.pr-herogrid)` because `.hero` on the ms HOME is a different component with padding:0, and no rule here may reach it by accident. */ @media (min-width:941px){ .ms-tight-hero{padding-top:76px} } /* ROUND-3 NOTE — THE SAME FOLD, AT 390, WHERE THE BLOCK ABOVE SAID THERE WAS NO PROBLEM. The >=941px rule above is scoped "because below it the Malay hero already clears the fold and needs no help." That sentence was asserted, not measured, and it is wrong. At 390x844 with is_mobile/has_touch, ms/index.html painted its second call to action at 815 and ended it at 868 — 24px past the fold — and a screenshot shows "TONTON FILEM — 6 MIN" sliced through the middle of its letterforms. English is identical markup and clears it at 790/842. Measured element by element at 390, both locales, on the shipped files: .eyebrow / .fxh-hud / h1 / .hero-ctas IDENTICAL in en and ms .sub h 153 (en) -> 179 (ms) +26 ONE extra line of the same sentence So the whole 24px is one line of Malay, which is what this file is for, and it is taken back from the hero's own spacing in the same places the >=941px rule uses. AND THE MARGIN COLLAPSE BIT ME, EXACTLY AS THE BLOCK ABOVE WARNS — recorded because the first attempt at this rule shipped the wrong number. h1's top margin (22) collapses with the HUD's bottom margin (16), so only max(16,22)=22 ever painted. Dropping h1 to 10 alone therefore buys 22-16 = SIX pixels, not twelve, and the first cut landed at 848/844 — still clipped, 4px, while the arithmetic on paper said 842. The HUD's own margin "buys NOTHING on its own", true at 1440 and true here; but zeroed TOGETHER with the h1 change it is what makes the h1 change real: .fxh-hud margin-bottom 16 -> 0 collapse partner, worthless alone h1 margin-top 22 -> 10 (-12, only once the partner is zeroed) .sub margin-top 26 -> 18 (-8) .hero-ctas margin-top 30 -> 24 (-6) `.hero .hero-copy` exists on exactly ONE page per locale (grep: index.html and ms/index.html), so this cannot reach another ms page by accident. The `max-width` is 940 so the two rules meet without overlapping or leaving a gap. Re-measured after: 789/842 against 844 at 390 (was 815/868), and 845/898 against 900 at 1440 — the >=941px rule's result, unchanged. */ @media (max-width:940px){ .hero .hero-copy > .fxh-hud{margin-bottom:0} .hero .hero-copy h1{margin-top:10px} .hero .hero-copy .sub{margin-top:18px} .hero .hero-copy .hero-ctas{margin-top:24px} }