:root{
/* #CC5500 is the brand orange, but it only reaches 4.04:1 on this paper, so
it is kept for graphic marks and the text accent steps one shade darker.
Same hue, passes AA at label sizes on both paper tones. */
--clay-mark:#CC5500; /* dots, rules, non-text marks */
--clay-400:#B84B00;
--clay-500:#A34400; /* 5.81:1 on sand-100, 5.40:1 on sand-200 */
--clay-600:#8F3A00;
--sage-500:#4F6558; --sage-wash:#E9EFEA;
/* The reference site runs a single system sans (Tailwind's default stack)
for everything, with weight doing the work. Same here: one family, no
webfont request at all. */
--sys:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
"Helvetica Neue",Arial,sans-serif;
--display:var(--sys);
--body:var(--sys);
/* One curve, three durations: the 150/200/300ms standard easing used
throughout ionutmaxim.com. */
--ease-out:cubic-bezier(.4,0,.2,1);
--ease-spring:cubic-bezier(.16,1.02,.3,1);
--t-fast:150ms; --t-mid:200ms; --t-slow:300ms;
/* One radius scale used everywhere, rather than a different value per
component. Softer than square, far short of a pill. */
--r-sm:8px; --r-md:12px; --r-lg:20px;
--margin-col:168px; /* the marginalia column */
--margin-gap:64px; /* gap between it and the text column */
/* The two halves that put a margin label, its dot, and the first line of the
heading beside it on one invisible row. --lead-centre is half a heading's
first line: h2 is line-height 1.1, so half of that is .55 of its own
clamped size. --label-half is half a label's line, 12px at 1.62. A
statement-led band leads with a slightly larger face and lands ~3px off,
which is under a rounding error at these sizes. */
--lead-centre:calc(.55 * clamp(1.72rem,3.5vw,2.5rem));
--label-half:calc(12px * 1.62 / 2);
}
/* ── The palette ────────────────────────────────────────────────────────────
Declared as a second :root so every value below arrives with the reasoning
that produced it, rather than as a bare hex in the block above. The ten it
replaces have been removed there, so each token is defined exactly once.
───────────────────────────────────────────────────────────────────────── */
:root{
/* ── Surfaces ──
Three states of one board, ageing. Fresh is the page, rested is a banded
section, dried is the other side of an argument. White stops being a page
and becomes a detail: fields, cards, hovered surfaces. */
--sand-50:#FFFFFF; /* was #FFFCFA — white as a detail, never the page */
--sand-100:#FAF3E3; /* was #FEF6F0 — paper, fresh cut. The page */
--sand-200:#F2E8D3; /* was #F9EDE4 — paper, rested. The tinted bands */
/* The reference names one rule colour, #E0D1B2. This layout uses three line
weights, so the two heavier ones continue the reference's own ramp in the
direction it was already going, about -10,-14,-20 per step. Derived, not
quoted. */
--sand-300:#E0D1B2; /* was #F0E1D5 — the rule. Every hairline */
--sand-400:#D6C39E; /* was #E2CDBC — field borders, the rail track */
--sand-500:#CCB58A; /* was #C9AE99 — the sieve dots, the mark's lead line */
/* ── The rail ──
Deliberately below the accent. The travelling call to action is an orange dot
on this line, and it was once the same colour as the fill behind it and the
beads beside it, so the one mark on the page that wants to be found was
competing with two dozen that do not. The accent is the button's alone.
Muted twice. The first pass took them off the accent and onto warm neutrals;
this one halves the saturation again and lightens with it, which is what muting
actually needs — desaturating alone walks a light warm colour toward mid-grey
and comes out darker, not quieter. Held back from full neutral on purpose: at
a few percent saturation these read cold against cream, and the rail should
look like a line drawn on this paper rather than on some other.
All three moved together so the rail stays one material. Ratios against
paper-fresh, and the order matters rather than the numbers: the button's dot
3.39, a passed bead 2.05, the fill 1.52, a bead still ahead 1.32, the track
1.11. A passed bead is 1.55 from one ahead of the fill, which is the smallest
step that still reads, and it has the scale and the halo besides. */
--rail-fill:#CEC7B5; /* 1.95 -> 1.52, saturation 32% -> 20% */
--rail-mark:#B3AC97; /* 2.55 -> 2.05, saturation 25% -> 16% */
--rail-ahead:#DDD5C4; /* was --sand-300 at 43% — a bead the fill has not reached */
/* ── Ink ──
Indigo rather than the warm near-black: cool against the wood, so the two
never muddy. Ratios are against paper-fresh, which is what it sits on. */
--ink:#171B34; /* was #160B02 — 15.28:1 */
--ink-2:#2C3050; /* was #4A3A2E — 11.54:1 */
--ink-3:#4E5372; /* was #6E5B4C — 6.77:1, and 5.37:1 on dried. The
reference's ink-muted. Its ink-faint #7E819B is
3.45:1 on fresh and 2.74:1 on dried, and this token
carries 12px labels, so faint is not available. */
/* ── Accent ──
Deliberately absent. The whole clay ramp stays exactly as it is, so the
orange you already have is the orange on the page and on the buttons.
Re-measured against the new papers, since it was calibrated against the old
one: clay-mark 3.90:1 (marks only, as before), clay-500 5.61 on fresh and
5.10 on rested, clay-600 6.85. All still fit for what they carry, and no
clay text lands on the dried paper. */
/* One exception, and only because the paper moved underneath it: the wash was
mixed for a pink-cream page and reads cool on wood. Same orange, 10% over
the new paper instead of the old. */
--clay-wash:#F5E3CC; /* was #FBEADE */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sand-100);color:var(--ink);font-family:var(--body);
font-size:18px;line-height:1.68;-webkit-font-smoothing:antialiased}
/* Their headline device: a light face with selected phrases at full weight.
The contrast inside the sentence does the emphasis, not colour. */
h1,h2,h3{margin:0;font-family:var(--display);font-weight:300;
letter-spacing:-0.02em;line-height:1.08}
h1 strong,h2 strong,h3 strong,.heavy{font-weight:640;letter-spacing:-0.024em}
p{margin:0 0 1.1em;max-width:60ch}
p:last-child{margin-bottom:0}
a{color:var(--clay-500)}
:focus-visible{outline:2.5px solid var(--clay-500);outline-offset:3px;border-radius:3px}
/* ── 1. Surface. Two stacked noise fields give the page the tooth of a
── pressed paper stock: a fine fibre grain, and a slower coarse mottle that
── stops the fine layer reading as digital dither. Both are inline SVG
── turbulence, so the whole texture costs zero requests. ── */
.surface{position:fixed;inset:0;z-index:0;pointer-events:none}
/* Coarse mottle: low frequency, few octaves, blurred. Reads as pulp. */
.surface::before{content:'';position:absolute;inset:0;opacity:.38;
mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,");
background-size:420px 420px}
/* Fine fibre: high frequency, tight. Reads as the tooth of the sheet. */
.surface::after{content:'';position:absolute;inset:0;opacity:.42;
mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,");
background-size:180px 180px}
/* Panels carry a touch more tooth than the page, so they read as a heavier
sheet laid on top rather than a flat colour swap. */
.tinted{position:relative}
.tinted::after{content:'';position:absolute;inset:0;pointer-events:none;
border-radius:inherit;opacity:.42;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,")}
@media (prefers-reduced-motion: no-preference){}
.doc{max-width:1140px;margin:0 auto;padding:0 26px}
/* ── 2. The rail. One annotation system: the marginalia sit to its left and
── double as the section markers, so nothing is labelled twice. ── */
.spine{display:none}
@media(min-width:1180px){
/* Doubled: 64px of air each side of the rail. Everything downstream (grid
gaps, dot offset, rail position) derives from this one number. */
:root{--margin-gap:128px}
/* left is set in JS from the real column edge: 50vw includes the scrollbar
but the centred container does not, so vw math drifts by half a scrollbar. */
/* Under the masthead (z-30). At rest the bar has no ground, so nothing is
hidden by that; once the bar docks and gains one, it clips the head of the
rule and the line reads as running out from beneath it. */
/* --spine-top is the measured masthead height, set in JS: hardcoding it would
leave a sliver or a gap the moment font metrics differ. Starting the rule at
the bar's lower edge also means the progress fill maps to the length the
reader can actually see. */
.spine{display:block;position:fixed;top:var(--spine-top,0px);bottom:0;width:1px;
z-index:20;pointer-events:none;left:-100px}
.spine .track{position:absolute;inset:0;background:var(--sand-400);opacity:.85}
/* The beads are drawn inside the rule, not as pseudo-elements of the margins.
They marked a section's place on the rail and were positioned from the
margin's own box, which put a 13px circle in one layer and a 1px rule in a
fixed one: the two agree exactly in CSS and round independently on screen, so
the bead read as sitting beside the line rather than on it, and whether it
drew above or below depended on a z-index race between two unrelated
subtrees. As a child of the rail there is nothing to align and nothing to
race: left:50% of a 1px parent is the rule's centre by construction, and a
later sibling of the track paints over it. JS gives them their y, taken from
the label whose row they belong to. */
.spine .bead{position:absolute;left:50%;top:-99px;width:13px;height:13px;
box-sizing:border-box;border-radius:50%;
transform:translate(-50%,-50%);
background:var(--sand-100);border:2px solid var(--sand-400);
/* Slow on purpose. The bead is reporting that the rule has reached it, and a
200ms flip made that read as a click rather than an arrival. */
transition:background 820ms var(--ease-out),
border-color 820ms var(--ease-out),
transform 560ms var(--ease-spring)}
.spine .bead[data-lit="true"]{background:var(--clay-mark);border-color:var(--clay-mark);
transform:translate(-50%,-50%) scale(1.2)}
/* scaleY rather than height: compositor-only, no layout on every scroll frame. */
.spine .fill{position:absolute;left:0;top:0;width:1px;height:100%;
background:var(--clay-mark);transform:scaleY(0);transform-origin:top;
transition:transform 90ms linear}
}
/* Marginalia: right-aligned against the rail, with a marker that is part of the
block itself, so it can never drift out of alignment with its own text. */
.margin{font-size:13px;line-height:1.62;color:var(--ink-3)}
@media(min-width:920px){
.margin{position:sticky;top:104px;align-self:start;text-align:right;
padding-right:2px;padding-top:calc(var(--lead-centre) - var(--label-half));
transition:color var(--t-mid) var(--ease-out)}
.margin em{border-top:1px solid var(--sand-400)}
}
@media(min-width:1180px){
/* Above the rail: the dot marks the rule, so the rule must not cross it. */
.margin{position:sticky;z-index:21}
}
.margin b{display:block;font-family:var(--body);font-size:11px;font-weight:500;
text-transform:uppercase;letter-spacing:2.4px;
color:var(--ink-3);margin-bottom:7px;transition:color var(--t-mid) var(--ease-out)}
.margin[data-on="true"] b{color:var(--clay-500)}
.margin em{display:block;font-style:normal;margin-top:14px;padding-top:13px;
border-top:1px solid var(--sand-400);color:var(--ink-3)}
/* The closing section's own button is the ending on every page and at every
width. The disc that used to cap the rail is gone: it was the rail's ending
before the travelling button existed, and once the ride superseded it on the
home page it survived on the others as a dot stuck to the line with nowhere to
have come from. */
/* ── The mark. An open ring, one point of focus at its centre, one line out
through the gap. The gap is the whole idea, so nothing may close it: no
background plate, no containing circle. Two tones, and it holds at 16px. ── */
.mark{display:block;width:26px;height:26px;flex:none}
.mark__ring{fill:none;stroke:var(--ink);stroke-width:3.1;stroke-linecap:round;
transition:stroke var(--t-slow) var(--ease-out)}
.mark__lead{fill:none;stroke:var(--sand-500);stroke-width:2.2;stroke-linecap:round;
transition:stroke var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.mark__core{fill:var(--clay-mark)}
/* The lead extends on hover: the flow moves, the focus does not. */
/* Hovering the mark turns its opening from the right round to the bottom, and the
line it points down carries a pulse away with it. The gap is the whole idea of
this mark, so moving it is the one gesture available that says something rather
than just lighting up.
transform-box:view-box, not the default border-box: on an SVG element the origin
is otherwise measured from the element's own bounding box, and the ring's box is
not the mark's centre. This is the same trap that put the intro's core 7 units
off centre. */
.mark__ring,.mark__lead{transform-box:view-box;transform-origin:16px 16px;
transition:transform 620ms var(--ease-spring)}
a:hover .mark__ring{transform:rotate(90deg)}
/* The lead turns with the gap, and its nudge goes with it: translateX after the
rotation runs along the new direction, so it reaches further down rather than
further right. */
a:hover .mark__lead{stroke:var(--clay-400);transform:rotate(90deg) translateX(1.5px)}
/* The pulse. A short comet of the mark's own clay, travelling the length of the
rule once per hover, brightest at its leading edge so it reads as sent rather
than as a band sliding past.
It starts at the logo, which is where the rule starts, so it needs clipping at
that end: the clip is a 1px box the length of the rail, and the pulse begins its
run entirely inside it and above the cut. Without it the comet's tail hangs over
the mark before the run begins, and the line appears to carry on above the logo,
which is the one thing the rail must never look like. The clip is 1px wide and
the pulse is 1px wide, so nothing is lost sideways, and the beads stay outside
it because they are 13px and would be sliced. */
.spine .pulseclip{position:absolute;inset:0;width:1px;overflow:hidden;
pointer-events:none}
.spine .pulse{position:absolute;left:0;top:0;width:1px;height:96px;
background:linear-gradient(180deg,transparent 0%,var(--clay-mark) 100%);
opacity:0;pointer-events:none}
.spine[data-pulse="true"] .pulse{animation:railpulse 1150ms var(--ease-out) 1}
@keyframes railpulse{
0%{transform:translateY(-96px);opacity:1}
100%{transform:translateY(100vh);opacity:1}
}
@media (prefers-reduced-motion: reduce){
a:hover .mark__ring{transform:none}
a:hover .mark__lead{transform:none}
.spine[data-pulse="true"] .pulse{animation:none}
}
/* ── First-load animation ──
The stage is only ever built on a first visit, and only for a reader who has
not asked for less motion. Everything the animation brings in itself starts
hidden here, in CSS, so nothing is visible for a frame before the timeline
takes hold. The h1 needs no entry: .rise already masks it until data-ready. */
.intro{display:none}
html[data-intro="running"] .intro{display:grid;place-items:center;
position:fixed;inset:0;z-index:90;background:var(--sand-100)}
.intro__mark{width:min(46vw,232px);height:auto;overflow:visible}
html[data-intro="running"] .top .name,
html[data-intro="running"] .top nav,
html[data-intro="running"] .open .margin,
html[data-intro="running"] .open .deck,
html[data-intro="running"] .principle,
html[data-intro="running"] .hero-cta,
html[data-intro="running"] .act-note,
html[data-intro="running"] .stats,
html[data-intro="running"] .spine{opacity:0}
/* ── Masthead ──
No ground of its own: it sits on the page like the first band, and so it does
not travel. A transparent bar that follows the reader is a bar the page
scrolls straight through, so dropping the background means dropping the
sticky with it, along with the hairline that only existed to separate the two.
Still position:relative rather than static, because the mobile menu is
absolutely positioned against it, and it still needs a z-index: main carries
z-2, so without one the page paints over the header and the open menu panel
renders behind the hero. The row uses .doc, so the header's inner edges align
with every band by construction and it inherits the same responsive gutter
instead of repeating 26px and 1140px. */
.top{position:relative;z-index:30;padding-top:20px;padding-bottom:20px}
/* Docked: past the hero the bar leaves the flow and waits just above the
viewport, dropping in when the reader scrolls back up and lifting away when
they carry on down. It only ever docks while it is already off-screen, so the
switch out of flow is never seen.
Leaving the flow would otherwise pull the whole page up by the bar's height,
so main takes that height back as padding: the fixed bar contributes nothing
to layout, main's padding contributes exactly what it used to, and the
document height and every scroll offset stay where they were.
Docked it does need a ground. It is over the text now, not beside it: the page
colour rather than a new one, thin enough to read as the same paper and blurred
so the type crossing under it never competes with the type on it. Blur only,
no saturate: saturating would quietly re-tint a palette whose ratios were
measured. */
.top[data-dock="true"]{position:fixed;top:0;left:0;right:0;
background:color-mix(in srgb,var(--sand-100) 78%,transparent);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid var(--sand-300);
transform:translateY(-100%);
transition:transform 380ms var(--ease-out)}
.top[data-dock="true"][data-reveal="true"]{transform:none}
.top[data-dock="true"] ~ main{padding-top:var(--bar-h,0px)}
@media (prefers-reduced-motion: reduce){
.top[data-dock="true"]{transition:none}
}
/* The bar owns its height, the row owns its alignment. Vertical padding cannot
live on .top__row: .doc sets `padding:0 20px` further down the sheet, and the
shorthand would zero it. */
.top__row{display:flex;justify-content:space-between;align-items:center;gap:22px}
.top .name{display:flex;align-items:center;gap:10px;
font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-0.015em}
.top .name .mark{width:24px;height:24px}
/* Above the rail breakpoint the bar adopts the same three columns as every
band, so nothing here is positioned by eye: the logotype right-aligns where
every margin label ends, the mark centres in the gutter the rail runs down,
and the nav ends where the text column ends. The mark caps the rule from
inside an opaque bar, which is why it needs no plate behind it: this is the
page ground, not a hole cut in a band. */
@media(min-width:1180px){
/* Generous above, so the mark is not crowded against the top of the screen. */
.top{padding-top:38px;padding-bottom:24px}
.top__row{display:grid;gap:0;align-items:center;
grid-template-columns:var(--margin-col) var(--margin-gap) minmax(0,1fr)}
/* One link across two cells: same tab stop, same accessible name, both halves
on the grid. The inner columns repeat the outer two, so they cannot drift. */
.top .name{grid-column:1 / span 2;display:grid;gap:0;align-items:center;
grid-template-columns:var(--margin-col) var(--margin-gap)}
/* grid-row is not optional: the mark is placed in column 2, so sparse
auto-placement would push a column-1 sibling onto a second row. */
.top .name span{grid-row:1;grid-column:1;justify-self:end;text-align:right}
.top .name .mark{grid-row:1;grid-column:2;justify-self:center;width:30px;height:30px}
/* Left, on the text column's own edge: the menu starts where every headline
and paragraph below it starts. */
.top nav{grid-column:3;justify-self:start}
}
/* The nav is reference, not action: the rail disc is the only thing on a wide
screen asking to be clicked. So the nav joins the tracked-label register the
whole site uses for its meta layer (.margin b, .verdict .k, .stair .k) rather
than sitting at body size, and the current page lights clay exactly the way
an active margin label does. Sizes come from the shared label rule further
down, so this never drifts from the rest of the system. */
.top nav{display:flex;gap:30px}
.top nav a{position:relative;font-family:var(--body);font-size:11px;font-weight:500;
text-transform:uppercase;letter-spacing:2.4px;color:var(--ink-3);
text-decoration:none;transition:color var(--t-mid) var(--ease-out)}
/* A 44px hit area without touching the layout. Vertical padding would have done
it too, but the links are flex items and so blockified: the padding would grow
the row, make the masthead taller, and drag the underline below with it. An
inset pseudo-element belongs to the link for hit-testing and is invisible to
layout, so the bar keeps its height and the rule keeps its place. Horizontally
0, so the 30px gap between links stays a gap and no two targets overlap.
Desktop only: the stacked mobile rows are already 52px and adjacent, where
bleeding 12px past each edge would hand clicks to the neighbour. */
@media(min-width:761px){
.top nav a::before{content:'';position:absolute;inset:-12px 0}
}
/* right:2px, not 0: tracked type carries a trailing letter-space the rule
would otherwise sit under. */
.top nav a::after{content:'';position:absolute;left:0;right:2px;bottom:-6px;height:1.5px;
background:var(--clay-mark);transform:scaleX(0);transform-origin:left;
transition:transform var(--t-mid) var(--ease-out)}
.top nav a:hover{color:var(--clay-500)}
.top nav a[aria-current="page"]{color:var(--clay-500)}
.top nav a:hover::after,
.top nav a[aria-current="page"]::after{transform:scaleX(1)}
.top nav a:focus-visible{outline:2px solid var(--clay-600);outline-offset:6px;
border-radius:2px}
/* ── Hero ──
The bloom used to live inside .open, which is only as wide as the text
column, so overflow:hidden cut it into a visible rectangle. It now sits in a
full-bleed band and is masked to fade out, so it has no edge at all. */
.heroband{position:relative;overflow:hidden;isolation:isolate}
.heroband>.doc{position:relative;z-index:2}
.open{position:relative;padding:104px 0 96px}
@media(max-width:760px){.open{padding:64px 0 58px}}
.bloom{position:absolute;inset:-30% -12% -40% -12%;z-index:0;pointer-events:none;
-webkit-mask-image:radial-gradient(120% 96% at 58% 38%,#000 34%,transparent 80%);
mask-image:radial-gradient(120% 96% at 58% 38%,#000 34%,transparent 80%)}
.bloom i{position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.55}
.bloom i:nth-child(1){width:52vw;height:52vw;max-width:680px;max-height:680px;left:38%;top:-18%;
background:radial-gradient(circle,#F0D9C6,transparent 68%);animation:drift1 26s var(--ease-out) infinite alternate}
.bloom i:nth-child(2){width:40vw;height:40vw;max-width:520px;max-height:520px;left:58%;top:26%;
background:radial-gradient(circle,#E7DFCB,transparent 66%);animation:drift2 34s var(--ease-out) infinite alternate}
.bloom i:nth-child(3){width:30vw;height:30vw;max-width:400px;max-height:400px;left:30%;top:52%;
background:radial-gradient(circle,#DCE6DD,transparent 66%);animation:drift3 30s var(--ease-out) infinite alternate}
@keyframes drift1{to{transform:translate3d(-7%,6%,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(6%,-8%,0) scale(1.08)}}
@keyframes drift3{to{transform:translate3d(-5%,-6%,0) scale(1.15)}}
/* ── 3. Pointer light. The paper catches a warm highlight where you look. ── */
.lamp{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
transition:opacity 900ms var(--ease-out);
background:radial-gradient(420px circle at var(--mx,60%) var(--my,40%),
rgba(196,99,60,.10),transparent 62%)}
.heroband[data-lamp="true"] .lamp{opacity:1}
/* ── One content column for the entire page. Hero, bands and closing section
── all start at the same left edge; only the margin notes sit outside it. ── */
.open .inner{display:grid;gap:22px}
@media(min-width:920px){
.open .inner{grid-template-columns:var(--margin-col) minmax(0,1fr);
gap:var(--margin-gap);align-items:start}
}
/* The hero's own row. Its heading is far bigger than a section's, so the centre
of its first line is nowhere near where --lead-centre puts a section's: .rise
sets a 1.4 line, which places the ink centre .7 of the font size down. Scoped
to the hero, and the dot follows because it reads the same variable. */
.open .inner{--lead-centre:calc(.7 * clamp(2.7rem,6.6vw,4.7rem))}
@media(min-width:920px){
.open .inner>.margin{padding-top:calc(var(--lead-centre) - var(--label-half))}
}
.close{display:grid;gap:22px}
@media(min-width:920px){
.close{grid-template-columns:var(--margin-col) minmax(0,1fr);
gap:var(--margin-gap);align-items:start}
}
/* ── 7. The sieve. A pinned scene: everything you could build, narrowed by
── scroll to the one thing that decides it. ── */
.band--scene{padding:0;align-items:start}
.scene{position:relative;height:300vh}
.pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:26px}
.pin svg{width:100%;height:auto;display:block;overflow:visible}
.scene .d{fill:var(--sand-500)}
.scene .d.final{fill:var(--clay-mark)}
.scene .halo{fill:none;stroke:var(--clay-mark);stroke-width:1;opacity:0;
transform-box:fill-box;transform-origin:center}
/* Twice, then done. This was an infinite loop, which put permanent motion on a
section the reader has arrived at to read: the scene holds its answer from 0.86
to the end of the scroll on purpose, and a ring pulsing under it forever is the
opposite of holding. Nothing else on the page has idle motion -- the travelling
button stops the frame it settles -- and this was the exception. Two pulses
announce the answer and hand the moment to the dot, which stays. */
.scene .halo.on{animation:ping 3.2s var(--ease-out) 2}
@keyframes ping{0%{opacity:.55;transform:scale(.4)}70%{opacity:0;transform:scale(1.35)}100%{opacity:0;transform:scale(1.35)}}
/* One caption at a time, crossfading with the stage. */
.caption{position:relative;height:104px;width:100%;text-align:center}
.caption span{position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;gap:6px;opacity:0;transform:translateY(8px);
transition:opacity 420ms var(--ease-out),transform 520ms var(--ease-out)}
.caption span[data-on="true"]{opacity:1;transform:none}
.caption b{font-family:var(--display);font-size:clamp(1.25rem,2.4vw,1.75rem);
font-weight:600;letter-spacing:-0.02em}
.caption i{font-style:normal;font-size:15px;color:var(--ink-3);max-width:44ch;line-height:1.55}
.caption span[data-key="true"] b{color:var(--clay-500)}
.ticks{display:flex;gap:14px;align-items:center}
/* Dots, not bars: the rail, the wordmark and the field above all mark position
with a disc, so the stage marks speak the same language. The fill grows from
the centre, the way the surviving dot itself does. */
.ticks i{display:block;width:9px;height:9px;border-radius:50%;
background:var(--sand-400);position:relative}
.ticks i::after{content:'';position:absolute;inset:0;border-radius:50%;
background:var(--clay-500);transform:scale(0);
transition:transform 260ms var(--ease-out)}
.ticks i[data-fill="true"]::after{transform:scale(1)}
.counter{font-family:var(--display);font-size:13px;font-weight:600;color:var(--ink-3);
min-width:112px;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:919px){
.scene{height:280vh}
.caption{height:120px}
}
/* ── 8. Deliverable glyphs. Line art, drawn on reveal. No tiles. ── */
.glyph{width:26px;height:26px;flex:none;color:var(--clay-500);align-self:start;margin-top:4px}
.glyph path,.glyph rect,.glyph circle,.glyph line{fill:none;stroke:currentColor;
stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:var(--len,90);stroke-dashoffset:var(--len,90);
transition:stroke-dashoffset 1100ms var(--ease-out)}
.asset[data-in="true"] .glyph path,.asset[data-in="true"] .glyph rect,
.asset[data-in="true"] .glyph circle,.asset[data-in="true"] .glyph line{stroke-dashoffset:0}
/* ── 4. Variable-weight entrance. The headline sets itself. ── */
.open h1{font-size:clamp(2.7rem,6.6vw,4.7rem);line-height:.95;letter-spacing:-0.032em;
max-width:none;margin-bottom:34px}
/* Each line is its own masked block, so its box has to contain its own glyphs.
The stack's deepest face needs 1.33em for that (81 up, 19 down per 100), and
any tighter line-height drops the descenders outside the box where
overflow:hidden cuts them: the old .04em of padding was covering 3px of a
14px overhang, and could not be widened because that padding is the mask the
entrance slides behind. So the box keeps a full natural line and the leading
comes off the bottom margin instead. 1.33 - 0.38 = the 0.95em step above,
and the mask stays tight against the text it hides. */
.rise{display:block;overflow:hidden;line-height:1.4;margin-bottom:-.45em}
.rise strong{font-weight:640}
/* Hand-set lines only earn their keep where they actually fit. Below that the
headline reflows as ordinary text and skips the mask entirely. */
@media(max-width:760px){
/* Reflowed as ordinary text: no mask, so the h1's own leading governs again. */
.rise{display:inline;overflow:visible;padding:0;margin:0;line-height:inherit}
.rise>span{display:inline;transform:none}
}
.rise>span{display:inline-block;transform:translateY(105%);
transition:transform 760ms var(--ease-spring)}
body[data-ready="true"] .rise>span{transform:translateY(0)}
.open .deck{font-size:clamp(1.12rem,2vw,1.32rem);line-height:1.58;color:var(--ink-2);
max-width:41ch;margin-bottom:40px}
.open .deck b{font-weight:600;color:var(--ink)}
/* ── The single call to action. One per page, so it can afford presence. ── */
.act{position:relative;display:inline-flex;align-items:center;gap:16px;
padding:20px 24px 20px 34px;border-radius:var(--r-md);min-height:64px;
font-family:var(--body);font-size:17.5px;font-weight:600;letter-spacing:-0.005em;
color:#fff;text-decoration:none;overflow:hidden;isolation:isolate;
/* Top stop is darker than clay-400: at that lightness white text fell to
4.04:1. This floor keeps every band of the gradient above AA. */
background:linear-gradient(180deg,#EA650F 0%,#DF5A06 52%,#CF4F00 100%);
/* A lit top edge and a warm cast beneath: the button sits on the paper. */
box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
inset 0 -1px 0 rgba(0,0,0,.14),
0 1px 2px rgba(93,41,18,.20),
0 10px 26px -8px rgba(93,41,18,.42);
transition:transform 420ms var(--ease-spring),box-shadow 420ms var(--ease-out),
filter 300ms var(--ease-out)}
.act:hover{color:#fff;filter:saturate(1.06) brightness(1.03);
box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
inset 0 -1px 0 rgba(0,0,0,.14),
0 2px 4px rgba(93,41,18,.22),
0 20px 44px -12px rgba(93,41,18,.52)}
.act:active{transform:translateY(1px) scale(.994)}
/* A slow sheen crosses the face on hover. */
.act::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.20) 48%,transparent 64%);
transform:translateX(-120%);transition:transform 900ms var(--ease-out)}
.act:hover::before{transform:translateX(120%)}
/* The arrow rides in its own chip, which opens as you approach. */
.act .chip{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
background:rgba(255,255,255,.16);flex:none;
transition:background 320ms var(--ease-out),transform 420ms var(--ease-spring)}
.act:hover .chip{background:rgba(255,255,255,.26);transform:translateX(3px)}
.act svg{transition:transform 420ms var(--ease-spring)}
.act:hover svg{transform:translateX(2px)}
.act:focus-visible{outline:2.5px solid var(--clay-600);outline-offset:4px}
.act-note{font-size:15px;color:var(--ink-3);margin-top:18px}
/* ── Hero principle line. A statement of method, not a tagline: small, quiet,
set apart by a rule rather than by weight or colour. ── */
.principle{display:flex;align-items:center;gap:11px;margin:32px 0 0;
font-family:var(--display);font-size:14.5px;font-weight:500;letter-spacing:.01em;
color:var(--ink-2)}
.principle::before{content:'';flex:none;width:26px;height:1px;background:var(--clay-mark)}
.principle span{font-weight:400;color:var(--ink-3)}
.hero-cta{margin:34px 0 0}
/* ── Stat row. Three plain numbers, hairline-separated. ── */
.stats{display:grid;gap:0;border-top:1px solid var(--sand-300);
border-bottom:1px solid var(--sand-300);margin-top:56px}
@media(min-width:720px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{padding:22px 0}
@media(min-width:720px){
.stat{padding:24px 28px;border-left:1px solid var(--sand-300)}
.stat:first-child{padding-left:0;border-left:0}
}
@media(max-width:719px){.stat + .stat{border-top:1px solid var(--sand-300)}}
.stat b{display:block;font-family:var(--display);font-weight:550;
font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-0.024em;margin-bottom:4px}
.stat span{font-size:14.5px;color:var(--ink-3)}
/* ── Home proof cards. The kill line is the load-bearing part, so it gets the
rule and the accent label; the app name stays plain. ── */
.proofs{display:grid;gap:18px;margin-top:30px}
@media(min-width:860px){.proofs{grid-template-columns:repeat(3,1fr);gap:22px}}
.proof{display:flex;flex-direction:column;padding:22px 24px;background:var(--sand-50);
border:1px solid var(--sand-300);border-radius:var(--r-md)}
.proof h3{font-size:1.05rem;font-weight:640;line-height:1.25;margin:0 0 8px}
.proof p{margin:0;color:var(--ink-2);font-size:.97rem}
.proof .kill{margin-top:auto;padding-top:14px;border-top:1px solid var(--sand-300)}
.proof p.kill{margin-top:16px}
@media(min-width:860px){.proof p.kill{margin-top:auto}}
.proof .kill b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:2.2px;
font-weight:600;color:var(--clay-500);margin-bottom:5px}
/* ── Case-study screens. Line drawings in the same idiom as the deliverable
glyphs, so proof shots read as part of the page rather than pasted onto it.
A real screenshot can replace the