/* ============================================================ l1l2 — folio (WordPress). Design system. SHARED CHROME first; page-scoped sections follow (home / project / work / about / manifesto), each guarded by a body class so the reused class names (.stage/.track/.slide/.frame) never collide. Fonts are system (Helvetica Neue / Times New Roman) — no @font-face. ============================================================ */ :root{ --paper:#F9FBFF; --ink:#121212; --mut:#8b8b8b; --edge:clamp(18px,2.2vw,30px); --bar:52px; --font:"Helvetica Neue",Helvetica,Arial,sans-serif; --serif:"Times New Roman",Times,Georgia,serif; } *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ background:var(--paper);color:var(--ink);font-family:var(--font); font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; line-height:1.25;font-size:15px;letter-spacing:-.01em} a{color:inherit;text-decoration:none} img,video{display:block;max-width:100%} ::selection{background:var(--ink);color:var(--paper)} em{font-style:normal} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit} /* global toggles (persist via localStorage; class on ) */ body.in-serif{--font:var(--serif)} body.in-bw img,body.in-bw video{filter:grayscale(1)} /* ---------- NAV ---------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:30;height:var(--bar); display:flex;align-items:center;justify-content:space-between;padding:0 var(--edge); background:var(--paper)} .nav__logo{font-weight:700;font-size:15px;letter-spacing:-.02em} .nav__logo i{font-style:italic} .nav__left{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px)} .lang{display:inline-flex;align-items:center;gap:.5em;font-size:15px;letter-spacing:.02em} .lang__opt{font:inherit;color:var(--mut);background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit;transition:color .25s ease} .lang__opt.is-on,.lang__opt:hover{color:var(--ink)} .tgl__opt{font:inherit;color:var(--mut);background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit;transition:color .25s ease} .tgl__opt.is-on,.tgl__opt:hover{color:var(--ink)} .lang__sep{color:rgba(18,18,18,.28)} .nav__clock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); white-space:nowrap;font-variant-numeric:tabular-nums} /* header is wide (logo + 3 toggle groups + links); hide the centred clock before it collides */ @media(max-width:1125px){.nav__clock{display:none}} .nav__right{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px)} .nav__links{display:flex;gap:clamp(14px,1.6vw,26px)} .nav__links a sup{font-size:.56em;font-weight:500;letter-spacing:.02em;margin-left:.26em;vertical-align:super;opacity:.5} .nav__links a,.nav__right a{transition:color .25s ease} .nav__links a:hover,.nav__right a:hover,.nav__links a.is-here{color:var(--mut)} .nav__sep{width:1px;height:14px;background:rgba(18,18,18,.25)} /* ---------- MOBILE MENU (slide-down panel, +/x button) ---------- */ .nav__burger{display:none} .mnav{display:none} .embed .nav{display:none} /* project loaded in the lightbox iframe: hide its own nav */ .embed .mnav{display:none} @media(max-width:1125px){ .nav__left .lang{display:none} /* pull lang + toggles out of the bar */ .nav__right{display:none} /* pull links + email out of the bar */ .nav__burger{display:block;font-size:28px;line-height:1;color:var(--ink); background:none;border:0;padding:6px;margin:-6px;cursor:pointer; transition:transform .4s cubic-bezier(.4,0,.2,1)} .nav__burger.is-open{transform:rotate(135deg)} .mnav{display:block;position:fixed;top:var(--bar);left:0;right:0;z-index:29; background:var(--paper); padding:clamp(24px,5vh,44px) var(--edge) clamp(28px,6vh,48px); box-shadow:0 20px 44px rgba(0,0,0,.10); transform:translateY(-100%);opacity:0;visibility:hidden; transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .35s ease,visibility 0s linear .45s} .mnav.is-open{transform:translateY(0);opacity:1;visibility:visible; transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .3s ease} .mnav__links{display:flex;flex-direction:column; font-size:clamp(1.7rem,8vw,2.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.02} .mnav__links a{color:var(--ink);padding:clamp(10px,2vh,16px) 0;border-bottom:1px solid var(--ink)} .mnav__links a sup{font-size:.34em;font-weight:500;letter-spacing:.02em;margin-left:.3em;vertical-align:super;opacity:.5} .mnav__toggles{display:flex;flex-direction:column;margin-top:clamp(14px,3vh,24px)} .mnav__toggles .lang{font-size:15px;padding:14px 0;border-bottom:1px solid var(--ink)} .mnav__clock{font-size:12px;color:var(--mut);padding:14px 0;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--ink)} } /* ============================================================ PROJECT (single-project) — vertical media stack + info panel. Scoped under .is-project so .stage/.track/.slide/.frame never collide with the home carousel (also under a body class). ============================================================ */ .is-project .stage{position:fixed;inset:var(--bar) 0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch} .is-project .track{counter-reset:img;display:flex;flex-direction:column;gap:clamp(72px,13vh,190px); width:100%;max-width:1400px;margin:0 auto;padding:clamp(20px,4vh,52px) var(--edge)} .is-project .slide{width:100%;counter-increment:img} .js .is-project .slide{opacity:0;transition:opacity .7s ease} .js .is-project .slide.is-in{opacity:1} /* image clip-wipe: the media reveals top->bottom as the slide scrolls in */ .js .is-project .slide .frame{clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.16,1,.3,1)} .js .is-project .slide.is-in .frame{clip-path:inset(0 0 0 0)} @media(prefers-reduced-motion:reduce){.js .is-project .slide{opacity:1;transition:none}.js .is-project .slide .frame{clip-path:none;transition:none}} .is-project .frame{position:relative;width:100%;background:var(--paper)} .is-project .frame > img,.is-project .frame > video{width:100%;height:auto;object-fit:contain} .is-project .zone{display:none} /* optional per-image caption — "Img.N — " prefix auto-numbers by stack position */ .is-project .slide__cap{font-size:13px;line-height:1.5;color:var(--mut);margin-top:16px;max-width:64ch} .is-project .slide__cap::before{content:"Img." counter(img) " \2014 ";color:var(--ink);font-variant-numeric:tabular-nums} /* bottom bar */ .is-project .bar{position:fixed;bottom:0;left:0;right:0;z-index:30;height:var(--bar); display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 var(--edge)} .is-project .bar__more{display:inline-flex;align-items:center;gap:.4em;transition:color .25s ease} .is-project .bar__more:hover{color:var(--mut)} .is-project .bar__more__arw{transition:transform .25s ease} .is-project .bar__more:hover .bar__more__arw{transform:translateX(3px)} .is-project .bar__title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;display:flex;gap:.6em} .is-project .bar__title .client{color:var(--ink)} .is-project .bar__title .name{color:var(--mut)} .is-project .bar__count{font-variant-numeric:tabular-nums;display:flex;gap:.7em;color:var(--ink)} .is-project .bar__count .tot{color:var(--mut)} /* ---- in-flow SLIDER BLOCK: consecutive "In slider" media grouped into one horizontal swipeable block; controls sit BELOW the image ---- */ .is-project .slide--slider .pslider{position:relative;width:100%} .is-project .slide--slider .pslider__track{display:flex;width:100%;aspect-ratio:16/9;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;background:var(--paper)} .is-project .slide--slider .pslider__track::-webkit-scrollbar{display:none} .is-project .slide--slider .pslider__item{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start} .is-project .slide--slider .pslider__item .frame{width:100%;height:100%} .is-project .slide--slider .pslider__item .frame > img,.is-project .slide--slider .pslider__item .frame > video{width:100%;height:100%;object-fit:contain} .is-project .slide--slider .pslider__bar{display:flex;align-items:center;justify-content:space-between;margin-top:14px} .is-project .slide--slider .pslider__arrows{display:flex;gap:1em} .is-project .slide--slider .pslider__arrows button{color:var(--ink);font-size:18px;line-height:1;transition:color .25s ease} .is-project .slide--slider .pslider__arrows button:hover{color:var(--mut)} .is-project .slide--slider .pslider__count{font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums} .is-project .slide--slider .pslider__caps{margin-top:12px} .is-project .slide--slider .pslider__cap{display:none;font-size:13px;line-height:1.5;color:var(--mut);max-width:64ch} .is-project .slide--slider .pslider__cap.is-active{display:block} /* more/info panel */ .is-project .info{position:fixed;inset:0;z-index:40;background:var(--paper); padding:calc(var(--bar) + clamp(28px,7vh,90px)) var(--edge) var(--bar); overflow:auto;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s} .is-project .info.is-open{opacity:1;visibility:visible;transition:opacity .45s ease} .is-project .info__close{position:fixed;top:0;right:var(--edge);height:var(--bar);display:inline-flex;align-items:center;z-index:41;transition:color .25s ease} .is-project .info__close:hover{color:var(--mut)} .is-project .info__back{display:inline-flex;align-items:center;gap:.5em;margin-top:clamp(40px,8vh,84px); font-size:clamp(1.05rem,1.8vw,1.4rem);font-weight:700;letter-spacing:-.02em;color:var(--ink); opacity:0;transform:translateY(18px); transition:opacity .6s ease .5s,transform .7s cubic-bezier(.16,1,.3,1) .5s,color .25s ease} .is-project .info__back:hover{color:var(--mut)} .is-project .info__back .arw{transition:transform .25s ease} .is-project .info__back:hover .arw{transform:translateX(-4px)} .is-project .info.is-open .info__back{opacity:1;transform:none} .embed .is-project .info__close{display:none} /* covered by the lightbox Close x; use Back */ @media(prefers-reduced-motion:reduce){.is-project .info__back{opacity:1;transform:none;transition:color .25s ease}} .is-project .info__title{font-size:clamp(1.15rem,2vw,1.6rem);font-weight:700;letter-spacing:-.02em;color:var(--ink);max-width:1100px;padding-bottom:14px;position:relative;margin-bottom:clamp(40px,7vh,80px)} .is-project .info__title::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ink);transform-origin:left} .is-project .info__lead{max-width:1100px;font-size:clamp(1.7rem,4vw,3.4rem);font-weight:400;letter-spacing:-.03em;line-height:1.05;margin-bottom:clamp(40px,7vh,80px)} .is-project .info__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px);max-width:1100px;position:relative;padding-top:22px} .is-project .info__grid::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform-origin:left} .is-project .info__grid h3{font-size:12px;letter-spacing:.02em;color:var(--ink);font-weight:700;margin-bottom:1em} .is-project .info__grid ul{list-style:none;line-height:1.7} .is-project .info__grid p{line-height:1.55;max-width:34ch} .is-project .info__title::after,.is-project .info__grid::before{transform:scaleX(0);transition:transform 1s cubic-bezier(.22,1,.36,1) .18s} .is-project .info.is-open .info__title::after{transform:scaleX(1)} .is-project .info.is-open .info__grid::before{transform:scaleX(1)} .is-project .info__title,.is-project .info__lead,.is-project .info__grid>div{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1)} .is-project .info.is-open .info__title,.is-project .info.is-open .info__lead,.is-project .info.is-open .info__grid>div{opacity:1;transform:none} .is-project .info.is-open .info__title{transition-delay:.06s} .is-project .info.is-open .info__lead{transition-delay:.15s} .is-project .info.is-open .info__grid>div:nth-child(1){transition-delay:.26s} .is-project .info.is-open .info__grid>div:nth-child(2){transition-delay:.32s} .is-project .info.is-open .info__grid>div:nth-child(3){transition-delay:.38s} .is-project .info.is-open .info__grid>div:nth-child(4){transition-delay:.44s} @media(prefers-reduced-motion:reduce){.is-project .info__title,.is-project .info__lead,.is-project .info__grid>div{opacity:1;transform:none;transition:none}.is-project .info__title::after,.is-project .info__grid::before{transform:none}} .embed .is-project .stage{top:var(--bar)} /* gap so the lightbox Close clears the first image */ @media(max-width:820px){ .is-project .track{max-width:100%} .is-project .bar__title{position:static;transform:none;font-size:12px} .is-project .info__grid{grid-template-columns:1fr 1fr} } /* mobile: shorter bars (all templates) */ @media(max-width:820px){ :root{--bar:48px} } /* ============================================================ HOME — full-screen crossfade project carousel (scoped .is-home) ============================================================ */ body.is-home{overflow:hidden} .is-home .stage{position:fixed;inset:var(--bar) 0;overflow:hidden;touch-action:pan-y} .is-home .track{position:relative;height:100%} .is-home .slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; padding:clamp(16px,2.4vh,34px) var(--edge);opacity:0;visibility:hidden;z-index:0} .is-home .slide.is-prev{opacity:1;visibility:visible;z-index:1} .is-home .slide.is-on{opacity:1;visibility:visible;z-index:2;transition:opacity 1s cubic-bezier(.4,0,.2,1)} @media(prefers-reduced-motion:reduce){.is-home .slide.is-on{transition:none}} .is-home .frame{position:relative;aspect-ratio:16/9; width:min(82vw, calc((100svh - 2*var(--bar) - 2*clamp(16px,2.4vh,34px)) * 16 / 9)); max-height:100%;margin:auto;overflow:hidden;background:var(--ink);cursor:pointer} .is-home .frame > img,.is-home .frame > video{width:100%;height:100%;object-fit:cover} /* texture on image slides: clean image at rest, processed canvas cross-fades IN on hover */ .is-home .home__fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;pointer-events:none;transition:opacity .5s cubic-bezier(0,0,.2,1)} .is-home .frame:hover .home__fx{opacity:1} @media(prefers-reduced-motion:reduce){.is-home .home__fx{display:none}} .is-home .stage,.is-home .slide{-webkit-user-select:none;user-select:none} .is-home .slide,.is-home .frame,.is-home .frame > img,.is-home .frame > video{-webkit-user-drag:none} .is-home .frame::after{content:"";position:absolute;inset:0;background:rgba(18,18,18,0);transition:background .3s ease} .is-home .frame:hover::after{background:rgba(18,18,18,.14)} .is-home .frame__open{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2; color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:0; transition:opacity .3s ease;pointer-events:none;mix-blend-mode:difference} .is-home .frame:hover .frame__open{opacity:1} .is-home .bar{position:fixed;bottom:0;left:0;right:0;z-index:30;height:var(--bar); display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 var(--edge)} .is-home .bar__tag{color:var(--mut)} .is-home .bar__title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;display:flex;gap:.6em} .is-home .bar__title .client{color:var(--ink)} .is-home .bar__title .name{color:var(--mut)} .is-home .bar__nav{display:flex;align-items:center;gap:clamp(12px,1.4vw,22px)} .is-home .bar__arrows{display:flex;gap:10px} .is-home .bar__arrows button{transition:color .25s ease} .is-home .bar__arrows button:hover{color:var(--mut)} .is-home .bar__count{font-variant-numeric:tabular-nums;display:flex;gap:.7em} .is-home .bar__count .tot{color:var(--mut)} @media(max-width:820px){ .is-home .frame{width:100%;aspect-ratio:16/9;height:auto;max-height:100%} .is-home .frame > img,.is-home .frame > video{height:100%;object-fit:cover} .is-home .bar__tag{display:none} .is-home .bar__title{position:static;transform:none;font-size:12px} } /* ============================================================ WORK — Overview grid + Index list (scoped .pg-work) ============================================================ */ .pg-work .work{padding:calc(var(--bar) + clamp(30px,7vh,90px)) var(--edge) clamp(60px,12vh,140px)} .pg-work .work__views{display:flex;gap:1em;font-size:16px} .pg-work .work__views button{color:var(--mut);transition:color .25s ease} .pg-work .work__views button.is-on{color:var(--ink)} .pg-work .work__views__swap{font-size:.9em;line-height:1} .pg-work .work__views__swap:hover{color:var(--ink)} /* texture toggle (pixel / dither / halftone) — inline in the controls line */ .pg-work .work__fx{display:flex;flex-wrap:wrap;align-items:baseline;gap:.55em;font-size:16px} .pg-work .work__fx__lbl{color:var(--mut);margin-right:.35em} .pg-work .fxbtn{color:var(--mut);transition:color .25s ease} .pg-work .fxbtn.is-on,.pg-work .fxbtn:hover{color:var(--ink)} /* filter: sector (1st level) + disciplines (2nd level, revealed on select) */ .pg-work .work__controls{margin-bottom:clamp(24px,4vh,44px)} .pg-work .work__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9em 1.1em;font-size:16px} .pg-work .work__sep{color:var(--mut)} .pg-work .work__filter{display:flex;flex-wrap:wrap;align-items:baseline;gap:1em} .pg-work .work__filter__lbl{color:var(--mut)} .pg-work .fbtn{color:var(--mut);transition:color .25s ease} .pg-work .fbtn.is-on,.pg-work .fbtn:hover{color:var(--ink)} .pg-work .work__filter__disc{display:none;flex-wrap:wrap;gap:.7em 1.4em;margin-top:14px;padding-top:14px;border-top:1px solid rgba(18,18,18,.15);font-size:14px;opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1)} .pg-work .work__filter__disc.is-shown{display:flex} .pg-work .work__filter__disc.is-in{opacity:1;transform:none} .pg-work .dbtn{color:var(--mut);transition:color .25s ease} .pg-work .dbtn.is-on,.pg-work .dbtn:hover{color:var(--ink)} .pg-work .dbtn[hidden]{display:none} .pg-work .card.is-filtered,.pg-work .row.is-filtered{display:none} @media(prefers-reduced-motion:reduce){.pg-work .work__filter__disc{transition:none;transform:none}} .pg-work .grid{display:grid;grid-template-columns:1fr 1fr;column-gap:6px;row-gap:clamp(40px,7vh,80px);position:relative} .pg-work .card{display:block;--rd:0s} .pg-work .card__media{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink); clip-path:inset(0 0 100% 0);transform:scale(1.03); transition:clip-path 1s cubic-bezier(.16,1,.3,1) var(--rd), transform 1.1s cubic-bezier(.16,1,.3,1) var(--rd)} .pg-work .card.is-in .card__media{clip-path:inset(0 0 0 0);transform:scale(1)} .pg-work .card__cap{opacity:0;transform:translateY(.5em); transition:opacity .7s ease calc(var(--rd) + .12s), transform .7s cubic-bezier(.16,1,.3,1) calc(var(--rd) + .12s)} .pg-work .card.is-in .card__cap{opacity:1;transform:none} .pg-work .card__media img,.pg-work .card__media video{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)} .pg-work .card__media video{position:absolute;inset:0;opacity:0;transition:opacity .4s ease, transform .6s cubic-bezier(.16,1,.3,1)} .pg-work .card__media.is-playing video:not(.card__hover){opacity:1} /* hover reveal (Work grid): an optional hover image/video that appears on hover */ .pg-work .card__media .card__hover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:1;transition:opacity .5s cubic-bezier(0,0,.2,1)} .pg-work .card:hover .card__media.has-hover .card__hover{opacity:1} /* texture effect: the clean still shows at rest; a processed