/* filipposcarpellini.it v2 — Officina · modulo 8 · Forma DJR (Adobe Fonts: Display 500/600, Mono 600) */
:root{
  --ink:#151515;--paper:#F3F1EC;--yel:#FFC400;--cem:#8C8A85;--line:#D6D3CB;--muted:#6B6A66;--tint:#E7E4DC;
  --display:"forma-djr-display",sans-serif;
  --mono:"forma-djr-mono",monospace;
  --max:1312px;--m:40px;--g:24px;
}
@media(max-width:900px){:root{--m:24px}}
@media(max-width:560px){:root{--m:16px;--g:16px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--display);font-weight:500;font-size:17px;line-height:26px;letter-spacing:.015em;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
::selection{background:var(--yel);color:var(--ink)}
.wrap{max-width:calc(var(--max) + 2*var(--m));margin:0 auto;padding-left:max(var(--m),env(safe-area-inset-left));padding-right:max(var(--m),env(safe-area-inset-right))}
.mono{font-family:var(--mono);font-weight:600;font-size:12px;line-height:16px;letter-spacing:.1em;text-transform:uppercase}
.lab{display:flex;align-items:center;gap:8px}
.sq{width:8px;height:8px;background:var(--yel);display:inline-block;flex:none}
.k{color:var(--muted)}
/* cursor: il puntino */
.cursor{position:fixed;left:0;top:0;width:10px;height:10px;background:var(--yel);pointer-events:none;z-index:100;transform:translate(-50%,-50%);opacity:0;transition:width .2s,height .2s,opacity .2s;mix-blend-mode:multiply}
@media (pointer:fine){.js .cursor{opacity:1}.js .cursor.big{width:28px;height:28px}}
/* header */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:64px;border-bottom:1px solid var(--line)}
.home .logo{display:block;width:184px;height:auto}
.where{display:flex;gap:16px;color:var(--muted)}
.where .clock{font-variant-numeric:tabular-nums;color:var(--ink)}
nav{display:flex;justify-content:flex-end;gap:24px}
nav a{font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;position:relative;padding:8px 0}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s}
nav a:hover::after{transform:scaleX(1)}
@media(max-width:760px){.where{display:none}.bar{grid-template-columns:1fr auto}.home .logo{width:148px}nav{gap:16px}}
/* hero: il segno «fi» */
.hero{padding:56px 0 72px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);align-items:end}
.fi-wrap{grid-column:1/8;margin:0;line-height:0}
.fi{width:100%;height:auto;max-height:calc(100vh - 160px);display:block;overflow:visible;cursor:pointer}
.fi-f,.fi-i{fill:var(--ink)}
.fi-dot{fill:var(--yel);transform-box:fill-box;transform-origin:50% 100%}
.hside{grid-column:9/13;display:grid;gap:24px;padding-bottom:8px}
.hside .lab{color:var(--muted)}
.hlogo .logo{width:100%;max-width:360px;height:auto;display:block;color:var(--ink)}
.hero .lead{font-size:20px;line-height:28px}
.hnote{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--muted)}
.scroll{justify-self:start}.scroll:hover{color:var(--muted)}
@media(max-width:900px){.hero{padding:32px 0 48px}.fi-wrap,.hside{grid-column:1/-1}.fi{max-height:56vh;width:auto;margin:0 auto}}
/* animazione: le aste salgono, poi il punto cade sulla i */
@media (prefers-reduced-motion:no-preference){
 .fi-f{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
 .fi-i{animation:rise .9s cubic-bezier(.2,.8,.2,1) .12s both}
 .fi-dot{animation:drop 1.1s cubic-bezier(.3,0,.2,1) .8s both}
 .fi.hop .fi-dot{animation:hop .7s cubic-bezier(.3,0,.2,1)}
 .hside>*{animation:fade .8s ease .9s both}
}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes drop{0%{transform:translateY(-260%);opacity:0}40%{opacity:1}62%{transform:translateY(0) scale(1.15,.8)}74%{transform:translateY(-22%) scale(.95,1.05)}86%{transform:translateY(0) scale(1.04,.96)}100%{transform:none}}
@keyframes hop{0%{transform:none}30%{transform:translateY(-70%) scale(.95,1.05)}60%{transform:translateY(0) scale(1.12,.86)}80%{transform:translateY(-10%)}100%{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* works */
.works{padding:64px 0 96px;border-top:1px solid var(--line);position:relative}
.whead{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.count{color:var(--muted)}
.switch{display:flex;border:1px solid var(--ink)}
.switch button{padding:8px 12px;font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.switch button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.views[data-current="list"] .grid{display:none}
.views[data-current="grid"] .index{display:none}
.index{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:64px minmax(0,6fr) minmax(0,3fr) 64px 32px;gap:var(--g);align-items:baseline;padding:20px 0 18px;border-bottom:1px solid var(--line);position:relative;transition:padding .3s}
.row .t{font-size:44px;line-height:48px;font-weight:600;letter-spacing:.02em;transition:transform .3s}
.row .n,.row .k,.row .y{color:var(--muted)}
.row .ar{justify-self:end;opacity:0;transform:translateX(-8px);transition:.3s}
.row::before{content:"";position:absolute;left:0;top:50%;width:10px;height:10px;background:var(--yel);transform:translate(-24px,-50%) scale(0);transition:transform .3s}
.row:hover .t{transform:translateX(16px)}
.row:hover .ar{opacity:1;transform:none}
.row:hover::before{transform:translate(-24px,-50%) scale(1)}
.thumb-m{display:none}
@media(max-width:760px){
 .row{grid-template-columns:40px minmax(0,1fr) auto;padding:16px 0}
 .row .t{font-size:28px;line-height:32px}.row .y,.row .ar{display:none}.row .k{grid-column:2/3}
 .thumb-m{display:block;grid-column:1/-1;margin-top:8px;background:var(--tint);aspect-ratio:16/10;overflow:hidden}
 .thumb-m img{width:100%;height:100%;object-fit:contain;padding:16px}
 .row:hover .t{transform:none}
}
.preview{position:fixed;left:0;top:0;width:320px;pointer-events:none;z-index:15;opacity:0;transform:translate(-50%,-50%) scale(.96);transition:opacity .25s,transform .25s}
.preview img{width:100%;height:auto;box-shadow:0 24px 48px -24px rgba(0,0,0,.35)}
.preview.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (pointer:coarse),(max-width:760px){.preview{display:none}}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px var(--g)}
@media(max-width:700px){.grid{grid-template-columns:1fr;gap:40px}}
.card{display:grid;gap:16px}
.frame{display:block;aspect-ratio:4/3;background:var(--tint);position:relative;overflow:hidden}
.frame img{position:absolute;inset:40px;width:calc(100% - 80px);height:calc(100% - 80px);object-fit:contain;transition:transform .5s}
.card:hover .frame img{transform:scale(1.03)}
.cm{display:grid;grid-template-columns:48px 1fr;gap:4px 8px;align-items:baseline}
.cm .n{color:var(--muted)}.cm .t{font-size:24px;line-height:28px;font-weight:600}.cm .k{grid-column:2}
/* info */
.info{padding:96px 0;border-top:1px solid var(--line)}
.info .lab{margin-bottom:32px}
.statement{font-size:44px;line-height:52px;font-weight:600;letter-spacing:.02em;max-width:22ch}
.statement em{font-style:normal;background:linear-gradient(transparent 62%,var(--yel) 62%)}
@media(max-width:700px){.statement{font-size:30px;line-height:36px}}
.method{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);margin-top:80px}
.method>div{border-top:1px solid var(--ink);padding-top:16px;display:grid;gap:8px;align-content:start}
.method .n{color:var(--muted)}.method b{font-size:24px;line-height:28px;font-weight:600}.method p{color:var(--muted)}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);margin-top:64px}
.cols li{padding:8px 0;border-bottom:1px solid var(--line)}
.cols .k{margin-bottom:8px}
@media(max-width:760px){.method,.cols{grid-template-columns:1fr}}
/* footer / contacts */
.foot{background:var(--ink);color:var(--paper);padding:96px 0 32px}
.foot .lab{margin-bottom:24px;color:#A3A19B}
.mail{display:inline-block;font-size:clamp(64px,13vw,184px);line-height:.9;font-weight:600;letter-spacing:.02em}
.mail:hover{color:var(--yel)}
.per{display:inline-block;width:.16em;height:.16em;background:var(--yel);margin-left:.04em;vertical-align:baseline}
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);margin-top:80px}
.fgrid>div{display:grid;gap:8px;border-top:1px solid #3A3A38;padding-top:16px;align-content:start}
.fgrid .k{color:#A3A19B}
.fgrid a{border-bottom:1px solid #5A5955;justify-self:start;word-break:break-all}
.fgrid a:hover{border-color:var(--yel)}
.live{display:inline-block;width:8px;height:8px;background:var(--yel);margin-right:8px;animation:blink 2s infinite}
@keyframes blink{50%{opacity:.25}}
.fbar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:96px;color:#A3A19B}
.fbar a:hover{color:var(--paper)}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fgrid{grid-template-columns:1fr}}
/* project */
.phead{padding:72px 0 40px}
.crumb{color:var(--muted);margin-bottom:24px}.crumb a:hover{color:var(--ink)}
.ptitle{margin:0;font-size:clamp(48px,10vw,152px);line-height:.92;font-weight:600;letter-spacing:.02em}
.pkind{margin-top:24px;color:var(--muted)}
.cover .cframe{background:var(--tint);padding:clamp(24px,6vw,96px);display:grid;place-items:center}
.cover img{max-height:78vh;width:auto}
.pintro{padding:72px 0}
.pintro .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px var(--g)}
.pintro .lead{grid-column:1/8;font-size:26px;line-height:36px;letter-spacing:.02em}
.facts{grid-column:9/13;margin:0}
.facts div{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:10px 0;border-top:1px solid var(--line)}
.facts dt{color:var(--muted);line-height:22px}.facts dd{margin:0;font-size:15px;line-height:22px}
.dot{grid-column:1/8;display:grid;grid-template-columns:10px 1fr;gap:16px;border-top:1px solid var(--ink);padding-top:24px}
.dot .sq{width:10px;height:10px;margin-top:6px}
.dot p{font-size:24px;line-height:32px;font-weight:600;margin-top:8px}
@media(max-width:900px){.pintro .lead,.facts,.dot{grid-column:1/-1}}
.annot{padding:24px 0 96px}
.annot .lab{margin-bottom:24px}
.agrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);align-items:start}
.afig{grid-column:1/8;margin:0;background:var(--tint);padding:clamp(16px,4vw,56px)}
.aimg{position:relative}
.hs{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;background:var(--yel);display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:11px;color:var(--ink);box-shadow:0 0 0 0 rgba(255,196,0,.6);transition:transform .2s,box-shadow .2s}
.hs:hover,.hs.on{transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 8px rgba(255,196,0,.35)}
.legend{grid-column:9/13;border-top:1px solid var(--ink);position:sticky;top:96px}
.legend li{display:grid;grid-template-columns:40px 1fr;gap:8px;padding:16px 0;border-bottom:1px solid var(--line);transition:background .2s}
.legend li .n{color:var(--muted);line-height:24px}
.legend li.on{background:linear-gradient(90deg,rgba(255,196,0,.18),transparent)}
.legend li.on .n{color:var(--ink)}
@media(max-width:900px){.afig,.legend{grid-column:1/-1}.legend{position:static}}
.gallery{padding:0 0 96px}
.gallery .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:64px var(--g)}
.g{margin:0;display:grid;gap:12px;align-content:start}
.g.wide{grid-column:1/-1}.g.half{grid-column:span 6}
.g img,.g video{width:100%;background:var(--tint)}
.g.half img{padding:clamp(16px,3vw,40px)}
.g figcaption{color:var(--muted)}
@media(max-width:700px){.g.half{grid-column:1/-1}}
.next{border-top:1px solid var(--line)}
.next a{display:grid;gap:16px;padding:80px 0 96px}
.next b{font-size:clamp(48px,9vw,128px);line-height:.95;font-weight:600;letter-spacing:.02em;transition:color .3s}
.next a:hover b{color:var(--cem)}
.ii::after{content:"";display:inline-block;vertical-align:baseline;position:relative;bottom:.55em;width:.145em;height:.15em;margin:0 .04em 0 -.185em;background:linear-gradient(var(--yel),var(--yel)) .011em .016em/.122em .115em no-repeat,var(--ink)}
b,strong{font-weight:600}em,i{font-style:normal}button,input,select,textarea{font:inherit;letter-spacing:inherit}
/* ===== v9: info, racconto progetti, animazioni ===== */
.about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);align-items:end}
.portrait{grid-column:1/5;margin:0;aspect-ratio:4/5;background:var(--ink);overflow:hidden;display:grid;place-items:center}
.portrait img{width:100%;height:100%;object-fit:cover}
.avph{width:100%;height:100%;display:grid;place-items:center}
.fi.fi-sm{width:52%;max-height:none;margin:0 auto}
.fi-sm .fi-f,.fi-sm .fi-i{fill:var(--paper)}
.bio{grid-column:6/13;display:grid;gap:28px;align-content:end}
.bio .statement{margin:0}
.biotxt{font-size:20px;line-height:30px;max-width:34em;margin:0}
.btn{justify-self:start;display:inline-flex;align-items:center;gap:12px;padding:14px 20px;border:1px solid var(--ink);font-weight:600;transition:background .25s,color .25s}
.btn .sq{width:8px;height:8px}.btn .mono{font-size:11px;color:var(--muted)}
.btn:hover{background:var(--ink);color:var(--paper)}
.xp{margin-top:96px}
.xp ol{list-style:none;padding:0;margin:12px 0 0;border-top:1px solid var(--ink)}
.xp li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
.xp .y{grid-column:1/3;color:var(--muted)}.xp b{grid-column:3/8;font-size:20px;line-height:26px;font-weight:600}.xp .w{grid-column:8/13;color:var(--muted)}
.cols{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.portrait{grid-column:1/-1;max-width:420px}.bio{grid-column:1/-1}.xp li{grid-template-columns:1fr;gap:4px}.xp .y,.xp b,.xp .w{grid-column:1/-1}}
/* racconto dei progetti */
.story{padding:24px 0 120px}
.story .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:112px var(--g)}
.story .wrap>*{grid-column:1/-1;min-width:0}
.chap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px var(--g);border-top:1px solid var(--ink);padding-top:20px}
.chap .cn{grid-column:1/4;color:var(--muted);display:flex;align-items:center;gap:10px;margin:0}
.chap.isdot .cn{color:var(--ink)}.chap .sq{width:10px;height:10px}
.chap .cb{grid-column:4/12;margin:0;font-size:32px;line-height:42px;font-weight:600;letter-spacing:.02em}
@media(max-width:900px){.chap .cn,.chap .cb{grid-column:1/-1}.chap .cb{font-size:24px;line-height:32px}}
.f{margin:0;display:grid;gap:12px;align-content:start}
.f .im{background:var(--tint);overflow:hidden}
.f img,.f video{width:100%;height:auto;display:block}
.f figcaption{color:var(--muted)}
.story .f.solo{grid-column:3/11}
.f.solo .im{padding:clamp(24px,6vw,96px);display:flex;justify-content:center}
.f.solo img{width:auto;max-width:100%;max-height:82vh}
.prow{display:flex;gap:var(--g);align-items:flex-start}
.prow .f{min-width:0}
@media(max-width:700px){.prow{flex-direction:column}.prow .f{flex:none!important;width:100%}.story .f.solo{grid-column:1/-1}.story .wrap{row-gap:72px}}
.story .agrid figcaption{color:var(--muted);margin-top:12px}
.next .arr{display:inline-block;margin-left:.3em;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.next a:hover .arr{transform:translateX(.25em)}
/* animazioni misurate */
.ptitle .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ptitle .ln>span{display:inline-block}
@media (prefers-reduced-motion:no-preference){
 .ptitle .ln>span{animation:rise 1s cubic-bezier(.2,.8,.2,1) .1s both}
 .cover .cframe{animation:fade 1s ease .35s both}
 .js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
 .js .rv.in{opacity:1;transform:none}
 .js .f.rv{opacity:1;transform:none}
 .js .f.rv .im{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1);transition-delay:var(--d,0s)}
 .js .f.rv .im>*{transform:scale(1.08);transition:transform 1.6s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
 .js .f.rv.in .im{clip-path:inset(0)}
 .js .f.rv.in .im>*{transform:none}
 .js .rv .sq{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1) .35s}
 .js .rv.in .sq{transform:none}
 .js .chap.rv{transform:none}.js .chap.rv .cb{transform:translateY(24px);transition:transform 1s cubic-bezier(.2,.8,.2,1) .1s}.js .chap.rv.in .cb{transform:none}
 .js .chap.rv{border-top-color:transparent;background:linear-gradient(var(--ink),var(--ink)) top left/0 1px no-repeat;transition:opacity .9s ease,background-size 1.2s cubic-bezier(.7,0,.2,1)}
 .js .chap.rv.in{background-size:100% 1px}
 .fi-sm .fi-f,.fi-sm .fi-i,.fi-sm .fi-dot{animation-play-state:paused}
 .portrait.in .fi-sm .fi-f,.portrait.in .fi-sm .fi-i,.portrait.in .fi-sm .fi-dot{animation-play-state:running}
 .js .portrait.rv{opacity:1;transform:none}
 body{transition:opacity .25s ease}
 html.leaving body{opacity:0}
}
@media (prefers-reduced-motion:no-preference){
 .js .portrait.rv{background:transparent}
 .js .portrait.rv img{clip-path:inset(0 0 100% 0);transform:scale(1.08);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1),transform 1.8s cubic-bezier(.2,.8,.2,1)}
 .js .portrait.rv.in img{clip-path:inset(0);transform:none}
}
.plink{margin:0}
.plink .btn .sq{width:8px;height:8px}
/* ritratto 3D */
.portrait{position:relative}
.portrait.is3d{background:var(--tint)}
.portrait.is3d img{visibility:hidden}
.face3d{position:absolute;inset:0;display:block;cursor:pointer;touch-action:pan-y;outline:none}
.f3dot{position:absolute;left:0;top:0;width:4.2%;aspect-ratio:1;background:var(--yel);pointer-events:none;will-change:transform}
.f3tag{position:absolute;left:14px;bottom:12px;font-size:11px;color:var(--muted)}
/* instagram */
.igs{padding:96px 0;border-top:1px solid var(--line)}
.igh{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:32px}
.igh .lab{margin:0}
.igl{font-size:20px;font-weight:600;letter-spacing:.02em;transition:color .25s}
.igl:hover{color:var(--muted)}
.igg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.igp{display:block;overflow:hidden;background:var(--tint)}
.igp img{width:100%;height:auto;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.igp:hover img{transform:scale(1.04)}
@media(max-width:900px){.igg{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.igh{flex-direction:column;gap:8px}}