/* ============================================================================ BUILDING INTELLIGENT TRAVEL EXPERIENCES — this document's own mode styles. `doc.css` is byte-identical across every reader in this factory and it stays that way: it holds the design system and the eight reading modes the first edition established. A per-build result is never bought by editing it. This file is short on purpose. Ten of this document's eleven acts are set in modes `doc.css` already carries, so there is nothing here for them. What is here is the one mode this document introduced and one ramp a one-string contract forced. ========================================================================= */ /* ------------------------------- crescendo ------------------------------ THE ONE NEW MODE. Print's spread 05 is the only page in this book with no precedent in book one, and its own note says what it is: "This page carries three strings and nothing else, so it is composed as a statement rather than filled with prose: three voices at three scales down one axis." ONE COLUMN, NOT A SPLIT, and that is the mode. Every other act in this document divides at the same spine because it has a head and a body. This act has neither: it has three claims, and the reading is the step DOWN from one to the next. A split would set voice two BESIDE voice one instead of after it, and the step would be gone. Alignment law 1 is intact -- the act still starts on the page's own left edge through `.act__inner`, it simply has one cell, the way the cover does. The gap is `--shelf`, the system's vertical air between blocks, rather than a number picked for this act: three voices with a stack gap between them read as three paragraphs. ------------------------------- THE RAMP -------------------------------- AND IT HAS TO RISE, WHICH THE FIRST BUILD'S DID NOT. That build set voice one from the shared `--t-title` and voices two and three from the shared `--t-h2`, and those two tokens are independent clamps with different slopes and different caps. They cross. Measured on the shipped page: 320 390 480 768 1024 1512 1600 1920 voice one 32.00 32.00 32.00 36.19 41.06 50.33 52.00 56.00 voice two 28.00 28.56 30.72 37.63 43.78 52.00 52.00 52.00 voice three 28.00 28.56 30.72 37.63 43.78 52.00 52.00 52.00 Three defects in one act. Voices two and three are the SAME SIZE at every width, so there is no third step anywhere and the act is two voices wearing three names. Below about 700px the title is LARGER than both, so what the mode calls a crescendo decrescendos on every phone. At 1600 all three are 52.00 and the act is flat. The only band where it rises at all is roughly 700 to 1512, and even there the top two tie. A mode whose whole subject is the step between three scales cannot take its scales from tokens chosen for other acts, and that is the argument for the act owning its own. ONE BASE AND TWO FIXED MULTIPLES, NOT THREE CLAMPS. Three clamps is what broke: each has its own minimum, slope and cap, so the order between them is an accident of where the viewport happens to sit. `calc(base * r)` cannot cross, at any width, in any browser, for any value of the base, because the base is a length greater than zero and 1 < 1.2 < 1.5. The property the `crescendo-ramp` row asserts is therefore true by construction rather than by tuning, and the row exists to catch the day somebody re-points one voice at a token again. THE BASE IS THIS DOCUMENT'S OWN `--t-section` RUNG, not a new scale. That token is `clamp(1.5rem, 1.1rem + 1.7vw, 2.5rem)`, print's 32pt, and the base here runs between the same two ends on a slightly shallower slope: `1.15rem + 1.43vw` is the line through 24px at 390 and 40px at 1512, against `--t-section`'s own 24.23 and 43.3-capped-to-40. So voice one lands where the document already sets its second-order headings, which is the point -- it is the QUIET voice here, 24px at 390 where every other section title takes 32 and 40px at 1512 where they take 50. The floor is 1.375rem rather than 1.5rem only so that the ramp is still live below 350px instead of pinning. AND THE CAP IS 2.5rem BECAUSE THE MEASURE STOPS THERE. This act's cell is `--max`, 64rem, so past about 1500px the column stops growing and only the type would. Left at 2.75rem the plate measured 66px and SIX lines at 1920 against five at 1512, and the act grew from 1025px to 1208px while the column it sits in did not move at all -- type outrunning its own measure, which is what `--t-title`'s own cap comment one file away is about. At 2.5rem the act is 40 / 48 / 60 and 1025px tall at every width from 1512 up. THE TWO RATIOS, 1.2 AND 1.5, are not the print ramp's 32/38/52pt rungs, which would be 1.1875 and 1.625. 1.625 was built and measured, and the cost is at the desk rather than in the hand: voice three carries a 155-character sentence, so at 1512 it goes to 65px, SIX lines and 413px against five and 318px, which is more height than the two voices above it put together, and the plate starts reading as a paragraph in a box instead of as one landed claim. At 390 the two are within one line of each other (372px against 343px), so the phone does not decide this. 1.5 does the same work with the act 95px shorter at every desktop width. The steps still GROW, 1.20 from voice one to two and 1.25 from two to three, so the act accelerates, which is what the word means. */ .crescendo{ display:flex;flex-direction:column; gap:var(--shelf); --cr-voice-1:clamp(1.375rem, 1.15rem + 1.43vw, 2.5rem); --cr-voice-2:calc(var(--cr-voice-1) * 1.2); --cr-voice-3:calc(var(--cr-voice-1) * 1.5); } /* VOICE ONE. The section heading, and the only place in this document where a `.title` is set from anything but `--t-title`. It is deliberately the quietest thing in its own act: 24px at 390 against the 32px every other section title takes, 40px at 1512 against 50px. The act is three claims and the reader is meant to step DOWN into them, so the heading announces and the plate lands. ONLY THE SIZE IS RE-POINTED. `.title`'s leading and tracking are left where `doc.css` has them, because this heading measures one line at every width from 390 up and two at 320, and leading a reader never sees twice is not worth a second declaration. */ .crescendo .title{font-size:var(--cr-voice-1)} /* VOICE TWO. The industry observation, one step above the section title and one below the plate, which is the relationship print sets on this spread. THE COLOUR IS `--on-ground-mute`, NOT `--ink-54`. On this act's mist ground the document's mute role measures 4.92:1 against a 4.5:1 floor; the print token it would otherwise inherit is 3.10:1 on the same ground. The token table in `doc.css` is the argument. The run is large text and would clear the 3:1 floor at either value, which is exactly why it is set from the role rather than from what it can get away with. NO `max-width`, AND THAT IS ALIGNMENT LAW 2 RATHER THAN A PREFERENCE: the grid and the measure are one decision. This act has one cell and the cell is `--max`, so a sub-measure inside it would end this line at a width nothing else on the page ends at. It was 44rem for one build and the contact sheet is why it is not: 52px type in a 704px box wraps at about thirteen characters, and the sentence came out as six lines whose lengths ran 34 / 17 / 16 / 31 / 29 / 13. That rag reads as a mistake at display size. `text-wrap:balance` for the same reason print's own note on this spread asks for it on the callout. It evens the line lengths instead of leaving the greedy breaker's last line as an orphan, and a browser that does not support it falls back to exactly what shipped before, which is why it is safe to use on the one run whose rag is the whole composition. */ .crescendo__obs{ font-family:var(--sans-display); font-size:var(--cr-voice-2);line-height:1.14;letter-spacing:-.015em;font-weight:500; color:var(--on-ground-mute); text-wrap:balance; } /* VOICE THREE. The plate, and the loudest thing in the document outside the cover. It keeps `.plate`'s ink ground, its padding and its chamfer wipe -- sharing the vocabulary is correct, and a new box here would have meant this was really `turn` with a different name. What it does not keep is `.h2`'s size, because `.h2` is the size voice two would have been. Leading tightens to 1.06 and the tracking opens back out to -.02em, both for the same reason: at 60px the shared 1.14 leaves the nine lines of this sentence looking like a paragraph, and display sizes need less leading, not more. This is the only run on the page set above 52px outside the cover. AND THE SAME `text-wrap` VOICE TWO HAS, FOR THE SAME REASON IT HAS IT. Voice two was given `balance` after the contact sheet showed its rag reading as a mistake at display size; voice three, the loudest run in the document, was left on the greedy breaker for two builds. What the greedy breaker does to it at 1512, line widths in a 912px column: 853.8 / 823.0 / 875.9 / 879.7 / 196.8 Four near-full lines and "at scale." alone on the fifth, which is the orphan `balance` exists to take away. With it: 626.6 / 707.0 / 641.1 / 901.7 / 763.6, five lines still, the same 318px of height, no orphan. At 640 the same trade is clearer still: 431.5 / 523.0 / 405.3 / 518.5 / 485.3 / 135.5 becomes 431.5 / 486.9 / 441.5 / 398.0 / 431.9 / 309.5. A browser that does not support `balance` falls back to exactly what shipped before. WHAT IT COSTS AT THE DESK, because it does cost something. The greedy layout put the em dash in the middle of line 2 ("whether to adopt AI—but building"); balanced, line 2 ends on "AI" and LINE 3 OPENS ON THE DASH. At 60px that is a long horizontal stroke starting a line, which reads for a beat as a rule rather than as punctuation -- the same defect the 390 rag is charged with. It is the trade this declaration makes: one orphaned "at scale." at 60px against one line that opens on a dash. The orphan was judged the worse of the two on the contact sheet, and the dash is Vespa's own punctuation inside a verbatim string, so neither end of this is repunctuable. IT DOES NOT REACH 390, AND THAT IS WRITTEN DOWN RATHER THAN LEFT TO BE FOUND. Chromium abandons balancing past a line count and lays the block out greedily instead. Measured on this run rather than read off a blog: it balances at SIX lines (640px) and does not at EIGHT (480px) or NINE (390px). So at 390 this declaration is inert and the rag the contact sheet shows is unchanged: 276.5 / 228.7 / 287.6 / 260.7 / 117.0 / 179.1 / 265.7 / 271.0 / 269.3 "retrieval" alone on line 5 at 117px, "architecture" alone on line 6 at 179px, in a 302px column, and line 4 opening on the em dash -- which is Vespa's punctuation inside a verbatim string, so repunctuating is not one of the options. `text-wrap:pretty` was built and measured as the alternative for exactly that case and it is a NO-OP on this run at 390, 480, 640, 768, 1024 and 1512: identical breaks to the greedy layout at every one of them, because what it avoids is a last-line orphan and this sentence's last line is already three words. It is not declared here, because a declaration that moves nothing is a claim that something was done. Closing the 390 rag needs a different lever -- a narrower measure, hyphenation, or the sentence split at the print master -- and shrinking the voice is not one of them: the step from 48px to 60px IS the act. */ .crescendo .plate .h2{ font-size:var(--cr-voice-3);line-height:1.06;letter-spacing:-.02em; text-wrap:balance; } /* --------------------- the figure's soft ink, on green ------------------- `text-contrast` measured "One query execution" at 4.04:1 against a 4.5:1 floor: `--ink-72` at 16.5px sitting on the green store band, rgb(60,94,68) on rgb(97,215,144). That is a real defect a reader gets, and it is this drawing's alone -- the retrieval reader's figure carries `--ink-72` only on paper, which is why `doc.css` has never had to move it. THE TOKEN IS RE-POINTED, NOT OVERRIDDEN, and that is the pattern `doc.css` already set one line away for `--ink-54`: the value comes from the print spread as an inline `style="fill:var(--ink-72)"`, an inline fill cannot be beaten by a stylesheet rule without `!important`, and custom properties inherit. So the token is re-pointed for this subtree, the inline declaration resolves to the new value on its own, it survives the figure being regenerated from the print part (an edited SVG would not), and `--ink-72` keeps telling the truth about its own alpha everywhere else on the page. THE NUMBER. Ink at alpha a, composited on the two grounds this role lands on inside this figure, same arithmetic the harness uses: --green rgb(97,215,144) --paper white .72 4.04:1 <- measured 5.52:1 .78 4.63:1 6.72:1 .79 4.72:1 6.90:1 .80 4.82:1 <- taken 7.08:1 1.00 7.50:1 13.53:1 GREEN IS THE WORSE GROUND, so it sets the number: .80 is the lowest hundredth clearing 4.8:1 there, which is the same floor-plus-margin rule `--ink-mute` and `--paper-54` were chosen by. Nothing is darkened past what that buys. WHAT IT COSTS. Seven runs take the new value: this label, and the six note lines under the two columns, which go from 5.52:1 to 7.08:1 on paper. They are darker than the same role in the document's body prose, so the figure's captions now read a shade heavier than a paragraph does. Inside the figure the three ink levels actually separate again -- 13.53 / 7.08 / 5.35 against 13.53 / 5.52 / 5.35 before, where soft and mute were seventeen hundredths apart and effectively one grey. */ .pin__fig svg{--ink-72:rgba(46,47,39,.80)} /* ------------------------- the numbered problems ------------------------ THE ORDINAL IS INSIDE THE HEADING STRING, AND IT HAS TO STAY THERE. The first edition's contract carries a pillar's number and its title as two fields, so that build sets the ordinal as its own `.pillar__num` element. This extraction carries one string, "1. Unified Retrieval", and splitting it across two elements would drop the ". " between them: `check_fidelity` strips tags to NOTHING rather than to a space, so the string would stop matching itself. Five headings on the Manager's Guide were lost to exactly that before it was written down. So `doc_travel.lead_in()` wraps the ordinal in place and this gives that `` the ramp `.pillar__num` has -- same family, same weight, same clamp, same `--green-ink` (5.05:1 on paper, where the mint is 1.81:1 and unreadable). The page looks like the first edition's and the contract string is still one string. Scoped to `> strong` so it cannot reach a `` inside a title's prose; `lead_in` only ever emits one and it is always the first child. */ .pillar__title > strong{ display:block; font-family:var(--sans-display);font-weight:500; font-size:clamp(3.25rem,7vw,7rem);line-height:.8; letter-spacing:-.04em;color:var(--green-ink); margin-bottom:calc(var(--u)*1.5); }