/* ═══ HOME — la grammatica di ful-agency.com (28/10/2026, terza strada) ══════════════════════════ */
body:has(#newsletter){--carbone:var(--notte);--sporco:var(--carta-2);--filo:rgba(21,21,21,.14);
  --e:cubic-bezier(.65,.05,.15,1);--e-esce:cubic-bezier(.2,.7,.1,1);--sezione:clamp(84px,10vw,160px)}
/* la testata è quella VERA del sito (_header-vero.css, copiata com'è): trasparente sulla copertina, piena scendendo.
   La nota di prova esce dal flusso e diventa un bollino in basso, così la copertina parte da zero come sul sito */
.devnote--fissa{position:fixed;left:12px;bottom:12px;z-index:980;padding:6px 12px;border-radius:99px;font-size:.6875rem;pointer-events:none;opacity:.92;transition:opacity .4s}
body:has(#ful-hd:not(.cond)) .devnote--fissa{opacity:0}   /* sulla copertina ⛔ copre l'indice delle storie */

/* ── IL RITMO VERTICALE delle schede: quattro passi, uguali in tutta la home (Francesco 29/10: «spaziature a caso») ──
   foto → riga meta 16 · meta → titolo 12 · titolo (o sommario) → firma 20 · titolo grande → sommario 16.
   La riga meta sta SEMPRE sopra il titolo: le gambe delle lettere guardano il testo, ⛔ il bordo di una pill.
   La firma è un ALTRO gruppo: il suo passo è più largo di quello che lega pill e titolo, o ci si appiccica
   quando manca il sommario (Francesco 29/10, «te l'ho detto mille volte») */
body:has(#newsletter){--v-foto:16px;--v-meta:12px;--v-tit:clamp(16px,1.4vw,20px);--v-tit-l:16px}
/* ⚠️ le maschere delle righe hanno margini negativi (aria per accenti e gambe): senza flow-root quei margini
   «passano» fuori dal titolo e si mangiano lo spazio sopra e sotto — 40px dichiarati diventavano 16 */
.hm-s__titolo,.tl__tit,.ct__tit{display:flow-root}

/* ── tipografia di servizio dell'agenzia ── */
.et{display:inline-flex;align-items:center;gap:.6em;font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;color:inherit}
.et--punto::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--arancio);flex:none}
/* SplitText chiude ogni riga in una maschera: aria sopra per gli accenti delle maiuscole, sotto per le gambe */
.hm-r-mask,.hm-mask-r-mask{padding:.1em 0 .3em;margin:-.1em 0 -.3em}

/* ── il bottone dell'agenzia: rettangolo netto, le lettere rotolano ── */
.fb{position:relative;display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 18px 0 20px;border-radius:99px;
  font-size:.8125rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;line-height:1;white-space:nowrap;text-decoration:none;
  transition:background-color .5s var(--e),color .5s var(--e)}
.fb__t{display:inline-flex;overflow:clip;height:1.2em;align-items:flex-start;padding-top:.1em}
.fb__l{display:inline-block;text-shadow:0 1.25em 0 currentColor;transition:transform .55s var(--e);transition-delay:calc(var(--i) * 18ms)}
.fb__l--sp{width:.28em}
.fb__f{position:relative;width:12px;height:12px;overflow:clip;flex:none}
.fb__f svg{position:absolute;inset:0;transition:transform .55s var(--e)}
.fb__f svg+svg{transform:translate(-130%,130%)}
.fb--filo{color:var(--carbone);box-shadow:inset 0 0 0 1px var(--carbone)}
.fb--chiaro{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
@media(hover:hover){
  .fb:hover .fb__l{transform:translateY(-1.25em)}
  .fb:hover .fb__f svg:first-child{transform:translate(130%,-130%)}
  .fb:hover .fb__f svg+svg{transform:translate(0,0)}
  .fb--filo:hover{background:var(--carbone);color:#fff}
  .fb--chiaro:hover{background:#fff;color:var(--carbone)}
}

/* ── LA COPERTINA = l'hero dell'agenzia ── */
/* le misure verticali della copertina, dal fondo: la barra delle storie, poi l'aria fissa fino al sommario.
   In alto lo spazio della testata vera (171 da computer, 72 da telefono): il titolo ⛔ ci sale mai sotto */
.hm-cop{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--carbone);
  height:clamp(600px,100svh,1100px);--barra-pb:clamp(22px,2.2vw,34px);--barra-h:calc(var(--barra-pb) + 30px);--aria-barra:clamp(48px,5.5vw,88px)}
.hm-s{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;visibility:hidden;
  padding-top:200px;padding-bottom:calc(var(--barra-h) + var(--aria-barra))}
@media(max-width:1200px){.hm-s{padding-top:104px}}
.hm-s.on,.hm-s.esce{visibility:visible}
.hm-s.esce{z-index:1}.hm-s.on{z-index:2}
.hm-s__foto{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--carbone)}
.hm-s__foto img{width:100%;height:100%;object-fit:cover}
/* il velo solo dove cade il testo (in basso) e un filo in alto per la testata: la foto resta viva */
.hm-s__foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,8,6,.5) 0,rgba(10,8,6,0) 180px),
             linear-gradient(0deg,rgba(10,8,6,.86) 0,rgba(10,8,6,.55) 36%,rgba(10,8,6,.12) 64%,rgba(10,8,6,0) 80%)}
.hm-s__testo{position:relative}
.hm-s__meta{display:flex;align-items:center;gap:16px;margin:0 0 clamp(20px,2vw,32px);font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.hm-s__meta span{opacity:.72}
/* la pill della categoria, la stessa delle schede, in negativo sulla foto */
.hm-s__meta .pl{height:30px;padding:0 14px;font-size:.75rem;color:#fff;border-color:rgba(255,255,255,.55);background:rgba(10,8,6,.18);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hm-s__meta a.pl:hover{border-color:#fff}
/* il titolo si misura anche sull'ALTEZZA dello schermo: su un portatile basso ⛔ spinge via il sommario */
.hm-s__titolo{font-size:calc(var(--k,1) * min(clamp(2.5rem,.9rem + 6.4vw,7.6rem),11.5svh));font-weight:600;text-transform:uppercase;
  letter-spacing:-.055em;line-height:.88;margin:0;max-width:13em;text-wrap:balance}
.hm-s__titolo a{text-decoration:none}
.hm-s__titolo a::after{content:"";position:absolute;inset:0;z-index:1}
.hm-s__dek{max-width:44ch;margin:clamp(28px,2.8vw,44px) 0 0;font-size:clamp(1.05rem,1.25vw,1.3rem);font-weight:300;line-height:1.4;color:rgba(255,255,255,.8)}
/* gli indicatori: le linee delle storie, col numero e la sezione */
.hm-barra{position:absolute;left:0;right:0;bottom:0;z-index:3}
.hm-barra .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,24px)}
.hm-i{all:unset;box-sizing:border-box;cursor:pointer;display:block;padding:0 0 var(--barra-pb);color:rgba(255,255,255,.55);
  font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;transition:color .4s}
.hm-i:hover,.hm-i[aria-current]{color:#fff}
.hm-i:focus-visible{outline:2px solid var(--arancio);outline-offset:4px}
.hm-i__linea{display:block;height:2px;background:rgba(255,255,255,.28);position:relative;overflow:hidden;margin-bottom:12px}
.hm-i__linea i{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.hm-i.fatto .hm-i__linea i,.hm-cop.ferma .hm-i[aria-current] .hm-i__linea i{transform:scaleX(1)}
.hm-i__n{margin-right:.9em}
@media(max-width:700px){.hm-i__c{display:none}.hm-s__dek{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}}


/* ── ULTIMI ARTICOLI = «Progetti scelti» ── */
.hm-ult{padding-top:var(--sezione)}
.pg{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;margin:0 0 clamp(52px,6vw,100px);
  font-size:clamp(3.1rem,11vw,12.5rem);font-weight:600;letter-spacing:-.065em;line-height:.82;text-transform:uppercase}
.pg>span{display:block;overflow:clip;padding:.08em 0 .3em;margin-bottom:-.25em}
.pg>span:last-child{margin-left:auto}
.pg .ch,.hm-cat__nome .ch{display:inline-block}
.hm-gr{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:clamp(64px,7vw,120px)}
.tl{position:relative}
.tl--1{grid-column:1/8}
.tl--2{grid-column:9/13;margin-top:min(11vw,170px)}
.tl--3{grid-column:1/6}
.tl--4{grid-column:7/13;margin-top:max(-8vw,-124px)}
.tl__foto{position:relative;aspect-ratio:5/4;overflow:clip;background:var(--sporco)}
.tl--2 .tl__foto,.tl--3 .tl__foto{aspect-ratio:4/5}
.tl__foto img{position:absolute;top:-8%;left:0;width:100%;height:116%;object-fit:cover;transition:scale 1.1s var(--e-esce)}
.tl__dida{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:0;padding-top:var(--v-foto)}
.tl__tit{margin:var(--v-meta) 0 0;font-size:clamp(1.2rem,1.55vw,1.55rem);font-weight:600;letter-spacing:-.04em;line-height:1.08;text-wrap:pretty}
.tl--1 .tl__tit{font-size:clamp(1.75rem,3vw,3.1rem);letter-spacing:-.05em;line-height:1;max-width:22ch}
.tl__tit a{text-decoration:none}
.tl__tit a::after{content:"";position:absolute;inset:0;z-index:1}
.tl__n{margin-top:var(--v-meta);font-size:.75rem;font-weight:600;padding:.45em 0 .15em;margin-bottom:-.15em;overflow:clip;align-self:start}
.tl__n>span,.hm-cat__n>span{display:block}
.tl__meta{grid-column:1/-1;display:flex;flex-wrap:wrap;height:24px;overflow:hidden;gap:0 14px;white-space:nowrap;margin:0;font-size:.8125rem;color:var(--grigio)}
.tl__meta a{position:relative;z-index:2;color:var(--ink);text-decoration:none}
@media(hover:hover){.tl__meta a:hover{text-decoration:underline}}
.tl__dek{grid-column:1/-1;max-width:46ch;margin:var(--v-tit-l) 0 0;font-size:clamp(1.02rem,1.2vw,1.2rem);font-weight:300;line-height:1.42;color:var(--grigio)}

/* ── la lista dei piccoli fra gli ultimi: quattro schede in fila (⭐ l'unico posto di un Digital) ── */
.pcc{list-style:none;margin:clamp(80px,8vw,140px) 0 0;padding:16px 0 0;border-top:1px solid var(--ink);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;row-gap:40px}
.pc__a{display:block;text-decoration:none}
.pc__foto{display:block;position:relative;aspect-ratio:4/3;overflow:clip;background:var(--sporco)}
.pc__foto img{width:100%;height:100%;object-fit:cover;transition:scale 1.1s var(--e-esce)}
.pc__meta{display:flex;flex-wrap:wrap;height:24px;overflow:hidden;align-items:center;gap:0 12px;white-space:nowrap;margin-top:var(--v-foto);font-size:.8125rem;color:var(--grigio)}
.pc__tit{margin:var(--v-meta) 0 var(--v-tit);font-size:clamp(1.05rem,1.25vw,1.25rem);font-weight:600;letter-spacing:-.035em;line-height:1.14;text-wrap:pretty}

/* ── LE SEZIONI: il pezzo grande (foto 8 colonne, testo 4 alto quanto la foto) e tre schede sotto, sulla stessa griglia ── */
.hm-cat{padding-top:var(--sezione)}
.hm-cat:not(:has(~ .hm-cat)){padding-bottom:var(--sezione)}
.hm-cat__testa{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 24px;margin-bottom:clamp(36px,4vw,64px)}
.hm-cat__nome{margin:0;font-size:clamp(2.35rem,7.6vw,8.4rem);font-weight:600;letter-spacing:-.06em;line-height:.84;text-transform:uppercase;white-space:nowrap}
.hm-cat__nome a{display:inline-block;overflow:clip;padding:.08em .02em .3em 0;margin-bottom:-.25em;text-decoration:none;vertical-align:top}
.hm-cat__n{display:inline-block;vertical-align:top;margin:.05em 0 -.15em .5em;padding:.15em 0;overflow:clip;font-size:clamp(.75rem,1.1vw,1.1rem);font-weight:600;letter-spacing:0;line-height:1}
.ct{border-top:1px solid var(--ink);padding-top:16px}
.ct__capo{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px}
.ct__foto{grid-column:1/9;grid-row:1;position:relative;aspect-ratio:3/2;overflow:clip;background:var(--sporco)}
.ct__foto img{position:absolute;top:-8%;left:0;width:100%;height:116%;object-fit:cover;transition:scale 1.1s var(--e-esce)}
.ct__testo{grid-column:9/13;grid-row:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.ct--dx .ct__foto{grid-column:5/13}
.ct--dx .ct__testo{grid-column:1/5}
.ct__data{margin:0;font-size:.8125rem;color:var(--grigio)}
/* ⚠️ lo stacco dal sommario segue il CORPO del titolo (.6em): 16px fissi bastano sotto un titolo da scheda, ⛔ sotto uno da 50px */
.ct__tit{margin:0 0 max(var(--v-tit-l),.6em);font-size:clamp(1.6rem,2.9vw,3.1rem);font-weight:600;letter-spacing:-.05em;line-height:1.02;text-wrap:pretty}
.ct__tit a{text-decoration:none}
.ct__tit a::after{content:"";position:absolute;inset:0;z-index:1}
.ct__dek{margin:0;font-size:clamp(1rem,1.1vw,1.12rem);font-weight:300;line-height:1.42;color:var(--grigio)}
.ct__lista{list-style:none;margin:clamp(40px,4vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px}
.cr__a{display:block;text-decoration:none}
.cr__foto{display:block;position:relative;aspect-ratio:3/2;overflow:clip;background:var(--sporco)}
.cr__foto img{width:100%;height:100%;object-fit:cover;transition:scale 1.1s var(--e-esce)}
.cr__data{display:block;margin-top:var(--v-foto);font-size:.8125rem;color:var(--grigio)}
.cr__tit{margin:var(--v-meta) 0 var(--v-tit);font-size:clamp(1.15rem,1.4vw,1.4rem);font-weight:600;letter-spacing:-.04em;line-height:1.1;text-wrap:pretty}

/* ── BANNER 1 · la newsletter: due colonne in ordine — il testo a sinistra, il telefono a destra
   che parte all'altezza dell'occhiello ed esce dal fondo ── */
.hm-nl{margin-top:var(--sezione);background:var(--carbone);color:#fff;overflow:clip;--tel-h:clamp(560px,44vw,720px)}
.hm-nl__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;align-items:center}
.hm-nl__corpo{grid-column:1/7;padding:var(--sezione) 0}
.hm-nl__k{display:flex;align-items:center;gap:10px;margin:0 0 clamp(20px,2vw,28px);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.hm-nl__k::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--arancio)}
.hm-nl__tit{margin:0 0 clamp(28px,3vw,44px);font-size:clamp(3rem,7.2vw,8rem);font-weight:600;letter-spacing:-.065em;line-height:.84;text-transform:uppercase}
.hm-nl__tit>span{display:block;overflow:clip;padding:.08em 0 .3em;margin-bottom:-.25em}
.hm-nl__tit .ch{display:inline-block}
.hm-nl__tit i{font-style:normal;color:var(--arancio)}
.hm-nl__t{margin:0 0 36px;max-width:34ch;font-size:clamp(1.15rem,1.45vw,1.45rem);font-weight:300;line-height:1.38;color:var(--su-notte)}
.hm-nl__form{max-width:540px}
.hm-nl__form label{display:block;margin-bottom:10px;font-size:.6875rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.hm-nl__riga{display:flex;gap:8px}
.hm-nl__riga input{flex:1;min-width:0;height:54px;padding:0 22px;border:1px solid var(--filo-notte);border-radius:99px;background:transparent;font:inherit;font-size:1rem;color:#fff}
.hm-nl__riga input::placeholder{color:rgba(255,255,255,.42)}
.hm-nl__riga input:focus{outline:none;border-color:var(--arancio)}
.hm-nl__riga button{flex:none;height:54px;padding:0 30px;border:0;border-radius:99px;background:#fff;color:var(--ink);font:inherit;font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:background-color .3s}
.hm-nl__riga button:hover{background:var(--arancio)}
.hm-nl__nota{margin:14px 0 0;font-size:.8rem;line-height:1.5;color:rgba(255,255,255,.6)}
.hm-nl__nota a{color:var(--su-notte)}
.hm-nl__tel{grid-column:8/13;display:flex;justify-content:center;padding:var(--sezione) 0}
.hm-nl .nl-tel{margin:0}
.hm-nl .nl-tel__vetro{overflow:hidden}
.hm-nl .nl-tel__rullo{animation:none}
.hm-nl .nl-tel__rullo img{display:block;width:100%;height:auto}
.hm-nl__tel figcaption{display:none}

/* ── BANNER 2 · scopri FUL: le altre pagine del sito, sul nero ── */
.hm-sc{margin-top:var(--sezione);padding:var(--sezione) 0;background:var(--carbone);color:#fff}
.sc{list-style:none;margin:0;padding:0;border-top:1px solid #fff}
.sc li+li{border-top:1px solid rgba(255,255,255,.2)}
.sc li:last-child{border-bottom:1px solid rgba(255,255,255,.2)}
.sc__a{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;align-items:center;padding:20px 0;text-decoration:none}
.sc__k{grid-column:1/10;grid-row:1;min-width:0;font-size:.8125rem;color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc__k .pc__n{margin-right:10px;color:#fff}
.sc__t{grid-column:1/10;grid-row:2;margin-top:10px;font-size:clamp(1.4rem,2.4vw,2.5rem);font-weight:600;letter-spacing:-.05em;line-height:1.02;text-wrap:balance;transition:translate .6s var(--e)}
.sc__foto{grid-column:10/12;grid-row:1/3;position:relative;aspect-ratio:3/2;overflow:clip;background:#222}
.sc__foto img{width:100%;height:100%;object-fit:cover;transition:scale 1.1s var(--e-esce)}
.sc__fr{grid-column:12/13;grid-row:1/3;justify-self:end;display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.4);border-radius:50%;transition:background-color .3s,border-color .3s,color .3s}
.sc__fr svg{width:14px;height:14px}
@media(hover:hover){
  .sc__a:hover .sc__t{translate:12px 0}
  .sc__a:hover .sc__foto img{scale:1.08}
  .sc__a:hover .sc__fr{background:var(--arancio);border-color:var(--arancio);color:var(--ink)}
}

/* ── l'hover sui pezzi (Francesco 29/10, la «A» fra cinque provate): la foto si avvicina e SEGUE IL MOUSE,
   come guardare dentro una finestra, e il titolo si sottolinea in arancio. --mx/--my li scrive il JS (da -1 a 1).
   ⚠️ GSAP scrive translate/scale «none» in linea sulle foto col parallasse: senza !important ⛔ passano ── */
.tl__foto img,.ct__foto img,.cr__foto img,.pc__foto img{transition:scale .9s cubic-bezier(.22,1,.36,1);
  translate:calc(var(--mx,0) * -4%) calc(var(--my,0) * -4%)!important}
.tl__tit .hm-r,.ct__tit .hm-r{display:inline-block!important}
.tl__tit .hm-r,.ct__tit .hm-r,.cr__tit .ti,.pc__tit .ti{background:linear-gradient(var(--arancio),var(--arancio)) 0 100%/0 2px no-repeat;
  transition:background-size .6s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){
  :is(.tl:hover .tl__foto,.ct__capo:hover .ct__foto,.cr__a:hover .cr__foto,.pc__a:hover .pc__foto) img{scale:1.12!important}
  :is(.tl:hover .tl__tit .hm-r,.ct__capo:hover .ct__tit .hm-r,.cr__a:hover .cr__tit .ti,.pc__a:hover .pc__tit .ti){background-size:100% 2px}
}

/* ── la pill della categoria e la firma, uguali ovunque ── */
.pl{position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border:1px solid var(--filetto-forte);border-radius:99px;
  font-size:.6875rem;font-weight:600;letter-spacing:.03em;line-height:1;text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap;transition:border-color .3s}
.pl::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--arancio)}
a.pl:hover{border-color:var(--ink)}
.tl__meta .pl,.pc__meta .pl{flex:0 1 auto;min-width:0;display:block;line-height:22px;overflow:hidden;text-overflow:ellipsis}
.tl__meta .pl::before,.pc__meta .pl::before{display:inline-block;vertical-align:middle;margin:-2px 6px 0 0}
.tl__meta time,.pc__meta time{flex:none}
.fi{display:block;font-size:.8125rem;line-height:1.35;color:var(--grigio)}
.fi b{font-weight:600;color:var(--ink)}
.tl__meta,.ct__meta,.cr__meta,.pc__meta{align-items:center}
.tl__firma,.ct__firma{margin:var(--v-tit) 0 0}
.tl__firma{grid-column:1/-1}

/* il cursore del magazine (solo col mouse): un pallino AL POSTO della freccia, che segue il mouse nello
   stesso fotogramma (⛔ ritardi, ⛔ inseguimenti), si allarga sui link e diventa «Leggi» sopra i pezzi */
.hm-cur{position:fixed;top:0;left:0;z-index:2147483647;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .2s}
.hm-cur.vivo{opacity:1}
.hm-cur.testo{opacity:0}
.hm-cur__p{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--ink);
  transition:scale .35s var(--e),opacity .25s,background-color .25s}
.hm-cur.chiaro .hm-cur__p{background:#fff}
.hm-cur.link .hm-cur__p{scale:3.4;opacity:.25}
.hm-cur.leggi .hm-cur__p{scale:0}
.hm-cur__b{position:absolute;left:-48px;top:-48px;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:var(--carbone);color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.25;
  scale:0;transition:scale .5s var(--e),background-color .3s,color .3s}
.hm-cur.leggi .hm-cur__b{scale:1}
.hm-cur.leggi.chiaro .hm-cur__b{background:#fff;color:var(--carbone)}
.hm-cur small{display:block;font-size:.625rem;font-weight:400;letter-spacing:.04em;opacity:.7}
@media(hover:none),(pointer:coarse){.hm-cur{display:none}}
@media(hover:hover) and (pointer:fine){html.hm-cur-ok,html.hm-cur-ok *{cursor:none!important}html.hm-cur-ok :is(input,textarea,select){cursor:text!important}}

/* ── tablet ── */
@media(max-width:1000px){
  .pcc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ct__foto,.ct--dx .ct__foto{grid-column:1/-1}
  .ct__testo,.ct--dx .ct__testo{grid-column:1/-1;grid-row:2;margin-top:var(--v-foto);justify-content:flex-start;gap:var(--v-meta)}
  .hm-nl{--tel-h:560px}
  .hm-nl__corpo{grid-column:1/-1;padding-bottom:56px}
  .hm-nl__tel{grid-column:1/-1;padding:0 0 var(--sezione)}
  .sc__k{grid-column:1/10;grid-row:1}
  .sc__t{grid-column:1/10;grid-row:2;margin-top:8px}
  .sc__foto{grid-column:10/12;grid-row:1/3}
  .sc__fr{grid-row:1/3}
  .tl--1{grid-column:1/-1}
  .tl--2{grid-column:5/-1;margin-top:0}
  .tl--3{grid-column:1/9}
  .tl--4{grid-column:1/-1;margin-top:0}
}
/* ── telefono: il grosso dei lettori ── */
@media(max-width:700px){
  .hm-cat__testa{align-items:flex-start;flex-direction:column}
  .pcc,.ct__lista{grid-template-columns:minmax(0,1fr);row-gap:0;padding-top:0}
  .ct__lista{margin-top:28px;border-top:1px solid var(--filo)}
  .pc+.pc,.cr+.cr{border-top:1px solid var(--filo)}
  .pc__a,.cr__a{display:grid;grid-template-columns:minmax(0,1fr) 30%;column-gap:16px;align-content:start;padding:16px 0}
  .pc__foto,.cr__foto{grid-column:2;grid-row:1/4;aspect-ratio:1/1}
  .pc__meta,.cr__data{grid-column:1;margin:0}
  .pc__tit,.cr__tit{grid-column:1;margin:var(--v-meta) 0 var(--v-tit);font-size:1.2rem;line-height:1.1}
  .pc__a .fi,.cr__a .fi{grid-column:1}
  .ct__tit{font-size:1.75rem}
  .ct__dek{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .hm-nl{--tel-h:520px}
  .hm-nl__riga{flex-direction:column}
  .hm-nl__riga input{flex:none}
  .hm-nl__riga button{width:100%}
  .sc__t{grid-column:1/10;font-size:1.45rem}
  .sc__k{grid-column:1/-1}
  .sc__foto{grid-column:10/13;grid-row:2;margin-top:8px}
  .sc__fr{display:none}
  .hm-gr{row-gap:56px}
  .tl--2{grid-column:3/-1}
  .tl--3{grid-column:1/11}
  .tl__tit{font-size:1.3rem}
  .tl--1 .tl__tit{font-size:1.75rem}
  .tl__dek{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
}

/* ── prima che il motore parta (solo chi ha JS e movimento) ── */
.hm-js .hm-cop .hm-s__testo,.hm-js .hm-barra,
.hm-js #ful-hd :is(.fh-utility .fh-wrap > *,.fh-logo,.fh-cat,.fh-actions > *,.fhm-top > *){visibility:hidden}
.hm-js [data-rivela]{clip-path:inset(100% 0 0 0)}
/* il telefono: un OGGETTO, disegnato in CSS. È l'unica eccezione al «raggio 0» del sito:
   gli angoli tondi sono del telefono, ⛔ dell'interfaccia. Cornice sottile scura, isola discreta. */
.nl-tel-zona{grid-column:8/13;display:flex;justify-content:center}
.nl-tel{margin:0;width:calc(var(--tel-h) * .486)}
.nl-tel__corpo{position:relative;height:var(--tel-h);padding:9px;border-radius:calc(var(--tel-h) * .072);
  background:#0B0A09;border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 0 0 2px #26221E, 0 50px 90px -40px rgba(0,0,0,.9)}
.nl-tel__corpo::before,.nl-tel__corpo::after{content:"";position:absolute;width:3px;background:#2A2521;border-radius:2px}
.nl-tel__corpo::before{left:-4px;top:19%;height:9%;box-shadow:0 calc(var(--tel-h) * .11) 0 #2A2521} /* i due tasti del volume */
.nl-tel__corpo::after{right:-4px;top:26%;height:13%}                                            /* il tasto di accensione */
.nl-tel__schermo{position:relative;height:100%;overflow:hidden;background:var(--carta);color:var(--ink);
  border-radius:calc(var(--tel-h) * .072 - 9px);display:flex;flex-direction:column}
.nl-tel__stato{flex:none;height:36px;position:relative}
.nl-tel__isola{position:absolute;left:50%;top:10px;width:30%;height:22px;margin-left:-15%;background:#0B0A09;border-radius:20px}
.nl-tel__mitt{flex:none;display:flex;align-items:center;justify-content:space-between;padding:6px 16px 10px;
  border-bottom:1px solid var(--filetto);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grigio)}
.nl-tel__mitt b{color:var(--ink);font-weight:600;display:flex;align-items:center;gap:.6em}
.nl-tel__mitt b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--arancio)}
.nl-tel__vetro{flex:1;min-height:0;overflow:hidden;position:relative}
.nl-tel__rullo{will-change:transform}
.nl-tel__casa{position:absolute;left:50%;bottom:7px;width:34%;height:4px;margin-left:-17%;border-radius:4px;background:rgba(20,20,20,.55)}
.nl-tel figcaption{margin-top:18px;text-align:center}

/* la newsletter in miniatura: le misure sono quelle di uno schermo di telefono */
.nv-testa{padding:20px 16px 16px;border-bottom:2px solid var(--ink);text-align:center}
.nv-testa img{height:34px;width:auto;margin:0 auto 12px}
.nv-testa b{display:block;font-size:1.02rem;font-weight:600;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05}
.nv-testa span{display:block;margin-top:8px;font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio)}
.nv-testa span i{font-style:normal;color:var(--arancio)}
.nv-apri{padding:14px 16px;font-size:.8rem;line-height:1.45;color:var(--ink-tenue);border-bottom:1px solid var(--filetto);margin:0}
.nv-occ{margin:0;padding:16px 16px 10px;font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio);
  display:flex;align-items:center;gap:.6em}
.nv-occ::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--arancio)}
.nv-pezzo{display:block;text-decoration:none;padding:0 16px}
.nv-pezzo--primo img{width:100%;aspect-ratio:16/9;object-fit:cover}
.nv-pezzo--primo small{display:block;margin-top:10px}
.nv-pezzo--primo strong{font-size:.92rem;margin-top:5px;padding-bottom:16px;border-bottom:1px solid var(--filetto)}
.nv-pezzo small{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grigio)}
.nv-pezzo strong{display:block;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:-.005em;line-height:1.15}
.nv-riga{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;padding-block:11px;
  border-bottom:1px solid var(--filetto);margin-inline:16px;padding-inline:0}
.nv-riga img{width:64px;height:64px;object-fit:cover}
.nv-riga strong{margin-top:4px}
.nv-piede{padding:22px 16px 30px;text-align:center;font-size:.7rem;line-height:1.5;color:var(--grigio)}
.nv-piede img{height:24px;width:auto;margin:0 auto 12px}
.nv-piede p{margin:0}

/* LO SCORRIMENTO: automatico, lento, continuo. Le due copie identiche della mail stanno una sotto
   l'altra e il rullo sale di mezza altezza: quando finisce la prima, la seconda è esattamente dove
   la prima era partita, e il giro ricomincia senza stacco. È un'animazione CSS su transform: la
   disegna la scheda grafica, ⛔ il motore della pagina, quindi non scatta nemmeno mentre la rotella
   corre. Col mouse sopra si ferma, per leggere. */
@keyframes nlScorre{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@media (prefers-reduced-motion:no-preference){
  .nl-tel__rullo{animation:nlScorre 54s linear 1.4s infinite}
  .nl-tel:hover .nl-tel__rullo{animation-play-state:paused}
}

/* ═══ 2 · NEWSLETTER (newsletter.py) ═════════════════════════════════════════════════════════════
   ⚠️ la riga qui sopra chiude il blocco «il telefono:» che home.py rilegge da questo file: ⛔ toglierla */
.nl-h1{margin:0;font-size:min(clamp(3.2rem,.6rem + 8.6vw,10.5rem),17svh);font-weight:600;text-transform:uppercase;
  letter-spacing:-.065em;line-height:.84;display:flow-root}
.nl-h2{margin:0;font-size:clamp(2.4rem,5.4vw,5.6rem);font-weight:600;letter-spacing:-.06em;line-height:.88;text-transform:uppercase;display:flow-root}
.nl-h3{margin:0;font-size:clamp(1.6rem,2.5vw,2.6rem);font-weight:600;letter-spacing:-.05em;line-height:1.02;text-wrap:balance;display:flow-root}
.nl-tit{margin:0;max-width:15em;font-size:clamp(2.3rem,5.4vw,6.2rem);font-weight:600;letter-spacing:-.06em;line-height:.88;text-transform:uppercase;text-wrap:balance;display:flow-root}
:is(.nl-h1,.nl-tit,.nl-h3) i{font-style:normal;color:var(--arancio)}
.nl-dek{margin:0;max-width:40ch;font-size:clamp(1.02rem,1.2vw,1.2rem);font-weight:300;line-height:1.45;color:var(--su-notte)}

/* 1 · LA COPERTINA + COSA TROVI DENTRO: una sezione sola sul nero. Sinistra (col. 1-7) le parole, destra (col. 8-12)
   il telefono che resta fermo sotto la testata mentre la pagina scorre */
.nl-testa{background:var(--carbone);color:#fff;overflow:clip;padding-bottom:var(--sezione);
  --tel-h:clamp(460px,calc(100svh - var(--hd-h,150px) - 48px),760px)}
.nl-testa__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px}
.nl-cop{grid-column:1/8;grid-row:1;min-height:min(max(640px,100svh),1100px);display:flex;align-items:flex-end;
  padding:calc(var(--hd-h,150px) + 32px) 0 clamp(40px,4.4vw,80px)}
.nl-cop__in{width:100%}
.nl-cop__k{margin:0 0 clamp(20px,2vw,32px)}
.nl-cop__piede{margin-top:clamp(28px,3vw,48px);padding-top:16px;border-top:1px solid rgba(255,255,255,.32)}
.nl-cop__dek{margin:0 0 clamp(24px,2.4vw,36px);max-width:34ch;font-size:clamp(1.15rem,1.45vw,1.45rem);font-weight:300;line-height:1.38;color:var(--su-notte)}
.nl-form{scroll-margin-top:40vh}   /* dal bottone in fondo si torna qui, col titolo sopra */
.nl-tel-zona{grid-column:8/13;grid-row:1/3;position:relative;display:flex;justify-content:center;
  padding-top:calc(var(--hd-h,150px) + 24px)}
/* Francesco 30/10: il telefono sta CENTRATO nella finestra mentre si scorre (la testata ora sparisce scendendo);
   in apertura parte sotto la testata, poi sale al centro e lì resta */
.nl-tel-zona .nl-tel{position:sticky;top:calc((100svh - var(--tel-h)) / 2);align-self:flex-start;margin:0}
.nl-testa .nl-tel__vetro{overflow:hidden}
.nl-testa .nl-tel__rullo{animation:none}
.nl-testa .nl-tel__rullo img{display:block;width:100%;height:auto}
.nl-dentro{grid-column:1/8;grid-row:2}
/* sugli schermi bassi (un portatile con la barra del browser) la copertina deve stare tutta, campo email compreso */
@media (min-width:1001px) and (max-height:860px){
  .nl-h1{font-size:min(clamp(3.2rem,.6rem + 8.6vw,10.5rem),13.5svh)}
  .nl-cop__k{margin-bottom:16px}
  .nl-cop__piede{margin-top:22px}
  .nl-cop__dek{margin-bottom:20px}
}

/* la testa di «Cosa trovi dentro»: etichetta, titolo, sommario, sul filetto */
.nl-sez{border-top:1px solid rgba(255,255,255,.32);padding-top:clamp(28px,3vw,48px);margin:var(--sezione) 0 clamp(44px,5vw,84px)}
.nl-sez .hm-nl__k{margin:0 0 clamp(20px,2vw,28px)}
.nl-sez .nl-h2{margin-bottom:clamp(20px,2vw,28px)}

/* le tre voci: numero, titolo, sommario, poi la foto e i tre pezzi veri affiancati */
.nl-voci{list-style:none;margin:0;padding:0;display:grid;row-gap:clamp(64px,7vw,120px)}
.nl-v{border-top:1px solid rgba(255,255,255,.32);padding-top:16px}
.nl-v__n{margin:0 0 clamp(20px,2vw,32px);font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--arancio)}
.nl-v .nl-h3{max-width:18em}
.nl-v__p{margin:16px 0 0;max-width:40ch;font-size:clamp(1.02rem,1.2vw,1.2rem);font-weight:300;line-height:1.45;color:var(--su-notte)}
.nl-v__corpo{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:16px;margin-top:clamp(28px,3vw,44px);align-items:stretch}
/* niente didascalia (Francesco 30/10): la foto prende l'altezza della lista accanto, filo sopra e filo sotto */
.nl-v__foto{grid-column:1/4;margin:0;display:flex}
.nl-v__f{position:relative;flex:1;min-height:220px;overflow:clip;background:#241d17}
.nl-v__f img{position:absolute;top:-8%;left:0;width:100%;height:116%;object-fit:cover}
.nl-v__es{grid-column:4/8}
.nl-v__lab{margin:0 0 12px;font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.nl-es{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.5)}
.nl-es li{border-bottom:1px solid rgba(255,255,255,.16)}
.nl-es__a{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;align-items:center;padding:14px 0;text-decoration:none;color:inherit}
.nl-es__f{display:block;width:64px;height:64px;overflow:clip;background:#241d17}
.nl-es__f img{width:100%;height:100%;object-fit:cover;transition:scale .9s cubic-bezier(.22,1,.36,1)}
.nl-es__a--cop .nl-es__f{height:85px;background:transparent}
.nl-es__a--cop .nl-es__f img{object-fit:contain}
.nl-es small{display:block;margin-bottom:6px;font-size:.6875rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.nl-es strong{display:block;font-size:clamp(1rem,1.1vw,1.1rem);font-weight:600;letter-spacing:-.025em;line-height:1.2;text-wrap:pretty}
.nl-es .ti{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){.nl-es__a:hover .ti{background-size:100% 1px}.nl-es__a:hover .nl-es__f img{scale:1.1}}

/* 3 · COM'È SCRITTA: l'etichetta, la frase grande, poi foto (col. 1-7) e parole (col. 9-12), e la chiusa sul filetto */
.nl-scritta{padding-top:var(--sezione)}
.nl-scritta__k{margin:0 0 clamp(20px,2vw,32px)}
.nl-scritta .nl-tit{margin-bottom:clamp(44px,5vw,84px)}
/* «Com'è scritta» — un passo verticale solo: 24 (etichetta→titolo) · 24 (titolo→sommario) · 96 (→corpo) · 128 (→chiusa) */
.nl-s-testa .nl-tit{margin:0}
.nl-una__v{margin-left:-.5em;color:var(--arancio)}
.nl-s-dek{margin:clamp(20px,2vw,28px) 0 0;max-width:40ch;font-size:clamp(1.05rem,1.3vw,1.3rem);font-weight:300;line-height:1.45;color:var(--grigio)}
.nl-s-k{margin:clamp(64px,6.6vw,112px) 0 16px;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.nl-una{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;margin-top:clamp(64px,6.6vw,112px);border-top:1px solid var(--ink);padding-top:16px}
.nl-una__lato{grid-column:1/4;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.nl-una__lato .nl-s-k{margin:0}
.nl-una__lato .nl-num{margin:0;border:0;padding:0}
.nl-una__q{grid-column:4/13;margin:0;font-size:clamp(2rem,1rem + 2.9vw,4.2rem);font-weight:400;letter-spacing:-.045em;line-height:1.06;text-wrap:balance}
.nl-scritta .nl-fine{margin-top:clamp(80px,8.6vw,144px)}
.nl-num{list-style:none;margin:clamp(28px,3vw,44px) 0 0;padding:16px 0 0;border-top:1px solid var(--filo)}
.nl-num b{display:block;font-size:clamp(2.6rem,1.2rem + 3vw,5rem);font-weight:600;letter-spacing:-.06em;line-height:.86;font-variant-numeric:tabular-nums;white-space:nowrap}
.nl-num p{margin:12px 0 0;max-width:24ch;font-size:clamp(.95rem,1.05vw,1.05rem);font-weight:300;line-height:1.38;color:var(--grigio)}
.nl-fine{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 32px;
  margin-top:clamp(56px,6vw,100px);border-top:1px solid var(--ink);padding-top:clamp(28px,3vw,48px)}
.nl-fine .nl-h3{font-size:clamp(1.8rem,3.2vw,3.4rem);text-transform:uppercase;letter-spacing:-.055em;line-height:.92}
.nl-fine p{margin:16px 0 0;font-size:clamp(1.02rem,1.2vw,1.2rem);font-weight:300;line-height:1.45;color:var(--grigio)}
.fb--su .fb__f{rotate:-45deg}

/* 4 · LA CHIUSA: «Scopri FUL» in chiaro (come About e Pubblicità) */
.nl-fine-sc{margin-top:0;background:transparent;color:var(--ink)}
.nl-fine-sc .sc{border-top-color:var(--ink)}
.nl-fine-sc .sc li+li,.nl-fine-sc .sc li:last-child{border-color:var(--filo)}
.nl-fine-sc .sc__k{color:var(--grigio)}
.nl-fine-sc .sc__k .pc__n{color:var(--ink)}
.nl-fine-sc .sc__foto{background:var(--sporco)}
.nl-fine-sc .sc__fr{border-color:var(--filetto-forte)}

.hm-js .nl-cop__in{visibility:hidden}

@media(max-width:1000px){
  .nl-testa{--tel-h:560px}
  .nl-cop,.nl-dentro{grid-column:1/-1}
  .nl-cop{min-height:0;padding-bottom:56px}
  .nl-tel-zona{grid-column:1/-1;grid-row:2;padding-top:0}
  .nl-tel-zona .nl-tel{position:relative;top:auto}
  .nl-dentro{grid-row:3}
  /* stretto: etichetta, poi la frase, poi gli iscritti (⛔ il numero prima della frase che presenta) */
  .nl-una{display:flex;flex-direction:column}
  .nl-una__lato{display:contents}
  .nl-una__q{order:1;margin-top:24px}
  .nl-una__lato .nl-num{order:2;margin-top:40px}
}
@media(max-width:700px){
  .nl-testa{--tel-h:520px}
  .nl-h1{font-size:clamp(2.6rem,13.4vw,4.4rem)}
  .nl-v__corpo{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .nl-v__foto,.nl-v__es{grid-column:1}
  .nl-v__f{aspect-ratio:4/3}
  .nl-una__v{margin-left:0}   /* al telefono la virgoletta ⛔ sporge: il margine è troppo stretto */
    .nl-fine .fb{width:100%;justify-content:space-between}
}

/* ═══ la riga d'esito che newsletter.js mette nei form (02/11/2026): vuota non esiste, piena parla sotto il bottone ═══ */
form .nl-esito:empty{display:none}
.nl-form .nl-esito{margin:14px 0 0;font-size:.9375rem;line-height:1.5;color:#fff}