stays a real
time element. Inherits --text-tertiary: 5.40:1 on --canvas, and this is
metadata, which is the one role that token is scoped to. */
.rc-article__meta > * + *::before{content:"·";margin-right:var(--space-3)}
/* --- The article body and its rail --------------------------------------
Below 1200px this is a plain block: contents list, then article. At
1200px the shell's inner width is 1136px, which is 721 (the reading
measure the head and the closing panel already use) + 64 gutter + 351
of free track. The article keeps its measure, the contents move into
that free track and stick.
The rail is capped at 240px rather than filling 351: a five-item list
set at 14px needs about 200px, and a wider track only pulls the eye
further from the column it belongs to. */
.rc-longread{display:block}
.rc-longread__body{min-width:0}
/* --- Contents -----------------------------------------------------------
Twenty headings with no way to jump and no sense of depth. Five entries,
worded exactly as the five section eyebrows on the page, so the list and
the page agree; no JS, no scroll-spy, no current-item state that would
have to be faked.
The left rule is --gray-500, 3.71:1 on --canvas: a drawn rule is a
graphic and owes 3:1, and the two border tokens sit at 1.16 and 1.30
after DS v0.2, i.e. invisible. Same reasoning as the figure strokes
in §17b. */
.rc-toc{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-10)}
.rc-toc__list{list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:var(--space-1)}
/* 5.57:1 at rest on --canvas, 16.82:1 on hover and focus. The underline
arrives with the hover so colour is never the only change. */
.rc-toc__link{
font:400 14px/20px var(--font-sans);color:var(--text-secondary);text-decoration:none;
transition:color var(--motion-fast) var(--ease-standard)}
.rc-toc__link:hover,.rc-toc__link:focus-visible{color:var(--text-primary);text-decoration:underline}
/* The five section anchors. `[id]{scroll-margin-top:var(--space-20)}` (§1)
clears the 64px sticky header for a bare heading, but each of these H2s
is introduced by an eyebrow sitting 8px above it, which that 80px would
leave under the header. 112px brings the label into view with the
heading it belongs to. */
.rc-longread .rc-prose h2[id]{scroll-margin-top:calc(var(--space-20) + var(--space-8))}
/* the jump itself. Nothing else on the site animates scroll, so this is
declared once, here, and only where the user has not asked for less
motion. */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* --- Figures break out of the measure -----------------------------------
§17b already declares `.rc-prose .rc-fig{max-width:none}`, which has
always been a no-op: a block child cannot exceed a bounded parent by
removing its own cap. Now that §17's correction puts prose at 38em
(~600px, ~74 characters) the intent can be made real. The prose column
goes back to the full 721px reading measure and the TEXT children take
the 38em cap instead, so body copy keeps the measure it was tuned to
while the nine figures use the whole column: 121px more for the two
SVG diagrams and the six-row parts grids, which is the difference
between a wrapped label and a single line.
This is also what creates the 721px column the contents rail sits
beside. */
.rc-longread .rc-prose{max-width:var(--reading-measure)}
/* --- Two diagrams that were unreadable on a phone -----------------------
Both are authored with 11px mono labels and scale with their container.
Measured at 375px, where the figure's content box is 293px
(375 − 32 shell − 2 border − 48 card padding):
FIG_B9, viewBox 640 wide → scale 0.458 → labels render at 5.0px
FIG_B1, viewBox 420 wide → scale 0.698 → labels render at 7.7px
FIG_B9 repeats all five labels and their meanings verbatim in the
.rc-fig__parts list directly beneath it, so below 700px the drawing
simply goes and the list carries the figure; nothing is lost and
nothing is scrolled.
FIG_B1 has no such list, so it keeps its own horizontal scroll inside
the existing .rc-fig__scroll (three offer-page figures already use it).
Floor re-derived 2026-07-27, because the rebuild changed both numbers:
the viewBox is 460 wide and the labels are authored at 13px, so
13 × 380/460 = 10.7px, against 11 × 350/420 = 9.17px before. The floor
goes 350 → 380: the phone scrolls 87px instead of 57px and gets a
label a pixel and a half larger than the old figure ever managed.
The scroll region carries tabindex="0" in the markup so it is reachable
without a pointer, the house rule §17 states for . */
@media (max-width:700px){.rc-fig__svg--anatomy{display:none}}
.rc-fig__scroll > .rc-fig__svg--ring{min-width:380px}
/* --- FIG_B2: one quotation, annotated ------------------------------------
The engineered prompt is a single continuous sentence in the owner's
copy: the first cell opens a quotation mark, the fifth closes it, the
three between carry none. Split across five cells of the shared
.rc-fig__parts grid it read as five broken fragments.
The words are untouched. What changes is that the five values now set
as one specimen: a rule down the left, the five mono labels in a
gutter beside it, and the value rows closed up (row-gap 0, 15/24, the
same setting .rc-fig__quote uses two rows above in the same figure) so
the eye runs down one quotation instead of five entries.
A modifier, not a change to .rc-fig__parts: five other figures on this
page use that grid as a list of distinct items, which is what it is for.
The rule is --gray-500, 3.84:1 on --surface — the card the figure sits
on — where --border-strong measures 1.30 and would draw nothing.
Written `.rc-fig ul.rc-fig__parts--quote`, not `.rc-fig
.rc-fig__parts--quote`: §17b's `.rc-prose .rc-fig ul{padding:0}` is
(0,2,1) and silently ate the gutter's padding-left at (0,2,0). Measured
before the fix: padding-left resolved to 0px and the labels sat flush
with the rule. Matching the selector SHAPE, per CLAUDE.md §4.7. */
.rc-fig ul.rc-fig__parts--quote{column-gap:var(--space-5);row-gap:0;
border-left:2px solid var(--gray-500);padding-left:var(--space-5)}
.rc-fig__parts--quote .rc-fig__val{font:400 15px/24px var(--font-sans);color:var(--text-primary)}
/* the label sits on the value's own 24px line box, so gutter and quotation
share one baseline grid. flex-start, not .rc-fig__lab's inherited
align-items:center: below 600px the values run two and three lines and
the centred label drifted to the middle of its row, pointing at the
wrong line of the quotation. */
.rc-fig__parts--quote .rc-fig__lab{line-height:24px;align-items:flex-start}
/* §17b drops .rc-fig__parts to one column below 600px and turns each
back into a block, which would break the quotation into five stacked
fragments again — precisely the defect this variant fixes. The gutter
is kept at every width; only the column gap tightens. */
@media (max-width:600px){
.rc-fig ul.rc-fig__parts--quote{grid-template-columns:max-content 1fr;column-gap:var(--space-3);
row-gap:0;padding-left:var(--space-4)}
.rc-fig ul.rc-fig__parts--quote > li{display:contents;margin-bottom:0}
}
/* --- Back to the index --------------------------------------------------
The article had no route onward except the footer. Set in the mono
machine face rather than as prose, so it reads as navigation and not as
the last sentence of the piece. Ink on --canvas, 16.82:1, with a
persistent underline: colour is never the affordance, same rule as
.rc-prose a. */
.rc-backlink{margin-top:var(--space-10);
font:var(--meta-weight) var(--meta-size)/var(--meta-line) var(--font-mono);
letter-spacing:.08em;text-transform:uppercase}
.rc-backlink a{color:var(--text-primary);text-decoration:underline;text-underline-offset:3px;
text-decoration-thickness:1px;
transition:text-decoration-thickness var(--motion-fast) var(--ease-standard)}
.rc-backlink a:hover{text-decoration-thickness:2px}
/* --- The closing panel --------------------------------------------------
The conclusion was an .au-card with margin-top:0, so it butted against
the last paragraph, and it rendered at the full 935px shell against a
721px article, so the conclusion was wider than the piece it closed.
It is now .rc-inkpanel--slim, the site's real closing device and the
one /blog/ itself uses, and it lives inside .rc-longread__body, which
caps it at the article's own 721px measure.
Nothing else is needed: §12 already colours the title (#fff), the
paragraphs (rgba(252,252,251,.82) — measured 11.12 / 10.05 / 8.83:1
across the panel's three gradient stops) and the eyebrow (.72 alpha,
8.85 / 8.10 / 7.20:1), and already restates the DS's
`a.au-btn--primary:hover` at (0,3,1) so the inverted button keeps ink
on a near-white fill instead of turning white-on-white (17.44:1 at
rest on --surface, 16.82:1 on the --gray-25 hover). Only the gap above
it is new. */
/* --- : the article's glossary, made reachable ---------------------
Twenty-plus abbr[title] carried the whole glossary and were styled
nowhere, so they fell to the UA's dotted underline. Three failures at
once: they were not focusable, so a keyboard user never reached a
definition; `title` does not fire on touch, so a phone reader never saw
one either; and since this article's body carries no real links, every
underline on the page was a non-interactive abbr, which reads as a
broken link.
The markup now gives each one tabindex="0". Here they get an explicit
style that cannot be mistaken for a link — a link in .rc-prose is ink
(--accent-text) with a solid 1px underline, an abbr keeps the
paragraph's --text-secondary and takes a dotted one — plus a
definition that opens without a mouse.
`title` is deliberately kept rather than moved to data-tip the way the
credentials chips did: on the title attribute IS the accessible
definition, and a screen reader has nothing else to read. The cost is
that a mouse user who rests on a word for a second also gets the native
tooltip; the popover is for the keyboard and the phone, which had
nothing at all. */
.rc-prose abbr[title]{text-decoration:underline dotted;
text-decoration-color:var(--text-tertiary);text-underline-offset:3px;cursor:help}
/* Why the popover is anchored to the paragraph and not to the word.
A bubble centred on the abbr overflows the viewport as soon as the word
sits near either edge of the column: measured worst case at 375px, an
abbr starting at the shell edge would put a 260px bubble 104px past the
left edge, and an absolutely positioned overflow of that kind scrolls
the whole page sideways. Anchoring to the containing block instead
(left:0;right:0 of the paragraph) makes overflow impossible at every
width, by construction, at the cost of the definition appearing under
the paragraph rather than under the word. On a 38em column that is at
most a few lines away, and it is the only variant that cannot break the
page.
The one abbr that is not in a paragraph sits in a .rc-fig__lab inside
FIG_B3's parts grid, so that grid becomes its containing block and the
definition opens under the list. */
.rc-prose p{position:relative}
.rc-prose .rc-fig__parts{position:relative}
.rc-prose abbr[title]::after{content:attr(title);
position:absolute;left:0;right:0;top:100%;z-index:6;margin-top:var(--space-2);
padding:var(--space-2) var(--space-3);border-radius:var(--radius-control);
background:var(--surface);border:1px solid var(--gray-500);box-shadow:var(--elev-2);
font:var(--meta-weight) var(--meta-size)/var(--meta-line) var(--font-sans);
letter-spacing:0;text-transform:none;text-decoration:none;color:var(--text-secondary);
/* The popover inherits from the abbr, and one of the nineteen sits inside a
.rc-fig__lab, which is white-space:nowrap. That single definition then
refused to wrap and pushed the document 319px sideways at 375px: the only
horizontal overflow anywhere on the site. Anchoring to the containing
block bounds the BOX, not the text inside it, so the wrap has to be
stated rather than inherited. normal-case and left alignment are reset
for the same reason: the mono label is uppercase and its cell is
centred, and neither belongs on a definition. */
white-space:normal;text-align:left;
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity var(--motion-fast) var(--ease-standard),
visibility var(--motion-fast) var(--ease-standard)}
/* --text-secondary on --surface measures 5.77:1. The hairline is
--gray-500 at 3.84:1 on that surface: a popover floats over arbitrary
page content, so its own boundary has to clear the 3:1 non-text floor,
which --border-subtle (1.16:1) does not. --elev-2 is the DS's own
popover elevation, the one level elevation.css does allow. */
/* visibility, not opacity alone: an opacity:0 pseudo-element stays in the
accessibility tree, and this one would repeat the definition the
screen reader has already read off the title attribute. */
/* :focus rather than :focus-visible: a tap on a phone gives focus but
does not usually match :focus-visible, and touch is one of the two
cases this popover exists for. */
.rc-prose abbr[title]:hover::after,
.rc-prose abbr[title]:focus::after{opacity:1;visibility:visible}
/* --motion-fast is already 0ms under prefers-reduced-motion (motion.css),
so the reveal needs no separate override here: it still fires, it just
has nothing left to animate. Same note as §8b. */
/* --- Print --------------------------------------------------------------
The contents list is a screen affordance, and the cover is a field with
no information in it; §19 already flattens .au-silk__l, which would
leave the cover as a blank tinted band. Both go. */
@media print{
.rc-toc,.rc-article__cover{display:none}
}
/* =========================================================
19. /learning/ second pass (2026-07-26, owner brief)
Four sections rebuilt: the catalogue, the logistics facts, the method
flow, and the removal of the model-agnostic section head so the tool
band lives inside the catalogue.
No colour is introduced anywhere below. Every value is an existing
token, and every pairing that carries text or a meaningful graphic is
measured here against the surface it actually sits on:
--text-primary #141817 on --surface #FCFCFB 17.44:1
--text-primary #141817 on --surface-subtle #F1F3F2 16.07:1
--text-secondary #5D6662 on --surface #FCFCFB 5.77:1
--text-tertiary #5F6864 on --surface #FCFCFB 5.60:1 (site.css:31 override)
--text-tertiary #5F6864 on --surface-subtle #F1F3F2 5.16:1
--accent-deep #4C2D93 on --surface #FCFCFB 9.72:1
--accent-deep #4C2D93 on --canvas #F7F8F7 9.38:1
--accent-graphic #6941C6 on --chip-bg #EDF0EE 5.77:1 (glyph, needs 3:1)
The three level chips are unchanged and keep the ratios recorded at
the end of §18 (5.17 / 4.77 / 5.67:1).
========================================================= */
/* --- IconSquare (new, shared by #practical and #engagement) -------------
The DS v0.3 added IconSquare as "the single container for row and card
glyphs: a 36px soft rounded square, tonal or semantic", and routes Card,
InlineMessage and Banner through it. The vendored assets/atmo carry no
CSS for it, so it is authored here once and used by both sections, which
is the point of the component: a fact row and a method step are built the
same way.
--chip-bg is the DS's dedicated tonal chip surface (colors.css says it is
deliberately NOT an alias of any --surface-* token), so the square keeps a
step of tone over the white cell without inventing one. The glyph is the
page hue: #6941C6 on #EDF0EE = 5.77:1, well past the 3:1 a meaningful
graphic needs. Radius is --radius-control-sm (8px), the token the DS
labels "soft icon squares", one step down from the 16px card. */
.rc-iconsq{
width:36px;height:36px;flex:none;
display:inline-flex;align-items:center;justify-content:center;
border-radius:var(--radius-control-sm);
background:var(--chip-bg);
color:var(--accent-graphic,var(--text-secondary));
}
/* --- The catalogue (#catalogue) -----------------------------------------
REPLACES the `.rc-sessions` / `.rc-sess` block in §17 and the
` Three .au-card each holding a flat list put twelve near-identical rows in
three narrow columns: at 1280 a 42-character session title had ~210px left
beside its chip and ran to three lines, so no two rows lined up and there
was nothing to scan down.
One bounded panel instead, full width, twelve one-line rows. The format
name becomes a tonal group header rather than a card title, which is the
DS's surface-escalation ladder taken one step (spacing -> alignment ->
divider -> tonal group) without reaching the "never nested bordered cards"
rung: the panel carries the only border, everything inside it is a
hairline or a tone. That puts every level chip in one aligned right-hand
column, which is the column the section exists to be read down.
Same device as the DS's own landing-page facts grid (a single rounded
border, cells separated by hairlines, no inner boxes). */
.rc-cat{
background:var(--surface);
border:1px solid var(--border-subtle);
border-radius:var(--radius-panel);
overflow:hidden;
}
.rc-cat__group + .rc-cat__group{border-top:1px solid var(--border-subtle)}
.rc-cat__head{
display:flex;align-items:baseline;justify-content:space-between;
gap:var(--space-4);
padding:var(--space-4) var(--space-6);
background:var(--surface-subtle);
}
.rc-cat__name{font:var(--title-weight) var(--title-size)/var(--title-line) var(--font-sans);letter-spacing:var(--title-track);color:var(--text-primary)}
/* a count, not a label: tabular figures per the DS's numbers rule */
.rc-cat__count{font:var(--meta-weight) var(--meta-size)/var(--meta-line) var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);white-space:nowrap}
.rc-cat__list{list-style:none;margin:0;padding:0}
/* Twelve rows at 12px of block padding made the catalogue the page's dominant
slab at 1195px, more than twice any other section. 8px takes 96px out of it
without touching a single session, and the row still clears the 20px chip
it carries. */
.rc-cat__row{
display:flex;align-items:flex-start;justify-content:space-between;
gap:var(--space-4);
padding:var(--space-2) var(--space-6);
}
.rc-cat__row + .rc-cat__row{border-top:1px solid var(--border-subtle)}
.rc-cat__title{font:400 15px/22px var(--font-sans);color:var(--text-primary)}
/* .au-chip ships align-self:flex-start, which in this row would top-align the
chip to the title's line box rather than its cap height */
.rc-cat__row > .au-chip{flex:none;margin-top:3px}
@media (max-width:599px){
/* at 375 the title has ~280px and the chip takes 80 of them, which puts a
40-character session on three lines. Stacked, every title gets the full
column and the chip reads as its footer. */
.rc-cat__row{flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.rc-cat__row > .au-chip{margin-top:0}
.rc-cat__head,.rc-cat__row{padding-left:var(--space-5);padding-right:var(--space-5)}
}
/* The tool band now closes the catalogue instead of opening a section of its
own, so it needs the region gap the removed .rc-section__head used to
supply. .rc-note is the paragraph directly above it. */
.rc-shell > .rc-note + .au-silk{margin-top:var(--space-8)}
/* --- The logistics facts (#practical) -----------------------------------
The `.rc-factgrid` / `.rc-fact*` hairline grid that lived here was removed
on 2026-07-26 and replaced by `.rc-logi` at the end of this file
("learning: practical + engagement"). No page uses .rc-fact* any more.
`.rc-facts` (with the s) is a different, still-live block: see §above. */
/* --- The method flow (#engagement) --------------------------------------
REPLACES the `.rc-step` block in §7, `.rc-step__icon` in §9, the
`.rc-step__body` restatement at §11 and the whole ` block in §18. Nothing outside /learning/ uses .rc-step.
Three steps that are read in order were laid out as three unordered,
unnumbered cards. They are an now, each card carries its ordinal, and
an arrow sits in the grid gap between them so the left-to-right reading is
drawn rather than implied. */
.rc-flow{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(3,1fr);
/* --space-8 rather than the usual --space-6: the arrow is 24px wide and
has to sit inside this gap without touching either card */
gap:var(--space-8);
align-items:stretch;
}
.rc-flow__cell{position:relative;display:flex}
.rc-flowcard{
flex:1;min-width:0;
background:var(--surface);
border:1px solid var(--border-subtle);
border-radius:var(--radius-card);
padding:var(--space-6);
display:flex;flex-direction:column;gap:var(--space-3);
}
.rc-flowcard__top{display:flex;align-items:center;gap:var(--space-3)}
.rc-flowcard__step{display:inline-flex;align-items:baseline;gap:var(--space-2);font:var(--meta-weight) var(--meta-size)/var(--meta-line) var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-primary)}
/* the ordinal is the one place the page hue marks the sequence. --accent-deep
#4C2D93 on --surface #FCFCFB = 9.72:1, and the step name beside it stays
ink, so the hue never carries the meaning alone. */
.rc-flowcard__ord{font-variant-numeric:tabular-nums;color:var(--accent-deep,var(--text-tertiary))}
.rc-flowcard__title{font:var(--title-weight) var(--title-size)/var(--title-line) var(--font-sans);letter-spacing:var(--title-track);color:var(--text-primary)}
.rc-flowcard__body{font:var(--body-sm-weight) var(--body-sm-size)/var(--body-sm-line) var(--font-sans);color:var(--text-secondary)}
/* the deliverable is pinned to the bottom of the card behind one hairline,
the same construction the DS's landing-page template uses for the "Why_me"
block inside its practice cards, and the same reason as before: a nested
bordered container inside an already-bordered card is the "never nested
bordered cards" case, so the escalation stops at the divider. */
.rc-flowcard__out{
display:flex;flex-direction:column;gap:var(--space-1);
margin-top:auto;
padding-top:var(--space-4);
border-top:1px solid var(--border-subtle);
}
.rc-flowcard__outlabel{font:var(--meta-weight) var(--meta-size)/var(--meta-line) var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary)}
.rc-flowcard__outvalue{font:var(--body-sm-weight) var(--body-sm-size)/var(--body-sm-line) var(--font-sans);color:var(--text-primary)}
/* at 1280 the card's text column is ~330px, so the three values (51, 76 and
72 characters) set to one, two and two lines. Reserving two lines puts the
hairline, the label and the value baseline on the same line in all three
cards, not just the card bottoms. */
.rc-flowcard__outvalue{min-height:calc(var(--body-sm-line) * 2)}
/* The arrow is decoration for the sequence the already carries, so it is
aria-hidden in the markup and never announced. It is absolutely positioned
into the 32px gap: 4px clear of the card it leaves, 4px clear of the card
it points at. It hangs off cells 1 and 2 only, so nothing extends past the
right edge of the grid and the shell cannot overflow.
--accent-deep #4C2D93 on --canvas #F7F8F7 = 9.38:1. */
.rc-flow__arrow{
position:absolute;top:50%;right:-28px;
transform:translateY(-50%);
width:24px;height:24px;
display:flex;align-items:center;justify-content:center;
color:var(--accent-deep,var(--text-tertiary));
pointer-events:none;
}
.rc-flow__cell:last-child .rc-flow__arrow{display:none}
@media (max-width:899px){
/* one card per row: the arrow would point at the card beside it, which is
no longer there, and the reserved second deliverable line reopens the
dead space it exists to close */
.rc-flow{grid-template-columns:1fr;gap:var(--space-6)}
.rc-flow__arrow{display:none}
.rc-flowcard__outvalue{min-height:0}
}
/* =========================================================
21. /about/ — rebuilt 2026-07-26.
REPLACES the whole of §20 ("/about/ — hero figure FIG_05 and the
credentials row"): `#fig-05 .rc-fig__stage > ul`, `#fig-05 .rc-pod__name`
and `#credentials .rc-chipgroup__note` are all orphaned by this pass and
should be deleted with the merge. Nothing else in site.css is touched.
Why the page was rebuilt rather than patched. It said everything true
about the person and showed none of it: one hero, a wall of three
paragraphs, six pods on a wash, two clouds of chips, a contact panel.
Four blocks, one weak chromatic moment, no image anyone would remember.
The page now runs person -> practices -> evidence -> credentials ->
contact, and it carries exactly TWO silk fields, in the first and the
fourth of those five sections, so they are never consecutive:
1. FIG_05, the hero. The DS's ChromaticShowcase (`.au-cff`), which
this site had never used: "one crisp, opaque object floating on a
silk field". The opaque object is the profile itself, built as real
UI (mark, name, six hairline-separated facts), which is exactly the
component's brief. It is the strongest single image the page can
honestly carry: the subject IS the person.
2. The certifications panel. Advisory renders the same six
certifications as `.rc-seal` discs with their issuers, and that
artefact is better than a row of outline badges. It could not run
here before, because `.rc-cred` reads --fig-a/--fig-b and those are
declared only by `body:has(.rc-lockup__word[data-brand])`; About has
no brand, so the whole background shorthand went invalid at
computed-value time and the panel rendered flat. The seals get a
field of their own instead, from the DS's own engine.
Both fields are `mist`, the one silk family the DS maps to no service:
this page belongs to no practice, and borrowing jade, blossom or iris
would file the person under a practice he sits behind. The three little
tiles in the practices rail are the ONE exception, and they are not
fields: they are `GradientTile`s, the same class of object as the three
silk covers the home page and every offer page already carry on their
cards, and each one is the mapped palette of the practice its row names,
so the colour there is content and cannot disagree with the tag scale.
Every colour below is measured against its real background, never
estimated, with the ratio stated at the rule.
========================================================= */
/* --- FIG_05 · Profile: the ChromaticShowcase ----------------------------
`.au-cff` ships as a bordered panel (surface, hairline, 20px radius, 16px
padding) with the field inside it. It is used here as the page's ,
so the FIG label is a in that 16px inset and the DS's own
`.au-cff__anchor` carries the caption sentence under the field.
Measured, and the reason the panel keeps its own hairline: mist is the
palest family in the set, and against --canvas #F7F8F7 its five stops
read 1.19 / 1.06 / 1.01 / 1.13 / 1.05:1. A field that quiet cannot draw
its own edge, so the boundary comes from the `.au-cff` border, not from
the colour.
The `echo` layer is deliberately omitted: the DS calls it "optional
depth, not decoration: drop it if the focal object already overlaps the
bloom", and the focal card is centred over the bloom.
Both fields on this page take the DEFAULT `silk` variant, which is also
ChromaticShowcase's own default, and not `aurora` or `sheer`: aurora
blurs the base by 34px and widens the white bloom, and on a family as
pale as mist that resolves to one flat wash with no material left in it.
Compared side by side in the browser at 1280, the default variant is the
only one where the ribbons are legible at all. */
.rc-portrait{display:flex;flex-direction:column;gap:var(--space-3)}
/* the field is 280px tall by default, which is sized for a small focal
card; this one carries six facts in two columns, so the stage is given
room to hold it off the field's edges rather than letting the card set
the height and touch them. */
.rc-portrait .au-cff__field{min-height:360px}
.rc-portrait .au-cff__stage{padding:var(--space-12) var(--space-6)}
@media (max-width:767px){
.rc-portrait .au-cff__field{min-height:0}
.rc-portrait .au-cff__stage{padding:var(--space-6) var(--space-4)}
}
/* the DS focal is 68% / 440px max, sized for a fragment of a screen. Six
facts in two columns need more measure than that; capped at 620 so it
stays a card floating in the field rather than a band filling it. */
.rc-portrait .au-cff__focal{width:100%;max-width:620px}
/* Measured: an opaque --surface card #FCFCFB separates from the mist stops
by only 1.24 / 1.10 / 1.03 / 1.18 / 1.01:1, nowhere near the 3:1 a
non-text boundary needs. The DS's own answer is the float shadow rather
than a hairline, and `.au-cff__focal` already ships --elev-float: that
shadow, not a border, is what draws this card's edge. Stated here so the
next pass does not "fix" it by adding one. */
.rc-portrait .au-cff__anchor{padding:var(--space-4) var(--space-2) var(--space-1);max-width:64ch}
/* --- The profile itself, inside the focal card --------------------------
Real UI, not an illustration: the mark, the name, and the six facts the
page has to state, laid out on the hairline grid the DS's own landing
page template uses for this exact block. The escalation stops at the
divider (spacing -> alignment -> DIVIDER -> tonal group -> bordered
card): a bordered sub-grid inside the focal card would be the "never
nested bordered cards" case.
Measured on the focal card's own white #FCFCFB, which is what these sit
on: ink #141817 17.44:1, mono labels --text-tertiary #5F6864 5.60:1. */
.rc-profile{display:flex;flex-direction:column;gap:var(--space-4)}
.rc-profile__head{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.rc-profile__glyph{width:38px;height:38px;flex:none;padding:8px;box-sizing:border-box;
background:var(--surface-subtle);border-radius:var(--radius-control-sm)}
.rc-profile__id{display:flex;flex-direction:column;gap:var(--space-0-5)}
.rc-profile__name{font:600 18px/24px var(--font-sans);letter-spacing:-.015em;color:var(--text-primary)}
.rc-profile__role{font:450 11px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary)}
/* two columns, one hairline per row. The grid rows keep the six cells on
three shared baselines, so a two-line value on the left cannot push its
neighbour out of line. Single column under 600, where two 250px tracks
would break "Product owner, business analyst, functional analyst". */
.rc-profile__grid{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-8);margin:0}
@media (max-width:600px){.rc-profile__grid{grid-template-columns:1fr}}
.rc-profile__cell{display:flex;flex-direction:column;gap:var(--space-1);
padding-block:var(--space-3);border-top:1px solid var(--border-subtle)}
.rc-profile__cell dt{font:450 10px/14px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary)}
.rc-profile__cell dd{margin:0;font:550 14px/20px var(--font-sans);color:var(--text-primary)}
/* --- The practices rail -------------------------------------------------
REPLACES the three-paragraph prose block that stood under "Work".
The DS's FeatureRow geometry: a bordered row, a gradient thumbnail on the
left, ink title, one supporting line, laid out as `display:grid;
grid-auto-rows:1fr` so a longer sentence in one row cannot make it taller
than its siblings. Three rows is the run length the component asks for.
Deviation, stated: FeatureRow wants copy under 14 words; these carry the
facts the page owes the reader and run to two lines at `size="lg"`.
The row title follows the DS's sub-brand wordmark rule ("RET" ink at 600,
the service name grey at 500), so the practice name stays neutral and the
tile is the only coloured element in the row. That is the GradientCard
contract: "the tile is the only colored element; copy never inherits the
hue." */
/* Three separately bordered rows, immediately followed by the six-row Track
record ledger, put nine repeated horizontal slabs down the middle of the
page. One bounded panel with hairlines between the rows is the same device
the Learning catalogue uses and stops at the "tonal group" rung of the DS's
surface-escalation ladder, where three bordered boxes in a column were
already at "bordered card" for content that does not need it. */
.rc-prac{list-style:none;margin:0;padding:0;display:grid;grid-auto-rows:1fr;gap:0;
background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-card);
overflow:hidden}
.rc-prac__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
gap:var(--space-5);height:100%;
padding:var(--space-5);text-decoration:none;
transition:background var(--motion-fast) var(--ease-standard)}
.rc-prac__row + .rc-prac__row,
.rc-prac li + li > .rc-prac__row{border-top:1px solid var(--border-subtle)}
.rc-prac li + li{border-top:1px solid var(--border-subtle)}
/* the row is the whole hit target, so the hover has to read on the row, not
on a border it no longer owns: one tonal step, --surface to
--surface-subtle, which is the DS's own hover rule. */
.rc-prac__row:hover{background:var(--surface-subtle);text-decoration:none}
/* the tile takes the plain `silk` variant, not `aurora`: aurora blurs the
base by 34px, and at 88px square that resolves to one flat wash with no
material left in it. Radius is one step down from the row's 16px card,
per the concentric-corner rule. */
.rc-prac__tile{width:88px;height:88px;flex:none;border-radius:var(--radius-control)}
/* Measured at 375: three columns beside a 56px tile and a 20px chevron left
the copy 195px wide, which ran the Studio row to seven lines with the tile
floating in the vertical middle of them. The row folds instead: tile and
chevron share the top line, the sentence takes the full 303px underneath.
Grid areas rather than a markup change, so the same three children serve
both layouts. */
@media (max-width:600px){
.rc-prac__row{grid-template-columns:auto 1fr;
grid-template-areas:"tile chev" "text text";
align-items:center;row-gap:var(--space-4)}
.rc-prac__tile{grid-area:tile;width:56px;height:56px}
.rc-prac__text{grid-area:text}
.rc-prac__chev{grid-area:chev;justify-self:end}
}
.rc-prac__text{display:flex;flex-direction:column;gap:var(--space-1-5);min-width:0}
.rc-prac__name{font:600 18px/24px var(--font-sans);letter-spacing:-.02em;color:var(--text-primary)}
.rc-prac__name span{color:var(--text-tertiary);font-weight:500}
.rc-prac__copy{font:400 14px/21px var(--font-sans);color:var(--text-secondary);max-width:68ch}
/* the chevron is the row's only motion: transform only, one step, under
200ms, per the motion rule. --text-tertiary #5F6864 on --surface #FCFCFB
measures 5.60:1, over the 3:1 a meaningful graphic needs. */
.rc-prac__chev{width:20px;height:20px;flex:none;color:var(--text-tertiary);
transition:transform var(--motion-fast) var(--ease-standard)}
.rc-prac__row:hover .rc-prac__chev{transform:translateX(3px)}
/* --- Track record ---------------------------------------------------------
The `.rc-rail` ledger that used to live here is replaced by `.rc-ledger`,
authored in the "about: evidence" block at the end of this file. Its rules
are removed rather than left orphaned. */
/* --- Certifications on a field ------------------------------------------
The page's second and last silk moment, three sections away from the
first. Same panel geometry as `.rc-cred` on /advisory/, but the body is a
`mist` SilkField instead of the --fig-a/--fig-b mix that page's brand
declares and this one does not.
The hairline is kept for the same reason FIG_05 keeps one: measured, the
mist stops sit 1.01 to 1.19:1 against --canvas and cannot draw their own
edge. */
.rc-sealfield{border:1px solid var(--border-subtle);border-radius:var(--radius-panel);
padding:var(--space-10) var(--space-6)}
@media (max-width:767px){.rc-sealfield{padding:var(--space-8) var(--space-5)}}
/* the five silk layers are absolutely positioned siblings and absolute
boxes paint above static ones, so the content needs a stacking context of
its own to sit on the field rather than under it. */
.rc-sealfield__inner{position:relative;display:flex;flex-direction:column;align-items:center;
gap:var(--space-6);text-align:center}
/* Measured against mist-1 #DCE5F2, the darkest stop the field is built from
and therefore its contrast floor (every other stop and the white bloom
only improve it):
ink #141817 14.10:1
--text-secondary 4.67:1 (clears AA, used for the closing note)
--text-tertiary 4.53:1 (clears AA, but only just)
--gray-500 #7A827E 3.11:1 (non-text only)
The eyebrow is a 12px uppercase mono label and the least forgiving thing
on the panel, so it goes to ink rather than living on that 4.53 margin.
This is the same finding /advisory/ recorded on its own tinted panel:
muted greys do not survive a tinted field. */
/* `.rc-seal__disc` draws its ring with --accent-graphic, which resolves to
--signal-500 #0D9488 on a page carrying no brand lockup. That teal is
Advisory's own hue and would file these six certifications under a
practice they belong to as a person, not as a service. The ring goes
neutral instead, which is also the DS's default position: interactive and
structural colour is ink-neutral, chromatic colour is content.
Measured, both sides of the ring, since a boundary has two:
--gray-500 #7A827E vs the disc's own white #FCFCFB 3.84:1
--gray-500 #7A827E vs the field floor mist-1 #DCE5F2 3.11:1
Both clear the 3:1 WCAG 1.4.11 puts on a non-text boundary. Selector is
(0,2,0) against components' (0,1,0), so it wins on specificity alone. */
.rc-sealfield .rc-seal__disc{border-color:var(--gray-500)}
/* =========================================================
20b. The long-read article, round 2 — centred column and a
chromatic section system.
Three complaints from the owner, answered here: the article was
pushed left by the contents rail, it was ~99% neutral for 10,000px,
and it read flat.
Everything in this block is scoped to .rc-longread (or to the
article's own new classes). /legal/ and the two dueday documents
share .rc-prose and must not inherit any of it.
Reference values, recomputed for this block against the surfaces
these rules actually land on:
canvas --canvas #F7F8F7
surface --surface #FCFCFB
ink #141817 on canvas 16.82 · on surface 17.44
secondary #5D6662 on canvas 5.57 · on surface 5.77
tertiary #5F6864 on canvas 5.40 · on surface 5.60 (§0 value)
gray-500 #7A827E on canvas 3.71 · on surface 3.84
========================================================= */
/* --- The reading column is centred in the window ------------------------
§20 put the article in a 1200px grid: 721px of prose in column 1, the
sticky contents rail in column 2. At 1280 that left the text running
64.5 → 672.5 in a 1280 viewport, i.e. its centre 272px left of the
window's. The rail was buying an off-centre page for a five-item list.
The rail goes. .rc-longread becomes one 721px column with auto
margins, the contents become a band above it (below), and the text
children are centred inside that column instead of being flush left.
The nine figures keep the full 721px, so they now break out of the
measure symmetrically, 56px each side, instead of hanging off the
right.
§20's corrected measure is kept at its real 608px / ~74 characters,
restated in rem for the reason given in the next block; the raw 68ch
token, 721px and 91 characters, is not used for text anywhere. */
.rc-longread{max-width:var(--reading-measure);margin-inline:auto}
.rc-longread .rc-prose{margin-inline:auto}
.rc-longread .rc-prose > p,
.rc-longread .rc-prose > ul,
.rc-longread .rc-prose > ol,
.rc-longread .rc-prose > h2,
.rc-longread .rc-prose > h3,
.rc-longread .rc-prose > blockquote,
.rc-longread .rc-prose > .rc-eyebrow{margin-inline:auto}
/* The measure has to be restated in rem, and this is not cosmetic. §20
caps the text children at `min(var(--reading-measure),38em)`, and BOTH
units in that expression are font-relative to the element they land on.
Measured on the live page: 38em resolves to 1216px on the H2 (32px),
912px on the H3 (24px), 456px on the 12px eyebrow, and 68ch resolves to
about 1442px on the H2. Only the 16px children — p, ul, ol — were ever
actually capped at 608. Flush left that was invisible; centred it puts
four different left edges on one column, which is what the first render
of this pass showed.
38rem is 608px against the 16px root: the same width the paragraphs
already had, so the body copy does not move a pixel and everything
else lines up with it. The corrected ~74-character measure is
preserved exactly; the raw 68ch token, which resolves to 721px / 91
characters, is still not used for text.
The min() goes with the em. --reading-measure is 68ch and ch is
font-relative too: on the 12px mono eyebrow 68ch measures 490px, so
min(68ch,38rem) would have left the section labels 118px narrower
than the paragraph under them. One value, one column edge. */
.rc-longread .rc-prose > p,
.rc-longread .rc-prose > ul,
.rc-longread .rc-prose > ol,
.rc-longread .rc-prose > h2,
.rc-longread .rc-prose > h3,
.rc-longread .rc-prose > blockquote,
.rc-longread .rc-prose > .rc-eyebrow{max-width:38rem}
/* §20 declares the two-column grid and the sticky rail inside
@media (min-width:1200px). A media query adds no specificity, so the
override has to be restated at the same width rather than relying on
source order alone: position:sticky and max-width:240px would
otherwise survive and pin the new band to a 240px stub. */
@media (min-width:1200px){
.rc-longread{display:block}
.rc-toc{position:static;max-width:none;margin-bottom:var(--space-10)}
}
/* The head was 721px flush left under a 1136px shell. It now sits on the
article's own axis, and its contents centre on it: at 40/44 over three
lines the title is the one place on the page where centred setting
reads as a cover rather than as a stunt, and it states the new axis
before the reader reaches the first paragraph. The body copy stays
left-aligned — 10,000px of centred prose would be unreadable. */
.rc-article__head{margin-inline:auto;text-align:center}
.rc-article__head .rc-article__deck{margin-inline:auto}
.rc-article__head .rc-article__meta,
.rc-article__head .rc-article__tags{justify-content:center}
/* --- The five section palettes -----------------------------------------
The page has five numbered sections and one figure per section (two in
places). They now carry a hue each, so the contents band, the section
opener, the figure card and the opening ring diagram all agree about
where the reader is. This is content classification, the one job the
DS gives chromatic colour; nothing interactive, selected or focused
changes colour anywhere below.
The palettes are the DS's own silk families, in ladder order:
s1 Prompt dawn s2 Context jade s3 Harness iris
s4 Loops blossom s5 Anatomy solstice
Advisory/Studio/Upskilling stay bound to jade/blossom/iris as the DS
requires; those three appear here as article sections, not as
services, and no service mark appears on this page.
The silk stops are light by construction and measure 1.02 → 1.93:1 on
--canvas: they cannot carry a label. Each family therefore also needs
a deep stop. Three already exist in this stylesheet (§4 authored them
as --accent-deep for exactly these three families) and are reused
unchanged; dawn and solstice had none and are derived here, at the
family's own hue, and measured:
s1 dawn #28658F canvas 5.89 · surface 6.11 (new)
s2 jade #0F5A63 canvas 7.41 · surface 7.68 (§4 --accent-deep, advisory)
s3 iris #4C2D93 canvas 9.38 · surface 9.72 (§4 --accent-deep, upskilling)
s4 blossom #8A1F4A canvas 8.30 · surface 8.61 (§4 --accent-deep, studio)
s5 solstice #964D0C canvas 5.86 · surface 6.08 (new)
All five clear 4.5:1 as text on both neutrals, and 3:1 as a stroke. */
.rc-longread{
--ink-s1:#28658F; --ink-s2:#0F5A63; --ink-s3:#4C2D93; --ink-s4:#8A1F4A; --ink-s5:#964D0C;
}
.rc-longread [data-sec="s1"]{--sec-ink:var(--ink-s1);
--sec-1:var(--silk-dawn-1);--sec-2:var(--silk-dawn-2);--sec-3:var(--silk-dawn-3);--sec-4:var(--silk-dawn-4)}
.rc-longread [data-sec="s2"]{--sec-ink:var(--ink-s2);
--sec-1:var(--silk-jade-1);--sec-2:var(--silk-jade-2);--sec-3:var(--silk-jade-3);--sec-4:var(--silk-jade-4)}
.rc-longread [data-sec="s3"]{--sec-ink:var(--ink-s3);
--sec-1:var(--silk-iris-1);--sec-2:var(--silk-iris-2);--sec-3:var(--silk-iris-3);--sec-4:var(--silk-iris-4)}
.rc-longread [data-sec="s4"]{--sec-ink:var(--ink-s4);
--sec-1:var(--silk-blossom-1);--sec-2:var(--silk-blossom-2);--sec-3:var(--silk-blossom-3);--sec-4:var(--silk-blossom-4)}
.rc-longread [data-sec="s5"]{--sec-ink:var(--ink-s5);
--sec-1:var(--silk-solstice-1);--sec-2:var(--silk-solstice-2);--sec-3:var(--silk-solstice-3);--sec-4:var(--silk-solstice-4)}
/* The shared mark: a 3px rule that runs from the family's deep stop into
its four silk stops, the same left-to-right silk ramp §5 already draws
under the three nav offer marks, at the same 112deg-equivalent order.
Contrast, stated rather than assumed: the leading segment is --sec-ink
at 5.86 → 9.38:1 on --canvas, so the rule always has a visible end;
the trailing silk stops fall to 1.15 → 1.64:1 and are not legible on
their own. That is allowed because the rule is redundant by
construction — every one of them sits directly above, or beside, the
same section's name in text (WCAG 1.4.11 applies to graphics that are
required to understand the content). No rule on this page is the sole
carrier of anything. */
.rc-longread .rc-secbar{
display:block;height:3px;border-radius:var(--radius-full);
background:linear-gradient(90deg,
var(--sec-ink) 0%, var(--sec-1) 30%, var(--sec-2) 62%, var(--sec-4) 100%);
}
/* --- Contents: a band, not a rail --------------------------------------
Same five entries, same wording as the five section labels, same
anchors. It is now a card on the article's own axis, above the piece,
with the five section rules across it: the reader meets the chromatic
system once, as a legend, before it starts doing any work further down.
auto-fit at a 120px floor gives five equal 120px+ columns at the full
721px measure and folds to two at 375px, so the strip never has to be
scrolled sideways.
Interactive state stays neutral ink per the DS's first hard rule: rest
is --text-secondary (5.57:1 on --canvas), hover and focus are ink
(16.82:1) plus an underline, and the hue never moves. */
.rc-toc--band{
background:var(--surface);border:1px solid var(--border-subtle);
border-radius:var(--radius-card);padding:var(--pad-card);gap:var(--space-5);
}
.rc-toc--band .rc-toc__list{
padding:0;border-left:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:var(--space-4);
}
.rc-toc--band .rc-toc__link{
display:flex;flex-direction:column;gap:var(--space-2);padding:0;
text-decoration:none;
}
.rc-toc--band .rc-toc__link:hover,
.rc-toc--band .rc-toc__link:focus-visible{text-decoration-thickness:1px;text-underline-offset:3px}
/* The band carried all five section hues at once. The DS caps a showcase at
two palettes ("one coherent palette per field... pair at most two per
showcase"), and five families in one component also passes the four-hue
ceiling the Tag contract sets for a single grouping. The hues stay where
each one is alone in its own field, at the section openers; here the rule
goes to the neutral hairline. Nothing is lost: each entry already carries
its number and its name in text, and the openers still teach the mapping.
--chip-border #C3CAC7 measures 1.62:1 on --surface, which is the token
colors.css authors for exactly this "hairline with real contrast" job, and
the rule is decoration beside a text label, not a required graphic. */
.rc-toc--band .rc-secbar{background:var(--chip-border)}
/* --- Section openers: five fields, one treatment ------------------------
Was: sections 01-04 opened on a 4px gradient rule plus a coloured
eyebrow, and only 05 got a silk field. Owner instruction, 2026-07-27:
"I LOVE the sub section divider, make it consistent across the board."
All five now open on the same object — halftone silk field, opaque
white pill, same geometry — and each one carries its OWN family, so
the chapter colour system §21 authored is unchanged:
01 dawn · 02 jade · 03 iris · 04 blossom · 05 solstice
The rule and the coloured eyebrow are gone; the ramp survives only as
the 88px figure tab (§ final pass 5), so the page now draws exactly
one kind of chapter mark and one kind of figure mark.
ARBITRATION, since this is a deliberate deviation from the DS.
The DS caps fields at "two per marketing page, never consecutive
sections" and calls halftone "one editorial moment per view". Five
full-width fields is five moments. Redha decided for consistency, so
five ship; what was arbitrated instead is intensity, and here are the
numbers the arbitration rests on.
1. Density per view, which is what the ≥85%-neutral gate actually
governs. At 1440x900 a banner is 721 x 132 = 95,172px of a
1,296,000px viewport: 7.34%. No two banners can ever share a
screen — measured gaps between consecutive openers after the
rebuild are 1434, 2355, 2460 and 2262px, i.e. 1.6 viewport heights
apart at the closest and 2.7 at the widest. So a banner screen is
always one banner, and it lands at less than half the ceiling.
2. Chromatic proximity. The nearest other chromatic mark to any
banner is that section's OWN figure tab (88 x 3px, 412 to 676px
below it). Same family, same hue, 264px² of ink: a repetition of
one chapter's colour, not a second moment.
ONE EXCEPTION, and it is recorded rather than argued away. FIG_B1
ends at y=1680 and opener 01 begins at y=1776, so a 900px screen
holds both: the figure's 420px disc (124,465px²) plus the banner
(95,172px²) is 16.95% of that viewport, against the DS's 15%
chromatic ceiling. It is the only screen on the 13,015px page that
exceeds it; every other screen is at or under 7.34%.
Not corrected, for three reasons. The DS's own hard rule files
chromatic colour under content and names CHARTS as a place it
belongs, so a diagram's own area is not decoration. The two
objects are the legend and the first thing it explains, which is
the one adjacency on this page that carries meaning. And the only
corrections available all cost one of the two owner instructions:
shrinking the ring under 375px puts the main figure below the
footprint it had BEFORE it was asked to pop, and taking the
banners to 104px changes the object Redha approved. The levers
are stated here so the trade is Redha's to reverse, not hidden.
3. Saturation is NOT uniform, and that is what keeps 05 the loudest.
Mean relative luminance of the four silk stops driving each field:
01 dawn .745 · 02 jade .760 · 04 blossom .664 · 03 iris .599
05 solstice .562
Solstice is the darkest and the only two-hue palette in the set,
so section 05 still reads as the strongest band on the page
without a single value being tuned by hand. Emphasis stays
proportional to importance, which is the gate the DS's rule exists
to protect. Nothing was dimmed, no banner was dropped, and 05's
field is byte-identical to what shipped.
4. What DOES vary per banner is the bloom position (--sk-bx/--sk-by),
which is CLAUDE.md §4.3's own answer to "what distinguishes tiles
in a series": a material, never a second hue. 05 keeps the
component default untouched.
The label on the field is an opaque white pill with --elev-pill, which
is the DS's rule for objects on a field, and it is why it can carry
ink at 17.44:1 on every one of the five. White text is not an option
and was not measured as one: on the darkest stop of each family white
runs 1.44 → 2.05:1 raw and 1.66 → 2.24:1 under the DS's own 20% veil.
The pill takes no border for the same reason .rc-chips'-on-field pods
take none (§18): elevation, not a hairline, separates an opaque object
from a light field. Pill fill against the field it floats on measures
1.40 → 2.00:1, which is why that separation is a shadow and not a
contrast claim. */
.rc-longread .rc-secfield{
position:relative;
border-radius:var(--radius-panel);
min-height:132px;display:flex;align-items:center;justify-content:center;
padding:var(--space-6);
}
@media (max-width:767px){.rc-longread .rc-secfield{min-height:104px}}
.rc-longread .rc-secfield + h2{margin-top:var(--space-5)}
/* the five silk layers are absolutely positioned siblings that come
first in the DOM, so the pill needs a stacking context of its own —
the same note .au-tile__headline--role carries in §14 */
.rc-longread .rc-secfield__pill{
position:relative;z-index:2;
background:var(--surface);color:var(--text-primary);
border-radius:var(--radius-full);padding:var(--space-2) var(--space-5);
box-shadow:var(--elev-pill);
}
/* Five of the DS's seven silk palettes are named-but-unmapped in the
vendored components.css: it carries silk, aurora, sheer and halftone,
but resolves stops only for the advisory/studio/upskilling/mist
aliases. dawn, jade, iris, blossom and solstice are the DS's own
canonical family names (readme "THE ATMOSPHERE LAYER", SilkField.jsx),
so these five lines are a mapping of DS vocabulary, not new authorship
and not a hand-picked hue.
jade/blossom/iris are the same stops as advisory/studio/upskilling.
They are addressed by family name here on purpose: this article's five
sections are sections, not services, and no service mark appears on
this page (§21). Writing data-palette="advisory" on a chapter about
context engineering would file an article under a practice.
The halftone variant used to be redeclared here too, on the belief that
components.css did not ship it. It does, at components.css:216-221, and
the two copies were byte-identical. Duplicating a vendored component is
worse than useless: the next re-vendor changes one copy and this file
silently keeps overriding it with the old values. Removed. */
.au-silk[data-palette="solstice"]{--sk-1:var(--silk-solstice-1);--sk-2:var(--silk-solstice-2);--sk-3:var(--silk-solstice-3);--sk-4:var(--silk-solstice-4);--sk-5:var(--silk-solstice-5)}
.au-silk[data-palette="dawn"]{--sk-1:var(--silk-dawn-1);--sk-2:var(--silk-dawn-2);--sk-3:var(--silk-dawn-3);--sk-4:var(--silk-dawn-4);--sk-5:var(--silk-dawn-5)}
.au-silk[data-palette="jade"]{--sk-1:var(--silk-jade-1);--sk-2:var(--silk-jade-2);--sk-3:var(--silk-jade-3);--sk-4:var(--silk-jade-4);--sk-5:var(--silk-jade-5)}
.au-silk[data-palette="iris"]{--sk-1:var(--silk-iris-1);--sk-2:var(--silk-iris-2);--sk-3:var(--silk-iris-3);--sk-4:var(--silk-iris-4);--sk-5:var(--silk-iris-5)}
.au-silk[data-palette="blossom"]{--sk-1:var(--silk-blossom-1);--sk-2:var(--silk-blossom-2);--sk-3:var(--silk-blossom-3);--sk-4:var(--silk-blossom-4);--sk-5:var(--silk-blossom-5)}
/* Point 4 of the arbitration above: the four new banners each move the
bloom, so five bands in one piece are five different lights rather
than one band repeated. This is the only variable, it is a material
and not a hue, and it is exactly what CLAUDE.md §4.3 requires of a
series of tiles. 05 is deliberately absent: it keeps SilkField's own
68%/44% default, untouched. */
.rc-longread .rc-secfield[data-sec="s1"]{--sk-bx:30%;--sk-by:36%}
.rc-longread .rc-secfield[data-sec="s2"]{--sk-bx:72%;--sk-by:58%}
.rc-longread .rc-secfield[data-sec="s3"]{--sk-bx:44%;--sk-by:64%}
.rc-longread .rc-secfield[data-sec="s4"]{--sk-bx:80%;--sk-by:32%}
/* --- The figure cards stop being nine identical white boxes -------------
Nine bordered --surface cards over 10,000px was most of the "flat".
Each figure now carries its section's family as a tonal wash across
the top of the card — the surface-escalation step the DS puts one
rung below a bordered card, applied inside one — and its FIG_ label
takes the family's deep stop, so a figure states which section it
belongs to without a caption saying so.
20% of the silk stop over --surface, measured, worst stop per family
against every text colour that lands on it:
s1 dawn #EBF4FA/#F2F7FB/#F8FAFB sec-ink 5.63 ink 16.08 tertiary 5.16 gray-500 3.54
s2 jade #E7F8F2/#F0F9F5/#F8FBF9 sec-ink 7.18 ink 16.29 tertiary 5.23 gray-500 3.59
s3 iris #F2EFFA/#ECF0FB/#EBF6FA sec-ink 8.76 ink 15.71 tertiary 5.05 gray-500 3.46
s4 blossom #FBEEF6/#FDF3F0/#F9EDFA sec-ink 7.80 ink 15.79 tertiary 5.07 gray-500 3.48
s5 solstice #E6EFF8/#FBEBDD/#FCF6EC sec-ink 5.36 ink 15.37 tertiary 4.94 gray-500 3.39
Every text colour clears 4.5:1 on every stop, and --gray-500 — which
draws the FIG_B2 quotation rule and both diagrams' strokes — clears
the 3:1 graphic floor on every stop. 20% is the ceiling this holds at:
at 24% solstice drops --text-tertiary to 4.81 and gray-500 to 3.28.
No overflow:hidden, deliberately. The abbr popover of §20 is absolutely
positioned inside .rc-fig__parts, which lives inside these cards, and
clipping the card would clip a definition. The wash is a background,
so the corner radius already contains it. */
.rc-longread .rc-fig[data-sec]{
background:linear-gradient(156deg,
color-mix(in srgb, var(--sec-1) 20%, var(--surface)) 0%,
color-mix(in srgb, var(--sec-2) 20%, var(--surface)) 22%,
color-mix(in srgb, var(--sec-3) 20%, var(--surface)) 44%,
var(--surface) 76%);
}
.rc-longread .rc-fig[data-sec] .rc-fig__label{color:var(--sec-ink)}
/* --- FIG_B1: four layers around a core ---------------------------------
The opening diagram draws prompt, context, harness and loops as four
concentric rings. This is the one figure with no .rc-fig wash: it
belongs to no single section, and it is the legend for everything
below it.
SUPERSEDED IN PART, 2026-07-27. Each ring used to carry its section's
OWN family, which is what made the object read as a rainbow. The four
families are gone; the block at the foot of this comment states what
replaced them and why. Everything below about geometry, coverage,
stroke weight, the core and the label sizing still holds, and the
per-family contrast table at the end does not: the measured values
for the single-family build are in that later block.
Rebuilt 2026-07-27 on the owner's instruction: "FIG_B1 I like the idea
not the execution, maybe gradient? make it pop, it's the main fig."
The idea kept: four layers, each wrapping the one before it. What was
thrown out is the execution. It was four 1.5px hairlines and four
11px labels on white — 26,000px² of ink in a 420 x 400 box, i.e. 1.6%
coverage, for the opening figure of a 12,000px article. It could not
hold the page and it did not survive being looked at from a metre.
What it is now, and why each choice:
- FILLED annuli, not strokes. Each disc is painted with a three-stop
silk ramp (--rg-1 -> --rg-2 -> --rg-3) and drawn largest
first, so the visible band of each layer literally is the layer
wrapping the ones inside it. Coverage goes 1.6% -> 69% of the box.
One shared userSpaceOnUse axis (bottom-left to top-right, the same
diagonal the silk base's linear pass runs) rather than four
per-object gradients, so the four bands read as one lit object
instead of four independently shaded ones.
- No silk field behind it, deliberately. The rings ARE the chromatic
content; a field under them would be a sixth field on this page and
would put the figure's own screen past the 15% chromatic ceiling.
The DS's own hard rule allows chromatic colour in "content
(atmospheric fields, spectral surfaces, CHARTS)": a diagram is the
sanctioned place for it, a decorative backdrop is not.
- Stroke weight grows outward, 1.75 / 2 / 2.25 / 2.5, so scope and
weight agree: the outermost layer is the one that contains the most.
- The core is an opaque ink disc, not an outlined node. It is the one
thing on the figure that is not a layer, and the only ink mass in
the box; everything else orbits it.
- The four labels sit on opaque capsules at the DS's chip
geometry (20px tall, radius 7, v0.3), which is the same device the
five section banners and the cover use. One idiom for "an object on
a coloured ground", used three ways on this page.
MEASURED: the four-family table that stood here is void with the
families it measured. The single-family figures are in the block
below. What survives unchanged is the core: "LLM" in --surface on the
ink core measures 17.44:1, and the core's own edge against the
innermost band 11.19:1.
Redundancy: no ring depends on its colour. Each is named in words on
the ring itself, and the caption states the relation.
Type size is set against the SMALL end of the figure, not the large.
The viewBox is 460 and the box renders at 420 on desktop (scale .913)
and at the 380px scroll floor on a phone (scale .826). A label
authored at the site's usual 11px would land at 9.1px on a phone,
under anything this site sets anywhere. Authored at 13px it renders
11.9px on desktop and 10.7px on a phone; the core label at 17px
renders 15.5 and 14.0. Capsule geometry follows: 22px tall so 13px
type has its own line box, radius 7, which is the DS v0.3 chip. */
/* ---- 2026-07-27, owner: "FIG_B1 is too rainbowy, keep the logic but
improve it maybe with chips that have different aery gradient?"
WHAT WAS WRONG. The four annuli each carried a DIFFERENT family —
s1 dawn (blue), s2 jade (green), s3 iris (violet), s4 blossom (pink) —
so one object held four hues. That is the exact thing CLAUDE.md §4.3
forbids: what separates the members of one series is a material or a
value, never a second tint. The figure was reading as a colour wheel
rather than as four layers of one system.
THE FAMILY, AND WHY IRIS.
Two candidates were weighed, and the choice is made on a measurement,
not on taste.
· mist is the one DS palette mapped to no service, which argues for
it on a purely structural object. It is rejected on VALUE RANGE.
Its four stops measure L 0.777 / 0.870 / 0.940 / 0.812 relative
luminance, a total span of 1.20:1 end to end. Split four ways that
is roughly 1.05:1 per band boundary, i.e. nothing. Since the whole
point of this rebuild is to move the differentiation from hue onto
value, a palette with no value headroom cannot do the job.
· iris measures L 0.557 / 0.540 / 0.665 / 0.652, and diluted against
--surface (L 0.972) it gives a 1.73:1 working range — enough for
four separable steps. It is also the article's OWN family: the
cover tile above carries data-palette="upskilling" (= iris) and so
does the card on /blog/ that points here, so cover, card and
opening figure become one object instead of three.
Recorded risk, not hidden: iris is also section 03's family, so a
reader could briefly file the whole legend under "harness". Three
things answer it. The figure carries no [data-sec] and takes no
section wash. Every ring is named in words on the ring itself. And
the rings are a DEPTH ladder, four values of one ramp, which is not
what any section opener looks like (a flat silk field).
THE DIFFERENTIATION, NOW ON VALUE.
One three-stop iris ramp, one shared userSpaceOnUse axis, four DEPTHS
of it, growing INWARD. Two cues, kept orthogonal on purpose:
stroke weight grows outward (2.5 / 2.25 / 2 / 1.75) = scope
value grows inward = proximity
Inward rather than outward is also the cheaper choice by area: the
outermost annulus is the largest surface on the figure and now takes
the least ink, so the diagram's chromatic mass drops while its
readability rises. Quantified, since §21's arbitration turns on this
figure's area. Annulus areas go 17,940 / 13,708 / 9,476 / 4,800 units
of r-squared outward to inward; weighted by each band's saturation the
figure carried 45,924 units before and carries 28,875 now, i.e. 63%.
The one screen on this page that exceeded the DS's 15% chromatic
ceiling was FIG_B1 sharing a 900px viewport with opener 01, measured
at 16.95% there (124,465px of disc + 95,172px of banner over a
1,296,000px viewport). Discounting the disc by the 63% above puts the
same screen at 13.4%, under the ceiling, so that
exception closes on its own. No surface added by the chapter squircles
is tinted: --surface-subtle is a neutral grey, so the >=85% neutral
gate is unaffected by the other half of this session's work too.
The ladder is a dilution against --surface for the outer three and a
deepening into the family's own ink for the innermost, because pure
dilution runs out: measured, 26/48/72/100% gave four steps of 1.08 to
1.11:1 and a total span of 1.43:1, which is not a ladder, it is one
colour. Five ladders were measured on the live DOM before this one was
picked; the deciding numbers are in the table below.
MEASURED on the live DOM (worst of the three stops at every boundary,
which is the honest figure, not the mid stop):
depth formula mid stop
d4 outer 34% ramp over --surface #E0E8FA
d3 62% ramp over --surface #C9D8FA
d2 100% ramp #AAC2F9
d1 inner 100% ramp + 22% --rg-ink #95A1E3
boundary surface>d4 1.13 · d4>d3 1.11 · d3>d2 1.15 · d2>d1 1.39
total span surface>d1 2.04:1 (was 1.43:1 on pure dilution)
ring stroke --rg-ink on its own band, worst stop
d4 8.14 · d3 6.98 · d2 5.61 · d1 4.04 (floor 3, graphic)
A 1.11:1 step is a step, not a boundary, and it is not asked to be
one: every band edge also carries a 1.75-2.5px --rg-ink stroke, and
those are the four numbers on the line above. Value carries the depth,
the stroke carries the boundary.
22% is the ceiling on the inner deepening: at 30% the stroke on d1
falls to 3.56 and the band stops reading as a member of the same ramp.
THE CHIPS get the "different aery gradient" Redha asked for, and this
is the ONE place a variation is allowed, because a chip is a distinct
object and not a member of the ring series. Each of the four is a
two-stop gradient of the SAME iris family, run at a different angle
and off a different stop pair, at 22% and 8% dilution. That keeps them
aery by construction: the darkest stop any of the four chips carries
is 22% of iris-2, #EAEFFB.
chip label #4C2D93 on that worst stop 8.68:1 (floor 4.5)
chip hairline #4C2D93 on the band behind it 4.04 to 8.14:1 (floor 3)
Chip fill against the band under it runs 1.01 to 1.28:1, which is why
the chip is separated by its hairline and not by a contrast claim —
the same reasoning the section pills use, one rung down because SVG
has no --elev-pill.
Nothing here is white-on-silk. Ink and the iris deep stop carry every
character, per CLAUDE.md §4.4. Every stop-color declares a flat
fallback BEFORE its color-mix: a stop-color that fails to parse falls
back to black, which is exactly how a black crescent got painted
across this figure once already. */
.rc-fig__svg--ring{
--rg-1:var(--silk-iris-1); --rg-2:var(--silk-iris-2);
--rg-3:var(--silk-iris-3); --rg-4:var(--silk-iris-4);
--rg-ink:#4C2D93;
--rg-mix:100%; --rg-deep:0%;
--rgt-1:var(--silk-iris-1); --rgt-2:var(--silk-iris-2);
}
.rc-fig__svg--ring [data-depth="d4"]{--rg-mix:34%}
.rc-fig__svg--ring [data-depth="d3"]{--rg-mix:62%}
.rc-fig__svg--ring [data-depth="d2"]{--rg-mix:100%}
.rc-fig__svg--ring [data-depth="d1"]{--rg-mix:100%;--rg-deep:22%}
.rc-fig__svg--ring .rg__a{stop-color:var(--rg-1);
stop-color:color-mix(in srgb, var(--rg-ink) var(--rg-deep),
color-mix(in srgb, var(--rg-1) var(--rg-mix), var(--surface)))}
.rc-fig__svg--ring .rg__b{stop-color:var(--rg-2);
stop-color:color-mix(in srgb, var(--rg-ink) var(--rg-deep),
color-mix(in srgb, var(--rg-2) var(--rg-mix), var(--surface)))}
.rc-fig__svg--ring .rg__c{stop-color:var(--rg-3);
stop-color:color-mix(in srgb, var(--rg-ink) var(--rg-deep),
color-mix(in srgb, var(--rg-3) var(--rg-mix), var(--surface)))}
.rc-fig__svg--ring .rg-ring{stroke:var(--rg-ink)}
.rc-fig__svg--ring .rg-core{fill:var(--text-primary)}
.rc-fig__svg--ring .rg-core__lb{font:600 17px/1 var(--font-sans);letter-spacing:.01em;fill:var(--surface)}
/* the four chip ramps: one family, four directions, four stop pairs */
.rc-fig__svg--ring [data-air="a4"]{--rgt-1:var(--silk-iris-4);--rgt-2:var(--silk-iris-1)}
.rc-fig__svg--ring [data-air="a3"]{--rgt-1:var(--silk-iris-3);--rgt-2:var(--silk-iris-2)}
.rc-fig__svg--ring [data-air="a2"]{--rgt-1:var(--silk-iris-2);--rgt-2:var(--silk-iris-4)}
.rc-fig__svg--ring [data-air="a1"]{--rgt-1:var(--silk-iris-1);--rgt-2:var(--silk-iris-3)}
.rc-fig__svg--ring .rgt__a{stop-color:var(--surface);
stop-color:color-mix(in srgb, var(--rgt-1) 22%, var(--surface))}
.rc-fig__svg--ring .rgt__b{stop-color:var(--surface);
stop-color:color-mix(in srgb, var(--rgt-2) 8%, var(--surface))}
/* no `fill` here: each rect names its own gradient as a presentation
attribute, and a CSS fill would beat it */
.rc-fig__svg--ring .rg-tag rect{stroke:var(--rg-ink);stroke-width:1}
.rc-fig__svg--ring .rg-tag text{
font:450 13px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;
fill:var(--rg-ink);
}
/* --- Print --------------------------------------------------------------
§20's print block already drops the cover and the contents. §19 hides
every .au-silk__l, which would leave the section-05 field as a bare
solstice-5 band, and box-shadow does not print, which would leave the
pill with no boundary at all. Both are given a printable form here
rather than being removed: the pill carries the section's name. */
@media print{
.rc-longread .rc-secfield{background:#fff;border:1px solid var(--gray-500);min-height:0;padding:var(--space-3)}
.rc-longread .rc-secfield__pill{box-shadow:none;padding:0}
.rc-longread .rc-fig[data-sec]{background:#fff}
}
/* =========================================================
/about/ — visual pass 2. Merge after the §20a About block.
Everything here answers one finding: the page was the only marketing
page on the site whose hero was not the two-column `.rc-hero`. The copy
sat alone in a 594px column with 542px of empty canvas beside it for the
whole first fold, and FIG_05 was dropped underneath at 1136px, where its
620px focal card floated in 1102px of mist with 241px of blank field on
each side. Measured: the About hero was 1071px tall against Advisory's
651px and Studio's 740px, for less information and no object above the
fold.
No new colour is introduced anywhere in this file. Every value below is
an existing token already measured elsewhere in site.css; the ratios are
restated at the point of use.
========================================================= */
/* --- FIG_05 back into the hero aside -------------------------------------
`.rc-hero--even` rather than the stock 1.15fr/.85fr: the offer pages pair
a wide copy column with a narrow diagram, but this figure is a six-cell
identity card and needs a two-track measure of its own. Measured at 1280:
the 1136px shell with the stock --space-12 gap resolves to 544 / 544, the
mist field to 510, the focal card to 470, and the card's two fact columns
to 205px each, which is the measure the DS's own landing-page template
gives that same block (minmax(min(100%,400px),1fr) over two tracks). The
card now fills 92% of the field's width and 83% of its height, against
56% / 76% before. Below 1000 the base rule already collapses `.rc-hero`
to one track, so the figure goes full width on tablet and phone exactly
as it did before this pass.
Wrapped in the min-width query on purpose: site.css collapses `.rc-hero`
under 1000 with a plain `.rc-hero` selector, which this modifier ties on
specificity (0,1,0) and would beat on source order alone. Unqualified,
it kept the hero in two 213px columns at 457px wide. */
@media (min-width:1000px){
.rc-hero--even{grid-template-columns:1fr 1fr}
}
/* the figure was a sibling of the copy and carried its own 48px top margin
to separate the two. As a hero aside it aligns to the top of the copy
instead, the way FIG_02, FIG_03 and FIG_04 do — and when the hero stacks
below 1000, the separation comes from the same place it comes from on the
offer pages: the 48px grid gap plus `.rc-hero__aside`'s own 8px, 56px in
total, rather than this figure's private 48 or 32. */
.rc-hero__aside > .rc-portrait{margin-top:0}
/* the field was sized to letterbox a 620px card across the full shell. In a
544px column the card fills the stage, so the stage padding comes down
from 48/24 to 32/20 and the field's floor from 360 to 320: the mist still
reads as a field the card floats in rather than wallpaper behind it. */
@media (min-width:1000px){
.rc-portrait .au-cff__field{min-height:320px}
.rc-portrait .au-cff__stage{padding:var(--space-8) var(--space-5)}
.rc-portrait .au-cff__focal{max-width:none}
/* 32px between two 205px tracks left the values on the right hard against
the ones on the left; 20px reads as one gutter rather than two columns
drifting apart. */
.rc-profile__grid{column-gap:var(--space-5)}
}
/* --- Skills: a ledger row, not a card stapled under one ------------------
`.rc-skills` was an `.au-card` 1136x130 holding an eyebrow, one row of
eight chips and one line of note: about twelve words of information on a
full-width canvas, with no anchor and no reason to be a separate object.
It now uses the ledger's own grid, at the ledger's own width, directly
under the last sector row — so the columns rhyme instead of nearly
rhyming, and the section closes on "what carried across" as the sixth
line of the same table.
Contrast, all on --canvas #F7F8F7, all values already in use above:
label / ink #141817 16.82:1
.rc-chipgroup__note / --text-secondary 5.57:1
--border-subtle #E9ECEA 1.12:1 (structural hairline,
identical to the five rows it continues, no new boundary claimed)
The chips themselves move from --surface #FCFCFB to --canvas #F7F8F7.
Measured, that changes nothing that matters: --chip-bg #EDF0EE sat at
1.12:1 on surface and sits at 1.08:1 on canvas, and the chip border
#C3CAC7 goes 1.65:1 -> 1.57:1. Neither was ever the carrier of meaning;
the label inside is, at #5D6662 on #EDF0EE = 5.17:1, unchanged. */
/* Stacked, not a two-column row: the row form existed so the label would
line up with `.rc-rail__sector`. That rail is gone, and against the
`.rc-ledger` panel the same 170px column landed 18px off the panel's own
first column, which reads as a near-miss rather than an alignment. The
label sits above its chips and both start at the shell edge. */
.rc-skills{display:flex;flex-direction:column;gap:var(--space-4);
padding-top:var(--space-6);border-top:1px solid var(--border-subtle)}
/* same face, weight and tracking as .rc-ledger__sector: the rhyme is the
point, and it also lifts the label off --text-tertiary, which the eyebrow
it replaced was using at 3.71:1 on canvas. */
.rc-skills__label{font:600 16px/24px var(--font-sans);letter-spacing:-.015em;color:var(--text-primary)}
.rc-skills__body{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.rc-skills__body .rc-chipgroup__note{margin:0}
/* =========================================================
22. /blog/prompt-context-harness-loops/ — third pass (art direction)
§20 built the article and §21 gave it five section palettes. What was
left, seen at 1280 over the full 11,572px scroll, was rhythm: the four
numbered section openers carried less weight than the sub-headings
inside them, the nine figure cards read as one procession of boxes,
and the piece ended on an exit link before its own conclusion.
Everything below is spacing, scale, alignment and the re-use of the
ramp §21 already authored. NO NEW COLOUR is introduced. Every value
that carries text or a meaningful graphic is named with the ratio it
measures on the surface it actually lands on:
ink #141817 on --surface #FCFCFB 17.44:1
--sec-ink on --surface: s1 6.11 · s2 7.68 · s3 9.72 · s4 8.61 · s5 6.08
--sec-ink on its own 20% figure wash (worst stop per family):
s1 5.63 · s2 7.18 · s3 8.76 · s4 7.80 · s5 5.36
--chip-border #C3CAC7 on --canvas #F7F8F7 1.57:1 (decoration only)
========================================================= */
/* --- The cover stops being 270px of silence ------------------------------
The head opened on a 721 × 270 aurora field with nothing in it, then
repeated the four-word ladder as a grey mono line underneath. On /blog/
the same field carries the piece's name and reads as a cover; here it
read as a gradient the reader has to scroll past before the title.
The ladder now sits ON the field, as an opaque white pill — the DS's
rule for an object on a light silk, and the same device the §21 field
uses 9,000px below, so the two fields on this page are one family.
.au-tile is already flex-centred with 28px of padding (components.css
157), so the pill needs no layout of its own; only a stacking context,
because the five silk layers are absolutely positioned siblings that
come first in the DOM.
Ink on the pill's own --surface fill measures 17.44:1. White text was
not an option and was not measured as one: on the upskilling silk stops
it runs 1.44 → 1.78:1. */
.rc-article__coverpill{
position:relative;z-index:2;
background:var(--surface);color:var(--text-primary);
border-radius:var(--radius-full);padding:var(--space-2) var(--space-5);
box-shadow:var(--elev-pill);
}
/* --- The four section openers get the weight they were owed --------------
Measured before: a section opener took margin-top 48px and its H2 was
32px; the H3s inside it ("What it is", "How it works", "Example",
"Limitations") took 32px and 24px. So the largest structural break on
an 11,572px page was worth 16px and 8px more than a paragraph heading,
four times in a row, and the eye had nothing to catch.
Two changes survive; a third was superseded, no new ink:
1. 96px above the opener against 40px above an H3 — a 2.4:1 ratio where
it was 1.5:1. This now lives on `.rc-secfield` alone (below), since
all five openers are fields.
2. SUPERSEDED 2026-07-27. This point set the opener's gradient rule to
4px and gave it 16px of clearance, and explained why it stayed on
the 38rem text edge rather than running the full 721px column. The
rule itself is gone: every opener is now a full-width silk field
(see §21's "five fields, one treatment"), so the three
`.rc-prose > .rc-secmark` declarations that lived here are removed
rather than left pointing at a class no page uses. The 38rem-edge
argument is preserved above because it still governs every text
child of .rc-prose.
3. The type scale steps cleanly. It was 40 / 32 / 24 / 16 — ratios
1.25, 1.33, 1.50, with the smallest step at the biggest jump. It is
now 40 / 38 / 22 / 16 on desktop (the H1 keeps its own axis: it is
centred, on a cover, and 9,000px away from the last H2), and
40 / 30 / 20 / 16 below 768. The H2:H3 ratio goes 1.33 → 1.73.
Colour does none of this work: the H2 stays ink and the rank is set by
size, weight and air, as the DS's hierarchy order requires. */
.rc-longread .rc-prose > h2{font-size:30px;line-height:36px}
.rc-longread .rc-prose > h3{font-size:20px;line-height:26px;
margin-top:var(--space-10);margin-bottom:var(--space-2)}
@media (min-width:768px){
.rc-longread .rc-prose > h2{font-size:38px;line-height:44px}
.rc-longread .rc-prose > h3{font-size:22px;line-height:28px}
}
/* All five openers are silk fields and all five take the same 96px, which
is what makes a chapter break outrank an H3's 40px by 2.4:1.
Same specificity as §21's own rule (0,2,0); this sheet is concatenated
after it, so source order decides — stated because it is fragile. */
.rc-longread .rc-secfield{margin-top:var(--space-24)}
/* --- Nine figure cards stop reading as nine boxes ------------------------
§21 washed each card in its family at 20%, which is the ceiling AA
holds at, and at 20% the top stop of dawn is #EBF4FA — 1.05:1 against
the card it sits on. Correct as a hint, invisible as a signal: from
any distance the nine cards were nine grey rectangles.
Each card now opens on the SAME ramp its section opener does. Nothing
new is drawn: it is §21's gradient, re-used, so a figure and the
heading it belongs to are visibly the same object. --sec-ink is the
only legible stop and measures 6.11 → 9.72:1 on --surface, well past
the 3:1 a meaningful graphic owes; the trailing silk stops fall to
1.15 → 1.64 and carry nothing, exactly as at the openers, because
every figure also states its section in the FIG_ label beside it.
Authored as a pseudo-element flex ITEM, not an absolutely positioned
bar: .rc-fig is already a flex column with a 16px gap, so the ramp
inherits the card's own spacing and cannot overlap the abbr popover
that §20 positions inside these cards.
FIG_B1 carries no [data-sec] and so takes no ramp: it belongs to no
single section — it is the legend for all four. */
.rc-longread .rc-fig[data-sec]::before{
content:"";display:block;flex:none;height:3px;width:100%;
border-radius:var(--radius-full);
background:linear-gradient(90deg,
var(--sec-ink) 0%, var(--sec-1) 30%, var(--sec-2) 62%, var(--sec-4) 100%);
}
/* The four glyphs in FIG_B4 and the three in FIG_B7 took --accent-graphic,
this build's fixed teal (#0D9488). In the jade section that agreed by
accident; in FIG_B7 it put three teal icons on a blossom card, the only
object on the page ignoring the section it is in. They take the family's
deep stop like every other mark on the card: 5.36 → 8.76:1 measured on
the worst stop of each family's own wash, against 3:1 for a graphic.
(0,3,1) against `.rc-fig__item svg` at (0,1,1) — the shape is stated,
not assumed, per CLAUDE.md §4.7.) */
.rc-longread .rc-fig[data-sec] .rc-fig__item svg{color:var(--sec-ink)}
/* The mono label column of .rc-fig__parts inherits align-items:center from
.rc-fig__lab, so against a two-line value it drifts to the middle of the
row: measured in FIG_B8, "RUNS" sat 10px below the first line it names,
and the same in FIG_B6 for TOOLS and COMPLETION RULE. Both label and
value are set on a 20px line box, so flex-start puts the two first lines
on one baseline and the label column becomes scannable.
.rc-fig__parts--quote already declares flex-start for its own reason
(§20) and is unaffected. */
.rc-longread .rc-fig .rc-fig__lab{align-items:flex-start}
/* FIG_B5's two panels are grid cells and stretch to the taller one, which
left ~110px of dead --surface-subtle under the assistant panel's last
line. The closing sentence belongs at the foot of the panel anyway — it
is a note on the panel, not a fourth item in it — so it takes the slack
instead of the void. */
.rc-longread .rc-fig .rc-fig__panel > .rc-fig__desc{margin-top:auto}
/* --- The two run-in lists stop being a grey slab -------------------------
Two lists in the body are introduced by a colon and then set flush with
the prose that introduced them. The context-engineering checklist is
five three-line items: 460px of unbroken --text-secondary, the densest
passage in the piece, and the point where the scroll stalls.
They are set off as quoted matter — a hairline in the gutter, the same
left-rule device FIG_B2's quotation uses — and the rows open from 8px
to 12px. --chip-border measures 1.57:1 on --canvas and is decoration
only: every item still carries its own bullet, so nothing depends on
the rule being seen (WCAG 1.4.11 covers graphics required to understand
the content).
Scoped to `> ul`, direct children of .rc-prose, so the six lists inside
figures — which §17b deliberately strips back to plain rows — are not
touched. */
.rc-longread .rc-prose > ul{
margin-top:var(--space-5);
padding-left:var(--space-5);
border-left:2px solid var(--chip-border);
gap:var(--space-3);
}
.rc-longread .rc-prose > ul > li{padding-left:var(--space-4)}
/* --- The ending stops apologising ----------------------------------------
"Back to field notes" sat at 10,624px and the closing ink panel at
10,704px: the reader was handed the exit before the conclusion, and the
conclusion arrived 32px after a 12px mono line. The link now follows the
panel — it is the route onward from the piece, not its last sentence —
and the panel gets 64px of arrival, the same order of air the section
openers take, so the piece closes on its own statement. */
.rc-longread__body > .rc-inkpanel{margin-top:var(--space-16)}
.rc-longread__body > .rc-backlink{margin-top:var(--space-8)}
/* =========================================================
24. Each chapter becomes one large rounded surface.
Owner, 2026-07-27: "can you also make each sub section into a big
squircle?"
WHAT CHANGED IN THE MARKUP, and why it is shaped this way.
The five chapters were a flat run of siblings inside .rc-prose: an
opener, an H2, some H3s, paragraphs and figures, then the next opener.
Nothing wrapped them, so there was no box to round. Each chapter is
now a carrying BOTH `rc-prose` and `rc-chapter`.
Carrying rc-prose again is deliberate and load-bearing. Fourteen rules
in this stylesheet address the article's text through the direct-child
combinator — `.rc-longread .rc-prose > p`, `> h2`, `> h3`, `> ul`,
`> ol`, `> blockquote`, `> .rc-eyebrow`, and §17's `> * + *` and
`> :first-child`. Introducing any other wrapper class would have
silently detached every one of them from every paragraph on the page:
the 38rem measure, the centring, the 38px H2, the quoted-list gutter,
the 16px paragraph rhythm. Re-declaring rc-prose keeps each chapter's
children direct children of an .rc-prose element, so all fourteen keep
matching, unchanged, with no selector rewritten. Measured after the
change: paragraph box 608px, exactly what it was before.
The section also takes aria-labelledby pointing at its own H2, so the
five chapters become named regions rather than anonymous divs.
THE RADIUS: 28px, --radius-sheet.
Three values were put on the page and looked at at both widths.
20px (--radius-panel) is what .rc-secfield and .rc-inkpanel already
use. At 785px wide the corner is 2.5% of the edge and the change
does not read: the chapter looks like a slightly wider version of
the panel already inside it.
40px reads at 1440 and fails at 375. The chapter box there is 361px,
so two 40px corners consume 22% of the width, and the top corners
start eating into the opener pill's own capsule two rows down:
two capsule geometries 6px apart, which is the contradiction the
brief asks to avoid. It is also an invented value, outside the
DS's 10/12/16/20/28 ladder.
28px is the largest radius the DS authorises for a surface
("--radius-sheet: mobile sheets, immersive media"). At 375 it is
15.5% of the box width, so the corner is still an arc with a
straight run between corners, not a capsule. And it leaves a clean
concentric ladder inwards: chapter 28 -> figure cards 16, which is
the DS's "children follow parent corner geometry, one radius step
down". The opener, as the lid, takes 27px on its top corners:
28 minus the 1px border, which is the exact concentric offset.
THE OPENER BECOMES THE LID, not a floating object.
The brief allowed either. The lid wins because the opener is already a
full-bleed silk field with an opaque pill on it, which is precisely the
DS's cover-plus-body card (au-story). Floating it would have put a
20px field inside a 28px box with 32px of surface visible around it,
i.e. two radii and two edges disagreeing 32px apart. As a lid there is
one outline: it spans the full padding box via a negative inline
margin equal to the chapter's own padding, and its bottom corners go
square so the seam with the body is a straight line.
THE READING MEASURE DOES NOT MOVE, and this is the number that
governs the whole geometry. The chapter breaks OUT by exactly the
padding AND border it adds, so the content box it hands to its
children is the same 721px column .rc-prose had before:
768px up padding-inline 32 + border 1 · margin-inline -33
· content 721.3px, was 721.3px
Text children are still capped at 38rem and centred inside that, so
the paragraph box is 608px before and 608px after, and the measured
average full line is 81.4 characters before and 81.4 after, across the
same 124 lines and the same 8,206 characters. Nothing about the prose
moved; only a surface appeared behind it.
Below 768 the shell only has 16px of gutter to give, so the breakout
is 9px against 16px of padding plus the border: the chapter sits 7px
in from each screen edge (a bordered card flush to the viewport edge
reads as broken), and the column pays 16px of its 343. Measured on the
phone, that is 44.1 characters per full line before and 42.1 after.
Neither number is inside 60-80 and neither ever was: 343px of 16px
Geist cannot hold 60 characters. The 60-80 claim belongs to the
desktop column, and there it does not move at all.
NO ELEVATION. Five shadowed cards on one page would be five things
pretending to float, against `--elev-1: none` and the DS's rule that
elevation is for surfaces that actually leave the page. The chapter is
distinguished by SURFACE and a hairline instead, and it goes DOWN the
escalation rather than up: --surface-subtle #F1F3F2, one rung below
the --surface #FCFCFB the nine figure cards are painted in. So the
chapter reads as a recess and the cards inside it read as raised,
which is the correct direction and is also what rescues those cards:
a --surface card on a --surface chapter would have disappeared.
Measured on --surface-subtle, since every colour in the article now
lands on it rather than on --canvas:
--text-primary #141817 16.07:1 (was 16.82 on canvas)
--text-secondary #5D6662 5.32:1 (was 5.57)
--text-tertiary #5F6864 5.16:1 (was 5.40)
--gray-500 #7A827E 3.54:1 (was 3.71, floor 3, graphic)
--chip-border #C3CAC7 1.50:1 (was 1.57)
figure card --surface on the chapter 1.09:1, plus its hairline
chapter on --canvas 1.05:1, its border on --canvas 1.12:1
Every text colour still clears AA and --gray-500, which draws FIG_B2's
quotation rule and both diagrams' strokes, still clears the 3:1
non-text floor. --chip-border is the one value under 3, and it was
under 3 before this change too: it draws the gutter rule beside the
two run-in lists, where every item also carries its own bullet, so
nothing depends on it being seen (WCAG 1.4.11 covers graphics needed
to understand the content). The chapter's own boundary is in the same
class: it groups content that is already grouped by its opener, its
number and its heading. Nothing needed recolouring.
The chapter surface is neutral grey, so the >=85%-neutral gate is
untouched: no tinted area is added anywhere by this block.
WHAT LIVES INSIDE, checked one by one. The nine figure cards and the
two run-in lists keep their own 32px and 20px of margin, so nothing
sits on an edge. .rc-pull and the abbr popovers are ordinary flow
children of paragraphs and stay inside the 608px column, 56px clear of
the chapter's inner edge at desktop. No overflow:hidden anywhere on
the chapter, for the same reason §21 refuses it on the figure cards:
the abbr definition is absolutely positioned and clipping the box
would clip a definition. Nothing needs clipping either, because the
only child that reaches the edge is the lid, which clips itself
(.au-silk carries overflow:hidden). The closing ink panel and the
back-link are siblings of .rc-prose and sit outside all five chapters,
which is right: they close the piece, they are not part of chapter 05.
The opening paragraph and FIG_B1 also stay outside, on the canvas, so
the article's overture is visibly not a chapter. */
.rc-longread .rc-prose > .rc-chapter{
--ch-pad:var(--space-4); /* 16 */
--ch-out:var(--space-2); /* 8 */
max-width:none;
margin-top:var(--space-16);
/* the 1px is the chapter's own border: without it the box would give
back 719px where the column was 721 and the nine figures would each
lose 2px. The breakout absorbs padding AND border, so the content
box handed to the children is the old column to the pixel. */
margin-inline:calc(-1 * (var(--ch-out) + 1px));
padding:0 var(--ch-pad) var(--space-8);
background:var(--surface-subtle);
border:1px solid var(--border-subtle);
border-radius:var(--radius-sheet);
}
@media (min-width:768px){
.rc-longread .rc-prose > .rc-chapter{
--ch-pad:var(--space-8); /* 32 */
--ch-out:var(--space-8); /* 32 */
padding-bottom:var(--space-10);
}
}
/* the lid. margin-inline cancels the chapter's padding exactly, so the
field spans the padding box; 27px is 28 minus the 1px border, the
concentric offset. The 96px of air the opener used to carry is now the
chapter's own 64px margin plus the boundary itself. */
.rc-longread .rc-chapter > .rc-secfield{
margin-top:0;
margin-inline:calc(-1 * var(--ch-pad));
border-radius:calc(var(--radius-sheet) - 1px) calc(var(--radius-sheet) - 1px) 0 0;
}
/* 32px under a flush lid rather than the 20px it took when the opener
floated on the canvas: inside a card the first heading owes the same
clearance as the card's own inner padding, or the H2 reads as stuck to
the field. 24px below 768, where the padding is 16. */
.rc-longread .rc-chapter > .rc-secfield + h2{margin-top:var(--space-6)}
@media (min-width:768px){
.rc-longread .rc-chapter > .rc-secfield + h2{margin-top:var(--space-8)}
}
/* Print. §20 and §21 already flatten the opener and the figure washes;
the chapter box has to go the same way, or five 28px borders print
around 10,000px of prose and the lid keeps a radius its printed
rectangle no longer has. */
@media print{
.rc-longread .rc-prose > .rc-chapter{
background:none;border:0;border-radius:0;
margin-top:var(--space-8);margin-inline:0;padding:0;
}
.rc-longread .rc-chapter > .rc-secfield{margin-inline:0;border-radius:0}
}
/* =========================================================
23. /learning/ — art-direction pass, 2026-07-26.
Merge target: append to assets/site.css after §21.
Three fixes, all measured. Nothing here is estimated.
========================================================= */
/* --- 22.1 #expertise: the reserved air in the three format cards --------
.rc-grid > .au-gcard reserves four body lines (min-height:80px) and two
chip rows (min-height:52px) because Advisory's copy needs both: its
bodies run four lines and its three tags wrap to a second row. This
page's copy needs neither. Measured at 1280:
body 60px of text / 80px reserved in all three cards
chips 20px of chip / 52px reserved in all three cards
Reserved space is invisible but it is not free: it lands as the gap
between the blocks it separates. Measured gaps between visible ink,
this page against Advisory, which is the bar:
kicker -> body 20px / 20px ok
body -> chips 48px / 28px 1.7x
chips -> mono 36px / 20px 1.8x
So the lower half of every card read as a hole, and all three read it
at once: a 430px card carrying 364px of content against Advisory's 430
carrying 430. The reserves come down to the measured content and the
body->chips gap is then set explicitly, at Advisory's 28px, so the
rhythm is authored rather than left over. Card: 430 -> 394.
4px flex gap + 24px margin = 28px, and chips -> mono returns to
4 + 16 (the mono block's own centring slack) = 20.
The body reserve only drops at and above 1100px, which is where all
three bodies measure three lines; the chip reserve only at and above
1200px, which is where all three chip rows measure one row. Below each
threshold the site.css reserve still applies and still lines the row
up, so nothing regresses at 1024 or on the 2-up and 1-up grids. The
kicker reserve is not touched: its 16px of trailing air IS the 20px
gap, and it matches the bar already.
Scoped by the .rc-grid--tight modifier on this page's grid only, so
/advisory/ and /studio/ keep the reserves they need. The doubled class
in the selector is deliberate: it has to beat the (0,3,0) and (0,2,0)
rules above it whatever order the sheets end up in. */
@media (min-width:1100px){
.rc-grid.rc-grid--tight > .au-gcard .au-gcard__body{min-height:60px}
}
@media (min-width:1200px){
/* one .au-chip is 20px tall and the is display:flex around it */
.rc-grid.rc-grid--tight > .au-gcard .rc-chips{
min-height:20px;margin-top:var(--space-6);
}
}
/* --- 22.2 #catalogue: the level column ----------------------------------
Twelve rows exist to be read down one right-hand column, and that column
did not read as one. .au-tag--neutral ships a hairline
(--chip-border #C3CAC7, 1.62:1 on --surface #FCFCFB) while
.au-tag--blue and .au-tag--violet ship border-color:transparent over a
fill that measures 1.11:1 and 1.14:1 against the same surface. So
"Beginner" read as a pill and "Intermediate" and "Advanced" read as bare
tinted words: two of the three levels lost the object the section's lead
calls a chip. The three also measured 68, 89 and 73px wide, so the
column had a ragged left edge on every one of the twelve rows.
Fix one: a single width, so the column is a column.
Fix two: the same hairline on all three, at the same optical weight the
DS gives the neutral chip. Each border is the tag's OWN foreground mixed
into the surface, so no hue enters that the chip did not already carry:
33% --tag-blue-fg #1668C9 -> #B0CBEA = 1.63:1 on #FCFCFB
31% --tag-violet-fg #6941C6 -> #CEC2EB = 1.63:1 on #FCFCFB
against the DS neutral's 1.62:1. This is a boundary between two objects
of the same family, not a meaningful graphic, which is why 1.6:1 is the
right band and why the DS's own --chip-border sits there.
color-mix rather than a literal so the pair follows the tag tokens if
the sheet is ever read under [data-theme="dark"]. */
@media (min-width:600px){
.rc-cat__row > .au-chip{min-width:88px;justify-content:center}
}
.rc-cat__row > .au-tag--blue{
border-color:color-mix(in srgb, var(--tag-blue-fg) 33%, var(--surface));
}
.rc-cat__row > .au-tag--violet{
border-color:color-mix(in srgb, var(--tag-violet-fg) 31%, var(--surface));
}
/* --- 22.3 #catalogue: the tool band -------------------------------------
1200 x 100px of iris field carrying a 620px row of five pills centred in
it: ~290px of empty field at each end, 32px above and below a 36px row,
and not one visible word saying what the band is. The only label was the
's aria-label, which nothing renders. A 100px chromatic slab with a
hole in the middle and no reading is colour landing as decoration, which
is the one thing a field moment is not for.
The band's label becomes visible and takes the left of the row; the
pills take the rest and start where the label ends, so both ends of the
field are occupied and the band has a reading. Padding drops from
32/24 to a flat 24, which is what the row needs once it is full.
The label is text sitting ON silk, so it is measured against the field,
not the canvas. --accent-deep #4C2D93 against the four stops
.au-silk--sheer is built from:
iris-1 #CABDF8 5.77:1
iris-2 #AAC2F9 5.61:1 <- the floor
iris-3 #A6DDF7 6.80:1
iris-4 #F3C2E5 6.49:1
5.61:1 is the measured minimum, and the field's white bloom only lifts
it. The DS default for a mono label, --text-tertiary #5F6864, tops out
at 3.33:1 on the same stops and fails: the CLAUDE.md rule that no muted
grey survives a tinted field, holding again. White is not available
either (1.47 to 1.78:1 raw on these stops). Ink or --accent-deep were
the two options and --accent-deep is the one that reads as a label
rather than as a heading.
Selectors carry .au-silk twice so they beat the (0,3,0) band rules in
§15 whatever order the sheets end up in. */
.rc-shell > .au-silk.au-silk--sheer{
display:flex;align-items:center;gap:var(--space-6);
padding:var(--space-6);
}
.rc-shell > .au-silk.au-silk--sheer > .rc-chips{
justify-content:flex-start;flex:1 1 auto;
}
/* .rc-band__label removed on Redha's call: the band carries its name in the
list's aria-label instead, so the row is five tool pills and nothing else. */
@media (max-width:899px){
/* below this the label and five pills cannot share a row without the
pills breaking into a three-line rag, which is what the band looked
like at 375 before this pass */
.rc-shell > .au-silk.au-silk--sheer{
flex-direction:column;align-items:flex-start;
gap:var(--space-4);padding:var(--space-5);
}
}
/* =========================================================
--- learning: practical + engagement --- (2026-07-26)
Two sections of /learning/ that measured as text grids rather than design.
Nothing here is used by any other page.
ARBITRATION ON COLOUR. /learning/ already spends four silk fields (three
aurora format tiles in #expertise, one sheer tool band closing #catalogue),
so the DS budget of two field moments per marketing page is gone before
either of these sections starts, and #practical sits directly under the
band: a coloured field here would also be two consecutive coloured
sections. Both sections are therefore rebuilt on the first five rungs of
the DS hierarchy order (contrast, size, weight, spacing, position) plus one
step of surface, and reach for no new hue at all. The page hue survives
only where it already was: the iris glyph inside .rc-iconsq and the
--accent-deep ordinal and chevron.
========================================================= */
/* --- #practical: the logistics sheet ------------------------------------
Before: six identical cells in a 3-up hairline grid, 1136x275, sitting
directly under #catalogue's 1136x649 bordered panel. Two full-width
bordered slabs in a row read as one repeated container, and inside the
second one nothing was louder than anything else: label, title and body
restated the same fact three times at three sizes.
After: the section head leaves the top of the shell and becomes a left
rail, so the section silhouette stops matching the one above it, and the
six facts become one column of rows with a third column of values. The
value column is what the width was for: it turns a paragraph into a spec
sheet you can scan down without reading. */
.rc-logi{
display:grid;
grid-template-columns:minmax(0,300px) minmax(0,1fr);
gap:var(--space-12);
align-items:start;
}
/* the head is inside the grid now, so its own bottom gap would double the
column gap */
.rc-logi__head{margin-bottom:0;max-width:none}
.rc-logi__list{
list-style:none;margin:0;
padding:0 var(--space-6);
background:var(--surface);
border:1px solid var(--border-subtle);
border-radius:var(--radius-panel);
}
/* the rows are separated by the divider rung of the surface escalation, not
by six more borders: a bordered card inside a bordered panel is the "never
nested bordered cards" case. */
.rc-logi__row{
display:grid;
grid-template-columns:36px minmax(0,1fr) minmax(0,max-content);
align-items:center;
gap:var(--space-4);
padding:var(--space-5) 0;
}
.rc-logi__row + .rc-logi__row{border-top:1px solid var(--border-subtle)}
.rc-logi__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.rc-logi__title{font:var(--title-weight) 17px/24px var(--font-sans);letter-spacing:var(--title-track);color:var(--text-primary)}
.rc-logi__body{font:var(--body-sm-weight) var(--body-sm-size)/var(--body-sm-line) var(--font-sans);color:var(--text-secondary)}
/* The value is data, not metadata, so it is ink (#141817 on #FCFCFB =
17.44:1) rather than --text-tertiary, which the DS restricts to metadata
and which measures 3.84:1 here. Mono + tabular figures because that is the
machine-value face the rest of the site uses, and uppercase from CSS as the
voice rules require. */
.rc-logi__value{
font:var(--meta-weight) var(--meta-size)/var(--meta-line) var(--font-mono);
font-variant-numeric:tabular-nums;
letter-spacing:.06em;text-transform:uppercase;
color:var(--text-primary);
text-align:right;
white-space:nowrap;
}
@media (max-width:1023px){
/* under ~1000 the left rail squeezes the rows below a readable measure, so
the head goes back on top and keeps its own region gap */
.rc-logi{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
}
@media (max-width:600px){
/* 375 - 64 shell - 48 list padding - 36 square - 16 gap leaves 211px, which
a nowrap value would push past the viewport. It drops to its own line
under the copy instead, still in column 2. */
.rc-logi__list{padding:0 var(--space-4)}
.rc-logi__row{grid-template-columns:36px minmax(0,1fr);align-items:start;row-gap:var(--space-2)}
.rc-logi__value{grid-column:2;text-align:left;white-space:normal}
}
/* --- #engagement: the method sequence -----------------------------------
Before: three 357x323 cards with a bare 24px chevron floating in the 32px
gap. Measured, the only thing carrying the order was an 12px ordinal
inside the step label, and the chevron had nothing to sit on, so the row
read as three cards rather than one sequence.
After: a hairline rail is drawn across each gap and the chevron sits on it
inside a white node, which is the same construction the site's figures use;
the ordinal leaves the step label and becomes a 28px numeral anchored to
the far corner of each card; and the deliverable stops being a paragraph
behind a divider and becomes a tonal tray across the foot of the card, so
"each step produces a deliverable" is visible before it is read. */
.rc-flow{gap:var(--space-10)}
/* Rail and node removed on Redha's call: a 1px hairline crossing the gutter
and a 28px bordered disc read as a bug, not as a connector, because the
disc sat ON the rail and the two strokes met at a tangent. The arrow now
stands alone in the gutter, with nothing drawn behind or around it. */
.rc-flow__cell::after{content:none}
.rc-flow__arrow{
right:calc(var(--space-10) * -1);
width:var(--space-10);height:20px;
background:none;
border:0;
border-radius:0;
}
.rc-flow__arrow svg{width:20px;height:20px}
/* the step row: glyph, name, then the ordinal pushed to the far corner */
.rc-flowcard__top{justify-content:flex-start}
.rc-flowcard__step{flex:1;min-width:0}
/* the site's own --text-tertiary (#5F6864, not the DS's #7A827E) measures
5.60:1 on --surface, so the numeral clears AA for normal text and does not
have to lean on the 24px large-text exemption its size would allow. It
stays aria-hidden: the already carries the order for anyone not
looking at it. */
.rc-flowcard__ord{
font:450 28px/28px var(--font-mono);
font-variant-numeric:tabular-nums;
color:var(--text-tertiary);
flex:none;
}
/* the deliverable tray. Full-bleed to the card edges by cancelling the 24px
padding, bottom corners one step inside the card's 16px border. Tonal
group, not a nested bordered card. */
.rc-flowcard__out{
margin:auto calc(var(--space-6) * -1) calc(var(--space-6) * -1);
padding:var(--space-4) var(--space-6);
background:var(--gray-50);
border-top:1px solid var(--border-subtle);
border-radius:0 0 calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px);
gap:var(--space-2);
}
/* MEASURED. The DS's own --text-tertiary (#7A827E) on --gray-50 #F1F3F2 is
3.54:1, under the 4.5:1 this 12px label needs; the site's corrected
#5F6864 would scrape through at 5.16:1. The label takes --text-secondary
#5D6662 (5.32:1) rather than either, because on a tonal tray the label and
its value are one statement and tertiary is metadata-only by DS rule. The
ink value beside it is 16.07:1, the check glyph 8.96:1. */
.rc-flowcard__outlabel{
color:var(--text-secondary);
display:flex;align-items:center;gap:var(--space-2);
}
.rc-flowcard__check{flex:none;color:var(--accent-deep,var(--text-secondary))}
@media (max-width:899px){
.rc-flow{gap:var(--space-6)}
.rc-flow__cell::after{display:none}
}
/* The site had no visually-hidden utility, which is why the ledger's column
headers ended up `aria-hidden` with nothing replacing them: visually a
three-column table, but to a screen reader three unlabelled spans in a
list item. `clip-path:inset(50%)` keeps the text in the accessibility
tree while taking it out of the layout; `white-space:nowrap` stops the
1px box from wrapping the string into a tall sliver that some engines
still expose to find-in-page. */
.rc-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* =========================================================
--- about: evidence ---
/about/ #track-record, second pass.
WHAT WAS WRONG. The section was five `.rc-rail` rows: a 170px ink
sector name, a 15px grey sentence, a hairline under each. Measured at
1440 it was 1136 x 352.5 of two-column text with no third level of
hierarchy anywhere in it, no quantity, no column header, and a sixth
row (`Skills`, 1136 x 125) built on the same grid, so eight neutral
chips read as if a sixth sector were called "Skills". Nothing in it
was larger, heavier or darker than anything else, so nothing in it
was evidence: it was a two-column contact sheet.
WHAT IT IS NOW. One bounded ledger:
· a figures strip, three quantities already stated elsewhere on the
site (2018 / 5 sectors / 3 roles), set in tabular figures at the
DS `Figure` md size;
· a mono column header, which is what turns the rows below it into
a record rather than a list;
· five rows on three columns: sector (ink, title size), scope
(ink, label weight), the work (--text-secondary).
Skills leaves the ledger and closes the section on canvas, so it can
no longer be misread as a sector.
NO NEW COLOUR, AND THAT IS THE DESIGN. /about/ already spends both
of its field moments: FIG_05 (mist) in the hero and `.rc-sealfield`
(mist) in #credentials. #practices sits between them carrying three
88px silk tiles. A fourth chromatic moment here would be the third
field on the page AND would sit immediately before #credentials,
which the DS forbids twice over ("two per marketing page, never
consecutive sections"). Evidence is therefore built entirely on the
first four rungs of the DS hierarchy order: contrast, size, weight,
spacing. The page rhythm stays colour / neutral / colour.
NO BARS, EITHER. The reference panel that inspired this section drew
a segmented intensity bar per row. Two rules kill it: the DS removed
`UsageMeter` outright ("State the number, do not draw it", and a
filled track reads as a warning even when nothing is wrong), and
there is no per-sector intensity figure anywhere on this site, so
any bar would be an invented quantity. The scope column carries the
same information in a word lifted from each row's own sentence
(programme / platform / service / delivery / analysis), and the
rows are ordered largest first, which the lead now states.
CONTRAST, measured, on the ledger's own --surface #FCFCFB:
ink #141817 17.44:1 values, sectors, scope
--text-secondary #5D6662 5.77:1 column heads, notes, work
--text-tertiary #7A827E 3.84:1 NOT USED for text here
--border-subtle #E9ECEA 1.16:1 decoration only
`--text-tertiary` is the reason `.rc-ledger__note` moved off it: the
old `.rc-rail__note` set the confidentiality line at 12px in
--text-tertiary on --canvas, which measures 3.71:1 and fails 1.4.3.
It is now --text-secondary at 5.57:1 on canvas.
========================================================= */
.rc-ledger{
background:var(--surface);
border:1px solid var(--border-subtle);
border-radius:var(--radius-panel);
overflow:hidden;
}
/* --- the figures strip --------------------------------------------------
Three cells, hairline-divided, no outer boxes: a bordered card inside a
bordered panel is the DS's "never nested bordered cards". The value is
28px, the DS `Figure` md size, deliberately under the 32px section h2 so
the numbers read as the section's evidence and not as its title. The DS
allows 36px only for a single headline figure, never a row of them. */
.rc-ledger__figs{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
border-bottom:1px solid var(--border-subtle);
}
.rc-ledger__fig{
display:flex;flex-direction:column;gap:var(--space-2);
padding:var(--space-8);min-width:0;
}
.rc-ledger__fig + .rc-ledger__fig{border-left:1px solid var(--border-subtle)}
.rc-ledger__figlabel{
font:var(--label-weight) var(--label-size)/var(--label-line) var(--font-sans);
color:var(--text-secondary);
}
.rc-ledger__figvalue{
font:600 28px/32px var(--font-sans);letter-spacing:-.024em;
color:var(--text-primary);font-variant-numeric:tabular-nums;
}
.rc-ledger__fignote{
font:400 13px/19px var(--font-sans);color:var(--text-secondary);text-wrap:pretty;
}
/* --- the column header --------------------------------------------------
The one thing the old rail had no version of, and the thing that makes
the five rows read as a record. Uppercase is allowed here because it is
a machine label in the mono face, applied from CSS, per the voice rules;
the markup carries sentence case. */
.rc-ledger__head,
.rc-ledger__row{
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr) minmax(0,2.1fr);
column-gap:var(--space-8);
}
.rc-ledger__head{
padding:var(--space-4) var(--space-8);
background:var(--surface-subtle);
border-bottom:1px solid var(--border-subtle);
}
.rc-ledger__col{
font:var(--meta-weight) var(--meta-size)/var(--meta-line) var(--font-mono);
letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);
}
/* --- the rows -----------------------------------------------------------
20px of vertical padding gave the old rail 65.5px rows that scanned as
one grey block; 24px plus a two-line-capable work column puts real air
between five records without inflating the section. */
.rc-ledger__rows{list-style:none;margin:0;padding:0}
.rc-ledger__row{
padding:var(--space-6) var(--space-8);
align-items:baseline;
}
.rc-ledger__rows > li + li{border-top:1px solid var(--border-subtle)}
.rc-ledger__sector{
font:var(--title-weight) 17px/24px var(--font-sans);letter-spacing:-.015em;
color:var(--text-primary);
}
/* scope is ink at label weight, not a chip and not grey: it is the second
fact in the row, and the page already carries eight neutral chips fifty
pixels below. A ninth group of grey capsules here would be the "sea of
identical grey pills" this build has already had to undo once. */
.rc-ledger__scope{
font:var(--label-weight) 14px/24px var(--font-sans);
color:var(--text-primary);
}
.rc-ledger__what{
font:400 15px/23px var(--font-sans);color:var(--text-secondary);text-wrap:pretty;
}
.rc-ledger__note{
margin-top:var(--space-4);
font:var(--meta-weight) var(--meta-size)/var(--meta-line) var(--font-sans);
color:var(--text-secondary);
}
/* --- Skills, detached ---------------------------------------------------
Outside the ledger, on canvas, with the region gap the DS gives two
distinct regions. Inside the old rail it was a sixth row on the same
grid and read as a sixth sector. */
.rc-skills{margin-top:var(--space-12)}
/* --- narrow -------------------------------------------------------------
Below 900 the three-column row folds to two lines: sector and scope
share the first (scope pushed to the end so the two facts bracket the
line), the sentence takes the full width underneath. Below 620 the
figures strip stacks and its dividers turn horizontal. Every column is
minmax(0,…) so nothing can push the row wider than the panel. */
@media (max-width:899px){
.rc-ledger__head{display:none}
.rc-ledger__row{
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:"sector scope" "what what";
row-gap:var(--space-2);align-items:baseline;
padding:var(--space-5) var(--space-6);
}
.rc-ledger__sector{grid-area:sector}
.rc-ledger__scope{grid-area:scope;justify-self:end;text-align:right;line-height:24px}
.rc-ledger__what{grid-area:what}
.rc-ledger__fig{padding:var(--space-6)}
}
@media (max-width:619px){
.rc-ledger__figs{grid-template-columns:1fr}
.rc-ledger__fig + .rc-ledger__fig{
border-left:0;border-top:1px solid var(--border-subtle);
}
.rc-ledger__row{
grid-template-columns:minmax(0,1fr);
grid-template-areas:"sector" "scope" "what";
row-gap:var(--space-1-5);
}
.rc-ledger__scope{justify-self:start;text-align:left;line-height:20px}
}
/* =========================================================
--- article: final pass ---
/blog/prompt-context-harness-loops/ — fourth and final pass.
§20 built the article, §21 gave it five section palettes, §22 fixed
the scale and the ending order. What is left, measured at 1440x900
over the full 12,074px scroll and at 375x812 over 16,796px, is
grouping: which objects belong together, and which mark outranks
which. Everything below is spacing, scale, alignment and width.
NO NEW COLOUR is introduced and no hue moves.
Ratios restated on the surface each value actually lands on:
ink #141817 on --canvas #F7F8F7 16.82:1
secondary #5D6662 on --canvas 5.57:1
tertiary #5F6864 on --canvas 5.40:1
--sec-ink on --surface: s1 6.11 · s2 7.68 · s3 9.72 · s4 8.61 · s5 6.08
--chip-border #C3CAC7 on --canvas 1.57:1 (decoration only)
========================================================= */
/* --- 1. The masthead had one gap for four different joins ---------------
Measured: cover -> title 16px, title -> deck 16, deck -> meta 16,
meta -> tags 16. `.rc-article__head` is a flex column with a single
16px gap, so an image, a title block and a metadata cluster were all
spaced as if they were the same kind of neighbour, and the head read
as five stacked items rather than one masthead.
Three tiers instead, from an 8px base:
cover -> title 8 + 32 = 40 (image, then the piece)
title -> deck 8 + 8 = 16 (one title block)
deck -> meta 8 + 24 = 32 (the piece, then who and when)
meta -> tags 8 (one metadata cluster)
And the head now closes on 64px rather than 40: it was handing the
contents band the same separation the contents band hands the body,
while a chapter opener 700px below takes 96. */
.rc-article__head{gap:var(--space-2);margin-bottom:var(--space-16)}
.rc-article__head > .rc-article__title{margin-top:var(--space-8)}
.rc-article__head > .rc-article__deck{margin-top:var(--space-2)}
.rc-article__head > .rc-article__meta{margin-top:var(--space-6)}
/* 40 -> 48: the band is a card and needs to sit off the first paragraph
by more than the 40px two paragraphs of a list are worth. Written as a
child selector (0,2,0) so it also beats §21's own `.rc-toc` rule
inside @media (min-width:1200px), which a later (0,1,0) would tie
rather than win. */
.rc-longread > .rc-toc{margin-bottom:var(--space-12)}
/* --- 2. The H1 was 40 against an H2 of 38 -------------------------------
§22 set the body scale to 40/38/22/16 and left the H1 on the DS's
--h1-size. Measured, that is a 1.05 ratio between the title of the
piece and each of the five headings inside it: the largest type on a
12,074px page outranked a section heading by two pixels.
The DS already has the step above h1 for exactly this case:
--display-size 48/52 (typography.css:12), 36/40 below 768
(typography.css:26). Using it rather than inventing a size:
48 / 38 / 22 / 16 -> 1.26 · 1.73 · 1.38 (was 1.05 · 1.73 · 1.38)
The title goes from three lines to four at 1440 (132px -> 216px). That
is a cover title on its own axis, 9,000px from the nearest H2, which is
the argument §21 already makes for centring it. Tracking follows the
size to --display-track (-.03em), the DS's own pairing. */
.rc-article__title{font-size:36px;line-height:40px;letter-spacing:var(--display-track)}
@media (min-width:768px){
.rc-article__title{font-size:var(--display-size);line-height:var(--display-line)}
}
/* --- 3. Nine centred lines before the first word, at 375 ----------------
§21 centres the head because at 40/44 over three lines the title reads
as a cover. Measured at 375 that argument inverts: the H1 sets five
lines and the deck four, so the reader meets nine centred lines with a
ragged edge on both sides, and then the body switches to a left axis.
Below 768 the head takes the body's axis, so the page has one.
The desktop centring is untouched. */
@media (max-width:767px){
.rc-article__head{text-align:left}
.rc-article__head > .rc-article__deck{margin-inline:0}
.rc-article__head .rc-article__meta,
.rc-article__head .rc-article__tags{justify-content:flex-start}
}
/* --- 4. A separator starting a line ------------------------------------
§20 puts the dot between the four meta facts in generated content
inside the flex gap. At 375 the row wraps and line two opened on
"· UPDATED 20 JULY 2026": a dangling separator, the one typographic
defect visible in the first screen on a phone.
The fourth fact takes its own line by construction rather than by
luck, and drops its dot. (0,2,1) against §20's (0,1,1). */
@media (max-width:599px){
.rc-article__meta > :nth-child(4){flex-basis:100%;margin-top:var(--space-1)}
.rc-article__meta > :nth-child(4)::before{content:none}
}
/* --- 5. The chapter opener and the figure card drew the same mark -------
Measured: a section opener is a 4px full-width (608px) gradient rule;
a figure card is a 3px full-width (721px) gradient rule, same ramp,
same radius, same family. One pixel of height and 113px of width apart
is not a difference at reading distance, and there are nine figures to
four openers, so the strongest structural mark on the page was also
its most repeated one.
Worst screens, at 1440x900:
opener 02 at y=2862 and FIG_B3's ramp at y=3490 (628px apart)
FIG_B3 at y=3490 and FIG_B4 at y=3919 (429px apart)
the silk field at y=9499 and FIG_B9's ramp at 9903 (404px apart)
i.e. two identical chromatic rules in one screen, three times over,
and once in the same screen as the page's single silk field.
The ramp is NOT removed: §22 measured why it exists (the 20% wash
under it is 1.05:1 and invisible on its own). It becomes a tab. At
88px the --sec-ink stop still occupies 0 -> 26px, unchanged at
6.11 -> 9.72:1 on --surface against the 3:1 a meaningful graphic
owes, and it stays redundant by construction: the FIG_ label directly
beneath it carries the same --sec-ink, and names the figure in words.
What changes is that one full-width chromatic rule per screen now
means one chapter, and nothing else on the page draws that mark. */
.rc-longread .rc-fig[data-sec]::before{width:88px}
/* --- 6. The largest objects had the least air --------------------------
Measured: `.rc-fig` carries 32px top and bottom inside the prose,
while an H3 takes 40px above it. So a 510px figure card was bound to
its neighbours more tightly than a 28px sub-heading, nine times.
40 above / 48 below: the figure still binds to the sentence that
introduces it (40 = the H3's own step) and releases into what follows.
Costs 9 x 24px = 216px of a 12,074px page. (0,3,0) against §17b's
`.rc-prose .rc-fig{margin:var(--space-8) 0}` at (0,2,0). */
.rc-longread .rc-prose > .rc-fig{
margin-top:var(--space-10);margin-bottom:var(--space-12);
}
/* --- 7. Two pull-quotes, and not one new word --------------------------
The densest passage in the piece is its conclusion: seven paragraphs
from y=10422 to y=11046, 624px of unbroken --text-secondary at 16/24
with a 16px paragraph gap, and it is the passage that defines the five
parts of a loop. The second densest is the harness section, five
paragraphs over 408px.
Two existing single-sentence paragraphs are set as pull-quotes. No
text is added, moved or reworded: only a class.
y=1872 "The more deliberately we frame a request..." the thesis
y=10934 "Most of the worry around these systems..." the aphorism
They sit 9,062px apart, one per half of the article, so the device
never reads as a tic.
The setting is 18/30 ink at a 30em measure. 18px ink is already this
page's "the author speaking directly" register: it is exactly what
`.rc-article__deck` is set in (§20). It deliberately does NOT outrank
the H3s (22px/600): a pull-quote at 400 weight and 18px is quieter
than a heading and louder than a paragraph, which is the rank it
should hold. No colour and no rule is used: ink #141817 on --canvas
measures 16.82:1 against the 5.57:1 the surrounding paragraphs carry,
and that step alone is the emphasis.
It keeps the body's own 38em measure rather than narrowing. Measured
on the first render of this pass: at max-width:30em the quote
inherited `margin-inline:auto` from §22's text-child rule and centred
itself in the 721px column, landing at left=442.5 against the body's
left=408.5. A 34px indent nothing else on the page shares reads as a
mistake, not as an aside. Sharing one left edge with every paragraph
is what lets the size and the ink do the work on their own. */
.rc-longread .rc-prose > .rc-pull{
font:400 18px/30px var(--font-sans);
color:var(--text-primary);
margin-top:var(--space-10);
}
/* the paragraph after a pull-quote gets the same 40px, so the quote is
an island rather than the head of the block that follows it. Stated
at (0,3,1) because `.rc-prose > * + *{margin-top:16px}` would
otherwise close the gap on one side only. */
.rc-longread .rc-prose > .rc-pull + p{margin-top:var(--space-10)}
/* --- 8. The exit -------------------------------------------------------
After 12,074px the piece ended on `.rc-backlink`: one 16px-tall, 12px
mono line, alone at the left of a 721px column, 32px under the closing
panel and 64px above the footer. Nothing said the article was over
except the footer's own change of surface, and the piece carried no
signature anywhere below the meta line at the top.
It closes on a rule and a two-item row instead: who wrote it on the
left, the way out on the right. The byline is not new copy: it is the
`.rc-byline` string /blog/ already carries verbatim under its own H1,
so the index and the article sign off identically.
Colour: --text-tertiary #5F6864 on --canvas, 5.40:1, and metadata is
the one role that token is scoped to. The hairline is --chip-border
#C3CAC7 at 1.57:1, decoration only: the boundary is also carried by
the byline text and by the footer's own surface change, so nothing
depends on the rule being seen (WCAG 1.4.11 covers graphics required
to understand the content).
`.rc-backlink` keeps its ink and its underline; only its margin is
answered here, because §22's `.rc-longread__body > .rc-backlink` no
longer matches now that the link has a parent.
Stacked, not a two-ended row. Measured: the byline sets 658px at 12px
mono with .08em tracking and the link 180px, so a single row needs
862px against the article's 721px measure and wraps at every width the
page ever has. A `justify-content:space-between` that never fires is a
layout pretending to be something it is not; the column is stated
instead, and it renders identically at 375 and at 1440. */
.rc-artend{
display:flex;flex-direction:column;align-items:flex-start;
gap:var(--space-3);
margin-top:var(--space-12);padding-top:var(--space-6);
border-top:1px solid var(--chip-border);
}
.rc-artend__by{
font:var(--meta-weight) var(--meta-size)/var(--meta-line) var(--font-mono);
letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);
}
.rc-artend > .rc-backlink{margin-top:0}
@media print{
/* the closing rule is the only thing here that draws, and it should */
.rc-artend{border-top-color:var(--gray-500)}
}