, so it may not contain a ), and `aspect-ratio` does not apply
to an inline box at all. Without it the media box takes its height from the
image's own intrinsic ratio and the tiles come out square. */
.vcard-media{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink);}
.vcard-img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.vcard:hover .vcard-img{transform:scale(1.05);}
/* The scrim the play badge sits on. Ink, not the old brand gradient — a
coloured wash over seven different thumbnails tints seven different
pictures, and none of them were graded for it. */
.vcard-media::after{
content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(34,40,49,.55),transparent 52%);
opacity:0;transition:opacity .45s var(--ease);
}
.vcard:hover .vcard-media::after{opacity:1;}
.vcard-play{
position:absolute;inset-block-end:12px;inset-inline-end:12px;
width:44px;height:44px;border-radius:50%;
display:grid;place-items:center;
background:var(--red);color:#fff;
transform:scale(.7);opacity:0;
transition:transform .45s var(--spring),opacity .35s var(--ease);
}
.vcard-play svg{width:17px;height:17px;}
.vcard:hover .vcard-play{transform:none;opacity:1;}
.vcard-cap{display:block;padding:16px 18px 20px;}
.vcard-title{display:block;}
.vcard-tag{
display:inline-flex;align-items:center;gap:.5em;
font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--red);margin-bottom:.5rem;
}
.vcard-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;}
.vcard-title{font-size:.98rem;font-weight:600;line-height:1.6;color:var(--ink);}
/* ---------- The film band ---------- */
/* The one dark block in the page, and the clip is composited onto exactly
this colour at encode time — change one and the other has to be re-encoded
(see the keyer note in CLAUDE.md). Full-bleed via 100vw rather than a
wrapper, so the paper either side of the container never shows through. */
/* Slate, and the footer below it is ink — two dark tones in that order, so
the page steps down rather than running one long dark block into another. */
.band{
background:var(--band);color:var(--on-dark);
margin-inline:calc(50% - 50vw);width:100vw;
padding-block:clamp(56px,6vw,92px);
overflow:hidden; /* the clip's own min-width overhangs on a phone */
position:relative; /* the wash below is absolute against this */
}
/* The wash: the clip again, scaled up so that only its empty top-left corner
is on screen. 800% of the band's width puts the artwork — which starts a
third of the way across the frame — far outside the box, so what covers the
section is a flat field of the clip's own colour, arriving through the same
decoder as the clip itself. See the note in index.html for why this beats
naming the colour in CSS.
--band stays underneath as the fallback: a browser that renders no frame
here shows the stylesheet's best guess rather than a hole. */
.band-wash{
position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
background:var(--band);
}
.band-wash video{
position:absolute;top:0;left:0;
width:800%;height:auto;
pointer-events:none;
}
.band-inner{
position:relative;z-index:1; /* over the wash */
display:flex;flex-direction:column;align-items:center;text-align:center;
gap:clamp(18px,2.4vw,30px);
width:100%;
}
/* NOTHING is laid over this element — no grain, no backdrop-filter, no CSS
filter. Each of those takes the clip off the compositor's video path and
re-composites every decoded frame through the layer on top, which reads as
the picture dropping out for a frame. */
/* Full-bleed. The master's whole width is kept — only the top and bottom are
cropped — because the line sweeps in from the right edge of the frame and
cropping the sides clips that entrance mid-stroke.
`min-width` is the one concession: at 5.8:1, a viewport-width clip on a
phone is a 65px ribbon with an illegible mark in it. Below ~720px the clip
stops shrinking and the band's own overflow takes the difference off both
ends — which costs nothing visible, because the clip's background and the
band are the same colour, and the only thing out past the edges is empty
plate and the tail of the sweep. */
.band-clip{
display:block;width:100%;min-width:720px;height:auto;
background:var(--band);
/* THE EDGES ARE FEATHERED, AND THAT IS THE ACTUAL FIX FOR THE SEAM.
Matching the band's hex to the clip's cannot be made to work across
browsers. script.js samples the painted pixel and writes it into --band,
which makes Chrome exact — but Safari and Firefox colour-manage a canvas
readback and the compositor differently, so the number that is right in
one is wrong in the others, and there is no single value that satisfies
all three. Three earlier attempts are in CLAUDE.md; none of them close it.
So stop trying to land on a number and remove the boundary instead. The
clip dissolves into the band over its own empty margins, and a couple of
units of difference spread across a 30px gradient is not something an eye
can find. The stops are inside those margins on purpose — the artwork
occupies 13.6%–89.4% of the frame's height, so 10% and 92% never touch
it. Re-crop the clip and these two numbers move with it.
Only the top and bottom are feathered: the clip is full-bleed, so its
left and right edges are the viewport's and have no band beside them. */
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 92%,transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 92%,transparent 100%);
}
/* `text-wrap:balance` so the two lines come out even. Without it this broke
after «السطر» and left «كامل.» sitting alone on the second row, which reads
as a mistake rather than as a line. The max-width is what forces two lines
in the first place; balance only decides where they fall. Engines without
it get the old behaviour, which is why the wording is also short enough
that the orphan is one word rather than half a clause. */
.band-line{
font-size:clamp(1.05rem,1.7vw,1.35rem);font-weight:500;
color:var(--on-dark);max-width:38ch;
text-wrap:balance;
}
.band-cta{margin-top:.2rem;}
/* Five names on one line, separated by the brand dot. No plate under any of
them — the client asked for text on the band, not for five chips. */
.band-specs{
list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
gap:.9rem clamp(14px,2vw,26px);
margin-top:clamp(10px,1.6vw,20px);
font-size:clamp(.82rem,1.05vw,.95rem);font-weight:500;
color:var(--on-dark-2);
}
.band-specs li{display:flex;align-items:center;gap:clamp(14px,2vw,26px);}
.band-specs li:not(:last-child)::after{
content:"";width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;
}
/* ---------- Footer ---------- */
.footer{
background:var(--ink);color:var(--on-dark);
padding-block:clamp(52px,5.5vw,80px) 0;
}
.footer-top{
display:grid;gap:clamp(28px,3.2vw,48px);
grid-template-columns:1.5fr 1fr 1.2fr 1.2fr;
padding-bottom:clamp(34px,4vw,54px);
}
.footer-logo{width:min(210px,60%);height:auto;margin-bottom:1.1rem;}
.footer-desc{color:var(--on-dark-2);font-size:.94rem;max-width:38ch;}
.footer-col h4{
display:flex;align-items:center;gap:.55em;
font-size:.95rem;font-weight:700;margin-bottom:1.05rem;
}
.footer-col a,.footer-col span{
display:block;color:var(--on-dark-2);font-size:.92rem;
padding-block:.3rem;transition:color .3s,transform .3s var(--ease);
}
.footer-col a:hover{color:#fff;transform:translateX(-3px);}
.footer-social{display:flex;gap:10px;margin-bottom:1.1rem;}
.footer-social a{
width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
background:rgba(255,255,255,.09);color:var(--on-dark);
transition:background-color .3s,color .3s,transform .35s var(--spring);
}
.footer-social a:hover{background:var(--red);color:#fff;transform:translateY(-3px);}
.footer-social svg{width:17px;height:17px;}
.footer-inq{font-size:.85rem;color:var(--on-dark-2);margin-bottom:1rem;line-height:1.75;}
.footer-inq a{display:inline;padding:0;}
.footer-cta{font-size:.88rem;padding:.9em 1.6em;}
.footer-bar{
display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
padding-block:20px;border-top:1px solid rgba(255,255,255,.12);
font-size:.8rem;color:var(--on-dark-2);
}
.footer-made{display:flex;align-items:center;gap:.6em;letter-spacing:.18em;font-size:.7rem;font-weight:600;}
/* ---------- Responsive ---------- */
@media (max-width:1020px){
.nav-links{display:none;}
.nav-burger{display:flex;}
.nav-cta{display:none;}
.nav-inner{gap:1rem;justify-content:space-between;}
/* The burger arrives with the finished navbar, not before it. Across the
hero the header has no bar and no mark, and a lone hamburger floating on
the artwork belongs to nothing; `.nav-docked` is written by script.js at
the point the mark has actually settled into place, which is later than
`.nav-on` (the bar's own arrival).
Scoped to body.nav-flight, so with JS off — or under reduced motion,
where the flight never runs — the burger is simply always there, which is
the only state those visitors will ever see.
`visibility` is transitioned with a 0s delay on the way in and a delayed
one on the way out, which is what actually takes it out of the tab order
while it is invisible; opacity alone would leave a focusable control
sitting over the hero. */
body.nav-flight .nav-burger{
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s linear .4s;
}
body.nav-flight .nav.nav-docked .nav-burger{
opacity:1;visibility:visible;transform:none;
transition:opacity .5s var(--ease),transform .5s var(--spring),visibility 0s;
}
/* The camera goes UNDER the copy rather than beside it. The artwork's own
wash is exactly --paper, so the plate can simply end mid-screen with no
seam and no mask needed — the box keeps its bottom-left anchor.
Both the box width and its window's height are driven off ONE number, so
the camera is framed identically at every width. `--w` is the width at
which the camera comes out about 85vw across (it occupies 43.85% of the
master), capped so a 1000px tablet does not get a two-metre camera; the
window is then 0.463·--w tall, which is exactly the part of the artwork
from the camera's own top edge down. Sizing the window in svh instead is
the trap: svh and vw scale independently, so the crop slides as the
window changes shape and the camera loses its head. */
.hero{
flex-direction:column;align-items:stretch;justify-content:space-between;
padding-block:calc(var(--nav-h) + 18px) 0;
gap:8px;
}
/* THE BOX IS SIZED OFF ITS HEIGHT HERE, NOT ITS WIDTH — the reverse of the
desktop rule above, and the only arrangement that satisfies both halves of
the phone layout at once.
Sizing it by width (a --w in vw, capped in px) is the obvious thing and it
cannot work: the copy above takes whatever height it takes, so a
width-derived box is either taller than the room left — cropping the
plate's top, which is the torn edge and the grid — or short enough to fit
the worst case and pointlessly small everywhere else. Height is the
constraint, so height is the input. `.hero-art` takes the leftover with
flex, the box is exactly as tall as that window, and `aspect-ratio` gives
it its width; the camera follows because it is placed by percentage inside
the box, so nothing has to be re-tuned and the camera can never drift off
the blob behind it.
The cap is there for a tablet in portrait, where "leftover height" is a
lot of it and the camera would otherwise be enormous. */
.hero-art{
position:relative;z-index:0;inset:auto;order:2;
/* full-bleed out of the hero's own inline padding: the torn paper edge is
drawn at the artwork's left margin, and a 5vw gutter cuts it off and
turns the collage into a framed rectangle */
width:100vw;margin-inline:calc(50% - 50vw);
flex:1 1 auto;min-height:200px;max-height:min(58svh,440px);
}
/* Nudged off the physical left edge. The whole BOX moves, never the camera
alone — the camera and the blob it sits on are registered by the box, and
shifting one of them is how they come apart. */
.hero-art-box{
height:100%;width:auto;aspect-ratio:var(--art-ratio);
left:-7%;bottom:0;
}
/* The plate's top edge is dissolved rather than cut. Its wash is exactly
--paper, so the edge was never a colour seam — what gave it away was the
torn paper and the grid starting abruptly partway down the screen, which
reads as a picture with a lid on it rather than as paper.
The mask is on the PLATE only, not on the box: the camera is a separate
layer inside that box and must stay fully opaque. It ends at 16%, which is
just above the camera's own top edge at 17.685%, so the cutout is never
touched however the window is sized. The mic blob begins around 11% and
loses a little of its crown to this, which is the trade — a hard rule
across the artwork is worse than a softened blob.
-webkit- first: Safari still needs the prefix for mask-image. */
.hero-plate{
-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) 7%,#000 16%);
mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) 7%,#000 16%);
}
.hero-copy{width:100%;order:1;align-items:flex-start;}
.hero-logo-slot{width:min(330px,74%);}
.hero-lede{font-size:1rem;}
.hero-scroll{display:none;}
.footer-top{grid-template-columns:1fr 1fr;}
.footer-brand{grid-column:1 / -1;}
}
@media (max-width:600px){
:root{--nav-h:68px;}
.hero{padding-block:calc(var(--nav-h) + 10px) 0;}
.hero-art{height:40svh;min-height:230px;}
.hero-actions{width:100%;}
.hero-actions .btn{flex:1 1 auto;justify-content:center;}
.vcard{flex:1 1 100%;}
/* Five names do not fit one phone line, and a SEPARATOR that wraps leaves a
dot dangling at the end of a row with nothing after it. So on a phone the
dot moves in front of every item and becomes a bullet, which reads
correctly wherever the line happens to break. */
.band-specs{gap:.5rem 18px;}
.band-specs li{gap:.5em;}
.band-specs li:not(:last-child)::after{display:none;}
.band-specs li::before{
content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex:none;
}
.footer-top{grid-template-columns:1fr;}
.footer-bar{justify-content:center;text-align:center;}
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important;animation-iteration-count:1 !important;
transition-duration:.01ms !important;scroll-behavior:auto !important;
}
.hero-art-box,.hero-logo-slot,.logo-fly img,.hero-lede,.hero-actions,.hero-scroll{
opacity:1;transform:none;filter:none;
}
.reveal{opacity:1;transform:none;}
/* the mark never flies, so the header is simply always there and the hero
keeps painting its own corner mark */
.logo-fly{display:none;}
}