/* Warnes Studio landing-page styles. Brand variables come from 01_Brand-System/tokens.css. */ /* --- 1. RESET (minimal; no normalize dependency) --------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-weight: var(--weight-body); /* Screen body token, not the print ladder's 16: it holds the 16px floor on Single and opens to 17-19 on Page and Wide (tokens.css). */ font-size: var(--text-screen-body); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: normal; /* Standard ligatures on for body; discretionary off. */ font-variant-ligatures: common-ligatures no-discretionary-ligatures; /* Belt and braces against horizontal overflow. `clip` not `hidden`, so a future sticky header still works. */ overflow-x: clip; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { color: var(--link-hover); } /* Single runs a 40-50ch measure and opens its leading by ~.05; Narrow and up run 60-68ch on the standard body leading. Identity sheet, section 04. */ @media (max-width: 639.98px) { body { line-height: var(--leading-body-single); } } /* --- 2. THE GRID ---------------------------------------------------------- One implementation grid for the whole site. The underlying 12 tracks are composed as 4 columns on Small, 6 on Narrow, and 12 on Page/Wide, matching design-system.md §Grid and spacing. The outer tracks are the page margin. They are named so an element can bleed to the viewport edge by spanning into them, which is how bleed is done here: no negative margins, no 100vw, so no scrollbar-width overflow bug. Outer track = margin minus gutter, because column-gap adds the gutter back. */ .band { display: grid; column-gap: var(--gutter-screen); grid-template-columns: [bleed-start] calc(var(--margin-screen) - var(--gutter-screen)) repeat(12, [c] minmax(0, var(--col-max))) minmax(calc(var(--margin-screen) - var(--gutter-screen)), 1fr) [bleed-end]; } /* Live-area spans used across sections. */ .u-live { grid-column: c 1 / -2; } .u-bleed { grid-column: bleed-start / bleed-end; } /* --- 3. TYPE --------------------------------------------------------------- Type roles and screen floors come from the design system and tokens. */ /* The hero headline size, held in one place because the wordmark is derived from it. See section 6. */ :root { --h-hero: clamp(2.125rem, 4.51vw, 4.0625rem); } /* 34 -> 65 */ /* 4.51vw returns 65 at Wide and 46 at Page. 65 is the display ladder's second rung, which puts the headline a clear two steps above the 30 section head rather than the single step a forced 48 was giving. The mark derives from this value. The vw figure was first set so the headline's two sentences could each hold one line of type. They do from 480 up; below that each turns in two. THE FLOOR IS 34. Against the 22 section head the headline leads by half again, which is the dominance the hierarchy is built on, so the floor holds wherever the declared lines fit it. Below 360 they do not, and the guard on .hero__title yields the size rather than the shape. */ /* Headline. Condensed, set big and tight: the compression is the signature. */ .h-hero { font-family: var(--font-display); font-weight: var(--weight-display); /* Cap height, never font-size: see the block comment above this rule. */ font-size: var(--h-hero); /* 48 -> 65, caps 34 -> 47 */ line-height: 0.94; /* identity sheet .d-hero */ text-transform: uppercase; letter-spacing: 0.005em; /* identity sheet .d-hero */ text-wrap: balance; } /* THE RAG IS DECLARED, NOT BALANCED. Balance minimises a block's longest line. With a block per sentence it solved each one blind to the other, and on 'A visual narrative system' it returned 'A visual' over 'narrative system', 117 against 254. The headline opened on a line 46 percent of the one beneath it while lines three and four sat within 9 percent of each other: one stray short line above what read as a squared-off block. The balancer was working correctly on the wrong unit, the sentence rather than the headline. The copy offers one other turn per sentence and balance will never choose it, so the turns are set here instead, three lines on phones: A VISUAL NARRATIVE / SYSTEM BUILT AROUND / YOUR CAMPAIGN 269, 301, 216 at the 34 floor, so no line falls below 72 percent of the longest and the block squares up. The price is the clause break: line two carries the end of the first sentence into the start of the second, which is the one thing the old two-block markup was built to prevent. Approved on the rag, which is why the blocks are gone and a flat heading carries the rules. THIS ALSO CLOSES THE 433-479 GAP, where the first sentence fitted one line and the second did not, so the headline set one full line over two half ones and the iPhone 16 Pro Max landed in it. Balance stays on .h-hero as that class's default and is inert here: a rendered
switches it off, and every line is now declared. */ /* Phones: turn after 'narrative' and after 'around'. */ .hero__turn--narrow { display: inline; } .hero__turn--wide { display: none; } /* 480 and up: each sentence holds one line, so the only turn is the clause break and the phone rules switch off. This holds to the top of the range: Wide keeps the same two lines and pays for them in size, not in shape, which section 6c derives. */ @media (min-width: 480px) { .hero__turn--narrow { display: none; } .hero__turn--wide { display: inline; } } /* THE NARROWEST CANVASES YIELD SIZE, NOT SHAPE. 'System built around' is the longest declared line and sets 8.85 times the headline size in this face: 301 at the 34 floor, against the 296 the live area leaves at 344 and 272 at 320. Left alone it would wrap and strand 'around' on a fourth line, losing the rag the turns were set for. So below 360 the headline takes the size the line fits. 9.1 rather than 8.85 holds three percent against rounding and fallback metrics. The expression is inert from 360 up, where the floor is already the smaller of the two, so it needs no query of its own. It is set on .hero__title, not on --h-hero: the mark holds its own 82 floor across this range and the lede's cap is not binding below Page, so neither should follow the headline down. THE SAME MOVE RUNS AT THE OTHER END. From 1440 the headline is measured against the six-column copy rather than the live area, on the two-line rag's own ratio. Section 6c re-points this rule; the principle is this one. */ .hero__title { font-size: min(var(--h-hero), calc((100vw - 2 * var(--margin-screen)) / 9.1)); } /* ONE LINE FROM 1245, WHERE THE RULE IS WIDE ENOUGH TO PAY FOR IT. Below Wide the copy takes the band's width, twelve columns, and the two-line rag cannot fill it: it covers 57 to 64 percent of its own rule. Wide enough and the whole sentence holds a single line instead, which does fill it, but only ever at a price in size. The sentence sets 23.49 times the headline size against the rag's longest 12.21, so a held line costs the headline a quarter, and the headline leads the section head by half again, which is the dominance the hierarchy is built on and is not a figure this canvas may spend. The head is clamp(22, 2.6vw, 30), so the two curves cross once: one line = (100vw - 2 * margin) / 24.2 = 0.0362 vw 1.5 x head = 45 from 1154 up, 0.039 vw below it Below 1154 the head grows faster than the line can and they never meet; from 1154 the head holds at 30 and the line passes 45 at 1245. So 1245 is where a single line and the hierarchy are both affordable, and it runs to the top of this canvas: 45 at 1245, 46 at 1280, 49 at 1366, 52 at 1439, each filling 97 percent of the rule under it. Below 1245 the clause break keeps the full --h-hero, which is the larger headline, and the rag stops short of the rule. 24.2 rather than 23.49 holds three percent against rounding and fallback metrics, the margin the 9.1 above carries and the 12.6 at Wide. No nowrap: if the face loads wider than measured the line turns, which is a rag, where a held line would be cut at the margin instead. Balance stays inert, there being one line to balance. Wide is not this canvas: there the artwork is beside the copy, the column is six of twelve, and section 6c sets both. */ @media (min-width: 1245px) and (max-width: 1439.98px) { .hero__turn { display: none; } .hero__title { font-size: min(var(--h-hero), calc((100vw - 2 * var(--margin-screen)) / 24.2)); } } /* Lead paragraph. One full step above the body, so the two read as different levels rather than the same size set twice. */ .lede { font-size: var(--text-lg); line-height: var(--leading-snug); /* Balance, not pretty: the lede runs one to three lines, which is the range balance is for. Pretty fills greedily and dropped 'the work.' onto a line of its own at 320, 768 and 1024; balance evens them, 322/275 wherever it takes two. Falls back to normal wrapping where unsupported. */ text-wrap: balance; } @media (min-width: 640px) { .lede { line-height: 1.4; } } /* ONE TEXT MEASURE DOWN THE PAGE. The lede and the profile are the page's two blocks of running copy, stacked in one column and hanging off the same edge, so a reader sees them as one measure and any difference between them reads as a mistake. They were not close. The lede was bounded by the headline's ink and the profile by the reading measure, two rules that do not track each other, and the gap inverted across the canvases: at Narrow the lede ran 138 to 239 narrower than the profile, and from Page up it ran 64 to 169 wider. Both now take one cap, and the cap is set by the lede's first line. The lede has one break worth having, after 'read', which keeps 'and still read' with the clause it belongs to and leaves 'as the same campaign' whole. That line measures 38.9 times the lede size and the next word, 'as', would take it to 40.15, so the cap sits at 39.5, roughly midway between them and a dozen pixels clear either side. Held in --text-lg, which is fixed, so the cap is one width for both blocks at every canvas rather than something that drifts with the body size. THE MULTIPLIER IS TIED TO THE LEDE'S WORDING. It was 40.3 while the line read 'HCP and patient messaging'; 'DTC' is 26 pixels shorter, which let 'as' onto the first line and split 'as the same campaign'. Re-measure this if the lede is ever rewritten. THIS IS OVER THE READING CEILING AND THAT IS THE DECISION. design-system.md caps running copy at 68ch. The lede reaches 69ch here and the profile 72ch, because the profile is set smaller and the same width buys it more characters. Approved: holding the lede's line was worth more than the ceiling. If the ceiling is ever reinstated the cap returns to 68ch of the body size, calc(68 * 0.574 * var(--text-screen-body)). The cap only binds where the column is wider than it; see .profile__body. */ :root { --measure-page: calc(var(--text-lg) * 39.5); } /* Running prose at reading measure. */ .prose { max-width: var(--measure-page); } .prose > * + * { margin-top: var(--space-6); } .prose > p { text-wrap: pretty; } /* no single-word last lines */ /* Drop cap — copper, Adelle Condensed Light, ~3 lines, one per page. Lava is wrong here: at this size it dominates. */ .prose--opener > p:first-child::first-letter { float: left; font-family: var(--font-display-serif); font-weight: var(--weight-serif-light); /* identity sheet .dropcap: 300 */ color: var(--accent-2); font-size: 3.7em; line-height: 0.8; padding: 4px 7px 0 0; } /* Caption / metadata. 13px floor; muting and shrinking never stack, so anything under 14px sits at --ink-75 or darker, never --ink-45. */ .caption { font-family: var(--font-display-wide); font-weight: var(--weight-body); font-size: var(--text-sm); /* 14, on the ladder; above the 13px screen floor */ line-height: 1.45; letter-spacing: 0.02em; color: var(--text-muted); } /* --- 4. SECTION HEAD ------------------------------------------------------- design-system.md §Composition. A scroll has no hard edges the way a deck does, so sections are separated by a hairline spanning the live area, the eyebrow hanging at column 1, and a muted folio opposite. Explicitly NOT alternate-colour banding, which reads blocky. */ .section-head { grid-column: c 1 / bleed-end; margin-right: var(--margin-screen); display: flex; align-items: baseline; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--border); } /* Identity sheet .sectionhead h2. A section head is condensed display type, not an eyebrow; the eyebrow is the smaller labelling device that carries the node-cross, and this page has no use for it. */ .section-title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(1.375rem, 2.6vw, 1.875rem); line-height: 1; text-transform: uppercase; letter-spacing: var(--tracking-display); display: flex; align-items: center; gap: var(--space-3); } /* Node-cross. Lava on light grounds, owned by the semantic mark token. Sized in em so it tracks the head's clamp, landing a touch above its cap height: 24px against a 21.5px cap at the 30 step. */ .node-cross { width: 0.8em; height: 0.8em; flex: none; color: var(--mark-color); } /* --- 5. ACTIONS ------------------------------------------------------------ */ .actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-6); /* ONE INTERVAL CARRIES THE STACK. Where the artwork sits above the copy the whole hero is a single column of blocks, and it now runs on one figure: 32 from the artwork to the headline, 32 from the last control to the rule, and 32 here. At --space-12 this was the widest gap in the column by half again, which on a phone put the buttons adrift of the copy that asks for them. The 16 between headline and lede is untouched: those two are one block, not two. */ margin-top: var(--space-8); } @media (min-width: 640px) { .actions { flex-direction: row; flex-wrap: wrap; align-items: flex-start; } } /* Page and up the copy has a field around it rather than a column, and the controls take the wider separation back. */ @media (min-width: 1024px) { .actions { margin-top: var(--space-12); } } .action { display: flex; flex-direction: column; gap: var(--space-2); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: var(--tap-min); padding: var(--space-3) var(--space-6); font-family: var(--font-display-wide); font-weight: var(--weight-body-bold); font-size: var(--text-sm); line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; border: 1px solid transparent; border-radius: var(--radius-sm); /* near-sharp: editorial, not app */ transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } /* Single: two clear full-width controls. */ @media (max-width: 639.98px) { .btn { width: 100%; } } .btn__icon { width: 18px; height: 18px; flex: none; } .btn--primary { background: var(--accent); color: var(--text-invert); } .btn--primary:hover { background: var(--color-ink); color: var(--text-invert); } .btn[aria-disabled="true"] { cursor: default; } .btn--primary[aria-disabled="true"]:hover { background: var(--accent); } .btn--secondary { background: transparent; color: var(--text); border-color: var(--text); } .btn--secondary:hover { background: var(--text); color: var(--text-invert); } /* --- 5b. VERTICAL RHYTHM --------------------------------------------------- */ /* HEAD MARGIN. The top gap ran the full side margin, which set the page too low: an equal optical margin on all four sides reads as heavy at the top, because nothing sits above it to balance against. Dividing by the display ratio takes 38 percent out and lands on the baseline at every canvas: 16 / 25 / 40 / 56 against side margins of 24 / 40 / 64 / 90. This is a page-level composition value, not a system rule. The identity sheet runs its own head margin at a different ratio, and should. */ /* The trailing value is the space above the next section's rule, not padding the hero needs for itself. It runs at --space-8 rather than --space-16: the rule already separates the sections, so 64 above it was doing the job twice and pushing each hairline off the block it belongs to. Halved here and in .profile, so both rules sit the same distance under the copy above them. */ .hero { padding: calc(var(--margin-screen) / 1.618) 0 var(--space-8); row-gap: 0; } /* Up to Wide the mark is the page's header and sits in a band of its own above the artwork: the gap under it matches the hero's head margin above it, which is the side margin over the display ratio (section 5b). At Wide the mark moves into the copy cluster beside the artwork; section 6c. */ .hero__mark { margin-bottom: calc(var(--margin-screen) / 1.618); } /* THE COPY BLOCK SITS IN AN EVEN GAP. This ran at --space-12 against the --space-8 under the block, so the artwork stood 48 clear of the headline and the buttons only 32 clear of the rule: one block, two margins, and on a phone the wider one read as a hole. Both are --space-8 now, so the copy has the same air above it as below and the pair reads as one interval. Page and up never used this: section 7 zeroes it where the media stops stacking. */ .hero__media { margin-bottom: var(--space-8); } .profile { padding: 0 0 var(--space-8); row-gap: var(--space-4); } .colophon { padding: 0 0 var(--space-12); row-gap: var(--space-4); } /* --- 6. HERO --------------------------------------------------------------- Order and column spans adapt the composition at each canvas. */ .hero__copy { grid-column: c 1 / -2; } /* THE ARTWORK SITS IN THE HAIRLINES' BOX, NOT THE VIEWPORT'S. The media used to run off both edges on Single and off the trailing edge everywhere else, while the hairlines below it stopped at the page margin: the page carried two different edges down its length. These are the rules' own two declarations, the same span and the same trailing margin, so the artwork opens and closes on the lines the hairlines draw. Page and Wide set their own leading edge below, where the media gives the copy its columns back. The trailing edge is never overridden: every canvas ends at bleed-end, so one margin holds them all. */ .hero__media { grid-column: c 1 / bleed-end; margin-right: var(--margin-screen); } /* Single: mark, then media, then the copy. Media leads so it is in the first viewport with the descriptor. */ .hero__mark { grid-column: c 1 / span 6; order: 1; } .hero__media { order: 2; } .hero__copy { order: 3; } /* MARK SIZE IS DERIVED, NOT DECLARED. The mark was sized per canvas and drifted into competing with the headline: at Wide its cap ran 42 against the headline's 47, a lead of only 12 percent, which reads as a tie. Sizing it off the headline holds one dominance gap at every width and removes the old anomaly where Narrow's mark (176) outgrew Page's (174). Derivation. Headline cap = size x 0.718. The stacked lockup is 134.18:61.78, so mark cap = width x 0.47 / 2.1719 = width x 0.2164. Setting the gap to the display ratio, headline cap / mark cap = 1.618, gives: width = size x 0.718 / (1.618 x 0.2164) = size x 2.05 The golden section is the system's own display ratio (--display-ratio), so the mark now clears by a full display step rather than an arbitrary trim. THE MARK DOES NOT FOLLOW THE HEADLINE DOWN TO ITS 34 FLOOR: it holds at the 82 it was already sizing to, and picks the derivation back up at 887 where the headline passes 40 again. Dropping the headline a step is a rag fix; the mark had no part in it. Height comes off the same width through the lockup's own 134.18:61.78, so a rule that wants to space against the mark can say so in the mark's terms rather than re-deriving it. 61 at Wide, 44 at Page. */ :root { --mark-w: max(82px, calc(var(--h-hero) * 2.05)); --mark-h: calc(var(--mark-w) * 0.4604); } .hero__mark img, .hero__lockup--inline img { width: var(--mark-w); height: auto; } /* The mark inside the cluster is hidden until Page, where it replaces the stand-alone .hero__mark row. Declared before the canvases so the media queries win. */ .hero__lockup { display: flex; flex-direction: column; gap: var(--space-6); } .hero__lockup--inline { display: none; } /* Page and up: clearance under the mark is about the height of its own two lines (80 at Page, 90 at Wide). Below Page this element is hidden, so the margin does not apply and the hero image's own margin sets the gap. */ @media (min-width: 1024px) { .hero__lockup--inline { margin-bottom: var(--space-24); } } .hero__title { margin-top: 0; } /* The lede takes the page measure, not the headline's ink. It was bounded by the headline's longest line, 12.4 times the headline size, which held it to the artwork above it but set it against the profile below. Matching the profile was chosen over matching the headline: the two copy blocks are read one after the other, the headline is read as display. PRETTY, NOT BALANCE. Balance evens the lines and returns two half-width ones, which leaves a short block. Pretty fills the first line to the bound and still refuses a one-word last line, which is what balance was set for. .lede sets balance, so this rule has to win it back. */ .hero__lede { margin-top: var(--space-4); max-width: var(--measure-page); text-wrap: pretty; } @media (min-width: 640px) { /* Narrow (tablet): mark, media and copy all hang at column 1, and all three stop at the same trailing edge. The copy used to stop two columns short of it, offered as composition rather than a stack, and on a canvas where the band above and the hairlines below both run the live area it read as the one element not answering to the page margin. The media needs no span of its own here: the base rule hangs it at column 1 and stops it at the margin, which is now what the copy does too. */ .hero__mark { grid-column: c 1 / span 5; } .hero__copy { grid-column: c 1 / span var(--copy-span); } } /* THE COPY COLUMN IS ONE NUMBER FROM PAGE UP. Four things take it: the hero copy, the profile, and from Wide the two hairlines and the artwork's leading edge. They were literal spans repeated canvas by canvas, which is how the profile quietly stopped tracking the hero the first time. One token, three steps, and the only way to move the column is to move all of it. Two steps. Page takes all twelve. Eight was the fewest whole columns that carried the two-line headline, and it held the type, but the band above the copy and the hairlines under it both run the live area, so a copy column four short of them was the only thing on the canvas not answering to the page margin: the rules ran 306 past the copy at 1024 and 408 at 1366, with nothing beneath them. Wide takes six, which is what the artwork needs beside it to run full height without cutting the swimmer, and which carries the two-line rag at the size it can hold. Section 6c derives that one. Below Page nothing hangs off this and the spans stay literal. */ @media (min-width: 640px) { :root { --copy-span: 12; } } @media (min-width: 1440px) { :root { --copy-span: 6; } } @media (min-width: 1024px) { /* Page: the media span here is what the Wide split inherits. Section 6b bands them; the mark keeps its own row above both and only moves into the cluster at Wide. */ .hero__copy { grid-column: c 1 / span var(--copy-span); order: 1; } .hero__media { grid-column: c 9 / bleed-end; order: 2; } } /* The Wide split and its column spans are in section 6c. They sit after the band in section 6b because they undo it, and equal specificity means source order is what decides. */ /* --- 6b. PAGE: THE ARTWORK BANDS, THE COPY KEEPS ITS OWN GROUND ------------ Two constraints meet here and the resolution is the layout. The artwork has to carry the page. Held in section 6's hairline box it ran 677 x 476 in a 1920 viewport, about an eighth of the screen, on a page whose whole claim is that it makes original work. So it bleeds: off both sides, full width, under a mark that keeps its own row above it. THE MARK LEADS THE PAGE AT EVERY CANVAS. The band ran to the top edge for a while, with the mark moved down into the copy beneath it, which put the logo below the artwork on this canvas and nowhere else. One page cannot open two ways: the mark comes first here as it does on Single and Narrow, and the head margin above it is the hero's own (section 5b). The copy has to be read. Set over the artwork it was landing on lane ropes and splash, and type on that is not legible however good the contrast arithmetic looks. The copy is not a caption on the picture, it carries the proposition, so it gets a solid ground of its own rather than whatever the crop happens to put behind it. See design-system.md, Composition. Banding them satisfies both at this canvas, where a side-by-side split would not: the headline needs eight of the twelve columns at the least to hold its declared two-line rag, and the four left over run the artwork at 285 x 395 in a 1024 viewport, a window too narrow to hold the swimmer whole. So the artwork takes a full-bleed band and the copy sits under it on cream. THE SPLIT RETURNS AT WIDE, where the hero takes the whole screen and the copy gives up two columns to pay for it. Section 6c. */ @media (min-width: 1024px) { .hero { min-height: min(96vh, 1040px); /* mark, band, copy */ grid-template-rows: auto auto 1fr; } .hero__mark { grid-row: 1; order: 0; } /* THE BAND KEEPS THE PAGE MARGINS. It ran off both edges for a while, on the argument that the artwork has to carry the page, but that argument was made against 1920, which is now Wide and has a picture the height of the window. At this canvas the same span in the margins runs 896 x 338 at 1024 and 1259 x 396 at 1439, which carries perfectly well, and edge to edge it was the one element on the page not answering to the margin: every hairline, the mark and both blocks of copy stop at it. Section 6's base rule already states the box; this only has to not override it. Section 7 forces margin-bottom: 0 here and wins on source order, so the gap under the band is paid by .hero__copy's padding, not from here. */ .hero__media { grid-column: c 1 / bleed-end; grid-row: 2; order: 1; margin: 0 var(--margin-screen) 0 0; } /* Scoped through .hero__media on purpose. Section 7 sets .hero__frame's ink ground further down the file at the same specificity, so a bare .hero__frame here loses on source order and the cream never lands. */ .hero__media > .hero__frame { aspect-ratio: auto; /* Height tracks width as well as viewport height. A band pinned to vh alone goes slot-thin on an ultrawide display, and the crop window then keeps too little of the artwork to hold the figure at all. 46vh rather than 62 because the copy below it has to clear the fold: the band is the half of the budget that can afford to give, and the mark's head margin and its two-line clearance are both fixed by the ratios. */ height: clamp(300px, max(44vh, 27vw), 960px); /* Cream, not the ink theme: the artwork is what fills this, and while it loads an ink block is a hole in the page rather than a held space. */ background: var(--color-cream); /* PEOPLE IN THE ARTWORK ARE NEVER CROPPED. THAT SETS THIS NUMBER. The rule is the design system's and applies to any hero artwork with a person in it; what follows is only this artwork's arithmetic under it. Re-run it whenever the hero changes. The frame is always wider than the artwork's 1.148, so cover binds on width and the full width always shows: x is inert, y alone decides what survives. Two measured landmarks set it. figure, hand to trailing shoulder y 0.2009 .. 0.4273 lane line under the swimmer y 0.4690 .. 0.4926 Holding the figure whole AND keeping the lane line in frame needs a window of 0.2917, from the top of the reaching hand to the foot of the rope. That is what 27vw buys: at 26 the band kept 0.2984 of the height at 1920 and the two landmarks would not both fit inside it, so the rope fell out of the bottom. 27vw keeps 0.3098 and leaves y a window of roughly 27 to 28 percent. Below Wide the band is taller against its width, the window opens, and the constraint goes slack. */ --hero-focus: 50% 27.6%; } .hero__copy { grid-column: c 1 / span var(--copy-span); grid-row: 3; order: 2; align-self: start; /* ONE GAP, TOP AND BOTTOM OF THE BAND. The head margin above the mark is the side margin over the display ratio (section 5b) and the clearance under the mark is the same figure (section 5b again), so the artwork arrives on a rhythm the page has already set. The gap under it takes that figure too, which is what keeps the band from reading as something dropped between two unrelated blocks: 40 at 1024, 55 at 1439. */ padding-top: calc(var(--margin-screen) / 1.618); } } /* THE HAIRLINES TAKE THE COPY COLUMN, WHATEVER IT IS. Section 4 runs a section head's rule to the trailing page margin, which is right while the page is one column of stacked blocks and wrong the moment it is not: at Wide the copy holds six of twelve and a rule drawn to the margin outran the type it belonged to. So the rules hold the copy's width instead, and they do it from Narrow up rather than only at Wide, which is what keeps one left-hand measure from the mark to the edition line at every canvas. ONE TOKEN DECIDES ALL OF IT. The rules carry no span of their own, so wherever --copy-span goes they follow, and the page cannot drift back into the three right-hand edges it had: copy at one width, rules at another, the band at a third. THE BAND IS NOT BOUND BY THIS AND DOES NOT NEED TO BE. Below Wide the copy takes the band's own width, so the two agree anyway. Where they would not, a picture may run past a text column and a rule may not: the first is a composition, the second a loose end. WHAT THIS COSTS THE HEADLINE. Twelve columns are wider than the two-line rag can fill. Its longest line sets 12.21 times the headline size, 0.551 of the viewport at --h-hero against the live area's 0.875, so the headline covers 57 to 64 percent of its rule from 640 to 1244. The single line from 1245 closes that at the top of the range. Closing it lower down means sizing the headline to the rule rather than to the ladder, which reaches 71 on an iPad and 100 by 1439 and then halves at 1440 when the column does. Approved as it stands: the copy answers to the picture above it and the headline keeps its own size. The colophon is scoped through its section on purpose: section 9 sets .colophon__body's span further down the file at the same specificity, so a bare class here loses on source order and only the profile's rule would move. The same trick, and the same reason, as .hero__media > .hero__frame in 6c. */ @media (min-width: 640px) { .section-head, .colophon > .colophon__body { grid-column: c 1 / span var(--copy-span); margin-right: 0; } } /* --- 6c. WIDE: THE HERO TAKES THE SCREEN ---------------------------------- From 1440 the band splits. The artwork is pinned to the window, holding the trailing columns at its full height and bleeding off the top, the foot and the trailing edge. Beside it the page runs down the leading columns, the mark alone in the top corner and everything after it centred against the picture as one block: headline, lede, actions, profile, colophon, each spaced from the next as it is at every other canvas. Scrolling moves the page and not the picture, so no edge of the artwork is ever on screen. THE SWIMMER DECIDES THE SPLIT, NOT THE HEADLINE. A window-high frame is a tall frame and cover crops a tall frame on width, so the artwork's column needs 0.739 of its own height in width to keep the figure whole. At 1440 x 900 that is 665, and an eight-column copy leaves it 490. Six columns leave 705 and it holds, and the same six hold everywhere measured: 740 at a 14-inch laptop's 1512 x 892, 823 at 1680 x 1050, 940 at 1920 x 1080, 1580 at 2560 x 1440. design-system.md is explicit about which way this resolves: 'Where a crop cannot hold the figure and the copy at once, the figure wins and the copy moves.' SO THE COPY MOVES, AND THE HEADLINE YIELDS SIZE RATHER THAN SHAPE. Six columns run 615 at 1440 and the two-line rag's longest line, BUILT AROUND YOUR CAMPAIGN, needs 793 at the 65 cap. The shape is the one the brief writes and the one the clause break belongs to, so the shape is what holds and the size is what gives: the headline takes 49 at 1440 and opens back to the full 65 by 1920, where six columns measure 820 and the line fits as declared. A VISUAL NARRATIVE SYSTEM / BUILT AROUND YOUR CAMPAIGN THE COST IS THE STEP DOWN AT THE BOTTOM OF THIS RANGE. At 1440 a 49 headline leads the 31 section head by half again rather than by the two display steps the wider canvases give, and clears the mark's cap by 1.2 rather than the 1.618 section 6 derives. design-system.md settles which way the conflict resolves: the figure wins and the copy moves, so a column that cannot hold the declared line at full size takes the line at the size it holds. The mark does not follow it down, for the reason section 6 gives below 360: dropping the headline is a fit, and the mark had no part in it. WHERE IT STILL RUNS OUT. The frame is as tall as the window, so a window taller than 1.353 times the artwork's own column cuts the figure: the ceiling is 954 at 1440, 1272 at 1920, 2138 at 2560. A maximised window on a standard display sits well inside it. A deliberately tall, narrow one does not, and that is the one canvas this composition cannot hold. */ @media (min-width: 1440px) { /* Two lines, as from 480 and for the same reason: the clause break is the only turn the copy offers. Section 3 owns those rules and they already carry this canvas, so nothing here switches them. THE COLUMN SETS THE SIZE HERE, AS THE LIVE AREA DOES BELOW 360. BUILT AROUND YOUR CAMPAIGN sets 12.21 times the headline size in this face: 793 at the 65 cap against the 615 six columns leave at 1440. Left alone it would wrap and strand CAMPAIGN on a third line, losing the shape the turn was set for, so the headline takes the size the column fits. 12.6 rather than 12.21 holds three percent against rounding and fallback metrics, the same margin the 9.1 below 360 carries. The column is computed rather than measured, off the same --col-used the artwork's leading edge takes below, against 100vw rather than a fixed box's 100%. Inert from 1920, where six columns measure 820 and --h-hero is already the smaller of the two, so it needs no query of its own. */ .hero__title { --col-used: min(var(--col-max), (100vw - 2 * var(--margin-screen) - 11 * var(--gutter-screen)) / 12); font-size: min(var(--h-hero), calc((var(--copy-span) * var(--col-used) + (var(--copy-span) - 1) * var(--gutter-screen)) / 12.6)); } .hero { /* The copy sets this row, as it does at every other canvas. The artwork is fixed to the viewport below and contributes no height, so the hairline under the hero sits where it always has: the copy's foot margin under the copy, not the foot of a screen-high section. */ min-height: 0; grid-template-rows: auto; padding-top: 0; padding-bottom: 0; } /* The mark moves out of its own row and into the copy cluster: the one canvas where the artwork is beside the copy rather than above it, so the mark can lead the column without ever falling under the picture. */ .hero__mark { display: none; } /* THE MARK HOLDS THE TOP CORNER AND THE REST OF THE PAGE CENTRES UNDER IT. A page whose picture is the window's own height has no top edge to open on, so the type either hangs from one or sits in the middle of the field beside it. Both, here: the mark keeps the corner, at its own height down from the top and at the page margin in from the side, and everything after it is centred as one block. It leaves the flow to do that, so the block below starts at the headline. Against the page, not the window. The mark belongs to the top of the document rather than to the scroll position, and absolute keeps it there: fixed would hold it over the headline as the page scrolls past, and design-system.md does not let the mark sit on anything but clear ground. THE BLOCK CENTRES ON THE FIELD UNDER THE MARK, NOT ON THE WINDOW. Those are not the same figure and the difference is half the mark's band, 84 at 1920: centred on the window the block measures 184 above and 184 below, and it reads high, because the eye takes the mark as the top edge of the page and the field as what is left under it. Centred on that field it is 268 and 99, and it sits where a reader expects it. The band is the datum, which is what body pays as padding below. It is also the floor. Centring on the window needs the window to be the block plus the band twice, about 1050 at these canvases, and under that a window-centred block rides up into the mark. Measured against the field that cannot happen at any height: the padding is the start edge, and safe centring falls back to it. */ body { position: relative; min-height: 100vh; display: grid; /* safe: on a window too short to hold the block, centring would push its head off the top where no scroll can reach it. Safe centring falls back to the start edge and the page scrolls as normal. */ align-content: safe center; padding-top: calc(2 * var(--mark-h) + var(--margin-screen) / 2.618); } .hero__lockup--inline { display: flex; position: absolute; top: var(--mark-h); left: var(--margin-screen); margin-bottom: 0; } .hero__copy { grid-column: c 1 / span var(--copy-span); grid-row: 1; align-self: start; /* The mark is out of the flow above, so the headline opens this block. The foot margin is the page's own --space-8, the same figure every other canvas puts between a block and the hairline under it. */ padding-top: 0; padding-bottom: var(--space-8); } /* THE ARTWORK IS PINNED TO THE VIEWPORT, NOT LAID INTO THE PAGE. Held in the hero's row it was only ever as tall as that row, so scrolling opened cream under it: a screen-high hero fixed the gap but dragged the hairline and the profile down to the foot of the screen with it, and the copy cluster lost the spacing it shares with every other canvas. Fixed, it does both. It has no height in the flow, so the hero is the copy's block again and the rule under it sits a foot margin below the buttons; and it is the window's height by definition, so there is no edge to open a gap under, at any scroll position. Fixed rather than sticky: sticky travels inside its own parent's box and that box is the hero, which is 550 tall. What the effect needs is the viewport, and fixed is the one that takes it. THE LEADING EDGE IS STILL THE GRID'S. Out of flow, grid-column no longer places it, so the column line is computed: margin plus one pitch per column the copy holds, where a pitch is a column and a gutter and the column is what track sizing actually gives, min(--col-max, the twelfth share of the live area). Percentages against the viewport, which is what a fixed box resolves them against and what the grid measures too. */ .hero__media { --col-used: min(var(--col-max), (100% - 2 * var(--margin-screen) - 11 * var(--gutter-screen)) / 12); --col-pitch: calc(var(--col-used) + var(--gutter-screen)); position: fixed; top: 0; bottom: 0; left: calc(var(--margin-screen) + var(--copy-span) * var(--col-pitch)); right: 0; /* flush right: the artwork owns that edge */ width: auto; margin: 0; } /* Released from the band's fixed height: flex:1 in section 7 fills the box, and the box is the window. THE CROP WINDOW TURNS ON ITS SIDE HERE, SO THE FOCUS DOES TOO. Banded, the frame was always wider than the artwork's 1.153 and only y decided what survived. Full height, it runs 0.78 at 1440 x 900 and 0.87 at 1920 x 1080, so cover binds on height and x alone decides. Measured off the master, the swimmer spans x 0.0454 to 0.6860, fingertips to the back of the head, and a 0.78 frame keeps a 0.68 window: 7.5 percent opens it at 0.024 and closes it at 0.704, which centres the figure and leaves about 20 clear at the hand and the same behind the head. y only binds on a window wider than 1.153 times its own height once the artwork's column is counted, which is an ultrawide or a short one. 28 is what the tallest of those want: it holds the figure from 0.1993 and the lane line to 0.4926 down to a 0.30 window, which is a 3.84 frame. */ .hero__media > .hero__frame { height: auto; --hero-focus: 7.5% 28%; } } /* --- 7. HERO MEDIA SLOT ---------------------------------------------------- The frame reserves layout space before the final artwork loads. */ .hero__frame { position: relative; aspect-ratio: 5 / 4; /* The frame carries data-theme="ink", so --bg is ink here. --bg-invert would resolve back to cream and undo the theme. */ background: var(--bg); overflow: hidden; /* Where the crop holds as the frame's ratio swings. One artwork-specific line: re-point it when the hero changes, and change nothing else. */ --hero-focus: 38% 34%; } /* display: contents drops the wrapper so the img is the frame's own child. The img is then taken out of flow, as the holding motif was: in normal flow it would contribute its intrinsic height and let the artwork set the row, instead of the copy column setting it and the artwork cropping to fit. */ .hero__frame > picture { display: contents; } .hero__frame > img, .hero__frame > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus); } @media (min-width: 640px) { .hero__frame { aspect-ratio: 3 / 2; } } /* Page and up: the slot is bottom-flush with the copy column, so the copy sets the height and the ratio is released. object-fit: cover does the cropping. The master does NOT reserve margin around its subject. The crop range is the page's problem and is solved here, by capping the frame. */ @media (min-width: 1024px) { .hero__media { display: flex; margin-bottom: 0; } .hero__frame { aspect-ratio: auto; flex: 1; min-height: 0; } } /* Holding frame used until the final hero artwork is approved. */ .holding { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--text); } .holding__interval line, .holding__horizon, .holding__figure { vector-effect: non-scaling-stroke; } .holding__interval { stroke: currentColor; stroke-width: 1; opacity: 0.42; } .holding__horizon { stroke: currentColor; stroke-width: 1; opacity: 0.28; } .holding__figure { stroke: var(--accent); stroke-width: 2; opacity: 0.95; } /* copper on ink */ /* --- 8. PROFILE ------------------------------------------------------------ */ /* THE PROFILE TRACKS THE HERO COPY COLUMN. A cap the column is narrower than does nothing, so the shared measure only holds if both blocks sit in the same track. These spans are .hero__copy's, canvas for canvas, which is what puts the two blocks on one edge and one width. The old 6 at Page was the real offender: it ran the profile at 43ch, well under the 60 the design system sets as the floor above Single, and 153 short of the lede beside it. */ .profile__body { grid-column: c 1 / -2; } @media (min-width: 640px) { .profile__body { grid-column: c 1 / span var(--copy-span); } } /* THE COLUMN IS THE MEASURE FROM NARROW TO PAGE. --measure-page holds a line at 790, which is the reading bound and the right one wherever the column is wider than the eye wants. On these canvases it is not the bound that shows. The band above the copy and the hairlines under it run the live area, the copy column runs it too, and a paragraph stopping 106 short of its own rule at 1024 and 406 at 1366 reads as an unfinished block rather than as a held measure. Approved on the page: the copy ends where the rules end, at every size an iPad reports. THE PRICE IS THE LINE, and it is the reason the cap exists. The profile runs about 128 characters at 1366 against the 60 to 68 the design system sets, and the lede resolves to one line. Scoped to this range on purpose: below 640 the live area is narrower than 790 and the cap never bound, and from 1440 the copy is six columns, where 790 is the smaller figure again and the reading measure comes back on its own. */ @media (min-width: 640px) and (max-width: 1439.98px) { .hero__lede, .profile__body.prose { max-width: none; } } /* From Page it is the same token the hero copy takes, so the two cannot drift. From 1440 both are at --measure-page and the span no longer decides their width, only the column they hang in. */ @media (min-width: 1024px) { .profile__body { grid-column: c 1 / span var(--copy-span); } } /* --- 9. COLOPHON ---------------------------------------------------------- Foot of the document: hairline, contact, and the edition line. The wordmark is deliberately not repeated here; it leads the page once. */ /* The contact row now carries the hairline itself: there is no head here, so the address and the edition line sit where the section title used to. Spans with the rule, not with the 12-column live area, because the rule runs to the trailing page margin and the edition line has to reach it. THE TAP TARGET, NOT THE SPACING, SETS THE GAP UNDER THE RULE. A section head clears its rule by 24 to the cap. .contact carries the 48 minimum target with its text centred, so 14 of empty box sits above the address; the padding sheds that 14 so the ink lands on the same line the title's cap did, and the target keeps its full 48. The excess measures constant from 320 to 1920, so it is one value. */ .colophon__body { grid-column: c 1 / bleed-end; margin-right: var(--margin-screen); border-top: 1px solid var(--border); padding-top: calc(var(--space-6) - 14px); display: flex; flex-wrap: wrap; align-items: baseline; /* THE EDITION LINE SITS WITH THE ADDRESS, ONE EM SPACE OFF IT. Held to the far end of the rule instead, it read as a second column of the page, which is one column more than the foot of this page has. Set next to the address it reads as what it is, the metadata belonging to the line it follows, and the gap between them is a space of type rather than a step off the spacing scale: --text-base is the address's own size, so this is one em of the type the space comes after. The row gap is not that space and stays on the scale. It only appears where the two will not share a line, on a phone, and there it is the distance between two blocks rather than the space between two words. */ justify-content: flex-start; column-gap: var(--text-base); row-gap: var(--space-6); } /* Format, weight and target of the deck, stated under its own button. */ .action__note { max-width: 34ch; } /* Status of the release. Sits with the edition line, not in the hero. */ .contact { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); font-family: var(--font-display-wide); font-size: var(--text-base); line-height: 1; letter-spacing: 0.02em; color: var(--text); text-decoration-color: var(--border); } .contact:hover { color: var(--link-hover); text-decoration-color: currentColor; } /* Optical alignment uses the icon's tight viewBox and scales with the text. */ .contact__icon { height: 0.894em; width: 1.202em; flex: none; transform: translateY(0.125em); color: var(--accent); } .contact:hover .contact__icon { color: var(--link-hover); } /* --- 10. FOCUS, MOTION, UTILITIES ----------------------------------------- Focus is always visible and owned by the shared focus tokens. */ :focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); border-radius: var(--radius-sm); } .skip-link { position: absolute; left: var(--margin-screen); top: 0; z-index: 10; transform: translateY(-120%); background: var(--color-ink); color: var(--text-invert); display: inline-flex; align-items: center; min-height: var(--tap-min); /* measured at 46px; the floor is 48 */ padding: var(--space-3) var(--space-6); font-family: var(--font-display-wide); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-caps); text-decoration: none; } .skip-link:focus-visible { transform: translateY(0); color: var(--text-invert); } .u-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* The page must read identically with all motion off. Nothing here animates layout or reveals content, so this only stills the interaction transitions. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }