— not
links — but main.css:561 keys the hover on the class, so they slid sideways
and turned gold under the cursor while doing nothing. */
.doc div.pub-row:hover{padding-left:0;background:none}
.doc div.pub-row:hover .pub-title{color:var(--ivory)}
/* the shot pane is the biggest thing on the page and the only hover response
that leads nowhere: tv.js binds the buttons, never the image */
.doc .feat-screen.is-shot:hover{transform:none;border-color:var(--hairline)}
/* every state on these pages was a dim-to-gold swap, measured 1.28:1 — a hue
change with no luminance step, which vanishes in peripheral vision and
under deuteranopia. Pair the hue with a value change. */
.doc .crumbs a:hover,.doc .pager a:hover .pager-label,.doc .practice-links a:hover{color:var(--ivory)}
.doc .pager a:hover{color:var(--gold)}
/* nothing on twelve pages said which one you were on, and the practice row
linked the page you were standing on */
/* The nav and the footer are siblings of , not inside it, so
scoping this under .doc announced "you are here" to assistive tech and painted
it nowhere — a fix that left sighted and screen-reader visitors holding
different models, which is worse than the silence it replaced. Verified safe
to unscope: neither live page carries a single aria-current, so the rule is
inert on both. */
[aria-current="page"]{color:var(--gold)}
#nav [aria-current="page"],footer [aria-current="page"]{cursor:default}
#nav [aria-current="page"]::after{display:none} /* no underline sweep on the page you are on */
.doc .practice-links [aria-current="page"]{border-bottom:1px solid var(--gold-line-hi);padding-bottom:3px}
/* press acknowledgement: no :active rule existed anywhere in either sheet,
so a click on a link that triggers a document load returned nothing at all
between the press and the repaint */
.doc .exp-item:has(.item-title a):active,.doc a.pub-row:active{background:rgba(212,165,116,.26)}
.doc .btn-hire:active,.doc .pager a:active,.doc .practice-links a:active{opacity:.75}
/* the closing action — the four lenses agreed this was the site's worst gap:
eight of the twelve pages ended with no way to act */
.doc .closer .contact-links{margin-top:clamp(20px,2.4vw,30px)}
/* ============================================================
THE SECTION RAIL — where am I inside this page, and what is left.
Built for the document pages because the film transport cannot serve them: it
resolves its ticks from the home's section ids, so on a case study it renders
as a fill with no landmarks. The rail takes over there and the transport is
hidden, so a page never carries two progress devices.
Rewritten 2026-09-04 after a three-lens audit. What the lenses changed:
the pointer guard (a touch device at this width got marks whose destinations
could never be revealed); the plate under the label (it was 10px dim ink on
whatever happened to scroll under it, including a full-width screenshot); the
hover reach (the labels sat left of the only hover zone, so moving to read one
erased it); the shape of the states (hover and current were both plain gold,
two pixels apart); the focus ring (it framed the 44px hit box, not the 5px
mark); the width (44px crossed into the content column below 1240px, the same
sin main.css:682 records the transport being fixed for); and the anchoring
(a viewport offset drifts 666px from the column at 2560px).
============================================================ */
.srail{display:none}
/* Gated like the transport it replaces, for the reason main.css:667 gives: this
is a pointer device, and every label here is revealed by hover. A touch
device would get marks it cannot read and no transport either. */
@media (min-width:1240px) and (hover:hover) and (pointer:fine){
body:has(main.doc) #transport{display:none} /* one wayfinding device per page */
.srail{
display:flex;flex-direction:column;align-items:flex-end;gap:2px;
position:fixed;top:50%;transform:translateY(-50%);
/* anchored to the content column, not to the viewport, so the marks stay a
constant distance from the text at any width above 1280px instead of
drifting into empty ground */
right:calc(20px + max(0px, (100vw - 1280px) / 2));
z-index:54; /* above #nav (50), below #transport (55) */
}
/* the spine: the honest half of the device. Marks encode order; this encodes
distance, filled from the top to the scroll position. */
/* On the marks' own axis. It ran 12px inward while the marks sat 0–5px
inward, so the progress line and its stops were two parallel hairlines
10px apart rather than one instrument. */
.srail-spine{
position:absolute;right:2px;top:0;bottom:0;width:1px;
background:var(--hairline);
}
/* height, not scaleY: the fill is now a measured distance down the column to
the lit mark, and scaling also squashed the gradient into whatever fraction
was showing, so the ramp meant nothing until the page was fully read. */
.srail-fill{
position:absolute;left:0;right:0;top:0;height:0;
background:linear-gradient(to bottom,var(--gold-line-hi),var(--gold));
background-size:100% 400px;
}
.srail-dot{
position:relative;display:flex;align-items:center;justify-content:flex-end;
/* 26px wide, not 44 — main.css:682 records why the transport's tick halo was
cut to 26: a 44px halo reached into the page and shadowed real links, and
44 is the touch spec on a device that has no touch. Height stays 26 so the
column keeps a comfortable pitch. */
width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;
}
/* the mark itself — the button is the target, this is the signifier */
.srail-dot::after{
content:"";width:5px;height:5px;border-radius:50%;
background:var(--gold-line-hi);
transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
/* Current is FILLED, hovered is RINGED. They were both plain gold two pixels
apart, so during a hover the only thing separating "where you are" from
"what you are pointing at" was 2px of diameter. Scale rather than width, so
the mark grows from its own centre and the column keeps one axis. */
.srail-dot.is-on::after{background:var(--gold);transform:scale(1.4)}
.srail-dot:hover::after{box-shadow:0 0 0 1px var(--gold);background:var(--gold)}
/* the focus ring belongs on the mark, not on the invisible box around it */
.srail-dot:focus-visible{outline:none}
.srail-dot:focus-visible::after{
background:var(--gold);
box-shadow:0 0 0 2px var(--stage),0 0 0 4px var(--gold);
}
.srail-dot:active::after{transform:scale(1.1)}
.srail-label{
position:absolute;right:22px;white-space:nowrap;
font:400 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
color:var(--dim);
/* the plate is the transport's own (main.css:692) — a fixed overlay label
has no control over the ground scrolling under it, and this one crosses
full-width screenshots */
background:rgba(11,10,16,.92);padding:6px 9px;border-radius:3px;
opacity:0;transform:translateX(6px);pointer-events:none;
/* The delay does two jobs. Coming in it is hover intent, so a mouse crossing
the edge does not detonate ten labels. Going out it is a linger: the
labels sit to the LEFT of the only hover-able column, so without it a
reader whose eye and cursor drift left to read one erases the thing being
read. Widening the column instead would put a 220px invisible corridor
over the article text, and a corridor that cannot be hovered — which is
what pointer-events:none makes it — buys nothing at all. */
transition:opacity .3s var(--ease) .45s,transform .3s var(--ease) .45s,color .3s var(--ease);
}
/* One label at a time, the one you are pointing at. Revealing the whole map
on rail hover was the intent — "what is on this page" is the question you
bring to a rail — but the margin is only empty on a document page. On the
home the column sits over the hero portrait, and five plated lines land
across a face. The usability lens asked for one at a time and it was right;
the lit mark already answers "where am I" without any label at all. */
.srail-dot:hover .srail-label,.srail-dot:focus-visible .srail-label{
opacity:1;transform:none;
transition-delay:.12s; /* quick in, slow out */
}
/* Same rule as the marks: two meanings must not share one value. The one you
are pointing at goes gold; the one you are IN goes ivory, so during a hover
the page can still tell you where you actually are. */
.srail-dot:hover .srail-label,.srail-dot:focus-visible .srail-label{color:var(--gold)}
.srail-dot.is-on .srail-label{color:var(--ivory)}
}
/* Inside the rail's own query, not outside it. Hiding the transport
unconditionally left a fine-pointer window between roughly 700 and 1099px —
a browser dragged to half a laptop screen beside Slack, which is how a
forwarded link is usually opened — with neither device, where this morning it
had the transport. A landmark-less fill beats nothing. */
/* One landing for both jump paths — the Lenis flight and the native fallback
reduced-motion visitors take. It was a magic number inside the Lenis call, so
the two landed in different places. */
.doc > section{scroll-margin-top:72px}
@media (prefers-reduced-motion:reduce){
.srail-dot::after,.srail-label,.srail-fill{transition:none}
}
/* The hire affordance opens a mail client, which is a surprise unless it says
so — the site's own rule, stated in tv.js, is that an affordance tells the
truth about what will happen. Written by hire.js, so it never appears when
the script has not run and the link is still a plain mailto.
It was 10px uppercase mono in --dim: the site's smallest, most-skipped
register, the one the whole web uses for disclaimers, with an email address
inside it rendering as LORENZO.COLOMBANI@LIVE.FR. Two lenses called that a
signifier present and unseen. It is a promise, not fine print, so it reads
at the body's small size in sentence case. */
.hire-hint{
display:block;margin-top:12px;max-width:52ch;
font-size:clamp(15px,1vw,16px);line-height:1.5;color:var(--dim);
}
/* after the click it stops being a label and becomes the recovery */
.hire-hint.is-live{color:var(--ivory)}
/* the static address beside the button — the fallback for a swallowed click,
present in the markup so it survives the script being blocked */
.hire-address{margin-top:14px;font-size:clamp(15px,1vw,16px);line-height:1.5;color:var(--dim);max-width:52ch}
.hire-address strong{color:var(--ivory);font-weight:500}
.hire-address a{
color:var(--ivory);text-decoration:none;
border-bottom:1px solid var(--gold-line-hi);
transition:color .3s var(--ease),border-color .3s var(--ease);
}
.hire-address a:hover,.hire-address a:focus-visible{color:var(--gold);border-bottom-color:var(--gold)}
/* In the closer, Email and LinkedIn shipped as identical rows at identical
weight — and LinkedIn is both the lower-commitment click and the one that
asks the visitor to compose nothing. So the cheapest path was not the one
the site exists for. The mail row is the distinct one now; LinkedIn stays,
quieter, because a second door matters when a mailto silently fails. */
/* The first version asserted a promotion it did not make: two of its three
declarations repeated values main.css already sets, and its tint measured
1.06:1 — below the site's own hairline, so invisible. The visible difference
was entirely the demotion of the row beside it. The mail row now carries a
gold edge, which is a real signal at any tint. */
/* main.css gives these rows zero left padding, so the label starts flush at the
row's edge — and the gold bar was painting straight over the first letter.
"EMAIL" read as "MAIL". Every row in the block gets the same gutter, so the
labels stay in one column and the bar has somewhere of its own to sit; the
hover shift main.css animates is preserved, just from the new resting value. */
.doc .contact-links .contact-link{padding-left:18px}
.doc .contact-links .contact-link:hover{padding-left:32px}
.doc .contact-links .contact-link:first-child{
background:rgba(212,165,116,.16);
box-shadow:inset 3px 0 0 var(--gold);
}
.doc .contact-links .contact-link:first-child:hover{background:rgba(212,165,116,.24)}
.doc .contact-links .contact-link:not(:first-child) .cl-value{color:var(--dim)}
/* A rail jump moves focus to the chapter heading, which is right — a jump a
keyboard user cannot continue from is half a jump. It should not paint the
global focus ring around a whole heading for someone who used a mouse, and
Chrome counts programmatic focus on a tabindex="-1" element as focus-visible,
so it did. sectionrail.js marks the pointer case; the keyboard case keeps its
ring, which is the whole point of having one. */
[data-quiet-focus]:focus-visible{outline:none}