/* ═══ PER-SLIDE LANDSCAPE BUDGETS ═══════════════════════════════════════════════════════════════ Assembled from the eleven per-slide blocks solved on 2026-08-02, one agent per slide, each measuring its own copy rather than reasoning about it. Loads AFTER phone-landscape.css, which holds the canvas, the type scale and the two systemic rules; this file holds only what each slide needed on top of that. Each block keeps its own @media wrapper rather than being spliced into one. Repeating an identical query is valid CSS and cascades in source order, and it means no block was ever re-parsed or re-indented by hand on its way in from the agent that measured it. THE ONE THING THEY ALL FOUND, independently, on nine of eleven slides: the desktop's own ID-scoped rules (`#p03{padding:66px 84px}`, `#p06 .menu img{height:520px}`, `#p09{padding:40px 64px 36px}`) outrank `.slide` inside the landscape query, because a media query contributes NO specificity. So most of the overflow was never type at all: it was 1600x900 padding and fixed pixel heights surviving untouched into a 750px canvas. p01b was 91px over with only 369px of content on it. ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* ── from _ls-p01.css ─────────────────────────────────────────────────────────────────── */ @media (max-width: 820px), (orientation: landscape) and (max-height: 520px) { /* ═══ 01 THE COVER IS ONE OBJECT, SO IT SCALES AS ONE OBJECT ═══════════════════════════════ p01 is the only slide on this deck whose desktop composition survives a straight scale, and the measurement is what says so rather than taste: its SMALLEST desktop run is the 28px sub, and 28 x 0.572 = 16.0px, which clears the 12px hard floor and the 15px median outright. The deck-wide shrink-to-fit that this file was written to refuse put runs at 7.2px because the dense slides carry 19px body copy; p01 carries none. So the honest move here is not to re-argue the layout, it is to reproduce it exactly. EVERY number below is the desktop number expressed as a fraction of the plate's own width (1180px on the 1600px canvas). That is not tidiness. Because the measure, the type size and the leading all carry the SAME factor, the sub keeps the desktop's own line break — "...your ideas, and to / showcase what is indeed the best dosa in Melbourne" — instead of being re-broken by hand at a new size, and the 760px measure comment above (`at 880 the line broke as "...showcase what / is indeed"`) keeps being true at 435px. */ /* THE OBJECT HAD NO EDGES. Measured at 844x390 before this file: `.plate` is a fixed 1180px on an 844px canvas, so it rendered at x=-168 and BOTH vertical edges of the cream plate, its leaf border and its outline frame were off-screen — landscape-verify reported .kan and h1 "outside by 93px". A centred object study whose object is full-bleed is not the composition, it is a stripe. 80vw restores the desktop's own 73.75% share of the canvas, rounded up because a phone needs the absolute type size more than it needs the last 6% of side air: 675px here, 85px of sunburst either side. THE VH LEG IS NOT DECORATION AND IT DOES FIRE. The plate's outer height measures 0.366x its width, so keeping ~24px of visible ground above and below needs w <= 2.3 x the viewport height. That is slack at 844x390 (897) and at 844x320 (736), and it BINDS below h=294, which is a phone in landscape with a deep browser chrome. Measured at 844x280: w drops 675 -> 644 and the slide still fits with 0 clipped. */ #p01 { --p01-w: max(300px, calc(clamp(420px, min(80vw, 230vh), 720px) * var(--ls-fit))); justify-content: center; } #p01 .plate { width: var(--p01-w); padding: calc(var(--p01-w) * .04407) calc(var(--p01-w) * .05932) calc(var(--p01-w) * .03898); /* 5px border / 3px outline / 9px offset scale to 2.86 / 1.72 / 5.15. Rounded to whole px: at DPR 2 a 1.72px rule lands on 3.44 device px and renders as a grey smudge rather than a line, and the double frame is the whole point of the plate. */ border-width: 3px; outline-width: 2px; outline-offset: 5px; } /* KANNADA GETS ITS PROPORTION BACK. The generic `.slide p` floor put ಒಂದು ಬೈ ಟು at 14.4px, which is the deck's body size for Latin and far too small for this script — the ೈ sign riding above ಬ and the ು hanging under ದ and ಟ stop resolving. Desktop sets it at 44px against a 104px title; the same 0.423 ratio here is 25.2px, checked glyph by glyph against the desktop render at 4x and not by an OCR pass, which cannot see letterform. */ /* The .1em padding is the same ink-containment trick as the h1 below, for the same reason on a much smaller margin: at 851x393 the Kannada run measured scrollHeight 34 against clientHeight 33, one pixel off a threshold of two. Below-line forms (the ು in ಟು) sit outside a 1.3em line box by a fraction of a pixel that rounds either way with the viewport. The margin gives the padding straight back, so the gap to the title is still exactly the desktop's 18/1180. */ #p01 .kan { font-size: max(12px, calc(var(--p01-w) * .03729)) !important; padding-bottom: .1em; margin: 0 0 calc(var(--p01-w) * .01525 - .1em); line-height: 1.3; } /* THE +9px WAS THE HEADLINE'S INK, NOT ITS LAYOUT. landscape-verify measured h1 scrollHeight 45 against clientHeight 36 at 844x390. Cause: Erica One's font bounding box is ~1.50em tall while the deck sets line-height 1.02, so the glyph box hangs ~0.24em BELOW the line box and Chrome counts that as scrollable overflow — the same thing happens on the desktop build, where it measures 127 against 100 at 104px. Fixing it by adding leading would move the title off the rhythm the plate is built on, so the box is given just enough padding to contain the ink and an equal negative margin pulls the next block back onto its mark. Nothing moves; the number goes to 0. */ #p01 h1 { font-size: max(12px, calc(var(--p01-w) * .08814)) !important; line-height: 1.02; padding-block: .26em; margin-block: -.26em; } #p01 .sub { font-size: max(12px, calc(var(--p01-w) * .02373)) !important; line-height: 1.5; margin: calc(var(--p01-w) * .02034) auto 0; max-width: calc(var(--p01-w) * .64407); } /* THE BOLD PHRASE WAS BIGGER THAN THE SENTENCE IT IS IN. `#p01 .sub b` carries an ID, so the generic landscape body rule could not reach it and it stayed at its desktop 28px while the sentence around it dropped to 14.4px — measured min 14.4 / median 28 on this slide. Adrian, on this exact line: "you dont need to do the bolding in a different font, just leave it in the same font". Same size as its sentence, separated by colour and weight, as on desktop. */ #p01 .sub b { font-size: max(12px, inherit) !important; } /* The six measured dish colours stay ONE row of six and stay bled to the plate's edges, so the negative margins have to track the plate's padding exactly the way -70/-46 tracks 70/46 on desktop. Written as the same fractions, they cannot drift apart. */ #p01 .band { height: calc(var(--p01-w) * .01864); margin: calc(var(--p01-w) * .02881) calc(var(--p01-w) * -.05932) calc(var(--p01-w) * -.03898); } } /* ── from _ls-p01b.css ─────────────────────────────────────────────────────────────────── */ /* ═══ 01b THE POSTER, AT POSTER SCALE ═══════════════════════════════════════════════════════ */ @media (max-width: 820px), (orientation: landscape) and (max-height: 520px) { /* THE 91px WAS ALL PADDING. Measured before any type change: the slide overflowed by exactly 91px while the content itself was only 368.9px tall. `#p01b{padding:56px 70px}` is an ID rule, so it beats `.slide{padding:var(--ls-pady) var(--ls-padx)}` on specificity and the desktop's 112px of vertical padding survived into a 390px viewport. Re-stating it here at the same specificity hands 92px of height and 96px of width back before a single letter is resized. */ /* THE SAFE-AREA RESERVES APPLY AT ID LEVEL TOO, and that is the whole reason they are tokens. Every rule in this file that restates the slide's padding is doing it to beat a desktop ID rule on specificity — which means it also beats `.slide`'s safe-area padding in phone-landscape.css. Fixing the island on `.slide` alone would therefore have left it broken on exactly the seven densest slides, silently, because those are the ones that needed an ID restatement. --padt/r/b/l are read here so there is ONE definition of the reserve and no slide can opt out by accident. */ #p01b { padding: max(clamp(8px, 2.6vh, 14px), var(--safe-t)) var(--padr) max(clamp(8px, 2.6vh, 14px), var(--safe-b)) var(--padl); justify-content: center; /* poster: the block sits on the optical centre */ align-items: stretch; /* place-items:center would shrink-wrap .cw off the grid */ gap: 0; } #p01b .cw { max-width: none; width: 100%; } /* TYPE IS RE-PROPORTIONED, NOT SCALED. The desktop ratio is 78/29/25/19 on a 900px stage; at 390px that same ratio puts the card copy at 8.2px, under the 12px floor. So the hero keeps its poster weight and everything below it is lifted toward the floor instead: measured, h2 is 2.9x the card copy here (52.26/18.14) where the desktop is 4.1x (78/19). Every size takes min(vw, vh) for the reason phone-landscape.css gives: height is the axis that runs out. */ #p01b { --p1b-h2: max(19px, calc((clamp(30px, min(6.2vw, 13.4vh), 58px)) * var(--ls-fit))); --p1b-kan: max(12px, calc((clamp(14px, min(2.4vw, 5.1vh), 22px)) * var(--ls-fit))); --p1b-lede: max(12px, calc((clamp(14px, min(2.15vw, 4.6vh), 20px)) * var(--ls-fit))); --p1b-b: max(12px, calc((clamp(14px, min(2.4vw, 5.1vh), 22px)) * var(--ls-fit))); --p1b-card: max(12px, calc((clamp(13px, min(2.16vw, 4.65vh), 19px)) * var(--ls-fit))); } #p01b .kan { font-size: max(12px, var(--p1b-kan)) !important; margin: 0 0 clamp(3px, 1.2vh, 7px); line-height: 1.25; } /* line-height 1.06 keeps the desktop's poster leading (1.02); the 3px of padding is not taste. Big Shoulders' ascenders overshoot their own line box at this leading, and the h2 measured a 2px scrollHeight-over-clientHeight on ink alone. Opening the leading to 1.16 cleared it but cost 10px of height and unset the headline. The padding contains the ink at 0px overflow. */ #p01b h2 { font-size: max(12px, var(--p1b-h2)) !important; line-height: 1.06; padding: 3px 0; } #p01b .lede { font-size: max(12px, var(--p1b-lede)) !important; line-height: 1.3; margin: clamp(5px, 1.8vh, 10px) auto 0; max-width: 62ch; } /* THE THREE STAY ACROSS, AND THE GRID HAS TO BE RE-STATED TO KEEP THEM THERE. `.slide .three` is in portrait.css's generic collapse list at `display:flex !important; flex-direction:column`, and portrait is gated on (max-width:820px), which a landscape phone narrower than 820 ALSO matches: measured on a 667x375 SE, the three cards had stacked into one column, each span running the full 581px width, and the slide overflowed by 6px. At 844x390 the bug is invisible because 844 > 820. So the row is asserted here rather than inherited, the way #p02 .quotes and #p07 .steps3 already are in phone-landscape.css. Three reasons for one claim are read as a set; stacking them is the one thing this orientation exists to prevent. */ #p01b .three { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; margin-top: clamp(7px, 2.6vh, 14px); gap: clamp(8px, 1.5vw, 16px); min-height: 0; } #p01b .three > div { padding: clamp(7px, 2.2vh, 12px) clamp(9px, 1.2vw, 14px) clamp(8px, 2.4vh, 13px); gap: clamp(2px, 0.9vh, 5px); min-height: 0; } #p01b .three b { font-size: max(12px, var(--p1b-b)) !important; line-height: 1.2; } #p01b .three span { font-size: max(12px, var(--p1b-card)) !important; line-height: 1.3; } } /* ── from _ls-p03.css ─────────────────────────────────────────────────────────────────── */ /* p03 block removed 2026-08-11: the slide was scrapped whole (C35). */ /* ── from _ls-p04.css ─────────────────────────────────────────────────────────────────── */ @media (max-width: 820px), (orientation: landscape) and (max-height: 520px) { /* ═══ 04 THE DENSEST SLIDE ══════════════════════════════════════════════════════════════════ The #p04 block in phone-landscape.css targets `.rails`, and p04 has no `.rails` — that selector was written against an earlier build and matches nothing in deck-v10. So this slide was effectively unstyled for landscape: measured at 844x390 it overflowed by 419px and put 16 of its 34 text runs outside the slide box. THE ARITHMETIC. 390px of height, 1,234 characters, and not one of them may go. The three lanes ARE the slide, so every other band is cut to what it actually needs and the remainder is handed to .cols. Furniture now measures 116.4px (h2 30.6 + .voice 18.7 + .pos 46.4 + three gaps 8.2 + slide padding 12.5), leaving .cols the 273.7 it is given against the 261.7 it needs — 12px of headroom. The baseline had .cols asking 531.3px against 215 available, so the job was to find 270px without deleting a word or dropping a column. It came from three mechanisms, each measured against this build by switching it off: the inline labels are worth 75.0px, the dl strut 16.6px, the inline figure 10.4px. That is 102px; the rest is type, leading and gutters. */ /* THE TYPE SIZE IS PINNED, and the window it is pinned inside is 0.1px wide. --ls-body is the median: 34 runs, 17 of which resolve to it, so the 15px median floor lands on this one declaration. Below 15px the slide fails that floor. At 15.2px a line wraps in two of the three lanes and .cols goes 261.7 -> 274.2, past what the slide has. So the usable range is 15.0-15.1 and there is nothing left to scale: the vh term is CAPPED rather than allowed to grow, because a viewport only 3px taller would otherwise step onto that wrap and spend 12.5px of lane height to gain 0.1px of type. Above 390 the extra height goes to .cols instead (see flex, below) — measured across 390, 392, 395, 400, 410, 428, 460 and 520 the slide holds at overflow <= 1 throughout. Below 390 it still scales down off the shorter axis the way the rest of this stylesheet does, but a 15px median cannot survive down there: that is the honest limit of 1,234 characters on a phone, not a bug. */ /* THESE THREE ARE THE SHARED TYPE VARIABLES, REDEFINED LOCALLY, and as first written they broke the two rules the whole system rests on. They bottomed out at 11.5px, under the 12px hard floor, which is where p04's "run under 12px" came from on every device. And they did not reference --ls-fit, so the auto-fitter could not move p04's TYPE at all: it drove the slide to the 0.45 floor shrinking only padding and gaps, then reported it as not fitting. Both fixed by making them formulas like every other size: floored at 12px on the outside, scaled by the fit on the inside. The measured reasoning in the comment above still holds; only the envelope does. */ #p04 { --ls-body: max(12px, calc(clamp(12.5px, 3.87vh, 15.10px) * var(--ls-fit))); --ls-small: max(12px, calc(clamp(11.5px, 3.31vh, 12.91px) * var(--ls-fit))); --ls-h3: max(12px, calc(clamp(15.0px, 4.77vh, 18.61px) * var(--ls-fit))); --p04-lead: 1.24; /* The 0.72vw horizontal inset is bought deliberately against the sheet's 2.4vw and is kept: --safe-* is only a floor, so on a phone with no island this is byte-for-byte the old rule. */ padding: max(clamp(5px, 1.6vh, 10px), var(--safe-t)) max(clamp(5px, 0.72vw, 10px), var(--safe-r)) max(clamp(5px, 1.6vh, 10px), var(--safe-b)) max(clamp(5px, 0.72vw, 10px), var(--safe-l)); gap: clamp(2px, 0.70vh, 6px); } /* 1.12, not the 1.06 the generic floor gives it and not the 1.0 that looked free: at 27.3px this face's ascent+descent is 30.3px, so any line box shorter than that reports 3px of overflow on the h2 itself, even though nothing is visually cut. 1.12 is the smallest leading that boxes the glyphs. The h2 is also the largest run on the slide, so it carries the 24px floor. */ #p04 > h2 { line-height: 1.12; } /* ── the three lanes, still three lanes ──────────────────────────────────────────────────── */ /* THE THREE COLUMNS ARE RE-DECLARED, not inherited. portrait.css:87 collapses `.slide .cols` to a single column under `@media (max-width: 820px)`, and that query overlaps this one on every landscape phone narrower than 820px — measured at 800x360 the three lanes stacked and the lane grew to 1118px. Restating the grid here (this file loads last) keeps the side-by-side comparison the orientation exists for at any landscape width. GROW BUT NEVER SHRINK — the 0 in the middle of `flex` is load-bearing. Growing is what the desktop's `grid-template-rows: auto 1fr auto auto` already does with its own slack, so the lane panels bottom out level here as they do on the 1600x900, and the 12px of headroom becomes air inside the panels rather than a gap under them. But `flex: 1 1 auto`, which reads as the natural way to write that, re-arms the shrink that `.slide > * { flex: 0 0 auto }` above switched off on purpose. Mutation-tested both ways: with shrink on, forcing --ls-body to 17px made .cols give way and the lanes printed straight through .voice and .pos, text on text, while the harness reported ZERO clipped runs — an invisible failure. With shrink off the same mutation puts 3 runs below the bottom edge and 95px of overflow attributable to one block. */ #p04 .cols { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(4px, 0.6vw, 8px) !important; min-height: 0; flex: 1 0 auto; } /* Gutters only: the desktop's 18px column gap goes to 5.1 and its 18px lane padding to 6.6, returning 40px of measure to the copy. In a 257.8px column every character per line is worth having — one wrapped line costs 18.7px of the 273.7 the lanes get. */ #p04 .c { padding: clamp(3px, 1.30vh, 10px) clamp(4px, 0.78vw, 10px) clamp(3px, 1.40vh, 11px); gap: clamp(2px, 1.05vh, 8px); border-left-width: 3px; min-height: 0; } #p04 .c h3 { margin: 0; line-height: 1.06; } #p04 .c .def { margin: 0; line-height: var(--p04-lead); } /* THE LABELS GO INLINE, AND THIS IS THE BIGGEST SAVING ON THE SLIDE — 75.0px, measured by putting them back: .cols 261.7 -> 336.7, and the creator lane's own list 130.9 -> 205.9. Example / Advantage / Disadvantage each held a whole line above their value, and in a 257.8px column that is three lines per lane spent on three words. Inline, as a coloured lead-in, the label costs only the ~50px of the first line it shares with its own value, and the value keeps the full column for every line after it. Nothing is abbreviated, hidden or reordered: the list is still dt, dd, dt, dd, dt, dd, and the forced break after each dd keeps the three pairs on their own paragraphs. */ /* Two cascade traps live in these four lines, and both produced numbers that looked plausible. FIRST, the leading is declared on dt and dd THEMSELVES. phone-landscape.css sets `.slide dd { line-height: 1.32 }`, and a declaration that applies directly to an element beats an inherited one however specific the ancestor's selector is — 1.24 set on `#p04 .c dl` read as correct and cascaded nowhere. SECOND, the dl needs its own font-size. The landscape floor styles `.slide dd` and `.slide dt` but never `dl`, so the list box kept the desktop's 17px; and a block's strut is sized from ITS font rather than its children's, so every line box in the list had a 17 x 1.24 floor no matter how small the dd inside it was. Worth 16.6px of .cols (261.7 -> 278.3 with it removed). The tell was that all three lanes measured an identical 140.3px while carrying 212, 243 and 216 characters: identical numbers across different content meant the container was being measured, and it was. */ #p04 .c dl { font-size: max(12px, var(--ls-body)); line-height: var(--p04-lead); } #p04 .c dt { display: inline; margin: 0 0.20em 0 0; line-height: var(--p04-lead); } #p04 .c dd { display: inline; margin: 0; line-height: var(--p04-lead); } #p04 .c dd:not(:last-of-type)::after { content: "\A"; white-space: pre; } /* ── the evidence thumbnail ──────────────────────────────────────────────────────────────── */ /* The desktop gives it a 96px track at 9/16, which stands 171px tall. Two things were wrong in landscape. The track was still declared 96px while the rule above had already clamped the image to 38px, leaving a 58px hole down the middle of every lane. And at 9/16, narrowed enough to fit a phone column, the picture becomes a 33px-wide stamp that STILL stands 58px tall and sets the height of the whole row. At 4/5 it is 38 x 47.5: a wider, more readable picture in less height, and 4:5 is the aspect the source posts are actually in (deck.css says so of the rails strip). 42px was tried and rejected — it squeezes the caption beside it onto a third line, which costs more height than the picture gains. */ #p04 .c .ev { grid-template-columns: clamp(24px, 4.5vw, 38px) 1fr !important; gap: clamp(4px, 0.7vw, 8px); padding-top: clamp(2px, 0.62vh, 5px); align-items: start; } /* The width is an absolute clamp, never 100%. Under the portrait breakpoint noted above, .ev is re-laid-out as a block and a percentage resolves against the full 773px lane: measured at 800x360 the thumbnail became a 773x966 poster. A bounded width cannot do that whatever another stylesheet does to the box it sits in. */ #p04 .c .ev img, #p04 .c .ev video { width: clamp(24px, 4.5vw, 38px) !important; height: auto; max-width: 100%; aspect-ratio: 4/5; object-fit: cover; } #p04 .c .ev p { line-height: var(--p04-lead); } /* The figure ("328,817 plays", "Dosa Hut") was display:block and took a whole line of its own above a caption only 213.9px wide: 4 line boxes for 63 characters. Inline it is 2, worth 10.4px of .cols. The margin stands in for the space the markup does not have between and the sentence. It is the dt treatment applied to the same problem, so the two coloured lead-ins on this slide read as one device rather than two accidents. */ #p04 .c .ev b { font-size: max(12px, var(--ls-h3)) !important; display: inline; margin-right: 0.3em; line-height: 1.1; } /* ── the two closing bands ───────────────────────────────────────────────────────────────── */ /* .voice sets on one line at 831.9px, so it costs 18.7px and needs nothing but its leading. */ #p04 .voice { line-height: var(--p04-lead); max-width: none; } /* .pos measured 90.9px of the 390. THE WHOLE BAND TURNS ON ONE WRAP: its 257 characters need 755px of measure to set in two lines, and a third line costs 18.7px the slide does not have. The first build cleared 755 by 0.9px, which is not a margin, it is luck — a different font build wraps and the band goes off the bottom. Padding and gutter are bought back into that measure, which now runs 771.4px, 16.4px clear. THE NUMERAL COMES DOWN, and not only for the width it returns. At 32.9px it was LARGER than the 27.3px headline, inverting the deck's own hierarchy: on the 1600x900 the h2 is 54 and the numeral 46, the figure reading second to the sentence above it. 25.3px restores that order, and 3.0vw is the same share of this canvas that 46px takes of 1600. The 24px floor is carried by the h2, where it belongs. */ #p04 .pos { padding: clamp(2px, 1.15vh, 9px) clamp(6px, 1.0vw, 12px); gap: clamp(6px, 0.9vw, 11px); align-items: center; } /* 1.18 for the same reason as the h2: at 1.12 the numeral's glyph box stood 1px proud of its line box and reported as overflow. It does not set this band's height either way — the two lines of copy beside it are 37.4px against the numeral's 29.9. */ #p04 .pos .num { font-size: max(16px, calc((clamp(22px, 3.0vw, 30px)) * var(--ls-fit))) !important; line-height: 1.18; } #p04 .pos p { line-height: var(--p04-lead); } } /* ── from _ls-p05.css ─────────────────────────────────────────────────────────────────── */ @media (max-width: 820px), (orientation: landscape) and (max-height: 520px) { /* ═══ 05 THE MARK BESIDE THE PALETTE, THE PRINTS UNDER BOTH ═════════════════════════════════ Four bands in 390px: headline, the cohesion line, mark|palette+faces, the six prints. Measured before any of this, the slide stood 851px tall against the 390 it has and 15 of its 26 runs sat outside the slide box, cut by `.slide{overflow:hidden}` — the palette wrapped because `repeat(8,1fr)` was dividing what a 392px mark column left of a 1600px canvas, ~43px a swatch. Nothing here is dropped: 26 runs before, 26 runs after. Every rule below is spending height. */ /* THE SLIDE'S OWN PADDING HAS TO BE RESET HERE, not inherited from phone-landscape.css. That file sets `.slide { padding: var(--ls-pady) var(--ls-padx) }` — one class — and deck-v10.html:199 sets `#p05 { padding: 44px 70px 40px }` — an id, which wins on specificity whatever the source order. Measured: the slide was still carrying 84px of desktop vertical padding, 65px of the 50px it was overflowing by. p02 and p10 escape this only because the landscape sheet zeroes their padding by id as well. */ #p05 { padding: var(--padt) var(--padr) var(--padb) var(--padl); gap: clamp(4px, 1.6vh, 10px); } /* 1.12, not the 1.06 the generic rule sets: at 27.3px this face's own line box measures 30px, so anything tighter reports 3px of overflow on the h2 itself and clips the descender of the 'y'. */ #p05 h2 { line-height: 1.12; } #p05 .cohesion { margin: 0; max-width: none; line-height: 1.28; } /* THE MARK COLUMN GOES PROPORTIONAL, NOT SMALLER-FIXED. 392px is 24.5% of the desktop canvas; 21% here keeps the mark's relationship to the palette beside it instead of eating 47% of an 844px screen. The art is square, so 21% of the 800px inner width stands 168px, inside the 195px the palette+faces stack needs — which is why this row is centred rather than stretched. EVERY STRUCTURAL DECLARATION IN THIS BLOCK IS !important, and it is not belt-and-braces. portrait.css is keyed on `@media (max-width: 820px)` — width, not orientation — so on an 812x375 mini or a 667x375 SE held sideways BOTH sheets match, and portrait.css:88 collapses .grid, .right, .faces, .swatches and .proof to `display:flex; flex-direction:column !important`. Measured at 740x360 without the !importants: the mark went 702px wide, the six prints stacked into a 567px column, the slide overflowed by 588px and 3 runs were clipped — the exact stacking this orientation exists to prevent, and invisible at 844 because portrait.css never fires there. An important declaration only loses to another important one, and this sheet loads last. p02/p07/p10 carry theirs for the same reason. */ #p05 .grid { display: grid !important; grid-template-columns: 21% 1fr !important; gap: clamp(8px, 1.4vw, 16px) !important; align-items: center; min-height: 0; } /* THE MARK IS CAPPED ON THE SHORT AXIS TOO, for the reason phone-landscape.css:37 gives about type: a landscape phone varies far more in height than in width. The art is square, so a WIDTH of 21% is also a HEIGHT of 168px, fixed, whatever the height of the screen is. At 390 that sits inside the 195px the stack beside it needs; with the browser toolbar out (844x320) it becomes the tallest thing on the slide and the block overflowed by 6px. min(100%,46vh) is inert at 390 (168 < 179) and takes the mark to 147 at 320, where the right column binds again. */ #p05 .markbox img { width: min(100%, 46vh); } #p05 .right { display: grid !important; grid-auto-flow: row !important; gap: clamp(5px, 1.5vh, 10px) !important; align-content: start; min-height: 0; } /* ALL EIGHT SWATCHES STAY IN ONE ROW. The palette IS the argument of this slide and a 4+4 wrap reads as two palettes. At 21% for the mark each swatch gets 73px, so 'Cream stock' sets in two lines — a wrap, not a cut, and it is the only one of the eight that takes a second line. The 3px cream gutter is load-bearing (deck-v10.html:225) so it survives at 2px and never 0: the dose field measures #430D13 against a #420D13 ground and disappears without it. */ #p05 .swatches { display: grid !important; grid-auto-flow: row !important; grid-template-columns: repeat(8, 1fr) !important; gap: 2px !important; padding: 2px !important; } /* A SWATCH IS A FIELD OF COLOUR CARRYING A LABEL, NOT A LABEL ON A TINT. Dropping the desktop's fixed 104px left the tile exactly as tall as its own two-line label — 66px measured — so the colour survived only as the text's background. The control gives 39% of the tile to bare colour; min-height:20vh makes the tile 82px against that 66px label, so ~16px of field is clear above it and the label still sits on the bottom edge the desktop puts it on (align-content:end). It is paid for out of the prints, which were running proportionally larger than the control. */ #p05 .sw { height: auto; min-height: 20vh; padding: clamp(3px, 0.9vh, 6px) clamp(4px, 0.6vw, 7px); } /* The palette is 16 of this slide's 26 runs, so these two sizes ARE the median. h3/body puts them at 17.9/14.4 and the median at 16.2; taking the name down far enough to hold 'Cream stock' on one line (13.3px at this column width) drops the median to 14.7 and fails the floor. The wrap is the cheaper trade. */ #p05 .sw span { font-size: max(12px, var(--ls-h3)) !important; line-height: 1.08; } #p05 .sw span i { font-size: max(12px, var(--ls-body)) !important; line-height: 1.14; letter-spacing: 0; } /* THE FOUR FACES KEEP THEIR label|specimen ROWS. Each row is one reading — the label names what the specimen demonstrates — so the two columns stay side by side; only the label column comes off its 210px, which was measured for a canvas twice this wide. Without the !important, portrait.css:120 flattens exactly this selector to a single column. */ #p05 .faces { padding: clamp(4px, 1.1vh, 8px) clamp(8px, 1.1vw, 14px); gap: clamp(2px, 0.7vh, 5px); } #p05 .faces div { display: grid !important; grid-template-columns: clamp(88px, 12vw, 118px) 1fr !important; gap: clamp(6px, 1vw, 12px) !important; } #p05 .faces b { font-size: max(12px, var(--ls-body)) !important; line-height: 1.2; } #p05 .f1 { font-size: max(13px, calc((clamp(17px, min(2.5vw, 5.2vh), 24px)) * var(--ls-fit))); line-height: 1.16; } #p05 .f2, #p05 .f3 { font-size: max(12px, var(--ls-h3)); line-height: 1.2; } /* 1.32 on the Kannada: at 1.22 the specimen's own line box overflowed its row by 1px. Zoomed against the desktop control at matched size, the run sets identically — ಒಂ ದು ಬೈ ಟು, five clusters, the ೖ still on the ಬ. */ #p05 .f4 { font-size: max(12px, var(--ls-h3)); line-height: 1.32; } /* THE SIX PRINTS STAY SIX ACROSS AND STAY WHOLE. contain, never cover, per deck-v10.html:219: a poster shown cropped is not the poster. 23.6vh is 92px of picture, and at the real 0.747 aspect that is 69px wide in a 125px column, so all six sit on one row with air. Sized from both sides: under 24vh the slide closed at 347 of 380 usable and left 33px of dead ground at the foot, and at 28.5vh the strip took 30% of the slide's height against the control's 23% — which is where the swatches' missing colour band was hiding. 23.6vh matches the control's proportion and leaves 8px of slack at the foot, because at 0.74px one font metric off a real handset is an overflow. The cream border drops 3px -> 2px: at 92px tall, 3px is a frame rather than a keyline. */ #p05 .proof { display: grid !important; grid-auto-flow: row !important; grid-template-columns: repeat(6, 1fr) !important; align-items: end; gap: clamp(4px, 0.8vw, 9px) !important; padding: clamp(4px, 1.1vh, 8px) clamp(6px, 0.9vw, 12px); } #p05 .proof img { height: clamp(60px, 23.6vh, 130px) !important; width: auto !important; border-width: 2px; } } /* ── from _ls-p06.css ─────────────────────────────────────────────────────────────────── */ /* ═══ 06 THE MENU: THE ARTEFACT STAYS BESIDE THE ARGUMENT ═════════════════════════════════════ Every rule in this block is an override of an ID rule in deck-v10.html, not an addition. `#p06` beats `.slide` on specificity and a media query contributes none, so the desktop's `padding: 70px 84px`, `gap:40px` and `height:520px` were all still in force inside the landscape query: measured 436px of overflow on the slide with 8 of 15 runs outside the box before a line of this file existed. */ @media (max-width: 820px), (orientation: landscape) and (max-height: 520px) { /* THE VERTICAL BUDGET, measured at 844x390. 390 less 2x9.36 of --ls-pady leaves 371.3 for content. The head measures 61.9 and the slide's own gap 5.5, so the menu row gets 303.9. That number is what sets the image below; it is not a taste choice. */ #p06 { padding: var(--padt) var(--padr) var(--padb) var(--padl); gap: clamp(5px, 1.4vh, 11px); /* the image column, and the only free variable on this slide. Width, not height, because the figcaption has to wrap to the SHEET's width or it comes away from the picture it labels. 1800x2864 means height = width x 1.591, so 41vh of width is 65vh of picture. */ --p6-img: clamp(104px, 41vh, 190px); } /* Erica One's content box is 1.33x its em, so any line-height under that reports as overflow on the element itself: measured 5px on the h2 at the generic 1.06 and 4px still left at 1.18. */ #p06 > div > h2 { line-height: 1.36; max-width: none; } #p06 .sub { margin: 3px 0 0; } /* THE MEDIAN FLOOR IS WHAT SETS THIS, nothing else. --ls-body resolves to 14.43px at 844x390 and this slide's 15 runs sort with a body run in the middle, so the median measured 14.43 against a 15px floor. 1.08x is the smallest multiplier that clears it, and it is written as a multiple of the shared variable so the slide still breathes on the shorter axis with the rest of the deck. It costs 1.4px of height on the sub and nothing at all on the list, which is not the tall column here. */ #p06 .sub, #p06 li p { font-size: max(12px, calc(var(--ls-body) * 1.08)) !important; } /* `display:grid !important` is not redundant. portrait.css is gated on (max-width:820px), so on any landscape phone narrower than 820 — an iPhone SE at 667x375 — BOTH phone stylesheets match, and its `.slide .menu{display:flex;flex-direction:column !important}` collapses this row into a stack. Measured at 667x375 with the columns restated but not the display: 435px of overflow and 14 of 15 runs outside the slide. This is why phone-landscape.css restates the display on p02 and p07 too. */ #p06 .menu { display: grid !important; flex-direction: row !important; grid-template-columns: var(--p6-img) 1fr !important; gap: clamp(10px, 1.9vw, 18px) !important; min-height: 0; align-items: center; } /* same collision: portrait flattens every `.slide ol`, which loses align-content:center and leaves the three points hanging off the top of the figure they sit beside. */ #p06 ol { display: grid !important; gap: clamp(7px, 2.2vh, 14px) !important; align-content: center; } #p06 .menu figure { gap: clamp(3px, 1vh, 6px); } /* Sized by the column, so the sheet and its caption are the same object at every viewport. */ /* THE MENU PICTURE IS SIZED BY WIDTH, SO IT NEVER PARTICIPATED IN A HEIGHT-DRIVEN FIT. `width:100%; height:auto` makes the image's height a function of its COLUMN, and the column is a function of the viewport width, which barely moves between landscape phones. So on an 802x293 Pixel 5 the fitter shrank p06's type and padding to the floor while a 191px picture sat there unmoved, and the slide overflowed by 6px it had no way to recover. Bounding it by height instead, scaled by the fit like everything else, lets it take part; `width:auto` keeps the aspect ratio so the menu is never squashed, and it stays centred in its column. */ #p06 .menu img { height: auto !important; width: auto; max-width: 100%; max-height: calc(60vh * var(--ls-fit)); margin: 0 auto; box-shadow: 0 5px 14px rgba(28,23,20,.28); } #p06 .sheet { width: 100%; } #p06 .menu figcaption { font-size: max(12px, var(--ls-small)) !important; line-height: 1.24; text-align: center; } /* The marks scale with the sheet, and keep the desktop's relationship to it: centred on the left edge, half on the paper. Measured at 844x390: a 20.3px badge whose left edge lands 11.8px in from the slide's own edge, so nothing hangs off. */ #p06 .mk { width: clamp(17px, 5.2vh, 22px); height: clamp(17px, 5.2vh, 22px); font-size: max(12px, var(--ls-small)) !important; box-shadow: 0 2px 6px rgba(28,23,20,.4); left: calc(clamp(17px, 5.2vh, 22px) / -2); } /* THE MARKS HANG OFF THE SHEET ON PURPOSE, so the SHEET has to clear the island, not the mark. Half of each badge sits outside the paper by design (the rule above), which put the numerals' ink 2-3px left of the slide's content box — inside a 44px island, measured on all four landscape viewports. Moving the mark would break the relationship the desktop has; moving the paper keeps it. So p06's left inset is the island PLUS half a badge, expressed as a max() so that a phone with no island still gets exactly the sheet's designed padding (--ls-padx is ~19px against this branch's ~11px, so it wins and nothing moves). */ #p06 { padding-left: max(var(--padl), calc(var(--safe-l) + clamp(17px, 5.2vh, 22px) / 2)); } #p06 li { grid-template-columns: clamp(22px, 3.4vw, 34px) 1fr !important; gap: clamp(7px, 1.2vw, 13px) !important; } /* The numerals are the tie between the marks on the paper and the three points, so they are kept as display type rather than falling to the generic `.slide li span` body size, which would put them at 14.4px and break the tie. line-height 1.42 for the same Erica One content box as the h2: the desktop's .9 reported 4px of overflow on each numeral, 1.0 still reported 6px, and 1.34 still reported 2px. AND THE SIZE IS FREE, WHICH IS WHY IT IS BIG. The tall column on this slide is the figure at 292.1px; the list only uses 166.8 of the 303.9 it is given, so the numeral can be taken from the 24px a naive scale-down produced up to 36.7px without moving the slide's height at all. At 24px Erica One's counters had closed up into blobs, which is what the type lock at the head of deck-v10.html warns about; the control runs this numeral at 74px for exactly that reason. */ #p06 li .n { font-size: max(19px, calc((clamp(26px, min(4.4vw, 9.4vh), 40px)) * var(--ls-fit))) !important; line-height: 1.42; /* THE LINE-HEIGHT FIX MOVED THE NUMERAL OFF ITS HEADING, so this puts it back. Measured with canvas font metrics: at 1.42 the numeral's ink top sat 13.6px below the h3's, where the same pair on the 1600x900 control sits 8px apart on a 74px numeral, i.e. 0.107em. -0.265em is the difference. A negative margin and not a tighter line-height, because tightening the box is what reported as overflow in the first place. */ margin-top: -0.265em; } #p06 li h3 { margin: 0 0 2px; } } /* ── from _ls-p07.css ─────────────────────────────────────────────────────────────────── */ @media (max-width: 820px), (orientation: landscape) and (max-height: 520px) { /* ═══ 07 THREE STATES OF ONE ROOM, IN A ROW — the 390px of height, spent ════════════════════ Nothing is cut, hidden or shortened: the slide carries the same 460 characters and the same three photographs as the desktop control, checked against deck-v10.html's own #p07 textContent. What changes is where the height goes. Measured at 844x390 the slide adds up to exactly 390: padding 18.7 + header 58.3 + two gaps 9.4 + frame 199.2 + plate 84.6 + foot 19.8. */ /* THE DESKTOP'S OWN #p07 RULE WAS STILL PAYING FOR A 900px CANVAS. `.slide` in phone-landscape.css is a CLASS and `#p07{padding:52px 60px 46px;gap:24px}` in the deck is an ID, so the ID won and this slide alone kept 98px of vertical padding and 48px of gaps: its three blocks measured 359.7 of content inside a 390 box and it overflowed by 116px, with the foot line landing 68px below the bottom edge. Same specificity as the deck's rule, later in source order, so this one wins. */ #p07 { padding: var(--padt) var(--padr) var(--padb) var(--padl); gap: clamp(4px, 1.2vh, 9px); } /* The desktop's 10px between headline and sub is 10px of a 900px canvas. */ #p07 .sub { margin-top: clamp(3px, 1.1vh, 8px); } /* THE TWO VOICE LINES CARRY THE MEDIAN. Nine text runs on this slide, so the median is the 5th; --ls-body computes 14.43px at 844x390 and left the median at 14.43, under the 15px floor. Floored on the sub and the foot rather than on the captions because a caption line costs three times a voice line here: the sub and the foot are one line each in this width, the longest caption is three, and the plate is what the frame has to pay for. */ #p07 .sub, #p07 .foot { font-size: max(15.2px, var(--ls-body)) !important; } #p07 .foot { line-height: 1.3; } /* THE FRAME IS THE SHOCK ABSORBER, AND IT IS THE ONLY ONE. Every other child of the slide is pinned at its natural height by the shared file, on purpose. This row is allowed to shrink and inside it the plate is an `auto` track while the photograph is the `1fr`, so a deficit is always taken out of the picture and never out of a line of copy. It is what makes the slide hold when the height moves: fixing the frame at the desktop's 4/3 also fits at 844x390 and then overflows by 9px at 844x320, the same phone with the toolbar out, because a width-derived height cannot see that the height has gone. Measured here: 199.2px at 390 (a 1.30 crop against the control's 1.333, so marginally MORE of the room, not less), 151.5 at 320, 134.4 at 300, and 0px of overflow at all of them. subgrid is what keeps the three figures honest — all three frames are one track and all three plates are another, so the photographs stay identical in height (same room, same camera, and three different frame heights would break exactly that claim) and the plates read as one bar however unequal the three captions are. */ #p07 .steps3 { align-content: start; flex: 0 1 auto; /* The floor on the frame is the honesty clause. It absorbs the deficit down to a 1.85 crop and no further; past that the row refuses to shrink and the excess becomes a measurable overflow on this block. Without it the plate silently climbed over the bottom of the photograph — measured -8.2px of overlap at 844x280 — which is a failure no height sum can see. Checked on the source frames before choosing the number: at 1.66 the four prints, the picture lights above them and the panelled wall all survive the centre crop, at 1.85 it starts taking the tops off the prints. */ grid-template-rows: minmax(min(20vw, 44svh), 1fr) auto; /* The shared file's `gap` is one value for both axes, and it became a ROW gap the moment this grid grew a second row: measured 11px of maroon between every photograph and its own caption plate, i.e. the caption coming away from its picture. The columns keep the 11px. */ row-gap: 0 !important; } #p07 .steps3 figure { grid-row: span 2; display: grid; grid-template-rows: subgrid; } /* svh, not vh, and it is not pedantry: the slide's own height is 100svh, while vh resolves to the LARGE viewport on a phone — the height the page has once the toolbar has retracted. In vh the frame would be cut for a 390px box while sitting in the 320px one the toolbar leaves behind. */ #p07 .steps3 img { aspect-ratio: auto; width: 100%; height: 100%; object-fit: cover; } #p07 .steps3 figcaption { padding: clamp(4px, 1.1vh, 7px) clamp(7px, 1vw, 12px) clamp(5px, 1.3vh, 8px); font-size: max(12px, var(--ls-body)) !important; line-height: 1.24; } /* 1.03 and 1.08 are tight enough that the glyph box is taller than the line box: measured, the h2 reported 2px and each caption label 1px of their own scroll overflow at 844x390. Line-heights that contain their own type instead — 4px of the budget, and the slide's worst box goes to 0. */ #p07 h2 { line-height: 1.2; } #p07 .steps3 figcaption b { line-height: 1.15; margin-bottom: 1px; } } /* ── from _ls-p08.css ─────────────────────────────────────────────────────────────────── */ @media (max-width: 820px), (orientation: landscape) and (max-height: 520px) { /* ═══ 08 FIVE SERIES, FIVE ACROSS ═══════════════════════════════════════════════════════════ The desktop argument is five posts compared as a set, one element repeated five times, image over cream band. Five across is the whole point of this orientation, so the grid is kept and the 390px of height is spent by measurement. THE BODY COPY IS 4% BIGGER THAN THE DECK'S, and that is a floor, not a preference. This slide has 17 text runs: 1 headline, 1 standfirst, and per tile h3 + p + q. Six runs sit at or above 15px on the shared variables (the h2 and the five h3s), so the median run is the ninth, which lands inside the paragraph group. At the shared --ls-body of 14.43px on this screen the median measured 14.43 and failed the 15px floor. --p08-body is the same vw/vh shape as --ls-body, stepped up so it computes to 15.4px at 844x390: the five p runs cross 15, eleven runs are then at or above it, and the measured median is 15.405. */ :root { --p08-body: clamp(12.5px, min(1.85vw, 3.95vh), 17px); } /* #p08 is an ID rule, so the desktop's `padding:52px 60px 46px` and `gap:28px` beat .slide's class-level landscape padding on specificity and have to be re-set here by hand. 52+46 of padding is 25% of a 390px screen. */ #p08 { padding: max(clamp(4px, 1.4vh, 9px), var(--safe-t)) max(clamp(12px, 1.7vw, 20px), var(--safe-r)) max(clamp(5px, 1.6vh, 10px), var(--safe-b)) max(clamp(12px, 1.7vw, 20px), var(--safe-l)); gap: clamp(4px, 1.4vh, 9px); } /* THE STANDFIRST GOES BESIDE THE HEADLINE, NOT UNDER IT. Stacked, the heading block measured 56.8px of the 390. The headline sets one line at 457px and the standfirst wraps to two at any width it can get here, so side by side the block is the taller of the two rather than their sum: 40.4px measured, 16px handed straight to the photographs. This is the one place on the slide with spare WIDTH, which is the axis this orientation has and the desktop does not. */ #p08 > div:first-child { display: flex; align-items: center; gap: clamp(8px, 1.3vw, 15px); min-width: 0; } /* 0 0 auto, not 0 1 auto: allowed to shrink, the headline wrapped to two lines and the block went back to 49.4px, spending the saving twice. line-height 1.2 rather than .slide h2's 1.06 because at 1.06 the 27.3px face overflowed its own line box by 2.00px, the entire overflow budget, on the descenders of `nobody` and `post`. The standfirst's two lines set the block height, so the taller line box costs nothing: 40.4px either way, measured. */ #p08 > div:first-child > h2 { flex: 0 0 auto; line-height: 1.2; } #p08 .sub { flex: 1 1 0; min-width: 0; margin: 0; max-width: none; } /* THE PHOTOGRAPHS TAKE WHAT IS LEFT, RESOLVED AT RENDER RATHER THAN GUESSED. .five fills the slide's remaining height and the tiles are subgrid, so row 1 (the shot) is 1fr and row 2 (the cream band) is auto = the tallest caption of the five. The band heights come out identical (188.5 x5 measured), which is the desktop's own rule -- same element five times means the same band, never five ragged depths -- and the shot row then resolves to whatever is left, 137.2px here. Nothing on this slide carries a hard-coded picture height, so the caption is the fixed part and the photograph is the elastic one: on a shorter phone the type holds and the picture gives way, which is the right way round. */ #p08 .five { gap: clamp(5px, 0.8vw, 9px); align-self: stretch; flex: 1 1 auto; min-height: 0; grid-template-rows: 1fr auto; } #p08 .f { grid-template-rows: subgrid; grid-row: span 2; min-height: 0; } /* CONTAIN, NOT COVER, AND THIS IS THE ONE DECISION ON THE SLIDE. The tiles are 157.7px wide and the shot row resolves to 137.2px, so the box is landscape while every post is a 4:5 1080x1350 artefact. cover would crop half of each post's height, and these posts carry BURNED-IN TYPE: fe1's line runs across the top, sy1's `Swalpa adjust maadi` is a bar across the bottom, fo2 is the words IDLI VADE with `soft, round, and gone by ten` above them. A centre crop deletes words off three of the five, which is the one thing that was ruled out. contain keeps every post whole at its true 4:5 -- 109.8 x 137.2 painted, measured -- and mats it on the var(--roast) that .shot already declares on the desktop. It is a mat, not a letterbox: nothing is squashed, the ratio is the post's own. What it costs is size, and the deck has already answered that: the burned-in type is illegible at tile scale on the desktop too, which is exactly why every post's line is ALSO set as the q underneath it. Not one word of the five posts is lost. */ #p08 .f .shot { aspect-ratio: auto; min-height: 0; } #p08 .f .shot img { object-fit: contain; } /* Caption band, re-set for a 157.7px tile instead of a 285px one. 16px of side padding was 11% of the tile width per side; 7px is the same share of the narrower tile and buys 18px of measure, which is what holds the longest paragraph to four lines instead of five. */ #p08 .f .cap { padding: 5px 7px 6px; } /* h3 is restated at .slide h3's own 1.14, which the desktop's `#p08 .f h3{line-height:1.05}` outranks on specificity. Honestly: this does NOT change the reported overflow, which is 1.00px either way -- Big Shoulders' content box stands ~1px proud of any line box this tight, and that 1px is font metrics, not clipping (clipped runs = 0, and the zoom shows daylight between the label's descenders and the paragraph). It is bought for 1.5px of picture height purely to keep `The Sayings` off `The lines you only hear`, which at 1.05 measured a 0.0px box gap. */ #p08 .f h3 { font-size: max(12px, var(--ls-h3)) !important; margin: 0 0 2px; line-height: 1.14; } #p08 .f p { font-size: max(12px, var(--p08-body)) !important; line-height: 1.22; } /* q keeps the desktop's 17/18 relationship to the paragraph (0.96 here) so the post's own line still reads as the quieter voice, and it clears the 12px floor at 14.79px measured. */ #p08 .f q { font-size: max(12px, calc(var(--p08-body) * 0.96)) !important; line-height: 1.2; margin: 4px 0 0; padding-top: 4px; } } /* ── from _ls-p09.css ─────────────────────────────────────────────────────────────────── */ @media (max-width: 820px), (orientation: landscape) and (max-height: 520px) { /* ═══ 09 THE SENTENCE STAYS ON THE LEFT OF ITS OWN STRIP ════════════════════════════════════ Three feed rows, each a name and a sentence on the left against its own strip of stills on the right. That left-to-right pairing IS the slide's argument — this is what that content looks like running — so the row is kept as a row and the whole vertical budget is spent on how big the stills can be inside it. THE ONE PIECE OF ARITHMETIC. The tiles are 4:5, so their WIDTH is set by the height that is left over, not by the width available. At 844x390: 390 - 18.7 (padding) - 56.3 (headline and standfirst) - 5.5 (slide gap) = 309.5px for three rows and two gaps, so a row may be 98.5px and a tile 93.6px tall, which at 4:5 is 74.9px wide. 19.2vh is that height expressed against the axis that actually moves on a phone, so the strip shrinks with the toolbar instead of spilling. The 86px ceiling stops the tiles from eating the row on a 520px-tall landscape tablet. */ :root { --p09-tile: clamp(40px, 19.2vh, 86px); } /* THE PHONE PADDING NEVER REACHED THIS SLIDE. `#p09{padding:40px 64px 36px}` in the deck is an ID rule and beats `.slide{padding:var(--ls-pady) var(--ls-padx)}` on specificity, media query or not: measured, the slide was still spending 40px top / 36px bottom / 64px each side and its own scrollHeight ran 32px past the viewport with the third strip's bottom edge cut off. Restated at ID level it gives back 30.6px of height at the top, 26.6px at the bottom and 84px of width — the whole overflow, before a single type size is touched. Same argument for the 16px grid gap. */ #p09 { padding: var(--padt) var(--padr) var(--padb) var(--padl) !important; gap: clamp(5px, 1.4vh, 11px) !important; } /* 1.04 clipped nothing but reported a 2px scroll overflow on its own box (30 content in a 28 box); 1.12 makes the descenders of "running together" sit inside the line box and zeroes it. */ #p09 h2 { line-height: 1.12 !important; } /* The deck sets the standfirst ABOVE the row copy (24px against 21px). Dropped onto the shared --ls-body both landed on 14.43px and the hierarchy went flat, so it gets its own step between --ls-body and --ls-h3: 16.2px measured here, 1.2px of extra height against 7.1px of slack. */ #p09 .sub { font-size: max(12px, calc((clamp(13px, min(1.95vw, 4.15vh), 18px)) * var(--ls-fit))) !important; margin: clamp(2px, 0.8vh, 6px) 0 0 !important; } /* The desktop centres the rows inside a minmax(0,1fr) track and overruns it by 33px there too (measured on the control at 1600x900). In this sheet the slide is a flex column and .rows takes its natural height, so centring can only push the excess out of BOTH ends where the top half is unattributable; start-aligned, any excess lands at the bottom and is one measurable number. */ #p09 .rows { gap: clamp(4px, 1.2vh, 10px) !important; align-content: start !important; } /* `display:grid` is restated because portrait.css matches on WIDTH ALONE (max-width:820px) and lists `.slide .r` among the blocks it flattens to a column. A 740x360 Android in landscape satisfies both sheets; measured there, the label stacked ON TOP of its own strip, the rows block grew to 463px against a 360px screen and four runs plus three tiles fell off the bottom. Setting the columns without setting the display leaves that rule holding the display property. */ #p09 .r { display: grid !important; grid-template-columns: 1fr auto !important; gap: clamp(10px, 1.8vw, 26px) !important; padding-bottom: clamp(3px, 1vh, 8px) !important; } #p09 .r .lbl span { font-size: max(12px, var(--ls-h3)) !important; margin-bottom: clamp(1px, 0.5vh, 4px) !important; } /* 40ch on the desktop, 46ch here. The label column is 544px wide once the strip has taken what it needs, and an unbounded measure would set these sentences as one 75-character line; 46ch holds them to the two-line block the control has, at no cost in height because the row is as tall as its strip either way. */ #p09 .r .lbl p { line-height: 1.3 !important; max-width: 46ch !important; } /* THREE TRACKS, NOT THE DESKTOP'S FOUR. The deck states repeat(4,188px) so that 09b's four-tile row and this slide's three-tile rows start on the same axis; with three stills the fourth is simply empty, which on a 1600px canvas is breathing room and on an 844px one is 19% of the screen spent on nothing. Dropped, and the strip anchored to the right margin, the tiles keep the exact position they read from — hard right, sentence facing them — and the label keeps the width it needs to stay at two lines. */ #p09 .r .tiles { grid-template-columns: repeat(3, var(--p09-tile)) !important; gap: clamp(4px, 0.7vw, 10px) !important; justify-content: end !important; } /* Restated so the aspect survives portrait.css's `.slide .tiles` block, which re-declares the strip as an auto-flow grid; the ratio is the control's and is never traded, because these stills carry burnt-in caption text and a crop to a squarer tile cuts it off the top. */ #p09 .r .tiles img { width: 100%; aspect-ratio: 4/5; } } /* ── from _ls-p09b.css ─────────────────────────────────────────────────────────────────── */ @media (max-width: 820px), (orientation: landscape) and (max-height: 520px) { /* ═══ 09b TWO ROWS, EACH A SENTENCE BESIDE ITS STRIP ════════════════════════════════════════ The desktop argument is a LEDGER: series name and one line of copy on the left, the strip of work it produces on the right, on a shared axis so the two rows read as one table. Stacking a row would turn a table into a list and lose the "this sentence, that strip" pairing entirely, so both rows stay label|strip across, and the strips stay 4-across and 3-across as the control has them. */ /* The #id padding (40px 64px 36px, written for a 1600x900 canvas) beats the .slide class rule in the shared file, so 76px of the 390px budget was still being spent on desktop padding. */ #p09b { padding: var(--padt) var(--padr) var(--padb) var(--padl); gap: clamp(6px, 2.4vh, 14px); } #p09b > div:first-of-type { min-height: 0; } /* line-height 1.06 from the shared floor gives this headline a 28px line box for 30px of ink: scrollHeight-clientHeight measured 2px on the h2 alone. 1.12 costs 2px and measures 0. */ #p09b h2 { line-height: 1.12; } #p09b .sub { margin-top: clamp(2px, 0.8vh, 6px) !important; } #p09b .rows { align-content: start; min-height: 0; gap: clamp(5px, 1.7vh, 12px) !important; } /* THE 788px TILE TRACK IS THE WHOLE PROBLEM. 788px of a 800px content box left the label column at 72px, which wrapped "The lines you only hear in Bengaluru..." into EIGHT lines and pushed the second row 270px off the bottom of the slide. Stated as a fraction the same relationship survives: the strip still owns the majority of the row and every row still starts on one axis. */ #p09b .r { /* portrait.css is gated on (max-width:820px), which a landscape phone can ALSO match: an iPhone SE lying down is 667x375. There its `.slide .r{display:flex;flex-direction:column}` won on source order and stacked the row anyway — measured 97px of overflow and 4 clipped runs at 667x375. Re-asserted at #id so the row is a row on every landscape phone. */ display: grid !important; /* THE STRIP IS CAPPED BY HEIGHT AS WELL AS WIDTH, for the reason the shared file gives: width barely moves when the toolbar comes out, height does. Sized off 59% alone the tiles stayed 113x141 at 844x320 and the slide overflowed by 47px. A 4/5 tile is 1.25*(track-3gaps)/4 tall, and the row budget leaves it ~35vh, so the track's height ceiling is ~122vh. min() takes whichever binds: at 844x390 that is the 59% (the strip keeps the desktop's proportion, measured 472px), below ~388px of height it is the vh term. */ grid-template-columns: minmax(0, 1fr) clamp(240px, min(59%, 122vh), 500px) !important; gap: clamp(8px, 1.5vw, 18px) !important; padding-bottom: clamp(4px, 1.4vh, 10px); } /* The label heading is 30px on desktop and reads as a heading; the shared floor caught it with `.lbl span` and set it to --ls-small (13.65px), i.e. SMALLER than the sentence under it. */ #p09b .r .lbl span { font-size: max(12px, var(--ls-h3)) !important; margin-bottom: clamp(1px, 0.6vh, 5px); } #p09b .r .lbl p { max-width: none; } #p09b .r .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: clamp(4px, 0.8vw, 10px) !important; } } /* ── from _ls-p10.css ─────────────────────────────────────────────────────────────────── */ @media (max-width: 820px), (orientation: landscape) and (max-height: 520px) { /* ═══ 10 THE LEDGER, FITTED ═══════════════════════════════════════════════════════════════ Two priced columns side by side, LOCKS 7c row 6, nothing dropped: 22 text runs in, 22 out. Measured at 844x390 the slide wanted 419px against 364px of usable height (390 less the 26px border band), so 55px had to come out of SPACING and none out of copy. */ /* THE GRAIN WAS HOLDING A WHOLE GAP OPEN. deck-v10.html:485 `#p10>*{position:relative}` is (1,0,1) and beats `.grain{position:absolute}` at (0,1,0), so the zero-height overlay counts as a fourth flex child: 4 children, 3 gaps of 20px, of which 20px bought nothing. portrait.css:228 already does this for #p02; landscape needed it for #p10. Measured 28.1 + 20 + 307.1 + 20 + 23.7 + 20 + 0 = 418.9 against a scrollHeight of 419. */ #p10 > .grain { position: absolute; } /* 20px between three blocks is desktop spacing on a 900px canvas. At 390px it is 40 of the 55px of excess on its own. */ #p10 { gap: clamp(6px, 2vh, 10px); } /* h2 at 27.3px in a 1.06 line box reported scrollHeight 30 against clientHeight 28: the caps and the descender of "y" were 2px outside their own line. 1.16 contains them at dy 0. */ #p10 > h2 { line-height: 1.16; padding-top: clamp(4px, 1.6vh, 10px); } /* The columns were running to x=0 and x=844, hard against the screen edge, because the landscape block pads #p10's h2 and .nolock by --ls-padx but never the .buys grid. HALF padx, and the stripe therefore sits ~11px OUTSIDE the headline's left edge rather than on it the way the control has it. That misalignment is bought deliberately: at `--ls-padx - 5px`, which does put the panel field exactly on the headline line, the column loses 6px and the longest description wraps on a 740px-wide landscape phone, taking the slide 5px over. Measured both ways. Width is the binding constraint on this slide and the inset is what pays for it. */ /* The HALF inset is an optical decision (the stripe sits on the headline's left edge) and it is kept — but it can never be less than the island, so each side takes the larger of the two. On a phone with no inset this is byte-for-byte the old rule; on one with an island the panel gives up its optical alignment rather than put a priced column under the hardware. */ #p10 .buys { padding: 0 max(calc(var(--ls-padx) / 2), var(--sai-r)) 0 max(calc(var(--ls-padx) / 2), var(--sai-l)); gap: clamp(8px, 1.1vw, 14px) !important; align-content: stretch; } /* Desktop's 26/30/28 padding and 18px row gap are ~62px per column of pure air. Reclaimed here; the border-left stripe, not the whitespace, is what separates the two offers. */ #p10 .buys > section { padding: clamp(7px, 1.9vh, 12px) clamp(8px, 1.1vw, 13px); gap: clamp(4px, 1.4vh, 9px); } /* THE PRICE STAYS THE BIGGEST THING ON THE SLIDE, level with the headline at --ls-h2, because it is the payload and the control sets both at 52px. Nothing is taken off the number; the height comes off the 7px kicker margin under it and the 18px section gap below. */ #p10 .amt { font-size: max(12px, var(--ls-h2)) !important; margin-bottom: clamp(2px, 0.8vh, 5px); } #p10 .amt i { margin-top: clamp(2px, 0.7vh, 4px); } /* THE DELIVERABLE NAME MUST OUTRANK ITS DESCRIPTION, and in the generic landscape floor it did not: `b` took --ls-small (13.65px) while its own `span` took --ls-body (14.43px), inverting the desktop's 23-over-19. Restored, and it is what carries the median: with `b` on --ls-h3 the 22 runs sort to 10 at 15.36, 9 at 17.94, 3 at 27.3, so items 11 and 12 are both 17.94 and the median is 17.94. Before this rule it was 14.43, under the 15px floor. */ #p10 li b { font-size: max(12px, var(--ls-h3)) !important; line-height: 1.16; } /* THE SMALLEST TYPE ON THE SLIDE GETS THE LEFTOVER HEIGHT, not the whitespace. With the spacing above reclaimed the slide measured 336.8px into 364px, so 27px was going spare while the descriptions sat at --ls-body's 14.43px — the runs a phone reader actually strains on. This is --ls-body's own shape (min of a vw and a vh term, same 16px cap) pitched one step up, and the ceiling is set by width not height: the longest description, "Rebuilt as real text, with one Google listing and the right hours.", measures 371px against 388px of column at 15.36px, and 1.82vw is the last vw term that holds every description on ONE line on the narrowest landscape phone too (740px wide: 13.5px against 13.9px of column). Above it one item wraps and the eight rows stop reading as a ledger. THE 12.5px FLOOR IS --ls-body's OWN and is not raised. My first pass floored it at 14px, which reads better at 844x390 and then overflowed the slide by 7px at 844x320 — the same phone with the browser toolbar out — because a floor cannot shrink when the height does. The vh term is what makes this survive the toolbar, so the floor has to sit below where the vh term lands. */ #p10 li span, #p10 .amt i { font-size: max(12px, calc((clamp(12.5px, min(1.82vw, 4.0vh), 16px)) * var(--ls-fit))) !important; line-height: 1.3; } /* The rules between items are the ledger's grid; they stay. Only the air around them is cut: 11px grid gap plus a 3.5px margin between every pair of rows was 58px per column. */ #p10 ul { gap: clamp(3px, 1.1vh, 8px); align-content: space-evenly; } #p10 li { gap: 1px; padding-bottom: clamp(2px, 0.8vh, 5px); margin-bottom: 0; } /* "No lock-in." is the last word of the pitch, so it holds --ls-h3 rather than dropping to body. */ /* C39d: measured 5px past the bottom at 750x342 (the desktop's 26px survives into the query; this line is the slide's last row). Formula size + tighter leading buys it back. */ #p10 .nolock { line-height: 1.05; margin: 0; font-size: max(12px, var(--ls-body)); } } /* ── C39d, 2026-08-11 evening: the six slides added or rebuilt on 08-10/08-11 shipped with NO landscape budgets at all (p03b p06b p06c p07b p10b p10c), while the 08-02 originals each had one. Adrian, on his phone: "None of your work is mobile optimized like it was before." Each block below follows the file's law: reserves for padding, formulas not values, the desktop's ID-scoped 1600x900 paddings and fixed tracks re-asserted at #id, min-height:0 on every middle row, and the autofit floor doing the final sizing. ─────────────────────────── */ /* ═══ 03b THE INDEX: SIX ROWS, TWO COLUMNS, THE PAIRING SURVIVES ═══════════════════════════ */ @media (max-width: 820px), (orientation: landscape) and (max-height: 520px) { #p03b { padding: var(--padt) var(--padr) var(--padb) var(--padl); gap: clamp(4px, 1.6vh, 12px); } #p03b h2 { font-size: var(--ls-h2); } #p03b .sub { font-size: var(--ls-small); margin-top: clamp(2px, 0.8vh, 6px); max-width: none; } /* Two columns is the slide's argument (his order, read across); stacking to one column costs 3 rows of height it does not have. 58px desktop column gap is 1600px-canvas spend. */ #p03b .pri { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(4px, 1.5vh, 10px) clamp(10px, 2.4vw, 22px); } #p03b .pri > div { gap: clamp(6px, 1.2vw, 12px); } #p03b .rank { font-size: var(--ls-h3); min-width: clamp(14px, 2.4vw, 24px); line-height: 1.06; } #p03b .pri h3 { font-size: var(--ls-h3); margin-bottom: 1px; } #p03b .pri .do { font-size: var(--ls-small); line-height: 1.24; margin-top: 1px; } #p03b .foot { font-size: var(--ls-small); line-height: 1.25; } } /* ═══ 06b THE TENT: LIST BESIDE THE TWO FACES, CAPPED BY HEIGHT ════════════════════════════ */ @media (max-width: 820px), (orientation: landscape) and (max-height: 520px) { #p06b { padding: var(--padt) var(--padr) var(--padb) var(--padl); gap: clamp(4px, 1.6vh, 12px); } #p06b h2 { font-size: var(--ls-h2); } #p06b .sub { font-size: var(--ls-small); margin-top: clamp(2px, 0.8vh, 6px); max-width: none; } /* The desktop pins the cards at 800px on a 1600px canvas; as a fraction the strip keeps the majority of the row and the vh ceiling stops the A5 faces spending height that is not there. */ #p06b .mid { grid-template-columns: minmax(0, 1fr) clamp(220px, min(52%, 120vh), 460px); gap: clamp(8px, 1.8vw, 20px); } #p06b ol { gap: clamp(4px, 1.4vh, 10px); } #p06b li { grid-template-columns: clamp(18px, 3vw, 30px) 1fr; gap: clamp(6px, 1.2vw, 12px); } #p06b li .n { font-size: var(--ls-h3); } #p06b li h3 { font-size: var(--ls-h3); } #p06b li p { font-size: var(--ls-small); line-height: 1.26; } #p06b .cards { gap: clamp(6px, 1.2vw, 14px); } #p06b .cardwrap { gap: clamp(3px, 0.8vh, 8px); } #p06b .cardwrap figcaption { font-size: max(12px, calc(var(--ls-small) * 0.92)); line-height: 1.2; } #p06b .foot { font-size: var(--ls-small); line-height: 1.25; } } /* ═══ 06c THE LIVE SITE: THE PHONE GETS THE SITE'S OWN PHONE COMPOSITION ═══════════════════ The desktop slide scales a real 1440x900 viewport down to keep the site's desktop breakpoint, because a desktop slide showing the phone layout would misrepresent the website. On a phone the truth runs the other way: the reader IS on a phone, the site switches to its phone composition below 820px, and that composition at natural size is exactly what their customers will see. So the frame is unscaled here and simply fills the content box, and the tap target under it is the way in (C39b: the url is an anchor now, and it must stay visible). */ @media (max-width: 820px), (orientation: landscape) and (max-height: 520px) { /* display:grid !important: portrait.css matches (max-width:820px) on landscape phones too and flattens .slide to a flex column, which starved the 1fr row: the live frame measured 0px tall. Same collision p06 and p09b document. */ #p06c { padding: var(--padt) var(--padr) var(--padb) var(--padl); gap: clamp(3px, 1.2vh, 10px); display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto; } #p06c h2 { font-size: var(--ls-h2); } #p06c .sub { font-size: var(--ls-small); margin-top: clamp(2px, 0.6vh, 5px); max-width: none; } /* The desktop wrap is position:absolute 960x600, bottom:70px, centred by margin-left:-480px: every one of those survives a width/height override and hangs the frame off a 750px canvas (measured 105px out). Back into the grid's own 1fr row, and the frame fills it. */ /* height:auto + stretch, NOT height:100%: percentage height on a grid item resolves against the slide's content box (measured 334px on a 342px canvas), not against its own 1fr track, so 100% pushed the frame 38px out and the foot 58px after it. Stretch sizes it to the track. */ #p06c .livewrap { position: relative; left: auto; bottom: auto; margin-left: 0; width: 100%; height: auto; align-self: stretch; min-height: 0; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.5); } #p06c .liveframe { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; border: 0; } #p06c .foot { font-size: var(--ls-small); } #p06c .foot .url { font-size: max(12px, var(--ls-small)); } } /* ═══ 07b THE SPECIALS: THE PHONE SHOT BESIDE THE TWO REASONS ══════════════════════════════ The screenshot is portrait (a phone in a phone): its column is priced off HEIGHT, because at 342px of canvas a width-priced portrait image starves the copy beside it. */ @media (max-width: 820px), (orientation: landscape) and (max-height: 520px) { #p07b { padding: var(--padt) var(--padr) var(--padb) var(--padl); gap: clamp(3px, 1.2vh, 10px); } #p07b h2 { font-size: var(--ls-h2); } #p07b .sub { font-size: var(--ls-small); margin-top: clamp(2px, 0.6vh, 5px); max-width: none; } #p07b .two { grid-template-columns: clamp(80px, 34vh, 200px) minmax(0, 1fr); gap: clamp(8px, 1.8vw, 20px); } #p07b .why { margin-top: 0; padding: clamp(6px, 1.4vh, 12px) clamp(8px, 1.6vw, 16px); } #p07b .why p { font-size: var(--ls-small); line-height: 1.3; } #p07b .why p + p { margin-top: clamp(4px, 1vh, 8px); } } /* ═══ 10b THE BREAKOUT: THE TABLE IS THE SLIDE, THE RETAINER RIDES BESIDE IT ═══════════════ Nine priced rows and four retainer lines on the shortest canvas in the deck. Nothing is cut: every row keeps its covers cell, and the fitter takes the type to the floor if the Pixel 5's 293px demands it. The Worth column is priced smaller than You-pay by construction, so the anchoring survives the shrink. */ @media (max-width: 820px), (orientation: landscape) and (max-height: 520px) { /* The desktop's grid-template-rows (auto auto 1fr auto) predates the C39e markup, which has only two children: re-declared so the table row is the bounded one. */ #p10b { padding: var(--padt) var(--padr) var(--padb) var(--padl); gap: clamp(1px, 0.8vh, 6px); grid-template-rows: auto minmax(0, 1fr); } #p10b h2 { font-size: var(--ls-h2); line-height: 1.02; } #p10b .sub { font-size: var(--ls-small); line-height: 1.15; margin-top: clamp(1px, 0.4vh, 3px); max-width: none; } /* 1.75fr: the covers cells are what wrap, and every saved wrap is a saved row of height. Measured 49px of text overflow at 1.6fr on 750x342; the levers below each buy back rows. */ #p10b .brk { grid-template-columns: minmax(0, 1.92fr) minmax(0, 0.62fr); gap: clamp(8px, 1.6vw, 18px); } #p10b thead th { font-size: max(12px, calc(var(--ls-small) * 0.92)); line-height: 1; padding-bottom: 1px; } #p10b tbody td { padding: clamp(1px, 0.5vh, 4px) 0; } #p10b tbody td b { font-size: max(12px, calc(var(--ls-h3) * 0.94)); } #p10b tbody td i { font-size: max(12px, calc(var(--ls-small) * 0.9)); margin-top: 0; } #p10b tbody td:nth-child(2) { font-size: max(12px, calc(var(--ls-small) * 0.95)); line-height: 1.16; padding-right: clamp(6px, 1.2vw, 14px); } #p10b tbody td.n { font-size: var(--ls-h3); } #p10b td.was { font-size: max(12px, calc(var(--ls-small) * 0.9)); } #p10b tfoot td { font-size: var(--ls-small); padding-top: clamp(2px, 0.6vh, 5px); } #p10b tfoot td.n { font-size: var(--ls-h3); } #p10b tfoot tr.tot td { padding-top: clamp(2px, 0.7vh, 6px); border-top-width: 2px; } #p10b tfoot tr.tot td b { font-size: var(--ls-h3); } #p10b tfoot tr.tot td.n b { font-size: max(13px, var(--ls-h3)); } #p10b tfoot tr.add td, #p10b tfoot tr.opt td { font-size: max(12px, calc(var(--ls-small) * 0.95)); line-height: 1.1; padding: clamp(1px, 0.4vh, 3px) 0; } #p10b tfoot tr.add td b, #p10b tfoot tr.opt td b { font-size: var(--ls-h3); } #p10b tfoot tr.add td.n, #p10b tfoot tr.opt td.n { font-size: var(--ls-h3); } #p10b .side { padding: clamp(4px, 1.2vh, 11px) clamp(8px, 1.6vw, 16px) clamp(3px, 1vh, 8px); border-top-width: 4px; } #p10b .rk { font-size: var(--ls-small); } #p10b .amt2 { font-size: var(--ls-h2); margin: clamp(2px, 0.8vh, 6px) 0 clamp(3px, 1vh, 8px); } #p10b .amt2 i { font-size: max(12px, calc(var(--ls-small) * 0.92)); margin-top: 2px; } #p10b .ret { font-size: max(12px, calc(var(--ls-small) * 0.95)); line-height: 1.28; margin-bottom: clamp(3px, 1vh, 8px); } #p10b .ret li { padding: clamp(1px, 0.4vh, 3px) 0 clamp(1px, 0.4vh, 3px) 14px; } #p10b .sd { font-size: max(12px, calc(var(--ls-small) * 0.92)); line-height: 1.16; margin-bottom: 0; } } /* ═══ 10c THREE OPTIONS STAY THREE ACROSS: THE COMPARISON IS THE SLIDE ═════════════════════ */ @media (max-width: 820px), (orientation: landscape) and (max-height: 520px) { #p10c { padding: var(--padt) var(--padr) var(--padb) var(--padl); gap: clamp(2px, 1vh, 8px); } #p10c h2 { font-size: var(--ls-h2); line-height: 1.02; } #p10c .sub { font-size: var(--ls-small); line-height: 1.15; margin-top: clamp(1px, 0.5vh, 4px); max-width: none; } #p10c .three3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1.4vw, 16px); } #p10c .three3 > section { padding: clamp(4px, 1.2vh, 11px) clamp(8px, 1.4vw, 14px) clamp(4px, 1.2vh, 10px); border-top-width: 4px; } #p10c .pick { font-size: max(12px, calc(var(--ls-small) * 0.9)); padding: 2px 6px; } #p10c .ohd { font-size: var(--ls-h3); margin: clamp(2px, 0.7vh, 5px) 0; } #p10c .amt { font-size: var(--ls-h2); margin: 0 0 clamp(2px, 0.7vh, 5px); } #p10c .amt i { font-size: max(12px, calc(var(--ls-small) * 0.92)); } #p10c .note { font-size: max(12px, calc(var(--ls-small) * 0.95)); line-height: 1.14; } #p10c .tbc { margin-top: 2px; padding-left: 9px; border-left-width: 3px; font-size: max(12px, calc(var(--ls-small) * 0.95)); line-height: 1.2; } #p10c .three3 > section { padding-bottom: clamp(3px, 1vh, 8px); } #p10c .foot { font-size: var(--ls-small); line-height: 1.05; margin: 0; } } /* ═══ 06 ADDENDUM, C39d: THE C32 REBUILD OUTGREW THE 08-02 BLOCK ════════════════════════════ The block above styles the OLD right column (#p06 ol), which C4/C32 replaced with .says (.what panel + .zoom window). Those had no phone rules at all: the desktop's 588x236 zoom window and 26/30px panel paddings ran 649px off a 750px canvas, live, tonight. The zoom is the same crop at every size: img width, left and top are the desktop's own ratios to the window width (1296/588, -60.5/588, -489.6/588), so the window scales as one object and the crop cannot drift. */ @media (max-width: 820px), (orientation: landscape) and (max-height: 520px) { #p06 { --p6z: clamp(200px, min(36vw, 60vh), 380px); } #p06 .says { gap: clamp(5px, 1.5vh, 12px); align-content: center; min-height: 0; } #p06 .what { padding: clamp(6px, 1.6vh, 13px) clamp(8px, 1.6vw, 16px); } #p06 .what h3 { font-size: var(--ls-h3); margin-bottom: clamp(3px, 0.9vh, 7px); } #p06 .what ul { gap: clamp(3px, 0.9vh, 7px); } #p06 .what li { font-size: max(12px, calc(var(--ls-small) * 0.98)); line-height: 1.26; } #p06 .zoom { gap: clamp(2px, 0.7vh, 5px); } #p06 .zoom .win { width: var(--p6z); height: calc(var(--p6z) * 0.4014); } /* max-width/max-height: none is load-bearing: the block above bounds `.menu img` by max-height:60vh, a DESCENDANT selector that catches this windowed img too and squashed the sheet 3.5x (452x205 measured against a 452x719 natural aspect), so the window showed the sheet's bottom lines under a caption promising the Dose block. */ #p06 .zoom .win img { width: calc(var(--p6z) * 2.2041) !important; height: auto !important; max-width: none !important; max-height: none !important; margin: 0; box-shadow: none; left: calc(var(--p6z) * -0.1029); top: calc(var(--p6z) * -0.8327); } #p06 .zoom figcaption { font-size: max(12px, calc(var(--ls-small) * 0.92)); line-height: 1.22; } } /* ═══ 10b SE-CLASS REBALANCE, C39d: at 568px the two columns fail in OPPOSITE directions (the table's tail on wide phones, the side panel's own copy on narrow ones), so the ratio is per-class: the narrow canvas gives the side panel back some measure. ═════════════════════ */ @media (max-width: 620px) { #p10b .brk { grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr); } } /* C39d: at phone widths the right-aligned number columns and the What column butt against their neighbours (read "WorthYou pay" as one run on the screenshot). Breathing room, cheap in width. */ @media (max-width: 820px), (orientation: landscape) and (max-height: 520px) { #p10b th.n, #p10b td.n { padding-left: clamp(6px, 1.2vw, 14px); } #p10b tbody td:first-child, #p10b tfoot td:first-child { padding-right: clamp(6px, 1.2vw, 14px); } }