s so a long page has an outline to navigate. Resetting the
margin on the heading only leaves About's decorative
labels alone. */
h2.row__label { margin: 0; }
/* Sub-heads inside a section body. Deliberately quiet — the mono label in
the left column is the section marker; this only has to separate two
ideas inside one section, not compete with it. */
.row__body h3 {
margin: clamp(30px, 3.4vw, 42px) 0 12px;
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.012em;
}
.row__body > h3:first-child { margin-top: 0; }
/* Bullet list. .stack's hairline rules read as a table of records — right
for About's job history, wrong for a list of points, where they chop the
section into slabs. These get a marker instead: the site's own mark
shrunk to a 6px ring, sat on the first line's x-height rather than the
top of the line box so it reads level with the text. */
.bullets { list-style: none; margin: 0; padding: 0; }
.bullets li {
position: relative;
margin-bottom: 12px;
padding-left: 22px;
}
.bullets li:last-child { margin-bottom: 0; }
.bullets li::before {
content: '';
position: absolute;
left: 0;
top: 0.58em;
width: 6px;
height: 6px;
border: 1px solid var(--mist);
border-radius: 50%;
}
/* Prose that continues after a list — the list carries no bottom margin
of its own, so without this it butts straight into the last item. */
.row__body .bullets + p { margin-top: 1em; }
/* Prose resuming after a diagram. Every component in the set below leads
with a top margin and carries none at the bottom — correct, because each
is introduced by the text above it. But when prose picks up again
underneath, nothing holds it off, and it reads as a caption on the
diagram rather than as the next thought. This was found twice as a
one-off (.bullets, then .annot) before it was worth stating once for the
whole set. 1em is deliberately not enough here: these are blocks, not
list items, and they need a real pause on both sides.
Specificity is doing real work — `.pair__text > p` and `.row__body > p`
both set margin-top to 0 and both outrank a plain descendant selector, so
the set sits in :where() (weightless) and the leading class is doubled to
clear them. */
.rows--case .row__body
:where(.matrix, .chain, .trail, .converge, .compare, .swap, .scatter, .shells, .annot)
+ :is(p, blockquote) { margin-top: clamp(24px, 2.8vw, 34px); }
/* The last section's rule and .contact's top border land within a screen
of each other and read as a double line. The section rules are what
structure the page, so .contact's is the one that stays. */
.rows--case .row:last-child,
.rows .row:last-child { border-bottom: 0; }
/* Pull quote. No quote glyphs in the markup — the rule and the step up in
size already mark it, and real quotation marks would hang into the
gutter or sit crooked against the border. Same size as .page__lede. */
.pull {
margin: clamp(30px, 3.4vw, 42px) 0;
padding-left: clamp(18px, 2.4vw, 28px);
border-left: 1px solid var(--hair-strong);
font-size: clamp(1.05rem, 1.5vw, 1.32rem);
line-height: 1.45;
letter-spacing: -0.012em;
color: var(--paper);
}
.pull p { margin: 0; }
/* A pull quote stepped back down to body size. Both case studies run a
spine of .statement lines that carry the argument when the page is
scanned; a pull quote at .page__lede size sits close enough to those to
read as one more of them. The left rule stays, so the line is still
marked as an aside — it just stops competing for the eye.
A modifier rather than a change to .pull itself, so the plain .pull
remains available to a page that has no spine to compete with. */
.pull--quiet {
font-size: 1rem;
line-height: 1.55;
letter-spacing: -0.005em;
}
.figure { margin: clamp(30px, 3.6vw, 44px) 0 0; }
/* A figure with prose after it needs the same air underneath as above.
Without this the next paragraph starts one line below a caption that is
already quiet, low-contrast type, and reads as a continuation of the
caption instead of the next thought. Only when something follows: a
figure that ends a row already has the row's own spacing under it. */
.figure:not(:last-child) { margin-bottom: clamp(30px, 3.6vw, 44px); }
/* A screenshot of a 390pt phone captured at 3x is three times life size,
and at the full text measure a UI detail stops illustrating the column
and starts dominating it. This caps those to about half the measure
once there is room for it. Below 1001px the column is narrow enough
that halving it would only make the detail unreadable, so the cap
lifts and the figure goes back to full width. */
@media (min-width: 1001px) {
.figure--half { max-width: 52%; }
}
/* Video sits here alongside img because a figure holding a UI clip should
be indistinguishable from one holding a screenshot — same width, same
corner, same place in the rhythm. Playback is the only difference, and
that is handled in site.js. */
.figure img,
.figure video { display: block; width: 100%; height: auto; border-radius: 10px; }
/* Figure captions. Deliberately not .mono: that is a label treatment — 11px,
uppercase, 0.16em of tracking — which is right for "01 · THE CHALLENGE" and
was fine on the placeholders, but a caption is a sentence somebody is meant
to actually read, and tracked-out uppercase fights that at any length past
a few words. So this uses the same quiet register the page already gives
secondary prose everywhere else: --mist against --ink, one step down from
body, capped at a caption-length measure so it never runs the full width of
the artwork above it. */
.figure figcaption {
margin-top: 14px;
max-width: 60ch;
font-size: 0.94rem;
line-height: 1.5;
letter-spacing: -0.005em;
color: var(--mist);
}
/* Slot for artwork that hasn't been made yet. Dashed rather than solid so
it never reads as a finished frame. To fill one: swap the inner
for
an and drop the --empty modifier — nothing else changes. */
.figure--empty {
display: grid;
place-items: center;
min-height: clamp(150px, 20vw, 240px);
padding: 24px;
border: 1px dashed var(--hair);
border-radius: 10px;
text-align: center;
}
.figure--empty p { margin: 0; max-width: 46ch; }
/* Case study — diagram set ---------------------------------------- */
/* The research-practice page argues that scattered work was turned into a
system, and a page made only of paragraphs cannot argue that. So the
diagrams below are drawn in HTML and CSS rather than shipped as flat
artwork: the labels stay real text (selectable, translatable, legible at
320px), the rules stay hairlines at any zoom, and none of it needs an
asset pipeline or a second render for dark mode.
All of it is achromatic. The only hue on the site still lives in the
field; emphasis here is carried by weight and by --paper against --mist.
--smoke is deliberately absent — it measures ~3:1 on black, which is
under the floor for the small mono labels these components are full of. */
/* A section that needs the full content width for a diagram. The label
moves above the body instead of beside it, and prose inside stays capped
at the same measure as every other row so only the artwork goes wide.
Below 900px every row is single-column anyway, so the two converge. */
.rows--case .row--wide { grid-template-columns: 1fr; gap: clamp(16px, 2.2vw, 26px); }
.rows--case .row--wide .row__label { padding-top: 0; }
.rows--case .row--wide .row__body { max-width: none; }
/* Prose in a wide row keeps the same measure as every other row, so only
the artwork actually goes wide. Wrapped in :where() so the rule carries
no specificity: `ch` resolves against the element's own font size, and at
40px .statement would read this as 1564px and swallow its own 26ch cap.
A component that sets its own measure now simply keeps it. */
:where(.row--wide .row__body) > :where(p, h3, .bullets) { max-width: 68ch; }
:where(.row--wide .row__body) > :where(.pull) { max-width: 52ch; }
/* ---- Text beside the diagram that explains it -------------------
Before this, prose ran at 68ch and diagrams at the full 1320px content
width. That left ~730px of void beside every paragraph and made every
diagram 2.2× the width of the text explaining it — which inverts the
hierarchy, since size is the first thing that tells a reader where to
look. Equal columns put the diagram and its explanation at the same
weight and close the gap.
The columns only exist where both halves stay usable (see the
min-width block below). Until then .pair is ordinary flow, so the
stacked reading order is whatever the markup says. */
.pair > * + * { margin-top: clamp(26px, 3.4vw, 40px); }
/* Two paired blocks in one section — the AI practice page runs a second
pair where the first one's diagram has finished making its point. Both
columns zero their own first child's top margin (see below), so without
this the second pair's opening sub-head butts straight into the bottom
of the diagram above it. Wider than the gap inside a pair: this is a
change of subject, not a change of column. */
.pair + .pair { margin-top: clamp(38px, 4.4vw, 60px); }
/* .row__body's own child combinators stop reaching prose once it moves a
level down, so paragraph rhythm is restored here. Descendant rules
(.row__body h3, .pull, .statement) still apply and are left alone. */
.pair__text > p { margin: 0 0 1em; }
.pair__text > p:last-child { margin-bottom: 0; }
/* The rule above is `.pair__text > p` (0,1,1), which outranks `.statement`
(0,1,0) — so the narrative statements were silently taking a plain 1em
paragraph gap instead of the pause they exist to create. Restored here
with enough specificity to win. Top margin stays 0: all four open their
column, and the column top is already the pause. */
.pair__text > p.statement { margin: 0 0 clamp(34px, 3.6vw, 52px); }
/* Nearly every component leads with a top margin meant to separate it
from prose above. At the top of a column there is nothing above it. */
.pair__text > :first-child,
.pair__art > :first-child { margin-top: 0; }
@media (min-width: 1001px) {
.pair {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(30px, 3.2vw, 54px);
align-items: start;
}
.pair > * + * { margin-top: 0; }
/* Sections where the outline wants the picture before the explanation
(01 — see the mess, then read why it was a mess) keep the art first
in the markup, so it still leads when the columns stack. Placement
is explicit here so it lands on the right regardless. */
.pair--lead-art > .pair__art { grid-column: 2; grid-row: 1; }
.pair--lead-art > .pair__text { grid-column: 1; grid-row: 1; }
/* Columns top-align by default, which is right when the diagram is the
thing the opening sentence is pointing at. Where one side is much
shorter than the other, that leaves a block of void under it and the
dead space simply moves rather than goes — so those pairs centre
instead. Centring is a no-op on the taller column, which sets the row
height, so this only ever moves the short one. */
.pair--center { align-items: center; }
/* A dashed placeholder has no intrinsic height to balance against the
column beside it. The Confluence screenshot it stands in for is tall. */
.pair__art .figure--empty { min-height: clamp(240px, 30vw, 420px); }
/* The text track is a little wider than 68ch; the prose is not. Keeps
the measure identical to every other page. :where() again so
.statement and .swap keep the measures they set for themselves. */
:where(.pair__text) > :where(p, h3, .bullets, ul, ol, dl) { max-width: 68ch; }
:where(.pair__text) > :where(.pull) { max-width: 52ch; }
/* Diagrams drawn for a full-width row need their counts revisited at
half that width. Fixed counts, not auto-fit: at ~630px auto-fit picks
whatever fits and orphans the last item onto a row of its own. */
.pair__art .trail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pair__art .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pair__art .matrix { grid-template-columns: minmax(0, 20ch) minmax(0, 1fr); }
/* Annotations belong in a numbered column down the side of the
screenshot they annotate, not in a 2×2 block under it. */
.pair__text .annot { grid-template-columns: 1fr; gap: clamp(18px, 2vw, 24px); }
/* A figure that is evidence for the column beside it rather than the
argument itself. The Confluence template is a tall portrait screenshot;
at full column width it stood as high as the annotations explaining it
and read as the section's headline instead of its footnote. Capped so
the prose leads. Only inside a paired column — once the layout stacks,
a dense screenshot needs every pixel it can get to stay legible. */
.pair__art .figure--inset { max-width: 68%; }
/* A pair is only a pair where the row is wide enough to hold two readable
columns. .pair grids on a viewport query, not a container one, so inside
a narrow row — whose body is capped at the 68ch measure — it would still
split into two ~265px columns and wreck both halves. Narrow rows keep the
markup and the reading order, and simply stack. This is what lets a
section switch between the two rhythms by adding or dropping one class. */
.row:not(.row--wide) .pair { display: block; }
.row:not(.row--wide) .pair > * + * { margin-top: clamp(26px, 3.4vw, 40px); }
.row:not(.row--wide) .pair__art .figure--inset { max-width: 100%; }
}
/* Credit line under the hero, on both case studies. The opening is meant to
breathe, so the housekeeping — role, team, timeline, status — sits inline
here as a short dl rather than taking a labelled row in the case grid,
and section 01 opens on the argument instead. Flex-wrapped, so the field
count can differ per page without either one needing its own rule. */
.meta-row {
display: flex;
flex-wrap: wrap;
gap: 16px clamp(24px, 4vw, 54px);
margin: clamp(24px, 3vw, 34px) 0 0;
}
.meta-row dt { margin: 0 0 6px; }
.meta-row dd { margin: 0; max-width: 34ch; }
/* One-line arguments the page turns on. Sized between .page__lede and
.contact__line — big enough to stop a scroll, small enough that it never
competes with the headline three screens up. */
.statement {
margin: clamp(34px, 4vw, 52px) 0;
max-width: 26ch;
font-size: clamp(1.5rem, 3.4vw, 2.5rem);
font-weight: 600;
line-height: 1.08;
letter-spacing: -0.032em;
color: var(--paper);
}
.statement em { font-style: normal; color: var(--mist); }
/* Same specificity problem as `.pair__text > p.statement` above, in the
other place a statement lives: `.row__body > p` (0,1,1) outranks
`.statement` (0,1,0), so on Benchmarks AI — where the spine sits in
plain rows rather than paired columns — the four statements were taking
a 1em paragraph gap instead of the pause they exist to create.
First-child gets no top margin: every statement opens its section, and
the row's own padding is already the pause. Without this the statement
would also drop out of alignment with the mono label beside it. */
.row__body > p.statement { margin: clamp(34px, 4vw, 52px) 0; }
.row__body > p.statement:first-child { margin-top: 0; }
/* 01 — the inherited mess. Three columns of artifacts drop into a shared
rail and then into a node full of question marks. Dashed throughout,
because none of these were connections anyone designed. */
.scatter { margin: clamp(30px, 3.6vw, 44px) 0 0; }
.scatter__cols {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(12px, 2vw, 24px);
}
.scatter__col { position: relative; min-width: 0; padding-bottom: 34px; }
.scatter__col::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
height: 30px;
border-left: 1px dashed var(--hair-strong);
}
.scatter__col > p { margin: 0 0 14px; }
.scatter__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.scatter__col li {
padding: 9px 12px;
border: 1px solid var(--hair);
border-radius: 6px;
background: rgba(244, 244, 242, 0.02);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.01em;
color: var(--mist);
overflow-wrap: anywhere;
}
/* Half a degree of tilt each — enough that the column reads as a pile
rather than a list, not enough that anything looks broken. */
.scatter__col li:nth-child(3n+1) { transform: rotate(-0.5deg); }
.scatter__col li:nth-child(3n+2) { transform: rotate(0.45deg); }
.scatter__col li:nth-child(3n+3) { transform: rotate(-0.22deg); }
/* The rail runs the full width rather than stopping at the outer column
centres: gaps make those centres a few px off a clean 1/6 and 5/6, and a
dashed line that misses its drop by 8px just looks like a mistake. */
.scatter__funnel { position: relative; height: clamp(40px, 5vw, 56px); }
.scatter__funnel::before {
content: '';
position: absolute;
inset: 0 0 auto;
border-top: 1px dashed var(--hair-strong);
}
.scatter__funnel::after {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
border-left: 1px dashed var(--hair-strong);
}
.scatter__sink {
width: min(100%, 40ch);
margin: 0 auto;
padding: clamp(18px, 2.2vw, 26px);
border: 1px dashed var(--hair-strong);
border-radius: 10px;
text-align: center;
}
.scatter__sink p { margin: 0; }
.scatter__q {
font-family: var(--mono);
font-size: clamp(15px, 2vw, 20px);
letter-spacing: 0.42em;
color: var(--mist);
}
.scatter__sink .mono { margin-top: 12px; }
/* 02 — the discovery sequence. One row of cells divided by the grid gap
showing through as hairlines, so there is no border to double up. */
.trail {
list-style: none;
margin: clamp(30px, 3.6vw, 44px) 0 0;
padding: 0;
display: grid;
/* Fixed counts rather than auto-fit. There are exactly six steps, and
auto-fit picks whatever fits — which is 5 at 768px, orphaning the last
one on its own row. 3 and 2 both divide 6, so the sequence never ends
on a short row at any width. Three across also suits the half-width
column this now lives in far better than six would. */
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
background: var(--hair);
border: 1px solid var(--hair);
border-radius: 10px;
overflow: hidden;
}
.trail li { background: var(--ink); padding: clamp(16px, 2vw, 22px) clamp(14px, 1.6vw, 18px); }
.trail__n { display: block; margin-bottom: 10px; }
.trail__t { display: block; letter-spacing: -0.012em; }
/* 04 — the five stages, and the return that makes them a loop. The return
is a rail rather than a curve: a rail stays exact at any width, and a
curve would need an SVG that distorts the moment the box is not square. */
.loop {
/* Lives on the parent so the return rail can solve for it too. */
--g: clamp(10px, 1.4vw, 18px);
/* The bottom margin is not decoration. At full width .loop__label is
absolutely positioned and translated to straddle the rail, so it hangs
~8px below .loop's own box — with no margin the label collided with
the first line of the paragraph underneath. This clears the overhang
and then leaves a real gap. */
margin: clamp(34px, 4vw, 50px) 0 clamp(48px, 5vw, 68px);
}
.loop__stages {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--g);
}
.loop__stage {
position: relative;
min-width: 0;
padding: clamp(18px, 2vw, 24px) clamp(14px, 1.4vw, 18px);
border: 1px solid var(--hair);
border-radius: 10px;
}
.loop__stage p { margin: 0; color: var(--mist); }
.loop__name {
margin: 0 0 10px;
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.014em;
color: var(--paper);
}
.loop__n { display: block; margin-bottom: 12px; }
/* Connector and arrowhead sitting in the gap to the left of every stage
after the first. */
.loop__stage + .loop__stage::before {
content: '';
position: absolute;
top: 50%;
left: calc(-1px - var(--g));
width: var(--g);
border-top: 1px solid var(--hair-strong);
}
.loop__stage + .loop__stage::after {
content: '';
position: absolute;
top: 50%;
left: calc(1px - var(--g));
width: 5px;
height: 5px;
border-top: 1px solid var(--hair-strong);
border-right: 1px solid var(--hair-strong);
transform: translateY(-50%) rotate(45deg);
}
.loop__return {
position: relative;
height: clamp(44px, 5vw, 60px);
/* The arms land exactly on the first and last card's centre. For five
equal columns of width c separated by gap g, c/2 = W/10 − 0.4g — so
this stays on centre at every width instead of drifting a few px the
way a flat 10% inset does. */
margin: 0 calc(10% - 0.4 * var(--g));
border: 1px solid var(--hair-strong);
border-top: 0;
border-radius: 0 0 14px 14px;
}
/* Arrowhead at the top of the left arm, pointing back up into Discovery. */
.loop__return::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 6px;
height: 6px;
border-top: 1px solid var(--hair-strong);
border-left: 1px solid var(--hair-strong);
transform: translate(-3.5px, -0.5px) rotate(45deg);
}
/* Sits on the rail and punches a hole in it. */
.loop__label {
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 50%);
margin: 0;
padding: 0 14px;
background: var(--ink);
}
/* 05 — annotations under a screenshot. Numbered so a caption can point at
a region of the image without an overlay that breaks on resize. */
.annot {
list-style: none;
margin: clamp(24px, 2.8vw, 34px) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
gap: clamp(20px, 2.6vw, 34px);
}
.annot__n { display: block; margin-bottom: 12px; }
.annot__t { display: block; margin-bottom: 6px; font-weight: 600; letter-spacing: -0.012em; }
.annot p { margin: 0; color: var(--mist); }
/* 06 — need on the left, capability on the right. A description list
rather than a table: it is a set of definitions, not a data set. */
.matrix {
display: grid;
grid-template-columns: minmax(0, 28ch) minmax(0, 1fr);
margin: clamp(30px, 3.6vw, 44px) 0 0;
border-top: 1px solid var(--hair);
}
.matrix dt,
.matrix dd {
margin: 0;
padding: clamp(13px, 1.7vw, 18px) 0;
border-bottom: 1px solid var(--hair);
}
.matrix dt { padding-right: clamp(14px, 3vw, 40px); color: var(--mist); }
/* 07 — a sequence read as one continuous thread. The connector runs
down the left rather than the centre so it reads as a thread rather than
a set of boxes that happen to be stacked. */
.chain { list-style: none; margin: clamp(30px, 3.6vw, 44px) 0 0; padding: 0; }
.chain li {
position: relative;
padding: clamp(11px, 1.4vw, 14px) clamp(16px, 2vw, 22px);
border: 1px solid var(--hair);
border-radius: 8px;
letter-spacing: -0.012em;
}
.chain li + li { margin-top: 26px; }
.chain li + li::before {
content: '';
position: absolute;
left: 30px;
top: -27px;
height: 27px;
border-left: 1px solid var(--hair-strong);
}
.chain li + li::after {
content: '';
position: absolute;
left: 27px;
top: -9px;
width: 5px;
height: 5px;
border-right: 1px solid var(--hair-strong);
border-bottom: 1px solid var(--hair-strong);
transform: rotate(45deg);
}
/* The last link is where the evidence lands, so it is the one that is lit. */
.chain li:last-child { border-color: var(--hair-strong); color: var(--paper); }
.chain--tight li + li { margin-top: 20px; }
.chain--tight li + li::before { top: -21px; height: 21px; }
.chain--tight li + li::after { top: -6px; }
/* 08 — many studies, one synthesis. The brace is three stubs meeting a
spine, and the spine has to start and finish exactly on the first and
last node's centre. For three equal nodes of height h separated by gap
g, h/2 = H/6 − g/3, which is what the inset below solves for. A flat
16.6% lands ~7px short at either end and reads as a drawing error. */
.converge {
--brace: clamp(44px, 6vw, 84px);
--g: clamp(14px, 2vw, 22px);
display: grid;
grid-template-columns: minmax(0, 1fr) var(--brace) minmax(0, 1fr);
align-items: center;
margin: clamp(30px, 3.6vw, 44px) 0 0;
}
.converge__in { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--g); }
.converge__in li {
position: relative;
padding: clamp(12px, 1.5vw, 15px) clamp(14px, 1.8vw, 18px);
border: 1px solid var(--hair);
border-radius: 8px;
color: var(--mist);
letter-spacing: -0.012em;
}
.converge__in li::after {
content: '';
position: absolute;
left: 100%;
top: 50%;
width: calc(var(--brace) / 2);
border-top: 1px solid var(--hair-strong);
}
.converge__brace { position: relative; align-self: stretch; }
.converge__brace::before {
content: '';
position: absolute;
left: 50%;
top: calc(16.667% - var(--g) / 3);
bottom: calc(16.667% - var(--g) / 3);
border-left: 1px solid var(--hair-strong);
}
.converge__brace::after {
content: '';
position: absolute;
left: 50%;
right: 0;
top: 50%;
border-top: 1px solid var(--hair-strong);
}
.converge__out {
padding: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 22px);
border: 1px solid var(--hair-strong);
border-radius: 10px;
}
.converge__out p { margin: 0; color: var(--mist); }
.converge__out .loop__name { margin-bottom: 8px; }
/* The question the repository could answer, over the one it can answer
now. The first is dimmed rather than struck out — it was never a bad
question, it was just the only one available. */
.swap { margin: clamp(30px, 3.6vw, 44px) 0 0; }
.swap p {
margin: 0;
max-width: 36ch;
/* Was 1.6rem, which made this the second-largest editorial voice on the
page and close enough to the .statement spine to read as a fifth one
while scanning. It sits in the text column, not the art column, so it
is prose rather than diagram typography. Stepped down to the lede
tier: the device here is the dim-to-bright contrast between the two
questions, not the size, and that survives intact. */
font-size: clamp(1.05rem, 1.4vw, 1.32rem);
line-height: 1.34;
letter-spacing: -0.016em;
}
.swap p + p { margin-top: 18px; }
.swap__was { color: var(--mist); }
.swap__now { color: var(--paper); }
/* 09 — before and after, side by side. No dashboard, no invented numbers:
the claim is that the shape of the work changed, so the evidence is a
list of things that are true now and were not before. */
.compare {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
gap: clamp(20px, 3vw, 48px);
margin: clamp(30px, 3.6vw, 44px) 0 0;
}
.compare__col > p { margin: 0 0 16px; }
.compare ul { list-style: none; margin: 0; padding: 0; }
.compare li { padding: 12px 0; border-top: 1px solid var(--hair); }
.compare li:first-child { border-top: 0; padding-top: 0; }
.compare--was li { color: var(--mist); }
.compare--now li { color: var(--paper); }
/* AI practice — the Custom GPT's three layers. Nested boxes rather than a
numbered list: the whole argument for that build was that the evidence
sat *inside* two rings of instruction, and a list flattens the nesting
back out. The outer ring is dashed because it is the defensive layer —
it describes what the persona refuses, not what it knows. Everything
else is borrowed from the diagram set above. */
.shells {
margin: clamp(30px, 3.6vw, 44px) 0 0;
padding: clamp(14px, 1.8vw, 20px);
border: 1px dashed var(--hair-strong);
border-radius: 14px;
}
.shells__layer {
padding: clamp(14px, 1.8vw, 20px);
border: 1px solid var(--hair);
border-radius: 10px;
}
/* The centre is the only part backed by research, so it is the only part lit. */
.shells__layer--core { border-color: var(--hair-strong); }
.shells p { margin: 0; letter-spacing: -0.012em; color: var(--mist); }
.shells__head { margin: 0 0 10px; color: var(--paper); }
.shells p + .shells__layer { margin-top: clamp(14px, 1.8vw, 20px); }
/* Housekeeping line at the foot of a case study — what the screenshots are,
who is not in them. It has to be present and findable without ever being
read before the work, so it takes .mono's fine-print voice and sits in the
gap between the last section and the contact block rather than inside
either one.
No max-width on purpose. A `ch` cap under-measures here — .mono adds
0.16em of tracking on top of the glyph, so 70ch reserves ~460px for a
line that actually sets ~570px and the note broke onto a second line at
full width. The text is short enough to hold one line unaided, and still
wraps on a phone, which is where wrapping is correct. */
.page-note { margin: clamp(30px, 3.6vw, 44px) 0 0; }
/* A cited source at the foot of a case study. The disclaimer line above is
.mono fine-print; a full citation set in tracked uppercase is unreadable
at that length, so this drops the mono voice and takes the same quiet
register as a figure caption — one step down from body, --mist on --ink,
capped at a caption measure. Sits directly under .page-note. */
.source-note {
margin: 12px 0 0;
max-width: 70ch;
font-size: 0.88rem;
line-height: 1.5;
letter-spacing: -0.005em;
color: var(--mist);
}
.source-note cite { font-style: italic; }
/* ------------------------------------------------------------------
Entrance
------------------------------------------------------------------ */
/* Driven entirely by CSS, on the clock the stylesheet starts rather than on
a class from site.js. The version before this one held every element on
every page at opacity 0 until the script added .is-in to
— which
made first paint wait for the whole critical chain to finish: parse the
HTML, fetch and parse 69 KB of CSS, fetch and run 66 KB of field.js, then
run site.js. On a throttled phone that measured 2.9 s to *any* content,
with FCP and LCP landing on the same tick because the entire page arrived
at once. Now the animation starts as soon as this file is parsed, so the
headline is on screen while the scripts are still downloading.
fill-mode is `backwards`, not `both`: it holds the opening frame through
the delay and then hands the element back to the normal cascade. `both`
would leave the finished animation's opacity: 1 permanently in force —
and an animated value outranks a plain declaration, so .nova-on could
never fade the chrome out for the supernova.
No failsafe timer and no