: the paragraph's own opacity is var(--t), the
scrubbed light ramp, and a transition there would lag the whole join. */
.rig__eyebrow span {
display: inline-block;
transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}
.rig__eyebrow.is-swap span { opacity: 0; transform: translateY(4px); }
/* ── the component panel ──
Built to the "Valve block — component text panel (1a)" handoff: a datasheet
panel on the right of the stage, with a 01–04 index rail at the frame's edge.
Every measurement below is the specced value; the colours are this site's
tokens standing in for the sampled hex, as the handoff asks. */
.rig__copy { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* the panel's own hairline and ghost, expressed against our ink token so they
land on the specced rgba(17,17,17,.13) / .055 without a second hex */
.rig {
--panel-hairline: color-mix(in oklab, var(--ink), transparent 87%);
}
/* A full-width band, not a fixed column: the first two components sit on the
left and the last two on the right, so the tour changes sides once. */
.rig__list {
list-style: none;
position: absolute;
left: 0; right: 0; top: 50%;
}
/* the cabin's copy is a data source for the docked panel and the flat page, not
a second panel stacked on this one */
.rig__list--src { display: none; }
/* only ever seen on the flat path, where the two lists must not read as eight
undifferentiated blocks half of which are about a different object */
.rig__group { display: none; }
/* Centred on the list's own line rather than sized to it, so a slide that grows
a line still sits on the same optical centre as the other three. */
/* THE PANEL HOLDS ITS SHARE OF THE SCREEN, and every number below is why.
It was 430px wide, 150px from the edge, with four fixed pixel type sizes —
the same at every width, while the canvas behind it is full bleed. MEASURED
on the real page: the panel is 30% of a 1440px window, 22% of 1920, 17% of
2560 and 12.5% of 3440, with the headline at 52px throughout. The unit grows
with the screen and the words do not, so on a large monitor the text is a
small block a long way from the thing it describes.
The floors are today's values, so nothing moves at 1440 and below; the
ceilings stop it growing past the size the copy was written for.
LINEAR FROM 1440 TO 2560, and not the vw terms it first had. Those started
late and capped early, so between 1654 and 2560 the panel outgrew the rest of
the page — at 1920 its body text was x1.30 where every other body on the page
is x1.15, and its headline stood taller than the Services h2 from 1769 to
2418px. Same value at 1440 and at 2560; an even climb between, like the rest. The OUTER
inset stays 150px: the panel grows INWARD, toward the unit, which is the half
of the problem that is about distance. */
/* KEPT BETWEEN THE EYEBROW AND THE BAR. With Semvac's full text in it a part runs
to two paragraphs' worth and five spec rows, and centred on the stage it rose
into "TV1 – Toilet module" on any screen under ~800px tall — the overlap
Semvac sent a screenshot of. product.js (fitPanel) measures the tallest part
against the room between the two and writes --fit, one scale for all four so
the type does not change size from part to part, and --dy, the nudge down or
up that keeps each one inside it. Scaled about its own left (right) middle, so
the panel keeps its outer edge and its centre line. */
.rig__list li {
position: absolute; top: 0;
width: clamp(430px, calc(430px + (100vw - 1440px) * 0.210358), 665.6px);
left: 150px;
transform: translateY(calc(-50% + var(--dy, 0px))) scale(var(--fit, 1));
transform-origin: 0 50%;
}
.rig__list li[data-hot="2"],
.rig__list li[data-hot="3"] { left: auto; right: 150px; transform-origin: 100% 50%; }
.rig__slidebody {
position: relative;
display: flex; flex-direction: column; gap: clamp(22px, calc(22px + (100vw - 1440px) * 0.0089286), 32px);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.24s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rig__list li.on .rig__slidebody { opacity: 1; transform: none; }
.rig__kicker {
display: flex; align-items: center; gap: clamp(12px, calc(12px + (100vw - 1440px) * 0.0035714), 16px);
font-family: var(--f-mono);
font-size: clamp(12px, calc(12px + (100vw - 1440px) * 0.0026786), 15px); letter-spacing: 0.22em; text-transform: uppercase;
/* --green-deep, not the handoff's brand green: 12px type needs 4.5:1, and
--green is 2.8:1 on the paper */
color: var(--green-deep);
}
.rig__kicker i { display: block; width: clamp(40px, calc(40px + (100vw - 1440px) * 0.017857), 60px); height: 1px; background: var(--green); opacity: 0.4; }
.rig__kicker em { font-style: normal; color: var(--ink-3); }
.rig__list h3 {
font-weight: 700; font-size: clamp(52px, calc(52px + (100vw - 1440px) * 0.026786), 82px); line-height: 0.98; letter-spacing: -0.025em;
color: var(--ink);
/* Two lines, reserved. The handoff's content rule is that every name is
hand-broken onto two lines, and the column is centred on its own middle —
so a one-word name silently shortens the block by 51px and the whole panel
jumps on that one swap. A rule the copy cannot break. */
min-height: 1.96em;
}
/* hand-broken, one span per line — spans rather than
so h3.textContent
still reads "Valve block" for the tab titles, the hover box and the labels */
.rig__list h3 span { display: block; }
.rig__list p {
font-size: clamp(17px, calc(17px + (100vw - 1440px) * 0.0053571), 23px); line-height: 1.6; color: var(--ink-2);
/* A MEASURE, NOT A WIDTH. The paragraph has to hold its line length as the
type grows, so the cap is in characters. MEASURED in Schibsted Grotesk:
1ch is 0.612em here, so 36.5ch renders at 380px at the floor size of 17px —
today's number to the pixel — and at 520px once the type reaches 23px. */
max-width: min(100%, 36.5ch); text-wrap: pretty;
}
.rig__spec { display: flex; flex-direction: column; margin-top: 8px; }
.rig__spec > div {
display: flex; justify-content: space-between; gap: clamp(20px, calc(20px + (100vw - 1440px) * 0.0089286), 30px);
padding: clamp(13px, calc(13px + (100vw - 1440px) * 0.0044643), 18px) 0;
border-top: 1px solid var(--panel-hairline);
font-family: var(--f-mono);
font-size: clamp(12px, calc(12px + (100vw - 1440px) * 0.0026786), 15px); letter-spacing: 0.08em; text-transform: uppercase;
}
.rig__spec > div:last-child { border-bottom: 1px solid var(--panel-hairline); }
.rig__spec dt { color: var(--ink-3); }
.rig__spec dd { color: var(--ink); }
/* the floating box keeps the small sizes the panel has grown out of */
.rig__tip h3 {
font-size: clamp(1.15rem, 1.8vw, clamp(1.55rem, calc(1.55rem + (100vw - 1440px) * 0.00775), 2.0925rem)); line-height: 1.12;
letter-spacing: -0.02em; margin-bottom: clamp(0.7rem, calc(0.7rem + (100vw - 1440px) * 0.004), 0.98rem);
}
.rig__tip p { font-size: clamp(0.9rem, calc(0.9rem + (100vw - 1440px) * 0.0045), 1.215rem); line-height: 1.58; color: var(--ink-2); text-wrap: pretty; }
.rig__tip-p2 { margin-top: clamp(0.7rem, calc(0.7rem + (100vw - 1440px) * 0.004), 0.98rem); }
.rig__bar {
opacity: calc(1 - var(--dock));
position: absolute;
left: 50%; transform: translateX(-50%);
bottom: clamp(2rem, 6vh, clamp(3.5rem, calc(3.5rem + (100vw - 1440px) * 0.0175), 75.6px));
width: min(clamp(120px, calc(120px + (100vw - 1440px) * 0.05358), 180px), 22vw); height: 2px;
background: var(--rule);
}
.rig__bar span { display: block; height: 100%; width: 0; background: var(--green); }
/* ══════════════ THE COST ══════════════
A headline on the dark, then a rail of cards pushed sideways by the page's
own vertical scroll — the same mechanic the intro's train strip uses, which
is what makes the cards running past the right edge read as deliberate. */
.cost {
/* THE CURTAIN. A negative top margin lifts the section over the rig's last
screen and z-index puts it in front, so the dark runs up over the finished
cabin — and the headline and the cards ride up inside it rather than
waiting below for it to finish. One mechanism instead of a separate sheet
plus a section that had to agree with it. */
margin-top: -100svh;
position: relative; z-index: 2;
background: var(--ink-block);
color: var(--ink-rev);
/* 100svh of that is the rise; the rest is the rail's own travel. MEASURED: at
260svh of travel the rail moved 0.43px sideways per pixel of scroll and the
cards barely drifted. 190 puts it at 0.85. */
height: 290svh;
--c: 0; /* 0 once the rise is done, 1 at the bottom */
}
.cost__pin {
position: sticky; top: 0;
height: 100svh;
overflow: hidden;
display: flex; flex-direction: column; justify-content: center;
gap: clamp(2.5rem, 7vh, 5.5rem);
}
.cost__head {
text-align: center;
padding: 0 var(--pad);
/* No fade. It rides up with the dark, so it is already legible by the time
the section has arrived — fading it in on --c would have hidden it for
exactly the stretch it is meant to be read on. */
}
.cost__head h2 {
/* the measure, not a
: three lines at this width, and it re-breaks by
itself when the copy is replaced */
max-width: 19ch;
margin-inline: auto;
font-size: clamp(2rem, 4.4vw, clamp(3.6rem, calc(57.6px + (100vw - 1440px) * 0.029822), 91px));
line-height: 1.02; letter-spacing: -0.03em;
text-transform: uppercase;
}
.cost__lede {
margin: clamp(1rem, 2.4vh, clamp(1.6rem, calc(25.6px + (100vw - 1440px) * 0.003929), 30px)) auto 0;
max-width: 46ch;
font-size: clamp(0.95rem, min(1.1vw, calc(15.84px + (100vw - 1440px) * 0.00495)), 21.38px); /* character-identical to .proc__lede */
line-height: 1.6;
color: var(--ink-rev-2);
}
/* The rail. --span is the overflow it has to travel, measured in JS and written
back as a pixel value: it depends on the cards' own widths and the gap, and
guessing it either stalls short or runs the last card off the screen. */
.cost__rail {
display: flex; gap: clamp(1rem, 2vw, clamp(1.75rem, calc(28px + (100vw - 1440px) * 0.01), 39.2px));
padding-inline: var(--pad);
width: max-content;
transform: translateX(calc(var(--c) * var(--span, 0px) * -1));
will-change: transform;
}
.cost__card {
flex: 0 0 auto;
/* x1.4, not x1.55: card 1's heading must keep breaking and card 2's must not */
width: min(38vw, clamp(460px, calc(460px + (100vw - 1440px) * 0.164286), 644px));
min-height: clamp(300px, 42svh, clamp(400px, calc(400px + (100vw - 1440px) * 0.115179), 529px));
padding: clamp(1.8rem, 4vh, clamp(2.8rem, calc(44.8px + (100vw - 1440px) * 0.004643), 50px));
border: 1px solid var(--rule-rev);
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center;
gap: clamp(1.2rem, 3vh, clamp(2rem, calc(32px + (100vw - 1440px) * 0.005358), 38px));
}
.cost__ico {
display: grid; place-items: center;
width: clamp(44px, calc(44px + (100vw - 1440px) * 0.016072), 62px); height: clamp(44px, calc(44px + (100vw - 1440px) * 0.016072), 62px);
color: var(--ink-rev);
}
.cost__ico svg { width: 100%; height: 100%; stroke-linecap: round; stroke-linejoin: round; }
.cost__card h3 {
font-size: clamp(1.05rem, 1.5vw, clamp(1.3rem, calc(20.8px + (100vw - 1440px) * 0.006429), 28px));
text-transform: uppercase; letter-spacing: 0.02em;
}
.cost__card p {
font-size: clamp(0.88rem, min(1vw, calc(14.4px + (100vw - 1440px) * 0.0045)), 19.44px); line-height: 1.6;
color: var(--ink-rev-2); max-width: 34ch; text-wrap: pretty;
}
.cost__bar {
position: absolute; left: 50%; transform: translateX(-50%);
bottom: clamp(2rem, 6vh, clamp(3.5rem, calc(3.5rem + (100vw - 1440px) * 0.0175), 75.6px));
width: min(clamp(120px, calc(120px + (100vw - 1440px) * 0.05358), 180px), 22vw); height: 2px;
background: var(--rule-rev);
}
.cost__bar span { display: block; height: 100%; width: 0; background: var(--green-lift); }
/* No scrub to push the rail: it becomes a plain readable stack. The negative
margin has to go with it — there is no pin to run up over on this path, so
it would simply swallow the end of the flat rig. */
.no-motion .cost, .cost--flat {
height: auto; padding: clamp(4rem, 10vh, clamp(7rem, calc(112px + (100vw - 1440px) * 0.0125), 126px)) 0;
margin-top: 0; z-index: auto;
}
.no-motion .cost__pin, .cost--flat .cost__pin {
position: static; height: auto; overflow: visible;
}
.no-motion .cost__rail, .cost--flat .cost__rail {
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
width: auto; transform: none; margin-top: clamp(3rem, calc(48px + (100vw - 1440px) * 0.016965), 67px);
}
/* The card's own width has to go with the rail. It is `min(38vw, 460px)` and
`flex: 0 0 auto` for the sideways row; left standing inside a grid track it
keeps 460px, bursts the track, and pushes the document 89px wider than the
viewport — a horizontal scrollbar on the reduced-motion path only, which is
exactly where nobody looks. MEASURED at 1440: scrollWidth 1529 before, 1440
after. The min-height goes too — a grid row does not need the 400px that gave
the moving row its presence. */
.no-motion .cost__card, .cost--flat .cost__card {
width: auto; min-height: 0; flex: initial;
}
.no-motion .cost__head, .cost--flat .cost__head { opacity: 1; transform: none; }
.no-motion .cost__bar, .cost--flat .cost__bar { display: none; }
@media (max-width: 760px) {
.cost__card { width: 78vw; min-height: 0; }
}
/* ══════════════ REFERENCES ══════════════
Where the systems run: a world map in which only the reference countries
answer, and a signal that leaves Odense to reach them. js/map.js owns the
geometry, the signal and the names; everything here is the LOOK, keyed to
data-look so the dark control room on the page and the line drawing on
map-test.html are the same component with different paint.
Dark, and placed straight after .cost for a reason beyond the story: the
header knockout has to hold across both, and two adjacent dark sections keep
the band dark for one continuous stretch. Put before the footer instead, the
band would have flipped dark, light for the footer's paper margin, and dark
again inside a single screen. */
.refs {
position: relative;
background: var(--ink-block);
color: var(--ink-rev);
/* EXACTLY one screen, and the map takes what the headline leaves. At
min-height the section grew to 1012px in a 900px window — the heading plus
a 1400px-wide map at its natural 2.1:1 — so the stop at the section's top
framed it with Australia and half of South America below the fold. A fixed
height with the map as the flexible child means the whole world is always
inside the one screen the gesture lands on. */
height: 100svh;
min-height: 34rem;
display: flex;
flex-direction: column;
padding: calc(var(--head-h) + clamp(2rem, 6vh, clamp(4rem, calc(4rem + (100vw - 1440px) * 0.01036), 4.725rem))) var(--pad) clamp(2.5rem, 7vh, clamp(5rem, calc(5rem + (100vw - 1440px) * 0.007322), 5.5125rem));
overflow: hidden;
}
.refs--paper { background: var(--paper); color: var(--ink); }
.refs__head {
flex: none;
width: 100%;
max-width: var(--maxw);
margin: 0 auto clamp(1rem, 3vh, 2.5rem);
}
.refs__head h2 {
margin-top: clamp(1.1rem, calc(1.1rem + (100vw - 1440px) * 0.006286), 1.54rem);
max-width: 16ch;
font-size: clamp(2rem, 4.4vw, clamp(3.6rem, calc(57.6px + (100vw - 1440px) * 0.029822), 91px)); /* character-identical to .cost__head h2 */
line-height: 1.02; letter-spacing: -0.03em;
}
.map {
position: relative;
flex: 1 1 auto;
min-height: 0; /* a flex child will not shrink below its content without it */
display: flex;
width: 100%;
max-width: 1400px;
margin-inline: auto;
}
.map__stage { position: relative; flex: 1; min-height: 0; }
/* Fills the box both ways and lets the viewBox do the fitting — the default
preserveAspectRatio is xMidYMid meet, so the drawing is as large as the box
allows in whichever dimension runs out first, centred in the other. */
.map__svg { display: block; width: 100%; height: 100%; }
.map--failed { display: none; }
/* .map is display:flex, which outranks the hidden attribute's UA display:none —
the test page shows one of two components at a time with [hidden]. */
.map[hidden] { display: none; }
/* Hairlines stay hairlines. The SVG is a 1000-unit drawing shown at anything
from 390 to 1400px, and a scaling stroke would be three times heavier on a
wide screen than on a phone. */
.map__svg path, .map__svg circle { vector-effect: non-scaling-stroke; }
/* ── the dark control room (the default look) ── */
.map__graticule { fill: none; stroke: rgba(244, 247, 244, 0.05); stroke-width: 0.6px; }
.map__land { fill: rgba(244, 247, 244, 0.075); }
.map__borders { fill: none; stroke: var(--ink-block); stroke-width: 0.6px; }
/* A reference sits on the land in the land's own grey until the signal reaches
it — so there is nothing to see before it lights, not a green country waiting
under a grey one. Lit, the fill is a THIRD of the green and the edge is all of
it: flat green at full strength turned Russia into a slab that outweighed
every other country on the map. */
.map__ref {
fill: rgba(244, 247, 244, 0.075);
stroke: transparent;
stroke-width: 0.8px;
transition: fill 0.7s var(--ease), stroke 0.7s var(--ease);
}
.map__ref.is-lit { fill: color-mix(in oklab, var(--green-lift), transparent 64%); stroke: var(--green-lift); }
.map__ref.is-hover { fill: color-mix(in oklab, var(--green-lift), transparent 22%); }
.map__node {
fill: #e9fff0;
transform-box: fill-box;
transform-origin: center;
transform: scale(0);
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), fill 0.2s var(--ease);
}
.map__node.is-lit { transform: scale(1); }
.map__node.is-hover { fill: var(--green-lift); transform: scale(1.6); }
.map__ring { fill: none; stroke: var(--green-lift); stroke-width: 1.2px; }
.map__hq-dot { fill: #fff; }
.map__hq-halo {
fill: var(--green-lift);
opacity: 0.35;
transform-box: fill-box;
transform-origin: center;
}
/* Odense keeps a slow pulse once the signal has gone out — the one thing on the
map still transmitting. Never before, so it does not compete with the rings. */
.map.is-done .map__hq-halo { animation: hqPulse 2.6s ease-in-out infinite; }
@keyframes hqPulse {
0%, 100% { transform: scale(1); opacity: 0.35; }
50% { transform: scale(2.1); opacity: 0; }
}
.map__tip {
position: absolute; left: 0; top: 0; z-index: 2;
/* up and to the right of the pointer; the offset grows faster than the label
(x1.40 against x1.25) so the taller label still clears the cursor */
margin: clamp(-3.36rem, calc(-2.4rem - (100vw - 1440px) * 0.013715), -2.4rem) 0 0 clamp(0.9rem, calc(0.9rem + (100vw - 1440px) * 0.005143), 1.26rem);
padding: clamp(0.42rem, calc(0.42rem + (100vw - 1440px) * 0.0024), 0.588rem) clamp(0.62rem, calc(0.62rem + (100vw - 1440px) * 0.003543), 0.868rem) clamp(0.4rem, calc(0.4rem + (100vw - 1440px) * 0.002286), 0.56rem);
font-family: var(--f-mono); font-size: clamp(0.66rem, calc(0.66rem + (100vw - 1440px) * 0.002358), 0.825rem);
letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
background: var(--ink-rev); color: var(--ink-block);
pointer-events: none;
opacity: 0;
transition: opacity 0.15s var(--ease);
}
.map__tip.is-on { opacity: 1; }
/* ── the line drawing (map-test.html) ── */
.map[data-look="line"] .map__graticule { stroke: color-mix(in oklab, var(--ink), transparent 94%); }
.map[data-look="line"] .map__land { fill: none; stroke: color-mix(in oklab, var(--ink), transparent 45%); stroke-width: 0.7px; }
.map[data-look="line"] .map__borders { stroke: color-mix(in oklab, var(--ink), transparent 70%); stroke-width: 0.5px; }
.map[data-look="line"] .map__ref { fill: transparent; }
.map[data-look="line"] .map__ref.is-lit { fill: color-mix(in oklab, var(--green), transparent 18%); stroke: var(--green-deep); }
.map[data-look="line"] .map__ref.is-hover { fill: var(--green-deep); }
.map[data-look="line"] .map__node { fill: var(--ink); }
.map[data-look="line"] .map__node.is-hover { fill: var(--green-deep); }
.map[data-look="line"] .map__ring { stroke: var(--green-deep); }
.map[data-look="line"] .map__hq-dot { fill: var(--ink); }
.map[data-look="line"] .map__hq-halo { fill: var(--green); }
.map[data-look="line"] .map__tip { background: var(--ink); color: var(--paper); }
/* ── the globe (js/globe.js) ──
Headline left, planet right, on anything wide enough to hold both: a globe is
round, and stacked under a headline in a 16:9 screen it could only be as large
as the height the headline left it — 560px at 1440x900. Beside it, the
planet takes the section's full height. Stacked again below 900px, where a
screen is taller than it is wide and the globe is width-bound either way. */
.refs--globe {
display: grid;
grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
grid-template-rows: minmax(0, 1fr);
align-items: center;
column-gap: clamp(1rem, 4vw, clamp(3.6rem, calc(3.6rem + (100vw - 1440px) * 0.020572), 5.04rem));
}
.refs--globe .refs__head { margin: 0; max-width: none; }
.refs__hint {
margin-top: clamp(1.2rem, 3vh, clamp(2rem, calc(2rem + (100vw - 1440px) * 0.005179), 2.3625rem));
font-family: var(--f-mono); font-size: clamp(0.66rem, calc(0.66rem + (100vw - 1440px) * 0.002358), 0.825rem);
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink-rev-2);
}
/* the words are on the element (data-text-*), so each language's page carries its own */
.refs__hint::before { content: "\21BB\2002 " attr(data-text-drag); }
@media (hover: none) { .refs__hint::before { content: "\21BB\2002 " attr(data-text-swipe); } }
.refs--paper .refs__hint { color: var(--ink-2); }
/* When the globe cannot run, globe.js mounts the flat map in its place — which
does not turn. A hint to drag it round would be telling the reader to do
something that does nothing, so it goes; map-test.html hides it the same way. */
.refs:has(.globe--failed) .refs__hint { display: none; }
.globe {
position: relative;
width: 100%;
height: 100%;
min-height: 0;
}
.globe__stage { position: absolute; inset: 0; }
.globe__canvas {
display: block;
width: 100%; height: 100%;
cursor: grab;
/* The browser keeps vertical scrolling and hands the rest to the globe, so a
reader swiping down the page past it can never be caught by it. The same
trade the unit's box makes, for the same reason. */
touch-action: pan-y;
}
.globe.is-dragging .globe__canvas { cursor: grabbing; }
.globe--failed .globe__stage { display: none; }
.globe[data-look="line"] .map__tip { background: var(--ink); color: var(--paper); }
@media (max-width: 899px) {
.refs--globe {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
row-gap: clamp(0.5rem, 2vh, 1.5rem);
}
}
@media (prefers-reduced-motion: reduce) {
.map__ref, .map__node { transition: none; }
.map.is-done .map__hq-halo { animation: none; }
}
/* ══════════════ HOW A UNIT IS MADE ══════════════
The page's third scroll-driven section and deliberately its quietest: no
scrub, no ScrollTrigger pin, no pin-spacer, no progress meter. The frame is a
plain position:sticky box — the same choice .creed__pin, .rig__pin and
.cost__pin already make — and the only thing JS does is say which of five
plates is showing. */
.proc {
/* BOTH declarations are load-bearing and neither works alone.
.proc__sheet is a POSITIONED, z-auto element, so without a negative z-index
it paints in step 8 of the painting order — ABOVE .wrap's non-positioned
in-flow content, whatever the source order — and the lattice prints straight
across the headline. .rig never meets this because nothing inside .rig__pin
is unpositioned (.rig__copy z-index 2, .rig__step z-index 3, .rig__stage and
.rig__word both absolute).
But `position:relative; z-index:auto` is NOT a stacking context, so a -1
child would escape to the root context and fall behind .proc's own opaque
--paper — invisible. isolation makes .proc a stacking context WITHOUT giving
it a z-index, which is what keeps it out of the argument with .cost's
z-index 2 entirely. (The site's own -1 precedent, .rig__copy::after, works
only because .rig__copy carries z-index 2; isolation is .trigger's idiom.) */
position: relative;
isolation: isolate;
background: var(--paper);
/* Deep opening air. The reader arrives MID-WIPE — .cost__pin is still sliding
off the top of the screen for a full 100svh — so the first screen of this
section is spent being wiped into and nothing legible may sit in it. At
22svh the eyebrow does not enter until the boundary is four fifths off, and
what arrives before it is the drawing sheet, not a blank. svh and not vh
because the thing it is measured against is .cost's own 290svh. */
padding: clamp(7rem, 22svh, clamp(15rem, calc(15rem + (100vw - 1440px) * 0.03322), 277.2px)) var(--pad) clamp(4rem, 10vh, clamp(7rem, calc(7rem + (100vw - 1440px) * 0.0125), 126px));
/* The header is fixed at 74; without this an anchor lands the eyebrow under
the band. Read by both routes an anchor can take: the browser's own jump
honours it directly, and main.js's Lenis route reads it back as the offset. */
scroll-margin-top: var(--head-h);
}
.proc__head { margin-bottom: clamp(3rem, 9vh, clamp(6rem, calc(6rem + (100vw - 1440px) * 0.01554), 113.4px)); }
/* The measure goes on the TYPE and never on a wrapper: `ch` resolves against
the element's OWN font-size, so a max-width on .proc__head would compute at
the body's 16px (~264px) and swallow both of these whole. Same rule as
.cost__head h2 { max-width: 19ch }.
Sentence case where .cost__head h2 is uppercase: that section is a mechanism
announcing itself, this one is a chapter of a document. */
.proc__head h2 {
margin: clamp(1.3rem, calc(1.3rem + (100vw - 1440px) * 0.007429), 29.12px) 0 clamp(0.9rem, calc(0.9rem + (100vw - 1440px) * 0.005143), 20.16px);
max-width: 20ch;
font-size: clamp(2rem, 4.4vw, clamp(3.4rem, calc(3.4rem + (100vw - 1440px) * 0.02822), 86px));
}
.proc__lede {
max-width: 44ch;
font-size: clamp(0.95rem, min(1.1vw, calc(15.84px + (100vw - 1440px) * 0.00495)), 21.38px); /* character-identical to .cost__lede */
color: var(--ink-2);
text-wrap: pretty;
}
.proc__grid {
position: relative; /* the sheet's containing block */
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2rem, min(5vw, calc(72px + (100vw - 1440px) * 0.02572)), 100.8px);
/* REQUIRED, and it does two jobs. A grid item's containing block is its GRID
AREA, so the sticky column can only travel inside the row — and under the
default `stretch` the item fills the row exactly and has nowhere to go.
`start` also makes the frame LET GO at the bottom of the steps column,
before the closing rule, so the page ends on a composition standing still
where .cost today ends on a locked one. */
align-items: start;
}
/* The rig's drawing sheet, carried across the join — same 56px pitch, so it
reads as the same sheet, and it is what makes the arriving paper land as A
SHEET rather than as a blank.
At the rig's own RENDERED weight, not its alpha: .rig__grid is ink at 8%
under opacity .5, which its comment at 1119-1127 measures as 8.2 levels below
paper. Ink at 6% with no multiplier renders 12.4 — half again LOUDER than the
sheet it claims to defer to. Same recipe, same result, no new number.
STATIC. .rig__grid's opacity rides --t and --asm, which are .rig-scoped and
written by product.js; copied verbatim it would compute to 0 and be invisible.
It also must not become a fourth scrubbed thing on this page.
RADIAL and not a left-to-right ramp, for the reason .rig__grid's own comment
gives at 1140: a mask that dies on one axis leaves the lines running into the
other three edges and the whole thing reads as a table.
Anchored to .proc__grid and bled one page-margin left, which is what makes the
mask honest: a percentage of the SECTION is a percentage of the viewport, and
above 1450px the column stops growing while the viewport does not. Against
this box the photo column runs 4.7%->49.7% and the text column starts at 55.0%
at 1024, 1440, 1920 AND 2560. It will not line up with the rig's lattice —
different section, different origin. That is fine; it is a sheet idiom, not
one continuous drawing. */
.proc__sheet {
position: absolute; z-index: -1;
top: calc(clamp(2rem, 6vh, clamp(4rem, calc(4rem + (100vw - 1440px) * 0.01036), 75.6px)) * -1);
bottom: calc(clamp(2rem, 6vh, clamp(4rem, calc(4rem + (100vw - 1440px) * 0.01036), 75.6px)) * -1);
left: calc(var(--pad) * -1);
right: 0;
--line: color-mix(in oklab, var(--ink), transparent 92%);
background-image:
repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 56px),
repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 56px);
-webkit-mask-image: radial-gradient(40% 58% at 24% 48%, #000 0 34%, transparent 78%);
mask-image: radial-gradient(40% 58% at 24% 48%, #000 0 34%, transparent 78%);
opacity: 0.5;
pointer-events: none;
}
.proc__media {
position: sticky;
/* NOT the .creed__pin / .cost__pin idiom of a full-height sticky box with its
payload centred inside it. A grid item sticks only inside its own grid area,
the area is the row the