@charset "utf-8"; /* ========================================================================== 11•22 STUDIOS — THE RESOLVE Opening sequence: dormant material → identity → signal → olive world → hero. -------------------------------------------------------------------------- The palette is read out of the supplied plates, not invented. Neutrals come from a luminance-sorted downsample of the graphite plate (floor #0A090D, mean #1F1E23, lit edge #6A696B); the olives come from the foliage cut-outs (deep #212314, lit #646650). The graphite is faintly cool, the foliage is warm — that opposition is the whole colour story. Nothing else is added. One rule governs this file: CSS paints the RESOLVED state. Motion opts into hiding things via .js on , so a script failure yields a still page, never a blank one. ========================================================================== */ @property --rise { syntax:''; initial-value:1.4; inherits:false } @property --wipe { syntax:''; initial-value:1; inherits:false } @property --lrise { syntax:''; initial-value:1.4; inherits:false } /* the capability panel's wipe. Initial value 1 — open — so that a script failure leaves the information readable rather than masked away. */ @property --dr { syntax:''; initial-value:1; inherits:false } @property --deep { syntax:''; initial-value:1; inherits:true } @property --lit { syntax:''; initial-value:0; inherits:true } /* how far through the capability sequence the reader has travelled, 0→1 */ @property --seq { syntax:''; initial-value:0; inherits:true } /* the commission's title rising through its mask, 0→1 */ @property --wr { syntax:''; initial-value:1; inherits:false } :root{ /* ── material ───────────────────────────────────────────────────────── */ --void:#050506; --ink:#0A090D; --graphite:#141317; --graphite-2:#1B1A1F; --seam:#343238; --seam-lit:#49464E; --edge:#99969F; /* ── voice ──────────────────────────────────────────────────────────── */ --mute:#A09CA5; --speak:#BBB7BF; --bone:#E5E2D9; --ivory:#F7F4ED; /* read off the supplied mark, so it sits in its own light */ --mark:#F5F1EA; /* ── olive ──────────────────────────────────────────────────────────── */ --olive-deep:#1B1D12; --olive:#3A3E2B; --olive-lit:#646650; /* ── motion constants (mirrored in js/lib/motion.js) ────────────────── */ --e-out:cubic-bezier(.16,1,.3,1); --e-io:cubic-bezier(.76,0,.24,1); --e-mat:cubic-bezier(.24,.62,.22,1); --motion-fast:180ms; --motion-medium:420ms; --motion-slow:900ms; /* ── space ──────────────────────────────────────────────────────────── */ --gut:clamp(20px,4.4vw,72px); --maxw:1680px; --rule:1px; /* ── type ───────────────────────────────────────────────────────────── */ --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif; --serif:'Newsreader','Iowan Old Style','Palatino Linotype',Georgia,serif; --t-micro:clamp(10px,.7vw,12px); --t-small:clamp(12px,.88vw,14px); --t-body:clamp(14px,.95vw,16px); --t-say:clamp(1.95rem,1.05rem + 3.05vw,4.15rem); /* ── depth ──────────────────────────────────────────────────────────── */ --z-env:0; --z-foliage:2; --z-lamp:3; --z-veil:4; --z-mark:6; --z-copy:7; --z-nav:20; --z-grain:60; --z-cursor:90; --z-skip:100; /* ── live state (written by js each frame) ──────────────────────────── */ --sp:0; /* hero scroll progress 0→1, damped */ --deep:1; /* how present the wall behind the lower page is, 0→1 */ --px:50vw; --py:50vh; /* pointer, in viewport coordinates */ --lx:50%; --ly:50%; --lamp:0; --lampR:180px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;background:var(--ink);scroll-padding-top:100px} body{ margin:0;background:var(--ink);color:var(--bone); font-family:var(--sans);font-size:var(--t-body);line-height:1.55;font-weight:350; font-synthesis-weight:none;-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility; overflow-x:clip; } img,svg,canvas,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} h1,h2,p,dl,dd,dt{margin:0} ::selection{background:var(--olive-lit);color:var(--void)} :focus-visible{outline:1px solid var(--bone);outline-offset:5px} .skip{position:absolute;left:-9999px;top:0;z-index:var(--z-skip);background:var(--bone); color:var(--void);padding:13px 20px;font-size:var(--t-micro);letter-spacing:.2em; text-transform:uppercase} .skip:focus{left:12px;top:12px} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* Fine grain over the whole document — the material continues past the hero. */ .grain{position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.085; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")} /* ══ TYPE PRIMITIVES ═══════════════════════════════════════════════════════ */ .micro{font-size:var(--t-micro);line-height:1.5;letter-spacing:.235em; text-transform:uppercase;font-weight:400;color:var(--mute)} .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em} .ln>span{display:block} /* ══ NAVIGATION ════════════════════════════════════════════════════════════ Small, ranged to the page edges, one hairline. It arrives only once the hero has resolved, and it is the last thing that moves. */ .nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav); display:flex;align-items:center;justify-content:space-between; padding:clamp(18px,2.1vw,30px) var(--gut); mix-blend-mode:normal;pointer-events:none} .nav>*{pointer-events:auto;position:relative} /* Below the hero the navigation is over type rather than over a photograph, so it is given a ground to sit on. Material, not glass: a gradient of the page's own ink that fades out before it reaches the content, no blur and no panel edge. Over the hero it is absent entirely — nothing is allowed to darken the opening. */ .nav::before{content:'';position:absolute;left:0;right:0;top:0; height:calc(100% + 28px); background:linear-gradient(180deg,var(--ink) 0%,var(--ink) 46%, rgba(10,9,13,.72) 68%,rgba(10,9,13,0) 100%); opacity:var(--navb,0);transition:opacity .55s var(--e-mat);pointer-events:none} html[data-past='1'] .nav{--navb:1} .nav__mark{display:block;height:26px;color:var(--mark);opacity:.86; transition:opacity .5s var(--e-out)} .nav__mark:hover{opacity:1} .nav__mark svg{height:100%;width:auto;fill:currentColor} /* At 23px the divider is a third of a device pixel and would simply vanish. A non-scaling hairline stroke gives it a floor without touching the geometry — the mark itself is never redrawn, only held above the grid. */ .nav__mark .hair{stroke:currentColor;stroke-width:.5;vector-effect:non-scaling-stroke} .nav__set{display:flex;gap:clamp(20px,2.6vw,42px)} .nav__i{position:relative;font-size:var(--t-micro);letter-spacing:.22em; text-transform:uppercase;color:var(--speak);padding-block:4px; transition:color .45s var(--e-out)} .nav__i::after{content:'';position:absolute;left:0;right:0;bottom:calc(50% - .75em - 3px);height:1px; background:currentColor;transform:scaleX(0);transform-origin:0 50%; transition:transform .55s var(--e-out)} .nav__i:hover{color:var(--bone)} .nav__i:hover::after{transform:scaleX(1)} .nav__i[aria-current]::after,.nav__i:focus-visible::after{transform:scaleX(1)} .nav__i--contact{color:var(--ivory)} .nav__i--contact span{display:inline-block;margin-left:8px} .nav__i{min-height:44px;display:flex;align-items:center} /* ══ HERO ══════════════════════════════════════════════════════════════════ */ .hero{position:relative;height:100vh;height:100dvh;min-height:520px; display:grid;grid-template-rows:1fr auto;isolation:isolate;overflow:clip} /* ── the environment: one room, two states ────────────────────────────── */ .env{position:absolute;inset:0;z-index:var(--z-env);overflow:clip; background:var(--ink); /* Dissolve the whole photographed environment into the SAME fixed wall beneath it. At the section boundary alpha is exactly zero: no black seam. */ -webkit-mask-image:linear-gradient(#000 58%,rgba(0,0,0,.94) 72%,rgba(0,0,0,.5) 89%,transparent 100%); mask-image:linear-gradient(#000 58%,rgba(0,0,0,.94) 72%,rgba(0,0,0,.5) 89%,transparent 100%)} .env>*{position:absolute;inset:0} .env__plate,.env__motion{ width:100%;height:100%;object-fit:cover; transform:translate3d(0,calc(var(--sp) * 3.4vh),0) scale(calc((1 + var(--sp) * .028) * var(--cam,1))); will-change:transform} .env__plate{background:var(--ink) url(../../public/media/plate.jpg) center/cover no-repeat; filter:brightness(var(--plate-b,1))} @media (max-width:900px){ .env__plate{background-image:url(../../public/media/plate-900.jpg)} } .env__motion{opacity:0} /* the lab surface sits exactly on the video and inherits the same transform */ .env__warp{opacity:1;z-index:1} /* development overlay — debug flag only, never in production */ .env__author{position:absolute;inset:0;width:100%;height:100%;z-index:8; opacity:1;touch-action:none} .env__author[hidden]{display:none} .env__warp[hidden]{display:none} /* The olive world is not faded in — light opens across the material, out of the mark, and finds the world that was already standing there. */ .env__motion{-webkit-mask-image:linear-gradient(90deg,transparent calc(50% - var(--rise)*55% - 10%), #000 calc(50% - var(--rise)*55%),#000 calc(50% + var(--rise)*55%),transparent calc(50% + var(--rise)*55% + 10%)); mask-image:linear-gradient(90deg,transparent calc(50% - var(--rise)*55% - 10%), #000 calc(50% - var(--rise)*55%),#000 calc(50% + var(--rise)*55%),transparent calc(50% + var(--rise)*55% + 10%))} /* Key light. The supplied plate is lit from the upper left; the awakening simply turns that light back on. */ .env__key{background:radial-gradient(58% 68% at 91% 18%,rgba(196,200,174,.05),transparent 75%), radial-gradient(56% 62% at 21% 16%, rgba(198,202,182,.075),rgba(122,128,104,.024) 44%,transparent 76%); mix-blend-mode:screen; transform:translate3d(0,calc(var(--sp) * -2vh),0)} /* Pointer light — a gallery lamp, not a cursor glow. */ .env__lamp{ background: radial-gradient(circle var(--lampR) at var(--lx) var(--ly), rgba(238,238,217,.19),rgba(205,210,181,.075) 35%,transparent 72%), radial-gradient(circle calc(var(--lampR) * 2.4) at var(--lx) var(--ly), transparent 12%,rgba(8,9,6,.06) 34%,transparent 68%); mix-blend-mode:normal;opacity:var(--lamp);z-index:var(--z-lamp); transition:opacity .6s var(--e-out)} /* Foliage foreground. WebGL mesh on capable pointers, images everywhere else. */ .env__mesh{z-index:var(--z-foliage);width:100%;height:100%;opacity:0} /* Touch and no-WebGL: the same scene, placed from the same config, still. */ .env__fall{z-index:var(--z-foliage);pointer-events:none} .env__leaf{position:absolute;width:auto;max-width:none; filter:brightness(var(--leaf-b,.8));opacity:var(--leaf-o,1); transform:translate3d(calc(var(--sp) * var(--px,0) * 1vw), calc(var(--sp) * var(--py,12) * 1vh),0) rotate(calc(var(--sp) * var(--pr,0) * 1deg)); transform-origin:var(--ox,50%) var(--oy,50%);will-change:transform} /* One abstract reference to sound: a disturbance crossing the material. */ .env__signal{inset:-14% 0;z-index:calc(var(--z-foliage) + 1);opacity:0; mix-blend-mode:screen;pointer-events:none} .env__signal i{position:absolute;left:-4%;right:-4%;top:0;height:170px; background:linear-gradient(to bottom,transparent 0,rgba(206,212,190,0) 42%, rgba(212,216,198,.055) 48%,rgba(220,224,206,.13) 49.5%,rgba(228,232,214,.21) 50%, rgba(220,224,206,.13) 50.5%,rgba(212,216,198,.055) 52%, rgba(206,212,190,0) 58%,transparent 100%)} .env__vig{z-index:var(--z-veil);background: linear-gradient(to bottom,rgba(5,5,6,0) 54%,rgba(5,5,6,.26) 74%,rgba(5,5,6,.70) 89%,var(--ink) 99%), radial-gradient(120% 106% at 50% 38%,transparent 36%,rgba(5,5,6,.28) 70%,rgba(5,5,6,.68) 100%)} /* The olive world recedes into the same graphite it came out of. */ /* The hero darkens as it leaves — but only as far as the wall behind the rest of the page, not to pure ink. Taken all the way to black it put a hard horizontal step across the viewport at the hero's bottom edge, with dead black above it and lit graphite below. `--sp` is 0 while the hero is on screen, so the landing itself is untouched by this. */ .env__veil{background:var(--ink);opacity:calc(var(--sp) * .72);z-index:var(--z-veil)} /* ── the mark ─────────────────────────────────────────────────────────── */ /* the divider runs past the serifs, so the optical gap under the mark is larger than the metric one — the wordmark comes up to meet the feet. */ .hero__centre{grid-row:1;align-self:center;justify-self:center; display:flex;flex-direction:column;align-items:center; gap:clamp(19px,3.2vh,42px);margin-top:-3.5vh;z-index:var(--z-mark)} .hero__mark{transform:translate3d(0,calc(var(--sp) * 8vh),0) scale(calc(1 - var(--sp) * .07)); opacity:clamp(0,calc(1 - var(--sp) * 2.2),1);will-change:transform} .mk{height:clamp(104px,16.5vh,182px);width:auto;color:var(--mark); fill:currentColor;overflow:visible;shape-rendering:geometricPrecision} .mk__div{transform-box:fill-box;transform-origin:50% 50%; transform:scaleY(var(--dy,1))} /* ── hero copy ────────────────────────────────────────────────────────── */ .hero__stack{z-index:var(--z-copy);text-align:center; transform:translate3d(0,calc(var(--sp) * 5vh),0); opacity:clamp(0,calc(1 - var(--sp) * 2),1)} .wordmark{font-size:var(--t-micro);font-weight:400;letter-spacing:.5em; text-transform:uppercase;color:var(--bone);text-indent:.5em;line-height:1} .wordmark em{font-style:normal;color:var(--olive-lit); padding-inline:.06em;font-size:1.05em;vertical-align:.04em} .hero__foot{grid-row:2;z-index:var(--z-copy); display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px; padding:0 var(--gut) clamp(20px,3vh,34px); transform:translate3d(0,calc(var(--sp) * 4vh),0); opacity:clamp(0,calc(1 - var(--sp) * 2.4),1)} .hero__foot .micro{margin:0} .hero__locale{display:grid;gap:5px;justify-items:start} .hero__explore{position:relative} .hero__explore .hero__hint{position:absolute;top:calc(100% + 8px);white-space:nowrap;opacity:.7} .hero__foot .micro:last-child{text-align:right} .cue{width:1px;height:clamp(26px,4.4vh,40px);background:var(--seam-lit); position:relative;overflow:hidden;justify-self:center;margin-bottom:2px} .cue::after{content:'';position:absolute;inset-inline:0;height:9px;background:var(--bone); opacity:.62;animation:cue 3.4s var(--e-io) infinite} @keyframes cue{0%{transform:translateY(-10px);opacity:0} 22%{opacity:.62}70%{opacity:.62}100%{transform:translateY(40px);opacity:0}} /* ══ FIRST SCROLL HANDOFF ══════════════════════════════════════════════════ The foliage was the opening language, not the theme. Here the world turns typographic and architectural, on the same graphite ground. */ .turn{position:relative;padding:clamp(50px,8vh,100px) var(--gut) clamp(76px,12vh,150px); background:var(--ink)} .turn__in{max-width:var(--maxw);margin-inline:auto;position:relative} .turn__brief{display:flex;justify-content:space-between;align-items:end;gap:28px; padding:0 0 clamp(36px,5vh,64px);margin-left:calc((100% / 12.6 * .9) + clamp(28px,3.4vw,60px))} .turn__brief p{font-size:var(--t-body);color:var(--speak);line-height:1.8} .hr{height:var(--rule);background:var(--seam);transform:scaleX(var(--wipe)); transform-origin:0 50%} .turn__grid{display:grid;grid-template-columns:1fr;gap:clamp(46px,7vh,88px); padding-block:clamp(54px,8vh,104px)} .turn__ix{font-size:var(--t-micro);letter-spacing:.24em;color:var(--edge); text-transform:uppercase} .turn__say{font-size:var(--t-say);line-height:1.02;font-weight:400; letter-spacing:-.032em;color:var(--ivory);max-width:18ch} .turn__say em{font-family:var(--serif);font-style:italic;font-weight:300; letter-spacing:-.014em;color:var(--bone)} .turn__idx{display:grid;gap:clamp(22px,3vh,34px)} .turn__idx dt{font-size:var(--t-micro);letter-spacing:.235em;text-transform:uppercase; color:var(--speak);padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--seam)} .turn__idx dd{font-size:var(--t-small);color:var(--mute);max-width:30ch;line-height:1.62} @media (min-width:900px){ .turn__grid{grid-template-columns:minmax(0,.9fr) minmax(0,8fr) minmax(0,3.7fr); gap:clamp(28px,3.4vw,60px);align-items:start} .turn__say{max-width:none} .turn__idx{align-self:end;padding-bottom:.5em} } /* ══ THE WALL BEHIND THE LOWER PAGE ═══════════════════════════════════════ One surface, fixed to the viewport, that the sections scroll over. It is the hero's plate, darkened until it is material rather than photograph — the type has to stay the brightest thing on the page, so the plate is held well under the typography and only the pointer lifts it. */ .editorial{position:relative;isolation:isolate;overflow:clip} /* Native sticky backdrop is contained below the hero in normal document flow. No opacity threshold or scroll callback can leak it into the hero. */ .deep{position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:0;pointer-events:none;overflow:clip; opacity:var(--deep,0);will-change:opacity} .deep__mat{position:absolute;inset:0; background:var(--ink) url(../../public/media/plate.jpg) center/cover no-repeat} /* held down to a material: without this the plate reads as a photograph and competes with the index sitting on it */ .deep__mat::after{content:'';position:absolute;inset:0;background:#171a16;opacity:.62} /* A continuous smoked-olive room. Only decorative transforms move; the readable surface never flashes between per-section background colours. */ .deep__wash{position:absolute;inset:-12%;opacity:.8; background:radial-gradient(ellipse at 76% 24%,rgba(113,119,80,.21),transparent 58%), linear-gradient(115deg,rgba(12,13,15,.5),transparent 45%,rgba(13,14,12,.4))} .deep__leaves{position:absolute;inset:-8%;opacity:.24; background:url(../../public/media/olive-poster-hq.jpg) 85% center/cover no-repeat; mask-image:linear-gradient(90deg,transparent 35%,#000 90%); transform:scale(1.06)} /* The same museum light as the hero, weaker and larger. Amplitude is deliberately tiny — this is the surface catching the light, not a torch being carried. */ .deep__lit{position:absolute;inset:0; background:radial-gradient(46vmax 46vmax at var(--px) var(--py), rgba(190,193,178,.055),transparent 68%); opacity:var(--lit,0);transition:opacity .8s var(--e-mat)} /* The sections no longer carry their own ground — they sit on the wall. Their own `background:var(--ink)` declarations are removed at source rather than overridden here: both came later in the file and won, so the wall was painted over everywhere except the handoff. */ .turn,.cap,.wk{background:transparent} .turn,.cap,.wk,.hero{position:relative;z-index:1} .contact{position:relative;z-index:1} @media (prefers-reduced-motion:reduce){ .deep__lit{display:none} } /* ══ SCENE 02 · CAPABILITIES ═══════════════════════════════════════════════ A catalogue index. The list keeps the column positions the handoff already established, so the two sections read as one spread rather than two designs. Nothing here opens or closes by changing height: on a wide screen the detail is lifted out of the flow into the right-hand column and cross-fades in place, so the index never moves under the reader's eye. Below 900px the same markup sits under its own title and is simply always legible — the reveal is a desktop affordance, not a way of hiding information from a phone. */ .cap{position:relative;padding:0 var(--gut) clamp(28px,4vh,52px)} .cap__in{max-width:var(--maxw);margin-inline:auto;position:relative} .cap__grid{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vh,54px); /* the handoff above already closes with a deep margin, so the top here is kept short — two full section paddings back to back left a dead field */ padding-block:clamp(18px,2.6vh,42px) clamp(54px,8vh,104px)} .cap__ix{font-size:var(--t-micro);letter-spacing:.24em;color:var(--edge); text-transform:uppercase;position:relative} /* The folio rule. Not a progress bar — a drawing index: a hairline in the gutter that fills as the sequence advances, and is simply absent when the sequence is not running. */ .cap__tick{display:none} html[data-seq] .cap__tick{display:block;position:absolute;left:0; top:calc(100% + 14px);width:1px;height:clamp(52px,11vh,104px); background:linear-gradient(180deg,var(--bone) 0 calc(var(--seq) * 100%), var(--seam) calc(var(--seq) * 100%)); opacity:.55} /* Inactive entries recede rather than disappear — the list stays readable, but the eye is told where it is. Tracking opens a hair on the live one; that is the smallest gesture that reads as emphasis without moving anything. */ .cap__row{transition:opacity .5s var(--e-mat)} html[data-seq] .cap__row{opacity:.42} html[data-seq] .cap__row.on{opacity:1} .cap__row.on .cap__t{letter-spacing:-.014em} .cap__h{font-size:var(--t-micro);letter-spacing:.235em;text-transform:uppercase; color:var(--speak);font-weight:400; padding-bottom:10px;border-bottom:1px solid var(--seam)} .cap__h--q{color:var(--speak)} .cap__main>.cap__h{border:0;margin-bottom:26px;width:auto} /* Only when the stage is actually going to be pinned. A chapter that holds the frame has to fill it; anywhere else this would just be wasted height. */ .cap__stage[data-pinned]{min-height:100svh;display:flex;align-items:center} .cap__stage[data-pinned]>.cap__grid{width:100%;padding-block:0} .cap__list{list-style:none;margin:0;padding:0;position:relative} .cap__list--top>.cap__row:first-child .cap__btn{border-top:1px solid var(--seam)} .cap__row{position:relative} .cap__row h3{margin:0;font-weight:400;font-size:inherit} /* the row itself — a button, because that is what it is */ .cap__btn{display:grid;grid-template-columns:auto 1fr;align-items:baseline; gap:clamp(16px,2.2vw,34px);width:100%;padding:clamp(15px,2.1vh,24px) 0; background:none;border:0;border-bottom:1px solid var(--seam); text-align:left;color:inherit;font:inherit;cursor:pointer; position:relative;-webkit-tap-highlight-color:transparent} .cap__n{font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.2em; color:var(--edge);transition:color .5s var(--e-mat); font-variant-numeric:tabular-nums} .cap__t{font-size:clamp(1.14rem,.62rem + 1.55vw,2.32rem);line-height:1.08; letter-spacing:-.026em;color:var(--speak); transition:color .5s var(--e-mat)} /* the mark's own divider, standing in the margin of the open entry */ .cap__btn::before{content:'';position:absolute;left:calc(-1 * clamp(11px,1.5vw,22px)); top:18%;width:1px;height:64%;background:var(--bone);opacity:.5; transform:scaleY(0);transform-origin:center; transition:transform .55s var(--e-out),opacity .55s linear} .cap__row.on .cap__btn::before{transform:scaleY(1);opacity:.65} .cap__row.on .cap__n{color:var(--speak)} .cap__row.on .cap__t{color:var(--ivory)} .cap__btn:focus-visible{outline:1px solid var(--edge);outline-offset:6px} /* the detail — set small, in the register of the index metadata */ .cap__d ul{list-style:none;margin:0;padding:0; display:flex;flex-wrap:wrap;gap:4px clamp(12px,1.4vw,20px)} .cap__d li{font-size:var(--t-small);color:var(--mute);line-height:1.62} /* The separator belongs to the item BEFORE it, inline. Set as an absolutely positioned dot on the following item it ends up at the head of a wrapped line, reading as a bullet that has come loose. */ .cap__d li:not(:last-child)::after{content:'·';color:var(--seam-lit); margin-left:clamp(7px,.7vw,10px)} .cap__artist{margin-top:clamp(42px,6.5vh,78px)} @media (min-width:900px){ /* the artist block keeps the index column's left edge, so leaving the pinned stage does not look like leaving the grid */ .cap__artist{margin-left:calc((100% / 12.6 * .9) + clamp(28px,3.4vw,60px))} } .cap__seq{list-style:none;margin:clamp(15px,2.2vh,24px) 0 0;padding:0; display:flex;flex-wrap:wrap;gap:6px clamp(18px,2.4vw,38px)} .cap__seq li{font-size:var(--t-body);color:var(--speak);letter-spacing:-.012em} .cap__artist .text-link{margin-top:22px} /* The artist pathway is a full editorial counterpoint to the corporate index, not a small footer. The same divider and italic register carry the identity. */ .cap__artist{width:100%;margin:clamp(40px,6vh,72px) 0 0;padding:clamp(40px,6vh,72px) 0 32px; border-top:1px solid var(--seam);min-height:0} .cap__artist>.cap__h{width:auto;border:0;padding:0} .artist__spread{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(50px,9vw,150px);align-items:center;margin-top:58px} .artist__title{font-weight:300;font-size:clamp(3.2rem,7.4vw,8.5rem);line-height:.98;letter-spacing:-.045em;color:var(--ivory)} .artist__title em{font-family:var(--serif);font-weight:300;letter-spacing:-.025em} .artist__body{position:relative;padding-left:30px} .artist__body>p{max-width:38ch;font-size:var(--t-body);line-height:1.9;color:var(--speak)} .artist__rule{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--olive-lit);transform-origin:top} .artist__body .cap__seq{gap:8px 22px;margin-top:28px} .artist__body .cap__seq li{font-size:var(--t-small)} @media(max-width:899.98px){ .turn__brief{margin-left:0;display:block}.turn__brief .text-link{margin-top:24px} .artist__spread{grid-template-columns:1fr;gap:40px;margin-top:34px} .cap__artist{min-height:0}.artist__body{padding-left:24px} } .cap__note{font-size:var(--t-micro);letter-spacing:.235em;text-transform:uppercase; color:var(--edge);padding-top:16px} @media (max-width:899.98px){ /* every detail is open and readable; there is no pointer to reveal it */ .cap__d{padding:0 0 clamp(15px,2.1vh,22px)} .cap__btn{border-bottom:0;padding-bottom:clamp(9px,1.2vh,13px)} .cap__row{border-bottom:1px solid var(--seam)} .cap__btn::before{display:none} .cap__n{color:var(--edge)} .cap__t{color:var(--bone)} } @media (min-width:900px){ .cap__grid{grid-template-columns:minmax(0,.9fr) minmax(0,11.7fr); gap:clamp(28px,3.4vw,60px);align-items:start} /* The index takes the left of the main column and the panel the right, on the same 8 : 3.7 the handoff above it uses. The rule under each entry is the BUTTON's own border, so it stops where the index stops — the panel is beyond it rather than sitting on top of it. */ .cap__list{width:100%} .cap__btn{width:68%} .cap__h{width:68%} .cap__d{position:absolute;top:0;right:0;width:26%; opacity:0;visibility:hidden;pointer-events:none; -webkit-mask-image:linear-gradient(90deg,#000 0 calc(var(--dr,1) * 100%), transparent calc(var(--dr,1) * 100% + 14%)); mask-image:linear-gradient(90deg,#000 0 calc(var(--dr,1) * 100%), transparent calc(var(--dr,1) * 100% + 14%)); transition:opacity .34s var(--e-mat),visibility 0s linear .34s} .cap__row.on .cap__d{opacity:1;visibility:visible;pointer-events:auto; transition:opacity .38s var(--e-mat),visibility 0s} .cap__d ul{flex-direction:column;gap:clamp(7px,.9vh,11px)} /* one panel at a time, and it is the thing being read — so it is set in the speaking grey, not the muted one the inline lists use on a phone */ .cap__d li{color:var(--speak)} .cap__d li:not(:last-child)::after{content:none} .cap__note{text-align:right} } /* ══ SCENE 03 · SELECTED WORK ══════════════════════════════════════════════ Evidence, set as a catalogue entry rather than a portfolio tile. It keeps the index column and the hairline register of the two sections above it, and spends its difference on one thing only: the title of the work, which is the largest type below the hero and the only italic serif at this depth. Scale is deliberately held under the handoff's statement — the opening stays the loudest moment on the page, and each section further down speaks a little more quietly and a little more precisely. */ .wk{position:relative;padding:0 var(--gut) clamp(110px,17vh,210px)} .wk__in{max-width:var(--maxw);margin-inline:auto;position:relative} .wk__grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,4.4vh,50px); padding-block:clamp(24px,4vh,48px) 0} .wk__ix{font-size:var(--t-micro);letter-spacing:.24em;color:var(--edge); text-transform:uppercase} .wk__lab{font-size:var(--t-micro);letter-spacing:.235em;text-transform:uppercase; color:var(--speak);font-weight:400;padding-bottom:10px;position:relative} /* drawn, not faded: the rule travels out of the capability sequence above and opens the commission — the two sections are joined by a line, not a gap */ .wk__lab::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px; background:var(--seam);transform:scaleX(var(--wipe,1));transform-origin:0 50%} /* The title rises through a mask instead of sliding in. The metadata beside it never moves — that contrast is the whole gesture: the work travels, the record of it stays put. */ .wk__title{clip-path:inset(-0.12em 0 calc((1 - var(--wr,1)) * 100%) 0)} .wk__item{padding-top:clamp(34px,5.5vh,66px)} .wk__client{font-size:var(--t-micro);letter-spacing:.235em;text-transform:uppercase; color:var(--edge)} .wk__title{font-family:var(--serif);font-weight:300; font-size:clamp(2.4rem,1.2rem + 4.5vw,6rem);line-height:1.02; letter-spacing:-.014em;color:var(--ivory); margin-top:clamp(14px,2vh,22px)} .wk__title em{font-style:italic} .wk__body{display:grid;grid-template-columns:1fr;gap:clamp(30px,4.4vh,52px); margin-top:clamp(38px,6vh,72px)} /* the scope: a spec sheet, one line per deliverable, in the index register */ .wk__scope{list-style:none;margin:0;padding:0} .wk__scope li{font-size:var(--t-body);color:var(--speak);letter-spacing:-.012em; padding-block:clamp(11px,1.5vh,15px);border-bottom:1px solid var(--seam)} .wk__scope li:first-child{border-top:1px solid var(--seam)} .wk__meta{margin:0;display:grid;gap:clamp(18px,2.6vh,26px);align-content:start} .wk__meta dt{font-size:var(--t-micro);letter-spacing:.235em;text-transform:uppercase; color:var(--edge);padding-bottom:7px} .wk__meta dd{margin:0;font-size:var(--t-small);color:var(--mute)} @media (min-width:900px){ /* the same index gutter and main column the capability section uses, so the three numbered sections sit on one spread rather than three layouts */ .wk__grid{grid-template-columns:minmax(0,.9fr) minmax(0,11.7fr); gap:clamp(28px,3.4vw,60px);align-items:start} .wk__item{padding-top:clamp(40px,6.5vh,78px)} .wk__title{max-width:16ch} .wk__body{grid-template-columns:minmax(0,1fr) minmax(0,.46fr); gap:clamp(30px,3.6vw,64px);align-items:start} } /* ══ CUSTOM CURSOR ═════════════════════════════════════════════════════════ A precision point and the mark's own divider. Nothing else. */ .cur{position:fixed;left:0;top:0;z-index:var(--z-cursor);pointer-events:none; opacity:0;transition:opacity .35s linear;mix-blend-mode:difference} .cur.on{opacity:1} .cur i{position:absolute;background:var(--ivory);display:block} .cur__d{width:3px;height:3px;margin:-1.5px 0 0 -1.5px; transform:scale(var(--cd,1));transition:transform .4s var(--e-out)} .cur__s{width:1px;height:15px;margin:-7.5px 0 0 -.5px;opacity:.34; transform:scaleY(var(--cs,1));transition:transform .4s var(--e-out),opacity .4s linear} /* The light and trailing divider enhance the OS pointer; they never remove it. Text editing, native selects, and keyboard focus keep familiar affordances. */ .cur__d{width:11px;height:5px;margin:-2.5px 0 0 -5.5px;border-radius:1px;box-shadow:0 0 0 1px rgba(10,9,13,.25); background:linear-gradient(var(--ivory) 40%,#99969f 40%,#99969f 60%,var(--ivory) 60%)} .cur__s{height:27px;margin-top:-13.5px;opacity:.6} .cur__s::before,.cur__s::after{content:'';position:absolute;left:-2px;width:5px;height:1px;background:var(--ivory);opacity:.65} .cur__s::before{top:0}.cur__s::after{bottom:0} /* JS already supplies frame-independent damping; a CSS transform transition on every pointer frame would add a second, imprecise trailing cursor. */ .cur i{transition:none} @media (pointer:fine) and (hover:hover) and (prefers-reduced-motion:no-preference){ html.cursorized:not([data-motion='still']),html.cursorized:not([data-motion='still']) *{cursor:none!important} html.cursorized input,html.cursorized textarea{cursor:text!important} } .hero__explore{display:grid;justify-items:center;gap:14px} .hero__hint{font-size:9px;letter-spacing:.14em;color:var(--speak)} @media (pointer:coarse),(prefers-reduced-motion:reduce){.hero__hint{display:none}} /* The studio's atmosphere returns as a photographic spread, not a fabricated image of the commission. Native-resolution image; no blur or sharpening. */ .wk{overflow:clip;min-height:90svh;padding-top:5vh} .wk__atmos{position:absolute;inset:0 0 0 40%;pointer-events:none; mask-image:linear-gradient(90deg,transparent,#000 35%),linear-gradient(transparent,#000 18%,#000 76%,transparent); mask-composite:intersect} .wk__atmos img{width:100%;height:100%;object-fit:cover;object-position:84% center;opacity:.86} .wk__atmos::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--ink),rgba(10,9,13,.2) 65%),linear-gradient(transparent 22%,rgba(10,9,13,.88) 76%)} .wk__atmos>span{position:absolute;right:var(--gut);top:18%;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--speak);z-index:1} .wk__title{max-width:18ch!important;font-size:clamp(2.8rem,6vw,7.2rem)} .grain{opacity:.035} html[data-past='1'] .grain{opacity:.065} @media(max-width:899.98px){.wk__atmos{inset:0 0 0 12%}.wk__atmos>span{display:none}.hero__explore{order:3}} /* ══ ENQUIRIES · one editorial spread, no card or modal ══════════════════ */ .text-link{display:inline-flex;gap:20px;align-items:center;min-height:44px; font-size:var(--t-small);color:var(--bone);border-bottom:1px solid var(--seam-lit)} .text-link span,.project-button span{display:inline-block;transition:transform var(--motion-medium) var(--e-out)} .text-link:hover span,.project-button:hover span{transform:translate(3px,-3px)} .text-link:focus-visible,.project-button:focus-visible{outline:2px solid var(--bone);outline-offset:6px} .contact{padding:0 var(--gut);background:linear-gradient(transparent,rgba(10,9,13,.3))} .contact__in{max-width:var(--maxw);margin-inline:auto} .contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); column-gap:clamp(64px,10vw,168px);padding:72px 0 100px} .chapter-index{grid-column:1/-1;font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:60px} .eyebrow{font-size:var(--t-micro);letter-spacing:.21em;text-transform:uppercase;color:var(--speak);margin-bottom:26px} .contact__intro h2,.enquiry-review h3{font-weight:300;font-size:clamp(2.5rem,1.3rem + 3.3vw,5.2rem); line-height:1.03;letter-spacing:-.055em;color:var(--ivory);margin:0} .contact__intro h2 em,.enquiry-review h3 em{font-family:var(--serif);font-weight:300;letter-spacing:-.025em} .contact__lede{margin-top:36px;color:var(--bone);font-size:clamp(15px,1.16vw,19px);line-height:1.65} .contact__aside{max-width:36ch;margin:24px 0 28px;font-size:var(--t-small);line-height:1.8;color:var(--mute)} .contact__project{min-width:0} .enquiry__label{display:flex;justify-content:space-between;gap:20px;padding-bottom:30px; color:var(--bone);font-size:var(--t-small)} .enquiry__label span{font-size:11px;color:var(--mute)} .enquiry__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 28px} .field{min-width:0;position:relative} .field--full{grid-column:1/-1} .field label{display:block;font-size:12px;color:var(--bone);margin-bottom:9px;line-height:1.5} .field label span{color:var(--mute);font-size:11px} .field input,.field select,.field textarea{display:block;width:100%;border:0;border-bottom:1px solid #69646e; border-radius:0;background:rgba(10,9,13,.14);color:var(--ivory);font:inherit;font-size:16px; padding:12px 2px;min-height:48px;transition:border-color var(--motion-fast),background var(--motion-fast); outline-offset:4px;color-scheme:dark} .field input::placeholder,.field textarea::placeholder{color:var(--mute);opacity:1;font-size:13px} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--bone);background:rgba(229,226,217,.055)} .field:focus-within label{color:var(--ivory)} .field select{cursor:pointer;padding-right:28px;font-size:14px} /* Keep native iPhone field focus from triggering sub-16px text zoom. */ @media(pointer:coarse){.field select{font-size:16px}} .field option,.field optgroup{background:var(--graphite);color:var(--ivory)} .field textarea{resize:vertical;min-height:116px;line-height:1.65} .field__hint{font-size:11px;line-height:1.7;color:var(--mute);margin-top:9px} .enquiry__action{margin-top:38px} .project-button{display:flex;justify-content:space-between;align-items:center;width:100%;gap:30px; border:1px solid var(--bone);background:var(--bone);color:var(--ink);border-radius:0; padding:20px 24px;min-height:62px;font:inherit;font-size:14px;cursor:pointer; transition:background var(--motion-medium),border-color var(--motion-medium)} .project-button:hover{background:var(--ivory);border-color:var(--ivory)} .project-button:disabled{opacity:.6;cursor:not-allowed} .enquiry__note{font-size:11px;line-height:1.75;color:var(--mute);margin-top:16px;max-width:58ch} .enquiry-review h3{font-size:clamp(2rem,3vw,3.5rem);scroll-margin-top:130px} .enquiry-review__status{font-size:13px;color:var(--bone);border-block:1px solid var(--seam);padding:18px 0;margin:26px 0} .enquiry-review dl{margin-bottom:34px;display:grid;gap:20px} .enquiry-review dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:4px} .enquiry-review dd{font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--bone)} .footer{display:flex;justify-content:space-between;gap:26px;padding:32px 0 44px;border-top:1px solid var(--seam); font-size:var(--t-micro);letter-spacing:.14em;color:var(--mute);text-transform:uppercase} .footer a{color:var(--bone);min-height:44px} [hidden]{display:none!important} @media(min-width:1100px){.contact__intro{align-self:start;position:sticky;top:150px}} @media(max-width:899.98px){ .contact__grid{grid-template-columns:1fr;gap:48px;padding:46px 0 70px} .chapter-index{margin:0}.contact__aside{max-width:48ch} .contact__project{max-width:660px;width:100%} .footer{flex-wrap:wrap;gap:12px 30px}.footer a{flex-basis:100%} } @media(max-width:560px){ .enquiry__fields{grid-template-columns:1fr;gap:24px}.field--full{grid-column:auto} .enquiry__label{display:block}.enquiry__label span{display:block;margin-top:8px} .nav__set{gap:14px}.nav__i{font-size:9px;letter-spacing:.12em} .nav__i--contact span{margin-left:5px}.footer{display:block}.footer p{margin-top:12px} } /* ══ MOTION STATES ═════════════════════════════════════════════════════════ Only in force while the room is still opening. Once it is live the stylesheet hands every scroll-driven value back to the rules above, so nothing the loader touched is left holding an inline style. */ .js:not([data-stage='live']) .nav, .js:not([data-stage='live']) .hero__stack, .js:not([data-stage='live']) .hero__foot, .js:not([data-stage='live']) .env__key, .js:not([data-stage='live']) .js:not([data-stage='live']) .mk__div{opacity:0;--dy:0} /* The masks are open in the markup so a script failure still shows the mark. That leaves one frame between first paint and the loader claiming the page, which this closes — `dormant` lasts only until initial() has run. */ .js[data-stage='dormant'] .mk{opacity:0} /* revealed on arrival, not on load */ .js .turn .hr{--wipe:0} .js .turn__ix,.js .turn__say .ln>span,.js .turn__idx>div{opacity:0} .js .cap .hr{--wipe:0} /* Scoped to a state attribute rather than left as inline opacity, because the sequence needs to own opacity afterwards — a GSAP value left on the element would outrank the stylesheet and the inactive rows would never recede. */ .js .cap:not([data-in]) .cap__ix, .js .cap:not([data-in]) .cap__row{opacity:0} .js .cap:not([data-artist]) .cap__h--q, .js .cap:not([data-artist]) .cap__seq li, .js .cap:not([data-artist]) .cap__note{opacity:0} .js .wk:not([data-in]) .wk__ix,.js .wk:not([data-in]) .wk__lab, .js .wk:not([data-in]) .wk__client{opacity:0} .js .wk:not([data-in]) .wk__lab{--wipe:0} /* ══ RESPONSIVE ════════════════════════════════════════════════════════════ Not a shrink — a different, deliberate composition. */ @media (max-width:900px){ .hero{min-height:560px} .hero__centre{margin-top:-5vh;gap:clamp(22px,3.4vh,36px)} .mk{height:clamp(88px,13.5vh,128px)} .nav__mark{height:20px} .hero__foot{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px} .hero__foot .micro:last-child{text-align:center} .hero__foot .micro:first-child{order:2} .hero__locale{justify-items:center;order:2}.hero__locale .micro{order:0!important} .cue{order:3;margin-top:4px} .nav__set{gap:18px} .turn__say{max-width:none} } @media (max-width:560px){ .wordmark{letter-spacing:.38em} } /* ══ REDUCED MOTION ════════════════════════════════════════════════════════ A refined still, delivered at once. Not a degraded version — a quiet one. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important} .cue::after{animation:none;opacity:.5;transform:translateY(12px)} .env__lamp,.cur{display:none} .env__plate,.env__motion,.hero__mark,.hero__stack,.hero__foot{transform:none!important} .contact__intro{position:static} } /* ══ EDITORIAL UNFOLD · the hero's room opens into the studio ════════════ Scope deliberately excludes hero, logo, cursor and native-video rendering. Archivo becomes the display voice: weight and scale, not cursive contrast. */ .editorial .turn__say em,.editorial .artist__title em, .editorial .contact__intro h2 em,.editorial .enquiry-review h3 em{ font-family:var(--sans);font-style:normal;letter-spacing:-.055em;font-weight:400} .turn{padding:0 var(--gut) 48px} .turn::before{content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(var(--ink),transparent 280px)} .turn__in{padding-top:104px;isolation:isolate} .turn__in>.hr,.turn__grid,.turn__brief{position:relative;z-index:1} .turn__aperture{position:absolute;inset:20px calc(-1 * var(--gut)) 0;z-index:0; pointer-events:none;overflow:clip;opacity:.7; mask-image:linear-gradient(transparent,#000 24%,#000 72%,transparent)} .turn__aperture img{width:100%;height:100%;object-fit:cover;object-position:82% center} .turn__aperture::after{content:'';position:absolute;inset:0; background:linear-gradient(90deg,rgba(10,9,13,.88),rgba(10,9,13,.5) 55%,rgba(10,9,13,.12))} .turn__grid{grid-template-columns:54px minmax(0,1fr);gap:28px 34px;padding-block:38px} .turn__say{font-size:clamp(3.5rem,7.3vw,8rem);font-weight:300;line-height:.98; letter-spacing:-.055em;max-width:16ch} .turn__say em{color:var(--ivory)} .turn__idx{grid-column:2;grid-template-columns:1fr 1fr;max-width:710px;gap:48px} .turn__idx dt{border:0;padding-bottom:0} .turn__brief{margin-left:88px;padding-bottom:32px;gap:24px} .turn__brief p{font-size:12px;max-width:48ch;line-height:1.6} .turn__brief .text-link{white-space:nowrap} .cap__t{font-size:clamp(1.3rem,2.5vw,2.8rem);letter-spacing:-.04em} .cap__btn{padding-block:clamp(20px,3vh,32px)} .cap__d{padding-top:8px} .cap__row{transition:none} .artist__spread{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:5vw;margin-top:34px} .artist__title{font-size:clamp(3.1rem,6.4vw,7.4rem);letter-spacing:-.06em;line-height:1.04} .artist__title .ln:last-child{color:var(--bone)} .artist__body{padding-left:24px} .wk{min-height:0;padding-top:0;padding-bottom:clamp(72px,10vh,120px)} .wk__item{padding-top:32px} .wk__title{font-family:var(--sans);font-size:clamp(3rem,7.1vw,8rem); font-weight:300;letter-spacing:-.055em;line-height:1.02;max-width:none!important} .wk__title .ln:last-child{font-weight:400} .wk__atmos{inset:0 0 0 22%} .wk__body{margin-top:38px} .contact__intro h2{font-weight:300;letter-spacing:-.055em;line-height:1.08} .contact__intro h2 em{color:var(--bone)} /* One short held composition on roomy screens. Native sticky creates no pin spacer and collapses automatically on short screens or reduced motion. */ @media(min-width:1000px) and (min-height:760px) and (prefers-reduced-motion:no-preference){ html[data-unfold]:not([data-motion='still']) .turn{height:150svh;padding-bottom:0} html[data-unfold]:not([data-motion='still']) .turn__in{position:sticky;top:0;min-height:100svh; display:flex;flex-direction:column;justify-content:center;padding-block:100px 38px} html[data-unfold]:not([data-motion='still']) .turn__grid{flex:none} } @media(max-width:999.98px){ .turn__in{padding-top:76px}.turn__grid{grid-template-columns:1fr;gap:28px} .turn__say{font-size:clamp(2.8rem,8.2vw,5.6rem);max-width:none} .turn__idx{grid-column:1;gap:24px}.turn__brief{margin-left:0} .turn__aperture{opacity:.46}.turn__aperture::after{background:rgba(10,9,13,.35)} } @media(max-width:899.98px){ .artist__spread{grid-template-columns:1fr;gap:30px} .artist__title{font-size:clamp(2.7rem,8vw,4.8rem)} .wk__title{font-size:clamp(2.3rem,7.6vw,4.5rem)} .cap__btn{padding-block:20px 12px}.cap__d{padding-top:0} } @media(max-width:560px){ .turn__idx{grid-template-columns:1fr 1fr;gap:18px} .turn__idx dt{font-size:9px;letter-spacing:.12em}.turn__idx dd{font-size:12px} .turn__say{font-size:clamp(2.4rem,9vw,3.4rem)} .turn__brief p{display:none}.turn__brief .text-link{margin-top:0} .artist__body{padding-left:18px} } @media(prefers-reduced-motion:reduce){ .deep{position:absolute;inset:0;height:auto;margin:0} } html[data-motion='still'] .deep{position:absolute;inset:0;height:auto;margin:0} /* LIVING CHAPTERS — same atmosphere, a different composition per movement. */ .deep__leaves{mask-image:linear-gradient(90deg,rgba(0,0,0,.32),#000 78%); background-position:82% center} .deep__leaves video{width:100%;height:100%;object-fit:cover;object-position:82% center} .deep__mat::after{opacity:.76} .turn__aperture{inset:8% -2% 0 30%;display:flex;align-items:center;justify-content:center; gap:3vw;mask-image:none;opacity:.1;font-size:clamp(9rem,24vw,30rem); font-weight:200;letter-spacing:-.095em;color:var(--bone);overflow:visible} .turn__aperture i{width:1px;height:55%;background:currentColor;transform:rotate(16deg)} .turn__aperture::after{display:none} .turn__say{position:relative} .turn__brief{padding-top:12px} .cap__stage{position:relative;padding-bottom:clamp(40px,8vh,80px)} .cap__artist{position:relative;isolation:isolate;min-height:86svh; display:flex;flex-direction:column;justify-content:center; margin-top:64px;padding-block:72px 100px;border-top:0} .artist__spread{grid-template-columns:1fr;gap:54px;position:relative;z-index:1} .artist__title{font-size:clamp(3.2rem,8.8vw,10rem);line-height:1.02;max-width:15ch} .artist__title .ln:last-child{padding-left:8vw} .artist__body{width:44%;margin-left:auto;padding-left:24px} .artist__body>p{max-width:40ch} .artist__field{position:absolute;inset:0 -6vw 0 34%;z-index:-1;pointer-events:none; display:grid;place-items:center;opacity:.48} .artist__orbit{width:100%;aspect-ratio:1;border:1px solid rgba(219,214,192,.5); border-radius:50%;transform:scaleX(.65);position:absolute; background:linear-gradient(145deg,rgba(211,208,178,.1),transparent 50%)} .artist__orbit--inner{width:72%;border-color:rgba(219,214,192,.25);transform:rotate(32deg) scaleX(.65)} .artist__field>span{position:absolute;bottom:12%;right:12%;font-size:9px; text-transform:uppercase;letter-spacing:.22em;writing-mode:vertical-rl} .wk{isolation:isolate;padding-top:clamp(88px,14vh,150px);padding-bottom:clamp(110px,17vh,190px); background:linear-gradient(180deg,rgba(10,9,13,.05),rgba(10,9,13,.72))} .wk__atmos{inset:6% 5% 9% 42%;mask-image:none;overflow:visible} .wk__atmos::after{display:none} .wk__frame{position:absolute;inset:0;border:1px solid rgba(227,224,206,.24); background:linear-gradient(145deg,rgba(224,223,197,.065),transparent 60%)} .wk__frame::before,.wk__frame::after{content:'';position:absolute;width:18px;height:18px; border-color:var(--bone);border-style:solid} .wk__frame::before{top:-1px;left:-1px;border-width:1px 0 0 1px} .wk__frame::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0} .wk__atmos>span{top:24px;right:24px;font-size:9px} .wk__title{font-size:clamp(3rem,6.7vw,7.5rem);line-height:1.09} .wk__title .ln:last-child{padding-left:4vw} .wk__body{margin-top:72px;gap:8vw} .wk__scope{max-width:620px} .wk__meta{padding:24px;background:rgba(10,9,13,.4)} /* Paper is the deliberate visual stop: the brief has no moving background. */ .contact{position:relative;background:#e5e1d5;color:#272a24; --ivory:#20251f;--bone:#30362d;--speak:#41493c;--mute:#565c51;--edge:#565c51; --ink:#e5e1d5;--graphite:#eeeade;--seam:rgba(40,48,36,.22);--seam-lit:rgba(40,48,36,.5); padding-top:clamp(40px,7vh,80px);box-shadow:0 -1px rgba(229,225,213,.5)} .contact__grid{padding-top:48px;column-gap:8vw} .contact .field input,.contact .field select,.contact .field textarea{ color-scheme:light;background:rgba(255,255,255,.12);border-bottom-color:#7d8376} .contact .field input:focus,.contact .field select:focus,.contact .field textarea:focus{ background:rgba(255,255,255,.4);outline:2px solid #505b43;outline-offset:3px} .contact .field [aria-invalid='true']{border-color:#923c2c} .contact__intro h2{font-size:clamp(2.6rem,4.1vw,5rem)} .contact .chapter-index{letter-spacing:.22em} .contact .enquiry__label{border-bottom:1px solid var(--seam);margin-bottom:28px;padding-bottom:20px} .contact .project-button:active{background:#414b37} /* A precise point and a quiet rail; no engraved hardware or end stops. */ .cur__d{width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%; background:var(--ivory);box-shadow:none} .cur__s{height:21px;margin-top:-10.5px;opacity:.5} .cur__s::before,.cur__s::after{display:none} @media(max-width:899.98px){ .cap__artist{min-height:0;margin-top:40px;padding-block:56px 76px} .artist__spread{gap:42px}.artist__title{font-size:clamp(2.7rem,9vw,5.4rem)} .artist__title .ln:last-child{padding-left:3vw} .artist__body{width:86%;margin-left:auto}.artist__field{inset:2% -15% 5% 20%;opacity:.3} .artist__field>span{display:none} .wk{padding-block:76px 96px}.wk__atmos{inset:5% 4% 5% 28%} .wk__title{font-size:clamp(2.3rem,8.2vw,4.5rem)} .wk__title .ln:last-child{padding-left:0}.wk__body{margin-top:42px;gap:30px} .wk__meta{padding:18px}.contact{padding-top:24px} .contact__grid{gap:38px}.contact__intro h2{font-size:clamp(2.6rem,7.5vw,4rem)} .turn__aperture{inset:0 -5% 20% 15%;font-size:35vw} } @media(prefers-reduced-motion:reduce){.artist__field{transform:none!important}}