, so it kept the cream and went on doing the very
transition this block exists to remove. Measured: the section carried
--asoc-ink #241B27 while `strong` still computed rgb(246,243,246).
Declaring the colour here makes the whole subtree consume the token. */
color: var(--asoc-ink);
}
}
/* ⚠️ THIS RULE IS PROVABLY INERT AND IS KEPT DELIBERATELY. Mutating it — putting
the colour transition back — left verify-fade GREEN, because with the tokens
above pinned there is nothing for it to transition BETWEEN. The token override
is the whole defence; this is a second line that only matters if someone
removes the first, and without it that removal would produce an instant
step-flip instead of a crossfade. Kept, and labelled, rather than left looking
like the thing that holds the invariant. */
/* ⚠️ ALSO POINTER-WIDTH ONLY, AND FOR THE SAME REASON. This rule is inert at
>=801 because the tokens above are pinned there — there is nothing to
transition between, which is what the note calls out. Below 801 those tokens
are NOT pinned, so the rule stops being inert and becomes the defect: the
quote's ink STEPS instantly the moment `asoc-fade-on` is added, while the
ground takes 0.9s to arrive under it. Measured mid-flight at 393 — ink already
fully dark, ground layer 8.8% of the way to paper, 1.06:1.
Below 801 the quote now moves WITH the ground like every other section, which
is what "the foreground moves with the ground" guarantees: there is no moment
where the two disagree, by construction rather than by timing. */
@media (min-width: 801px) {
.asoc-quotelead :is(h1, h2, h3, h4, p, span, strong, em, a, li) {
transition: none;
}
}
/* THE FOREGROUND MOVES WITH THE GROUND — same duration, same easing, so they
are in sync by construction rather than by a timing constant someone has to
keep correct. Applied broadly on purpose: same anti-enumeration principle as
the token block above.
The credibility quote is deliberately exempted above — see that block.
⚠️ `:where()`, NOT `:is()`, AND THE DIFFERENCE WAS A LIVE DEFECT ON EVERY BUTTON
AND LINK ON THE SITE. `:is()` takes the specificity of its most specific argument,
so one class in a list of element selectors lifted this whole rule to (0,1,1) —
above every single-class component rule in the file. And `transition` is a
SHORTHAND, so it did not merge with what it outranked, it REPLACED it. Measured
before the fix, on named elements rather than the first match:
hero button got color, border-color 0.9s — not background, not transform
ghost button got color, border-color 0.9s
conversion button got color, border-color 0.9s
desktop nav link got color, border-color 0.9s — intended 0.3s
footer link/email got color, border-color 0.9s — intended 0.3s
So every button's hover fill and 1.02 scale STEPPED with no easing at all, and
every link hover ran three times slower than it was written to. Nothing errored
and a still screenshot cannot show it.
`:where()` contributes zero specificity, so this rule is now a DEFAULT any
component may override — which is what "applied broadly" was always meant to mean.
The mobile nav was never affected: its rules are `.asoc-header__nav > .asoc-…`,
already (0,2,0), which is why the menu stagger still worked and why checking it
mattered rather than assuming the blast radius. */
body :where(h1, h2, h3, h4, p, span, strong, em, a, li, button, .asoc-btn) {
transition: color var(--asoc-fade-dur) var(--asoc-fade-ease),
border-color var(--asoc-fade-dur) var(--asoc-fade-ease);
}
/* ⚠️ A SPLIT WORD INHERITS ITS COLOUR, SO IT MUST NOT TRANSITION IT (2026-09-17).
`.asoc-w` and `.asoc-w__i` are spans, so the rule above gave every word of a
split heading its own 0.9s colour transition on top of the heading's. That is
harmless while nothing else touches the word — and a defect while its mask
reveal is running: the reveal writes an inline transform every frame, each
write restarts the word's colour transition from wherever it had got to, and
the word chases its own heading. Measured at 393 on a forward scroll, where the
quote's reveal overlaps the ground change: words still cream ~420px after the
ground had settled, scattered word by word ("beautiful, chaotic" light,
"mess." dark), lag 0.97 against the ground. Scrolling back, with no reveal
running, the same words measured lag 0.
With no transition of their own the words simply inherit the heading's
animated colour: lag 0, same 46 frames as every other line
(scripts/colour-strip.js, MUTATE_CSS on the live build before this shipped). */
.asoc-w,
.asoc-w__i {
transition: none;
}
.asoc-card {
transition: background-color var(--asoc-fade-dur) var(--asoc-fade-ease);
}
/* The hairline that lets a near-ground card still read as a card. */
html.asoc-fade-on body .asoc-card {
box-shadow: inset 0 0 0 1px rgba(36, 27, 39, 0.12);
}
@media (prefers-reduced-motion: reduce) {
.asoc-fade-layer,
body :where(h1, h2, h3, h4, p, span, strong, em, a, li, button, .asoc-btn),
.asoc-card { transition-duration: 0.001ms; }
}
/* ==========================================================================
THE NARRATIVE HAND-OFF — three versions for comparison (Sam, 2026-09-04)
--------------------------------------------------------------------------
The problem, measured before any of this was built: the ground turned on at
scrollY 3375, when the narrative filled 90% of the viewport and "To this
organised." sat at mid-screen. It then stayed on for another 700px while the
narrative was still there. The colour was changing UNDER the narrative rather
than between sections, which is also why so much appeared to change at once -
at that moment almost everything on screen was narrative.
_asoc_seq = timed keep the mechanism, fix the timing. The ground fires
as the quote enters the bottom of the viewport, and
the narrative is exempted from the flip entirely.
release the narrative's contents scroll up and off the pinned
stage in a stagger, emptying it; the quote then scrolls
in normally after the pin releases.
carry same exit, but the quote is carried INTO the pinned
stage and rises as the narrative leaves.
`release` and `carry` are the same idea Sam described: get "change colour over
empty space" from MOTION instead of from padding. The 520px gaps were buying
the same thing, badly.
========================================================================== */
/* THE NARRATIVE NEVER FLIPS, in any of the three. Sam: "don't change the colour
of any elements that are scrolling out on the from disorganised section
because they don't need to contrast... the laptop and invoices and receipts
are already dark."
A section-level token beats the document-scope on-ground block because the
section is the nearer ancestor, so this opt-out needs no !important and no
ordering luck. */
.asoc-narrative {
--asoc-ink: var(--asoc-ink-dark);
--asoc-ink-muted: var(--asoc-ink-dark);
--asoc-ink-faint: var(--asoc-ink-faint-dark);
--asoc-kicker: var(--asoc-kicker-dark);
--asoc-ink-accent: var(--asoc-ink-accent-dark);
/* ⚠️ THE ARTWORK MUST NOT RECOLOUR WITH THE GROUND. Sam, 2026-09-09: "the
laptop, receipts, and invoices DON'T need to change colour when the
background transitions to paper. They are ALREADY dark, so there's no need
to add that visual complexity layer."
They were changing, and the exemption above is why it was missed: it lists
the INK tokens, and the desk is built from SURFACE tokens
(asoc-desk.js mixes --asoc-surface-raised with --asoc-surface). The
on-paper block lightens --asoc-surface-raised to #FBF8F4 so that cards
separate from the paper by texture, and the artwork inherited it.
Measured before this line: the desk's fill went from srgb 0.16 to 0.53 and
the receipts from 0.17 to 0.66 - near-black lightening to mid-grey exactly
as the ground arrived. */
--asoc-surface-raised: var(--asoc-surface-raised-dark);
color: var(--asoc-ink);
}
/* ── ONE TOKEN THROUGH THE OPT-OUT: THE PAYOFF LINE FOLLOWS THE GROUND ──────
The block above exempts the whole narrative from the colour change, on the
2026-09-03 call that elements scrolling out need no contrast. That is still
right for everything in it EXCEPT the payoff line, and the exception is a
measurement rather than an opinion: "To this organised." is lilac, and lilac
settled on the paper ground is 2.19:1 at 31% and 19% of the viewport. It is
in focus, the ground has finished changing, and it is unreadable. Shipping,
and verify-fade could not see it (see the two-pass note in that file).
Sam's fix, and it is better than the static colour I proposed:
today static lilac ....... dark 6.26:1 paper 2.19:1 ✗
mine static #9F67AD ..... dark 3.74:1 paper 3.66:1
his lilac -> #9F67AD ... dark 6.26:1 paper 3.66:1
The airy lilac is kept where it works and only the paper end moves. The
mid-blend dips to ~1.07:1, and all three options dip to ~1.05:1 anyway - the
ground passes through a mid-tone and every foreground crosses it - so it
costs nothing to choose the version that is better at both ends.
No transition property is declared here on purpose. The broad foreground rule
already gives every h2 the ground's own duration and easing, so this moves in
lockstep by construction rather than by a constant kept in step by hand. */
html.asoc-fade-on body .asoc-narrative {
--asoc-ink-accent: var(--asoc-ink-accent-paper);
}
/* `carry`'s z-index rule stood here. `carry` lifted the quote OVER the pinned
narrative rather than staging it inside, and it is deleted with the rest of
the hand-off comparison — it also had a known blank-screen defect and was
never a candidate to ship. `release` stages the quote instead, and the rule
that stacks it is `.asoc-quotelead.is-staged` below: a different job, which is
why the two were never merged. docs/design-decisions.md §5. */
/* ── `release`: THE QUOTE JOINS THE PINNED STAGE ───────────────────────────
`is-staged` is added by asoc-motion.js, which in the same breath MOVES this
section into `.asoc-narrative`. THE CLASS AND THE DOM MOVE ARE ONE CHANGE and
neither means anything without the other — the same contract the reveal
from-state and revealTargets() have, and the same failure mode if they drift:
a section positioned for a stage it is not inside. Both live only in the
(min-width: 801px) matchMedia context and both are undone by its cleanup.
WHY IT IS HERE AT ALL. The quote used to sit below the pin in normal flow and
be dragged up onto the stage by a transform that then had to unwind to zero,
which is exactly why it could only ever move SLOWER than the page — measured
at 0.50 and then 0.91, and both read as broken. Positioned here it is already
where it is wanted, so there is no offset and nothing to unwind.
The reasoning in full: docs/scroll-sequence-brief.md §5.
25% IS THE SAME GEOMETRY THE OLD TRANSFORM USED, and deliberately so: that
hold parked the section BOX at 0.25 of the viewport, and the text landed below
it by this section's own top padding. 0.25 centres what you READ rather than
what the box measures — 0.50 put the text at 60% and the credit in the bottom
half. Keeping the number keeps the composition that was signed off.
⚠️ ABOVE THE PAPER, NOT MERELY ABOVE THE DESK. The stage stacks desk (0),
type (1), paper (2); at z-index 2 a sheet still in flight would cross in
FRONT of the quote. This is a different job from the `carry` rule above, which
stacks the quote against its SIBLING sections rather than inside the stage —
they are not one rule with two selectors, so they are not merged. */
.asoc-quotelead.is-staged {
position: absolute;
top: 25%;
left: 0;
right: 0;
z-index: var(--asoc-z-staged);
}
/* ⚠️ THE SPATIAL MECHANISM STOOD HERE, AND HOW IT WAS REMOVED IS THE POINT.
Two token blocks and two gradient rules, all scoped `body:not(.asoc-ramp-fade)`.
They were DELETED, not unscoped, and that distinction is the whole hazard of
this change. Dropping the class from while leaving these blocks in place
would have made every `:not()` match every page: the spatial tokens would apply
with no gradient painted behind them, both mechanisms half-on, nothing erroring
and nothing in a settled screenshot looking wrong.
Their muted ink was a TRANSLUCENT rgba, which composites against the very ground
it has to contrast with — that is what measured 3.92:1 on the lilac. The
document-scope on-ground block that replaces them uses the opaque
--asoc-on-light-muted for exactly that reason, so removing these is a
simplification and a contrast fix in one move.
--run-ground, --asoc-ramp, --asoc-paper-card and --asoc-lilac-card were consumed
only from here and are deleted with it. --asoc-paper is NOT: `.asoc-fade-layer`
still paints it, and it is one of the two tokens this stylesheet has silently
lost twice before, which is why verify-tokens.js carries a named control for it.
docs/design-decisions.md §4. */
/* ⚠️ THE POCKET NO LONGER DEPENDS ON THIS z-index (2026-09-17). It used to be the
stacking context the services icon's negative z-index resolved against; each
service card now isolates its own layering, so the pocket holds without it.
Whether anything ELSE still depends on it was not re-examined — deleting it is its
own change with its own blast radius, not a side effect of the pocket fix. */
.asoc-section { position: relative; z-index: var(--asoc-z-section); }
/* The ramp-inclusive padding pair that stood here is gone with the ramp. Both
sections now take their padding from the light-run block above
(`--asoc-space-3xl`, with the quote's top overridden to 2xl and services' top
to 0 while the quote is staged) — which is what they computed to anyway, since
the ramp was 0 in fade mode. Deleting the pair removes the last two
var(--asoc-ramp) references rather than leaving them resolving to zero. */
/* The quote is LEFT-ALIGNED at every width since 2026-09-18 (a trial for Sam):
it no longer takes `.asoc-centred`, so it and its credit sit on the page
column's left edge. Re-centring it is that one class in build-home.py. */
/* MOBILE VERTICAL RHYTHM (Sam, 2026-09-03: "enormous white space dominates the
view"). Measured on a 393x852 phone, the runs between sections were 364px and
467px against roughly 750px of visible page — up to 62% of the screen empty.
Only part of that was the colour-transition gap; the rest is the desktop
spacing scale applied unchanged to a screen a third the width, where the same
gap reads several times larger relative to what surrounds it. Runs of 271px
existed between sections that have nothing to do with the transition at all,
which is the tell that this is a scale problem, not a mechanism problem. */
@media (max-width: 700px) {
:root {
/* ⚠️ THE SCALE WAS INVERTED HERE. 2xl was 6.0rem against 3xl's 5.6rem, so
the largest step on the scale was SMALLER than the step below it - meaning
any rule that reaches for 3xl to get the biggest gap got a smaller one on
a phone than a rule reaching for 2xl. Measured on the page: section
padding 56px, quotelead top padding 60px. 4.8rem restores 3xl > 2xl > xl
while leaving the section rhythm where it was. */
--asoc-space-3xl: 5.6rem; /* 56px, from 80 */
--asoc-space-2xl: 4.8rem; /* 48px, from 96 */
--asoc-space-xl: 4.4rem; /* 44px, from 64 */
/* Body leading 1.55 on a phone, from 1.65: a 16px line on a ~340px measure needs less
air than an 18px line on a 64ch one (design-decisions §18, the mobile rhythm). */
--asoc-body-leading: 1.55;
}
/* THE MOBILE RHYTHM (design-decisions §18): proximity decides grouping. A kicker sits
8px above its heading (its leading adds the rest), a heading 16px above its copy and
24px above a component, copy 24px above its action, and a section break is two section
paddings (112px). The kicker was 12px here until 2026-10-12. */
}
@media (max-width: 700px) {
.asoc-quotelead__text { text-wrap: pretty; }
}
.asoc-quotelead__text {
/* Deliberately larger than any heading except the narrative's two lines: this
is the page's only single-voice moment and it has to carry the transition. */
/* TWO LINES, running wide. At 17ch it broke to four narrow lines and read as
a column rather than a statement. Sized so ~41 characters fit per line at
the container's full width; text-wrap:balance then evens the pair. */
/* ⚠️ LARGER AND WIDER ABOVE ~1000px (Sam, 2026-09-30, item 25: "grow larger and occupy
more width, without being absurdly large"). Was clamp(2.4rem, 1.05rem + 3.45vw, 5.9rem),
59px from 1406. The max() keeps the old line wherever it is larger — below ~1000px,
so phones and tablets do not move — and above it a steeper line tracks the wider
column: 57px at 1280, 63 at 1440, 66 from ~1510, where the 1440px column is full.
THE WIDTH, NOT 44ch, IS WHAT HOLDS IT TO TWO LINES: 44ch at 66px is ~1810px, wider
than the column, so the column binds. The slope sits ~5% under the width at which the
pair would break to three, measured in Chromium and WebKit on fresh loads at nine
widths 1001–1921 and in a 10px sweep 801–2561 (three lines only at 801–821, as
before this change). A bigger cap needs a wider column, not a bigger number. */
font-size: clamp(2.4rem, max(1.05rem + 3.45vw, 0.4rem + 4.1vw), 6.6rem);
line-height: 1.12;
max-width: min(100%, 44ch);
text-wrap: balance;
}
/* THE STEP-FLIP IS GONE, and deliberately so. It existed because the quote had
to be legible both before and after a fade; with the ground painted into the
section there is only ever one state, and the token override above already
sets the ink. Leaving the old rules in place would have been the quietest
possible failure here: `html.asoc-ground-on` is added by JS that no longer
exists, so the quote would have stayed at var(--asoc-ink) — cream on lilac,
about 1.5:1, permanently, looking like a colour choice rather than a bug. */
.asoc-quotelead__attr {
margin-top: var(--asoc-space-l);
/* The NAME in the body face (2026-10-11): 19px bold mono read heavier than the quote's
own copy on a phone. Same size and weight, for the large-text reason below; the
business under it stays the mono label, the same pattern as the testimonials. */
font-family: var(--asoc-font-body); line-height: 1.3;
/* 19px/700, deliberately over the 18.66px-bold line where WCAG's LARGE-text
threshold takes over at 3:1 instead of 4:1... 4.5:1.
Mid-crossfade the ground is a mid-tone and small text is marginal against
it whichever way the step-flip lands — measured 2.54:1 at 16px. Large text
clears it in both directions, and a testimonial credit reads better at this
size regardless. */
font-size: 1.9rem;
font-weight: 700;
letter-spacing: 0.01em;
max-width: none;
}
/* Dark ink on the lilac, like the conversion band. */
/* ⚠️ AFTER the base rule above, not in the mobile block further up - same
specificity, so source order decides and an earlier override silently loses.
The first attempt at this sat above and did nothing.
THE MEASUREMENT THAT MATTERS IS THE INK, AND THEN IT STILL HAD TO BE JUDGED.
Box-to-box the quote and its credit are 86px apart on a phone; on the ink -
a Range over the text rather than the element box - it is 57px, because this
quote's line-height is tighter than its glyph box and 29px of the difference
is empty line-box nobody can see. Having found the first number wrong I first
concluded 57px was fine, which was a rationalisation rather than a judgement:
on an 852px screen it is 6.7% of the viewport, against a 24px card gap and a
30px heading-to-grid gap - so the credit sat nearly twice as far from its
quote as a heading sits from the grid it introduces, and a credit belongs to
its quote far more tightly than that. Grouping, not separation. */
@media (max-width: 800px) {
.asoc-quotelead__attr { margin-top: var(--asoc-space-s); }
}
.asoc-quotelead__attr strong { display: block; font-weight: 700; } /* 600 fell under the bold line */
/* ── CAT & KATIE GO LILAC ON PAPER, NOT DARK (Sam, 2026-09-18) ──────────────
The paper end is --asoc-ink-accent-paper, the payoff line's paper colour, for
the reason recorded on that token: true lilac on paper is 2.19:1 and fails
even the large-text bar, while #9F67AD is 3.66:1 — a pass ONLY because this
line is 19px/700, over the 18.66px-bold large-text line (3:1). Take the name
below that size or weight and this colour fails.
Two rules because the two tiers treat the quote's colour differently:
· ≥801 the quote's colour HOLDS (the pinned tokens above), so the name holds
too — lilac from the start, never stepping when the ground turns.
· ≤800 the quote FOLLOWS the ground, so the name only changes once the ground
is paper, and the broad foreground rule moves it in step with the ground. */
@media (min-width: 801px) {
.asoc-quotelead__attr strong { color: var(--asoc-ink-accent-paper); }
}
@media (max-width: 800px) {
html.asoc-fade-on body .asoc-quotelead__attr strong { color: var(--asoc-ink-accent-paper); }
}
/* NAME vs ORGANISATION. Sam, 2026-09-03: "they look too similar and are
competing for focus." They were: both 19px mono 700, separated only by 12%
opacity, which is not a distinction at all — it reads as one four-word label.
The name keeps the weight and size; the organisation drops to a smaller,
letter-spaced, uppercase credential line in the muted ink. Distinction is now
carried by THREE signals (size, weight, case) rather than one imperceptible
one.
The old comment here argued 700 was required because at 500 the line fell
under WCAG's large-text allowance and failed mid-crossfade at 2.85:1. That
reasoning belonged to the old mechanism, where a translucent token composited
against a changing ground. This value is opaque --asoc-ink-muted (#3A3140 on a
light ground: 4.88:1 on lilac, 10.7:1 on paper), so it clears the SMALL-text
floor on its own merits and does not need the bold allowance. */
.asoc-quotelead__attr span {
display: block; font-family: var(--asoc-font-mono);
margin-top: 0.35em;
font-size: 0.72em;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--asoc-ink-muted);
opacity: 1;
}
/* ==========================================================================
08 · THE CONCEPT PAGES (Sam, 2026-10-09) — and the hero component they share
--------------------------------------------------------------------------
Three new pages for review: /concept-home/, /concept-about/, /concept-services/.
Sam's brief: keep the home page's scrolling desk, and redesign everything else
"with no creative limits", on this design system. Nothing here is consumed by
the live home page except the hero tokens, which it already used by value.
THE IDEA. Once the desk has tidied itself, the rest of the site IS the tidy desk:
the dark ground is the desk's surface and the content sits on it as the things a
bookkeeper actually handles — an index card, a manila folder, a pile of client
notes squared up, a receipt, a polaroid, a sticky note. Flat colour, hairlines and
one soft shadow; never texture, never skeuomorphic chrome. Her handwriting is the
only hand-made layer, and it obeys the notes rule.
⚠️ DELETABLE AS ONE BLOCK. If the concepts are not taken forward, this whole
section goes, along with build-concept-*.py, src/asoc-concepts.js and the three
pages. The class-contract lint (verify-tokens rule seven) will name anything left
behind.
⚠️ THE TOKENS BELOW ARE NOT MIRRORED INTO BRICKS. sync-bricks-vars.py and
verify-token-drift.js both read only the FIRST :root block, so this one is outside
the builder's catalogue and outside the drift check, on purpose while these are review
pages. If a concept is adopted, move its tokens into the first block and re-sync.
========================================================================== */
:root {
/* THE HEADER'S HEIGHT, AS A TOKEN (design-decisions §14, layer 1). The header was
87px of logo plus two m paddings, and a hero that has to fit the window needs to
know that number rather than rediscover it. The header's own rule reads the logo
size from here, so the two cannot disagree. */
--asoc-logo-h: 87px;
--asoc-header-h: calc(var(--asoc-logo-h) + var(--asoc-space-m) * 2);
/* Desk objects. Paper that is not the page's paper, so an object reads as lying ON
a paper ground rather than being a hole in it. */
--asoc-sheet: #FBF8F4;
--asoc-sheet-back: #E9E1D6;
--asoc-sheet-edge: rgba(36, 27, 39, 0.10);
/* SHADOWS, LAYERED (refined 2026-10-11, Sam: "more realistic ... more refined"). Each is
a tight contact shadow where the object touches, then softer, wider layers that fade,
which is how light falls off a real object; one big blur reads as a smudge under it.
The old desk shadow was 70% black pooled 28px down, and on the polaroid (paper ground)
it made a muddy patch below the photo.
desk objects on the DARK ground: black, because a warm tint vanishes on charcoal.
paper sheets on the paper ground: tinted with the ink's own hue, never grey, and low.
print a photo print on paper: the same warmth, lifted a little more than a sheet. */
--asoc-desk-shadow: 0 1px 1px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.18),
0 8px 16px -4px rgba(0, 0, 0, 0.26), 0 24px 40px -16px rgba(0, 0, 0, 0.38);
--asoc-paper-shadow: 0 1px 1px rgba(36, 27, 39, 0.05), 0 2px 6px -2px rgba(36, 27, 39, 0.07),
0 14px 28px -14px rgba(36, 27, 39, 0.16);
--asoc-print-shadow: 0 1px 1px rgba(36, 27, 39, 0.10), 0 3px 6px -2px rgba(36, 27, 39, 0.10),
0 12px 20px -8px rgba(36, 27, 39, 0.13), 0 30px 44px -26px rgba(36, 27, 39, 0.22);
/* Her coral, legible on paper as a GRAPHIC (stars, crosses): 3.9:1 on #FBF8F4, over
the 3:1 non-text bar. Never text — see §1 on --asoc-accent-3. */
--asoc-mark-3-paper: #B4561A;
--asoc-plum: #4A1452;
/* Her pad of sticky notes, and the pen she writes on them with. */
--asoc-note-lilac: #E9D9EE;
--asoc-note-mint: #D2EBE8;
--asoc-pen: #4E2A59;
--asoc-pen-mint: #2E4A57;
/* A hand-drawn tick, as a mask so it takes whatever colour its ground needs. */
--asoc-tick-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 13.2c1.6 1.2 3.4 3 4.6 4.9 2.6-5 6.6-9.6 12.4-13.4' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
/* A torn-off receipt edge. */
--asoc-zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 0h16v0L8 8z' fill='%23000'/%3E%3C/svg%3E");
}
/* 62px up to 1024, not 800 (Sam, 2026-10-11): between 801 and 1024 the centred pill
cleared the 87px mark by only 21px at 801; with the phone's 62px it clears by 46. */
@media (max-width: 1024px) { :root { --asoc-logo-h: 62px; } }
/* ── PAPER, AS A SCOPE ──────────────────────────────────────────────────────
One block of on-light tokens for anything that is paper: a whole section that
paints the paper ground, or a single object lying on the dark desk. The same
values the fade ground uses (`html.asoc-fade-on body`), so a section painted
paper and the page's own paper run read as one colour system. Declared on the
element, so it wins over whatever the ground is doing around it. */
.asoc-on-paper,
.asoc-ground-paper {
--asoc-ink: var(--asoc-on-light);
--asoc-ink-muted: var(--asoc-on-light-muted);
--asoc-ink-faint: var(--asoc-on-light-muted);
--asoc-kicker: var(--asoc-plum);
--asoc-ink-accent: var(--asoc-plum);
--asoc-ink-accent-2: #143535;
--asoc-line: rgba(36, 27, 39, 0.18);
--asoc-surface-raised: var(--asoc-sheet);
/* LILAC FOR ACCENTS ON PAPER, NOT PLUM (Sam, 2026-10-10, concept feedback item 1).
Ticks, the big display numerals (folder, story chapters, pillars) and the pull quote's
mark (item 4) all take true lilac, 2.37:1 on the sheet. ⚠️ That is under the 3:1 large-text bar ON PURPOSE, and it
is Sam's call, made from a side-by-side with the deeper lilac (#9F67AD, 3.95:1) and both
figures in front of him: "The numbers are the secondary focus to the heading for each
tab, so the lessened contrast compared to darker options isn't an issue." Every numeral
sits beside a heading that carries the same meaning in full contrast. Do not "fix" it
back without asking him. */
--tick: var(--asoc-accent);
--asoc-figure: var(--asoc-accent);
color: var(--asoc-ink);
}
.asoc-ground-paper { background: var(--asoc-paper); }
:root { --tick: var(--asoc-accent-2); }
/* ── THE HERO, AS A COMPONENT (design-decisions §14, layer 1) ───────────────
`.asoc-hero` above already carries the fit: top padding that also answers to the
window's HEIGHT on desktop, a heading capped at 12vh, a 22ch heading measure.
These are its layouts. Each one keeps the fit by construction: anything that is
not the heading, the intro or the buttons sits BESIDE them, never above, so it can
never push the call to action down. Proven by scripts/verify-hero-fit.js. */
.asoc-hero__grid {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
column-gap: var(--asoc-space-2xl); align-items: end;
}
.asoc-hero__grid > .asoc-kicker,
.asoc-hero__grid > .asoc-hero__title { grid-column: 1 / -1; }
.asoc-hero__body > .asoc-hero__lead:last-child,
.asoc-hero > .asoc-container > .asoc-hero__lead:last-child { margin-bottom: 0; } /* a hero with no buttons (legal, Contact): 24px of residual otherwise */
.asoc-hero__aside { align-self: start; }
/* THE STATEMENT HERO (concept home and Services). The heading runs the full column at
up to 120px, held to two lines on desktop by the column rather than by a ch measure.
It is capped at 13vh so a short window shrinks it, which is the same fit mechanism
as the standard hero, one step larger. */
.asoc-hero--xl .asoc-hero__title {
font-size: min(clamp(4rem, 1.6rem + 6.2vw, 12rem), 13vh);
max-width: 17ch; line-height: 1.0; letter-spacing: -0.035em;
}
.asoc-hero--xl .asoc-hero__grid { align-items: start; }
.asoc-hero--xl .asoc-hero__aside { margin-top: 0.6rem; }
@media (max-width: 1024px) {
.asoc-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); column-gap: var(--asoc-space-l); }
.asoc-indexcard { padding-inline: var(--asoc-space-s); }
}
@media (max-width: 800px) {
.asoc-hero__grid { grid-template-columns: minmax(0, 1fr); }
.asoc-hero__aside { display: none; }
}
/* The split hero: words left, a picture right. The picture is the thing that gives
way — it shrinks with the window's height, so the words never have to. */
.asoc-hero--split .asoc-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); align-items: center; }
.asoc-hero--split .asoc-hero__title { max-width: 14ch; }
.asoc-hero--split .asoc-hero__aside { align-self: center; justify-self: center; margin-top: 0; }
/* margin-top 0 (2026-10-12): the statement hero's 0.6rem nudge lines a START-aligned index
card up with the heading's cap height; a centred picture has nothing to line up with, and on
About (split + xl) it left 6px of space above the polaroid inside the hero's padding. */
@media (max-width: 800px) {
.asoc-hero--split .asoc-hero__grid { grid-template-columns: minmax(0, 1fr); }
/* On a phone the picture follows the buttons, below the fold, rather than going. */
.asoc-hero--split .asoc-hero__aside { display: block; justify-self: start; margin-top: var(--asoc-space-xl); }
}
/* THE PAGE HEROES FILL THE WINDOW FROM 801 (Sam, 2026-10-14). About and Services opt in with
--fill; the home does not (its hero hands over to the pinned desk, measured separately).
The header is in the flow above the hero, so the hero's share of the window is the window
less --asoc-header-h. Content-height heroes left a strip of the next section showing: 11px of
paper under Services at 1440x900, 120px of the story under About. Taller content still grows
the hero, so the fit (verify-hero-fit.js) is unchanged. svh with a vh fallback: on a tablet the
small viewport is the one the visitor sees on load. Headless browsers cannot tell the two apart. */
@media (min-width: 801px) {
.asoc-hero--fill {
min-height: calc(100vh - var(--asoc-header-h));
min-height: calc(100svh - var(--asoc-header-h));
justify-content: center;
}
}
/* ── SECTION HEADS ─────────────────────────────────────────────────────────── */
.asoc-head { margin-bottom: var(--asoc-space-xl); max-width: 64rem; }
.asoc-head > p:not(.asoc-kicker) { color: var(--asoc-ink-muted); }
.asoc-head > :last-child { margin-bottom: 0; }
.asoc-head--wide {
max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
column-gap: var(--asoc-space-2xl); align-items: end;
}
.asoc-head--wide > .asoc-kicker { grid-column: 1 / -1; }
.asoc-head--wide > h2 { margin-bottom: 0; }
@media (max-width: 800px) {
.asoc-head--wide { grid-template-columns: minmax(0, 1fr); }
.asoc-head--wide > h2 { margin-bottom: var(--asoc-space-s); }
}
/* Read by screen readers, not drawn: a heading the page outline needs where the section
carries no visible one (the testimonials, 2026-10-11). */
.asoc-sr-only {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* A heading in the accent: lilac on the dark ground, the deeper plum on paper. */
.asoc-heading--accent { color: var(--asoc-ink-accent); }
/* A grid whose CHILDREN are the reveal units (asoc-motion.js GRID_WRAPPERS). */
.asoc-stagger { list-style: none; margin: 0; padding: 0; }
/* ── LISTS: ticks drawn in, strikes drawn through ─────────────────────────── */
.asoc-ticks, .asoc-strikes { list-style: none; margin: 0; padding: 0; }
/* ⚠️ EVERY LIST HERE IS display:block, AND IT HAS TO SAY SO. A list built as a Bricks
block is `display:flex; flex-direction:column; align-items:flex-start`, so each row
shrinks to its own text: hairlines stop at the end of the words, `columns` is
ignored, and a right-aligned figure sits beside its label instead of at the edge.
Seen on the first render of all three pages. */
.asoc-ticks, .asoc-strikes, .asoc-chapters, .asoc-pile, .asoc-receipt__lines,
.asoc-indexcard__rows, .asoc-faq { display: block; }
.asoc-ticks > li, .asoc-strikes > li {
position: relative; padding: 0.7rem 0 0.7rem 3.2rem; line-height: 1.45;
border-top: 1px solid var(--asoc-line);
}
.asoc-ticks > li:first-child, .asoc-strikes > li:first-child { border-top: 0; }
.asoc-ticks > li::before {
content: ""; position: absolute; left: 0.2rem; top: 0.85rem; width: 1.9rem; height: 1.9rem;
background-color: var(--tick);
-webkit-mask: var(--asoc-tick-svg) no-repeat center / contain; mask: var(--asoc-tick-svg) no-repeat center / contain;
clip-path: inset(0 0 0 0);
transition: clip-path 0.45s var(--asoc-ease) calc(0.2s + var(--i, 0) * 60ms);
}
/* Full ink, not muted, and a hairline strike (Sam, 2026-10-10, item 7): each line has to
stay readable through its strike, because the joke is in reading what she doesn't do. */
.asoc-strikes > li { padding-left: 0; color: var(--asoc-ink); }
.asoc-strikes > li > span {
/* A BACKGROUND, CLONED PER LINE, not a pseudo-element. An absolutely placed stroke on
an inline span is one box: on a phone, where an item wraps, it drew a short dash
under the first words of the first line and left the rest unstruck. With
box-decoration-break: clone every line fragment gets its own stroke. */
background: var(--asoc-strike-img) no-repeat 0 55% / 100% 0.62em;
-webkit-box-decoration-break: clone; box-decoration-break: clone;
padding-inline: 0.2rem;
/* 0.85s a stroke, 160ms apart, from 0.6s and 110ms (Sam, 2026-10-09: "decrease the speed
slightly"). Each item is now visibly crossed out rather than flicked. */
transition: background-size 0.85s var(--asoc-ease) calc(0.3s + var(--i, 0) * 160ms);
}
:root {
/* The strike as an image, because a per-line background cannot be a mask. One per
ground, as tokens: lilac on the desk (--asoc-accent), the paper lilac (--asoc-ink-accent-paper)
on paper. Coral until 2026-10-13 (Sam: "I'd prefer if the strike-throughs were lilac").
Stroke 1.1 of a 12-unit box, from 2.4 (Sam, 2026-10-10: "a much thinner strike"). */
--asoc-strike-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.4C40 6.6 92 7.2 130 5.4c24-1.1 46-2.6 66-3.2' fill='none' stroke='%23BE96C8' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
}
.asoc-on-paper, .asoc-ground-paper {
--asoc-strike-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.4C40 6.6 92 7.2 130 5.4c24-1.1 46-2.6 66-3.2' fill='none' stroke='%239F67AD' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Drawn in only when the script is there to say "now": with no script they are
simply drawn. */
html.asoc-draw-js [data-draw]:not(.is-in) .asoc-ticks > li::before { clip-path: inset(0 100% 0 0); }
html.asoc-draw-js [data-draw]:not(.is-in) .asoc-strikes > li > span { background-size: 0% 0.62em; }
/* ── THE "GO FURTHER" LINK (one style, 2026-10-11) ───────────────────────────
A standalone link with an arrow: "See everything we take on", the menu's "Compare
packages" and "All services". NOT underlined at rest: it is not in
running text, and the arrow is the affordance. (Sam: the old resting underline broke
at the arrow, a line under the words, a gap, a stub under the arrow.) On hover or
keyboard focus a line draws in under the WORDS only, in the accent, and the arrow
nudges on. The line is a background sized to the box minus the arrow and its gap
(--go-arrow), so it can never run under the arrow or break.
Links INSIDE running text (FAQ answers, the business card's email) keep a real
underline; that is the rule for links in prose (WCAG 1.4.1). */
.asoc-link, .asoc-megamenu__more {
--go-arrow: 2rem; /* the arrow's 1.4rem + the 0.6rem gap */
display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px;
font-weight: 600; color: var(--asoc-ink); text-decoration: none; border: 0;
background: linear-gradient(var(--asoc-ink-accent), var(--asoc-ink-accent)) no-repeat
0 calc(50% + 0.8em) / 0 1.5px;
transition: background-size 0.35s var(--asoc-ease), color var(--asoc-dur) var(--asoc-ease);
}
.asoc-link:hover, .asoc-link:focus-visible,
.asoc-megamenu__more:hover, .asoc-megamenu__more:focus-visible {
background-size: calc(100% - var(--go-arrow)) 1.5px;
}
.asoc-link::after, .asoc-megamenu__more::after {
transition: translate 0.35s var(--asoc-ease-settle);
}
.asoc-link:hover::after, .asoc-link:focus-visible::after,
.asoc-megamenu__more:hover::after, .asoc-megamenu__more:focus-visible::after { translate: 0.4rem 0; }
.asoc-link::after {
content: ""; width: 1.4rem; height: 1rem; background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5h11M8.5 1.5 12 5l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5h11M8.5 1.5 12 5l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* ══ THE DESK OBJECTS ══════════════════════════════════════════════════════ */
/* ── THE INDEX CARD (home hero) ─────────────────────────────────────────────
Four facts a first-time visitor checks before anything else, ruled like a card
from a box on her desk. Lies on the dark desk, so it is paper. */
.asoc-indexcard {
background: var(--asoc-sheet); border-radius: 3px; box-shadow: var(--asoc-desk-shadow);
padding: var(--asoc-space-m) var(--asoc-space-m) var(--asoc-space-s);
rotate: 1.2deg;
}
.asoc-indexcard__label {
font-family: var(--asoc-font-mono); font-size: var(--asoc-text-label); font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--asoc-kicker);
padding-bottom: var(--asoc-space-xs); margin: 0; border-bottom: 2px solid var(--asoc-line);
}
.asoc-indexcard__rows { list-style: none; margin: 0; padding: 0; }
.asoc-indexcard__rows > li {
display: flex; flex-direction: row; align-items: baseline; gap: var(--asoc-space-xs);
padding-block: 0.9rem; border-bottom: 1px solid var(--asoc-line); font-size: var(--asoc-text-small);
}
.asoc-indexcard__rows > li:last-child { border-bottom: 0; }
.asoc-indexcard__rows span { color: var(--asoc-ink-muted); white-space: nowrap; }
.asoc-indexcard__rows strong {
margin-inline-start: auto; text-align: right; font-weight: 600; color: var(--asoc-ink);
white-space: nowrap; /* "$240 a / month" broke in two at 801-1024; the leader gives way instead */
}
/* Dot leaders: the ledger's own way of joining a label to its figure. */
.asoc-indexcard__rows i {
flex: 1 1 auto; align-self: center; height: 0; min-width: 1.6rem;
border-bottom: 1.5px dotted var(--asoc-line); translate: 0 0.3rem;
}
/* ── THE FOLDER (home services) ─────────────────────────────────────────────
Three pillars filed in one manila folder. With the script, the tabs along the top
switch which sheet is at the front; without it, the three sheets simply stack and
read as a list. The tabs are BUILT by asoc-concepts.js from each sheet's own
heading, so there is one string per pillar and nothing to keep in step. */
.asoc-folder { position: relative; }
/* THE TABS SHARE THE SHEET'S EDGE (Sam, 2026-10-11). They were borderless, with gaps
between them, and the sheet's 1px edge ran under all three and across the gaps, so the
page showed through as pale slots with a line across. Now: no gaps (neighbours share a
1px edge), every tab carries the sheet's own edge colour, and the row overlaps the
sheet's top edge by 1px. An inactive tab draws that edge along its own foot, so it
reads as filed BEHIND the sheet; the active tab has no foot and the sheet's colour,
so it reads as the top of the sheet itself. */
/* EQUAL WIDTHS, SET BY THE WIDEST TAB (Sam, 2026-10-11): a max-content grid whose columns
all share 1fr takes the widest label's width for every tab. minmax(0, 1fr) and the
max-width keep a narrow phone from pushing the row past the sheet. */
.asoc-folder__tabs {
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
/* Flush with the sheet's left edge, 2px apart (Sam, 2026-10-12): offset, and sharing one 1px
edge, they read as overlapping. Each tab now has its whole border. */
/* ON THE SHEET'S DRAWN EDGE, not its box (Sam, 2026-10-12): the sheet's edge is a 1px ring
OUTSIDE its box, so the row moves 1px left and ends exactly at the box top. An inactive
tab's foot line then lies on the ring's top line; the active tab covers it. Measured
before: tab 01 1px right of the edge, every foot 1px below the sheet's line. */
width: max-content; max-width: 100%; gap: 2px; margin-inline-start: -1px;
position: relative; z-index: var(--asoc-z-section); margin-bottom: 0;
}
.asoc-folder__tab {
appearance: none; cursor: pointer; min-height: 48px; position: relative;
font: 600 var(--asoc-text-small) / 1.2 var(--asoc-font-body); color: var(--asoc-ink-muted);
background: var(--asoc-sheet-back);
border: 1px solid var(--asoc-sheet-edge); border-bottom: 0;
padding: 1.1rem 2.4rem 1.2rem; border-radius: 12px 12px 0 0;
box-shadow: inset 0 -1px 0 var(--asoc-sheet-edge);
transition: background var(--asoc-dur) var(--asoc-ease), color var(--asoc-dur) var(--asoc-ease);
}
.asoc-folder__tab:hover { color: var(--asoc-ink); background: color-mix(in srgb, var(--asoc-sheet) 45%, var(--asoc-sheet-back)); }
.asoc-folder__tab[aria-selected="true"] { z-index: var(--asoc-z-section); background: var(--asoc-sheet); color: var(--asoc-ink); box-shadow: none; }
.asoc-folder__tab[aria-selected="true"] span { color: var(--asoc-ink-accent); }
.asoc-folder__tab span {
font-family: var(--asoc-font-mono); font-size: var(--asoc-text-label); letter-spacing: 0.1em;
margin-inline-end: 0.8rem; color: var(--asoc-ink-muted);
}
.asoc-folder__sheets {
--sheets-pad: clamp(2.4rem, 1rem + 4vw, 6.4rem);
/* Square top-left: the first tab rises straight out of that corner, as on a manila folder. */
position: relative; background: var(--asoc-sheet); border-radius: 0 var(--asoc-radius) var(--asoc-radius) var(--asoc-radius);
box-shadow: var(--asoc-paper-shadow), 0 0 0 1px var(--asoc-sheet-edge);
padding: var(--sheets-pad);
}
.asoc-folder__sheet {
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); column-gap: var(--asoc-space-2xl);
align-items: start;
}
/* The link moves to the sheet's bottom-right corner (Sam, 2026-10-11), under both columns:
the intro's box dissolves so its children are the sheet's own grid items. */
.asoc-folder__intro { display: contents; }
.asoc-folder__intro > * { grid-column: 1; }
.asoc-folder__sheet > .asoc-folder__list { grid-column: 2; grid-row: 1 / span 3; }
.asoc-folder__intro > .asoc-folder__more { grid-column: 1 / -1; justify-self: end; }
.asoc-folder__sheet + .asoc-folder__sheet { margin-top: var(--asoc-space-xl); padding-top: var(--asoc-space-xl); border-top: 1px solid var(--asoc-line); }
html.asoc-folder-js .asoc-folder__sheet + .asoc-folder__sheet { margin-top: 0; padding-top: 0; border-top: 0; }
/* A CROSSFADE, AND THE FOLDER TAKES EACH SHEET'S OWN HEIGHT (Sam, 2026-10-11). First
built as one shared cell, so every sheet was as tall as the longest: on a phone tabs 02
and 03 sat on ~600px of empty paper. Now only the front sheet is in the flow; the others
lie on top of it, out of the flow, while they fade. asoc-concepts.js animates the
folder's height from the old sheet's to the new one's (0.4s), so nothing below it jumps.
The outgoing sheet fades in 0.2s; the incoming one rises 0.6rem and fades in over 0.4s.
visibility (not display) hides the others, which also takes them out of the
accessibility tree. */
html.asoc-folder-js .asoc-folder__sheets { transition: height 0.4s var(--asoc-ease); }
html.asoc-folder-js .asoc-folder__sheet {
transition: opacity 0.4s var(--asoc-ease) 0.12s, translate 0.4s var(--asoc-ease) 0.12s, visibility 0s;
}
html.asoc-folder-js .asoc-folder__sheet[hidden] {
/* width:auto, or Bricks' width:100% plus the left offset hangs the hidden sheets past the
screen's edge: phones laid out 2-17px wider than the screen (verify-hero-fit CONTROL). */
display: grid; position: absolute; top: var(--sheets-pad); left: var(--sheets-pad); right: var(--sheets-pad); width: auto;
visibility: hidden; opacity: 0; translate: 0 0.6rem;
transition: opacity 0.2s var(--asoc-ease), translate 0.2s var(--asoc-ease), visibility 0s linear 0.2s;
}
.asoc-folder__num {
font-family: var(--asoc-font-display); font-weight: 600; letter-spacing: -0.04em; line-height: 0.9;
/* 120px -> ~82px at 1440 (Sam asked for the hierarchy to be reviewed, 2026-10-11). The
title is the heading; the numeral is an index the tab already shows, so it should
not outweigh the words. At ~1.5x the title it still reads as the sheet's mark. */
font-size: clamp(5.2rem, 2.4rem + 4vw, 8.8rem); color: var(--asoc-figure, var(--asoc-ink-accent)); margin: 0 0 var(--asoc-space-s);
font-variant-numeric: tabular-nums;
}
.asoc-folder__title { font-size: var(--asoc-text-h2); margin-bottom: var(--asoc-space-s); }
/* One line beside the list (Sam, 2026-10-11: "Bookkeeping & finance" wrapped). The intro
column is narrowest just above 1024, where the heading size alone wrapped it from 1025
to ~1200; 3.6vw keeps the longest title on one line there and never exceeds the token. */
.asoc-folder__title { font-size: min(var(--asoc-text-h2), 3.6vw); }
.asoc-folder__desc { color: var(--asoc-ink-muted); font-size: var(--asoc-text-lead); line-height: 1.5; }
.asoc-folder__more { margin-top: var(--asoc-space-l); }
.asoc-folder__list { columns: 2; column-gap: var(--asoc-space-l); }
/* CENTRED AGAINST THE INTRO, not hung from the top (Sam, 2026-10-11, concept item 12): the
numeral, title, line and link run ~470px at 1440 and the twelve-task list ~250px, so a
top-aligned list left a ~210px empty band under it. Centred, the space splits above and
below and the two columns read as one composition. Below 1025 the sheet is one column,
where centring in its own row changes nothing, so no breakpoint is needed. */
.asoc-folder__list { align-self: center; }
.asoc-folder__list > li { break-inside: avoid; }
/* NO RULE ABOVE THE FIRST ROW OF EITHER COLUMN (Sam, 2026-10-11: nothing sits above them,
so the lines separate nothing). The first column's comes off with .asoc-ticks'
first-child rule; the second column's first row has no selector of its own in a
multi-column list, so the list clips its own top pixel, which is exactly where both
columns' first rules would be. */
.asoc-folder__list { clip-path: inset(1px 0 0 0); margin-top: -1px; }
@media (max-width: 1024px) {
.asoc-folder__sheet { grid-template-columns: minmax(0, 1fr); row-gap: var(--asoc-space-l); }
.asoc-folder__title { font-size: var(--asoc-text-h2); } /* one column: the full width, the full size */
/* ONE COLUMN, GROUPED (Sam, 2026-10-11: on a phone every gap was the same and too
wide). No row gap; each element says how close it belongs to the one above: the
numeral, title and line as one group, the list a step away, the link closing it. */
.asoc-folder__sheet { row-gap: 0; }
.asoc-folder__sheet > .asoc-folder__list { grid-column: 1; grid-row: auto; margin-top: var(--asoc-space-l); }
.asoc-folder__num { margin-bottom: var(--asoc-space-2xs); }
.asoc-folder__title { margin-bottom: var(--asoc-space-xs); }
.asoc-folder__desc { margin: 0; }
.asoc-folder__intro > .asoc-folder__more { order: 1; margin-top: var(--asoc-space-m); }
}
@media (max-width: 700px) {
/* The phone keeps the joined tabs (no gaps) and drops the big numeral: the tab above
already says 01, and on a phone the numeral pushed the title half a screen down. */
/* Scaled with the screen: at 320 "Bookkeeping" overflowed its equal-width tab by 9px. */
.asoc-folder__tab {
padding: 0.8rem clamp(0.6rem, 2.8vw - 0.3rem, 1rem) 0.9rem; text-align: left;
font-size: clamp(1.25rem, 0.15rem + 3.2vw, 1.4rem);
}
.asoc-folder__tab span { display: block; margin: 0 0 0.1rem; font-size: 1.1rem; }
.asoc-folder__num { display: none; }
.asoc-folder__list { columns: 1; }
.asoc-folder__sheets { border-radius: 0 0 var(--asoc-radius) var(--asoc-radius); }
}
/* ── FAIR QUESTIONS (home) ──────────────────────────────────────────────────
The four objections Georgie hears most, in her own list, each answered plainly.
A ruled ledger: question left, answer right, a hairline between rows. */
.asoc-faq { list-style: none; margin: 0; padding: 0; counter-reset: faq; border-bottom: 1px solid var(--asoc-line); }
.asoc-faq > li {
counter-increment: faq;
display: grid; grid-template-columns: 6rem minmax(0, 1.15fr) minmax(0, 0.85fr); column-gap: var(--asoc-space-l);
padding-block: var(--asoc-space-l); border-top: 1px solid var(--asoc-line);
}
.asoc-faq > li::before {
content: counter(faq, decimal-leading-zero);
font-family: var(--asoc-font-mono); font-size: var(--asoc-text-label); letter-spacing: 0.14em;
color: var(--asoc-kicker); padding-top: 0.9rem;
}
.asoc-faq__q { font-size: clamp(2.4rem, 1.5rem + 1.7vw, 4.4rem); line-height: 1.08; margin: 0; max-width: 17ch; }
.asoc-faq__a { margin: 0; color: var(--asoc-ink-muted); padding-top: 0.4rem; }
.asoc-faq__a strong { color: var(--asoc-ink); font-weight: 600; }
@media (max-width: 800px) {
.asoc-faq > li { grid-template-columns: minmax(0, 1fr); row-gap: var(--asoc-space-xs); padding-block: var(--asoc-space-m); }
.asoc-faq > li::before { padding-top: 0; }
}
/* AS AN ACCORDION (asoc-concepts.js, faqs(); Sam, 2026-10-11). The question is a full-width
button with a plus that turns to a minus; the answer folds open beneath the question, in
the same column, by a grid row going 0fr to 1fr. Without the script the ledger above is
what renders, every answer showing. */
html.asoc-faq-js .asoc-faq > li { grid-template-columns: 6rem minmax(0, 1fr); padding-block: var(--asoc-space-m); }
html.asoc-faq-js .asoc-faq__q { max-width: none; grid-column: 2; }
.asoc-faq__btn {
appearance: none; border: 0; background: none; padding: 0; margin: 0; width: 100%;
display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--asoc-space-m);
min-height: 44px; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.asoc-faq__qtext { max-width: 22ch; }
.asoc-faq__icon { position: relative; flex: none; width: 2.4rem; height: 2.4rem; color: var(--asoc-ink-muted);
transition: color var(--asoc-dur) var(--asoc-ease), rotate 0.4s var(--asoc-ease-settle); }
.asoc-faq__icon::before, .asoc-faq__icon::after {
content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 2px; border-radius: 2px;
background: currentColor; translate: -50% -50%;
}
.asoc-faq__icon::after { rotate: 90deg; transition: rotate 0.4s var(--asoc-ease-settle); }
.asoc-faq__btn:hover .asoc-faq__icon, .asoc-faq__btn:focus-visible .asoc-faq__icon { color: var(--asoc-ink-accent); }
.asoc-faq > li.is-open .asoc-faq__icon { color: var(--asoc-ink-accent); }
.asoc-faq > li.is-open .asoc-faq__icon::after { rotate: 0deg; }
.asoc-faq__panel {
grid-column: 2; display: grid; grid-template-rows: 0fr;
transition: grid-template-rows 0.4s var(--asoc-ease);
}
.asoc-faq > li.is-open .asoc-faq__panel { grid-template-rows: 1fr; }
.asoc-faq__panel > .asoc-faq__a { min-height: 0; overflow: hidden; max-width: 62ch; padding-top: 0; }
.asoc-faq > li.is-open .asoc-faq__panel > .asoc-faq__a { padding-top: var(--asoc-space-s); }
.asoc-faq__panel > .asoc-faq__a { transition: padding-top 0.4s var(--asoc-ease); }
@media (max-width: 800px) {
html.asoc-faq-js .asoc-faq > li { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
html.asoc-faq-js .asoc-faq__q, .asoc-faq__panel { grid-column: 1; }
html.asoc-faq-js .asoc-faq > li::before { margin-bottom: var(--asoc-space-2xs); }
}
/* ── IN THEIR WORDS: ONE LARGE QUOTE AT A TIME (concept item 10, 2026-10-11) ──────
Sam: the pile "makes people scroll to read; not ideal". One quote at the size of a
statement, like the credibility quote under the desk, with arrows and a counter that
asoc-concepts.js (quotes()) builds. No autoplay. WITHOUT JS the four are an ordinary
list, all readable; the controls do not exist.
THE HEIGHT NEVER CHANGES: with the script, every quote sits in the SAME grid cell, so
the stage is as tall as the longest one and moving between them moves nothing below.
Paced by easing, not by a fade (Sam's motion rule): the quote slides 40px with a small
settle and its credit follows 120ms later. */
/* No visible heading since 2026-10-11 (Sam): the h2 is screen-reader only and the head
block carries nothing visible, so it takes no space. The arrows now live on the credit
row at the bottom right (Humaan's layout). */
.asoc-quotes { position: relative; }
/* ⚠️ THE WHOLE HEAD IS HIDDEN, NOT JUST THE h2: the intro block kept its 32rem flex-basis
in Bricks' column flex and reserved ~320px of empty dark above the quote (2026-10-11). */
.asoc-quotes__head {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.asoc-quotes__intro > h2 { margin-bottom: var(--asoc-space-xs); }
.asoc-quotes__intro > p { margin: 0; color: var(--asoc-ink-muted); max-width: 46ch; }
.asoc-quotes__stage {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: var(--asoc-space-2xl);
}
.asoc-quotes__slide { margin: 0; }
/* ONE QUOTE STYLE (Sam, 2026-10-13): the About and Services pull quote shares these rules, so
the two cannot drift apart again. The pull quote keeps only its lilac mark. */
.asoc-quotes__text, .asoc-pullquote__text {
font-family: var(--asoc-font-display); font-weight: var(--asoc-display-wght);
letter-spacing: var(--asoc-display-tracking); line-height: 1.16;
font-size: clamp(2.4rem, 1.4rem + 2.4vw, 4.8rem); /* 24px on a phone: the credibility quote's size */
color: var(--asoc-ink); margin: 0; max-width: 40ch; text-wrap: pretty;
}
.asoc-quotes__who, .asoc-pullquote__attr { margin: var(--asoc-space-m) 0 0; }
/* With the script every quote shares one cell, so the credit is pushed to the cell's foot:
it sits on the same row for every quote, level with the arrows, and leaves room for them. */
html.asoc-quotes-js .asoc-quotes__slide { display: flex; flex-direction: column; }
html.asoc-quotes-js .asoc-quotes__who { margin-top: auto; padding-top: var(--asoc-space-m); padding-inline-end: 12rem; }
/* THE NAME IN THE BUSINESS NAME'S INK (Sam, 2026-10-13). Plum until that morning ("I really
don't like the dark purple on paper"), then lilac for a few hours, which measured 2.19:1 on
paper; the muted ink is 10.85:1 there and follows the ground. The lilac stays on the mark
and the client's logo. The home's quotes on dark are the reverse: the same rule (light grey
there), and the same lilac mark above (Sam, 2026-10-13). */
.asoc-quotes__who strong, .asoc-pullquote__attr strong { display: block; font-weight: 700; color: var(--asoc-ink-muted); }
.asoc-quotes__who span, .asoc-pullquote__attr span {
display: block; margin-top: 0.4rem; font-family: var(--asoc-font-mono); font-size: var(--asoc-text-label);
letter-spacing: 0.1em; text-transform: uppercase; color: var(--asoc-ink-muted);
}
/* The controls (Sam, 2026-10-11): two arrows on the credit row, bottom right, no counter.
The circle is smaller (36px) and only drawn on hover, keyboard focus or press; the button
itself stays a 44px target, so only the drawing shrank. */
.asoc-quotes__controls {
position: absolute; right: 0; bottom: 0;
display: flex; flex-direction: row; align-items: center; gap: 0.4rem;
}
.asoc-quotes__btn {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 4.4rem; height: 4.4rem; padding: 0; border: 0; border-radius: var(--asoc-radius-pill);
background: transparent; color: var(--asoc-ink); cursor: pointer;
}
.asoc-quotes__btn::before {
content: ""; position: absolute; inset: 0.4rem; border-radius: var(--asoc-radius-pill);
box-shadow: inset 0 0 0 1.5px var(--asoc-ink-accent);
background-color: color-mix(in srgb, var(--asoc-ink) 6%, transparent);
opacity: 0; scale: 0.85;
transition: opacity var(--asoc-dur) var(--asoc-ease), scale var(--asoc-dur) var(--asoc-ease-settle);
}
.asoc-quotes__btn:hover::before, .asoc-quotes__btn:focus-visible::before, .asoc-quotes__btn:active::before { opacity: 1; scale: 1; }
.asoc-quotes__btn:focus-visible { outline: none; }
.asoc-quotes__btn svg { position: relative; width: 2rem; height: 2rem; }
html.asoc-quotes-js .asoc-quotes__stage { display: grid; }
html.asoc-quotes-js .asoc-quotes__slide {
grid-area: 1 / 1; visibility: hidden;
transition: visibility 0s linear 0.3s;
}
html.asoc-quotes-js .asoc-quotes__slide.is-active { visibility: visible; transition: visibility 0s; }
html.asoc-quotes-js .asoc-quotes__slide > * {
opacity: 0; translate: var(--to, -40px) 0;
transition: opacity 0.3s var(--asoc-ease), translate 0.3s var(--asoc-ease);
}
html.asoc-quotes-js .asoc-quotes__slide.is-active > * {
opacity: 1; translate: 0 0;
transition: opacity 0.45s var(--asoc-ease), translate 0.7s var(--asoc-ease-settle);
}
html.asoc-quotes-js .asoc-quotes__slide.is-active > .asoc-quotes__who { transition-delay: 0.12s; }
/* The entering quote is parked on the side it arrives from, with no transition, for one
frame; the script then lets it go. */
html.asoc-quotes-js .asoc-quotes__slide.is-entering > * { transition: none; translate: var(--from, 40px) 0; opacity: 0; }
/* ── THE PILE (home testimonials) ───────────────────────────────────────────
Client notes that square up into a neat pile as you scroll: each card holds its
place a few millimetres below the last, so the stack builds on screen the way the
desk's piles did. Sticky positioning only, no script, no pin. The heading holds
its place beside the pile on a wide screen. */
.asoc-pile-wrap {
display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: var(--asoc-space-2xl);
align-items: start;
}
.asoc-pile-wrap > .asoc-head { position: sticky; top: 14vh; margin-bottom: 0; }
.asoc-pile { list-style: none; margin: 0; padding: 0; }
.asoc-pile__card {
position: sticky; top: calc(14vh + var(--i, 0) * 1.4rem);
background: var(--asoc-sheet); border-radius: 6px; box-shadow: var(--asoc-desk-shadow);
padding: clamp(2.8rem, 1.6rem + 3vw, 5.6rem);
min-height: min(56vh, 46rem);
display: flex; flex-direction: column; justify-content: space-between; gap: var(--asoc-space-l);
rotate: var(--r, 0deg);
}
.asoc-pile__card + .asoc-pile__card { margin-top: 32vh; }
.asoc-pile__card:nth-child(1) { --i: 0; --r: -0.6deg; }
.asoc-pile__card:nth-child(2) { --i: 1; --r: 0.5deg; }
.asoc-pile__card:nth-child(3) { --i: 2; --r: -0.3deg; }
.asoc-pile__card:nth-child(4) { --i: 3; --r: 0.4deg; }
.asoc-pile__stars {
margin: 0; height: 1.8rem; width: 10.6rem; background-color: var(--asoc-mark-3-paper);
--asoc-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 106 18'%3E%3Cg fill='%23000'%3E%3Cpath transform='translate(0 0)' d='M9 1l2.2 5.1 5.5.5-4.2 3.6 1.3 5.4L9 12.8 4.2 15.6l1.3-5.4L1.3 6.6l5.5-.5z'/%3E%3Cpath transform='translate(22 0)' d='M9 1l2.2 5.1 5.5.5-4.2 3.6 1.3 5.4L9 12.8 4.2 15.6l1.3-5.4L1.3 6.6l5.5-.5z'/%3E%3Cpath transform='translate(44 0)' d='M9 1l2.2 5.1 5.5.5-4.2 3.6 1.3 5.4L9 12.8 4.2 15.6l1.3-5.4L1.3 6.6l5.5-.5z'/%3E%3Cpath transform='translate(66 0)' d='M9 1l2.2 5.1 5.5.5-4.2 3.6 1.3 5.4L9 12.8 4.2 15.6l1.3-5.4L1.3 6.6l5.5-.5z'/%3E%3Cpath transform='translate(88 0)' d='M9 1l2.2 5.1 5.5.5-4.2 3.6 1.3 5.4L9 12.8 4.2 15.6l1.3-5.4L1.3 6.6l5.5-.5z'/%3E%3C/g%3E%3C/svg%3E");
-webkit-mask: var(--asoc-stars) no-repeat left center / contain;
mask: var(--asoc-stars) no-repeat left center / contain;
font-size: 0; color: transparent;
/* ⚠️ max-width:none IS LOAD-BEARING. Every is capped at 68ch, and a ch at
font-size 0 is 0px, so the star row measured 0.19px wide and painted nothing. */
max-width: none;
}
.asoc-pile__quote {
font-family: var(--asoc-font-display); font-weight: 500; letter-spacing: -0.015em;
font-size: clamp(2.2rem, 1.6rem + 1.4vw, 3.4rem); line-height: 1.22; color: var(--asoc-ink);
margin: 0; max-width: 30ch; text-wrap: pretty;
}
.asoc-pile__who { margin: 0; font-size: var(--asoc-text-small); }
.asoc-pile__who strong { display: block; color: var(--asoc-ink); font-weight: 700; }
.asoc-pile__who span {
display: block; margin-top: 0.3em; font-family: var(--asoc-font-mono); font-size: var(--asoc-text-label);
letter-spacing: 0.14em; text-transform: uppercase; color: var(--asoc-ink-muted);
}
@media (max-width: 1024px) {
.asoc-pile-wrap { grid-template-columns: minmax(0, 1fr); }
.asoc-pile-wrap > .asoc-head { position: static; margin-bottom: var(--asoc-space-xl); }
}
@media (max-width: 800px) {
.asoc-pile__card { top: calc(var(--asoc-space-l) + var(--i, 0) * 1.2rem); min-height: 0; }
.asoc-pile__card + .asoc-pile__card { margin-top: 24vh; }
}
/* ── THE POLAROID (home founder, About hero) ────────────────────────────────
Her photograph has not arrived; the logomark stands in it until it does, and the
swap is one image. */
.asoc-polaroid {
margin: 0; width: min(100%, 38rem); background: var(--asoc-sheet);
padding: 1.6rem 1.6rem 0; border-radius: 3px; box-shadow: var(--asoc-print-shadow);
rotate: -2.4deg;
}
.asoc-polaroid img, .asoc-polaroid .asoc-polaroid__img {
display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--asoc-surface);
}
.asoc-polaroid figcaption, .asoc-polaroid__cap {
margin: 0; padding: 1.4rem 0.4rem 1.8rem; font-family: var(--asoc-font-mono);
font-size: var(--asoc-text-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--asoc-ink-muted);
}
.asoc-hero--split .asoc-polaroid { width: min(100%, 38rem, 48vh); }
@media (max-width: 800px) { .asoc-hero--split .asoc-polaroid { width: min(78%, 30rem); } }
/* ── MEET GEORGIE (home) ───────────────────────────────────────────────────── */
.asoc-meet { display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); column-gap: var(--asoc-space-2xl); align-items: center; }
.asoc-meet__media { justify-self: center; }
.asoc-meet__text > .asoc-btn, .asoc-meet__text > .asoc-link { margin-top: var(--asoc-space-m); }
.asoc-meet__text > p:not(.asoc-kicker) { color: var(--asoc-ink-muted); font-size: var(--asoc-text-lead); line-height: 1.5; }
@media (max-width: 800px) {
.asoc-meet { grid-template-columns: minmax(0, 1fr); row-gap: var(--asoc-space-l); }
.asoc-meet__media { justify-self: start; width: min(70%, 26rem); }
}
/* ── THE RECEIPT (About) ────────────────────────────────────────────────────
Her qualifications, itemised. It prints when it scrolls into view — the paper
feeds down out of a slot — and with no script it is simply printed. */
.asoc-receipt {
position: relative; background: var(--asoc-sheet); color: var(--asoc-on-light);
font-family: var(--asoc-font-mono); font-size: 1.4rem; line-height: 1.5; letter-spacing: 0.02em;
padding: var(--asoc-space-l) var(--asoc-space-m) var(--asoc-space-xl);
box-shadow: var(--asoc-paper-shadow);
-webkit-mask: var(--asoc-zigzag) repeat-x left bottom / 1.6rem 0.8rem, linear-gradient(#000 0 0) no-repeat left top / 100% calc(100% - 0.79rem);
mask: var(--asoc-zigzag) repeat-x left bottom / 1.6rem 0.8rem, linear-gradient(#000 0 0) no-repeat left top / 100% calc(100% - 0.79rem);
clip-path: inset(0 0 0 0);
transition: clip-path 1.6s cubic-bezier(0.55, 0.1, 0.35, 1) 0.2s;
}
/* The trigger is on the receipt's WRAPPER: a fully clipped element never reads as in
view to an IntersectionObserver, so a trigger on the receipt itself never fires. */
html.asoc-draw-js [data-draw]:not(.is-in) .asoc-receipt { clip-path: inset(0 0 100% 0); }
.asoc-receipt__head { margin: 0 0 var(--asoc-space-s); text-align: left; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: var(--asoc-text-label); }
.asoc-receipt__head span { display: block; font-weight: 400; letter-spacing: 0.08em; color: var(--asoc-on-light-muted); text-transform: none; font-size: 1.3rem; }
.asoc-receipt__lines { list-style: none; margin: 0; padding: var(--asoc-space-xs) 0; border-block: 1.5px dashed var(--asoc-line); }
.asoc-receipt__lines > li { display: flex; flex-direction: row; gap: 0.8rem; padding-block: 0.45rem; align-items: baseline; }
.asoc-receipt__lines > li > span:first-child { flex: 0 1 auto; }
.asoc-receipt__lines > li > i { flex: 1 1 auto; min-width: 1rem; border-bottom: 1.5px dotted var(--asoc-line); translate: 0 -0.35rem; }
.asoc-receipt__lines > li > span:last-child { flex: none; color: var(--asoc-on-light-muted); text-align: right; }
.asoc-receipt__total {
display: flex; flex-direction: row; justify-content: space-between; gap: var(--asoc-space-s); align-items: baseline;
margin: var(--asoc-space-s) 0 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}
/* align-self: stretch is load-bearing. The receipt is a Bricks block, a column flex box
with align-items: flex-start, so without it this row shrank to its own text (231px of
428 at 1440) and the "right-aligned" total sat mid-card (Sam, 2026-10-10, item 6). */
.asoc-receipt__total { align-self: stretch; }
.asoc-receipt__total span:last-child { text-align: right; text-transform: none; letter-spacing: 0; font-weight: 600; min-width: 0; }
.asoc-receipt__foot { margin: var(--asoc-space-m) 0 0; color: var(--asoc-on-light-muted); font-size: 1.2rem; letter-spacing: 0.1em; text-transform: uppercase; }
/* ── THE STORY (About): three chapters beside the receipt ─────────────────── */
.asoc-story { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); column-gap: var(--asoc-space-2xl); align-items: start; }
.asoc-story__receipt { position: sticky; top: 8vh; }
/* HER NOTE BESIDE THE RECEIPT (Sam, 2026-10-10, item 6). Out of flow ([data-note]), so the
page lays out identically without it. From 1025 it sits in the right column's empty top,
above the receipt and beside the heading, and travels with the receipt while it sticks:
that column holds nothing else, so the note can never land on text. 801-1024, where the
story stacks, it sits to the receipt's right. From 800 down there is no room, so no note. */
.asoc-story__hand { --pen: var(--asoc-pen); rotate: -1.5deg; left: 0; right: 0; bottom: calc(100% + var(--asoc-space-s)); }
.asoc-story__hand .asoc-hand { --hand-size: 22px; --hand-spacing: 2; } /* 2: "accounts", not "accants" */
.asoc-chapters { list-style: none; margin: 0; padding: 0; counter-reset: ch; }
.asoc-chapters > li {
counter-increment: ch; display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); column-gap: var(--asoc-space-m);
padding-block: var(--asoc-space-l); border-top: 1px solid var(--asoc-line);
}
.asoc-chapters > li:first-child { border-top: 0; padding-top: 0; }
.asoc-chapters > li::before {
content: counter(ch); font-family: var(--asoc-font-display); font-weight: 600; font-size: 5.6rem; line-height: 0.9;
letter-spacing: -0.04em; color: var(--asoc-figure, var(--asoc-ink-accent));
}
.asoc-chapters > li > * { grid-column: 2; }
.asoc-chapters > li::before { grid-row: 1 / span 2; }
.asoc-chapters h3 { font-size: var(--asoc-text-h3); }
.asoc-chapters p { color: var(--asoc-ink-muted); margin: 0; }
@media (max-width: 1024px) {
.asoc-story { grid-template-columns: minmax(0, 1fr); row-gap: var(--asoc-space-xl); }
/* `top: auto` (2026-10-12): the sticky rule's `top: 8vh` survived into this relative
position and pushed the stacked receipt 8% of the screen height down, past its section
into the dark band below (68px at 393x852; layout gap 152px above it). */
.asoc-story__receipt { position: relative; top: auto; max-width: 46rem; }
/* As wide as the space beside the receipt allows, up to 34rem: 100cqw is the story's
width (it is the container), 100% is the receipt's. A fixed 26rem left "left." on a
line of its own at 1024 with ~470px free. */
.asoc-story { container-type: inline-size; }
.asoc-story__hand { left: calc(100% + var(--asoc-space-l)); right: auto; bottom: auto; top: var(--asoc-space-l);
width: min(34rem, 100cqw - 100% - var(--asoc-space-l)); }
}
@media (max-width: 700px) {
.asoc-chapters > li { grid-template-columns: minmax(0, 1fr); }
.asoc-chapters > li > * { grid-column: 1; }
.asoc-chapters > li::before { grid-row: auto; }
.asoc-chapters > li::before { font-size: 4rem; margin-bottom: var(--asoc-space-xs); }
}
/* ── VALUES (About): what I do, what I don't ────────────────────────────────── */
.asoc-values { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--asoc-space-2xl); }
/* No rule under the column heading (Sam, 2026-10-10, concept feedback item 3): the list's
own hairlines already separate the rows, and the heading reads as a heading without it. */
.asoc-values__col > h3 { padding-bottom: var(--asoc-space-xs); margin-bottom: 0; }
.asoc-values__col > ul > li { font-size: var(--asoc-text-lead); padding-block: 1.1rem; }
/* THE LISTS ARE PLAIN NOW (Sam, 2026-10-13): no tick or strike on each item. The tick follows
"What I do" and the strike runs through "What I don't", so each mark is made once, on the
heading, and the rows between are soft dotted rules rather than hairlines. The dots mix the
muted ink, so they follow the ground. */
.asoc-values__list { list-style: none; margin: 0; padding: 0; display: block; }
.asoc-values__list > li {
line-height: 1.45;
/* Round dots 6px apart, drawn rather than `border: dotted`: Chrome's 1px dotted border
packs square dots edge to edge and reads as a solid hairline at 1440 (2026-10-13). */
background: radial-gradient(circle, color-mix(in srgb, var(--asoc-ink-muted) 55%, transparent) 0.9px, transparent 1.3px)
0 0 / 6px 3px repeat-x;
}
.asoc-values__list > li:first-child { background: none; }
.asoc-values__do::after {
content: ""; display: inline-block; vertical-align: -0.04em; width: 0.78em; height: 0.78em; margin-inline-start: 0.3em;
background-color: var(--tick);
-webkit-mask: var(--asoc-tick-svg) no-repeat center / contain; mask: var(--asoc-tick-svg) no-repeat center / contain;
clip-path: inset(0 0 0 0); transition: clip-path 0.45s var(--asoc-ease) 0.2s;
}
.asoc-values__dont > span {
background: var(--asoc-strike-img) no-repeat 0 55% / 100% 0.62em;
-webkit-box-decoration-break: clone; box-decoration-break: clone;
transition: background-size 0.85s var(--asoc-ease) 0.3s;
}
html.asoc-draw-js [data-draw]:not(.is-in) .asoc-values__do::after { clip-path: inset(0 100% 0 0); }
html.asoc-draw-js [data-draw]:not(.is-in) .asoc-values__dont > span { background-size: 0% 0.62em; }
@media (max-width: 800px) { .asoc-values { grid-template-columns: minmax(0, 1fr); row-gap: var(--asoc-space-xl); } }
/* ── THE PULL QUOTE (About, Services) ─────────────────────────────────────── */
/* TYPE, MEASURE AND CREDIT ARE THE HOME QUOTES' (shared rules at .asoc-quotes__text, 2026-10-13).
Until then this ran larger (56px), at 44ch, balanced, with the name in plain ink. The mark is
its own: lilac through --asoc-figure, the paper scope's display-accent token. */
.asoc-pullquote__text::before, .asoc-quotes__text::before {
content: "\201C"; display: block; font-size: 1.6em; line-height: 0.6; height: 0.42em;
color: var(--asoc-figure, var(--asoc-ink-accent));
}
/* THE CLIENT'S LOGO BESIDE THE CREDIT (Sam, 2026-10-13, option A of three mockups). Set by
data-logo on the credit; a credit without one is unchanged. Each logo is a single-colour mask
in src/logos/, filled with lilac, so every client's mark reads as one family on
any ground. Sized by height; a wide wordmark simply takes more room on the left. The mark is
drawn by CSS, so screen readers skip it: the business name is in the text beside it.
Grid, not flex: the logo and its rule span both lines of the credit. */
.asoc-pullquote__attr[data-logo] {
display: grid; grid-template-columns: auto 1px minmax(0, 1fr); column-gap: 1.4rem; align-items: center;
}
.asoc-pullquote__attr[data-logo]::before {
content: ""; grid-column: 1; grid-row: 1 / 3; height: 5.2rem; aspect-ratio: var(--logo-ratio, 1);
/* THE TEXT SETS THE CREDIT'S HEIGHT, NEVER THE LOGO: -0.8rem a side takes it to 36px of layout
while it still draws 52px, centred on the two lines. At 393 the lines are ~51px, so a 52px
logo grew the credit and verify-grid read the 0.69px it added as space inside the section's
padding (the walk cannot see a pseudo-element). A credit is now the same height with or
without a logo. */
margin-block: -0.8rem;
background-color: var(--asoc-ink-accent-dark);
-webkit-mask: var(--logo) no-repeat center / contain; mask: var(--logo) no-repeat center / contain;
}
.asoc-pullquote__attr[data-logo]::after { content: ""; grid-column: 2; grid-row: 1 / 3; align-self: stretch; background: var(--asoc-line); }
.asoc-pullquote__attr[data-logo] > strong, .asoc-pullquote__attr[data-logo] > span { grid-column: 3; }
.asoc-pullquote__attr[data-logo="okay-va"] { --logo: url("logos/okay-va.png"); --logo-ratio: 781 / 926; }
/* CENTRED AS A BLOCK, LEFT-ALIGNED INSIDE (Sam, 2026-10-13: "stay left aligned but be centered").
CSS cannot shrink a wrapped paragraph to its longest line (its box stays the column's width),
so asoc-concepts.js measures that line into --pq-w and both the quote and its credit take it,
centred. Without the script the quote sits at the column's left edge, as before. */
.asoc-pullquote__text.is-measured, .asoc-pullquote__text.is-measured + .asoc-pullquote__attr {
width: var(--pq-w); max-width: 100%; margin-inline: auto;
}
/* ── PILLARS (Services) ───────────────────────────────────────────────────── */
.asoc-pillar {
background: var(--asoc-sheet); border-radius: 4px; box-shadow: var(--asoc-paper-shadow), 0 0 0 1px var(--asoc-sheet-edge);
padding: clamp(2.4rem, 1.6rem + 1.6vw, 4rem);
}
.asoc-pillar__num {
font-family: var(--asoc-font-display); font-weight: 600; letter-spacing: -0.04em; line-height: 0.9;
font-size: clamp(5rem, 3rem + 3vw, 8rem); color: var(--asoc-figure, var(--asoc-ink-accent)); margin: 0 0 var(--asoc-space-s);
}
.asoc-pillar > h3 { margin-bottom: var(--asoc-space-xs); }
.asoc-pillar > p:not(.asoc-pillar__num) { color: var(--asoc-ink-muted); margin-bottom: var(--asoc-space-m); }
.asoc-pillar > .asoc-ticks { border-top: 2px solid var(--asoc-ink); padding-top: 0.4rem; }
/* ── THE PICKER AND THE PACKAGES (Services) ─────────────────────────────────
"What would you hand over?" The tasks are an ordinary list in the page; the
script turns each into a toggle and works out the smallest package that covers
everything ticked, from the package each task first appears in (her own matrix).
The answer is said in words in a live region, and the card is marked as well. */
.asoc-packages { display: flex; flex-direction: column; gap: var(--asoc-space-xl); }
.asoc-picker {
display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); column-gap: var(--asoc-space-2xl);
background: var(--asoc-surface-raised); border-radius: var(--asoc-radius-lg);
padding: clamp(2.4rem, 1.4rem + 2.4vw, 5.6rem);
}
.asoc-picker__intro > :last-child { margin-bottom: 0; }
.asoc-picker__groups > .asoc-picker__group:first-child { margin-top: 0; }
.asoc-picker > h3 { margin-bottom: var(--asoc-space-2xs); }
.asoc-picker__group { font-family: var(--asoc-font-mono); font-size: var(--asoc-text-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--asoc-kicker); margin: var(--asoc-space-s) 0 var(--asoc-space-2xs); }
.asoc-picker__tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 1.2rem 0.6rem; } /* rows 12px: 6px read cramped (Sam, 2026-10-09) */
.asoc-picker__tasks > li { margin: 0; }
.asoc-picker__tasks > li:not(:has(button)) {
padding: 0.6rem 1.2rem; border-radius: var(--asoc-radius-pill); box-shadow: inset 0 0 0 1px var(--asoc-line);
font-size: var(--asoc-text-small);
}
.asoc-chip {
appearance: none; border: 0; cursor: pointer; min-height: 44px;
display: inline-flex; align-items: center; gap: 0.6rem;
padding: 0.6rem 1.4rem; border-radius: var(--asoc-radius-pill);
font: 500 var(--asoc-text-small) / 1.2 var(--asoc-font-body); color: var(--asoc-ink);
background: transparent; box-shadow: inset 0 0 0 1.5px var(--asoc-line);
transition: background var(--asoc-dur) var(--asoc-ease), box-shadow var(--asoc-dur) var(--asoc-ease), color var(--asoc-dur) var(--asoc-ease);
}
.asoc-chip:hover { box-shadow: inset 0 0 0 1.5px var(--asoc-accent); }
.asoc-chip::before {
/* The empty box takes the chip's own faint border, not the label's colour: in full ink it
competed with the words beside it (Sam, 2026-10-09). */
content: ""; width: 1.4rem; height: 1.4rem; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--asoc-line); flex: none;
background: transparent var(--asoc-tick-svg) no-repeat center / 0 0;
}
.asoc-chip[aria-pressed="true"] { background: var(--asoc-accent); color: var(--asoc-accent-ink); box-shadow: none; }
.asoc-chip[aria-pressed="true"]::before { box-shadow: none; background-color: var(--asoc-accent-ink);
-webkit-mask: var(--asoc-tick-svg) no-repeat center / contain; mask: var(--asoc-tick-svg) no-repeat center / contain; }
.asoc-picker__result {
margin: var(--asoc-space-m) 0 0; padding-top: var(--asoc-space-s); border-top: 1px solid var(--asoc-line);
font-size: var(--asoc-text-small); color: var(--asoc-ink-muted); min-height: 5.4em;
}
.asoc-picker__result strong { display: block; font-family: var(--asoc-font-display); font-size: var(--asoc-text-h3); color: var(--asoc-ink); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.2rem; }
.asoc-picker__note { font-size: var(--asoc-text-small); color: var(--asoc-ink-muted); margin: var(--asoc-space-xs) 0 0; }
.asoc-picker__tier { color: var(--asoc-kicker); } /* the tier eyebrows' own token, so they cannot drift apart */
/* The picker's question outranks its answer (Sam, 2026-10-09: it read smaller than the
package line). 44px at 1440 against the answer's 32px; 28px on a phone against 24. */
.asoc-picker__intro > h3 { font-size: clamp(2.8rem, 2rem + 1.6vw, 4.4rem); line-height: 1.08; }
/* The caveat in her hand, at the foot of the left column (from 1025 up; see the builder).
The column stretches to the chips' height, so its foot is empty space by construction. */
.asoc-picker { position: relative; align-items: stretch; } /* Bricks' flex-start would stop the column reaching the foot */
.asoc-picker__intro { position: relative; }
.asoc-picker__intro > .asoc-picker__note { display: none; }
.asoc-picker__hand { left: 0; right: 0; bottom: 0; --pen: var(--asoc-ink-accent); }
.asoc-picker__hand .asoc-hand { --hand-size: 21px; max-width: 34rem; }
/* Clear all: a small hand-drawn bin beside the answer, shown once anything is ticked. Its
box sits on the answer's first line; the answer gives up the bin's width while it shows. */
.asoc-picker__answer { position: relative; }
.asoc-picker__answer:has(.asoc-picker__clear:not([hidden])) .asoc-picker__result { padding-right: 5.2rem; }
.asoc-picker__clear {
position: absolute; top: calc(var(--asoc-space-m) + var(--asoc-space-s) - 0.6rem); right: -0.8rem;
width: 44px; height: 44px; display: grid; place-items: center;
appearance: none; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
color: var(--asoc-ink-muted); transition: color var(--asoc-dur) var(--asoc-ease), background var(--asoc-dur) var(--asoc-ease);
}
.asoc-picker__clear[hidden] { display: none; }
.asoc-picker__clear:hover { color: var(--asoc-ink); background: var(--asoc-line); }
.asoc-picker__clear svg { width: 2.4rem; height: 2.4rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.asoc-tiers { align-items: stretch; }
/* TOP-ALIGNED, EACH CARD ITS OWN HEIGHT (Sam, 2026-10-13). Names and prices sit on one line
for comparing across; each card ends where its list ends, so the row still lengthens towards
Growth. Bottom-aligned was tried the same morning: it put $240 about 260px below $980. Side by
side only; stacked, the cards follow each other. */
@media (min-width: 801px) { .asoc-tiers { align-items: start; } }
.asoc-tier {
position: relative; display: flex; flex-direction: column;
background: var(--asoc-surface-raised); border-radius: var(--asoc-radius-lg);
padding: clamp(2.2rem, 1.4rem + 1.4vw, 3.6rem);
box-shadow: inset 0 0 0 1.5px transparent;
transition: box-shadow var(--asoc-dur) var(--asoc-ease), transform var(--asoc-dur) var(--asoc-ease), opacity var(--asoc-dur) var(--asoc-ease);
}
.asoc-tier__name { font-family: var(--asoc-font-mono); font-size: var(--asoc-text-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--asoc-kicker); margin: 0 0 var(--asoc-space-xs); }
.asoc-tier__price {
font-family: var(--asoc-font-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1;
font-size: clamp(4rem, 3rem + 2vw, 5.6rem); color: var(--asoc-ink); margin: 0 0 var(--asoc-space-s);
font-variant-numeric: tabular-nums;
}
.asoc-tier__price span { font-family: var(--asoc-font-body); font-size: var(--asoc-text-small); font-weight: 500; letter-spacing: 0; color: var(--asoc-ink-muted); margin-inline-start: 0.4rem; }
.asoc-tier__for { color: var(--asoc-ink-muted); font-size: var(--asoc-text-small); margin-bottom: var(--asoc-space-s); }
.asoc-tier__plus { font-family: var(--asoc-font-mono); font-size: var(--asoc-text-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--asoc-ink-muted); margin: 0 0 0.2rem; }
.asoc-tier > .asoc-ticks { font-size: var(--asoc-text-small); }
.asoc-tier > .asoc-ticks > li::before { width: 1.6rem; height: 1.6rem; top: 0.8rem; }
.asoc-tier__fit {
position: absolute; top: calc(-1 * var(--asoc-space-xs)); right: var(--asoc-space-m);
background: var(--asoc-accent); color: var(--asoc-accent-ink); border-radius: var(--asoc-radius-pill);
font-family: var(--asoc-font-mono); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
padding: 0.5rem 1.2rem;
}
.asoc-tiers[data-fit] .asoc-tier { opacity: 0.55; }
.asoc-tiers[data-fit] .asoc-tier.is-fit { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--asoc-accent); transform: translateY(-0.6rem); }
@media (max-width: 1024px) {
.asoc-picker { grid-template-columns: minmax(0, 1fr); row-gap: var(--asoc-space-m); }
/* STACKED, THE ANSWER FOLLOWS THE CHOICES. Side by side the answer sits beside the
chips; stacked it sat ABOVE them, so on a phone a tap changed a line that had
already scrolled off the top. The intro's box is dissolved so its parts can be
ordered around the chips without changing the element tree. */
.asoc-picker__intro { display: contents; }
.asoc-picker__groups { order: 1; }
.asoc-picker__answer, .asoc-picker__note { order: 2; }
.asoc-picker__clear { top: calc(var(--asoc-space-s) - 0.6rem); } /* the stacked answer has no top margin */
.asoc-picker__intro > .asoc-picker__note { display: block; }
.asoc-picker__hand { display: none; }
.asoc-picker__result { margin-top: 0; }
}
/* The personalised package: her fourth option, deliberately unpriced. */
.asoc-custom {
position: relative; margin-top: var(--asoc-space-l);
border-radius: var(--asoc-radius-lg); box-shadow: inset 0 0 0 1.5px var(--asoc-line);
padding: clamp(2.4rem, 1.4rem + 2vw, 4.8rem);
}
.asoc-custom > p { color: var(--asoc-ink-muted); max-width: 50ch; }
.asoc-custom > .asoc-btn { margin-top: var(--asoc-space-m); } /* the site's button gap (verify-grid BUTTON GAP); was space-s, 16px, until 2026-10-12 */
/* ── HOW WE WORK (Services): three steps along a drawn line ─────────────── */
.asoc-steps { list-style: none; margin: 0; padding: 0; position: relative; counter-reset: st; }
.asoc-steps > li { counter-increment: st; position: relative; padding-top: var(--asoc-space-xl); }
.asoc-steps > li::before {
content: counter(st); position: absolute; top: 0; left: 0;
width: 4.8rem; height: 4.8rem; border-radius: 50%; display: grid; place-items: center;
font-family: var(--asoc-font-display); font-weight: 600; font-size: 2.2rem; color: var(--asoc-ink);
background: var(--asoc-paper); box-shadow: inset 0 0 0 2px var(--asoc-ink);
translate: 0 -1.2rem;
}
.asoc-steps > li > p { color: var(--asoc-ink-muted); }
.asoc-steps::before {
content: ""; position: absolute; left: 2.4rem; right: 0; top: 1.2rem; height: 0;
border-top: 2px dashed var(--asoc-line);
}
@media (max-width: 800px) {
.asoc-steps::before { left: 2.4rem; right: auto; top: 0; bottom: 0; height: auto; border-top: 0; border-left: 2px dashed var(--asoc-line); }
.asoc-steps > li { padding: 0 0 var(--asoc-space-l) 7.2rem; }
.asoc-steps > li::before { translate: 0 0; }
}
/* ── THE WORD WALL (Services): software and industries ──────────────────── */
.asoc-wall { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); column-gap: var(--asoc-space-2xl); align-items: start; }
.asoc-wall__label { font-family: var(--asoc-font-mono); font-size: var(--asoc-text-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--asoc-kicker); margin: 0 0 var(--asoc-space-xs); }
.asoc-wall__words { list-style: none; margin: 0 0 var(--asoc-space-l); padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 0.32em; row-gap: 0.1em; }
.asoc-wall__words:last-child { margin-bottom: 0; }
.asoc-wall__words > li {
font-family: var(--asoc-font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
font-size: clamp(2.4rem, 1.8rem + 1.4vw, 4rem); color: var(--asoc-ink);
}
.asoc-wall__words > li:not(:last-child)::after { content: "/"; margin-inline-start: 0.32em; color: var(--asoc-ink-faint); font-weight: 400; }
.asoc-wall__words--soft > li { color: var(--asoc-ink-muted); font-size: clamp(2rem, 1.6rem + 0.9vw, 2.8rem); font-weight: 500; }
@media (max-width: 1024px) { .asoc-wall { grid-template-columns: minmax(0, 1fr); row-gap: var(--asoc-space-l); } }
/* ── SERVICE JUMP CHIPS (Services hero) ─────────────────────────────────── */
/* The route to the three pillars (header-brief §6; back in the hero, Sam, 2026-10-14): on a
phone the menu links to Services, not into it. The arrow says the chips go down this page. */
.asoc-jump { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--asoc-space-xs);
margin-top: var(--asoc-space-m); }
.asoc-jump > a {
display: inline-flex; align-items: center; min-height: 44px; padding: 0.6rem 1.6rem; border-radius: var(--asoc-radius-pill);
box-shadow: inset 0 0 0 1.5px var(--asoc-line); color: var(--asoc-ink); text-decoration: none; font-size: var(--asoc-text-small); font-weight: 500;
transition: box-shadow var(--asoc-dur) var(--asoc-ease);
}
.asoc-jump > a:hover { box-shadow: inset 0 0 0 1.5px var(--asoc-accent); }
.asoc-jump > a::after { content: "\2193"; margin-inline-start: 0.6rem; color: var(--asoc-ink-accent); }
/* ── HER HANDWRITING, AND THE STICKY NOTE IT IS WRITTEN ON ──────────────────
Lifted from the tidy-desk prototype, which Sam reviewed (design-decisions §13),
with its colours moved into tokens. Every note is out of flow ([data-note]) and
is only shown where whitespace already exists — .claude/rules/handwritten-notes.md,
checked by scripts/verify-notes.js. Vara draws the words; the real words stay in
the DOM for screen readers and show as plain italic if the script never runs. */
[data-note] { position: absolute; z-index: var(--asoc-z-paper); pointer-events: none; }
.asoc-hand { color: var(--pen, var(--asoc-pen)); position: relative; }
.asoc-hand__text { font-style: italic; font-size: var(--hand-size, 18px); }
html.asoc-hand-js .asoc-hand__text {
position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.asoc-hand__ink svg { display: block; overflow: visible; }
.asoc-sticky { isolation: isolate; width: 19rem; rotate: -2.6deg; --note: var(--asoc-note-lilac); --pen: var(--asoc-pen); }
.asoc-sticky--mint { rotate: 2deg; --note: var(--asoc-note-mint); --pen: var(--asoc-pen-mint); }
.asoc-sticky::before {
content: ""; position: absolute; inset: 0; z-index: var(--asoc-z-ground); border-radius: 1px;
background: var(--note); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}
.asoc-sticky::after {
content: ""; position: absolute; z-index: var(--asoc-z-surface); left: 8%; right: 4%; bottom: 6px; height: 34%;
box-shadow: 0 14px 16px -6px rgba(0, 0, 0, 0.38); border-radius: 50%;
transform: perspective(300px) rotateX(18deg) rotate(1.4deg);
}
.asoc-sticky .asoc-hand { --hand-size: 20px; position: relative; z-index: var(--asoc-z-section); padding: 2rem 1.8rem 3.4rem; min-height: 17rem; }
.asoc-sticky__brand {
position: absolute; z-index: var(--asoc-z-section); left: 1.8rem; bottom: 1.3rem;
font-family: var(--asoc-font-mono); font-size: 1rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--asoc-on-light-muted); opacity: 0.6;
}
/* Where each one lives. Services: in the right-hand side of the personalised-package
card, which its 50ch paragraph leaves empty from 801 up (verify-notes.js: no cover). */
.asoc-custom > .asoc-sticky { right: clamp(2.4rem, 6vw, 9.6rem); top: 50%; translate: 0 -50%; }
/* No room, no note (handwritten-notes.md rule 3), judged on the CARD's own width: at
801 the card is 730px and the note landed on the paragraph (verify-notes.js COVER). */
.asoc-custom { container-type: inline-size; }
@container (max-width: 820px) { .asoc-custom > .asoc-sticky { display: none; } }
/* ── DARK, AS A SCOPE ───────────────────────────────────────────────────────
The mirror of `.asoc-ground-paper`. A section that must be the dark desk whatever the
colour ground is doing paints it and pins the dark inks. Needed on /concept-home/
because on desktop the ground does not turn back after services (open item, found
2026-10-09, live home included): the pinned timeline's onUpdate re-adds asoc-fade-on
~28px after the services trigger removes it. Painting the section makes the concept
independent of that fix rather than waiting on it. */
.asoc-ground-dark {
background: var(--asoc-surface);
--asoc-ink: var(--asoc-ink-dark);
--asoc-ink-muted: #BBB9BC;
--asoc-ink-faint: var(--asoc-ink-faint-dark);
--asoc-kicker: var(--asoc-kicker-dark);
--asoc-ink-accent: var(--asoc-ink-accent-dark);
--asoc-ink-accent-2: var(--asoc-accent-2);
--asoc-line: rgba(190, 150, 200, 0.22);
--asoc-surface-raised: var(--asoc-surface-raised-dark);
--tick: var(--asoc-accent-2);
color: var(--asoc-ink);
}
.asoc-faq__a a { color: var(--asoc-ink); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
/* THE NEW HEROES ANSWER TO HEIGHT BELOW 801 TOO. The live home only does so from 801 up,
because below that its hero is a heading and two buttons (the intro is relayed below
the desk). These heroes keep their intro on a phone, so an 800x600 window measured the
button 8px below the fold (verify-hero-fit.js, 2026-10-09). Portrait phones are tall
enough that this changes nothing for them above ~667px of height. */
@media (max-width: 800px) {
.asoc-hero--xl, .asoc-hero--split { padding-top: min(clamp(6rem, 4rem + 10vw, 12rem), max(3.2rem, 24vh - 10.8rem)); }
}
/* ── HOW WE WORK: THE FOURTH STEP (Sam, 2026-10-09) ──────────────────────────
A "?" on the end of the line. Opening it narrows steps 1-3 and a fourth column takes
the room: "What you get back", over a loose stack of labels. CLOSED IS TODAY'S LAYOUT
EXACTLY: the list runs one gap wider than its column (negative margin), so the three
columns keep their widths while the fourth track is 0; the line stops at the column edge
and the "?" sits on its end. Open, all of it relaxes on one ease with no overshoot.
The fourth step's contents are out of flow, so a zero-width column has no min-content
to hold it open, and the row never grows for the stack.
Click or tap only, never hover: the circle slides left as the columns narrow, so on
hover it would leave the pointer, close, return and flicker.
With no script this is an ordinary fourth step, shown open. */
.asoc-tag {
display: inline-block; white-space: nowrap; padding: .5rem 1.1rem; border-radius: 6px;
font-family: var(--asoc-font-display); font-weight: 600; font-size: 1.6rem; letter-spacing: -.01em; line-height: 1.4;
color: var(--asoc-accent-ink); background: var(--asoc-accent);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 8px 14px -9px rgba(36, 27, 39, 0.45);
}
.asoc-tag:nth-child(even) { background: var(--asoc-accent-2); }
.asoc-steps__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
/* gap .2rem from .4rem (2026-10-13): starting level with the copy put the stack 10px lower,
9px past the longest step's last line at 1440; the tighter gap gives back 8 of them. */
/* Smaller than the standard label, so five of them end about where the squeezed steps'
text ends (Sam, 2026-10-09: "approximately the height ... and no more"). */
.asoc-steps__tags > .asoc-tag { font-size: 1.5rem; padding: .35rem .9rem; }
.asoc-steps__tags > li { border: 0; }
.asoc-steps__tags > li:nth-child(1) { rotate: -1.6deg; }
.asoc-steps__tags > li:nth-child(2) { rotate: 1.2deg; translate: .6rem 0; }
.asoc-steps__tags > li:nth-child(3) { rotate: .8deg; translate: .2rem 0; }
.asoc-steps__tags > li:nth-child(4) { rotate: -1.2deg; translate: .8rem 0; }
.asoc-steps__tags > li:nth-child(5) { rotate: 1.4deg; }
.asoc-steps__tags > li:nth-child(6) { rotate: -.8deg; translate: .5rem 0; }
/* The labels start level with the other steps' descriptions (Sam, 2026-10-13): the same
heading-to-copy gap as steps 1-3, which take the base h3 margin. It was .6rem, which
put the first label 10px above the copy beside it at 1440. */
.asoc-steps__reveal > h3 { margin-bottom: var(--asoc-space-s); }
.asoc-steps__q {
position: absolute; top: 0; left: 0; z-index: var(--asoc-z-section);
width: 4.8rem; height: 4.8rem; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
display: grid; place-items: center; translate: 0 -1.2rem;
font-family: var(--asoc-font-display); font-weight: 600; font-size: 2.2rem; color: var(--asoc-ink);
background: var(--asoc-paper); box-shadow: inset 0 0 0 2px var(--asoc-ink);
transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1), background var(--asoc-dur) var(--asoc-ease),
color var(--asoc-dur) var(--asoc-ease), box-shadow var(--asoc-dur) var(--asoc-ease);
}
.asoc-steps__q:hover { box-shadow: inset 0 0 0 2px var(--asoc-accent); }
html.asoc-steps-js .asoc-steps__more::before { display: none; }
.asoc-steps.is-open .asoc-steps__q { background: var(--asoc-accent); color: var(--asoc-accent-ink); box-shadow: none; }
html.asoc-steps-js .asoc-steps__more { min-width: 0; }
/* THE PACING (Sam, 2026-10-09: the labels appeared "so suddenly" and the squeeze ran "so
rapidly"; don't rely on fade for the pacing). The columns glide for 1s on an ease-in-out;
the heading slides in as they settle; then each label is set down on its own, 120ms apart,
from a little above its place, a touch larger and tilted further, settling to its resting
tilt with a small overshoot. Opacity only switches each one on in the first 0.12s.
Closing is quicker and plain: the labels lift off together, then the columns glide back. */
html.asoc-steps-js .asoc-steps__reveal > h3 {
visibility: hidden; opacity: 0; transform: translateX(2.4rem);
transition: opacity .2s ease, transform .3s ease, visibility 0s linear .3s;
}
html.asoc-steps-js .asoc-steps.is-open .asoc-steps__reveal > h3 {
visibility: visible; opacity: 1; transform: none;
/* .78s, when the 1s ease-in-out has the column at ~95% width: started earlier, the
heading appeared on two lines in the narrow column and then jumped to one. */
transition: opacity .3s ease .78s, transform .6s cubic-bezier(0.22, 1, 0.36, 1) .78s, visibility 0s;
}
html.asoc-steps-js .asoc-steps__reveal > .asoc-steps__tags { visibility: hidden; transition: visibility 0s linear .3s; }
html.asoc-steps-js .asoc-steps.is-open .asoc-steps__reveal > .asoc-steps__tags { visibility: visible; transition: visibility 0s; }
html.asoc-steps-js .asoc-steps__tags > li {
opacity: 0; transform: translateY(-1.8rem) scale(1.08) rotate(7deg);
transition: opacity .15s ease, transform .25s ease;
}
html.asoc-steps-js .asoc-steps__tags > li:nth-child(even) { transform: translateY(-1.8rem) scale(1.08) rotate(-7deg); }
html.asoc-steps-js .asoc-steps.is-open .asoc-steps__tags > li {
opacity: 1; transform: none;
transition: opacity .12s linear calc(.95s + var(--i, 0) * 120ms),
transform .55s cubic-bezier(0.34, 1.35, 0.64, 1) calc(.95s + var(--i, 0) * 120ms);
}
@media (min-width: 801px) {
html.asoc-steps-js .asoc-steps {
/* WIDTH, not a negative margin: Bricks pins a block to width:100%, so a negative
margin did not widen it and the columns measured 431px against today's 439. */
grid-template-columns: 1fr 1fr 1fr 0fr; width: calc(100% + var(--asoc-space-m)); max-width: none;
transition: grid-template-columns 1s cubic-bezier(0.65, 0, 0.35, 1), width 1s cubic-bezier(0.65, 0, 0.35, 1);
}
html.asoc-steps-js .asoc-steps.is-open { grid-template-columns: 1fr 1fr 1fr .86fr; width: 100%; }
html.asoc-steps-js .asoc-steps::before { right: var(--asoc-space-m); transition: right 1s cubic-bezier(0.65, 0, 0.35, 1); }
html.asoc-steps-js .asoc-steps.is-open::before { right: 0; }
/* Out of flow, so a zero-width column has no min-content and the row never grows for it.
As wide as its column, so the heading wraps there when the column is narrow. */
html.asoc-steps-js .asoc-steps__reveal { position: absolute; left: 0; right: 0; top: var(--asoc-space-xl); }
/* CLOSED, CLIPPED (2026-10-12). In the 0-wide column the hidden, unwrapping labels spilled
past the window's right edge and made the document 1,583px wide at 1440 (section-audit:
"the page SCROLLS sideways"). They are invisible then, so clipping them changes nothing
on screen; open, the column is wide and the rule does not apply. */
/* The clip arrives 0.3s AFTER closing, when the labels have faded and gone hidden: while
they fade they tilt up to 4.9px past the box's left edge, and an immediate clip shaved
them (measured 2026-10-12; a 1rem clip margin instead let the spill back at 1025-1100).
Opening, it goes at once. Where discrete transitions are unsupported it clips at once. */
html.asoc-steps-js .asoc-steps:not(.is-open) .asoc-steps__reveal {
overflow: clip; transition: overflow 0s linear .3s; transition-behavior: allow-discrete;
}
html.asoc-steps-js .asoc-steps__q { transform: translateX(calc(-100% - var(--asoc-space-m))); }
html.asoc-steps-js .asoc-steps.is-open .asoc-steps__q { transform: none; }
}
/* 801-1024: NO ROOM, NO FOURTH STEP. Squeezed, the columns measured 176px at 801, the
section grew 113px (nearly all its bottom padding) and the heading ran off the edge.
Phones keep their stacked version below. */
@media (min-width: 801px) and (max-width: 1024px) {
/* The closed layout is already today's, so hiding the step is all it takes. A step
opened on a wider window is closed by asoc-concepts.js when the window narrows here. */
html.asoc-steps-js .asoc-steps__more { display: none; }
}
@media (max-width: 800px) {
.asoc-steps__q { translate: 0 0; }
html.asoc-steps-js .asoc-steps:not(.is-open) .asoc-steps__more { padding-bottom: 0; min-height: 4.8rem; }
html.asoc-steps-js .asoc-steps:not(.is-open) .asoc-steps__more > .asoc-steps__reveal { display: none; }
html.asoc-steps-js .asoc-steps:not(.is-open) .asoc-steps__more > .asoc-steps__q { display: grid; }
}
/* ── THE PICKER'S ANSWER, FLOATING, ON A STACKED PICKER (Sam, 2026-10-09) ─────
Stacked (1024 and down) the answer sits below fifteen chips, so a tap at the top
changes a line that is off the screen. This pill carries the same answer at the foot
of the screen, only while it is useful: something ticked, the picker on screen, and
neither the answer line nor the package cards already visible. A tap scrolls to the
marked card. Screen readers already hear the answer from the live region. */
.asoc-picker__bar {
position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 1.2rem); z-index: var(--asoc-z-nav);
translate: -50% 0; transform: translateY(160%); opacity: 0; pointer-events: none;
transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), opacity .25s ease;
}
.asoc-picker__bar.is-shown { transform: none; opacity: 1; pointer-events: auto; }
/* ABOVE the phone's nav bar, not on it (2026-10-11): both are fixed to the bottom at
800 and below, so the answer stacks over the nav. From 801 the nav is at the top. */
@media (max-width: 800px) { .asoc-picker__bar { bottom: var(--asoc-navbar-clear); } }
.asoc-picker__bar button {
/* 56px, from 48 (Sam, 2026-10-09: "slightly bigger"): an easier thumb target, still one line. */
appearance: none; border: 0; cursor: pointer; min-height: 56px; white-space: nowrap;
display: inline-flex; align-items: center; gap: 1.6rem; padding: .8rem .8rem .8rem 2.2rem; border-radius: var(--asoc-radius-pill);
font: 600 1.7rem / 1.2 var(--asoc-font-body); color: var(--asoc-ink-dark);
background: var(--asoc-surface-raised-dark);
box-shadow: inset 0 0 0 1px var(--asoc-line), 0 14px 28px -10px rgba(0, 0, 0, 0.7);
}
.asoc-picker__bar .asoc-picker__tier { color: var(--asoc-kicker-dark); } /* the dark run's mint, pinned: the pill is always dark */
.asoc-picker__bar-go {
display: inline-flex; align-items: center; gap: .5rem; padding: .9rem 1.5rem; border-radius: var(--asoc-radius-pill);
background: var(--asoc-accent); color: var(--asoc-accent-ink); font-size: 1.5rem;
}
.asoc-picker__bar-go::after {
content: ""; width: 1rem; height: 1rem; background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 1v7M1.8 5.2 5 8.4l3.2-3.2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 1v7M1.8 5.2 5 8.4l3.2-3.2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Desktop never shows it: asoc-concepts.js only sets .is-shown under max-width 1024px,
the width at which the picker stacks (no new breakpoint for a JS-gated element). */
/* ── THE CONVERSION COPY AT LEAD SIZE (concept pages) ──────────────────────────
Sam, 2026-10-10, concept feedback item 5: the description "reads too small beside the
heading". It was body size (18px) under an h1-size heading (76px), a 4:1 step that also
left the heading looking like a banner graphic on its own. Lead size (24px at the top
of its clamp) narrows that to about 3:1. A modifier rather than a change to
.asoc-conversion__copy because the live home's band shares that class; this is on the
three concept bands only. */
.asoc-conversion--lead .asoc-conversion__copy { font-size: var(--asoc-text-lead); line-height: 1.45; }
@media (max-width: 800px) { .asoc-story__hand { display: none; } }
/* A phrase that wraps as one unit: the line may break between phrases, never inside one.
Still wraps internally if a single phrase is wider than its line, because an
inline-block's width is capped at its container. First use: the About CTA heading. */
.asoc-phrase { display: inline-block; }
/* ── THE REVIEW SWITCH (Sam, 2026-10-13) ────────────────────────────────────
asoc-concepts.js adds one for each [data-ground-toggle] section: a small switch in the
bottom-right corner for comparing that section dark against paper. A review tool, so
it is quiet: the chrome's charcoal, small mono type, a 44px target. On phones it sits
above the bottom bar (48px, 12px off the bottom). */
.asoc-review-switch {
position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: var(--asoc-z-review);
display: inline-flex; align-items: center; gap: 0.8rem;
min-height: 44px; padding: 0 1.2rem 0 0.9rem; border: 0; border-radius: var(--asoc-radius-pill);
background: var(--asoc-pill-bg); color: var(--asoc-ink-dark); opacity: 0.82; cursor: pointer;
font-family: var(--asoc-font-mono); font-size: 1.2rem; letter-spacing: 0.04em; line-height: 1;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 18px -10px rgba(0, 0, 0, 0.5);
transition: opacity var(--asoc-dur) var(--asoc-ease);
}
.asoc-review-switch:hover, .asoc-review-switch:focus-visible { opacity: 1; }
.asoc-review-switch__track {
position: relative; width: 2.6rem; height: 1.5rem; border-radius: 1rem;
background: color-mix(in srgb, var(--asoc-ink-dark) 22%, transparent); transition: background var(--asoc-dur) var(--asoc-ease);
}
.asoc-review-switch__track::after {
content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.1rem; height: 1.1rem;
border-radius: 50%; background: var(--asoc-ink-dark); transition: translate var(--asoc-dur) var(--asoc-ease);
}
.asoc-review-switch[aria-checked="true"] .asoc-review-switch__track { background: var(--asoc-accent); }
.asoc-review-switch[aria-checked="true"] .asoc-review-switch__track::after { translate: 1.1rem 0; background: var(--asoc-accent-ink); }
@media (max-width: 800px) { .asoc-review-switch { bottom: calc(1.2rem + 48px + 1.2rem); } }
/* Her note follows the ground: lilac on the dark version. Vara writes the stroke as an
attribute when it draws, so the path takes currentColor here to follow a later switch. */
.asoc-ground-dark .asoc-story__hand { --pen: var(--asoc-accent); } /* her note on the dark story */
/* :not(transparent): Vara joins words with invisible strokes, and painting those drew
underscores between them (measured: 7 of 51 paths). */
[data-ground-toggle] .asoc-hand__ink path:not([stroke="transparent"]) { stroke: currentColor; }
/* ==========================================================================
09 · CONTACT, PRIVACY AND TERMS (2026-10-22)
--------------------------------------------------------------------------
Three pages Sam asked for in one brief: her privacy policy (her own wording, from her
current site), terms written for her, and a contact page whose Send button throws a
paper plane into her inbox. Built by build-privacy.py, build-terms.py (both through
asoc_build.legal()) and build-contact.py; the flight is src/asoc-contact.js, loaded
on the contact page only.
========================================================================== */
:root {
/* The flight's paper and ink: the footer plane's own values (asoc-footer.js SHEET, BACK,
INK), so the site's two paper planes are one object. */
--asoc-plane-sheet: #E9E3DA;
--asoc-plane-back: #D5CCC0;
--asoc-plane-ink: #2A2226;
--asoc-flight-shadow: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.3));
/* The inbox tray: a dark object on the dark desk, toned like the laptop and the footer's
desk (near-ground fills, a faint light edge), never a paper one (Sam, 2026-10-10). */
--asoc-tray-front: color-mix(in srgb, var(--asoc-surface-raised) 78%, var(--asoc-surface));
--asoc-tray-back: var(--asoc-surface-sunk);
--asoc-tray-edge: color-mix(in srgb, var(--asoc-ink-dark) 14%, transparent);
--asoc-tray-label: color-mix(in srgb, var(--asoc-ink-dark) 9%, var(--asoc-tray-front));
--asoc-field-bg: color-mix(in srgb, var(--asoc-surface-sunk) 70%, var(--asoc-surface-raised));
--asoc-z-flight: 25; /* the contact page's plane: over the page and the nav pill, under the review switch */
}
/* ── THE LEGAL PAGES: contents beside a reading column ───────────────────── */
.asoc-legal {
display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 68ch);
column-gap: var(--asoc-space-2xl); align-items: start;
}
.asoc-legal__nav { position: sticky; top: var(--asoc-space-xl); display: block; }
.asoc-legal__nav ul { list-style: none; margin: 0; padding: 0; display: block; }
.asoc-legal__nav li { margin: 0; }
.asoc-legal__nav a {
display: block; padding: 0.5rem 0; font-size: var(--asoc-text-small); line-height: 1.35;
color: var(--asoc-ink-muted); text-decoration: none; transition: color var(--asoc-dur) var(--asoc-ease);
}
.asoc-legal__nav a:hover, .asoc-legal__nav a:focus-visible { color: var(--asoc-ink); }
.asoc-legal__body { display: block; }
.asoc-legal__clause { display: block; }
.asoc-legal__clause + .asoc-legal__clause { margin-top: var(--asoc-space-xl); }
.asoc-legal__clause > h2 { font-size: var(--asoc-text-h3); margin-bottom: var(--asoc-space-s); }
@media (max-width: 1024px) {
.asoc-legal { grid-template-columns: minmax(0, 1fr); }
.asoc-legal__nav { position: static; margin-bottom: var(--asoc-space-xl); }
.asoc-legal__nav ul { columns: 2; column-gap: var(--asoc-space-l); }
}
@media (max-width: 700px) { .asoc-legal__nav { display: none; } }
/* Prose: paragraphs and lists in running text. Links in prose keep a real underline
(the rule for links in running text, WCAG 1.4.1; see the "go further" link above). */
.asoc-prose > :first-child { margin-top: 0; }
.asoc-prose > :last-child { margin-bottom: 0; }
.asoc-prose p { margin: 0 0 1.6rem; }
.asoc-prose ul { margin: 0 0 1.6rem; padding-left: 2.2rem; max-width: var(--asoc-measure); }
.asoc-prose li { margin: 0 0 0.6rem; padding-left: 0.4rem; }
.asoc-prose li::marker { color: var(--asoc-ink-muted); }
.asoc-prose a { color: var(--asoc-ink); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.asoc-prose a:hover { text-decoration-color: var(--asoc-ink-accent); }
/* ── CONTACT: the form card beside her inbox ─────────────────────────────── */
.asoc-contact {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38rem);
column-gap: var(--asoc-space-2xl);
}
/* The inbox at the FOOT of the column, level with the Send button, so the two are on screen
together whenever the button is: the column stretches to the card's height and its first child
(the inbox, first in the DOM so a phone meets it straight after the form) is moved to the end.
First built sticky at the top of the column, where it was off the screen when Send was pressed. */
.asoc-contact { align-items: stretch; }
/* NO HERO BAND (2026-10-30): the heading and intro head the right column, so the form starts under the header.
On a 1470x830 window (a 13-inch MacBook Air) the old hero took 425px and Send sat 330px below the window.
The card spans the intro and inbox rows, so the inbox sits at its foot, level with Send; the steps are a row of
three under both (in the right column they pushed the inbox off the screen). Phones: intro, form, inbox, steps. */
.asoc-contact { grid-template-areas: "card intro" "card aside" "next next"; grid-template-rows: auto 1fr auto; }
.asoc-contact__card { grid-area: card; }
.asoc-contact__intro { grid-area: intro; padding: 0; margin-bottom: var(--asoc-space-xl); }
.asoc-contact__intro > .asoc-hero__title { font-size: var(--asoc-text-h2); max-width: none; }
.asoc-contact__intro > .asoc-hero__lead { margin-bottom: 0; }
.asoc-contact__aside { grid-area: aside; display: flex; flex-direction: column; justify-content: flex-end; }
.asoc-contact__aside > .asoc-inbox { margin: 0; }
.asoc-contact__next { grid-area: next; margin-top: var(--asoc-space-2xl); }
@media (min-width: 801px) {
.asoc-contact__next > .asoc-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--asoc-space-l); }
.asoc-contact__next > .asoc-next > li { padding-bottom: 0; }
}
.asoc-contact-band { padding-top: var(--asoc-space-xl); }
@media (max-width: 1024px) {
.asoc-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 31rem); column-gap: var(--asoc-space-l); }
}
@media (max-width: 800px) {
.asoc-contact { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "card" "aside" "next"; grid-template-rows: auto; }
.asoc-contact__aside { margin-top: var(--asoc-space-xl); justify-content: flex-start; }
.asoc-contact__next { margin-top: var(--asoc-space-xl); }
}
.asoc-contact__card { display: block; }
/* The thank-you takes the form's place in a card held at the form's height, so nothing
below it moves (asoc-contact.js sets the min-height). */
.asoc-contact__card.is-done { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 800px) { .asoc-contact__card.is-done { justify-content: flex-end; } }
.asoc-contact__done[hidden], .asoc-contact__error[hidden], .asoc-form.brxe-form[hidden] { display: none; }
.asoc-contact__done { display: block; }
.asoc-contact__done > h2 { font-size: var(--asoc-text-h2); }
.asoc-contact__done > h2:focus { outline: 0; }
.asoc-contact__done p { color: var(--asoc-ink-muted); }
.asoc-contact__again {
appearance: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600;
background-color: transparent;
}
.asoc-contact__error { display: block; margin: var(--asoc-space-s) 0 0; color: var(--asoc-ink); }
.asoc-contact__error a { color: var(--asoc-ink); text-underline-offset: 0.2em; }
/* THE FORM: Bricks' own form element (wired later with its Email action), restyled. Its
markup: .form-group > label + input/textarea; checkboxes as ul.options-wrapper > li >
input + label; the button in .submit-button-wrapper. */
.asoc-form.brxe-form {
/* Two columns where a field can be 30rem wide, one where it cannot, never three (each track is at
least half the row): no breakpoint needed. */
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(30rem, calc(50% - 0.8rem))), 1fr));
gap: var(--asoc-space-m) var(--asoc-space-s); width: 100%;
}
.asoc-form .form-group { margin: 0; padding: 0; width: auto; display: flex; flex-direction: column; }
.asoc-form .form-group:has(textarea), .asoc-form .form-group:has(.options-wrapper),
.asoc-form .submit-button-wrapper, .asoc-form .message { grid-column: 1 / -1; }
.asoc-form .form-group > label, .asoc-form .form-group > .label {
margin: 0 0 var(--asoc-space-2xs); padding: 0; font-size: var(--asoc-text-small); font-weight: 600;
line-height: 1.3; color: var(--asoc-ink);
text-transform: none; letter-spacing: 0; /* Bricks capitalises form labels; ours are sentence case */
}
.asoc-form .form-group input:not([type="checkbox"]), .asoc-form .form-group textarea {
width: 100%; min-height: 50px; margin: 0; padding: 1.2rem 1.6rem;
font: 400 var(--asoc-text-body) / 1.45 var(--asoc-font-body); color: var(--asoc-ink);
background: var(--asoc-field-bg); border: 0; border-radius: var(--asoc-radius);
/* TWO LAYERS IN EVERY STATE, AND ONLY THE EDGE CHANGES (Sam, 2026-10-22: autofilled fields "flashing purple a
couple of times"). The first layer is a cover in the field's own colour, over whatever the browser paints
beneath (Chrome's autofill blue cannot be outranked by a background rule). States set --field-edge and
nothing else. When the autofill rule swapped a one-layer shadow for this two-layer one, the browser could not
pair the layers and animated the thin lilac edge swelling to 100px: the purple flash, on fill and again on
hover and focus. Same layers in the same order, so only the edge colour ever transitions. */
--field-edge: var(--asoc-line);
box-shadow: inset 0 0 0 1000px var(--asoc-field-bg), inset 0 0 0 1.5px var(--field-edge);
transition: box-shadow var(--asoc-dur) var(--asoc-ease);
}
.asoc-form .form-group textarea { min-height: 9rem; resize: vertical; } /* 14rem until 2026-10-30: Send below a 720px window */
.asoc-form .form-group input:not([type="checkbox"]):hover, .asoc-form .form-group textarea:hover { --field-edge: var(--asoc-accent); }
.asoc-form .form-group input:not([type="checkbox"]):focus-visible, .asoc-form .form-group textarea:focus-visible {
outline: 2px solid var(--asoc-accent-2); outline-offset: 2px; --field-edge: var(--asoc-accent);
}
/* The checkboxes as the Services picker's chips (.asoc-chip): same pill, same tick box,
lilac when ticked. The input stays a real, focusable checkbox laid over its chip. */
.asoc-form .options-wrapper { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.2rem 0.6rem; }
.asoc-form .options-wrapper li { position: relative; margin: 0; display: flex; }
.asoc-form .options-wrapper input[type="checkbox"] {
position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.asoc-form .options-wrapper label {
display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; margin: 0;
padding: 0.6rem 1.4rem; border-radius: var(--asoc-radius-pill);
font: 500 var(--asoc-text-small) / 1.2 var(--asoc-font-body); color: var(--asoc-ink);
box-shadow: inset 0 0 0 1.5px var(--asoc-line); pointer-events: none;
transition: background var(--asoc-dur) var(--asoc-ease), box-shadow var(--asoc-dur) var(--asoc-ease), color var(--asoc-dur) var(--asoc-ease);
}
.asoc-form .options-wrapper label::before {
content: ""; width: 1.4rem; height: 1.4rem; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--asoc-line); flex: none;
}
.asoc-form .options-wrapper li:hover label { box-shadow: inset 0 0 0 1.5px var(--asoc-accent); }
.asoc-form .options-wrapper li:has(input:focus-visible) label { outline: 2px solid var(--asoc-accent-2); outline-offset: 3px; }
.asoc-form .options-wrapper li:has(input:checked) label { background: var(--asoc-accent); color: var(--asoc-accent-ink); box-shadow: none; }
.asoc-form .options-wrapper li:has(input:checked) label::before {
box-shadow: none; background-color: var(--asoc-accent-ink);
-webkit-mask: var(--asoc-tick-svg) no-repeat center / contain; mask: var(--asoc-tick-svg) no-repeat center / contain;
}
/* The button is the site's own size, not the width of the form (Bricks stretches it). */
.asoc-form .submit-button-wrapper { margin: var(--asoc-space-2xs) 0 0; width: auto; align-items: flex-start; } /* a column, as every .form-group: align, not justify */
.asoc-form .submit-button-wrapper .bricks-button { width: auto; }
/* The Send button: the site's lilac button, with her paper plane in it. The plane is drawn
here so it is there without JavaScript; the script hides it when it flies. */
:root {
/* The flying plane's own geometry (asoc-contact.js), as a mask: the near wing solid, the far wing at 55%, and the
fold between them open, so at 26px it still reads as a folded plane. It was one filled shape with a 1px slit at
the tail, which read as a solid triangle (Sam, 2026-10-22). */
--asoc-dart-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 50'%3E%3Cpath d='M140 25 0 0v21z' fill='%23000'/%3E%3Cpath d='M140 25 0 29v21z' fill='%23000' fill-opacity='.55'/%3E%3C/svg%3E");
}
.asoc-form .submit-button-wrapper .bricks-button {
display: inline-flex; align-items: center; gap: 1rem; min-height: 52px;
padding: 0.95em 1.6em 0.95em 2em; margin: 0;
background: var(--asoc-accent); color: var(--asoc-accent-ink); border: 0; border-radius: var(--asoc-radius-pill);
font: 600 var(--asoc-text-body) / 1.2 var(--asoc-font-body); cursor: pointer;
transition: background var(--asoc-dur) var(--asoc-ease), transform var(--asoc-dur) var(--asoc-ease);
}
.asoc-form .submit-button-wrapper .bricks-button:hover { background: var(--asoc-accent-hover); transform: scale(1.02); }
.asoc-form .submit-button-wrapper .bricks-button .loading { display: none; }
.asoc-form .submit-button-wrapper .bricks-button::after {
content: ""; flex: none; width: 2.8rem; height: 1.1rem; rotate: -28deg; translate: 0 -0.1rem;
background-color: currentColor;
-webkit-mask: var(--asoc-dart-svg) no-repeat center / contain; mask: var(--asoc-dart-svg) no-repeat center / contain;
transition: opacity 0.12s linear;
}
.asoc-form.is-flying .submit-button-wrapper .bricks-button::after { opacity: 0; }
/* WITH THE SCRIPT (asoc-form--js): the icon is a real element, so the plane's start can be read off it and it can
become a tick; the button is held at the width of its widest label ("Sending") and its contents sit centred, so it
never changes width between Send, Sending and Sent (Sam, 2026-10-22). */
.asoc-form--js .submit-button-wrapper .bricks-button { justify-content: center; }
.asoc-form--js .submit-button-wrapper .bricks-button::after { content: none; }
.asoc-form--js .submit-button-wrapper .bricks-button { white-space: nowrap; }
.asoc-form--js .submit-button-wrapper .bricks-button .text { flex: none; }
.asoc-send__icon {
flex: none; width: 2.8rem; height: 1.1rem; rotate: -28deg; translate: 0 -0.1rem;
background-color: currentColor;
-webkit-mask: var(--asoc-dart-svg) no-repeat center / contain; mask: var(--asoc-dart-svg) no-repeat center / contain;
transition: opacity 0.12s linear;
}
.asoc-form.is-flying .asoc-send__icon { opacity: 0; transition: none; } /* at once: the flying plane is drawn on top of it, and a fade left a ghost behind it */
/* SENT: the site's hand-drawn tick takes the plane's place, drawn in left to right like the lists' ticks. Same box
width as the plane, so the button does not move; level, not tilted. */
.asoc-form.is-sent .asoc-send__icon {
height: 1.8rem; rotate: 0deg; translate: 0 0; opacity: 1;
-webkit-mask-image: var(--asoc-tick-svg); mask-image: var(--asoc-tick-svg);
animation: asoc-tick-in 0.45s var(--asoc-ease) both;
}
@keyframes asoc-tick-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.asoc-form.is-flying .submit-button-wrapper .bricks-button,
.asoc-form.is-sent .submit-button-wrapper .bricks-button { pointer-events: none; } /* no hover zoom on a button that has just sent */
/* Bricks' own notices: the thank-you and the error are ours (asoc-contact.js), so its
success message never shows; its error message reads in the card's ink if it does. */
.asoc-form .message.success { display: none; }
.asoc-form .message { margin: 0; font-size: var(--asoc-text-small); color: var(--asoc-ink); }
/* ── HER INBOX: a desk letter tray ───────────────────────────────────────── */
.asoc-inbox { margin: 0 0 var(--asoc-space-xl); display: block; }
.asoc-inbox__tray { position: relative; width: min(100%, 26rem); }
.asoc-inbox__tray svg { display: block; width: 100%; height: auto; overflow: visible; }
.asoc-inbox__back { fill: var(--asoc-tray-back); stroke: var(--asoc-tray-edge); stroke-width: 1.2; }
.asoc-inbox__front { fill: var(--asoc-tray-front); stroke: var(--asoc-tray-edge); stroke-width: 1.2; }
.asoc-inbox__sheet { fill: var(--asoc-plane-sheet); }
.asoc-inbox__sheet--b { fill: var(--asoc-plane-back); }
.asoc-inbox__rule { fill: var(--asoc-plane-ink); opacity: 0.2; }
.asoc-inbox__plate { fill: var(--asoc-tray-label); }
.asoc-inbox__word { fill: var(--asoc-ink-dark); opacity: 0.62; font-family: var(--asoc-font-mono); font-weight: 600; letter-spacing: 0.16em; }
.asoc-inbox__shadow { fill: var(--asoc-surface-sunk); opacity: 0.55; }
/* The new-mail count, which pops when the plane lands. */
.asoc-inbox__count {
position: absolute; top: 18%; right: 1%; min-width: 2.6rem; height: 2.6rem; padding: 0 0.6rem;
display: grid; place-items: center; border-radius: var(--asoc-radius-pill);
background: var(--asoc-accent); color: var(--asoc-accent-ink);
font: 700 1.3rem / 1 var(--asoc-font-mono); scale: 0; pointer-events: none;
}
.asoc-inbox.is-new .asoc-inbox__count { scale: 1; transition: scale 0.45s var(--asoc-ease-settle); }
.asoc-inbox__cap { margin: var(--asoc-space-s) 0 0; font-size: var(--asoc-text-small); color: var(--asoc-ink-muted); }
.asoc-inbox__cap a { color: var(--asoc-ink); text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; overflow-wrap: anywhere; }
/* On a phone the tray in the page is usually below the screen when Send is tapped, so a
small one slides in at the top right to catch the plane, and slides away again. */
.asoc-inbox--dock {
position: fixed; z-index: var(--asoc-z-flight); top: calc(1.2rem + env(safe-area-inset-top, 0px)); right: 1.2rem;
width: 13.6rem; margin: 0; padding: 1rem 1.2rem 0.8rem; border-radius: var(--asoc-radius);
background: var(--asoc-surface); box-shadow: var(--asoc-desk-shadow);
translate: calc(100% + 2.4rem) 0; transition: translate 0.55s var(--asoc-ease-out-fast);
pointer-events: none;
}
.asoc-inbox--dock.is-in { translate: 0 0; }
.asoc-inbox--dock .asoc-inbox__tray { width: 100%; }
/* ── THE FLIGHT LAYER ────────────────────────────────────────────────────── */
.asoc-flight { position: fixed; inset: 0; z-index: var(--asoc-z-flight); pointer-events: none; overflow: hidden; }
.asoc-flight__plane { position: absolute; left: 0; top: 0; width: 140px; height: 50px; margin: -25px 0 0 -140px; transform-origin: 140px 25px; will-change: transform; }
.asoc-flight__plane svg { display: block; width: 140px; height: 50px; overflow: visible; filter: var(--asoc-flight-shadow); }
.asoc-flight__wl { fill: var(--asoc-plane-sheet); }
.asoc-flight__wr { fill: var(--asoc-plane-back); }
.asoc-flight__line { fill: none; stroke: var(--asoc-plane-ink); }
.asoc-flight__ink { fill: var(--asoc-accent-ink); }
/* the far wing and the fold, as the button's icon shows them over the lilac: the ink at 55% over the lilac, and the
lilac itself through the fold */
.asoc-flight__ink--far { fill: color-mix(in srgb, var(--asoc-accent-ink) 55%, var(--asoc-accent)); }
.asoc-flight__keel { fill: var(--asoc-accent); }
.asoc-flight__trail { fill: none; stroke: var(--asoc-plane-sheet); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 2 7; opacity: 0.5; }
/* What happens next: three short steps under her inbox, numbered in the mono. */
.asoc-next__title { font-size: var(--asoc-text-h3); }
.asoc-next { list-style: none; margin: 0; padding: 0; display: block; counter-reset: asoc-next; }
.asoc-next > li { position: relative; margin: 0; padding: 0 0 var(--asoc-space-m) 4.4rem; counter-increment: asoc-next; }
.asoc-next > li:last-child { padding-bottom: 0; }
.asoc-next > li::before {
content: counter(asoc-next, decimal-leading-zero); position: absolute; left: 0; top: 0.3rem;
font: 600 var(--asoc-text-label) / 1 var(--asoc-font-mono); letter-spacing: 0.08em; color: var(--asoc-kicker);
}
.asoc-next > li > h3 { font-size: var(--asoc-text-body); font-family: var(--asoc-font-body); letter-spacing: 0; margin-bottom: var(--asoc-space-2xs); }
.asoc-next > li > p { margin: 0; font-size: var(--asoc-text-small); color: var(--asoc-ink-muted); }
/* Her phone in step 1 (2026-10-28): the same treatment as the email link in the inbox caption beside it. */
.asoc-next > li > p a { color: var(--asoc-ink); text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; white-space: nowrap; }
/* A FIELD THAT NEEDS ATTENTION (Sam, 2026-10-22: the browser's own bubble is not on brand). Her coral marks
it, as a highlight and never as text (§1): the field's outline and a small "!" disc; the words are in the
card's ink, under the field, where the eye already is. Written by asoc-contact.js into Bricks' own element. */
/* Bricks paints this element as a pale pink box with 15px of padding (frontend.min.css, read 2026-10-22), which
left light text on pink: plain text under the field instead. */
.asoc-form .form-group-error-message { display: none; background: none; padding: 0; width: auto; border: 0; }
.asoc-form .form-group-error-message.show {
display: flex; align-items: flex-start; gap: 0.8rem; margin: var(--asoc-space-2xs) 0 0;
font-size: var(--asoc-text-small); line-height: 1.4; color: var(--asoc-ink);
}
.asoc-form .form-group-error-message.show::before {
content: "!"; flex: none; width: 1.8rem; height: 1.8rem; margin-top: 0.1rem; border-radius: 50%;
display: grid; place-items: center; background: var(--asoc-accent-3); color: var(--asoc-accent-ink);
font: 700 1.2rem / 1 var(--asoc-font-body);
}
.asoc-form .form-group input[aria-invalid="true"], .asoc-form .form-group textarea[aria-invalid="true"],
.asoc-form .form-group input[aria-invalid="true"]:hover, .asoc-form .form-group textarea[aria-invalid="true"]:hover,
.asoc-form .form-group input[aria-invalid="true"]:focus-visible, .asoc-form .form-group textarea[aria-invalid="true"]:focus-visible {
--field-edge: var(--asoc-accent-3); /* coral until it is right, focused or not; the edge only, as above */
}
/* AUTOFILL (Sam, 2026-10-22: "are the entered fields meant to be this soft blue colour?"). No: that is the
browser's autofill paint. The field's own two-layer shadow (above) already covers it in every state, so these
rules set the text colour ONLY. ⚠️ Never give them a box-shadow: a different shadow here is what flashed.
One rule per pseudo-class, never one list: a browser that does not know one drops the whole list. */
.asoc-form .form-group input:-webkit-autofill { -webkit-text-fill-color: var(--asoc-ink); caret-color: var(--asoc-ink); }
.asoc-form .form-group input:autofill { -webkit-text-fill-color: var(--asoc-ink); caret-color: var(--asoc-ink); }