, UA-normal by default) read at the SAME weight — the brief's
literal size/leading/tracking values are kept verbatim below, but a
weight has to be set here or the two states would visibly mismatch. */
font-weight: var(--fw-medium);
font-size: clamp(32px, 4.6vw, 76px);
line-height: 1.08; letter-spacing: -0.02em;
max-width: 18ch; margin: 0 auto;
}
/* PHONE-ONLY LINE BREAKS. index.html carries two in each intro headline; at
this width and up they do not exist, so the desktop lines wrap on their own
exactly as they always have. The spaces around them are kept in the markup,
so hiding them leaves ordinary word spacing behind.
Stated as "off above 761px" rather than "on below it" on purpose: a
switched off with display:none and back on with an explicit display value
is relying on the browser treating an inline
as a break, which is not
something to bet a layout on. Below the breakpoint these are simply
elements doing what
does. */
@media (min-width: 761px) {
.intro__brk { display: none; }
}
/* Resting state (no html.motion) = ALL THREE states shown, stacked and
readable via the flex-column on .intro__states above. Previously this
section set state 1 and state 2 to display:none, leaving state 3 (which
also carried aria-hidden, removed in index.html) as the ONLY content in
the intro for any visitor without motion — no heading, nothing in the
accessibility tree. Nothing here overrides state 1's or state 2's
display any more: state 1 keeps its own unconditional flex-column rule
above (needed in BOTH modes for its internal avatar/greeting/titles
layout), and state 2/3 use their plain UA block display, which is
exactly what stacks them in flow once .intro__states stops being a
same-cell grid. Under html.motion, .intro__states switches to the
overlaid grid above and js/scenes-intro.js crossfades between the three
via opacity — grid-area only takes effect once the parent is actually a
grid, which only html.motion makes it, so this needs no rule here. */
/* ============================================================
MORPHING DISPLAY HEADLINE
#morphHead is fixed and sits BEHIND the sections (z-index 1),
so once it settles it reads as the watermark in sketches
3 / 3.2 / 3.4 / 4 — visible through the gaps between cards.
#mheadSlot is an invisible measuring twin, but NOT at the final
size and place. It is overridden below (the `#mheadSlot { ... }`
rule) to sit at the LANDED middle-left, large-type position,
because that is where the headline arrives: readable full size,
middle-left, before it shrinks.
So the headline's TWO states both live here, in CSS, and
js/headline.js reads them at runtime rather than carrying
numbers of its own — #mheadSlot's rect for the landed state, and
a plain unoverridden `.mhead` rect for the watermark. Neither
position is ever hard-coded in JS, and both stay correct at every
viewport width. Everything that module writes is an interpolation
between the two.
============================================================ */
.mhead {
position: fixed;
left: var(--gutter);
top: var(--mhead-top);
z-index: 1;
/* Hugs its own two lines. There is deliberately NO width cap here any more.
It used to be `min(100vw - gutters, 6em)`, chosen because "SELECTED" is
~4.6em wide and "SELECTED WORK." ~8.1em, so a 6em box forced the break
between the two words at every viewport. That worked only for as long as
the text was the text: while the first word scrambles through random
characters on its way to "OTHER", a wide frame no longer fits the cap the
same way, and the headline reflowed and collapsed onto one line
mid-change (measured: 786px -> 918 -> 1002 -> 786, one line at the
widest). The break is structural now — see .mhead__word — so no string
can move it, and the cap has nothing left to do. */
width: max-content;
max-width: calc(100vw - var(--gutter) * 2);
font-size: var(--mhead-fs);
font-weight: var(--fw-bold);
line-height: 0.9;
letter-spacing: var(--tracking-display);
color: var(--watermark);
transform-origin: 0 0;
pointer-events: none;
contain: layout style; /* keeps per-frame font-size writes off the page's layout */
}
/* ONE WORD PER LINE, by structure. Two lines is now a fact of the markup
rather than a consequence of the current string's width, which is what
makes it survive the scramble. white-space: nowrap is the other half: the
glyphs inside a word are inline-blocks, and without it the browser is free
to break BETWEEN any two of them. */
.mhead__word { display: block; white-space: nowrap; }
.mhead--slot { visibility: hidden; }
/* will-change scoped to #morphHead specifically, not the shared .mhead
class both it and #mheadSlot carry — #mheadSlot is visibility:hidden and
never animated (it exists purely to be measured), so a class-level rule
here would promote it to its own compositor layer for the page's entire
life for no reason. Also gated on html.motion: under no-motion nothing
in this codebase ever writes to #morphHead per-frame, so there is
nothing to hint. font-size is deliberately dropped from the hint — it
is not a compositable property (will-change only pays off for
properties the compositor can update without a layout/paint pass, e.g.
transform/opacity), so including it just holds a promoted layer's
memory for a property that forces layout regardless. */
html.motion #morphHead { will-change: transform; }
/* Requirement 10's landed target — middle-left, large type. An ID
selector (0,1,0,0), not a class, so it beats .mhead's own top/font-size
(0,0,1,0) regardless of source order and applies ONLY to this one
element — #morphHead keeps .mhead's plain base rule (the small, top-left
watermark) as ITS default, and js/headline.js interpolates toward these
numbers. top:50% + translateY(-50%) is genuine CSS vertical centring —
correct regardless of the element's own (font-size- and
line-count-dependent) height, and its output already reflects in
getBoundingClientRect() for both this element's own rect and its
per-glyph child rects, so nothing downstream needs its own centring
math. */
#mheadSlot {
top: 50%;
transform: translateY(-50%);
font-size: var(--mhead-fs-landed);
}
/* Before JS takes over, the live head must not sit on top of the intro. */
html.motion #morphHead { opacity: 0; }
/* ============================================================
THE HEADLINE'S GLYPHS — js/headline.js splits each word of
#morphHead into one span per character so each can arrive from
its own point outside the frame, and so each can hold a pinned
width while random characters pass through it.
display: inline-block, not the spans' default inline — this is
load-bearing, not cosmetic. CSS transform has NO EFFECT on a
non-replaced inline box, confirmed directly in this project's own
target engine (a plain inline 's transform: translate() was
a measured, verified 0,0 — completely inert — while the identical
transform on an inline-block sibling moved it exactly as written).
An inline box also cannot take a width, and the pinned width is
what stops the headline relaying out on every frame of the
scramble. Without this rule neither half of the feature works.
No width or transform is declared here: js/headline.js writes
both on every frame, and a resting value in CSS would be a second
writer for a property that has exactly one.
A no-motion page never runs js/headline.js (it bails at
V3.ready), so the split never happens and #morphHead stays two
plain words. These rules are therefore only ever exercised under
html.motion, but are left unscoped since they are harmless — and
correct — either way.
============================================================ */
.mhead__ch { display: inline-block; }
/* ============================================================
HEAD HOLD — the empty scroll runway the landed "SELECTED WORK."
headline holds over before it shrinks to the watermark. See
index.html's own note on #headHold for why it has to be empty, and
js/headline.js's measureAnchors() for how this height is split
into the hold and the shrink.
40vh, and the range js/headline.js derives from it is this height
PLUS one viewport: the hold starts where #intro's own bottom
reaches the viewport bottom and ends where #work's stage pins,
which is this box's document bottom. That alignment is the point —
the shrink finishes and the first slide begins on the same pixel,
with no blank screen between them.
The resulting range splits two-thirds to the hold and one-third to
the shrink: roughly 840px of holding and 420px of shrinking at a
900px viewport, several unhurried wheel notches to read it in.
Zero height without html.motion: nothing flies, nothing lands and
nothing shrinks there, so this would be a screen and a third of
dead scrolling between the intro and the work for exactly the
visitors least able to afford it.
============================================================ */
.headhold { height: 0; }
html.motion .headhold { height: 40vh; }
/* ============================================================
WORK — four slides through one pinned stage
claude-handover/new-interaction-work/. See index.html for the
slide list; js/scenes-work.js owns the choreography.
============================================================ */
.work { position: relative; }
/* The runway. Five slides, each with an entry, a hold of several scroll
points and an exit, need roughly a screen and a half apiece — same
reasoning as the intro's 800vh: a scroll-driven sequence can only buy
pacing with distance. Gated on html.motion so a no-motion visitor gets a
normally-flowing section of exactly its content's height instead of six
screens of empty scrolling. */
/* The pinned slideshow is desktop-only, and everything about it — the
runway, the sticky stage, the stacked layers and the start states that
hide each slide's contents — is gated on the SAME breakpoint, in one
place, so none of them can be live without the others.
The reason is a fit problem, not a taste one: a slide is pinned to the
viewport, so its content has to fit in one screen. At 375px the three
other-work cards stack into a single column 1,190px tall inside a 748px
stage — measured — and there is no version of "pin it" that makes that
readable. Below the breakpoint the four slides simply stack and scroll,
which is also what the no-motion page does.
js/scenes-work.js gates itself on the identical query via gsap.matchMedia,
so crossing the breakpoint on a resize builds or reverts the whole scene
rather than leaving a half-applied one behind. */
@media (min-width: 761px) {
html.motion .work { height: 520vh; }
}
/* No-motion: an ordinary column. Every slide is in flow, in order, at full
opacity — the resting state IS the readable page. */
.work__stage {
display: flex; flex-direction: column;
gap: clamp(56px, 9vw, 140px);
padding-block: clamp(56px, 9vw, 170px);
}
@media (min-width: 761px) {
html.motion .work__stage {
position: sticky; top: var(--header-h, 88px);
height: calc(100vh - var(--header-h, 88px));
height: calc(100svh - var(--header-h, 88px));
display: grid; grid-template-areas: "stack"; place-items: center;
gap: 0; padding-block: 0;
}
}
/* Under motion every slide occupies the same cell, so switching between them
cannot reflow anything — the page is still and only the content changes,
the same property the intro's three states rely on. */
@media (min-width: 761px) {
html.motion .wslide {
grid-area: stack;
place-self: stretch;
display: flex; flex-direction: column; justify-content: center;
width: 100%;
/* pointer-events are re-enabled per slide by js/scenes-work.js as each
one becomes the live slide — otherwise all five stacked layers would
be hit-testable at once and the topmost invisible one would swallow
every click meant for the visible one. */
pointer-events: none;
}
html.motion .wslide.is-live { pointer-events: auto; }
html.motion .wslide--head { height: auto; }
}
/* The headline-only slide has no content of its own — #morphHead is what is
on screen for it. Zero height in flow so it adds nothing to the stacked
reading order. */
.wslide--head { height: 0; }
/* ============================================================
SELECTED WORK — sketch "Homepage 3 (selected)" / 3.1–3.4
============================================================ */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* The two full-bleed rules that bracket the HAZEN row. */
.srule {
height: 1px;
background: var(--black-1);
transform-origin: left center;
}
.srule--bottom { transform-origin: right center; }
/* ---------- Shared pill ---------- */
.pill {
display: inline-flex;
align-items: center;
border: 1px solid var(--black-1);
border-radius: 999px;
padding: 6px 14px;
font-size: var(--fs-body-sm);
font-weight: var(--fw-regular);
letter-spacing: -0.01em;
line-height: 1.2;
white-space: nowrap;
}
/* ---------- HAZEN row ---------- */
.hazen {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr) minmax(200px, 1fr);
gap: clamp(24px, 3vw, 60px);
align-items: start;
padding-block: clamp(40px, 5vw, 96px);
}
.hazen__lead { display: flex; flex-direction: column; gap: clamp(14px, 1.4vw, 24px); align-items: flex-start; }
.hazen__title { font-weight: var(--fw-regular); }
.hazen__pill { margin: 0; }
.hazen__media {
/* Amanda's clip is 850x532 native, and 850 is the cap she asked for -- so
the box is exactly the clip, never an upscale and never a crop. Not the
8:5 the pairs use: this one has a ratio of its own. */
aspect-ratio: 850 / 532;
max-width: 850px;
transform-origin: center center;
}
.hazen__media img { width: 100%; height: 100%; object-fit: cover; }
/* Sits low in its column, as in the sketch. */
.hazen__desc { align-self: end; max-width: 34ch; }
/* ---------- The paired projects (slides 2 and 3) ----------
Two cards, deliberately not aligned: the left one carries its text ABOVE
its image, the right one below, and the right one rides --swork-split lower
so their images stagger. That offset is the same quantity, and the same
token, the old two-column grid used — see its note below for why it is
built from the meta block's own tokens rather than a flat clamp. */
.wpair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(20px, 4.6vw, 89px);
align-items: start;
}
.wcard {
display: flex; flex-direction: column;
gap: var(--swork-card-gap);
color: inherit;
}
.wcard--r {
margin-top: calc(
var(--swork-title-line) /* the left card's title line box */
+ var(--swork-meta-gap) /* its title -> tags gap */
+ var(--swork-pill-h) /* its row of tag pills */
+ var(--swork-card-gap) /* its meta block -> image gap */
+ var(--swork-split) /* and THEN the sketch's offset */
);
}
.wcard__media {
/* Amanda's clips are 800x500 native. The box matches that ratio, and stops
growing at their own width -- past 800px every one of them would be an
upscale, and the pair columns only reach ~815px at the widest anyway. */
aspect-ratio: 8 / 5;
max-width: 800px;
transform-origin: center center;
}
/* The video, the canvas, the container colour and the click all live in
css/master-thumb.css now -- they are the same on the homepage and in the
master-suggestion section, and .thumb is what carries them. What stays here
is only this page's own sizing. */
.wcard__meta { display: flex; flex-direction: column; gap: var(--swork-meta-gap); align-items: flex-start; }
.wcard__title { font-weight: var(--fw-regular); }
.wcard__tags { display: flex; flex-wrap: wrap; gap: 8px; }
/* THE OFFSET IS BETWEEN THE TWO IMAGES, not between the two cards.
The sketch (selected-slide2/3.png) puts the right card's IMAGE ~66px BELOW
the left card's image. But the left card carries its title and tags ABOVE
its image, so its image already starts one meta-block lower than the card
does — while the right card's image starts at the very top of its own card.
A flat `margin-top: 66px` on the right card therefore lands its image ABOVE
the left one, which is the opposite of the sketch: measured, the right image
sat 40px HIGHER than the left instead of 66px lower, a 106px error.
So the margin has to pay back the left card's meta block first, and only
then apply the offset. Every term below is the exact expression of the box
it names — the same tokens the meta block is actually built from — so the
sum is right at every width by construction rather than at the widths
someone happened to check.
(This arithmetic existed and was correct for the earlier two-column layout;
it was dropped during the rebuild on the false reasoning that a side-by-side
row made it unnecessary. It does not: the asymmetry is inside the card, not
between the columns.)
Precondition, same as before: one line of title, one row of tags. Below
1000px the pair stacks and the offset goes to zero, so it does not apply. */
:root {
--swork-split: 66px;
--swork-meta-gap: clamp(10px, 1vw, 16px);
--swork-card-gap: clamp(12px, 1.4vw, 24px);
--swork-title-line: calc(var(--fs-h3) * var(--lh-tight));
/* One pill: its own line box, plus 6px padding and a 1px border, twice. */
--swork-pill-h: calc(var(--fs-body-sm) * 1.2 + 14px);
}
@media (max-width: 1000px) {
.wpair { grid-template-columns: 1fr; gap: clamp(32px, 6vw, 56px); }
/* One column, so the stagger has nothing to stagger against. column-reverse
(not column) puts the right card's title above its image like the left
card's, so every card in the stack reads title-first and the rhythm stays
regular — the two-column layout is the only place the inverted order
means anything. */
.wcard--r { margin-top: 0; flex-direction: column-reverse; }
}
@media (max-width: 760px) {
.hazen { grid-template-columns: 1fr; }
.hazen__desc { align-self: start; max-width: none; }
}
/* ---------- Motion-only start states for #selected ----------
Resting (no-JS / reduced-motion) these elements are fully drawn.
These rules apply only once motion-core has added html.motion, so
a failed script load can never leave the section blank. */
@media (min-width: 761px) {
html.motion .srule { transform: scaleX(0); }
html.motion .hazen__title,
html.motion .hazen__pill,
html.motion .hazen__desc { opacity: 0; }
html.motion .hazen__media { opacity: 0; transform: scale(0.2); }
}
/* ---------- Motion-only start states for the paired cards ----------
Oversized, blurred, and — new this round — well OUT OF FRAME. Amanda:
"they should come a bit further and 65% of their thumbnails are outframe".
The travel itself is written by js/scenes-work.js as a fraction of each
card's own measured size (left cards from the top-left, right cards from
the bottom-right), because a fixed px offset would put a 1920px card and a
375px card in completely different places relative to the frame. Only the
scale/blur/opacity floor lives here, so the resting CSS is still the final
state. */
@media (min-width: 761px) {
html.motion .wcard__media { opacity: 0; transform: scale(1.38); filter: blur(18px); }
html.motion .wcard__meta { opacity: 0; }
/* The cards must be allowed to spill past the grid while oversized. */
html.motion .wpair { overflow: visible; }
}
/* ============================================================
OTHER WORK — sketch "Homepage 4 (others)"
A SLIDE of its own. Amanda: "The 3 items appear like a slide
show instead. Just like the selected section." So this section
is a scroll runway with a sticky stage in it, and the three
cards rise in, hold alone on screen, and leave upward
(js/scenes-outro.js). The hold is what "separated from the
bottom CTA and footer section" means in practice — there is a
stretch where these three are the only thing there.
Gated at 901px, which is where the grid still has all three
side by side. At two columns and then one the grid is taller
than a stage, so below that this stays ordinary flow with the
padding below and a plain reveal.
============================================================ */
.other { padding-block: clamp(90px, 14vw, 240px) clamp(40px, 6vw, 90px); }
@media (min-width: 901px) {
/* The runway. All of it is scroll for the one slide to move through:
~1,170px of it at a 900px viewport, split roughly 210 / 750 / 210
between the entrance, the hold and the exit. */
html.motion .other { height: 240vh; padding-block: 0; }
html.motion .other__stage {
position: sticky;
top: var(--header-h, 88px);
height: calc(100vh - var(--header-h, 88px));
height: calc(100svh - var(--header-h, 88px));
display: grid;
place-items: center;
}
html.motion .other__stage > .owork { width: 100%; }
}
.owork {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 1.3vw, 25px);
}
.owork__card { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 20px); color: inherit; }
/* 8:5, the same as the selected pairs. Amanda: "please make them 8:5 size as
well, to make them all consistent." It was 8:7 here and 8:5 only on a phone,
which is what the ≤760px override below existed to patch; one ratio now, so
that override is gone. */
.owork__media { aspect-ratio: 8 / 5; background: #bfbfbf; overflow: hidden; }
.owork__media img {
width: 100%; height: 100%; object-fit: cover;
/* These three are stills, so the hover is the whole affordance -- Amanda:
"just zooming in a bit. To indicate that the thumbnails is clickable."
The zoom is on the IMAGE inside the box, which has overflow: hidden, so
the frame stays put and nothing reflows around it. */
transform: scale(1);
transition: transform 0.55s var(--ease-out);
will-change: transform;
}
.owork__card:hover .owork__media img,
.owork__card:focus-visible .owork__media img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
.owork__media img { transition: none; }
.owork__card:hover .owork__media img { transform: none; }
}
.owork__title { font-weight: var(--fw-medium); margin-top: clamp(4px, 0.5vw, 10px); }
.owork__tags { display: flex; flex-wrap: wrap; gap: 8px; }
/* Start state for both paths — the slide above and the plain reveal below
901px. Declared in CSS rather than written by JS at build time so there is
no frame where the cards are visible before the scene takes them, and
gated on html.motion so a no-motion page never hides them at all. */
html.motion .owork__card { opacity: 0; transform: translateY(60px); }
@media (max-width: 900px) { .owork { grid-template-columns: repeat(2, 1fr); row-gap: clamp(32px, 6vw, 56px); } }
@media (max-width: 640px) { .owork { grid-template-columns: 1fr; row-gap: clamp(32px, 8vw, 48px); } }
/* ============================================================
INTRO — "AI" / "the polish" scan into their decorative forms
ONE full-height vertical seam travels left to right across the
word. Left of the seam is the AFTER (decorative) form; right of
it is the BEFORE (plain headline) form. Both are clipped at the
SAME x, so there is exactly one edge on screen and the two
letterforms never overlap — Amanda's reference image of "the
polish" caught mid-scan, script on the left, sans on the right,
joined by a single vertical line.
This replaces a one-sided clip that only revealed AFTER and left
BEFORE sitting underneath at full opacity. Because both AFTER
SVGs are STROKED OUTLINES rather than filled glyphs, BEFORE's
solid letterforms read straight through AFTER's transparent
interiors — two superimposed words, not one. That needed a
separate "hide BEFORE once its own wipe finishes" step to paper
over; clipping BEFORE away as the seam passes removes the
overlap by construction, so that step is gone.
---- Sizing (Amanda: "keep the before form text size similar to
the whole headline2 text ... right now both have their own sizes
which makes it looks more like glitch") ----
All four SVGs are cropped tight to their own ink — confirmed by
getBBox() on every path: the combined bbox equals the viewBox in
all four files. So `height: 1em`, which the BEFORE images used to
carry, was wrong by a different factor for each word: 1em is the
FONT SIZE, but each image's own height is its INK height, and the
two words have very different ink-to-em ratios. "AI" is 56 units
of pure cap-height (no ascender above it, no descender below), so
forcing it to 1em rendered it ~1.36x larger than the "I use" and
"to scale it" around it; "the polish" is 74 units of ascender-to-
descender, ~1.03x. Two unrelated magnifications on two words in
one sentence is exactly the "glitch" reading.
The fix is to stop guessing the ratio and measure it. js/scenes-
intro.js measures each phrase's real rendered INK height with
canvas measureText().actualBoundingBoxAscent/Descent in the
headline's own computed font, and writes it to --ink-ai /
--ink-polish below. Ink height (not advance width) is the right
quantity because it is exactly what the SVG's viewBox height is,
and because it is immune to letter-spacing, which .intro__h
applies (-0.02em) and the traced SVGs do not.
Every other number here is then a pure ratio off that one measured
value, so the whole word scales as one piece:
AI before 69x56 -> after 123x62
polish before 340x74 -> after 286x114
Note "the polish" gets NARROWER after (0.84x) even though it reads
much bigger: its extra height is tall script ascenders and
descenders, not extra horizontal run. That is what Amanda's own
frames show — Frame 5's second line measures narrower than Frame
3's and recentres. "AI" does get wider (1.78x), and its following
word ("to") moves right accordingly.
The em values below are only a pre-JS / no-canvas fallback (they
are the ratios the two SVGs imply for a ~78px trace, i.e. what the
measurement should land near); the measured value always wins.
============================================================ */
#introHeadline3 {
--ink-ai: 0.72em; --ink-polish: 0.95em;
--desc-ai: 0em; --desc-polish: 0.20em;
}
.intro__word { position: relative; display: inline-block; vertical-align: baseline; }
/* max-width: none overrides css/styles.css's global `img { max-width: 100% }`
reset. That reset resolves its percentage against the nearest positioned
ancestor — .intro__word — which js/scenes-intro.js gives an explicit px
width for the scan below; without this override the AFTER image's real
(wider) intrinsic width was being clamped straight back down to BEFORE's
width, silently discarding the whole point of the scan (found by
measurement: getBoundingClientRect on the AFTER image reported exactly the
container's width, not its own 123x62 / 286x114 intrinsic ratio, until
this line was added). */
.intro__word-img { display: block; width: auto; max-width: none; }
.intro__word--ai .intro__word-img--before { height: var(--ink-ai); }
.intro__word--polish .intro__word-img--before { height: var(--ink-polish); }
/* BASELINE. Every one of these images is anchored by its BOTTOM EDGE to
.intro__word's own bottom — which, because .intro__word-img is
display:block and so gives the span no in-flow line boxes, is exactly
what the surrounding text's vertical-align: baseline aligns to. But an
image's bottom edge is the bottom of its INK, and for any word with a
descender that is BELOW the baseline, not on it. Anchoring the descender
tip to the baseline lifts the whole word by the descender's depth.
"AI" has no descender at all (measured: actualBoundingBoxDescent is
exactly 0), which is why it has always looked right and why this went
unnoticed. "the polish" has the "p", and it rendered ~12px high at a
1280px viewport — clearly visible against "without losing" on the same
line, and caught in a screenshot rather than by reading the CSS.
The shift is each phrase's own measured descent, written by
js/scenes-intro.js from the same measureText() call as --ink-*. Keeping
--desc-ai in the rule set even though it is 0 means both words are
described by one mechanism rather than one being a special case.
transform, not bottom:, for the same reason as the AFTER rule below —
bottom only moves a positioned box, and the no-motion state makes these
static. */
.intro__word--ai .intro__word-img--before { transform: translateY(var(--desc-ai)); }
.intro__word--polish .intro__word-img--before { transform: translateY(var(--desc-polish)); }
.intro__word--ai .intro__word-img--after { height: calc(var(--ink-ai) * 62 / 56); }
.intro__word--polish .intro__word-img--after { height: calc(var(--ink-polish) * 114 / 74); }
.intro__word-img--after {
position: absolute;
left: 0; bottom: 0;
/* Hidden at rest; js/scenes-intro.js drives both this inset and BEFORE's
from the one shared seam position. */
clip-path: inset(0 100% 0 0);
}
/* text_polish_after.svg's own non-descending letters ("t/h/e/o/l/i/s/h") sit
at y≈84.4 of its 0-114 viewBox — measured via getBBox() on each