: the sentence is
unbroken for a screen reader, and no block element enters the paragraph.
The base runs still WRAP as running text inside their own lines; only the
size changes force a break. */
.stmt-lg,
.stmt-xl { display: block; }
.stmt-lg { font-size: 1.28em; }
.stmt-xl { font-size: 1.9em; }
/* ---- THE ROLE SPLIT (home §2.0, founder 2026-08-05) --------------------
Role hero on the left half, two cards on the right: the station-glyph grid
and the positioning card. Card layout after render.com's panel grammar —
bordered sheets with the house hard shadow, the second one taking the
section's field as a solid fill so the column carries colour where the
grid is monotone.
The roll's host column carries minmax(0,1fr) via .role-split's first
track and the element's own min-width:0 — the two things epq-role-roll.js
documents as load-bearing for the fit.
WRITTEN MOBILE-FIRST, and the side-by-side layout starts at 1151px rather
than 901 — the breakpoint the isometric mounts already use, and here it is
arithmetic too. Beside each other, the copy and the seven-station index
have to share one pager screen; at 1024x768 that needed 919px against a
682px budget however hard the cells were compacted, because a narrow right
column drops the glyph grid to two tracks and gains a row. Stacked, the
same content becomes three snap stops that each fit. Below 1151 the
section therefore stacks and pages; above it, it is the two-column split. */
.role-split {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 28px;
align-items: center;
padding: 20px 16px;
}
/* THE SPLIT CLAIMS ITS FRAME (founder, 2026-08-06: "not drawing correctly —
it should take up a full frame like its peer sections").
Measured on the founder's own screen, 2560x1271: the card was the full
1185px the pager gives it, and the SPLIT inside it was a 1200x660 island
with 262px of blank above and below and 680px of blank either side. Its two
neighbours are ambient sections, whose stage escapes the pillar and takes
flex: 1 1 auto — so they paint the whole 2560x1185 while this one printed a
postcard in the middle of it. Nothing was broken; the section simply was not
claiming what it had been given.
Two corrections, one per axis.
ACROSS: a stage measure of its own, wider than the pillar. The pillar is a
rule about READING — one column of prose at a comfortable measure — and it
is still doing that job here, because what the split holds is two columns
side by side and the prose inside them keeps its own 52ch cap.
The clamp is written so the tuned screens cannot move. Its FLOOR is the
pillar itself, so everything up to a 1336px viewport is arithmetically the
layout that shipped; the 136px term is that viewport's own gutter carried
upward, so the stage widens by taking the same margin it always had; and
1560px is the ceiling, which is where two columns and the 44px gap stop
getting wider than the glyph index wants to be. It first binds at 1696px.
The measure is published as --epq-stage rather than written here, because
the clause bar above derives its inset from it — a wider stage with a
pillar-inset bar puts the clause number 180px right of the first word under
it, which is the kind of thing that reads as a mistake without ever looking
like one.
DOWN: flex: 1 1 auto, the same correction .body-frame and .amb-stage each
carry, for the same reason stated there — the CARD is the screen, the clause
bar is the flex item above, and the rest of it belongs to this. It can only
ADD height: where the content is already taller than the screen (the 1280x800
laptop the vertical allowances below are tuned for) flex-basis auto leaves
the box exactly content-sized, so the tight case is unchanged. */
.doc > section:has(.role-split) { --epq-stage: clamp(var(--epq-pillar), 100% - 136px, 1560px); }
.doc > section > .epq-card > .role-split { max-width: var(--epq-stage, var(--epq-pillar)); }
@media (prefers-reduced-motion: no-preference) {
html.epq-paged .epq-card > .role-split { min-height: 0; flex: 1 1 auto; }
}
/* THE GATE IS TWO-AXIS, and the height half is not belt-and-braces: side by
side the split's content is a constant ~699px whatever the width, so a
1366x768 or 1200x760 laptop overflows its 682/674px budget by the same
amount a 1440x900 clears it by. Width alone cannot see that. Below either
threshold the section stacks and pages as three stops, each of which fits.
Same idiom, same reason, as the folded-card padding gate further down. */
@media (min-width: 1151px) and (min-height: 780px) {
.role-split {
/* UNEVEN ON PURPOSE (founder, 2026-08-12: the text cards had "too much
unused space… leaving more perceived space for the dynamic images/
text"). The left half is the section's dynamic thing — the rolling
headline, or the backlog loop — and the right half is now a content-
sized text block rather than a stretched panel, so the stage takes the
larger share. 1.15/.85, not further: the glyph index still needs two
240px-order tracks in its .85 share at the pillar. */
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: 44px;
/* stretch, not centre, once the split has a frame to fill — see the
flex: 1 1 auto note above. Stacked (below either threshold) the tracks
are content-sized and centred, which is what a phone wants. */
align-items: stretch;
/* Tight on the block axis on purpose: side by side, the whole split —
clause bar, seven glyphs, the pitch — has to fit one pager screen, and
the binding case is a 1280x800 laptop (a 714px budget), not the 1440
this was first composed at. Every vertical allowance in the split is
lean for that screen; it clears with ~30px to spare. */
padding: 14px 28px;
}
}
/* ONE SIZE FOR EVERY LINE — AND THE ROLL MUST NEVER SCALE ITSELF.
Founder, 2026-08-05, twice: the roll rendered smaller than the static
lines around it ("the ____ for your agents").
The element fits ITSELF to its column — `min(1, column / ghost)` — while
the static lines take whatever the CSS says. So the ONLY way the two sizes
are equal is for that fit to resolve to exactly 1, and then the headline's
own font-size governs every line.
The first cut sized the statics on the ghost's measured em ratio (10.219)
with a hair of slack, which made them equal ON THIS MACHINE and left a
0.3% margin — 548.4px of roll in a 550px column. That is not a margin, it
is a coincidence: a different rasteriser, a webfont that lands a frame
late, a fractional column, and the ghost crosses the column, the element
scales the roll a few percent, and the mismatch is back. It was reported
from a real browser doing exactly that.
So every divisor here carries a REAL 6% headroom over the widest run it
has to clear. The fit then clamps to 1 by construction rather than by
luck, and the headline is one size because there is only one size in play.
RETUNE ONLY IF THE COPY CHANGES, and keep the 6%. Two runs to measure, and
the divisor is the larger: the roll, as ghost.scrollWidth / font-size; and
the tail, as the UNION of its .rs-l spans under white-space:nowrap
(getClientRects returns one rect per span, so a max() over them silently
measures the wider span instead of the joined run — that mistake set this
divisor too low once already and put the tail back on two lines). A raw px
value with no type token is the roll-fitting licence — the same one the
mantra's fitter takes — done in CSS here because the measure is a
container, not the viewport. */
.role-hero {
container-type: inline-size;
/* the statement centres in whatever height the stretched track hands it;
content-sized tracks (stacked, or a short screen) are unaffected */
display: flex;
flex-direction: column;
justify-content: center;
}
/* THE AMBIENT STAGE — the split's other left half (founder, 2026-08-06). The
same looping scenery the full-bleed bands carry, given a frame of its own:
no veil, because no copy sits on it, and the scene FITS rather than covers,
because a crop here would throw away composition nobody is reading through.
The band is absolutely positioned by its own chrome, so the stage needs a
height to be absolute against, and its only content is that absolute band —
so the track's stretch is what gives it one, and the min-height is the floor
for every case where the track is CONTENT-sized instead (stacked on a phone,
or a short screen) and there is no row height to take a share of. Without
the floor the stage measures zero there and the scene simply is not on the
page. The band's own positioning comes from ambient-band.mjs's chrome. */
.role-stage { position: relative; min-width: 0; min-height: 380px; }
.role-stmt {
font-family: var(--epq-font-display);
font-variation-settings: var(--epq-big-vf);
/* PHONE. The roll stacks a word per line and the tail breaks, so the widest
run is "FOR YOUR" at 5.178em; x1.06 = 5.49. The 52px ceiling is taste,
not fit: it keeps a five-line headline from owning the whole screen. */
font-size: min(52px, calc(100cqw / 5.49));
line-height: var(--epq-lh-tight);
letter-spacing: -.01em;
text-transform: uppercase;
margin: 0;
}
/* THE ROLE BREAKS ACROSS TWO LINES (founder, 2026-08-05: "you can split the
changing role text across two lines on landscape form factors and adapt
for mobile — the ___ / ___ / for your agents").
"The" is now the roll's OWN first column, constant across every role, so
the element's rule that a word shared by consecutive roles holds dead
still is what keeps it from twitching — it is the same mechanism that
holds "manager" still between project and product manager, spent on a
word that never changes at all. That is what lets "THE" sit on the same
line as the stepping word without leaving the element.
The columns lay out in a GRID rather than the element's own inline-flex
row: three columns flowing into two grid tracks put [the][word1] on row
one and [word2] on row two — the founder's composition exactly, and
deterministic, where a flex-wrap would depend on shrink-to-fit resolving
the way we hoped. `display` is the one property the element writes inline,
so this is the one !important; everything else is set from here cleanly.
Both the WINDOW and the GHOST take it, or the ghost measures the words in
one row and the fit comes out sized for a line that is never drawn.
The word space is padding on the columns that END a row, because gap="0"
is passed at the source (a flex/grid gap would also open the ROWS, and
this headline wants its own leading). A trailing pad on the last row's
single column costs a few px of invisible width and no rule. */
.role-stmt epq-role-roll [data-window],
.role-stmt epq-role-roll [data-ghost] {
display: grid !important;
grid-template-columns: auto; /* phone: one word per line */
justify-content: start;
}
.role-stmt epq-role-roll { line-height: var(--epq-lh-tight); }
/* The tail runs: a line each on a phone, one line in a landscape column. A
could not do this — the break has to be undoable. */
.rs-l { display: block; }
@media (min-width: 741px) {
/* LANDSCAPE COMPOSITION — the founder's sketch: THE + the stepping word,
the second word, then the tail on one line. It starts at 741px, the
site's own phone boundary, not at the 1151 layout breakpoint: a stacked
tablet column is wider than a split desktop one, so it can carry the
composition comfortably. */
/* THE BINDING RUN IN LANDSCAPE IS THE ROLL, as of 2026-08-12. The /10
divisor was sized so the tail "FOR YOUR AGENTS" could sit on one line —
but the tail measures 10.428em (not the 9.445 first recorded; see
decisions/2026-08-06-the-suite-splits-and-claims-its-frame.md, "Left
alone, deliberately"), so it wrapped to two lines at every width anyway
and the headline paid for a composition it never drew. The founder's
call ("the role text is also too small") takes the other branch: size on
the roll's widest row, "THE BUSINESS" at 7.167em (ghost.scrollWidth,
pad included), x1.06 headroom = 7.6, and let the tail break where it
always did — FOR YOUR / AGENTS, the phone's own composition. The roll's
fit clamps to 1 by construction, so the headline stays one size.
Measure BOTH runs if either changes: the roll as ghost.scrollWidth, the
tail's longest WORD-RUN between break opportunities ("FOR YOUR",
5.178em) as the union of its rects under white-space:nowrap. */
/* The CEILING is taste, not fit — the divisor is the fit, and it is the
thing the block above forbids retuning without remeasuring. 88 was set
when the divisor was 10; kept there it would cap the whole widened range
(the /7.6 fit passes 88px from a 669px column up) and repeal the size
this change exists to grant. 112 binds at 851px, which only the stage
ceiling's 840px column approaches, so what governs is the divisor and
the top end stops a hair short of poster size. */
.role-stmt { font-size: min(112px, calc(100cqw / 7.6)); }
.role-stmt epq-role-roll [data-window],
.role-stmt epq-role-roll [data-ghost] { grid-template-columns: auto auto; }
/* the first column carries the word space; the second ends the row */
.role-stmt epq-role-roll [data-window] > *:nth-child(1),
.role-stmt epq-role-roll [data-ghost] > *:nth-child(1) { padding-right: .22em; }
/* ROW TWO SPANS BOTH TRACKS, and this is load-bearing rather than tidy.
Left to auto-flow, the third column lands in track 1 and forces that
track to fit "ANALYST" — so the grid measured max(the, analyst) +
business = 611px, wider than either row it actually draws, the ghost
reported 611 into a 550px column, and the element dutifully scaled the
roll to 0.9 of the static lines. That IS the reported mismatch, arriving
by a new route. Spanning the row means the tracks are sized by the row
that is really drawn, and a spanning item only grows them if it is wider
than both together — which "ANALYST" is not. */
.role-stmt epq-role-roll [data-window] > *:nth-child(3),
.role-stmt epq-role-roll [data-ghost] > *:nth-child(3) { grid-column: 1 / -1; }
.rs-l { display: inline; }
.rs-l + .rs-l::before { content: " "; }
}
.role-cards { display: flex; flex-direction: column; gap: 12px; min-width: 0; justify-content: center; }
/* THE CARDS SHED THEIR PANELS (founder, 2026-08-12: "too much unused space on
desktop/tablet… find a way for the text containers to blend/fade with the
background and use only the space they need"). Each card was a bordered,
hard-shadowed sheet on the page surface, stretched to its share of the
column — which put a visible frame around every pixel the content did not
fill and made the column's air read as the card's emptiness. Border, shadow
and fill all go, and the card goes content-sized: the text now sits directly
on the section's own surface and the COLUMN centres it (justify-content
above), so the blank around it is the section's air, not a panel's. The
.role-card class stays load-bearing chrome-free — it is a phone snap stop
and the columns' flex item. */
.role-card { flex: 0 0 auto; }
.role-card--glyphs { padding: 15px 20px; container-type: inline-size; }
.glyph-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
/* 240px, not 210: the track floor has to hold TWO columns across both card
widths the split now produces — 510px of inner card at the pillar and
690px at the widened stage. 210 gave two at the first and three at the
second, and three tracks over seven stations rags 3/2/2 and shrinks every
caption to hold a column that is not there. 240 floors it at two for
anything between 480 and 719, which is the whole two-column range. */
/* 210, retuned 2026-08-12 with the .85fr track: the floor has to hold TWO
columns across the card widths the split now produces — ~467px of inner
card at the pillar and ~587 at the widened stage. 240 held two across the
old even split's 510/690 but drops the new pillar case to one column of
seven, a list taller than the frame; 210 floors both at two, and three
tracks (which rag 3/2/2) need 666px, which no split column reaches. */
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 10px 18px;
/* the index sits in the middle of whatever height it is handed, rather than
spreading seven stations over a tall screen until they stop reading as one
list */
align-content: center;
}
/* THE MARK SITS BESIDE ITS CAPTION, at every width. Stacked above it, each
cell measured 120px and three rows of them ran the card to 428px — which
is what pushed the section past its frame on a 1280x800 laptop and, two
columns deep, past it at 1024x768 as well. As a row the cell is ~half that
and the seven stations read as the index they are. One treatment, so there
is no width at which the taller one can come back and overflow a screen. */
.glyph-grid li {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 11px;
row-gap: 2px;
align-items: center;
align-content: start;
}
.gg-ic { line-height: 0; grid-row: 1 / 3; }
.gg-name, .gg-txt { grid-column: 2; }
.gg-name {
font-family: var(--epq-font-mono);
font-size: var(--epq-t-label);
font-weight: var(--epq-w-label);
letter-spacing: var(--epq-track-label);
text-transform: uppercase;
color: var(--epq-text);
}
/* label size, not body: seven captions at 21px would out-weigh the copy they
support. Muted, because the glyph and its name are the thing being said. */
.gg-txt { font-size: var(--epq-t-label); line-height: 1.45; color: var(--epq-text-muted); }
/* THE INDEX STEPS UP WITH ITS PANEL. "Out-weigh the copy they support" was
written when this card shared a column with the positioning card; that card
moved to §3.0 on 2026-08-06 and there is no copy left here to out-weigh —
the index IS the section's right half now. On the widened stage a label-sized
list read as a footnote pinned to the middle of a 1000px panel, which is the
same under-filling the section was reported for, one level in.
A CONTAINER query, not a viewport one, because what governs is how much card
there is: under the .85fr track the card is ~467px of content at the pillar
and ~587 at the stage measure, and 560 is the threshold between them that
cannot drift when a breakpoint moves (620 was, when the split was even and
the widths were 510/690). This is the one place on the page where the seven
stations have room to be read rather than counted. */
@container (min-width: 560px) {
.glyph-grid { gap: 24px 30px; }
.glyph-grid li { grid-template-columns: 42px minmax(0, 1fr); column-gap: 16px; row-gap: 5px; }
.gg-ic svg { width: 40px; height: 40px; }
.gg-name, .gg-txt { font-size: var(--epq-t-body); }
}
/* THE PITCH CARD IS ORDINARY TEXT (founder, 2026-08-06: "change it to match
normal card text"; 2026-08-12: the panel itself goes — see .role-card). It
was a solid field fill, then a sheet; now it is the section's own ink on the
section's own surface, beside the isometric stage it captions. */
.role-card--pitch { color: var(--epq-text); padding: 15px 20px; }
.pitch-stmt {
font-family: var(--epq-font-display);
font-variation-settings: var(--epq-big-vf);
font-size: var(--epq-t-title);
line-height: var(--epq-lh-tight);
text-transform: uppercase;
margin: 0 0 10px;
/* no measure cap: the card is the measure, and the extra line a 24ch cap
forced was the line that pushed the split past its screen */
}
.pitch-txt { margin: 0; max-width: 52ch; }
.pitch-txt + .pitch-txt { margin-top: 10px; }
@media (max-width: 900px) {
.role-split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 640px) {
.role-card--glyphs, .role-card--pitch { padding: 16px; }
/* one station per row on a phone, and the mark steps down with the type */
.glyph-grid { grid-template-columns: minmax(0, 1fr); }
.glyph-grid li { grid-template-columns: 26px minmax(0, 1fr); }
.gg-ic svg { width: 24px; height: 24px; }
}
/* THE SPLIT DEALS ITSELF AS THREE FRAMES ON A PHONE. Stacked, the section is
three-plus screens tall, and the pager's escape valve (free scroll inside an
oversized card) left it arriving cut mid-content — the founder's "overflows
the frame". Below the stacking breakpoint the split's own blocks become
snap stops: the role headline, the glyph card, the pitch card — one
gesture, one block, each landing flush under the nav like a card of its
own. Descendants of the scroll container are legal snap areas, so this is
pure CSS; the flick animation stays with the outer card, which is right —
these are stops within a card, not new cards. The query is the exact
negation of the two-column gate above — stacked because it is too narrow,
OR stacked because the window is too short — so the stops exist on every
screen where the section is stacked, and nowhere else. Same reduced-motion gate as
the pager itself: off the pager the section is an ordinary scrolling
document and needs none of this. */
@media (prefers-reduced-motion: no-preference) and (max-width: 1150px),
(prefers-reduced-motion: no-preference) and (max-height: 779px) {
html.epq-paged .role-hero,
html.epq-paged .role-stage,
html.epq-paged .role-card {
scroll-snap-align: start;
scroll-snap-stop: always;
scroll-margin-top: calc(var(--epq-nav-h, 86px) + 10px);
}
/* …EXCEPT THE BLOCK THAT OPENS THE SPLIT, WHICH YIELDS ITS STOP TO THE CARD.
This is the founder's "false stops" (2026-08-11), and it was arithmetic
rather than bad luck: the card is a snap area too, and the split's first
block starts one clause bar below the card's top. Measured at 390x844, the
two mandatory stops landed 62px apart on §2.0 and 73px apart on §3.0 — so
one gesture in three moved the page by a thumb's width and halted, which is
precisely what a false stop feels like. scroll-snap-stop: always made it
unskippable; without it the browser would have flung past the near-duplicate
and nobody would have seen it.
The CARD keeps the stop and the opening block loses it, not the other way
round. The card's stop lands its clause bar flush under the nav — §2.0 THE
SUITE, the section's own marker — and the opening block is fully on screen
from there anyway. Yielding the other way scrolls the clause bar up behind
the bar and the reader arrives at a headline with no section on it.
Written against the split's STRUCTURE rather than against .role-hero and
.role-stage by name: the two splits that exist today open with one of those,
a third could open with its cards, and the invariant being protected is
"whatever comes first has the card's stop already", not the class list. */
html.epq-paged .role-split > :first-child,
html.epq-paged .role-split > :first-child .role-card:first-child {
scroll-snap-align: none;
}
/* THE CARD YIELDS ITS SNAP TO ITS CLAUSE BAR — the other half of the false
stops, and the half that only shows on a real phone.
A split section is TALLER THAN THE SCREEN when it stacks: measured at
360x640, §2.0 is 885px in a 531px frame and §3.0 is 745px, so two of the
five cards are OVERSIZED SNAP AREAS. The spec's escape valve for those is
that any position where the snapport sits entirely inside the area is a
legal rest — 354px of them on §2.0 — so mandatory snap stops being
mandatory and the reader is set down wherever the flick ran out, mid-glyph
and mid-sentence. The block above documents that valve as a FEATURE, and on
a card that is genuinely one long read it is; on a card composed of frames
it is the bug, because every one of those rest positions is a stop nobody
designed.
The cure is to stop the card being an area at all, WITHOUT moving where the
reader lands. Its clause bar starts at the card's exact top, so a stop on
the bar puts the section marker flush under the nav — the same arrival to
the pixel — while the area being aligned is 72px tall instead of 885 and
can never swallow the snapport. The frames inside then own every other
stop, and there is no position left that is not one.
Only in this query, and only for split cards: everywhere else the card IS
one screen, is not oversized, and keeps its own stop. */
html.epq-paged .epq-card:has(> .role-split) { scroll-snap-align: none; }
html.epq-paged .epq-card:has(> .role-split) > .epq-clause-bar {
scroll-snap-align: start;
scroll-snap-stop: always;
scroll-margin-top: var(--epq-nav-h, 86px);
}
}
/* THE ROLL'S ABERRATION IS ON THE LETTERFORMS HERE TOO. The DS's word-change
flash splays an outer box-shadow on the column's plate span, and at the
role split's display size the column box is far larger than the word — the
flash painted coloured BARS across the headline, the exact failure the
mantra block above documents ("the box is not the word"). Same cure, scoped
to the split: the plate span stays the trigger and paints nothing; the
fringe (epq-mantra-fringe, drop-shadows that follow the glyph silhouettes)
rides the slug window beside it. The em tracks the headline's own size, so
one rule serves every width the clamp lands on. */
/* The splay is ABSOLUTE-FLOORED HIGH on purpose. The first cut used
max(5px, .05em) and the founder reported the effect lost — 5px at 54px
type for 320ms is below notice, the same finding the click path and the
mantra each made in turn ("a single instant at peak offset is
imperceptible"). 8px is the click path's own word-flash order of
magnitude, and the drift doubles so the 18–55% hold is long enough to
catch — this flash is ambient, nobody is primed by a click. */
.role-stmt epq-role-roll,
.role-stmt epq-role-roll [data-plate],
.role-stmt epq-role-roll [data-plate] + span {
--epq-mantra-plate: max(8px, .13em);
}
.role-stmt epq-role-roll [data-plate].epq-plate-enter { animation: none; }
.role-stmt epq-role-roll [data-plate].epq-plate-enter + span {
animation: epq-mantra-fringe calc(var(--epq-plate-drift) * 2) steps(3) 1 both;
}
.role-stmt epq-role-roll { overflow-clip-margin: max(12px, .16em); }
/* The detail line under a tagline (hero, and any section that sets ledeDetail).
It is the lede's supporting sentence stepped down ONE role — 34px lede over
21px body. Per rule 1 there is no size between those two, and no "slightly
smaller": the hierarchy is the scale step itself. Full ink, not muted — the
detail carries the value prop, so the drop is size alone. The 12px top margin
pairs it to the tagline above (tighter than the 24px that sits over a lede),
so the two read as one unit rather than two loose lines. */
.epq-lede-detail {
font-size: var(--epq-t-body);
line-height: var(--epq-lh-body);
max-width: 46ch;
margin: 12px 0 0;
}
/* Sub-label inside a section body. Mono, label size, muted — it orients and is
then ignored, which is the definition of the 13px role. */
h3 {
font-family: var(--epq-font-mono);
font-size: var(--epq-t-label);
font-weight: var(--epq-w-label);
letter-spacing: var(--epq-track-label);
text-transform: uppercase;
color: var(--epq-text-muted);
margin: 34px 0 12px;
}
/* ---- Upstream correction: the clause number fails AA on the ink bar -----
REV F bug, reported, and found by scripts/palette-audit.mjs rather than by
eye — which is the point of having the script.
The clause number is field-coloured on an ink bar; binding rule 3 calls it
the field's primary carry down the page. At --epq-t-clause (21px) and
--epq-w-label (600) it is not "large text", so it needs 4.5:1. On the LIGHT
theme, against #16180F:
drift #E6007E 3.98:1 FAIL
agents #6B4EFF 3.55:1 FAIL <- every services/book/detail page
capture #FF5C00 5.79:1 pass
explorer, verify pass comfortably
Design already solved this exact problem once, for the dark theme's raised
panel, and wrote the reason next to --epq-f-capture-rev. What the export
missed is that the -rev variants are not "the dark theme's colours" — they
are the colours for a DARK GROUND, and an ink bar is a dark ground in both
themes. So the fix is theirs, applied one scope wider:
drift-rev #FF4DA6 5.86:1
agents-rev #8B72FF 5.08:1
capture-rev #FF7A33 6.90:1
On the cyanotype theme this is a no-op — theme.css has already aliased those
fields onto the same -rev pigments, so the value is unchanged.
Mixed on --epq-reveal rather than set flat, because the -rev tokens are
declared raw at :root and are NOT revealed. Used directly they would put a
saturated violet number on an otherwise monochrome first frame, which is the
exact failure the reveal block guards against for the base fields. */
[data-epq-field="agents"] .epq-ink-bar {
--epq-field: color-mix(in srgb, var(--epq-src-agents-rev) calc(var(--epq-reveal) * 100%), var(--epq-expose));
}
[data-epq-field="drift"] .epq-ink-bar {
--epq-field: color-mix(in srgb, var(--epq-src-drift-rev) calc(var(--epq-reveal) * 100%), var(--epq-expose));
}
[data-epq-field="capture"] .epq-ink-bar {
--epq-field: color-mix(in srgb, var(--epq-src-capture-rev) calc(var(--epq-reveal) * 100%), var(--epq-expose));
}
/* ---- Reveal timing · founder ------------------------------------------
1s delay -> 0.25s. Only the delay is overridden; duration, steps and fill
stay with the export so a regeneration can retune the curve.
What this actually buys, because steps(3, jump-end) makes it non-obvious:
jump-end emits 0 through its own first interval, so the VISIBLE HOLD is
delay + duration/3, not the delay. It goes 1120ms -> 370ms, and the three
colour jumps land at 370 / 490 / 610ms instead of 1120 / 1240 / 1360ms.
Retiming again: set the delay to the hold you want minus 120ms. */
html.epq-reveal { animation-delay: .25s; }
/* ---- Founder correction: the light reveal opens on the wrong paper ------
The export exposes the light theme against pure #FFFFFF, so a page that
settles on manila (#D9D6C7) opens two-and-a-half stops brighter than it
ends. On a full-bleed ground that is a white FLASH, not an unexposed
sheet — the same complaint the dark default exists to answer, arriving on
the theme a light-sensitive reader switched TO.
The dark theme already gets this right: its exposure colour is
--epq-src-cy-ground, i.e. its own settled ground, so the page opens on the
bare bath and the pigments come up on it. Light is the outlier, and this
pins it to the same rule — the unexposed sheet is the paper the page is
printed on.
Only the ground moves. --epq-expose-ink is untouched, so ink is still black
from the first frame, --epq-line is still ink and unrevealed, and every
pigment still mixes over the same three steps. The reveal reads exactly as
before, minus the flash: a black line drawing on manila that takes its
colour.
SCOPED, not global. `:root` here would load after episquire.css and outrank
its equal-specificity [data-epq-theme="reverse"] rule, dragging the dark
theme's exposure onto manila too — a white flash on the theme that had
none. The :not() raises specificity above both and excludes dark outright. */
html:not([data-epq-theme="reverse"]) { --epq-expose: var(--epq-src-manila); }
/* ---- Upstream correction: the dark reveal erases its own line drawing ---
REV F bug, reported. The reveal's whole premise is a monochrome line drawing
that gets printed: on manila that works because --epq-ink is deliberately
NOT revealed ("ink is the one thing already black on the first frame"), and
--epq-line is ink, so the borders are there from frame one.
The cyanotype block exempts --epq-cy-ink for the same stated reason but then
reveals --epq-cy-line:
--epq-cy-line: color-mix(… var(--epq-src-cy-line) … var(--epq-expose));
--epq-expose is the bare ground on this theme, so at reveal 0 every border on
the page computes to exactly the page ground. The drawing has no lines. The
first 1.12s is a blank field that then grows its own structure, which is the
opposite gesture from the light theme's.
The line colour is this theme's drawing colour, not one of its surfaces, so
it belongs with --epq-cy-ink on the exempt side. Pinned to its source: the
page opens as #5E8AA6 rules on the bare bath — a blueprint, which is what
cyanotype means — and the panels, fields and muted text expose against it. */
html.epq-reveal[data-epq-theme="reverse"] {
--epq-cy-line: var(--epq-src-cy-line);
}
/* ---- Plates on the cyanotype ground · FOUNDER OVERRIDE -----------------
REV F bans the misregistration plates on dark (theme.css): "they read as a
screen fault rather than a press artefact once there is no white paper for
them to slip against." Founder overrides that — the aberration is the
system's one piece of motion colour and losing it on the default theme
loses it everywhere that matters.
Design's objection is real, though, and it is about ENERGY, not hue. A plate
at 62% is a small darkening over white paper; the identical plate over
#123048 is a large lightening, so the same values that read as ink slip on
manila read as a backlit glow on the ground. So this does not simply delete
their rule — it restores the animation and re-specifies the plates lower.
The alpha was 38% on that reasoning and the founder read it as too muted on
the ground — real eyes beat the argument, so it is back to 62%, parity with
the light theme and the design system's own number. Note the dark theme
already substitutes the LIGHTER -rev pigments for magenta and orange, so
62% here is not the same stimulus as 62% on manila; it is stronger. If it
still reads as too quiet, this is the knob and it can go past 62 — the
plates are a fixed triad and owe nothing to any contrast floor, because
they never carry text and never persist. */
[data-epq-theme="reverse"] {
--epq-plate-c: color-mix(in srgb, var(--epq-f-explorer) 62%, transparent);
--epq-plate-m: color-mix(in srgb, var(--epq-f-drift) 62%, transparent);
--epq-plate-y: color-mix(in srgb, var(--epq-f-verify) 62%, transparent);
}
/* Same selectors as the ban, and this sheet loads later, so equal specificity
wins. Restoring the shorthand rather than `animation-name` keeps duration,
easing and fill in one place with the light-theme rule. */
[data-epq-theme="reverse"] .epq-plate-press:active {
animation: epq-press-plates var(--epq-plate-flash) steps(3) 1 both;
}
[data-epq-theme="reverse"] .epq-plate-enter,
[data-epq-theme="reverse"] [data-plates="fire"] {
animation: epq-misregister var(--epq-plate-drift) steps(3) 1 both;
}
/* The DS's dark-theme ink-bar treatment enumerates the band corner tabs it
knew about (.rec-tab, .br-tab) when exempting chips from the 2px field
rule. The two bands added 2026-07-28 carry the same chips; exempt them
here — this sheet loads later, so equal specificity wins. Offered
upstream: the export should key the exemption off a class, not a list. */
[data-epq-theme="reverse"] .mp-tab,
[data-epq-theme="reverse"] .ag-tab { border-top: 0; }
/* ---- Click aberration on links too · FOUNDER --------------------------
The CMY press-plate splay is the system's one piece of motion colour, and
the founder wants every pressable thing to earn it on click. Buttons
already opt in (.epq-plate-press on .epq-btn) and so does the figure play
control; this widens the reward to the site's links.
A button is a block with a resting ink shadow, so epq-press-plates suits it
verbatim — the plates splay while the 5px shadow collapses, which IS the
press-down. A link is a WORD, and the DS rule for a word is "cancel the
resting shadow" (see --epq-plate-shadow, foundations.css) so no drop shadow
prints behind the text and the word does not translate — only the colour
splits. epq-press-plates-word is epq-press-plates with the 4th (ink) shadow
layer removed and everything else — the CMY triad, the --epq-plate-flash
duration, steps(3) — held identical, so it reads as the same effect. The
global reduced-motion rule (foundations.css) still cancels all of it, which
leaves the plain :active state as the correct degradation.
Not theme-scoped: the plate tokens already resolve per theme (the founder
override restores them on the cyanotype ground), so one rule covers both. */
@keyframes epq-press-plates-word {
0% { box-shadow: 0 0 0 0 var(--epq-plate-c), 0 0 0 0 var(--epq-plate-m), 0 0 0 0 var(--epq-plate-y); }
30% { box-shadow: -7px 5px 0 0 var(--epq-plate-c), 7px -4px 0 0 var(--epq-plate-m), 3px 8px 0 0 var(--epq-plate-y); }
65% { box-shadow: -3px 2px 0 0 var(--epq-plate-c), 3px -2px 0 0 var(--epq-plate-m), 1px 3px 0 0 var(--epq-plate-y); }
100% { box-shadow: 0 0 0 0 var(--epq-plate-c), 0 0 0 0 var(--epq-plate-m), 0 0 0 0 var(--epq-plate-y); }
}
.epq-nav a:active,
.epq-wm:active,
.epq-det-link:active,
footer a:active {
animation: epq-press-plates-word var(--epq-plate-flash) steps(3) 1 both;
}
/* .epq-fig-play:active sets animation:none to stop its idle breathe, which
also cancels the plate press it opts into via .epq-plate-press. Re-assert it
here (later sheet, equal specificity) so the play control aberrates on click
like every other button rather than pressing in monochrome. */
.epq-fig-play:active {
animation: epq-press-plates var(--epq-plate-flash) steps(3) 1 both;
}
/* JS-fired variant of the press splay. The .epq-firing class is added on
pointerdown / keyboard activation by the delegated handler in head()
(util.mjs) and removed on animationend, so the splay plays start-to-finish
even on a fast click — which the :active rules above cannot guarantee once
the mouse is released early.
These keyframes are LOUDER than the DS :active flash on purpose. The bare
flash — 180ms, 7px, and a single instant at peak offset — is imperceptible
in real motion however reliably it fires (the founder's report), so the
fired path reaches a larger misregistration FAST and then HOLDS it (18%→55%)
so the eye catches the colour split before it snaps back. Still one flash,
still under the DS ~340ms ceiling. The DS :active keyframes stay untouched as
the no-JS fallback; only what the JS drives is tuned here.
Block keeps its resting hard shadow throughout (--epq-plate-shadow, constant
like epq-misregister) so a button does not appear to un-press while the
plates splay over it. A word carries no shadow layer at all. */
@keyframes epq-fire-block {
0% { box-shadow: 0 0 0 0 var(--epq-plate-c), 0 0 0 0 var(--epq-plate-m), 0 0 0 0 var(--epq-plate-y), var(--epq-plate-shadow); }
18% { box-shadow: -13px 9px 0 0 var(--epq-plate-c), 13px -8px 0 0 var(--epq-plate-m), 5px 14px 0 0 var(--epq-plate-y), var(--epq-plate-shadow); }
55% { box-shadow: -13px 9px 0 0 var(--epq-plate-c), 13px -8px 0 0 var(--epq-plate-m), 5px 14px 0 0 var(--epq-plate-y), var(--epq-plate-shadow); }
80% { box-shadow: -5px 4px 0 0 var(--epq-plate-c), 5px -3px 0 0 var(--epq-plate-m), 2px 5px 0 0 var(--epq-plate-y), var(--epq-plate-shadow); }
100% { box-shadow: 0 0 0 0 var(--epq-plate-c), 0 0 0 0 var(--epq-plate-m), 0 0 0 0 var(--epq-plate-y), var(--epq-plate-shadow); }
}
@keyframes epq-fire-word {
0% { box-shadow: 0 0 0 0 var(--epq-plate-c), 0 0 0 0 var(--epq-plate-m), 0 0 0 0 var(--epq-plate-y); }
18% { box-shadow: -10px 7px 0 0 var(--epq-plate-c), 10px -6px 0 0 var(--epq-plate-m), 4px 11px 0 0 var(--epq-plate-y); }
55% { box-shadow: -10px 7px 0 0 var(--epq-plate-c), 10px -6px 0 0 var(--epq-plate-m), 4px 11px 0 0 var(--epq-plate-y); }
80% { box-shadow: -4px 3px 0 0 var(--epq-plate-c), 4px -2px 0 0 var(--epq-plate-m), 2px 4px 0 0 var(--epq-plate-y); }
100% { box-shadow: 0 0 0 0 var(--epq-plate-c), 0 0 0 0 var(--epq-plate-m), 0 0 0 0 var(--epq-plate-y); }
}
.epq-btn.epq-firing,
.epq-fig-play.epq-firing {
animation: epq-fire-block 300ms steps(3) 1 both;
}
.epq-nav a.epq-firing,
.epq-drawer a.epq-firing,
.epq-wm.epq-firing,
.epq-det-link.epq-firing,
footer a.epq-firing {
animation: epq-fire-word 300ms steps(3) 1 both;
}
/* ---- Figure ground dim (phones only) -------------------------------------
Ruling: decisions/2026-07-29-mobile-figures-miniature-grammar.md (which
superseded the same-day no-camera ruling this layer arrived with — the dim
is the part that survived).
House lights. While a figure plays on a phone, the GROUND goes down and the
sheets standing on it stay lit — attention on the figure with nothing
moving. Under the wire ruling (2026-07-29, third of the day) it plays
beneath the drafted wires: the dim drops the ground, the wires draft the
relationships across it, the sheets stay lit.
The layer dims the GROUND only. It sits above the band's background and its
depth grid and BELOW the camera's content, so cards, chips and rules keep
full strength and GAIN contrast as the ground drops away beneath them. The
corner tabs stay above it untouched: they are the film frame, not the
picture.
It is light, not pigment. Near-black at low alpha darkens the cream ground in
the light theme and deepens the cyanotype ground in dark, so it derives in
both themes with nothing authored per-theme — the complement of the
aerial-perspective veil, which mixes toward --vellum because distance adds
air, where this one mixes toward ink because it takes light away.
Animating opacity alone keeps it on its own layer and never repaints the grid
beneath it. Rest is fully transparent and the dim exists ONLY as an
animation, so the global prefers-reduced-motion kill in episquire.css lands
the reader on the undimmed sheet — the resting frame stays the finished
sheet, which the camera ruling requires.
Consumed by all four figure bands (record, backbone, agents, branch); each
applies it over its own run length, the same way they share epq-misregister.
The alpha is the one thing that CANNOT derive from a single value, and it is
physics rather than taste. Taking light away from a ground that is already
near the floor has almost nowhere to go: the same veil that drops the cream
ground by a luminance ratio of 1.39 moves the cyanotype panel by 1.06, which
is not a dimming, it is nothing. Even pure black only reaches 1.54 there, so
no shared number serves both. The reverse theme therefore spends the headroom
it actually has (42% → 1.14) and stops short of the black that would erase
the grid with it — the grid stays faintly legible, because a dimmed sheet is
still a sheet. Same exception, and the same reason, as the fields remapped on
the ground in episquire.css: authored per-theme only where deriving is not
physically available. */
:root { --epq-fig-dim-ink: color-mix(in srgb, var(--epq-src-ink) 16%, transparent); }
[data-epq-theme="reverse"] { --epq-fig-dim-ink: color-mix(in srgb, var(--epq-src-ink) 42%, transparent); }
@keyframes epq-fig-dim {
0% { opacity: 0 }
9% { opacity: 1 }
88% { opacity: 1 }
100% { opacity: 0 }
}
/* The global reduced-motion kill in episquire.css is authored on `*`, and `*`
does not match a generated pseudo-element — so a dim living on ::after runs
straight through it, for exactly the readers who asked motion to stop. Killed
explicitly here. It has to be !important and it has to be in THIS file: the
band CSS is inlined into the page, so it lands after this stylesheet and wins
every specificity tie, and episquire.css is vendored — hand-editing it would
be undone by the next re-vendor. !important for a reduced-motion kill is the
house pattern, not an exception to it; the prohibition noted in episquire.css
is on the reveal opting OUT of that kill, which is the opposite case. */
@media (prefers-reduced-motion: reduce) {
.rec-band::after, .mp-band::after, .ag-band::after, .br-band::after {
animation: none !important; opacity: 0 !important;
}
}
/* ---- PAGE MANTRA -----------------------------------------------------------
Ruling: decisions/2026-07-31-page-mantra-exception.md. After The Designers
Republic: massive title type as logo/identity. The mantra is the ONE
sanctioned exception to the type scale's ceiling — it sizes on its MEASURE
(the longest line filling up to 90% of the screen, any platform, fitted by
static/epq-mantra.js), not on a scale step, and it may run tighter than
display tracking, down to a 1px GUARD: gaps may approach one pixel; glyphs
never touch. Everything else on the site keeps the rules, including this
file's own "never write a px font-size" law — the computed px the fitter
writes are authorised by the ruling and exist nowhere in authored CSS.
ONE SIZE FOR EVERY WORD (founder, 2026-07-31). The block is a solid slab of
uniform caps; the longest line sets the size and the shorter lines are
simply shorter. No per-line scaling, and the rolling word is the same size
as the words above and below it — the fitter measures the roll's own ghost
alongside the static lines so the common size clears all of them.
The em tracking below is the aggressor at mantra sizes (−0.04em at 300px is
−12px between letters); the founder's 1px is the guard it is tuned against,
on Archivo wdth 118 uppercase, worst pairs. Leading 0.76 on uppercase (no
descenders) leaves a few px between cap rows — tune toward 0.73 to approach
the 1px floor, never past touching. */
/* THE HORIZONTAL-SCROLL GUARD LIVES HERE, not on the stage. This box is a
.doc > * with max-width:none, and neither .doc nor body nor html carries
horizontal padding, so it IS the viewport width: clipping at its padding
box cuts exactly where the page would have scrolled and nowhere sooner.
It contains everything the stage's own clip used to (the pre-fit line
overflow before the fitter runs, sub-pixel slack, the roll's out-of-flow
ghost) while leaving the plate splay free to reach into the gutter the
centred stage leaves either side.
overflow-x:clip with overflow-y left visible is legal — `clip` is the one
overflow value that does not blockify its partner — so the plates still
splay VERTICALLY onto the neighbouring line, which is most of the effect.
And with no clip-margin declared anywhere, no clip-margin region is ever
counted toward the page's scrollable overflow, so the splay can grow with
the type without ever manufacturing the scrollbar it used to guard. */
.epq-mantra { display: block; max-width: none; overflow-x: clip; }
.epq-mantra { --epq-mantra-track: -0.04em; --epq-mantra-lh: 0.76; --epq-mantra-plate-k: .06; }
.epq-mantra-stage {
position: relative;
width: 88vw; /* no-JS fallback measure — under the classic-scrollbar budget;
the fitter replaces it with clientWidth-derived px */
margin: 0 auto;
/* The padding is TOKENISED because an absolutely-positioned overlay resolves
against the padding box, not the content box: anything that wants to sit
square on the type has to inset itself by exactly these. One place to
change them, and the strike hero's small line follows. */
--epq-mantra-pt: 40px;
--epq-mantra-pb: 36px;
padding: var(--epq-mantra-pt) 0 var(--epq-mantra-pb);
container-type: inline-size;
/* No clip here. It used to carry the scroll guard, but a 16px clip margin
also shaved the plate splay — and at 320px, where the gutter is exactly
16px, the margin region was itself on the verge of recreating the
scrollbar it existed to prevent. The guard moved up to .epq-mantra. */
}
.epq-mantra h1 { position: relative; z-index: 1; margin: 0; letter-spacing: var(--epq-mantra-track); line-height: var(--epq-mantra-lh); }
/* Specificity 0,2,1, and it needs every bit of it: the phone compaction block
near the foot of this file sets .epq-hero h1 { margin-bottom: 14px }, which
matches a mantra hero too (it is an .epq-hero) at equal specificity and
later in the file. That margin exists for the CLASSIC hero, where a lede
follows the headline inside the same box. Nothing follows a mantra's h1 —
the stage's own padding is the spacing, and the tail is a separate block —
so on a phone it was making the stage 14px taller than its own type, which
is exactly the kind of quiet offset anything positioning itself against the
type has to fight. */
.epq-hero.epq-mantra h1 { margin: 0; }
/* one size, every line — including the roll's. The fallback below is what a
no-JS reader gets; the fitter overwrites all of them with one computed px. */
.epq-mantra-line { display: block; width: 100%; min-width: 0; white-space: nowrap; font-size: 9cqw; }
/* THE ROLLING PHRASE BREAKS ACROSS LINES. The element lays its word columns
out side by side; in a mantra they STACK, one word per line, which is what
lets the block fill the vertical space — with the longest line down to a
single word, height becomes the binding constraint instead of width.
Done by turning the element's own flex axis, not by splitting it into one
element per word: one element is one timer, so the halves of the phrase
cannot drift apart, and the element's own rule — a word shared by
consecutive roles holds still while its neighbour steps — survives intact.
Both the window and the GHOST have to turn, or the ghost still measures
the words side by side and the fit comes out too small. Neither sets
flex-direction inline, so no !important is needed; the gap is handled at
the source instead, by the gap="0" the mantra passes the element. */
.epq-mantra epq-role-roll [data-ghost],
.epq-mantra epq-role-roll [data-window] { flex-direction: column; }
/* THE ABERRATION IS ON THE LETTERFORMS HERE, NOT ON THE BOX.
Founder: "the chromatic aberration effect on the rolling words is clipped
by nearby words." Unclipping it (the guard move at the top of this
section, and the roll-host margin below) turned out to be a third of the
problem. The other two:
· IT IS A BOX SHADOW, AND THE BOX IS NOT THE WORD. The design system's
plate is an empty span at inset:0 of the column, splayed with an outer
box-shadow. On a chip or a table row the box IS roughly the word, so an
offset copy of it reads as ink slipping. In a mantra the column box is
the full measure — some 800x117px — while the word inside it is much
smaller, so the same effect paints thin coloured RULES along the box's
edges, crossing the type and nowhere near the glyphs. Bigger offsets
only make the rules bigger. So the mantra takes the same registration
geometry to the LETTERFORMS: a filter of three drop-shadows, which
follow the alpha of what is actually rendered — the word's silhouette —
and paint outside the element's own box, so the clip that makes a roll
a roll (overflow:hidden on the slug window) cannot eat them.
· TIME. The DS holds its peak for a single step: ~37ms at steps(3) over
320ms. This site has already found that imperceptible and written it
down, for the click path, further up this file — "a single instant at
peak offset is imperceptible in real motion however reliably it fires
(the founder's report)" — which is why epq-fire-word reaches its offset
fast and HOLDS it. The mantra's flash is AMBIENT: nobody is clicking, so
nobody is primed to look. It needs the hold more than the click path
does, not less. Same shape here: 18% -> 55%.
Ratios are the design system's own, over 10: cyan -1.0/+0.7, magenta
+1.0/-0.6, yellow +0.4/+1.1, decaying at 0.4x. Only the unit changes, to
an em that tracks the type. Not theme-scoped — the plate pigments already
resolve per theme, and the founder override further up this file long
since restored the plates on the cyanotype ground, so this reads on both.
Chained drop-shadows do shadow each other's output; at these offsets and
62% alpha the compound is a fourth, fainter ghost between the plates,
which is what a real three-pass misregistration looks like anyway. */
@keyframes epq-mantra-fringe {
0%, 100% {
filter: drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent);
}
18%, 55% {
filter:
drop-shadow(calc(var(--epq-mantra-plate) * -1) calc(var(--epq-mantra-plate) * .7) 0 var(--epq-plate-c))
drop-shadow(var(--epq-mantra-plate) calc(var(--epq-mantra-plate) * -.6) 0 var(--epq-plate-m))
drop-shadow(calc(var(--epq-mantra-plate) * .4) calc(var(--epq-mantra-plate) * 1.1) 0 var(--epq-plate-y));
}
80% {
filter:
drop-shadow(calc(var(--epq-mantra-plate) * -.4) calc(var(--epq-mantra-plate) * .3) 0 var(--epq-plate-c))
drop-shadow(calc(var(--epq-mantra-plate) * .4) calc(var(--epq-mantra-plate) * -.2) 0 var(--epq-plate-m))
drop-shadow(calc(var(--epq-mantra-plate) * .2) calc(var(--epq-mantra-plate) * .4) 0 var(--epq-plate-y));
}
}
/* 1em here IS the mantra's own size: the roll's internal fit ratio is pinned
at exactly 1 in a mantra, because the fitter sets the stage width from the
widest run INCLUDING the roll's ghost, so the element never has to scale
itself down off the common size. The px floor keeps a phone from dropping
under the system's own absolute splay. */
.epq-mantra epq-role-roll,
.epq-mantra epq-role-roll [data-plate],
.epq-mantra epq-role-roll [data-plate] + span {
--epq-mantra-plate: max(9px, calc(var(--epq-mantra-plate-k) * 1em));
}
/* The plate span stays as the TRIGGER and keeps its timing — the element's
own JS restarts it on every word change — but paints nothing here: its box
is the wrong shape at this scale (see above). The fringe rides the slug
window next to it, which is the box that actually contains the glyphs.
Specificity (0,3,1) beats both the design system's ban and the founder
override further up this file, so only the mantra's own plates change —
the 404's number still gets the DS keyframe verbatim. */
.epq-mantra epq-role-roll [data-plate].epq-plate-enter {
animation: none;
}
.epq-mantra epq-role-roll [data-plate].epq-plate-enter + span {
animation: epq-mantra-fringe var(--epq-plate-drift) steps(3) 1 both;
}
/* The standing epq-role-roll clip (further down this file) sizes its margin
against the DS's fixed 11px. The splay tracks the type now, so the margin
has to as well: 1.25k clears the largest offset (the yellow plate's 1.1k)
with slack for rounding. Higher specificity than that rule, so it wins
despite sitting earlier in the file. */
.epq-mantra epq-role-roll {
overflow-clip-margin: max(11px, calc(var(--epq-mantra-plate-k) * 1.25em));
}
/* THE ONE OVERLAY. Selective, by ruling: the eyebrow is small, sits in the
stage's own top margin, and never crosses a letterform. z 2 over the
mantra's 1 — the whole assembly stays inside .doc (z 1), far below the
nav's 79. Everything else that used to be overlaid now lives in the tail. */
.epq-mantra-ov { position: absolute; z-index: 2; margin: 0; }
.epq-mantra-ov--tl { top: 8px; left: 2px; }
/* ---- THE STRIKE HERO (home page) ------------------------------------------
Ruling: decisions/2026-07-31-strike-hero.md. A page mantra with a STATE.
"kill giants" is set gigantic but GHOSTED — hairline outline, unfilled —
until the reader pushes the button, at which point it inks with a flash of
the chromatic aberration and keeps flashing intermittently.
The outline is the system's existing ghost idiom, not a new one: the branch
band draws the option it did not take as a hairline unnumbered face, and
the agents band's undocked card is the same trick. Here it earns a second
meaning — a plate that has not printed yet — which is why the fill reads as
the press finally taking, and why it had to be an outline rather than a
simple opacity fade. -webkit-text-stroke is the only way to stroke text
without duplicating it in the DOM; every browser the site supports has it
under that prefix and no standard property has shipped.
RESTING STYLES ARE THE FINISHED SHEET, as everywhere on this site: the
filled state needs no rule, and the GHOST is what gets added — and only
where a button can actually be pressed. Without scripting the class never
comes off, so the ghost is gated to (scripting: enabled); under reduced
motion it is dropped too, because a reader who asked motion to stop should
not be left holding an unfinished sheet behind a control whose whole job is
to animate. Same gate the record band uses for its SCATTERED start.
THE PRESS RUNS ON ARRIVAL (founder, 2026-08-02: the click-gated reveal
was "an underwhelming muddle" — the vital text was functionally invisible
in the frame most visitors ever saw, and the payoff for those who did
press lasted a third of a second). The scanline/interference murk is
GONE; the ghost is now only the first BEAT of an entrance that runs by
itself: epq-strike.js puts .epq-strike-printing on the hero shortly after
load, the sequence below prints the giant — cyan plate, magenta, yellow,
each slammed in out of register, pulled toward register, then the ink
lands — and the armed class comes off at its end. Every visitor sees the
big text arrive as an event; nobody has to earn it.
THE PRINT IS A FLASH NOW (founder, 2026-08-20: "the initial chromatic
effect on the text should happen faster - 0.2 seconds"). The six beats
keep their shape and their order; the whole sequence runs in the one
duration token below — 200ms, so each plate holds for roughly two frames
and the entrance reads as one chromatic SNAP rather than a printing you
watch. It is the opening beat of the giant's fall (see the strike tale in
src/templates/strike-fall.mjs), which is where the watching now happens.
THE PLATES ARE TEXT-SHADOWS, deliberately: text-shadow paints the glyph
SILHOUETTE at the shadow's own colour and full alpha even while the fill
is transparent, which is exactly a plate that has printed before the ink
— and unlike the box-shadow plates it needs no extra DOM at mantra scale.
Offsets are em, so the splay tracks the type. Colours are the process
plate tokens — this is MOTION, their sanctioned use. */
@media (scripting: enabled) {
.epq-strike-armed .epq-mantra-line {
color: transparent;
-webkit-text-stroke: var(--epq-strike-rule, 2px) color-mix(in srgb, var(--epq-text) 40%, transparent);
}
}
@keyframes epq-strike-print {
0%, 15% { color: transparent; text-shadow: none }
16%, 32% { color: transparent; text-shadow: .055em .038em 0 var(--epq-plate-c) }
33%, 49% { color: transparent; text-shadow: .055em .038em 0 var(--epq-plate-c), -.05em .028em 0 var(--epq-plate-m) }
50%, 65% { color: transparent; text-shadow: .055em .038em 0 var(--epq-plate-c), -.05em .028em 0 var(--epq-plate-m), .018em -.052em 0 var(--epq-plate-y) }
66%, 81% { color: transparent; text-shadow: .014em .01em 0 var(--epq-plate-c), -.012em .007em 0 var(--epq-plate-m), .005em -.013em 0 var(--epq-plate-y) }
82%, 100% { color: var(--epq-text); text-shadow: none; -webkit-text-stroke-width: 0 }
}
.epq-strike-printing .epq-mantra-line {
animation: epq-strike-print var(--epq-strike-print, 200ms) steps(1, jump-end) 1 both;
}
@media (prefers-reduced-motion: reduce) {
.epq-strike-armed .epq-mantra-line { color: var(--epq-text); -webkit-text-stroke-width: 0; }
}
/* The stroke tracks the type, so the outline reads as one weight of line at
every size rather than a hairline on a phone and a slab at 2560. Floored so
it never falls under the system's own hairline. */
.epq-strike .epq-mantra h1,
.epq-strike h1 { --epq-strike-rule: max(1.5px, .012em); }
/* THE SMALL LINE STRADDLES THE GIANT'S TOP EDGE (founder, 2026-08-02:
"aligned to the left and have about 50% overlap on the kill giants text").
Silkscreen, the site's one pixel face, at --epq-t-statement — 27px on a
phone against ~75px of mantra, 55px at desktop against ~250px, so the
scale contrast the mantra exception is built on survives.
Left-aligned on the TYPE's own left edge, and hung on the h1's top edge
with a -50% translate: half the line rides ON the giant, half sits in the
air above it — the "about 50% overlap" asked for, and it stays 50% at
every size because the anchor is an edge, not a length. The inset is
var(--epq-mantra-pt) because that IS the h1's top inside the stage's
padding box (the stage hugs the type; the h1 is its only in-flow child).
It is ALWAYS in front — z 2 over the h1's 1, both frames. What changes on
the push is its COLOUR: over the faint ghost it is the sheet's own text
colour, and once the giant inks in the same colour underneath it, it
swaps to the page's field orange to stay readable — half of it now sits
on solid ink, and orange is the one pigment this view owns that reads on
both the fill and the ground, in both themes. Resting styles are the end
state, so the FIELD colour is the default and the armed text colour is
what gets added, behind the same scripting gate as the ghost — a no-JS or
reduced-motion reader lands on the filled sheet and needs the contrast
colour from the first paint. */
.epq-strike-small {
position: absolute;
top: var(--epq-mantra-pt);
left: 0;
transform: translateY(-50%);
pointer-events: none;
font-family: "Silkscreen", "IBM Plex Mono", monospace;
font-size: var(--epq-t-statement);
font-weight: 400;
line-height: 1;
letter-spacing: .1em;
text-transform: lowercase;
color: var(--epq-f-capture);
}
@media (scripting: enabled) {
.epq-strike-armed .epq-strike-small { color: var(--epq-text); }
}
@media (prefers-reduced-motion: reduce) {
.epq-strike-armed .epq-strike-small { color: var(--epq-f-capture); }
}
/* THE HERO FILLS THE SCREEN BEFORE THE FOLD (founder, 2026-08-02, "on any
device") — a deliberate, scoped reversal of the mantra's own "earns its
screen" contract, which still holds on /how-it-works. The strike hero has
a STATE and a control, and the button-then-arrow story needs the fold to
be ITS fold: the arrow points at a place, and that place must be exactly
one screen down.
The nav is sticky above, so the claim is viewport minus nav: the fallback
var is the nav's resting height per breakpoint, and epq-strike.js writes
the measured height over it. svh, so a phone's collapsing toolbar never
makes the hero taller than the screen it actually has. The stage centres
in the claimed height; the button and arrow anchor to the HERO's own
corners, not the stage's, because the stage now floats mid-screen. */
.epq-strike {
--epq-nav-h: 86px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(100vh - var(--epq-nav-h));
min-height: calc(100svh - var(--epq-nav-h));
}
/* THE PLUNGER — A CONTROL VOCABULARY, CURRENTLY WITHOUT A CONSUMER.
A raised ISOMETRIC BLOCK in the site's block grammar (the same three-face
recipe as FIG 1.1: host = left face, ::before = right face, ::after = top
face; one hue shaded toward ink and vellum), sitting in a dark socket,
its label riding above as a flat chip exactly like the board's brand
chips — text stays flat and legible, the block does the volume. Pressing
drives the cap DOWN into the socket in one hard cut: no easing, because a
plunger is a mechanism, not a cushion.
It was the strike hero's button for one day. The founder retired that
button (2026-08-02: the type itself now takes the touch) but explicitly
kept the PATTERN — "we can use that pattern elsewhere though" — so this
block stays, unattached to any page, waiting for the control that wants
it. It is scoped to .epq-plunger and knows nothing about the hero; a
consumer supplies the positioning and the click handler. If a year passes
with no consumer, delete it — an unused component is a liability, and the
only thing keeping this one is an explicit instruction to keep it. */
.epq-plunger {
--plw: 92px; /* top-face box width */
--pld: calc(var(--plw) * .5774);
--plh: 22px; /* cap extrusion */
--plc: var(--epq-f-capture);
position: relative;
display: block;
width: calc(var(--plw) + 14px);
height: calc(var(--pld) + var(--plh) + 44px);
padding: 0; margin: 0;
background: none; border: 0; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.epq-plunger-label {
/* right-aligned to the block: the chip is wider than the cap, and a
consumer will usually hang this off a page gutter where a centred chip
would graze the edge. */
position: absolute; top: 0; right: 0;
font-family: "IBM Plex Mono", monospace;
font-size: var(--epq-t-label); font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; white-space: nowrap;
color: var(--epq-text);
background: var(--epq-surface-card); border: var(--epq-hair);
padding: 3px 8px;
}
/* the socket: a shallow dark slab the cap sinks into */
.epq-pl-base, .epq-pl-cap { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
.epq-pl-base {
--pbw: calc(var(--plw) + 14px); --pbd: calc(var(--pbw) * .5774);
width: var(--pbw); height: calc(var(--pbd) + 8px);
background: color-mix(in srgb, var(--plc) 30%, var(--epq-ink));
clip-path: polygon(50% 0, 100% calc(var(--pbd) / 2), 100% calc(var(--pbd) / 2 + 8px), 50% 100%, 0 calc(var(--pbd) / 2 + 8px), 0 calc(var(--pbd) / 2));
}
.epq-pl-cap {
width: var(--plw); height: calc(var(--pld) + var(--plh));
bottom: 10px;
background: color-mix(in srgb, var(--plc) 78%, var(--epq-ink));
clip-path: polygon(50% 0, 100% calc(var(--pld) / 2), 100% calc(var(--pld) / 2 + var(--plh)), 50% 100%, 0 calc(var(--pld) / 2 + var(--plh)), 0 calc(var(--pld) / 2));
}
.epq-pl-cap::before {
content: ""; position: absolute; inset: 0;
background: color-mix(in srgb, var(--plc) 55%, var(--epq-ink));
clip-path: polygon(50% var(--pld), 100% calc(var(--pld) / 2), 100% calc(var(--pld) / 2 + var(--plh)), 50% 100%);
}
.epq-pl-cap::after {
content: ""; position: absolute; inset: 0;
background: color-mix(in srgb, var(--plc) 82%, var(--epq-src-vellum));
clip-path: polygon(50% 0, 100% calc(var(--pld) / 2), 50% var(--pld), 0 calc(var(--pld) / 2));
}
/* the push: one hard cut down into the socket, one hard cut back. The
slamming class holds it down for the plates' first beat so a keyboard
press reads the same as a pointer press. */
.epq-plunger:active .epq-pl-cap,
.epq-plunger.is-pressed .epq-pl-cap { bottom: 2px; }
.epq-plunger:focus-visible { outline: 2px solid var(--epq-f-capture); outline-offset: 4px; }
/* The scroll indicator: a video-game direction arrow at the foot of the hero,
on the RIGHT (founder, 2026-08-02) — the same edge as the button, so the
push and the place it points you next share one column. Drawn as a SPRITE:
ten hard pixels on a 5x6 grid, one element and a box-shadow list, because a
smooth triangle would be the one thing on this page pretending not to be
made of squares.
IT IS A LINK NOW, not decoration: clicking or touching it scrolls to the
next section (founder, same note). An anchor rather than a script, so it
works without JS — the travel itself is the scroll-behavior rule below,
which is CAMERA, the one class of motion allowed to ease, and it is gated
off under reduced motion where the jump is instant. The padding is the tap
target: the sprite is 40x48 and a finger needs more than that.
And it BOUNCES — but in steps, not in easing. The site's binding rule is
that nothing eases except a rostrum camera, and an eased bob would break it
for decoration. Three hard positions is also simply more correct for the
register it is borrowing: an arcade indicator was drawn on a sprite sheet,
not tweened.
Hidden until the button is pushed — there is nothing to scroll to until the
mantra has inked. Resting styles are the finished sheet, so the arrow is
PRESENT by default and the armed state is what hides it, gated to
(scripting: enabled) like the ghost above. */
/* .epq-hop is the SHARED sprite — the strike hero's arrow and the frame
sections' hops are the same object, so the page has one way of saying
"the next thing is below". Consumers add a positioning class. */
.epq-hop {
--u: 8px;
position: absolute;
/* right side, but clear of the theme switch: the FAB owns the corner
itself (fixed, --epq-fab-inset + --epq-fab-size), so the hop stands
just inboard of it on the same foot line. */
right: calc(var(--epq-fab-inset, 24px) + var(--epq-fab-size, 56px) + 20px);
bottom: 18px; z-index: 3;
display: block;
width: calc(var(--u) * 5); height: calc(var(--u) * 6);
padding: 12px;
animation: epq-strike-bob 900ms steps(1) infinite;
}
.epq-hop i {
position: absolute; top: 12px; left: 50%;
width: var(--u); height: var(--u); margin-left: calc(var(--u) * -.5);
background: var(--epq-f-capture);
box-shadow:
0 var(--u) 0 var(--epq-f-capture),
0 calc(var(--u) * 2) 0 var(--epq-f-capture),
calc(var(--u) * -2) calc(var(--u) * 3) 0 var(--epq-f-capture),
0 calc(var(--u) * 3) 0 var(--epq-f-capture),
calc(var(--u) * 2) calc(var(--u) * 3) 0 var(--epq-f-capture),
calc(var(--u) * -1) calc(var(--u) * 4) 0 var(--epq-f-capture),
0 calc(var(--u) * 4) 0 var(--epq-f-capture),
calc(var(--u) * 1) calc(var(--u) * 4) 0 var(--epq-f-capture),
0 calc(var(--u) * 5) 0 var(--epq-f-capture);
}
@media (scripting: enabled) { .epq-strike-armed .epq-strike-arrow { display: none; } }
/* the frame hop scrolls within its own frame, whose foot it marks */
.body-frame-hop { bottom: 14px; }
@keyframes epq-strike-bob {
0% { transform: translateY(0) }
33% { transform: translateY(5px) }
66% { transform: translateY(9px) }
}
/* THE ABERRATION, AND THE TYPE AS THE INSTRUMENT.
epq-strike.js puts .epq-plate-enter on the h1 to flash it — but the design
system's own rule for that class splays an outer BOX shadow, and the h1's
box here is the whole mantra: it would paint coloured rules around the
block instead of a fringe on the type. So the strike takes the mantra's
letterform fringe (the filter of drop-shadows defined above), which follows
the glyph silhouettes at any box size. The token has to resolve on the h1
for the em to be the mantra's own size.
THE GIANT IS NOW THE CONTROL (founder, 2026-08-02: "remove the button
entirely… the text will show the chromatic effect on touch/click. Quickly
repeated touches/clicks intensify the effect"). Two things carry that:
· --epq-strike-heat, 0 to 1, written by the script from how fast the taps
are coming. It widens the splay (the plate token scales with it) and
shortens the flash (the duration divides by it), so a hammered mantra
throws its plates further and re-fires quicker — "faster/broader",
exactly. Heat DECAYS on a timer, so the intensity is momentary and the
resting behaviour is always the calm single flash.
· The multiplier tops out at 1.8x the base splay, and that ceiling was
found by looking: 3.4x measured 50px of throw at 1280 and the plates
stopped reading as misregistration altogether — they became three
separate coloured words behind the ink, which is a different and much
worse effect, and 2.2x still let the yellow plate fall a
third of a cap height clear of the baseline. 1.8x is the most throw that still reads as ONE object
slipping. The same ceiling the mantra ruling hit when it tried the
design system's own px ratio at poster scale.
The heat is a NUMBER in a var, not a set of classes, because it is a
continuous quantity and the alternative is five state classes that all
have to be mutually exclusive. Nothing eases: the flash itself is still
the site's stepped keyframe, and heat only changes its two dials. */
.epq-strike h1 {
--epq-strike-heat: 0;
/* --epq-mantra-size is the FITTED size, published by the fitter. NOT 1em:
the h1 carries the hero type step (89px) while the mantra renders at
whatever the fit produced (247px at 1280, 75px on a phone), so an em
here measures type that is not on the screen and the splay stops
tracking the size it is supposed to belong to. */
/* HEAT MULTIPLIES THE FLOORED BASE, it is not floored WITH it. Written the
other way round the 7px floor swallows the heat on a phone — base and
hammered both clamp to 7px, and touch is exactly where the drumming
happens — so the one platform the gesture was designed for felt nothing. */
--epq-mantra-plate: calc(max(7px, var(--epq-mantra-plate-k) * var(--epq-mantra-size, 1em)) * (1 + var(--epq-strike-heat) * .8));
cursor: pointer;
/* rapid tapping must not select the headline or summon the double-tap
zoom — both turn a percussion instrument into a text field. */
-webkit-user-select: none;
user-select: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.epq-strike h1.epq-plate-enter {
animation: epq-mantra-fringe calc(var(--epq-plate-drift) * (1 - var(--epq-strike-heat) * .55)) steps(3) 1 both;
}
/* A pointer-only flourish gets a pointer-only cursor: under reduced motion
nothing fires, so the type should not advertise itself as pressable. */
@media (prefers-reduced-motion: reduce) {
.epq-strike h1 { cursor: auto; }
}
/* ANCHOR TARGETS CLEAR THE STICKY NAV. Scrolling an element to the top of
the viewport puts its first --epq-nav-h pixels UNDER the nav, which is
fixed to that band of the screen — so a figure sized to exactly one free
screen arrives with its top slice hidden and reads as clipped (founder:
"the animation is still clipped"). scroll-margin-top is the browser's own
answer: it offsets where "the top" is for anchor navigation, so the frame
lands flush under the nav instead of behind it. The height is measured by
the figure's script and by the hero's; the fallback matches the nav's
resting height. */
section[id], .ism-frame[id] { scroll-margin-top: var(--epq-nav-h, 86px); }
/* SMOOTH TRAVEL FOR IN-PAGE ANCHORS. The arrow is an anchor, and the glide
down to the section it names is CAMERA — a rostrum move over a static
sheet, the one class of motion this site lets ease. Gated to
no-preference, so a reduced-motion reader gets the instant jump.
On a PAGED page the pager overrides this back to auto — see below. */
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
/* ---- THE CARD PAGER ------------------------------------------------------
Founder, 2026-08-03: "the scroll-up/down action causes the sections to flick
into the frame like cards - no normal scrolling", mobile and desktop.
A CARD IS A FRAME THE PAGE ALREADY HAD. The home page was already composed
as screen-claiming frames with hop arrows between them — hero, then §1.0's
graded statement, then FIG 1.1 — so the pager did not invent a unit, it
made the unit binding. §1.0's statement and its figure stay two cards
because they were already two screens; a card per