/* ══════════════════════════════════════════════════════════════════════════ research-layout.css — standards.html (the nav's "Research"): nothing covers anything, and the certificate is straight. OWNER, 2026-08-26: "next fix the optimization for certain sections on the research page. in a reference seen peptides cover up other text and it might be happening on other parts of the page so fix. also the coas are crooked but the client wants them to be straight." SCOPE: standards.html ONLY. Every selector below is anchored on a class that appears on no other built page — verified as a class TOKEN sweep over all 25 pages in factory/output/core-chain-labs/, not by eye, and re-run as a guard in 29-research-layout.mjs on every pass. The crooked document imagery on index / coa-library / product belongs to lane 30. ── 0. HOW EVERY NUMBER BELOW WAS MEASURED, AND THE TRAP IN IT ─────────── puppeteer against the live site, 2026-08-26, at 320 / 375 / 390 / 430 / 560 / 561 / 600 / 700 / 780 / 860 / 861 / 900 / 940 / 1000 / 1024 / 1080 / 1120 / 1200 / 1280 / 1366 / 1440 / 1600 / 1920, comparing the page as served against the same page with this sheet injected. THE TRAP, and it invalidated the first sweep written for this lane: the live site opens behind the AGE GATE (`#lag-root`, `.lag-*`), a full-viewport overlay. Any elementFromPoint sweep run before it is dismissed reports `DIV.lag-body` / `BUTTON.lag-btn-primary` as the element covering every word on the page, and reports nothing about the page itself. The gate must be dismissed FIRST — set `store_age_verified` in localStorage on the origin before navigating — or the measurement is of the gate. Clicking the two `.lag-cb` boxes is not enough either: the primary button stays `disabled` until the page's own handler runs. A second trap: `.lum-acct-menu` (the account dropdown) sits at `opacity: 0; pointer-events: none` but each `.lum-acct-item` inside it computes `visibility: visible; opacity: 1`. A sweep that checks the element's own computed style and not its ancestors' reports two phantom covered buttons at every width. They are a closed menu, not a defect. With both traps handled, the whole-page text sweep finds exactly ONE covered-text defect on this page, at every width from 320 to 1920, and it is the one in part 1. ── 1. WHY THE VIAL PAINTS OVER THE PROOF CHIPS ────────────────────────── MEASURED, gate dismissed: `img.pg-vial` paints on top of the words "Independent verification" and "Third-party lab tested" at EVERY width tested, desktop included — 5 of 5 sample points per text run at 320–560, 4 of 5 at 561–900, 3 of 5 at 1440 (the count falls only because the chip grows past the vial's right edge, not because the stack changes). It is NOT the negative margin and it is not a size problem — it is a stacking-context escape, which is why it reproduces on a 1440px desktop. The real ladder, read off the built page rather than assumed: .page-header-bg isolation:isolate <- a context .pg-in.pg-hero-grid position:relative z-index:1 <- a context .pg-media position:relative z-index:auto .pg-plate position:relative z-index:auto overflow:hidden .pg-plate-inner position:relative z-index:auto img.pg-coa position:relative z-index:0 <- a context .pg-vial-wrap position:relative z-index:1 .pg-chip-tr position:absolute z-index:auto .pg-chip-bl position:absolute z-index:auto `position:relative` with `z-index:auto` does NOT create a stacking context, and neither does `overflow:hidden`. So `.pg-vial-wrap`'s z-index:1 is not resolved inside the plate, or inside `.pg-media`: it climbs to the first real context above them, which is `.pg-in.pg-hero-grid` — `position:relative; z-index:1` from `.page-header-bg > *:not(.float-logo):not(.sf-secbg-sweep)` in the page's own `#header-bg-css` block. There it meets the two chips at z-index auto (= 0) and wins. The plate clips the vial's PIXELS but has no say over its ORDER. The only thing that 1 was ever needed for is the COA sheet beside the vial, which carries an explicit z-index:0 one level in. The fix is to give the plate the stacking context it was assumed to have. `isolation:isolate` does exactly that and nothing else — no paint, no layout, no new containing block for fixed children. The explicit z-index:2 on the chips is not belt-and-braces: with the plate isolated the chips would win on document order alone, but a later lane that reorders the markup would silently re-open the defect, so the intent is stated in the file. MEASURED with `isolation` and `z-index:2` applied: 0 of 20 sample points covered, at every width from 320 to 1920. The z-index:2 is safe against the rest of the page: `.pg-in.pg-hero-grid` is itself a stacking context, so the 2 is sealed inside the hero and never reaches the sticky nav (`#site-nav`, `position:fixed; z-index:9995`) or the cart panel (19998 / 19999). VERIFIED by scrolling the chip under the nav and asking elementFromPoint who paints there: the nav, at 390 and at 1440. ── 2. THE CERTIFICATE IS STRAIGHT ─────────────────────────────────────── Measured tilt inventory for this page, all six of them: img.pg-coa -3.5deg CERTIFICATE -> straightened img .pg-faq-img:nth-child(1) -2deg vial photo -> straightened img .pg-faq-img:nth-child(3) +2deg vial photo -> straightened span.std-chev 90deg accordion open state -> KEPT span.pg-q-sign 135deg plus->cross toggle -> KEPT .pg-mission-ring svg 19-23deg decorative ornament -> KEPT The last three are not crooked artwork and straightening them would be a worse defect than the one being fixed. .std-chev and .pg-q-sign ROTATE AS THEIR FUNCTION — the chevron turning 90deg is how an open row says it is open, and the plus turning 135deg is how it becomes a close cross. The mission ring is not a document at all: it is the chain-of-rings figure drawn in SVG from the palette, and its angle is a frame of `animation: pg-spin 46s linear infinite` — which is why the probe read it as 23.1deg at one width and 19.3deg at another. "Straightening" it means deleting an ornament's animation, not un-tilting a certificate. The two vial photos ARE straightened, and the reason is asymmetric risk: a 2deg tilt is either invisible (so removing it costs nothing) or it reads as sloppy alignment to an owner who is already looking for crooked images. The composition survives whole, because the tilt was only ever half of that declaration — the -4% lift and the 31/36/31% size step that make the three vials read as a fanned group are kept exactly as they were. VERIFIED: the first vial's computed transform goes from `matrix(0.999391, -0.0348995, 0.0348995, 0.999391, 0, -3.86)` to `matrix(1, 0, 0, 1, 0, -3.86)` at 390 — the rotation gone, the lift intact. ── 3. WHAT A STRAIGHTENED SHEET NEEDED NEXT ───────────────────────────── The -3.5deg rotation was doing one job besides looking casual: it swung the sheet's top-right corner away from the vial column. `.pg-coa` and `.pg-vial-wrap` sit in adjacent grid tracks with `gap: 0`, and the sheet already runs PAST its track — MEASURED as served, the certificate's border box crosses into the vial's track at every width: -4.2px at 320, -5.2 at 375, -5.4 at 390, -6.1 at 430, -8.4 at 560, -12.4 at 768, -5.6 at 900, -8.9 at 1440. The painted sheet is letterboxed inside that box by `object-fit: contain`, so what a visitor sees overlaps by about half as much: -2.4px at 390, -2.5px at 900, -4.0px at 1440. Small, but it is an overlap, and with the tilt gone it is a flush collision instead of a wedge. So the gutter is made explicit: width 100% -> 92%. MEASURED after: the painted sheet's right edge clears the vial track by 9.9px at 390, 10.2px at 900 and 16.1px at 1440. It costs size — the painted certificate goes from 128px wide to 113.3px at 390, about 11.5% linear — and that is the trade being made deliberately: a smaller sheet with air around it rather than a larger one touching the vial. `margin-right: -26%` is left where it is deliberately. MEASURED, by forcing it to 0 with the rest of this sheet applied: every number on the plate is byte-identical — box width, both edges, the painted size, the gap. It moves nothing, because the used width of a replaced element with an intrinsic ratio is already being clamped by `max-height: 88%`. Width is the lever that works here; the margin is inert, and changing an inert declaration to claim a fix would be a lie in the file. A positive `margin-right` was measured as the alternative and rejected: at 8% or 14% it clamps the box flush to the track — gap exactly 0.0px at 390, 900 and 1440 — so it costs less size (123.1px painted at 390) but buys no air at all, which is the whole point of part 3. ── 4. TWO BANDS WHERE THE CHIPS COME OFF THE PLATE ────────────────────── Part 1 makes the chip text win. On a wide desktop that is the whole story: the plate is 539px, a 250px chip clipping its corner reads as depth, and the chip covers 16% of the plate and 13% of the certificate. But the plate is not 539px everywhere, and the chip's 250px cap does not scale, so there are two bands where the same composition inverts the defect and answers "the peptide covers the words" with "the words cover the peptide". MEASURED with parts 1-3 applied, chips still floating: width plate chips over plate bottom chip over certificate 320 240 60.4% 38.4% 390 347 38.6% 29.1% 560 556 17.5% 16.1% <- hero is 1 column 700 655 12.8% 9.3% 860 815 8.3% 4.9% 861 347 40.7% 26.9% <- hero is 2 columns 900 366 36.3% 25.0% 1000 415 27.9% 20.7% 1080 454 23.0% 18.0% 1120 474 21.0% 17.1% 1200 513 17.7% 15.2% 1440 539 16.0% 13.5% The cliff at 861 is the master's own `@media (max-width: 860px)`, which collapses `.pg-hero-grid` to one column. Below it the plate is the width of the page and the chips are a rounding error on it; above it the plate drops to 347px in a 0.98fr track while the chips keep their 250px cap, and the numbers are WORSE than the phone numbers this rule was first written for. A 900px laptop was measured at 36.3% / 25.0% — that is a phone defect living at a desktop width, and it is the "other parts of the page" half of the owner's sentence. So the chips leave the plate and become rows under it in BOTH bands: <=560px, and 861-1120px. Nothing is hidden, no word changes, and the result is the same figure-then-proof rhythm the home hero already uses. MEASURED after: 0% of the plate and 0% of the certificate covered throughout both bands. The two costs are not the same, and only one of them is a cost at all: * <=560 it adds 138px of hero height (`.pg-media` 261 -> 399 at 390), and the document grows by the same 138px, because the hero is one column and the media stack IS the column. * 861-1120 it costs NOTHING. `.pg-media` grows 260 -> 404 at 861 and 355 -> 499 at 1120, but the headline column beside it is 600-821px tall, so `.pg-hero` and `document.scrollHeight` are unchanged to the pixel at 861, 900, 1000, 1080 and 1120. Part 5 gives some of the phone cost back but NOT all of it, and saying otherwise would be the easy lie here. MEASURED `document.scrollHeight`, the live page against the live page with this whole sheet applied: 12327 -> 12446 at 320 (+119), 11317 -> 11415 at 375 (+98), 11100 -> 11198 at 390 (+98), 10871 -> 10969 at 430 (+98), 10071 -> 10209 at 560 (+138), and unchanged from 700 up. A phone page is about 100px longer than it was, and reads two proof rows instead of two panels lying across the artwork. 561-860 is deliberately left floating: one column, an 556-815px plate, 8-18% coverage, and the master already pulls the chips fully inside the plate there (`.pg-chip-tr { right: 0 }`). 1200 and up is left floating because 15%/13% IS the composition the plate was drawn for. Scaling the chip instead of reflowing it was measured and rejected: `max-width: min(250px, 46%)` improves plate coverage at 861 (40.7% -> 32.9%) but makes the certificate WORSE (26.9% -> 46.1%), because a narrower chip wraps to more lines and `.pg-chip-bl` is anchored `bottom: 7%`, so every line it gains grows upward across the sheet. ── 5. THE SECTION PASS: ONE TIGHTENING TAKEN, ONE REJECTED ────────────── The owner also asked for "optimization for certain sections". Two frames on this page reserve vertical space they cannot fill, both for the same reason — `object-fit: contain` on a fixed pixel height is height-bound on a wide viewport (slack goes sideways, invisible) and width-bound on a narrow one (slack becomes dead vertical space). Both were prototyped as `height:auto; max-height:`, which self-solves at every width with no new breakpoint. One is taken and one is not. (a) NOT TAKEN — `.pg-coa-frame img`. Its height is 460px, not the master's 420px: `sf-refresh.css:1305` raises it for this client, so the prototype below is `height:auto; max-height:460px`, and every number here is against 460. THE SLACK IS LOAD-BEARING. The caption bar is `position:absolute; bottom:0`; it measures 114px at 320, 97px at 390 and 76px at 1440, while the frame reserves a fixed 78.2-82.8px of bottom padding for it. The contain-slack under the sheet (179px at 320, 98 at 375, 76 at 390, 19 at 430, 0 from 560 up) is what makes up the difference at exactly the widths where the caption wraps. Remove it and the caption lands ON the certificate: MEASURED 12.7% of the sheet covered at 320 and 4.7% at 390, against 0% today. It could be bought back with a margin plus a matching padding, but the caption is 3 lines at 320 and 2 at 390, so that is two tuned constants standing in for an invariant that currently solves itself. Not worth the 179px at 320 / 76px at 390. (b) TAKEN — `.pg-mission-art img`. This one was rejected once on numbers that do not survive re-measurement, so here they are, all from the same sweep: the mission vial's painted height is already only 169px at 320 and 220px at 390 inside a box that reserves a flat 300px, so `height: auto` changes NOTHING about how big the vial looks — it removes dead space under it and nothing else. The claim that it makes `.pg-seal` clip the vial worse is FALSE: measured seal-over-vial goes 6,575 -> 4,465 px^2 at 320 (32% BETTER, because the seal is `bottom: 4%` of a shorter box), 6,121 -> 5,617 at 375, 5,999 -> 5,853 at 390, and is UNCHANGED at 430 and at every width from 560 up, where the box is already height-bound. The gap from the vial's foot to the mission card's bottom edge GROWS, 34.0 -> 79.7px at 320 and 34.1 -> 54.0px at 390. The saving is real but SMALL, and the honest figure is not the one first written here. Measured on its own, against the rest of this sheet: `document.scrollHeight` drops 40px at 320, 375, 390 and 430, and 0px from 560 up — because `.pg-mission-art { min-height: 260px }` is the binding floor below 560 and the box is height-bound above it. The 219px/116px once claimed for this line belonged to the (a) prototype running beside it in the same probe. `max-height: 300px` keeps the shipped ceiling exactly, so the only widths that change are the ones that were wasting space, and 1440 is byte-identical. ── 6. THIS SHEET IS NOT LINKED LAST, AND THAT IS FINE ─────────────────── Lane sheets link in FILENAME order, so `sf-final-coa-straight.css` (lane 30) loads AFTER this one on every page, standards.html included. It does not fight this sheet because every `.pg-*` rule it carries is scoped `html[data-cc-coa-straight]`, an attribute lane 30 deliberately does NOT write on standards.html — the boundary between the two lanes is that attribute, not the cascade. 29-research-layout.mjs re-checks it on every pass: it reads the actual link order out of the built page and fails if any sheet after this one declares transform / isolation / z-index / width / max-width / position on `.pg-coa`, `.pg-chip*`, `.pg-plate*`, `.pg-media`, `.pg-vial-wrap`, `.pg-faq-img` or `.pg-mission-art` outside that scope. Do not replace that guard with a comment claiming this sheet wins. ══════════════════════════════════════════════════════════════════════ */ /* ── 1. THE HERO PLATE IS A STACKING CONTEXT ─────────────────────────────── */ body .pg-media .pg-plate { isolation: isolate; } body .pg-media .pg-chip { z-index: 2; } /* ── 2. THE CERTIFICATE, AND THE VIAL FAN, ARE STRAIGHT ──────────────────── */ body .pg-plate-inner img.pg-coa { transform: none; } /* The stagger and the size step are the composition; only the tilt goes. */ body .pg-faq-aside .pg-faq-img img:nth-child(1), body .pg-faq-aside .pg-faq-img img:nth-child(3) { transform: translateY(-4%); } /* ── 3. THE GUTTER THE ROTATION USED TO PROVIDE ──────────────────────────── */ body .pg-plate-inner img.pg-coa { width: 92%; } /* ── 4. TWO BANDS: THE PROOF CHIPS SIT UNDER THE PLATE, NOT ON IT ──────── One rule, two bands, deliberately: they are the same defect (a plate too narrow for a 250px chip) at two widths, and splitting them into two blocks is how they drift apart. See the table in part 4 for why 561-860 and 1121+ are not in here. */ @media (max-width: 560px), (min-width: 861px) and (max-width: 1120px) { body .pg-media .pg-chip { position: static; max-width: none; margin: 10px 0 0; /* pg-float-a / pg-float-b translate a floating chip; a chip in flow must not drift, and a drifting box next to a still one reads as a bug. */ animation: none; transform: none; } } /* ── 5. THE SECTION TIGHTENING THAT SURVIVED MEASUREMENT ───────────────── `height: auto` with the shipped 300px kept as the ceiling. The painted vial does not change size at any width; only the dead space under it goes. `.pg-coa-frame img` is NOT here, deliberately — the header says what was measured and why its slack is load-bearing. */ body .pg-mission-art img { height: auto; max-height: 300px; } /* ── 6. THE OWNER'S TWO REMOVALS, AND THE ONE BOX THEY LEAVE BEHIND ────── OWNER, 2026-08-26: "lastly on the research page take out the by batch certificate on file circle tag and remove the hex picture in the documentation you can open not a promise you have to trust" THE REMOVING IS DONE IN THE MODULE, NOT HERE, AND THAT IS THE POINT. `display: none` on either of these would be the exact defect CLAUDE.md's section-kicker rule names: a hidden element still ships its words to a screen reader, to whatever reads llms.txt, and past every gate on the page. Both elements come OUT of the markup in 29-research-layout.mjs. This part exists only to repair the box the second removal leaves. WHY THE FIRST REMOVAL NEEDS NO CSS AT ALL. `.pg-seal` is `position: absolute` inside `.pg-mission-art`, which is a `display: grid; place-items: center` box whose only OTHER in-flow child is the vial — the ring beside it is `position: absolute; inset: 0` too. So the seal never occupied a grid track and never reserved a pixel of flow: deleting it changes the mission block's geometry by nothing. Its own rules in standards.html's inline