/* ═══════════════════════════════════════════════════════════════════════════ Daelus Capital — site stylesheet Brand kit v1.1 (hero revised 28 Jul 2026). Gunmetal palette. Hero direction 5a. THIS IS THE ONLY STYLESHEET YOU EDIT. assets/css/tokens.css is a verbatim copy of the brand kit's token file — never edit it; re-copy it if the brand kit revs. House rules, enforced throughout: · border-radius is 0. Everywhere. Always. · No drop shadows, no gradients, no glass. Depth = hairlines + dark panels. · Two background colours per page maximum: Steel, and Gunmetal for panels. · Brass is <= 3% of any view. See "BRASS BUDGET" below. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. SITE TOKEN LAYER ──────────────────────────────────────────────────── Values the build needs that the brand kit's token file does not define. Everything the kit DOES define — the hero scale, the lede size, the watermark opacity, Slate Light — comes from tokens.css. Never edit that file. ─────────────────────────────────────────────────────────────────────────── */ :root{ --track-fig: 0.24em; /* figure-caption tracking */ --track-meta: 0.18em; /* meta strip tracking */ --size-meta: 10px; /* meta strip size */ /* The README §3 accessibility carve-out, as a one-line switch. Brass #B8923D on Steel is ~2.4:1 and fails WCAG AA. The brand permits it for exactly two decorative things: the delta, and the 01/02/03 pillar labels. If review rejects that, change this line to brass-ink and nothing else in the system has to move. */ --pillar-label: var(--daelus-brass); /* → var(--daelus-brass-ink) to comply */ /* ── layout ── --pad reaches its locked 56px at a 1333px viewport, so at any desktop width >= 1360px the page is pixel-identical to the reference hero. */ --shell: 1360px; --pad: clamp(20px, 4.2vw, 56px); --pad-cell: 8px; /* optical inset on outer cells */ /* --pad-meta is the 56px gutter PLUS the 8px cell inset. That sum is what optically aligns a full-width line of type with the headline above it — hence the calc, never a hardcoded 64. Six live consumers: .page-head, .prose, .section-figure, .section-head, .cta-strip, .site-footer-inner. (It was introduced for the hero meta strip, which was removed 29 Jul 2026; the token outlived it and the six consumers above still need it.) */ --pad-meta: calc(var(--pad) + var(--pad-cell)); --band-pad: clamp(48px, 6vw, 88px); /* ── fluid type. Body/small/mono stay fixed — they read fine at 375px. ── Hero H1 tops out at the locked 96px (direction 5a) and reaches it at a 1360px viewport. BUILD.md leaves everything below 1280px undesigned, so the ramp down to 40px is this build's decision, not the brand kit's. */ --size-hero: clamp(40px, 6.6vw + 6px, 96px); --size-hero-lede: clamp(16px, 0.4vw + 14px, 17px); --size-h2: clamp(28px, 1.8vw + 20px, 44px); --size-h3: clamp(21px, 0.6vw + 18px, 26px); /* Watermark. Offsets are ratios of the mark's own width (-151/1071 and -216/1071), so it scales without the cut drifting. */ --wm-size: 1071px; --wm-top: calc(var(--wm-size) * -0.141); --wm-right: calc(var(--wm-size) * -0.2017); } /* ── 2. RESET & BASE ──────────────────────────────────────────────────────── */ *,*::before,*::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; } body{ margin: 0; background: var(--daelus-steel); /* Steel is the paper. Never white. */ font-family: var(--daelus-font-body); font-size: var(--daelus-size-body); line-height: 1.6; color: var(--daelus-gunmetal); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img{ max-width: 100%; } p{ text-wrap: pretty; } a{ color: var(--daelus-slate); } a:hover{ color: var(--daelus-gunmetal); } :focus-visible{ outline: 2px solid var(--daelus-gunmetal); outline-offset: 2px; } /* On any Gunmetal surface the default ring is invisible — it IS Gunmetal. ⚠ .site-footer is in this list for a real bug, found 4 Aug 2026: the footer carries eight focus stops on every page (four links, phone, email, the lockup and the privacy link) and every one of their rings was #191E24 drawn on #191E24. Keyboard users had no visible focus anywhere in the footer. Meanwhile .band--dark, which had the override, contains no focusable element on any page — the rule existed and protected nothing. */ .band--dark :focus-visible, .site-footer :focus-visible{ outline-color: var(--daelus-on-dark-hi); } .skip-link{ position: absolute; left: -9999px; background: var(--daelus-gunmetal); color: var(--daelus-steel); padding: 12px 20px; font-size: 14px; font-weight: 600; text-decoration: none; z-index: 10; } .skip-link:focus{ left: var(--pad); top: 8px; color: var(--daelus-steel); } /* ── 3. TYPE ROLES ────────────────────────────────────────────────────────── */ .h1{ font-family: var(--daelus-font-display); font-weight: 600; font-size: var(--size-hero); line-height: 1.0; letter-spacing: -0.022em; color: var(--daelus-gunmetal); text-wrap: balance; margin: 0; max-width: 900px; } .h2{ font-family: var(--daelus-font-display); font-weight: 600; font-size: var(--size-h2); line-height: 1.1; letter-spacing: -0.015em; color: var(--daelus-gunmetal); text-wrap: balance; margin: 0; } .h3{ font-family: var(--daelus-font-display); font-weight: 600; font-size: var(--size-h3); line-height: 1.2; color: var(--daelus-gunmetal); text-wrap: balance; margin: 0; } .lede{ font-size: var(--daelus-size-lede); line-height: 1.6; color: var(--daelus-slate); max-width: 560px; margin: 0; } /* 15px, not the brand kit's 13px. Raised deliberately: the readers are business owners in their 50s-70s and 13px body copy is hard work for them. This is the one place the site knowingly departs from the type scale in README §4, and it also changes the locked hero's pillar copy. Accessibility beat fidelity. */ .small{ font-size: 15px; line-height: 1.6; margin: 0; } /* A large figure: mono label above, Lora number below. Currently unused — the operating figures it was built for are confidential and were removed. Kept because it is the correct treatment if a publishable number ever appears (deal count, years held, response time). */ .figure-value{ font-family: var(--daelus-font-display); font-weight: 600; font-size: clamp(19px, 1.1vw + 13px, 24px); line-height: 1.15; letter-spacing: -0.01em; color: var(--daelus-gunmetal); } /* ── 4. MONO ROLES ──────────────────────────────────────────────────────────── Always uppercase, always wide-tracked, and always ABOVE the thing they name. ─────────────────────────────────────────────────────────────────────────── */ .mono-label,.mono-eyebrow,.mono-fig,.mono-meta,.mono-pillar{ font-family: var(--daelus-font-mono); text-transform: uppercase; display: block; /* `normal`, not the body's 1.6. The locked hero leaves line-height unset on every mono element, which yields a 13px line box at 9.5px. Inheriting 1.6 would give 15.2px and push the whole ledger 2px taller. */ line-height: normal; } /* Weight is 400 for every mono role in the UI. BUILD.md is explicit: JetBrains Mono 500 is loaded only because CAPITAL inside the lockup SVGs uses it — never apply 500 to UI text. */ .mono-label { font-weight: 400; font-size: 9.5px; letter-spacing: var(--daelus-track-label); color: var(--daelus-slate); margin-bottom: 6px; } .mono-eyebrow{ font-weight: 400; font-size: 11px; letter-spacing: var(--daelus-track-caps); color: var(--daelus-slate); margin-bottom: 18px; } .mono-fig { font-weight: 400; font-size: 9.5px; letter-spacing: var(--track-fig); color: var(--daelus-slate-light); margin-bottom: 14px; } .mono-meta { font-weight: 400; font-size: var(--size-meta); letter-spacing: var(--track-meta); color: var(--daelus-slate-light); } /* BRASS BUDGET — .mono-pillar is the ONLY class in this stylesheet that emits brass TEXT, and it is used exactly three times site-wide (the homepage pillar row). Everything else that wants to be brass uses .btn-text's 2px underline (a rule, not text) or --daelus-brass-ink. */ .mono-pillar { font-weight: 400; font-size: 9.5px; letter-spacing: var(--daelus-track-label); color: var(--pillar-label); margin-bottom: 6px; } /* ── 5. BUTTONS ─────────────────────────────────────────────────────────────── Primary is a square Gunmetal block. Secondary is text with a 2px brass underline and a trailing arrow. There are no outlined pill buttons. ─────────────────────────────────────────────────────────────────────────── */ .btn{ display: inline-block; background: var(--daelus-gunmetal); color: var(--daelus-steel); padding: 14px 24px; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; border: 0; border-radius: 0; white-space: nowrap; cursor: pointer; } .btn:hover{ background: #0F1318; color: var(--daelus-steel); } .btn--nav { padding: 9px 16px; font-size: 12.5px; } .btn-text{ display: inline-block; color: var(--daelus-gunmetal); font-size: 14px; font-weight: 600; line-height: 1.2; border-bottom: 2px solid var(--daelus-brass); padding-bottom: 3px; text-decoration: none; } .btn-text:hover{ color: var(--daelus-gunmetal); border-bottom-color: var(--daelus-brass-ink); } .band--dark .btn-text{ color: var(--daelus-on-dark-hi); } .band--dark .btn-text:hover{ color: var(--daelus-on-dark-hi); border-bottom-color: var(--daelus-brass); } /* ── 6. PAGE SHELL & BANDS ─────────────────────────────────────────────────── Full-bleed sections are built as .band > .shell > .band-inner. Never 100vw + negative margins — that produces horizontal scroll whenever a scrollbar is present. ─────────────────────────────────────────────────────────────────────────── */ .shell{ max-width: var(--shell); margin-inline: auto; } .band{ background: var(--daelus-steel); } .band-inner{ padding: var(--band-pad) var(--pad); } /* Breathing room where a band hands back to the Steel page. Without it the next ledger's top rule butts straight against the dark edge. */ .band + .shell{ display: block; padding-top: clamp(40px, 4vw, 64px); } /* …but a .prose already carries clamp(48px,5vw,72px) of its own top padding, so where one follows a band the two stacked and the band sat 40-64px lower in its whitespace than it did above (48-72 above vs 88-136 below). It was not centred in its own space. Zero it for that case ONLY. Do NOT blanket-zero .band + .shell. Checked against all six pages: /who-we-are band → .prose ← the double. This rule fixes it. /how-we-operate band → .ledger ← a ledger has no top padding of its own and NEEDS the rule above. */ .band + .shell > .prose:first-child{ padding-top: 0; } /* …and the same going in. A ledger has a hard Gunmetal rule at its foot and no padding after it, so a dark band following one butts straight against it. Matches .section-head's top padding, so the space above a section heading and the space before a dark band are the same. */ .shell > .ledger:last-child{ margin-bottom: clamp(56px, 6vw, 92px); } .band--tight .band-inner{ padding-block: clamp(28px, 3vw, 40px); } .band--dark{ background: var(--daelus-gunmetal); color: var(--daelus-on-dark); } .band--dark .h1, .band--dark .h2, .band--dark .h3, .band--dark .figure-value{ color: var(--daelus-on-dark-hi); } .band--dark .lede, .band--dark p{ color: var(--daelus-on-dark); } .band--dark .mono-label, .band--dark .mono-eyebrow{ color: var(--daelus-on-dark); } .band--dark a{ color: var(--daelus-on-dark-hi); } /* Body copy on a dark surface steps up from .small's 15px to the lede's 16.5px. Two reasons, and the size is the ONLY thing that changes — the colour was considered and deliberately left alone (29 Jul 2026). 1. IRRADIATION. Light type on a dark ground optically reads smaller and thinner than the same size dark-on-light, so 15px here does not look like the 15px in a ledger cell on Steel. The readers are owners in their 50s-70s; this is the same accessibility call that put body copy at 15px instead of the kit's 13px. 2. IT MATCHES THE OTHER DARK BAND. /how-we-operate's dark band already runs .lede at 16.5px. The values block was the only dark-surface body copy on the site still at 15px, so this removes an exception rather than adding one. Scope check before widening this: today it matches exactly one block — /who-we-are's values. /contact's dark band is a heading only. */ .band--dark .small{ font-size: var(--daelus-size-lede); } /* Vertical rhythm inside a band. Keeps the markup free of inline styles. */ .band-inner .h2 + .lede, .band-inner .h2 + p{ margin-top: 24px; } /* A section label above a band's heading. Same fix, same reason, as `.prose .mono-label`: the class ships 6px, which is right above a line of text and far too tight above a 44px head. Added 29 Jul 2026 with /who-we-are's "Our values"; it also loosens /how-we-operate's "The thesis", which had the same crowding. */ .band-inner .mono-label{ margin-bottom: 18px; } .band-inner .lede + .lede, .band-inner p + p{ margin-top: 18px; } /* A ledger inside a band. The band already supplies the page gutter, so the ledger must not add its own on top. Its hairlines switch to a light tone — #C9D0D6 is a Steel-page value and glares on Gunmetal. */ .band-inner .ledger{ margin-inline: 0; } .band-inner .h2 + .ledger{ margin-top: clamp(28px, 3vw, 44px); } /* Bounding rules for a ledger on the dark band. The Steel value (--daelus-rule-strong, #191E24) IS Gunmetal, so on this surface it renders invisible — which is the whole reason .ledger--bare existed. The relationship the system actually wants is "bound reads stronger than divider", so on dark that inverts: the bound goes LIGHTER than the #3A434C internal dividers rather than darker. #5C6871 is --daelus-slate-light, already in the palette. Added 29 Jul 2026 with the values block rebuild on /who-we-are. It is the only bounded dark ledger on the site; /how-we-operate's and /contact's dark bands carry no ledger at all. */ .band--dark .ledger{ border-top-color: #5C6871; border-bottom-color: #5C6871; } .band--dark .ledger-row + .ledger-row{ border-top-color: #3A434C; } .band--dark .ledger-row > .ledger-cell:not(:last-child){ border-right-color: #3A434C; } .band--dark .ledger-row > .ledger-cell:first-child{ padding-left: 0; } .band--dark .ledger-row > .ledger-cell:last-child{ padding-right: 0; } /* ── 7. THE LEDGER BLOCK ───────────────────────────────────────────────────── THE SIGNATURE MOVE. A content group bounded top and bottom by a 1px Gunmetal rule, with 1px Rule hairlines dividing rows and columns inside it. Rules run edge to edge of the block, inset from the page gutter. It must read as a printed table, not as a set of cards. Columns are declared through the --cols custom property. That is the hinge of the whole responsive system: one media query at 680px flattens every ledger on every page (see §12). ─────────────────────────────────────────────────────────────────────────── */ .ledger{ border-top: 1px solid var(--daelus-rule-strong); border-bottom: 1px solid var(--daelus-rule-strong); margin-inline: var(--pad); } .ledger-row{ display: grid; grid-template-columns: var(--cols, 1fr); align-items: stretch; } .ledger-row + .ledger-row{ border-top: 1px solid var(--daelus-rule); } .ledger-cell{ padding: 22px 24px; min-width: 0; } .ledger-row > .ledger-cell:not(:last-child){ border-right: 1px solid var(--daelus-rule); } /* The outer cells take an 8px optical inset rather than the full 24px, so their type hangs just inside the block's bounding rules instead of aligning to them. Load-bearing — do not delete. */ .ledger-row > .ledger-cell:first-child{ padding-left: var(--pad-cell); } .ledger-row > .ledger-cell:last-child { padding-right: var(--pad-cell); } /* A row with no internal vertical rules. Matches the divider rule's specificity (0,3,0) and wins by coming later. This comment used to say "the hero's headline+delta row". That was stale — index.html does not use the class and apparently stopped at some point, so the rule was dead code. Its one real use as of 29 Jul 2026 is /what-we-buy's "Where we don't fit." panel, where the divider ran into the strata graphic's Gunmetal field and read as a seam. */ .ledger-row--open > .ledger-cell:not(:last-child){ border-right: 0; } /* A ledger with no bounding rules — only the dividers between its cells. Used on a dark band, where the change of background already separates the block and the heavy Gunmetal rules would be invisible anyway. */ .ledger--bare{ border-top: 0; border-bottom: 0; } /* A ledger whose bounding rules run only its left HALF. Used once: /what-we-buy's "Where we don't fit." panel, where the right half is the strata graphic's own Gunmetal field — a Gunmetal rule drawn across that is invisible, so the block bounds only the copy column. The preceding block drops its bottom rule so each junction carries ONE half-width line instead of a full-width line with a half-width line sitting on top of it. (`.ledger + .ledger` already zeroes the FOLLOWING block's top rule, so the bottom junction needs no equivalent.) */ .ledger--half-bound{ border-top: 0; border-bottom: 0; position: relative; } .ledger--half-bound::before, .ledger--half-bound::after{ content: ""; position: absolute; left: 0; width: 50%; height: 1px; background: var(--daelus-rule-strong); } .ledger--half-bound::before{ top: 0; } .ledger--half-bound::after { bottom: 0; } .ledger:has(+ .ledger--half-bound){ border-bottom: 0; } /* Below 680px every ledger collapses to one column, so "half" no longer describes anything — the copy column is the whole block. The rules go full width there, which is what every other block on the site does anyway. */ @media (max-width: 680px){ .ledger--half-bound::before, .ledger--half-bound::after{ width: 100%; } } /* When a row spans the full block width, the RULES still run edge to edge but the text must not: body copy never runs wider than ~65 characters. Without this, a full-width record row sets ~150-character lines. */ .ledger-row > .ledger-cell:only-child > p{ max-width: 62ch; } /* Column presets. */ .ledger-row--pillars { --cols: 1fr 1fr 1fr; } .ledger-row--thirds { --cols: 1fr 1fr 1fr; } .ledger-row--halves { --cols: 1fr 1fr; } .ledger-row--quarters{ --cols: repeat(4, 1fr); } .ledger-row--wide { --cols: 2fr 1fr; } /* statement | supporting detail */ .ledger-row--form { --cols: 1fr 380px; } /* Two bounded blocks sitting next to each other each draw a Gunmetal rule, and the two stack into a 2px line heavier than every other bounding rule on the site. One rule between them. */ .page-head--closed + .ledger{ border-top: 0; } .ledger + .ledger{ border-top: 0; } /* NOTE — there is deliberately no "label | value" two-column preset. README §7: "Mono labels sit above the thing they name, never beside it." A spec table is therefore built as a GRID OF CELLS (halves/thirds/quarters) where each cell carries its own mono label above its own value. That reads as a printed spec sheet and stays inside the rule. */ /* Cell modifiers. */ .ledger-cell--tall { padding-block: 34px; } /* A cell whose content bleeds to its own edges. Written as a child selector so it beats the (0,2,0) first-child / last-child padding rules above — a bare .ledger-cell--flush would lose to them and keep 8px on the outer side. Used once: /what-we-buy's strata panel, which must be full bleed. */ .ledger-row > .ledger-cell--flush{ padding: 0; } /* A cell that centres its content vertically instead of stacking from the top. Every other cell on the site is top-aligned; this one exists because a square full-bleed graphic sets the row height, and the copy beside it is shorter. Without this the text floats at the top with a block of dead space under it. Note text cannot literally stretch to fill a taller box — the only ways to grow it are a bigger type size or looser leading, both of which break the scale. Centring is how the leftover space gets balanced instead of pooling at the bottom. Used once: /what-we-buy's strata panel. */ .ledger-cell--vcenter{ display: flex; flex-direction: column; justify-content: center; } .ledger-cell--right{ text-align: right; } /* ── 8. THE LOCKED HERO ────────────────────────────────────────────────────── Direction 3b, "ledger". The two heavy rules bounding the block and the delta seated ON the lower rule as FIG. 01 are the signature. Both are load-bearing. Every value here is transcribed from reference/hero-locked.html and must not drift. ─────────────────────────────────────────────────────────────────────────── */ /* The watermark clip. THIS IS THE WHOLE TRICK — read before refactoring. .hero-field's top edge IS the ledger's top rule, because the ledger block is the first thing inside it. That is why the cut needs no magic number and survives a taller or shorter nav. Never replace this with a hardcoded offset from the top of the page. The mark is 1071x1071 pushed up and right so its apex is clipped 44px above the rule; it also bleeds ~120px past the right edge and ~110px past the bottom. All four sides are clipped by .hero-mark's overflow:hidden. */ .hero{ position: relative; overflow: hidden; } .hero-field{ position: relative; } .hero-mark{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; user-select: none; } .hero-mark img{ position: absolute; top: var(--wm-top); right: var(--wm-right); width: var(--wm-size); height: var(--wm-size); max-width: none; /* beats the global img{max-width:100%} */ display: block; } .hero-body{ position: relative; } /* rule + all type paint over the mark */ .hero-head{ padding: 84px var(--pad-cell) 72px; border-bottom: 1px solid var(--daelus-rule); } .hero-lede{ margin-top: 36px; font-size: var(--size-hero-lede); max-width: 540px; } .hero-actions{ display: flex; align-items: center; gap: 22px; margin-top: 38px; flex-wrap: wrap; } /* ── 9. HEADER / NAV ───────────────────────────────────────────────────────── No hamburger. Four links and a button — a disclosure menu would need JS, an ARIA pattern and a focus trap, none of which can be maintained here. On phones the links wrap to a second row instead. Same markup, same DOM order, nothing hidden. ─────────────────────────────────────────────────────────────────────────── */ .site-nav-inner{ display: flex; align-items: center; gap: 28px; padding: 18px var(--pad); } .lockup-link{ display: flex; align-items: center; text-decoration: none; } .lockup-link img{ height: 32px; width: auto; display: block; } .nav-links{ margin-left: auto; display: flex; align-items: center; gap: 28px; font-size: 13px; font-weight: 500; } .nav-link{ color: var(--daelus-slate); text-decoration: none; } .nav-link:hover{ color: var(--daelus-gunmetal); } .nav-link.is-current{ color: var(--daelus-gunmetal); } /* ── 10. PAGE HEAD (interior pages) ────────────────────────────────────────── Eyebrow, headline, lede — closed by a single Gunmetal rule that hands off to the first ledger below it. ─────────────────────────────────────────────────────────────────────────── */ .page-head{ padding: clamp(44px, 5vw, 76px) var(--pad-meta) clamp(38px, 4vw, 56px); } .page-head .lede{ margin-top: 26px; } /* The 900px cap on .h1 belongs to the HERO — it is in the brand kit's type scale for the hero headline specifically. Interior pages have ~1230px of column going spare, so capping them at 900 forced most headlines onto a second short line and left the right side empty. Let them use the width. The lede stays narrow; only the headline widens. line-height 1.1, not the spec's 1.0. At 96px, Lora needs 123px of line box and 1.0 gives it 96 — so descenders on any line but the last collide with the ascenders below ("If you fit, you'll / know in one call." ran the y of "you" into the k of "know"). The spec's 1.0 is safe for the HERO only because "The check is" happens to carry no descenders; it was tuned to that one headline. The hero keeps 1.0 and stays pixel-exact to the reference. */ .page-head .h1{ max-width: none; line-height: 1.1; } .page-head--closed{ border-bottom: 1px solid var(--daelus-rule-strong); margin-inline: var(--pad); padding-inline: var(--pad-cell); } /* ── 11. CONTENT PRIMITIVES ─────────────────────────────────────────────────── */ /* A rule-free reading column. Body copy never runs wider than ~65 characters. */ .prose{ max-width: 620px; padding: clamp(48px, 5vw, 72px) var(--pad-meta); position: relative; z-index: 1; } .prose .mono-label{ margin-bottom: 18px; } /* 6px is tight above a 44px head */ .prose .h2 + p{ margin-top: 22px; } .prose p + p{ margin-top: 18px; } .prose p{ font-size: var(--daelus-size-lede); line-height: 1.6; color: var(--daelus-slate); } .prose .btn-text{ margin-top: 28px; } /* An inline citation inside prose. Base `a` is slate with no underline, which is the same colour as .prose p — so a bare link here would be invisible. Brass underline matches the footer's hover treatment; the text colour stays inherited so the link does not pull the eye out of the sentence. */ .prose-link{ color: inherit; text-decoration: none; border-bottom: 1px solid var(--daelus-brass); } .prose-link:hover{ color: var(--daelus-gunmetal); border-bottom-color: var(--daelus-gunmetal); } /* A schematic figure bleeding off the edge of a dark band. Decorative only. delta-nested-outline.svg strokes in Slate at 0.5 — on Gunmetal it reads as a faint drafting overlay, which is the intent. */ .band--figured{ position: relative; overflow: hidden; } .band--figured .band-inner{ position: relative; z-index: 1; } .band-figure{ position: absolute; right: -3%; top: 50%; transform: translateY(-50%); width: min(38%, 430px); pointer-events: none; user-select: none; z-index: 0; } /* A stroke-drawn mark behind a prose column, cropped by the right edge. Decorative only. Deliberately NOT the brass watermark. That file is the homepage hero's signature, and reusing it here made the two pages rhyme — the same filled brass mass twice. This is delta-nested-outline: stroke-only, in Slate, so it reads as a drafting overlay rather than a second logo. It also spends no brass, which keeps the hero's brass moment exclusive. Chosen 28 Jul 2026. */ /* No closing rule. This section is pure prose and simply ends where the dark values band begins — that colour change is the break. Two rules were built here on 29 Jul 2026 and BOTH removed: a full-width one (it stacked a hard edge directly above the dark band's hard edge) and then a half-width one spanning just the copy column. Don't add a third. The section figure anchors its height to `bottom: 0`, which needs no rule to exist. */ .prose-mark-wrap{ position: relative; overflow: hidden; } .prose-mark{ position: absolute; right: -7%; top: 50%; transform: translateY(-50%); width: min(48%, 520px); pointer-events: none; user-select: none; z-index: 0; } /* ── 11b. THE SECTION FIGURE — delta-quantized ─────────────────────────────── The graphic half of a copy/graphic section. Imported from the Daelus Design System project 29 Jul 2026; its guideline is guidelines/brand-delta-quantized.html there. Used once, on /who-we-are's "Why I left the advice business." It is NOT the delta and must not be treated as one: no lockup, no favicon, never inside the lockup's clearspace. ── THE THREE ANCHORS. This is the whole placement rule, and every value below is DERIVED so the graphic cannot drift when the copy length or the type scale changes. Don't replace any of them with a measured pixel. TOP the h2's CAP LINE — not its box top, not its baseline. The brass tick sits on it. capTop = h2Top + (lineHeight - fontSize)/2 + 0.287 * fontSize. Our .h2 runs line-height 1.1, so that folds to 0.337 * font-size below the h2's box top, and the h2's box top is exactly .prose's top padding. LEFT the copy column's MEASURE EDGE — the line the text breaks against. .prose is 620px border-box with --pad-meta of side padding, so its text ends at 620 - --pad-meta. HEIGHT cap line down to the block's CLOSING RULE. ⚠ DEPARTURE, settled 29 Jul 2026. The handoff's reference section is bounded top and bottom and anchors the height to that bottom border. THIS SECTION HAS NO RULES AT ALL — it is pure prose that ends where the dark values band begins, and that colour change is the break. `bottom: 0` puts the figure's base at the same place a closing rule would have been. Both a full-width and a half-width closing rule were built here and both were removed. Don't add a third; see the note above .prose-mark-wrap in §11. Width follows the 247:240 ratio on its own. NEVER set a width, and never scale the axes independently. ── Built for Steel, and only Steel. The cells are Zinc and the void outline is Gunmetal, both hardcoded in the file. On Zinc the cells vanish; on a Gunmetal panel the void outline does. Either needs a retinted copy of the asset, not a CSS override. ── The section runs WITHOUT a watermark, and the apex tick is the only brass in it. Two brass deltas in one corner is a collision, not a layer — which is why this REPLACED .prose-mark here rather than joining it. */ /* ── The gutter. A LOGGED, APPROVED DEPARTURE from the handoff — don't "correct" it back. The handoff anchors LEFT flush to the measure edge, and its worked example puts that edge at x604 (540 measure inside a 1248 block, at the 1360 shell). This site's .prose is 620px border-box, so its measure is 620 - 2 * --pad-meta ≈ 492 and its edge lands at x556 — 48px left of the spec's. Flush against that narrower column read as crowding rather than as alignment. One page gutter (--pad, 56px at desktop) puts the figure at x612, which is within 8px of the spec's x604 while still deriving from this site's own measure edge and spacing unit rather than from a hardcoded number. Reviewed against the rendered page and chosen on that basis, 29 Jul 2026 — "whatever fits where the image is now." The alternative considered and NOT taken was widening .prose to 668px to make the measure exactly 540; it was rejected because .prose is shared and every other prose block on the site would have got a wider reading measure with it. THIS IS THE ONE NUMBER TO TUNE if the figure ever needs to move horizontally. 0px returns it to flush. */ :root{ --figure-gutter: var(--pad); } .section-figure{ position: absolute; top: calc(clamp(48px, 5vw, 72px) + 0.337 * var(--size-h2)); bottom: 0; left: calc(620px - var(--pad-meta) + var(--figure-gutter)); pointer-events: none; user-select: none; z-index: 0; } .section-figure img{ height: 100%; width: auto; max-width: none; /* beats the global img{max-width:100%} */ display: block; } /* Below this width there is no graphic half to place the figure in — the anchors still resolve, but the figure crowds the copy and then lands on top of it. Hidden rather than shrunk, cropped or centred: the guideline forbids the last two outright, and below ~360px tall the cells stop reading as cells anyway. 1280 and not lower, deliberately. The first attempt used 1080; at ~1200 the figure technically fitted but had ~40px of clearance to the content edge and read as crowded, which is what prompted the gutter above. 1280 is also where BUILD.md stops designing, so below it this build is improvising regardless — see the responsive note in README. */ @media (max-width: 1280px){ .section-figure{ display: none; } } /* A heading introducing the ledger block beneath it. Sits outside the block so the block keeps its own bounding rules — the heading is not a table row. Tighter below than above, so it binds to the block it names. */ .section-head{ padding: clamp(56px, 6vw, 92px) var(--pad-meta) clamp(22px, 2.2vw, 30px); } /* A stack of label-above-value pairs inside one ledger cell, hairline-divided. Labels always sit above their value — README §7. */ .spec-stack > * + *{ margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--daelus-rule); } .spec-stack p{ font-size: 15px; line-height: 1.6; margin: 0; } /* 6px is fine above a line of text, too tight above a whole stack. */ .mono-label + .spec-stack{ margin-top: 18px; } /* A figure. The schematic panel is INSET — a 470px square, not a full-bleed surface. Uncapped it fills the cell and becomes the loudest thing on the page, which is not what a stand-in for photography should do. No caption: README §7 forbids labelling the delta anywhere. NOTE: no page uses .fig as of 29 Jul 2026 — /what-we-buy's panel moved to .panel-graphic below. Kept for the next inset figure; delta-schematic-panel .svg is still in assets/ and is still the right asset for that treatment. */ .fig{ margin: 0; } .fig img{ width: 100%; max-width: 470px; height: auto; display: block; } /* THE STRATA PANEL — a full-bleed square graphic filling a ledger cell. From the design handoff, 29 Jul 2026. This is a FIELD, not a picture. The asset carries no margin: its base row spans the viewBox exactly and sits flush on the bottom edge so both bottom vertices land on the container's corners. Square container, cover, edge to edge — never inset, padded, bordered, or cropped to a non-square box, and never used as a standalone figure. The container gets NO background. The file paints its own #191E24 field, so it behaves as a self-contained dark image on this Steel cell. The strata themselves are Steel ink at 9% and would be invisible without that field. The hairlines here scale WITH the graphic on purpose — unlike delta-quantized, this asset must not be given non-scaling-stroke. */ .panel-graphic{ aspect-ratio: 1; overflow: hidden; } .panel-graphic img{ width: 100%; height: 100%; object-fit: cover; display: block; } /* The 404's small unlabelled delta, bottom-right of its cell. */ .error-mark{ display: flex; align-items: flex-end; justify-content: flex-end; } .error-mark img{ width: 120px; height: auto; display: block; } /* The shared closing CTA. */ .cta-strip{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 28px; padding: clamp(40px, 4.5vw, 60px) var(--pad-meta); border-top: 1px solid var(--daelus-rule-strong); margin-inline: var(--pad); padding-inline: var(--pad-cell); } .cta-actions{ display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } /* A list of short declaratives divided by hairlines — no bullets. */ .h2 + .rule-list{ margin-top: 26px; } .rule-list{ list-style: none; margin: 0; padding: 0; } .rule-list li{ padding: 14px 0; border-top: 1px solid var(--daelus-rule); font-size: 15px; line-height: 1.6; } .rule-list li:first-child{ border-top: 0; padding-top: 0; } /* A rule-list inside a spec entry needs breathing room from the sentence that introduces it and the one that follows. .spec-stack zeroes paragraph margins, so without these the lead-in line collides with the first item. Used on /privacy, which is the only page that sets a list inside a spec entry. */ .spec-stack p + .rule-list{ margin-top: 14px; } .spec-stack .rule-list + p{ margin-top: 16px; } /* Inline code — the one place it appears is a cookie name on /privacy. Brand mono, slightly down-sized so it sits on the same visual weight as the body text rather than shouting. */ code{ font-family: var(--daelus-font-mono); font-size: 0.88em; color: var(--daelus-gunmetal); } /* Stacked short lines inside a split ledger row. */ .tight-list{ list-style: none; margin: 0; padding: 0; } .tight-list li{ font-size: 15px; line-height: 1.55; padding: 7px 0; color: var(--daelus-slate); } /* ── 11a. PHOTOGRAPHY ──────────────────────────────────────────────────────── The first photography on this site. Used only on /who-we-are, where the page's job is "here is the person you would be selling your company to." THE PLATE IS THE COMPONENT, NOT THE IMAGE. .photo is a bounded box with a Zinc fill and a hairline; the is optional and sits inside it. Before the photos are shot the plate renders as a clean empty rectangle that looks deliberate — no broken-image icons, and the page can ship without them. When a photo lands, uncomment the ; nothing about the layout moves, because the plate's aspect-ratio already reserved the space. House rules apply: radius 0, no shadow, no gradient. A photo gets a hairline and nothing else — same as every other bounded thing on this site. ─────────────────────────────────────────────────────────────────────────── */ :root{ /* Photos are desaturated and pulled a touch warm so they sit in the Gunmetal / Steel range instead of dropping a full-colour marketing image into a printed-record system. THIS IS THE ONE SWITCH. To go full colour, set this to `none` — that is the entire change, and nothing else in the system has to move. */ --photo-filter: grayscale(0.85) contrast(1.04) sepia(0.06); } .photo{ background: var(--daelus-zinc); border: 1px solid var(--daelus-rule); overflow: hidden; } .photo img{ display: block; width: 100%; height: 100%; object-fit: cover; /* the plate's ratio wins, not the file's */ filter: var(--photo-filter); } /* The headshot. Capped at 420px rather than filling the cell: at the 1360px shell a half-cell is ~640px, and a 4:5 portrait that wide runs 800px tall, which buries the bio beside it. 420 still reads as clearly the largest of the three. The 32px is now the gap DOWN to .photo-pair only — the name sits above the plate as of 29 Jul 2026, so nothing depends on this margin to separate the photo from the caption. .photo-pair also carries margin-top:30px; adjacent block margins collapse, so the real gap is 32, not 62. Leave both: whichever one you delete, the other still holds the spacing. */ .photo--lead{ aspect-ratio: 4 / 5; max-width: 420px; margin-bottom: 32px; } /* Name/location block → headshot. Added 29 Jul 2026 with the order flip (see the LEFT COLUMN comment in who-we-are.html for why the photo moved below the name). 22px, deliberately tighter than the 30-32px gaps elsewhere in this column: the caption and the face are ONE unit, and the proximity is what makes the pairing read. Open it up to 30 and the name starts to look like it belongs to the bio in the next column instead. */ .identity-group + .photo--lead{ margin-top: 22px; } /* Family and dog, side by side at the foot of the identity column. They stay paired at EVERY width — they are small enough that stacking them at 680px would only make them huge. */ .photo-pair{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; } /* An `.is-pending` modifier lived here on 4 Aug 2026, hiding the dog plate while its photograph was outstanding. All three photos are now in, so it was deleted rather than left as dead CSS. If a photo is ever pulled again, the reasoning is worth repeating: an empty plate beside a filled one stops reading as reserved space and starts reading as a failed image, and a lone remaining photo needs capping to the lead plate's 420px or it outweighs the portrait above it. */ /* SQUARE, not 3:2 — changed 4 Aug 2026 when the real family photo arrived. It is a portrait shot (3024x4032) of five people stacked vertically. The widest 3:2 crop available from it is 2016px tall; the faces span 2444px. The photo physically cannot fit a landscape plate without losing a child — measured, not estimated. Square fits everyone with ~290px of margin top and bottom. Revert to `3 / 2` only if both photos in the pair are replaced with landscape originals; the plates must match each other. */ .photo-pair .photo{ aspect-ratio: 1 / 1; } /* The identity column's internal rhythm. .h3 and .small both ship margin:0, so without this the name and the location line sit on top of each other. */ .identity-group + .identity-group{ margin-top: 30px; } .identity-group .h3 + .small{ margin-top: 8px; } /* Separates the bio from the record inside the operator block's right cell. The SAME line as the ledger's own bounding rule — 1px --daelus-rule-strong. It has to sit between two weights: heavier than the #C9D0D6 hairlines dividing the record entries below it, lighter than a full break. Matching the block's top rule is what does that, and it costs the system nothing because it is a weight already in use. Tried and rejected 29 Jul 2026: 2px Gunmetal. Read as a slab. Don't retry — and note the README logs a 2px line everywhere else as a BUG. */ .record-divide{ border-top: 1px solid var(--daelus-rule-strong); margin-top: 34px; padding-top: 34px; } /* ── 12. RESPONSIVE ────────────────────────────────────────────────────────── Fluid first: clamp() carries the type scale, gutter, hero gap and delta. Exactly two media queries exist in this file, and both change STRUCTURE rather than size. ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 860px){ .ledger-row--form { --cols: 1fr 320px; } /* Scale the watermark with the narrower field so the cut and both bleeds keep the same proportions. Offsets derive from --wm-size, so only this one number changes. */ :root{ --wm-size: 820px; } .ledger-row--quarters{ --cols: 1fr 1fr; } .ledger-row--quarters > .ledger-cell:nth-child(2){ border-right: 0; } .ledger-row--quarters > .ledger-cell:nth-child(-n+2){ border-bottom: 1px solid var(--daelus-rule); } } /* ─ 680px: the hairlines rotate ─ THE SINGLE MOST IMPORTANT RULE IN THIS STYLESHEET. Because every ledger declares its columns through --cols, one line collapses every ledger on all six pages to a single column, and the hairline that divided columns now divides rows. Nothing is hidden and nothing is disabled — the table just becomes single-column, exactly as a printed table does on narrower paper. Useful side effect: --spec rows collapse so the mono label sits ABOVE its value, which is what the brand rule says labels should do anyway. */ @media (max-width: 680px){ .ledger-row{ --cols: 1fr; gap: 0; } .ledger-row > .ledger-cell{ border-right: 0; } .ledger-row > .ledger-cell:not(:last-child){ border-bottom: 1px solid var(--daelus-rule); } .ledger-cell{ padding: 20px var(--pad-cell); } .ledger-row--quarters > .ledger-cell:nth-child(-n+2){ border-bottom: 1px solid var(--daelus-rule); } .ledger-row--quarters > .ledger-cell:last-child{ border-bottom: 0; } .hero-head{ padding: 44px var(--pad-cell) 40px; } :root{ --wm-size: 620px; } /* Every headline wraps at this width, so the descender collision described at .page-head .h1 applies to the hero too. Mobile is undesigned in BUILD.md, and legibility wins over matching a desktop-only spec. */ .h1{ line-height: 1.08; } /* Nav wraps to a second row; the CTA de-styles to the secondary treatment. */ .site-nav-inner{ flex-wrap: wrap; gap: 0; padding: 16px var(--pad) 0; } .nav-links{ order: 3; width: 100%; margin-left: 0; margin-top: 14px; padding: 12px 0 14px; border-top: 1px solid var(--daelus-rule); column-gap: 18px; row-gap: 10px; flex-wrap: wrap; } .btn--nav{ background: none; color: var(--daelus-gunmetal); padding: 0 0 2px; font-size: 13px; border-bottom: 2px solid var(--daelus-brass); } .btn--nav:hover{ background: none; color: var(--daelus-gunmetal); } .prose-mark{ width: 78%; right: -22%; } .cta-strip{ display: block; } .cta-actions{ margin-top: 24px; } } @media (max-width: 420px){ .hero-actions{ gap: 16px; } } /* NOTE — the footer's own responsive rules are NOT here. They live at the end of §13, after .footer-cols is declared. A media query adds no specificity, so a later plain rule beats an earlier @media one; putting them here silently did nothing and the 4-column grid overflowed every page below 420px. */ /* ── 13. FOOTER ────────────────────────────────────────────────────────────── The site's second (and last) background colour. ─────────────────────────────────────────────────────────────────────────── */ .site-footer{ background: var(--daelus-gunmetal); color: var(--daelus-on-dark); margin-top: 0; } /* When a dark band ends the page, it and the footer are the same Gunmetal and merge into one slab — the band's closing line then reads as footer boilerplate. A hairline keeps them separate. (/contact does this.) */ .band--dark + .site-footer{ border-top: 1px solid #3A434C; } .site-footer-inner{ padding: clamp(48px, 5vw, 72px) var(--pad-meta) 28px; } .site-footer .lockup-link img{ height: 26px; } .footer-cols{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-top: 44px; } .footer-col h2{ font-family: var(--daelus-font-mono); font-weight: 500; font-size: 9.5px; line-height: normal; letter-spacing: var(--daelus-track-label); text-transform: uppercase; color: var(--daelus-on-dark); margin: 0 0 14px; } .footer-col ul{ list-style: none; margin: 0; padding: 0; } .footer-col li{ margin-bottom: 9px; } .footer-col a{ color: var(--daelus-on-dark-hi); font-size: 14px; text-decoration: none; } .footer-col a:hover{ color: var(--daelus-on-dark-hi); border-bottom: 1px solid var(--daelus-brass); } .footer-col p{ font-size: 14px; line-height: 1.55; color: var(--daelus-on-dark); margin: 0 0 9px; } .footer-rule{ border: 0; border-top: 1px solid #3A434C; margin: 40px 0 22px; } .footer-base{ display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: baseline; } .site-footer .mono-meta{ color: var(--daelus-on-dark); } .footer-legal{ font-size: 11px; line-height: 1.6; color: #6E7883; margin: 18px 0 0; max-width: 720px; } /* The privacy link lives on this line. Without its own rule it inherits the base `a` colour (Slate), which is near-invisible on Gunmetal. It sits one step brighter than the legal text around it and takes the footer's brass hover, matching .footer-col a — legible, but still clearly boilerplate rather than navigation. */ .footer-legal a{ color: var(--daelus-on-dark); text-decoration: none; border-bottom: 1px solid #3A434C; } .footer-legal a:hover{ color: var(--daelus-on-dark-hi); border-bottom-color: var(--daelus-brass); } /* Footer responsive — must sit AFTER .footer-cols above. See the note in §12. */ @media (max-width: 860px){ .footer-cols{ grid-template-columns: 1fr 1fr; gap: 32px 40px; } } @media (max-width: 460px){ .footer-cols{ grid-template-columns: 1fr; gap: 28px; } } /* ── 14. HUBSPOT FORM ──────────────────────────────────────────────────────── The form sits INSIDE a ledger block so the bounding rules annex it into the system rather than letting it read as a rented widget. ⚠ YOU CANNOT STYLE THE FORM FROM THIS FILE. Portal 245395921 uses HubSpot's new embed, which renders the form inside its own