/* ── the design system ────────────────────────────────────────────────────────────────────────── One scale for the whole site, added here before anything is moved onto it. Nothing below --fs-xs renders: the sweep this exists to serve found 57 of 231 font-size declarations under 12px (9.5 twice, 10 eight times, 10.5 twelve, 11 eighteen, 11.5 seventeen) and 24 labels in tracked capitals, which is the same complaint written twice — the smallest text on the page was also the hardest to skim. The four ink steps each clear 4.5:1 on both surfaces, so a step down means less emphasis and never less legibility, and --ink-4 is the floor: nothing dimmer is ever text. Two colour families and only two, because the page had neither: one hex did duty for a past-due marker, an off-chart account, a sync diff and three pages' waiting icon. Rust is severity — four steps, which is what the paper has, in the two registers that are one family (the aging buckets, and the submitted file's three actions, which are the same partition in another vocabulary and therefore wear the same ink) — and it is a FILL ramp and never a text ramp: the light end is 2.28:1, so every severity *word* is --rust-ink and the tier is carried by a mark. Green is money and the brand, and appears on no scale at all, which is the only way it can mean dollars alone. The fact colour sits off the ramp on purpose. A bill the paper has already answered at its own mark is not the darkest step of anybody's scale; it is a different kind of statement, and it is the one thing on this page no level word is allowed to describe — which is why the row that carries one shows a flag in --fact-ink beside an estimate that keeps its own colour. ─────────────────────────────────────────────────────────────────────────────────────────────── */ :root{ --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --paper: Georgia, "Times New Roman", serif; /* a sheet is a document, nothing else */ --mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* invoice ids and refs, never a label */ --fs-xs:12px; --fs-sm:14px; --fs-md:17px; --fs-lg:20px; --fs-xl:24px; --fs-2xl:28px; --fs-3xl:34px; --fs-4xl:40px; --lh-display:1.08; --lh-tight:1.22; --lh-body:1.55; --w-regular:400; --w-medium:550; --w-semibold:650; --w-bold:700; --ink-1:#16241e; --ink-2:#2a3a33; --ink-3:#526458; --ink-4:#69756d; --surface:#ffffff; --surface-sunk:#f6f8f6; --line:#e3e7e3; --line-strong:#c6cfc8; --money:#286244; --money-mid:#387554; --money-deep:#1b493b; --money-track:#eaf3ee; --sev-1:#f69e7f; --sev-2:#cd785a; --sev-3:#a65438; --sev-4:#823417; --sev-none:#8d9993; --sev-track:#f6e8df; --rust-ink:#8a4a30; --fact-ink:#5b2512; /* The four steps above are the ramp, and the validator says so: run through `validate_palette.js --ordinal` on the adjacency the page actually draws, they come out monotone in lightness, every ΔL at or above .06, one hue (spread 1°), light end 2.02:1 against the surface. The same run over the five-stop *bar* — which puts `--sev-none` at the ramp's end — FAILS the ordinal checks, and that is the point: the grey is not a fifth step, it is the dollars nobody has good cause to chase yet, so it is textured rather than stepped, and `--fact-ink` sits off the ramp at the other end because a bill the paper has answered is not the darkest forecast. Below the ramp, the same family at a paler step: a tint washes a panel, a track is the ground a meter is measured against, and the pale end of the ramp still needs an edge on its own. One rule the walk taught me about the four ink steps: --ink-4 is the floor on the two surfaces it was measured against — the white (4.81) and the sunk grey (4.51) — but a family *tint* is a third ground, and the same ink falls under 4.5 on all five of them: 4.41 on the paper band, 4.25 on the money track and the severity wash, 4.01 on `--sev-track`, the darkest ground the site paints. So the floor is a pair-and-its-grounds, not a property of the colour, and the rule is stated where it can be tested: --ink-4 lives on the neutral pair, and on a tint the step is --ink-3, which clears 4.5 everywhere — its worst is 5.28, on that same `--sev-track`. */ --sev-tint:#fbefe4; --sev-line:#e8c8a8; /* Green carries no scale, so it needs only the three steps a page can ask of a brand colour, plus the line and the track. `--focus` is the one place a green is allowed to be bright — and the ring it replaces was 2.88:1 against white, under the 3:1 a focus indicator has to clear, which is why the ring now wears `--money-mid`'s step rather than a lighter one of its own. */ --money-line:#b9d6c4; --focus:#387554; /* The ledger's own two columns, in the two colours no scale on this site uses: an entry is a debit or a credit, and a purple that meant only that has to be named rather than folded into severity. */ --credit:#5a4a7a; /* The facsimile of a printed sheet keeps its own paper and its own two inks, because that is the one place the site imitates a document instead of speaking. The beige family goes background → band → rule, and the muted ink is the lightest warm grey that still clears 4.5:1 on the sheet's own ground: the #8a8069 it replaces was 3.84, and 3.84 is not a printed form, it is a disclaimer. */ --paper-bg:#fffdf6; --paper-band:#fdf4e7; --paper-line:#e3d3b8; --paper-ink:#24352f; --paper-muted:#6f6547; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --r-sm:4px; --r-md:8px; --r-lg:12px; --r-pill:20px; } /* The document's own defaults. They lived in a second `:root` beside a typeface that was named and never loaded — `Inter` appears nowhere in this repo and the site makes no external request, so the whole site has been rendering in the system face while saying otherwise. Saying what renders is the fix; `font-synthesis:none` stays, because a weight the face does not have is precisely the thing a browser will otherwise fake, and the scale above asks for 550 and 650. The three tokens this line retires had no meaning that the families above do not already carry: `--green` was a fourth spelling of money, `--muted` a fifth grey, and `--orange` was `#aa5b2c`, which did duty for seven unrelated things on four pages. The page ground is `--surface-sunk` one step under the white every panel wears, which is what `#f5f7f7` always was. */ html{font-family:var(--font);font-size:var(--fs-md);color:var(--ink-2);background:var(--surface-sunk); font-synthesis:none;-webkit-text-size-adjust:100%}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}button:disabled{cursor:default;opacity:.55}button{transition:background .15s,box-shadow .15s}button:hover:not(:disabled){filter:brightness(.97)}.topbar{height:90px;background:var(--surface);border-bottom:1px solid var(--line);padding:0 5%;display:flex;align-items:center;justify-content:flex-start}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;font-size:var(--fs-lg);font-weight:650;letter-spacing:-.4px}.brand small{display:block;font-size:var(--fs-xs);letter-spacing:2.3px;font-weight:600;margin-top:5px;color:var(--ink-4)}.mark{position:relative;display:grid;place-items:center;background:var(--money-deep);color:var(--surface);border-radius:10px;width:44px;height:44px;font:var(--fs-2xl)/1 var(--paper)}.mark span{position:absolute;font:var(--fs-md) var(--font);right:5px;top:4px}.demo-label{display:flex;gap:24px;align-items:center;font-size:var(--fs-sm);color:var(--ink-4)}.tag{border:1px solid var(--line);border-radius:6px;padding:7px 10px;color:var(--ink-3);font-size:var(--fs-xs)}main{max-width:1510px;margin:auto;padding:28px 5% var(--sp-5)}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-5)}.eyebrow{font-size:var(--fs-sm);font-weight:var(--w-medium);color:var(--ink-3)}h1{font-size:var(--fs-4xl);margin:10px 0}p{line-height:1.5}.intro p{margin:0;color:var(--ink-4);font-size:var(--fs-md)}.reset{padding:9px 14px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--ink-3);font-size:var(--fs-sm);display:flex;gap:8px;align-items:center}.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px;font-size:var(--fs-sm)}.segmented{display:flex;padding:3px;background:var(--money-track);border-radius:8px}.segmented button{background:transparent;border:0;padding:7px 15px;color:var(--ink-3);border-radius:5px;font-size:var(--fs-sm)}.segmented button[aria-pressed=true]{background:var(--surface);box-shadow:0 1px 4px #17352316;color:var(--money);font-weight:600}.simulation-date{display:flex;align-items:center;gap:8px;color:var(--ink-4);font-size:var(--fs-xs)}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--money-deep)}.workspace{display:grid;grid-template-columns:minmax(310px,.78fr) minmax(530px,1.7fr);gap:22px;align-items:stretch}.panel{border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 4px 18px #1d3c2b03;overflow:hidden}.conversation{display:flex;flex-direction:column;min-height:663px}.panel-heading{display:flex;align-items:center;gap:11px;padding:21px 20px;border-bottom:1px solid var(--line)}.avatar{display:grid;place-items:center;flex-shrink:0;width:35px;height:35px;border-radius:9px}.agent-avatar{background:var(--money-track);color:var(--money);font-size:var(--fs-2xl)}.panel-heading h2{font-size:var(--fs-xl);line-height:var(--lh-tight);margin:0}.panel-heading p{font-size:var(--fs-sm);color:var(--ink-4);margin:var(--sp-1) 0 0}.small-tag{margin-left:auto;font-size:var(--fs-xs);font-weight:600;color:var(--ink-4);}.scenario{margin:18px 18px 0;padding:12px;background:var(--surface-sunk);border:1px solid var(--line);border-radius:7px;display:flex;gap:10px}.scenario-icon{color:var(--ink-4);font-size:var(--fs-xl)}.scenario strong{font-size:var(--fs-sm);font-weight:600}.scenario p{font-size:var(--fs-xs);margin:4px 0 0;color:var(--ink-4)}.messages{padding:22px 18px 4px;display:flex;flex-direction:column;gap:18px;max-height:340px;min-height:210px;overflow:auto;flex:1;scroll-behavior:smooth}.message{max-width:94%;font-size:var(--fs-sm);line-height:1.6}.message-name{font-size:var(--fs-xs);color:var(--ink-4);margin-bottom:5px}.bubble{padding:12px 14px;border-radius:0 10px 10px 10px;background:var(--surface-sunk);color:var(--ink-2)}.message.user{align-self:flex-end}.user .message-name{text-align:right}.user .bubble{background:var(--money-deep);color:var(--surface);border-radius:10px 0 10px 10px}.choices{padding:10px 18px 18px;display:flex;flex-wrap:wrap;gap:8px}.choice{font-size:var(--fs-sm);text-align:left;padding:10px 12px;background:var(--surface);border:1px solid var(--money-line);color:var(--money);border-radius:7px}.choice.selected{background:var(--money-track);border-color:var(--money-deep)}.choice.full{width:100%;display:flex;justify-content:space-between;align-items:center}.primary{background:var(--money-deep);border:1px solid var(--money-deep);border-radius:7px;color:var(--surface);padding:11px 15px;font-size:var(--fs-sm);text-decoration:none}.choices .primary{width:100%}.composer{margin:0 18px;display:flex;gap:8px;padding:7px;border:1px solid var(--line);border-radius:8px}.composer input{border:0;outline:none!important;min-width:0;flex:1;padding:7px;background:none;font-size:var(--fs-sm)}.composer:focus-within{outline:2px solid var(--focus);outline-offset:2px}.composer button{background:var(--money-deep);border:0;color:var(--surface);border-radius:5px;width:33px;height:33px;font-size:var(--fs-xl)}.prototype-note{text-align:center;color:var(--ink-4);font-size:var(--fs-xs);padding:13px 8px 15px}.company-heading{padding:22px 24px 18px;display:flex;align-items:center;justify-content:space-between}.workspace-label{display:flex;align-items:center;gap:7px;color:var(--ink-4);font-size:var(--fs-xs)}.calendar-toolbar{padding:0 24px 19px;display:flex;align-items:center;justify-content:space-between}.calendar-toolbar strong{font-size:var(--fs-sm);font-weight:600}.calendar-sub{display:block;font-size:var(--fs-xs);color:var(--ink-4);margin-top:5px}.week-tag{padding:7px 11px;border:1px solid var(--line);border-radius:5px;font-size:var(--fs-xs);color:var(--ink-4)}.calendar-scroll{overflow-x:auto;padding:0 24px}.calendar{display:grid;grid-template-columns:43px repeat(5,minmax(83px,1fr));grid-template-rows:49px repeat(16,26px);position:relative;min-width:500px}.day{grid-row:1;text-align:center;border-bottom:1px solid var(--line);font-size:var(--fs-xs);color:var(--ink-4)}.day strong{display:block;font-size:var(--fs-md);font-weight:500;color:var(--ink-3);margin-top:6px}.day.today strong{background:var(--money-deep);color:var(--surface);border-radius:50%;width:25px;height:25px;display:grid;place-items:center;margin:3px auto 0}.time{font-size:var(--fs-xs);color:var(--ink-4);transform:translateY(-6px);align-self:start}.cell{border-top:1px solid var(--line);border-left:1px solid var(--line)}.event{margin:2px 3px 2px 4px;padding:6px 7px;border:0;border-left:2px solid var(--line-strong);border-radius:4px;background:var(--surface-sunk);z-index:1;text-align:left;color:var(--ink-1);min-width:0;overflow:hidden;align-self:stretch}.event strong,.event span{display:block;font-size:var(--fs-xs);line-height:1.4}.event strong{font-weight:600}.event span{opacity:.85;font-size:var(--fs-xs)}.event.new-event{border-left-color:var(--money-deep);background:var(--money-track);color:var(--money);animation:appear .4s ease}.event.proposed{background:var(--money-track);border:1px dashed var(--money-mid);color:var(--ink-3)}.calendar-legend{display:flex;align-items:center;gap:18px;padding:15px 24px 20px;font-size:var(--fs-xs);color:var(--ink-4)}.calendar-legend>span{display:flex;align-items:center;gap:5px}.legend-square{width:7px;height:7px;border-radius:2px}/* An existing job is furniture, not a warning: the calendar has no severity to borrow and the ramp is reserved for the book, so the neutral pair is what says "already here" beside the green that says "the agent just did this". */ .legend-square.existing{background:var(--line-strong)}.legend-square.new{background:var(--money-mid)}.calendar-legend .calendar-status{margin-left:auto;color:var(--ink-4)}.activity{padding:18px 24px 20px;border-top:1px solid var(--line);background:var(--surface);min-height:116px}.activity-header{display:flex;justify-content:space-between;align-items:center}.activity h3{font-size:var(--fs-xs);font-weight:600;margin:0}.activity-header>span{font-size:var(--fs-xs);color:var(--ink-4)}.activity-empty{font-size:var(--fs-xs);color:var(--ink-4);margin:18px 0 0}.activity-row{display:flex;align-items:flex-start;gap:9px;font-size:var(--fs-xs);color:var(--ink-4);margin-top:13px;animation:appear .2s ease}.activity-row i{font-style:normal;color:var(--money-mid);background:var(--money-track);display:grid;place-items:center;width:16px;height:16px;border-radius:50%;font-size:var(--fs-xs);flex-shrink:0}.activity-row span{flex:1}.activity-row small{font-size:var(--fs-xs);color:var(--ink-4)}.activity-row a{color:inherit}footer{display:flex;justify-content:space-between;gap:20px;font-size:var(--fs-xs);line-height:1.6}footer strong{font-weight:500;color:var(--ink-2)}dialog{border:1px solid var(--line);border-radius:15px;padding:25px;width:min(450px,90vw);color:var(--ink-1);box-shadow:0 20px 100px #203d3430}dialog::backdrop{background:#182d2455;backdrop-filter:blur(3px)}.dialog-top{display:flex;align-items:center;justify-content:space-between}.dialog-top button{border:0;background:none;font-size:var(--fs-2xl);color:var(--ink-4)}dialog h2{font-size:var(--fs-xl)}dialog p{font-size:var(--fs-sm);color:var(--ink-4)}dialog .primary{width:100%;margin-top:15px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes appear{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1600px){main{padding-left:35px;padding-right:35px}}@media(max-width:1050px){main{padding:28px 3%}.topbar{padding:0 3%}.workspace{grid-template-columns:minmax(290px,.85fr) minmax(430px,1.4fr);gap:15px}.calendar-scroll{padding:0 15px}.calendar{min-width:420px;grid-template-columns:32px repeat(5,minmax(73px,1fr))}.calendar-legend{gap:10px;padding-left:15px;padding-right:15px}.calendar-status{display:none!important}.workspace-label{display:none}.company-heading,.calendar-toolbar,.activity{padding-left:18px;padding-right:18px}}@media(max-width:760px){.brand{font-size:var(--fs-md)}.demo-label .tag{font-size:var(--fs-xs)}main{padding:26px 16px}.intro{align-items:flex-start;margin-bottom:24px;gap:10px}.intro h1{font-size:var(--fs-2xl);line-height:1.2}.reset{padding:8px;font-size:var(--fs-lg);margin-top:25px}.reset span{display:none}.toolbar{align-items:flex-start;gap:15px;flex-direction:column}.simulation-date{font-size:var(--fs-xs)}.workspace{grid-template-columns:minmax(0,1fr)}.conversation{min-height:480px}.messages{max-height:290px}.company-heading{padding-top:23px}.calendar{min-width:475px}.calendar-legend{font-size:var(--fs-xs);flex-wrap:wrap}footer{flex-direction:column;gap:7px}footer .copyright{margin-left:0}.desktop-only{display:none}.messages .message{font-size:var(--fs-md)}.calendar-scroll{padding-bottom:4px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}} /* Readable working controls and half-hour calendar geometry. */ .message{font-size:var(--fs-md)}.choice,.composer input,.scenario strong{font-size:var(--fs-sm)} .scenario p,.calendar-sub,.workspace-label,.activity-empty{font-size:var(--fs-xs)} .activity h3,.activity-row,.calendar-toolbar strong{font-size:var(--fs-sm)} .event strong{font-size:var(--fs-xs)}.event span{font-size:var(--fs-xs)}.event{padding:4px 7px} .event.new-event,.event.proposed{padding:2px 6px;white-space:nowrap;text-overflow:ellipsis} .event.new-event strong,.event.proposed strong{overflow:hidden;text-overflow:ellipsis} .event.new-event span,.event.proposed span{display:none} .calendar-legend{flex-wrap:wrap;font-size:var(--fs-xs)}.calendar-status{font-size:var(--fs-xs)} .day,.time{font-size:var(--fs-xs)}.day{padding-bottom:5px} .prototype-note{font-size:var(--fs-xs)}.prototype-note{color:var(--ink-4)} .message-name,.calendar-sub,.time,.day,.activity-header>span{color:var(--ink-4)} @media(max-width:760px){.messages .message{font-size:var(--fs-md)}.calendar{min-width:600px}.calendar-legend{font-size:var(--fs-xs)}} .details-form{width:100%;display:grid;gap:12px}.details-form label{font-size:var(--fs-sm);color:var(--ink-3);display:grid;gap:6px}.details-form input{font:inherit;font-size:var(--fs-md);width:100%;min-width:0;border:1px solid var(--line-strong);border-radius:6px;padding:10px;color:var(--ink-1);background:var(--surface)}.review-card{width:100%;background:var(--surface-sunk);border:1px solid var(--line);border-radius:8px;padding:15px;font-size:var(--fs-sm);overflow-wrap:anywhere}.review-card p{margin:8px 0}.review-card p span:first-child{font-weight:600}.request-error{margin:12px 18px 0;padding:12px;border:1px solid var(--sev-line);background:var(--sev-tint);border-radius:7px;color:var(--rust-ink);font-size:var(--fs-sm)}.slot-choice{flex:1 1 45%;font-size:var(--fs-sm)}#flow-status{display:block;margin-top:8px;font-size:var(--fs-xs);color:var(--money)}.conversation{max-height:1100px}.messages{min-height:140px;max-height:260px}.choices{max-height:560px;overflow:auto}.small-tag{font-size:var(--fs-xs)}.activity{max-height:340px;overflow:auto}.bubble{overflow-wrap:anywhere}.event strong{overflow:hidden;text-overflow:ellipsis}.workspace{align-items:start}.company{min-height:760px}.conversation{min-height:760px}@media(max-width:760px){.conversation{min-height:600px}.choices{max-height:none}.conversation{max-height:none}.company{min-height:0}.small-tag{display:none}} .details-form select{font:inherit;font-size:var(--fs-md);width:100%;border:1px solid var(--line-strong);border-radius:6px;padding:10px;color:var(--ink-1);background:var(--surface)} /* The contact page's one free-text field lives in the same `.details-form` the booking form uses, whose rules cover `input`, `label` and `select` and never a `textarea` — an unstyled one arrives with the browser's own font, which is not `font:inherit`, so it would sit beside the name and email boxes in a different typeface at a different size. Same tokens as `.details-form input`, and `resize:vertical` as `.decision textarea` has it, so a visitor can lengthen the box but never break the page's measure by dragging it sideways. */ .details-form textarea{font:inherit;font-size:var(--fs-md);width:100%;min-width:0;border:1px solid var(--line-strong);border-radius:6px;padding:10px;color:var(--ink-1);background:var(--surface);resize:vertical} .event.availability-block { background: var(--line); color: var(--ink-3); border: 1px dashed var(--line-strong); opacity: .85; z-index: 1; } .event:not(.availability-block) { z-index: 2; } /* Showcase site: shared nav, landing cards, triage workspace. */ /* The nav is the list of destinations, and since 2026-10-19 it shares the header's first row with the brand — the ask one day after the same office asked for a centred row of its own, which is exactly what the `width:100%;order:3` pair did and what came out of this rule for it. A wrapping flex line packs greedily in visual order, so on a shared row the links join the brand and it is the *corner* that drops when the row runs short: brand, pages, then the action. That is the fold worth having — the button is one action, the nav is where a reader goes. `justify-content:center` centres the links in the nav's own box, and `flex-wrap` is what turns a narrow screen into a taller bar instead of a wider page: six links hold one line from 1425 of client width down to 665, then split 3+3 through 365 and three rows of two below 345, with zero sideways overflow and no element hanging off the viewport at any of the 57 widths walked on 2026-10-19. The eight-link chrome that shared the first row overflowed from 1100 down (scrollWidth 1003 against a client width of 885 at 900px, the consultation button's right edge 21px past the screen) — a horizontal scrollbar on a page that has no reason to have one, and the reason `flex-wrap` stays whatever the row order. What a shared row cannot buy is the page's own axis. The links' centre sits 37px left of it across the whole one-row band, constant, and it is exactly half the difference between the two ends it is centred between: corner 260, brand 185. Centring them on the *row* — the thing a reader sees — is the claim this rule can keep; centring them on the page while two unequal ends share it would need a magic `min-width` on the brand, which is a second layout pretending to be the first. `.brand` cannot shrink, because its two-line wordmark is what identifies the site and it is the one child a squeezed header must not abbreviate. The grow is scoped to `min-width:1250` because flex growth resolves *before* main-axis alignment: an un-scoped `flex-grow:1` centres the links in the leftovers of a row the corner has already abandoned, which measures a flat +102px off the axis at every width from 1225 down to 945 (forced on the shipped sheet to check), against the −36 to +100 drift they hold here — and buys nothing above 1250, where the row holds all three and the scoped/unscoped pair differ by 1px at 1244. */ .topnav{display:flex;gap:4px;align-items:center;flex-wrap:wrap;flex:0 1 auto;justify-content:center} .brand{flex-shrink:0} @media(min-width:1250px){.topnav{flex-grow:1}} .topnav a{text-decoration:none;color:var(--ink-4);font-size:var(--fs-sm);font-weight:500;padding:8px 12px;border-radius:6px} .topnav a:hover{background:var(--surface-sunk);color:var(--money)} .topnav a.active{background:var(--money-track);color:var(--money);font-weight:600} /* The company that built this demo signs the chrome; the client whose records it runs on stays in the content, and the two names never meet in one sentence. What used to sit in the header's right hand — `Maple & Stone · Business sandbox` — repeated a brand mark three inches away and said nothing about who made the thing. Green is the step `.topnav a:hover` already spends on an anchor that answers, so the byline reads as a link in this header's own vocabulary rather than a second label competing with the tag, and it is `nowrap` because the string is a proper noun: the walk caught the header breaking it as `The Model / Advantage`, which is not how anyone's company name should be set. The UA underline is taken back off it — nothing else in this header is underlined, the green is the link cue, and `:hover` puts the line back where the nav's own hover puts the colour. */ .demo-label .byline{color:var(--money);white-space:nowrap;text-decoration:none} .demo-label .byline:hover{text-decoration:underline} /* Three rules the consultation button forced, each re-measured the day the nav moved back onto the brand's row and the corner became a column to make room. The gap: with the links inline, the nav's right edge used to land exactly on the label's left edge, and the corner is a filled green box that needs air on both sides. 18px holds on either side of the nav at every width where all three share a row. The wrap: the first row is brand, links and corner, and they hold it from 1244 of viewport width up — brand 185, links 625, corner 260 and two 18px gaps sum to 1106 against the 1121 the bar has inside its own 5% padding at 1245 of client width, 15px of slack to its name. At 1229 the two numbers meet exactly, and then 1px of bold decides a page: the three pages whose active link is `Home`, `About` or `Contact` (624-625 of links) still hold the row at 1244, while the four desk pages, whose active link is `font-weight:600` and measures 626-627, need 1248. The bar therefore stops fixing its height and keeps 90px as a floor purely to hold the corner's own two-line stack, and `margin-left:auto` holds the corner at the right edge of whatever line it ends up on — `space-between` would otherwise drop a lone item left, which the walk measured as +239px of drift. The bar's own `scrollWidth` cannot answer a demand question at all: it counted the padding and still landed 72px under its own children, so the numbers above are added up from the parts. What the fold costs, walked at all 57 widths from 1440 to 320 on 2026-10-19 (viewport widths; client width is 15px less with the scrollbar): 90px from 1440 down to 1244, one row of brand, six links and the corner; 145px from 1240 to 860, the corner on a second row of its own, flush right; 196px from 840 to 780, three rows — brand, links, corner; 165px from 760 to 680, where the phone rules have folded the byline and the corner is down to its 231px button; 206px from 660 to 380, the links on two rows of three; 247px from 360 down, three rows of two. The button stays one line at every width and flush with the bar's inner right edge at all of them, nothing spills sideways, and nothing hangs past the bottom border. Against the centred-row pass this replaces — 120px from 1440 down to 765 of *client* width, then 113/154/206/247 — the trade is one row wherever all three fit, paid for in the middle: 90 against 120 at 1425, but 145 against 120 at 1225 and 196 against 120 at 765, because the corner is a two-line column and the row it drops to is therefore taller than the row it left. That is what the shared row cost, and the number is worth keeping where the change is. (`ar.html` still scrolls sideways at 320, inside its own table scroller: measured byte-identical with this chrome removed, so it predates the button and this rule neither caused nor fixed it.) */ .topbar{gap:18px;flex-wrap:wrap;height:auto;min-height:90px;padding-top:12px;padding-bottom:12px} /* The right hand holds the action *over* the byline, and stacking them is what bought the shared row. Side by side the pair demands 501px (byline 260 + button 223 + the bar's 18px gap), which with the brand and the six links sums to 1347 against the 1283 the bar has inside its own padding at 1440 — 64px short of the ask, and still about 10px short after every tightening that was measured (gutter 5% → 3%, gaps 18 → 12, which recovers some 54px and spends the header's air to do it). Stacked, the corner is 260px wide — its own widest child, the byline, the button being 223 — the row's demand falls to 1106, and all three fit from 1244 of viewport width up. A column flex container takes its width from its widest child, which is the whole trick: the pair stopped competing for the row's length by giving up its share of it. `align-items:flex-end` pulls the byline onto the button's right edge so the two read as one block rather than as a stray sentence, `gap:6px` is the line-height of that block, and `margin-left:auto` keeps it flush right on whichever row it lands on. Below the byline's own 760 fold the corner is a single 231px line, which is why the bar gets shorter there and not taller. */ .demo-label{margin-left:auto;flex-direction:column;align-items:flex-end;gap:6px} /* The consultation button is the header's action, so it sits at the right edge rather than at the end of the list of pages, and it carries its own padding, radius and text-decoration because none of those reach it from `.topnav a` any more — a rule that lived inside a container it has left. It stays qualified through `.demo-label` because that is the trap it already fell into once in the nav (`.topnav a` is (0,1,1), a lone class is (0,1,0), and the button arrived painted in the nav's grey with no static read of the stylesheet showing why), and borrows `.primary`'s ink-on-green pair rather than inventing a fourth ground the contrast sweep has never measured. Hover deepens the same green instead of lifting it, because a lighter ground is a weaker one under white ink. */ .demo-label a.header-cta{background:var(--money-deep);border:1px solid var(--money-deep);color:var(--surface);font-size:var(--fs-sm);font-weight:600;padding:8px 12px;border-radius:7px;white-space:nowrap;text-decoration:none} .demo-label a.header-cta:hover{filter:brightness(.85);color:var(--surface)} /* A link in a sentence, which the site had none of until the landing page named who built it: without this the browser's own blue arrives in a paragraph about the company, `rgb(0,0,238)` underlined, on a page whose palette is ink and green. It is `main a` (0,0,2) on purpose — two type selectors, the cheapest rule that still reaches an unclassed anchor — so any link that carries a class outranks it and only prose picks it up. The footer's credit used to be the one link inside `main` with no class of its own; it left `main` on 2026-10-19 to become a full-width band, so this rule no longer reaches it and `footer a` is now the ONLY thing standing between those anchors and the browser's own blue — an unclassed `` with nothing above it but an inherited `color` takes `-webkit-link`, and a future edit that deletes the footer rule as "redundant with the prose rule" would paint it blue on white. The prediction was tested the same day it was written: the landing page's band dropped to one line with the maker's link inside the copyright, the class-scoped version of the rule did not reach it, and the screenshot came back blue. It is drawn as a credit rather than as a sentence link, through its own span — (0,1,2) — which was about beating the prose rule and is now about replacing it. */ main a{color:var(--money);text-decoration:underline;text-underline-offset:2px} /* The credit is the one footer item allowed to leave the demo, so it is drawn as a link and not as prose — and since the landing page's band is a single line with the maker's home page linked *inside* the copyright, that is now two anchors in the band and one rule for both. On the white ground a link takes the same green the prose links take — 7.19:1 — and deepens toward the logo's own green on hover (10.18:1), because on a light ground a link has somewhere to get darker; on yesterday's dark band the only direction was up, which is why it was `--money-line` then and is `--money` now. Keyed to `footer a` and not to `.made-by a` for exactly the reason the comment above `main a` gives: the class-scoped version left the landing's unclassed anchor wearing `-webkit-link`, blue on white, in the one line that names who built this. */ footer a{color:var(--money);text-decoration:underline;text-underline-offset:2px} footer a:hover{color:var(--money-deep)} /* The footer's ownership line, and the two rules that keep it readable. The copyright is 313px of text on one line, and the footer is a flex row that wraps: given a fourth item, a row that does not wrap squeezes the new one against its siblings rather than handing it a line of its own. Re-measured today by forcing `flex-wrap:nowrap` back on inside a live page — on the bookkeeping page, whose footer carries the longest prose, that squeeze sets the line at 191x38 (two lines) at 1440, 136x58 (three) at 1060, 118x58 at 900 and 100x96 (five) at 780, a sentence nobody chose to compose in a 100px column. (Yesterday's numbers were 185/133/117/100 wide against the inset band's 1234px row; the band's own gutter replaced that row's 24px of side padding, so the squeeze is 48px gentler at the wide end and the same in kind.) `flex-wrap` costs the band rows — 52px tall where all three items share one row (index, ar, contact at 1440), 91 on about/scan/triage and 111 here — and buys the copyright back as one unbroken 313x19 line at every width from 1440 down to 390 on all seven pages, breaking to two lines only at 320, where the band's row is 265px against 313px of text. No page scrolls sideways at any width walked. The auto margin then holds it flush against the band's right gutter on whichever row it lands on — 52/91/111px-tall rows, each ending at the same x the content column ends at, because the band's gutter is now the column's inset rather than the header's (the rules and the arithmetic are below). One page has no row to be flush with: the landing's band is a single line, and `margin-left:auto` on an only child is not an alignment, it is a shove to the far edge — measured before this rule, its first word sat at x=1041 on a 1425px row while the cards above it start at 71, and at x=1497 on a 1905px row against cards that start at 233. So a lone copyright starts at the start of the row, like every other first line on the site. Position-based (`:only-child`) and not a class, because the office cut that band's other two items by hand and the next page that drops to one item gets the same answer without anyone editing a stylesheet. Below 760 the footer is a column, where a cross-axis auto margin both defeats the stretch and hangs the line at the right edge of a left-aligned stack, so the media query zeroes it — and has to say `footer .copyright` to be heard, because this sheet keeps its media queries *above* its component rules, where a lone `.copyright` written later wins the tie on order alone. */ footer{flex-wrap:wrap} .copyright{margin-left:auto} footer .copyright:only-child{margin-left:0} /* The footer is a section, and since 2026-10-19 it is the page's *other header*: the office asked for the band to span the whole width "like header" and then, when shown the numbers, for the header's own ground rather than the green it wore for a day. So it is `--surface` with a 1px `--line` rule across its top, exactly the header's pairing turned upside down — the header is the same fill with the same rule beneath it. Say the arithmetic out loud, because it is the honest part: white on this page's ground (`--surface-sunk`) measures 1.07:1, and the rule itself 1.25:1 against white, so nothing about this band separates by *colour*. What separates it is that it spans edge to edge, that its ground changes from the sunk page to the raised surface, and that a hairline runs across it — which is precisely how the header has always read, and is why the two now match. The inks are the header's own: `--ink-4` prose (4.81:1 at the 12px this block is set at, the same step the byline wears above) and `--ink-2` for the strong sentence (11.99:1), so the loudest words in the band are not printed in its faintest rung. The structure is what does the width, and it is the part not to undo: `