, .tween is a , and beats inside a chapter are
s, so nothing else can enter the nth-of-type count. */
.chap:nth-of-type(odd)::before { background: var(--surface-2); }
.chap:nth-of-type(even)::before { background: var(--surface); }
.chap > * { margin-top: 0; margin-bottom: var(--chap-gap); }
.chap > :last-child { margin-bottom: 0; }
/* ---- slot 1, chapter head -------------------------------------------
No min-height, at any breakpoint, on purpose. Height comes from content.
Type scale sits deliberately below .pcover-head so the page reads as
one big opening moment followed by chapters, not eight equal covers. */
/* Full column width, not the 760px read measure. The head sits directly
above .beat--wide content that runs the full 1096px, so capping the whole
head at 760 made the top of every chapter read as a narrow block bolted
onto a wide one. Width is now controlled per element below: the display
h2 and the facts grid run wide, only the dek keeps a reading cap. */
.chap-head { max-width: none; }
.chap-kicker {
display: inline-flex; align-items: center; gap: 9px;
font-family: "Raleway", sans-serif; font-weight: 500;
font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--accent);
}
.chap-kicker .idx {
font-variant-numeric: tabular-nums;
color: var(--ink);
font-weight: 700;
}
/* 940px, not 700: at 2.5rem that's roughly 48 characters, so a short
chapter title ("Turning a required wait into onboarding") sets on one
line instead of breaking after four words, and a long one still wraps
to two. Display type, so measure isn't the constraint here. */
.chap-head h2 {
font-size: clamp(1.75rem, 3.4vw, 2.5rem);
margin: 14px 0 16px; letter-spacing: -0.02em; max-width: 940px;
}
/* The one element in the head that keeps a cap. 820px holds most deks to
two full lines rather than three ragged ones, without running body copy
the entire 1096px. */
.chap-head .dek {
font-size: 1.1625rem; color: var(--ink-2); max-width: 820px; margin: 0;
}
/* Full read-measure, not the 640px the old .cover--full used. .case-facts
is a flex-wrap row; at 640px a four-fact set wrapped its last item onto
a lonely second row on both #latency and #scale, which read as a layout
error rather than a deliberate two-row grouping. */
/* A four-up GRID, not .case-facts' default flex-wrap row. Inside the read
measure a wrapping row put the last fact on a lonely second line whenever
one value ran long ("Sales, ops, investor relations, MVP tracking, agents"),
and the raggedness differed per chapter, so no two chapter heads lined up.
Four equal tracks wrap inside their own column instead, giving every
chapter head the same fact block silhouette regardless of value length. */
.chap-head .case-facts {
margin-top: 40px; max-width: none;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 28px;
}
/* ---- slot 7, outcome -------------------------------------------------
Optional by decision. Where a chapter has no measurable outcome, the
honesty callout (.note) carries that job instead and says so. */
.chap-out {
max-width: var(--read);
border-left: 3px solid var(--accent);
padding: 4px 0 4px 22px;
}
.chap-out .lbl {
display: block;
font-family: "Raleway", sans-serif; font-weight: 500;
font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--accent); margin-bottom: 8px;
}
.chap-out p { margin: 0 0 10px; color: var(--ink-2); }
.chap-out p:last-child { margin-bottom: 0; }
/* ---- interstitial ----------------------------------------------------
Connective tissue between chapters. Never numbered, never a rail entry,
never a link target. Sits outside any chapter so it inherits the page
canvas rather than either stripe. */
.tween {
position: relative;
max-width: var(--read);
margin: 0 auto; padding: 68px 0;
font-size: 1.075rem; color: var(--ink-2); font-style: italic;
text-align: center;
}
/* No ::before rule. An earlier version marked the interstitial with a short
centred accent line, because on the canvas it merged into the lilac of an
odd-numbered chapter and read as that chapter's opening line rather than a
bridge between two. Removed on request: the ornament was doing more work
visually than the sentence under it was doing editorially. Extra vertical
padding separates it instead. */
@media (max-width: 1000px) {
:root { --chap-pad: 68px; --chap-gap: 44px; }
}
@media (max-width: 700px) {
:root { --chap-pad: 52px; --chap-gap: 36px; }
.chap-head h2 { font-size: clamp(1.5rem, 5.8vw, 2rem); }
.chap-head .dek { font-size: 1.0625rem; }
.chap-head .case-facts { margin-top: 30px; grid-template-columns: repeat(2, 1fr); gap: 20px 22px; }
.tween { padding: 30px 0; font-size: 1rem; }
}
/* Two-up variant of .mini-grid. Needed once the 3-card set on Scale lost
its third card (AI-native interaction patterns was promoted to its own
chapter): three columns holding two cards leaves a visibly empty third
track. Placed after the responsive block above so the single-column
collapse at 900px still wins on narrow screens. */
.mini-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .mini-grid--2 { grid-template-columns: 1fr; } }
/* Two CTAs per home-page section instead of one, from the 4-page split:
each company now has a product story and a growth story, and the section
head has to offer both without the flex row's space-between pushing them
to opposite ends. Wrapping them keeps the pair together as one unit on
the right of the head. */
.sec-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 700px) {
.sec-ctas { width: 100%; }
.sec-ctas .link-arrow { flex: 1 1 160px; justify-content: center; }
}
/* Full-narrative links, demoted below the tile grid so the tiles (the
actual evidence) get read first. A recruiter scanning shouldn't have to
pick a full case study before seeing a single fact. */
.sec-more {
margin-top: 34px;
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.sec-more .lbl {
font-family: "Raleway", sans-serif; font-weight: 500;
font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--ink-3); white-space: nowrap;
}
.sec-dark .sec-more .lbl { color: var(--on-night-2); }
@media (max-width: 700px) {
.sec-more { flex-direction: column; align-items: flex-start; gap: 12px; }
}
/* ============================================================
ILLUSTRATION SLOT — the off-screen human situation
============================================================
Third medium in the case-study figure system. The division of
labour is deliberate and load-bearing:
.case-shot screenshot what shipped, the on-screen artifact
.case-fig hand SVG system structure, how the parts relate
.case-illo illustration what happens off-screen, the human
situation the product responds to
Three rules encoded below, each with a reason:
1. NOT a .figure card. .figure paints var(--surface) with a border
and an accent-soft corner blob. On an even (lilac) chapter that
renders a white plate, and the illustration would then read as
the same class of object as the schematic diagram sitting a few
hundred pixels away. Bare and transparent keeps the two media
visually distinct, which is the entire justification for adding
a third one.
2. Source images MUST be transparent PNGs. Chapters alternate
--surface / --surface-2 from .chap:nth-of-type parity, so a
baked-in ground is correct on exactly half the page and wrong on
the other half, and it silently flips if a chapter is ever
inserted above. Transparent is the only version that survives
the insertion contract from Case-Study-Architecture-Spec.md.
3. margin-bottom only, per chapter rhythm contract A. The chapter
owns all vertical rhythm; no slot may create a gap by existing.
Narrower than .case-fig (560 vs 840) on purpose. The diagram carries
the argument and should dominate; the illustration sets up the human
situation and should read as a vignette, not a hero.
============================================================ */
/* LAYOUT: .beat--illo puts the illustration in the gutter that already
exists to the right of every capped .beat, instead of giving it a
full-width band of its own.
Chosen over a float after rendering all three candidates side by side
(illo-layout-prototype.html, since deleted). Two findings drove it:
- A float forces the beat's measure open from --read (760) to ~1000 to
make room. Wrapped lines then read fine while any line BELOW the
float runs ~95 characters, in the same list. Widening the measure to
fit an image is a legibility regression the reader feels and the
author doesn't.
- shape-outside on the PNG alpha bought nothing measurable. These
figures are arms-out silhouettes whose alpha contour is already a
rectangle, so the silhouette wrap rendered indistinguishably from a
box wrap while adding a threshold to tune per image.
Illustrated beats collapse their .split to one column, because the
prose track is --read and splitting that again yields ~350px columns.
row-gap is explicitly 0. A single `gap` also applies between rows,
which pushed the h3 away from its own first paragraph. */
.beat--illo {
max-width: none;
display: grid;
/* Both tracks flex, roughly 60:40. Fixed tracks were tried and fail:
`var(--read) 1fr` measured 284px of illustration at 1440 and 148px
at 1024, because a rigid prose track gives nothing back as the
container narrows. Ratio tracks keep the split stable at every
width and let the illustration read at real size rather than as a
thumbnail in a gutter. Prose still lands inside a comfortable
measure (about 580px at 1440, 500px at 1024) without needing
--read as a cap here. */
grid-template-columns: 1.25fr 1fr;
column-gap: 52px;
row-gap: 0;
align-items: start;
}
.beat--illo > h3 { grid-column: 1 / -1; }
/* Compact variant, for an illustrated beat whose prose is a single short
paragraph. The default 1.25fr/1fr tracks assume two or three paragraphs
beside the figure; at five lines a full-track image renders about twice the
height of the copy it belongs to and stops reading as support. Caps the
figure rather than re-weighting the tracks, so the prose keeps its measure,
and centres it vertically against the shorter text block. */
.beat--illo--compact { grid-template-columns: 1.5fr 1fr; align-items: center; }
.beat--illo--compact .case-illo { max-width: 300px; margin-left: auto; }
@media (max-width: 940px) {
.beat--illo--compact .case-illo { max-width: 260px; margin: 0; }
}
.beat--illo .split { grid-template-columns: 1fr; gap: 0; }
/* FIGURE: bare and transparent, never a .figure card.
.figure paints --surface with a border and a corner blob, which would
render a white plate on every even (lilac) chapter and would make the
illustration read as the same class of object as the schematic sitting
beside it. Keeping the two media visually distinct is the entire
justification for adding a third one.
Source images MUST be transparent PNGs: chapters alternate
--surface / --surface-2 by .chap:nth-of-type parity, so a baked-in
ground is correct on exactly half the page and silently flips if a
chapter is inserted above (see Case-Study-Architecture-Spec.md). */
.case-illo { margin: 0; }
.case-illo img { display: block; width: 100%; height: auto; }
.case-illo .cap {
font-family: "Raleway", sans-serif;
font-size: 0.7875rem;
color: var(--ink-3);
margin-top: 12px;
line-height: 1.55;
}
/* NOTE, 2026-08-15: a .case-illo--lead variant briefly existed here, for
an illustration standing in the chapter's opening figure slot after
codefi-product #latency's handoff diagram was removed. It was cut the
same session along with the figure it carried.
Kept as a comment because the reasoning is a real constraint on this
layer, not a one-off. Four generations went into filling that slot and
the best of them still lost to showing nothing, because the chapter
already had an illustration on its decision beat and an unfilled
screenshot placeholder for the actual shipped slides. Spec §3 already
said this: no illustration where real evidence belongs, and art over a
gap is what a reviewer is trained to spot.
If a lead illustration slot is ever genuinely needed, cap it at 660
rather than .case-fig's 840. At 840 a figure drawing starts reading as
a hero image, which is the register Session 11 removed from Home. */
@media (max-width: 940px) {
.beat--illo { grid-template-columns: 1fr; row-gap: 26px; }
.beat--illo .case-illo { max-width: 420px; }
}
/* ============================================================
ILLUSTRATION ANNOTATION, .illo-frame / .illo-tag
------------------------------------------------------------
Small pills anchored over the illustration, naming the beats of
the situation the picture shows. Replaces the two-sentence
caption pattern: the caption is now one short line saying what
the picture is, and the pills carry the sequence.
Why overlaid rather than a row underneath: anchoring is the whole
point. A pill sitting over the thing it names does work that the
same words in a row below the image do not, and a row below is
what this degrades to on narrow screens anyway.
Position comes from --x / --y as percentages of the frame, set
per pill in the markup, because the empty region in each
illustration is different and there is no rule that finds it.
.illo-tag--r flips the anchor to the right edge so a pill near
the right side does not run out of frame as its text grows.
Reveal reuses .fig-pop and the existing --i stagger rather than
introducing an animation: .beat--illo already carries
data-reveal, so the pills pop in sequence when the beat scrolls
into view, and prefers-reduced-motion already neutralises it.
============================================================ */
.illo-frame { position: relative; }
.illo-frame img { display: block; width: 100%; height: auto; }
.illo-tag {
position: absolute;
left: var(--x); top: var(--y);
display: inline-flex; align-items: center;
padding: 4px 10px;
background: var(--surface);
color: var(--accent);
border: 1px solid var(--violet-lift);
border-radius: 999px;
font-family: "Raleway", sans-serif;
font-size: 0.7rem; font-weight: 600; line-height: 1.25;
letter-spacing: -0.005em;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(42, 27, 77, .10);
z-index: 2;
}
.illo-tag--r { left: auto; right: var(--x); }
/* LEADERS REMOVED, 2026-08-15. A hairline used to run from each pill
toward what it named, via .illo-tag--lead-r / --lead-l and a --lead
length set per pill in the markup.
It never worked, and the markup showed why before any render did: 19
leaders existed across the set using exactly two lengths, 26px and
22px. The rule above required tuning each one against its own
illustration, because the distance to the named thing is different
every time, and that tuning never happened on any of them. So every
leader stopped in empty space without reaching anything, and read as
a rendering artifact rather than as pointing.
Not replaced. The pills are positioned over the thing they name, and
that overlay IS the anchoring mechanism, which is the stated reason
they are overlaid rather than listed under the image. A leader was
always redundant with the position when the position was right, and
could not rescue it when the position was wrong.
If leaders ever return they need a per-image tuning pass with the
render open, not a default length. */
/* Collapse to a plain wrapping row at the same 940px breakpoint where
.beat--illo already goes single-column and the figure caps at 420px.
Below that the illustration is too small to hold overlaid pills: they
crowd the linework and start landing on faces and hands. The pills
keep their document order, so the sequence still reads left to right.
position:static is what does the work; the flex row exists so the
pills wrap under the image rather than sitting inline beside it. */
@media (max-width: 940px) {
.illo-frame { display: flex; flex-wrap: wrap; gap: 6px; }
.illo-frame img { flex: 0 0 100%; margin-bottom: 10px; }
.illo-tag { position: static; box-shadow: none; }
}