duplicates. aria-hidden
kept them out of the accessibility tree and user-select:none kept them
out of a copied selection, but neither touches raw markup, and raw
markup is what a crawler, a scraper and a reader-mode extractor read.
The H2 was serving "Nothing is brokenbrokenbroken. That is the
problem." to every one of them - including, now, the link unfurl this
page just gained.
Generated content fixes it at the source: the word is in the DOM once,
and the two painted copies exist only in CSS.
THE ` / ""` IS NOT DECORATION. Chromium and Firefox both put
pseudo-element text into the accessibility tree, so moving the
duplicates into CSS would have handed the tripled word straight back
to screen readers - the one audience the old markup got right. The
alt-text half of the content property overrides what is announced,
and empty is exactly right: these two are a picture of a word that is
already being read. */
content: attr(data-word) / "";
position: absolute;
left: 0; top: 0;
white-space: nowrap;
color: var(--clr-ivory-ground); /* the ink tile's heading color */
/* ---- WHY THESE TWO LINES EXIST: THE HOVER USED TO GLITCH ----
A clipped element that is transform-animated is the one combination
that cannot be handed to the compositor as-is. Without a layer of its
own, Chromium re-rasterizes the clip on every frame of the 180ms, and
the seam is the worst possible place for that: the box is 52.89px
tall, so 52% lands on 27.50px and the +0.5px overlap ends at 28.00px -
a boundary that sits half-way through a device pixel and gets
re-resolved 11 times on the way across. That is the shimmer.
will-change promotes both halves once, up front, and the clip is then
baked into each layer - the clip itself never changes, only the
transform, so the layers are simply moved instead of redrawn.
IT HAS TO BE DECLARED AT REST, not inside :hover. Promotion on hover
IS the flash: the layer is created at the moment the pointer arrives,
the text re-renders into it, and that re-render is the frame you see.
Declared here it has already happened before anyone touches it.
The explicit identity transform is the same argument one step earlier:
interpolating from `none` makes the first frame a type conversion
rather than a move, and it is free to just start from zero. */
transform: translateX(0);
will-change: transform;
/* ---- THE HALVES ARE NOT PAINTED AT REST. See the long note below; this
is the line that ends the hairline-seam bug rather than hiding it.
opacity, NOT visibility or content:none. The layer has to stay alive
and promoted through the rest state - that is the whole point of
will-change above - and hidden/none discards it, which brings back the
promote-on-hover flash this file already fixed once.
THE OPACITY SWITCH IS INSTANT AND DELAYED, which is not a contradiction:
0s duration, 180ms delay. It fires when the halves have finished
travelling, so on the way OUT the word reassembles first and only then
hands back to the real text. On the way IN the delay is overridden to 0
so the swap happens on the same frame the movement starts. */
opacity: 0;
transition: transform var(--motion-quick) var(--ease-arrive),
opacity 0s linear var(--motion-quick);
}
/* Matching half of the same swap, on the real word: transparent the instant
the pointer arrives, back 180ms after it leaves - the frame the halves
stop moving and stop being painted. Declared here so the delay belongs to
the leave; :hover carries the 0s version for the arrival. */
.fracture { transition: color 0s linear var(--motion-quick); }
/* ============ THE HAIRLINE SEAM, AND WHY IT KEPT COMING BACK ============
THIRD ATTEMPT, AND THE FIRST ONE THAT REMOVES THE CAUSE. The word looked
faintly cracked when nobody was touching it - the exact opposite of the
idea, which is that it is whole until it is touched.
THE CAUSE, stated properly. Two clipped copies meeting at a shared edge
cannot add up to solid. The boundary row is a partial-coverage edge for
BOTH halves, so each antialiases it to roughly half alpha and the sum
lands short. Worse here than in the general case, because will-change
puts each half on its OWN COMPOSITOR LAYER: the two edge rows are
rasterized separately and then composited, so they blend towards the tile
instead of into each other. Two 50% rows over ink give about 75%, never
100%. And the geometry guarantees the edge is fractional - the box is
52.89px tall at a y ending in .625, so 52% lands at 27.50px and the seam
sits mid-device-pixel at DPR 1.
WHAT WAS TRIED AND WHY IT WAS NEVER GOING TO HOLD. First the seam was
moved off 50%. Then the top half was given a +0.5px overlap so one of
them would paint the boundary row solid. Both are attempts to make the
artifact invisible, and both depend on how a particular engine rounds a
fractional clip inside a promoted layer - which is exactly the kind of
thing that changes between Chromium versions, between DPRs, and between
this machine and a reader's. That is why it came back.
THE FIX IS TO NOT BUILD THE RESTING WORD OUT OF TWO LAYERS AT ALL. At
rest the halves are not painted (opacity: 0 above) and what you see is
the real text node, set once, no clip, no seam, nothing to round. It is
ordinary text and there is no artifact available to it. On hover the real
word goes transparent and the two halves light up on the same frame, and
because their color is identical to the h2's - both #F6F1E8, checked,
not assumed - the handover cannot be seen.
THE SEAM STILL EXISTS WHILE THE HALVES ARE ON SCREEN, and that is now
harmless twice over: they are 6px apart for all of the hover, and the
only moments they sit in register are the first and last frames of a
180ms move. A hairline visible for one frame OF A WORD BREAKING APART is
not a defect, it is the crack.
THE OVERLAP STAYS ANYWAY. It costs nothing and it cleans up those same
transitional frames; it is simply no longer load-bearing. If a future
engine rounds it differently, the resting word - the thing everyone
actually looks at - is not affected, because it is not made this way. */
.fracture::before { clip-path: polygon(0 0, 100% 0, 100% calc(52% + 0.5px), 0 calc(52% + 0.5px)); }
.fracture::after { clip-path: polygon(0 52%, 100% 52%, 100% 100%, 0 100%); }
/* EVERY HOVER RULE IS GATED, and the gate now protects more than it did.
An unsupported `content` value invalidates the whole declaration, so the
pseudo-elements never generate. Previously `color: transparent` sat on
.fracture unconditionally and would have deleted the word from the page
outright on any engine too old for the alt-text syntax (Firefox below
133). It is now on :hover, so the same failure would have hidden the word
only while the pointer was over it - still wrong, and still gated.
Ungated, an engine without pseudo support gets no fracture and a word
that behaves. Losing an effect is the correct failure; losing a noun is
not. */
@supports (content: "a" / "b") {
.fracture:hover { color: transparent; transition: color 0s linear 0s; }
.fracture:hover::before, .fracture:hover::after {
opacity: 1;
transition: transform var(--motion-quick) var(--ease-arrive),
opacity 0s linear 0s;
}
.fracture:hover::before { transform: translateX(-3px); }
.fracture:hover::after { transform: translateX(3px); }
}
/* The statement tile is narrow on purpose, so the prose beside it can be
wide and therefore short. At 46px the longer line measures 378px, so the
tile needs 379px of text width. c5 is 433px, which leaves only 54px for
padding - hence 20px sides here rather than the 36px the other tiles use.
Vertical padding stays at 36px so it still reads as a tile.
If the statement ever needs to grow past 46px, this tile has to widen to
c6 or the type will fall to three lines. */
.tile--statement { padding-left: var(--space-4); padding-right: var(--space-4); }
.tile h3 { font-size: var(--text-h2); line-height: var(--leading-snug); margin: var(--space-3) 0; }
/* The `.terms` table styles went with the terms section. Nothing else on
the page sets a table. */
/* ---------- capture ----------
Briefly a bare mailto: link, now back to a real field + submit. The
mailto was correct on the reasoning and wrong in the hand: an input is
the affordance people read as "give me your address", and a lone button
in an empty tile reads as an afterthought. Restored verbatim, including
the two contrast decisions measured for it.
Nothing receives the address yet - a valid submit is still stopped
rather than faked. Wiring it up is a later job. */
/* Both lines stay in the tracked caps of .cap; the pair is separated by
SIZE rather than by changing one of them to serif. The offer title steps
up to 17px and the description sits at the 11px micro-label, so the
order is read as title-then-detail instead of two equal labels.
Color is inherited from .cap either way: Ivory Ground on the clay hero
tile, which is the only one of the seven that clears 4.5:1 there, and
warm slate on the ivory tile at the close. */
/* 17px tracked caps needs about 480px and the close tile gives it 450, so
this line wraps there and only there. Left alone it broke at the hyphen
in "one-page" - "A ONE-" / "PAGE CHECKLIST" - which reads as a typo. The
.nobreak span around the second phrase leaves the separator as the only
break opportunity, so the wrap lands on the "ยท" and the two halves stay
whole. It is not shrunk to fit: the size is the distinction that was
asked for, and a deliberate two-line title costs nothing. */
.capture__label { font-size: var(--text-body-size); line-height: var(--leading-body); }
.capture__desc { margin: var(--space-3) 0 0; }
/* A capture tile carries a permanently reserved error line under its
submit, and that slot is invisible whitespace at rest - so the tile's
own 36px bottom padding was landing UNDER 30px of reserved space and the
button ended up with 72px beneath it, twice what its other three sides
get. It read as a hole rather than as padding.
The padding comes in to 14px, so the total under the button is 8 + 22 +
14 = 44px, close to the 36px the tile uses elsewhere. The reserved slot
itself is untouched: an error still lands in space already allocated,
nothing reflows, and the message keeps 14px of clearance below it rather
than sitting on the tile edge. */
.tile--capture { padding-bottom: var(--space-3); }
/* ---------- the post-submit screen ----------
Shown in place of the whole offer, not just the form. The label and the
description describe an offer the reader has just taken, and the fine
print's first sentence - "You'll get this" - stops being true the moment
it is sent. That is the same reason the download page uses only the
second half of the standing privacy line.
IT TAKES THE BODY VOICE, NOT THE TRACKED CAPS the offer above it uses.
Same argument the form messages are set by: a tracked micro-caps line
reads as a system alert, and this is a person telling you something
arrived. Emphasis comes from size. */
.capture__swap[data-state="offer"] .capture__done { display: none; }
.capture__swap[data-state="done"] .capture__offer { display: none; }
/* THE HERO RESERVES ITS HEIGHT BY CONSTRUCTION, NOT BY A NUMBER. Both
states are placed in the same grid cell, so the wrapper is always as
tall as the taller of the two and the swap cannot change it - at any
viewport, at any text size, with no constant that goes stale the next
time the copy moves. This page has been bitten twice by hardcoded
geometry that was right for one width and nothing else.
`visibility`, not `display`: a display:none child contributes no height,
which is the entire point of the stack. visibility:hidden keeps the box
and still takes the hidden state out of the tab order and the
accessibility tree, so the form behind a shown screen cannot be tabbed
into. These rules must stay AFTER the pair above - equal specificity,
later wins. */
.capture__swap--reserve { display: grid; }
.capture__swap--reserve > * { grid-area: 1 / 1; }
.capture__swap--reserve[data-state="offer"] .capture__done { display: block; visibility: hidden; }
.capture__swap--reserve[data-state="done"] .capture__offer { display: block; visibility: hidden; }
/* Focus is moved here on success so the swap is announced rather than
silently replacing what the reader was looking at. No ring: this is a
container the reader never tabbed to, and the ring belongs on controls. */
.capture__done:focus { outline: none; }
/* Sizes copied as declarations, not by borrowing .hero__lead - that class
carries a 58ch cap and a margin belonging to the hero column. */
.done__lead { font-size: var(--text-lead); line-height: var(--leading-snug); margin: 0; }
.done__body { margin: var(--space-3) 0 0; }
.done__go { margin: var(--space-4) 0 0; }
/* AN INLINE LINK ON THE CLAY TILE CANNOT USE --link. The link color is
clay, and clay on clay is 1.00:1 - the same color, invisible. Ivory
Ground is the only one of the seven that clears 4.5:1 against clay at
body size, so it is the only value available here.
THAT LEAVES NO SECOND COLOR FOR HOVER, so hover drops the underline
instead: a real, visible state change that costs no contrast. Flagged
for Jeff - this is a new link rule on a locked palette, not a derived
one. The closing screen has no such problem; its link is a .btn--ink. */
.tile--clay .done__body a {
color: var(--clr-ivory-ground);
text-decoration-color: var(--clr-ivory-ground);
}
.tile--clay .done__body a:hover {
color: var(--clr-ivory-ground);
text-decoration-color: transparent;
}
/* The close is the last section, and 88px of section padding under it was
stacking on top of the footer's own rule and 28px inset - 116px of empty
ivory before anything was said. Between two sections 88px is the page's
rhythm and it stays; against a ruled footer it is one separator too many.
56px still reads as a section break, and the rule does the rest. */
#book { padding-bottom: var(--space-7); }
/* 520px is the row's own content, not a round number: the submit measured
220px wide when it held "Send me the checklist" in tracked caps, and the
email field took the remaining 300px, which is enough for a full address
before it scrolls. Measured at 1280px. Both halves flex, so this is the
ceiling rather than the layout - past it the row starts looking like a
form on a page built for something else.
THE SUBMIT NOW READS "Send it to me". Re-measured on a render,
12 August 2026 at viewport 1400: the button is 146.1px and the field is
373.9px, and they still sum to the 520px row. Every character that comes
off the button goes to the field, so the address argument above keeps
getting better as the label gets shorter. 220/300 and 188.5/331.5 are
the historic pairs; 146.1/373.9 is current.
THE LABEL IS NOT "Send me the check" ANY MORE, AND MUST NOT GO BACK.
A bare "the check" reads as a restaurant bill or a bank draft in US
English. "The Detection Check" survives because the modifier carries it;
stripped of the modifier it lands somewhere else entirely. "Send it to
me" leans on the label sitting directly above the field, which names the
thing in full - so the referent is on screen and the button does not
have to repeat it. See the naming rule at the MESSAGES object. */
.capture { max-width: 520px; }
.capture__row { display: flex; margin-top: var(--space-3); flex-wrap: wrap; }
.capture input[type=email] {
/* 220px basis, and it is the submit's measured width rather than a guess
- the two halves start equal and the field takes every pixel the row
has spare, reaching 300px at the 520px cap. Below about 470px the row
wraps and each takes a full line. */
flex: 1 1 220px; font-family: var(--font-serif); font-size: var(--text-body-size);
color: var(--text-heading); background: var(--clr-ivory-ground);
border: var(--rule-hairline) solid var(--clr-hairline); border-right: 0;
border-radius: var(--radius); padding: var(--space-4); min-width: 0;
transition: border-color var(--transition-color);
}
.capture input[type=email]::placeholder { color: var(--text-label); opacity: 1; }
/* The field and the submit share an edge - they are one instrument, so the
gap between them is exactly 0px. The global focus ring sits at
outline-offset:3px, which therefore had nowhere to go but on top of the
button. Both halves draw their ring INSIDE their own box instead.
2px keeps it above the WCAG 2.2 focus-appearance minimum. */
.capture input[type=email]:focus-visible {
outline: var(--focus-ring) solid var(--clr-brown-black); /* 14.63:1 inside the ivory field */
outline-offset: -2px;
}
/* The submit is Brown Black, so an ink ring inside it would be invisible.
It takes an Ivory Ground ring - 14.63:1 the other way round.
DRAWN IN currentColor RATHER THAN NAMED. The button now changes fill on
hover, and on the clay tile it inverts to Ivory Ground - where a ring
hard-coded to Ivory Ground would have disappeared into the fill for
anyone holding a pointer over a keyboard-focused button. currentColor is
the label's color, which is chosen for contrast against whatever the
fill currently is, so the ring is correct in all three states by
construction. On the ink rest state it resolves to the same Ivory Ground
this rule always drew. */
.capture button:focus-visible {
outline: var(--focus-ring) solid currentColor;
outline-offset: -2px;
}
.capture input[type=email]:focus { border-color: var(--clr-brown-black); }
/* ---------- form messages ----------
The browser's native validation bubble is an OS tooltip: gray, system
font, arrow, no relation to any of this. It cannot be styled at all, so
the forms carry `novalidate` and the message is built inline instead.
Set in the reading serif rather than the uppercase tracked label. A
tracked micro-caps line reads as a system alert; this is meant to sound
like a person explaining something, so it takes the voice the body copy
uses.
One capture sits on Clay and the other on Ivory Ground, so the color
follows the surface: Brown Black on the light tile at 14.63:1, Ivory
Ground on the clay tile at 5.03:1. Both clear AA for normal text.
The slot is ALWAYS in the flow, empty at rest, holding exactly one line.
Nothing moves when a message appears - it lands in space already reserved.
That matters more than the 22px it costs, because the message appears
after a click, so any reflow would move content under a cursor that has
already committed.
No max-width. 48ch resolves to 344.1px (re-measured 12 August 2026) while
the message it was originally fighting measured 410px, which is what was
breaking it across two lines.
THAT ARGUMENT IS NOW HISTORIC: the messages have only got shorter, and
re-measured 12 August 2026 they are 294.9px (empty) and 320.4px
(invalid), so 48ch would in fact clear both today. The rule stays off
anyway. A cap here buys nothing (the note sits in 458.8px and the
strings are authored short, right below), and adding one would only
re-arm the two-line reflow the moment the wording grows. Leave it absent
on purpose, not by oversight.
THE BUDGET IS NOW SET BY THE INVALID MESSAGE, NOT THE EMPTY ONE. That
swapped when "send the check" became "send it over" and took the empty
string 21.4px below its neighbour. Anyone re-checking the fit should
measure the invalid message, which is the long one at 320.4px. */
.form-note {
display: flex;
align-items: stretch;
gap: var(--space-3);
font-family: var(--font-serif);
font-size: var(--text-small);
line-height: var(--leading-body);
color: var(--text-heading);
margin: var(--space-2) 0 0;
min-height: calc(var(--text-small) * var(--leading-body));
}
/* The attention gesture: a rule before the message, echoing the lead-in
rule used elsewhere on the page. Transparent at rest so the reserved
slot is invisible until there is something to say. Clay on the light
tile; on the clay tile clay would vanish, so it takes Ivory Ground -
the same color the text uses there, since at 13.5px Ivory Ground is
the only one of the seven that clears 4.5:1 against clay. */
.form-note::before {
content: "";
flex: 0 0 var(--rule-strong-weight);
background: transparent;
}
.form-note--shown::before { background: var(--rule-accent); }
.tile--clay .form-note { color: var(--clr-ivory-ground); }
.tile--clay .form-note--shown::before { background: var(--clr-ivory-ground); }
/* THE HANDLING NOTE, and it is the page's only privacy statement.
DELIBERATELY NOT IN THE FOOTER. Two forms on this page handle an address
differently - this one joins the mailing list, the discovery-call form
will not - so a single footer line could not be true of both. It sits at
the point of collection, where it is answerable for exactly one form.
BELOW THE FIELD, NOT ABOVE IT. Above, it arrives before the ask and
reads as a second pitch. Below, it answers the question the ask just
raised. It is a note, so it takes the reading serif at --text-small and
never the tracked caps the two lines above it use.
THE SAME STRING IN BOTH BLOCKS, unlike the descriptions above them,
which are deliberately different. Those are pitches and can differ; this
is a fact about handling, and the handling is identical. If it ever
stops being identical, that is a copy change, not a CSS one.
"PUBLISH", NOT "WRITE", and it names the product in full rather than
saying "the check" - see the naming rule at the MESSAGES object. What
lands in an inbox is a published piece; "whatever we write next" quietly
promises a drafting cadence that is not running yet, which is a claim
the business would then owe. NO FREQUENCY CLAIM ANYWHERE IN THE LINE,
deliberately - no weekly, no monthly, no "occasional". Every one of
those is a promise the sender has to keep.
NO COLOR OF ITS OWN, which is what lets one class serve both surfaces:
.tile--clay sets Ivory Ground on its children and the outline tile
inherits warm slate. Measured on the render, 12 August 2026: 5.03:1 on
clay and 7.59:1 on Ivory Deep, both clear of the 4.5:1 that small text
owes. Give this rule a color and one of the two breaks. */
/* .cta-fine SHARES THIS BLOCK RATHER THAN COPYING IT. Same role - fine
print under a control - but it sits under the ask tile's button, where
there is no form and no capture, so borrowing the capture__ name would
have been a naming lie for the sake of one fewer selector. Two names,
one declaration, and they are meant to move together: if the fine print
treatment changes, it changes in both places or it is inconsistent. */
.capture__fine, .cta-fine {
font-family: var(--font-serif); font-size: var(--text-small);
line-height: var(--leading-body);
margin: var(--space-3) 0 0;
}
/* The field states its own error too, not just the message beside it -
color alone is never the only signal. Border color changes, not
width, so nothing reflows when the message appears. */
.capture input[type=email][aria-invalid="true"] { border-color: var(--clr-brown-black); }
/* ---------- the discovery-call enquiry ----------
A DIFFERENT FORM TO A DIFFERENT PLACE. It posts to Formspree, not to
Kit, and it must never touch the mailing list: somebody asking to talk
has not agreed to a newsletter, and an enquiry landing in a marketing
dashboard is a lead read late.
THE DECLARATIONS BELOW ARE COPIED FROM .capture, NOT INHERITED FROM
IT. Borrowing that namespace would drag in a 520px cap built for a
one-field row and a flex layout built for a field welded to a button.
That mistake has been made on this page four times. What is shared is
what should be shared - .form-note, .capture__swap and .capture__done
are reused verbatim, so the error slot, the post-submit swap and the
focus move behave identically to the capture. Same states, own layout.
THE FIELD BORDERS ARE WHOLE. .capture's input drops its right border
because it butts against the submit; these stand alone and need four
sides. */
.enquiry { max-width: 640px; }
/* Two columns on the short fields, one on the long one. The pair that
sits side by side is name and email - the two a person answers without
thinking - and the two that take a moment get a full line each. */
.enquiry__grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--space-4); margin-top: var(--space-4);
}
.enquiry__field--wide { grid-column: 1 / -1; }
/* max-width:none IS LOAD-BEARING, and leaving it out shipped a visible
defect. These rows are , and every paragraph on this page carries
the body measure cap - so the two full-width fields rendered at
560.31px inside a 640px grid while the two half-width ones filled
their 310px tracks exactly. A ragged right edge of 79.69px, which
reads as three different field widths rather than as a measure.
THE SAME TRAP AS .tally__line, .hero__lead AND --measure-body: `p` is
a structural tag, not a semantic one, and a cap that means "prose
should not run too wide" has no business on a form row. Fifth
instance; it keeps arriving from a different direction. */
.enquiry__field {
display: flex; flex-direction: column;
gap: var(--space-2); min-width: 0; max-width: none;
}
/* VISIBLE LABELS, where the capture uses a screen-reader label and a
placeholder. One field with a placeholder is legible; four are a
memory test, because the placeholder disappears the moment anybody
types. The label takes .cap's tracked micro-caps, which is the page's
existing vocabulary for furniture, so this adds no new type. */
.enquiry__label {
font-family: var(--font-sans); font-weight: var(--weight-label);
font-size: var(--text-label-size); letter-spacing: var(--track-label);
text-transform: uppercase; color: var(--text-label); margin: 0;
}
.enquiry__optional { text-transform: none; letter-spacing: 0; font-family: var(--font-serif); }
.enquiry input {
font-family: var(--font-serif); font-size: var(--text-body-size);
color: var(--text-heading); background: var(--clr-ivory-ground);
border: var(--rule-hairline) solid var(--clr-hairline);
border-radius: var(--radius); padding: var(--space-4);
min-width: 0; width: 100%;
transition: border-color var(--transition-color);
}
.enquiry input::placeholder { color: var(--text-label); opacity: 1; }
.enquiry input:focus { border-color: var(--clr-brown-black); }
/* The ring sits INSIDE the box for the same reason the capture's does -
the global focus ring is offset 3px and these fields sit in a grid
gap of 20px, so an outside ring would collide with the neighbour. */
.enquiry input:focus-visible {
outline: var(--focus-ring) solid var(--clr-brown-black);
outline-offset: -2px;
}
.enquiry input[aria-invalid="true"] { border-color: var(--clr-brown-black); }
/* Full width at the point the two columns stop being readable. 560px is
where the label plus a 20px gap stops leaving either column enough for
an ordinary email address. */
@media (max-width: 560px) {
.enquiry__grid { grid-template-columns: 1fr; }
}
.enquiry__go { margin-top: var(--space-4); }
/* Declared, not borrowed - same reasoning as the inputs. Ink on the
Ivory Deep tile, hovering to clay, which is the pair the closing
capture's submit already uses on this surface. */
.enquiry button {
font-family: var(--font-sans); font-weight: var(--weight-label);
font-size: var(--text-label-size); letter-spacing: var(--track-label);
text-transform: uppercase; cursor: pointer; white-space: nowrap;
line-height: var(--leading-snug);
background: var(--surface-reverse); color: var(--text-on-reverse);
border: var(--rule-hairline) solid var(--surface-reverse);
border-radius: var(--radius); padding: var(--space-4) var(--space-6);
}
.enquiry button:hover, .enquiry button:active {
background: var(--surface-field); border-color: var(--surface-field);
color: var(--text-on-field);
}
.enquiry button:focus-visible {
outline: var(--focus-ring) solid currentColor;
outline-offset: -2px;
}
.capture button {
font-family: var(--font-sans); font-weight: var(--weight-label);
font-size: var(--text-label-size); letter-spacing: var(--track-label);
text-transform: uppercase; cursor: pointer; white-space: nowrap;
line-height: var(--leading-snug); /* not the UA `normal` - see .btn */
background: var(--surface-reverse); color: var(--text-on-reverse);
border: var(--rule-hairline) solid var(--surface-reverse);
border-radius: var(--radius); padding: var(--space-4);
}
/* THE FILL NOW MOVES, where before it deliberately did not. The old hover
held the Brown Black and warmed the label to Hairline instead, because
clay as a LABEL color on ink is 2.91:1 and fails. Clay as a FILL is a
different move and passes: the label goes Ivory Ground on it at 5.03:1,
which is also the only one of the seven that clears 4.5:1 on clay at
this size. The warm-label treatment goes; a button that swaps surfaces
is the same gesture every other button on this page makes. */
.capture button:hover, .capture button:active {
background: var(--surface-field);
border-color: var(--surface-field);
color: var(--text-on-field);
}
/* THE HERO CAPTURE STANDS ON THE CLAY TILE, and this is the case the one
rule would have got wrong twice over: a clay block would be invisible
against the tile at rest, and a clay fill on hover would dissolve the
button into it. Both flip to Ivory Ground, so the pair still trades two
colors - just the other pair. The label goes Brown Black at 14.63:1.
Same rule, checked against the surface rather than assumed. */
.tile--clay .capture button:hover, .tile--clay .capture button:active {
background: var(--clr-ivory-ground);
border-color: var(--clr-brown-black);
color: var(--clr-brown-black);
}
.sr { position: absolute; left: -9999px; }
/* ---------- the close's ask tile ----------
Ink surface with a clay button, so the last block before the footer has
depth rather than being a third ivory panel. The qualifier leads at
small size and the question answers it large - the reader is qualified
first, then asked, and the size difference is what makes that an order
rather than two equal lines. */
.tile h3.ask {
font-size: var(--text-h1); line-height: var(--leading-tight);
letter-spacing: var(--track-h1); margin: var(--space-3) 0 0;
}
.qualifier { font-size: var(--text-small); margin: 0; }
/* Clay on ink measures 2.91:1, which is under the 3:1 that WCAG 1.4.11
wants for the edge of a control - the label inside is fine at 5.03:1,
but the button's own shape has to be findable too. A Hairline border
puts the edge at 9.47:1 without giving up the clay fill, and the ring is
what makes the button sit ON the dark tile rather than in it. */
.tile--ink .btn { border-color: var(--clr-hairline); }
/* THREE GROUPS, NOT ONE ROW. This reverses the single-baseline-row note in
the markup below, and that note was right when it was written: four items
with one job read fine on one line. There are six items now doing three
jobs - who we are, how to reach us, the legal pair - and a longer line
cannot say which is which. Grouping can. Spatial only: no headings were
added, because a heading is copy.
STILL baseline-aligned, and the original reason survives the change. The
groups are columns, so each contributes its FIRST line's baseline: the
wordmark's bottom edge lands on the baseline of "contact@vellekor.com"
and of the ownership sentence beside it. align-items:center would float
a 22px image against 13.5px text and look a pixel wrong at every width. */
.site-foot__in {
display: flex; align-items: baseline; gap: var(--space-5) var(--space-7);
flex-wrap: wrap;
border-top: var(--rule-strong-weight) solid var(--rule-strong);
padding: var(--space-5) 0 var(--space-8);
}
/* The group is the unit now. space-2 inside, space-7 between - the inside
gap has to be clearly smaller than the outside one or the grouping does
no work, and 8px against 56px is not a judgement call at a glance. */
.foot-group { display: flex; flex-direction: column; gap: var(--space-2); }
.foot-group > * { margin: 0; }
/* 22px, which is the --text-h2 stop and roughly the cap-height of the
13.5px tagline beside it once the wordmark's 0.79 ink crop is allowed
for. Left as a literal rather than pointed at --text-h2: this is an
image height that happens to coincide, and binding it to a type token
would resize the mark whenever the heading scale moved. */
.foot-mark { height: 22px; width: auto; align-self: center; }
.foot-tag { margin: 0; font-size: var(--text-small); }
/* The pronunciation gloss. Quieter than the tagline above it by color
rather than by size - both are --text-small, and a third size in a
three-line stack would read as three ranks when there are two: the mark
and its two glosses. --text-label is warm slate, 7.65:1 on the page. */
.foot-say {
font-family: var(--font-serif); font-size: var(--text-small);
line-height: var(--leading-body); color: var(--text-label);
font-style: italic;
}
/* Pushes the legal group right. margin-left:auto rather than
space-between, which would spread all three gaps evenly and pull the
reach-us group away from the identity block it sits nearest. */
.foot-group--legal { margin-left: auto; }
.foot-legal__line {
font-family: var(--font-serif); font-size: var(--text-small);
line-height: var(--leading-body); color: var(--text-label);
}
.foot-copy { white-space: nowrap; }
/* ---------- mobile collapse, declared explicitly ---------- */
@media (max-width: 900px) {
.c12, .c8, .c7, .c6, .c5, .c4, .c3 { grid-column: span 12; }
/* One rung below 900px: every tile is full width, so the four-step
ladder has nothing to distinguish. 64px is --tell-col-4, the ladder's
narrowest column, paired with --tell-num-mobile above. */
.tell { grid-template-columns: var(--tell-col-4) minmax(0,1fr); gap: var(--space-4); }
.tell__n { font-size: var(--tell-num-mobile); }
/* 30px on small screens: still well clear of --wordmark-min-mobile-header
(19px), and the lockup scales with it because both halves read --wm-h. */
.site-head__brand > a:first-child { --wm-h: var(--wm-h-mobile); }
/* The header cannot fit its nav on one line here as it is; a tagline
beside the lockup makes that worse. It belongs to the wide layout. */
.head-tag { display: none; }
/* The staircase flattens. The inset is what makes the sequence read as
advancing, but at 375px it would eat 72px of a 263px column, so the
third step would have a third less room than the first for no gain. */
.step--2, .step--3 { margin-left: 0; }
.step { grid-template-columns: 1fr; gap: var(--space-3); }
.step__n { padding-top: 0; }
/* Five columns at 375px is 40px each. The chart becomes a vertical
spine: the rule moves to the left edge and the drops become ticks
running off it, which is the same diagram rotated rather than a
different one. */
/* One column, so there is no span between outer nodes to inset - the
spine becomes the left edge and the node-center pseudo is switched
off rather than left drawing a stray horizontal. */
.charter {
grid-template-columns: 1fr; gap: var(--space-4);
/* The spine becomes this border at one column, so it takes --connector
like every other rule in the diagram - otherwise the one connector
that matters most on a phone is the only one that never lights. */
border-left: var(--rule-hairline) solid var(--connector);
padding-left: var(--space-4);
transition: border-color var(--transition-color);
}
.charter::before { display: none; }
/* Stacked, the chart is one column, so centring would run five boxes
down the middle of an otherwise left-aligned page. The root moves
left, the spine becomes the left edge, and each numeral box sits
beside its sentence with the branch running sideways into it. Same
diagram, rotated a quarter turn. */
.charter-head { text-align: left; }
.charter-root::after { left: var(--space-5); }
.charter li {
text-align: left; padding-top: 0;
display: grid; grid-template-columns: auto minmax(0,1fr);
gap: var(--space-4); align-items: start;
}
.charter li::before { margin: 0; }
/* THE BRANCH MUST MEET THE NUMERAL NODE ON ITS CENTRE LINE, and 0.9em
did not. Measured at 375: the stub landed at y=15.3 against a box
centre of 17.91 - 2.61px high on every one of the five rows, which
on a 1px hairline meeting a bordered box reads as a mistake rather
than as a diagram.
0.9em was inherited from the vertical drop, where it was measuring
down from the li's own text and had nothing to do with the numeral.
Rotated a quarter turn, the thing it has to align to changed.
DERIVED, NOT MEASURED IN. The node is border + padding + one line of
the label face: 1 + 8 + (11 x 1.62)/2 = 17.91. Written from the
tokens so it stays true if the label size or the leading moves - a
hardcoded 17.91px would be right today and silently wrong after any
type change. */
.charter li::after {
top: calc(var(--rule-hairline) + var(--space-2)
+ (var(--text-label-size) * var(--leading-body) / 2));
left: calc(-1 * var(--space-4));
width: var(--space-4); height: var(--rule-hairline);
}
/* THE HEADER STOPS STICKING HERE, and the measurement is why. The four
nav labels sum to 346px of text before any gap, against 263px of
content width at 375px - so the nav cannot be made to fit one line,
and the header lands at 163px, a permanent 20% of an 812px screen.
Every way out was worse than letting it scroll: dropping the wordmark
for the mark alone hides the identity on the one device where it is
the only branding on screen; scrolling the nav sideways hides
destinations behind a gesture nobody is told about; and taking the
labels below 11px breaks the type floor. Shortening the labels would
work, but they are frozen copy.
--head-h goes to 0 with it. It is only ever read by scroll-margin-top,
and an anchor that reserves 72px for a header that is no longer
hovering just drops the reader short of their target. */
:root { --head-h: 0px; }
.site-head { position: static; border-bottom-color: transparent; }
/* The footer stops being two columns here, so the legal block is no
longer sitting against the right edge - right-aligned text under a
left-aligned wordmark just reads as a mistake. */
/* The footer wraps here, so the auto margin that pushed the legal group
right would strand it against the edge under a left-aligned mark. Once
wrapped there is no right column to push to.
WAS on .foot-legal__line, which is now inside a group and no longer
the thing being pushed - the group is. */
.foot-group--legal { margin-left: 0; }
/* Baseline alignment is for items sitting SIDE BY SIDE. Once the groups
stack it aligns nothing and only risks the 22px mark dropping onto a
shared baseline with the group above it, so the groups go back to
ordinary block flow and each keeps its own internal spacing. */
.site-foot__in { align-items: flex-start; }
.form-note { min-height: calc(var(--text-small) * var(--leading-body) * 2); }
/* THE OVERHANG IS CAPPED AT 150% HERE, DOWN FROM 190%. Jeff's call.
190% left only 53% of the word in the window at any one moment - at a
375px viewport that is 335px of band showing 176px of a 636px wordmark,
which is about three and a half letterforms out of eight. The band stops
reading as a word being panned and starts reading as a texture of
fragments, and the letter at each edge is a sliver rather than a shape.
150% shows 67%, which is five and a half letterforms and keeps whole
letters at both ends of the travel.
THE PAN GETS LONGER, NOT SHORTER, which is the part that looks wrong in
the number and is not: travel is (imgW - bandW) / imgW, so 128% pans
21.9% of the image, 150% pans 33.3% and 190% pans 47.4%. Capping the
width shortens the distance in pixels while lengthening it as a share of
the image - and it is the share that decides how much word goes past. */
.ghost-mark { --wm-scrub: 150%; }
section { padding: var(--space-7) 0; }
}
/* 560px - the third and last of the published breakpoints (1100, 900, 560).
No fourth exists anywhere in this file. */
@media (max-width: 560px) {
.wrap { padding: 0 var(--space-5); }
.skip:focus { left: var(--space-5); }
.lead-in { padding-left: var(--space-3); }
/* THE TALLY STACKS, and the font clamp alone could not have saved it. The
sentence is a flex item, so it will not shrink below its own longest word
however small the count gets - measured at a 386px viewport, 161px of
sentence that refuses to narrow plus the word ran 39px past the tile's
edge even with the word down to its 40px floor. Side by side stopped
fitting; the fix is to stop asking it to.
The count goes left with the sentence rather than staying right: stacked,
a right-aligned number under a left-aligned line reads as two things that
failed to line up rather than as one answering the other. */
.tally { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.tally__count { justify-items: start; }
/* Below roughly 515px the tile is too narrow for the message to stay on
one line - measured 247px of text width at 375px against the ~331px it
needs. So the reserved slot holds two lines here instead of one,
otherwise the tile still jumps by 22px on error, which is the exact
problem the reservation exists to prevent. */
}
/* The wordmark's @media (hover: none) guard was removed with the hover
itself - a scroll-driven reveal needs no pointer, so touch gets the same
behavior as everything else. Its reduced-motion rule is gone too: the
animation is now inside a `prefers-reduced-motion: no-preference` query,
so it is never declared for readers who opted out, and the base rule
already shows the mark whole. */
/* ---------- THE ARRIVAL ----------
THE FIRST VIEWPORT RISES ONCE, TOGETHER. Everything named below shares
one duration, one curve and no delay. What it says is simply "the page
has arrived" - it no longer tries to say anything about reading order,
because finding 02 removed the stagger that was carrying that and the
standard does not allow it back.
Bands of scroll hijack, pinning and GSAP were available when this was
built and are wrong for this page: it is one screen of type, and a
scroll-jacked hero on a services site reads as a portfolio showing off.
TRANSFORM AND OPACITY ONLY, no top/left/width/height, so every frame is
composited.
14px, NOT 40px. The distance is the whole difference between an entrance
and a slideshow. This identity is hairlines and square corners; things
settle into place, they do not fly in.
THE HEADER FADES BUT DOES NOT MOVE. It is the page's frame - a frame that
slides in makes the whole thing feel unmoored - and the sticky observer
is watching a sentinel behind it, which a transformed ancestor would put
on a different plane.
REDUCED MOTION: the entire block is inside `no-preference`, so it is
never declared for readers who opted out. That is deliberate rather than
tidy - written the other way round, with opacity:0 in the base rule and
an override to switch it back, anyone whose browser did not run the
animation would get a blank hero. Nothing here can fail to visible. */
@media (prefers-reduced-motion: no-preference) {
@keyframes vk-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes vk-fade { from { opacity: 0; } }
/* NO STAGGER - finding 02, and this deleted a considered piece of work,
so what it was doing is recorded here rather than lost.
There were seven delays, 0 to 360ms, and they encoded a reading order:
hook, then the sentence explaining it, then the primary CTA, then the
capture last because it is the secondary conversion. The image landed
with the headline because they are one composition.
THE STANDARD IS UNAMBIGUOUS: elements arrive together or not at all,
and a cascade of delays reads as a template rather than as a decision.
The reading order is now carried by what it should always have been
carried by - position, size and weight on the page. If the order stops
being legible without the stagger, that is a layout problem and the
fix belongs in the layout.
THE DURATION AND THE CURVE ARE TOKENS NOW (finding 36): 560ms and the
one easing curve were written out by hand in two places. */
.site-head__brand,
.site-nav,
.hero h1,
.hero__lead,
.hero .btn,
.hero .tile--capture,
.hero .tile--flush,
.hero-media {
animation: vk-rise var(--motion-arrive) var(--ease-arrive) both;
}
/* The frame fades in place rather than rising. A frame that slides makes
the whole page feel unmoored, and the sticky sentinel sits behind the
header where a transformed ancestor would put it on a different plane. */
.site-head__brand,
.site-nav { animation-name: vk-fade; }
}
/* A READER WITH REDUCED MOTION GETS THE SAME HERO AS EVERYONE ELSE, and that
is now true by construction rather than by a rule. There is one image and
it is never animated except by the entrance above, which lives inside
`no-preference` and is therefore simply not declared for them.
THIS USED TO NEED THREE RULES AND A DECISION. The sequence's backdrop was
an opaque panel above the ![]()
, so with no animation to lift it that
reader was served the drawn stage with the photograph hidden behind it -
while still downloading the image to look at the back of it. Fixing that
meant choosing which stage they should be left on. With one image there is
no stage to choose and nothing to uncover.
ENTRANCE MOTION IS STILL DECLARED INSIDE `no-preference` rather than as
`opacity: 0` in the base rule with an override to restore it. The second
form serves a blank hero to any engine that does not run the animation. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 0.01ms !important; }
/* THE FRACTURE'S HANDOVER RUNS ON transition-delay, WHICH THE LINE ABOVE
DOES NOT REACH - it overrides duration only. Left alone, the halves
would snap apart instantly and then hang in register for 180ms after the
pointer left before handing back to the real word: a stall, and exactly
the kind of thing the reader who set this preference is avoiding. */
.fracture, .fracture::before, .fracture::after { transition-delay: 0s !important; }
}
/* ============================================================
THE MOBILE BAR - a condensed sticky, below 900px only
WHAT IT SOLVES, measured at 375: the four nav labels are 345.75px of
text plus three 28px gaps = 429.75px, against 319px of content width.
"Book a call" therefore wraps to a second row and the header stands at
162.63px - 20.03% of an 812px screen - which is why sticky was turned
off below 900px in the first place. The wrap was the cause; the header
scrolling away was the consequence.
WHAT IT DOES INSTEAD. The header is left exactly as it is: full
lockup, four labels, two rows, still not sticky, nothing about the
resting page changes. Once the reader scrolls past it, a separate
compact bar arrives carrying the mark and the one link that matters.
Measured, that content is 124.52px wide and the bar stands at about a
quarter of today's header.
IT IS A SEPARATE ELEMENT, NOT THE HEADER RESTYLED, and that is the
load-bearing decision. Switching .site-head from static to fixed on
scroll would pull 162.63px out of the document flow, and everything
below would jump up by exactly that much at the moment it engaged.
A second element that is never in flow cannot move anything.
NO NEW JAVASCRIPT. It keys off .site-head--stuck, which the sentinel
observer already toggles for the desktop hairline, through a sibling
selector - so the bar must stay a LATER SIBLING of the header in the
markup. If it is ever moved inside a wrapper, this stops working
silently and the bar simply never appears.
VISIBILITY, NOT DISPLAY, for the hidden state - the same reason the
capture swap uses it. display:none would drop the link out of the
document and back in; visibility:hidden keeps the box, and still
takes the link out of the tab order and the accessibility tree, so a
keyboard reader at the top of the page cannot tab into a bar that is
not on screen.
============================================================ */
.mobile-bar { display: none; }
@media (max-width: 900px) {
.mobile-bar {
display: block;
position: fixed; top: 0; left: 0; right: 0;
/* Above the page, below the skip link's 10 - a keyboard reader
tabbing in must never find this in front of "Skip to content". */
z-index: 9;
/* NO HORIZONTAL PADDING OF ITS OWN. It carries an inner .wrap, the
same as .site-head does, so its contents land on the page's
gutters whatever they are. Writing var(--gutter-page) here looked
right and was wrong: that token computes to 56px, while .wrap is
overridden to 28px below 900px, so the bar would have sat inset
28px from every other thing on the page. */
padding: var(--space-2) 0;
background: var(--surface-page);
border-bottom: var(--rule-hairline) solid var(--clr-hairline);
visibility: hidden;
transform: translateY(-100%);
/* Visibility flips instantly on the way in and waits for the slide
on the way out, so the bar is never invisible while still moving. */
transition: transform var(--motion-quick) var(--ease-arrive),
visibility 0s linear var(--motion-quick);
}
.site-head--stuck ~ .mobile-bar {
visibility: visible;
transform: translateY(0);
transition: transform var(--motion-quick) var(--ease-arrive),
visibility 0s;
}
.mobile-bar__in {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-4);
}
.mobile-bar__home { display: flex; align-items: center; line-height: 0; }
.mobile-bar__home img { height: 30px; width: auto; display: block; }
/* NOT .btn. That carries 20px/28px padding and stands 54.97px tall,
which in a bar this size is the bar. Declared instead at the same
type as .btn - 11px tracked caps - on a shorter box.
44px minimum tap target, which is what sets the padding rather than
any visual preference. */
.mobile-bar__cta {
font-family: var(--font-sans); font-weight: var(--weight-label);
font-size: var(--text-label-size); letter-spacing: var(--track-label);
text-transform: uppercase; text-decoration: none; white-space: nowrap;
line-height: var(--leading-snug);
min-height: 44px; display: inline-flex; align-items: center;
padding: 0 var(--space-4);
background: var(--surface-reverse); color: var(--text-on-reverse);
border: var(--rule-hairline) solid var(--surface-reverse);
border-radius: var(--radius);
transition: background-color var(--transition-color),
border-color var(--transition-color),
color var(--transition-color);
}
.mobile-bar__cta:hover, .mobile-bar__cta:active {
background: var(--surface-field); border-color: var(--surface-field);
color: var(--text-on-field);
}
.mobile-bar__cta:focus-visible {
outline: var(--focus-ring) solid currentColor; outline-offset: -2px;
}
.mobile-bar__home:focus-visible {
outline: var(--focus-ring) solid var(--clr-brown-black); outline-offset: 2px;
}
/* --head-h WAS 0 HERE, and it has to stop being 0 now that something
hovers again. It is read only by scroll-margin-top, so at 0 an
anchor target lands underneath the bar - the reader taps "The
tells" and arrives at a heading with a bar sitting on it.
61px is the bar's MEASURED height, not its arithmetic: 44px of tap
target plus 8px of padding top and bottom is 60, and the hairline
border-bottom is the 61st. Written as 60 first, which left an anchor
target sitting exactly under the rule.
It over-reserves only at the very top of the page, where the bar is
not showing - and from there every anchor scrolls DOWN, which brings
the bar in before the reader lands. */
:root { --head-h: 61px; }
}