` inside one string, because this contract carries the label and
its definition as TWO strings. `lead_in()` exists there to keep one string
whole; there is no string to keep whole here. */
.caps{
list-style:none;margin:0;padding:0;
display:grid;
grid-template-columns:1fr;
gap:1px;
background:var(--hair);
border:1px solid var(--hair);
}
/* TWO COLUMNS, AND IT STOPS THERE. The Manager's Guide's glossary goes to
three at 72rem because its nine definitions are one line each. These six are
fifty words each, and measured at three columns on the desktop sheet every
cell was a 30-character column running fifteen lines deep: a wall of
slivers. Two columns inside the 64rem container give each cell ~490px, which
is ~48 characters at `--t-small` and about seven lines, and 6 divides by 2
so the last row is full. */
@media (min-width:44rem){ .caps{grid-template-columns:1fr 1fr} }
.cap{
background:var(--paper);
padding:calc(var(--u) * 3) calc(var(--u) * 3.5) calc(var(--u) * 4);
display:grid;
grid-template-columns:auto minmax(0, 1fr);
gap:calc(var(--u) * 1) calc(var(--u) * 1.5);
align-content:start;
}
/* Inline with the heading, not on a row of its own. On its own row the glyph
adds its height plus the gap to every cell and grid rows equalise to the
tallest in the row, which is what cost the Manager's Guide ~150px of dead
height across nine cells. */
.cap .ic{width:18px;height:18px;color:var(--ink);margin-top:.22em}
.cap__h{
margin:0;
font-family:var(--sans-display);
font-weight:500;
font-size:var(--t-body);
line-height:1.24;
letter-spacing:-.01em;
color:var(--ink);
}
/* THE DEFINITION SPANS BOTH COLUMNS, the heading does not. Indented under the
heading it gave up the glyph column and its gap — 39px of a 392px cell, a
tenth of the measure — on every one of six fifty-word paragraphs. The
Manager's Guide indents its own because its definitions are one line and the
indent is what makes them read as entries under a label. */
.cap__b{
grid-column:1 / -1;
margin:0;
font-size:var(--t-small);
line-height:1.5;
color:var(--ink-72);
}
/* ===================================================================== AUDIT
"When should you consider Vespa?" — the section the contract itself marks
`_directives: ["CALL OUT"]`. Eight conditions a reader scores themselves
against, so it is a set of cards a reader works through rather than prose
they read: the answer to the section's question is how many of the eight are
true of them.
EIGHT CELLS, TWO COLUMNS. The column count has to divide the item count or
the last row has empty slots in it, which reads as a missing card and not as
a grid (doc.css's `.fig__grid` note). 8 divides by 1 and by 2; a third
breakpoint at four columns would give each card 256px of a 1024px container
with 40px of that reserved for the numeral, and a 140px text column is a
word ladder. So this grid stops at two.
THE NUMERAL IS AN INDEX, NOT A RANK. The source sets these as a BULLET list,
so nothing here may assert an order of importance. `decimal-leading-zero`
in the mono face at the mute colour is the same wayfinding the contents
panel and the ladder use — it tells a reader how far through eight they are.
`--ink-mute`, 5.35:1 on the card's own white, NOT `--ink-38`. That token is
2.18:1 and shipped on the Manager's Guide's nine numerals for the whole life
of that edition, because `text-contrast` walked text NODES and a `::before`
has none. It asks every element for its pseudos since 2026-09-18 and these
eight are graded from this build's first run. NOT `--green-ink` either:
green on the ladder two acts above means "the rung you are on", and eight
green numerals here would read as eight lit states on a list that has
none. */
.audit{
list-style:none;margin:0;padding:0;
counter-reset:q;
display:grid;
grid-template-columns:1fr;
gap:1px;
background:var(--hair);
border:1px solid var(--hair);
}
@media (min-width:48rem){ .audit{grid-template-columns:1fr 1fr} }
/* ONE COLUMN, AND NO GLYPH. Every other card in this document carries an icon
from the shared sprite because each one means a different thing. All eight
of these mean the same thing — "this is true of you, or it is not" — so the
only honest glyph would be eight identical check marks, which is eight boxes
of decoration and a narrower text column to hold them. */
.q{
counter-increment:q;
background:var(--paper);
padding:calc(var(--u) * 3) calc(var(--u) * 3.5) calc(var(--u) * 4);
display:grid;
grid-template-columns:minmax(0, 1fr);
gap:calc(var(--u) * 1.5);
align-content:start;
position:relative;
}
.q::before{
content:counter(q, decimal-leading-zero);
position:absolute;
top:calc(var(--u) * 3);right:calc(var(--u) * 3.5);
font-family:var(--mono);
font-size:var(--t-mono);
color:var(--ink-mute);
}
.q__t{
margin:0;
font-size:var(--t-small);
line-height:1.5;
color:var(--ink-72);
padding-right:2.5rem;
}
@media print{
.audit,.caps{break-inside:auto}
.q,.cap{break-inside:avoid}
}
/* ====================================================================== TURN
The closing synthesis, and the one call to action the document makes.
`.plate` is doc.css's full-width ink statement device and it is reused
unchanged. The ONE declaration this build adds to it is the link colour, and
it is the same decision doc.css already makes one selector along:
`.act--ink .prose a,.act--ink .link{color:var(--green)}`. A `.plate` IS an
ink surface — it sets `background:var(--ink);color:var(--paper)` — but it is
not an `.act--ink`, so a link inside one falls through to the root `--link`
#4A86E8, which is 3.67:1 on ink. No reader had ever put a link in a plate,
so the hole was there and unlit rather than shipped. `--green` on ink is
7.49:1, the same number the close act's companion link takes. */
.plate .link{color:var(--green)}
.plate__cta{
margin:0;
font-family:var(--sans-display);
font-weight:500;
font-size:var(--t-h2);
line-height:1.16;
letter-spacing:-.015em;
}
/* ====================================================================== RAIL
More Reading: three cards, panning sideways below 52rem.
THE CONTAINER IS `ul.cases`, WHICH IS DOC.CSS'S, AND THAT IS DELIBERATE.
The lateral rail, its scroll-snap, its hidden scrollbar and — the part that
matters — the self-hiding scroll shadow that advertises the travel are all
declared there against that class. `shoot.mjs`'s `rail-affordance` row
requires `background-attachment` to contain `local` on any overflowing rail
and then requires the shadow to actually PAINT, measured against the same
frame with the background suppressed. Building a second rail under a new
class name would be shipping the defect that row exists to catch, on a page
whose stylesheet already contains the fix.
The cards keep `.cases`'s own bottom padding clear, because that band is
where `rail-affordance` finds the rail's own background to sample: the row
scans for the first height at which `elementFromPoint` returns the rail
itself, and an `` that filled the box at every height would make the
measurement impossible and the row would FAIL rather than quietly pass.
TWO OF THE THREE CARDS HAVE NO LINK, and they are not dressed as though they
do. The source gives a title, a blurb and a label for each; only the first
names a document this factory has actually built. Their labels are therefore
``, not ``: a label that looks like a link and goes nowhere is worse
than a label. See doc_platform.LINKS for the two unknown targets. */
.read{
background:var(--paper);
border:1px solid var(--hair);
padding:calc(var(--u) * 3) calc(var(--u) * 3);
display:flex;flex-direction:column;
gap:calc(var(--u) * 1.75);
min-width:0;
}
.read__h{
margin:0;
font-family:var(--sans-display);
font-weight:500;
font-size:var(--t-section);
line-height:1.18;
letter-spacing:-.014em;
color:var(--ink);
}
.read__b{
margin:0;
font-size:var(--t-small);
line-height:1.55;
color:var(--ink-72);
}
/* Pushed to the foot of the card so the three labels sit on one line however
long the blurbs above them run. `margin-top:auto` needs the card to be a
flex column with a height to give, which the rail's own stretch supplies. */
.read__cta{
margin:auto 0 0;
padding-top:calc(var(--u) * 2);
border-top:1px solid var(--hair);
font-family:var(--mono);
font-size:var(--t-mono);
letter-spacing:.1em;
text-transform:uppercase;
color:var(--ink-mute);
}
/* ===================================================================== CLOSE
Ink, the ground the document opened on, and the colophon.
It carries no section of its own because the document has none to give it:
its last heading is More Reading. What it does carry is the three fields of
`doc` — the title, the publisher and the kind — plus the derived read time,
so the page ends by saying what it was rather than by running out. */
.close__mark{height:clamp(3.5rem, 8vw, 6rem);width:auto}