/* filmmaker.html — PAGE 2 · THE FILMMAKER (merged from prototype
film-preview-patterns variant G — "Parallax feature", laurel-grid).
MERGE AUDIT 2026-08-01 — what changed against the throwaway prototype:
- Body font Piazzolla → the contract's Bitter (Matthew's verdict 2026-07-31).
The prototype redeclared the whole palette + type stack inline, which the
binding style contract forbids; this file declares NO colour, font, type
size, easing or radius. Structure only.
- Prototype chrome deleted: variant query-param machinery, the A–F grid
layouts, the cinema dialog (G is modal-free by design), the switcher,
the prototype mark, arrow-key variant navigation.
- Atmosphere: the prototype painted a static #15130d behind everything.
Page 2 now runs the SAME atmosphere as page 1 — grade-base river tinted
per section (data-tint), drift, grain — via access.css, and the same
river/reveal JS pattern.
- Reveals moved from the prototype's .has-js/.in pattern to the contract's
.reveal/.is-in + --i stagger.
- Parallax moved from `transform` to the independent `translate` property
so .reveal (which owns `transform`) and the scroll parallax can compose
on the same element instead of fighting over one property.
- Header, curtains, cues, hero-reveal stagger, footer: site.css, shared
with page 1.
Section tints are chosen FROM page 1's own river stops so the cross-page
flow stays in one palette: record/commissions borrow The Inspiration's
warm #16130d, bio takes Development's #131817 (the exact midpoint that
lets the river flow record-warm → bio → films-cool), films echoes The
Film's #102523, contact echoes Industry Access's #201d13. */
/* ---------- 1 · HERO — main-on-end title card ------------------------------
Same skeleton as page 1's hero (plate + grade + copy + settle), composed
as a credits title card instead of a wide establishing shot. */
.hero{min-height:100svh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* The feather — page 1's `.hero-frame` mask, which page 2 was ported without.
Both layers run to the hero's bottom edge and stop dead there: the grade's
last stop is 92% black over an already-dark plate, while the section below
starts at its own tint. That step drew a hard rule straight across the page
at the boundary — the same "faint hard line" page 1's hero comment says must
not exist. It has been there since the hero was built; The Record only made
it obvious, by pulling its content up next to the seam when the static
framings dropped the empty space.
Colour is irrelevant to a mask (only alpha is read), so the opaque stop uses
a token rather than a literal. Both layers carry the SAME ramp so they fade
as one and reach full transparency exactly at the bottom edge, making that
row identical to the row below it. */
.hero-plate,
.hero-grade{
-webkit-mask-image:linear-gradient(180deg, var(--black) 86%, transparent 100%);
mask-image:linear-gradient(180deg, var(--black) 86%, transparent 100%);
}
.hero-plate{position:absolute;inset:0}
.hero-plate img{
width:100%;height:100%;object-fit:cover;object-position:center 38%;
transform:scale(var(--settle-scale));
animation:settle var(--settle-duration) var(--ease) forwards;
}
@keyframes settle{to{transform:scale(1.04)}}
.hero-grade{
position:absolute;inset:0;
background:
radial-gradient(90vw 70vh at 50% 46%, transparent 0,
color-mix(in srgb, var(--black) 55%, transparent) 68%,
color-mix(in srgb, var(--black) 90%, transparent)),
linear-gradient(180deg,
color-mix(in srgb, var(--black) 60%, transparent),
transparent 30%, transparent 62%,
color-mix(in srgb, var(--black) 92%, transparent));
}
.hero-card{position:relative;z-index:4;text-align:center;padding:clamp(4rem,8vh,6rem) 1.2rem}
.hero-card .kicker{margin:0}
.hero-role{
margin-top:clamp(2.4rem,5vh,3.6rem);
font-family:var(--font-display);font-size:calc(var(--text-label) * 1.35);font-weight:500;
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent);
}
.hero-card h1{
margin-top:1.4rem;font-size:var(--text-h1);text-wrap:balance;
/* 2026-08-16 (Matthew, /brain): lift, not fog — a tight contact shadow
separates the letterforms from the lit plate; the wide halo stays for
the surrounding falloff. Size deliberately unchanged (near clamp max). */
text-shadow:
0 2px 3px color-mix(in srgb, var(--black) 85%, transparent),
0 10px 28px color-mix(in srgb, var(--black) 60%, transparent),
0 2px 40px color-mix(in srgb, var(--black) 55%, transparent);
}
/* The italic came off 2026-08-14 (Matthew). --font-body is Dosis, which ships
no italic face — `font-style:italic` was rendering as a browser-SYNTHESISED
oblique: a mechanical slant applied to a thin rounded geometric sans. It
degrades the line at every size; against page 2's black it was merely
invisible, and on a phone (over the plate) it was the difference between
hard-to-read and unreadable. The line keeps its distinction from its
uppercase neighbours by being sentence-case body copy, which is enough. */
/* The halo is the same device h1 already carries two rules up, at a tighter
radius. Mobile is where this line failed, but it is not a mobile-only
defect: at 1440x900 the beam passes through this line too, and only its
position in the hierarchy (small, dim, unbolded) hid it. The portrait block
below fixes the phone by moving the plate; this keeps the line honest on
every viewport without touching the composition. */
.hero-position{
margin-top:1.8rem;
font-family:var(--font-body);font-size:var(--text-body);
color:var(--ink); /* one token up from --ink-dim (2026-08-16) — the plate eats a step */
text-shadow:
0 1px 2px color-mix(in srgb, var(--black) 80%, transparent),
0 1px 18px color-mix(in srgb, var(--black) 70%, transparent);
}
.hero-card .cue{
margin-top:clamp(2.2rem,5vh,3.2rem);color:var(--ink);
text-shadow:0 1px 2px color-mix(in srgb, var(--black) 80%, transparent);
}
/* E1 (2026-08-12): the record's one-liner as in-hero proof — the retired
Record section's `line` framing, spoken at hero scale */
.hero-record{
margin-top:clamp(2rem,4.5vh,3rem);
display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;
gap:clamp(.7rem,2vw,1.3rem);
font-family:var(--font-display);font-weight:700;
font-size:clamp(1rem,2vw,1.5rem);line-height:1.2;
letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
text-shadow:0 1px 2px color-mix(in srgb, var(--black) 80%, transparent);
}
.hero-record__sep{color:var(--accent)}
/* the record's digits (2026-08-13, Matthew: numerals over words) carry the
page's gold hairline — same stroke the name draws under itself — and the
site's -2px lift when their stat is hovered (inline-block: a plain inline
can't transform) */
.hero-record u{
display:inline-block;
text-decoration:none;
border-bottom:1px solid var(--accent);
padding-bottom:.14em;
transition:transform var(--duration-ui) var(--ease);
}
.hero-record span:hover u{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){
.hero-record span:hover u{transform:none}
}
/* entrance gold (/brain 2026-08-12; connectors reverted same day — the gold
moment that stays is the hairline drawing itself under the name, on the
.hero-reveal forwards-fill grammar so reduced motion lands it finished) */
#hero-title::after{
content:"";display:block;height:1px;width:min(46%,14rem);
margin:1.15rem auto 0;background:var(--accent);
transform:scaleX(0);transform-origin:left center;
animation:hero-rule .6s var(--ease) forwards;
animation-delay:calc(var(--entrance-duration) * .55 + var(--stagger) * 2 + .5s);
}
@keyframes hero-rule{to{transform:scaleX(1)}}
/* ---------- 1b · HERO on a PORTRAIT viewport (2026-08-14, Matthew: the
position line was unreadable on a phone) --------------------------------
The plate is 1656x944 (aspect 1.75); a phone is ~0.46. `cover` therefore
scales it to FILL THE HEIGHT and the whole crop is horizontal — which also
means object-position's Y value does nothing here, at any portrait size.
Centred, the visible strip is the middle ~26% of the frame: exactly the
projector beam and its hot core, so the beam swept diagonally straight
through the hero copy. Desktop never showed this because it sees the whole
shot, which is mostly black.
Keyed on aspect, not width, because aspect IS the cause: the collision
happens on every taller-than-wide viewport, phones and iPad portrait alike,
and a max-width breakpoint would have missed the tablet.
Two levers. 38% moves the beam off the copy and into a right-side diagonal
— enough to clear the card without deleting the image, which is what the
full shift to 22% did (legible, but the hero became a black rectangle and
the plate stopped contributing). The card then carries a modest backdrop
of its own for the beam's outer falloff and the plate's grain.
The scrim is a soft ellipse rather than a band — feathered on all four
sides, so it has no edge to catch the eye, and the beam still reads above
and below the card. The card owns it rather than .hero-grade so neither of
that layer's two gradients has to be restated here.
Colour was NOT the lever: on the lit beam every ink in the palette measures
~1.3-1.6:1 (bright-on-bright), so lifting --ink-dim toward --ink fixes
nothing. Once the crop and scrim land the card on near-black the shipped
tokens measure ~7.8:1 (--ink-dim) and ~5.8:1 (--ink-faint), both past AA.
Judge this on a SETTLED screenshot. The hero-reveals stagger in over the
entrance, and the cue is --6, the last of them; caught at ~1.2s it is still
part-way through its fade and reads as washed out when nothing is wrong
with it. Four tuning passes here chased that artifact before it was spotted.
(--settle-scale 1.16 over 4.4s does genuinely enlarge the beam early on,
but the copy is still arriving during that window.) */
/* 2026-08-16 (Matthew, desktop screenshot): the same collision exists on
landscape — at 16:9 the plate fits with no crop, so object-position has no
travel there; the beam is nudged right with a translate hidden under the
settle scale (its end scale rises 1.04→1.10 to keep the left edge covered),
and the card carries a lighter version of the portrait scrim. */
.hero-card{
background:radial-gradient(46% 62% at 50% 52%,
color-mix(in srgb, var(--black) 55%, transparent) 0,
color-mix(in srgb, var(--black) 30%, transparent) 55%, transparent 100%);
}
@media (min-aspect-ratio:1/1){
.hero-plate img{translate:7% 0}
@keyframes settle{to{transform:scale(1.10)}}
}
@media (max-aspect-ratio:1/1){
.hero-plate img{object-position:38% 38%}
.hero-card{
background:radial-gradient(95% 60% at 50% 50%,
color-mix(in srgb, var(--black) 40%, transparent) 0, transparent 100%);
}
}
/* ---------- centered acts — bio · record · commissions ----------------------
Page 1's acts are left-aligned grids; page 2 keeps three deliberately
centred compositions where centering IS the gesture (a rotating stage, a
quiet card, a crawl). The eyebrow loses its gold rule there — the rule is
a left-margin device and reads broken when centred. */
.act--centered{text-align:center}
.act--centered .label{justify-content:center}
.act--centered .label::before{display:none}
/* ---------- 3 · BIO — the intertitle ----------------------------------------
Was "the quiet card" (eyebrow + rule + one wall of a paragraph); between
the Record's monumental rotation and the Films' prologue it read as a
footnote. Now it speaks page 1's narrative device — the seam's italic
Bitter intertitle at --text-intertitle — as a lead statement, the rule,
then the detail in two beats. The section gets the full section rhythm
(1.2x, the access act's longer rest) so it holds its place in the scroll,
and its data-tint is the river's midpoint between record-warm and
films-cool so the background flows through it rather than freezing. */
.bio{padding-block:calc(var(--space-section) * 1.2)}
.bio-lead{
max-width:26ch;margin:0 auto;
/* display role, not the page-1 italic intertitle device — so it follows
the heading-font choice live like every other heading (Matthew 08-09) */
font-family:var(--font-display);font-style:normal;font-weight:700;
font-size:var(--text-intertitle);line-height:1.18;letter-spacing:-.01em;
color:var(--ink);text-wrap:balance;
/* the hero h1's own shadow: seats the statement into the atmosphere
instead of floating it on top */
text-shadow:0 2px 40px color-mix(in srgb, var(--black) 55%, transparent);
}
.bio-copy{
max-width:56ch;margin:0 auto;
font-size:calc(var(--text-body) * 1.05);
/* lifted from --ink-dim toward --ink: the paragraph reads slightly
illuminated against the dark field rather than sinking into it */
color:color-mix(in srgb, var(--ink) 82%, var(--ink-dim));
text-wrap:pretty;
}
.bio-copy + .bio-copy{margin-top:1.4em}
.bio-copy strong{color:var(--ink);font-weight:500}
/* The headshot, file photo — Scott's recorded card-03 pick (10 Aug, 18:48),
adopted 2026-08-13 over the interim beside-the-bio bake. A small centred
archival monochrome above the lead with a dossier caption: an evidence-file
artefact in the film's world, keeping the section about the work. */
/* micro set 2026-08-13 */
.bio-portrait{transition:transform var(--duration-ui) var(--ease),box-shadow var(--duration-ui) var(--ease);}
.bio-portrait:hover{transform:translateY(-3px);box-shadow:0 1.4rem 3rem color-mix(in srgb, var(--black) 50%, transparent)}
.bio-portrait{
width:clamp(225px,27.5vw,275px);margin:0 auto 2.4rem;
border:1px solid var(--line);background:var(--black);
}
.bio-portrait img{
/* height:auto or the height attribute defeats the aspect-ratio (an
explicit height makes the box non-auto, and aspect-ratio only fills
an auto axis) — the 08-10 bake shipped a 338×1195 portrait this way */
display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
}
/* the dossier figcaption retired 2026-08-14 with the caption (Matthew) */
.card-rule{
width:2.6rem;height:1px;background:var(--accent);border:0;
margin:2.6rem auto;opacity:.7;
}
/* ---------- 4 · THE FILMS — G: parallax feature ------------------------------
Five viewport-scale scenes alternate copy and image; copy and image travel
at different speeds within each scene (the source asset's parallax). No
dialog anywhere: synopsis, laurel-grid recognition, credits and playback
all sit in the sequence. */
.films{padding:0 0 clamp(6rem,12vh,9rem)}
.films .shell{width:min(100% - clamp(2.4rem,8vw,7rem),82rem)}
/* the section eyebrow/intro are visually absorbed by the prologue card but
stay in the accessibility tree */
.films .visually-hidden{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.scroll-film-prologue{
min-height:92svh;display:grid;place-content:center;text-align:center;
}
.scroll-film-prologue h2{
display:block;max-width:12ch;margin-inline:auto;
font-size:clamp(3rem,8vw,7.8rem);line-height:.88;letter-spacing:-.045em;
}
.scroll-film-prologue p{
margin-top:2.2rem;
font-family:var(--font-display);font-size:calc(var(--text-label) * 1.35);font-weight:500;
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent);
}
.scroll-film-prologue p::after{content:" ↓"}
.scroll-film-scene{
min-height:112svh;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(3rem,10vw,10rem);align-items:center;padding:clamp(7rem,14vh,11rem) 0;
border-top:1px solid color-mix(in srgb, var(--ink) 5%, transparent);
}
.scroll-film-scene--image-left .scroll-film-copy{grid-column:2;grid-row:1}
.scroll-film-scene--image-left .scroll-film-media{grid-column:1;grid-row:1;justify-self:start}
.scroll-film-scene--image-right .scroll-film-copy{grid-column:1;grid-row:1}
.scroll-film-scene--image-right .scroll-film-media{grid-column:2;grid-row:1;justify-self:end}
.scroll-film-copy{
min-width:0;
translate:0 var(--copy-y,0);
will-change:translate;
}
.scroll-film-index{
display:flex;align-items:center;gap:.85rem;
font-family:var(--font-display);font-size:calc(var(--text-label) * 1.35);font-weight:500;
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent);
}
.scroll-film-index::after{content:"";width:2.5rem;height:1px;background:currentColor;opacity:.55}
.scroll-film-copy h3{
margin-top:1.35rem;
font-size:clamp(2rem,4vw,4rem);line-height:.95;letter-spacing:-.025em;
text-wrap:balance;
}
.scroll-film-meta{
margin-top:1.25rem;
font-family:var(--font-display);font-size:calc(var(--text-label) * .92);font-weight:400;
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-faint);
}
.scroll-film-description{
/* 38ch -> 46ch (2026-08-13, Matthew): the synopsis wrapped well short of
its column — the laurels below reach further right than the prose did */
max-width:46ch;margin-top:1.6rem;
font-style:italic;font-size:var(--text-body);line-height:1.7;
color:var(--ink-dim);text-wrap:pretty;
}
.scroll-film-recognition{margin-top:2rem}
/* the per-film IMDb tile sits a beat under the credits (tile recipe in
site.css); scene 1 also carries the interview text link — the tile
follows it on its own line either way */
.scroll-film-copy .imdb-tile{display:grid;margin-top:1.4rem}
.scroll-film-laurels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem .75rem}
.scroll-film-laurel{
display:grid;grid-template-columns:.7rem minmax(0,1fr) .7rem;
gap:.45rem;align-items:center;min-height:5.6rem;text-align:center;
}
.scroll-film-laurel>svg{width:.7rem;height:3.15rem;color:var(--ink-faint)}
.scroll-film-laurel__text{min-width:0}
/* the mirrored right-hand branch — this rule lived in the retired Record
section's block and its deletion (2026-08-12) unflipped every closing
laurel on the page */
.record-laurel--flip{transform:scaleX(-1)}
.scroll-film-laurel__text i{
display:block;font-style:normal;
font-family:var(--font-display);font-size:calc(var(--text-label) * .82);font-weight:400;
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent);
}
/* micro set 2026-08-13: a laurel warms to gold under the hand */
.scroll-film-laurel{transition:transform var(--duration-ui) var(--ease)}
.scroll-film-laurel:hover{transform:translateY(-2px)}
.scroll-film-laurel:hover .scroll-film-laurel__text b{color:var(--accent)}
.scroll-film-laurel__text b{transition:color var(--duration-ui) var(--ease)}
.scroll-film-laurel__text b{
display:block;margin-top:.45rem;
font-family:var(--font-display);font-size:calc(var(--text-label) * 1.07);font-weight:400;
letter-spacing:var(--track-caption);text-transform:uppercase;
color:color-mix(in srgb, var(--ink) 72%, var(--ink-dim));
line-height:1.45;
}
.scroll-film-laurel__text small{
display:block;margin-top:.28rem;
font-size:calc(var(--text-body) * .81);font-style:italic;color:var(--ink-faint);
line-height:1.25;
}
/* ---------- the ledger — Kimi's "Ledger Ticker" (variant 02), adapted -----
Reworked 2026-08-12: the card rail replaced by the ticker from
Kimi-3-Timeline-variants, translated to tokens (their serif → our display
face, their gold → --accent, their hairlines → --line) and compressed
from full-viewport to the section's height. Motion in filmmaker.js. */
.ledger{padding-block:calc(var(--space-section) * .45)}
.ticker-band{
position:relative;overflow:hidden;
border-block:1px solid var(--line);
padding:clamp(1.6rem,3.4vh,2.4rem) 0;
cursor:grab;user-select:none;touch-action:pan-y;
-webkit-mask-image:linear-gradient(to right,transparent 0,var(--black) 7%,var(--black) 93%,transparent 100%);
mask-image:linear-gradient(to right,transparent 0,var(--black) 7%,var(--black) 93%,transparent 100%);
}
.ticker-band:active{cursor:grabbing}
.ticker-band:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.ticker-lane{display:flex;width:max-content;will-change:transform}
.ticker-set{display:flex;align-items:center;width:max-content}
.tick-item{display:flex;align-items:center;white-space:nowrap;padding-right:5vw;
transition:transform var(--duration-ui) var(--ease)}
.tick-item:hover{transform:translateY(-2px)}
.tick-item:hover .ty{color:color-mix(in srgb, var(--accent) 70%, var(--ink))}
.tick-item .ty{
transition:color var(--duration-ui) var(--ease);
font-family:var(--font-display);font-weight:400;
font-size:clamp(.78rem,1.1vw,1rem);letter-spacing:.26em;
color:var(--accent);margin-right:1.6vw;
}
.tick-item .tt{
font-family:var(--font-display);font-weight:700;text-transform:uppercase;
font-size:clamp(1.9rem,3.6vw,3.4rem);line-height:.98;letter-spacing:-.01em;
color:var(--ink);
}
.tick-item .tr{
font-size:calc(var(--text-body) * .74);font-style:italic;color:var(--ink-faint);
margin-left:1.6vw;max-width:24ch;white-space:normal;line-height:1.55;
text-align:left;
}
/* no-JS / reduced-motion: the lane is a native swipe row — no clones, no
drift, no mask trap; the playhead instrument (motion chrome) steps aside */
html:not(.js) .ticker-band,
.ticker--static .ticker-band{
overflow-x:auto;-webkit-mask-image:none;mask-image:none;scrollbar-width:thin;
}
.scroll-film-credits{
margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);
color:var(--ink-faint);font-size:calc(var(--text-body) * .88);line-height:1.55;
}
.scroll-film-interview{
display:inline-block;margin-top:.7rem;
color:var(--accent);font-size:calc(var(--text-body) * .88);
letter-spacing:.04em;text-decoration:none;
border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
transition:border-color var(--duration-ui) var(--ease),color var(--duration-ui) var(--ease);
}
.scroll-film-interview:hover,.scroll-film-interview:focus-visible{
color:var(--ink);border-bottom-color:var(--ink);
}
.scroll-film-media{
position:relative;width:min(44.2vw,36.4rem,100%);aspect-ratio:4/5;
translate:0 var(--media-y,0);
will-change:translate;
border:1px solid var(--line);
box-shadow:0 2.5rem 8rem color-mix(in srgb, var(--black) 46%, transparent);
}
.scroll-film-frame{position:absolute;inset:0;overflow:hidden;background:var(--black)}
.scroll-film-frame::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--black) 4%, transparent),
transparent 48%,
color-mix(in srgb, var(--black) 70%, transparent)),
radial-gradient(100% 80% at 50% 105%,
color-mix(in srgb, var(--accent) 15%, transparent), transparent 68%);
transition:opacity var(--duration-ui) var(--ease);
}
.scroll-film-frame img{
width:100%;height:calc(100% + 5rem);object-fit:cover;object-position:center top;
translate:0 var(--parallax-y,0);
scale:1.08;
transition:filter var(--reveal-duration) var(--ease),scale 1.1s var(--ease);
will-change:translate;
}
/* --tagline: the poster carries copy on its very top edge (Songbird's "How do
you find someone…"). The parallax bleed scale is centre-origin and eats it;
pinning the origin to the top keeps that edge in frame and sends all the
bleed to the bottom, which the +5rem overdraw already owns. */
.scroll-film-frame--tagline img{transform-origin:center top}
.scroll-film-play{
position:absolute;inset:0;z-index:3;width:100%;height:100%;border:0;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.15rem;
background:transparent;color:var(--ink);cursor:pointer;font-family:var(--font-display);
transition:background var(--duration-ui) var(--ease);
}
.scroll-film-play>span:last-child{
font-size:calc(var(--text-label) * .88);font-weight:400;
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-dim);
}
.scroll-film-play:hover,.scroll-film-play:focus-visible{
background:color-mix(in srgb, var(--accent) 5%, transparent);
}
.play-ring{
width:clamp(3rem,6vw,4rem);height:clamp(3rem,6vw,4rem);
border:1px solid color-mix(in srgb, var(--ink) 58%, transparent);border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:color-mix(in srgb, var(--black) 20%, transparent);
backdrop-filter:blur(3px);
transition:border-color var(--duration-ui) var(--ease),
transform var(--duration-ui) var(--ease),
background var(--duration-ui) var(--ease);
}
.play-ring svg{width:1rem;height:1rem;margin-left:.16rem;color:var(--ink)}
.scroll-film-play:hover .play-ring,.scroll-film-play:focus-visible .play-ring{
border-color:var(--accent);
background:color-mix(in srgb, var(--black) 55%, transparent);
transform:scale(1.08);
}
.scroll-film-frame:hover img,.scroll-film-frame:focus-within img{
scale:1.12;
}
.scroll-film-caption{transition:transform var(--duration-ui) var(--ease)}
.scroll-film-frame:hover .scroll-film-caption{transform:translateY(-2px)}
.scroll-film-caption{
position:absolute;z-index:4;left:1.2rem;right:1.2rem;bottom:1.05rem;
display:flex;justify-content:space-between;gap:1rem;pointer-events:none;
font-family:var(--font-display);font-size:calc(var(--text-label) * .76);font-weight:400;
letter-spacing:var(--track-caption);text-transform:uppercase;
color:color-mix(in srgb, var(--ink) 72%, transparent);
}
.scroll-film-counter{
position:absolute;z-index:5;top:1rem;right:1rem;
font-family:var(--font-display);font-size:calc(var(--text-label) * .74);font-weight:400;
letter-spacing:var(--track-caption);color:var(--accent);
}
/* exhibition title card (The Light Between) — same card the prototype drew.
The old .scroll-film-offline overlay was removed (2026-08-02): it rendered
dead-centre over this card and collided with the title. */
.film-title-card{
position:absolute;inset:0;display:grid;place-content:center;
padding:2rem;text-align:center;
background:
radial-gradient(circle at 50% 30%,color-mix(in srgb, var(--accent) 12%, transparent),transparent 38%),
repeating-linear-gradient(90deg,transparent 0 12.4%,color-mix(in srgb, var(--ink) 2.5%, transparent) 12.5% 12.7%),
var(--black);
}
.film-title-card span,.film-title-card small{
font-family:var(--font-display);font-size:calc(var(--text-label) * .8);font-weight:400;
letter-spacing:var(--track-caption);text-transform:uppercase;color:var(--accent);
}
.film-title-card strong{
display:block;max-width:12ch;margin:.8rem auto;
font-family:var(--font-display);font-size:clamp(1.35rem,3vw,2.6rem);font-weight:600;
letter-spacing:.03em;text-transform:uppercase;color:var(--ink);line-height:1;
}
.film-title-card small{color:var(--ink-faint)}
/* ---------- 5 · COMMISSIONED WORKS — the horizontal shelf -------------------
Native, optional horizontal scroll (the projection pattern): no pin, no
scroll-jacking — the page moves only vertically; the shelf moves when the
reader swipes, drags or wheels it. Square stills from the works
themselves, graded to the same treatment as the film frames.
NO scroll-snap, deliberately: proximity snap tugged the shelf to a card
edge after every gesture — visible stutter — and it fought the JS glide's
ease-out tail (it was also what auto-scrolled item 01 flush-left on load,
scrollLeft=64, defeating the shell alignment). The shelf free-flows like
a strip of film; at rest nothing scrolls it, so the alignment holds. */
.commissions{padding-block:var(--space-section)}
.commissions .label{font-size:calc(var(--text-label) * 1.6)}
.commissions-intro{
max-width:44ch;margin:0 auto clamp(2.2rem,5vh,3.2rem);
color:var(--ink-dim);font-size:var(--text-body);text-wrap:pretty;
}
/* D6 (5 Aug): the scroller became a curated grid — exactly six works, Scott's
order, no horizontal scroll. Item/frame/caption styles are shared with the
old shelf below; the grid only re-flows them. */
.comm-grid{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(1.6rem,3vw,2.4rem) clamp(1.2rem,2.5vw,2rem);
}
@media (max-width:860px){
.comm-grid{grid-template-columns:repeat(2,1fr)}
}
.comm-grid .strip-item{width:auto}
.strip-frame--plate{
position:relative;
background:
radial-gradient(120% 90% at 50% 28%, #1a160f 0%, var(--black) 72%);
display:flex;align-items:center;justify-content:center;
}
.plate-note{
font-size:calc(var(--text-body) * .68);font-style:italic;
color:var(--ink-faint);letter-spacing:.06em;
}
.strip-frame{
margin:0;aspect-ratio:1/1;overflow:hidden;
border:1px solid var(--line);background:var(--black);
box-shadow:0 1.5rem 4rem color-mix(in srgb, var(--black) 42%, transparent);
}
.strip-frame img{
width:100%;height:100%;object-fit:cover;
transition:filter var(--reveal-duration) var(--ease);
/* the browser's native image drag-ghost would hijack a shelf drag */
-webkit-user-drag:none;user-select:none;
}
/* micro set 2026-08-13: commission cards rise under the hand, titles warm */
.strip-item{transition:transform var(--duration-ui) var(--ease)}
.strip-item:hover{transform:translateY(-3px)}
.strip-title{transition:color var(--duration-ui) var(--ease)}
.strip-item:hover .strip-title{color:color-mix(in srgb, var(--accent) 60%, var(--ink-dim))}
/* inline Vimeo playback (2026-08-12) — the film scroll's data-scroll-play
machinery reused on the commission cards; the ring scaled to the square */
.strip-frame{position:relative}
.strip-frame iframe{position:absolute;inset:0;z-index:5;width:100%;height:100%;border:0}
.strip-play{
position:absolute;inset:0;z-index:3;width:100%;height:100%;border:0;
display:flex;align-items:center;justify-content:center;
background:transparent;color:var(--ink);cursor:pointer;
transition:background var(--duration-ui) var(--ease);
}
.strip-play:hover,.strip-play:focus-visible{background:color-mix(in srgb, var(--accent) 5%, transparent)}
.strip-play .play-ring{width:2.6rem;height:2.6rem}
.strip-play .play-ring svg{width:.8rem;height:.8rem}
.strip-play:hover .play-ring,.strip-play:focus-visible .play-ring{
border-color:var(--accent);
background:color-mix(in srgb, var(--black) 55%, transparent);
transform:scale(1.08);
}
.strip-title{
margin:1rem 0 0;
font-family:var(--font-display);font-size:calc(var(--text-label) * 1.35);font-weight:500;
letter-spacing:var(--track-caption);text-transform:uppercase;color:var(--ink-dim);
}
.strip-note{
margin:.3rem 0 0;
font-size:calc(var(--text-body) * .72);font-style:italic;color:var(--ink-faint);
}
/* ---------- 6 · THE RETURN — the bridge back to page 1 ----------------------
Replaces the old bare-text epilogue. A plate from page 1's world graded
like its hero, the wordmark, one cue: the cross-page seam as a place,
not a sentence. */
.return-card{padding:0}
.return-link{
position:relative;display:grid;place-items:center;
min-height:82svh;overflow:hidden;text-decoration:none;text-align:center;
}
.return-plate{position:absolute;inset:0}
.return-plate img{
width:100%;height:100%;object-fit:cover;
transform:scale(1.04);
transition:filter var(--reveal-duration) var(--ease),transform 1.2s var(--ease);
}
.return-grade{
position:absolute;inset:0;
background:
radial-gradient(80vw 60vh at 50% 50%, transparent 0,
color-mix(in srgb, var(--black) 55%, transparent) 70%,
color-mix(in srgb, var(--black) 88%, transparent)),
linear-gradient(180deg,
color-mix(in srgb, var(--black) 70%, transparent),
transparent 30%, transparent 70%,
color-mix(in srgb, var(--black) 85%, transparent));
}
.return-copy{position:relative;z-index:2;padding:clamp(3rem,8vh,5rem) 1.2rem}
.return-kicker{
font-family:var(--font-display);font-size:calc(var(--text-label) * 1.35);font-weight:500;
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent);
}
.return-copy strong{
display:block;max-width:12ch;margin:1.2rem auto 0;
font-family:var(--font-display);font-weight:700;
font-size:clamp(2.6rem,7vw,6.4rem);line-height:.92;letter-spacing:-.03em;
text-transform:uppercase;color:#f2ede0;
text-shadow:0 2px 40px color-mix(in srgb, var(--black) 55%, transparent);
}
.return-cue{
display:inline-block;margin-top:2.2rem;padding-bottom:.55rem;
font-family:var(--font-display);font-size:var(--text-label);font-weight:400;
letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-dim);
border-bottom:1px solid color-mix(in srgb, var(--ink) 34%, transparent);
transition:color var(--duration-ui) var(--ease),border-color var(--duration-ui) var(--ease);
}
.return-link:hover .return-cue,.return-link:focus-visible .return-cue{
color:var(--accent);border-bottom-color:var(--accent);
}
.return-link:hover .return-plate img{
transform:scale(1.08);
}
/* ---------- 7 · FINAL CARD — sign-off + the shared access form --------------
The form is page 1's access form verbatim (classes + behaviour); only the
copy column is local. */
.contact .signoff{
font-family:var(--font-body);font-style:italic;
font-size:calc(var(--text-body) * 1.25);line-height:1.5;color:var(--ink);
text-wrap:balance;margin:0 0 2.2rem;
}
.contact .access-copy h2{margin-bottom:1.6rem}
.contact .cue{margin-top:2.6rem;color:var(--ink-dim)}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* ---------- responsive ------------------------------------------------------ */
@media (max-width:900px){
.contact .access-copy,.contact .access-form{grid-column:1/13}
.contact .access-form{margin-top:2.6rem}
}
@media (max-width:760px){
.scroll-film-prologue{min-height:80svh}
.scroll-film-prologue h2{font-size:clamp(3rem,15vw,5rem)}
.scroll-film-scene,
.scroll-film-scene--image-left,
.scroll-film-scene--image-right{
min-height:0;display:flex;flex-direction:column;gap:2.5rem;
padding:5.5rem 0;align-items:stretch;
}
.scroll-film-scene .scroll-film-copy,
.scroll-film-scene .scroll-film-media{
grid-column:auto;grid-row:auto;translate:none !important;
}
.scroll-film-scene .scroll-film-copy{order:1}
.scroll-film-scene .scroll-film-media{
order:2;width:100%;aspect-ratio:16/11;justify-self:stretch;
}
.scroll-film-copy h3{font-size:clamp(2rem,11vw,3.4rem)}
.scroll-film-laurels{grid-template-columns:1fr 1fr;gap:.75rem .35rem}
.return-link{min-height:68svh}
}
/* Reduced motion: tokens.css collapses durations globally; the parallax
translate is the one position effect left to neutralise. */
@media (prefers-reduced-motion:reduce){
.scroll-film-copy,.scroll-film-media,.scroll-film-frame img{translate:none !important}
}
/* ---------- the video dialog — shared (video-dialog.css / .js) ---------------
Extracted 2026-08-15. The triggers keep the hand cursor their button rules
already declare — a page-local `zoom-in` override read as "not clickable"
(Matthew, 2026-08-16) and was removed. */