/* ════════════════════════════════════════════════════════════════════════ NAGUIB — THE WORKSHOP A bench under a warm lamp. Charcoal ground, burnt clay, bone type, and a plaster tooth over everything. The story is the design, not a section of it: he began on walls in Giza with a brush and ended up sculpting for film in Marseille, so the site is a workshop rather than an interface — objects sit on a bench in their own pool of shade, the light comes from one place, and the type is cut rather than set. Everything that moves here moves on transform or opacity, gated by an IntersectionObserver. There is no library. ════════════════════════════════════════════════════════════════════════ */ :root{ /* ── the bench ── */ --ground:#17140F; /* warm charcoal, the wall behind the bench */ --ground-2:#12100B; /* deeper, for wells and the lightbox */ --panel:#221D16; /* a surface laid on the bench */ --panel-2:#2A231A; /* raised */ --line:#3A3025; /* a scored line */ --line-soft:#2B2419; /* ── the light ── */ --clay:#C8794A; /* burnt clay: the accent, used sparingly */ --clay-lit:#E0925F; /* the same clay with the lamp on it */ --clay-deep:#8A5233; --sand:#D8C4A8; /* warm highlight */ /* ── the ink ── */ --ink:#EDE6DA; /* bone */ --ink-2:#B4A895; --ink-3:#7D7263; --ink-4:#544C41; --fd:'Fraunces',Georgia,'IBM Plex Sans Arabic',serif; /* cut */ --fs:'Inter','IBM Plex Sans Arabic',system-ui,sans-serif; /* set */ --fa:'IBM Plex Sans Arabic',sans-serif; --ease:cubic-bezier(.22,1,.36,1); --ease-soft:cubic-bezier(.4,0,.2,1); --pad:clamp(20px,5vw,84px); --max:1560px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;overflow-y:scroll;scroll-behavior:auto} body{ background:var(--ground);color:var(--ink); font-family:var(--fs);font-size:16px;line-height:1.65; font-feature-settings:'kern' 1,'liga' 1; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0} ::selection{background:var(--clay);color:#14110C} /* ── THE PLASTER TOOTH ──────────────────────────────────────────────── One fixed layer of fractal noise over the whole page. It is a static SVG in a data URI — it paints once and never repaints, so it costs nothing after the first frame, and it is the single thing that stops a flat dark background from looking like a flat dark background. */ body::before{ content:'';position:fixed;inset:0;z-index:9998;pointer-events:none; opacity:.5;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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); } /* and one warm lamp, up and to the left, on the page itself */ body::after{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(120% 85% at 12% -10%,rgba(200,121,74,.10),transparent 62%); } /* ═══ TYPE ══════════════════════════════════════════════════════════════ Fraunces is a variable serif with a SOFT axis — it is literally a face that can be modelled, which is the whole reason it is here. It carries every name and every heading. Inter carries everything you read rather than look at. Nothing is set in a monospace: a workshop is not a terminal. */ .d1,.d2,.d3{ font-family:var(--fd);font-weight:300;line-height:.96; letter-spacing:-.022em;font-variation-settings:'SOFT' 40,'WONK' 1,'opsz' 144; } .d1{font-size:clamp(46px,7.6vw,132px)} .d2{font-size:clamp(38px,5.6vw,86px)} .d3{font-size:clamp(26px,3vw,44px)} .d1 em,.d2 em,.d3 em{font-style:italic;color:var(--clay-lit);font-weight:300} /* the small capital label that marks every section and field */ .lbl{ font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-3);display:flex;align-items:center;gap:10px; } .lbl::before{content:'';width:22px;height:1px;background:var(--clay);flex:none} .lbl.plain::before{display:none} .num{font-family:var(--fd);font-variant-numeric:tabular-nums;color:var(--clay); font-size:13px;letter-spacing:.1em;font-weight:400} p{max-width:66ch;color:var(--ink-2)} p strong{color:var(--ink);font-weight:600} .ar{font-family:var(--fa);direction:rtl} /* ═══ MOTION ════════════════════════════════════════════════════════════ Three primitives, and the whole site is built from them. Each is a transform or an opacity, each waits for an IntersectionObserver, and each takes its delay from a custom property so a group can be staggered without a line of JavaScript per child. .rv rises and fades in .rv-cut is uncovered from below, the way a form comes out of a block .rv-w grows from nothing along its own width — for rules */ .rv,.rv-cut,.rv-w{--d:0ms} .rv{opacity:0;transform:translate3d(0,26px,0); transition:opacity .9s var(--ease) var(--d),transform .9s var(--ease) var(--d)} .rv.in{opacity:1;transform:none} /* The uncovered state used to end on inset(0 0 -4% 0). A negative inset is not a value Chrome accepts, so the whole declaration was dropped and the heading simply stayed clipped — every section title on the site was invisible. It ends on a real inset(0) now, and the padding/negative-margin pair gives the box room for the descenders that a .96 line-height pushes past it, without moving anything. */ .rv-cut{clip-path:inset(0 0 102% 0);transform:translate3d(0,14px,0); padding-bottom:.16em;margin-bottom:-.16em; transition:clip-path 1.05s var(--ease) var(--d),transform 1.05s var(--ease) var(--d)} .rv-cut.in{clip-path:inset(0);transform:none} .rv-w{transform:scaleX(0);transform-origin:left; transition:transform 1.1s var(--ease) var(--d)} .rv-w.in{transform:scaleX(1)} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} .rv,.rv-cut,.rv-w{opacity:1;transform:none;clip-path:none} } /* ═══ THE CURSOR ════════════════════════════════════════════════════════ A warm point that opens into a ring over anything that can be looked at more closely. Desktop only, and it follows on transform alone. */ body.pointer{cursor:none} #cur{position:fixed;top:0;left:0;z-index:9990;pointer-events:none; width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%; background:var(--clay-lit);mix-blend-mode:screen; transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease), background .3s,opacity .3s;will-change:transform} #cur.big{width:76px;height:76px;margin:-38px 0 0 -38px;background:rgba(200,121,74,.14); border:1px solid var(--clay-lit);mix-blend-mode:normal; backdrop-filter:blur(1px)} #cur.big::after{content:attr(data-t);position:absolute;inset:0;display:grid;place-items:center; font-size:9.5px;letter-spacing:.2em;color:var(--ink);text-transform:uppercase} #cur.hide{opacity:0} body:not(.pointer) #cur{display:none} /* ═══ THE LOADER ════════════════════════════════════════════════════════ A turntable. The mark turns once while the fonts decode and the first plate arrives, the name is cut in beneath it, and the screen lifts. It waits for real milestones, not a timer. */ #ldr{position:fixed;inset:0;z-index:9999;background:var(--ground); display:grid;place-items:center;transition:opacity .7s var(--ease),visibility .7s} #ldr.out{opacity:0;visibility:hidden} .ld-in{display:flex;flex-direction:column;align-items:center;gap:26px} .ld-mark{width:66px;height:66px;position:relative} .ld-mark svg{width:100%;height:100%;overflow:visible} .ld-ring{fill:none;stroke:var(--line);stroke-width:1.5} .ld-arc{fill:none;stroke:var(--clay);stroke-width:1.5;stroke-linecap:round; stroke-dasharray:0 999;transition:stroke-dasharray .5s var(--ease-soft); transform-origin:50% 50%;transform:rotate(-90deg)} .ld-dot{fill:var(--clay);transform-origin:50% 50%;animation:ldSpin 2.6s linear infinite} @keyframes ldSpin{to{transform:rotate(360deg)}} .ld-name{font-family:var(--fd);font-weight:300;font-size:26px;letter-spacing:.16em; color:var(--ink);text-transform:uppercase;opacity:0;animation:ldIn .9s var(--ease) .25s forwards} .ld-name b{font-weight:300;color:var(--clay)} @keyframes ldIn{to{opacity:1}} .ld-say{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4)} /* ═══ NAV ═══════════════════════════════════════════════════════════════ Scoped to the id, not to the element. A bare `nav {position:fixed}` also claimed the prev/next block on a project page — which is a