/* ============================================================
   SITO LUIGI MASSARO — stile unico per tutte le pagine
   Colori e font si cambiano solo qui sotto, in :root
   ============================================================ */
/* caratteri ospitati sul sito: niente richieste a Google, più veloce e più rispettoso della privacy */
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations"),url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-latin-900-normal.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Special Elite";src:url("../fonts/special-elite-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url("../fonts/caveat-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Metropolis";src:url("../fonts/metropolis-medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Metropolis";src:url("../fonts/metropolis-semibold.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --carta:#FAFAF7;      /* carta dei ritagli */
  --fondo:#E7E6E2;      /* fondo della pagina */
  --inchiostro:#111111; /* testo */
  --grigio:#6B6B66;     /* fonti e righe piccole */
  --testo-2:#2B2B29;    /* testo secondario */
  --rosso:#D62828;      /* l'unico colore d'accento */
  --rosso-chiaro:#FF6B6B; /* rosso leggibile sul vetro scuro */
  --giallo:#FFE14D;     /* pennarello */
  --riga:#D5DAE1;       /* righe del quaderno */
  --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Playfair Display",Georgia,serif;
  --macchina:"Special Elite","Courier New",monospace;
  --numeri:"Metropolis","Montserrat",sans-serif;
  --frenata:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--inchiostro);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;background-image:url("../img/grana.png");background-size:220px;opacity:.35;pointer-events:none;z-index:0}
a{color:var(--inchiostro)}
a:hover{color:var(--rosso)}
img,video{max-width:100%}

.wrap{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:0 clamp(16px,3vw,40px)}
.sezione{padding-bottom:clamp(70px,9vw,130px)}
.rosso{color:var(--rosso)}

/* ---------- carta strappata ---------- */
.torn{clip-path:polygon(0% .38%,2.9% .87%,5.9% .59%,8.8% .97%,11.8% 1%,14.7% .1%,17.6% .02%,20.6% 1.34%,23.5% .41%,26.5% .37%,29.4% 1.59%,32.4% .75%,35.3% 1.34%,38.2% .76%,41.2% 1.02%,44.1% .24%,47.1% 1.02%,50% 1.39%,52.9% .84%,55.9% 1.19%,58.8% 1.07%,61.8% .1%,64.7% 1.21%,67.6% .95%,70.6% .48%,73.5% .05%,76.5% 1.38%,79.4% .76%,82.4% 1.15%,85.3% 1.41%,88.2% 1.14%,91.2% 1.47%,94.1% .63%,97.1% 1.28%,100% .71%,99.96% 12%,99.45% 30%,99.96% 48%,99.35% 66%,99.7% 84%,100% 98.56%,97.1% 99.84%,94.1% 98.22%,91.2% 98.46%,88.2% 99.89%,85.3% 99.49%,82.4% 98.97%,79.4% 98.5%,76.5% 99.62%,73.5% 98.72%,70.6% 98.98%,67.6% 98.37%,64.7% 98.26%,61.8% 98.45%,58.8% 99.71%,55.9% 98.79%,52.9% 98.22%,50% 98.46%,47.1% 98.33%,44.1% 98.77%,41.2% 98.37%,38.2% 98.95%,35.3% 98.95%,32.4% 99.37%,29.4% 99.31%,26.5% 99.09%,23.5% 99.46%,20.6% 98.87%,17.6% 99.21%,14.7% 98.26%,11.8% 99.61%,8.8% 99.76%,5.9% 99.82%,2.9% 98.42%,0% 98.32%,.79% 84%,.69% 66%,.26% 48%,.14% 30%,.37% 12%)}
.ombra{filter:drop-shadow(0 10px 16px rgba(0,0,0,.16)) drop-shadow(0 2px 3px rgba(0,0,0,.12))}
.carta{position:relative;background:var(--carta)}
.carta::after{content:"";position:absolute;inset:0;background-image:url("../img/grana.png");background-size:220px;opacity:.28;pointer-events:none}
.carta > *{position:relative;z-index:1}

/* ---------- pennarello giallo ---------- */
.pennarello{background-image:linear-gradient(transparent 52%,var(--giallo) 52%,var(--giallo) 90%,transparent 90%);background-repeat:no-repeat;background-size:0% 100%}
.pennarello.visto{animation:pennarello 1.3s .2s cubic-bezier(.65,0,.35,1) forwards}
@keyframes pennarello{to{background-size:100% 100%}}

/* ---------- timbri rossi ---------- */
.timbro{font-family:var(--macchina);color:var(--rosso);border:2px solid var(--rosso);border-radius:4px;padding:6px 12px;letter-spacing:.08em;text-transform:uppercase;display:inline-block;transform:rotate(var(--r,0deg))}
.timbro.entra{animation:timbro .7s .3s var(--frenata) both}
@keyframes timbro{from{opacity:0;transform:scale(1.5) rotate(var(--r,0deg))}to{opacity:1;transform:scale(1) rotate(var(--r,0deg))}}
.timbro-piccolo{font-size:11px;padding:3px 8px}
a.timbro{text-decoration:none;transition:transform .35s var(--frenata),background .35s var(--frenata)}
a.timbro:hover{transform:rotate(0deg) scale(1.04);background:rgba(214,40,40,.06)}

/* ---------- header ---------- */
.head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px 28px;padding:18px 0;border-bottom:2px solid var(--inchiostro)}
.marchio{font-weight:900;font-size:19px;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;justify-self:start}
#orologio{font-family:var(--macchina);font-size:14px;color:#3B3B38;font-variant-numeric:tabular-nums;justify-self:center}
.head nav{display:flex;gap:22px;flex-wrap:wrap;justify-content:flex-end;font-size:14px;text-transform:uppercase;letter-spacing:.04em;justify-self:end}
.head nav a{color:var(--inchiostro);text-decoration:none;font-weight:700;padding:12px 2px}
.head nav a:hover,.head nav a[aria-current]{color:var(--rosso)}

/* ---------- titoli ---------- */
.titolo-sezione{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:34px}
.titolo-sezione h2{margin:0;font-family:var(--serif);font-weight:900;font-size:clamp(30px,3.2vw,44px);line-height:1}
.titolo-sezione .carta{padding:10px 22px 12px}
.macchina{font-family:var(--macchina);font-size:14px;color:#3B3B38}
.titoletto{margin:0 0 30px;font-weight:900;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.fonte{font-family:var(--serif);font-size:11px;letter-spacing:.12em;color:var(--grigio);text-transform:uppercase}

/* ============================================================
   HOME
   ============================================================ */
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(48px,7vw,96px) 0 clamp(60px,8vw,120px)}
.hero-testo{display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.hero h1{margin:0;font-weight:900;font-size:clamp(38px,4.8vw,72px);line-height:.95;letter-spacing:-.02em;text-transform:uppercase}
.sotto{margin:0;font-weight:600;font-size:17px;line-height:1.55;max-width:46ch;color:var(--testo-2)}
.hero-foto{position:relative;padding:20px 10px 44px}
.hero-foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 58%;display:block}
.etichetta-ritaglio{position:absolute;left:-18px;bottom:8px;transform:rotate(-4deg)}
.etichetta-ritaglio .carta{padding:10px 18px 12px;display:flex;flex-direction:column;gap:2px}
.etichetta-ritaglio .fonte{font-size:10px}
.testata{font-family:var(--serif);font-weight:900;font-size:28px;line-height:1;text-decoration:underline;text-decoration-color:var(--rosso);text-decoration-thickness:3px;text-underline-offset:5px}

/* lavori */
.griglia-lavori{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 26px}
.lavoro{margin:0;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit}
.lavoro.largo{grid-column:span 2}
.lavoro .carta{padding:10px}
.lavoro img{width:100%;height:auto;aspect-ratio:9/14;object-fit:cover;display:block}
.lavoro.largo img{aspect-ratio:16/9}
.lavoro .didascalia{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nome-lavoro{font-weight:800;font-size:16px;text-transform:uppercase;line-height:1.15}
.lavoro .numero{font-family:var(--numeri);font-weight:600;font-size:15px;color:var(--rosso);font-variant-numeric:tabular-nums}
.lavoro .ombra{transition:transform .5s var(--frenata),filter .5s var(--frenata)}
.lavoro:hover .ombra{transform:rotate(0deg) scale(1.03)!important;filter:drop-shadow(0 18px 24px rgba(0,0,0,.2)) drop-shadow(0 3px 4px rgba(0,0,0,.12))}
.lavoro:hover .nome-lavoro{color:var(--rosso)}

/* case study in evidenza */
.case{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:center}
.ritaglio{padding:clamp(30px,4vw,56px) clamp(26px,4vw,60px)}
.ritaglio-dentro{display:flex;flex-direction:column;gap:18px}
.ritaglio .fonte{font-size:12px;border-bottom:1px solid #CFCFCA;padding-bottom:10px}
.ritaglio h2{margin:0;font-family:var(--serif);font-weight:900;font-size:clamp(30px,3.6vw,54px);line-height:1.02;letter-spacing:-.01em}
.ritaglio p{margin:0;font-family:var(--serif);font-size:19px;line-height:1.5;max-width:46ch}
.link-forte{align-self:flex-start;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.05em;text-underline-offset:5px;padding:12px 0}
.colonna-numero{display:flex;flex-direction:column;align-items:center;gap:26px}
.timbro-tondo{width:260px;height:260px;border-radius:50%;border:4px solid var(--rosso);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transform:rotate(-9deg);color:var(--rosso);position:relative;backface-visibility:hidden;will-change:transform;transition:transform .6s var(--frenata)}
.timbro-tondo::before{content:"";position:absolute;inset:8px;border:2px solid var(--rosso);border-radius:50%;pointer-events:none}
.timbro-tondo strong{font-family:var(--numeri);font-weight:600;font-size:70px;line-height:.9;letter-spacing:-.03em}
.timbro-tondo span{font-family:var(--macchina);font-size:15px;letter-spacing:.14em;text-transform:uppercase}
.colonna-numero:hover .timbro-tondo{transform:rotate(-3deg) scale(1.04)}
.capitoli{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-family:var(--macchina);font-size:15px}

/* post-it del quaderno */
.griglia-quaderno{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.articolo{text-decoration:none;color:inherit;display:block;transform:rotate(var(--r,0deg));transition:transform .45s var(--frenata),filter .45s var(--frenata)}
.articolo .carta{padding:24px 22px 28px;display:flex;flex-direction:column;gap:14px;min-height:230px}
.articolo h3{margin:0;font-family:var(--serif);font-weight:700;font-size:24px;line-height:1.12}
.articolo .estratto{margin:auto 0 0;font-size:13.5px;font-weight:500;line-height:1.45;color:var(--testo-2)}
.articolo.in-arrivo{opacity:.75}
.articolo.in-arrivo .carta{background:#F1F0EC}
a.articolo:hover{transform:translateY(-6px) rotate(0deg) scale(1.03);filter:drop-shadow(0 18px 22px rgba(0,0,0,.2)) drop-shadow(0 3px 4px rgba(0,0,0,.12))}
a.articolo:hover h3{color:var(--rosso)}

/* clienti (pallini) */
.clienti{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:34px 20px}
.cliente{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.pallino{width:132px;height:132px;border-radius:50%;background:#1C1C1C;border:4px solid #FFFFFF;box-shadow:0 8px 20px rgba(0,0,0,.18);overflow:hidden;transition:transform .45s var(--frenata)}
.pallino img{width:100%;height:100%;object-fit:cover;display:block}
.cliente:hover .pallino{transform:scale(1.08)}
.nome-cliente{font-weight:900;font-size:15px;text-transform:uppercase;line-height:1.1}
.indirizzo{font-family:var(--macchina);font-size:12.5px;color:#3B3B38;line-height:1.4}
.cliente a.piccolo{font-size:12.5px;font-weight:700;text-underline-offset:3px;padding:4px 0}

/* servizi */
.servizi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid var(--inchiostro)}
.servizio{padding:22px 24px 22px 0;display:flex;flex-direction:column;gap:10px}
.servizio .num{font-family:var(--macchina);color:var(--rosso);font-size:14px}
.servizio h3{margin:0;font-weight:900;font-size:21px;text-transform:uppercase}
.servizio p{margin:0;font-weight:500;font-size:15px;line-height:1.5;color:var(--testo-2)}

/* chi sono */
.chi{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:start}
.chi-foto{position:sticky;top:24px}
.chi-foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;display:block}
.chi-testo{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.chi-grande{margin:0;font-weight:800;font-size:clamp(26px,2.8vw,40px);line-height:1.1;letter-spacing:-.01em;text-transform:uppercase}
.chi-testo p:not(.chi-grande){margin:0;font-weight:500;font-size:16.5px;line-height:1.6;max-width:56ch;color:var(--testo-2)}

/* contatti e footer */
.contatti{padding:clamp(40px,6vw,90px) 0 clamp(70px,9vw,120px);border-top:2px solid var(--inchiostro);display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.contatti h2{margin:0;font-weight:900;font-size:clamp(38px,8.4vw,124px);line-height:.88;letter-spacing:-.03em;text-transform:uppercase}
.contatti .timbro{font-size:clamp(16px,1.8vw,22px);padding:12px 20px;text-transform:none;letter-spacing:.04em}
.foot{display:flex;justify-content:space-between;align-items:flex-start;gap:14px 26px;border-top:1px solid #BDBDB8;padding:16px 0 30px;font-family:var(--macchina);font-size:12px;letter-spacing:.04em;color:#3B3B38}
.foot > span{flex:1;display:flex;flex-direction:column;gap:5px}
.foot .centro{text-align:center}
.foot .fine{text-align:right}

/* ============================================================
   QUADERNO — la pagina a righe dei case study
   ============================================================ */
.foglio{
  position:relative;margin:clamp(40px,6vw,80px) auto clamp(60px,8vw,110px);max-width:1180px;
  background-color:var(--carta);
  background-image:
    linear-gradient(90deg,transparent calc(var(--margine) - 2px),rgba(214,40,40,.55) calc(var(--margine) - 2px),rgba(214,40,40,.55) var(--margine),transparent var(--margine)),
    radial-gradient(circle at 26px 50%,var(--fondo) 0 8px,rgba(0,0,0,.12) 8.5px,transparent 9.5px),
    linear-gradient(transparent calc(var(--rigo) - 1px),var(--riga) calc(var(--rigo) - 1px),var(--riga) var(--rigo));
  background-size:100% 100%,52px 76px,100% var(--rigo);
  background-repeat:no-repeat,repeat-y,repeat;
  background-position:0 0,0 30px,0 var(--inizio-righe);
  --rigo:32px;--margine:86px;--inizio-righe:0px;
  padding:clamp(36px,5vw,72px) clamp(20px,5vw,72px) clamp(48px,6vw,90px) calc(var(--margine) + clamp(20px,3vw,44px));
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.14)) drop-shadow(0 2px 3px rgba(0,0,0,.1));
}
.foglio::before,.foglio::after{content:"";position:absolute;left:0;right:0;height:14px;background:var(--carta);
  clip-path:polygon(0% 100%,0.0% 38.5%,1.43% 47.6%,2.86% 78.6%,4.29% 39.6%,5.71% 43.2%,7.14% 49.9%,8.57% 15.7%,10.0% 43.5%,11.43% 53.5%,12.86% 67.4%,14.29% 8.0%,15.71% 25.8%,17.14% 7.7%,18.57% 68.8%,20.0% 58.9%,21.43% 3.6%,22.86% 83.5%,24.29% 82.0%,25.71% 55.6%,27.14% 52.3%,28.57% 13.4%,30.0% 1.3%,31.43% 44.9%,32.86% 5.1%,34.29% 16.2%,35.71% 20.6%,37.14% 2.6%,38.57% 39.4%,40.0% 37.4%,41.43% 71.6%,42.86% 44.1%,44.29% 54.4%,45.71% 42.5%,47.14% 56.3%,48.57% 38.9%,50.0% 23.6%,51.43% 84.8%,52.86% 84.6%,54.29% 71.4%,55.71% 60.2%,57.14% 26.8%,58.57% 19.5%,60.0% 24.6%,61.43% 6.0%,62.86% 65.1%,64.29% 34.0%,65.71% 72.0%,67.14% 32.9%,68.57% 81.4%,70.0% 72.0%,71.43% 0.0%,72.86% 17.8%,74.29% 77.4%,75.71% 39.9%,77.14% 83.3%,78.57% 33.8%,80.0% 6.2%,81.43% 53.5%,82.86% 66.2%,84.29% 22.9%,85.71% 7.4%,87.14% 28.3%,88.57% 81.9%,90.0% 64.4%,91.43% 10.0%,92.86% 20.9%,94.29% 8.6%,95.71% 5.1%,97.14% 67.7%,98.57% 15.1%,100.0% 47.5%,100% 100%)}
.foglio::before{top:-13px}
.foglio::after{bottom:-13px;transform:scaleY(-1)}

.intestazione{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:start;padding-bottom:32px}
.intestazione .fonte{display:block;margin-bottom:14px;font-size:12px}
.intestazione h1{margin:0;font-family:var(--serif);font-weight:900;font-size:clamp(34px,4.6vw,66px);line-height:1.02;letter-spacing:-.01em;max-width:18ch}
.scheda{display:flex;flex-wrap:wrap;gap:8px 22px;margin:24px 0 0;padding:0;list-style:none;font-family:var(--macchina);font-size:14px;color:#3B3B38}
.scheda b{font-weight:400;color:var(--rosso)}
.intestazione .pallino{width:118px;height:118px}

.foglio p.testo,.foglio .testo p{font-size:17px;line-height:32px;margin:0 0 32px;max-width:62ch;font-weight:500;color:var(--testo-2)}
.foglio h2.capitolo-titolo{margin:0 0 20px;font-weight:900;font-size:clamp(26px,3vw,40px);line-height:1.05;letter-spacing:-.01em;text-transform:uppercase}
.foglio h3{margin:0 0 8px;font-weight:900;font-size:15px;letter-spacing:.08em;text-transform:uppercase}

.capitolo{display:grid;grid-template-columns:minmax(240px,290px) minmax(0,1fr);column-gap:clamp(56px,9vw,130px);row-gap:28px;align-items:start;padding:clamp(40px,5vw,64px) 0;border-top:1px dashed #C9C7C0}
.capitolo .analisi{max-width:620px}

/* la scena: link sopra, telefono vicino alla riga rossa; i pannelli escono da dietro il telefono
   verso sinistra (anche sopra la riga rossa) e verso il basso */
.scena{position:relative}
.scena .link-originale{display:block;text-align:center;margin:0 0 12px}
.scena > .telefono,.scena > .foto-scena{position:relative;z-index:3}
.vetri-lato{position:absolute;z-index:4;top:110px;right:calc(100% - 22px);display:flex;flex-direction:column;gap:12px}
.vetri-sotto{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px;position:relative;z-index:1}
.telefono{position:relative;border-radius:36px;background:#0E0E0F;padding:9px;box-shadow:0 30px 60px rgba(0,0,0,.28),0 4px 8px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.08)}
.telefono video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:28px;display:block;background:#1a1a1a;cursor:pointer}
.telefono .audio,.telefono .play{position:absolute;z-index:3;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(20,20,22,.42);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:inset 1px 1px 0 rgba(255,255,255,.3),0 10px 24px rgba(0,0,0,.3)}
.telefono .audio{right:20px;top:20px;width:44px;height:44px}
.telefono .audio svg{width:20px;height:20px}
.telefono .play{left:50%;top:50%;width:76px;height:76px;transform:translate(-50%,-50%);transition:opacity .4s var(--frenata),transform .5s var(--frenata)}
.telefono .play svg{width:30px;height:30px;margin-left:4px}
.telefono .play:hover{transform:translate(-50%,-50%) scale(1.07)}
.telefono.in-play .play{opacity:0;transform:translate(-50%,-50%) scale(.8);pointer-events:none}
.foto-scena .carta{padding:9px}
.foto-scena img{width:100%;display:block;object-fit:cover;cursor:zoom-in}
.link-originale{display:inline-block;font-family:var(--macchina);font-size:13px;color:#3B3B38;padding:6px 0}

.vetro{
  position:relative;width:136px;padding:12px 10px 13px;border-radius:20px;color:#FFFFFF;
  background:rgba(22,22,24,.58);-webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid rgba(255,255,255,.22);box-shadow:0 16px 34px rgba(0,0,0,.28),inset 1px 1px 0 rgba(255,255,255,.3);
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;overflow:hidden;
}
.vetro::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(110% 60% at 0% 0%,rgba(255,255,255,.18),rgba(255,255,255,0) 50%);pointer-events:none}
.vetro::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 65%) 0 0/260% 100% no-repeat;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:riflesso 7s linear infinite;pointer-events:none}
@keyframes riflesso{from{background-position:160% 0}to{background-position:-160% 0}}
.vetro > *{position:relative;z-index:1}
.vetro .cifra{font-family:var(--numeri);font-weight:600;font-size:30px;line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums;display:inline-block}
.vetro .barra{width:38px;height:3px;border-radius:2px;background:#E03131;transform:scaleX(0);transform-origin:center}
.vetro .etichetta{font-weight:700;font-size:14.5px;line-height:1.28}
.vetro .etichetta em{font-style:normal;color:var(--rosso-chiaro)}
/* escono da dietro il telefono: quelli di lato scivolano verso la riga rossa, quelli sotto scendono */
.js .vetri-lato .vetro{opacity:0;transform:translateX(110px) scale(.8)}
.js .vetri-sotto .vetro{opacity:0;transform:translateY(-70px) scale(.86)}
.js .vetro{transition:opacity .9s var(--frenata),transform 1.2s var(--frenata);transition-delay:var(--d,0s)}
.js .vetri-lato .vetro.visto,.js .vetri-sotto .vetro.visto{opacity:1;transform:none}
.js .vetro .cifra{filter:blur(8px);transform:scale(.9);transition:filter 1.2s var(--frenata),transform 1.2s var(--frenata)}
.js .vetro.visto .cifra{filter:blur(0);transform:none;transition-delay:calc(var(--d,0s) + .2s)}
.vetro.visto .barra{transform:scaleX(1);transition:transform .9s var(--frenata);transition-delay:calc(var(--d,0s) + 1.4s)}

/* postilla: nota a margine a tutta larghezza, fa da cornice prima del video successivo.
   Si apre da destra verso sinistra quando arriva sullo schermo */
.postilla{grid-column:1 / -1;margin:6px 0 0;padding:16px 0 18px;border-top:1px dashed rgba(214,40,40,.6);border-bottom:1px dashed rgba(214,40,40,.6);display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 22px;align-items:baseline}
.postilla .postilla-etichetta{font-family:var(--macchina);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--rosso)}
.postilla p{margin:0;font-family:var(--macchina);font-size:15px;line-height:27px;color:#2B2B29}
.js .postilla{clip-path:inset(0 0 0 100%);transition:clip-path 1.5s var(--frenata)}
.js .postilla.visto{clip-path:inset(0 0 0 0)}
.postilla p span{background:linear-gradient(transparent 50%,rgba(255,225,77,.75) 50%,rgba(255,225,77,.75) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}

.leve{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 30px}
.leve .timbro{font-size:12px;padding:4px 10px}
.analisi{display:flex;flex-direction:column}
.analisi ol{margin:0 0 32px;padding:0 0 0 22px;font-size:17px;line-height:32px;font-weight:500;color:var(--testo-2);max-width:60ch}
.analisi ol li::marker{font-family:var(--macchina);color:var(--rosso)}
.analisi strong{color:var(--inchiostro);font-weight:800}

.galleria{display:flex;flex-wrap:wrap;gap:22px;margin:10px 0 32px}
.galleria figure{margin:0;flex:1 1 220px;max-width:340px}
.galleria .carta{padding:8px}
.galleria img{width:100%;display:block;cursor:zoom-in}
.galleria figcaption{font-family:var(--macchina);font-size:12.5px;color:#3B3B38;padding-top:8px}

.lezione{margin-top:20px;padding-top:40px;border-top:2px solid var(--inchiostro)}
.lezione p{font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);line-height:1.3;margin:0 0 28px;max-width:30ch}
.navigazione-case{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:6px 0 40px}
.navigazione-case a{font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.05em;text-underline-offset:5px;padding:12px 0}

/* indice del quaderno */
.quaderno-testa{padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,70px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px;align-items:end}
.quaderno-testa h1{margin:0;font-family:var(--serif);font-weight:900;font-size:clamp(48px,7vw,104px);line-height:.95}
.quaderno-testa p{margin:0;font-weight:600;font-size:17px;line-height:1.6;color:var(--testo-2);max-width:44ch}

/* ============================================================
   ANIMAZIONI — partenza morbida, frenata lunga, niente rimbalzi
   ============================================================ */
.js .appare{opacity:0;transform:translateY(30px);transition:opacity .9s var(--frenata),transform 1.1s var(--frenata);transition-delay:var(--d,0s)}
.js .appare.visto{opacity:1;transform:none}
.js .griglia-quaderno .articolo{opacity:0}
.js .griglia-quaderno.visto .articolo{opacity:1;animation:attacca .75s var(--frenata) backwards;animation-delay:var(--d,0s)}
@keyframes attacca{
  0%{opacity:0;transform:translateY(-46px) scale(1.16) rotate(calc(var(--r,0deg) * 5));filter:drop-shadow(0 30px 28px rgba(0,0,0,.22))}
  70%{opacity:1;transform:translateY(0) scale(.985) rotate(var(--r,0deg))}
  100%{opacity:1;transform:rotate(var(--r,0deg))}
}
.hero-foto > .ombra:first-child{transition:transform .6s var(--frenata)}
.hero-foto:hover > .ombra:first-child{transform:rotate(0deg) scale(1.02)!important}

/* ---------- telefono e tablet ---------- */
@media (max-width:1100px){
  .griglia-lavori{grid-template-columns:repeat(3,minmax(0,1fr))}
  .clienti{grid-template-columns:repeat(3,minmax(0,1fr))}
  .servizi{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .hero,.case,.chi,.quaderno-testa,.intestazione{grid-template-columns:1fr}
  .griglia-lavori,.griglia-quaderno,.servizi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chi-foto{position:static}
  .capitolo{grid-template-columns:1fr}
  .scena{max-width:300px;width:100%;margin:0 auto}
  .vetri-lato{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:18px}
  .js .vetri-lato .vetro{transform:translateY(-70px) scale(.86)}
  .postilla{grid-template-columns:1fr}
  .etichetta-ritaglio{left:0}
  .foglio{--margine:46px}
  .foglio{background-size:100% 100%,0 0,100% var(--rigo)}
}
@media (max-width:560px){
  .griglia-quaderno,.servizi{grid-template-columns:1fr}
  .griglia-lavori{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
  .nome-lavoro{font-size:13.5px}
  .clienti{grid-template-columns:repeat(2,minmax(0,1fr))}
  .head{grid-template-columns:1fr auto}
  .head nav{grid-column:1 / -1;justify-self:start;justify-content:flex-start;gap:16px}
  .foot{flex-direction:column;align-items:center;text-align:center}
  .foot .fine{text-align:center}
  .timbro-tondo{width:220px;height:220px}
  .timbro-tondo strong{font-size:58px}
  .vetro{width:128px;padding:10px 8px 11px}
  .vetro .cifra{font-size:24px}
  .vetro .etichetta{font-size:13px}
  .foglio{--margine:28px;padding-right:18px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* ============================================================
   FOTO CHE SI INGRANDISCONO (stile Apple: escono dal loro posto e ci tornano)
   ============================================================ */
.zoom-fondo{position:fixed;inset:0;z-index:100;background:rgba(12,12,13,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .45s var(--frenata)}
.zoom-fondo.aperto{opacity:1}
.zoom-img{position:fixed;z-index:101;object-fit:contain;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.5);transform-origin:0 0;will-change:transform;background:#fff}
.zoom-chiudi{position:fixed;z-index:102;top:18px;right:18px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(30,30,32,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .4s var(--frenata)}
.zoom-chiudi.aperto{opacity:1}
.zoom-chiudi svg{width:22px;height:22px}

/* ============================================================
   CAROSELLO DEI LAVORI (pagine da 8 che scorrono)
   ============================================================ */
.carosello{--colonne:5;--righe:2}
.carosello-finestra{overflow:hidden;margin:0 -14px;padding:14px 14px 26px}
.carosello-finestra{touch-action:pan-y}
.carosello-binario{display:flex;align-items:flex-start;gap:80px;transition:transform 1s var(--frenata);will-change:transform}
.carosello-binario.trascina{transition:none}
.carosello-binario a,.carosello-binario img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
.carosello-binario.senza-transizione{transition:none}
.carosello-pagina{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:repeat(var(--colonne),minmax(0,1fr));gap:34px 26px;padding:0 2px}
.carosello-comandi{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:6px}
.carosello-comandi[hidden]{display:none}
.carosello-comandi button{width:48px;height:48px;border-radius:50%;border:2px solid var(--rosso);background:transparent;color:var(--rosso);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .35s var(--frenata),background .35s var(--frenata)}
.carosello-comandi button:hover{transform:scale(1.07);background:rgba(214,40,40,.07)}
.carosello-comandi svg{width:20px;height:20px}
.carosello-conta{font-family:var(--macchina);font-size:14px;color:#3B3B38;min-width:48px;text-align:center}
@media (max-width:1100px){.carosello{--colonne:4}}
@media (max-width:820px){.carosello{--colonne:3}}
@media (max-width:560px){.carosello{--colonne:2}.carosello-pagina{gap:24px 14px}}

/* ============================================================
   VIDEO INCHIESTE (YouTube e Instagram)
   ============================================================ */
.piattaforme{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}
.piattaforma{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:800;font-size:14px;letter-spacing:.02em}
.piattaforma svg{width:26px;height:26px;flex:none}
.piattaforma.yt{color:var(--rosso)}
.gruppo-inchieste{margin-bottom:clamp(44px,6vw,72px)}
.gruppo-titolo{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 22px;font-weight:900;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.gruppo-titolo .macchina{text-transform:none;letter-spacing:0;font-weight:400}
.griglia-video{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 26px}
.griglia-reel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 26px}
.video-card{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit}
.video-card .carta{padding:10px}
.video-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.griglia-reel .video-card img{aspect-ratio:9/16}
.video-card .didascalia{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.video-card .nome-lavoro{font-size:15px;line-height:1.2}
.video-card .numero{font-family:var(--numeri);font-weight:600;font-size:15px;color:var(--rosso);font-variant-numeric:tabular-nums}
.video-card .ombra{transition:transform .5s var(--frenata),filter .5s var(--frenata)}
.video-card:hover .ombra{transform:rotate(0deg) scale(1.03)!important;filter:drop-shadow(0 18px 24px rgba(0,0,0,.2)) drop-shadow(0 3px 4px rgba(0,0,0,.12))}
.video-card:hover .nome-lavoro{color:var(--rosso)}
.video-card.largo{grid-column:span 2}

/* la trilogia: tre copertine impilate come un mazzo, che si aprono in fila quando arrivano sullo schermo,
   unite da un filo rosso tratteggiato */
.trilogia{--spazio:26px;position:relative}
.trilogia-carte{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px var(--spazio)}
.trilogia-carte::before{content:"";position:absolute;left:16%;right:16%;top:calc(28% );border-top:2px dashed var(--rosso);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--frenata) 1.1s;z-index:0}
.trilogia.visto .trilogia-carte::before{transform:scaleX(1)}
.trilogia-carte > .video-card{position:relative;transition:transform 1.3s var(--frenata)}
.trilogia-carte > .video-card:nth-child(1){z-index:3}
.trilogia-carte > .video-card:nth-child(2){z-index:2;transition-delay:.12s}
.trilogia-carte > .video-card:nth-child(3){z-index:1;transition-delay:.24s}
.js .trilogia:not(.visto) .trilogia-carte > .video-card:nth-child(1){transform:rotate(-2.5deg)}
.js .trilogia:not(.visto) .trilogia-carte > .video-card:nth-child(2){transform:translateX(calc(-100% - var(--spazio) + 18px)) rotate(3deg)}
.js .trilogia:not(.visto) .trilogia-carte > .video-card:nth-child(3){transform:translateX(calc(-200% - 2 * var(--spazio) + 36px)) rotate(-1deg)}
.episodio{position:absolute;z-index:4;top:-12px;left:-10px;font-family:var(--macchina);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#FFFFFF;background:var(--rosso);padding:4px 9px;border-radius:3px;transform:rotate(-4deg);box-shadow:0 4px 10px rgba(0,0,0,.2)}

@media (max-width:980px){
  .griglia-video{grid-template-columns:repeat(2,minmax(0,1fr))}
  .griglia-reel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trilogia-carte{grid-template-columns:1fr;max-width:520px}
  .trilogia-carte::before{display:none}
  .js .trilogia:not(.visto) .trilogia-carte > .video-card:nth-child(n){transform:none}
}
@media (max-width:560px){
  .griglia-video{grid-template-columns:1fr}
  .video-card.largo{grid-column:auto}
}

/* ============================================================
   INCHIESTE: pulsanti YouTube / Instagram e occhio delle visualizzazioni
   ============================================================ */
.solo-lettori{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button.piattaforma{appearance:none;background:none;border:1.5px solid currentColor;border-radius:999px;padding:6px 14px 6px 10px;cursor:pointer;color:var(--testo-2);opacity:.55;transition:opacity .3s,transform .3s var(--frenata),color .3s,box-shadow .3s}
button.piattaforma:hover{opacity:1;transform:translateY(-1px)}
button.piattaforma:focus-visible{outline:2px solid var(--inchiostro);outline-offset:3px}
button.piattaforma[aria-pressed="true"]{opacity:1}
button.piattaforma.yt[aria-pressed="true"]{color:var(--rosso);box-shadow:0 6px 16px rgba(224,49,49,.18)}
button.piattaforma.ig[aria-pressed="true"]{color:#D62976;border-color:#D62976;box-shadow:0 6px 18px rgba(214,41,118,.22)}
button.piattaforma.ig[aria-pressed="true"] svg{stroke:url(#ig-sfumatura)}
button.piattaforma.ig[aria-pressed="true"] svg circle:last-child{fill:url(#ig-sfumatura)}
button.piattaforma.ig[aria-pressed="true"] .ig-testo{background:linear-gradient(45deg,#FA7E1E,#D62976 45%,#962FBF 75%,#4F5BD5);-webkit-background-clip:text;background-clip:text;color:transparent}
.js .gruppo-inchieste.spento{display:none}
.gruppo-inchieste.entra{animation:entra-gruppo .7s var(--frenata) both}
@keyframes entra-gruppo{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.numero{display:inline-flex;align-items:center;gap:5px}
.numero .occhio{width:17px;height:17px;flex:none}

/* case study: link all'approfondimento nel quaderno */
.approfondimento{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:900;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--inchiostro);text-decoration:none;border-bottom:2px solid var(--inchiostro);padding-bottom:3px;transition:gap .3s var(--frenata),color .3s,border-color .3s}
.approfondimento:hover{gap:14px;color:var(--rosso);border-color:var(--rosso)}

/* quaderno: pagina articolo */
.bozza{margin:10px 0 30px;padding:28px 0;border-top:1px dashed #C9C7C0;border-bottom:1px dashed #C9C7C0;max-width:62ch}
.bozza p{font-size:17px;line-height:1.7;font-weight:500;color:var(--testo-2);margin:18px 0 0}
button.piattaforma.yt[aria-pressed="false"]{color:var(--testo-2)}
.galleria.larga figure{flex:1 1 360px;max-width:560px}
.analisi .approfondimento,.bozza .approfondimento{justify-self:start;align-self:flex-start;width:fit-content}
.analisi .approfondimento{margin-top:0}

/* ============================================================
   CHI SONO: i ricordi che escono mentre si scorre la storia
   ============================================================ */
.ricordo{position:relative;align-self:stretch;display:flex;gap:20px;align-items:center;margin:18px 0 26px}
.ricordo .anno,.anno-solo{font-size:14px;padding:5px 12px}
.ricordo .anno{position:absolute;z-index:6;top:-18px;left:-10px}
.anno-solo{margin-top:6px}
.ricordo-foto{position:relative;flex:1 1 0;min-width:0;transform:rotate(var(--r,0deg));transition:transform 1s var(--frenata),opacity .6s ease}
.ricordo-foto .carta{padding:8px 8px 10px}
.ricordo-foto img{width:100%;height:auto;display:block;object-fit:cover}
.coppia .ricordo-foto:nth-of-type(1){flex-grow:.8}
.coppia .ricordo-foto:nth-of-type(2){flex-grow:1.2}
.coppia + .coppia .ricordo-foto{flex-grow:1}
.singola .ricordo-foto{max-width:520px}
.con-testo{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:26px}
.con-testo > p{font-size:17px!important;font-weight:600!important;color:var(--inchiostro)!important}
/* la foto arriva dall'alto, girata, e si appoggia sul foglio */
.js .ricordo:not(.visto) .ricordo-foto{opacity:0}
.js .ricordo.visto .ricordo-foto{animation:ricordo-entra 1.25s var(--frenata) both;animation-delay:var(--ritardo,0s)}
.ricordo-foto:nth-of-type(2){--da:44px;--ritardo:.2s}
@keyframes ricordo-entra{
  0%{opacity:0;transform:translate(var(--da,-44px),28px) rotate(calc(var(--r,0deg) * -3)) scale(.86)}
  55%{opacity:1;transform:translate(0,0) rotate(calc(var(--r,0deg) * .5)) scale(1.035)}
  100%{opacity:1;transform:rotate(var(--r,0deg)) scale(1)}
}
/* note a penna */
.nota{position:absolute;z-index:5;font-family:"Caveat",cursive;font-weight:700;color:var(--rosso);font-size:clamp(22px,2.2vw,30px);line-height:1;white-space:nowrap;transition:opacity .5s ease 1s,transform .5s var(--frenata) 1s}
.js .ricordo:not(.visto) .nota{opacity:0;transform:translateY(6px) rotate(-6deg)}
.nota-capelli{bottom:-14px;left:50%;transform:translateX(-50%) rotate(-5deg);background:var(--carta);padding:2px 10px 4px;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.js .ricordo:not(.visto) .nota-capelli{transform:translateX(-50%) translateY(6px) rotate(-5deg)}
.nota-cristiano{top:-50px;left:-4%;transform:rotate(-5deg)}
.freccia{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:5;pointer-events:none}
.freccia path{fill:none;stroke:var(--rosso);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:var(--L,2000px);stroke-dashoffset:0;transition:stroke-dashoffset .8s ease 1.3s}
.freccia .punta{transition-delay:2s}
.js .ricordo:not(.visto) .freccia path{stroke-dashoffset:var(--L,2000px)}
@media (max-width:700px){
  .con-testo{grid-template-columns:1fr}
  .ricordo{gap:12px}
  .nota-cristiano{top:-36px}
}
.ricordo .anno{background:var(--carta);box-shadow:0 4px 10px rgba(0,0,0,.12)}
@media (max-width:700px){
  .nota{font-size:20px}
  .nota-capelli{left:4px;transform:rotate(-5deg)}
  .js .ricordo:not(.visto) .nota-capelli{transform:translateY(6px) rotate(-5deg)}
  .con-testo .ricordo-foto{max-width:78%}
}

/* Chi sono come linea del tempo: il filo rosso si allunga mentre si scorre */
.chi{display:block;max-width:940px;margin-inline:auto}
.chi-storia{--rientro:clamp(34px,6vw,76px);position:relative;padding-left:var(--rientro);display:flex;flex-direction:column;gap:20px;margin-top:28px}
.chi-storia::before{content:"";position:absolute;left:calc(var(--rientro) / 2 - 1px);top:8px;bottom:8px;border-left:2px dashed var(--rosso);transform-origin:top;transform:scaleY(var(--avanza,1));opacity:.75}
.chi-storia > p{margin:0;font-weight:500;font-size:16.5px;line-height:1.6;max-width:60ch;color:var(--testo-2)}
.chi-storia .ricordo .anno{left:calc(var(--rientro) / -2);transform:translateX(-50%) rotate(var(--r,0deg));top:-14px}
.oggi{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
.oggi-testo{display:flex;flex-direction:column;gap:16px}
.oggi-testo p:not(.chi-grande){margin:0;font-weight:500;font-size:16.5px;line-height:1.6;color:var(--testo-2)}
.nota-diego{top:-50px;left:86%;transform:translateX(-50%) rotate(4deg)}
@media (max-width:700px){
  .chi-storia{--rientro:30px}
  .chi-storia .ricordo .anno{left:-14px;transform:rotate(var(--r,0deg))}
  .nota-diego{top:-34px;left:80%}
}
.nota-parrucca{top:-48px;right:0;transform:rotate(3deg)}
@media (max-width:700px){.nota-parrucca{top:-34px}}
@media (max-width:700px){.oggi{grid-template-columns:1fr}.oggi .ricordo-foto{max-width:78%}}

/* ============================================================
   SFONDI PER SEZIONE
   Ogni sezione ha il suo fondo a tutta larghezza; i bordi sfumano
   nel grigio di base, così si passa da una stanza all'altra senza stacchi.
   ============================================================ */
.sfondo{position:relative;isolation:isolate;--sfuma:140px}
.sfondo::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:calc(100vw + 6px);transform:translateX(-50%);pointer-events:none;
  background:var(--sf);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--su,var(--sfuma)),#000 calc(100% - var(--giu,var(--sfuma))),transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 var(--su,var(--sfuma)),#000 calc(100% - var(--giu,var(--sfuma))),transparent)}

/* le video inchieste: la stanza buia, la parte più personale */
.sfondo-scuro{
  --sf:radial-gradient(60% 40% at 85% 18%,rgba(214,40,40,.16),transparent 70%),radial-gradient(50% 35% at 10% 70%,rgba(255,255,255,.05),transparent 70%),#1B1A18;
  --inchiostro:#F3F1EA;--testo-2:#CFCCC3;--rosso:#FF5A5A;
  color:var(--inchiostro);padding-top:clamp(110px,12vw,170px);padding-bottom:clamp(110px,12vw,170px)}
.sfondo-scuro .macchina{color:#BDB9AF}
.sfondo-scuro a{color:var(--inchiostro)}
.sfondo-scuro .video-card:hover .nome-lavoro{color:var(--rosso)}
.sfondo-scuro button.piattaforma{color:#BDB9AF}
.sfondo-scuro button.piattaforma.yt[aria-pressed="true"]{color:var(--rosso);box-shadow:0 6px 22px rgba(255,90,90,.25)}
.sfondo-scuro button.piattaforma.ig[aria-pressed="true"]{color:#F06BA8;border-color:#F06BA8;box-shadow:0 6px 22px rgba(240,107,168,.25)}
.sfondo-scuro .video-card .ombra,.sfondo-scuro .titolo-sezione .ombra{filter:drop-shadow(0 14px 22px rgba(0,0,0,.55)) drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.sfondo-scuro .trilogia-carte::before{border-top-color:var(--rosso)}

/* il quaderno: carta a righe con il margine rosso */
.sfondo-quaderno{
  --margine:max(4px, calc((100vw - min(100vw, 1320px)) / 2 + clamp(16px,3vw,40px) - 20px));
  --sf:linear-gradient(90deg,transparent var(--margine),rgba(214,40,40,.35) var(--margine),rgba(214,40,40,.35) calc(var(--margine) + 2px),transparent calc(var(--margine) + 2px)),
       repeating-linear-gradient(to bottom,transparent 0 33px,rgba(120,140,170,.22) 33px 34px),#EEECE5;
  padding-top:clamp(90px,10vw,140px);padding-bottom:clamp(100px,11vw,160px)}

/* cosa faccio: un grigio appena più freddo, da officina */
.sfondo-servizi{--sf:#DCDCD7;--sfuma:110px;padding-top:clamp(80px,9vw,120px)}

/* chi sono: dal caldo dei ricordi (2021) al grigio di oggi (2026) */
.sfondo-tempo{--sf:linear-gradient(to bottom,#E9DCC6 0%,#EBDFCB 30%,#E8E1D4 62%,#E7E6E2 100%);--sfuma:120px;padding-top:clamp(80px,9vw,120px)}
.sfondo-tempo .chi-storia::before{top:-62px}
/* sulla carta, anche nella stanza buia, l'inchiostro resta nero */
.sfondo-scuro .carta{--inchiostro:#111111;--testo-2:#2B2B29;color:#111111}

.js .ricordo:not(.visto) .nota-diego{transform:translateX(-50%) translateY(6px) rotate(4deg)}
/* il filo rosso del Chi sono passa SOTTO il ritaglio del titolo */
.chi .titolo-sezione{position:relative;z-index:3}
.chi-storia::before{z-index:0}
.chi-storia > *{position:relative;z-index:1}

/* il quaderno prosegue sotto "Con chi ho lavorato", senza stacco, poi sfuma in "Cosa faccio" */
.senza-fondo-giu{--giu:0px;padding-bottom:clamp(60px,7vw,100px)}
.sfondo-scarabocchi{--su:0px;--giu:200px;padding-top:clamp(20px,3vw,40px);padding-bottom:clamp(120px,13vw,190px)}
.sfondo-scarabocchi::after{content:"";position:absolute;z-index:-1;top:0;bottom:30px;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent);left:50%;width:calc(100vw + 6px);transform:translateX(-50%);pointer-events:none;
  background:url("../img/scarabocchi.svg?v=2") center 10px/min(1600px,118%) auto no-repeat;opacity:.16}
@media (max-width:700px){.sfondo-scarabocchi::after{background-size:190% auto;background-position:center 20%;opacity:.12}}

/* pagina Quaderno: in testa la carta a righe, poi i capitoli sul grigio,
   le bozze su un cartoncino più scuro, L'io su una luce calda */
.testa-quaderno{--su:180px;--giu:0px;padding-bottom:clamp(50px,6vw,80px)}
.capitoli-quaderno{--su:0px;--giu:220px;padding-bottom:clamp(150px,15vw,220px)}
.sfondo-bozze{--sf:linear-gradient(to bottom,#DDD8CC,#D6D1C4);--sfuma:120px;padding-top:clamp(90px,10vw,140px);padding-bottom:clamp(110px,11vw,160px)}
.sfondo-lio{--sf:radial-gradient(70% 60% at 70% 50%,rgba(255,225,77,.16),transparent 70%),#E9E5DC;--sfuma:120px;padding-top:clamp(70px,8vw,110px)}
.attestato{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:700px){.attestato{grid-template-columns:1fr}.attestato .ricordo-foto{max-width:none}}

.sfoglia{margin:38px 0 0}
.sfoglia .timbro{font-size:15px;padding:9px 16px;text-transform:none;letter-spacing:.04em;background:rgba(250,250,247,.7)}
.organico{font-family:var(--macchina);font-size:13px;color:#3B3B38;white-space:nowrap}
/* pulsanti tra un case study e l'altro: stessi timbri del "scrivimi" */
.navigazione-case{align-items:center;padding:10px 0 46px}
.navigazione-case a.timbro{font-family:var(--macchina);font-weight:400;font-size:15px;padding:10px 18px;text-transform:none;letter-spacing:.04em;text-decoration:none;color:var(--rosso)}
.navigazione-case a.timbro:hover{color:var(--rosso)}
/* "freestyle" scritto in grande, a penna */
.freestyle{font-family:"Caveat",cursive;font-weight:700;font-size:clamp(30px,3vw,40px);color:var(--rosso);line-height:.8;margin:0 2px;display:inline-block;transform:rotate(-4deg) translateY(4px)}
@media (max-width:700px){.gruppo-titolo .macchina{line-height:1.5}.freestyle{line-height:1;margin:4px 4px 10px 2px;transform:rotate(-4deg)}}

/* immagini e video: niente trascinamento, niente "salva immagine" col tasto lungo su iPhone */
img,video{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* pagina privacy */
.pagina-privacy h1{margin:0 0 10px;font-family:var(--serif);font-weight:900;font-size:clamp(34px,4.6vw,60px);line-height:1.02}
.pagina-privacy h2{margin:34px 0 10px;font-weight:900;font-size:16px;letter-spacing:.08em;text-transform:uppercase}
.pagina-privacy p,.pagina-privacy li{font-size:16.5px;line-height:1.7;font-weight:500;color:var(--testo-2);max-width:68ch}
.pagina-privacy ul{padding-left:20px}
@media (max-width:560px){.head nav{flex-wrap:nowrap;justify-content:space-between;width:100%;gap:10px;font-size:12.5px;letter-spacing:.02em}.head nav a{padding:10px 0}}
html{overflow-x:clip}body{overflow-x:clip}
/* footer: due voci per colonna; il link Privacy sotto il nome */
.foot a{color:inherit}
/* pagina Quaderno: solo il titolo, in Montserrat come quello della home */
.quaderno-testa.solo-titolo{grid-template-columns:1fr}
.quaderno-testa.solo-titolo h1{font-family:var(--sans);font-weight:900;font-size:clamp(38px,4.8vw,72px);line-height:.95;letter-spacing:-.02em;text-transform:uppercase;max-width:16ch}

/* pagina Quaderno: un quaderno disegnato a matita sullo sfondo, accanto al titolo.
   È fuori dal flusso (position:absolute): non allunga la pagina */
.quaderno-testa.solo-titolo{position:relative}
.quaderno-testa.solo-titolo > div{position:relative;z-index:1}
.disegno-quaderno{position:absolute;z-index:0;pointer-events:none;right:-2%;top:52%;width:clamp(240px,27vw,430px);transform:translateY(-50%);opacity:.36}
@media (max-width:1100px){.disegno-quaderno{width:clamp(200px,30vw,300px);top:auto;bottom:-10px;transform:none}}
@media (max-width:820px){.quaderno-testa.solo-titolo{padding-bottom:150px}.disegno-quaderno{width:230px;right:-10px;bottom:-6px;opacity:.3}}
/* pagina Quaderno: ritagli dei capitoli più grandi (3 per riga) */
.capitoli-quaderno .griglia-quaderno,.sfondo-bozze .griglia-quaderno{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 30px}
.capitoli-quaderno .articolo .carta,.sfondo-bozze .articolo .carta{padding:32px 30px 34px;min-height:300px;gap:18px}
.capitoli-quaderno .articolo h3,.sfondo-bozze .articolo h3{font-size:clamp(26px,2.4vw,34px);line-height:1.08}
.capitoli-quaderno .articolo .fonte,.sfondo-bozze .articolo .fonte{font-size:12.5px}
.capitoli-quaderno .articolo .estratto,.sfondo-bozze .articolo .estratto{font-size:15.5px}
@media (max-width:980px){.capitoli-quaderno .griglia-quaderno,.sfondo-bozze .griglia-quaderno{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.capitoli-quaderno .griglia-quaderno,.sfondo-bozze .griglia-quaderno{grid-template-columns:1fr}.capitoli-quaderno .articolo .carta,.sfondo-bozze .articolo .carta{min-height:220px}}

/* ============================================================
   CAROSELLI: inchieste e quaderno (stesso meccanismo dei lavori)
   ============================================================ */
.carosello-spento .carosello-finestra{overflow:visible;margin:0;padding:0;height:auto!important;touch-action:auto}
.carosello-spento .carosello-binario{display:block;transform:none!important;will-change:auto}
/* video inchieste: su computer tutto in fila, su telefono e tablet un gruppo per pagina */
.carosello.carosello-inchieste{--colonne:0;--righe:1}
.carosello-inchieste .carosello-pagina{display:block}
.carosello-inchieste .carosello-pagina > .gruppo-inchieste:last-child{margin-bottom:0}
.sfondo-scuro .carosello-conta{color:#D9D7D0}
@media (max-width:820px){.carosello.carosello-inchieste{--colonne:1}}
/* quaderno in home: tre post-it per pagina */
.carosello.griglia-quaderno{display:block}
.carosello.carosello-quaderno{--colonne:3;--righe:1}
.carosello-quaderno .carosello-pagina{gap:26px}
@media (max-width:620px){.carosello.carosello-quaderno{--colonne:1;--righe:3}.carosello-quaderno .carosello-pagina{gap:22px}}
/* pulsanti YouTube / Instagram: su telefono solo il simbolo */
@media (max-width:560px){
  button.piattaforma{padding:7px 12px}
  button.piattaforma .piattaforma-testo{display:none}
}
/* video inchieste su telefono: al posto dei numeri di pagina, frecce a penna e "swipe" */
.carosello-comandi.comandi-penna{justify-content:center;gap:4px;margin:0}
.comandi-penna button{width:auto;height:auto;border:0;border-radius:0;background:none;padding:8px 10px;color:var(--rosso)}
.comandi-penna button:hover{background:none;transform:scale(1.08)}
.comandi-penna svg{width:46px;height:21px;opacity:.55;transition:opacity .35s var(--frenata)}
.comandi-penna button:hover svg{opacity:.9}
.comandi-penna .prec svg{transform:scaleX(-1) rotate(4deg)}
.comandi-penna .succ svg{animation:spinta 1.8s ease-in-out infinite}
.ultima-pagina .comandi-penna .succ svg{animation:none}
.ultima-pagina .comandi-penna .prec svg{animation:spinta-sx 1.4s ease-in-out infinite}
.comandi-penna .swipe{font-family:"Caveat",cursive;font-weight:700;font-size:32px;line-height:1;color:var(--rosso);transform:rotate(-3deg) translateY(-2px);user-select:none;-webkit-user-select:none}
@keyframes spinta{0%,100%{transform:translateX(0) rotate(-3deg)}50%{transform:translateX(6px) rotate(-3deg)}}
@keyframes spinta-sx{0%,100%{transform:scaleX(-1) rotate(4deg) translateX(0);opacity:.55}50%{transform:scaleX(-1) rotate(4deg) translateX(7px);opacity:1}}

/* ============================================================
   QUADERNO — articoli: si scrive sulle righe
   Righe da 32px. Lo script allinea l'inizio delle righe al primo paragrafo
   (--inizio-righe) e rimette in riga ogni blocco che non è testo.
   La base delle lettere si appoggia sulla riga: spostamento = 13.5px − 0.3585em
   (Montserrat, interlinea 32px).
   ============================================================ */
.pagina-articolo{--rigo:32px;isolation:isolate}
.pagina-articolo > p.testo{line-height:var(--rigo);margin:0 0 var(--rigo);position:relative;top:calc(13.5px - .3585em);z-index:1}
.pagina-articolo > h2.capitolo-titolo{font-size:clamp(22px,2.3vw,29px);line-height:var(--rigo);margin:var(--rigo) 0 0;position:relative;top:calc(13.5px - .3585em);z-index:1;letter-spacing:0}
.pagina-articolo > .intestazione .fonte .tempo{color:var(--rosso)}

/* scarabocchi a matita: accompagnano il paragrafo accanto, senza rubare l'occhio */
.pagina-articolo > .scarabocchio{position:absolute;z-index:0;right:clamp(24px,5vw,90px);width:var(--l,170px);height:auto;margin-top:var(--y,0px);transform:rotate(var(--r,-5deg));opacity:.3;pointer-events:none;user-select:none}
@media (max-width:1100px){.pagina-articolo > .scarabocchio{width:calc(var(--l,170px) * .75);right:12px;opacity:.16}}
@media (max-width:620px){.pagina-articolo > .scarabocchio{width:96px;right:4px;opacity:.1}}

/* il margine diventa tratteggiato: leggendo, la penna lo ripassa e i trattini si uniscono */
.js .foglio.pagina-articolo{
  background-image:
    radial-gradient(circle at 26px 50%,var(--fondo) 0 8px,rgba(0,0,0,.12) 8.5px,transparent 9.5px),
    linear-gradient(transparent calc(var(--rigo) - 1px),var(--riga) calc(var(--rigo) - 1px),var(--riga) var(--rigo));
  background-size:52px 76px,100% var(--rigo);background-repeat:repeat-y,repeat;background-position:0 30px,0 var(--inizio-righe)}
@media (max-width:980px){.js .foglio.pagina-articolo{background-size:0 0,100% var(--rigo)}}
.pagina-articolo .margine-tratteggiato,.pagina-articolo .filo-lettura{position:absolute;z-index:2;left:calc(var(--margine) - 2px);top:0;width:2px;height:100%;pointer-events:none}
.pagina-articolo .margine-tratteggiato{background:repeating-linear-gradient(to bottom,rgba(214,40,40,.55) 0 10px,transparent 10px 18px)}
.pagina-articolo .filo-lettura{background:var(--rosso);transform-origin:top;transform:scaleY(var(--letto,0));will-change:transform}
/* dove c'è il supporto, il ripasso lo muove il browser insieme allo scorrimento: niente scatti */
@supports (animation-timeline: view()){
  .pagina-articolo{view-timeline:--foglio block}
  .pagina-articolo .filo-lettura{transform:scaleY(0);animation:ripassa linear both;animation-timeline:--foglio;animation-range:cover 45vh cover calc(100% - 55vh)}
}
@keyframes ripassa{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* il righello: la riga che si sta leggendo, appena più calda, con la riga del quaderno più marcata.
   Solo sulle righe di testo: sulle righe vuote e sui titoli sparisce */
.pagina-articolo .righello{position:absolute;z-index:0;top:0;left:0;height:var(--rigo);border-bottom:1.5px solid rgba(110,128,158,.55);background:linear-gradient(transparent 30%,rgba(255,225,77,.2) 30%);opacity:0;pointer-events:none;transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .3s ease;will-change:transform}
.pagina-articolo .righello.acceso{opacity:1}

/* i capitoli: il numero nel margine si accende quando lo superi */
.pagina-articolo > h2.capitolo-titolo .tappa{position:absolute;right:calc(100% + clamp(20px,3vw,44px) + 14px);top:0;font-family:var(--macchina);font-weight:400;font-size:15px;letter-spacing:.06em;color:var(--rosso);opacity:.45;transition:opacity .4s}
.pagina-articolo > h2.capitolo-titolo.passato .tappa{opacity:1}
@media (max-width:980px){.pagina-articolo > h2.capitolo-titolo .tappa{display:none}}

/* ============================================================
   17/10/2026 — articolo ex Ilva: parentesi nei titoli, elenco sulle righe,
   immagini con le misure dichiarate, postille scritte a macchina
   ============================================================ */
.pagina-articolo > h2.capitolo-titolo .parentesi{font-family:var(--macchina);font-weight:400;font-size:15px;line-height:1;letter-spacing:.06em;text-transform:none;color:var(--rosso);margin-left:8px;position:relative;top:-3px;white-space:nowrap}
.pagina-articolo > p.testo.punto{margin-bottom:0;padding-left:30px}
.pagina-articolo > p.testo.punto.fine{margin-bottom:var(--rigo)}
.pagina-articolo > p.testo.punto .num{position:absolute;left:0;font-family:var(--macchina);color:var(--rosso)}
.galleria img{height:auto}
/* postille: niente tendina da destra, le batte la macchina da scrivere riga per riga (sito.js) */
.js .postilla,.js .postilla.visto{clip-path:none;transition:none}
.js .postilla.batte p{clip-path:polygon(0 0,0 0,0 0,0 0)}