:root{--bg:#f9f1e3;--ink:#1d1813;--muted:#6e655a;--line:rgba(29,24,19,.16);--gl:rgba(29,24,19,.36);color-scheme:light;box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e0f13;--ink:#f1efe9;--muted:#9a9ea9;--line:rgba(241,239,233,.16);--gl:rgba(241,239,233,.42);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0e0f13;--ink:#f1efe9;--muted:#9a9ea9;--line:rgba(241,239,233,.16);--gl:rgba(241,239,233,.42);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
html.is-home{scroll-snap-type:y proximity;scroll-padding-top:0}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5;transition:background .4s,color .4s}
a{color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.view{display:none}.view.on{display:block}

.cursor{position:fixed;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--bg);pointer-events:none;z-index:150;display:grid;place-items:center;font-size:.85rem;transition:width .25s,height .25s,margin .25s}
.cursor.big{width:54px;height:54px;margin:-13px 0 0 -13px;background:transparent;box-shadow:0 0 0 1.5px var(--ink)}
.onc .cursor{background:#15161a;box-shadow:0 0 0 2px rgba(255,255,255,.85)}.onc .cursor.big{background:transparent;box-shadow:0 0 0 1.5px #15161a}
.cursor.lab{width:88px;height:88px;margin:-30px 0 0 -30px;background:#15161a;color:#fff;box-shadow:none}
@media (pointer:coarse){.cursor{display:none}}

header{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 14px) clamp(18px,4vw,56px) 10px;color:var(--ink);transition:color .4s}
header::before{content:"";position:absolute;inset:0;background:var(--bg);opacity:0;z-index:-1;transition:opacity .3s}
html:not(.is-home) header::before{opacity:.97;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.onc header,.onc .dots{color:#15161a}
.logo{display:block;height:42px}.logo svg{height:100%;width:auto;transition:transform .35s cubic-bezier(.2,.8,.2,1)}.logo:hover svg{transform:rotate(-6deg) scale(1.08)}
nav{display:flex;gap:clamp(14px,3vw,36px);align-items:center;font-size:.95rem}
nav a{text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
nav a:hover,nav a.on{border-color:currentColor}
#theme{background:none;border:0;color:inherit;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;padding:0;opacity:.85;transition:opacity .2s,transform .4s}#theme:hover{opacity:1;transform:rotate(18deg)}#theme svg{width:21px;height:21px}[data-theme="dark"] .i-moon,:root:not([data-theme="dark"]) .i-sun{display:none}

.panel{min-height:100vh;min-height:100svh;display:grid;align-items:center;padding:96px clamp(18px,4vw,56px) 56px;scroll-snap-align:start;position:relative;overflow:hidden;background:var(--c,var(--bg))}
.intro{text-align:center}
.panel.intro{display:flex;justify-content:center;align-items:center}
h1{margin:0;font-size:clamp(3rem,10.5vw,9.5rem);line-height:.95;letter-spacing:-.045em;font-weight:800}
.ch{display:inline-block;white-space:pre}
.sub{margin:22px auto 0;max-width:30rem;font-size:clamp(1rem,1.6vw,1.25rem)}
.hint{position:absolute;bottom:28px;left:0;right:0;text-align:center;color:var(--muted);font-size:.9rem}
.proj{color:#15161a;cursor:pointer;grid-template-columns:1.3fr .7fr;gap:3vw}
.rise{display:block;overflow:hidden;padding-bottom:.06em}
.rise>span{display:inline-block;transform:translateY(108%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.in .rise>span{transform:none}
.fade{opacity:0;transition:opacity .8s .45s}.in .fade{opacity:1}
.pt{margin:0;font-size:clamp(3.2rem,10.5vw,9.5rem);line-height:.92;letter-spacing:-.05em;font-weight:800}
.meta{margin:26px 0 22px;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:1.05rem}
.go{display:inline-block;background:#15161a;color:#fff;text-decoration:none;border-radius:99px;padding:12px 26px}
.art{justify-self:end;width:min(100%,clamp(220px,30vw,440px));aspect-ratio:4/5;border-radius:28px;background:#f6f3ea;position:relative;overflow:hidden;
  transform:perspective(900px) rotateX(calc(var(--ry,0)*1deg)) rotateY(calc(var(--rx,0)*1deg));transition:transform .2s}
.art::before,.art::after{content:"";position:absolute;border-radius:50%}
.art::before{width:70%;aspect-ratio:1;left:-12%;bottom:-8%;background:var(--c)}
.art::after{width:30%;aspect-ratio:1;right:12%;top:12%;background:#15161a}
.art small{position:absolute;left:16px;top:14px;color:#6b6a63;font-size:.85rem}
.dots{position:fixed;right:clamp(12px,2vw,28px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:15;color:var(--ink);transition:color .4s}
.dots button{width:11px;height:11px;border-radius:50%;border:1.5px solid currentColor;background:none;padding:0;cursor:pointer;transition:background .3s,transform .3s}
.dots button.on{background:currentColor;transform:scale(1.35)}

.page{padding:clamp(100px,12vw,150px) clamp(18px,4vw,56px) clamp(60px,8vw,110px);min-height:70vh}
h2{margin:0 0 clamp(24px,4vw,48px);font-size:clamp(2.4rem,7vw,5.6rem);letter-spacing:-.04em;line-height:1}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.chips button,.chips i{font:inherit;font-style:normal;background:none;color:inherit;border:1px solid var(--line);border-radius:99px;padding:5px 16px;font-size:.92rem;cursor:pointer;transition:background .2s,color .2s}
.chips button.on,.chips button:hover{background:var(--ink);color:var(--bg)}
#list{border-top:1px solid var(--line)}
.row{position:relative;display:grid;grid-template-columns:2fr 1.4fr auto;gap:16px;align-items:baseline;padding:clamp(18px,2.6vw,34px) 8px;border-bottom:1px solid var(--line);text-decoration:none;overflow:hidden;isolation:isolate;transition:color .3s,padding .3s}
.row::before{content:"";position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:-1}
.row:hover,.row:focus-visible{color:#15161a;padding-left:24px}.row:hover::before,.row:focus-visible::before{transform:scaleX(1)}
.n{font-size:clamp(1.5rem,3.4vw,2.8rem);font-weight:600;letter-spacing:-.025em}.t,.y{opacity:.75}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px)}
.cols p{margin:0 0 1em;max-width:36rem;font-size:1.12rem}
.photo{aspect-ratio:4/5;border-radius:24px;background:var(--line);display:grid;place-items:center;color:var(--muted);max-width:420px}
.cv{list-style:none;margin:0 0 28px;padding:0}.cv li{display:grid;grid-template-columns:9rem 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line);font-size:1.1rem}.cv small{color:var(--muted);font-size:.95rem}
.mail{display:inline-block;font-size:clamp(1.6rem,6.4vw,5rem);font-weight:800;letter-spacing:-.04em;text-decoration:none;border-bottom:3px solid currentColor;line-height:1.1}
.copy{margin-left:14px;background:none;border:1px solid var(--line);color:inherit;border-radius:99px;padding:8px 18px;cursor:pointer;font:inherit}
.stage{position:relative;max-width:700px;margin:0 auto}
.stage::before,.stage::after{content:"";position:absolute;pointer-events:none}
.stage::before{left:-100vw;right:-100vw;top:0;bottom:0;border-block:1px solid var(--gl)}
.stage::after{top:-100vh;bottom:-100vh;left:0;right:0;border-inline:1px solid var(--line)}
#contact .page{overflow:clip}
.cd{position:absolute;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--muted);z-index:2}
.card{position:relative;z-index:1;padding:clamp(24px,5vw,50px);background:color-mix(in srgb,var(--bg) 60%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.card h2{font-size:clamp(2.6rem,7vw,4.4rem);font-weight:300;margin:0 0 34px}
.card form{display:grid;gap:28px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.card label{display:grid;gap:4px;font-size:.88rem;color:var(--muted);transition:color .25s}
.card label:focus-within{color:var(--ink)}
.two>label{min-width:0}
input,textarea{width:100%;min-width:0;font:inherit;font-size:1.1rem;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:6px 0 10px;outline:0;resize:vertical;transition:border-color .25s}
input:focus,textarea:focus{border-color:var(--ink)}
.bot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:10px}
.ct{display:grid;gap:10px;justify-items:start;font-size:.95rem}
.cpy{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;display:flex;gap:8px;align-items:center}
.cpy:hover,.ct a:hover{opacity:.65}
.send{border:1px solid var(--ink);background:none;color:var(--ink);border-radius:99px;padding:13px 30px;font:inherit;cursor:pointer;transition:background .25s,color .25s}
.send:hover{background:var(--ink);color:var(--bg)}
.x{position:absolute;right:16px;top:16px;background:none;border:0;color:var(--muted);cursor:pointer;padding:8px}.x:hover{color:var(--ink)}
.st{margin:0;min-height:1.4em;font-size:.95rem;color:var(--muted)}

/* Contact: una sola schermata, senza scroll */
html.is-contact,html.is-contact body{overflow:hidden;height:100%}
#contact.on{display:flex;flex-direction:column;height:100vh;height:100svh}
#contact .page{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:clamp(70px,11vh,96px) clamp(18px,4vw,56px) clamp(10px,2vh,22px)}
#contact .stage{width:100%;max-width:700px;max-height:100%;display:flex;margin:0}
#contact .card{display:flex;flex-direction:column;width:100%;max-height:100%;padding:clamp(18px,4vh,50px) clamp(20px,5vw,50px)}
#contact .card h2{font-size:clamp(2rem,6.5vh,4.4rem);margin:0 0 clamp(10px,3vh,34px)}
#contact .card form{flex:1;min-height:0;display:flex;flex-direction:column;gap:clamp(12px,2.6vh,28px)}
#contact .two{grid-template-columns:1fr 1fr;gap:clamp(14px,3vw,30px)}
#contact label.msg{flex:1;min-height:0;display:flex;flex-direction:column}
#contact textarea{flex:1;min-height:56px;resize:none}
#contact .bot{margin-top:0}
#contact .st{min-height:1.2em}
#contact .foot{grid-template-columns:1fr auto;padding-block:12px 16px}
#contact .foot button{display:none}
@media (max-height:520px){html.is-contact,html.is-contact body{overflow:auto}}

/* Animazioni: nebbia, ingresso, fluttuazione */
.grain{position:absolute;inset:0;pointer-events:none;opacity:.24;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
:root[data-theme="dark"] .grain{opacity:.12}
.mist canvas{width:100%;height:100%;display:block}
.mist[data-fade="all"]{left:0}
.mist{position:absolute;inset:0;left:26%;pointer-events:none;transform:translate(calc(var(--rx,0)*-2px),calc(var(--ry,0)*-2px))}
.mist i{position:absolute;border-radius:50%;filter:blur(64px);animation:drift 24s ease-in-out infinite alternate}
.mist i:nth-child(1){width:48%;aspect-ratio:1;right:8%;top:6%;background:color-mix(in srgb,#8fa8cc 55%,transparent)}
.mist i:nth-child(2){width:40%;aspect-ratio:1;right:30%;bottom:2%;background:color-mix(in srgb,var(--ink) 16%,transparent);animation-duration:30s;animation-delay:-9s}
.mist i:nth-child(3){width:32%;aspect-ratio:1;right:-4%;bottom:16%;background:color-mix(in srgb,#d4a982 50%,transparent);animation-duration:36s;animation-delay:-16s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-9%,7%) scale(1.18)}100%{transform:translate(7%,-9%) scale(.9)}}
.abt,.abp,.rhero>div:not(.mist){position:relative;z-index:1}
.pf{animation:bob 7s ease-in-out infinite alternate}
@keyframes bob{to{translate:0 -10px}}
@keyframes up{from{opacity:0;transform:translateY(18px)}}
@keyframes fin{from{opacity:0}}
#about .abt>*,#resume .rhero>div:first-of-type>*{animation:up .9s cubic-bezier(.2,.8,.2,1) .45s both}
#about .abt>:nth-child(2),#resume .rhero>div:first-of-type>:nth-child(2){animation-delay:.57s}
#about .abt>:nth-child(3),#resume .rhero>div:first-of-type>:nth-child(3){animation-delay:.71s}
#about .abt>:nth-child(4),#resume .rhero>div:first-of-type>:nth-child(4){animation-delay:.85s}
#about .abp,#resume .frame{animation:fin 1.4s .6s both}
@media (prefers-reduced-motion:reduce){.mist i,.pf,#about .abt>*,#resume .rhero>div>*,#about .abp,#resume .frame{animation:none}}
/* Strisce di transizione, linee che si disegnano, forme */
@keyframes lx{from{transform:scaleX(0)}}
@keyframes ly{from{transform:scaleY(0)}}
@keyframes pop{from{transform:scale(0)}}
.frame::before,.pf::before{transform-origin:left;animation:lx 1.2s .85s cubic-bezier(.3,.7,.2,1) both}
.frame::after,.pf::after{animation:ly 1.2s .85s cubic-bezier(.3,.7,.2,1) both}
.stage::before{animation:lx 1.2s .85s cubic-bezier(.3,.7,.2,1) both}
.stage::after{animation:ly 1.2s .85s cubic-bezier(.3,.7,.2,1) both}
.cd{animation:pop .45s 1.6s cubic-bezier(.3,1.6,.5,1) both}
@keyframes bmorph{0%,100%{border-radius:58% 42% 46% 54%/36% 52% 48% 64%}35%{border-radius:50% 50% 54% 46%/42% 46% 54% 58%}70%{border-radius:62% 38% 44% 56%/34% 56% 44% 66%}}
.abp{position:relative}
.blob{--bs:clamp(200px,26vw,360px);position:absolute;left:50%;top:50%;width:var(--bs);height:var(--bs);margin:calc(var(--bs)/-2) 0 0 calc(var(--bs)/-2);translate:calc(var(--bs)*.42) calc(var(--bs)*-.34);
  transform:translate(calc(var(--rx,0)*-2.5px),calc(var(--ry,0)*-2.5px));border-radius:58% 42% 46% 54%/36% 52% 48% 64%;rotate:-7deg;
  background:radial-gradient(ellipse 30% 26% at 68% 24%,rgba(214,176,255,.95),rgba(214,176,255,0) 100%),radial-gradient(circle at 58% 36%,#6b37ff 0,#4a22e6 42%,#2d1190 82%,#251075 100%);
  box-shadow:inset 0 -36px 70px rgba(18,4,70,.5),0 40px 120px -40px rgba(96,52,255,.55);animation:bmorph 16s ease-in-out infinite;pointer-events:none}
:root[data-theme="light"] .blob{filter:brightness(1.18) saturate(.95)}
.blob.hb{--bs:clamp(260px,38vw,540px);translate:none;transform:translate(calc(var(--rx,0)*-4px),calc(var(--ry,0)*-4px))}
.intro>div:not(.gl):not(.hint):not(.mist):not(.grain){position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){.blob,.frame::before,.frame::after,.pf::before,.pf::after,.stage::before,.stage::after,.cd{animation:none}.tr{display:none}}
/* linee grafiche in ogni pagina */
.gl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:clip;z-index:0;transform:translate(calc(var(--rx,0)*-1.4px),calc(var(--ry,0)*-1.4px))}
.gl i{position:absolute;background:var(--gl)}
.gl .h{left:-5%;right:-5%;height:1px;transform-origin:left;animation:lx 1.4s .8s cubic-bezier(.3,.7,.2,1) both}
.gl .v{top:-5%;bottom:-5%;width:1px;transform-origin:top;animation:ly 1.4s .9s cubic-bezier(.3,.7,.2,1) both}
.gl .d{width:160vmax;height:1px;transform-origin:0 0;rotate:var(--a);animation:lx 1.8s 1s cubic-bezier(.3,.7,.2,1) both}
.gl b{position:absolute;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--muted);animation:pop .45s 1.8s cubic-bezier(.3,1.6,.5,1) both}
#projects .page{position:relative;overflow:clip}
#projects .page>:not(.gl){position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.gl i,.gl b{animation:none}}
/* About */
.ab{position:relative;overflow:clip;display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:center;padding:110px clamp(20px,5vw,80px) 60px}
.abt .rintro{font-size:clamp(.95rem,1.05vw,1.08rem);max-width:34rem}
.abh{font-size:clamp(2rem,3.8vw,3.4rem);font-weight:800;letter-spacing:-.04em;line-height:1;margin:0 0 clamp(14px,3vh,26px)}
.abp{display:grid;place-items:center;align-self:stretch;min-height:0}
.pf{position:relative;width:min(100%,280px);aspect-ratio:4/5;transform:perspective(900px) rotateY(calc(var(--rx,0)*.5deg)) rotateX(calc(var(--ry,0)*.5deg)) rotate(-1.5deg);transition:transform .25s}
.pf::before,.pf::after{content:"";position:absolute;pointer-events:none}
.pf::before{left:0;right:-100vw;top:0;bottom:0;border-block:1px solid var(--line)}
.pf::after{top:-100vh;bottom:-100vh;left:0;right:0;border-inline:1px solid var(--line)}
.po{position:absolute;inset:0;transform:translate(24px,-24px);border:1px solid var(--muted);opacity:.55}
.ab{min-height:100vh;min-height:100svh}
@media (max-width:860px){.ab{grid-template-columns:1fr}.abp{justify-items:start;padding:0 24px 24px 0}.pf{width:46%}}
/* Resumé */
#resume{--m:clamp(20px,15vw,300px)}
.rhero{position:relative;overflow:clip;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1.25fr .75fr;gap:4vw;align-items:center;padding:110px var(--m) 70px}
.rlabel{color:var(--muted);font-size:.95rem;margin:0 0 16px}
.rname{font-size:clamp(2.4rem,4.8vw,4.6rem);font-weight:800;letter-spacing:-.045em;line-height:.95;margin:0 0 30px}
.rintro{max-width:38rem;margin:0;font-size:clamp(1rem,1.25vw,1.2rem);color:var(--muted)}
.rlinks{display:flex;gap:28px;flex-wrap:wrap;margin-top:34px}.rlinks a{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}.rlinks a:hover{opacity:.6}
.frame{position:relative;justify-self:end;width:min(100%,250px);aspect-ratio:4/5}
.frame::before,.frame::after{content:"";position:absolute;pointer-events:none}
.frame::before{left:0;right:-100vw;top:0;bottom:0;border-block:1px solid var(--gl)}
.frame::after{top:-100vh;bottom:-100vh;left:0;right:0;border-inline:1px solid var(--line)}
.ph{position:absolute;inset:10px;background:color-mix(in srgb,var(--bg) 80%,var(--ink) 20%);display:grid;place-items:center;color:var(--muted);z-index:1}
.rcols{display:grid;grid-template-columns:var(--m) minmax(0,1fr) minmax(0,2.6fr) var(--m);border-top:1px solid var(--gl)}
.rl{grid-column:2;position:relative;padding:56px clamp(18px,3vw,44px) 70px 0;border-right:1px solid var(--gl)}
.rl::before{content:"";position:absolute;right:-3px;top:-3px;width:5px;height:5px;border-radius:50%;background:var(--muted)}
.rr{grid-column:3;padding:56px 0 70px clamp(20px,4vw,56px)}
.rh{font-size:clamp(1.6rem,2.3vw,2.4rem);font-weight:600;letter-spacing:-.03em;line-height:1.1;margin:0 0 26px}
.rr .rh:not(:first-child){margin-top:30px}.rl .rh:not(:first-child){margin-top:60px}
.ed{margin:0 0 28px}.ed b{text-wrap:balance;display:block;font-size:1.1rem;font-weight:600;line-height:1.25}.ed span{display:block;color:var(--muted);margin-top:2px}.ed small{display:block;margin-top:6px;color:var(--muted);font-size:.85rem}
.sg{display:block;margin:0 0 10px;color:var(--muted);font-size:.88rem}
.sk{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}.sk i{font-style:normal;border:1px solid var(--line);padding:5px 11px;font-size:.8rem}
.lg2{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}.lg2 span{color:var(--muted);font-size:.9rem}
.xe{padding:0 0 38px;margin:0 0 38px;border-bottom:1px solid var(--line)}.xe:last-child{border:0;margin-bottom:0}
.xt{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap}
.xt h3{margin:0;font-size:clamp(1.2rem,1.5vw,1.6rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;max-width:42rem}
.xt time{color:var(--muted);font-size:.9rem;white-space:nowrap}
.xo{margin:6px 0 16px;font-size:1rem}.xo span{color:var(--muted)}
.xb{list-style:none;padding:0;margin:0}.xb li{position:relative;padding-left:20px;margin:0 0 10px;font-size:.98rem;max-width:50rem}
.xb li::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--muted)}
@media (max-width:860px){.rhero{grid-template-columns:1fr;align-content:center}.frame{justify-self:start;width:44%}#resume{--m:20px}.rcols{grid-template-columns:var(--m) minmax(0,1fr) var(--m)}.rl,.rr{grid-column:2}.rl{border-right:0;padding-right:0;border-bottom:1px solid var(--line)}.rl::before{display:none}.rr{padding-left:0}}
.foot{scroll-snap-align:end;display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;padding:26px clamp(18px,4vw,56px) 34px;border-top:1px solid var(--line);color:var(--muted);font-size:.92rem;background:var(--bg)}
.foot nav{justify-content:center;gap:26px;font-size:inherit}.foot nav a{display:flex;gap:8px;align-items:center;border:0}.foot nav a:hover{color:var(--ink)}
.foot svg{width:16px;height:16px}
.foot button{justify-self:end;background:none;border:0;color:inherit;font:inherit;cursor:pointer}.foot button:hover{color:var(--ink)}
@media (max-width:760px){.proj{grid-template-columns:1fr;align-content:center}.art{justify-self:start;width:42%}.row{grid-template-columns:1fr auto}.row .t{grid-column:1/-1;order:3}.cols{grid-template-columns:1fr}.two{grid-template-columns:1fr}.cv li{grid-template-columns:1fr;gap:2px}nav{font-size:.85rem;gap:12px}.foot{grid-template-columns:1fr;justify-items:center;text-align:center}.foot button{justify-self:center}.dots{right:8px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rise>span,.fade{transition:none}}

/* ===== Sistema tipografico unico (tutte le pagine) ===== */
:root{--ff:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-title:clamp(2.2rem,4.4vw,3.6rem);--t-section:clamp(1.45rem,2.1vw,1.95rem);--t-item:clamp(1.12rem,1.45vw,1.4rem);--t-lead:clamp(1.05rem,1.25vw,1.2rem);--t-body:1rem;--t-small:.88rem;
  --w-title:700;--w-section:600;--w-item:600;--ls-title:-.035em;--ls-section:-.025em;--lh-title:1.05;--lh-body:1.65}
body,button,input,textarea{font-family:var(--ff)}
:is(.page>h2,.abh,.rname,.dh,.hs-t){font-size:var(--t-title);font-weight:var(--w-title);letter-spacing:var(--ls-title);line-height:var(--lh-title)}
body #contact .card h2{font-size:min(var(--t-title),7vh);font-weight:var(--w-title);letter-spacing:var(--ls-title);line-height:var(--lh-title)}
.rh,.dp-s h2{font-size:var(--t-section);font-weight:var(--w-section);letter-spacing:var(--ls-section);line-height:1.15}
.xt h3,.ed b,.pn{font-size:var(--t-item);font-weight:var(--w-item);letter-spacing:-.015em;line-height:1.25}
.rintro,.sub,.abt .rintro{font-size:var(--t-lead);line-height:1.6}
.xb li,.xo,.b,.pm,.dp-s p{font-size:var(--t-body);line-height:var(--lh-body)}
.rlabel,.sg,.ed small,.xt time,.hint,.cap2,.chips button{font-size:var(--t-small)}
.ul{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}.ul:hover{opacity:.65}

/* logo solo testo */
.logo{display:block;height:auto;font-weight:700;font-size:1.55rem;letter-spacing:-.05em;line-height:1;text-decoration:none;color:inherit}
header{gap:24px}
@media (max-width:640px){.logo{font-size:1.25rem}header{gap:28px}nav{gap:14px;font-size:.82rem}#theme{width:32px;height:32px}}
@media (max-width:380px){.logo{font-size:1.12rem}header{gap:20px;padding-left:16px;padding-right:12px}nav{gap:9px;font-size:.76rem}#theme{width:28px;height:28px}}

/* cursore: il testo resta leggibile */
.cursor.txt{width:10px;height:10px;margin:9px 0 0 9px;opacity:.55;box-shadow:none}

/* pallini della home: neri, nascosti sulla prima schermata */
.dots{opacity:0;pointer-events:none;transition:opacity .3s,color .4s}
.dots.show{opacity:1;pointer-events:auto}
.dots button{color:inherit;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}

/* sezione About nella home */
.hs{cursor:pointer}.hs-in{max-width:42rem}.hs-t{margin:0 0 clamp(14px,2.4vw,24px)}.hs-in .rintro{margin:0 0 28px;color:var(--ink);opacity:.88}

/* Projects: card scorrevoli */
.rail{display:flex;gap:clamp(14px,2vw,28px);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:clamp(18px,4vw,56px);padding:6px clamp(18px,4vw,56px) 22px;margin:0 calc(-1*clamp(18px,4vw,56px));scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch;outline-offset:-3px}
.rail::-webkit-scrollbar{display:none}
.rail.drag{scroll-snap-type:none;cursor:grabbing;user-select:none}
.pcard{flex:0 0 clamp(240px,26vw,340px);scroll-snap-align:start;text-decoration:none;color:inherit;display:block;-webkit-user-drag:none}
.pv,.dpv{position:relative;overflow:hidden;background:var(--c);border-radius:22px}
.pv{aspect-ratio:1/1.08;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.pv::before,.dpv::before,.pv::after,.dpv::after{content:"";position:absolute;border-radius:50%;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.pv::before,.dpv::before{width:64%;aspect-ratio:1;left:var(--ax,-10%);bottom:var(--ay,-10%);background:#f6f3ea}
.pv::after,.dpv::after{width:26%;aspect-ratio:1;right:14%;top:12%;background:#15161a}
.pcard:hover .pv{transform:translateY(-6px)}.pcard:hover .pv::before{transform:translate(8%,-8%)}.pcard:hover .pv::after{transform:translate(-30%,30%)}
.pn{margin:14px 0 2px}.pm{margin:0;color:var(--muted)}
.rui{display:flex;align-items:center;gap:20px;margin-top:6px}
.rbar{flex:1;height:2px;background:var(--line)}.rbar i{display:block;height:100%;width:0;background:var(--ink);transition:width .2s}
.rbtn{display:flex;gap:8px}.rbtn button{width:42px;height:42px;border-radius:50%;border:1px solid var(--gl);background:none;color:var(--ink);cursor:pointer;font:inherit;font-size:1.1rem;transition:background .2s,color .2s}
.rbtn button:hover{background:var(--ink);color:var(--bg)}

/* pagina del singolo progetto */
.dp .dmeta{display:flex;flex-wrap:wrap;gap:8px 28px;margin:18px 0 0;color:var(--muted);font-size:var(--t-small)}
.dpv{aspect-ratio:16/8;margin:clamp(24px,4vw,44px) 0}
.dpv::before{left:auto;right:12%;bottom:-30%;width:42%}.dpv::after{width:12%;right:auto;left:10%;top:16%}
.dp-g{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,56px)}
.dp-s h2{margin:0 0 12px}.dp-s p{margin:0;color:var(--muted)}
.dp-nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(40px,6vw,72px);padding-top:22px;border-top:1px solid var(--gl)}
@media (max-width:760px){.dp-g{grid-template-columns:1fr}.dpv{aspect-ratio:4/3}}

/* About: testo piu leggibile */
.abt .rintro,.abt .rlabel{color:var(--ink)}
.abt .rintro{max-width:36rem;line-height:1.7;opacity:.92}
.abt{text-shadow:0 0 14px var(--bg),0 0 3px var(--bg)}

/* Resume: la foto ha la stessa inclinazione di About */
.frame{transform:perspective(900px) rotateY(calc(var(--rx,0)*.5deg)) rotateX(calc(var(--ry,0)*.5deg)) rotate(-1.5deg);transition:transform .25s}
#resume .frame{animation:fin 1.4s .6s both,bob 7s ease-in-out infinite alternate}

/* Resume: Education e Selected Projects per primi */
@media (min-width:861px){
  .rcols{grid-template-columns:var(--m) minmax(0,1fr) minmax(0,2.6fr) var(--m)}
  .rmain{grid-column:3;grid-row:1;padding:56px 0 70px clamp(20px,4vw,56px)}
  .rside{grid-column:2;grid-row:1;position:relative;border-right:1px solid var(--gl);padding:56px clamp(18px,3vw,44px) 70px 0}
  .rside::before{content:"";position:absolute;right:-3px;top:-3px;width:5px;height:5px;border-radius:50%;background:var(--muted)}
  .rs+.rs{margin-top:56px}
}
@media (max-width:860px){
  .rmain,.rside{display:contents}
  .rcols .rs{grid-column:2;padding:44px 0 0}.rcols .rs:last-child{padding-bottom:60px}
  .s-exp{order:0}.s-proj{order:1}.s-edu{order:2}.s-skills{order:3}.s-cert{order:4}.s-lang{order:5}
}

/* home: About con foto */
@media (min-width:861px){.hs{grid-template-columns:1.1fr .9fr;gap:4vw}.hs .abp{padding:0;align-self:center}.hs .pf{width:min(100%,280px);height:auto}}


/* Contact su telefono (e schermi bassi): se non entra in una schermata, scorre */
@media (max-width:760px),(max-height:520px){
  html.is-contact,html.is-contact body{overflow:auto;height:auto}
  #contact.on{display:block;height:auto;min-height:100vh;min-height:100svh}
  #contact .page{position:relative;display:block;flex:none;min-height:0;padding:88px 16px 28px}
  #contact .stage{display:block;max-width:none;max-height:none;margin:0 auto}
  #contact .card{display:block;max-height:none;padding:24px 20px}
  body #contact .card h2{font-size:var(--t-title);margin:0 0 22px;padding-right:36px}
  #contact .card form{display:grid;gap:22px}
  #contact label.msg{display:grid}
  #contact textarea{flex:none;min-height:140px;resize:vertical}
  #contact .bot{flex-wrap:wrap;gap:20px}
  #contact .st{min-height:1.4em}
  #contact .foot{grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px;padding-block:20px 28px}
}


/* Home: sulla sezione About la barra ha uno sfondo, cosi' il testo non si sovrappone */
header::before{transition:opacity .12s}
html.hdrbg header::before{opacity:.94;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hs{padding-right:max(34px,clamp(18px,4vw,56px))}

/* Scorrimento a passi: una schermata (home) o una card (Projects) per ogni scroll */
html.is-home.paged{scroll-snap-type:none;scroll-behavior:auto}
html.is-home.paged:not(.freez){touch-action:pinch-zoom}
html.is-home,html.is-projects{overscroll-behavior-y:none}
.intro h1,.intro .sub{transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s}
.intro.s2 h1{transform:scale(.88)}
.intro.s2 .sub{opacity:0;transform:translateY(12px)}
.panel.leaving>div:not(.mist):not(.grain):not(.gl):not(.hint):not(.art){transform:translateY(calc(var(--tp,0)*var(--dir,1)*-44px));opacity:calc(1 - var(--tp,0)*.65)}
.panel.entering>div:not(.mist):not(.grain):not(.gl):not(.hint):not(.art){transform:translateY(calc((1 - var(--tp,0))*var(--dir,1)*44px));opacity:calc(.35 + var(--tp,0)*.65)}

/* Home: un solo scroll dal nome al Progetto 1, con il nome che si dissolve */
.intro .ch{transition:opacity .8s calc(var(--i,0)*32ms),filter .8s calc(var(--i,0)*32ms),transform .8s calc(var(--i,0)*32ms)}
.intro.dis .ch{opacity:0;filter:blur(14px);transform:translateY(-26px)}
.intro .hint{transition:opacity .6s}
.intro.dis .sub,.intro.dis .hint{opacity:0}

/* ===== About: Beyond Design e carosello ===== */
.bd{position:relative;padding:clamp(72px,10vw,140px) 0 clamp(40px,6vw,80px)}
.bd-in{padding:0 clamp(20px,5vw,80px);max-width:calc(46rem + 2*clamp(20px,5vw,80px))}
.bd-t{margin:0 0 clamp(14px,2.4vw,24px);font-size:var(--t-title);font-weight:var(--w-title);letter-spacing:var(--ls-title);line-height:var(--lh-title)}
.bd-p{margin:0;max-width:40rem;color:var(--ink);opacity:.88}
.cr-wrap{position:relative;margin-top:clamp(110px,14vw,175px)}
.cr-wrap .mist,.cr-wrap .grain{inset:-55% 0;pointer-events:none;z-index:0}
.cr{position:relative;z-index:1;height:clamp(200px,32vw,400px);overflow:hidden;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;outline-offset:-3px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.cr.drag{cursor:grabbing}
.trk{display:flex;gap:clamp(12px,1.6vw,22px);height:100%;width:max-content;will-change:transform}
.tl{flex:none;height:100%;aspect-ratio:var(--ar,4/5);margin:0;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,color-mix(in srgb,var(--ink) 10%,var(--bg)),color-mix(in srgb,var(--ink) 4%,var(--bg)))}
.tl img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.tp{height:100%;display:flex;align-items:flex-end;padding:14px 16px;font-size:var(--t-small);color:var(--muted)}
.cr-pp{position:relative;z-index:2;display:block;margin:clamp(70px,9vw,120px) clamp(20px,5vw,80px) 0 auto;padding:6px 0;background:none;border:0;color:var(--muted);font:inherit;font-size:var(--t-small);cursor:pointer}
.cr-pp:hover{color:var(--ink)}
.tl:has(.tp){background:color-mix(in srgb,var(--ink) 9%,transparent)}
.cr.native{overflow-x:auto;overflow-y:hidden;touch-action:auto;cursor:auto;scrollbar-width:thin;-webkit-mask-image:none;mask-image:none}
.cr.native .trk{transform:none!important}

/* ===== Contact: campi senza rettangolo nero, scrollbar integrata nello sfondo ===== */
#contact input,#contact textarea{caret-color:var(--ink)}
#contact input:focus,#contact input:focus-visible,#contact textarea:focus,#contact textarea:focus-visible{outline:none;border-bottom-color:var(--ink);box-shadow:0 1px 0 0 var(--ink)}
#contact input:-webkit-autofill,#contact input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);caret-color:var(--ink);transition:background-color 99999s ease-out}
@supports not selector(::-webkit-scrollbar){#contact textarea{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 38%,transparent) transparent}}
#contact textarea::-webkit-scrollbar{width:10px;background:transparent}
#contact textarea::-webkit-scrollbar-track{background:transparent}
#contact textarea::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 38%,transparent);border-radius:99px;border:3px solid transparent;background-clip:content-box}
#contact textarea::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink) 60%,transparent);background-clip:content-box}
#contact textarea::-webkit-scrollbar-button{display:none;width:0;height:0}
#contact textarea::-webkit-scrollbar-corner,#contact textarea::-webkit-resizer{background:transparent}

/* ===== continuita' dello sfondo: la grana sfuma ai bordi, niente rettangoli piu' chiari con bordo netto ===== */
.ab>.grain,.rhero>.grain{-webkit-mask-image:linear-gradient(#000 0,#000 70%,transparent 100%);mask-image:linear-gradient(#000 0,#000 70%,transparent 100%)}
.cr-wrap .grain{-webkit-mask-image:linear-gradient(transparent 0,#000 26%,#000 74%,transparent 100%);mask-image:linear-gradient(transparent 0,#000 26%,#000 74%,transparent 100%)}

/* ===== Home About su mobile: testo sopra, foto sotto, nessuna sovrapposizione ===== */
@media (max-width:860px){
  .hs{align-content:center;row-gap:clamp(26px,5vh,44px)}
  .hs .abp,.ab .abp{min-height:auto;align-self:start;justify-items:start;padding:0 24px 24px 0}
  .hs .pf{width:min(50%,220px)}
  .ab{align-content:center;row-gap:clamp(28px,5vh,44px)}
  .hs .pf::after,.ab .pf::after{top:-26px}   /* le linee verticali non attraversano piu' il testo sopra la foto */
}

/* ===== About / Beyond Design su desktop: titolo, testo e foto nella stessa schermata ===== */
@media (min-width:861px) and (min-height:561px){
  .bd{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(78px,11vh,112px) 0 clamp(20px,3.5vh,40px)}
  .bd-in{max-width:none}
  .bd-t{margin:0}
  .bd-p{max-width:44rem;margin:clamp(14px,2.4vh,22px) 0 0}
  .cr-wrap{margin-top:clamp(36px,6.5vh,72px)}
  .cr{height:clamp(160px,28vh,270px)}
  .trk{gap:clamp(16px,1.8vw,26px)}
  .cr-wrap .mist,.cr-wrap .grain{inset:-45% 0}
  .cr-pp{margin-top:clamp(24px,5vh,56px)}
}

/* ===== card progetto con dati e copertina (Home, Projects, pagina) ===== */
.pe{margin:0 0 14px;font-size:1.05rem;opacity:.75}
.ps{margin:0 0 26px;max-width:34rem;font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.5}
.pe:empty,.ps:empty{display:none}
.panel.proj.has-img{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.art.img{aspect-ratio:auto;width:100%;background:none;border-radius:18px;overflow:visible}
.art.img::before,.art.img::after,.art.img small{display:none}
.art.img img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 34px 60px -34px rgba(0,0,0,.55)}
@media (max-width:760px){.panel.proj .ps,.panel.proj .pe{padding-right:22px}}
@media (max-height:680px){.panel.proj .ps{display:none}}
@media (max-height:620px){.panel.proj{padding-top:78px;padding-bottom:30px}.panel.proj.has-img .art{width:82%}.panel.proj .meta{margin:14px 0 16px}.panel.proj .pe{margin-bottom:8px}}

/* ===== Home: pannelli progetto sullo sfondo del sito (scuro o avorio), con un bagliore nel colore del progetto ===== */
.panel.proj{background:var(--bg);color:var(--ink);isolation:isolate}
.panel.proj>div:not(.gdec):not(.art):not(.hint2){position:relative;z-index:1}
.panel.proj .meta{color:var(--muted)}
.panel.proj .go{background:var(--ink);color:var(--bg)}
.panel.proj .art:not(.img){box-shadow:0 30px 60px -34px rgba(0,0,0,.55)}
.art.img img{border:1px solid var(--line)}

/* ===== Home: cornice con linee e pallini attorno all'immagine (come le foto di About e Resume) ===== */
.panel.proj .art.img::before,.panel.proj .art.img::after{display:block;content:"";position:absolute;pointer-events:none;width:auto;height:auto;aspect-ratio:auto;border-radius:0;background:none;transition:none;scale:none}
.panel.proj .art.img::before{left:0;right:calc(-1*clamp(18px,4vw,56px));top:0;bottom:0;border-block:1px solid var(--gl);transform:none;transform-origin:left}
.panel.proj .art.img::after{top:-50vh;bottom:-50vh;left:0;right:0;border-inline:1px solid var(--line);transform:none;transform-origin:center}
.panel.proj:not(.drawn) .art.img::before,.panel.proj:not(.drawn) .art.img::after,.panel.proj:not(.drawn) .art .cd{opacity:0}
.panel.proj.drawn .art.img::before{animation:lx 1s .1s cubic-bezier(.3,.7,.2,1) both}
.panel.proj.drawn .art.img::after{animation:ly 1s .2s cubic-bezier(.3,.7,.2,1) both}
.panel.proj .art .cd{animation:none}
.panel.proj.drawn .art .cd{animation:pop .45s .85s cubic-bezier(.3,1.6,.5,1) both}
@media (max-width:760px){.panel.proj .art.img::after{top:-26px}}
@media (prefers-reduced-motion:reduce){.panel.proj .art.img::before,.panel.proj .art.img::after,.panel.proj .art .cd{opacity:1!important;animation:none!important}}

/* ===== Home: grafica nello stile del riferimento (statica, senza canvas, per tenere lo scroll fluido) ===== */
.panel.proj .gdec{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.gdec .ring{position:absolute;left:8%;top:30%;width:140%;height:130%;border:1px solid var(--line);border-radius:50%;transform:rotate(-7deg);-webkit-mask-image:linear-gradient(90deg,transparent 38%,#000 62%);mask-image:linear-gradient(90deg,transparent 38%,#000 62%)}
.gdec .dots{position:absolute;right:5%;top:7%;width:36%;height:22%;background-image:radial-gradient(circle,var(--gl) 1.1px,transparent 1.7px);background-size:15px 15px;opacity:.55;-webkit-mask-image:radial-gradient(ellipse at 60% 55%,#000 0,transparent 70%);mask-image:radial-gradient(ellipse at 60% 55%,#000 0,transparent 70%)}
.panel.proj .art.img{perspective:1700px}
.panel.proj .art.img img{transform:rotateY(-8deg) rotateX(3deg) rotateZ(-.6deg);transform-origin:50% 50%}
.cnt{position:absolute;left:0;top:-30px;font-size:.78rem;letter-spacing:.16em;color:var(--muted)}
.hint2{position:absolute;left:clamp(18px,4vw,56px);bottom:30px;z-index:2;display:flex;align-items:center;gap:10px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hint2 button{width:30px;height:30px;border:1px solid var(--gl);border-radius:6px;background:none;color:var(--ink);cursor:pointer;font:inherit;font-size:.95rem;line-height:1;transition:background .2s,color .2s}
.hint2 button:hover{background:var(--ink);color:var(--bg)}
@media (max-width:860px){.panel.proj .gdec{display:none}}
@media (max-width:860px),(hover:none){.hint2{display:none}.cnt{display:none}.panel.proj .art.img img{transform:none}}

/* ===== Projects: griglia di card con cornice (linee e pallini) ===== */
#projects .page{padding-bottom:0;overflow-x:clip}
#projects .page>.foot{position:relative;z-index:3;margin:40px calc(-1*clamp(18px,4vw,56px)) 0;background:var(--bg)}
@media (max-width:760px){.panel.proj.has-img{grid-template-columns:1fr}.panel.proj.has-img .art{justify-self:stretch}}
.pg{--pm:clamp(18px,4vw,56px);--gp:clamp(34px,5vh,56px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gp) clamp(16px,2vw,28px);padding:clamp(24px,4vh,44px) 0 clamp(24px,4vh,44px)}
@media (min-width:1700px){.pg{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1099px){.pg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:559px){.pg{grid-template-columns:1fr}}
.pg [hidden]{display:none!important}
.pg-c{position:relative;display:block;padding:clamp(10px,1.1vw,14px);background:color-mix(in srgb,var(--bg) 94%,var(--ink));color:inherit;text-decoration:none;opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.pg-c.in{opacity:1;transform:none}
.pg-c::before,.pg-c::after{content:"";position:absolute;pointer-events:none}
.pg-c::before{left:-100vw;right:-100vw;top:0;bottom:0;border-block:1px solid var(--gl);transform-origin:center}
.pg-c::after{top:calc(var(--gp)/-2);bottom:calc(var(--gp)/-2);left:0;right:0;border-inline:1px solid var(--line);transform-origin:center}
.pg-c:not(.in)::before,.pg-c:not(.in)::after,.pg-c:not(.in) .cd{opacity:0}
.pg-c.in::before{animation:lx 1.1s calc(.3s + var(--dl,0s)) cubic-bezier(.3,.7,.2,1) both}
.pg-c.in::after{animation:ly 1.1s calc(.4s + var(--dl,0s)) cubic-bezier(.3,.7,.2,1) both}
.pg-c .cd{animation:none}.pg-c.in .cd{animation:pop .45s calc(1.1s + var(--dl,0s)) cubic-bezier(.3,1.6,.5,1) both}
.pg-i{aspect-ratio:16/10;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 90%,var(--ink))}
.pg-i img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.pg-i.ph0{background:color-mix(in srgb,var(--c) 13%,var(--bg));display:grid;align-items:end}
.pg-i.ph0 small{padding:10px 12px;color:var(--muted);font-size:var(--t-small)}
.pg-c:hover .pg-i{border-color:var(--gl)}.pg-c:hover .pg-i img{transform:scale(1.04)}
.pg-m{display:flex;justify-content:space-between;align-items:center;margin:12px 2px 4px;font-size:var(--t-small);color:var(--muted)}
.pg-m .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:9px;vertical-align:.08em}
.pg-a{transition:transform .4s}.pg-c:hover .pg-a{transform:translate(3px,-3px)}
.pg-t{margin:0 2px;font-size:clamp(1.25rem,1.8vw,1.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.pg-x{margin:5px 2px 0;color:var(--muted);font-size:var(--t-small)}
.pg-g{margin:2px 2px 4px;color:var(--muted);font-size:var(--t-small);opacity:.8}
@media (prefers-reduced-motion:reduce){.pg-c{opacity:1;transform:none;transition:none}.pg-c:not(.in)::before,.pg-c:not(.in)::after,.pg-c:not(.in) .cd{opacity:1}.pg-c.in::before,.pg-c.in::after,.pg-c.in .cd{animation:none}.pg-i img{transition:none}}

.panel.proj .pt.rise{padding-bottom:.2em;margin-bottom:-.14em}   /* la coda della g non viene tagliata */
/* ===== Home: invito a vedere tutti i progetti (in Home se ne vedono tre) ===== */
.panel.proj .ctas{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.panel.proj .go2{display:inline-block;padding:11px 24px;border:1px solid var(--gl);border-radius:99px;color:var(--ink);text-decoration:none;transition:background .25s,color .25s,border-color .25s}
.panel.proj .go2:hover,.panel.proj .go2:focus-visible{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media (max-width:380px){.panel.proj .ctas{gap:8px}.panel.proj .go,.panel.proj .go2{padding:10px 16px;font-size:.9rem}}

/* ===== pagina progetto: il processo come filo conduttore ===== */
.dp .dsub{margin:12px 0 0;max-width:46rem;font-size:var(--t-lead);line-height:1.4;color:var(--muted)}
.dp-role{margin:14px 0 0;max-width:46rem;font-size:var(--t-body);line-height:1.5}
.dp-cover{margin:clamp(24px,4vw,44px) 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0c0c0e}
.dp-cover img{display:block;width:100%;height:auto;max-height:70vh;object-fit:cover}
.dp-glance{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,56px);padding:clamp(22px,3vw,36px) 0;border-block:1px solid var(--gl)}
.dp-gl h2{margin:0 0 10px;font-size:var(--t-item);font-weight:var(--w-item);letter-spacing:-.015em}
.dp-gl p{margin:0;color:var(--muted);line-height:1.5}
.dp-body{display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(32px,5vw,72px);margin-top:clamp(40px,6vw,80px)}
.dp-map{position:sticky;top:96px;align-self:start}
.dp-map ol{list-style:none;margin:0;padding:0 0 0 18px;border-left:1px solid var(--gl);display:grid;gap:2px}
.dp-map button{all:unset;cursor:pointer;display:flex;gap:10px;align-items:baseline;padding:8px 0;color:var(--muted);transition:color .3s;position:relative;font-size:var(--t-body)}
.dp-map button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.dp-map button::before{content:"";position:absolute;left:-22px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--bg);border:1px solid var(--gl);transition:transform .3s,background .3s,border-color .3s}
.dp-map li.on button{color:var(--ink)}
.dp-map li.on button::before{background:var(--ink);border-color:var(--ink);transform:scale(1.35)}
.dp-map li.done button::before{background:var(--muted);border-color:var(--muted)}
.dp-mn{font-size:var(--t-small);letter-spacing:.08em}
.dp-ph{padding:0 0 clamp(56px,9vw,112px);scroll-margin-top:110px;opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.dp-ph.in{opacity:1;transform:none}
.dp-ph-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:var(--t-small);margin-bottom:14px}
.dp-ph-n{letter-spacing:.1em}
.dp-ph-r{margin-left:auto;padding:4px 12px;border:1px solid var(--gl);border-radius:99px;color:var(--ink)}
.dp-ph h2{margin:0 0 16px;font-size:var(--t-section);font-weight:var(--w-section);letter-spacing:var(--ls-section);line-height:1.12}
.dp-ph-t{margin:0;max-width:44rem;font-size:var(--t-lead);line-height:1.55}
.dp-ph-k{margin:20px 0 0;max-width:44rem;padding-left:16px;border-left:2px solid var(--ink);line-height:1.5}
.dp-ph-k b{display:block;margin-bottom:4px;font-size:var(--t-small);font-weight:600;color:var(--muted)}
.dp-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:clamp(24px,3.4vw,38px);align-items:start}
.dp-fig{margin:0}.dp-fig.wide{grid-column:1/-1}
.dp-fb{all:unset;display:block;width:100%;cursor:zoom-in;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.dp-fb:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.dp-fb img{display:block;width:100%;height:auto;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.dp-fb:hover img{transform:scale(1.02)}
.dp-fig figcaption{margin-top:8px;font-size:var(--t-small);color:var(--muted)}
.dp-vid{aspect-ratio:16/9;border:1px dashed var(--gl);border-radius:10px;display:grid;place-items:center;color:var(--muted);font-size:var(--t-small)}
.dp-close{margin-top:clamp(8px,2vw,24px);padding-top:clamp(28px,4vw,48px);border-top:1px solid var(--gl);max-width:46rem}
.dp-close h2{margin:0 0 12px;font-size:var(--t-section);font-weight:var(--w-section);letter-spacing:var(--ls-section);line-height:1.12}.dp-close p{margin:0;font-size:var(--t-lead);line-height:1.55;color:var(--muted)}
.lb{position:fixed;inset:0;z-index:80;display:none;overflow:auto;padding:60px 18px 28px;background:color-mix(in srgb,var(--bg) 95%,transparent);-webkit-overflow-scrolling:touch}
.lb.on{display:block}
.lb img{display:block;margin:0 auto;max-width:100%;max-height:calc(100vh - 100px);width:auto;height:auto;border-radius:8px;background:#fff;cursor:zoom-in}
.lb.z img{max-width:none;max-height:none;cursor:zoom-out}
.lb-x{position:fixed;top:14px;right:16px;z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid var(--gl);background:var(--bg);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer}
@media (max-width:999px){
  .dp-body{grid-template-columns:minmax(0,1fr);margin-top:0}
  .dp-map,.dp-phases{min-width:0}
  .dp-map{position:sticky;top:60px;z-index:6;margin:clamp(24px,5vw,40px) calc(-1*clamp(18px,4vw,56px)) 22px;padding:10px clamp(18px,4vw,56px);background:var(--bg);border-bottom:1px solid var(--line)}
  .dp-map ol{display:flex;gap:6px;overflow-x:auto;border-left:0;padding:0;scrollbar-width:none}.dp-map ol::-webkit-scrollbar{display:none}
  .dp-map button{white-space:nowrap;padding:7px 14px;border:1px solid var(--gl);border-radius:99px}.dp-map button::before{display:none}
  .dp-map li.on button{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .dp-glance{grid-template-columns:minmax(0,1fr)}.dp-figs{grid-template-columns:minmax(0,1fr)}.dp-ph{scroll-margin-top:130px}
}
@media (prefers-reduced-motion:reduce){.dp-ph{opacity:1;transform:none;transition:none}.dp-fb img{transition:none}}

.dp-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,3vw,40px);margin-top:clamp(24px,3.4vw,40px);padding-top:clamp(18px,2.4vw,28px);border-top:1px solid var(--gl)}
.dp-fact small{display:block;margin-bottom:6px;font-size:var(--t-small);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dp-fact span{display:block;line-height:1.4}
.dp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:18px;margin:26px 0 0;max-width:44rem}
.dp-st b{display:block;font-size:clamp(2rem,3.6vw,3rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.dp-st span{display:block;margin-top:6px;font-size:var(--t-small);color:var(--muted);line-height:1.35}
.dp-ph-k+.dp-ph-k{margin-top:14px}
.dp-slot{aspect-ratio:16/9;border:1px dashed var(--gl);border-radius:10px;display:grid;place-items:center;text-align:center;padding:16px;color:var(--muted);font-size:var(--t-small)}
.dp-fig:not(.wide) .dp-slot{aspect-ratio:4/3}
.dp-slot b{display:block;margin-bottom:4px;color:var(--ink);font-weight:600}.dp-slot small{display:block;margin-top:6px;opacity:.75}
@media (max-width:999px){.dp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.dp-facts{grid-template-columns:minmax(0,1fr)}}

/* ===== layout alla "Grace": colonna centrale, schede con etichetta, processo come binario a lato ===== */
.dp{--col:1060px}
.dp-top,.dp-cover,.dp-glance,.dp-body,.dp-close,.dp-nav{max-width:var(--col);margin-left:auto;margin-right:auto}
.dp-body{display:block;margin-top:clamp(40px,6vw,80px)}
.dp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.dp-card{padding:clamp(18px,2.6vw,32px);border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--bg) 94%,var(--ink))}
.dp-card-l{margin-bottom:20px;font:500 .76rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dp-sub{margin:0 0 10px;font-size:var(--t-small);color:var(--muted)}.dp-sub:not(:first-of-type){margin-top:20px}
.dp-chips{display:flex;flex-wrap:wrap;gap:8px}
.dp-chip{padding:7px 14px;border:1px solid var(--gl);border-radius:99px;font-size:var(--t-small)}
.dp-chips.dim .dp-chip{border-color:var(--line);color:var(--muted)}
.dp-note{margin:20px 0 0;font-size:var(--t-small);color:var(--muted)}
.dp-bars{display:grid;gap:12px}
.dp-bar{display:grid;grid-template-columns:minmax(110px,190px) minmax(0,1fr) 54px;gap:14px;align-items:center;font-size:var(--t-small)}
.dp-bar-t{height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.dp-bar-t i{display:block;height:100%;width:0;border-radius:99px;background:color-mix(in srgb,var(--ink) 55%,transparent);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.dp-bar.top .dp-bar-t i{background:var(--ink)}
.dp-ph.in .dp-bar-t i{width:var(--w)}
.dp-bar b{text-align:right;font-weight:600}
.dp-pers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dp-per{padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.dp-per-h{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.dp-per-h b{display:block;font-size:var(--t-item);font-weight:var(--w-item)}.dp-per-h small{display:block;color:var(--muted);line-height:1.3}
.dp-av{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--gl);font-weight:600}
.dp-per blockquote{margin:0 0 14px;padding-left:12px;border-left:2px solid var(--ink);line-height:1.45}
.dp-per h4,.dp-per .h4l{margin:12px 0 6px;font:500 .72rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dp-per ul{margin:0;padding-left:18px;color:var(--muted);font-size:var(--t-small);line-height:1.45}.dp-per li+li{margin-top:4px}
.dp-wrow{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.dp-wrow:first-of-type{border-top:0;padding-top:0}
.dp-wrow em{font:500 .72rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-style:normal}
.dp-wg{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.dp-node{flex:1 1 180px;padding:14px 16px;border:1px solid var(--gl);border-radius:12px;background:var(--bg)}
.dp-node b{display:block;font-weight:600}.dp-node span{display:block;margin-top:4px;color:var(--muted);font-size:var(--t-small);line-height:1.4}
.dp-wa{align-self:center;color:var(--muted)}
.dp-sm-root{display:flex;flex-direction:column;align-items:center;margin-bottom:18px}
.dp-sm-root::after{content:"";display:block;width:1px;height:20px;background:var(--gl)}
.dp-pill{display:inline-block;padding:9px 16px;border:1px solid var(--gl);border-radius:12px;background:var(--bg);font-size:var(--t-small)}
.dp-sm{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px}
.dp-sm-c{padding:16px;border:1px solid var(--line);border-radius:12px}
.dp-sm-c em{display:block;margin-bottom:12px;font:500 .72rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-style:normal}
.dp-sm-g{display:flex;flex-wrap:wrap;gap:8px}
.dp-card-epas{background:#171713;border-color:#2a2a25;color:#fdfdff}.dp-card-epas .dp-card-l{color:#9a9a94}
.dp-sw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dp-sw-i i{display:block;height:64px;border-radius:12px;border:1px solid rgba(255,255,255,.14)}
.dp-sw-i b{display:block;margin-top:8px;font:500 .8rem ui-monospace,monospace}.dp-sw-i small{color:#9a9a94}
.dp-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.dp-btn{padding:10px 20px;border-radius:99px;font-size:.86rem;border:1px solid #d84b3a}
.dp-btn.p{background:#d84b3a;color:#fdfdff}.dp-btn.p.h{background:transparent;color:#d84b3a}
.dp-btn.s{background:transparent;color:#d84b3a}.dp-btn.s.h{background:#fdfdff;color:#171713;border-color:#fdfdff}
.dp-cur{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:22px}
.dp-cursor{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#d84b3a;color:#fdfdff;font-size:.62rem;text-align:center;padding:6px;line-height:1.1}
.dp-tl{font-size:.9rem;text-decoration:underline;text-decoration-color:#d84b3a;text-underline-offset:4px}
@media (max-width:760px){.dp-pers{grid-template-columns:minmax(0,1fr)}.dp-wrow{grid-template-columns:minmax(0,1fr);gap:10px}.dp-sm{grid-template-columns:minmax(0,1fr)}.dp-bar{grid-template-columns:minmax(0,1fr) 52px;gap:6px 12px}.dp-bar .dp-bar-t{grid-column:1/-1;grid-row:2}.dp-bar span{grid-row:1}.dp-bar b{grid-row:1}.dp-sw{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){
  .dp-map{position:fixed;left:clamp(20px,2.6vw,48px);top:50%;transform:translateY(-50%);z-index:6;align-self:auto;margin:0;padding:0;background:none;border:0}
  .dp-map ol{display:grid;overflow:visible;border-left:1px solid var(--gl);padding:0 0 0 18px;gap:2px}
  .dp-map button{border:0;padding:8px 0;border-radius:0;white-space:nowrap;background:none}
  .dp-map li.on button{background:none;color:var(--ink)}
  .dp-ml{display:none}.dp-map:hover .dp-ml{display:inline;padding:4px 10px;border-radius:99px;background:var(--bg)}
}
@media (min-width:1400px){.dp-map li.on .dp-ml{display:inline}}
@media (min-width:1000px) and (max-width:1199px){
  .dp-map{position:sticky;top:60px;z-index:6;margin:0 calc(-1*clamp(18px,4vw,56px)) 22px;padding:10px clamp(18px,4vw,56px);background:var(--bg);border-bottom:1px solid var(--line)}
  .dp-map ol{display:flex;gap:6px;overflow-x:auto;border-left:0;padding:0;scrollbar-width:none}.dp-map ol::-webkit-scrollbar{display:none}
  .dp-map button{white-space:nowrap;padding:7px 14px;border:1px solid var(--gl);border-radius:99px}.dp-map button::before{display:none}
  .dp-map li.on button{background:var(--ink);color:var(--bg);border-color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){.dp-bar-t i{transition:none;width:var(--w)}}
/* comparsa solo sul testo: le figure restano ferme (meno lavoro di composizione durante lo scroll) */
.dp-ph{opacity:1;transform:none;transition:none}
.dp-ph-txt{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.dp-ph.in .dp-ph-txt{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.dp-ph-txt{opacity:1;transform:none;transition:none}}

/* ===== 404: figure native e video ===== */
.dp-tone{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dp-tn{padding:16px 18px;border:1px solid var(--gl);border-radius:12px;background:var(--bg)}
.dp-tn b{display:block;font-size:var(--t-item);font-weight:var(--w-item);line-height:1.2}
.dp-tn span{display:block;margin-top:6px;color:var(--muted);font-size:var(--t-small)}
.dp-tree{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:start}
.dp-tcol{display:grid;gap:8px}
.dp-tree .dp-pill,.dp-sm-root .dp-pill{display:block;text-align:center}
.dp-pill-m,.dp-pill-r{border-color:var(--ink);font-weight:600}
.dp-tkids{display:grid;gap:6px;padding-left:10px;border-left:1px solid var(--gl)}
.dp-tkids .dp-pill{padding:7px 9px;font-size:.78rem}
.dp-tkids .dp-pill-s{margin-left:8px;opacity:.65;border-style:dashed}
.dp-card-404{background:#FFFFEA;border-color:#e3e3c2;color:#2b2b2b}.dp-card-404 .dp-card-l{color:#6b6b5c}
.dp-sw4{display:flex;flex-wrap:wrap;gap:14px}
.dp-sw4-i{flex:1 1 170px;min-height:116px;padding:20px 28px;border-radius:999px;display:flex;flex-direction:column;justify-content:center;gap:2px;box-shadow:0 8px 22px rgba(0,0,0,.12)}
.dp-sw4-i b{font-size:1.5rem;line-height:1.1}.dp-sw4-i small{font:500 .8rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;opacity:.9}
.dp-video{display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:12px;background:#000}
.dp-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.dp-links a{padding:11px 20px;border:1px solid var(--gl);border-radius:99px;color:var(--ink);text-decoration:none;transition:background .25s,color .25s}
.dp-links a:hover,.dp-links a:focus-visible{background:var(--ink);color:var(--bg)}
@media (max-width:900px){.dp-tree{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.dp-tone{grid-template-columns:minmax(0,1fr)}.dp-tree{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== colori del progetto negli schemi (--pa principale, --pb secondario, --pt testo sui riempimenti) ===== */
.dp-ov{max-width:var(--col);margin:clamp(28px,4vw,48px) auto 0}
.dp-card-l::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:2px;background:var(--pa,var(--ink));vertical-align:1px}
.dp-map li.on button::before{background:var(--pa);border-color:var(--pa)}
.dp-ph-k{border-left-color:var(--pa)}
.dp-ph-r{border-color:color-mix(in srgb,var(--pa) 65%,transparent)}
.dp-st::before{content:"";display:block;width:28px;height:3px;margin-bottom:10px;border-radius:2px;background:var(--pa)}
.dp-chips:not(.dim) .dp-chip{border-color:color-mix(in srgb,var(--pa) 70%,transparent);background:color-mix(in srgb,var(--pa) 13%,transparent)}
.dp-bar-t i{background:color-mix(in srgb,var(--pa) 58%,transparent)}.dp-bar.top .dp-bar-t i{background:var(--pa)}
.dp-av{background:var(--pa);border-color:var(--pa);color:var(--pt)}
.dp-per blockquote{border-left-color:var(--pa)}
.dp-node{border-left:3px solid var(--pa)}.dp-wa{color:var(--pa);font-weight:700}
.dp-pill-r{background:var(--pb);border-color:var(--pb);color:var(--pt)}.dp-pill-m{border-color:var(--pb)}
.dp-tn{border-left:4px solid var(--pa)}
.dp-note{border-top:0}
.dd{display:block;width:100%;height:auto;margin:4px 0 18px}
.dd-s path{fill:none;stroke:var(--pa);stroke-width:2;stroke-linejoin:round}
.dd-d path{fill:none;stroke:var(--gl);stroke-width:1;stroke-dasharray:4 6}
.dd text{font:500 14px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;fill:var(--muted)}
.dd-n text{font:700 24px var(--ff,sans-serif);letter-spacing:.04em;text-anchor:middle;fill:var(--ink)}
.dd-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dd-c em{display:block;margin-bottom:8px;font:500 .72rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-style:normal}
.dd-r{display:flex;flex-wrap:wrap;gap:8px}
.dd-b{all:unset;cursor:pointer;padding:7px 14px;border:1px solid color-mix(in srgb,var(--pa) 70%,transparent);border-radius:99px;background:color-mix(in srgb,var(--pa) 13%,transparent);font-size:var(--t-small);transition:background .25s}
.dd-b span{color:var(--muted);margin-right:4px;letter-spacing:.06em}
.dd-b:hover,.dd-b:focus-visible{background:color-mix(in srgb,var(--pa) 28%,transparent)}.dd-b:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:700px){.dd-m{display:none}.dd-n text{font-size:30px}.dd-g{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== CORE: schede con icona, grafici, personas, sitemap a ruoli, identita' ===== */
#dp{--pa:var(--pa-d);--pb:var(--pb-d);--pt:var(--pt-d)}
:root[data-theme="light"] #dp{--pa:var(--pa-l);--pb:var(--pb-l);--pt:var(--pt-l)}
.dp-figs{align-items:stretch}.dp-fig>.dp-card{height:100%}
.dp-icards{display:grid;grid-template-columns:repeat(var(--c,3),minmax(0,1fr));gap:14px}
.dp-ic{padding:22px 18px;border:1px solid var(--line);border-radius:14px;background:var(--bg);text-align:center}
.dp-ic-b{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 14px;border-radius:50%;color:var(--pa);background:color-mix(in srgb,var(--pa) 13%,transparent);border:1px solid color-mix(in srgb,var(--pa) 38%,transparent)}
.dp-ic-b svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dp-ic b{display:block;margin-bottom:6px;font-size:var(--t-item);font-weight:var(--w-item);line-height:1.2}
.dp-ic>span:not(.dp-ic-b){display:block;color:var(--muted);font-size:var(--t-small);line-height:1.45}
.dp-split{display:flex;gap:3px;height:46px;border-radius:12px;overflow:hidden}
.dp-split i{display:flex;align-items:center;justify-content:center;width:0;font-style:normal;font-weight:700;transition:width 1.1s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.dp-ph.in .dp-split i{width:var(--w)}
.dp-split i.s0,.dp-sl u.s0{background:var(--pa);color:var(--pt)}
.dp-split i.s1,.dp-sl u.s1{background:color-mix(in srgb,var(--pa) 62%,transparent);color:var(--ink)}
.dp-split i.s2,.dp-sl u.s2{background:color-mix(in srgb,var(--pa) 32%,transparent);color:var(--ink)}
.dp-sl{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:var(--t-small);color:var(--muted)}
.dp-sl u{display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:3px;text-decoration:none}
.dp-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.dp-duo>div{padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.dp-duo>div.a{border-top:3px solid var(--pa)}
.dp-duo h4{margin:0 0 12px;font:500 .72rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dp-duo ul{margin:0;padding-left:18px;line-height:1.5}.dp-duo li+li{margin-top:8px}
.dp-pill-a{background:var(--pa);border-color:var(--pa);color:var(--pt);font-weight:600}
.dp-vl{width:1px;height:14px;background:var(--gl)}
.dp-sm-root:has(.dp-vl)::after{display:none}
.dp-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.dp-role{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.dp-role>.dp-pill{margin-bottom:6px;font-weight:600}
.dp-rs{padding:12px 0;border-top:1px solid var(--line)}.dp-rs:first-of-type{margin-top:8px}
.dp-rs>b{display:block;margin-bottom:8px}
.dp-rg{margin-top:8px}
.dp-rg>.dp-pill{padding:6px 12px;font-size:.82rem}
.dp-kids{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0 12px;padding-left:10px;border-left:1px solid var(--gl)}
.dp-kids .dp-pill{padding:4px 10px;font-size:.76rem;opacity:.85;border-style:dashed}
.dp-card-core{background:#063F5C;border-color:#0b5679;color:#fff}.dp-card-core .dp-card-l{color:#9fc3d6}.dp-card-core .dp-note{color:#9fc3d6}
.dp-swc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dp-swc-i i{display:block;aspect-ratio:1.35;border-radius:14px;border:1px solid rgba(255,255,255,.16)}
.dp-swc-i b{display:block;margin-top:8px;font:500 .84rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.dp-swc-i small{color:#9fc3d6}
.dp-grad{height:34px;margin-top:20px;border-radius:99px}
@media (max-width:900px){.dp-icards{grid-template-columns:repeat(min(var(--c,3),2),minmax(0,1fr))}.dp-roles{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.dp-icards{grid-template-columns:minmax(0,1fr)}.dp-duo{grid-template-columns:minmax(0,1fr)}.dp-swc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.dp-split i{transition:none;width:var(--w)}}

/* ===== LEZ: journey con curva delle emozioni, citazione, passi, video verticale ===== */
.dp-bq{margin:0;padding-left:18px;border-left:3px solid var(--pa);font-size:clamp(1.25rem,2.4vw,1.9rem);line-height:1.28;font-weight:var(--w-item);letter-spacing:-.01em}
.dp-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.dp-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start}
.dp-sn{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--pa) 14%,transparent);border:1px solid color-mix(in srgb,var(--pa) 45%,transparent);font-weight:700}
.dp-steps b{display:block}.dp-steps div>span{display:block;margin-top:2px;color:var(--muted);font-size:var(--t-small);line-height:1.45}
.dp-curve{display:block;width:100%;height:auto}
.dp-curve .g{stroke:var(--line);stroke-width:1}
.dp-curve .c0{fill:none;stroke:var(--muted);stroke-width:2;stroke-dasharray:5 6;stroke-linejoin:round}
.dp-curve .c1{fill:none;stroke:var(--pa);stroke-width:3;stroke-linejoin:round}
.dp-curve .d{fill:var(--pa);stroke:var(--bg);stroke-width:2}
.dp-curve text{font:500 12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;fill:var(--muted)}
.dp-sl u.jl0{background:var(--muted)}.dp-sl u.jl1{background:var(--pa)}
.dp-jr{display:grid;gap:22px;margin-top:24px}
.dp-jr-sc h4{margin:0 0 10px;font:500 .72rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dp-jr-ph{display:flex;gap:10px}
.dp-jp{flex:var(--n,1) 1 0;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.dp-jp>b{display:block;margin-bottom:6px;font:600 .72rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase}
.dp-js{display:grid;grid-template-columns:10px minmax(0,1fr);gap:2px 10px;padding:9px 0;border-top:1px solid var(--line);font-size:var(--t-small);line-height:1.4}
.dp-js i{width:10px;height:10px;margin-top:4px;border-radius:50%;background:var(--muted)}
.dp-js.pos i{background:var(--pa)}
.dp-js em{grid-column:2;font-style:normal;font-weight:600;color:var(--muted)}.dp-js.pos em{color:var(--ink)}
.dp-video.portrait{aspect-ratio:588/1080;width:min(100%,340px);max-height:78vh;margin:0 auto}
.dp-fig:has(.dp-video.portrait){display:flex;flex-direction:column;align-items:center;justify-content:center}
@media (max-width:900px){.dp-jr-ph{flex-direction:column}}
@media (max-width:700px){.dp-curve text{display:none}}

/* panoramica del processo, scoperte -> decisioni, chiusura */
.dp-proc{display:block;max-width:var(--col);margin:clamp(28px,4vw,48px) auto 0}
.dp-proc>h2{margin:0 0 14px;font-size:var(--t-item);font-weight:var(--w-item);letter-spacing:-.015em}
.dp-proc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;counter-reset:st}
.dp-proc button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;width:100%;height:100%;padding:14px 16px;border:1px solid var(--line);border-top:3px solid var(--pa);border-radius:4px 4px 10px 10px;transition:border-color .25s,background .25s}
.dp-proc button:hover{background:color-mix(in srgb,var(--bg) 92%,var(--ink))}
.dp-proc button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.dp-proc .n{font-size:var(--t-small);color:var(--muted)}
.dp-proc b{font-weight:600;line-height:1.25}
@media (min-width:1100px){.dp-proc ol{grid-template-columns:repeat(var(--n),minmax(0,1fr))}}
.dp-proc em{font-style:normal;font-size:var(--t-small);color:var(--muted);line-height:1.35}
.dp-src{margin:14px 0 0;max-width:44rem;font-size:var(--t-small);color:var(--muted);line-height:1.45}
.dp-trace{display:grid;gap:10px}
.dp-tr{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);align-items:stretch}
.dp-tr>div{padding:14px 16px;border-radius:10px;line-height:1.4}
.dp-tr .f{border:1px solid var(--gl)}
.dp-tr .d{background:color-mix(in srgb,var(--pa) 16%,var(--bg));border:1px solid color-mix(in srgb,var(--pa) 45%,transparent)}
.dp-tr small{display:block;margin-bottom:4px;font-size:var(--t-small);color:var(--muted)}
.dp-tr i{align-self:center;justify-self:center;width:18px;height:2px;background:var(--pa);position:relative}
.dp-tr i::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--pa);border-right:0}
.dp-trh{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);font-size:var(--t-small);color:var(--muted)}
.dp-trh span:last-child{grid-column:3}
.dp-fun{display:grid;gap:14px}
.dp-fun-r{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center}
.dp-fun-r b{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.dp-fun-r b small{display:block;margin-top:4px;font-size:var(--t-small);font-weight:400;letter-spacing:0;color:var(--muted)}
.dp-fun-d{display:flex;flex-wrap:wrap;gap:6px}
.dp-fun-d i{width:14px;height:14px;border-radius:50%;border:1px solid var(--gl)}
.dp-fun-d.on i{background:var(--pa);border-color:var(--pa)}
.dp-close .dp-status{margin:18px 0 0;font-size:var(--t-small);color:var(--muted)}
.dp-status b{color:var(--ink);font-weight:600;margin-right:6px}
.dp-refl{max-width:var(--col);margin:clamp(28px,4vw,44px) auto 0;padding:18px 20px;border:1px dashed var(--gl);border-radius:10px;color:var(--muted);font-size:var(--t-small);line-height:1.5}
.dp-refl b{display:block;margin-bottom:4px;color:var(--ink);font-weight:600}
.dp-nav .mid{margin:0 auto}
.dp-slot .fmt{display:block;margin-top:10px;opacity:.6}
@media (max-width:760px){
 .dp-proc ol{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dp-tr{grid-template-columns:minmax(0,1fr);gap:0}.dp-tr i{transform:rotate(90deg);margin:8px 0}.dp-trh{display:none}
 .dp-tr .f:not(:has(small))::before{content:"Finding";display:block;margin-bottom:4px;font-size:var(--t-small);color:var(--muted)}
 .dp-tr .d::before{content:"Decision";display:block;margin-bottom:4px;font-size:var(--t-small);color:var(--muted)}
 .dp-fun-r{grid-template-columns:minmax(0,1fr);gap:8px}
 .dp-nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:18px}.dp-nav>a:last-child{justify-self:end}.dp-nav .mid{order:3;grid-column:1/-1;justify-self:center;margin:0}
}
@media (max-width:380px){.dp-proc ol{grid-template-columns:minmax(0,1fr)}}
.dp-proc{margin-left:auto;margin-right:auto}

.dp-cx{margin-top:clamp(28px,4vw,44px)}
.dp-cx h3{margin:0 0 12px;font-size:var(--t-item);font-weight:var(--w-item);letter-spacing:-.015em;color:var(--ink)}
.dp-close .dp-cxn{margin:-6px 0 12px;font-size:var(--t-small);color:var(--muted)}
.dp-imp{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.dp-imp li{padding:7px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--pa) 55%,transparent);font-size:var(--t-small);color:var(--ink)}
.dp-lim{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dp-lim>div{padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--pb);border-radius:4px 10px 10px 4px;display:flex;flex-direction:column;gap:4px;line-height:1.45}
.dp-lim b,.dp-next b{font-weight:600;color:var(--ink)}
.dp-lim span,.dp-next span{font-size:var(--t-small);color:var(--muted)}
.dp-next{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;counter-reset:nx}
.dp-next li{counter-increment:nx;padding:14px 16px 16px;border-top:3px solid var(--pa);background:color-mix(in srgb,var(--bg) 93%,var(--ink));border-radius:4px 4px 10px 10px;display:flex;flex-direction:column;gap:4px;line-height:1.4}
.dp-next li::before{content:counter(nx,decimal-leading-zero);font-size:var(--t-small);color:var(--muted)}
@media (max-width:900px){.dp-next{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.dp-lim,.dp-next{grid-template-columns:minmax(0,1fr)}}
/* ===== pagina progetto editoriale (CORE) ===== */
.dp:has(#dp.edl){padding-top:72px}
#dp.edl{--edcol:1060px;--meas:46rem;--panel:color-mix(in srgb,var(--bg) 93%,var(--ink));--panel2:color-mix(in srgb,var(--bg) 88%,var(--ink));--sc:var(--pa);--tx:color-mix(in srgb,var(--ink) 84%,var(--bg))}
#dp.edl{--c1:var(--c1-d);--c2:var(--c2-d);--c3:var(--c3-d);--c4:var(--c4-d)}
:root[data-theme="light"] #dp.edl{--c1:var(--c1-l);--c2:var(--c2-l);--c3:var(--c3-l);--c4:var(--c4-l);--panel:color-mix(in srgb,var(--bg) 90%,#fff 0%);--panel:color-mix(in srgb,var(--bg) 94%,var(--ink));--panel2:color-mix(in srgb,var(--bg) 89%,var(--ink))}
.ed-hero{width:100vw;margin:0 0 0 calc(50% - 50vw);height:clamp(300px,66vh,700px);overflow:hidden;background:#0c0d10}
.ed-hero img{display:block;width:100%;height:100%;object-fit:cover}
.ed-intro,.ed-main,.ed-nav{max-width:var(--edcol);margin-left:auto;margin-right:auto}
.ed-intro{padding-top:clamp(48px,7vw,96px)}
.ed-k{margin:0 0 18px;font:500 .78rem/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ed-sec .ed-sh .ed-k{color:var(--sc)}
.ed-h1{margin:0;font-size:clamp(2.6rem,6.4vw,4.8rem);font-weight:600;letter-spacing:-.04em;line-height:1.02;max-width:14ch}
.ed-lead{margin:clamp(22px,3vw,34px) 0 0;max-width:44rem;font-size:clamp(1.14rem,1.65vw,1.42rem);line-height:1.55;color:var(--tx)}
.ed-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 48px;margin:clamp(40px,5vw,60px) 0 0;padding-top:clamp(28px,3.5vw,40px);border-top:1px solid var(--line)}
.ed-meta div{min-width:0}
.ed-meta dt{margin-bottom:8px;font:500 .74rem/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ed-meta dd{margin:0;font-size:1.06rem;line-height:1.5}
.ed-sec{padding-top:clamp(96px,12vw,168px);scroll-margin-top:40px}
.ed-h2{margin:0;font-size:clamp(2.1rem,4.4vw,3.3rem);font-weight:600;letter-spacing:-.035em;line-height:1.05}
.ed-p[id]{scroll-margin-top:96px}
.ed-sec>.ed-h3{margin-top:clamp(64px,8vw,104px)}
.ed-sec>.ed-sh+.ed-h3{margin-top:clamp(40px,5vw,60px)}
.ed-h3{margin:0;font-size:clamp(1.32rem,2vw,1.66rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;scroll-margin-top:96px}
.ed-sh+.ed-h3{margin-top:clamp(40px,5vw,60px)}
.ed-sec>*+*{margin-top:clamp(22px,2.6vw,32px)}
.ed-sec>.ed-sh+*:not(.ed-h3){margin-top:clamp(28px,3.4vw,44px)}
.ed-p{margin-bottom:0;max-width:var(--meas);font-size:clamp(1.04rem,1.3vw,1.18rem);line-height:1.68;color:var(--tx)}
.ed-p.big{max-width:none;font-size:clamp(1.5rem,3vw,2.35rem);line-height:1.25;letter-spacing:-.02em;font-weight:500;color:var(--ink)}
.ed-h3+.ed-p{margin-top:16px}
.ed-list{margin-bottom:0;padding-left:1.25em;max-width:var(--meas);font-size:1.06rem;line-height:1.6;color:var(--tx)}
.ed-list li+li{margin-top:10px}
.ed-list li::marker{color:var(--sc)}
.ed-quote{margin-left:0;margin-right:0;margin-bottom:0;padding:4px 0 4px clamp(18px,2.4vw,28px);border-left:3px solid var(--sc);max-width:44rem}
.ed-quote p{margin:0;font-size:clamp(1.16rem,1.8vw,1.46rem);font-weight:600;line-height:1.4;letter-spacing:-.01em}
.ed-quote cite{display:block;margin-top:10px;font:500 .74rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--muted)}
.ed-cap{margin:0 0 16px;font:500 .76rem/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ed-note{margin:14px 0 0;max-width:40rem;font-size:.92rem;line-height:1.5;color:var(--muted)}
.ed-fig{margin-left:0;margin-right:0;margin-bottom:0;min-width:0}
.ed-pair>*,.ed-grid>*{margin-top:0}
.ed-fig figcaption{margin-top:12px;max-width:40rem;font-size:.9rem;line-height:1.5;color:var(--muted)}
.ed-fb{all:unset;box-sizing:border-box;display:block;width:100%;cursor:zoom-in;border-radius:18px;overflow:hidden;background:var(--panel)}
.ed-fb:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.ed-fb img{display:block;width:100%;height:auto}
.ed-sec>.ed-block,.ed-sec>.ed-grid{margin-top:clamp(36px,4.5vw,56px)}
.ed-fig.xl{width:min(1320px,calc(100vw - 32px));margin-left:50%;transform:translateX(-50%)}
.ed-fig.xl figcaption{margin-left:max(0px,calc((100% - var(--edcol))/2))}
.ed-fig.dark .ed-fb{background:#063F5C;padding:clamp(14px,2.6vw,32px)}
.ed-video{display:block;width:100%;border-radius:18px;background:#000}
.ed-vf.portrait .ed-video{width:min(100%,360px);margin:0 auto}
.ed-vf.portrait figcaption{text-align:center;margin-left:auto;margin-right:auto}
.ed-slot{aspect-ratio:16/9;display:grid;place-items:center;text-align:center;padding:24px;border:1px dashed var(--gl);border-radius:18px;background:repeating-linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--ink) 3%,transparent) 14px 15px);color:var(--muted);font-size:.92rem}
.ed-fig.half .ed-slot{aspect-ratio:4/3}
.ed-slot.tall{aspect-ratio:3/4}
.ed-slot span{max-width:30rem}
.ed-slot em{display:block;margin-bottom:10px;font:500 .72rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--sc)}
.ed-slot b{display:block;font-size:1.12rem;font-weight:600;color:var(--ink)}
.ed-slot small{display:block;margin-top:8px;line-height:1.45}
.ed-slot small.fmt{margin-top:12px;opacity:.7;font-size:.8rem}
.ed-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2.4vw,28px);align-items:start}
.ed-pair.eq{grid-template-columns:var(--cols)}
.ed-pair.eq .ed-fig{min-width:0}
.ed-pair.eq .ed-fb{aspect-ratio:var(--ar)}
.ed-pair.eq .ed-fb img{width:100%;height:100%;object-fit:contain}
@media (max-width:700px){.ed-pair.eq{grid-template-columns:minmax(0,1fr)}}
.ed-pair.eq .ed-fig.narrow,.ed-pair.eq .ed-fig.small,.ed-pair.eq .ed-fig.mid{max-width:none}
.ed-pair .ed-fig.half{grid-column:auto}
.ed-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px);align-items:stretch}
.ed-panel{min-width:0}
.ed-block{min-width:0}
.ed-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;max-width:46rem}
.ed-stats b{display:block;font-size:clamp(2.6rem,5vw,3.7rem);font-weight:500;letter-spacing:-.045em;line-height:1}
.ed-stats span{display:block;margin-top:8px;font-size:.95rem;color:var(--muted)}
.ed-dots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.8vw,20px)}
.ed-dc{padding:clamp(20px,2.6vw,30px);border-radius:18px;background:var(--panel)}
.ed-dm{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:5px;max-width:300px}
.ed-dm i{aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--ink) 14%,transparent)}
.ed-dm i.on{background:var(--sc)}
.ed-dn{margin:22px 0 0}
.ed-dn b{font-size:clamp(2rem,3.4vw,2.6rem);font-weight:500;letter-spacing:-.04em;line-height:1}
.ed-dl{margin:8px 0 0;font-size:.98rem;line-height:1.45;color:var(--tx)}
.ed-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.ed-cc{padding:clamp(22px,3vw,36px);border-radius:18px;background:var(--panel)}
.ed-cc.now{background:color-mix(in srgb,var(--sc) 12%,var(--bg))}
.ed-cc .ed-k{margin-bottom:12px}
.ed-cc.now .ed-k{color:var(--sc)}
.ed-cl{margin:0 0 18px;font-size:clamp(1.12rem,1.6vw,1.3rem);font-weight:600;line-height:1.35;letter-spacing:-.01em}
.ed-cc ul{margin:0;padding-left:1.15em;line-height:1.5;color:var(--tx)}
.ed-cc li+li{margin-top:8px}
.ed-cc li::marker{color:var(--muted)}
.ed-cc.now li::marker{color:var(--sc)}
.ed-cards{display:grid;grid-template-columns:repeat(min(var(--n,3),3),minmax(0,1fr));gap:clamp(12px,1.8vw,20px)}
@media (min-width:1101px){.ed-cards.five{grid-template-columns:repeat(5,minmax(0,1fr))}}
.ed-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:clamp(24px,3vw,34px) clamp(16px,2vw,24px);border-radius:18px;background:var(--panel);text-align:center}
#dp.edl .ed-card .dp-ic-b{margin:0 0 8px;width:54px;height:54px;border:0;color:var(--sc);background:color-mix(in srgb,var(--sc) 15%,var(--panel))}
#dp.edl .ed-card .dp-ic-b svg{width:24px;height:24px}
.ed-card b{font-size:1.14rem;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.ed-card>span{font-size:.96rem;line-height:1.5;color:var(--muted)}
.ed-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px}
.ed-tags i{font:500 .7rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;font-style:normal;padding:6px 9px;border-radius:7px;background:var(--panel2);color:var(--tx)}
.ed-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ed-chips li{padding:9px 16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--sc) 50%,transparent);font-size:.95rem}
.ed-lim{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.8vw,18px)}
.ed-lim>div{display:flex;flex-direction:column;gap:6px;padding:clamp(20px,2.6vw,28px);border-radius:18px;background:var(--panel);line-height:1.5}
.ed-lim b{font-size:1.08rem;font-weight:600}
.ed-lim span{color:var(--muted);font-size:.96rem}
.ed-next{list-style:none;margin:0;padding:0;counter-reset:nx;max-width:var(--meas)}
.ed-next li{counter-increment:nx;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;padding:16px 0;border-top:1px solid var(--line);font-size:clamp(1.08rem,1.5vw,1.26rem);line-height:1.4}
.ed-next li:last-child{border-bottom:1px solid var(--line)}
.ed-next li::before{content:counter(nx,decimal-leading-zero);font:500 .76rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.1em;color:var(--sc)}
.ed-status{margin-bottom:0;max-width:var(--meas);font-size:.98rem;line-height:1.55;color:var(--tx)}
.ed-status .ed-k{display:inline;margin:0 12px 0 0;color:var(--sc)}
/* figure native dentro la pagina editoriale: pannelli morbidi, niente bordi */
#dp.edl .dp-card{border:0;border-radius:18px;background:var(--panel);padding:clamp(22px,3vw,38px)}
#dp.edl .dp-card-l{margin-bottom:22px;letter-spacing:.12em;color:var(--muted)}
#dp.edl .dp-card-l::before{display:none}
#dp.edl .dp-ic,#dp.edl .dp-per{border:0;background:var(--panel2)}
#dp.edl .dp-tr .f{border:0;background:var(--panel2)}
#dp.edl .dp-tr .d{border:0;background:color-mix(in srgb,var(--sc) 16%,var(--panel))}
#dp.edl .dp-note{color:var(--muted)}
#dp.edl .dd-s path{stroke:var(--gl);stroke-width:1.2;fill:none}
#dp.edl .dd-d path{stroke:var(--gl);stroke-dasharray:4 5}
#dp.edl .dd-n text:nth-child(1){fill:var(--c1)}#dp.edl .dd-n text:nth-child(2){fill:var(--c2)}#dp.edl .dd-n text:nth-child(3){fill:var(--c3)}#dp.edl .dd-n text:nth-child(4){fill:var(--c4)}
#dp.edl .dd-c:nth-child(1){--sc:var(--c1)}#dp.edl .dd-c:nth-child(2){--sc:var(--c2)}#dp.edl .dd-c:nth-child(3){--sc:var(--c3)}#dp.edl .dd-c:nth-child(4){--sc:var(--c4)}
#dp.edl .dd-c em{color:var(--sc)}
#dp.edl .dd-b{border-color:color-mix(in srgb,var(--sc) 55%,transparent);background:color-mix(in srgb,var(--sc) 10%,transparent);color:var(--ink)}
#dp.edl .ed-anim.in .dp-bar-t i,#dp.edl .ed-anim.in .dp-split i{width:var(--w)}
#dp.edl .dp-bar-t{height:7px;background:color-mix(in srgb,var(--ink) 10%,transparent)}
#dp.edl .dp-bar b{font-weight:500}

.ed-sh[id]{scroll-margin-top:90px}
.ed-pnav{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));border-top:1px solid var(--line)}
.ed-pnav li{min-width:0;border-bottom:1px solid var(--line)}
.ed-pnav button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;width:100%;height:100%;padding:18px 18px 20px 0}
.ed-pnav button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ed-pnav .n{font:500 .74rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;color:var(--pa)}
.ed-pnav b{font-size:1.06rem;font-weight:600}
.ed-pnav .d{font-size:.92rem;line-height:1.4;color:var(--muted)}
.ed-pnav button:hover b{text-decoration:underline;text-underline-offset:4px}
.ed-refl{display:flex;flex-direction:column;gap:6px;max-width:var(--meas);padding:22px 24px;border:1px dashed var(--gl);border-radius:18px;color:var(--muted);font-size:.96rem;line-height:1.5}
.ed-refl em{font:500 .72rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--sc)}
.ed-refl b{color:var(--ink);font-size:1.08rem;font-weight:600}
@media (min-width:900px){.ed-pnav{grid-template-columns:repeat(var(--pn,6),minmax(0,1fr))}}

#dp.edl .ed-card b,#dp.edl .ed-cl,#dp.edl .ed-lim b{font-weight:540}
/* CORE v2: copertina coperta dal contenuto, colonna stretta, testi a tutta colonna */
#dp.edl{--edcol:960px}
.dp:has(#dp.edl){padding-top:var(--hdr,64px)}
#dp.edl .ed-hero{position:sticky;top:var(--hdr,64px);z-index:0;height:clamp(400px,calc(88vh - var(--hdr,64px)),820px)}
#dp.edl .ed-hero img{will-change:transform}

.ed-body{position:relative;z-index:1;width:100vw;margin-left:calc(50% - 50vw);padding:0 clamp(18px,4vw,56px) 1px;background:var(--bg)}
#dp.edl .ed-h1{font-weight:500;letter-spacing:-.035em;max-width:none}
#dp.edl .ed-h2{font-weight:500;letter-spacing:-.03em}
#dp.edl .ed-h3{font-weight:500;font-size:clamp(1.32rem,1.9vw,1.62rem);letter-spacing:-.015em}
#dp.edl .ed-p,#dp.edl .ed-lead,#dp.edl .ed-list{max-width:none;font-size:clamp(1.06rem,1.28vw,1.2rem);line-height:1.72;font-weight:360;color:var(--tx)}
#dp.edl .ed-lead{margin-top:clamp(20px,2.6vw,30px)}
#dp.edl .ed-list{padding-left:1.15em}
#dp.edl .ed-list li+li{margin-top:12px}
#dp.edl .ed-list b{font-weight:560;color:var(--ink)}
#dp.edl .ed-sec>.ed-p+.ed-p{margin-top:20px}
#dp.edl .ed-quote p{font-weight:520}
.dd2 svg{display:block;width:100%;height:auto;overflow:visible}
.dd2 .o{fill:none;stroke:var(--gl);stroke-width:1.3;stroke-dasharray:1;stroke-linejoin:round}
.dd2 .v{stroke:var(--gl);stroke-width:1;stroke-dasharray:4 6;opacity:0;transition:opacity .5s}
.dd2 text{font:500 15px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;opacity:0;transition:opacity .6s}
.dd2 .m text{font-size:12px;fill:var(--muted)}
.dd2 .n text{font-size:17px;font-weight:600;text-anchor:middle}
.dd2 .p1{fill:var(--c1)}.dd2 .p2{fill:var(--c2)}.dd2 .p3{fill:var(--c3)}.dd2 .p4{fill:var(--c4)}
.dd2 .on{opacity:1}
@media (max-width:700px){.dd2 .m text{font-size:15px}.dd2 .n text{font-size:22px}#dp.edl .ed-hero{height:clamp(320px,62vh,560px)}}

/* libro e casi studio */
.ed-bk-h{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.ed-bk-h .dp-card-l{margin:0!important}
.ed-bk-n{display:flex;gap:10px}
.ed-bk-a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.ed-bk-a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ed-bk-a:disabled{opacity:.35;cursor:default}
.ed-bk-a:focus-visible,.ed-bk-p:focus-visible,.ed-bk-d:focus-visible,.ed-cs-p:focus-visible,.ed-cs-tab:focus-visible,.ed-cs-pp:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ed-bk-r{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.ed-bk-p{all:unset;box-sizing:border-box;flex:0 0 auto;width:clamp(150px,22vw,240px);scroll-snap-align:start;cursor:zoom-in;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.ed-bk-p img{display:block;width:100%;height:auto}
.ed-bk-f{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.ed-bk-d{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;border:1px solid color-mix(in srgb,var(--pa) 60%,transparent);background:color-mix(in srgb,var(--pa) 14%,transparent);color:var(--ink);font:inherit;font-size:.98rem;cursor:pointer}
.ed-bk-d svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ed-bk-d small{color:var(--muted);font-size:.82rem}
.ed-bk-d:disabled{opacity:.6}
.ed-bk-m{font-size:.9rem;color:var(--muted)}
.ed-cs-st{display:grid}
.ed-cs-s{grid-area:1/1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s;border-radius:10px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.ed-cs-s.on{opacity:1;visibility:visible;transition:opacity .6s ease}
.ed-cs-p{all:unset;display:block;cursor:zoom-in;line-height:0}
.ed-cs-p img{display:block;width:100%;height:auto}
.ed-cs-b{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.ed-cs-t{display:flex;flex-wrap:wrap;gap:8px}
.ed-cs-tab,.ed-cs-pp{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;font-size:.9rem;cursor:pointer}
.ed-cs-tab.on{color:var(--ink);border-color:color-mix(in srgb,var(--sc) 60%,transparent);background:color-mix(in srgb,var(--sc) 12%,transparent)}
.ed-cs-pp{color:var(--ink)}
.ed-fig.paper .ed-fb{background:#FFE4AF;padding:clamp(14px,2.4vw,30px)}
.ed-fig.clear .ed-fb{background:var(--panel);padding:clamp(10px,2vw,24px)}
.ed-fig.small{max-width:420px;margin-left:auto;margin-right:auto}
.ed-fig.small figcaption{text-align:center;margin-left:auto;margin-right:auto}
.ed-fig.mid{max-width:760px;margin-left:auto;margin-right:auto}
.ed-fig.narrow{max-width:560px;margin-left:auto;margin-right:auto}
.ed-fig.narrow figcaption{text-align:center;margin-left:auto;margin-right:auto}
@media (prefers-reduced-motion:reduce){.ed-cs-s,.ed-cs-s.on{transition:none}}

.ed-pair .ed-fig.narrow{max-width:300px}
.ed-stats.hl{max-width:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,40px);padding:clamp(22px,3vw,36px);border-radius:18px;background:var(--panel)}
.ed-stats.hl b{color:var(--sc)}
.ed-stats.hl span{color:var(--tx);line-height:1.45}
@media (max-width:900px){.ed-stats.hl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.ed-stats.hl{grid-template-columns:minmax(0,1fr)}}
.ed-phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,32px);align-items:start}
.ed-fig.phone .ed-fb{border-radius:24px;background:transparent;box-shadow:0 12px 34px rgba(0,0,0,.22)}
.ed-fig.phone figcaption{text-align:center;margin-left:auto;margin-right:auto}
.ed-road{position:relative;padding-top:8px}
.ed-road-t{position:absolute;left:calc(12.5% );right:calc(12.5%);top:31px;height:2px;background:var(--line);overflow:hidden}
.ed-road-t i{position:absolute;inset:0;background:var(--sc);transform-origin:0 50%;transform:scaleX(0)}
.ed-road ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ed-road li{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.ed-road .n{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line);font:500 .8rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;color:var(--muted);position:relative;z-index:1;transition:background .4s,border-color .4s,color .4s}
.ed-road li.on .n{background:var(--sc);border-color:var(--sc);color:var(--pt)}
.ed-road b{max-width:14rem;font-size:clamp(1.02rem,1.4vw,1.16rem);font-weight:500;line-height:1.35;color:var(--tx);transition:color .4s}
.ed-road li.on b{color:var(--ink)}
@media (max-width:700px){.ed-phones{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ed-road-t{left:23px;right:auto;top:30px;bottom:30px;width:2px;height:auto}.ed-road-t i{transform-origin:50% 0;transform:scaleY(var(--p,0))!important}
 .ed-road ol{grid-template-columns:minmax(0,1fr);gap:22px}.ed-road li{flex-direction:row;text-align:left;align-items:center}}
@media (prefers-reduced-motion:reduce){.ed-road .n,.ed-road b{transition:none}}

.ed-panel.xl{width:min(1320px,calc(100vw - 32px));margin-left:50%;transform:translateX(-50%)}
.ed-pair.sm{max-width:680px;margin-left:auto;margin-right:auto}
.ej-s{overflow-x:auto;padding-bottom:6px}
.ej-s:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.ej-g{display:grid;grid-template-columns:96px repeat(var(--n),minmax(118px,1fr));min-width:1100px;column-gap:12px}
.ej-c{padding:12px 0;border-top:1px solid var(--line);font-size:.84rem;line-height:1.4;color:var(--tx)}
.ej-c ul{margin:0;padding-left:1em}.ej-c li+li{margin-top:5px}
.ej-rl{font:500 .7rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ej-ph{border-top:0;padding:0 0 8px;border-bottom:2px solid var(--pa);font-weight:600;color:var(--ink);font-size:.95rem}
.ej-act{font-weight:600;color:var(--ink)}
.ej-task{font-size:.8rem}
.ej-em{position:relative;height:150px;padding:0;color:var(--muted)}
.ej-em svg{position:absolute;inset:0;width:100%;height:100%}
.ej-dots{position:absolute;inset:0}
.ej-dot{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px}
.ej-dot i{width:12px;height:12px;border-radius:50%;background:var(--dc)}
.ej-dot b{font-size:.74rem;font-weight:500;color:var(--ink);white-space:nowrap}
.ed-block.cut .ed-fig.phone .ed-fb{box-shadow:none;background:transparent;border-radius:0}
.ed-block.cut .ed-fig.phone .ed-fb img{filter:drop-shadow(0 14px 28px rgba(0,0,0,.45))}
.ed-block.cut .ed-phones{gap:clamp(18px,3vw,44px)}

.ed-mock{display:grid;gap:clamp(36px,5vw,64px);padding:clamp(28px,4vw,52px) clamp(18px,3vw,40px)!important}
.ed-mt{margin:0 0 clamp(22px,3vw,36px);text-align:center;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:clamp(1rem,1.5vw,1.2rem);letter-spacing:.12em;color:var(--tx)}
.ed-mt b{font-weight:700;color:var(--ink)}
.ed-mr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,3vw,48px);max-width:820px;margin:0 auto}
.ed-mp{all:unset;cursor:zoom-in;display:block}
.ed-panel.ed-xlm{width:min(1320px,calc(100vw - 32px));margin-left:50%;transform:translateX(-50%)}
@media (min-width:1100px){.ed-mock{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,5vw,80px)}.ed-mr{max-width:none}}
.ed-mp:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.ed-mp img{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 26px rgba(0,0,0,.4))}
.ed-scr{display:grid;gap:clamp(28px,4vw,48px)}
.ed-br{border-radius:14px;overflow:hidden;background:#1d1d22;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.ed-br-bar{display:flex;gap:7px;padding:11px 14px;background:#2a2a31}
.ed-br-bar i{width:11px;height:11px;border-radius:50%;background:#55555f}
.ed-vp{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.ed-vp:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ed-vp img{display:block;width:100%;height:auto}
.ed-br .ed-vp{aspect-ratio:16/10}
.ed-sp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.4vw,32px)}
.ed-ph{margin:0}
.ed-ph .ed-vp{aspect-ratio:9/19;border:7px solid #111;border-radius:30px;background:#111;box-shadow:0 14px 30px rgba(0,0,0,.35);scrollbar-width:none}
.ed-ph .ed-vp::-webkit-scrollbar{display:none}
.ed-ph figcaption{margin-top:10px;font-size:.8rem;color:var(--muted);text-align:center}
.ed-scr-cap{margin:0;font-size:.85rem;color:var(--muted)}
@media (max-width:700px){.ed-sp{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ed-areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.ed-area{background:var(--panel);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.ed-area-ph{aspect-ratio:4/3;overflow:hidden}
.ed-area-ph img{display:block;width:100%;height:100%;object-fit:cover}
.ed-area-b{padding:16px 18px 18px;display:grid;gap:12px}
.ed-area-n{margin:0;font:500 .7rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--pa)}
.ed-area-r{display:grid;gap:3px}
.ed-area-c{margin:0;font-weight:600;color:var(--ink);font-size:.92rem;line-height:1.35}
.ed-area-o{margin:0;font-size:.84rem;color:var(--tx);line-height:1.4}
.ed-area-o.no{color:var(--muted);font-style:italic}
@media (max-width:900px){.ed-areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ed-areas{grid-template-columns:minmax(0,1fr)}}
.ed-sols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
.ed-sol{background:var(--panel);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.ed-sol-ph{aspect-ratio:4/3;overflow:hidden}
.ed-sol-ph img{display:block;width:100%;height:100%;object-fit:cover}
.ed-sol-b{padding:20px 22px 22px;display:grid;gap:10px}
.ed-sol-h{margin:0;font-size:1.25rem;color:var(--ink)}
.ed-sol-t{margin:0;font-size:.92rem;line-height:1.55;color:var(--tx)}
.ed-sol-n{margin:6px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.ed-sol-n dt{font-size:1.35rem;font-weight:700;color:var(--pa)}
.ed-sol-n dd{margin:2px 0 0;font-size:.78rem;color:var(--muted);line-height:1.35}
.ed-sol-f{margin:0;font-size:.76rem;color:var(--muted)}
@media (max-width:760px){.ed-sols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
 .ed-areas,.ed-sols{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-left:calc(-1*var(--gut,20px));margin-right:calc(-1*var(--gut,20px));padding:0 var(--gut,20px) 8px;scrollbar-width:none}
 .ed-areas::-webkit-scrollbar,.ed-sols::-webkit-scrollbar{display:none}
 .ed-area,.ed-sol{flex:0 0 82%;scroll-snap-align:center}
 .ed-area-ph{aspect-ratio:16/9}.ed-sol-ph{aspect-ratio:16/9}
 .ed-stats.hl{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ed-fig.portrait video,.ed-vf.portrait video{max-height:72vh;width:auto;max-width:100%;margin:0 auto;display:block}
 .ed-fig img{max-height:80vh;object-fit:contain}
}
.xe h3 a{color:inherit;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s}
.xe h3 a:hover,.xe h3 a:focus-visible{background-size:100% 1px}
.rmeta{margin:10px 0 0;font-size:.85rem;color:var(--muted)}
.panel.proj .art.img img{transform:none!important}
.altm{display:inline-block;margin-top:6px;font-size:.85rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.altm[hidden]{display:none}

/* audit: aree cliccabili dei punti di navigazione, contrasto delle etichette, overflow da telefono */
#dots button,.dots button{position:relative}
#dots button::after,.dots button::after{content:"";position:absolute;inset:-11px}

[data-theme="dark"] #dp .ed-k,[data-theme="dark"] #dp span.n{filter:brightness(1.15)}
.dp-per .h4l{margin:12px 0 6px}
@media (max-width:700px){.ed-areas,.ed-sols{margin-left:0;margin-right:0;padding-left:0;padding-right:0}}

/* per chi seleziona: scorciatoie, ruolo nelle schede, niente cursore personalizzato, link comodi da telefono */
.hero-cta{display:flex;gap:22px;justify-content:center;margin:22px 0 0;position:relative;z-index:2}
.hero-cta a{font-size:.95rem;text-decoration:none;padding:6px 0;background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;transition:opacity .2s}
.hero-cta a:hover{opacity:.7}
.abt .rmeta{color:var(--tx)}
.pg-r{margin:6px 0 0;font-size:.82rem;line-height:1.4;color:var(--tx)}

/* nome su una riga e cursore piu' discreto */
#name{white-space:nowrap;font-size:min(9.4vw,8.4rem)!important;line-height:1}
.cursor{display:grid!important;width:12px;height:12px;left:-6px;top:-6px;opacity:.55;box-shadow:none}
.cursor.big{width:40px;height:40px;margin:-14px 0 0 -14px;opacity:.8}
.cursor.txt{opacity:.18}
.cursor.lab{width:64px;height:64px;margin:-26px 0 0 -26px;opacity:.92;font-size:.75rem}
@media (pointer:coarse){.cursor{display:none!important}}
@media (max-width:700px){.rlinks a,a.ul,.altm,.cpy,.hero-cta a,footer nav a{display:inline-flex;align-items:center;min-height:44px}}

/* video automatici: pulsante pausa discreto */
.ed-vw{position:relative}
.ed-vbtn{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(10,10,12,.6);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .2s;z-index:2}
.ed-vw:hover .ed-vbtn,.ed-vbtn:focus-visible,.ed-vbtn[aria-label^="Play"]{opacity:1}
@media (hover:none){.ed-vbtn{opacity:.85}}
.ed-fig.dark .ed-fb{background:#183d5a!important}
/* About: How I work */
.hw{position:relative;padding:clamp(64px,9vw,120px) 0 0}
.hw-in{padding:0 clamp(20px,5vw,80px);max-width:calc(1240px + 2*clamp(20px,5vw,80px))}
.hw-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hw-head .bd-t{margin:0}
.hw-lead{margin:0;max-width:30rem;color:var(--muted);font-size:1rem;line-height:1.5}
.hw-l{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);counter-reset:hw;position:relative}
.hw-l::before{content:"";position:absolute;left:0;right:0;top:-18px;height:1px;background:linear-gradient(90deg,transparent,var(--line) 8%,var(--line) 92%,transparent)}
.hw-c{position:relative;padding:clamp(22px,2.4vw,30px);border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;gap:12px;transition:border-color .3s,transform .3s}
.hw-c:hover{border-color:color-mix(in srgb,var(--ink) 40%,transparent);transform:translateY(-3px)}
.hw-c .cd{animation:none}
.hw-c::before{content:"";position:absolute;top:-22px;left:clamp(22px,2.4vw,30px);width:9px;height:9px;border-radius:50%;background:var(--bg);border:1.5px solid var(--muted)}
.hw-k{margin:0 0 4px;font:500 .72rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hw-n{font-size:clamp(2.4rem,3.4vw,3.2rem);font-weight:800;line-height:1;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--ink) 55%,transparent)}
.hw-i{width:34px;height:34px;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.hw-h{margin:0;font-size:1.12rem;font-weight:700;color:var(--ink)}
.hw-c p{margin:0;font-size:.93rem;line-height:1.55;color:var(--tx)}
@media (max-width:980px){.hw-l{grid-template-columns:repeat(2,minmax(0,1fr))}.hw-l::before,.hw-c::before{display:none}}
@media (max-width:560px){.hw-l{grid-template-columns:minmax(0,1fr)}.hw-head{display:block}.hw-lead{margin-top:10px}}
@media (prefers-reduced-motion:reduce){.hw-c{transition:none}.hw-c:hover{transform:none}}
.ct-in{margin:-4px 0 18px;color:var(--tx);font-size:.98rem;line-height:1.5}
/* schede iniziali: Output su tutta la riga; link ai progetti in How I work; salta al contenuto; iniziali delle personas */
.ed-meta div:nth-child(5){grid-column:1/-1}
.hw-a{margin-top:auto;padding-top:10px;font-size:.85rem;color:var(--ink);text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s;align-self:flex-start}
.hw-a:hover,.hw-a:focus-visible{background-size:100% 1px}
@media (max-width:700px){.hw-a{display:inline-flex;align-items:center;min-height:44px;padding-top:0}}
.skip{position:fixed;left:12px;top:-60px;z-index:999;padding:10px 14px;border-radius:8px;background:var(--ink);color:var(--bg);text-decoration:none;font-size:.9rem;transition:top .2s}
.skip:focus{top:12px}
#dp .dp-av{background:color-mix(in srgb,var(--pa) 78%,#000);border-color:color-mix(in srgb,var(--pa) 78%,#000)}
.ph.has{background:none;overflow:hidden}
.ph.has img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;backface-visibility:hidden;transform:translateZ(0)}

/* sottotitoli inglesi del film di EPAS */
.ed-sub{position:absolute;left:50%;bottom:clamp(48px,9%,64px);transform:translateX(-50%);max-width:86%;padding:6px 12px;border-radius:6px;background:rgba(0,0,0,.72);color:#fff;font-size:clamp(.82rem,1.6vw,1.05rem);line-height:1.4;text-align:center;pointer-events:none;opacity:0;transition:opacity .15s;z-index:2}
.ed-sub.on{opacity:1}
.ed-sub[hidden]{display:none}
.ed-cc{position:absolute;top:10px;right:10px;z-index:3;padding:4px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.55);color:#fff;font:600 .72rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;cursor:pointer}
.ed-cc[aria-pressed="false"]{opacity:.6;text-decoration:line-through}
.hpot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* indice flottante */
.ed-toc{position:fixed;left:clamp(14px,2.6vw,40px);bottom:calc(env(safe-area-inset-bottom,0px) + clamp(14px,2.6vw,36px));z-index:30;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .3s,transform .3s}
.ed-toc.show{opacity:1;pointer-events:auto;transform:none}
.ed-tb{display:grid;place-items:center;width:54px;height:54px;border-radius:15px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 86%,var(--ink));color:var(--ink);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.ed-tb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ed-tb circle{fill:currentColor;stroke:none}
.ed-tb:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ed-tl{position:absolute;left:0;bottom:66px;min-width:230px;margin:0;padding:10px;list-style:none;border-radius:16px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 90%,var(--ink));box-shadow:0 18px 50px rgba(0,0,0,.3)}
.ed-tl a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:.98rem}
.ed-tl a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sc,var(--gl));opacity:.45}
.ed-tl li.on a{color:var(--ink);background:var(--panel2)}
.ed-tl li.on a::before{opacity:1}
.ed-tl a:hover{color:var(--ink)}
.ed-tl a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
/* comparsa del testo */
.ed-rv{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.ed-rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ed-rv{opacity:1;transform:none;transition:none}.ed-toc{transition:none}}
.ed-nav{margin-top:clamp(96px,12vw,160px)}
@media (max-width:900px){.ed-dots{grid-template-columns:minmax(0,1fr)}.ed-dc{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 18px}.ed-dc .ed-dm{grid-column:1/-1}.ed-cards{grid-template-columns:repeat(min(var(--n,3),2),minmax(0,1fr))}}
@media (max-width:700px){.ed-meta,.ed-compare,.ed-lim,.ed-pair,.ed-grid{grid-template-columns:minmax(0,1fr)}.ed-hero{height:clamp(240px,46vh,420px)}.ed-dc{display:block}}
@media (max-width:520px){.ed-cards{grid-template-columns:minmax(0,1fr)}.ed-meta{gap:22px}.ed-h1{max-width:none}}