/* ============================================================ MOBILE — the whole page at phone width Loaded LAST on /raf, after plates.css. Everything here is additive and every rule is inside a media query, so nothing in this file can reach a desktop viewport. That is the constraint the file is written under: the measured desktop geometry at 1280, 1440 and 1600 must come out of this pass byte for byte unchanged. Three jobs. 1. THE SHEETS HAVE TO READ. The plates system already applies on a phone — every clamp() in plates.css bottoms out around 670px and the primitive is intact — but "applies" and "reads" are different things. Measured at 390 before this file: the inset sheets stood 8px off the viewport and carried a 14px radius, so each corner had 8px of ground to cut into and the curve was clipped by its own gutter before it finished. Three of the eight sections (ch2, ch4, ch6) are cream on a cream page with no stroke, so at 8px they were invisible boxes. The page read as a scroll of loose paragraphs, not as a pile of sheets. 2. THE ARROW COMES BACK. It was switched off below 760px. See the block at the foot of this file. 3. THE THINGS THAT WERE SIMPLY BROKEN at phone width, each noted where it is fixed: the third hero number orphaned in a two-column grid, the 86% statement composing badly on a narrow measure, the offer's state switch at 29px of touch target, and a tag on plate 21 running off a 320px screen. ============================================================ */ /* ------------------------------------------------------------ THE GUTTER, on anything that is not a desktop One number does most of the work in job 1. --plate-gutter is clamp(8px, 1.2vw, 20px); below about 670px the 8px floor is what you get, and 8px is not an inset, it is a rounding error. 14px, and the number is not a taste call: --plate-radius has the same 14px floor, and a rounded corner reveals exactly one radius of whatever is behind it. At a gutter narrower than the radius the quarter-circle runs out of ground before it closes and the corner reads as a bevel; at exactly one radius it closes on the page. So the gutter is set to the radius, which is the smallest value at which the corners of this system are corners. THE BREAKPOINT IS 1000px, NOT 760px, and that is the whole reason this is a media query rather than a change to the token. The desktop widths under test resolve --plate-gutter from the 1.2vw term: 15.36 at 1280, 17.28 at 1440, 19.2 at 1600. Raising the clamp's floor to 14px would leave 1440 and 1600 alone but would take 1280 from 15.36 to 16, which is a desktop regression. 1000px is the widest round number that clears 1280 with room, and it also catches the 768 and 900 tablet widths, where the 9.2px and 10.8px gutters had the same problem the phone did. At 1001px the gutter is 12.01px and at 1000px it is 14px: a 2px step at a width nobody resizes across. ------------------------------------------------------------ */ @media (max-width: 1000px) { body[data-case-study] { --plate-gutter: 14px; } } /* THE CODA'S MEASURE — removed in rev 5. This block gave #pv-ch7 a 16px --nest-pad on a phone, because the coda sat inside #pv-ch6 and was paying for two insets on the narrowest measure on the page. Ch7 is a top-level full-width sheet again, so it takes the same padding formula every other bleeding sheet takes and there is no --nest-pad left to override. .is-nested is gone from plates.css with it. ------------------------------------------------------------ */ /* ------------------------------------------------------------ THE THIRD HEADLINE NUMBER styles-sidebar.css says it plainly, in the comment above the rule: "A 2x2 grid holding three cells leaves a hole in the bottom right that reads as a stat someone forgot to fill in, so an odd count gets a row of its own." It then sets `grid-template-columns: 1fr 1fr` below 1100px, which puts the hole straight back — and the third number is the one whose label runs longest, so the orphan is also the tallest cell. Measured at 390: +69.2% and 21 -> 4 side by side on two label lines each, then +20% alone on the left of row two with its label on three lines and 171px of empty ground beside it. The cell spans the row instead. It keeps the two-column rhythm for the pair that fits it and gives the long label the full measure, which is what takes it from three lines to two. Scoped here rather than in the shared sheet, and only where that sheet has already given up on three across. ------------------------------------------------------------ */ @media (max-width: 1100px) { .cs-hero-info .pv-results.is-three > :last-child { grid-column: 1 / -1; } } /* ============================================================ THE 86% / 9% STATEMENT, on a phone styles-sidebar.css already stops this being a 100svh takeover below 800px and puts the type UP instead, on the stated reasoning that five or six full-width lines fill a phone screen better than three short ones floating in it. That reasoning is right. What it did not account for is that plates.css later made the statement a SHEET and took another 20% of the viewport off it to do so. Measured at 390 before this file, the line the type actually had: 390 - 16 (gutter) - 72 (--quote-side) - 48 (pin padding) = 254px at a 44.85px cap. The two objects in the sentence are sized in ems off that cap — the photo chip is 1.93em (87px) and the coral button is wider still — so on a 254px line each of them owns a third of the row it lands in. The result was a broken composition: "86% JOIN FOR" then the chip stranded at the end of a short line, "THEM. 9%" hanging, and the button sitting alone on a line of its own. Two changes, and deliberately not "make the type smaller" on its own, because that is the move the shared sheet already considered and rejected. THE INSET GOES. --quote-side is the 10% a side that makes the statement narrower than the stack. On a 1600px page that is 160px of luxury; at 390 it is 72px off a 254px line, and the sheet is already inset by the gutter like every other sheet. Zeroing it puts 72px back and makes the statement exactly as wide as the sheets above and below it, which on a phone is the more legible reading of "this is one of the sheets" anyway. THE PIN'S PADDING COMES IN. `var(--wrap-gutter)` is 24px a side, sized for a full-bleed section. Inside a sheet that already has a gutter it is a second inset doing the same job twice; 16px is enough to keep the caps off the rounded corner. Net: 254px of line becomes 330px at 390, a 30% wider measure, with the type only stepped down from 11.5vw to 10.4vw so the chip and the button still read as objects rather than glyphs. The vertical padding comes in as well: at 13vh the pin was 110px top and bottom on an 844px screen and the section ran to 696px for about 500px of type. ============================================================ */ @media (max-width: 800px) { .cs-body > .cs-statement.cs-plate { --quote-side: 0px; } .cs-body > .cs-statement.cs-plate .cs-statement-pin { padding: clamp(52px, 8.5vh, 104px) 16px; } .cs-statement p { font-size: clamp(34px, 10.4vw, 52px); } } /* ============================================================ TOUCH TARGETS The offer's three state buttons are the only controls on this page a reader has to hit, and offer.css takes them down to `padding: 9px 12px` on a 11px cap below 620px. Measured: 76 x 29, 69 x 29, 70 x 29. The floor everyone works to is 44 x 44 and these were two thirds of it on the axis that matters. min-height rather than more padding, so the pill's printed size is unchanged and only its hit area grows — the switch still reads as the small quiet control it is meant to be. The row is a flex container, so align-items: stretch is what makes min-height reach the whole capsule rather than just the text box. The capsule's own padding comes off so the group does not grow by 8px in the process. The lightbox's own buttons are 44px already (.lb-btn, nav.js); they are verified rather than changed. 1000px, not 760px, and for the same reason the gutter uses it: a 768 or 900 wide tablet is a touch device and had the same 32px pill. Measured after: 80 x 44, 73 x 44, 74 x 44 at 390, and 89 x 44 at 900. ============================================================ */ @media (max-width: 1000px) { .cs-offer-switch { padding: 0; align-items: stretch; } .cs-offer-switch button { min-height: 44px; min-width: 44px; padding: 9px 14px; } } /* ------------------------------------------------------------ THE TAG ON PLATE 21 "Card required. Menu after" is white-space: nowrap on a pill centred under the last plate. At 320 the plate is 82.7px wide and the pill is 145px, so it ran from x=178 to x=323 on a 320px screen and .pv-flow's own overflow-x: clip cut the last three px of it off. It is the label that carries the point of the whole mosaic, so it is not allowed to be the thing that gets trimmed. The nowrap stays — a two-line pill under a 30px-wide thumbnail would be worse — and the type and padding come in instead until it fits. At 320 this brings the pill to 116px, which centres on the plate with 20px clear of the viewport on the right. ------------------------------------------------------------ */ @media (max-width: 400px) { .pv-flow-tag { font-size: 8px; letter-spacing: 0.06em; padding: 4px 7px 5px; } } /* ============================================================ THE ARROW, on a phone It was `display: none` below 760px, with the note "the cards stack on a phone and the gap shrinks; the arrow goes". Both halves of that are true and neither is a reason to have no arrow: the cards do stack, and what that changes is the SHAPE of the box the artwork is stretched into, not whether the gesture belongs. WHY IT COULD NOT SIMPLY BE UN-HIDDEN. The svg is preserveAspectRatio="none" on a viewBox of 539 x 575, so its rendered proportions are entirely the proportions of the box `left`, `width` and `height` give it. Desktop leaves that box at 40% of the trio row wide by --cs-chapter-gap + 314px tall. Measured, the horizontal-to-vertical squash that produces runs from 1.06 at 1600 down to 0.66 at 768, which is the band the brushstroke was drawn to survive. Un-hiding the rule at 390 would have given the same box 156px of width against a 444px drop: a squash of 0.37, and the long diagonal sweep would have rendered as a near-vertical scribble. THE THREE THINGS THE ARROW HAS TO DO, and how each is met. (a) START AT THE FOOT OF THE LAST CARD. Unchanged: the svg is positioned off .cs-trio-row at top: 100%, and on a phone that row is the single stacked column, so its foot is the last card's foot. The artwork's own pen-down point is at the top right of its viewBox, which now lands just inside the card's right edge. (b) LAND CLEAR ABOVE THE SENTENCE. The distance from that foot to the first line of "Your friend lands here" is not a constant on a phone: it contains the trio's caption, which wrapped to seven lines at 320 and four at 620. Measured, that run varies from 385px to 475px across 320-760 — a 90px spread, which no single height expression in CSS can track. So arrow.js measures it and writes --cs-arrow-h. See the note in that file. (c) NOT BE VISIBLY STRETCHED. The width is derived from the height at a FIXED ratio — 0.6187, which is the box ratio that reproduces the 0.66 squash the artwork already renders at 768 and 900, the narrowest desktop case and therefore the known-good one. So the brushstroke on a phone is the same shape it is on a small laptop, only smaller. The min() is the one place that gives: the box has to fit inside the row, because the figure's reveal clip-path is flush left and right and would cut anything wider. The tip sits at 6.4% of the box and is centred on the column (below), so the box runs from 50% - 0.064w to 50% + 0.936w and the binding constraint is 0.936w <= 50%, i.e. w <= 53.4%. 48% leaves a margin. Where that cap binds — below about 430px — the arrow gets taller than the ratio wants and the squash tightens; at 320 it reaches 0.42, which reads as a steeper descent rather than as a distorted one, and a steeper descent is the right answer on a 320px screen in any case. THE TIP LANDS ON THE CENTRELINE. The arrowhead is at x=34.5 of a 539 unit viewBox, 6.4% across. Desktop puts the box at left: 48% and 40% wide, so the tip is at 48 + 0.064*40 = 50.56% of the row: the middle, which is where the centred sentence is. That relationship is restated here as arithmetic rather than as two numbers that happen to work, so it survives the width changing. ============================================================ */ @media (max-width: 760px) { .cs-trio-arrow { /* arrow.js writes --cs-arrow-h from the measured run. The fallback is what the box would be at 390 if this file loaded and that one did not; the arrow still draws, it just may not land as tightly. */ --cs-arrow-w: min(48%, calc(var(--cs-arrow-h, 292px) * 0.6187)); display: block; height: var(--cs-arrow-h, 292px); width: var(--cs-arrow-w); left: calc(50% - 0.064 * var(--cs-arrow-w)); } /* THE ROOM ABOVE THE SENTENCE. before.css reserves 194px here, measured for a desktop arrow. On a phone this padding is no longer the arrow's room — the arrow is sized to whatever run it finds, so this is now just the air the sentence wants inside the sheet, and the arrow fills the rest. 64px is one step under the sheets' own --plate-pad-block floor of 60px plus its radius, so the sentence sits off the sheet's head by about the same amount a chapter's first line does. */ .cs-body .pv-fig.cs-sheet .cs-sheet-lead { padding-top: 64px; } }