, "View portfolio" carries a ::after stretched over the whole card, and the CV link is layered above that. Clicking anywhere still opens the portfolio. */ .member__links{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:20px} .member__links .msplit__go{margin-top:0} .member__links .msplit__go::after{content:"";position:absolute;inset:0;z-index:1} .member__cv{ position:relative;z-index:2; /* above the stretched link */ display:inline-flex;align-items:center;gap:7px; min-height:44px; /* touch target; the row centres it */ font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase; color:var(--txt-3);transition:color .3s var(--ease); } .member__cv:hover{color:var(--txt)} .member__cv svg{width:13px;height:13px;flex:none} /* the "view portfolio" affordance reused inside a card */ .member .msplit__go{font-size:10.5px} .member:hover .msplit__go{gap:18px;border-bottom-color:var(--txt)} .member__skills{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px} .member__go{ position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%; border:1px solid var(--line-2);background:rgba(0,0,0,.5);backdrop-filter:blur(6px); display:grid;place-items:center;z-index:4; transform:scale(.7);opacity:0;transition:transform .5s var(--ease),opacity .4s var(--ease); } .member:hover .member__go{transform:none;opacity:1} .member__go svg{width:15px;height:15px} /* ============================================================ MEMBER SPLIT Two portraits side by side, each one a link to that person's portfolio. The whole panel is the button. ============================================================ */ /* z-index 3 puts this whole block above .marquee (z-index 2), so a photo growing past its panel passes in FRONT of the bar rather than behind it. */ /* The panels now live in a draggable run (.mrun, further down); the old two-column grid wrapper is gone, but every .msplit__* rule below still dresses the panels themselves. */ /* Clip sideways, but NOT upward. `overflow: clip` is the one value that can differ per axis — `hidden` would force the other axis to auto and kill the upward growth. So the photo can rise out of the top and cover the bar, while never spilling into the panel beside it. */ .msplit__item{ position:relative;display:flex;align-items:flex-end; min-height:100svh; overflow-x:clip; overflow-y:visible; border-right:1px solid var(--line); color:var(--txt); z-index:1; } .msplit__item:last-child{border-right:0} /* the hovered panel jumps above its neighbour AND above the marquee */ .msplit__item:hover, .msplit__item:focus-visible{z-index:20} .msplit__item img{ position:absolute;inset:0;width:100%;height:100%; /* `contain`, not `cover` — the whole photo is always visible, nothing is cropped off. The panel is wider than these 2:3 portraits, so there's margin at the sides; the files are transparent cut-outs, so that margin is simply the page showing through. */ object-fit:contain; object-position:center; /* NO filter — the photos show in their own tones, ungraded and undarkened */ /* grows from the bottom edge, so the extra height goes upward over the bar */ transform-origin:50% 100%; transform:scale(1); transition:transform 1.4s var(--ease); will-change:transform; /* no top fade — the photo should COVER the bar, not blend into it */ } .msplit__item:hover img, .msplit__item:focus-visible img{ transform:scale(1.12); } /* Very light scrim at the very bottom only. The photos are cut-outs on a black page and both subjects wear black, so the copy is already legible — this is just insurance, not a darkening layer. */ .msplit__item::after{ content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg, transparent 0%,transparent 68%, rgba(0,0,0,.28) 86%,rgba(0,0,0,.72) 100%); } /* hovering one panel eases the others back — the live version of this is scoped to the run's track, down in the .msplit-run block */ /* Same trick on the small grid card: this portrait has a studio backdrop instead of an alpha channel, so `screen` drops the black away. */ .member--blend .fig img{ mix-blend-mode:screen; filter:grayscale(1) contrast(1.12); object-position:center 18%; } /* ---------- MEMBERS AS A RUN ---------- Moved by transform, not native overflow: overflow-x:auto would force overflow-y to auto and clip the photos where they rise over the bar. That only matters where there is a hover to clip — on touch the strip becomes a real scroller instead, further down. */ /* above the marquee (z-index:2), same as the old .msplit wrapper — this is what lets a hovered photo paint over the bar instead of under it */ .mrun{position:relative;z-index:3;border-block:1px solid var(--line)} .mrun__view{ /* `clip` is the only overflow value that can differ per axis: hold the track in sideways, leave the top open so a hovered photo can rise over the bar */ overflow-x:clip; overflow-y:visible; touch-action:pan-y; /* vertical scrolling still belongs to the page */ } /* The keyframe here is the no-JS path only: one element, content repeated inside it, shifting -50% so the second copy lands where the first started. With JS, site.js §9 sets `animation:none` and drives the same motion from a variable instead — a keyframe and a drag cannot both own `transform`, and the strip has to be draggable. */ .mrun__track{ display:flex;width:max-content; animation:scrollX 60s linear infinite; will-change:transform; } /* Nothing stops the run any more. Hover-pause read as a fault — the strip halted the instant a reader moved across to look at a face — and the pause/play button was removed after it. That leaves no on-page mechanism, which WCAG 2.2.2 asks for on anything that auto-moves past five seconds. The reduced-motion block at the foot of this file still parks the strip completely and hands the axis to a native scroller, so the preference is honoured; readers who have not set it have the drag and nothing else. Deliberate, and the place to undo it. */ /* ---- the strip is a handle ---- The panels are anchors wrapping portraits, so a press-and-push would start a native image drag or select the name underneath instead of moving the strip. site.js §9 also preventDefaults `dragstart`, for Firefox, which has no -webkit-user-drag. */ .mrun__view{cursor:grab} .mrun__view.is-dragging{cursor:grabbing} .mrun__view.is-dragging .mrun__track{user-select:none} .mrun__view img{-webkit-user-drag:none;user-select:none} /* vw, not %: once the track is max-content, a percentage width would resolve against the track itself rather than the viewport */ .mrun__track > .msplit__item{flex:none;--pw:50vw;width:var(--pw)} @media(max-width:900px){.mrun__track > .msplit__item{--pw:82vw}} .mrun .msplit__item:last-child{border-right:0} .mrun__track:hover .msplit__item{opacity:.7;transition:opacity .7s var(--ease)} .mrun__track:hover .msplit__item:hover{opacity:1} /* no JS: fall back to a normal swipe strip. overflow-y goes to auto here, so the photos stay inside the panel — an acceptable trade for it working at all */ html:not(.js) .mrun__view{overflow-x:auto;overflow-y:hidden} /* ---- touch: a swipe strip, not a marquee ---- The transform loop exists so a hovered photo can rise over the bar without overflow-x:auto forcing overflow-y to auto and clipping it. There is no hover on a phone, so that trade buys nothing there — and handing the axis back to the platform gives momentum, snapping, and a position the reader controls instead of one that only moves on its own. WCAG 2.2.2 stops applying with it: nothing auto-animates, so there is nothing to pause. site.js §9 skips its panel duplication under the same query — the copies exist to hide the loop's seam, and in a manual scroller they are just unreachable panels to swipe past. */ @media (hover:none) and (pointer:coarse){ .mrun__view{ overflow-x:auto;overflow-y:hidden; touch-action:pan-x pan-y; /* the page keeps the vertical axis */ scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .mrun__view::-webkit-scrollbar{display:none} .mrun__track{animation:none;transform:none} .mrun__track > .msplit__item{scroll-snap-align:center} } /* This portrait is a studio shot with a dark backdrop, not a transparent cut-out like the others. `screen` drops everything at black away, so it sits on the page the same way the cut-outs do. */ .msplit__item--blend img{ mix-blend-mode:screen; filter:grayscale(1) contrast(1.12); object-fit:cover; object-position:center 22%; } .msplit__body{position:relative;z-index:2;width:100%;padding:clamp(26px,3.6vw,56px)} .msplit__no{ font-family:var(--mono);font-size:10.5px;letter-spacing:.22em; text-transform:uppercase;color:var(--txt-3);display:block;margin-bottom:14px; } .msplit__name{ font-family:var(--disp);font-weight:700; font-size:clamp(28px,3.7vw,60px);line-height:1;letter-spacing:-.035em; } .msplit__role{ font-family:var(--mono);font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--txt-2);margin-top:14px; } /* the "button" affordance — slides out on hover */ .msplit__go{ display:inline-flex;align-items:center;gap:10px;margin-top:24px; font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase; padding-bottom:6px;border-bottom:1px solid var(--line-2); transition:gap .45s var(--ease),border-color .45s var(--ease); } .msplit__item:hover .msplit__go, .msplit__item:focus-visible .msplit__go{gap:18px;border-bottom-color:var(--accent);color:var(--accent)} .msplit__go svg{width:13px;height:13px;flex:none} @media (max-width:820px){ /* the run still scrolls sideways on phones, just with narrower panels */ .mrun__track > .msplit__item{--pw:clamp(280px,86vw,520px)} /* no hover on touch — never leave a panel dimmed */ .mrun__track:hover .msplit__item{opacity:1} } /* ---------- PORTRAIT ---------- `min-height:100svh` on a panel is only sane while the panel is also about half the viewport wide: on desktop that lands near the 2:3 of the cut-outs, so a contained portrait fills the slot. Stand the device up and the same panel becomes roughly 0.4 wide-to-tall, which no portrait can fill — the three cut-outs shrank to 44–59% of the panel height and floated in the middle of it with dead black above and below, while Aman's 1:1 studio shot was `cover` and lost about a third of its width off each side. So in portrait the panel stops taking its height from the viewport and takes it from the photo instead: 1.5x its own width (the 2:3 of the tallest cut-out) plus a foot of clear space for the name. Every portrait then spans the full panel width and stands on the same floor. --pw carries the panel width so the height can be derived from it; max-height keeps a short screen from being overrun. */ @media (orientation:portrait){ .msplit__item{ --foot:clamp(96px,15svh,150px); min-height:0; height:calc(var(--pw,86vw) * 1.5 + var(--foot)); max-height:100svh; } /* the photo gets the panel minus that foot, and sits on its floor rather than being centred in the whole panel */ .msplit__item img{ /* anchored off the bottom with an explicit height, not top+bottom insets: `height:auto` on a replaced element resolves to the intrinsic height and the bottom inset is then dropped as over-constrained, which pinned every photo back to the top of the panel */ inset:auto 0 var(--foot) 0; height:calc(100% - var(--foot)); object-position:center bottom; } /* `contain`, not `cover`: a square studio shot in a 2:3 slot loses a third of its width to the crop, and `screen` already drops the backdrop away, so there is nothing for `cover` to buy here */ .msplit__item--blend img{object-fit:contain;object-position:center bottom} } /* Cards, same cause. The figure is 4/5 (0.8) but the four portraits are 2:3 (0.667), 1187x1325 (0.896) and 1:1 — so at one and two columns Qais and Abdallah filled the height with margins at their sides, Ahmad spanned the full width instead and left a band of empty card above him, and Aman was cropped 40px off each edge. A 1/1 figure is wider than all four sources, so every one of them becomes height-limited: same photo height, same top, same floor, nothing cropped, and the card is shorter than it was. */ @media (orientation:portrait) and (max-width:1024px){ .member .fig{aspect-ratio:1/1} .member--blend .fig img{object-fit:contain;object-position:center} } /* ---------- PORTRAIT, ON TOUCH ---------- The block above overlaps the copy onto the photo and reserves --foot for it. That foot is a guess, and on a phone the guess is short: measured at 390x844 the copy needs ~218px (26px padding twice, the eyebrow, two lines of name at 28px, a role that wraps to two lines, and the "View portfolio" rule) while 15svh gives 128px. The copy overruns the floor by ~90px and lands on the subject's own body — light type on the light part of a cut-out. Rather than grow the foot to another guess, remove the overlap. The photo is only absolute so it can scale past the panel on hover; there is no hover on a phone, so it can sit in normal flow above the copy and nothing is on top of the name to hide it. Gated on `hover:none`, not on orientation alone — a portrait desktop monitor matches orientation:portrait, still has a pointer, and keeps the overlapping layout and its hover-grow. Panels are flex items of .mrun__track, which stretches them all to the tallest, and each panel bottom-aligns its own contents — so the names still line up across the strip even though the portraits differ in height. */ @media (orientation:portrait) and (hover:none){ .msplit__item{ flex-direction:column; justify-content:flex-end; align-items:stretch; min-height:0; height:auto; } .msplit__item img{ position:static; width:100%; /* auto, not a derived height: each portrait keeps its own ratio and stands on the copy, so none of them is letterboxed inside a 2:3 slot */ height:auto; max-height:calc(100svh - 280px); /* keeps the copy on screen */ object-fit:contain; object-position:center bottom; /* the layer promotion exists for the hover scale, which cannot fire here. It also puts the photo on a compositing layer that WebKit will paint over the copy despite the copy's higher z-index. */ will-change:auto; } .msplit__item--blend img{object-fit:contain;object-position:center bottom} /* the scrim was insurance for copy sitting on the photo; with no overlap left it only darkens the subject's feet */ .msplit__item::after{display:none} } /* ============================================================ PRELOADER Markup is inline in index.html so it paints on first frame. enhance.js drives the counter and removes it. There is also an inline fallback at the bottom of index.html that strips it if the script never runs — it must never be able to trap the page. ============================================================ */ .preloader{ position:fixed;inset:0;z-index:300;background:var(--bg); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:26px; transition:opacity .7s var(--ease),visibility 0s linear .7s; } .preloader.is-done{opacity:0;visibility:hidden;pointer-events:none} .preloader__num{ font-family:var(--disp);font-weight:700;letter-spacing:-.04em; font-size:clamp(56px,13vw,150px); line-height:.9;color:var(--txt);font-variant-numeric:tabular-nums; } .preloader__bar{ width:min(240px,46vw);height:1px;background:var(--line-2);overflow:hidden; } .preloader__bar i{ display:block;width:100%;height:100%;background:var(--accent); transform:scaleX(0);transform-origin:0 50%; } .preloader__label{ font-family:var(--mono);font-size:10.5px;letter-spacing:.24em; text-transform:uppercase;color:var(--txt-3); } /* ============================================================ FLOATING ELEMENTS data-float="0.6" on any element — enhance.js drifts it and leans it toward the cursor. Purely decorative. ============================================================ */ [data-float]{ position:absolute;pointer-events:none;z-index:0; will-change:transform; } /* Inline SVG line-art rather than photos: genuinely transparent, nothing to load, and it scales cleanly. No rectangular edges against the black. */ .floaty{ width:clamp(70px,11vw,170px);aspect-ratio:1/1; color:var(--txt);opacity:.2; } .floaty svg{width:100%;height:100%;display:block;overflow:visible} .floaty img{width:100%;height:100%;object-fit:contain;display:block} @media (max-width:760px){ .floaty{width:clamp(56px,17vw,110px);opacity:.14} } /* ---------- RESPONSIVE ---------- */ @media (max-width:1024px){ .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(2,1fr)} .split{grid-template-columns:1fr;gap:34px} .foot__top{grid-template-columns:1fr 1fr} .foot__brand-col{grid-column:1/-1} } @media (max-width:820px){ .nav-links{display:none} .nav-cta .btn{display:none} .nav-toggle{display:block;width:44px;height:44px} .row{grid-template-columns:1fr;gap:10px} .row__go{margin-top:6px} } @media (max-width:620px){ :root{--gut:clamp(18px,5.5vw,24px)} html{scroll-padding-top:68px} body{font-size:16px;line-height:1.65} .section{padding-block:clamp(64px,20vw,96px)} .nav{ padding-top:max(12px,env(safe-area-inset-top)); padding-right:max(var(--gut),env(safe-area-inset-right)); padding-bottom:12px; padding-left:max(var(--gut),env(safe-area-inset-left)); gap:12px; } .nav.is-stuck{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:10px} .nav-brand{gap:12px} .nav-brand .gate-mark{height:26px} .nav-brand b{font-size:14px;letter-spacing:.08em} .drawer{ padding-top:max(76px,calc(env(safe-area-inset-top) + 64px)); padding-right:max(var(--gut),env(safe-area-inset-right)); padding-bottom:max(28px,env(safe-area-inset-bottom)); padding-left:max(var(--gut),env(safe-area-inset-left)); } .drawer a{min-height:44px;display:flex;align-items:center} .h-display{font-size:clamp(42px,14vw,68px);line-height:.94} .h1{font-size:clamp(38px,12vw,58px);line-height:.98} .h2{font-size:clamp(32px,10vw,46px);line-height:1.04} .lead{font-size:16px;line-height:1.6} .eyebrow{font-size:10px;letter-spacing:.18em} .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} .foot__top{grid-template-columns:1fr} .foot__bot{align-items:flex-start;flex-direction:column} .btn{min-height:44px;padding:12px 18px} .row{padding-block:24px;gap:14px} .row__t{font-size:clamp(25px,8vw,34px);line-height:1.08;overflow-wrap:anywhere} .row__d{font-size:15px;line-height:1.6} .row__go{min-height:44px;margin-top:0;justify-self:start} /* The desktop word-by-word pin becomes a normal reading section on phones. Long scroll choreography makes this paragraph feel fragmented on a small viewport, so mobile gets the full thought at once. */ .scrub{height:auto!important} .scrub__stick{ position:relative;top:auto;min-height:0; padding-block:clamp(76px,22vw,112px); display:block; } .scrub__body{padding-left:18px;padding-right:4px} .scrub__rule{top:.2em;bottom:.2em} .scrub__rule i{transform:scaleY(1)} .scrub__text{ max-width:none;font-size:clamp(27px,8.2vw,38px); line-height:1.2;letter-spacing:-.02em; text-wrap:pretty; } .scrub__text span{color:var(--txt)} .scrub__text span.key{background-size:100% 1px} .scrub__i,.scrub .floaty{display:none} .cta{padding-bottom:max(72px,env(safe-area-inset-bottom))} } /* ============================================================ PAGE TRANSITION + ROW HOVER These were three GSAP tweens. GSAP is ~70 KB over the wire and runs its own ticker; all three are a transform and an opacity between two fixed states, which is what a CSS transition already is. The reduced-motion block below flattens every duration, so none of this needs guarding there. .pt-enter / .pt-out are put on by enhance.js rather than sitting in the markup: if that script never runs,

is simply visible, instead of stuck at opacity 0 behind a fade that has nothing left to trigger it. ============================================================ */ main{will-change:auto} main.pt-enter{opacity:0;transform:translate3d(0,22px,0)} main.pt-in{transition:opacity .9s var(--ease),transform .9s var(--ease)} main.pt-out{ opacity:0;transform:translate3d(0,-26px,0); transition:opacity .5s cubic-bezier(.55,.09,.68,.53),transform .5s cubic-bezier(.55,.09,.68,.53); } /* Hover nudge on the big row links. Hover-capable pointers only — on touch, :hover sticks after a tap and the title would stay shoved sideways. */ @media (hover:hover) and (pointer:fine){ .row__t{transition:transform .55s var(--ease)} .row:hover .row__t{transform:translate3d(14px,0,0)} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} main.pt-enter,main.pt-out{opacity:1;transform:none} [data-reveal]{opacity:1;transform:none} .clip-up > *{transform:none} .gate-reveal::before,.gate-reveal::after{display:none} .page-gate{display:none} /* members run — stopped, and scrollable by hand instead */ .mrun__track{animation:none!important;transform:none!important} .mrun__view{overflow-x:auto} /* unpin the scroll-driven section */ .scrub__stick{position:static;min-height:0;height:auto;overflow:visible} .scrub__text span{color:var(--txt)!important} /* the scroll engine is off, so nothing writes --scrub-p — show the rule filled and the underlines drawn rather than empty */ .scrub__rule i{transform:none} .scrub__text span.key{background-size:100% 1px} .scrub__i{display:none} .split-w > i{transform:none!important} .js [data-scale]{transform:none!important} [data-parallax]{transform:none!important} .stack > .stack__card{position:static} .acc__item[open] .acc__panel{animation:none} .progress{display:none} .gatesplit__half{transform:none!important} .gatesplit__beam{display:none} .preloader{display:none!important} [data-float]{transform:none!important} /* no door animation — show the hero straight away */ .js .intro{height:auto} .js .intro__stick{position:relative;height:auto;min-height:100svh;padding-block:clamp(120px,16vh,180px) clamp(60px,8vh,90px)} .js .intro__content{opacity:1!important;transform:none!important} .intro__door,.intro__beam,.intro__cue{display:none!important} .intro__brand{opacity:1!important} }