/* ============================================================================= Mandy Spanier - site styles PREVIEW BRANCH BUILD TRIGGER (remove before this branch is merged to main). The first push to a new branch is silently skipped by the ignore rule in netlify.toml, because an empty CACHED_COMMIT_REF makes it report "nothing changed" and exit 0. A second commit that touches a real published file is what actually starts the build. An empty commit does NOT work: the rule compares changed FILES, and an empty commit changes none. This comment is that second commit. See .webteam/runbooks/preview-deploy.md. This is the only stylesheet on the site. Every page loads it, including the blog pages build.py generates. The design values (colour, spacing, type size, radius, shadow, motion) are declared once as custom properties in the :root block below, and every rule after that uses those names rather than raw values. HOUSE RULES FOR EDITING THIS FILE: - Plain CSS only. No Sass, no PostCSS, no build step beyond build.py. - Colours, spacing, radii and type sizes come from the tokens in :root. Do not paste a raw hex value or a raw pixel number into a rule. - Text colours are chosen to meet the WCAG AA contrast minimums against the surface they sit on. Do not lighten one without rechecking it. - Breakpoint numbers cannot be written as custom properties in plain CSS, so 640px and 720px are typed out by hand in the @media rules below. If one moves, move every copy of it. ============================================================================= */ :root{ /* ---- Surface ---------------------------------------------------------- */ --color-surface-page:#F7F5F0; --color-surface-raised:#FFFFFF; --color-surface-sunken:#EEEAE0; /* Mandy's ground, and it appears nowhere else on this site: oat means her long-form voice (components.md 21.1). A third step in the same warm family, not a new hue - page is hue 43, sunken is hue 43, this is hue 45, all at 24-30% saturation. It is a 1.28:1 step off the page cream, where the existing page-to-sunken step is only 1.10:1, so the boundary is visible without a border. Measured pairings on it, do not change one without rechecking all four: --color-text-primary 10.58:1 PASS, clears AAA at every size --color-brand-on-narrative 6.74:1 PASS, every green word and mark --color-brand-primary 4.37:1 FAILS the 4.5:1 body floor --color-text-secondary 4.09:1 FAILS. BANNED on this ground. If a caption is ever needed on oat it is ink, not secondary. */ --color-surface-narrative:#DFDACB; /* WO-162 / components.md 23.1. A NEW HEX, deliberately, and the only new ground colour this wave. A fourth rung in the same warm ramp: hue 42, saturation 29%, sitting between --color-surface-page (hue 43, 30%) and --color-surface-sunken. It is the warmer LEFT half of the turn's two-tone split, and it exists because neither existing token gives a usable step against white: page is 1.09:1, below the 1.10:1 this file already records as too weak to read as a boundary, and sunken is 1.20:1, close enough to the 1.28:1 section boundary that the turn would read as two sections instead of one pivot. This is 1.14:1. Measured pairings on it, do not change one without rechecking all three: --color-text-primary 12.99:1 PASS --color-brand-primary 5.37:1 PASS, so the turn's green accent words need NO recolour rule on this ground --color-text-secondary 5.02:1 PASS Relative luminance 0.8726 against oat's 0.7014, so the turn's warmer half is still substantially lighter than the oat bands above and below it, which is what keeps the turn reading as the one break in the oat field. */ --color-surface-turn-warm:#F3F0E9; /* ---- Text ------------------------------------------------------------- */ --color-text-primary:#1B2B26; /* Dark enough to clear 4.5:1 on the beige "alt" sections as well as on the page background. Do not lighten it without rechecking both. */ --color-text-secondary:#5A6A63; --color-text-muted:var(--color-text-secondary); --color-text-inverse:#FFFFFF; /* ---- Border ----------------------------------------------------------- */ /* Only for boundaries that ALSO carry a shadow as an independent cue (cards, post items, the embed frame). Never as the sole boundary of an interactive control: it is too faint to see on its own. Use --color-border-strong for those. */ --color-border-subtle:rgba(27,43,38,.12); /* Solid, no transparency, on purpose. A see-through border's real contrast depends on whatever happens to sit behind it, so it cannot be relied on. A solid colour has one answer everywhere: 4.05:1 on the page background, 4.41:1 on white, 3.67:1 on the beige. */ --color-border-strong:#6E7B75; --color-border-focus:#1B2B26; --color-focus-halo:#FFFFFF; /* ---- Brand ------------------------------------------------------------ */ --color-brand-primary:#1F6E5A; --color-brand-primary-hover:#164F41; --color-brand-primary-active:var(--color-brand-primary-hover); /* Brand green at TEXT weight on the oat ground above. --color-brand-primary measures 4.37:1 there, under the 4.5:1 body floor, so every green word and every green mark that sits on oat uses this instead and gets 6.74:1. One rule per ground, deliberately, rather than a per-element size test. It is also the site-wide a:hover colour, which is what made footer links nearly vanish on the footer's own ground; on oat it is 6.74:1 and on the turn's white band 9.42:1, so neither new ground can repeat that failure (components.md 21.1). */ --color-brand-on-narrative:var(--color-brand-primary-hover); /* #164F41 */ --color-on-primary:#FFFFFF; --color-gold:#B9862B; /* ---- Footer ground (hero-image-direction.md B.2) ---------------------- No new colour enters the system: the footer's ground is the existing brand hover green. It is here because the footer used to sit on white against a cream page, 1.09:1, which is not a visible region at all. Measured pairings, do not change one without rechecking all four: ground vs. page background 8.65:1 --color-text-on-footer on the ground 9.42:1 --color-text-on-footer-muted on it 6.69:1 (4.5:1 floor) --color-rule-on-footer on it 3.25:1 (3:1 non-text floor) */ --color-surface-footer:var(--color-brand-primary-hover); --color-text-on-footer:var(--color-text-inverse); --color-text-on-footer-muted:rgba(255,255,255,.80); --color-rule-on-footer:rgba(255,255,255,.45); /* ---- Status ----------------------------------------------------------- */ --color-status-notice-bg:#FFF7E6; --color-status-notice-text:#7A5A12; --color-status-notice-border:var(--color-gold); --color-status-success-bg:#E7F2EC; --color-status-success-text:var(--color-brand-primary-hover); --color-status-danger-bg:#FBEAE3; --color-status-danger-text:#7A3F26; --color-status-info-bg:var(--color-surface-sunken); --color-status-info-text:var(--color-text-secondary); /* ---- Typography ------------------------------------------------------- */ --font-serif:"Iowan Old Style","Palatino Linotype",Georgia,serif; --font-sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --text-2xs:.75rem; /* 12px. The smallest size used anywhere on the site. */ --text-xs:.8rem; --text-sm:.9rem; --text-base:1rem; --text-md:1.1rem; --text-eyebrow:1.2rem; /* 19.2px. Read by .eyebrow alone (components.md 22.4). */ --text-lg:1.3rem; --text-xl:1.5rem; --text-display-quote:clamp(1.3rem,3vw,1.9rem); /* One rung BELOW --text-display-quote, added for Paul's 2026-08-12 instruction: about 7% off the promoted sentences in Mandy's narrative and About's closing turn, matching the same ~7% the narrative body voice came down by, so the gap between her body voice and her promoted lines is the one it always was rather than being quietly widened. WHY THIS IS A NEW RUNG AND NOT AN EDIT TO --text-display-quote ABOVE. Four rules read --text-display-quote and only three of them were in that instruction. Bookings' .offer-line ("There is no pressure, just a real conversation...") was NOT: its block is WIDENING instead (see the .section-head:has(.offer-line) rules further down), which is a different remedy for a different complaint. Moving the shared rung would have shrunk it silently as a side effect. A token rather than three literal clamps so the three lines that DO share this treatment cannot drift apart later. 19.2px floor, 28px ceiling. */ --text-display-quote-soft:clamp(1.2rem,2.8vw,1.75rem); /* ABOUT'S CLOSING TURN ALONE, AND NOT A RUNG OF THE TYPE SCALE. WO-208 T4, from Paul's "slightly smaller, less shouty". WHY A NEW TOKEN RATHER THAN AN EDIT TO --text-display-quote-soft ABOVE. Exactly the precedent that token itself set, one rung up: it is read by several rules and only About's closing line was in this instruction, so moving it would have shrunk Home's two promoted narrative lines and its closing ask as a silent side effect. WHY IT IS A max() AND NOT A PLAIN CLAMP, which is the whole point of this token. The clamp half is the reduction Paul asked for: ceiling 28px down to 25.6px. The max() half is a floor against her own body voice. About's "My Approach" paragraphs read --text-narrative, which is 17.28px at 390 but climbs to 24.8px at 1920. A plain 25.6px clamp was BUILT AND RENDERED at 1920 and the closing line came out the same size as the paragraph above it: the promotion vanished and it read as a fourth paragraph. 1.1em holds it at 1.10x the body voice wherever the body voice has caught up. Do not flatten this to a clamp. The em term resolves against .narrative, the parent, which is what carries the body voice. That context dependence is exactly why this is named for the one block it serves and is not offered as a general scale rung. THE FLOOR, 1.2rem -> 1.35rem -> 1.46rem (WO-212 T1, correcting WO-210 T1, settling WO-208 T5). Sketch was right that the turn was invisible on a phone at 1.11x the body, and the apparent deadlock with Paul's reduction was never two rulings about two widths: it was ONE instruction in the wrong UNIT. Written as 1.35em it resolves against her body voice, which climbs with the viewport, so it grew FASTEST at exactly the widths where Paul asked for less. In rem the conflict does not exist, because the wide end is not held by this number at all: 2.5vw overtakes 23.36px at 934px of viewport, so from 1024 up the floor is simply absent from the result. WHY 1.46 AND NOT 1.35. Swapping the unit and keeping the digits was an arithmetic error, not a ruling: Sketch asked for 1.35 TIMES HER BODY VOICE, and 1.35rem against a 17.28px body delivers 1.250x, not 1.35x. 1.46rem is 23.36px, which is 1.352x that body. Same instruction, correct unit. Measured headed at 390 (clientWidth 375, measure 331.00px): 21.60 -> 23.36px, 1.250x -> 1.352x, five lines either way. 360 and 414 likewise 23.36px. 1024 / 1280 / 1440 / 1920 unchanged at 25.60 / 25.60 / 25.60 / 27.28, to the hundredth of a pixel, which is Paul's reduction untouched. Do NOT chase a line COUNT with this number. That target was withdrawn by its own author: buying four lines at 390 costs a turn nearly the same size as the paragraph above it and a last line filling 98 percent of the measure, which reads as text that ran out of room. The orphan it was a proxy for is fixed by text-wrap:pretty on the rule itself, not here. No value of this floor fixes it: 23 of 84 width x face cells strand the final word without that property and 0 of 84 with it (WO-212 T2). Do NOT add a min(max(...)) cap over this. It was tried and rejected on measurement: it lifts 1440 from 25.60 to 27.20 and partially undoes Paul's reduction at a width nobody was watching. The arithmetic above already holds the wide end; a cap is redundant there and harmful here. This token is mirrored in .webteam/04-ui/tokens.css (WO-212 T4). The two must stay identical. */ --text-about-turn:max(1.1em, clamp(1.46rem,2.5vw,1.6rem)); --text-display-sm:clamp(1.7rem,3.5vw,2.4rem); --text-display-md:clamp(1.9rem,4.5vw,2.8rem); --text-display-lg:clamp(2.2rem,5.5vw,3.6rem); /* The size of Mandy's own long-form voice: Home's paced narrative and About's "My Approach". One token, both places, so the two cannot drift apart (components.md 20.2). 18.4px floor from 390 to 1150, then a ramp, 23.04px at 1440, ceiling 24px from 1500. It steps once more past 1920, in the WIDE VIEWPORTS query below, and nowhere else. PAUL, 2026-08-12: down about 7% across the whole ramp. Floor 18.4 -> 17.28px, ceiling 24 -> 22.4px, with the vw ramp between them eased from 1.6vw to 1.5vw so the two ends still meet at roughly the same viewport widths as before. This is the token itself and not a scoped override BECAUSE EVERY ONE OF ITS CONSUMERS WAS IN THAT INSTRUCTION: .narrative is the only rule that reads this token, and the only elements inside a .narrative that inherit it (rather than carrying a promoted size of their own) are Home's five paced body lines from "Now life is changing" down, the turn's second line, her five Imagine lines (WO-162: plain beats now, not list items), and About's two "My Approach" paragraphs. Nothing else on the site moves. The measure moves WITH the type and is supposed to: .narrative caps at min(--measure-prose,62ch) and ch is relative to this size, so the line still holds about 65 characters, and the hung lead-in's column 2 is capped the same way, from the same expression, for the same reason. Measured while WO-162 was building that column: 1ch in this serif stack is exactly 0.5em, so 62ch is exactly 31 x this token, and .narrative-lead renders 535.67px at 1024, 669.59px at 1440 and 768.80px at 1920. Recorded because any rule that needs her measure OUTSIDE .narrative cannot use ch (it would resolve against that element's font-size, not hers) and must use that multiplier. */ --text-narrative:clamp(1.08rem,1.5vw,1.4rem); /* Two hero headline sizes, chosen by the length of the headline copy, so the hero works whichever way that copy goes (hero-image-direction.md A.2/A.3). --text-hero-long is for a full-sentence headline like the one live today (91 characters); --text-hero-short is for a headline of 45 characters or fewer. The rule that keeps either honest: the h1 must never render more than 4 lines at 1440px or 5 at 390px. If it does, step down one token. Do NOT put a `ch` cap back on .hero h1: that cap is what starved the headline into seven lines in the first place. */ /* The ceiling is 2.8rem (44.8px) and NOT the 3.25rem (52px) the spec computed. The spec derived 52px from an estimated character advance of about 25px; the real advance in this serif is nearer 29px, and 52px measured FIVE rendered lines at 1440, 1920, 2560 and 3840 in Chromium, against the spec's own gate of four. 2.8rem measures four at every one of those widths and five at 390px, which is the gate exactly. This is the spec's own remedy ("step down one token"), applied to the token's ceiling so the token keeps its name and its contract. The `3.6vw` ramp under the ceiling is unchanged. */ /* 2.68rem = 42.9px ceiling, lowered from 2.8rem (44.8px) 2026-08-20, and the ceiling is now doing a specific job. Paul asked for this headline in THREE lines. The three qualities take the third on their own, so the setup gets two, and at 44.8px it took three at both 1280 and 1440: the copy column is 583px at its narrowest and the setup needs about 27 characters a line to make it in two. Swept 44.8 down in 1px steps at both widths; 43px is where it turns over, at both. Used only by .hero h1. */ --text-hero-long:clamp(1.9rem,3.6vw,2.68rem); --text-hero-short:clamp(2.2rem,5vw,4rem); /* 64px ceiling */ /* ---- Spacing (4px scale) ---------------------------------------------- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:32px; --space-8:44px; /* also the minimum touch target */ --space-9:64px; /* The page's left and right margin. Deliberately kept at 22px rather than snapped to 24px: it is the single most visible spacing value on the site and a 2px change buys nothing. */ --space-gutter:22px; /* ---- Radius ----------------------------------------------------------- */ --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-full:999px; /* ---- Border width ----------------------------------------------------- */ --border-thin:1px; --border-md:1.5px; --border-thick:3px; /* ---- The narrative passage's derived layout anchors (WO-162) ------------ components.md 24.3, adopted as MECHANISM and fed section 23's values. Both tone edges and both grids read these, so a grid column and a background stop are provably unable to desync: there is no second copy of the arithmetic to forget to update. The percentages inside them resolve at the USE SITE, which is why they are declared here and consumed on the full-bleed sections. .narrative-turn, .narrative-recognition and .narrative-divider are all full-bleed and all have zero horizontal padding, so 100% and 50% resolve to the same box on all three. Do not consume these inside .wrap: there they would resolve against the 1036px content box and silently place every edge wrong. */ --content-width:min(calc(var(--container-max) - 2 * var(--space-gutter)), calc(100% - 2 * var(--space-gutter))); --content-left:max(var(--space-gutter), calc(50% - var(--content-width) / 2)); /* THE TURN'S TONE EDGE: the centre of the gutter, NEVER 50%. At the 5fr/7fr split a 50% edge lands about 518px into the content box while the right column starts at 464px, so it would run straight through beat 2's text (next-chapter-layout.md 9.7). Derived from the same three values as the grid below it, in one expression. Resolved: 42.5% at 1024, 44.3% at 1440, 45.3% at 1920, 47.7% at 3840. It sits inside the gutter at every width, and that is the invariant, not any one of those numbers. */ --turn-gap:56px; /* 9.7's value. Read by BOTH the turn's column-gap and the stop below. Not on the --space-* scale, which runs 44 then 64; a deliberate exception, recorded rather than snapped, because the 5fr/7fr arithmetic depends on it. */ --turn-edge:calc(var(--content-left) + (var(--content-width) - var(--turn-gap)) * 5 / 12 + var(--turn-gap) / 2); /* There is deliberately NO --recognition-edge here. It was built, rendered and removed in the same pass; the reasoning is on .narrative-recognition below and the expression is held in .webteam/04-ui/tokens.css. It is not left in as an unused token, because an unused token is a value nobody can check. */ /* ---- The arch (WO-162 / components.md 23.4-23.6) ------------------------ */ /* The single source of truth for the divider's depth. Nothing else defines a height for that shape, and .narrative-recognition's bottom padding is COMPUTED from this and never typed beside it. 28px at 320 and 390 (the floor wins below 560), 51px at 1024, 72px at 1440, 88px from 1760 up. The shape gets flatter as the viewport widens, deliberately: a curve that kept its angle would be 192px deep at 3840 and would spend a fifth of a screen height on decoration. */ --divider-travel:clamp(28px,5vw,88px); /* The section's own vertical padding, hoisted UNCHANGED IN EFFECT from the `section{padding:...}` rule below, so the clearance calc can consume it instead of restating the number. If this moves, clearance moves with it. components.md 24.6, adopted as mechanism. */ --space-section-y:clamp(40px,6vw,72px); /* The arch itself. Read as: the boundary starts at the block's bottom-left, holds flat along the bottom until about 38% of the width, then sweeps up and flattens into the top-right corner. Horizontal tangents at BOTH ends, so the shape meets both edges without a corner, which is the entire point of choosing an arch over the reference's wedge. Not a symmetric dome: a dome puts the deep point in the centre, which breaks 9.10's structural rule that the deep side is the left. preserveAspectRatio='none' is load-bearing. It decouples the curve from the viewport's proportions entirely, so the rendered depth is exactly --divider-travel at every width and no more. The path fill is WHITE on a TRANSPARENT ground on purpose: that renders correctly under both mask-mode:alpha and mask-mode:luminance, so the shape cannot invert on a browser that defaults the other way. */ --divider-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 C38,100 55,0 100,0 L100,100 Z' fill='%23fff'/%3E%3C/svg%3E"); /* ---- Shadow ----------------------------------------------------------- */ --shadow-sm:0 1px 2px rgba(27,43,38,.06); --shadow-md:0 1px 2px rgba(27,43,38,.05),0 12px 28px -14px rgba(27,43,38,.22); /* An optional deeper hover lift. Defined so the scale is complete, and deliberately not applied to anything today. */ --shadow-lg:0 2px 4px rgba(27,43,38,.08),0 20px 40px -16px rgba(27,43,38,.28); /* ---- Motion ----------------------------------------------------------- */ --motion-fast:150ms ease-out; --motion-base:200ms ease; /* ---- Layout ----------------------------------------------------------- */ /* 1080px up to 1919px, then two steps up (components.md 19.1). The steps are in the two @media rules directly under this block, not here. Every 1440px measurement recorded anywhere in .webteam/ is taken at this value and is therefore untouched by them. */ --container-max:1080px; /* The site's long-form reading column. Not a new value: it names the 720px measure .article has always used for a blog post's body, so the one other place that runs long prose under its own heading (About, "My Approach") can share it instead of inventing a second width. WO-112. Flagged to Pixel: .article still hard-codes the same 720px and should point here. */ --measure-prose:720px; /* ---- Icons (WO-057/WO-069) --------------------------------------------- */ --icon-size:28px; /* one optical size, every icon, every page */ --icon-stroke:1.75; /* one stroke weight, every icon, every page */ /* --------------------------------------------------------------------- COMPATIBILITY ALIASES. These are the original variable names, kept and pointed at the tokens above, because build.py writes inline styles that use var(--line), var(--muted) and var(--accent) on the generated blog pages. Deleting these names would silently break those pages. Use the --color-* names above in any NEW rule. --------------------------------------------------------------------- */ --bg:var(--color-surface-page); --surface:var(--color-surface-raised); --surface-2:var(--color-surface-sunken); --ink:var(--color-text-primary); --muted:var(--color-text-secondary); --line:var(--color-border-subtle); --accent:var(--color-brand-primary); --accent-dark:var(--color-brand-primary-hover); --gold:var(--color-gold); --shadow:var(--shadow-md); --radius:var(--radius-lg); --maxw:var(--container-max); --serif:var(--font-serif); --sans:var(--font-sans); } /* ============================================================================= WIDE VIEWPORTS: the container steps up twice (components.md 19.1). At 3840px a flat 1080px container left the content on about 28% of the screen, a ribbon floating in an ocean of cream. These two steps take it to 33%, and because the things that must NOT get wider are capped in their own units - body copy at 60ch, the prose band at --measure-prose, the hero text column from 1600px up - the extra width goes only to the card grids, the hero image panel and the footer, which are the parts that can use it. Nothing here fires below 1920px, so no measurement taken at 1440px moves. ============================================================================= */ @media(min-width:1920px){:root{ --container-max:1180px; /* Her narrative takes one step with the container. At 3840px a 518px column held 13.5% of the screen; 26.4px type on a min(840px,62ch) measure holds about 21% at the same ~65 characters a line. components.md 20.6. Carries Paul's 2026-08-12 reduction through at the same ~6%, so the wide step keeps its documented relationship to the base ramp instead of becoming a bigger jump than it was. */ --text-narrative:1.55rem; /* 24.8px */ }} @media(min-width:2560px){:root{--container-max:1280px}} /* the ceiling; flat to 3840 */ /* ============================================================================= BASE ============================================================================= */ *{box-sizing:border-box} /* Several rules below set display on elements the Bookings page hides and shows. Without this, "hidden" would lose to them and a hidden block would stay on screen. */ [hidden]{display:none!important} /* overflow-wrap is inherited, so setting it once here is a site-wide floor: any single word or unbroken run of text, anywhere on any page, is allowed to break inside itself rather than push its box (or, worse, a whole grid/flex track) wider than its container. This is the real fix behind the WCAG 1.4.4 findings on bookings.html, index.html and about.html: at a boosted text size the display-heading tokens (clamp(...) in tokens.css) resolve to their fixed rem-based floor on every phone-class viewport, because the vw-based preferred value never catches up until the viewport is over 1500px wide. That floor grows with the zoom level, and a long word inside that oversized heading, or inside a button (e.g. "complimentary"), has no room to break, so it either overflows its own box in normal flow (bookings.html's h1) or forces an intrinsically-sized flex/grid box wider than the viewport to fit that one unbreakable run (index.html's .hero-grid and its .btn, about.html's .split and its .portrait). Nothing about the fixed 400px scrollWidth on bookings.html was a literal width value: it was left-gutter(22px) plus the word's own rendered pixel width, which does not change with viewport because it is driven entirely by the (zoom-boosted, but viewport-independent) font size. `anywhere`, not `break-word`, is deliberate and load-bearing: the two look identical for ordinary line-breaking, but they are specified to differ on exactly the case that matters here. `break-word` breaks a too-long word only after the box's own width has already been decided by some other rule, so a box that is SIZED FROM its content (an inline-flex button, a bare `1fr` grid track) never shrinks, because the intrinsic min-content measurement that decides that size is defined to ignore `break-word` entirely and behaves as if the word could not break at all. `anywhere` is specified to also count as a break opportunity for that min-content measurement, so the box can legitimately be sized down to fit the viewport, and only then does the word actually break, inside it. This is the standard, spec-documented fix for exactly this class of grid/flexbox overflow, not a workaround. Verified with tools/viewport-check.py's --text-zoom-pct at 200 and 400; full before/after numbers in HO-074. */ /* WO-146 item 3: body text up one rung. --text-md (1.1rem/17.6px), a previously unused rung in the scale, not a bump to --text-base (1rem/16px) - --text-base is also the literal token .btn and .foot nav a point at, and raising it would grow buttons and footer nav links, which nobody asked for. Only genuinely unstyled text (plain p/div/li with no font-size rule of its own) moves; every element with its own token (.hero p.lead, .hero-note, .card p, .narrative, .article p, .eyebrow, .btn, .foot nav a, .nap-name, .nap-note, .foot-legal) is untouched because a more specific rule always wins over an inherited one. */ body{margin:0;background:var(--color-surface-page);color:var(--color-text-primary); font-family:var(--font-sans);font-size:var(--text-md);line-height:1.65;overflow-wrap:anywhere} h1,h2,h3{font-family:var(--font-serif);font-weight:600;line-height:1.15;margin:0} /* Paragraph to paragraph, the first tier of the spacing ladder (components.md 19.2). This was `1em`, which only measured 16px because the body happens to be 16px, and quietly measured something else inside any block with its own font-size. A token says what it means and stays put. */ p{margin:0 0 var(--space-4)} a{color:var(--color-brand-primary);text-decoration-thickness:1px} a:hover{color:var(--color-brand-primary-hover)} img{max-width:100%} .wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-gutter)} .muted{color:var(--color-text-muted)} .center{text-align:center} /* The entrance fade (`.reveal`, WO-067) was REMOVED here, WO-112, and must not come back in this form. It set `opacity:0` as the base state and relied on `animation-timeline: view()` to bring the element back to `opacity:1`. When that timeline does not advance, the element never becomes visible: on Home that hid her body copy, the three "How I Can Help" boxes, the blog strip and the "Where would you like to start?" cards, all at once, in a plain rendered page. Two audits passed it because they read the computed style (opacity 0 with a live animationName) instead of looking at the page. Content must be visible by default with animation as enhancement only; a decorative fade that can hide the client's own words is not worth repairing. The hero parallax stays: it moves an image and cannot hide anything. */ /* ============================================================================= FOCUS INDICATOR - applies to every focusable element on every page. Why two layers instead of one colour: there is no single flat colour that is visible against every background this site uses. A dark ring vanishes against a dark surface; a gold ring vanishes against the page background. So a solid white halo always sits between the dark ring and whatever is behind the element, which makes the ring's contrast the same number everywhere: 14.79:1. WHY THE @supports WRAPPER BELOW IS LOAD-BEARING, DO NOT REMOVE IT. The browser draws its own focus outline by default. Taking that away with :focus{outline:none} and putting a better one back with :focus-visible is only safe on a browser that understands :focus-visible. On one that does not, the second rule is thrown away and the first one still applies, so every link, button and field on the whole site would end up with no visible focus indicator at all, which is worse than the plain browser default we started from. @supports selector(:focus-visible) is false on exactly those browsers, so there the default outline is simply left alone. ============================================================================= */ @supports selector(:focus-visible){ :focus{outline:none} } :focus-visible{ outline:var(--border-thick) solid var(--color-border-focus); outline-offset:var(--space-1); box-shadow:0 0 0 4px var(--color-focus-halo); } /* WO-182 (HO-181 finding): a `border-radius:inherit` override used to sit here, intended to "let the halo follow the shape on rounded controls." It did the opposite and squared the ring instead. `inherit` does not mean "keep whatever border-radius this element already computed" - it means "take the PARENT's border-radius", and none of .btn's, .card's, .post-item's or .latest a's parents (nav, grid wrappers, flex rows) carry one, so the parent's value is 0 and :focus-visible was overwriting the pill/card radius with a square corner the instant a control was focused. Every one of those selectors already carries its own border-radius unconditionally in its own base rule (.btn: var(--radius-full), .card/.post-item/.latest a: var(--radius-lg)), which the box-shadow halo above already follows on its own - box-shadow is drawn from the SAME element's own border box, so it needs no restating here. The fix is no rule at all: removing the override lets each control's real shape stand, confirmed by tabbing to one of each variant at 390px and 1440px. `.card-link` (the stretched link inside the "How I Can Help" cards, see its own rule and comment) is a different case and correctly untouched: IT has no border-radius of its own and is a genuine CHILD of `.card`, so `border-radius:inherit` there correctly borrows its parent's 16px. */ /* The sticky header would otherwise sit on top of whatever the browser has just scrolled a keyboard-focused element into view behind. The header is 66px tall; 12px of clearance is added. */ html{scroll-padding-top:78px} :target,[id]{scroll-margin-top:78px} /* GLIDE TO AN IN-PAGE SECTION INSTEAD OF TELEPORTING. Paul, 2026-08-12, for the hero's "See how I can help" button, which is a plain link to #how-i-can-help and until now snapped the page there with no sense of having travelled, so the visitor could not tell whether they had moved down the page or landed on a different one. ZERO JAVASCRIPT, ON PURPOSE. This is one CSS property that the browser's own anchor navigation reads; the alternative is a click handler and scrollIntoView, which would mean the button silently reverts to a snap if the script is blocked and would need its own reduced-motion branch written by hand. The link keeps working as an ordinary link either way: in a browser that does not support scroll-behavior, this declaration is inert and the jump is exactly today's instant one, never a broken one. prefers-reduced-motion:no-preference is the WCAG opt-in and it is the whole guard, same pattern as every other motion rule in this file. Anyone who has asked their system for less motion gets the instant jump, which is the behaviour that shipped before this rule existed. NOTHING ELSE ABOUT THE JUMP CHANGES. The 78px clearance above stays exactly as it is - scroll-padding-top and scroll-margin-top are what keep the sticky header off the target, and they apply identically to a smooth scroll and an instant one, so the landing position is unmoved. IT ALSO REACHES THE SKIP LINK (#main-content), and that is acceptable rather than overlooked: focus still moves to
the instant the link is activated, because
carries tabindex="-1" and the browser sets focus before it animates. A screen reader announces the new location immediately either way; only the visible scroll is eased. */ @media(prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} } /*
is given tabindex="-1" so the skip link genuinely moves focus into it. That makes it focusable, which would otherwise draw the focus ring around the entire page body. Suppress it: the scroll position and the screen reader announcement already tell the visitor where they are. The two selectors are written as separate rules rather than one comma separated list on purpose. A browser that does not understand :focus-visible throws away a whole list containing it, including the plain :focus half, so the list form would put the ring back on exactly the browsers this file is trying to look after. Same reason below on .skip-link and on the notice card headings. */ main[tabindex="-1"]:focus{outline:none;box-shadow:none} main[tabindex="-1"]:focus-visible{outline:none;box-shadow:none} /* ============================================================================= SKIP LINK Off screen until it is focused, then it slides into the top left corner. WHY THIS IS A transform, NOT A top OFFSET (WCAG 1.4.4 fix, see HO-074). The old rule parked this at a fixed top:-56px, sized for the link's height at default text size (roughly 44px) plus its focused resting distance from the top (--space-3, 12px): -(44+12) = -56. That arithmetic is only true at one font size. At 200% text zoom the link's own text and padding grow, so its rendered height grows past 44px, but -56px does not grow with it, and the difference is exactly the part of the link that stays on screen, permanently, unfocused, covering part of the wordmark. translateY(-100%) moves an element up by its OWN rendered height, computed after layout, at any font size. Combining it with the focused resting offset in one calc() gives the exact box position with no size assumption baked in: calc(-100% - var(--space-3)) always lands the link's bottom edge at 0, fully clear of the viewport, whether the box is 44px or 100px tall. On focus the transform is simply removed, landing the link at its static top:var(--space-3), the same resting position as before. ============================================================================= */ .skip-link{ position:absolute; left:var(--space-gutter); top:var(--space-3); transform:translateY(calc(-100% - var(--space-3))); background:var(--color-text-primary); color:var(--color-text-inverse); padding:var(--space-3) var(--space-5); border-radius:var(--radius-sm); font:600 var(--text-sm) var(--font-sans); text-decoration:none; transition:transform var(--motion-fast); z-index:100; } .skip-link:focus{transform:translateY(0)} .skip-link:focus-visible{transform:translateY(0)} @media(prefers-reduced-motion:reduce){.skip-link{transition:none}} /* Visually hidden, still announced by a screen reader. Used in the brand wordmark to join "Mandy Spanier" and "Next Chapter" into one accessible name without a visible comma. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ============================================================================= BUTTONS ============================================================================= */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em; border:none;cursor:pointer;font-family:var(--font-sans);font-weight:600; font-size:var(--text-base);padding:.8em 1.5em;border-radius:var(--radius-full); text-decoration:none;min-height:var(--space-8); transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast)} .btn-primary{background:var(--color-brand-primary);color:var(--color-on-primary)} .btn-primary:hover{background:var(--color-brand-primary-hover);color:var(--color-on-primary)} .btn-primary:active{background:var(--color-brand-primary-active);transform:translateY(1px)} .btn-primary:disabled,.btn-primary[aria-disabled="true"]{ background:var(--color-surface-sunken);color:var(--color-text-muted);cursor:not-allowed} /* The border is this button's only boundary, so it uses the strong border colour, which clears the 3:1 minimum for a control outline. Do not swap it for the subtle one. */ .btn-ghost{background:transparent;color:var(--color-text-primary); border:var(--border-md) solid var(--color-border-strong)} .btn-ghost:hover{border-color:var(--color-brand-primary);color:var(--color-brand-primary)} .btn-ghost:active{border-color:var(--color-brand-primary-hover); color:var(--color-brand-primary-hover);transform:translateY(1px)} .btn-ghost:disabled,.btn-ghost[aria-disabled="true"]{ border-color:var(--color-border-subtle);color:var(--color-text-muted);cursor:not-allowed} @media(prefers-reduced-motion:reduce){.btn{transition:none}} /* ============================================================================= HEADER AND PRIMARY NAVIGATION ============================================================================= */ header.site{position:sticky;top:0;z-index:20;background:rgba(247,245,240,.95); backdrop-filter:blur(8px);border-bottom:var(--border-thin) solid var(--color-border-subtle)} .nav{display:flex;align-items:center;justify-content:space-between;height:66px} .brand{display:flex;align-items:center;font-family:var(--font-serif); font-weight:700;font-size:1.15rem;color:var(--color-text-primary);text-decoration:none; min-height:var(--space-8)} .brand-text{display:flex;flex-direction:column;justify-content:center;line-height:1.15} .brand-name{display:block} .brand-tagline{display:block;font-family:var(--font-sans);font-weight:600; font-size:var(--text-2xs);letter-spacing:.02em;line-height:1.2;margin-top:1px; color:var(--color-text-secondary)} /* The gap is small because the links carry 8px of their own padding. The arithmetic is written out so this is checkable rather than eyeballed: the spacing between two link words is 8px padding + 6.4px gap + 8px padding = 22.4px. Keep that total if either value is ever changed. It matters most between 641px and 720px, where the header has the least room to spare. */ .nav-links{display:flex;gap:.4em;align-items:center} /* min-height, not padding, is what guarantees the 44px tap target. The padding is there for the feel of the click area, not the guarantee. */ .nav-links a{display:inline-flex;align-items:center;min-height:var(--space-8); padding:var(--space-2);color:var(--color-text-secondary); text-decoration:none;font-weight:500;font-size:.98rem} .nav-links a:hover,.nav-links a.active,.nav-links a[aria-current="page"]{ color:var(--color-text-primary)} /* The booking button keeps its own white text on green at every state. */ .nav-links a.book-link,.nav-links a.book-link:hover{color:var(--color-on-primary)} /* --- Mobile menu toggle. Hidden by default; shown inside the 640px query. The button itself is not in any page's HTML: js/nav.js builds it and puts it into the header. These rules only ever match once that script has run, which is exactly the intent. Do not add a .nav-toggle button to the markup by hand, or it will appear with nothing behind it when the script does not run. ---------------------------------------------------------------------- */ .nav-toggle{ display:none; align-items:center;gap:var(--space-2); min-width:var(--space-8);min-height:var(--space-8); padding:var(--space-2) var(--space-3); background:transparent; border:var(--border-md) solid var(--color-border-strong); border-radius:var(--radius-sm); color:var(--color-text-primary); font:600 var(--text-sm) var(--font-sans); cursor:pointer; } .nav-toggle-icon{position:relative;width:18px;height:2px; background:var(--color-text-primary);display:block} .nav-toggle-icon::before,.nav-toggle-icon::after{ content:"";position:absolute;left:0;width:18px;height:2px; background:var(--color-text-primary);transition:transform var(--motion-base)} .nav-toggle-icon::before{top:-6px} .nav-toggle-icon::after{top:6px} .nav-toggle[aria-expanded="true"] .nav-toggle-icon{background:transparent} .nav-toggle[aria-expanded="true"] .nav-toggle-icon::before{transform:translateY(6px) rotate(45deg)} .nav-toggle[aria-expanded="true"] .nav-toggle-icon::after{transform:translateY(-6px) rotate(-45deg)} @media(prefers-reduced-motion:reduce){ .nav-toggle-icon::before,.nav-toggle-icon::after{transition:none} } /* ----------------------------------------------------------------------------- MOBILE NAVIGATION, 640px and below. Built in three layers on purpose (ADR-043 adds the third): LAYER 1 (this block) is the scripted default: a floating panel, position :absolute, anchored below the brand row rather than flowed content under it (see the comment on .nav-links below) - always open, every link really there and really tabbable, laid over whatever the page puts under the header instead of pushing it down. This is what paints first, before any script has had a chance to run, and it is also what a browser with scripting genuinely available keeps forever, whether or not js/nav.js has loaded yet. LAYER 2 (the .js-collapsible block after it) is added by js/nav.js and folds that list behind the Menu button that same script creates. Never move these rules out of .js-collapsible: doing so would collapse the menu for visitors who have no script to open it again. LAYER 3 (ADR-043, the @media(scripting:none) block after LAYER 1) is the genuinely-no-JS state, chosen in CSS alone via the `scripting` media feature - no change, nothing in netlify.toml, no hash to go stale, js/nav.js untouched. It restores .nav-links to normal flow so the panel never overlays the hero

the way the absolute LAYER 1 panel otherwise would with no script running to explain why. position:static is not the whole change: in flow the panel sits back inside .wrap, which already supplies the 22px gutter, so LAYER 1's own --space-gutter horizontal padding (below) would double-inset the rows, and LAYER 1's box-shadow and border-bottom read as a floating layer on something that is no longer floating. LAYER 3 undoes exactly those three properties and nothing else - .nav itself needs no change (flex-wrap:wrap, height:auto and min-height: 66px already permit the second row), and js/nav.js is untouched because this state does not depend on whether it ran, only on whether scripting was ever available to run it. Where the `scripting` feature is unsupported the block simply drops and the page renders exactly what ships today (the LAYER 1 floating panel), so no regression is possible for that engine. ----------------------------------------------------------------------------- */ @media(max-width:640px){ /* .nav stays a single 66px-tall row, brand plus Menu button, ALWAYS - see .nav-links below for why. align-content keeps that row optically centred while it does; position:relative is what lets .nav-links (absolute) anchor to it instead of to the page. */ .nav{flex-wrap:wrap;height:auto;min-height:66px;align-content:center; position:relative} .nav-toggle{display:inline-flex} /* WO-139. .nav-links used to be .nav's second flex row: opening the panel grew .nav's height and pushed everything below it down the page, closing it pulled that content back up, and js/nav.js closing the panel for the first time - AFTER the browser had already painted it open - is what a throttled run measured as a 207px shift and a 0.2+ CLS score. It was a race, not a bug in the collapse itself: whichever paint happened to land before that first close was the one that got dragged. position:absolute removes .nav-links from .nav's flow entirely, so .nav's own height (above) is the ONLY thing that decides how tall the header is, and that height no longer has a second value to change to. The panel now opens and closes as a layer floating over whatever sits below the header (the hero, out of scope here - WO-138), not as flowed content, so nothing under it ever moves, no matter when or whether js/nav.js runs. top:100% anchors it to the bottom edge of the 66px bar; left:0/right:0 span it edge to edge, past .wrap's own 22px padding, which .nav-links no longer sits inside - it is why the panel needs its own background rather than showing whatever is behind it through the gaps between rows. */ .nav-links{ flex-direction:column;align-items:stretch; gap:0; position:absolute;top:100%;left:0;right:0; background:var(--color-surface-raised); box-shadow:var(--shadow-md); border-bottom:var(--border-thin) solid var(--color-border-subtle); /* Horizontal padding is the page's own --space-gutter now, not the 8px this used before: the panel is no longer INSIDE .wrap's own padding, so it has to supply that 22px gutter itself, or its rows read flush with the screen edge while everything else on the page sits 22px in from it. Vertical padding is unrelated and unchanged: 8px all round is still what keeps the focus ring around the first and last items clear of the overflow:hidden the collapse animation applies (see LAYER 2 below) - overflow:hidden clips at .nav-links' own outer edge, not at its padding, so this only has to be wider than the ring, never as wide as the gutter. */ padding:var(--space-2) var(--space-gutter); } .nav-links a{ /* Horizontal padding is 0, not --space-3: .nav-links now supplies the gutter itself (above), so a second inset here would land the row text 12px past the brand name instead of level with it. width:100% still carries the full-row tap target regardless; min-height, not padding, is what guarantees its 44px height. */ width:100%;justify-content:flex-start; padding:var(--space-3) 0; border-bottom:var(--border-thin) solid var(--color-border-subtle); min-height:var(--space-8); } .nav-links a:last-child{border-bottom:none} .nav-links .book-link{display:flex;justify-content:center; margin:var(--space-3) 0 var(--space-1);border-bottom:none} } /* LAYER 3 (ADR-043). Added AFTER the LAYER 1 block above so it wins on source order at equal specificity, restoring the panel to normal flow only when scripting is unavailable. position:static alone is not the whole change - see the extended comment above LAYER 1: .wrap already supplies the gutter in flow, so the horizontal padding LAYER 1 needs for a floating panel would double-inset these rows, and the shadow/border that read as a floating layer's edge read as a stray line in normal flow. Undone here, nothing else. Left edges land level with the brand name, matching .wrap's own gutter with no separate inset of their own. */ @media(max-width:640px) and (scripting:none){ .nav-links{ position:static; /* width:100% is the property the ADR's own illustrative snippet did not spell out. Measured, not reasoned: without it .nav-links keeps its column-flex shrink-to-fit width (roughly the "Book a call" pill's own width) and .nav's flex-wrap never triggers, so the panel sits beside the brand on the SAME row instead of dropping to a second one - the exact wrong outcome the work order flagged as the likely defect. width:100% forces the wrap, landing the four items on .nav's own second row as ADR-043's contract requires. */ width:100%; padding-inline:0; box-shadow:none; border-bottom:none; } } /* LAYER 2: the collapsed panel. js/nav.js adds .js-collapsible, so these rules only ever apply when the script has actually run. Safe to leave exactly as it was pre-WO-139: max-height 0<->760px still animates the open and close, but .nav-links is position:absolute now (above), so growing or shrinking it no longer moves anything else on the page either way. */ @media(max-width:640px){ .nav-links.js-collapsible{ max-height:0;overflow:hidden;visibility:hidden; transition:max-height var(--motion-base),visibility 0s linear 200ms; } .nav-links.js-collapsible.is-open{ /* A deliberately generous cap. 320px is enough at normal text size but clips the last item at 200% text zoom, where the four rows measure roughly 330px. A cap only ever limits; the panel still renders at its natural height. */ max-height:760px;visibility:visible; transition:max-height var(--motion-base),visibility 0s; } /* visibility:hidden is belt and braces alongside the inert attribute the script sets: it keeps the collapsed links out of the tab order even in a browser that does not support inert. */ } @media(max-width:640px) and (prefers-reduced-motion:reduce){ .nav-links.js-collapsible,.nav-links.js-collapsible.is-open{transition:none} } /* ============================================================================= HERO ============================================================================= */ /* THE HERO. ADR-041 (decisions.md ~L2140): the image is a full-bleed layer behind the copy, not a side panel and not a CSS background-image. The stays real markup (srcset, sizes, fetchpriority="high" all preserved) so the preload scanner still finds it in the first parse - a background-image would delay the exact element that is the measured LCP element from 430px up. What was wrong before this rebuild, in numbers rather than adjectives: - the h1 was capped at max-width:16ch, which is 461px, inside a column that was already 546px wide. 85px of the column it owned went unused at every width, forever, and her 91-character headline wrapped to SEVEN lines at 1440px and at 1920px alike. - .home-visual was a 16/10 box in a 446px column, so the photograph rendered 446x279: an illustration beside an essay, not a hero image. - at 788px, the h1 spanned its full column while the lead paragraph (max-width:44ch, its own individual cap) wrapped into a narrower, unevenly-broken column beside a void the h1 above it did not have - three elements sharing a left edge but not a right one. What this rebuild does, none of it fixing the hero on its own: moves the image behind the copy as an absolutely positioned layer, drops the 44ch cap on the lead so headline/lead/buttons/note all read their measure from one shared 720px cap on .hero-copy, and hides the image below 720px instead of letting it sit in its own row (Paul's own complaint, at a measured threshold rather than an approximate one). The 4-line h1 at 1280-2560 is NOT fixed by this change and is not supposed to be - M-14: only a shorter headline moves that, and that is Mandy's line, not layout's. ------------ */ .hero{padding:clamp(48px,8vw,96px) 0 clamp(32px,5vw,64px);position:relative;overflow:hidden} /* This lives here, not as an inline style on the div in index.html, because no media query can override an inline style and this grid has to collapse to one column on a phone. */ .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:stretch} /* WO-146 item 4: 12px -> 14.4px (+20%). Letter-spacing (.18em) and weight (700) are untouched and do not need to be - both are em-relative or independent of size, so they scale or hold correctly with zero separate edit. Reaches all four labels ("Where you are now," "What could be," "About your coach," "Coming soon") with this one selector - all four carry the shared .eyebrow class. Contrast unaffected: colour tokens untouched, a larger glyph at the same colour only ever helps resolvability. PIXEL, 2026-08-14 (WO-154, ruling on WO-153; components.md 22.4): one further rung again, --text-base (16px) -> --text-eyebrow (19.2px), its own dedicated token rather than a shared one, so it can move independently of .btn and .foot nav a without dragging them with it - both still read --text-base directly and are untouched by this change. Tracking drops alongside it, .18em -> .14em. The earlier comment here argued tracking was em-relative and therefore needed no separate edit as size grew; Pixel overturned that: em-relative tracking still SCALES with size, it does not stay constant, so raising font-size while holding letter-spacing in em compounds the two increases together and produces visibly wider gaps between letters than intended. .14em at 19.2px lands close to the absolute tracking the labels rendered at before this wave. Weight (700) and colour are unaffected by either change and stay as they were. Still one selector for all four labels ("Where you are now," "What could be," "About your coach," "Coming soon") - all four carry .eyebrow. */ .eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.14em; font-size:var(--text-eyebrow);font-weight:700;color:var(--color-brand-primary)} /* max-width is deliberately absent, at every width, forever: this is the selector the standing warning at the top of the type-token block is about (search "Do NOT put a `ch` cap back on .hero h1"). The measure comes from the PARENT, .hero-copy, below - never from this selector. text-wrap:balance is a pure enhancement: where it is not supported the headline wraps exactly as it would have anyway. */ .hero h1{font-size:var(--text-hero-long);line-height:1.08; margin:0 0 var(--space-5);text-wrap:balance;max-width:none} /* The 44ch cap that used to sit here is WITHDRAWN (ADR-041 / hero-overlay-and- motion.md 3.1). It was protecting against a void that no longer exists once .hero-copy supplies one shared measure to every element in the stack; kept here it was the second half of the 788px mismatch, not a fix for it. */ /* WO-146 item 2: 1.2rem/400 -> 1.35rem/600. This is stroke legibility on a textured backdrop, a different problem from contrast - the scrim (below) already supplies the predictable ground, so no new colour or scrim mechanism is needed here, only weight and size. 600, not 700: reuses the site's own existing emphasis weight (.btn, .nap a) rather than inventing a louder one for this fix alone. */ .hero p.lead{font-size:1.35rem;font-weight:600;max-width:none} /* ============================================================================ THE HERO SENTENCE, READ AS ITS PARTS. PAUL 2026-08-20: the headline "seems like a lot of text for a title", and "clarity, confidence, and compassion" are "three distinct points... three methods or tactics that Mandy takes", the four struggles in the lead "are distinct struggles that clients may be facing", and "you don't have to figure it out alone is her crescendo, it is the hook". NOT ONE WORD OF HERS CHANGES, AND NOT ONE MARK. Both sentences are still exactly doc2 P18 and P19, em dash included, and both are still checked against VOICE_MANIFEST as whole sentences: the wrappers carry data-fold, so build.py's extractor folds them away and reads the sentence a visitor reads (see _VOICE_FOLDABLE_TAGS). This is presentation deciding where the eye pauses. It is not an edit, and it is not permission to make one. EVERY TREATMENT HERE IS CONTRAST-NEUTRAL BY CONSTRUCTION. Nothing below changes a text colour, because this hero sits on a photograph and its contrast was hard won: 2.40:1 at 320 before the wash was rebuilt, 8.88:1 and up now. Distinction is carried by weight, family, position and a rule under the word, never by lightening ink against a picture. Re-measured after the fact anyway, at nine widths, because a bigger or repositioned glyph samples different pixels even when its colour is identical. ============================================================================ */ /* 1. THE THREE QUALITIES. Their own line, which is the direct answer to "a lot of text for a title": the headline becomes a setup and a payoff instead of one 90-character run. Each quality is then marked by a rule underneath it, so three separate underlines say "three things" at a glance. A RULE, NOT A COLOUR. Brand green on the wash measures about 5.6:1 and would have passed, but it would have been the only place on the site where meaning is carried by colour alone, which fails WCAG 1.4.1 for anyone who cannot separate the hue. The underline reads for everyone and costs no contrast. */ /* 1. THE THREE QUALITIES. Their own line, which is the direct answer to "a lot of text for a title": the headline becomes a setup and a payoff instead of one 90-character run. THREE LINES, NOT FOUR OR FIVE. Paul asked for exactly three, so the setup takes two and the qualities take one. That only works if all three words plus their commas fit a single line inside the hero's copy measure, which at 44.8px they do not: measured, they need about 700px against roughly 560px of column at 1440. Hence the .82em step down. The qualities are not being demoted by that; they are being made to fit the line they were given, and everything else here is spent making them the most distinct thing in the heading. ITALIC, AND A DIFFERENT FACE. The underline that was here first is GONE at Paul's request. In its place the three words switch to the sans stack in italic against the h1's serif, which is a larger difference than an underline was: a reader sees a change of voice mid-sentence rather than a decoration under three words. Letter-spacing opens very slightly because a sans italic set among serif caps otherwise looks crowded at display size. IT ALSO COSTS NOTHING IN CONTRAST, which is the constraint that governs everything in this hero. No colour changes here. The ink is the same ink, measured at 11.25:1 and up against the photograph, and the previous version's green rule is no longer present to be mistaken for the text ground by a contrast sampler (which is exactly what happened, at a precise 2.42:1). */ .hero h1 .h1-qualities{ display:block; margin-top:.16em; font-family:var(--font-sans); font-style:italic; font-size:.78em; /* holds all three on ONE line, measured */ /* .78 IS MEASURED, NOT CHOSEN BY EYE. The three words plus their commas need 598px at 36.7px, and the hero's copy column is narrowest at 1280, where it gives 583px. That is the binding case: it fits at .799em there and more easily at 1440 (.816) and 1920 (.847). .78 takes the tightest of those and leaves a little room, so one line holds from 1024 up. A first pass used .82 because it looked about right, and it wrapped to two lines at exactly the two widths nobody had rendered. */ font-weight:600; letter-spacing:.005em; } .hero h1 .quality{white-space:nowrap} /* never break a method across lines */ @media(max-width:520px){ /* At 320 to 520 the three plus their commas cannot hold one line at any size worth reading, so the nowrap is released and they wrap as a group. The italic sans still marks them; only the one-line promise is dropped, and it is dropped on the widths where it was never keepable. */ .hero h1 .quality{white-space:normal} .hero h1 .h1-qualities{font-size:.86em} } /* 2. THE FOUR STRUGGLES. The sentence keeps its shape and its commas; what changes is that her four situations now carry the weight and the words joining them step back. Before this, "Whether you're", "or" and every struggle were all one flat 600, so the four things a visitor is meant to recognise herself in had no more presence than the grammar around them. This is why .hero p.lead drops to 500 rather than the struggles climbing past 700: at 21.6px the difference has to come from somewhere, and taking it out of the connectives keeps the heaviest thing on the line her content. */ .hero p.lead{font-weight:500} /* PAUL 2026-08-21: "change the bold in this sentence to italics instead". The four struggles keep the distinction, they just stop shouting it. Bold at 21.6px across four separate phrases in one sentence made most of the lead heavy, which is the opposite of picking things out of it. Italic marks the same four items and leaves the sentence at one weight. */ .hero p.lead .struggle{font-style:italic} /* 3. THE CRESCENDO. Own line, serif, larger than the lead and set apart from it. The em dash stays where she put it, at the end of the struggles, so the hook arrives as the turn after her dash rather than instead of it. Deliberately smaller than the h1 (28.8px ceiling against 44.8px). It is the hook, not a second headline, and two competing display sizes in one hero is the thing that made this block feel unresolved in the first place. */ .hero p.lead .hero-hook{ display:block; position:relative; /* PAUL 2026-08-21: "reduce the amount of white space above". It was carrying space-6 of margin PLUS space-5 of padding, and the padding existed only to clear the 72px rule that used to sit above this line. That rule was removed yesterday and its padding was left behind holding a gap open for nothing. One margin now, one step smaller. */ margin-top:var(--space-4); font-family:var(--font-serif); font-size:clamp(1.45rem,2.5vw,2rem); font-weight:600; line-height:1.22; text-wrap:pretty; } /* NO RULE ABOVE THE HOOK. One was added here and Paul cut it: "remove the green line above you don't have to figure it out alone, it looks weird". It was the narrative bands' 72px axis rule borrowed into the hero, and borrowing it was the error. In those bands the rule opens a section on an empty ground; here it landed mid-sentence, a few pixels under her own em dash, so it read as a strikethrough or a stray divider rather than a turn. The hook is carried by what it already had: its own line, the serif face, a size step, and the space above it. That is enough, and it was enough before the rule was added. */ .hero-cta{display:flex;gap:.7em;flex-wrap:wrap;margin-top:var(--space-7);max-width:none} /* BELOW 593px THE TWO HERO BUTTONS FILL THE COLUMN. PAUL 2026-08-23: "widths of 350 to 592, let's make the Book a complimentary discovery call and See how coaching helps buttons on the top of the home page full container width." They already stacked at these widths, because .hero-cta wraps, so this is not about the layout breaking. It is about the RAGGED EDGE: measured at 430px, the primary sat at 314px and the secondary at 224px, two different widths left-aligned under each other, which reads as an accident rather than as a pair. Full width makes them a pair, and gives the primary action a target the whole width of the reading column, which on a phone is the point. Applied from the smallest supported width rather than from 350. Paul named 350 because that is where he was looking; nothing changes at 348 that would justify leaving 320 to 349 ragged, and at 320 the buttons are the most cramped of all. THE BREAKPOINT IS 609px, NOT THE 592px PAUL NAMED, AND IT WAS FOUND BY SWEEPING RATHER THAN BY ARITHMETIC. He gave 592 as the top of the range he was looking at. Stopping there would have left 593 to 609 in the worst state of all: wrapped onto two rows AND still two different widths. Two attempts to derive the number from button widths and gaps landed on 592 and then 607, and both were still wrong at the edge. Swept in 1px steps with the rule disabled, the pair wraps at 609 and fits one row from 610. So the rule ends at 609 and covers every width where these buttons wrap, which is what the request was actually about. */ @media(max-width:609px){ /* PAUL 2026-08-23, refining the above: "let's instead match the width and centering of the CTA button in the Ready for Your Next Chapter? section down below. To where all three buttons are the same width and show as centered." Scoped, at his direction, to these viewport sizes only. Full-column width fixed the ragged edge but did not match that button, which is centred and sized to its own label rather than to the column. GRID, NOT A HARD-CODED WIDTH. A single implicit grid column is sized to max-content, which here is the widest of the two buttons, and both items then stretch to fill it. So they come out identical to each other AND identical to the closing CTA, because the closing CTA carries the very same label, "Book a complimentary discovery call", and is therefore the same 314px. Measured, all three. Writing 314px here instead would have worked today and rotted the first time anyone edits that label, silently, in one of the two places only. min(100%, max-content) is what keeps it honest below about 350px, where the column is narrower than the label needs: the track stops at the container instead of overflowing it, which is exactly what the closing CTA does at those widths. */ .hero-cta{ display:grid; grid-template-columns:min(100%, max-content); justify-content:center; gap:.7em; } .hero-cta .btn{width:auto} } .hero-note{margin-top:var(--space-6);font-size:1.05rem;font-weight:600;max-width:none} /* One shared measure for the whole copy stack, at every width, not just 1024px+ (hero-overlay-and-motion.md 3.1). Below 1024px .hero-copy has no padding of its own - the gutter comes from the ancestor .wrap - so the plain 720px token is the whole story; the 720px-plus-both-paddings version lives in the 1024px+ query below, where .hero-copy supplies its own padding instead of inheriting .wrap's. position:relative is unrelated to the measure: it is what lets this box win the paint order against .home-visual (ADR-041 point 1, see the HOME section below) with no z-index needed, at the widths (720-1023px) where the image sits behind it but .hero-copy is not yet inside the 1024px+ query that would otherwise supply it. */ .hero-copy{position:relative;max-width:var(--measure-prose)} /* TEXT COLOUR OVER THE PHOTOGRAPH, AT EVERY WIDTH (WO-146 item 1, reversing the earlier 720px hide ruling). This used to be gated at min-width:720px, paired 1:1 with the image-hide breakpoint that used to sit on .home-visual in the HOME section below. Both gates are removed together in this change, so the image and this colour rule are unconditional at every width and there is no second number left to keep in sync. hero-overlay-and-motion.md 1.2-1.5: every text role over the photo uses solid --color-text-inverse (white), never an opacity or muted tone - 1.4 measured 85%-opacity white and the site's own .muted tone both landing under the 4.5:1 floor over this photograph's worst-case tone. Hierarchy between the lead and the fine-print note is carried by size and weight only from here up. .btn-ghost gets a scoped dark-backdrop variant, not a global change: its live rule is calibrated for a light ground and reads as near-invisible on the scrimmed photo. Contrast re-measured against the real rendered pixels, not estimated - see the handoff for the numbers. */ /* PAUL 2026-08-20: THE HERO STOPS USING DARKNESS TO MAKE ITSELF READABLE. His words: the "Ready for Your Next Chapter?" band "doesn't use darkness or black to help the viewer read the text", and next to it this one "just seems gloomy". That is exactly right, and the inconsistency was ours. This site has three photographs with words over them. "What could be" and "Ready for Your Next Chapter?" both lay a LIGHT oat wash over the picture and set her words in dark ink. The hero was the only one doing the opposite, dimming a bright morning wheat field to near-dusk so white type would sit on it. So it joins the other two: light wash, dark ink. The photograph gets brighter rather than darker, the page stops changing mood between its first band and its last, and the copy reads as the same voice throughout. White text is gone from this section, so every rule that existed only to support it goes with it: the inverse colour on the headline, lead and note, and the white-outlined ghost button with its translucent white hover. The ghost button now inherits the sitewide .btn-ghost, which is dark text on a strong border and is what it looks like on every other page. */ .hero h1,.hero p.lead,.hero .hero-note{color:var(--color-text-primary)} /* The note keeps PRIMARY ink rather than dropping to secondary, and that is a measurement rather than a preference. Tried at secondary first: it came back 3.43 to 4.21:1 across the width sweep, failing 4.5:1 at eight widths, because a light wash over a bright wheat field simply does not leave room for a grey. Exactly the same trade .next-chapter had to make for its own reassurance line, and made for the same reason. The hierarchy here was never carried by colour anyway: 30.4px headline, 21.6px lead, 16.8px note. */ /* --- Stacked hero, below 1024px. The .home-visual half of this - including the rule that hides the image entirely below 720px - lives with the base .home-visual rule in the HOME section further down, NOT here. It has to: media queries add no specificity, so a rule written here would be beaten by the base rule simply because the base rule comes later in the file. Every shape override on that box is therefore kept next to it, in one place. -- */ @media(max-width:1023px){ .hero-grid{grid-template-columns:1fr;gap:var(--space-7)} } /* --- 1024px and up. .hero-grid keeps its two-track split with the second track deliberately left empty (ADR-041 point 3): the image is no longer a grid item at all, so this track's own sizing concerns no longer apply to it, but leaving the split in place is what keeps the padding-inline-start formula below and the 1600px measure cap further down untouched - deliberate minimum churn, not an oversight. The padding-inline-start formula is UNCHANGED from before this rebuild. It lands the first character of the headline on exactly the same left edge as every other section on the page: at 1440px it computes to (1440-1080)/2+22 = 202px. Below the container width the max() falls back to the plain gutter, so nothing is ever pushed off the left. This is also now the reason .hero-grid keeps a grid at all above 1024px even with one live child: nothing else on the page reproduces this axis formula. ----------- */ @media(min-width:1024px){ .hero{padding:0} .hero-grid{ max-width:none;padding:0; /* minmax(0,...) on BOTH tracks, and it is load-bearing, unchanged from before this rebuild: an fr track's automatic minimum is its content's min-content size, and without this a wide intrinsically-sized child (there is none today, since the image left the grid, but a future one is not impossible) could force the track past its fr share the same way the photograph once did. Measured, not reasoned, historically. */ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:0; } .hero-copy{ display:flex;flex-direction:column;justify-content:center; padding-block:clamp(56px,7vw,104px); /* --hero-inset is the SAME formula as the padding-inline-start value always used here, named so max-width below can reuse it without a second, drifting copy of the expression. The formula itself is untouched (ADR-041 point 3: "the padding-inline-start axis formula... untouched"). */ --hero-inset:max( var(--space-gutter), calc((100vw - var(--container-max))/2 + var(--space-gutter)) ); padding-inline-start:var(--hero-inset); /* Was clamp(40px,4.5vw,64px), sized to buffer the text column from the image PANEL that used to sit beside it. There is no panel to buffer from any more - the image is behind the text, not beside it - so this is now the plain page gutter, same as every other section's right edge (hero-overlay-and-motion.md 3.1). */ padding-inline-end:var(--space-gutter); /* This formula ALONE would give exactly 720px of content (--hero-inset + 720 + 22 - --hero-inset - 22, the inset cancels out). MEASURED, this is a ceiling, not the rendered value: the 1.15fr grid track this box sits in (above) is narrower than that ceiling for most of this query's range - e.g. 604px of content at 1440px, 545px at 1024px, both real renders, not this arithmetic - so the box is track-clamped, not max-width-clamped, there. The max-width still does its real job either way: it is what makes h1/lead/buttons/note share ONE measure, whichever mechanism ends up narrower at a given width, which is the actual fix for the 788px void (Pixel's diagnosis: the mismatch between elements was the bug, not any one being too narrow). Re-measured, not touched further: ADR-041 keeps the 1.15fr/.85fr split as deliberate minimum churn, and ~600px still clears the old 562-576px split-hero column it replaces. */ max-width:calc(var(--hero-inset) + var(--measure-prose) + var(--space-gutter)); } /* The .home-visual half of this query is in the HOME section, next to the base rule for that box. See the note in the 1023px query above. PAUL 2026-08-19: this used to say "including the parallax re-scope". There is no width re-scope any more; the parallax runs wherever the browser supports scroll-driven animations and the visitor has not asked for less motion, at every width. The block in the HOME section carries the reason. */ } /* From 1600px the fr split would keep stretching the headline past a readable measure, so the text column stops growing: it is the left offset (dead margin, not text) plus a fixed 640px, which holds the headline measure at roughly the 576px it has at 1440px. Everything past that goes to the image panel. 640px is not an arbitrary number: at exactly 1600px this column computes to 922px and the 1.15fr split gives 920px, so the two agree at the breakpoint and nothing jumps. components.md 19.1. */ @media(min-width:1600px){ .hero-grid{ grid-template-columns: minmax(0,calc((100vw - var(--container-max))/2 + var(--space-gutter) + 640px)) minmax(0,1fr); } } /* ============================================================================= SECTIONS ============================================================================= */ /* UNCHANGED IN EFFECT. The literal clamp moved into --space-section-y in :root (WO-162) purely so the arch's clearance calc can consume the same value rather than restating it; --space-section-y IS clamp(40px,6vw,72px). */ section{padding:var(--space-section-y) 0} .section-alt{background:var(--color-surface-sunken)} /* WO-206. One-off, named rather than a bare utility: a section whose last child is a full-bleed band meant to run into the footer with no page ground showing between them. Only removes THIS section's own bottom padding; the shared `section{padding:...}` rule above is untouched for every section that does not carry this class, on every other page. Bookings is the only page that uses it today (the contact band). */ .section--flush-end{padding-bottom:0} /* --space-7 (32px) is the fourth tier of the ladder: a heading block to the section under it. The value is the same 32px that `2em` used to produce here; it is now a token, so it cannot drift with a font-size change. */ .section-head{max-width:60ch;margin:0 auto var(--space-7);text-align:center} /* h1 is included so a page whose main heading sits in a .section-head does not need an inline font-size to match the h2 it replaced. */ .section-head h1,.section-head h2{font-size:var(--text-display-sm)} /* Second tier of the ladder: a heading to the copy directly under it, 24px. The base rule zeroes every heading margin, so the gap under a .section-head heading was whatever line-height leading happened to be left over: 8px on About's "Let's take the first step". This sets it deliberately. Where the heading is the only child, its bottom margin simply collapses with the block's own, so nothing moves on the heading-only sections. */ .section-head>h1,.section-head>h2{margin-bottom:var(--space-6)} .section-head p{color:var(--color-text-secondary);margin-top:0} /* --------------------------------------------------------------------------- TEMPORARY. DELETE THIS RULE AND ITS ONE USE WHEN BAND 2 SHIPS. Band 2 (next-chapter-layout.md 6.4) is designed to carry the "How I Can Help" H2 inside the band itself, right-aligned, which retires the centred .section-head for that one heading. Band 2 is not built: no image is sourced. Meanwhile Block A has left-aligned Mandy's narrative to the 202px page axis, and a centred heading sitting directly under a left-aligned prose column is the exact defect recorded further down this file at the .prose-band comment, found once already on About. Sketch ruled on which inconsistency is the lesser (next-chapter-layout.md 8.1): one named heading stepping out of the site's centred-heading convention for a stated, temporary window, rather than a second instance of a bug already on record. Re-centring her narrative to protect the convention was rejected, because that restores the 461px misalignment this whole change exists to fix. margin-inline:0 rather than a new margin shorthand, so the .section-head bottom margin (--space-7) is untouched. The 60ch cap stays and is invisible: the heading is three words. --------------------------------------------------------------------------- */ .section-head--axis{margin-inline:0;text-align:left} /* Page-level heading outside a .section-head (the About page). Was `.3em 0 .5em` of a fluid font size, which measured 22px under the heading at 1440px and a different number at every other width. Same two tiers of the ladder as everywhere else now. */ .page-h1{font-size:var(--text-display-md);margin:var(--space-3) 0 var(--space-6)} /* The fourth tier again: the last thing in a block, then the action button under it. Replaces three inline `style="margin-top:1.4em|1.6em"` rules, which were the only spacing values on the site a media query could not reach and a token could not describe. */ .action-row{margin-top:var(--space-7)} /* THE SAME SPECIFICITY TRAP, ONE ELEMENT FURTHER DOWN, and it is why this rule exists. `.section-head p` above sets margin-top:0 at (0,1,1); `.action-row` is (0,1,0) and loses, so on the two closing blocks whose button sits inside a .section-head the ladder's 32px was silently never applied. MEASURED at 1440px: 0px on Home's closing ask and 8px on About's, against the 32px both were specified to have. It had been invisible while the line above the button was 16px grey. It is not invisible now: components.md 21.4 promotes Home's ask to 30.4px serif and states that ".action-row's --space-7 (32px) still supplies the gap to the button", so with 0px the button sat on that sentence's descenders. Reaches exactly two elements on the site (index.html closing ask, about.html closing ask); every other .action-row is outside a .section-head and already had its 32px. No spacing VALUE changes here: the ladder is untouched and simply arrives where it was always meant to. */ .section-head .action-row{margin-top:var(--space-7)} /* THE LAST THING IN A BAND SHOULD NOT ALSO CARRY A PARAGRAPH'S BOTTOM MARGIN. PAUL, 2026-08-28: "There is too much white space underneath the 'Read all posts' button." .action-row is a

, so it inherits the body paragraph's 16px bottom margin. When it is the last child of a band, that 16px sits on top of the band's own 72px padding and does nothing except make the gap wrong. Measured at 1280: 88px under the button, against the 72px the band is specified to have. Scoped to :last-child so it only reaches an action row with nothing after it. An .action-row followed by anything still keeps its margin, because there it is doing a real job. The larger half of that complaint was structural, not a value: this band and the one after it were both .section-alt, so 72 + 72 read as one 144px void. That is fixed by the move recorded in index.html, not here. */ .action-row:last-child{margin-bottom:0} /* THE ONE SENTENCE THAT CARRIES THE ASK (components.md 20.7 and 21.4). Two sentences that read identically become a supporting line and an ask. Home's closing block and the Bookings page had the same fault for the same reason: the reassurance and the instruction sat in two

elements inside a .section-head, so both rendered 16px --color-text-secondary, and the instruction disappeared into the comfort. The neighbour above each of these stays 16px secondary on purpose: the difference between them IS the fix. SCOPED WITH .section-head ON PURPOSE, ON BOTH CLASSES. DO NOT DROP IT. `.section-head p` above sets --color-text-secondary at specificity (0,2,1). A class-only `.cta-line{color:...}` is (0,1,0) and loses, so the sentence would silently keep rendering grey while every other declaration in the rule applied, which is the hardest version of this bug to see. Both classes sit inside a .section-head today; if either is ever used outside one, add the unscoped selector then, and not before. No border and no left rule: both blocks are centred, and .pullout's 3px rule plus 20px padding would push the text off its own axis. */ .section-head .cta-line, .section-head .offer-line{ font-family:var(--font-serif); font-size:var(--text-display-quote); /* 20.8 -> 30.4px */ line-height:1.3; /* PAUL, 2026-08-12: .cta-line, and ONLY .cta-line, drops one rung to --text-display-quote-soft in the rule further down this block. The size declaration stays here on the shared selector so .offer-line keeps reading it, because Bookings' offer was not in that instruction. Every other declaration in this rule - family, line-height, colour, balance - is still genuinely shared by both and must stay shared. */ color:var(--color-text-primary); /* 13.58:1 on the page ground */ text-wrap:balance; /* these blocks run 2-3 lines, which is exactly what balance is for */ } /* WO-140 / hero-overlay-and-motion.md 6.2, QA-R09-005. The stale 34ch cap below is WITHDRAWN, not shrunk: it was computed before the 30.4px promotion (components.md 21.4) and never revisited, and QA correctly declined to call it the cause - the actual binding constraint was always the ANCESTOR .section-head's own unwidened 60ch column (~474-480px), sized for 16px running text, wrapping a 30.4px four-word-per-line display sentence to four lines at 1440px. Larger type in an unchanged column wraps to MORE lines, not fewer. Scoped with :has() so no other .section-head on the site is touched - the shared 60ch rule above stays exactly as-is everywhere else it applies. Same graceful-degradation pattern already live at this file's .latest-block:has(.latest-empty) rule: in a browser without :has() support this whole amendment is inert and the page reverts to today's cramped-but-legible four-line wrap, not a broken one. Zero HTML changes - .cta-line is reliably the promoted-ask paragraph inside this one block. */ /* WO-146 item 6. Bookings uses .offer-line, not .cta-line, for the identical promoted-line treatment above (font/colour/weight already shared by both selectors) - a different class this widening rule never named, so Bookings' block was never covered. Item 5 (About) already matched the .cta-line selector alone and needed no edit - verified by reading about.html's markup: its closing block is class-for-class identical to Home's (.wrap.section-head > h2, p, p.cta-line, p.action-row). Same formula, one selector added. */ .section-head:has(.cta-line), .section-head:has(.offer-line){ max-width:calc(960px + var(--space-gutter)*2); } /* PAUL, 2026-08-14 (WO-177): About, Home and Bookings share ONE width, set by the rule above. The old 764/924 split is closed deliberately; if you find yourself adding a second max-width here, that is the drift this note exists to stop. TWO THINGS THAT STILL BIND. (1) The Bookings h1 has no max-width of its own and must not be given one - the parent supplies the measure. (2) The map is held at 764x382 by .office-map .map-frame in the BOOKINGS section below. That cap is what stops the 2:1 frame taking the container's full width, and it is now doing 240px of work rather than 160px. Do not remove it. */ /* WO-154 item 9 (components.md 22.12): insurance, not a fix. Pixel observed the Bookings h1 fills this 880px box with essentially zero tolerance today, so any future copy change orphans a word onto its own line. text-wrap does not change the measure and the h1 still has no cap of its own (see above - do not add one); where balance is unsupported the heading wraps exactly as it does today. Scoped to :has(.offer-line) alone so the shared .section-head h1,.section-head h2 rule elsewhere in this file, which other pages also use, is untouched. */ .section-head:has(.offer-line) h1{text-wrap:balance} /* The reassurance sentence above the ask keeps exactly the measure it already renders at today - 68ch of its OWN font (measured, dated 2026-08-14, QA-R15), stated on itself now rather than inherited from a parent about to grow, so it does not stretch into an overlong line once the parent above widens. WO-146 moved body to --text-md (17.6px), which this rule reads by inheritance, so the true figure is ~606-640px (inferred: 68ch scaled from the same per-character ratio this note already used for 60ch, not re-measured against the live page), not the ~474-480px a 16px font would have produced. Targeted by position, not a new class: it is reliably the first

before the promoted line in this one block. text-wrap:pretty (WO-154, components.md 22.4) guards against the line-ending orphan observed on About's copy of this sentence; Home's identical block gets it for free since both share this one selector. */ .section-head:has(.cta-line) > p:first-of-type{ max-width:68ch;margin-inline:auto;text-wrap:pretty; } /* Home's ask. The parent above now supplies the ask's own room directly (same "parent supplies the measure, the child reads max-width:none" pattern the hero fix already uses), so the cap here is withdrawn rather than resized. 24px gap to the reassurance line above is unchanged; .action-row's 32px still supplies the gap down to the button. PAUL, 2026-08-12: the size drop lands here rather than on the shared .cta-line/.offer-line selector above, so Bookings' offer line is untouched. Reaches both copies of this sentence, Home's and About's, because both are class-for-class identical blocks. */ .section-head .cta-line{max-width:none;margin:var(--space-6) auto 0; font-size:var(--text-display-quote-soft);text-wrap:balance} /* 19.2 -> 28px */ /* Bookings' offer. Not capped: it is the page's own promise, directly under the h1, and it holds #booking-intro-live, the hidden span js/bookings.js reveals when a real calendar is configured. That span must stay inside this sentence, so this treatment may never be turned into discrete fields or the live sentence is stranded. */ /* PAUL 2026-08-19: "reduce this text size some". One rung down, from --text-display-quote (30.4px ceiling) to --text-display-quote-soft (28px), which is EXACTLY the drop he asked for on the sibling promoted lines on 2026-08-12 and which this line was deliberately left out of at the time (the token block's own comment records why: its complaint then was width, not size, and it got a widening instead). Both remedies now apply. Declared HERE, on the one selector, and not by moving the shared rung above, which is the same discipline the 2026-08-12 change followed and which the token's comment exists to protect: three other rules read --text-display-quote and none of them was in this instruction. No fourth token, because the rung this needs already exists. */ .section-head .offer-line{margin:0 0 var(--space-6);max-width:none; font-size:var(--text-display-quote-soft)} /* 19.2 -> 28px */ /* Explicit for clarity and future-proofing, matching .cta-line's own explicit max-width:none two rules up - harmless today since nothing constrains this line without it, but states the intent instead of leaving it to inherit silently. */ /* Long-form prose block (Home's body copy, WO-100). Same 60ch reading column as .section-head, left-aligned rather than centered because this is running narrative, not a heading. HOW MANDY'S PACED LINES ARE BUILT, AND WHY IT MUST STAY THIS WAY. Her copy is written as single lines with deliberate breaks between them: eight lines, a break, then seven on Home; three and three and four in the cards. Those breaks are hers and they are correct. They used to be
tags, which cannot be styled, cannot take a token and cannot respond to a media query, so the space between one of her lines and the next was whatever the font's leading happened to leave and it differed from block to block. Each line is now its own .beat element at exactly the same break position, and .stanza is one group of lines. Do not merge her lines back into prose. Do not turn them into a list. Do not add, remove or move a break. Only the mechanism changed here; not one word and not one break position did. THE VOICE (components.md 20.1-20.2, WO-120 Block A). This block is now set as the page's second voice rather than as default body copy, which is what it was: no font-size, no colour and no family of its own, so it rendered at 16px sans while the three cards beside it carried four decisions each. The fault was never that it was small. It was that no type decision had ever been made about the most important passage on the site. One rule for both places it appears: Home's paced block and About's "My Approach". Nothing below adds, removes, merges or re-times one of her lines; every promotion is addressed by selector, so her markup is untouched. */ .narrative{ /* was 60ch, which measured 518px only because the block was 16px sans. ch is relative to this element's own font-size, so capping with min() against the site's prose measure keeps measure and type size moving together: about 65 real characters a line at every width, and the 24px ceiling can never stretch the line past --measure-prose. */ max-width:min(var(--measure-prose),62ch); margin:0 auto; /* base unchanged; Home opts out below */ font-family:var(--font-serif); font-size:var(--text-narrative); line-height:1.4; color:var(--color-text-primary); /* 13.58:1 on the page ground, 12.28:1 on sunken. Both cited from components.md 20.2 and 20.4, not re-derived here. */ } /* Reaches About's two paragraphs only. .narrative .beat below outranks it on Home, so her paced lines keep their own tighter rhythm. */ .narrative p{margin:0 0 var(--space-6)} /* HOME ONLY, and this one declaration is the whole alignment fix. `margin:0 auto` above centred a 518px box inside 1036px of content, which put her first character at (1036-518)/2+202 = 461px while the hero headline sat at 202px and the card grid at 202px. Her narrative was the one element on the page that opted out of the axis the hero's own comment (see line ~596) commits the page to. Removing the auto puts it back on that edge. Scoped to a class rather than changed on .narrative because About's "My Approach" keeps the centred prose band WO-112 built specifically to stop a stranded left column, and must not inherit this. */ .narrative-lead{margin-inline:0} @media(min-width:1920px){.narrative-lead{max-width:min(840px,62ch)}} /* One line of hers. 16px, one step up from the 8px this used to be, because a 32px line box needs more than 8px to keep one line of hers from reading as the wrapped continuation of the line above it. Same 4px scale, one step. */ .narrative .beat{margin:0 0 var(--space-4)} .narrative .beat:last-child{margin-bottom:0} /* Outside .narrative (the three help cards, About's closing block) her lines keep the original 8px step. */ .beat{margin:0 0 var(--space-2)} .beat:last-child{margin-bottom:0} /* One group of her lines. This is the blank line in her own document. */ .stanza{margin:0 0 var(--space-7)} .stanza:last-child{margin-bottom:0} /* THE FIRST AND LAST LINE OF A MOVEMENT CARRY THAT MOVEMENT'S WEIGHT. Her own words, promoted by selector. No copy is added and none is cut. THIS REPLACES the two positional rules that used to live here (`.narrative .stanza .beat:first-child` and `:last-child`, components.md 20.2). They were DELETED, not extended, and the deletion is not optional. With the turn split into its own section (see 21.2 and index.html), Movement 1's :last-child is no longer her turn line: it is "Or maybe you've simply looked around..." at 124 characters. The old rule promoted it to 30.4px, which gave her single longest line the second-heaviest treatment in the block and stood a three-line 30.4px slab directly above the turn it is supposed to lead into. Positional selectors were right when the block was two stanzas; they are wrong now, so every promotion below is addressed per movement instead. STILL SCOPED, AND THIS IS STILL THE ONE BUG THESE RULES CAN SHIP. `.beat` is also used inside `.card` (see .card .beat above) and in About's closing block, so an unscoped `.beat:first-child` would blow the three "How I Can Help" card openers from 15.36px up to 38px and destroy that section. Every selector below is scoped by a movement class AND by .stanza, so the cards are twice out of reach. If .stanza is ever added inside a card, re-check this first. */ /* WO-162: the Imagine half of this pair is now addressed by wrapper class rather than by position. "Imagine…" is no longer the first child of .stanza - it sits inside .imagine-lead with its eyebrow, which is what puts the pair in column 1 of the hung lead-in - so `.stanza .beat:first-child` stopped reaching it and her lead-in would have silently dropped to body size. The recognition half is untouched and still positional, because that stanza's shape did not change. Both are still scoped by a movement class AND by a second class, so the "How I Can Help" cards remain twice out of reach. EVERY POSITIONAL SELECTOR IN THIS GROUP NOW USES A CHILD COMBINATOR, AND THAT IS NOT TIDYING. `.stanza .beat:last-child` is a DESCENDANT selector, so the moment .stanza gained wrapper divs it started matching the last .beat inside EACH wrapper: it caught "Imagine…" (last child of .imagine-lead) and her fifth line (last child of .imagine-stanza), and set both to 28px/600. Measured in the browser before the fix: "Learning to care for yourself with the same compassion you've always offered everyone else." rendered at 28px bold, and "Imagine…" LOST its 38.4px promotion to the same rule, because the two selectors tie on specificity and the landing line's is later in the file. `>` is what makes each of these address exactly one element. */ .narrative-recognition .stanza>.beat:first-child, .narrative-imagine .imagine-lead>.beat{ font-size:var(--text-display-sm); /* 27.2 -> 38.4px, the same token .section-head h2 uses, so her line reads at heading scale */ line-height:1.15; /* = h1/h2 */ font-weight:600; /* = h1/h2 */ margin-bottom:var(--space-6); text-wrap:balance; /* pure enhancement, same rationale as .hero h1: unsupported means it wraps exactly as it would have anyway */ } /* Her close, "That next chapter is possible." */ .narrative-imagine .stanza>.beat:last-child{ font-size:var(--text-display-quote-soft);/* PAUL 2026-08-12: 19.2 -> 28px. UNCHANGED by WO-162. His value, not ours, and the size step is not what was broken. */ line-height:1.25; /* WO-162 / components.md 23.7, was 400. The declared SIZE step already existed and still failed to land, because this line and the five above it were the same weight, the same serif, the same ink and the same ground; at 1920 --text-narrative overrides to 24.8px, so the step compresses to 28 against 24.8, a ratio of 1.13, under the threshold at which a serif size step is perceptible at all. More of a failing device is not the fix. None of the three serif faces ships a 600, so this resolves to 700 - which is the point: it is exactly the weight "Imagine…" above the stanza renders at, so her opener and her closer bracket the stanza as a matched pair, one at 38.4px and one at 28px. That pairing is what makes the passage read as a sentence with a beginning and an end rather than a list with something after it. Ink on oat, 10.58:1, unaffected. DO NOT ALSO RAISE THE SIZE. */ font-weight:600; /* WO-195 / 10.12 ruling 2: 24 -> 32px. This is the OUTSIDE gap below her five lines, and it has to stay larger than the 12px inside gap between them or the group has no edge. Paired with the marker and the 12px in .imagine-stanza below; all three are one change. */ margin-top:var(--space-7); text-wrap:balance; } /* The turn's setup line. One step above her body voice, so the turn's own two lines are a two-step crescendo rather than a matched pair. */ .narrative-turn .stanza>.beat:first-child{ font-size:var(--text-display-quote-soft);/* PAUL 2026-08-12: 19.2 -> 28px */ line-height:1.3; font-weight:400; margin-bottom:var(--space-6); text-wrap:balance; } /* The hinge of her whole argument, and the largest type on this site that is not the hero h1 (44.8px). Above every h2 (38.4px) on purpose: it is a promoted sentence of hers, not a heading, and an editorial pull line outranking a section heading is normal. It wins on three axes, not one: size (44.8 against the openers' 38.4), contrast (14.79:1 on white against 10.58:1 on oat) and ground (the only white full-bleed band on Home). PAUL, 2026-08-12: 44.8 -> 41.6px, about 7% off, the same reduction her setup line above and every other promoted line took, because his instruction named the turn's two lines together as one block and this is the second of them. ALL THREE OF THIS LINE'S ADVANTAGES SURVIVE THE REDUCTION AND THAT IS THE CONSTRAINT, not the number: 41.6px still outranks every h2 on the site (38.4px) and still outranks her movement openers (38.4px), so it is still the largest type on Home that is not the hero h1. Contrast and ground are untouched by a size change. Do not take this below 38.4px: at or under it this stops being the hinge of her argument and starts reading as one more heading, which is the whole thing this rule exists to prevent. WRITTEN AS ITS OWN CLAMP RATHER THAN A TOKEN EDIT. --text-display-md has three consumers and only this one was in the instruction: About's .page-h1 ("Hello! My name is Mandy.") and a blog post's .article h1 also read it and must not move. The ramp is the token's own shape stepped down in place - 4.2vw against 4.5vw - so the floor and the ceiling still meet the ramp at the same viewport widths they always did (about 678px and about 990px), measured rather than assumed. */ .narrative-turn .stanza>.beat:last-child{ font-size:clamp(1.78rem,4.2vw,2.6rem); /* 28.48 -> 41.6px */ line-height:1.1; font-weight:600; margin:0; text-wrap:balance; } /* The eyebrow labels the line under it. 12px is not a new value: it is the eyebrow-to-heading gap already shipped on About, where .page-h1's margin-top supplies it. Both rules are inert until the eyebrow copy exists: it is Wordsmith's to write and it has not been written (see handoffs/HO-122.md). They are here so that landing it is a one-span markup edit and no CSS. */ .eyebrow+.narrative-lead{margin-top:var(--space-4)} .section-head .eyebrow{display:block;margin-bottom:var(--space-4)} /* WO-154 item 5 (components.md 22.4): About's heading is a .page-h1 outside any .section-head, so neither rule above ever reached it. Without this, About would be the one instance where the label grew but the gap under it did not, crowding the heading it labels. */ .eyebrow+.page-h1{margin-top:var(--space-4)} /* WO-160 (QA-R13-001): Blog's "Coming soon" eyebrow sits in .notice-card, directly above a

, not a .narrative-lead, .page-h1 or .section-head, so none of the three rules above ever reach it. It is also the one eyebrow instance with no adjacent heading, so a missing gap reads as the card's own heading rather than as a label. Same step, same var, matching .section-head .eyebrow above rather than a one-off number. Scoped to .notice-card so it cannot touch the two notice-card instances on Bookings, which use

and never carry .eyebrow. */ .notice-card .eyebrow{display:block;margin-bottom:var(--space-4)} /* ============================================================================= HER GROUND, THE BOUNDARY ABOVE IT, AND THE TURN (components.md 21) Oat is her voice. It appears in exactly three places, all of them inside her narrative block, and nowhere else on the site. Every ratio is recorded on the --color-surface-narrative token in :root; the two that govern what may be written on it: ink is 10.58:1 and passes, --color-text-secondary is 4.09:1 and is BANNED, and any green word or mark uses --color-brand-on-narrative (6.74:1) rather than --color-brand-primary (4.37:1). One rule per ground, no per-element judgement. ============================================================================= */ .narrative-band{background:var(--color-surface-narrative)} /* .eyebrow ships --color-brand-primary (see the EYEBROW rule above), which fails on oat at 4.37:1. This is not optional and it is not visible until the eyebrow copy exists, so it goes in now rather than landing as a defect on the day the copy does. */ .narrative-band .eyebrow{color:var(--color-brand-on-narrative)} /* THE BOUNDARY. The hero and her narrative used to be one continuous field of cream with 144px of nothing in the middle of it, which reads as dead space rather than as a section break. The cream-to-oat edge is the boundary (1.28:1, stronger than any ground change already on the site); this strip is where the oat starts, and the 72px rule on the 202px page axis is what makes that edge read as designed rather than as a colour that happens to change. The hero's own 72px of bottom padding becomes the hero's closing space instead of half of a shared void. No bottom padding, deliberately: this is the head of one continuous oat field, not a separate stripe with a gap under it. */ .transition-band{ background:var(--color-surface-narrative); padding:clamp(32px,4vw,56px) 0 0; /* 56px at 1440, 32px at 390 */ } .transition-band .axis-rule{ display:block;width:72px;height:var(--border-thick); /* 3px, existing token */ background:var(--color-brand-on-narrative); /* 6.74:1 on oat */ } /* Her first line would otherwise sit 131px below the cream edge: 56 + 3 + the section default's 72. The band pays for the entry space, so the section stops paying for it a second time. 32px is also the distance .section-head .eyebrow already sits under a heading, so the rhythm here is the site's own. */ .transition-band+.narrative-band{padding-top:var(--space-7)} /* ============================================================================= MOVEMENT 1, RECOGNITION: THE TWO-TONE GROUND, THE CLOSING RULE, AND THE ARCH (WO-162; components.md 23.1, 23.2, 23.4, 23.5; next-chapter-layout.md 9.8) THIS BAND GAINS NO LAYOUT. Her six beats stay in one column on the page axis, in her order, at her measure. Everything below is ground and ornament: the band is two tones of one warm family with the edge placed past where her text stops, a 72px rule closing the light half, and a curved bottom edge. Not one of them touches her words. ============================================================================= */ .narrative-recognition{ position:relative; /* containing block for the arch */ overflow-x:clip; /* NOT overflow:hidden - clip does not establish a scroll container, so nothing here can trap a focus ring or create a nested scroller (9.10) */ /* THE CLEARANCE GUARANTEE, and it is arithmetic rather than inspection. The arch's box is exactly --divider-travel tall and the path's maximum intrusion sits at y=0 of that box, i.e. at its top edge, so the distance from her last beat to the deepest pixel of the shape would be exactly --space-section-y (components.md 24.6, adopted as mechanism) IF NOTHING ELSE TOUCHED THE WRAP'S CONTENT BOX. Below 1024 nothing does. At 1024 and above, `.narrative-recognition .closing-rule` (defined further down, and `display:block` only from 1024px up) contributes its own height plus its own top margin to the same box. This comment previously stated "61px at 1024 and 72px from 1440 up" here, which was a PREDICTION that missed that contribution entirely (QA-R14-002). WO-208 T2 CHANGED THAT CONTRIBUTION, AND THE OLD NUMBERS ARE GONE FROM THIS BLOCK ON PURPOSE. The rule used to be height:3px with margin-top:-24px, a net -21px pulled OUT of the box. It is now height:3px with margin-top:var(--space-7), a net +35px ADDED to it. Delta +56px. MEASURED BY BOLT (WO-208, 2026-08-15, Chromium headed, .narrative-recognition border-box height, before -> after): 1024 511.05 -> 567.05, 1280 559.11 -> 615.11, 1440 590.52 -> 646.52, 1920 637.91 -> 693.91. Exactly +56.00px at each, which is the arithmetic above observed rather than assumed. Below 1024 the rule is display:none, so nothing moves there and the section heights are unchanged. THE CLEARANCE IS NOW OBSERVED AT EVERY WIDTH. From 1024 up it is --space-section-y plus 35px. OBSERVED BY BUGSY (QA-R19, 2026-08-15, on the post-change page): 40.00px at 320, 375 and 390; 46.08px at 768; 96.44px at 1024; 107.00px at 1280, 1440, 1920, 2560 and 3840. Every figure this block previously derived by applying the +56px delta to QA-R14 was correct, so the arithmetic and the ruler agree. The 768 figure had been carried here as an INFERRED ~46px and is now a reading of 46.08px. The clearance moved AWAY from 9.10's 24px floor, not towards it, so this is a bookkeeping obligation rather than a risk. Never type these numbers into the rule below: change --divider-travel and the padding follows; the closing rule's +35px above 1024 is a fact about that rule, not something padding-bottom controls, and if its height or margin ever change again, these figures need remeasuring. */ /* PAUL 2026-08-20: "we may also be able to reduce the white space some at the bottom of the Where you are now section, it seems a little more than what's between the other sections". Measured, and the excess is a different shape than it looks: at 1440 this band ends 144px below her last line against 96px on .narrative-turn, but 72px of that 144 is the curved divider's own travel. The clear air is 72px, LESS than the turn band's. What reads as extra is the arch: its curve dips low on the left, so the ground under her last line is empty for longer on that side than a straight edge would be. THE DIVIDER TERM IS UNTOUCHED, deliberately. The clearance guarantee documented above is arithmetic on these two terms, and --divider-travel is the one the arch's geometry depends on. Taking height out of that makes the shape climb towards her last line, which is the failure 9.10's 24px floor exists to prevent. Only the air term is cut. -24px, WITH A FLOOR. Air goes 72px to 48px at 1440 and above. The max() matters at the small end: --space-section-y is only 40px at 390, where a flat subtraction would leave 16px and break the floor. It holds at 32px there, a cut of 8px rather than 24. No number is typed into the rule that the tokens do not supply. */ padding-bottom:calc( max(32px, var(--space-section-y) - 24px) + var(--divider-travel) ); } /* THIS BAND IS ONE UNIFORM OAT GROUND AND THAT IS A DECISION, NOT AN OMISSION. A two-tone split was specified for it (warmer oat left, --color-surface-sunken right, 1.16:1, edge derived from her measure plus 64px). It was BUILT, then RENDERED, then removed, which is the fallback the spec itself pre-decided for exactly this outcome (components.md 23.8: "if it reads as a wobble, drop recognition's tone split and let the divider plus the closing rule carry the right field"). What the render actually showed, at 1024, 1440 and 1920: the lighter half had no text in it, so it did not read as "the tone changes where her words stop". It read as a rectangle - hard vertical left edge, hard top edge at the section boundary, closed at the bottom by the arch - with one small green dash floating inside it. At 1920 it was a 650x560 pale box in the upper right of the page. It read as an image that had failed to load. That is a worse defect than the emptiness it was drawn to fix, and it got worse as the viewport got wider, which is the opposite of what the device was for. The turn's split is the one that survives, and the asymmetry between the two bands is now the point rather than a problem: the turn's edge separates two things she wrote, so it expresses a contrast in her sentence. Recognition's was atmosphere. Atmosphere is the half that gives way. The expression is not lost. It is held, unbuilt, in .webteam/04-ui/tokens.css under "HELD, NOT BUILT", with its derivation and its resolved edges at every width, so a future wave that puts content or imagery in that field can pick it up rather than re-derive it. It is not left here as dead tokens. */ @media(min-width:1024px){ /* The mirror of .transition-band .axis-rule: same 72px, same 3px, same green, on the same content-box edge. The band opens top left and closes bottom right with the one ornament the page already owns; a second rule length would be an inconsistency for no gain. #164F41 on oat is 6.74:1, well over the 3:1 non-text floor. Decorative, aria-hidden, nothing to read. */ /* WO-208 T2, and BOTH declarations below are required together. Ruled by Pixel in HO-205 T2 after rendering, not reasoned from source. WHERE IT WAS: margin-inline-start:auto put the rule at x=1456 at 1920, roughly 300px right of where her words stop, vertically level with the last two lines of her final paragraph. It read as a dangling dash belonging to that paragraph, or as a rendering artifact. It never read as a bookend. The reason it was placed there has expired: it was drawn to give the lighter right half of a two-tone ground one fixed point, and that two-tone split was built, rendered, judged a failure and removed (see the long comment above). The rule was anchoring a field that no longer exists. WHY THE MARGIN MOVES TOO, AND WHY THIS IS NOT A REFINEMENT: the axis move was rendered on its own, keeping margin-top:calc(-1 * var(--space-6)), and the rule STRIKES THROUGH the word "built" on her last line. That candidate was discarded, not tuned. On the page axis the rule sits under her text rather than beside it, so a negative top margin is no longer a lift into empty ground, it is an overlap on her words. Do not reintroduce it. --space-7 is the same 32px that already sits between the opening rule and her first line, so the two ends of the band are the same mark, on the same axis, at the same distance. That is what makes it a bookend, and all four parts are measured rather than asserted. */ .narrative-recognition .closing-rule{ display:block;width:72px;height:var(--border-thick); background:var(--color-brand-on-narrative); margin-inline-start:0;margin-top:var(--space-7); } } @media(max-width:1023.98px){ /* One ground below the split, never two stacked horizontal tone bands (9.9), and no ornament stranded under a single column. */ .narrative-recognition .closing-rule{display:none} } /* THE ARCH. Painted in the colours of the section BELOW, because the region the mask keeps is the region the turn's ground rises into; the region the mask drops is transparent and lets this band's own two-tone show through, so one gradient here is enough for both halves of the seam. An SVG `fill` cannot take a CSS gradient, which is why this is a gradient-filled block with a mask rather than an inline . In Windows High Contrast a masked gradient disappears entirely. That is correct and expected: the shape is decorative and aria-hidden, the two sections still differ by their forced-colours backgrounds, and no information is carried by the curve. (Contrast this with a structural line, which would have to be a border for exactly that reason.) No horizontal overflow is possible: inset-inline:0, no rotation, no skew, no negative inset, and the section's overflow-x:clip is a second belt. */ .narrative-divider{ position:absolute;inset-inline:0;bottom:0; height:var(--divider-travel); pointer-events:none; background:var(--color-surface-raised); -webkit-mask-image:var(--divider-mask); mask-image:var(--divider-mask); -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } @media(min-width:1024px){ /* Two-tone above 1024, matching the turn exactly, so the seam and the band it leads into are painted from the one --turn-edge expression and cannot disagree by a pixel. */ .narrative-divider{ background:linear-gradient(to right, var(--color-surface-turn-warm) 0 var(--turn-edge), var(--color-surface-raised) var(--turn-edge) 100%); } } /* MOVEMENT 2, THE TURN. The one break in the oat field, and the whole reason the block reads as three movements rather than two. White is the brightest ground on the page and gives her hinge sentence 14.79:1, the highest text contrast anywhere on this site. Deliberately NOT an inverted dark band: the passage immediately above it is her most vulnerable ("uncertain, overwhelmed, and disconnected"), a dark slab there reads as gloom, and Band 1's photograph lands directly under this band, where a second heavy full-bleed element would fight it for the same beat. Air is the third weight device. 64px above and 96px below is more than any other section on the page (the section default is 72px), and the asymmetry is load-bearing: it keeps the M1-to-turn gap (72+64 = 136px) SMALLER than the turn-to-M3 gap (96+72 = 168px), so her one authored blank line stays the largest break in the block and this new movement boundary stays subordinate to it. Do not equalise these. THIS BAND IS NOT INTERACTIVE AND MUST NEVER LOOK IT. No hover, no transform, no shadow, no border, no border-radius, no cursor change, ever. The three "How I Can Help" cards below it are stretched links on a white fill; what keeps a 100vw white band from reading as one of them is that it has none of a card's affordances and spans the full viewport rather than sitting in a 1080px grid. Add any one of them and this becomes a 100vw element that looks clickable and is not. */ .narrative-turn{ background:var(--color-surface-raised); padding:clamp(32px,4.5vw,64px) 0 clamp(48px,7vw,96px); } /* THE TURN'S TWO-TONE AND ITS 5fr/7fr SPLIT (WO-162; next-chapter-layout.md 9.7; components.md 23.1, 23.2). Two beats and a "But" pivot: the two halves of this band are literally a contrast, which is the one thing a two-tone split expresses rather than decorates. Left half is what is hard, right half is what opens. Reading order survives, because left to right IS the reading order and "But" still lands second. ASYMMETRIC, NOT 50/50, AND THE ASYMMETRY IS THE POINT. Equal columns invite equal typography, and two beats of equal weight is a pair, not a pivot. Beat 2 keeps its size step over beat 1; that step is never flattened. WHITE STAYS ON THE RIGHT AND MUST NOT BE FLIPPED. Beat 2 is the hinge of her whole argument and white gives it 14.79:1, the highest text contrast anywhere on this site. Warming the right half would cost that. The warm half measures 12.99:1 for ink and 5.37:1 for brand green, so nothing on the left half needs a recolour rule and none is added. */ @media(min-width:1024px){ .narrative-turn{ background:linear-gradient(to right, var(--color-surface-turn-warm) 0 var(--turn-edge), var(--color-surface-raised) var(--turn-edge) 100%); } /* The cap comes off so the two columns can use the content box; each column carries one of her two beats and neither runs long. */ .narrative-turn .narrative-lead{max-width:none} .narrative-turn .stanza{ display:grid; /* minmax(0,...) rather than a bare 5fr/7fr: an fr track's implicit min is auto, so a long unbreakable run in either beat could otherwise push the column past its share and drag the text under the tone edge the grid is supposed to stay clear of. */ grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--turn-gap); /* Two short blocks of different height read as a counterweight when centred and as an accident when top-aligned (9.7). */ align-items:center; } /* Auto-placement puts beat 1 in column 1 and beat 2 in column 2 from source order alone. There is no `order`, no explicit placement and no reversal anywhere in this band, so DOM order is visual order (9.9). */ .narrative-turn .stanza>.beat:first-child{margin-bottom:0} } @media(max-width:1023.98px){ /* Below the split the tone collapses to one ground. Never two stacked horizontal tone bands (9.9). */ .narrative-turn{background:var(--color-surface-raised)} } /* ============================================================================= MOVEMENT 3, ONE COLUMN AND THE DRAWN MARKER (WO-195; next-chapter-layout.md 10.12, which supersedes 10.4 and one bullet of 10.5 in full) WHAT WAS HERE BEFORE AND WHY IT IS GONE, TWICE OVER. First it was a