/* ═══════════════════════════════════════════════════════════════════════════
case-study.css — long-form case study pages
Loaded AFTER style.css, by standalone case study pages only (jupiter.html).
Everything here is layout. Type, colour, radius and the two font families
all come from style.css tokens — nothing new is invented.
── Why a second file ──────────────────────────────────────────────────────
style.css is already 3.3k lines and owns the landing page plus the two
.case-* overlays. A 17-section long-form page needs a dozen layout patterns
that nothing else on the site uses. Bolting them onto the monolith buys
nothing: no other page loads them. This mirrors the per-component JS split
already in the project (sticker-field.js, testimonials.js, orbit-reel.js).
── .case-* vs .cs-* ───────────────────────────────────────────────────────
.case-* = the overlay case studies inside index.html (Wave, Mosaico).
Short-form: hero, text, metrics, gallery, team.
.cs-* = this file. Long-form editorial page, its own URL.
They share tokens, fonts and the .case-metric-* stat treatment, which this
file reuses directly rather than re-cutting. They do not share layout.
── Mobile-first, deliberately ─────────────────────────────────────────────
style.css is desktop-first (base rules + max-width: 640px overrides). This
file goes the other way: base rules are the narrow layout, and min-width
queries scale up. That is what the brief for this page asked for, and since
nothing else loads this file the two conventions cannot collide.
═══════════════════════════════════════════════════════════════════════════ */
/* ─── Page shell ──────────────────────────────────────────────────────────
Cream ground, same as .case-overlay. The landing page's snap scroll,
Lenis and GSAP are all absent here on purpose — this is a document you
read, so it uses the browser's own scrolling. */
.cs-page {
background: var(--color-cream);
color: var(--color-dark);
/* Crossfade, not a jump — the landing page's own figure for the same
move. Only the ground travels; foreground tokens stay put, because they
are flipped per-section by .cs-ground--green rather than page-wide, and
a page-wide flip would take the cream sections either side of it with
it. */
transition: background-color 0.6s ease;
/* Side margin: 6.4vw matches the .case-overlay mobile inset, 8.33vw the
desktop one (= --page-margin = --case-margin). Defined on the page rather
than on .cs because the top bar needs it too. */
--cs-margin: 6.4vw;
/* The one width every section's content shares. Matches --meta-pad's own
card exactly (950px), not a separately-chosen number — the two used to
be independent, which is what let the info card sit narrower than
everything around it. Now the card is simply full-width inside a column
that is already this size; nothing about the card itself needed to
change. Ground bands (.cs-band) still bleed to the viewport edge for
their background — that is an existing, separate device for marking a
real change in what the page is doing, not a column — but their own
text content is wrapped in .cs-band-copy, which reads this same token,
so a reader's eye meets the same left edge whether the ground under it
is cream or dark. */
--cs-content-max: 950px;
/* Vertical rhythm. Sections are far apart, blocks inside them are close.
All multiples of 4. +40px at every breakpoint on instruction (80/120/160
-> 120/160/200), so the ratio between the three steps is unchanged. */
--cs-sec-gap: 120px; /* between numbered sections */
--cs-blk-gap: 32px; /* between blocks inside one section */
--cs-bar-h: 56px;
/* The article's own top padding, tokenized rather than inlined because
.cs-hook cancels it — see the quarter-viewport note there. */
--cs-pad-top: 96px;
/* Hairline + secondary text.
#a3a3a3 is the site's de-facto secondary grey — .work-label, .work-date,
.case-team-label and .work-subtitle all hardcode it — but every one of
those that reads well lives in #work, on the dark ground, where it
measures 6.6:1. On this page's cream it is 2.29:1, less than half the
4.5:1 floor the project sets for body text, and the labels here are real
content: the spec sheet keys, the benchmark lenses, the persona meta.
So: dark at 66% over cream instead. Measured 5.1:1. Noticeably darker
than #a3a3a3, which is the point.
Worth knowing: .case-team-label in style.css has exactly this problem —
#a3a3a3 on the cream .case-overlay — and is not fixed here. */
/* Foreground for everything that sits on the current ground. Cream is the
page default; a .cs-band--dark redefines this and the three below. */
--cs-fg: var(--color-dark);
/* Cream-on-dark, defined once. Two separate things need these: a dark band,
and the fixed bar when it is sitting over one. The bar is outside the band
in the DOM, so it cannot inherit the band's own --cs-label / --cs-rule and
was carrying its own copies of the numbers. Hoisted here so the bar and
the band cannot drift to different greys.
Measured on --color-dark: label 8.4:1, well clear of the 4.5:1 floor. */
--cs-on-dark-label: rgba(245, 244, 240, 0.72);
--cs-on-dark-rule: rgba(245, 244, 240, 0.20);
--cs-rule: rgba(30, 30, 32, 0.16); /* = --color-border in CLAUDE.md */
--cs-label: rgba(30, 30, 32, 0.66);
/* A step up from --cs-label for labels that need to out-rank the body they
sit against — eyebrows and the prologue's annotation keys. Darker, and
paired with weight 700, so the label reads as a heading of its line rather
than as quiet metadata. Still short of --cs-fg, which is reserved for real
headings and running copy. */
--cs-label-strong: rgba(30, 30, 32, 0.86);
--cs-tint: rgba(30, 30, 32, 0.03); /* placeholder + aside ground */
--cs-dash: rgba(30, 30, 32, 0.28); /* every placeholder outline */
/* The gap from an eyebrow to the heading it introduces. Deliberately tighter
than --cs-blk-gap (32-40px): an eyebrow and its heading are one unit, and
at the block gap they read as two separate things. One value, applied
wherever an eyebrow sits above a heading. */
--cs-eyebrow-gap: 20px;
/* Raised card surface. The §2 info card is the first use; any later section
that needs a panel lifted off the cream ground pulls these three (via the
.cs-card class, or by referencing the tokens) so the treatment cannot
drift from one card to the next. Shadow recipe is the site's own
resting-card shadow, mixed against --color-dark rather than a bespoke
rgba so it re-tints if the ink colour ever changes. */
--cs-card-bg: var(--color-white);
--cs-card-radius: var(--radius);
--cs-card-shadow: 0 8px 24px -8px color-mix(in srgb, var(--color-dark) 14%, transparent);
/* ── Paired phone screens ────────────────────────────────────────────────
§3's then/now and §10-20's before/after are the same object: two screens
of deliberately different size, stood on one baseline over a dot field,
the later one haloed. These four were §3's private --pro-* values until
the screen sections adopted the same treatment; they are hoisted here so
the two compositions cannot drift, which is the whole point of the
instruction that they match.
--cs-screen-step how much larger the second screen is than the first.
The size jump IS the argument in both sections.
--cs-screen-glow a warm halo marking where the story lands: a coral
layer under the neutral card shadow, wide and soft with
no offset, so it reads as a glow and not a second
shadow.
--cs-screen-hover how far a hovered screen grows. Felt more than seen.
--cs-screen-dots fainter than the landing page's fields (0.32) — this
one sits behind artwork, not behind running text. */
--cs-screen-step: 1.2;
--cs-screen-glow: 0 2px 44px 4px color-mix(in srgb, var(--hook-highlight) 20%, transparent);
--cs-screen-hover: 1.08;
--cs-screen-dots: 0.18;
/* Screens carry a heavier shadow than the rest of the card system, and the
reason is the artwork rather than the hierarchy: the Jupiter product
screens are drawn on the app's own cream ground, measured at
rgb(245,243,239) against this page's rgb(245,244,240). A delta of one
level in two channels — the edge is invisible, and the shadow is the only
thing separating a screen from the page it sits on. --cs-card-shadow, at
14% with a -8px spread, is not enough on its own for that.
Three layers, no ring: an ambient with no offset so the TOP edge reads
too (a purely downward shadow leaves it merged), a tight contact, and the
same soft depth the cards have. The screens must not gain a border —
that is a standing instruction — so every edge here is drawn with light,
not with a stroke. Still mixed against --color-dark, so this is the card
recipe turned up rather than a bespoke colour. */
--cs-screen-shadow:
0 0 4px 0 color-mix(in srgb, var(--color-dark) 9%, transparent),
0 3px 8px -2px color-mix(in srgb, var(--color-dark) 15%, transparent),
0 14px 32px -10px color-mix(in srgb, var(--color-dark) 20%, transparent);
/* The page's phone-frame width — what a full-size screen renders at. One
token so the 1200px step-up below reaches the real screens, the
placeholders still waiting on assets, and the stepped-down before screen
together; they were three separate max-widths and drifted apart once. */
--cs-screen-w: 280px;
/* ── Cursor bubble (.cs-bubble) ──────────────────────────────────────────
A FigJam/Figma multiplayer chat bubble: a pointer at one top corner and a
filled label hanging off it. Tokens live here, not on the component, so a
later section can retint one bubble without forking the recipe.
The ground is spacefire exactly — #FC7A69, the brand value, not a darker
stand-in.
The ink is white, on instruction, and that is a knowing trade rather than
an oversight: white on #FC7A69 measures 2.58:1, which fails WCAG AA and
fails the 3:1 large-text floor too, so no size or weight setting rescues
it. Dark ink measures 6.44:1 and was shown side by side against it; white
was chosen anyway, because the alternative that keeps white legible is a
darkened ground that stops reading as spacefire. The bubble carries a
short conclusion that is also stated in the running copy around it, so no
information is only available here. Do not "fix" this by darkening the
ground — that has been tried and rejected. Re-measure before changing
either value. */
--cs-bubble-bg: var(--hook-highlight);
--cs-bubble-fg: var(--color-white);
/* Three corners match the cards the bubble sits under, so a callout and a
card read as the same family of surface. The fourth — the one the pointer
attaches to — is nearly square, which is what makes the bubble read as
belonging to that cursor. That 1px is the only literal radius here and is
specified by name; see CLAUDE.md's radius exceptions. */
--cs-bubble-radius: var(--cs-card-radius);
--cs-bubble-radius-tip: 1px;
--cs-bubble-pad: 16px;
--cs-bubble-cursor: 24px; /* pointer's bounding box, square */
/* Clear air between the pointer's tail and the bubble's corner. The two are
one gesture but two objects, and letting them touch reads as a tooltip
tail rather than as a cursor with a label. */
--cs-bubble-cursor-gap: 8px;
/* Shape-accurate, so it wraps the pointer too — see the filter note on the
component. Two stops: a tight contact shadow plus a wider, softer cast,
which is what reads as "hovering" rather than "outlined". */
--cs-bubble-shadow:
drop-shadow(0 1px 1px color-mix(in srgb, var(--color-dark) 16%, transparent))
drop-shadow(0 8px 16px color-mix(in srgb, var(--color-dark) 20%, transparent));
}
/* body in style.css has overflow-x hidden on ; nothing to add. */
.cs {
display: flex;
flex-direction: column;
gap: var(--cs-sec-gap);
padding: var(--cs-pad-top) var(--cs-margin) var(--cs-sec-gap);
}
/* The +40px on each side from 641px up pulls the content column in so it stops
stretching to full width on a large screen: 1200px -> 1120px of content at
1440. Deliberately NOT applied below 641px — 6.4vw is only 24px on a 375px
phone, and +40 there would leave 247px of usable width, which is a different
problem from the one this solves. */
@media (min-width: 641px) {
.cs-page {
--cs-margin: calc(6.4vw + 40px);
--cs-sec-gap: 160px;
--cs-blk-gap: 40px;
--cs-bar-h: 64px;
--cs-pad-top: 120px;
}
}
@media (min-width: 1025px) {
.cs-page {
--cs-margin: calc(8.33vw + 40px);
--cs-sec-gap: 200px;
--cs-pad-top: 152px;
}
}
/* ─── Ground bands ────────────────────────────────────────────────────────
The page was one continuous cream ground for seventeen sections, which is
why it read flat however well each section was set: nothing told the eye
where it had arrived. A band is a section that takes over the full width
and changes the ground under it.
Used sparingly and structurally, not decoratively — the impact numbers
(twice, and they are the same numbers, so the ground is what makes the
second reading land differently) and the untangle. Three moments across a
long document, each marking a real change in what the page is doing.
── How the full-bleed works ───────────────────────────────────────────────
.cs pays --cs-margin as padding. A band cancels exactly that with a
negative inline margin and re-pays it as its own padding, so the ground
reaches the viewport edge while the content column never moves. Because
both come from the same token they cannot drift apart at any breakpoint.
Everything inside a band reads its colour from --cs-fg / --cs-label /
--cs-rule, which the band redefines. Shared type (.cs-h2, .cs-lede) points
at --cs-fg rather than --color-dark for exactly this reason: one selector
set works on either ground. */
.cs-band {
margin-inline: calc(-1 * var(--cs-margin));
padding: var(--cs-sec-gap) var(--cs-margin);
background: var(--cs-band-bg, transparent);
}
.cs-band--dark {
--cs-band-bg: var(--color-dark);
--cs-fg: var(--color-cream);
/* Cream at 72% over --color-dark measures 8.4:1 — well clear of the 4.5:1
floor, and the same relationship to its ground that --cs-label has to
cream (5.1:1) rather than a guess at "looks about right". */
--cs-label: var(--cs-on-dark-label);
--cs-label-strong: rgba(245, 244, 240, 0.92);
--cs-rule: var(--cs-on-dark-rule);
--cs-tint: rgba(245, 244, 240, 0.06);
--cs-dash: rgba(245, 244, 240, 0.32);
color: var(--cs-fg);
}
/* ── A full-viewport ground, the landing page's about fold on this page ─────
Three things make that fold what it is: it owns the whole screen, the page
crossfades to its colour as it takes over, and the dot field sits on it.
All three are reproduced here; the type inside is untouched.
The section paints its own ground AND .cs-page crossfades to the same
colour underneath it (case-study.js sets data-cs-ground). Both, not either:
the crossfade is what makes the change read as the page turning over rather
than a coloured block scrolling past, but it is script-driven, and a
script-driven background with script-independent cream type on it would be
cream-on-cream the moment the script did not run. The section's own
background is what makes the type safe without it. */
.cs-ground {
/* min-height, not height: .cs-band's --cs-sec-gap padding is inside this
box, and at the narrow end the copy plus that padding is taller than the
viewport. A fixed height would clip it. */
min-height: 100svh;
justify-content: center;
position: relative;
isolation: isolate;
overflow: hidden;
}
/* Cream on green, matching the landing page's own treatment of this ground.
Same token-flip shape as .cs-band--dark above, so every shared type rule
(.cs-h2, .cs-lede, .cs-eyebrow) lands correctly with no per-element
overrides. */
.cs-ground--green {
/* Was var(--color-green) (#49a862); now the same near-black the impact
band and the spectrum tiles use, on instruction -- see --color-charcoal's
own note in style.css. This incidentally clears a contrast gap the two
comments below were written around: cream on #49a862 measured 2.70:1,
under the 3:1 large-text floor; cream on #2b2d33 measures 12.5:1, clear
of even the 7:1 AAA floor. Left both comments in place rather than
rewritten, because they still explain why --cs-fg and --cs-label are
full-opacity cream rather than the page's usual 72% label -- that
reasoning does not depend on which ground it was measured against, and
full-opacity cream at 72% flattened over this ground still measures
7.24:1, so the choice costs nothing here either. */
--cs-band-bg: var(--color-charcoal);
/* Cream, on instruction -- reverses the dark-ink swap from two rounds ago.
That round measured cream at 2.70:1 here, below the 3:1 large-text floor,
and switched to dark ink (5.60:1) to clear it. Told to keep it light
regardless: still 2.70:1, still under AA, same number as before. Left as
a known, named gap rather than silently "fixed" again -- see the
PORTFOLIO_DIRECTION.md row for the reasoning either way, since this has
now gone back and forth once. */
--cs-fg: var(--color-cream);
/* Full opacity, on instruction -- was --cs-on-dark-label (cream at 72%,
the figure every other dark ground on this page uses for its secondary
text). That 72% was already short of AA here at 2.09:1; full cream only
brings it up to --cs-fg's own 2.70:1, the same shortfall the heading
already carries and the same trade-off already named above. Body copy
and the heading now read as one weight of "still under AA", not two. */
--cs-label: var(--color-cream);
--cs-label-strong: rgba(245, 244, 240, 0.92);
--cs-rule: var(--cs-on-dark-rule);
--cs-tint: rgba(245, 244, 240, 0.06);
--cs-dash: rgba(245, 244, 240, 0.32);
color: var(--cs-fg);
}
/* The field itself. Pattern comes from the one shared rule in style.css, so
this cannot drift from the landing page's own dots in tile size or weight;
only the box is this section's. Inset by --cs-margin rather than run to the
bleed, which is what .dots-layer does with --page-margin on the landing
page -- the field is a margin-to-margin panel there, not a full-bleed
texture, and it does not line up with the copy's own column on either page.
z-index: -1 puts it under the copy but still over the section's own
background: a stacking context paints its background first and its
negative-z children second, so the order is green, then dots, then text. */
.cs-ground-dots {
position: absolute;
top: 0;
bottom: 0;
left: var(--cs-margin);
right: var(--cs-margin);
z-index: -1;
/* Matches .cs-impact-dots -- both are the same shared field over a dark
ground now, and this one never got the flip that section's did. Without
it, the pattern's own light-ground default (--color-dark dots at 0.32)
was painting dark dots on a near-black ground: technically present,
practically invisible. Cream at 0.10, not the shared 0.32: that figure
is tuned for dark dots on a light ground, and cream at the same value on
a dark one reads as static rather than texture. */
--dot-ink: var(--color-cream);
--dot-opacity: 0.10;
}
/* A band that runs to the top of the next one with no cream seam between. */
.cs-band + .cs-band { margin-top: calc(-1 * var(--cs-sec-gap)); }
/* One section. Blocks inside stack at the tighter rhythm. */
.cs-sec {
display: flex;
flex-direction: column;
gap: var(--cs-blk-gap);
}
/* One column, one width, used everywhere. :not(.cs-band) is the only carve-out
— a band's own element has to stay full-bleed for its background, so ITS
content is capped by .cs-band-copy one level in instead. Every plain
section gets this for free with no markup change: the flex stretch above
already gives each .cs-sec the full padded width, so a max-width narrower
than that plus an auto inline margin is enough to centre it exactly like a
block element would. */
.cs-sec:not(.cs-band) {
/* width:100% is doing the real work; margin-inline:auto is only there to
centre what max-width then trims off. Tried align-items:stretch on .cs
first, on the theory that its initial value ("normal") wasn't resolving
to stretch — it was already resolving correctly, and stretch was never
the problem. The actual cause: per the flexbox spec, an "auto" cross-axis
margin on a flex item cancels stretch outright and falls back to the
item's own shrink-to-fit width, THEN centres that with the margin. So
any section whose content was naturally narrower than 950px — a lone
heading and one diagram frame, a short paragraph — sat at its own
content width instead of the shared one; sections with enough content to
fill 950px anyway (most of them) looked correct by accident. width:100%
is an explicit, non-auto value, which keeps stretch out of the decision
entirely: the box is always min(available width, 950px), full stop. */
width: 100%;
max-width: var(--cs-content-max);
margin-inline: auto;
}
/* Reusable raised panel on the cream ground. Carries only the surface — colour,
corner, shadow — from the --cs-card-* tokens; a component that uses it owns
its own padding and internal layout (see .cs-meta). Add it to any future
section that needs the same lifted card as §2's info card. */
.cs-card {
background: var(--cs-card-bg);
border-radius: var(--cs-card-radius);
box-shadow: var(--cs-card-shadow);
}
/* ─── .cs-bubble — the cursor callout ──────────────────────────────────────
A multiplayer cursor bubble, borrowed from Figma/FigJam: a pointer sitting
at one top corner with a filled label hanging off it, so a remark reads as
someone pointing at the thing above it rather than as more page copy.
Markup is the class and a direction, nothing else — the pointer is drawn by
the component:
--left puts the pointer at the top-left corner aiming up and out to the
left; --right mirrors it. Pick whichever aims at the thing being remarked
on; the bubble then grows away from that corner, so the copy always lands
on the side with room for it.
Three things here are load-bearing:
1. It hugs. width: fit-content, so a three-word bubble is three words wide.
--cs-bubble-measure is only a ceiling for when the text is long enough
to need a reading measure; short content never reaches it.
2. The shadow is a `filter`, not a `box-shadow`. box-shadow follows the
border box, which would draw a rounded rectangle's shadow and leave the
pointer flat and pasted-on. drop-shadow works off rendered alpha, and a
filter on an element applies to its pseudo-elements too, so one
declaration wraps bubble and pointer as a single silhouette. The white
text casts nothing, because it sits on an opaque fill and so does not
change that silhouette.
3. The corner nearest the pointer is --cs-bubble-radius-tip (1px) and the
other three are --cs-bubble-radius (4px). Both are literal values rather
than --radius, at Shriya's explicit direction, and the asymmetry is the
point: a near-square corner reads as attached to the cursor, while a
matched 4px would read as a rectangle that happens to have an arrow near
it. See CLAUDE.md's radius-exception list.
The pointer is two stacked masked boxes: ::before is the dart in white,
::after the same dart inset by 1px in spacefire, which leaves a 1px white
border running the whole way around the fill, as Figma's own cursors have.
The inset comes from the masks themselves rather than from scaling the
box — each mask fills AND strokes the same path with a round linejoin (the
stroke is also what rounds the dart's three corners, which a bare polygon
cannot do), and a stroke grows a silhouette by half its width. 2.6 against
0.93 is a 0.835-unit ring, which at the 1.2x this 20-unit viewBox is scaled
to inside a 24px box lands on 1px. Change --cs-bubble-cursor and the ring
scales with it, which is the right behaviour: a keyline that stayed 1px on
a 48px cursor would read as hairline dirt. */
.cs-bubble {
--cs-bubble-measure: 34em;
/* The dart, pointing up and left, at two sizes: the outer silhouette and
the same path 1px in. `black` rather than a hex so the data URI needs no
escaped #. */
--cs-bubble-mask: url('data:image/svg+xml;utf8,');
--cs-bubble-mask-inner: url('data:image/svg+xml;utf8,');
position: relative;
width: fit-content;
max-width: var(--cs-bubble-measure);
/* Reserves exactly the part of the pointer that overhangs the top edge, so
the bubble can be dropped under anything without the dart colliding. */
margin-top: calc(var(--cs-bubble-cursor) / 2 + var(--cs-bubble-cursor-gap));
padding: var(--cs-bubble-pad);
border-radius: var(--cs-bubble-radius);
background: var(--cs-bubble-bg);
color: var(--cs-bubble-fg);
filter: var(--cs-bubble-shadow);
}
.cs-bubble::before,
.cs-bubble::after {
content: '';
position: absolute;
width: var(--cs-bubble-cursor);
height: var(--cs-bubble-cursor);
/* The dart's notch sits at the centre of its own box, so pulling the box
back by half the cursor would land that notch exactly on the bubble's
corner. --cs-bubble-cursor-gap then pulls it further out again, which is
what opens the air between the tail and the corner. */
top: calc(var(--cs-bubble-cursor) / -2 - var(--cs-bubble-cursor-gap));
}
.cs-bubble::before {
background: var(--color-white);
-webkit-mask: var(--cs-bubble-mask) center / contain no-repeat;
mask: var(--cs-bubble-mask) center / contain no-repeat;
}
.cs-bubble::after {
background: var(--cs-bubble-bg);
-webkit-mask: var(--cs-bubble-mask-inner) center / contain no-repeat;
mask: var(--cs-bubble-mask-inner) center / contain no-repeat;
}
/* --- Direction ---------------------------------------------------------- */
/* The pointer's position is the only place this geometry is written down; the
`bubble` motion primitive measures the dart's computed box to find its
growth anchor rather than keeping a second copy of these numbers. */
.cs-bubble--left { border-top-left-radius: var(--cs-bubble-radius-tip); }
.cs-bubble--right {
border-top-right-radius: var(--cs-bubble-radius-tip);
margin-left: auto;
}
.cs-bubble--left::before,
.cs-bubble--left::after { left: calc(var(--cs-bubble-cursor) / -2 - var(--cs-bubble-cursor-gap)); }
.cs-bubble--right::before,
.cs-bubble--right::after {
right: calc(var(--cs-bubble-cursor) / -2 - var(--cs-bubble-cursor-gap));
transform: scaleX(-1);
}
/* --- Contents ----------------------------------------------------------- */
/* The eyebrow keeps its size, weight and tracking and only changes ink — the
grey it carries on cream is under 2:1 on this ground. Solid, not a
translucent one: at --text-label this is small text and needs the full
4.5:1, which any alpha below 1 gives up. Hierarchy inside the bubble comes
from size and case instead, which is what it came from outside too. */
.cs-bubble .cs-eyebrow {
color: var(--cs-bubble-fg);
/* 400, not the eyebrow's usual 700: a bubble sets no bold anywhere, and this
was the last of it. Geist loads 400 and 700 only — there is no 500 to
split the difference with (see CLAUDE.md) — so it goes all the way down.
The label still reads as a label on case and tracking alone, which is
most of what was carrying it. */
font-weight: 400;
margin-bottom: 8px;
}
.cs-bubble-line {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-lead);
line-height: 1.4;
letter-spacing: -0.01em;
color: var(--cs-bubble-fg);
margin: 0;
}
/* .cs-bubble-hi was here — the closing clause at weight 700, carrying the
emphasis the spacefire accent used to. Removed on instruction: a bubble
sets no bold. The clause is the end of the sentence and lands on its own. */
/* The text half of a ground band — heading and lede — sized and
centred the same way as everything else on the page. The band's own
diagram or number layout is NOT inside this: it stays a direct child of
the section so it can keep using the section's real full-bleed width for
whatever visual device it needs (the untangle diagram's own pinned canvas,
for one). */
.cs-band-copy {
/* width:100% first, same reasoning as .cs-sec:not(.cs-band) above — an auto
margin alone would let this shrink to its own content's width instead of
the shared one. */
width: 100%;
max-width: var(--cs-content-max);
margin-inline: auto;
display: flex;
flex-direction: column;
gap: var(--cs-blk-gap);
}
/* ─── Shared type ─────────────────────────────────────────────────────────
Three roles, used by every section. Nothing else sets font-family. */
/* Section heading.
The page used to carry only tiny grey eyebrows, which meant it had no
typographic hierarchy at all between the hook and the body — every section
opened at the same whisper, and nothing announced itself while scrolling.
Sized between the body and the hook so it reads as a chapter without
competing with the thesis: 24px on a phone, 48px at 1440. None of the
:root type tokens sits in that gap — --text-body tops out at 36 and
--text-case starts at 64, which is the hook's own size — so this is a
local token rather than a hijacked one.
The 1.5rem floor is set against the hook's, not chosen for its own sake.
--text-case bottoms out at 2rem, and a 1.75rem floor here put the two
within 4px of each other on a phone — both clamped, hierarchy gone. At
1.5rem the heading stays three-quarters of the hook at every width. */
/* Promoted to style.css as --text-case-h2 on 2026-09-29, so the About-me
overlay's reel headline can be sized to the same scale without index.html
having to load this stylesheet. The clamp itself is unchanged — the value
now has one home, and .cs-h2 keeps its local alias so every rule below
still reads in this file's own terms. */
.cs-page { --cs-h2: var(--text-case-h2); }
.cs-h2 {
font-family: var(--font-display);
/* 500, matching the project header (.cs-hook-line, --hook-title-weight: 500)
— every section heading from the prologue on carries the same weight as
the title of the piece. Also what CLAUDE.md's type scale already assigns
to "the case-study page's sub-headings"; this was 700 before, a drift from
that. .cs-screen-framing (§10-20) matches. */
font-weight: 500;
font-size: var(--cs-h2);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--cs-fg);
max-width: 18em;
margin: 0;
}
/* Eyebrow — the small uppercase label that introduces a section heading.
Weight 700 for emphasis over the body, but the label grey rather than the
strong ink: on instruction, every eyebrow on the page is now grey. The
heading right below carries the section; the eyebrow just names it. */
.cs-eyebrow {
font-family: var(--font-ui);
font-size: var(--text-label);
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cs-label);
margin: 0;
}
/* An eyebrow and the heading it introduces are one unit, so the space between
them is --cs-eyebrow-gap (20px), tighter than the --cs-blk-gap the section's
flex layout puts between every other pair of blocks. Expressed as a negative
top margin that cancels the block gap down to the eyebrow gap, so it stays
20px at both the 32px and 40px block-gap breakpoints. Applies anywhere an
eyebrow precedes a heading. */
.cs-eyebrow + .cs-h2,
.cs-eyebrow + .cs-display,
.cs-eyebrow + .cs-results {
margin-top: calc(var(--cs-eyebrow-gap) - var(--cs-blk-gap));
}
/* Where a subhead follows that heading, it now closes to the same
--cs-eyebrow-gap rather than the section's normal --cs-blk-gap — on
instruction, so an eyebrow/heading/subhead group reads as one tight unit
with even spacing throughout, not 20px then 32-40px. Scoped to headings
that sit directly after an eyebrow: a heading with no eyebrow above it
keeps the section's ordinary block rhythm before its own subhead. */
.cs-eyebrow + .cs-h2 + .cs-lede,
.cs-eyebrow + .cs-display + .cs-lede {
margin-top: calc(var(--cs-eyebrow-gap) - var(--cs-blk-gap));
}
/* The page's largest type. Same recipe as .case-title. */
.cs-display {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-case);
line-height: 1.125;
letter-spacing: -0.02em;
color: var(--color-dark);
margin: 0;
}
/* Section-opening statement — between display and body. */
.cs-lede {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--text-body);
line-height: 1.333;
letter-spacing: -0.01em;
color: var(--cs-fg);
/* 32em, not 24. The source's subheads are real paragraphs of 40-60 words,
and at 24em they wrapped to six or seven short lines that read as a
column of fragments. 32em holds roughly 60-65 characters, which is inside
the comfortable measure and stops the ragging. */
max-width: 32em;
margin: 0;
}
/* Running body copy. Same recipe as .case-body p.
max-width is in em so the measure tracks the fluid type — at any viewport
it stays ~40 characters per line rather than sprawling at 1920px. */
.cs-prose {
display: flex;
flex-direction: column;
gap: 16px;
font-family: var(--font-ui);
font-size: var(--text-ui);
line-height: 1.5;
color: var(--color-dark);
max-width: 40em;
font-feature-settings: 'liga' 0;
}
.cs-prose p { margin: 0; }
.cs-prose strong { font-weight: 700; }
/* ─── Top bar ─────────────────────────────────────────────────────────────
Carries the one persistent control: back to the portfolio.
It was a floating corner button first. That does not work on this page: the
content column starts at --cs-margin (40px at 630px wide, 24px on a phone),
so any floating control sits on top of the running text — measured, it
covered the first two characters of a section lede and cut through a
paragraph in the deep dive. There is no gutter to hide in at any width the
page actually gets read at.
A full-width opaque bar has the same footprint but reads as chrome rather
than as something broken, and it is the pattern the landing page's own nav
already uses. Content scrolling under it is then expected. */
/* The bar themes with whatever ground is under it, the way the landing page's
nav does with body[data-bg]. Without this it stays a cream slab sitting on
top of a dark band, which reads as a rendering fault rather than as chrome.
The state is set by case-study.js from scroll position, so it works with or
without GSAP. */
/* Set by case-study.js when a .cs-ground section holds the middle of the
viewport. The section is 100svh, so at the moment this flips it already
fills the screen — which is what keeps the crossfade off the cream
sections above and below it.
"green" here is a STATE NAME, not a colour any more -- case-study.js reads
it off the section's own data-ground="green" attribute, and renaming that
plumbing was out of scope for a colour swap. What the state paints is
--color-charcoal now, same as .cs-ground--green itself; the crossfade has
to match the section it is leading into or the "page turning over" effect
reads as a colour mismatch instead. */
/* "dark" is §17's state, and unlike "green" it IS the colour's name. Same
device, same 0.6s on .cs-page above: the page turns over to the section's
ground while that section holds the middle of the viewport, instead of a
coloured block sliding past a cream page with a hard edge at each end.
── The foreground travels too, and it has to ──────────────────────────────
.cs-page's own comment above says only the ground moves, "because a
page-wide flip would take the cream sections either side of it with it".
Taking them with it is the POINT, and not doing so was a bug.
The claim this rested on -- that a 100svh ground "already fills the screen
at the moment this flips, which is what keeps the crossfade off the cream
sections above and below it" -- is not true of a -50%/-50% root margin.
That margin is a zero-height line across the middle of the viewport, so the
state turns on when the section's TOP crosses it: the section covers the
bottom half and a cream neighbour still holds the top half. Measured on
§5, the one the comment was written about: 309px of §4's tail is on screen
when it flips, and 308px of §6's head when it leaves. It went unnoticed
only because those two strips happen to be near-empty. §16's tail is not --
it is the "After" caption, and it went dark-grey-on-charcoal.
So this does what the landing page does: body[data-bg="green"] sets
background-color AND color, and the whole fold turns over together. Same
token set .cs-band--dark flips, so a cream section caught mid-fade reads
as cream type on a darkening ground rather than as dark type disappearing
into it. .cs-band--dark and .cs-ground--green set these on themselves and
are more specific inside their own subtrees, so the dark sections are not
affected by this at all -- it only reaches the transparent ones. */
.cs-page[data-cs-ground="green"],
.cs-page[data-cs-ground="dark"] {
background: var(--color-charcoal);
--cs-fg: var(--color-cream);
--cs-label: var(--cs-on-dark-label);
--cs-label-strong: rgba(245, 244, 240, 0.92);
--cs-rule: var(--cs-on-dark-rule);
--cs-tint: rgba(245, 244, 240, 0.06);
--cs-dash: rgba(245, 244, 240, 0.32);
}
/* Custom properties do not transition, so without this the type would SNAP
to cream while the ground took 0.6s to arrive -- the one thing more
noticeable than the dark text was. Listed by role rather than applied with
a wildcard: these are the type classes that can appear in the strip a
crossfade exposes, and a blanket transition would also catch every
component that animates colour on hover and slow it to 0.6s. */
.cs-page .cs-eyebrow,
.cs-page .cs-h2,
.cs-page .cs-lede,
.cs-page .cs-sub,
.cs-page .cs-sub strong,
.cs-page .cs-pro-key,
.cs-page .cs-pro-text,
.cs-page .cs-screen-title,
.cs-page .cs-screen-framing {
transition: color 0.6s ease;
}
/* ── The bar's ground ──────────────────────────────────────────────────────
One declaration for all three states. --cs-bar-ground is written onto the
body by case-study.js, read off the band the bar is actually over, so the
bar cannot sit a shade off the thing behind it; the fallback is only for
the frame before the first paint and for the no-JS path.
It also follows the page's own crossfade. While data-cs-ground is set the
page is charcoal everywhere, including the strip under the bar, so the bar
has to travel with it — otherwise it stays cream over a charcoal page for
the length of the fade. Both selectors resolve to the same colour, and the
transition below is 0.6s to match .cs-page's exactly rather than finishing
ahead of it. */
.cs-page[data-cs-bar="dark"] .cs-bar,
.cs-page[data-cs-bar="green"] .cs-bar,
.cs-page[data-cs-ground="green"] .cs-bar,
.cs-page[data-cs-ground="dark"] .cs-bar {
background: var(--cs-bar-ground, var(--color-charcoal));
border-bottom-color: var(--cs-on-dark-rule);
}
.cs-page[data-cs-bar="dark"] .cs-back,
.cs-page[data-cs-bar="green"] .cs-back,
.cs-page[data-cs-ground="green"] .cs-back,
.cs-page[data-cs-ground="dark"] .cs-back { color: var(--color-cream); }
.cs-page[data-cs-bar="dark"] .cs-progress,
.cs-page[data-cs-bar="green"] .cs-progress,
.cs-page[data-cs-ground="green"] .cs-progress,
.cs-page[data-cs-ground="dark"] .cs-progress { background: var(--color-cream); }
/* The separate "green" bar block that used to sit here is folded into the one
above. It existed because that state wanted --color-charcoal while the
generic dark state wanted --color-dark; now the colour comes off the
section itself for every state, so there is nothing left for it to say.
Cream on charcoal measures 12.5:1, which is what made that distinction
safe to drop rather than merely tidy. */
/* Colour is the only thing that changes. 0.6s, not 0.4: it is the same figure
.cs-page uses for its own crossfade, and while data-cs-ground is set these
two are painting the same colour over the same moment. At 0.4 the bar
arrived first and read as a slab that had changed independently of the
page under it. */
.cs-bar,
.cs-bar .cs-back,
.cs-progress {
transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease;
}
.cs-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
height: var(--cs-bar-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 0 var(--cs-margin);
background: var(--color-cream);
border-bottom: 1px solid var(--cs-rule);
}
/* Reading progress. Seventeen sections is ~14,000px at desktop, and without
this the reader has no idea whether they are two minutes or ten from the
end — which is exactly the sort of thing that makes someone bail early.
It rides the bar's existing 1px bottom rule rather than adding a band of its
own, so the page gains a position cue and no new furniture. 2px so it reads
at a glance; that is the hairline family (like the 1px rules and the aside's
4px edge), not a spacing value, so it sits outside the multiple-of-4 grid.
scaleX on a transform, not width, so it never triggers layout on scroll. */
.cs-progress {
position: absolute;
left: 0;
bottom: -1px;
height: 2px;
width: 100%;
transform: scaleX(0);
transform-origin: left center;
background: var(--color-dark);
will-change: transform;
}
/* Both bar controls carry a 44px-tall touch box. The bar is a fixed 56/64px,
so the extra height is paid as vertical padding and negative inline margin
rather than by growing the control's visible box: nothing moves, and the
hit area stops being the 16px cap-height it was measured at. */
.cs-back {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding-block: 12px;
margin-block: -12px;
font-family: var(--font-ui);
font-size: var(--text-label);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-dark);
text-decoration: none;
transition: opacity 0.25s ease;
}
.cs-back:hover { opacity: 0.6; }
.cs-back svg { display: block; }
/* ─── Placeholder ─────────────────────────────────────────────────────────
Every image on this page is a labelled box until the real asset lands.
Dashed, tinted, with the label describing exactly what belongs there.
--ph-ar carries the aspect ratio so each placeholder holds the shape its
real asset will have. That way dropping in the real file does not reflow
the page. Set it inline or with one of the modifiers below. */
.cs-ph {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: var(--ph-ar, 16 / 9);
padding: 16px;
border: 1px dashed var(--cs-dash);
background: var(--cs-tint);
text-align: center;
}
/* Every placeholder is rounded except the full-bleed ones, whose left and
right edges sit on the viewport edge where a corner would read as a
rendering fault. Scoped here rather than cancelled with a literal 0 later —
see .cs-ph--bleed. */
.cs-ph:not(.cs-ph--bleed) { border-radius: var(--radius); }
.cs-ph span {
font-family: var(--font-ui);
font-size: var(--text-label);
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cs-label);
}
/* Grid and flex children default to min-width: auto, which refuses to shrink
below their content's minimum width. For anything holding a .cs-ph that
minimum is circular: the placeholder has an aspect-ratio, its label wraps to
more lines as the box narrows, the extra height feeds back through the ratio
as extra width, and the track settles wider than the container it sits in.
Measured at 375px before this rule: a .cs-ba card resolved to 352.3px inside
a 327px grid, pushing the document 1px past the viewport.
min-width: 0 lets these shrink to the track instead of dictating it. */
.cs-ph,
.cs-duo-face, .cs-approach, .cs-spec-step, .cs-sub, .cs-voice, .cs-ba-shot {
min-width: 0;
}
/* A phone screen. Capped, because 9/19.5 is a punishing ratio to give a full
column: measured at a 630px viewport, a one-per-row phone placeholder came
out 654 x 1417 — a phone mock rendered larger than a real phone, and over a
viewport tall. 280px keeps it near life size wherever it lands, and is under
every column width the two-up layouts produce, so those are unaffected. */
.cs-ph--phone { --ph-ar: 9 / 19.5; max-width: 280px; }
/* A real screen capture standing in a .cs-ph--phone's slot. It carries the
SAME 9/19.5 as the placeholder, so a before shot, an after shot and a slot
still waiting on its asset are all one size — every screen on this page
renders identically whatever its source happened to measure.
Every asset is normalised to that ratio when it is added (artboard frame
cropped off, rounded corners squared, then resampled), so `cover` has
nothing to crop today; it is here so a future screen that arrives a few
pixels off ratio loses a hair off one edge instead of breaking the row.
The shadow is the card system's recipe turned up (--cs-screen-shadow, mixed
against the same --color-dark), so these still read as the same family as
the benchmark previews and the info card — but heavier, because several of
the captures are drawn on a cream that measures one level off this page's
own ground and would otherwise have no visible edge at all. */
.cs-shot-img {
display: block;
width: 100%;
max-width: var(--cs-screen-w);
aspect-ratio: 9 / 19.5;
height: auto;
object-fit: cover;
border-radius: var(--radius);
box-shadow: var(--cs-screen-shadow);
}
/* An animated shot carries a so a reduced-motion reader gets a still
frame instead of the loop — a GIF cannot honour that preference on its own,
and the page's own rule is that motion never plays against it. Block, so the
wrapper reports the image's box to .cs-shot's flex gap exactly as a bare
did. */
.cs-shot picture { display: block; }
/* No prior screen existed — solid rule instead of dashed, so it reads as a
deliberate absence rather than an asset still to come. */
.cs-ph--none {
border-style: solid;
background: none;
}
/* ═══ §1 — Hook ══════════════════════════════════════════════════════════ */
/* Centred, unlike every other section on the page — the opening is a title
card, and the rest is a document. The switch is deliberate and does not
propagate: .cs-sec's own children stay left-aligned everywhere else.
The whitespace above the icon is re-paid from the top of : the article
pays --cs-pad-top to clear the fixed bar, .cs-hook cancels that with a
negative margin and pays --hook-space (26svh) instead. The bar then covers
the top --cs-bar-h of it, so the VISIBLE gap above the icon is --hook-clear
(--hook-space minus the bar). That visible number is what the gap below the
subhead is matched to — see .cs-hook's margin-bottom — so the fold no longer
reads lopsided. svh not vh so a mobile browser's collapsing toolbar cannot
change where the icon sits mid-scroll.
── Every value in this fold is a custom property ──
Not decoration: it is what makes the fold dialable. case-study-dial.js
(?dial) overrides these on .cs-page and nothing else, so the panel needs no
knowledge of these selectors, and an untouched control leaves the CSS
default — including its clamp() — completely intact. Defaults live here,
not in the JS, so deleting the dial kit changes nothing on the page.
── Dialled and finalised 2026-09-02 ──
The two font sizes came out of the panel as fixed px (60 and 24), which is
what a slider can express. Shipping them as fixed px would have put a 60px
headline on a 375px phone, so both are re-expressed as clamps whose CEILING
is the dialled value:
60px -> clamp(2rem, 5vw, 3.75rem) 3.75rem = 60px
24px -> clamp(1rem, 2vw, 1.5rem) 1.5rem = 24px
The vw terms are set so each one reaches its ceiling by ~1200px and stays
there. That means every desktop width — 1280, 1440, 1512, 1920 — renders
exactly the dialled number, so it does not matter which viewport the tuning
happened at, and the type still scales down instead of overflowing a phone.
--hook-gap came back as 24px, identical to the default, so it is left alone
rather than restated. --hook-icon, --hook-sub-weight and --hook-sub-lh were
never touched in the panel and keep their defaults. */
.cs-page {
--hook-space: 26svh;
/* The whitespace a reader actually sees above the icon: --hook-space minus
the fixed bar that covers the top of it. Both the padding above the icon
and the margin below the subhead reference this, so the fold is
symmetrical to the eye rather than only on paper. */
--hook-clear: calc(var(--hook-space) - var(--cs-bar-h));
--hook-gap: 24px;
/* Was clamp(88px, 9vw, 128px). Reduced ~22% across the whole clamp — 128 to
100 at the desktop ceiling, 88 to 68 at the mobile floor — so the icon
reads as a subtle interactive detail rather than the loudest thing in the
fold, per direct instruction. The interactive AppIcon3D fills whatever
size this token gives it, so nothing else needed to change for the
reduction to take effect. */
--hook-icon: clamp(68px, 7vw, 100px);
--hook-icon-radius: 20%;
--hook-title-size: clamp(2rem, 5vw, 3.75rem); /* -> 60px from ~1200px up */
--hook-title-weight: 500;
--hook-title-lh: 1.12;
--hook-title-measure: 13.5em;
--hook-sub-size: clamp(1rem, 2vw, 1.5rem); /* -> 24px from ~1200px up */
--hook-sub-weight: 400;
--hook-sub-lh: 1.45;
--hook-sub-measure: 25em;
/* An opaque grey, not the translucent dark --cs-label the fold's other greys
use. --cs-label is rgba(30,30,32,0.66), which on this cream renders as
~#6A6A6C — this is that same rendered value, set solid. The subhead carries
the 🇮🇳 flag emoji: a colour with an alpha channel drops a translucency
veil over everything painted in the element, and the emoji (a full-colour
glyph, not a monochrome one tinted by `color`) visibly dulls under it. A
solid grey keeps the type at the same weight on the page and lets the flag
render at full strength. Contrast on cream: 5.2:1, well over the body floor. */
--hook-sub-color: #6A6A6C;
/* Spacefire. This hex is the brand value, given by name — if a brief says
"spacefire", it means #FC7A69 and nothing nearby. See the measurement
note on .cs-hook-highlight for what that costs in contrast. */
--hook-highlight: #FC7A69;
/* The site's only red, and it carries meaning rather than decoration: a
thing that went wrong. Spacefire is the brand's warm accent and reads as
positive, so it cannot also be the failure colour — §6 uses both at once
and needs them to say opposite things.
#C9302A measures 5.10:1 on cream, and 2.06 against spacefire itself, which
is what keeps the two legible as different signals rather than as two
shades of the same one. Do not reach for this for emphasis. */
--cs-negative: #C9302A;
}
.cs-hook {
align-items: center;
text-align: center;
gap: var(--hook-gap);
margin-top: calc(-1 * var(--cs-pad-top));
/* --hook-space (26svh) from the top of . The fixed bar covers the top
--cs-bar-h of that, so what the reader actually SEES above the icon is
--hook-clear (= --hook-space - --cs-bar-h). That visible number is the one
the gap below has to match. */
padding-top: var(--hook-space);
/* Make the gap below the subhead equal the VISIBLE gap above the icon
(--hook-clear), not the generic --cs-sec-gap every other boundary uses.
.cs already lays --cs-sec-gap here via flex `gap`; this margin is the
difference — a small positive top-up at desktop (--hook-clear 170 vs gap
160), a negative trim where the gap is larger. Formula, so it tracks
--hook-space, --cs-bar-h and --cs-sec-gap at every breakpoint. The max()
floor keeps ≥24px of real gap on a pathologically short viewport where
--hook-clear would otherwise collapse it. */
margin-bottom: max(
calc(24px - var(--cs-sec-gap)),
calc(var(--hook-clear) - var(--cs-sec-gap))
);
}
/* .cs-hook's own margin-bottom above is tuned to ITS internal rhythm — the
gap under the subhead matches the visible space above the icon, not the
page's generic --cs-sec-gap. Good for the hero on its own terms, but it
meant the meta card directly below inherited that tuning as ITS gap
above, while its gap below (to whatever follows) is the plain
--cs-sec-gap from .cs's flex `gap` — measured 190px above the card
against 160px below it, asymmetric by exactly the hero's own top-up.
This cancels that top-up rather than touching .cs-hook, which stays
correct for the hero. Negating the identical expression keeps the two
in lockstep at every breakpoint — --hook-space is in svh and --cs-bar-h
and --cs-sec-gap both step at 640/1024, so a fixed pixel here would only
have cancelled it at one width. */
.cs-hook + .cs-sec {
margin-top: calc(-1 * max(
calc(24px - var(--cs-sec-gap)),
calc(var(--hook-clear) - var(--cs-sec-gap))
));
}
/* The visual anchor — the real Jupiter app icon, a full-bleed square with no
corner baked in, so the squircle is cut here.
── A deliberate exception to the --radius rule ──
CLAUDE.md says every corner on this site is var(--radius) (8px) and that a
literal border-radius is a bug. This is the fourth documented exception, and
it is the same species as --hook-icon-radius below: the corner belongs to
the OBJECT being depicted, not to our UI. (It used to cite .hero-photo's
clip-path, which went when the homepage's drawn acrylic panel was replaced
by a photograph of one.) An app icon's radius is roughly 22.5%
of its own width — at the 128px this renders, --radius would be 6%, which
reads as a slightly-softened square rather than as an app icon, and would
misrepresent the asset.
Percentage, not px, so it holds that proportion at every size the clamp
produces — and it is a token, so the dial kit can reach it like everything
else in this fold.
Animation lands on this directly; a transform-based revolve needs no
markup change. */
/* The mount carries the icon's responsive size so AppIcon3D can fill it —
the component measures its host rather than taking a hardcoded pixel size,
which keeps the icon on the same clamp() it always used. */
.cs-hook-icon {
width: var(--hook-icon);
aspect-ratio: 1;
}
.cs-hook-icon img {
display: block;
width: 100%;
height: auto;
border-radius: var(--hook-icon-radius);
}
/* The hook line itself — the biggest type on the page. Narrower than the old
left-aligned cap: centred type needs a tighter measure to hold its shape,
or the ragged edges read as accidental rather than composed.
Size/weight/leading are restated here rather than inherited from
.cs-display so the dial can reach them. Equal specificity, later in the
file, so these win. */
.cs-hook-line {
font-size: var(--hook-title-size);
font-weight: var(--hook-title-weight);
line-height: var(--hook-title-lh);
max-width: var(--hook-title-measure);
}
/* The one number the reader should carry away from the fold. Highlighted
rather than the surrounding words: it is the single scannable proof-point
in the sentence — "onboarding" and "deposits" are context, the figure is
the claim — and colouring only it keeps the rest of the line doing its job
as plain, confident type instead of competing for the same attention.
Colour is derived from the Jupiter icon's own coral, sampled directly from
img/jupiter-icon.jpg (averaged, white glyph and black excluded: #F77468 —
HSL H5 L69 S89) rather than picked by eye. That sample measures 2.7:1 on
this page's cream. Two darker stand-ins were tried here — #f43d2f, then
#ea5e3e at 3.26:1 — both chosen to buy contrast. Neither is spacefire.
Shriya named the brand value directly: spacefire is #FC7A69, so that is
what the token holds now.
The cost, measured: #FC7A69 is 2.47:1 on cream. That is under the 3:1 floor
this project holds even for large text, so the $2.4M is now below AA for
its size where before it was marginally over. It is three display-size
words inside a sentence that reads identically without colour, and the
brand hex is not a judgement call this file gets to make — but it IS a
regression against the old value, so it is written down rather than
absorbed silently. */
.cs-hook-highlight {
color: var(--hook-highlight);
}
/* The company line — now the fold's only subhead. Greyed and a step down from
the title, so the fold reads as one statement plus its context rather than
two competing ones. */
.cs-hook-sub {
font-family: var(--font-ui);
font-size: var(--hook-sub-size);
font-weight: var(--hook-sub-weight);
line-height: var(--hook-sub-lh);
color: var(--hook-sub-color);
max-width: var(--hook-sub-measure);
margin: 0;
}
/* Shared label used by the identity strip, the deep-dive sub-blocks and the
untangle diagrams. Lived here when the hook still had a then/now split;
kept in place because six sections reference it. */
.cs-split-label {
font-family: var(--font-ui);
font-size: var(--text-label);
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cs-label);
}
/* The one note about the frames being placeholders. Set at label scale in the
secondary grey so it reads as an aside from the author rather than as page
copy, and said once — the alternative was the word PLACEHOLDER repeated
twenty-nine times on the way down, which reads as abandoned rather than
in progress. */
.cs-aside-note {
font-family: var(--font-ui);
font-size: var(--text-meta);
line-height: 1.5;
color: var(--cs-label);
max-width: 40em;
margin: 0;
}
/* ═══ §2 — Orientation ═══════════════════════════════════════════════════
One horizontal card holding role / timeline / team as three columns, the
layout the Collectibles study uses for the same job. It replaced a stacked
four-row spec sheet, and it carries no heading: the column labels already
say what it is, so a title above it was repeating itself.
White on the cream ground rather than a tint, so the card lifts off the
page the way the reference's does. Corner is --radius; the reference's
larger radius is its own visual language, not part of the layout.
The company line that used to be the fourth row moved up into the hero —
also following the reference, which puts its "what is Swiggy" explainer in
the opening panel rather than in the meta card. That leaves three columns
whose values are short enough to sit side by side.
Every value here is a custom property for the same reason fold 1's are:
case-study-dial.js reaches them by name. Defaults live here, so removing
the dial kit changes nothing. */
.cs-page {
--meta-pad: 24px;
--meta-gap: 24px; /* between columns */
--meta-stack: 8px; /* label -> value, inside one column */
/* The dial kit reaches this by name, so it stays a --meta-* knob; its
default is now the shared card corner rather than a second reference to
--radius. */
--meta-radius: var(--cs-card-radius);
--meta-key-size: var(--text-label);
--meta-key-weight: 400;
--meta-key-track: 0.1em;
--meta-val-size: var(--text-body);
/* Was 700, then 400 (matched to the hook subhead's regular weight, so the
value read as calm information rather than a second headline). Now 500,
matched instead to .cs-bubble-line — both are var(--font-display), so this
is Clash Display's own medium file in both places, not a synthesis. */
--meta-val-weight: 500;
--meta-val-lh: 1.35;
}
.cs-meta {
display: grid;
gap: var(--meta-gap);
padding: var(--meta-pad);
/* Geometrically equal to the gap above (both exactly --cs-sec-gap, via the
.cs-hook + .cs-sec rule above cancelling the hero's own top-up) still
read as tighter below on review — the card's flat white edge sits hard
against cream, then colourful phone screens start immediately after it,
which carries more visual weight than the plain type above the card and
makes an identical gap look shorter. Requested explicitly at +24px
rather than re-balanced to equal again.
On .cs-meta, not the section wrapping it: a is a flex item of
.cs and establishes its own block formatting context, so a margin here
grows this section's own box rather than collapsing through it into the
flex `gap` — the gap above is untouched. */
margin-bottom: 24px;
/* Surface from the shared card tokens (see --cs-card-* and .cs-card). This
card is the reference use; a later section wanting the same panel adds the
.cs-card class rather than re-typing these. border-radius stays routed
through --meta-radius so the dial kit's corner control still bites. */
background: var(--cs-card-bg);
border-radius: var(--meta-radius);
/* No width or centring of its own any more — the section wrapping it is
already exactly --cs-content-max wide (every section is, now), so the
card simply fills it. It used to carry its own separate 950px cap; that
is what let it sit narrower than everything else on the page, since
every other section was still the wider, uncapped column. One page-wide
rule now does what two independent ones used to.
950px is still the number in play, unchanged from when it was tuned: the
three column values are auto-sized to their own content, and forcing the
column narrower makes the grid compress all three at once rather than
wrapping only the longest — at 640px, tested, "My role" broke to three
ragged lines and "Team" to five. At 950px only Team wraps, cleanly, to
two even lines; Role and Duration hold their single line. Measured at
six widths, not picked by eye.
The border is gone; a soft shadow separates the card from the page
instead — now --cs-card-shadow, shared with every other card. */
box-shadow: var(--cs-card-shadow);
}
.cs-meta-item {
display: flex;
flex-direction: column;
gap: var(--meta-stack);
min-width: 0;
}
.cs-meta-key {
font-family: var(--font-ui);
font-size: var(--meta-key-size);
font-weight: var(--meta-key-weight);
line-height: 1.4;
letter-spacing: var(--meta-key-track);
text-transform: uppercase;
color: var(--cs-label);
}
/* Bold, matching the reference card: the label is the quiet half of each
column and the value is the answer, so they differ by weight as well as by
size and colour. */
.cs-meta-val {
font-family: var(--font-display);
font-size: var(--meta-val-size);
font-weight: var(--meta-val-weight);
line-height: var(--meta-val-lh);
color: var(--color-dark);
margin: 0;
}
@media (min-width: 641px) {
.cs-page { --meta-gap: 40px; --meta-pad: 40px; }
/* Three equal columns. An earlier build used repeat(3, auto) + space-between
so each value took only the width it needed — but with "My role" and
"Team" both carrying long values and "Duration" carrying "1.5 months", the
card ended up visibly heavier on the left two thirds. Equal 1fr columns
was asked for directly: every column is the same width, the two longer
values wrap within their own third, and the card reads balanced. */
.cs-meta { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1025px) {
.cs-page { --meta-gap: 56px; --meta-pad: 48px; }
}
/* The legacy spec sheet that used to live here is gone, and it had to go:
§17's strategy spectrum took the name .cs-spec, so this dead rule stopped
being harmlessly unused and started styling a live section from six
thousand lines away. It was contributing a border-top — the stray divider
above the tab row — and a max-width: 56em that pulled §17's right edge in
off the column, which is why that section's right margin did not match
§7's. Neither was overridden, because neither property appears in §17's
own .cs-spec rule; there was nothing to notice.
Its comment said "delete if nothing picks it up". Something picked up the
name instead, which is the worse case, so: deleted. §2 is .cs-meta. */
/* ═══ §3 / §14 — Stats ═══════════════════════════════════════════════════
Numbers and labels reuse .case-metric-number / .case-metric-label from
style.css verbatim. Only the grid is new here: .case-metrics is a fixed
760px flex row, which cannot stack. */
.cs-stats {
display: grid;
gap: 32px;
border-top: 1px solid var(--color-dark);
padding-top: 24px;
}
/* §14 repeats §3's numbers larger. One step up the scale, nothing else. */
.cs-stats--lg .case-metric-number {
font-size: var(--text-section);
}
/* ═══ §4 — Selected screens (silent strip) ═══════════════════════════════
Four real screens, no captions — one eyebrow above, and that is the whole
section. Placeholder boxes used to stand here at a size invented for this
section alone (168px mobile, a 4-up grid capped at 1040px desktop). Real
screens replaced them at the size every other "after" screen on the page
already uses (--pro-card-w * --cs-screen-step, below), which does not fit
four across inside the page's own 950px column at most desktop widths — so
this bleeds to the viewport the same way §6's journey and §17's spectrum
do, rather than being shrunk to fit a column the rest of the page never
asked these screens to fit either.
No scroller, on instruction, and that is also what fixed the clipped
shadow. The row used to bleed to the viewport and pay a --cs-margin-sized
gutter back in on both sides, which left 950px of usable width for 1204px
of screens — so it scrolled, and the fourth screen sat 10px past the
scrollport's own right edge with its shadow shaved off against it.
Measured before: scrollWidth 1695 against clientWidth 1440, last screen's
right gap -10px.
Centring the row instead of gutter-padding it is what buys the width back:
the bleed stays (four real screens need more than the 950px column can
ever give them) but nothing is subtracted from it, so 1204px of content
centres inside 1440px with 118px to spare and the whole row is simply
visible. No overflow property anywhere in this rule now, which means no
scrollport, which means nothing to clip a shadow against — the
padding-block/margin-block pair that used to buy vertical room for it is
gone with the scroller that made it necessary.
flex-wrap is the honest answer below ~893px, where four at this size stop
fitting the viewport itself: they wrap to 2x2, then to one column, rather
than either scrolling (asked against) or shrinking below the size the rest
of the page calls "after". */
.cs-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
gap: var(--pro-stage-gap);
/* Bleeds to the viewport because the 950px column cannot hold four screens
at this size. Deliberately NOT paying a gutter back in — see above. */
margin-inline: calc(50% - 50vw);
/* The only inset: enough that a wrapped row never touches the screen edge.
Cannot be --cs-margin, which is 160px at 1440 and would pull the usable
width back under what one row needs, re-creating the wrap it is meant to
avoid. A token because the 2-up cap below has to add it back — see
there. */
--strip-edge: 24px;
padding-inline: var(--strip-edge);
}
/* Below ~893px four screens at this size stop fitting the viewport, and left
to itself flex-wrap breaks them 3 + 1 — a full row and an orphan, which
reads as a mistake rather than as a grid. Capping the box at two screens
plus one gap makes the break 2 x 2 instead. Written off the same two tokens
the items are sized from, so it cannot drift from them.
The bleed goes with it: at these widths the row is narrower than the column
anyway, so it has nothing to escape and margin-inline: auto simply centres
it. Below ~454px even two stop fitting and the same rule degrades to one
per row on its own, no third breakpoint needed. */
@media (max-width: 892px) {
.cs-strip {
/* + the two --strip-edge paddings, because the page's reset puts every
box on border-box: without them the padding eats into this cap and
only ONE screen fits the row it is meant to hold two of. Measured at
745px before adding them: 4 rows of 1, not the 2 x 2 intended. */
max-width: calc(2 * (var(--pro-card-w) * var(--cs-screen-step))
+ var(--pro-stage-gap)
+ 2 * var(--strip-edge));
margin-inline: auto;
}
}
.cs-strip > * {
/* auto, not a pixel value: the item's width comes from .cs-shot-img below,
which is a genuine variable (--pro-card-w is a clamp()) rather than a
number this rule would have to keep in step with by hand. */
flex: 0 0 auto;
}
/* The four screens, sized identically to every §10-20 "after" screen on the
page. A descendant selector, not .cs-strip > *, because the splash image
sits inside a for its reduced-motion still — the box that needs
this width is the either way. */
.cs-strip .cs-shot-img {
width: calc(var(--pro-card-w) * var(--cs-screen-step));
max-width: none;
}
/* Same fix as .cs-shot picture, same reason: a bare is inline by
default, which leaves a few px of baseline gap below it that a flex item
normally would not carry, and misaligns it against its bare- siblings
on the row's own baseline. */
.cs-strip picture { display: block; }
/* ═══ §5 — Maturity gap ═════════════════════════════════════════════════ */
/* The 2019-vs-now identity strip: two short wide panels, not phones. */
.cs-identity {
display: grid;
gap: 16px;
max-width: 800px;
}
/* .cs-quotes / .cs-quote lived here — a second, conflicting copy of the pivot
section's quote treatment, shadowed by another set further down the file and
used by nothing once §4 was rebuilt around .cs-voice cards. Deleted rather
than left to rot; git has it. */
/* ═══ §7 / §16 — Step markers ═══════════════════════════════════════════
One pattern, two uses: the mandate sequence (§7) and the since-shipping
timeline (§16). Same shape, so it is the same component rather than two.
Square markers, no dots: --radius-round is reserved for the three floating
circular icon buttons (see CLAUDE.md), and a literal border-radius is not
allowed, so the marker is simply a square. It suits the type anyway.
Flex-wrap rather than a media query — the row breaks wherever it runs out
of width, at any viewport, and the connectors sit between siblings so a
wrapped line still reads correctly. */
.cs-steps {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 16px;
list-style: none;
padding: 0;
margin: 0;
}
.cs-step {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-ui);
font-size: var(--text-meta);
line-height: 1.4;
color: var(--color-dark);
}
.cs-step::before {
content: '';
width: 8px;
height: 8px;
flex: none;
background: var(--color-dark);
}
.cs-step::after {
content: '';
width: 24px;
height: 1px;
flex: none;
background: var(--cs-rule);
}
.cs-step:last-child::after { display: none; }
/* ═══ §8 — Problems + principles ════════════════════════════════════════
Three cards, each carrying one problem and the principle answering it.
The principle sits below a hairline inside the card so the pairing is
structural, not just adjacency. */
.cs-pairs {
display: grid;
gap: 16px;
}
/* ═══ Card grid ══════════════════════════════════════════════════════════
One component, four sections. Added after an audit found five sections
carrying prose with no visual or structural anchor at all — the page was
telling where it should have been showing, and nothing in those stretches
could be skimmed.
The pattern is lifted from the Bikiron Collectibles case study, which chunks
its own text-only stretches into small bordered cards rather than running
them as paragraphs. Structure copied, dressing not: those cards are tinted
sticky-note colours from a different palette, these use our hairline and
ground. His radius happens to be 8px too, which is our --radius exactly.
Column count is per-use, so one grid serves a 2-up then/now, a 3-up set of
beats and a 4-up set of workstreams:
style="--cs-cols: 4" on .cs-grid
Falls to one column on a phone and two at tablet regardless, because four
bordered cards across a 375px screen is unreadable at any font size. */
.cs-grid {
display: grid;
gap: 16px;
grid-template-columns: 1fr;
}
/* ═══ §9 — Deep dive ════════════════════════════════════════════════════
Four sub-artifacts, four shapes. Diagrams run full width; benchmarks are
a dense label grid (no screenshots); personas are two compact cards.
§9's own .cs-sub wrapper (display:flex, column, gap 16px) used to live
here and is gone. Nothing in the markup used it any more, but the SECTION
SUBHEAD further down this file is also called .cs-sub, so this dead rule
was silently making all four of those paragraphs flex containers.
That is invisible while such a paragraph holds nothing but text — one
anonymous flex item, laid out exactly like a block. It stops being
invisible the moment one contains an element: §17's subhead bolds a clause,
and the blockified into a flex item, breaking the sentence onto
three lines with the bold phrase alone in the middle. Same failure as the
legacy .cs-spec rule two thousand lines up — a dead selector that stopped
being dead when a new component took its name. */
/* ═══ §10 — The existing journey, untangled ═════════════════════════════
A before/after diagram on the dark band: eight scattered steps that
regroup into four bands. Built by case-study-untangle.js — read the note
at the top of that file before changing anything here, because the layout
is computed from the --ut-* tokens below and nothing else.
The argument is conservation: the same eight nodes are on screen in both
states. That is why the two states are one node set, not two drawings.
Everything here is layout and colour. No element is hidden by this
stylesheet — every hidden state in this section is written by the script,
onto elements the script itself created. */
/* The band's own --cs-sec-gap padding is 160px a side at 1025+, which a
100svh pin cannot afford. Trimmed on this one section rather than on
.cs-band, which two other sections use at full depth. */
.cs-ut-band { padding-block: 32px; }
/* Only where the diagram is actually pinned. Below 768px the section is two
static figures and has no business being a viewport tall. */
@media (min-width: 768px) {
.cs-ut-band {
min-height: 100svh;
justify-content: center;
}
}
.cs-ut {
display: flex;
flex-direction: column;
gap: 16px;
/* The diagram grid. Every one of these is a multiple of 4, and every
grouped-state node position is built from them, so the grouped state
cannot leave the grid. Read by case-study-untangle.js through
getComputedStyle — they are the single source for both files. */
--ut-node-w: 96px;
--ut-node-h: 64px;
--ut-gap-x: 12px;
--ut-gap-y: 32px;
--ut-head-w: 0px; /* 0 = the band heading sits above its row */
--ut-head-h: 32px;
--ut-head-gap: 8px;
--ut-pad: 16px;
}
/* 768px is the same figure case-study-untangle.js pins on, deliberately: at
this width the band heading moves beside its row and the diagram starts
being animated, and those two decisions must not disagree. Neither 641 nor
1025 works — a three-node band plus a side heading needs 680px. */
@media (min-width: 768px) {
.cs-ut {
--ut-node-w: 144px;
--ut-gap-x: 24px;
--ut-gap-y: 24px;
--ut-head-w: 176px;
--ut-head-gap: 24px;
--ut-pad: 24px;
}
}
@media (min-width: 1200px) {
.cs-ut {
--ut-node-w: 200px;
--ut-gap-x: 32px;
--ut-head-w: 224px;
--ut-head-gap: 32px;
}
}
/* ── The two state labels ───────────────────────────────────────────────
They carry the count, and the count is the same on both sides. With no
script they read as a before/after summary above the list; in the static
build the script moves one into each figure. */
.cs-ut-states {
display: flex;
flex-direction: column;
gap: 8px;
}
.cs-ut-state {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
}
.cs-ut-state-name {
font-family: var(--font-ui);
font-size: var(--text-label);
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cs-fg);
}
.cs-ut-state-count {
font-family: var(--font-ui);
font-size: var(--text-label);
line-height: 1.4;
color: var(--cs-label);
}
/* Pinned build only, and the class is added by the script. The two labels
stack so the count sits in exactly the same place either side of the
fade — which is the point, because it does not change. */
.cs-ut-states--cross {
display: block;
position: relative;
min-height: 48px;
}
.cs-ut-states--cross .cs-ut-state {
position: absolute;
top: 0;
left: 0;
}
/* ── Full bleed ─────────────────────────────────────────────────────────
Cancels the band's --cs-margin exactly, the same technique .cs-ph--bleed
uses, so the diagram reaches the viewport edge while the column above it
never moves. The script measures this element to get its stage width, so
the margin arithmetic lives in one place rather than being re-resolved in
JavaScript. */
.cs-ut-holder { margin-inline: calc(-1 * var(--cs-margin)); }
.cs-ut-figs {
display: flex;
flex-direction: column;
gap: 32px;
}
.cs-ut-fig {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
}
/* In the static pair each figure carries its own label, inset back to the
text column even though the diagram beneath it is not. */
.cs-ut-fig > .cs-ut-state { padding-inline: var(--cs-margin); }
/* The sprawl runs past both edges and is clipped here. It never reaches the
document: an absolutely positioned child of an overflow-hidden box cannot
widen the page. */
.cs-ut-stage {
position: relative;
width: 100%;
overflow: hidden;
}
.cs-ut-wires {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
fill: none;
stroke: var(--cs-dash);
stroke-width: 1;
stroke-linecap: round;
}
/* The four grounds the nodes settle onto. */
.cs-ut-band-row {
position: absolute;
border-radius: var(--radius);
background: var(--cs-tint);
}
.cs-ut-head {
position: absolute;
display: flex;
align-items: center;
}
/* Opaque on the band ground, so a wire passes behind a node rather than
through its label. --color-dark is the band's own ground, which is what
makes an outlined chip of it. */
.cs-ut-node {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: var(--ut-node-w);
height: var(--ut-node-h);
padding: 8px;
border: 1px solid var(--cs-dash);
border-radius: var(--radius);
background: var(--color-dark);
text-align: center;
will-change: transform;
}
.cs-ut-node-name {
font-family: var(--font-ui);
font-size: var(--text-label);
line-height: 1.25;
color: var(--cs-fg);
}
/* The one step the redesign added. Dashed and badged, because the rest of
the diagram is a conserved set and this is not part of it. */
.cs-ut-node--added { border-style: dashed; }
.cs-ut-node-tag {
font-family: var(--font-ui);
font-size: var(--text-label);
line-height: 1.2;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cs-label);
}
/* ── The list ───────────────────────────────────────────────────────────
The section's content with no JavaScript, no GSAP or a thrown error: the
documented steps in flow order, as plain text. The script hides it only
once a diagram exists in its place, and hides it from the eye rather than
from the accessibility tree — every stage is aria-hidden, so this list is
what a screen reader is given. Same recipe as .alb-live in style.css. */
.cs-ut-list {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
padding-left: 24px;
}
.cs-ut-list li {
font-family: var(--font-ui);
font-size: var(--text-meta);
line-height: 1.5;
color: var(--cs-fg);
}
.cs-ut-item-tag { color: var(--cs-label); }
.cs-ut-list--sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* The line that says the map is a reconstruction. It sits with the diagram, in
plain view, because a reader who takes this for Jupiter's real flow map has
been misled by the page. */
.cs-ut-note {
font-family: var(--font-ui);
font-size: var(--text-label);
line-height: 1.5;
color: var(--cs-label);
max-width: 64em;
margin: 0;
}
/* ═══ §6 — .cs-jn, the journey shown twice ════════════════════════════════
Eleven steps as pills, switched between a descending staircase (before) and
five merged stage blocks on one level (after), by a segmented control.
The same eleven
nodes serve both states. They are re-positioned, never
re-created, which is what makes the conservation claim structural instead of
rhetorical: there is no code path that could show a different set in one
view than the other.
Two layout modes:
- No JS / not yet measured: the is a plain readable list. Everything
below that positions anything is gated behind .is-live, which the script
adds only once it has measured the canvas.
- .is-live: pills go absolute and animate left/top/width/border-radius.
Colour comes from the band's own tokens (--cs-fg, --cs-label, --cs-rule,
--cs-tint), all of which .cs-band--dark redefines, so the component themes
itself on the dark ground without a single dark-specific rule. */
.cs-jn-sec { --cs-blk-gap: 28px; }
.cs-jn {
--jn-pill-h: 28px;
--jn-pill-w: 176px;
--jn-label-w: 176px; /* label wraps inside its own pill's width */
/* The horizontal step is the value that fixes the overlap, and it is the
label's width plus clear air — NOT the pill's. A label hangs under its
pill and is as wide as --jn-label-w, so as soon as the step is narrower
than that, every label runs under the next pill and the next label. It was
95px at 1440 (the column width divided by ten) against 190px labels, which
is why the before view was unreadable.
Setting it as a fixed step rather than dividing the available width means
the staircase has an intrinsic width — 2096px for eleven steps — so it
scrolls instead of compressing, and stays legible at any viewport. */
--jn-x-step: 192px;
--jn-row: 48px; /* vertical drop per staircase step */
--jn-gap: 4px; /* divider between merged slices */
--jn-label-h: 64px; /* room under the last pill for its label */
--jn-block-gap: 32px; /* between the five stage blocks */
--jn-title-gap: 24px; /* bar to stage title */
/* Fallback only. The real value is measured from the rendered titles and
written back as --jn-title-h by the script: a fixed guess clipped the
summaries the moment a stage name wrapped to a second line. */
--jn-title-h: 92px;
/* The after timeline still reads as "compact" against a 2112px staircase at
0.92 — the contrast that matters is with the before view, not with the
frame. At 0.78 in a 950px column the five blocks came out 164px wide and
every stage name wrapped to three lines, which read as clutter. */
/* The after view is sized from a target BLOCK width rather than a fraction
of the frame. With the summaries gone a stage block only has to hold its
name, so 176px fits all five names in two lines at most and leaves the row
visibly shorter than the frame — which is what stops it ending hard
against the right edge. A fraction of the frame could not do that, because
it grows the blocks to fill whatever room it is given.
--jn-after-trail is guaranteed air past the last block. Where the frame is
wide enough it is simply empty space; where it is not, it is the bit of
scroll that keeps the last stage from sitting flush against the edge. */
--jn-after-block: 176px;
--jn-after-trail: 120px;
/* Two radii, and the change between them is part of the transition: a
capsule in the before state, a card corner once the pills merge into
blocks. The 999px is a literal rather than a token because --radius-round
is reserved for three floating icon buttons and its own rule says not to
extend it; this is the same call .cs-did li already made, and the spec
asked for "pill/capsule shapes" by name. Only the two OUTER corners of a
block keep it; every inner slice edge squares off, which is what makes a
stage read as one bar cut into parts. */
--jn-radius-pill: 999px;
--jn-radius-block: var(--cs-card-radius);
/* Mixed from the band's own foreground, so this is cream-on-dark inside the
dark band and ink-on-cream anywhere else, from one declaration. */
--jn-neutral: color-mix(in srgb, var(--cs-fg) 15%, transparent);
--jn-positive: var(--hook-highlight);
/* Same weight as the prologue's field (--cs-screen-dots), which also sits
behind a visual rather than behind running text. */
--jn-dot-opacity: 0.18;
--jn-drop: var(--cs-negative);
--jn-ease: cubic-bezier(.2, .8, .2, 1);
--jn-dur: 0.74s;
--jn-dur-colour: 0.42s;
display: flex;
flex-direction: column;
gap: 24px;
}
/* --- head: the segmented control + legend -------------------------------- */
/* Left, on the column's margin with the heading above it, rather than pushed
to the far right — it is the first thing the section asks the reader to do,
so it reads in the same place their eye already is.
The legend sits in this row now too, beside the toggle, rather than below
the canvas. The canvas reserves height for the full eleven-step staircase,
so a legend parked after it sat ~400px below the last visible pill on
arrival — a footnote to the section, not a key to the graph it was
describing. Here it is in the same glance as the control that switches the
view it applies to, and .cs-jn-legend's own fade still hides it once that
view has nothing to key. */
.cs-jn-head {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 24px;
flex-wrap: wrap;
}
/* iOS-style segmented control: one track, a moving thumb behind the labels.
The thumb is the ::after of the track rather than a third element, so the
markup stays two buttons and a group. */
.cs-jn-toggle {
position: relative;
display: inline-flex;
padding: 3px;
border-radius: 999px;
background: var(--cs-tint);
border: 1px solid var(--cs-rule);
}
.cs-jn-toggle::after {
content: '';
position: absolute;
z-index: 0;
top: 3px;
bottom: 3px;
left: 3px;
width: calc(50% - 3px);
border-radius: 999px;
background: var(--cs-fg);
transition: transform var(--jn-dur-colour) var(--jn-ease);
}
.cs-jn[data-jn-state="after"] .cs-jn-toggle::after { transform: translateX(100%); }
.cs-jn-tab {
position: relative;
z-index: 1;
min-width: 92px;
/* 12px + a 16px line + 12px is 40, and the track's 3px padding either side
plus its hairline makes the control 48 tall. Measured, because the first
pass used 9px here and came out at 42 — under the 44px tap floor this
project holds, and close enough to it to look right while failing. */
padding: 12px 20px;
border: 0;
background: none;
border-radius: 999px;
cursor: pointer;
font-family: var(--font-ui);
font-size: var(--text-label);
font-weight: 700;
color: var(--cs-label);
transition: color var(--jn-dur-colour) var(--jn-ease);
}
.cs-jn-tab[aria-pressed="true"] { color: var(--cs-band-bg, var(--color-cream)); }
.cs-jn-tab:focus-visible { outline: 2px solid var(--cs-fg); outline-offset: 3px; }
/* --- viewport + scroller ------------------------------------------------- */
/* The frame. Its left edge is the content column's, so the visual lines up with
the heading; its right edge runs out to the viewport's, which is what stops
the after view reading as cramped in a 950px column and shows more of the
staircase per screen.
50% is half this box (the 950 column), 50vw is half the viewport, so the
difference is exactly the gutter on the right — no magic number, and it
tracks every breakpoint on its own. already has overflow-x hidden,
which covers the scrollbar's width being counted in 50vw. */
.cs-jn-viewport {
position: relative;
/* Full bleed BOTH ways now. The right edge always ran out to the viewport's;
the left one does too, so scrolled content crops against the screen rather
than against the column. The content still STARTS at the column's left
edge — that inset moved to the scroller's padding, below — so nothing about
the unscrolled state changed. */
margin-inline: calc(50% - 50vw);
/* On top of .cs-jn's own 24px gap. The control sits above the visual now
rather than beside it, so it needs real separation from it. */
margin-top: 32px;
}
.cs-jn-scroller {
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scrollbar-width: thin;
scrollbar-color: var(--cs-rule) transparent;
/* Room for the pointer's own scrollbar so it never sits on the last label. */
padding-bottom: 8px;
/* The scroller now spans the whole viewport, so this padding is what holds
the staircase's start on the column's left edge while the box it scrolls
inside reaches the screen. Scrolled content passes through it and crops
against the screen, which is the whole point of the change.
Written without percentages on purpose: inside a full-bleed box a
percentage resolves against 100vw, not against the column, so the gutter
has to be rebuilt from the same two values the page lays itself out with.
It is the page margin, except once the column has hit its cap and the
margins are whatever is left over — which is exactly max() of the two.
.cs-jn-scroller's clientWidth INCLUDES this padding, and the script sizes
both layouts from it, so case-study-journey.js subtracts it back off. The
two have to agree: change one and the staircase resizes. */
--jn-gutter: max(var(--cs-margin),
calc((100vw - var(--cs-content-max)) / 2));
padding-left: var(--jn-gutter);
}
.cs-jn-scroller::-webkit-scrollbar { height: 6px; }
.cs-jn-scroller::-webkit-scrollbar-thumb {
background: var(--cs-rule);
border-radius: 999px;
}
/* --- canvas ------------------------------------------------------------- */
.cs-jn-canvas { position: relative; }
.cs-jn.is-live .cs-jn-canvas {
width: var(--jn-canvas-w, 100%);
height: var(--jn-canvas-h, 0px);
transition:
height var(--jn-dur) var(--jn-ease),
width var(--jn-dur) var(--jn-ease);
}
/* Decorative ground. The pattern itself comes from the shared rule in
style.css — this sets only the box, the fade and the weight, the same split
.cs-pro-dots uses so the two fields cannot drift apart.
Inset past the canvas on every side so the radial mask has faded the dots to
nothing well before the box ends: the field reads as light behind the
staircase rather than as a panel with an edge. */
.cs-jn-dots {
position: absolute;
/* Vertical overhang only. An absolutely positioned child still counts toward
the scroller's scrollWidth, so a horizontal one made the after view 982px
wide inside a 950px scroller and left it scrollable when it should be
inert. Nothing is lost: the radial mask has already faded the dots out
well inside these edges. */
inset: -24px 0;
opacity: var(--jn-dot-opacity);
/* Edge-anchored fade, not the prologue's proportional radial one. This canvas
changes width dramatically between the two views — 2112px when the
staircase is scrolling, 950 when it collapses — and a radial ellipse at
50% put its bright centre a thousand pixels off to the right, leaving the
START of the staircase, which is where the reader begins, almost bare.
A fade measured in px from each edge holds at any width.
Two gradients intersected: horizontal and vertical. mask-composite is the
standard property; the -webkit- pair is what Safari still reads, and its
'source-in' is the same operation. */
--jn-fade-x: 96px;
--jn-fade-y: 56px;
-webkit-mask-image:
linear-gradient(to right, transparent, #000 var(--jn-fade-x), #000 calc(100% - var(--jn-fade-x)), transparent),
linear-gradient(to bottom, transparent, #000 var(--jn-fade-y), #000 calc(100% - var(--jn-fade-y)), transparent);
mask-image:
linear-gradient(to right, transparent, #000 var(--jn-fade-x), #000 calc(100% - var(--jn-fade-x)), transparent),
linear-gradient(to bottom, transparent, #000 var(--jn-fade-y), #000 calc(100% - var(--jn-fade-y)), transparent);
-webkit-mask-composite: source-in;
mask-composite: intersect;
z-index: 0;
}
/* Everything real paints above the field. */
.cs-jn-steps > li,
.cs-jn-stages > li { position: relative; z-index: 1; }
/* --- steps -------------------------------------------------------------- */
.cs-jn-steps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.cs-jn-steps > li {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-ui);
font-size: var(--text-label);
color: var(--cs-fg);
}
.cs-jn.is-live .cs-jn-steps { display: block; }
.cs-jn.is-live .cs-jn-steps > li {
position: absolute;
top: 0;
left: 0;
height: var(--jn-pill-h);
width: var(--jn-pill-w);
padding: 0 10px;
border-radius: var(--jn-radius-pill);
background: var(--jn-neutral);
overflow: visible;
transform: translate3d(var(--jn-x, 0), var(--jn-y, 0), 0);
transition:
transform var(--jn-dur) var(--jn-ease),
width var(--jn-dur) var(--jn-ease),
border-radius var(--jn-dur) var(--jn-ease),
background-color var(--jn-dur-colour) var(--jn-ease);
}
/* The warm fill is the before state's only colour, and it is a diagnosis:
where the funnel bled. It does not carry into the after view, because the
regrouping is a proposal and colouring it would imply a measured result. */
.cs-jn.is-live[data-jn-state="before"] .cs-jn-steps > li[data-jn-drop] {
background: linear-gradient(
100deg,
color-mix(in srgb, var(--jn-drop) 88%, transparent),
var(--jn-drop));
}
.cs-jn-emoji { font-size: 15px; line-height: 1; flex: none; }
.cs-jn-label { white-space: nowrap; }
/* Once live the label drops out of the pill and sits under it, which is what
lets the pill itself shrink to a slice without the text fighting the box. */
.cs-jn.is-live .cs-jn-label {
position: absolute;
top: calc(100% + 7px);
left: 0;
width: max-content;
max-width: var(--jn-label-w);
white-space: normal;
font-size: var(--text-label);
line-height: 1.35;
color: var(--cs-label);
transition: opacity var(--jn-dur-colour) var(--jn-ease);
}
.cs-jn.is-live[data-jn-state="after"] .cs-jn-label,
.cs-jn.is-live[data-jn-state="after"] .cs-jn-emoji { opacity: 0; pointer-events: none; }
.cs-jn.is-live .cs-jn-label,
.cs-jn.is-live .cs-jn-emoji { opacity: 1; }
/* Slices: square off every inner edge so a stage reads as one bar cut into
parts rather than as pills parked next to each other. The script sets
--jn-slice on the members that are not at an end of their stage. */
/* The after view is the resolution, so it carries the brand's warm accent on
every slice — where the before view carries red on the steps that bled. The
two states now say opposite things in colour, not just in arrangement. */
.cs-jn.is-live[data-jn-state="after"] .cs-jn-steps > li {
border-radius: 0;
padding: 0;
background: var(--jn-positive);
}
.cs-jn.is-live[data-jn-state="after"] .cs-jn-steps > li[data-jn-edge="start"] {
border-radius: var(--jn-radius-block) 0 0 var(--jn-radius-block);
}
.cs-jn.is-live[data-jn-state="after"] .cs-jn-steps > li[data-jn-edge="end"] {
border-radius: 0 var(--jn-radius-block) var(--jn-radius-block) 0;
}
.cs-jn.is-live[data-jn-state="after"] .cs-jn-steps > li[data-jn-edge="only"] {
border-radius: var(--jn-radius-block);
}
/* First measured paint: positions applied with no travel, so the pills do not
fly in from the canvas origin the first time the section is laid out. */
.cs-jn.is-settling .cs-jn-steps > li,
.cs-jn.is-settling .cs-jn-stages > li,
.cs-jn.is-settling .cs-jn-canvas { transition: none !important; }
/* --- stage titles ------------------------------------------------------- */
.cs-jn-stages { list-style: none; margin: 0; padding: 0; }
/* Before the script runs these are the plain stage list, which is useful on
its own; once live they are absolutely placed under their block. */
.cs-jn:not(.is-live) .cs-jn-stages {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--cs-rule);
}
.cs-jn:not(.is-live) .cs-jn-stages > li { display: flex; flex-direction: column; gap: 2px; }
.cs-jn.is-live .cs-jn-stages > li {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
gap: 3px;
/* Capped to the block it labels, on the
rather than on the summary
alone: a long stage name ("Pick a Jupiter experience") is wider than a
fifth of the timeline and ran straight under the next stage's badge when
only the summary was constrained. */
width: var(--jn-sum-w, 200px);
transform: translate3d(var(--jn-x, 0), var(--jn-y, 0), 0);
opacity: 0;
pointer-events: none;
transition:
opacity var(--jn-dur-colour) var(--jn-ease),
transform var(--jn-dur) var(--jn-ease);
}
/* Staggered by stage index so the five titles settle left to right rather than
all arriving at once. --jn-i is set by the script. */
.cs-jn.is-live[data-jn-state="after"] .cs-jn-stages > li {
opacity: 1;
pointer-events: auto;
transition-delay: calc(var(--jn-i, 0) * 0.06s);
}
.cs-jn-stage-name {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-ui);
line-height: 1.25;
color: var(--cs-fg);
}
/* The numeral is a counter, not typed into the markup, so it cannot drift out
of step with the list order. */
.cs-jn-stages { counter-reset: jn-stage; }
.cs-jn-stages > li { counter-increment: jn-stage; }
.cs-jn-stage-name::before {
content: counter(jn-stage);
display: inline-grid;
place-items: center;
width: 20px;
height: 20px;
margin-right: 8px;
border-radius: 999px;
/* Spacefire, matching the slices above it. The numeral is dark ink, not
cream: white on spacefire measures 2.58:1 and would be unreadable at 11px,
where ink is 6.44:1. (The bubble's white-on-spacefire is a separate,
deliberate call about a display-size clause — it does not extend here.) */
background: var(--jn-positive);
color: var(--color-dark);
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
vertical-align: 1px;
}
/* .cs-jn-stage-sum — a one-line summary under each stage name — was removed on
instruction. The name and the slices under it carry the stage on their own,
and the summaries were most of what made this view read as dense. */
/* --- legend ------------------------------------------------------------- */
/* Only the before view has drop-off in it, so the key goes with it — and now
lives inside .cs-jn-head, beside the toggle it keys (see the note above). */
.cs-jn-legend {
display: flex;
gap: 24px;
flex-wrap: wrap;
margin: 0;
font-family: var(--font-ui);
font-size: var(--text-label);
color: var(--cs-label);
transition: opacity var(--jn-dur-colour) var(--jn-ease);
}
.cs-jn[data-jn-state="after"] .cs-jn-legend { opacity: 0; pointer-events: none; }
.cs-jn-key { display: inline-flex; align-items: center; gap: 8px; }
.cs-jn-key::before {
content: '';
width: 9px;
height: 9px;
border-radius: 999px;
background: var(--jn-neutral);
}
.cs-jn-key--drop::before { background: var(--jn-drop); }
/* --- scroll hint ---------------------------------------------------------- */
/* "Scroll" plus a nudging double-chevron, pushed to the row's far right by its
own auto margin -- the toggle and legend read left to right on the near
edge, this sits where the eye lands next, roughly above the edge the
staircase actually scrolls past.
Hidden by default and shown only under .is-live[data-jn-state="before"] --
the two conditions under which the staircase is ACTUALLY a horizontal
scroller. Below the 641px breakpoint the component has no JS layout at all
(is-live never gets added; the fallback is a plain vertical list — nothing
horizontal to scroll), and the after view collapses to fit the frame and
"goes inert" (see the scroller's own comment below). A hint that shows
regardless of either would tell a reader to scroll toward content that
cannot move. Verified: at 640px, .cs-jn lacks .is-live and the scroller's
own scrollWidth equals its clientWidth — genuinely nothing to scroll,
which is what this rule is for.
Modelled on a reference recording of the same pattern rather than guessed:
the chevron pair holds at rest, eases right, holds, eases back -- and it is
ONE rigid unit, not two staggered glyphs. Confirmed on the recording by
tracking each chevron's own pixel centroid: both moved by the same amount on
every frame and the gap between them never changed. */
/* display:none by default -- the <641px fallback never gets .is-live, so the
hint never enters layout there at all. This is deliberately a SEPARATE
toggle from the opacity one below: display can't transition, so the
before/after cross-fade needs the element to stay display:flex the whole
time .is-live holds, exactly like .cs-jn-legend, with only .is-live itself
(added once, on load, never removed) switching it into the layout. */
.cs-jn-hint {
display: none;
align-items: center;
gap: 6px;
margin: 0 0 0 auto;
font-family: var(--font-ui);
font-size: var(--text-meta);
color: var(--cs-label);
transition: opacity var(--jn-dur-colour) var(--jn-ease);
}
.cs-jn.is-live .cs-jn-hint { display: flex; }
.cs-jn.is-live[data-jn-state="after"] .cs-jn-hint { opacity: 0; pointer-events: none; }
.cs-jn-hint-icon { width: 18px; height: 18px; flex: none; }
@media (prefers-reduced-motion: no-preference) {
.cs-jn-hint-icon { animation: cs-hint-nudge 1.2s ease-in-out infinite; }
}
/* Holds at 0-8% and 92-100% (so the loop meets itself with no seam), eases out
to +8px by 46%, holds at the peak to 54%, eases back by 92% -- a ~1.2s round
trip with a brief dwell at each end, matching the reference's timing rather
than a plain linear back-and-forth.
8px is not the reference's own pixel figure -- that recording was captured
at an unknown zoom, so the PROPORTION was kept (the swing measured about a
third of one chevron's own width) and the result rounded to the nearest
number on the page's 4px grid. */
@keyframes cs-hint-nudge {
0%, 8% { transform: translateX(0); }
46%, 54% { transform: translateX(8px); }
92%, 100% { transform: translateX(0); }
}
/* --- reduced motion ----------------------------------------------------- */
/* The switch still has to happen — it is the whole control — so this takes out
the travel, not the change: positions jump and only opacity is timed. */
@media (prefers-reduced-motion: reduce) {
.cs-jn { --jn-dur: 0.01s; --jn-dur-colour: 0.18s; }
.cs-jn.is-live .cs-jn-steps > li,
.cs-jn.is-live .cs-jn-stages > li,
.cs-jn.is-live .cs-jn-canvas,
.cs-jn-toggle::after { transition-duration: 0.01s; }
.cs-jn.is-live .cs-jn-label,
.cs-jn.is-live .cs-jn-stages > li { transition: opacity 0.18s linear; }
}
/* The two flow maps break the margin and run to the page edge.
Copied from how the Collectibles study handles its own system diagrams: it
renders them 2,590 and 2,787px wide inside a 1,440px viewport, deliberately
larger than the column, so a map of a sprawling flow reads as sprawling
rather than as a tidy figure in a text column. Boxed at reading width, a
twelve-step mess just looks small and orderly, which is the opposite of
what this section is arguing.
The label stays inset so the section still hangs off the same left edge as
every other one.
No border-radius is cancelled here, because none is applied: .cs-ph scopes
its corner to :not(.cs-ph--bleed). Writing `border-radius: 0` would be a
literal, which this project does not allow anywhere — an element that should
not be rounded gets no declaration at all. */
.cs-ph--bleed {
margin-left: calc(-1 * var(--cs-margin));
margin-right: calc(-1 * var(--cs-margin));
border-left: 0;
border-right: 0;
}
/* ═══ §11 — Three splash approaches ═════════════════════════════════════
Side by side, each with its verdict beneath. The shipped one is marked by
a full-strength border and a small check — no badge, no colour fill. */
.cs-approaches {
display: grid;
gap: 24px;
}
.cs-approach {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
border: 1px solid transparent;
border-radius: var(--radius);
}
.cs-approach-num {
font-family: var(--font-ui);
font-size: var(--text-label);
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cs-label);
display: flex;
align-items: center;
gap: 8px;
}
.cs-approach-note {
font-family: var(--font-ui);
font-size: var(--text-ui);
line-height: 1.5;
color: var(--color-dark);
margin: 0;
}
/* Shipped. The border does the work; the check is a whisper, not a rosette. */
.cs-approach.is-shipped {
border-color: var(--color-dark);
}
.cs-approach.is-shipped .cs-approach-num {
color: var(--color-dark);
}
.cs-approach-check {
display: none;
flex: none;
}
.cs-approach.is-shipped .cs-approach-check { display: block; }
@media (min-width: 641px) {
.cs-approaches { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cs-approach { padding: 20px; }
}
@media (min-width: 1025px) {
.cs-approaches { gap: 24px; max-width: 1040px; }
}
.cs-ba-shot {
display: flex;
flex-direction: column;
gap: 8px;
}
.cs-ba-shot-label {
font-family: var(--font-ui);
font-size: var(--text-label);
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cs-label);
}
/* ═══ §13 — Iterations: the strategy spectrum ═══════════════════════════════
Six explorations of one screen laid along the axis they actually differ
on — how much of the decision the screen keeps for itself. Left to right is
that spectrum, NOT chronology, which is why iteration 1 sits on the right
next to 5 and 6.
Everything here is borrowed rather than invented, on instruction:
screen size --pro-card-w x --cs-screen-step, the "after" screen's own
width, so these read as the same object as every other
screen on the page
gap --pro-stage-gap, the same air that sits between a before
and an after pair
hover --cs-screen-hover, the same 1.08 lift
the rail full viewport bleed with the gutter padded back, the
construction .cs-jn-viewport uses, so a scrolled screen
crops against the screen rather than against the column
the tabs §7's research tabs, but as a readout: the rail selects
them, they do not gate the rail
the field the shared dot pattern in style.css
The annotations follow the pointer. That needs JS, and it is the only part
here that does — see case-study-spectrum.js. Without it the bubbles simply
sit under their screens, which is the no-JS state and is readable. */
.cs-spec {
--spec-shot-w: calc(var(--pro-card-w) * var(--cs-screen-step));
/* The before/after pair's own gap plus 32, on instruction. Still written
off --pro-stage-gap rather than as a flat 88px: the relationship to that
pair is the point, and --pro-stage-gap steps down to 32px below 1025,
which a literal would not follow. */
--spec-gap: calc(var(--pro-stage-gap) + 32px);
/* How far a hovered screen grows past its own box. Derived, not typed: it
is exactly half the height the 1.08 lift adds, which is the shot's width
times its 9/19.5 ratio times (hover - 1), halved because the transform
grows from the centre. Every term is a token, so retuning --cs-screen-hover
or --pro-card-w re-sizes the room the rail leaves for it automatically —
a literal here would be correct at one breakpoint and wrong at the next,
since --pro-card-w is a clamp(). */
--spec-lift: calc(var(--spec-shot-w) * (19.5 / 9)
* (var(--cs-screen-hover) - 1) / 2);
display: flex;
flex-direction: column;
/* The same token that sets every other block gap in this section, so the
air under the tab row matches the air above it exactly rather than
being a smaller number that happened to look fine on its own. Measured
before: 40px above the tabs, 24 below. */
gap: var(--cs-blk-gap);
}
/* ── The dark ground ──────────────────────────────────────────────────────
Same near-black as §5 and §21, and set the same way .cs-impact sets it:
scoped here, overriding .cs-band--dark's own --cs-band-bg rather than
editing that class, which is a generic flip meant for reuse and should not
inherit one section's specific colour. Everything else -- --cs-fg,
--cs-label, --cs-label-strong, --cs-rule -- stays .cs-band--dark's own.
min-height, and it is load-bearing rather than cosmetic. This section
carries data-ground, so the page crossfades to its colour while it holds
the middle of the viewport -- and that device only stays off the cream
sections either side if the section already fills the screen by the time
the fade starts. .cs-ground states the same requirement as a rule; this
section is taller than 100svh at every width the page supports, so the
declaration guarantees an invariant rather than changing any layout. */
#screen-iterations {
--cs-band-bg: var(--color-charcoal);
min-height: 100svh;
}
/* --- head: the tabs ------------------------------------------------------ */
/* No pole labels above the row and no gloss line under each name — both went
on instruction. The axis is named in the subhead now ("a scale ranging from
user control to system intelligence"), which is the one place it needs to
be said; repeating it as a rule with a word at each end, plus a third line
restating each tab in plainer words, was three copies of one idea sitting
on top of the screens that demonstrate it. */
.cs-spec-tabs {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
/* Now literally §7's tab: same flex row, same padding, same type. With the
gloss line gone there is nothing left that differs, so this is a copy of
.cs-tab's declarations rather than a variation on them — kept as its own
selector only because the two are wired to different scripts. */
.cs-spec-tab {
appearance: none;
background: none;
border: 0;
border-bottom: 1px solid var(--cs-rule);
font: inherit;
text-align: left;
cursor: pointer;
display: flex;
align-items: baseline;
gap: 16px;
padding: 20px 0;
min-height: 44px;
transition: color 0.25s ease, border-color 0.25s ease;
}
.cs-spec-tab-num {
font-family: var(--font-ui);
font-size: var(--text-label);
letter-spacing: 0.08em;
color: var(--cs-label);
}
.cs-spec-tab-name {
font-family: var(--font-display);
font-weight: 500;
font-size: calc(var(--text-body) - 4px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--cs-label);
}
.cs-spec-tab:hover .cs-spec-tab-name { color: var(--cs-fg); }
.cs-spec-tab[aria-selected="true"] { border-bottom-color: var(--cs-fg); }
.cs-spec-tab[aria-selected="true"] .cs-spec-tab-num,
.cs-spec-tab[aria-selected="true"] .cs-spec-tab-name { color: var(--cs-fg); }
.cs-spec-tab:focus-visible {
outline: 2px solid var(--cs-fg);
outline-offset: 2px;
}
/* 32px and the same breakpoint as .cs-tablist, not 24 — the two rows sit six
sections apart on one page and any difference in their column gap reads as
a mistake rather than as a distinction. */
@media (min-width: 768px) {
.cs-spec-tabs { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
/* --- the field and the rail ---------------------------------------------- */
/* Used to hold a dot field still (position: relative) while the screens
travelled across it, as a sibling of the scroller rather than a child --
that dot field is gone on instruction, and nothing else in this section is
absolutely positioned against this box, so the positioning context went
with it. What is left, and load-bearing: 24px of vertical air around the
rail, matching the field's own name from when it did more. */
.cs-spec-field {
padding-block: 24px;
}
/* The "Scroll >>" cue that used to sit here is gone on instruction. The zone
dimming below is a better affordance anyway: a row where part of the
content is deliberately held back reads as having more to it than the
column shows, without a label saying so. */
/* The rail. Full bleed to the VIEWPORT both ways, then the column's gutter
padded back in — .cs-jn-viewport's construction, for .cs-jn-viewport's
reason: a scrolled screen should crop against the screen edge, not against
the column.
It used to bleed by --cs-margin alone, and that is what was cropping the
screens. Past 950px the column stops growing and the real gutter is
whatever is left over, which is wider than --cs-margin — so the rail's box
ended short of the viewport on both sides and cut the travelling screens
off inside the page rather than at its edge. max() of the two rebuilds the
true gutter at every width, exactly as --jn-gutter does; it cannot be a
percentage, because inside a full-bleed box a percentage resolves against
100vw rather than against the column.
50% is half this box (the column), 50vw half the viewport, so their
difference is precisely one gutter. already has overflow-x hidden,
which covers the scrollbar being counted in 50vw. */
.cs-spec-rail {
--spec-gutter: max(var(--cs-margin),
calc((100vw - var(--cs-content-max)) / 2));
position: relative;
z-index: 1;
display: flex;
gap: var(--spec-gap);
margin-inline: calc(50% - 50vw);
padding-inline: var(--spec-gutter);
list-style: none;
overflow-x: auto;
scrollbar-width: none;
overscroll-behavior-x: contain;
/* Room for the hover lift to render: a scroller computes overflow-y to auto
and clips, so a screen growing 8% inside one is shaved top and bottom.
Padding buys the space; the negative margin gives it back to the layout.
Same technique, same reason, as .tm-viewport.
This was a flat 16px, and 16px was not enough — the lift alone is ~22px
at 1440 and the shadow wants ~22 more below it, so both the screen's own
edges and its shadow were being cut off by the scroller. It is derived
now: --spec-lift (see .cs-spec) plus 24px, which is what the deepest of
--cs-screen-shadow's three layers reaches once it has been scaled with
the screen.
Neither figure lands on the 4px grid at every breakpoint, and that is
correct here: this padding is cancelled to the pixel by the margin below
it, contributes nothing to layout, and is an overflow allowance measured
off another token rather than a designed piece of spacing. */
padding-block: calc(var(--spec-lift) + 24px);
margin-block: calc(-1 * (var(--spec-lift) + 24px));
}
.cs-spec-rail::-webkit-scrollbar { display: none; }
.cs-spec-step {
position: relative;
flex: 0 0 var(--spec-shot-w);
}
.cs-spec-hit {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
padding: 0;
border: 0;
background: none;
text-align: left;
cursor: pointer;
font: inherit;
color: inherit;
}
.cs-spec-hit:focus-visible {
outline: 2px solid var(--cs-fg);
outline-offset: 4px;
}
/* object-position: top, deliberately. The six captures come in four native
ratios and the thing being compared across them is the FRAMING — the
headline and the first card. Cropping from the bottom keeps every one of
those in the same place; centring would slide each headline to a different
height and make the row impossible to read across. */
.cs-spec-shot {
display: block;
width: 100%;
aspect-ratio: 9 / 19.5;
object-fit: cover;
object-position: top;
border-radius: var(--cs-card-radius);
box-shadow: var(--cs-screen-shadow);
}
/* "Iteration 1", "Iteration 2"… are gone on instruction. They were the one
label on the row that carried no information: the reader can count, and the
order they are counting is the spectrum, not the chronology, so a number
under each screen was actively arguing the wrong reading. The alt text
still names each iteration, so nothing was lost for a screen reader.
One label survives, because it says something the row cannot: which of the
six actually shipped. Marked by a word in spacefire rather than a badge —
the page has no filled surfaces. */
.cs-spec-ship {
font-family: var(--font-ui);
font-size: var(--text-label);
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
color: var(--hook-highlight);
}
/* Pointer devices only, and on the image rather than the step: the step is
what the annotation is positioned against, and a transform on it would move
the thing the bubble is measuring. Same split, same reason, as §3's. */
@media (hover: hover) {
.cs-spec-shot { transition: transform 0.3s ease; }
.cs-spec-hit:hover .cs-spec-shot { transform: scale(var(--cs-screen-hover)); }
.cs-spec-step:hover { z-index: 2; }
}
@media (prefers-reduced-motion: reduce) {
.cs-spec-shot { transition: none; }
.cs-spec-hit:hover .cs-spec-shot { transform: none; }
}
/* ── Which screens belong to the strategy the tabs are naming ─────────────
The screens outside the selected zone are held back, so the group the tab
row is reporting reads as a group. case-study-spectrum.js puts .is-aside
on them; see the note there for why the decision is made in JS.
0.34, and it is a judgement about what this section is for. Enough that
the boundary between two zones is unmistakable mid-scroll, and not so
little that a held-back screen stops being a screen — the argument here is
six explorations, and a reader skimming the row should still see six.
Which is also why hover overrides it. The dimming is a reading aid, not a
gate: any screen comes back to full strength under the pointer, whichever
zone it belongs to, so nothing is ever actually withheld. That rule has to
sit after this one to win, since both are one class deep.
Gated on .is-live for the usual reason — with no JS nothing ever adds
.is-aside, so every screen simply stays at full strength. */
.cs-spec.is-live .cs-spec-step {
transition: opacity 0.35s ease;
}
.cs-spec.is-live .cs-spec-step.is-aside { opacity: 0.34; }
@media (hover: hover) {
.cs-spec.is-live .cs-spec-step.is-aside:hover,
.cs-spec.is-live .cs-spec-step.is-aside:focus-within { opacity: 1; }
}
/* Keyboard has no hover to lean on, so focus restores it on every device. */
.cs-spec.is-live .cs-spec-step.is-aside:focus-within { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.cs-spec.is-live .cs-spec-step { transition: none; }
}
/* --- the annotations ----------------------------------------------------- */
/* Default — and the whole no-JS state: the note sits under its screen and is
simply there. case-study-spectrum.js takes over from here and makes it
follow the pointer; if it never runs, this is what a reader gets. */
.cs-spec-note {
--cs-bubble-measure: 20em;
max-width: 100%;
}
/* With the script running, the bubble leaves the flow and is positioned in
viewport coordinates against the real cursor. position: fixed, not
absolute, so it escapes the rail's overflow clipping entirely rather than
needing room padded into the scroller for it. */
.cs-spec.is-live .cs-spec-note {
position: fixed;
left: 0;
top: 0;
z-index: 40;
margin: 0;
width: max-content;
max-width: min(22em, 70vw);
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}
.cs-spec.is-live .cs-spec-note.is-open { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.cs-spec.is-live .cs-spec-note { transition: none; }
}
/* The aside. Tinted, indented, on a heavy left rule — three signals so it
cannot be mistaken for the next paragraph of the main argument. */
.cs-aside {
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px;
border-left: 4px solid var(--color-dark);
border-radius: var(--radius);
background: var(--cs-tint);
max-width: 44em;
}
/* ═══ §15 — If I were doing this today ══════════════════════════════════
Four stages, each an icon, a stage name and the tool. No screenshots. */
.cs-tools {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 1040px;
}
/* The slot the confirmed tool names go in. Unused until then: the markup
carries a .cs-todo chip instead, because the script flags these as needing
Shriya's sign-off before they can be defended in an interview. Swap the
chip's class to this one when the names land. */
.cs-tool-name {
font-family: var(--font-ui);
font-size: var(--text-label);
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cs-label);
}
/* ─── Closing beat ────────────────────────────────────────────────────────
§17 currently ends on an unresolved TODO, which is a cold last impression
for someone who just read seventeen sections. A short sign-off and a way
onward costs two lines and ends the page like a person wrote it. */
.cs-outro {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding-top: 40px;
}
/* ── Next project ──
The primary exit. Someone who read to the bottom is warm; handing them the
next piece of work is worth more than handing them the index. Built as a
card rather than a link so it has the visual weight of an offer, with the
back-to-work link demoted to text beneath it.
The whole card is the target — no nested link — so there is one hit area
and one tab stop. */
.cs-next {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
padding: 24px;
border: 1px solid var(--cs-rule);
border-radius: var(--radius);
background: var(--color-white);
text-decoration: none;
transition: border-color 0.25s ease, transform 0.25s ease;
}
.cs-next:hover {
border-color: var(--color-dark);
transform: translateX(4px);
}
.cs-next-text {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.cs-next-label {
font-family: var(--font-ui);
font-size: var(--text-label);
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cs-label);
}
.cs-next-title {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-lead);
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--color-dark);
margin: 0;
}
.cs-next-arrow {
flex: none;
color: var(--color-dark);
transition: transform 0.25s ease;
}
.cs-next:hover .cs-next-arrow { transform: translateX(4px); }
/* Secondary exit — plain text, deliberately quieter than the card. */
.cs-outro-back {
/* 44px touch box, paid in padding so the underline stays on the text. */
display: inline-flex;
align-items: center;
min-height: 44px;
font-family: var(--font-ui);
font-size: var(--text-meta);
color: var(--cs-label);
text-decoration: underline;
text-underline-offset: 4px;
transition: color 0.25s ease;
}
.cs-outro-back:hover { color: var(--color-dark); }
@media (min-width: 641px) {
.cs-next { padding: 32px; }
}
@media (prefers-reduced-motion: reduce) {
.cs-next, .cs-next-arrow { transition: border-color 0.25s ease; }
.cs-next:hover { transform: none; }
.cs-next:hover .cs-next-arrow { transform: none; }
}
.cs-outro-line {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--text-body);
line-height: 1.333;
letter-spacing: -0.01em;
color: var(--color-dark);
margin: 0;
}
/* Same recipe as .cs-back so the two exits read as one control, not two. */
.cs-outro-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border: 1px solid var(--cs-rule);
border-radius: var(--radius);
font-family: var(--font-ui);
font-size: var(--text-label);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-dark);
text-decoration: none;
transition: border-color 0.25s ease, opacity 0.25s ease;
}
/* ─── Entrance ────────────────────────────────────────────────────────────
Motion on this page is GSAP's, in case-study-motion.js. It used to be a
hand-written CSS copy of WORD_REVEAL; that copy is gone, along with the
sync hazard of maintaining the same numbers in two places.
Almost nothing is needed here as a result: gsap.from() writes its own start
state inline the moment the tween is built, so there is no hidden state for
the stylesheet to own — and therefore no way for a failed script to strand
the page, which is the property that mattered.
The one thing CSS must supply is the box the transform acts on. A bare
around a word is inline, and translateY does nothing to an inline
box. */
.cs-word {
display: inline-block;
/* Words are transformed individually and repeatedly; promoting them keeps
the paint off the main thread on the long headings. */
will-change: transform;
}
/* Reduced motion never reaches the script — it returns before body.cs-motion
is added and before any tween exists. This is belt and braces for anything
that sets a transform some other way. */
@media (prefers-reduced-motion: reduce) {
.cs-word { transform: none !important; opacity: 1 !important; }
.cs-progress { transition: none; }
}
/* ─── Open copy ───────────────────────────────────────────────────────────
Two lines in the script are still unresolved (§15 tool names, §17's "what
I'd do differently"). Marked rather than invented, and visible so they
cannot ship by accident. */
.cs-todo {
display: inline-block;
/* Shrink to the text. Without this it stretches to the column width in the
flex-column parents it sits in (.cs-tool). */
align-self: flex-start;
padding: 4px 8px;
border: 1px dashed var(--cs-dash);
border-radius: var(--radius);
font-family: var(--font-ui);
font-size: var(--text-label);
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cs-label);
}
/* ═══ Impact — the promise and the payoff ══════════════════════════════════
§3 and §14 are the same three numbers, and they are deliberately built as
one component used twice with the hierarchy inverted.
§3 numbers loud (--text-section), sentence quiet. The promise.
§14 numbers quiet (--text-body), sentence loud. The payoff.
Sharing ground, table structure and left edge is what makes a reader
recognise the callback 13,000px later before they have read a word. The
inversion is what stops the second appearance from being a repeat: by then
the figures are established and the sentence about them is the new thing.
No borders anywhere in either. The dark ground is the only container — a
metric card is exactly what this page has too many of already. */
.cs-impact {
/* Overrides .cs-band--dark's own --cs-band-bg (var(--color-dark),
#1e1e20) with this section's own near-black, #2b2d33, on instruction.
Scoped here rather than edited on .cs-band--dark itself: that class is a
generic "dark ground" flip meant for reuse, and baking one section's
specific colour into it would make a future dark band inherit a colour
it never asked for. --cs-fg/--cs-label/etc. stay .cs-band--dark's own,
tuned for cream against a near-black ground -- and #2b2d33 is close
enough to #1e1e20 that nothing there needed re-measuring: cream at 72%
flattened over it is 7.24:1, still clear of the 4.5:1 floor the original
8.4:1 was tuned past. */
--cs-band-bg: var(--color-charcoal);
/* Taller than a normal band: this is a full stop in the argument, and the
air around the numbers is what makes them read as a result rather than
as a row of statistics. */
padding-block: calc(var(--cs-sec-gap) + 40px);
/* Positioning context for the dot field, and its own stacking context so
the field's z-index: -1 stays local -- it has to sit above this band's
own background but below its copy, and nothing outside should be able
to land between the two. */
position: relative;
isolation: isolate;
overflow: hidden;
}
/* The same field the landing page and §5 carry, inverted for a dark ground.
Inset by --cs-margin rather than run to the bleed, which is what every
other field on the site does -- it is a margin-to-margin panel, not an
edge-to-edge texture. Cream at 0.10 rather than the shared 0.32: that
figure is tuned for dark dots on a light ground, and cream on near-black
at the same value reads as static rather than texture. */
.cs-impact-dots {
position: absolute;
top: 0;
bottom: 0;
left: var(--cs-margin);
right: var(--cs-margin);
z-index: -1;
--dot-ink: var(--color-cream);
--dot-opacity: 0.10;
}
/* §3 holds most of a viewport, so arriving at it is a change of chapter
rather than another section. svh rather than vh: on iOS vh is the
address-bar-collapsed height, which overshoots on first paint and leaves
the band taller than the screen it is meant to fill.
Centred rather than top-aligned, because with this much air a top-aligned
block leaves a pool of dead ground beneath it. min-height, not height, so
the band still grows if the copy ever does. */
@media (min-width: 641px) {
.cs-impact {
min-height: 88svh;
justify-content: center;
}
}
/* A ledger, not a dashboard. Three entries, each a full-width row: the
figure on the left at display scale, its reading on the right, a hairline
above every row and one closing the set. That structure is what lets the
figures get this big -- across in three columns they were bounded by a
third of the column (~84px), stacked down the left they left half the
width empty. A row spends the whole width on one figure and its reading,
so the number can run to ~150px and the right side is occupied by
something that belongs there.
The three stay equal to each other: same size, same weight, same shape.
Equal hierarchy was the instruction and it still holds -- what changed is
how much room all three get, not their relationship. */
.cs-results {
display: flex;
flex-direction: column;
}
.cs-result {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: 20px;
padding-block: 40px;
}
@media (min-width: 768px) {
.cs-result {
/* 3:2 rather than a fixed label column: at 768 a fixed 320px label would
leave the figure less room than "$2.4M" needs. Fractions hold the
proportion at every width instead. */
grid-template-columns: 3fr 2fr;
gap: 40px;
/* end first, as the fallback: anything that does not understand "last
baseline" keeps bottom-aligned boxes rather than dropping to stretch,
which would pull the reading to full row height. */
align-items: end;
/* LAST baseline, not first: the readings run to two lines, and it is the
line they end on that should sit on the figure's baseline. Bottom-
aligning the boxes (align-items: end) left the reading's baseline
~18px high of the figure's, because the figure's box carries ~26px of
descent below its baseline at this size and the reading's carries ~8px. */
align-items: last baseline;
padding-block: 56px;
}
}
/* Between the rows only -- nothing above the first or below the last, so the
three are separated without being boxed in.
Pseudo-elements rather than borders because they are drawn on arrival and
a border cannot be scaled. --cs-rule-scale is what the motion layer
animates; with no motion layer it is absent and the fallback paints them
full width, which is the static page. */
.cs-result + .cs-result::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: var(--cs-rule);
transform: scaleX(var(--cs-rule-scale, 1));
transform-origin: left center;
}
.cs-result-num {
font-family: var(--font-display);
font-weight: 700;
/* Scoped deliberately rather than reaching for --text-section, which tops
out at 108px and is shared with the work-section titles: this figure
wants to be the largest type in the case study and nothing else should
move with it. The -4px is taken off all three stops rather than just the
preferred one, so the reduction holds at the floor and the ceiling too
and the curve keeps its shape: 60px / 9vw-4px / 148px, landing ~126px at
1440. "$2.4M", the longest figure, sets ~477px there against a 546px
column. */
font-size: clamp(3.75rem, calc(9vw - 4px), 9.25rem);
line-height: 1;
letter-spacing: -0.03em;
color: var(--cs-fg);
}
/* Up from --text-ui. Against a 130px figure the old 16px read as a caption
that had wandered in; --text-lead (15-30px) is a reading, which is what
it is. */
.cs-result-label {
font-family: var(--font-ui);
font-size: var(--text-lead);
line-height: 1.4;
color: var(--cs-label);
max-width: 22em;
}
/* ── The odometer ─────────────────────────────────────────────────────────
Each figure rolls its digits into place on arrival. Symbols hold still --
$ . % K M never move -- so the value spins and the unit stays put, which
is the distinction that keeps it from reading as decoration.
Clash Display's figures are PROPORTIONAL and the face ships no tabular
set: "1" measures 0.399em against "0" at 0.725em, and font-variant-
numeric: tabular-nums is a no-op in it (measured: identical 0.326em spread
either way). A reel of equal-width cells would therefore either clip the
wide digits or hang slack around every 1. So each cell is sized to the
digit it will LAND on, and the digits passing through are scaled into that
width -- a squeeze nobody can read at 60ms a digit, and the landing frame
is the exact width the plain text was.
Widths are set in em, so the whole reel survives a resize even though the
figure's size is fluid. */
.cs-odo {
display: inline-flex;
align-items: flex-start;
}
.cs-odo-cell {
display: block;
height: 1em;
overflow: hidden;
}
/* display: block is load-bearing, not tidiness -- a is inline by
default and transforms do not apply to non-replaced inline elements, so
the reel silently refused to move while GSAP reported the right value. */
.cs-odo-strip {
display: block;
will-change: transform;
}
.cs-odo-strip > span {
display: block;
height: 1em;
line-height: 1;
text-align: center;
}
/* The real figure, for anything that reads the page rather than looks at it:
the reel itself is aria-hidden, since its text is 0123456789 over and
over. */
.cs-odo-sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* Only under the motion layer, and only until the reel is built and its
first frame set -- see the safety note at the top of case-study-motion.js.
Without that class this never applies and the figures are simply there. */
body.cs-motion .cs-result-num {
opacity: 0;
}
/* The promise line under §3's numbers. */
.cs-impact-promise {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--text-body);
line-height: 1.4;
letter-spacing: -0.01em;
color: var(--cs-fg);
max-width: 28em;
margin: 0;
}
/* ── §14, inverted ────────────────────────────────────────────────────────
The receipt: same table, dropped to body scale and to the label colour, so
it reads as a reference the reader already holds rather than as news. */
.cs-results--receipt .cs-result-num {
font-size: var(--text-body);
color: var(--cs-label);
}
.cs-results--receipt .cs-result-label {
font-size: var(--text-meta);
}
@media (min-width: 641px) {
.cs-results--receipt .cs-result-num { min-width: 12ch; }
}
.cs-impact--full { gap: 40px; }
.cs-reframe-sub {
font-family: var(--font-ui);
font-size: var(--text-lead);
line-height: 1.5;
color: var(--cs-label);
max-width: 32em;
margin: 0;
}
/* ═══ §8 — three problems, one root cause ══════════════════════════════════
The section is the page's keystone and the old layout contradicted it:
three equal bordered cards assert three separate problems with three
separate fixes, which is the opposite of what the copy claims.
A brace makes the claim visually. Three problems on the left, one brace,
the cause on the right — the reader sees the reduction before reading it.
Borderless throughout. The three problems are separated by 1px rules, not
boxed; on a page measured at 63% bordered rectangle, another three cards
here would be three too many. */
.cs-root {
display: grid;
/* Mobile: problems, then a horizontal brace, then the cause. The brace turns
a quarter turn rather than becoming a different mark. */
grid-template-columns: 1fr;
gap: 24px;
align-items: center;
}
.cs-root-problems {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.cs-root-problem {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 16px;
row-gap: 4px;
padding-block: 20px;
border-top: 1px solid var(--cs-rule);
}
.cs-root-problem:last-child { border-bottom: 1px solid var(--cs-rule); }
.cs-root-num {
grid-row: 1 / span 2;
font-family: var(--font-ui);
font-size: var(--text-label);
letter-spacing: 0.08em;
color: var(--cs-label);
padding-top: 4px;
}
.cs-root-name {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-body);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--cs-fg);
margin: 0;
}
.cs-root-detail {
font-family: var(--font-ui);
font-size: var(--text-ui);
line-height: 1.45;
color: var(--cs-label);
margin: 0;
max-width: 26em;
}
/* The brace. Two paths, one per orientation — see the markup note for why a
rotated single element does not work here. */
.cs-root-brace {
color: var(--cs-rule);
justify-self: center;
}
.cs-root-brace--h {
display: block;
width: 100%;
height: 32px;
}
.cs-root-brace--v { display: none; }
.cs-root-cause-key,
.cs-principles-key {
display: block;
font-family: var(--font-ui);
font-size: var(--text-label);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cs-label);
margin-bottom: 12px;
}
/* The finding. The largest type in the section, because it is the thing the
whole case study turns on and the page did not previously contain it. */
.cs-root-cause-line {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--cs-h2);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--cs-fg);
max-width: 12em;
margin: 0 0 16px;
}
.cs-root-cause-sub {
font-family: var(--font-ui);
font-size: var(--text-ui);
line-height: 1.5;
color: var(--cs-label);
max-width: 30em;
margin: 0;
}
/* The principles answer the root cause, not the individual problems, so they
sit below the whole bracket under their own rule rather than nested inside
each problem where they used to imply a one-to-one mapping. */
.cs-principles {
border-top: 1px solid var(--cs-rule);
padding-top: 24px;
}
.cs-principles-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.cs-principles-list li {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-body);
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--cs-fg);
}
@media (min-width: 768px) {
.cs-root {
/* problems | brace | cause */
grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
gap: 40px;
}
.cs-root-brace--h { display: none; }
.cs-root-brace--v {
display: block;
width: 48px;
/* Stretch to the full height of the tallest cell, which is the problem
list, so the brace always spans exactly the three it is bracketing. */
align-self: stretch;
height: auto;
}
.cs-principles-list {
flex-direction: row;
gap: 56px;
}
}
/* ═══ §9 — the deep dive ═══════════════════════════════════════════════════
Four workstreams that are four genuinely different kinds of object, and
which used to be rendered as four identical card grids. Each now gets the
shape its content actually has. Nothing in this section is a card. */
/* ── The funnel strip ──────────────────────────────────────────────────────
Not a chart, on purpose — the per-step numbers do not exist, and a drawn
curve would be invented data. See the note in the markup.
The steps read as a horizontal sequence that scrolls on narrow screens,
with one step carrying the section's only real figure. */
.cs-funnel {
list-style: none;
margin: 0;
padding: 0 0 8px;
display: flex;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
border-top: 1px solid var(--cs-rule);
}
.cs-funnel::-webkit-scrollbar { display: none; }
.cs-funnel-step {
flex: 1 0 auto;
min-width: 128px;
padding: 16px 16px 20px 0;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
}
/* A tick at the top of each step, on the section rule. The steps are a
sequence, and a tick is the least a sequence can be marked with. */
.cs-funnel-step::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 12px;
background: var(--cs-rule);
}
.cs-funnel-name {
font-family: var(--font-ui);
font-size: var(--text-ui);
line-height: 1.3;
color: var(--cs-label);
}
/* The one step with evidence behind it. Dark type and the figure beneath, so
the eye lands on the only place in the strip that carries a number. */
.cs-funnel-step.is-spike .cs-funnel-name {
color: var(--cs-fg);
font-weight: 700;
}
.cs-funnel-step.is-spike::before {
height: 24px;
background: var(--cs-fg);
}
.cs-funnel-figure {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-ui);
letter-spacing: -0.01em;
color: var(--cs-fg);
}
/* ── Context spectrum ──────────────────────────────────────────────────────
Five rules, poles labelled at each end. Five lines instead of five boxes,
and it reads in about three seconds. */
.cs-spectrum {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 32px;
}
.cs-spectrum-row {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.cs-spectrum-name {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-ui);
letter-spacing: -0.01em;
color: var(--cs-fg);
}
.cs-spectrum-pole {
font-family: var(--font-ui);
font-size: var(--text-label);
color: var(--cs-label);
}
.cs-spectrum-rule {
display: block;
height: 1px;
background: var(--cs-rule);
min-width: 40px;
}
@media (min-width: 641px) {
.cs-spectrum-row {
/* name | left pole | rule | right pole */
grid-template-columns: 14em auto minmax(56px, 1fr) auto;
align-items: center;
gap: 16px;
}
.cs-spectrum-pole--end { text-align: right; }
}
/* ── Benchmarking as an index ──────────────────────────────────────────────
Source left, lens right, a rule between rows. It is an index page and it
should look like one. The two groups are separated so the cross-industry
half stops being an eighth of a grid. */
.cs-index-group + .cs-index-group { margin-top: 40px; }
.cs-index-key {
display: block;
font-family: var(--font-ui);
font-size: var(--text-label);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cs-label);
margin-bottom: 12px;
}
.cs-index {
list-style: none;
margin: 0;
padding: 0;
}
.cs-index li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 8px 24px;
padding: 16px 0;
border-top: 1px solid var(--cs-rule);
}
.cs-index li:last-child { border-bottom: 1px solid var(--cs-rule); }
/* No "In category" label above the first group any more, so nothing needs a
rule under it -- every other row's border-top is what draws the line
between it and the row before, but NiyoX has no row before it now. */
.cs-bench-board .cs-index-group:first-child .cs-index li:first-child {
border-top: none;
}
.cs-index-name {
font-family: var(--font-display);
font-weight: 500;
/* Matched to .cs-tab-name's size, on instruction: the segmented control
above names the same three categories this list opens into, so the two
read as one scale rather than the list stepping up a size. */
font-size: calc(var(--text-body) - 4px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--cs-fg);
}
.cs-index-lens {
font-family: var(--font-ui);
font-size: var(--text-ui);
line-height: 1.4;
color: var(--cs-label);
text-align: right;
/* justify-content: space-between only spaces items apart when they share a
flex line. A long enough lens -- "Intent-based personalisation and
time-setting" is the current case -- pushes onto a second line alone,
and a lone item on a wrapped line has nothing to be spaced from -- it
packs to the start, undoing text-align: right. margin-left: auto claims
all the line's free space regardless of whether the lens is sharing a
line with its name or wrapped onto its own. */
margin-left: auto;
}
/* ── Benchmark previews ────────────────────────────────────────────────────
Hovering a row shows that source's screen beside it.
The no-overlap guarantee against the LIST is structural, not a tuned
offset: the board is a two-track grid, the list owns track 1, and the
preview is painted into track 2, which holds nothing else. There is no
width at which an image can reach a row's text, because the text is in the
other column.
The no-overlap guarantee against the TAB LABELS above and the next
section's heading below is not structural, and cannot be: every preview is
now the same width and its own natural height, on instruction, which means
Noom and Pediatric render at ~610 and ~560px tall (0.61 and 0.66 aspect)
against Monzo's ~185px (2.02 aspect) -- a 3.3x spread with no shared
ceiling to clamp it to any more, now that clamping is what caused the
width mismatch this change exists to fix. So each row carries its own
--bench-lift, measured from that row's own image height and its own
position in the corridor between the tab labels and the next section's
heading -- see the per-row values further down. A row added later needs
its own measured value the same way; there is no longer a formula that
derives one automatically.
The aspects above moved once already: the source JPEGs used to carry a
white matte with the card's shadow baked into it, and cropping that off
(so the CSS shadow is the only one) made every portrait shot taller at a
fixed width. Re-cropping an image means re-measuring its row's lift --
Noom's went 296 -> 340px that way, having grown 63px with only 33px of
slack under it.
Each still sits inside its own
, and the
is still the
positioning context -- so the preview still tracks its own row's Y, just
with a per-row distance now rather than one shared constant. */
.cs-bench-board {
--bench-shot: 380px;
position: relative;
}
.cs-index li { position: relative; }
.cs-bench-shot {
position: absolute;
/* 50% is the row's own middle; --bench-lift (set per-